@font-face{font-family:"Fredoka";src:url(assets/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
/* ===== Layout =====
   The scene is a plain object-fit:cover picture, top-aligned, so it always fills the screen and is never scaled with transforms.
   The interface is sized from fluid clamp() tokens, not from the picture:
     --b      HUD unit (bars, controls, text)
     --Hart   rendered height of the scene; used only to keep the dock clear of the baked logo and the baked bottom bar
     --avail  vertical room left for the Start buttons; the tokens below shrink with it (min sizes keep 44px touch targets)
   Per-orientation art facts (aspect ratio, where the baked bar starts, where the logo ends) live in the two :root blocks. */
:root{
  --b:clamp(9px,calc(.45vw + .75dvh + 2px),16px);
  --R:1.7778;--bar-top:.904;--logo-bottom:.535;
  --Hart:max(100dvh,calc(100vw/var(--R)));
  --bar:max(2dvh,calc(100dvh - var(--bar-top)*var(--Hart)));
  --avail:max(0px,calc(100dvh - var(--logo-bottom)*var(--Hart) - var(--bar) - 16px));
    --start-w:clamp(180px,min(24vw,calc(var(--avail)*1.45)),500px);
  --su:calc(var(--start-w)/29);--su-alt:calc(var(--su)*.84);--gap:clamp(8px,1.6dvh,18px);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --font:"Fredoka","Baloo 2",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  --navy:#2a2275;--lav:#7a66dc;--gold:#ffd23f;--ink:#5a3a1a;
}
@media (orientation:portrait){:root{--R:.5622;--bar-top:.924;--logo-bottom:.3;--start-w:clamp(220px,78vw,360px);}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#5bb8ee;font-family:var(--font);color:#fff;touch-action:manipulation;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;border:0;padding:0;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}
button[hidden],.app[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:max(3px,calc(var(--b)*.3)) solid #fff;outline-offset:2px;box-shadow:0 0 0 max(6px,calc(var(--b)*.6)) rgba(255,210,63,.9)}

.app{position:fixed;inset:0;overflow:hidden}
.scene{position:absolute;inset:0}
.scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;-webkit-user-drag:none;user-select:none}
@media (orientation:portrait){.scene img{object-position:38% 0}}

/* ---------- Home dock: Start + Disasters buttons sit above the baked bottom bar ---------- */
.dock{position:absolute;left:0;right:0;bottom:calc(var(--bar) + var(--sab) + var(--gap));z-index:3;display:flex;flex-direction:column;align-items:center;gap:var(--gap);pointer-events:none}
.dock>*{pointer-events:auto}
.rules-card{position:absolute;right:max(var(--sar),1.6vw);top:calc(max(52px,var(--b)*5.6) + var(--sat) + 4px);width:clamp(150px,19vw,330px);z-index:3;transition:transform .18s}
.rules-card img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(40,20,0,.35))}
.rules-card:active{transform:scale(.97)}
@media (hover:hover){.rules-card:hover{transform:rotate(-1.2deg) scale(1.04)}}
.rules-chip{display:none}
.rules-dlg{width:min(88vw,430px);max-height:92dvh;padding:0;border:0;background:none;overflow:visible;color:#fff}
.rules-dlg::backdrop{background:rgba(25,10,70,.65)}
.rules-dlg form{display:grid;justify-items:center;gap:14px}
.rules-dlg img{width:100%;max-height:72dvh;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* ---------- Bars + HUD pieces (b-based, safe-area aware) ---------- */
.topbar{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:calc(var(--b)*1.2);
  height:calc(max(56px,var(--b)*6.4) + var(--sat));padding:var(--sat) max(var(--sar),calc(var(--b)*2)) 0 max(var(--sal),calc(var(--b)*2));
  pointer-events:none}
.topbar>*{pointer-events:auto}

.round-group{margin-left:auto;display:flex;gap:calc(var(--b)*1.2)}
.round{position:relative;flex:none;width:max(44px,calc(var(--b)*4.4));height:max(44px,calc(var(--b)*4.4));border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#3b32a0,#241d6b 75%);border:max(2px,calc(var(--b)*.24)) solid #7d6be0;
  box-shadow:0 max(3px,calc(var(--b)*.3)) 0 #170f55,0 0 calc(var(--b)*.7) rgba(140,110,255,.4),inset 0 2px 0 rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s}
.round svg{width:54%;height:54%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.js-full .fs-exit,.round .slash{display:none}.js-full[aria-pressed=true] .fs-exit{display:block}.js-full[aria-pressed=true] .fs-enter{display:none}
.round .slash{display:none}.round[aria-pressed=false] .slash{display:block}.round[aria-pressed=false] .wave{display:none}
.round:active{transform:translateY(3px);box-shadow:0 0 0 #170f55,inset 0 3px 5px rgba(0,0,0,.35)}
@media (hover:hover){.round:hover{filter:brightness(1.18)}}
.score{position:relative;flex:none;display:flex;align-items:center;min-width:calc(var(--b)*12.6);height:max(46px,calc(var(--b)*5.4));padding:0 calc(var(--b)*1.8) 0 calc(var(--b)*5.4);border-radius:99px;
  background:linear-gradient(#32298a,#231c66);border:max(2px,calc(var(--b)*.22)) solid #7d6be0;box-shadow:0 max(3px,calc(var(--b)*.3)) 0 #181347,inset 0 2px 0 rgba(255,255,255,.12)}
.score__star{position:absolute;left:calc(var(--b)*.2);top:50%;width:calc(var(--b)*4.9);height:calc(var(--b)*4.9);min-width:36px;min-height:36px;transform:translateY(-52%) rotate(-8deg);filter:drop-shadow(0 2px 0 rgba(120,50,0,.45))}
.score__text{display:flex;flex-direction:column;align-items:center;width:100%;line-height:1}
.score__label{font-size:max(11px,calc(var(--b)*1.4));font-weight:500;white-space:nowrap}
.score__value{font-size:max(18px,calc(var(--b)*2.4));font-weight:600;margin-top:2px}
.score__value.bump{animation:bump .4s}@keyframes bump{40%{transform:scale(1.3);color:var(--gold)}}
@media (max-width:459px){.topbar .js-home{display:none}.round-group{gap:8px}.topbar{gap:8px}}

/* ---------- Start Game (3-layer pill: glow rim > pink face > gloss) ---------- */
.start{position:relative;flex:none;width:var(--start-w);height:calc(var(--su)*9.1);z-index:4;border-radius:99px;
  background:linear-gradient(#fff3a3,#ffc83a 55%,#f1a21b);padding:calc(var(--su)*.85);
  box-shadow:0 calc(var(--su)*.7) 0 #c2810f,0 calc(var(--su)*1.1) calc(var(--su)*1.2) rgba(60,20,90,.35),0 0 calc(var(--su)*2.6) rgba(255,236,130,.85);
  transition:transform .12s,box-shadow .12s,filter .12s;animation:glow 2.8s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.07) drop-shadow(0 0 calc(var(--su)*1.2) rgba(255,236,130,.9))}}
.start__glow{position:absolute;inset:calc(var(--su)*.3);border-radius:99px;border:calc(var(--su)*.18) solid rgba(255,255,255,.65);pointer-events:none}
.start__face{position:relative;width:100%;height:100%;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:calc(var(--su)*2);overflow:hidden;
  background:linear-gradient(#ff6aa4,#ee3f86 48%,#d52872);
  box-shadow:inset 0 calc(var(--su)*.45) 0 rgba(255,255,255,.45),inset 0 calc(var(--su)*-.7) 0 #a8175b,inset 0 0 0 calc(var(--su)*.22) #ff9cc6}
.start__face::before{content:"";position:absolute;left:4%;right:4%;top:6%;height:38%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.02))}
.start__play{position:relative;width:calc(var(--su)*3.9);height:calc(var(--su)*3.9);filter:drop-shadow(0 calc(var(--su)*.3) 0 rgba(120,0,50,.55))}
.start__label{position:relative;font-size:calc(var(--su)*3.4);font-weight:600;letter-spacing:.01em;text-shadow:0 calc(var(--su)*.3) 0 #a8175b,0 calc(var(--su)*.55) calc(var(--su)*.6) rgba(90,0,40,.4)}
@media (hover:hover){.start:hover{filter:brightness(1.07);transform:translateY(calc(var(--su)*-.2))}}
.start:active{transform:translateY(calc(var(--su)*.6));box-shadow:0 calc(var(--su)*.1) 0 #c2810f,0 0 calc(var(--su)*1.8) rgba(255,236,130,.7)}


/* ---------- Portrait: Start under the logo, Disasters button and rules chip below ---------- */
@media (orientation:portrait){
  .rules-card{display:none}
  .dock{display:contents}
  .start{position:absolute;left:0;right:0;margin:0 auto;top:calc(var(--Hart)*.385);height:calc(var(--su)*8.4)}
  .start--alt{top:calc(var(--Hart)*.385 + var(--su)*8.4 + 12px);height:calc(var(--su-alt)*8.4)}
  .rules-chip{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;left:0;right:0;margin:0 auto;width:160px;min-height:44px;top:calc(var(--Hart)*.385 + var(--su)*8.4 + var(--su-alt)*8.4 + 26px);z-index:4;
    border-radius:14px;background:linear-gradient(#fff4cf,#f1d58f);border:3px solid #b27a3f;color:var(--ink);font-size:16px;font-weight:600;box-shadow:0 4px 0 #7a4b1d}
  .rules-chip svg{width:22px;height:22px}.rules-chip:active{transform:translateY(3px);box-shadow:0 1px 0 #7a4b1d}
  }

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 12dvh);transform:translate(-50%,10px);margin:0;padding:8px 20px;border-radius:99px;z-index:30;max-width:92vw;
  background:var(--navy);border:2px solid var(--lav);font-size:max(14px,calc(var(--b)*1.6));font-weight:500;opacity:0;pointer-events:none;text-align:center;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Shared pill button + dialogs ---------- */
.chip-btn{min-height:44px;padding:8px 22px;border-radius:99px;background:linear-gradient(#ff6aa4,#d52872);color:#fff;font-size:max(16px,calc(var(--b)*1.5));font-weight:600;box-shadow:0 4px 0 #a8175b,inset 0 2px 0 rgba(255,255,255,.4)}
.chip-btn--alt{background:linear-gradient(#52b2ff,#2a7de6);box-shadow:0 4px 0 #174fa8,inset 0 2px 0 rgba(255,255,255,.4)}
.chip-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a8175b}
.paper{width:min(90vw,400px);max-height:90dvh;overflow:auto;padding:0;border:6px solid #b27a3f;border-radius:20px;background:linear-gradient(#fff4cf,#f8e2a5);color:var(--ink);font-family:var(--font);box-shadow:0 12px 0 rgba(90,50,10,.35),0 20px 40px rgba(0,0,0,.4)}
.paper::backdrop{background:rgba(25,10,70,.6)}
.paper form{padding:20px 22px;display:grid;gap:14px}.paper h2{margin:0;font-size:28px;text-align:center}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:20px;font-weight:500}.checks li::before{content:"✔";color:#2b4fb8;margin-right:10px}
.row{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:20px;font-weight:500}
.row input[type=checkbox]{width:26px;height:26px;accent-color:#e23a82}.row input[type=range]{width:55%;accent-color:#e23a82}

/* ---------- GAME screen: HUD + question card ---------- */
.game{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(rgba(58,35,146,.72),rgba(58,35,146,.5));padding:0 var(--sar) var(--sab) var(--sal)}
.game[hidden]{display:none}
.game{isolation:isolate}
.game::before{content:"";position:fixed;inset:-4%;z-index:-1;background:url(assets/img/desk-1280.webp) center/cover;filter:blur(14px) saturate(1.1)}
@media (orientation:portrait){.game::before{background-image:url(assets/img/mob-640.webp)}}
.hud{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"home prog score ctl";align-items:center;gap:calc(var(--b)*1.2);
  padding:calc(var(--sat) + calc(var(--b)*.9)) max(var(--sar),calc(var(--b)*1.6)) calc(var(--b)*.9) max(var(--sal),calc(var(--b)*1.6));margin:0 calc(var(--sar)*-1) 0 calc(var(--sal)*-1);
  background:linear-gradient(#3b2492,#5a36bb);border-bottom:max(2px,calc(var(--b)*.22)) solid #8a6cf0;box-shadow:0 calc(var(--b)*.35) calc(var(--b)*.8) rgba(30,10,90,.4)}
.hud__home{grid-area:home}.hud__progress{grid-area:prog;min-width:0}.hud__score{grid-area:score}.hud__ctl{grid-area:ctl;display:flex;gap:calc(var(--b)*1)}
.hud__meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:max(13px,calc(var(--b)*1.45));font-weight:600;text-transform:capitalize;text-shadow:0 2px 0 rgba(20,5,80,.5)}
.bar{height:max(14px,calc(var(--b)*1.7));border-radius:99px;background:#1f1a5c;border:2px solid #7a66dc;overflow:hidden;box-shadow:inset 0 3px 4px rgba(0,0,0,.4)}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(#ffe97a,#ffb62e);box-shadow:inset 0 3px 0 rgba(255,255,255,.55);transition:width .5s cubic-bezier(.3,1.4,.5,1)}
@media (max-width:560px){.hud{grid-template-columns:auto 1fr auto;grid-template-areas:"home score ctl" "prog prog prog"}.hud__score{justify-self:center}}
.play{flex:1;display:grid;place-items:center;padding:calc(var(--b)*1.6) max(12px,calc(var(--b)*1.6))}
.card{width:min(100%,calc(var(--b)*74));padding:calc(var(--b)*2) calc(var(--b)*2.2);border:max(4px,calc(var(--b)*.4)) solid #b27a3f;border-radius:calc(var(--b)*2);background:linear-gradient(#fff4cf,#f8e2a5);color:var(--ink);box-shadow:0 calc(var(--b)*.7) 0 rgba(90,50,10,.4),0 calc(var(--b)*1.4) calc(var(--b)*2.4) rgba(0,0,0,.3)}
.card>div{display:grid;gap:calc(var(--b)*1.5)}
.card__head{text-align:center}.card__kicker{margin:0 0 6px;font-size:max(14px,calc(var(--b)*1.5));font-weight:600;color:#8a5a2b;text-transform:uppercase;letter-spacing:.06em}
.card__q{margin:0;font-size:clamp(19px,min(calc(var(--b)*3),3.7dvh),46px);font-weight:600;line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
.blank{display:inline-block;min-width:2.2em;border-bottom:.12em solid #e23a82;color:#e23a82;text-align:center}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--b)*1.1)}
@media (max-width:560px){.choices{grid-template-columns:repeat(2,1fr)}.choice{min-height:56px}}
.choice{--c1:#52b2ff;--c2:#2a7de6;--rim:#a8d6ff;--sh:#174fa8;position:relative;min-height:max(54px,calc(var(--b)*5));padding:8px 8px;border-radius:calc(var(--b)*1.8);
  background:linear-gradient(var(--c1),var(--c2));border:max(3px,calc(var(--b)*.4)) solid var(--rim);color:#fff;font-size:clamp(16px,min(calc(var(--b)*2.3),5vw),32px);font-weight:600;line-height:1.1;overflow-wrap:anywhere;
  text-shadow:0 2px 0 var(--sh);box-shadow:0 max(4px,calc(var(--b)*.45)) 0 var(--sh),inset 0 3px 0 rgba(255,255,255,.5);transition:transform .12s,box-shadow .12s,filter .2s}
.choice:active:not([aria-disabled=true]){transform:translateY(4px);box-shadow:0 1px 0 var(--sh)}
@media (hover:hover){.choice:hover:not([aria-disabled=true]){filter:brightness(1.08);transform:translateY(-2px)}}
.choice[aria-disabled=true]{cursor:default;filter:saturate(.4) brightness(.9);opacity:.7}
.choice.is-right{--c1:#6fe05e;--c2:#36b236;--rim:#b5f5a8;--sh:#1f7d22;filter:none;opacity:1}
.choice.is-wrong{--c1:#ff7a8a;--c2:#e03a58;--rim:#ffc1c9;--sh:#9c1f38;filter:none;opacity:1;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.card__foot--row{justify-content:center;flex-wrap:wrap}
.feedback{margin:0;flex:1;min-height:2.6em;display:flex;align-items:center;font-size:max(15px,calc(var(--b)*1.7));font-weight:600}
.feedback.ok{color:#237a22}.feedback.no{color:#b01f45}
.next{visibility:hidden}.next.show{visibility:visible}
@media (max-width:420px){.card__foot:not(.card__foot--row){flex-direction:column;align-items:stretch;text-align:center}.feedback{justify-content:center;min-height:2.6em}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Question picture + circular timer ---------- */
#quiz{display:grid;grid-template-columns:1fr;gap:calc(var(--b)*1.5)}
#quiz[hidden],#result[hidden]{display:none}
.qbody{display:grid;gap:calc(var(--b)*1.5);align-content:start;min-width:0}
.qfig{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;max-height:25dvh;width:100%;border-radius:calc(var(--b)*1.5);border:max(3px,calc(var(--b)*.3)) solid #b27a3f;background:#e8dcc0;box-shadow:0 calc(var(--b)*.4) 0 rgba(90,50,10,.35)}
.qfig picture,.qfig img{display:block;width:100%;height:100%}.qfig img{object-fit:cover}
.timer{position:absolute;top:calc(var(--b)*.8);right:calc(var(--b)*.8);width:max(56px,calc(var(--b)*5.6));aspect-ratio:1;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:radial-gradient(circle at 50% 30%,#3b32a0,#241d6b 75%);border:max(2px,calc(var(--b)*.22)) solid #7d6be0;
  box-shadow:0 max(3px,calc(var(--b)*.3)) 0 #170f55,0 0 calc(var(--b)*.9) rgba(140,110,255,.5),inset 0 2px 0 rgba(255,255,255,.18)}
.timer svg{position:absolute;inset:7%;width:86%;height:86%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:10;stroke-linecap:round}
.timer__track{stroke:rgba(255,255,255,.16)}
.timer__arc{stroke:#ffd23f;stroke-dasharray:100 100;filter:drop-shadow(0 0 3px rgba(255,210,63,.7))}
.timer__num{position:relative;color:#fff;font-size:max(19px,calc(var(--b)*2.4));font-weight:600;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.timer.low .timer__arc{stroke:#ff5a7a;filter:drop-shadow(0 0 3px rgba(255,90,122,.8))}
.timer.low{animation:tpulse 1s ease-in-out infinite}
.timer.done{animation:none;opacity:.85}
@keyframes tpulse{50%{transform:scale(1.08)}}
@media (min-width:860px),(orientation:landscape){
  #quiz{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:calc(var(--b)*2.2)}
  .qfig{aspect-ratio:4/3;max-height:calc(100dvh - 130px)}
}
@media (orientation:landscape) and (max-height:520px){
  .hud{padding-top:calc(var(--sat) + 4px);padding-bottom:4px}.play{padding:8px max(12px,var(--sar))}
  .card{width:min(100%,940px);padding:12px 16px}
  .card__q{font-size:clamp(18px,4.4dvh,28px)}.choices{grid-template-columns:1fr 1fr}.choice{min-height:46px;font-size:20px}
  .qfig{max-height:calc(100dvh - 122px)}.qbody{gap:8px}
}

/* ---------- "Disasters Vocabulary" button: same construction as Start, smaller, teal ---------- */
.start--alt{--su:var(--su-alt);width:calc(var(--su)*29);height:calc(var(--su)*9.1);background:linear-gradient(#e1fffa,#6fe8d8 55%,#2cbfb0);box-shadow:0 calc(var(--su)*.7) 0 #178a80,0 calc(var(--su)*1.1) calc(var(--su)*1.2) rgba(10,60,70,.35),0 0 calc(var(--su)*2.4) rgba(130,255,235,.8);animation:none}
.start--alt .start__face{background:linear-gradient(#4eeedb,#1bbfae 48%,#0f9a8f);box-shadow:inset 0 calc(var(--su)*.45) 0 rgba(255,255,255,.45),inset 0 calc(var(--su)*-.7) 0 #0a6f68,inset 0 0 0 calc(var(--su)*.22) #8ff5e8;gap:calc(var(--su)*1.2)}
.start--alt .start__label{font-size:calc(var(--su)*1.78);text-shadow:0 calc(var(--su)*.3) 0 #0a6f68,0 calc(var(--su)*.55) calc(var(--su)*.6) rgba(0,60,55,.4);white-space:nowrap}
.start--alt .start__play{width:calc(var(--su)*3.2);height:calc(var(--su)*3.2);filter:drop-shadow(0 calc(var(--su)*.3) 0 rgba(0,70,65,.55))}
@media (hover:hover){.start--alt:hover{filter:brightness(1.07);transform:translateY(calc(var(--su)*-.2))}}
.start--alt:active{transform:translateY(calc(var(--su)*.6));box-shadow:0 calc(var(--su)*.1) 0 #178a80,0 0 calc(var(--su)*1.8) rgba(130,255,235,.7)}

/* ---------- Disasters: study screen, stepper, definition panel, stage results ---------- */
.card--wide{width:min(100%,calc(var(--b)*100))}
.study{display:grid;gap:calc(var(--b)*1.4)}
.study__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--b)*1)}
.study__top .card__kicker{margin:0 0 4px}.study__title{margin:0;font-size:clamp(22px,calc(var(--b)*2.6),40px);font-weight:600;line-height:1.1}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--b)*.9);list-style:none;margin:0;padding:0}
.steps li{display:flex;align-items:center;gap:6px;font-size:max(12px,calc(var(--b)*1.25));font-weight:600;color:#8a5a2b;opacity:.65}
.steps .n{display:grid;place-items:center;width:max(28px,calc(var(--b)*2.5));aspect-ratio:1;border-radius:50%;background:#ecd9a8;border:2px solid #b27a3f;color:var(--ink)}
.steps li.done{opacity:1}.steps li.done .n{background:#6fe05e;border-color:#2e8f2e;color:#fff}
.steps li.now{opacity:1;color:var(--ink)}.steps li.now .n{background:linear-gradient(#ff6aa4,#d52872);border-color:#a8175b;color:#fff;box-shadow:0 0 0 3px rgba(255,210,63,.85)}
@media (max-width:640px){.steps li:not(.now) .t{display:none}}
.cardgrid{display:grid;grid-template-columns:1fr;gap:calc(var(--b)*1.2);align-items:start;width:min(100%,calc(var(--b)*64));margin-inline:auto}
@media (min-width:560px){.cardgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px),(orientation:landscape) and (max-height:520px) and (min-width:640px){.cardgrid{grid-template-columns:repeat(3,1fr)}}
.wcard{margin:0}.wcard picture,.wcard img{display:block;width:100%}.wcard img{height:auto;aspect-ratio:476/500;object-fit:contain;filter:drop-shadow(0 calc(var(--b)*.35) calc(var(--b)*.5) rgba(90,50,10,.3))}
.qdef{position:absolute;inset:0;display:grid;place-items:center;padding:calc(max(56px,var(--b)*5.6) + var(--b)*1.2) calc(var(--b)*2) calc(var(--b)*1.2);text-align:center;font-size:clamp(16px,calc(var(--b)*2.6),40px);font-weight:600;line-height:1.25;color:var(--ink);background:linear-gradient(#fff9e1,#f8e2a5)}
.qdef[hidden]{display:none}
.qdef::before{content:"“";position:absolute;top:calc(var(--b)*.4);left:calc(var(--b)*1.2);font-size:calc(var(--b)*7);line-height:1;color:rgba(178,122,63,.35)}
#dresult{display:grid;gap:calc(var(--b)*1.5)}#dresult[hidden]{display:none}
.sumlist{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:max(16px,calc(var(--b)*1.8));font-weight:500;text-align:center}
.sumlist li b{font-weight:600;color:#b01f45}

/* definition panel: keeps the picture's frame proportions but grows when a definition needs more room */
.qfig--def{display:grid;grid-template-rows:1fr;max-height:none}
.qfig--def picture{display:none}
.qfig--def .qdef{position:relative;inset:auto}