/* 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 (John'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; }
.answers{ display:grid; grid-template-columns:1fr 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);} }