/* ===== Class Activity: Games tab (board, students' devices, lesson plans) =====
   The board (.gm-stage) is exactly one screen tall (--gm-h is set by js/games.js from where it starts),
   and the game area inside it scales its text with its own size (container units), so nothing scrolls
   on a laptop, a projector or in full screen. Colours come from the site tokens (light/dark, themes). */

/* --- choosing a game --- */
.gm-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.gm-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:18px;padding:14px 16px;font:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
.gm-card:hover,.gm-card:focus-visible{transform:translateY(-2px);border-color:var(--accent)}
.gm-card b{font-family:var(--display);font-size:19px}
.gm-ico{font-size:30px;line-height:1}
.gm-dev{position:absolute;top:10px;inset-inline-end:12px;font-size:16px}

/* --- setting up a game --- */
.gm-setup .cardhead{gap:10px}
.gm-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:start;margin:10px 0}
.gm-extra{display:flex;flex-direction:column;gap:8px;grid-column:1/-1}
.gm-extra .secs{flex-wrap:wrap}
.gm-sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gm-text,.gm-own,.gm-topicsedit{width:100%;resize:vertical;font:inherit}
.gm-share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0}
.gm-share .note{margin:0}
.gm-library .ca-row{margin-bottom:6px}
.gm-upbtn{cursor:pointer}
.gm-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;max-height:34vh;overflow:auto}
.gm-thumb{position:relative;border:3px solid transparent;border-radius:12px;overflow:hidden;background:var(--line)}
.gm-thumb.sel{border-color:var(--accent)}
.gm-thumbimg{display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;background:none;cursor:pointer}
.gm-thumbimg img{width:100%;height:100%;object-fit:cover;display:block}
.gm-x{position:absolute;top:4px;inset-inline-end:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.gm-howlist{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.5}

/* --- the board: one screen, no scrolling --- */
/* in the Games tab the Undo bar floats at the bottom, so it never pushes the board down */
.ca:has(.gm-stage) .ca-undo:not(:empty){position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:60;box-shadow:0 8px 28px rgba(0,0,0,.3);max-width:calc(100% - 32px)}
.gm-stage{height:var(--gm-h,70vh);display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.gm-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gm-title{font-family:var(--display);font-size:20px;white-space:nowrap}
.gm-tools{display:flex;gap:6px;margin-inline-start:auto}
.gm-scores{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;justify-content:center}
.gm-score{display:flex;align-items:center;gap:8px;background:var(--card);border:3px solid var(--tc);border-radius:14px;padding:4px 10px;position:relative}
.gm-score b{font-size:16px;color:var(--ink)}
.gm-pts{font-family:var(--display);font-weight:900;font-size:26px;min-width:1.4em;text-align:center;color:var(--tc);unicode-bidi:isolate}
.gm-adj{display:inline-flex;gap:2px}.gm-adj .mini{min-width:30px;padding:2px 6px}
.gm-members{position:relative}.gm-members summary{cursor:pointer;list-style:none}.gm-members summary::before{content:'👥 '}
.gm-members[open] .ca-members{position:absolute;z-index:5;top:110%;inset-inline-end:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.gm-body{flex:1;min-height:0;container-type:size;display:flex;flex-direction:column}
.gm-body>*{flex:1;min-height:0}
.gm-split{display:grid;grid-template-columns:minmax(220px,30%) 1fr;gap:16px;height:100%;min-height:0}
.gm-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:var(--card);border:3px solid var(--tc,var(--line));border-radius:20px;padding:12px;min-height:0;overflow:hidden}
.gm-main{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden;justify-content:center}
.gm-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.gm-main .qwrap{font-size:clamp(16px,3.2cqh,30px)}
.gm-main .stem{font-size:calc(clamp(20px,5cqh,44px) * var(--ca-tx,1));line-height:1.25}
.gm-main .quote,.gm-main .passage{font-size:clamp(16px,3.6cqh,30px)}
.gm-main .opt,.gm-main .fixw,.gm-main .tilew,.gm-main .mitem{font-size:calc(clamp(16px,3.8cqh,32px) * var(--ca-tx,1))}
.gm-main .feedback{font-size:clamp(16px,3.4cqh,26px)}
.gm-qhead{display:flex;justify-content:flex-end}
.gm-mark{justify-content:center}
.gm-bigname{font-family:var(--display);font-weight:900;font-size:clamp(22px,6cqh,52px);line-height:1.1}
.gm-tchip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--tc);color:var(--ink);background:color-mix(in srgb,var(--tc) 14%,var(--card));border-radius:99px;padding:3px 12px;font-weight:700}
.gm-tchip.big{font-size:clamp(18px,4cqh,30px);padding:6px 18px}
.gm-note{font-size:clamp(16px,3cqh,24px);margin:0}
.gm-modebig{font-family:var(--display);font-size:clamp(20px,5cqh,40px);font-weight:900}
.gm-clock{display:inline-block;font-family:var(--display);font-weight:900;font-variant-numeric:tabular-nums;font-size:28px;line-height:1;background:var(--gold-soft);color:var(--ink);border-radius:14px;padding:6px 14px;direction:ltr}
.gm-clock.big{font-size:clamp(40px,14cqh,120px);padding:8px 22px}
.gm-clock.huge{font-size:clamp(80px,36cqh,320px);background:none;padding:0}
.gm-clock.low{color:#fff;background:#c0392b}.gm-clock.huge.low{color:#c0392b;background:none}
.gm-body .btn{--tc:var(--accent)}
.gm-body .btn[style*="--tc"]{background:var(--tc);border-color:var(--tc);color:#fff}
.gm-teambtns{justify-content:center}

/* mystery numbers */
.gm-mystery{display:grid;grid-template-columns:1fr minmax(200px,26%);gap:16px;height:100%;min-height:0}
.gm-tiles{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr;gap:10px;min-height:0}
.gm-tile{display:grid;place-items:center;border-radius:18px;border:3px solid var(--line);background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;font-family:var(--display);font-weight:900;font-size:clamp(22px,8cqh,64px);cursor:pointer;transition:transform .15s}
.gm-tile:not(:disabled):hover{transform:scale(1.04)}
.gm-tile.hl{transform:scale(1.08);box-shadow:0 0 0 5px var(--gold)}
.gm-tile.flipped{background:var(--card);color:var(--muted);border-style:dashed;cursor:default}
.gm-tile.flipped.ok{color:var(--brand-green,#4c9a36)}.gm-tile.flipped.no{color:#c0392b}
.gm-tile.big{width:min(100%,180px);aspect-ratio:1;font-size:clamp(40px,12cqh,90px);background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;border-style:solid}

/* swat it */
.gm-swat{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}
.gm-clue{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;text-align:center}
.gm-cluetext{font-family:var(--display);font-weight:800;font-size:clamp(18px,5cqh,40px);line-height:1.2;white-space:pre-line;max-width:100%}
.gm-cluetext.emoji{font-size:clamp(48px,16cqh,140px)}
.gm-players{display:flex;gap:8px;flex-wrap:wrap}
.gm-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr;gap:10px}
.gm-word{border:3px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;font:inherit;font-weight:800;font-size:clamp(16px,5.5cqh,44px);padding:6px;cursor:pointer;word-break:break-word}
.gm-word:hover:not(:disabled){border-color:var(--accent)}
.gm-word.sel{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.gm-word.right{background:var(--brand-green,#4c9a36);border-color:var(--brand-green,#4c9a36);color:#fff}
.gm-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.gm-foot .feedback{margin:0}

/* category blitz */
.gm-blitz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;height:100%;min-height:0}
.gm-blitz.check{justify-content:flex-start;align-items:stretch;text-align:start}
.gm-topic{font-family:var(--display);font-weight:900;font-size:clamp(26px,9cqh,72px);line-height:1.1}
.gm-topic.sm{font-size:clamp(18px,4.5cqh,34px);text-align:center}
.gm-teamrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.gm-tbox{display:flex;flex-direction:column;align-items:center;gap:6px;border:3px solid var(--tc);border-radius:18px;padding:12px 22px;background:var(--card);min-width:170px}
.gm-count{font-family:var(--display);font-weight:900;font-size:clamp(20px,5cqh,40px)}
.gm-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.gm-col{display:flex;flex-direction:column;gap:8px;border:3px solid var(--tc);border-radius:18px;padding:10px;background:var(--card);min-height:0;overflow:hidden}
.gm-colhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gm-chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;overflow:auto;min-height:0;flex:1}
.gm-chip{border:2px solid var(--line);background:var(--paper,var(--card));color:var(--ink);border-radius:99px;padding:4px 12px;font:inherit;font-weight:700;font-size:clamp(14px,3cqh,22px);cursor:pointer}
.gm-chip.dup{text-decoration:line-through;opacity:.55;cursor:default}
.gm-chip.rej{text-decoration:line-through;border-color:#c0392b;color:#c0392b}
.gm-addw{display:flex;gap:6px}.gm-addw input{flex:1;min-width:0}
.gm-addw.big input{font-size:20px}

/* scramble race */
.gm-race{display:flex;flex-direction:column;justify-content:center;gap:16px;height:100%;align-items:stretch}
.gm-race>.gm-clock{align-self:center}
.gm-bars{display:flex;flex-direction:column;gap:clamp(8px,3cqh,24px)}
.gm-bar{display:grid;grid-template-columns:minmax(110px,18%) 1fr auto 2.2em;align-items:center;gap:12px;font-size:clamp(16px,4cqh,30px)}
.gm-track{height:clamp(22px,7cqh,56px);background:var(--line);border-radius:99px;overflow:hidden}
.gm-fill{height:100%;background:var(--tc);border-radius:99px;transition:width .4s}
.gm-medal{font-size:1.4em}

/* picture talk */
.gm-pic{display:grid;grid-template-columns:1fr minmax(240px,28%);gap:16px;height:100%;min-height:0}
.gm-picbox{min-height:0;display:grid;place-items:center;background:#000;border-radius:18px;overflow:hidden}
.gm-picbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.gm-prompts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:800;font-size:clamp(16px,4cqh,30px)}
.gm-pic .gm-side{justify-content:space-evenly;gap:6px}
.gm-pic .gm-prompts{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:clamp(14px,3.2cqh,24px)}
.gm-pic .ca-picked.sm{gap:8px}

/* talk timer */
.gm-debate{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;height:100%;text-align:center}
.gm-sides{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.gm-sidebox{display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid var(--tc);border-radius:18px;padding:8px 26px;background:var(--card);opacity:.55;transition:transform .2s,opacity .2s}
.gm-sidebox.on{opacity:1;transform:scale(1.08);background:color-mix(in srgb,var(--tc) 18%,var(--card))}
.gm-forag{font-family:var(--display);font-weight:900;letter-spacing:.05em;color:var(--tc)}
.gm-sidebox b{font-size:clamp(16px,4cqh,28px)}
.gm-turnn{font-family:var(--display);font-weight:800;font-size:clamp(16px,4cqh,30px)}

/* the end of a game */
.gm-over{justify-content:center;align-items:center;text-align:center;overflow:auto}
.gm-final{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.gm-score.big{padding:10px 20px}.gm-score.big .gm-pts{font-size:40px}

/* full screen */
body.ca-fs .gm-title{font-size:24px}

/* --- students' devices --- */
.gm-dtopic{font-family:var(--display);font-weight:900;font-size:clamp(22px,6vw,36px);text-align:center;margin:8px 0;white-space:pre-line}
.lv-racecard .gm-grid.dev{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-auto-rows:minmax(64px,auto);gap:8px}
.lv-racecard .gm-word{font-size:clamp(18px,4.5vw,26px)}

@media (max-width:760px){.gm-split,.gm-mystery,.gm-pic{grid-template-columns:1fr}.gm-stage{height:auto;overflow:visible}.gm-body{container-type:normal}}
@media (prefers-reduced-motion:reduce){.gm-card,.gm-tile,.gm-fill,.gm-sidebox{transition:none}}

/* --- lesson plans --- */
.pl-entry{margin-bottom:12px}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pl-list>li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:2px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--card)}
.pl-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
.pl-info b{font-size:18px}
.pl-chips{display:flex;flex-wrap:wrap;gap:4px}
.pl-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pl-head{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:end}
.pl-skill{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.pl-steps-edit{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:pl}
.pl-step{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card)}
.pl-step::before{counter-increment:pl;content:counter(pl) ".";font-weight:800;min-width:1.4em}
.pl-step .pl-note{flex:1 1 200px;min-width:0}.pl-step .pl-topic{flex:1 1 180px;min-width:0}
.pl-min{display:inline-flex;align-items:center;gap:4px}
.pl-move{display:inline-flex;gap:2px;margin-inline-start:auto}
.pl-warn{flex-basis:100%;color:#c0392b;font-size:14px;font-weight:600}
.pl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:2px solid var(--accent);border-radius:14px;padding:6px 10px;margin-bottom:8px}
.pl-name{font-family:var(--display);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-run{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto}
.pl-sbtn{border:2px solid var(--line);background:var(--paper,var(--card));color:var(--ink);border-radius:99px;padding:3px 10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pl-sbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pl-sbtn.done{opacity:.55;text-decoration:line-through}
.pl-bar .gm-clock{font-size:20px;padding:4px 10px}
.pl-teach{align-items:center;justify-content:center;text-align:center;gap:14px}
.pl-bignote{font-size:clamp(20px,3vw,34px);max-width:40ch;margin:0}
@media (max-width:700px){.pl-head{grid-template-columns:1fr}}
.pl-step select.text,.pl-step input.text{width:auto;margin:0}
.pl-step select.text{flex:0 1 auto;max-width:240px}
.pl-step .num{width:68px}
.pl-step .pl-note,.pl-step .pl-topic{width:auto}
.pl-teach .gm-clock.huge{font-size:clamp(48px,min(22vh,24vw),220px)}
.pl-teach .gm-topic{font-size:clamp(28px,6vh,60px)}
.pl-bar{flex-wrap:nowrap}
.pl-bar>*{flex:none}
.pl-bar .pl-run{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.pl-sbtn{white-space:nowrap}
/* small screens: nothing wider than the screen */
.gm-tile{min-width:0}
@media (max-width:760px){
  .gm-tiles{grid-auto-rows:minmax(56px,auto);gap:6px}.gm-tile{font-size:24px;border-radius:12px}
  .pl-bar{flex-wrap:wrap}.pl-bar .pl-run{flex-basis:100%;order:3}.pl-name{max-width:60vw}
  .gm-head,.gm-scores{min-width:0}
}

/* nothing on the board is ever cut off: if a question is longer than the board, that area scrolls */
.gm-main,.gm-side{overflow:auto;overscroll-behavior:contain}
.gm-main,.gm-side{justify-content:safe center}
.gm-tile.big{width:auto;height:min(160px,24cqh);aspect-ratio:1;flex:none}