/* LUMO — v2 mechanics: writing on Seyès paper, studio, reading & writing, maths material, code, puzzles. */

/* tracing: Seyès paper, wide words */
.trace.wide { flex-direction: column; gap: 1.2rem; }
.trace.wide .trace-svg { height: auto; width: min(100%, 64rem); max-height: 58vh; }
.trace-svg .sy { stroke: #cfe0f3; stroke-width: 0.7; }
.trace-svg .sy.mid { stroke: #a9c6ea; stroke-width: 0.9; }
.trace-svg .sy.base { stroke: #6f9bd6; stroke-width: 1.3; }
.trace-svg .sy.margin { stroke: #f2a3a3; stroke-width: 1; }
.trace-svg.seyes .guide { stroke: #eceaf4; }
.trace-word { font-family: 'Fredoka'; font-weight: 600; font-size: 2.4rem; padding: 0.3rem 1.4rem; border-radius: 1rem; background: #fff; box-shadow: var(--lift-s); }

/* studio: draw & colour */
.studio, .coloring { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: stretch; }
.paper { position: relative; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); overflow: hidden; min-height: 50vh; touch-action: none; }
.paper.framed { box-shadow: 0 0 0 0.6rem #fff, 0 0 0 0.85rem var(--zone), var(--lift); }
.draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.guide-layer { position: absolute; inset: 4%; width: 92%; height: 92%; pointer-events: none; }
.guide-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.guide-layer path.new { stroke: #8b6cff; stroke-width: 3; stroke-dasharray: 2 9; animation: guideIn 0.8s both; }
.guide-layer path.old { stroke: #c9c0dd; stroke-width: 2; stroke-dasharray: 2 9; opacity: 0.45; }
@keyframes guideIn { from { opacity: 0; } }
.draw-tools { display: flex; flex-direction: column; gap: 0.9rem; width: 15rem; }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.7rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); }
.palette.big { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.swatch { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -0.2rem 0 rgba(0, 0, 0, 0.15), 0 0 0 0.12rem rgba(43, 29, 69, 0.15); transition: transform 0.15s var(--spring); }
.swatch.on { transform: scale(1.18); box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.42rem var(--ink); }
.swatch.hint { animation: hintGlow 1s infinite; }
.sizes { display: flex; justify-content: space-around; padding: 0.5rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); }
.size { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; }
.size i { display: block; border-radius: 50%; background: var(--ink); }
.size.on { background: #f1ecfa; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.tool { padding: 0.5rem 0.2rem; border-radius: 0.8rem; background: #fff; box-shadow: var(--lift-s); font-weight: 800; font-size: 0.8rem; }
.tool.on { background: var(--ink); color: #fff; }
.stickers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0.5rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); }
.stk { padding: 0.25rem; border-radius: 0.7rem; }
.stk.on { background: #f1ecfa; box-shadow: inset 0 0 0 0.15rem var(--violet); }
.studio-done { margin-top: auto; }
.color-paper { display: grid; place-items: center; padding: 1rem; }
.color-paper svg { width: 100%; height: 100%; max-height: 70vh; }
.cpage [data-r] { cursor: pointer; transition: fill 0.25s; }
.cpage [data-r].target { animation: targetPulse 1.2s ease-in-out infinite; }
@keyframes targetPulse { 50% { fill: #fff3b0; } }

/* spell (lettres mobiles) */
.spell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.spell-top { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.spell-art { height: min(22vh, 10rem); width: auto; }
.slots { display: flex; gap: 0.5rem; }
.lslot { width: 3.6rem; height: 4.4rem; display: grid; place-items: center; border-radius: 0.9rem; border: 0.2rem dashed color-mix(in srgb, var(--zone) 50%, #ccc); background: rgba(255, 255, 255, 0.7); font-family: 'Fredoka'; font-weight: 600; font-size: 2.6rem; }
.slots.no-count .lslot:not(.filled) { display: none; }
.slots.no-count::after { content: '…'; font-family: 'Fredoka'; font-size: 2.6rem; color: var(--ink-2); }
.slots.no-count.done::after { content: ''; }
.lslot.filled { border: 0; background: #fff; box-shadow: var(--lift-s); animation: popIn 0.35s var(--spring); }
.slots.done .lslot { background: #e5f8ec; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 46rem; }
.tile-letter { width: 4.2rem; height: 4.6rem; border-radius: 1rem; background: #fff; box-shadow: 0 0.3rem 0 color-mix(in srgb, var(--zone) 45%, #ddd), var(--lift-s); font-family: 'Fredoka'; font-weight: 600; font-size: 2.6rem; transition: transform 0.15s var(--spring), opacity 0.2s; }
.tile-letter:active { transform: translateY(0.2rem); }
.tile-letter.used { opacity: 0.15; pointer-events: none; }
.tile-letter.hint { animation: hintGlow 1s infinite; }
.cursive-word { height: 6rem; width: auto; background: #fff; border-radius: 1rem; box-shadow: var(--lift-s); padding: 0.3rem; }
.cursive-word .sy { stroke: #cfe0f3; stroke-width: 0.7; }
.cursive-word .sy.base { stroke: #6f9bd6; stroke-width: 1.2; }
.cursive-word .cw { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: writeIn 2.4s ease-out forwards; }
@keyframes writeIn { to { stroke-dashoffset: 0; } }
.listen { align-self: center; }

/* sentence */
.sentence { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.sent-art { height: min(18vh, 8rem); width: auto; }
.sent-line { min-height: 4.6rem; min-width: min(46rem, 90%); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; align-items: center; padding: 0.6rem 1rem; border-radius: 1.2rem; border-bottom: 0.25rem solid color-mix(in srgb, var(--zone) 50%, #ccc); background: rgba(255, 255, 255, 0.6); }
.sent-line.done { background: #e5f8ec; border-color: var(--good); }
.placed-word { font-family: 'Fredoka'; font-weight: 500; font-size: 2.2rem; }
.sent-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 52rem; }
.word-tile { padding: 0.6rem 1.2rem; border-radius: 1rem; background: #fff; box-shadow: 0 0.3rem 0 color-mix(in srgb, var(--zone) 45%, #ddd), var(--lift-s); font-family: 'Fredoka'; font-weight: 500; font-size: 2rem; }
.word-tile.used { opacity: 0.15; pointer-events: none; }
.word-tile.hint { animation: hintGlow 1s infinite; }

/* tapword */
.tapword { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.tw-q { padding: 0.6rem 1.6rem; border-radius: 99px; background: var(--ink); color: #fff; font-family: 'Fredoka'; font-weight: 500; font-size: 1.4rem; text-align: center; }
.tw-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 60rem; padding: 1.2rem 1.6rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); }
.tw-word { padding: 0.3rem 0.6rem; border-radius: 0.7rem; font-family: 'Fredoka'; font-weight: 500; font-size: 2.4rem; transition: background 0.2s; }
.tw-word:hover { background: #f4f0fb; }
.tw-word.is-right { background: #d8f5e3; box-shadow: inset 0 -0.25rem 0 var(--good); }
.tw-word.hint { animation: hintGlow 1s infinite; }
.tw-left { color: var(--ink-2); font-weight: 800; min-height: 1.4rem; }

/* reader */
.reader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.book { position: relative; max-width: 50rem; max-height: 62vh; overflow: auto; padding: 1.6rem 2.2rem; border-radius: 1.6rem; background: #fffdf7; box-shadow: var(--lift); border-left: 0.6rem solid var(--zone); }
.book-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.book-art { width: 4.6rem; }
.book h2 { margin: 0; font-weight: 600; font-size: 1.8rem; }
.book-p { margin: 0 0 0.7rem; font-family: 'Nunito'; font-weight: 600; font-size: 1.35rem; line-height: 1.6; transition: background 0.3s; border-radius: 0.5rem; }
.book-p.reading { background: #fff3c4; }
.book-p.look { background: #ffe6ef; box-shadow: 0 0 0 0.3rem #ffe6ef; }
.book-btns { display: flex; gap: 1rem; }
.reader:has(.book.side) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.book.side { max-height: 74vh; }
.book.side .book-p { font-size: 1.1rem; }
.qbox { display: flex; flex-direction: column; gap: 0.8rem; }
.q-text { font-family: 'Fredoka'; font-weight: 500; font-size: 1.6rem; }
.q-kind { align-self: flex-start; padding: 0.15rem 0.8rem; border-radius: 99px; background: #efeafa; color: var(--violet); font-weight: 800; font-size: 0.8rem; }
.answers.vertical { grid-template-columns: 1fr; }
.answers.vertical .card { min-height: 4.6rem; flex-direction: row; justify-content: flex-start; padding: 0.8rem 1.4rem; }
.answers.vertical .card .card-text { font-size: 1.25rem; text-align: left; }

/* writer */
.writer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.6rem; align-items: start; }
.w-left { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.w-art { width: 8rem; }
.w-prompt { font-family: 'Fredoka'; font-weight: 500; font-size: 1.5rem; line-height: 1.3; }
.w-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.w-bank small { width: 100%; color: var(--ink-2); font-weight: 800; }
.w-chip { padding: 0.35rem 0.8rem; border-radius: 99px; background: #fff; box-shadow: var(--lift-s); font-weight: 700; }
.w-right { display: flex; flex-direction: column; gap: 0.8rem; }
.w-text { width: 100%; min-height: 40vh; padding: 1rem 1.2rem; border-radius: 1.2rem; border: 0.18rem solid var(--line); background: #fffdf7 repeating-linear-gradient(transparent 0 2.15rem, #dfe9f6 2.15rem 2.2rem); font: 600 1.35rem/2.2rem 'Nunito'; color: var(--ink); resize: vertical; outline: none; user-select: text; -webkit-user-select: text; }
.w-text:focus { border-color: var(--zone); }
.w-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; font-weight: 700; }
.w-checks li::before { content: '○'; display: inline-block; width: 1.4rem; color: var(--ink-2); }
.w-checks li.ok { color: #1f9a59; }
.w-checks li.ok::before { content: '✓'; color: #1f9a59; }
.w-checks li.self::before { content: '☐'; }

/* number line */
.numline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; }
.nl-target { padding: 0.4rem 2rem; border-radius: 1.4rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: 3.4rem; }
.nl-wrap { width: min(90%, 64rem); padding: 4rem 2rem 3rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); touch-action: none; cursor: pointer; }
.nl-bar { position: relative; height: 0.4rem; border-radius: 99px; background: var(--ink); }
.nl-tick { position: absolute; top: -0.5rem; width: 0.15rem; height: 1.4rem; background: var(--ink); transform: translateX(-50%); }
.nl-tick.big { top: -0.9rem; height: 2.2rem; width: 0.22rem; }
.nl-tick span { position: absolute; top: 2.6rem; left: 50%; transform: translateX(-50%); font-family: 'Fredoka'; font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.nl-marker { position: absolute; bottom: 0.2rem; width: 3rem; transform: translateX(-50%); transition: left 0.12s; }
.nl-marker::after { content: attr(data-v); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 0.1rem 0.5rem; border-radius: 0.5rem; background: var(--zone); color: #fff; font-weight: 800; font-size: 0.9rem; }
.nl-marker.hint { animation: hintGlow 1s infinite; }

/* blocks */
.blocks { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bl-target { padding: 0.3rem 1.8rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: 3rem; }
.bl-table { display: flex; gap: 1rem; }
.bl-col { min-width: 11rem; min-height: 14rem; padding: 0.6rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.bl-col b { font-family: 'Fredoka'; font-weight: 600; }
.bl-col.h b { color: #8b5cf6; } .bl-col.t b { color: #2f80ed; } .bl-col.u b { color: #ff7a59; }
.bl-stack { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; align-content: flex-start; max-width: 12rem; }
i.plate { display: block; width: 3.4rem; height: 3.4rem; border-radius: 0.3rem; background: repeating-linear-gradient(90deg, #a78bfa 0 0.32rem, #8b5cf6 0.32rem 0.34rem), #a78bfa; box-shadow: inset 0 0 0 0.12rem #6d28d9; }
i.rod { display: block; width: 0.6rem; height: 5rem; border-radius: 0.2rem; background: repeating-linear-gradient(180deg, #6aa8f5 0 0.46rem, #2f80ed 0.46rem 0.5rem); box-shadow: inset 0 0 0 0.1rem #1d5fbf; }
i.cube { display: block; width: 0.9rem; height: 0.9rem; border-radius: 0.15rem; background: #ff9a7a; box-shadow: inset 0 0 0 0.1rem #e2562f; }
.bl-btn i { display: inline-block; vertical-align: middle; margin-right: 0.4rem; }
.bl-btn i.plate { width: 1.4rem; height: 1.4rem; } .bl-btn i.rod { width: 0.4rem; height: 1.6rem; } .bl-btn i.cube { width: 0.7rem; height: 0.7rem; }
.bl-total { font-family: 'Fredoka'; font-weight: 500; font-size: 1.3rem; min-height: 1.8rem; }
.bl-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.bl-btn { padding: 0.6rem 1.1rem; border-radius: 1rem; background: #fff; box-shadow: var(--lift-s); font-family: 'Fredoka'; font-weight: 600; font-size: 1.2rem; }

/* symmetry */
.symmetry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.sym-grid { display: grid; grid-template-columns: repeat(var(--n), min(3.6rem, 7vh)); padding: 0.6rem; border-radius: 1rem; background: #fff; box-shadow: var(--lift); }
.sym-cell { aspect-ratio: 1; border: 1px solid #dfe9f6; background: #fff; }
.sym-cell.model { background: var(--zone); }
.sym-cell.on { background: color-mix(in srgb, var(--zone) 70%, #fff); }
.sym-cell.bad { background: #ffb3b3; }
.sym-cell.hint { box-shadow: inset 0 0 0 0.25rem #ffbf1f; }
.sym-cell.axis-l { border-right: 0.3rem solid #ef3e36; }
.sym-grid.done .sym-cell.on { background: var(--zone); }

/* code */
.code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; }
.code-board { position: relative; display: grid; grid-template-columns: repeat(var(--c), min(5.4rem, 10vh)); grid-template-rows: repeat(var(--r), min(5.4rem, 10vh)); border-radius: 1rem; background: #e9f6df; box-shadow: var(--lift); overflow: hidden; }
.code-cell { border: 1px solid rgba(80, 140, 60, 0.18); display: grid; place-items: center; padding: 14%; }
.code-cell.rock { background: #d9d2c4; }
.code-cell .star { transition: transform 0.3s var(--spring), opacity 0.3s; }
.code-cell.got .star { transform: scale(1.6); opacity: 0; }
.code-bot { position: absolute; left: 0; top: 0; width: calc(100% / var(--c)); height: calc(100% / var(--r)); padding: 10%; z-index: 2; }
.code-bot.bump { animation: shake 0.4s; }
.code-right { display: flex; flex-direction: column; gap: 0.9rem; }
.code-label { font-weight: 800; color: var(--ink-2); }
.code-prog { min-height: 4.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem; border-radius: 1rem; background: #fff; box-shadow: var(--lift-s); }
.code-prog .op { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 0.7rem; background: #2f80ed; color: #fff; font-size: 1.6rem; font-weight: 800; transition: transform 0.15s; }
.code-prog .op.rep { background: #8b5cf6; font-size: 1.1rem; }
.code-prog .op.now { box-shadow: 0 0 0 0.25rem #ffbf1f; transform: scale(1.1); }
.code-pal { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.code-btn { width: 4.4rem; height: 4.4rem; border-radius: 1rem; background: #fff; box-shadow: 0 0.3rem 0 #c9d8ef, var(--lift-s); font-size: 2rem; font-weight: 800; color: #2f80ed; }
.code-btn.rep { color: #8b5cf6; font-size: 1.4rem; }
.code-btn.util { color: var(--ink-2); }
.code-btn.go { width: 8rem; background: linear-gradient(180deg, #5ee08a, #2fbf71); color: #fff; font-size: 1.4rem; box-shadow: 0 0.3rem 0 #1f9a59, var(--lift-s); }

/* puzzle */
.puzzle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; }
.pz-board { position: relative; display: grid; grid-template-columns: repeat(var(--c), min(9rem, 20vh)); grid-template-rows: repeat(var(--r), min(9rem, 20vh)); gap: 0.2rem; padding: 0.4rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift); }
.pz-ghost { position: absolute; inset: 0.4rem; width: calc(100% - 0.8rem); height: calc(100% - 0.8rem); object-fit: fill; opacity: 0.12; filter: grayscale(1); pointer-events: none; }
.pz-slot { position: relative; border-radius: 0.4rem; border: 0.15rem dashed #d8d0e6; background-repeat: no-repeat; }
.pz-slot.full { border: 0; animation: popIn 0.35s var(--spring); }
.pz-board.done { gap: 0; }
.pz-tray { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.pz-piece { width: min(8rem, 17vh); aspect-ratio: 1; border-radius: 0.6rem; background-color: #fff; background-repeat: no-repeat; box-shadow: var(--lift-s); transition: transform 0.15s var(--spring); }
.pz-piece.sel { transform: scale(1.1) rotate(-3deg); box-shadow: 0 0 0 0.3rem var(--zone), var(--lift); }

@media (max-aspect-ratio: 1/1) {
  .studio, .coloring, .writer, .code, .puzzle, .reader:has(.book.side) { grid-template-columns: 1fr; }
  .draw-tools { width: auto; }
  .palette { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------------------------------- parents: programme, portfolio --- */
.parent { width: min(96vw, 72rem); }
.tabs { flex-wrap: wrap; }
.child-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.cp { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.9rem 0.3rem 0.3rem; border-radius: 99px; background: #f4f0fb; font-weight: 800; }
.cp .art { width: 2rem; }
.cp.on { background: var(--ink); color: #fff; }
.prog-head h3 { margin: 0; }
.prog-sum { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.st { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 99px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.st.acquis { background: #d8f5e3; color: #187a46; }
.st.en-cours { background: #fff1c9; color: #996400; }
.st.a-decouvrir { background: #efeaf6; color: #6a5c86; }
.comp { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.comp .st { justify-self: start; margin-top: 0.2rem; }
.comp-t small { display: block; color: var(--ink-2); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.comp-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.comp-act { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.7rem 0.2rem 0.25rem; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 0.12rem var(--line); font-weight: 700; font-size: 0.85rem; }
.comp-act .art { width: 1.6rem; }
.comp-act:hover { box-shadow: inset 0 0 0 0.15rem var(--violet); }
.week-tip { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 1.2rem; background: #fffaf1; border-left: 0.35rem solid var(--sun); }
.week-tip h4 { margin: 0 0 0.4rem; }
.week-tip ul { margin: 0; padding-left: 1.2rem; line-height: 1.6; font-weight: 600; }
.folio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.folio-item { margin: 0; padding: 0.5rem; border-radius: 1rem; background: #fff; box-shadow: var(--lift-s); }
.folio-item img { width: 100%; border-radius: 0.6rem; background: #fff; }
.folio-text { max-height: 10rem; overflow: auto; padding: 0.6rem; border-radius: 0.6rem; background: #fffaf1; white-space: pre-wrap; font-weight: 600; font-size: 0.9rem; }
.folio-item figcaption { margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-2); font-weight: 700; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem; }
.sheet-card { display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto auto; gap: 0 0.8rem; align-items: center; padding: 0.9rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--lift-s); text-align: left; }
.sheet-card .art { grid-row: 1 / 3; width: 3rem; }
.sheet-card b { font-family: 'Fredoka'; font-weight: 600; font-size: 1.15rem; }
.sheet-card span { font-size: 0.8rem; color: var(--ink-2); font-weight: 700; }

/* ten zones on the map */
.island { width: clamp(6.4rem, 12.5vmin, 10.5rem); }
.isl-name { font-size: 1.02rem; }

/* fixes after the first visual pass */
.show svg.scene-art, .show-scene svg.art { width: min(20vh, 10rem); height: min(20vh, 10rem); }
.show svg.show-art { width: min(26vh, 13rem); height: min(26vh, 13rem); }
.code-board { grid-template-columns: repeat(var(--c), min(6.6rem, 13vh)); grid-template-rows: repeat(var(--r), min(6.6rem, 13vh)); }
.code-bot { display: grid; place-items: center; padding: 0.5rem; transition: transform 0.32s; }
.code-bot .art { width: 100%; height: 100%; object-fit: contain; }
.code-cell .art { width: 100%; height: 100%; object-fit: contain; }