/* Quiz screens (learner, trainer and presenter): use the whole page, big answer tiles, the picture beside the question.
   Loaded after each page's own styles. Colours still come from the theme, so branding applies. */
.c1{background:#1e8a3c}.c5{background:#137a80}              /* a touch darker so white text passes 4.5:1 */
.pills .g{background:#1e8a3c}.pills .r{background:#c82333}.pills .n{background:#5c636a}
.stage .right{background:#1e8a3c}.dist .d.ok .fl{background:#1e8a3c}.dist .d.ok .nm{color:var(--ok,#1e8a3c)}
.res.ok,.rightans{background:#1e8a3c}.res.bad{background:#c82333}.res.none{background:#5c636a}
.dist .d .tr,.bartime{border:1px solid var(--ctl,var(--line))}

/* ---- learner ---- */
.wrap.narrow{max-width:1100px}
.panel:not(.wide){max-width:960px;margin-inline:auto;width:100%;gap:18px}
#card:has(.panel){background:transparent;border:0;padding:0}
/* the other screens (lobby, result, scores, final) are bigger too */
.panel .big{font-size:clamp(28px,4.2vw,52px);letter-spacing:-.01em}
.panel .sub{font-size:clamp(16px,1.8vw,20px)}
.panel .res{font-size:clamp(30px,4.6vw,56px);padding:28px 20px;border-radius:24px}
.panel .res small{font-size:clamp(17px,2vw,24px)}
.panel .me{font-size:clamp(20px,2.4vw,30px)}
.panel .rightans,.panel .expl{font-size:clamp(18px,2vw,24px);padding:18px 22px;border-radius:18px}
.panel .gif{max-height:300px;border-radius:20px}.panel .emoji{font-size:96px}
.lb .r{font-size:clamp(18px,2.2vw,26px);padding:14px 18px;border-radius:16px}
.podium .who{font-size:clamp(18px,2.6vw,30px)}.podium .blk{font-size:clamp(34px,5vw,60px)}
.podium .p1 .blk{height:180px}.podium .p2 .blk{height:130px}.podium .p3 .blk{height:95px}
.namebox{max-width:560px;margin-inline:auto;width:100%}
.panel.wide{gap:16px;min-height:0}
.panel.wide .hud{font-size:18px}
.bartime{height:14px;border-radius:999px;background:var(--surface)}.bartime i{border-radius:999px}
/* question screen: question, picture centred, then the answer tiles in a fixed block at the foot of the screen,
   so the tiles are in the same place whether there are 2, 3 or 4 answers (and the same size as the right / wrong screen) */
.panel.wide:has(>.opts){display:flex;flex-direction:column;align-items:stretch;text-align:center;min-height:calc(100vh - 150px);min-height:calc(100dvh - 150px)}
.panel.wide .qt{font-size:clamp(26px,4vw,46px);line-height:1.15;letter-spacing:-.01em;text-align:center}
.panel.wide>img.pic,.panel.wide>iframe.yt{align-self:center;margin-block:auto;width:auto;max-width:100%;height:clamp(150px,30vh,340px);aspect-ratio:auto;object-fit:contain;border-radius:20px}
.panel.wide>iframe.yt{aspect-ratio:16/9;width:min(100%,calc(clamp(150px,30vh,340px)*16/9))}
.pic.def{height:clamp(120px,24vh,260px)!important}
.panel.wide .opts{gap:16px;width:100%;grid-auto-rows:minmax(104px,auto);min-height:224px;align-content:start}
@media(min-width:520px){.panel.wide .opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:519px){.panel.wide .opts{min-height:0}}
.panel.wide .opt,.stage .a{min-width:0;overflow-wrap:anywhere}
.panel.wide .opt{min-height:104px;border-radius:22px;font-size:clamp(20px,2.4vw,28px);padding:18px 26px}
.panel.wide .opt i{width:46px;height:46px;font-size:22px;border-radius:12px}
.panel.wide .opt.mine{outline:4px solid var(--accent-text,var(--text));outline-offset:3px}
.panel.wide>.sub{font-size:clamp(16px,1.8vw,20px);min-height:1.4em}

/* ---- trainer and presenter ---- */
.stage{padding:0;gap:16px;min-height:0}
.stage .qt{font-size:clamp(24px,3vw,40px);letter-spacing:-.01em}
.stage .ans{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stage .a{border-radius:18px;padding:16px 22px;min-height:80px;font-size:clamp(18px,2vw,26px)}
.stage .a i{width:38px;height:38px;border-radius:10px}
.stage .right,.stage .expl{border-radius:16px}
/* picture centred under the question, answers below it (as on the learner screen) */
.stage{display:flex;flex-direction:column;align-items:stretch}
.stage>.qt{order:-2}
.stage>img.pic,.stage>iframe{order:-1;align-self:center;width:auto;max-width:100%;height:clamp(120px,26vh,280px);object-fit:contain;aspect-ratio:auto}
.stage>iframe{aspect-ratio:16/9;width:min(100%,calc(clamp(120px,26vh,280px)*16/9))}
.stage .big{text-align:center}

/* picture-grid questions: the picture is scaled to fit the window height, so the whole screen is visible without scrolling */
.pgbox{--pich:max(160px,calc(100dvh - 400px));width:fit-content;max-width:100%;margin-inline:auto;justify-self:center}
.pgbox>img{width:auto!important;max-width:100%;max-height:var(--pich)}
.pgbox.pgrev{--pich:max(140px,28dvh)}
.panel.wide:not(:has(>.opts)) .qt{text-align:center}

/* trainer: the controls are fixed to the bottom of the window, so they never move between the question and result screens */
#game{padding-bottom:150px}
#game .ctlgrid{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;padding:10px max(16px,calc((100% - 1100px)/2 + 16px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.25)}
#game .ctlgrid .card{padding:8px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#game .ctlgrid .card h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#game .ctlgrid .stack2{display:flex;flex-wrap:wrap;gap:8px}
#game .ctlgrid button.main{width:auto;padding:10px 22px;font-size:16px}
#game .ctlgrid .val{font-size:24px;font-weight:900}
#game .ctlgrid .muted{margin:0!important;font-size:13px}
#game .ctlgrid .card:first-child{flex:1 1 auto}
#game .ctlgrid details summary{cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#game .ctlgrid details[open]{min-width:240px}
/* phones: smaller picture and tiles so the question and all the answers fit on one screen */
@media(max-width:519px){
  .panel.wide>img.pic,.panel.wide>iframe.yt,.pic.def{height:clamp(90px,15vh,140px)!important}
  .panel.wide{gap:10px}.panel.wide .qt{font-size:22px}
  .panel.wide .opts{gap:10px;grid-auto-rows:minmax(64px,auto)}
  .panel.wide .opt{min-height:64px;padding:10px 16px;font-size:18px;border-radius:16px}.panel.wide .opt i{width:34px;height:34px;font-size:16px}
}
/* trainer bar: one row on a normal screen, so its height (and the page above it) never changes between screens */
@media(min-width:1000px){
  #game .ctlgrid{flex-wrap:nowrap;padding-inline:max(16px,calc((100% - 1240px)/2))}
  #game .ctlgrid>.card{flex:0 0 auto;white-space:nowrap}
  #game .ctlgrid>.card:first-child{flex:1 1 auto}
  #game .ctlgrid>.card:first-child h3{display:none}
  #game .ctlgrid .stack2{flex-wrap:nowrap}
  #game .ctlgrid .card .muted{white-space:nowrap}
}
/* picture question result: compact, so the whole result fits on one screen */
.panel.revpic{gap:10px}
.panel.revpic .res{padding:14px 16px;font-size:clamp(26px,3.4vw,40px)}
.panel.revpic .res small{font-size:clamp(16px,1.8vw,20px)}
.panel.revpic .gif{max-height:min(18dvh,170px)}.panel.revpic .emoji{font-size:56px}
.panel.revpic .rightans,.panel.revpic .expl{padding:12px 18px;font-size:clamp(16px,1.8vw,20px)}
.pgbox.pgrev{--pich:max(120px,26dvh)}
/* trainer / presenter picture questions: the picture sits right under the title and is sized so the notes below it stay on screen too */
.stage>.pgbox{order:-1;--pich:max(150px,calc(100dvh - 500px))}
.stage .pgbox~.right,.stage .pgbox~.expl{font-size:clamp(16px,1.8vw,22px);padding:10px 18px}
/* put-in-order question (learner) and its result */
.ordlist{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;width:100%;max-width:760px}
.orditem,.ordrow{display:flex;align-items:center;gap:14px;border-radius:18px;padding:12px 16px;background:var(--surface,#14194a);border:2px solid var(--line,#2a3070);font-size:clamp(18px,2.2vw,26px);font-weight:700;text-align:left}
.orditem .n,.ordrow .n{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent,#ffd23f);color:var(--ink,#10143a);font-weight:900}
.orditem .t,.ordrow .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.orditem .mv{flex:0 0 auto;min-width:52px;min-height:52px;border-radius:14px;font-size:20px;padding:0;border:2px solid var(--ctl,#8b93d6);background:var(--bg,#0b0e2e);color:var(--text,#fff)}
.orditem .mv:disabled{opacity:.3}
.ordres{display:grid;gap:8px;width:100%;max-width:760px;margin:0 auto}
.ordrow{font-size:clamp(16px,1.9vw,22px);padding:8px 14px}.ordrow .n{width:34px;height:34px}
.ordrow .mk{flex:0 0 auto;font-weight:800}
.ordrow.yes{border-color:var(--ok,#1e8a3c)}.ordrow.yes .mk{color:var(--ok-ink,var(--ok,#7ee2a8))}
.ordrow.no{border-color:var(--danger,#ff8a85)}.ordrow.no .mk{color:var(--danger,#ff8a85);font-weight:700;font-size:.85em}
@media(max-width:519px){.orditem{padding:8px 10px;gap:10px}.orditem .mv{min-width:46px;min-height:46px}}
.dist .d .nm{white-space:normal;overflow-wrap:anywhere}

/* picture reveal: on the player screen the picture is sized so the answer tiles stay on screen below it */
.panel .pgbox.rvq{--pich:clamp(150px,32dvh,340px)}