/* Entertainment space (adults): sayings, riddles and word puzzles */
#funPanel .fn-intro { margin: 0 0 12px; color: var(--text-dim); line-height: 1.55; }
.fn-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.fn-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; min-height: 40px; }
.fn-chip.on { background: var(--grad, linear-gradient(135deg, #ff6b57, #ffc247)); color: #2a1020; border-color: transparent; }
.fn-chip.lock { opacity: .5; cursor: not-allowed; }
.fn-sub { margin: 0 0 14px; color: var(--text-dim); font-size: .9rem; }
.fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fn-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.fn-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.fn-card:disabled { opacity: .5; cursor: default; }
.fn-card .fn-ico { font-size: 2rem; }
.fn-card b { font-size: 1.05rem; }
.fn-card small { color: var(--text-dim); }
.fn-card em { font-style: normal; font-size: .8rem; color: var(--accent-2, #ffc247); margin-top: 4px; }
.fn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fn-back { border: 0; background: transparent; color: var(--text-dim); font: inherit; cursor: pointer; padding: 6px 4px; }
.fn-prog { font-weight: 700; color: var(--text-dim); }
.fn-score { font-weight: 800; }
.fn-q { text-align: center; margin: 0 0 14px; }
.fn-saying { font-size: 1.35rem; font-weight: 800; line-height: 1.5; margin: 6px 0; }
.fn-blank { display: inline-block; min-width: 4.5em; border-bottom: 3px solid var(--accent); color: var(--accent); text-align: center; }
.fn-blank.filled { color: var(--ok, #5fd68a); border-color: var(--ok, #5fd68a); }
.fn-riddle { font-size: 1.15rem; line-height: 1.55; margin: 6px 0; }
.fn-emoji { font-size: 3.4rem; letter-spacing: .15em; margin: 4px 0; }
.fn-hintrow { margin: 8px 0 0; color: var(--text-dim); }
.fn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .fn-opts { grid-template-columns: 1fr; } }
.fn-opt { padding: 14px 12px; border-radius: 14px; border: 2px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; min-height: 52px; }
.fn-opt:hover:not(:disabled) { border-color: var(--accent); }
.fn-opt.right { border-color: var(--ok, #5fd68a); background: rgba(95,214,138,.18); opacity: 1; }
.fn-opt.wrong { border-color: #ff6b57; background: rgba(255,107,87,.18); opacity: 1; }
.fn-opt:disabled { cursor: default; opacity: .75; }
.fn-feed { margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; line-height: 1.6; }
.fn-feed.good { background: rgba(95,214,138,.14); border: 1px solid rgba(95,214,138,.5); }
.fn-feed.bad { background: rgba(255,107,87,.12); border: 1px solid rgba(255,107,87,.5); }
.fn-full { display: block; font-weight: 700; }
.fn-ar { display: block; margin-top: 4px; font-size: 1.05rem; color: var(--accent-2, #ffc247); }
.fn-say { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }
.fn-next { text-align: center; margin: 14px 0 0; }
.fn-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 16px; }
.fn-slot { width: 46px; height: 54px; border-radius: 12px; border: 2px dashed var(--border); background: transparent; color: var(--text); font: inherit; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.fn-slot.full { border-style: solid; border-color: var(--accent); background: rgba(255,107,87,.12); }
.fn-slots.good .fn-slot { border-color: var(--ok, #5fd68a); background: rgba(95,214,138,.18); }
.fn-slots.bad .fn-slot { border-color: #ff6b57; animation: fnShake .4s; }
@keyframes fnShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fn-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fn-letter { width: 48px; height: 54px; border-radius: 12px; border: 2px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); font: inherit; font-size: 1.3rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.fn-letter:disabled { opacity: .25; }
.fn-result { text-align: center; padding: 10px 0; }
.fn-big { font-size: 4rem; }

/* ======================= paper look (the whole Entertainment space is a sheet of paper) ======================= */
.fn-paper {
  --ink: #243b6b; --pencil: #6b6f7a; --pen-red: #c0392b; --paper: #fbf4df;
  position: relative; margin-top: 10px; padding: 18px 16px 22px; border-radius: 6px; color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(70,110,190,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(70,110,190,.16) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 40px rgba(160,120,40,.12);
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Marker Felt", cursive;
}
.fn-paper::before, .fn-paper::after { content: ""; position: absolute; top: -8px; width: 62px; height: 20px; background: rgba(255,230,150,.75); box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: rotate(-4deg); }
.fn-paper::before { left: 18px; }
.fn-paper::after { right: 18px; transform: rotate(5deg); }
.fn-paper .fn-intro, .fn-paper .fn-sub { color: var(--pencil); }
.fn-paper .fn-chip { border: 2px solid var(--ink); color: var(--ink); background: rgba(255,255,255,.55); font-family: inherit; }
.fn-paper .fn-chip.on { background: #ffd95e; color: #3a2a00; border-color: var(--ink); }
.fn-paper .fn-card { border: 2px solid var(--ink); background: rgba(255,255,255,.7); color: var(--ink); box-shadow: 3px 3px 0 rgba(36,59,107,.25); font-family: inherit; }
.fn-paper .fn-card:hover:not(:disabled) { border-color: var(--pen-red); }
.fn-paper .fn-card small { color: var(--pencil); }
.fn-paper .fn-card em { color: var(--pen-red); }
.fn-paper .fn-card.paper { background: #fffdf3; }
.fn-paper .fn-back, .fn-paper .fn-prog { color: var(--pencil); }
.fn-paper .fn-score { color: var(--ink); }
.fn-paper .fn-saying, .fn-paper .fn-riddle { color: var(--ink); }
.fn-paper .fn-blank { color: var(--pen-red); border-color: var(--pen-red); }
.fn-paper .fn-blank.filled { color: #1e7a45; border-color: #1e7a45; }
.fn-paper .fn-opt { border: 2px solid var(--ink); background: rgba(255,255,255,.7); color: var(--ink); font-family: inherit; box-shadow: 2px 2px 0 rgba(36,59,107,.2); }
.fn-paper .fn-opt.right { background: rgba(80,200,120,.35); border-color: #1e7a45; }
.fn-paper .fn-opt.wrong { background: rgba(255,120,100,.3); border-color: var(--pen-red); }
.fn-paper .fn-feed { color: var(--ink); background: rgba(255,255,255,.65); }
.fn-paper .fn-feed.good { border-color: #1e7a45; }
.fn-paper .fn-feed.bad { border-color: var(--pen-red); }
.fn-paper .fn-ar { color: #8a4b00; }
.fn-paper .gr-check { background: #fff; color: var(--ink); border: 2px solid var(--ink); font-family: inherit; }
.fn-paper .fn-slot, .fn-paper .fn-letter { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.7); font-family: inherit; }
.fn-paper .fn-slot.full { background: rgba(255,217,94,.6); }
.fn-paper .empty-hint, .fn-paper .fn-note { color: var(--pencil); }

.fn-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fn-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); transform: rotate(-1deg); }
.fn-note { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; }
.fn-pen { display: inline-block; padding: 9px 16px; margin: 4px 6px 4px 0; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 rgba(36,59,107,.25); min-height: 42px; }
.fn-pen:hover { background: #fff3c4; }
.fn-tools { margin: 12px 0 8px; }
.fn-hidden { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; border: 0; padding: 0; pointer-events: none; }

/* crossword */
.fn-cwgrid-wrap { display: flex; justify-content: center; overflow-x: auto; padding: 4px 0 8px; }
.fn-cwgrid { --cell: clamp(30px, calc((100vw - 76px) / var(--cols)), 44px); display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); gap: 0; }
.cw-void { background: transparent; }
.cw-cell { position: relative; border: 2px solid #1d1d1d; margin: -1px 0 0 -1px; background: #fffef6; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.cw-cell i { position: absolute; top: 1px; left: 3px; font-style: normal; font-size: calc(var(--cell) * .26); line-height: 1; color: #1d1d1d; font-family: system-ui, sans-serif; font-weight: 700; }
.cw-cell span { font-size: calc(var(--cell) * .6); font-weight: 800; color: var(--ink); text-transform: uppercase; line-height: 1; }
.cw-cell.word { background: #dcebff; }
.cw-cell.sel { background: #ffe066; }
.cw-cell.bad span { color: var(--pen-red); text-decoration: line-through; }
.fn-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 10px; font-size: .88rem; }
@media (max-width: 520px) { .fn-clues { grid-template-columns: 1fr; } }
.fn-clues h5 { margin: 0 0 4px; font-size: 1rem; border-bottom: 2px solid var(--ink); display: inline-block; }
.fn-clues ol { list-style: none; margin: 0; padding: 0; }
.fn-clues li { padding: 4px 6px; border-radius: 6px; cursor: pointer; line-height: 1.4; }
.fn-clues li.on { background: #ffe066; }
.fn-clues small { color: var(--pencil); }

/* word search */
.fn-wsgrid { --cell: clamp(26px, calc((100vw - 76px) / var(--cols)), 38px); display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); width: max-content; margin: 8px auto 12px; touch-action: none; user-select: none; background: rgba(255,255,255,.7); border: 2px solid var(--ink); border-radius: 6px; padding: 4px; }
.ws-cell { display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .55); font-weight: 800; color: var(--ink); border-radius: 50%; touch-action: none; }
.ws-cell.pen { background: rgba(255,214,0,.7); }
.ws-cell.done.m0 { background: rgba(255,214,0,.6); } .ws-cell.done.m1 { background: rgba(255,105,180,.5); } .ws-cell.done.m2 { background: rgba(80,200,120,.55); }
.ws-cell.done.m3 { background: rgba(100,180,255,.55); } .ws-cell.done.m4 { background: rgba(255,150,50,.55); } .ws-cell.done.m5 { background: rgba(180,120,255,.5); }
.fn-wlist { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; justify-content: center; }
.fn-wlist li { font-size: .95rem; font-weight: 700; padding: 2px 6px; }
.fn-wlist li.done { text-decoration: line-through; text-decoration-color: var(--pen-red); text-decoration-thickness: 3px; color: var(--pencil); }

/* flip cards */
.fn-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 480px) { .fn-cards { grid-template-columns: repeat(3, 1fr); } }
.fn-card2 { position: relative; aspect-ratio: 3 / 4; border: 2px solid var(--ink); border-radius: 6px; background: #fffdf3; transform: rotate(var(--tilt)); padding: 0; cursor: pointer; box-shadow: 3px 3px 0 rgba(36,59,107,.25); font: inherit; color: var(--ink); }
.fn-card2 span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-weight: 800; }
.fn-card2 .fc-back { font-size: 2rem; color: var(--pen-red); background-image: repeating-linear-gradient(transparent 0 17px, rgba(70,110,190,.3) 17px 18px); }
.fn-card2 .fc-front { display: none; background: #fff; }
.fn-card2 .fc-front.emoji { font-size: 2.4rem; } .fn-card2 .fc-front.word { font-size: 1rem; }
.fn-card2.up .fc-back { display: none; } .fn-card2.up .fc-front { display: flex; }
.fn-card2.ok { background: #dff5e4; border-color: #1e7a45; }

/* hangman */
.fn-hangrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin: 6px 0 12px; }
.fn-gallows { width: 150px; height: 170px; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fn-clue { margin: 0 0 6px; font-size: .95rem; }
.fn-hword { margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; letter-spacing: .12em; }
.fn-keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fn-key { width: 38px; height: 42px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.fn-key.hit { background: rgba(80,200,120,.4); } .fn-key.miss { background: rgba(255,120,100,.35); text-decoration: line-through; }
.fn-key:disabled { cursor: default; }

/* match with ink */
.fn-mt { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 60px; touch-action: none; user-select: none; }
.mt-col { display: flex; flex-direction: column; gap: 10px; }
.mt-node { padding: 10px 10px; border: 2px solid var(--ink); border-radius: 10px; background: rgba(255,255,255,.75); font-size: .92rem; line-height: 1.35; min-height: 46px; display: flex; align-items: center; }
.mt-node.left { font-weight: 800; justify-content: flex-end; text-align: right; cursor: grab; }
.mt-node.ok { background: rgba(80,200,120,.3); border-color: #1e7a45; }
.mt-node.scribble { animation: fnShake .4s; border-color: var(--pen-red); background: rgba(255,120,100,.25); }
.mt-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mt-svg .ink { fill: none; stroke: #1b3fa0; stroke-width: 3.5; stroke-linecap: round; }
.mt-svg .pen { fill: none; stroke: var(--pen-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }

/* letters centred inside their boxes (the handwriting font has a tall line box) */
.fn-slot, .fn-letter, .fn-key { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; overflow: hidden; }
.fn-slot > *, .fn-letter > *, .fn-key > * { line-height: 1; }
.fn-slot, .fn-letter, .fn-key, .ws-cell, .cw-cell span { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; }
.fn-paper .fn-slot, .fn-paper .fn-letter { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.cw-cell span, .ws-cell { line-height: 1; }

/* ===== bigger, text-size friendly paper spaces (everything scales with the Aa control) ===== */
.fn-paper { font-size: 1.08rem; }
.fn-paper .fn-note, .fn-paper .fn-sub, .fn-paper .fn-intro { font-size: 1rem; }
.fn-sheet-top { flex-wrap: wrap; row-gap: 8px; }
.fn-sheet-top .fn-title { flex: 1 1 9rem; text-align: center; font-size: 1.35rem; }
.fn-prog, .fn-score { white-space: nowrap; font-size: 1rem; }
.fn-menu-top { margin: 0 0 10px; }
.fn-back, .fn-paper .fn-back { display: inline-flex; align-items: center; gap: .3em; padding: .35rem .9rem; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; font-size: 1rem; min-height: 2.6rem; cursor: pointer; box-shadow: 2px 2px 0 rgba(36,59,107,.25); }
.fn-back:hover { background: #fff3c4; }
.fn-cwgrid { --cell: clamp(2rem, calc((100vw - 76px) / var(--cols)), 2.9rem); }
.fn-wsgrid { --cell: clamp(1.5rem, calc((100vw - 90px) / var(--cols)), 2.5rem); }
.fn-ws { overflow-x: auto; }
.fn-slot { width: 2.9rem; height: 3.4rem; font-size: 1.5rem; }
.fn-letter { width: 3rem; height: 3.4rem; font-size: 1.4rem; }
.fn-key { width: 2.5rem; height: 2.8rem; font-size: 1.05rem; }
.fn-gallows { width: 9.5rem; height: 10.5rem; }
.fn-opt { font-size: 1.1rem; }
.fn-pen { font-size: 1.05rem; min-height: 2.7rem; }
.ls-input { font-size: 1.25rem; }
.fn-wlist li { font-size: 1.05rem; }
.fn-clues { font-size: 1rem; }
.mt-node { font-size: 1.02rem; }

/* word search: one continuous marker stroke (highlighter pen) instead of coloured circles */
.fn-wsgrid { position: relative; }
.ws-cell { position: relative; z-index: 1; cursor: crosshair; }
.ws-cell.pen, .ws-cell.done.m0, .ws-cell.done.m1, .ws-cell.done.m2, .ws-cell.done.m3, .ws-cell.done.m4, .ws-cell.done.m5 { background: transparent; }
.ws-cell.done { font-weight: 900; }
.ws-mark { position: absolute; z-index: 2; pointer-events: none; border-radius: 999px; mix-blend-mode: multiply; transform-origin: center; }
.ws-mark.live { background: rgba(255, 214, 0, .7); }
.ws-mark.m0 { background: rgba(255, 214, 0, .7); } .ws-mark.m1 { background: rgba(255, 105, 180, .6); } .ws-mark.m2 { background: rgba(80, 200, 120, .65); }
.ws-mark.m3 { background: rgba(100, 180, 255, .65); } .ws-mark.m4 { background: rgba(255, 150, 50, .65); } .ws-mark.m5 { background: rgba(180, 120, 255, .6); }

/* ===== bigger, more legible handwriting (the handwriting font looks small, so everything is larger) ===== */
.fn-paper { font-family: "Patrick Hand", "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Marker Felt", cursive; font-size: 1.3rem; line-height: 1.45; }
.fn-paper .fn-intro, .fn-paper .fn-sub, .fn-paper .fn-note, .fn-paper .empty-hint { font-size: 1.2rem; }
.fn-sheet-top .fn-title { font-size: 1.75rem; }
.fn-prog, .fn-score { font-size: 1.25rem; }
.fn-back, .fn-paper .fn-back { font-size: 1.3rem; }
.fn-pen { font-size: 1.3rem; }
.fn-chip, .fn-paper .fn-chip { font-size: 1.3rem; }
.fn-card b { font-size: 1.4rem; } .fn-card small { font-size: 1.15rem; } .fn-card em { font-size: 1.05rem; }
.fn-saying { font-size: 1.9rem; } .fn-riddle { font-size: 1.55rem; } .fn-emoji { font-size: 3.8rem; }
.fn-opt { font-size: 1.5rem; }
.fn-feed { font-size: 1.25rem; } .fn-full { font-size: 1.35rem; } .fn-ar { font-size: 1.35rem; }
.fn-clues { font-size: 1.2rem; } .fn-clues h5 { font-size: 1.35rem; }
.fn-wlist li { font-size: 1.35rem; }
.fn-clue { font-size: 1.3rem; } .fn-hword { font-size: 2.3rem; }
.mt-node { font-size: 1.3rem; }
.ls-input { font-size: 1.5rem; } .ls-script { font-size: 1.25rem; } .ls-slot, .ls-chip { font-size: 1.3rem; }
.fn-result h4 { font-size: 1.8rem; } .fn-result p { font-size: 1.3rem; }
.fn-slot, .fn-letter, .fn-key, .ws-cell, .cw-cell span { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.big-test-btn { font-size: 1.3rem; }

/* ===== more games: menu groups, stats, word guess, letter grid, secret code, ladder, story, error hunt, speaking, bingo ===== */
.fn-group { margin: 18px 0 8px; font-size: 1.45rem; color: var(--ink); border-bottom: 3px solid var(--ink); display: inline-block; transform: rotate(-.6deg); }
.fn-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; font-weight: 800; font-size: 1.25rem; }
.fn-stats span { padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff7cf; }
.fn-stats small { font-weight: 400; color: var(--pencil); font-size: 1.05rem; }
/* word guess */
.wg-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 8px 0 14px; }
.wg-row { display: flex; gap: 6px; }
.wg-cell { width: 3.1rem; height: 3.1rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 8px; background: rgba(255,255,255,.75); font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.wg-cell.typed { border-color: var(--pen-red); }
.wg-cell.g { background: #6fcf8a; border-color: #2c8c4a; } .wg-cell.y { background: #ffd95e; border-color: #b58a00; } .wg-cell.x { background: #cfcfd6; border-color: #8a8a96; color: #555; }
.wg-g { color: #1e7a45; } .wg-y { color: #a07400; }
.wg-kb { margin: 8px 0; } .wg-kbrow { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.wg-key { min-width: 2.3rem; height: 2.9rem; padding: 0 .4rem; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.wg-key.wide { min-width: 4rem; font-size: .95rem; }
.wg-key.g { background: #6fcf8a; } .wg-key.y { background: #ffd95e; } .wg-key.x { background: #cfcfd6; color: #666; }
/* letter grid */
.bg-grid { --cell: clamp(3rem, calc((100vw - 90px) / var(--cols)), 4.2rem); display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); gap: 6px; width: max-content; margin: 8px auto; touch-action: none; user-select: none; }
.bg-cell { display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 12px; background: rgba(255,255,255,.8); font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--ink); touch-action: none; }
.bg-cell.pen { background: #ffe066; border-color: var(--pen-red); }
.bg-cell.done { background: #bdeccb; border-color: #2c8c4a; }
.bg-word { text-align: center; font-size: 1.8rem; font-weight: 800; letter-spacing: .15em; min-height: 2.4rem; margin: 4px 0; }
/* secret code */
.cr-text { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; margin: 10px 0 14px; }
.cr-word { display: inline-flex; gap: 3px; }
.cr-p { align-self: flex-end; font-size: 1.5rem; padding-bottom: .2rem; }
.cr-l { display: inline-flex; flex-direction: column; align-items: center; min-width: 1.9rem; padding: 2px 3px; border: 2px solid var(--pencil); border-radius: 8px; background: rgba(255,255,255,.75); cursor: pointer; font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.cr-l i { font-style: normal; font-size: .85rem; color: var(--pencil); } .cr-l b { font-size: 1.4rem; min-height: 1.9rem; color: var(--ink); }
.cr-l.sel { background: #ffe066; border-color: var(--pen-red); } .cr-l.got b { color: #1e7a45; }
/* word ladder */
.ld-steps { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 10px 0; }
.ld-row { display: flex; gap: 6px; }
.ld-cell { width: 3rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 8px; background: rgba(255,255,255,.75); font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--ink); text-transform: uppercase; }
.ld-cell.fixed { background: #ffe9a6; }
.ld-cell.inp { text-align: center; border-style: dashed; border-color: var(--pen-red); padding: 0; background: #fff; }
.ld-cell.inp.good { border-style: solid; border-color: #2c8c4a; background: #dff5e4; } .ld-cell.inp.bad { border-style: solid; border-color: var(--pen-red); background: #ffe3dc; }
/* story puzzle */
.st-title { margin: 0 0 4px; font-size: 1.6rem; }
.st-placed { margin: 8px 0; padding-left: 2rem; } .st-placed li { margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: rgba(255,224,102,.45); cursor: pointer; font-size: 1.2rem; }
.st-placed li.good { background: rgba(80,200,120,.4); } .st-placed li.bad { background: rgba(255,120,100,.35); }
.st-bank { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .st-card { text-align: left; font-size: 1.15rem; margin: 0; }
/* error hunt */
.er-sentence { line-height: 2.6; font-size: 1.5rem; text-align: center; }
.er-w { margin: 2px 3px; padding: 2px 8px; border: 2px dashed transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.er-w:hover:not(:disabled) { border-color: var(--pen-red); background: #fff3c4; } .er-w.bad { background: #ffd0c6; text-decoration: line-through; } .er-w.right { background: #bdeccb; border-color: #2c8c4a; font-weight: 800; }
.er-w:disabled { cursor: default; }
/* speaking rounds */
.sp-text { font-size: 1.7rem; text-align: center; line-height: 1.5; margin: 10px 0; }
.sp-heard { min-height: 2rem; text-align: center; color: var(--pencil); font-size: 1.15rem; }
/* listening bingo */
.bi-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.bi-cell { min-height: 5rem; border: 2px solid var(--ink); border-radius: 12px; background: rgba(255,255,255,.8); color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; }
.bi-cell small { font-size: 1rem; color: #8a4b00; } .bi-cell.on { background: #bdeccb; border-color: #2c8c4a; } .bi-cell.scribble { animation: fnShake .4s; background: #ffe3dc; }
.bi-bingo { text-align: center; font-size: 2rem; font-weight: 800; color: var(--pen-red); margin: 6px 0; }

/* irregular verbs and adjectives */
.ig-word { margin: 4px 0 0; text-align: center; font-size: 2.1rem; font-weight: 800; color: var(--ink); }
.ig-sheet .fn-ar { text-align: center; }
.ig-sheet .fn-note { text-align: center; }
.ig-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; margin: 8px 0; }
.ig-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--pencil); }
.ig-in { width: 9.5em; font-size: 1.2rem; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; }
.ig-in.good { background: rgba(80,200,120,.35); border-color: #1e7a45; }
.ig-in.bad { background: rgba(255,120,100,.3); border-color: var(--pen-red); }
.ig-arrow { font-size: 1.4rem; padding-bottom: 8px; color: var(--ink); }
.ig-ex { display: block; margin-top: 4px; font-weight: 400; }
.ig-gap { margin: 8px 0 2px; text-align: center; font-size: 1.45rem; line-height: 1.5; font-weight: 700; color: var(--ink); }