/* Phone page: big targets, instant feedback, calm variant of everything. */
/* The header WRAPS (audit round 7, W2): at 320 px with the text at 200 % the six controls needed 440 px on one
   line, so Calm was clipped and Colours and Help sat off the edge of the screen. */
.phonebar{ gap:.35rem; flex-wrap:wrap; }
.phonebar h1{ font-size:.95rem; margin-right:.2rem; }
.phonebar .pill{ max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.phonebar button{ min-height:44px; min-width:44px; padding:.25rem .5rem; font-size:.9rem; white-space:nowrap; }
@media (max-width:480px){ .phonebar h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .phonebar .pill{ max-width:9rem; } }
.student .stage{ padding:1rem; justify-content:flex-start; gap:.8rem; }
/* W2, part two: the page is pinned to the viewport, so a footer that grows with the text used to squeeze the
   activity into a sliver (159 px of stage under 318 px of small print at 200 %). On a phone, or whenever the window
   is short, the document flows and scrolls normally instead: the activity keeps its full height and the page
   scrolls in ONE direction, with the footer below it (WCAG 1.4.10). */
@media (max-width:480px), (max-height:640px){
  body.student{ height:auto; min-height:100%; }
  .student .stage{ flex:1 0 auto; overflow:visible; }
}
/* The two attribution lines stay two separate lines on every screen (the author's decision, 2026-09-06): the footer sits
   BELOW the activity now, so its height costs the student nothing. */
.student .panel{ max-width:480px; }
.student h2{ margin:.2rem 0; font-size:1.4rem; }
.big{ font-size:1.6rem; font-weight:800; }
.huge{ font-size:3rem; font-weight:900; line-height:1.1; margin:.2rem 0; }
.status{ font-size:1.15rem; color:var(--muted); }
.qtext{ font-size:1.1rem; font-weight:600; color:var(--muted); max-width:560px; margin:.2rem 0; }
.roomline{ font-size:1.05rem; font-weight:700; }
.roomline .code{ font-family:Consolas,monospace; letter-spacing:.2em; font-size:1.3rem; }
.code-input{ text-transform:uppercase; font-size:1.6rem; letter-spacing:.2em; font-weight:800; }
/* An empty code box never looks like a typed one (audit round 7, U3): the example is lighter, italic and smaller. */
.code-input::placeholder{ font-size:1.05rem; letter-spacing:.06em; font-weight:400; font-style:italic; text-transform:none; }
.join-btn{ width:100%; font-size:1.2rem; min-height:56px; margin-top:.6rem; }
/* Two columns while a word fits; ONE column once it would not (checklist 78, 2026-09-13: at 320 px with the text at
   200 % the two columns split "Seven" into "Se / ve / n"). The minimum is in rem, so it grows with the text size. */
.answers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(max(8.5rem, calc((100% - .8rem) / 2)), 1fr)); gap:.8rem; width:100%; max-width:560px; flex:1 1 auto; min-height:50vh; }
.answers button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; min-height:120px; font-size:1.15rem; font-weight:800; border:3px solid transparent; border-radius:1rem; color:var(--opt-ink); padding:.8rem; word-break:break-word; transition:transform .12s ease, filter .2s; }
.answers button[data-k="0"]{ background:var(--optA); } .answers button[data-k="1"]{ background:var(--optB); } .answers button[data-k="2"]{ background:var(--optC); } .answers button[data-k="3"]{ background:var(--optD); }
.answers button:active{ transform:scale(.96); }
.answers button[aria-pressed="true"]{ border-color:var(--ink); box-shadow:0 0 0 4px var(--panel), 0 0 0 7px var(--ink); }
.answers button .sh{ width:2.4rem; height:2.4rem; fill:currentColor; }
.answers button .lt{ font-size:.85rem; }
/* locked: unchosen options lose their fill but keep readable text */
.answers.locked button:not([aria-pressed="true"]){ background:var(--panel); color:var(--ink); border-color:var(--line); }
.answers.locked button:not([aria-pressed="true"]) .sh{ fill:var(--muted); }
.answers.paused button{ background:var(--panel); color:var(--ink); border-color:var(--line); }
.timerwrap{ display:flex; align-items:center; gap:.6rem; width:100%; max-width:560px; }
.timerbar{ flex:1; height:10px; background:var(--line); border-radius:999px; overflow:hidden; }
.timernum{ font-weight:900; font-variant-numeric:tabular-nums; min-width:2.6rem; text-align:right; font-size:1.2rem; }
.timerwrap[data-low="true"] .timernum{ color:var(--warn); }
.timerbar div{ height:100%; background:var(--accent); width:100%; transition:width .2s linear; }
.timerwrap[data-low="true"] .timerbar div{ background:var(--warn); }
.locked-msg{ font-size:1.3rem; font-weight:800; display:flex; align-items:center; gap:.5rem; }
.locked-msg .tick{ color:var(--good); font-size:1.6rem; }
.pollopts{ display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:560px; }
.pollopts button{ min-height:64px; font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:.7rem; text-align:left; padding:.6rem .9rem; }
.pollopts button .mine{ margin-left:auto; color:var(--muted); font-size:.9rem; }
.pollopts button[aria-pressed="true"] .mine{ color:inherit; }
.result{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:100%; max-width:560px; animation:popin .5s cubic-bezier(.2,.9,.3,1.3) both; text-align:center; }
@keyframes popin{ from{ transform:scale(.7); opacity:0 } to{ transform:none; opacity:1 } }
.result .mark{ font-size:4.5rem; line-height:1; font-weight:900; }
.result.ok .mark{ color:var(--good); } .result.no .mark{ color:var(--warn); }
.result .pts{ font-size:2.4rem; font-weight:900; }
.stat{ display:flex; gap:1.2rem; font-size:1.05rem; color:var(--muted); flex-wrap:wrap; justify-content:center; }
.stat b{ color:var(--ink); font-size:1.4rem; }
.bars{ max-width:560px; } .bar-row .lab{ width:38%; font-size:.95rem; } .bar-row .track{ height:2.2rem; } .bar-row .n{ min-width:60px; font-size:.95rem; }
.medal{ font-size:5rem; }
.calmhint{ font-size:.95rem; color:var(--muted); margin:.4rem 0 0; }
.waiting{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:2rem; text-align:center; }
.dots span{ display:inline-block; width:12px; height:12px; margin:0 4px; border-radius:50%; background:var(--accent); animation:bounce 1.2s infinite ease-in-out; }
.dots span:nth-child(2){ animation-delay:.2s } .dots span:nth-child(3){ animation-delay:.4s }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0) } 40%{ transform:translateY(-10px) } }
:root[data-calm="on"] .dots{ display:none; }
.topthree{ text-align:left; font-size:1.15rem; list-style:none; padding:0; margin:.4rem 0 0; }
.topthree li{ padding:.15rem 0; }

/* ---------- Word cloud input ---------- */
.wcform{ display:flex; gap:.6rem; margin:.6rem 0; }
.wcform input{ flex:1; font-size:1.35rem; padding:.9rem 1rem; min-height:3.4rem; }
.wcform .big-btn{ flex:0 0 auto; min-width:5.5rem; }

/* join: icon picker */
.iconpick{ display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; margin:.2rem 0 .6rem; }
.iconbtn{ font-size:1.7rem; min-height:52px; border:2px solid var(--line); border-radius:.7rem; background:var(--panel); cursor:pointer; }
.iconbtn[aria-checked="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent); }
.iconpick{ grid-template-columns:repeat(4,1fr); }
#moreIcons{ margin:0 0 .5rem; }
.igname{ margin:.5rem 0 .2rem; font-weight:700; }

/* order it: arrange items */
.orderlist{ list-style:none; margin:.6rem 0; padding:0; display:flex; flex-direction:column; gap:.5rem; width:100%; max-width:560px; }
.orderlist li{ display:flex; align-items:center; gap:.6rem; background:var(--panel); border:2px solid var(--line); border-radius:.9rem; padding:.7rem .8rem; min-height:56px; font-size:1.1rem; font-weight:700; touch-action:none; }
.orderlist li.drag{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent); opacity:.9; }
.orderlist .handle{ color:var(--muted); font-size:1.3rem; cursor:grab; }
.orderlist .pos{ min-width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:900; font-size:.95rem; }
.orderlist .otext{ flex:1 1 auto; }
.orderlist .ord-btns{ display:flex; flex-direction:column; gap:.2rem; }
.orderlist .ord-btns button{ min-width:44px; min-height:26px; border:2px solid var(--line); border-radius:.5rem; background:var(--bg); color:var(--ink); font-size:.9rem; line-height:1; }
.orderlist .ord-btns button:disabled{ opacity:.35; }
.orderlist.locked li, .orderlist.paused li{ opacity:.85; }
.orderlist.reveal{ margin-top:.4rem; }
.orderlist.reveal li{ background:var(--bg); }

/* Match pairs */
.matchcols{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.4rem 0; }
.mcol{ display:flex; flex-direction:column; gap:.5rem; }
.mleft,.mright{ display:flex; align-items:center; gap:.5rem; min-height:56px; padding:.6rem .7rem; border:2px solid var(--line); border-radius:.8rem; background:var(--panel); color:var(--ink); font-size:1rem; font-weight:700; text-align:left; width:100%; }
.mleft.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent); }
.mleft.matched,.mright.matched{ border-color:var(--good); }
.mleft:disabled,.mright:disabled{ opacity:.6; }
.mbadge{ min-width:1.6rem; height:1.6rem; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:900; font-size:.85rem; flex:0 0 auto; }
.matchresult{ list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.matchresult li{ display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-radius:.6rem; border:2px solid var(--line); }
.matchresult li.ok{ border-color:var(--good); } .matchresult li.no{ border-color:var(--warn); }
.matchresult .pl{ flex:1 1 0; min-width:0; } .matchresult .pr{ flex:1 1 0; min-width:0; text-align:right; } .matchresult .arrow{ color:var(--muted); } .matchresult .mk{ font-weight:900; }

/* ---- Buzzers ---- */
.buzzwrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; min-height:72vh; }
.buzzbtn{ flex:1; width:100%; min-height:58vh; border-radius:1.6rem; border:4px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--panel); color:var(--muted);
  padding:1rem; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.buzzlabel{ font-size:clamp(3rem,22vw,10rem); letter-spacing:.02em; line-height:1; }
.buzzbtn.live{ background:var(--good); color:var(--stage); border-color:var(--good); animation:buzzpulse 1s ease-in-out infinite; }
.buzzbtn.live:active{ transform:scale(.97); }
.buzzbtn.pressed{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:scale(.97); }
.buzzbtn.buzzed{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.buzzbtn.wait{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn); }
.buzzbtn.closed{ background:var(--bg); color:var(--muted); }
.buzzbtn[disabled]{ cursor:default; opacity:1; }
.buzzsub{ font-size:1.2rem; font-weight:700; text-align:center; color:var(--ink); margin:.2rem 0; }
@keyframes buzzpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(26,127,60,.45);} 50%{ box-shadow:0 0 0 1.4rem rgba(26,127,60,0);} }

/* The waiting game: a thumb pad on the phone. The game itself is on the projector — this is a controller, so it is
   deliberately plain and the words send you to look up. */
.lobbywait .huge{ font-size:1.7rem; margin:.2rem 0 0; }
.lobbywait .big{ font-size:1.15rem; margin:.1rem 0 .2rem; }
.lobbywait .status{ font-size:.95rem; margin:.1rem 0 .5rem; }
.lobbywait .huge, .lobbywait .big, .lobbywait .status{ transition:opacity .3s ease, max-height .3s ease, margin .3s ease; max-height:6rem; opacity:1; overflow:hidden; }
.lobbywait.playing .huge, .lobbywait.playing .big, .lobbywait.playing .status{ opacity:0; max-height:0; margin:0; }
.swarm{ margin:.4rem auto 0; max-width:22rem; }
.swarmbar{ margin:0 0 .4rem; }
.swarmtitle{ font-weight:700; color:var(--muted); font-size:.95rem; }
.swarmbar{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin:0 0 .35rem; }
.swarmscore{ font-size:.9rem; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.swarmfield{ display:flex; justify-content:center; }
.swarmfield canvas{ display:block; width:100%; max-width:24rem; border-radius:.6rem; border:2px solid var(--line); touch-action:none; }
.swarm.playing .swarmfield canvas{ border-color:var(--accent); }
.swarmsay{ margin:.6rem 0 .2rem; color:var(--muted); font-size:.95rem; min-height:2.6em; }
.swarmgo{ min-height:44px; padding:.5rem 1.6rem; font-weight:700; border-radius:.6rem;
  border:2px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
.swarmgo:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* "This page is open in another tab": focus is moved to the heading so a screen reader reads it; it is not a control */
#replacedTitle:focus{ outline:none; }
/* Files for this class (student/app.js roomFiles): under the join and waiting screens */
.roomfiles{ width:min(560px, calc(100% - 2rem)); margin:0 auto 1.5rem; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; z-index:1; }
.roomfiles h2{ margin:0 0 .6rem; font-size:1.15rem; font-weight:900; }
.rf-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.rf-item{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-height:48px; padding:.55rem .85rem; border:1px solid var(--line); border-radius:.8rem; color:var(--ink); text-decoration:none; background:var(--bg); }
.rf-item:hover, .rf-item:focus-visible{ border-color:var(--accent); }
.rf-name{ font-weight:800; overflow-wrap:anywhere; }
.rf-go{ flex:0 0 auto; font-weight:900; color:var(--accent); }
.rf-desc{ margin:.25rem .2rem 0; font-size:.92rem; color:var(--muted); }
@media (prefers-reduced-motion: reduce){
  .lobbywait .huge, .lobbywait .big, .lobbywait .status{ transition:none; }
  .swarmfield canvas{ transition:none; }
}
/* the Content Builder: a picture, up to eight answers (colours repeat, the letter tells them apart), and feedback */
.qimg{ display:block; max-width:100%; max-height:32vh; object-fit:contain; margin:.2rem auto .6rem; border-radius:.8rem; background:var(--panel); }
.answers button[data-k="4"]{ background:var(--optA); } .answers button[data-k="5"]{ background:var(--optB); } .answers button[data-k="6"]{ background:var(--optC); } .answers button[data-k="7"]{ background:var(--optD); }
.answers.many{ min-height:0; } .answers.many button{ min-height:78px; font-size:1.05rem; gap:.2rem; }
.answers.many button .lt{ font-size:1rem; font-weight:900; }
.feedback{ font-size:1.1rem; font-weight:700; background:var(--panel); border:2px solid var(--line); border-radius:.8rem; padding:.6rem .9rem; margin:.4rem 0; max-width:560px; }