/* LUMO — activity layouts. */

/* ---------------------------------------------------------------- cards --- */
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 9rem; padding: 1rem; border-radius: var(--r); background: #fff;
  box-shadow: 0 0.4rem 0 color-mix(in srgb, var(--zone) 45%, #e9e3f3), var(--lift);
  border: 0.22rem solid transparent;
  transition: transform 0.22s var(--spring), box-shadow 0.22s, border-color 0.2s, opacity 0.3s, filter 0.3s;
  animation: popIn 0.5s var(--spring) both;
}
.answers .card:nth-child(2) { animation-delay: 0.06s; } .answers .card:nth-child(3) { animation-delay: 0.12s; } .answers .card:nth-child(4) { animation-delay: 0.18s; }
.card:hover { transform: translateY(-0.35rem) scale(1.02); }
.card:active, .card.pressed { transform: translateY(0.3rem) scale(0.98); box-shadow: 0 0.1rem 0 color-mix(in srgb, var(--zone) 45%, #e9e3f3), var(--lift-s); }
.card-art { width: min(8rem, 70%); max-height: 9rem; }
.card-label { font-family: 'Fredoka'; font-weight: 600; font-size: 1.2rem; text-align: center; line-height: 1.15; }
.card.text-only .card-text { font-family: 'Fredoka'; font-weight: 600; font-size: 1.5rem; text-align: center; line-height: 1.2; }
.card.numeric .card-text { font-size: 3.4rem; line-height: 1; }
.card.is-right { border-color: var(--good); box-shadow: 0 0.4rem 0 #1f9a59, 0 0 0 0.4rem rgba(47, 191, 113, 0.22), var(--lift); transform: scale(1.06); z-index: 2; }
.card.is-right::after { content: '✓'; position: absolute; top: -1rem; right: -1rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; font-size: 1.4rem; font-weight: 900; box-shadow: var(--lift-s); animation: popIn 0.4s var(--spring) both; }
.card.is-wrong { opacity: 0.45; filter: grayscale(0.6); }
.card.hint, .bin.hint { animation: hintGlow 1s ease-in-out infinite; z-index: 2; }
@keyframes hintGlow { 0%, 100% { box-shadow: 0 0 0 0.3rem rgba(255, 191, 31, 0.6), var(--lift); transform: scale(1.04); } 50% { box-shadow: 0 0 0 0.9rem rgba(255, 191, 31, 0.15), var(--lift); transform: scale(1.08); } }
.solved .card:not(.is-right) { opacity: 0.35; transform: scale(0.94); }

/* ----------------------------------------------------------------- pick --- */
.pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.show { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; width: 100%; }
.show:empty { display: none; }
.show-art { width: auto; height: min(26vh, 13rem); }
.show-art.shadow { filter: brightness(0) opacity(0.82) drop-shadow(0 0.4rem 0.2rem rgba(0, 0, 0, 0.1)); transition: filter 0.6s; }
.show-art.shadow.revealed { filter: drop-shadow(0 0.35rem 0.4rem rgba(43, 29, 69, 0.18)); }
.show-word { padding: 0.6rem 2.4rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 500; font-size: clamp(3rem, 9vmin, 6rem); letter-spacing: 0.04em; }
.show-caption { font-family: 'Fredoka'; font-size: 2rem; font-weight: 500; color: var(--ink-2); }
.show-quote { max-width: 46rem; padding: 1.4rem 2rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 500; font-size: 1.9rem; text-align: center; line-height: 1.3; }
.show-big { padding: 0.8rem 2rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: clamp(2.2rem, 7vmin, 4.6rem); white-space: pre; }
.show-scene { display: flex; gap: 1rem; align-items: center; padding: 1rem 2rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.7); }
.scene-art { width: auto; height: min(20vh, 10rem); }
.show-count { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: 0.6rem 1.2rem; padding: 1rem 1.6rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.75); }
.count-art { width: clamp(3rem, 8vmin, 5.2rem); transform: rotate(var(--r, 0deg)); transition: transform 0.25s var(--spring), filter 0.25s; }
.count-art.counted { transform: scale(1.18) rotate(0deg); filter: drop-shadow(0 0 0.6rem rgba(255, 200, 40, 0.9)); }
.count-art.gone { opacity: 0.25; filter: grayscale(1); transform: translateY(-1rem) rotate(12deg); }
.show-story, .show-groups { display: flex; align-items: center; gap: 1.4rem; padding: 1rem 1.6rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.75); }
.show-story .group, .show-groups .group { display: flex; flex-wrap: wrap; max-width: 22rem; gap: 0.3rem; justify-content: center; }
.show-story .count-art { width: clamp(2.4rem, 6vmin, 3.8rem); }
.op { font-family: 'Fredoka'; font-size: 3rem; font-weight: 700; color: var(--zone); }
.op-n { font-family: 'Fredoka'; font-size: 3rem; font-weight: 700; }
.show-seq { display: flex; gap: 0.8rem; align-items: center; padding: 1rem 1.4rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.75); }
.seq-art { width: clamp(3rem, 8vmin, 5.4rem); }
.seq-q { width: clamp(3rem, 8vmin, 5.4rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.2rem; border: 0.25rem dashed var(--zone); font-family: 'Fredoka'; font-size: 2.6rem; color: var(--zone); }
.show-sound { width: 9rem; height: 9rem; border-radius: 50%; background: #fff; box-shadow: var(--lift); font-size: 4rem; display: grid; place-items: center; }
.answers { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 15rem)); gap: 1.4rem; justify-content: center; width: 100%; }
.answers .card { min-height: min(28vh, 14rem); }
.group-card { min-height: 15rem; padding-bottom: 0; overflow: hidden; justify-content: flex-end; }
.group-card .group { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: 0.2rem 0.6rem; margin-bottom: -0.4rem; position: relative; z-index: 1; }
.group-card .count-art { width: 3.2rem; }
.group-card .basket { width: 8rem; margin-top: -1.2rem; }

/* ----------------------------------------------------------------- sort --- */
.sort { display: flex; flex-direction: column; gap: 1.4rem; }
.sort-stage { flex: 1; display: grid; place-items: center; min-height: 0; }
.sort-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.4rem 2.4rem; border-radius: 2rem; background: #fff; box-shadow: var(--lift); cursor: grab; touch-action: none; }
.sort-item.dragging { cursor: grabbing; box-shadow: 0 2rem 3rem rgba(43, 29, 69, 0.25); z-index: 5; }
.sort-art { width: auto; height: min(24vh, 11rem); }
.sort-label { font-family: 'Fredoka'; font-weight: 600; font-size: 1.6rem; text-align: center; max-width: 24rem; }
.bins { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 17rem)); gap: 1.2rem; justify-content: center; }
.bin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.8rem 1.2rem; border-radius: 1.6rem 1.6rem 2.4rem 2.4rem; background: linear-gradient(180deg, #fff, #f6f2fb); box-shadow: 0 0.4rem 0 color-mix(in srgb, var(--zone) 45%, #e0d9ec), var(--lift); border-top: 0.5rem solid var(--zone); transition: transform 0.2s var(--spring), box-shadow 0.2s; }
.bin:hover, .bin.over { transform: translateY(-0.4rem) scale(1.04); }
.bin.over { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--zone) 50%, #fff), var(--lift); }
.bin-art { width: 4rem; height: 4.6rem; }
.bin-art svg, svg.bin-art { width: auto; height: 100%; }
.bin-label { font-family: 'Fredoka'; font-weight: 600; font-size: 1.15rem; text-align: center; line-height: 1.15; }
.bin-count { position: absolute; top: -0.8rem; right: -0.6rem; min-width: 2rem; height: 2rem; padding: 0 0.5rem; display: grid; place-items: center; border-radius: 99px; background: var(--zone); color: #fff; font-weight: 900; box-shadow: var(--lift-s); }
.bin-count:empty { display: none; }
.bin.gulp { animation: gulp 0.45s var(--spring); }
@keyframes gulp { 40% { transform: scale(1.12, 0.9); } }
.bin.is-wrong { animation: shake 0.5s both; }

/* ---------------------------------------------------------------- order --- */
.order { display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; }
.timeline { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 12rem)); gap: 1rem; justify-content: center; position: relative; }
.timeline::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 0.35rem; border-radius: 99px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--zone) 55%, #fff) 0 1rem, transparent 1rem 1.6rem); }
.slot { position: relative; aspect-ratio: 0.9; border-radius: var(--r); border: 0.22rem dashed color-mix(in srgb, var(--zone) 60%, #fff); background: rgba(255, 255, 255, 0.55); display: grid; place-items: center; transition: all 0.3s var(--spring); }
.slot.next { border-style: solid; border-color: var(--zone); background: #fff; box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--zone) 18%, transparent); transform: scale(1.04); }
.slot.filled { border-color: transparent; background: transparent; }
.slot-n { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--zone); color: #fff; font-family: 'Fredoka'; font-weight: 700; z-index: 3; }
.slot .card { position: absolute; inset: 0; min-height: 0; animation: none; }
.slot .card-art { width: 60%; }
.slot .card-label { font-size: 0.95rem; }
.tray { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 12rem)); gap: 1rem; justify-content: center; min-height: 11rem; }
.tray .card { aspect-ratio: 0.9; min-height: 0; }
.tray .card-art { width: 60%; }
.tray .card-label { font-size: 1rem; }
.step.placed { cursor: default; }

/* --------------------------------------------------------------- memory --- */
.memory { display: grid; place-items: center; }
.mem-grid { display: grid; grid-template-columns: repeat(var(--cols), min(11rem, 17vmin)); gap: 1rem; }
.mem-card { aspect-ratio: 1; perspective: 60rem; }
.mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s var(--spring); }
.mem-card.up .mem-inner, .mem-card.done .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: 1.4rem; backface-visibility: hidden; display: grid; place-items: center; box-shadow: var(--lift); }
.mem-back { background: linear-gradient(135deg, var(--violet), #b39dff); color: #fff; font-size: 2.4rem; }
.mem-back span { opacity: 0.85; }
.mem-front { background: #fff; transform: rotateY(180deg); padding: 14%; }
.mem-card.done .mem-front { box-shadow: 0 0 0 0.3rem var(--good), var(--lift); animation: pulse 0.6s 1; }
.mem-card:hover:not(.up):not(.done) .mem-inner { transform: translateY(-0.3rem) rotateY(8deg); }

/* ---------------------------------------------------------------- simon --- */
.simon { display: grid; place-items: center; }
.simon-pads { display: grid; grid-template-columns: repeat(2, min(15rem, 26vmin)); gap: 1.4rem; }
.simon-pad { --c: #888; aspect-ratio: 1; border-radius: 2.4rem; background: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 0.5rem 0 color-mix(in srgb, var(--c) 70%, #000 10%), var(--lift); display: grid; place-items: center; transition: transform 0.12s, background 0.12s, box-shadow 0.12s; }
.simon-art { width: 58%; transition: transform 0.15s var(--spring); }
.simon-pad.lit { background: var(--c); transform: scale(1.06); box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--c) 35%, transparent), 0 0 3rem var(--c); }
.simon-pad.lit .simon-art { transform: scale(1.2) rotate(-6deg); }
.simon.watching .simon-pad { pointer-events: none; }

/* ---------------------------------------------------------------- trace --- */
.trace { display: flex; align-items: center; justify-content: center; gap: 3rem; }
.trace-svg { height: min(70vh, 34rem); aspect-ratio: 1; border-radius: 2.4rem; background: #fff; box-shadow: var(--lift); touch-action: none; cursor: crosshair; }
.trace-svg .guide { fill: none; stroke: #ece6f5; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .guide.active { stroke: color-mix(in srgb, var(--zone) 22%, #fff); }
.trace-svg .center { fill: none; stroke: color-mix(in srgb, var(--zone) 60%, #fff); stroke-width: 1.4; stroke-dasharray: 2.5 3; stroke-linecap: round; }
.trace-svg .ink { fill: none; stroke: var(--zone); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .ink.done { stroke: color-mix(in srgb, var(--zone) 85%, #000); }
.trace-svg .start-dot { fill: var(--good); stroke: #fff; stroke-width: 2.5; animation: dotPulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.trace-svg .start-dot.nudge { animation: dotNudge 0.5s ease-in-out 2; }
@keyframes dotPulse { 50% { transform: scale(1.3); } }
@keyframes dotNudge { 50% { transform: scale(1.8); } }
.trace-svg .arrow { fill: var(--good); opacity: 0.85; }
.trace-svg .pen { fill: var(--ink); opacity: 0.25; display: none; }
.trace-svg .pen.on { display: block; }
.trace-svg.glyph-done { animation: pulse 0.7s 1; }
.trace-side { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.trace-hint { width: 10rem; animation: bob 3s ease-in-out infinite; }
.trace-count { display: grid; grid-template-columns: repeat(3, 3.6rem); gap: 0.4rem; }
.trace-count .count-art { width: 3.6rem; }

/* -------------------------------------------------------- calm / routine --- */
.breathe, .routine, .move { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.balloon { width: 14rem; transform: scale(0.55); transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1); }
.breathe.in .balloon { transform: scale(1.25) translateY(-8%); }
.breathe.out .balloon { transform: scale(0.55); }
.breathe-label { font-family: 'Fredoka'; font-weight: 600; font-size: 2.4rem; min-height: 3rem; }
.breathe-dots { display: flex; gap: 0.6rem; }
.breathe-dots span { width: 1rem; height: 1rem; border-radius: 50%; background: #e8e2f2; transition: background 0.4s; }
.breathe-dots span.on { background: var(--zone); }
.hold-btn { padding: 1rem 2.2rem; border-radius: 99px; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: 1.2rem; transition: all 0.2s; touch-action: none; }
.hold-btn.on { background: var(--zone); color: #fff; transform: scale(0.96); }
.ring { position: relative; width: min(52vh, 24rem); aspect-ratio: 1; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: #fff; stroke: #eee8f6; stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--zone); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.ring-center { position: absolute; inset: 22%; display: grid; place-items: center; }
.ring-time { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: 'Fredoka'; font-weight: 600; font-size: 1.8rem; }
.routine-step { max-width: 40rem; text-align: center; font-family: 'Fredoka'; font-weight: 500; font-size: 1.6rem; }
.move-art { width: 14rem; }
.move-text { max-width: 40rem; text-align: center; font-family: 'Fredoka'; font-weight: 600; font-size: 2rem; }
.move-count { font-family: 'Fredoka'; font-weight: 700; font-size: 2.6rem; color: var(--zone); min-height: 3rem; }

/* ---------------------------------------------------------------- clock --- */
.clockgame { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 1rem 2.6rem; align-items: center; justify-items: center; }
.clock-target { grid-column: 1 / -1; padding: 0.4rem 2rem; border-radius: 1.4rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: 3rem; }
.clock-face { grid-row: 2 / 4; width: min(58vh, 28rem) !important; height: auto !important; aspect-ratio: 1; filter: drop-shadow(0 1rem 1.4rem rgba(43, 29, 69, 0.2)); touch-action: none; cursor: grab; }
.clock-ctrl { display: flex; flex-direction: column; gap: 1rem; }
.ctl-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.8rem; border-radius: 1.4rem; background: #fff; box-shadow: var(--lift-s); }
.ctl-group span { grid-column: 1 / -1; text-align: center; font-weight: 800; }
.ctl-group .btn { font-size: 2rem; min-height: 3.6rem; }
.ctl-group:first-child span { color: #e2562f; }

/* ----------------------------------------------------------------- shop --- */
.shop { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: center; }
.shop-left { display: grid; place-items: center; }
.goods { position: relative; padding: 2rem; border-radius: 2rem; background: #fff; box-shadow: var(--lift); }
.goods-art { width: 13rem; }
.price-tag { position: absolute; right: -1.6rem; bottom: 1rem; padding: 0.5rem 1.2rem; border-radius: 0.8rem; background: #ffe066; font-family: 'Fredoka'; font-weight: 700; font-size: 2rem; transform: rotate(-6deg); box-shadow: var(--lift-s); }
.shop-right { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; }
.tray-money { min-height: 6rem; width: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; align-items: center; padding: 0.6rem; border-radius: 1.4rem; background: rgba(255, 255, 255, 0.6); border: 0.2rem dashed #d8cfe8; }
.in-tray { width: 4.8rem; }
.in-tray svg { width: 100%; height: auto; }
.money-total { font-family: 'Fredoka'; font-weight: 600; font-size: 1.5rem; }
.purse { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.coin-btn { width: 7.2rem; transition: transform 0.15s var(--spring); }
.coin-btn svg { width: 100%; height: auto; }
.coin-btn:hover { transform: translateY(-0.3rem) rotate(-4deg); }
.coin-btn:active { transform: scale(0.92); }

/* --------------------------------------------------- portrait adjustments --- */
@media (max-aspect-ratio: 1/1) {
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answers .card { min-height: 9rem; }
  .bins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline, .tray { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.5rem; }
  .tray .card-label, .slot .card-label { font-size: 0.7rem; }
  .trace { flex-direction: column; gap: 1rem; }
  .trace-svg { height: auto; width: min(92vw, 30rem); }
  .shop, .clockgame { grid-template-columns: 1fr; }
  .clock-face { grid-row: auto; }
}