/* Game stage + teacher tools: projector-first. Huge type, big touch targets (>= 56px), strong contrast,
   minimal chrome. Works on 1280×720 through 1920×1080 and on tablets/interactive whiteboards. */
:root { --stage-bg: #eef1f6; --stage-surface: #ffffff; --stage-surface-2: #e3e8f0; --stage-text: #0e121a; --stage-muted: #4b5566; --stage-border: #cfd6e2; }
:root[data-theme="dark"] { --stage-bg: #0d1118; --stage-surface: #182030; --stage-surface-2: #222c40; --stage-text: #ffffff; --stage-muted: #b8c2d6; --stage-border: #33405a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --stage-bg: #0d1118; --stage-surface: #182030; --stage-surface-2: #222c40; --stage-text: #ffffff; --stage-muted: #b8c2d6; --stage-border: #33405a; } }

.stage { position: fixed; inset: 0; z-index: 50; background: var(--stage-bg); color: var(--stage-text); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.stage-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 64px; }
.stage-title svg { width: 28px; height: 28px; flex: none; }
.stage-title { flex: 0 1 auto; font-weight: 750; font-size: clamp(1rem, 1.6vw, 1.4rem); display: flex; gap: 10px; align-items: center; min-width: 0; }
.stage-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-info { color: var(--stage-muted); font-weight: 600; font-size: clamp(.9rem, 1.3vw, 1.15rem); white-space: nowrap; }
.stage-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sbtn { min-width: 52px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--stage-border); background: var(--stage-surface); color: var(--stage-text); font-weight: 700; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; touch-action: manipulation; }
.sbtn:hover { border-color: var(--stage-muted); }
.sbtn svg { width: 24px; height: 24px; }
.sbtn[aria-pressed="false"] { opacity: .6; }
.sbtn.primary { background: #2456d6; border-color: #2456d6; color: #fff; }
.sbtn.good { background: #148a4d; border-color: #148a4d; color: #fff; }
.sbtn.bad { background: #c4302b; border-color: #c4302b; color: #fff; }
.sbtn.warn { background: #b86e00; border-color: #b86e00; color: #fff; }
.sbtn.huge { min-height: 72px; padding: 0 30px; font-size: clamp(1.1rem, 1.8vw, 1.6rem); border-radius: 18px; }
.sbtn:disabled { opacity: .35; cursor: not-allowed; }
.stage-main { position: relative; overflow: auto; padding: 8px clamp(12px, 2vw, 32px); display: flex; flex-direction: column; min-height: 0; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(12px, 2.5vh, 32px); }
.controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mega { font-size: clamp(2.4rem, 7.5vw, 8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.big { font-size: clamp(1.6rem, 4vw, 4rem); font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; }
.mid { font-size: clamp(1.2rem, 2.4vw, 2.2rem); font-weight: 650; line-height: 1.25; }
.label { text-transform: uppercase; letter-spacing: .12em; font-weight: 750; color: var(--stage-muted); font-size: clamp(.8rem, 1.2vw, 1.1rem); }
.answer { color: #1a8a4a; }
:root[data-theme="dark"] .answer { color: #5fe39b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .answer { color: #5fe39b; } }
.panel-s { background: var(--stage-surface); border: 2px solid var(--stage-border); border-radius: 22px; padding: clamp(16px, 3vw, 40px); max-width: min(1400px, 96vw); width: 100%; }
.stage img.prompt-img { max-height: 38vh; max-width: 80vw; border-radius: 16px; object-fit: contain; background: var(--stage-surface-2); }

/* Scoreboard bar */
.scorebar { display: flex; gap: 10px; padding: 10px 14px 14px; overflow-x: auto; }
.team { flex: 1 1 0; min-width: 150px; border-radius: 16px; padding: 8px 12px; background: var(--team-color, #555); color: #fff; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; position: relative; border: 4px solid transparent; transition: transform .2s; }
.team.active { border-color: var(--stage-text); transform: translateY(-3px); }
.team .t-icon { font-size: 1.4rem; width: 32px; text-align: center; }
.team .t-name { font-weight: 750; font-size: clamp(.95rem, 1.4vw, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .t-score { font-weight: 850; font-size: clamp(1.4rem, 2.6vw, 2.6rem); font-variant-numeric: tabular-nums; text-align: right; }
.team .t-adj { display: flex; gap: 4px; grid-column: 1 / -1; justify-content: flex-end; }
.team .t-adj button { min-width: 40px; min-height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.22); color: #fff; font-weight: 800; cursor: pointer; font-size: 1rem; }
.team .t-adj button:hover { background: rgba(255,255,255,.35); }
.team .t-rank { position: absolute; top: -10px; left: 10px; background: var(--stage-text); color: var(--stage-bg); border-radius: 999px; font-size: .75rem; font-weight: 800; padding: 1px 8px; }
.team.shield::after { content: "🛡"; position: absolute; top: -12px; right: 8px; font-size: 1.3rem; }
.progress-bar { flex: 1; display: flex; align-items: center; gap: 16px; font-weight: 750; font-size: 1.3rem; }
.progress-bar .track { flex: 1; height: 22px; background: var(--stage-surface-2); border-radius: 999px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: #1a8a4a; transition: width .5s; }
.score-pop { animation: pop .5s; }
@keyframes pop { 30% { transform: scale(1.18); } }

/* Timer */
.timer { font-variant-numeric: tabular-nums; font-weight: 800; }
.timer.low { color: #d1382c; }
.timer-ring { width: 64px; height: 64px; }
.stage-timer { display: inline-flex; align-items: center; gap: 6px; font-size: 1.5rem; min-width: 96px; justify-content: center; }

/* Grid boards (Typhoon, Quiz board, Picture reveal) */
.board { display: grid; gap: clamp(6px, 1vw, 14px); width: 100%; height: 100%; }
.tile { border-radius: 16px; border: 0; background: var(--tile-color, #2456d6); color: #fff; font-weight: 850; font-size: clamp(1.1rem, 2.8vw, 2.6rem); cursor: pointer; display: grid; place-items: center; min-height: 56px; transition: transform .15s, opacity .3s; touch-action: manipulation; position: relative; }
.tile:hover:not(:disabled) { transform: scale(1.03); }
.tile:disabled { cursor: default; background: var(--stage-surface-2); color: var(--stage-muted); }
.tile .tile-sub { font-size: .45em; font-weight: 650; opacity: .9; display: block; }
.board-head { font-weight: 800; text-align: center; padding: 8px; border-radius: 12px; background: var(--stage-surface-2); font-size: clamp(.9rem, 1.6vw, 1.4rem); display: grid; place-items: center; overflow-wrap: anywhere; }

/* Overlays (question modal on top of the board) */
.overlay { position: absolute; inset: 0; background: var(--stage-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px; z-index: 5; text-align: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.event-card { border-radius: 28px; padding: clamp(20px, 4vw, 60px); color: #fff; min-width: min(640px, 90vw); animation: flipin .5s; }
@keyframes flipin { from { transform: rotateY(90deg) scale(.8); opacity: 0; } }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: min(1200px, 94vw); }
.option { padding: 18px; border-radius: 16px; background: var(--stage-surface); border: 2px solid var(--stage-border); font-size: clamp(1.1rem, 2.2vw, 2rem); font-weight: 700; }
.option.correct { background: #148a4d; color: #fff; border-color: #148a4d; }

/* Word cards (Matching, Memory, Missing, Connections, Bingo) */
.cards { display: grid; gap: clamp(8px, 1vw, 14px); width: 100%; }
.wcard { border-radius: 14px; border: 2px solid var(--stage-border); background: var(--stage-surface); color: var(--stage-text); padding: 10px; font-weight: 700; font-size: clamp(1rem, 2vw, 1.8rem); display: grid; place-items: center; text-align: center; min-height: clamp(64px, 12vh, 140px); cursor: pointer; overflow-wrap: anywhere; touch-action: manipulation; transition: transform .15s, background .2s, opacity .3s; }
.wcard:hover:not(:disabled) { border-color: var(--stage-muted); }
.wcard.selected { border-color: #2456d6; background: #dbe6ff; color: #0e1a3a; transform: scale(1.03); }
.wcard.matched { background: #148a4d; color: #fff; border-color: #148a4d; }
.wcard.wrong { background: #c4302b; color: #fff; border-color: #c4302b; animation: shake .35s; }
.wcard.facedown { background: #2456d6; color: transparent; border-color: #2456d6; }
.wcard.gone { opacity: 0; pointer-events: none; }
.wcard img { max-height: 10vh; max-width: 100%; border-radius: 8px; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Setup screen */
.setup { max-width: 980px; margin: 0 auto; padding: 24px 16px 80px; }
.setup .card + .card { margin-top: 16px; }
.team-edit { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; }
.team-swatch { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; border: 0; cursor: pointer; }

.flash-good { animation: flashg .6s; }
.flash-bad { animation: flashb .6s; }
@keyframes flashg { 30% { box-shadow: inset 0 0 0 9999px rgba(26, 138, 74, .25); } }
@keyframes flashb { 30% { box-shadow: inset 0 0 0 9999px rgba(209, 56, 44, .25); } }

.keys-hint { color: var(--stage-muted); font-size: .9rem; }
.kbd { display: inline-block; border: 1px solid var(--stage-border); border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; font-family: var(--mono); font-size: .85em; }

@media (max-width: 700px) {
  .stage-top { flex-wrap: wrap; }
  .sbtn { min-width: 46px; min-height: 46px; }
  .team { min-width: 120px; }
}
:root[data-motion="reduced"] .tile, :root[data-motion="reduced"] .wcard { transition: none; }
:root[data-motion="reduced"] .event-card, :root[data-motion="reduced"] .score-pop { animation: none; }

/* Printable bingo cards (window.print): only the sheet is printed. */
.print-sheet { display: none; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; color: #000; background: #fff; }
  .print-card { break-inside: avoid; page-break-inside: avoid; margin: 0 0 12mm; }
  .print-title { font: 700 12pt system-ui, sans-serif; margin-bottom: 4mm; }
  .print-grid { display: grid; border: 2px solid #000; }
  .print-grid > div { border: 1px solid #000; min-height: 22mm; display: grid; place-items: center; text-align: center; padding: 2mm; font: 600 12pt system-ui, sans-serif; }
}

/* Grammar diff highlighting (color + strike/underline, never color alone). */
mark.del { background: #fde2e1; color: #a3201b; text-decoration: line-through; text-decoration-thickness: 3px; border-radius: 6px; padding: 0 .15em; }
mark.ins { background: #dcf5e6; color: #0f6b39; text-decoration: underline; text-decoration-thickness: 3px; border-radius: 6px; padding: 0 .15em; }
.word-pick { font: inherit; color: inherit; background: none; border: 0; border-bottom: 3px dotted var(--stage-border); cursor: pointer; padding: 0 .05em; }
.word-pick[aria-pressed="true"] { background: #ffe58a; color: #111; border-radius: 6px; border-bottom-color: transparent; }