/* Learn History Writing: landing page and model clerkings. Uses the tokens in /style.css. */
.chip{display:inline-block;font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;line-height:1.2;color:var(--navy);background:var(--blue-bg);border:1px solid var(--blue-br);border-radius:99px;padding:.22rem .6rem}
.chip.solid{background:var(--navy);border-color:var(--navy);color:#fff}

/* landing hero */
.lhw-hero .hero-grid{grid-template-columns:1.05fr .95fr}
.specimen{position:relative;padding:0 3.2rem 2.2rem 0;min-width:0}
.specimen .sheet{background:#fff;color:var(--ink);border-radius:.7rem;padding:1.2rem 1.3rem 1rem;box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.35);font-size:.9rem;line-height:1.5;transform:rotate(-1.2deg)}
.specimen .lab{display:block;font-family:Inter,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.2rem;margin:.2rem 0 .45rem}
.specimen .sheet p{margin:0 0 .7rem}
.specimen .q{margin-right:8.6rem;font-style:italic;background:var(--soft);border-left:3px solid var(--gold);padding:.35rem .6rem}
.specimen .key{position:absolute;right:0;width:11.5rem;font-family:Inter,sans-serif;font-size:.74rem;line-height:1.4;color:var(--ink);background:var(--blue-bg);border-top:3px solid var(--gold);border-radius:0 0 .45rem .45rem;padding:.5rem .65rem;box-shadow:0 .6rem 1.4rem rgba(0,0,0,.3)}
.specimen .key b{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:.15rem}
.specimen .k1{top:1.6rem;transform:rotate(1.5deg)}
.specimen .k2{bottom:0;transform:rotate(-1deg)}

/* the six parts */
.spine{list-style:none;margin:1.2rem 0 2.6rem;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;counter-reset:none}
.spine li{position:relative;background:var(--soft);border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:.6rem;padding:.8rem .8rem .9rem;display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;line-height:1.4;color:var(--mute)}
.spine li:nth-child(even){border-top-color:var(--gold)}
.spine .n{font-family:Inter,sans-serif;font-weight:800;font-size:1.5rem;line-height:1;color:var(--navy-l)}
.spine strong{font-family:Inter,sans-serif;font-size:.92rem;color:var(--navy);line-height:1.25}
@media (max-width:980px){.spine{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.spine{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* case cards */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.fbtn{font-size:.85rem;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:.4rem .9rem;cursor:pointer}
.fbtn:hover{border-color:var(--navy-l)}
.fbtn.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.fbtn:focus-visible,.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.caselist{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr))}
.card.case{display:flex;flex-direction:column;gap:.35rem;border-top:4px solid var(--g);box-shadow:0 .25rem .9rem rgba(27,58,122,.06)}
.card.case:hover{box-shadow:0 .7rem 1.6rem rgba(27,58,122,.14)}
.card.case .top{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.card.case .tic{width:2.2rem;height:2.2rem;color:var(--navy-l);flex:none}
.card.case .tag{margin:0;flex:1}
.card.case .read{font-family:Inter,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--green-bg);border:1px solid var(--green-br);border-radius:99px;padding:.12rem .5rem}
.card.case strong{font-size:1.08rem}
.card.case .d{flex:1}
.card.case .chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}

/* case page head and pager */
.casehead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:center;background:var(--soft);border:1px solid var(--line);border-left:6px solid var(--g);border-radius:.7rem;padding:1.2rem 1.4rem;margin-bottom:2rem}
.casehead .tic.big{width:4rem;height:4rem;color:var(--navy-l)}
.casehead h1{margin:0 0 .3rem}
.casehead .sub{margin:0;font-size:1rem;max-width:70ch}
.chipline{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .6rem}
@media (max-width:620px){.casehead{grid-template-columns:1fr;padding:1rem}.casehead .tic.big{width:3rem;height:3rem}}
.pager{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.6rem}
.pager .card:last-child{text-align:right}
.pager .all{text-align:center;background:var(--soft)}
@media (max-width:620px){.pager{grid-template-columns:1fr}.pager .card:last-child,.pager .all{text-align:left}.pager>span{display:none}}

/* the clerking itself */
.clerk{font-size:1.02rem;line-height:1.6}
.clerk .page{display:flex;flex-direction:column;gap:1.9rem}
.clerk .row{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2rem;align-items:start}
.clerk .main,.clerk .notes{min-width:0}
.clerk h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.3rem;margin:0 0 .7rem}
.clerk p+h2,.clerk ul+h2,.clerk dl+h2,.clerk .vitals+h2{margin-top:1.4rem}
.clerk h3{font-size:1rem;color:var(--navy-d);margin:.9rem 0 .2rem}
.clerk p{margin:0 0 .65rem}
.clerk ul{margin:0 0 .65rem;padding-left:1.2rem}
.clerk li{margin-bottom:.2rem}
.clerk .notes{display:flex;flex-direction:column;gap:.75rem}
.clerk .note{font-family:Inter,system-ui,sans-serif;font-size:.85rem;line-height:1.45;color:var(--ink);background:var(--blue-bg);border-top:3px solid var(--navy-l);border-radius:0 0 .5rem .5rem;padding:.6rem .8rem .7rem}
.clerk .note b:first-child{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);margin-bottom:.2rem}
.clerk .note.warn{background:var(--amber-bg);border-top-color:var(--amber)}
.clerk .note.warn b:first-child{color:var(--amber)}
.clerk .id{font-family:Inter,system-ui,sans-serif;font-size:.92rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.25rem 1.5rem;margin:0;background:var(--soft);border:1px solid var(--line);border-radius:.6rem;padding:.8rem 1rem}
.clerk .id div{display:flex;gap:.5rem}
.clerk .id dt{color:var(--mute);flex:none}
.clerk .id dd{margin:0}
.clerk .speech{background:var(--soft);border-left:4px solid var(--gold);border-radius:0 .5rem .5rem 0;font-style:italic;font-size:1.1rem;padding:.7rem 1rem}
.clerk .vitals{font-family:Inter,system-ui,sans-serif;font-size:.92rem;font-variant-numeric:tabular-nums;display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem;margin:0 0 .7rem}
.clerk .vitals div{background:var(--soft);border:1px solid var(--line);border-radius:.5rem;padding:.45rem .6rem}
.clerk .vitals span{display:block;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.clerk .abn{color:var(--red);font-weight:700}
.clerk .examiner{background:#fff;border:1px solid var(--line);border-top:4px double var(--navy);border-radius:0 0 .6rem .6rem;padding:.8rem 1rem;margin:0 0 .8rem;box-shadow:0 .3rem 1rem rgba(27,58,122,.07)}
.clerk .examiner .eyebrow{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--navy-l);font-weight:700;margin:0 0 .3rem}
.clerk .lede{font-size:1rem;color:var(--mute);max-width:65ch;margin:0 0 .8rem}
.clerk .scroll{overflow-x:auto}
.clerk table{min-width:40rem;margin:.4rem 0 0;font-family:Inter,system-ui,sans-serif;font-size:.86rem;line-height:1.4}
.clerk td:first-child{font-weight:700;color:var(--navy-d);width:21%}
.clerk tr.grp td{background:var(--blue-bg)!important;color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;width:auto;border-bottom:1px solid var(--blue-br)}
.clerk td.verdict{white-space:nowrap;color:var(--green);font-weight:700}
.clerk .foot{font-family:Inter,system-ui,sans-serif;font-size:.84rem;color:var(--mute);border-top:1px solid var(--line);padding-top:.7rem;margin:0}
@media (max-width:900px){.clerk .row{grid-template-columns:minmax(0,1fr);gap:.8rem}.lhw-hero .hero-grid{grid-template-columns:1fr}.specimen{max-width:30rem}}
@media (max-width:480px){.specimen{padding-right:1.2rem}.specimen .key{width:9.5rem}.specimen .q{margin-right:7.6rem}}
@media print{.clerk .row{grid-template-columns:minmax(0,1fr) 15rem}.pager,.filters{display:none}}

/* ---------- practice tools ---------- */
[hidden]{display:none!important}
.trio{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.card.play{display:flex;flex-direction:column;gap:.3rem;border-top:4px solid var(--g);background:linear-gradient(180deg,var(--soft),#fff 55%);box-shadow:0 .3rem 1rem rgba(27,58,122,.08)}
.card.play .tic{width:2.6rem;height:2.6rem;color:var(--navy-l);margin-bottom:.3rem}
.card.play strong{font-size:1.2rem}
.card.play .d{flex:1}
.card.play .go{align-self:flex-start;margin-top:.7rem;font-family:Inter,sans-serif;font-weight:700;font-size:.85rem;color:#fff;background:var(--navy);border-radius:.45rem;padding:.4rem .8rem}
.backline{font-family:Inter,sans-serif;font-size:.95rem;margin:2rem 0 0}
.tool{font-family:Inter,system-ui,sans-serif}
.tool .lab{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.25rem}
.tbtn{background:var(--navy);color:#fff;border-color:var(--navy);cursor:pointer;font-size:.9rem;padding:.55rem 1rem}
.tbtn:hover{background:var(--navy-l);border-color:var(--navy-l);color:#fff}
.tbtn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.tbtn.ghost:hover{border-color:var(--navy-l);background:#fff;color:var(--navy)}
.tbtn.good{background:var(--green);border-color:var(--green)}
.tbtn.bad{background:#fff;color:var(--amber);border-color:var(--amber-br)}
.tool button:focus-visible,.tool select:focus-visible,.fc:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.setup{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 1.2rem}
.setup label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.setup select{font:inherit;font-size:.95rem;padding:.5rem .7rem;border:1.5px solid var(--line);border-radius:.5rem;background:#fff;color:var(--ink);max-width:100%;min-width:0}
.side{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.score{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.score>div{background:var(--soft);border:1px solid var(--line);border-radius:.6rem;padding:.7rem .8rem}
.score .big{font-size:2rem;font-weight:800;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.score .of{font-size:.95rem;color:var(--mute);margin-left:.3rem}
.score .lab{margin:.3rem 0 0}
.bar{height:.5rem;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .3s}
.after{margin:0;font-size:.95rem;font-weight:600;color:var(--navy);background:var(--blue-bg);border:1px solid var(--blue-br);border-radius:.6rem;padding:.7rem .9rem}

/* spot the mistakes */
.spot{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:2rem;align-items:start}
.spot .sheet{background:#fff;border:1px solid var(--line);border-radius:.7rem;box-shadow:0 .5rem 1.6rem rgba(27,58,122,.1);padding:1.3rem 1.5rem 1.5rem;font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.05rem;line-height:1.5}
.spot .sheet-top{font-family:Inter,sans-serif;font-size:.85rem;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:.6rem;margin:0 0 .4rem}
.spot .sheet h3{font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.25rem;margin:1.1rem 0 .5rem}
.seg{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:1.5px dashed transparent;border-radius:.4rem;padding:.3rem .5rem;margin:0 0 .15rem -.5rem;cursor:pointer}
.seg:hover{background:var(--soft);border-color:var(--line)}
.seg.hit{background:var(--amber-bg);border:1.5px solid var(--amber-br);text-decoration:line-through;text-decoration-color:var(--amber)}
.seg.fine{background:var(--green-bg);border:1.5px solid var(--green-br)}
.seg.missed{background:var(--red-bg);border:1.5px solid var(--red-br)}
.spot .side{position:sticky;top:4.5rem}
.explain{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:0 0 .6rem .6rem;background:#fff;padding:.8rem .9rem;font-size:.92rem;line-height:1.45}
.explain b{display:block;color:var(--navy);margin-bottom:.3rem}
.explain p{margin:0 0 .5rem}
.explain p:last-child{margin:0}
.explain.is-m{border-top-color:var(--amber)}
.explain.is-ok{border-top-color:var(--green)}
.explain .fix{background:var(--green-bg);border-left:3px solid var(--green);padding:.5rem .6rem;border-radius:0 .4rem .4rem 0;font-family:"Source Serif 4",Charter,Georgia,serif;font-size:.98rem}
.explain .fix span{display:block;font-family:Inter,sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.15rem}

/* OSCE timer */
.station{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.2rem;align-items:stretch}
.stem{background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:.7rem;padding:1.2rem 1.4rem;box-shadow:0 .4rem 1.2rem rgba(27,58,122,.08)}
.stem p{font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.25rem;line-height:1.45;margin:0 0 .7rem;color:var(--ink)}
.stem .task{font-family:Inter,sans-serif;font-size:.95rem;color:var(--mute);margin:0}
.clock{background:var(--navy);color:#fff;border-radius:.7rem;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.clock .time{font-size:3.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock .state{font-size:.9rem;color:#cfe0f7;min-height:1.3em}
.clock .bar{width:100%;background:rgba(255,255,255,.2)}
.clock .bar i{background:var(--gold)}
.clock .tbtn{background:var(--gold);border-color:var(--gold);color:#3a2c00}
.clock .tbtn.ghost{background:none;border-color:#6f93cc;color:#fff}
.clock.warn{background:var(--amber)}
.clock.over{background:var(--red)}
.exam{margin-top:2rem}
.exam h2{font-size:1.15rem;margin:1.6rem 0 .7rem}
.listen{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.6rem}
.listen li{background:var(--blue-bg);border-top:3px solid var(--navy-l);border-radius:0 0 .5rem .5rem;padding:.6rem .8rem;font-size:.86rem;line-height:1.45}
.q{background:#fff;border:1px solid var(--line);border-radius:.7rem;padding:1rem 1.2rem;margin:0 0 .8rem}
.q .qt{font-size:1.08rem;font-weight:700;color:var(--navy);margin:0 0 .7rem}
.q .qt span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.2rem}
.q .ans{border-top:4px double var(--navy);margin-top:.2rem;padding-top:.7rem;font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.02rem;line-height:1.55}
.q .ans p,.q .ans ul{margin:0 0 .7rem}
.q .ans ul{padding-left:1.2rem}
.mark{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-family:Inter,sans-serif;font-size:.85rem}
.mark span{color:var(--mute);margin-right:.2rem}
.mark button{font:inherit;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:.35rem .8rem;cursor:pointer}
.mark button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.result{background:var(--green-bg);border:1px solid var(--green-br);border-radius:.7rem;padding:1rem 1.2rem;font-size:1rem}
.result strong{display:block;font-size:1.6rem;color:var(--green)}

/* flashcards */
.deckrow{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2rem;align-items:start}
.fc{position:relative;min-height:21rem;perspective:1400px;cursor:pointer;border-radius:.9rem}
.fc .face{position:absolute;inset:0;border-radius:.9rem;padding:1.6rem 1.8rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s;display:flex;flex-direction:column;box-shadow:0 .8rem 2rem rgba(27,58,122,.16);overflow:auto}
.fc .front{background:linear-gradient(160deg,var(--navy-d),var(--navy) 60%,var(--navy-l));color:#fff;justify-content:center;align-items:flex-start}
.fc .front .lab{color:var(--gold)}
.fc .front .name{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;line-height:1.15;margin:.3rem 0 0;letter-spacing:-.01em}
.fc .front .hint{position:absolute;bottom:1.1rem;right:1.4rem;font-size:.75rem;color:#9fc0e8}
.fc .back{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);transform:rotateY(180deg)}
.fc .back p{font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.1rem;line-height:1.5;margin:0 0 1rem;color:var(--ink)}
.fc .back .src{margin-top:auto;font-size:.78rem;color:var(--mute)}
.fc.flip .front{transform:rotateY(180deg)}
.fc.flip .back{transform:rotateY(360deg)}
.keys{font-size:.8rem;color:var(--mute);margin:0}
@media (prefers-reduced-motion:reduce){.fc .face{transition:none}.bar i{transition:none}}
@media (max-width:900px){.spot,.station,.deckrow{grid-template-columns:minmax(0,1fr);gap:1.2rem}.spot .side{position:static}.keys{display:none}}
/* champion */
.champ{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start}
.champ .panel{background:#fff;border:1px solid var(--line);border-radius:.8rem;padding:1.4rem 1.5rem;box-shadow:0 .5rem 1.6rem rgba(27,58,122,.09)}
.champ h2{font-size:1.2rem;color:var(--navy);margin:0 0 1rem}
.field{margin:0 0 1.1rem}
.field label,.flabel{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:.35rem}
.field input,.field select{font:inherit;font-size:1rem;width:100%;max-width:24rem;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:.5rem;background:#fff;color:var(--ink)}
.ccrow{display:flex;align-items:center;gap:.6rem;max-width:24rem}
.flag,.fl{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ccrow .flag{font-size:1.9rem;line-height:1;min-width:2.2rem;text-align:center}
.avgrid{display:grid;grid-template-columns:repeat(6,3.2rem);gap:.5rem}
.avpick,.av{display:inline-grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,#fff);border:2.5px solid var(--c);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
.avpick{width:3.2rem;height:3.2rem;font-size:1.6rem;cursor:pointer;opacity:.6;padding:0}
.avpick:hover{opacity:1}
.avpick.is-on{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold);transform:scale(1.06)}
.av{width:2rem;height:2rem;font-size:1rem;flex:none;vertical-align:middle}
.av.lg{width:3.4rem;height:3.4rem;font-size:1.7rem}
.av.ghost{--c:var(--line);color:var(--mute);font-family:Inter,sans-serif;font-weight:700}
.err{color:var(--red);font-size:.9rem;font-weight:600;margin:0 0 .8rem}
.tbtn.gold{background:var(--gold);border-color:var(--gold);color:#3a2c00;font-size:1rem;padding:.7rem 1.3rem}
.tbtn.gold:hover{background:#ffc82e;border-color:#ffc82e;color:#3a2c00}
.hud{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--mute);margin-bottom:.7rem;flex-wrap:wrap}
.hud .who{color:var(--ink);font-weight:600;display:flex;align-items:center;gap:.4rem;margin-right:auto;min-width:0}
.hud .qn{font-variant-numeric:tabular-nums}
.hud .pts b{font-size:1.3rem;color:var(--navy);font-variant-numeric:tabular-nums}
.bar.tb{height:.6rem;margin-bottom:1.2rem}
.bar.tb i{width:100%;background:var(--navy-l);transition:width .1s linear}
.bar.tb i.low{background:var(--red)}
.qlab{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 .3rem}
.sign{font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.22rem;font-weight:600;color:var(--ink);line-height:1.45;margin:0 0 1.1rem}
.opts{display:grid;gap:.6rem;margin-bottom:1rem}
.opt{font-family:"Source Serif 4",Charter,Georgia,serif;font-size:1.02rem;line-height:1.4;text-align:left;color:var(--ink);background:var(--soft);border:1.5px solid var(--line);border-radius:.6rem;padding:.75rem 1rem;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--navy-l);background:#fff}
.opt:disabled{cursor:default;opacity:.75}
.opt.right{background:var(--green-bg);border-color:var(--green);opacity:1;font-weight:600}
.opt.wrong{background:var(--red-bg);border-color:var(--red);opacity:1}
.fb{border-radius:.6rem;padding:.7rem .9rem;font-size:.92rem;line-height:1.45;margin-bottom:1rem;border:1px solid}
.fb.ok{background:var(--green-bg);border-color:var(--green-br)}
.fb.no{background:var(--amber-bg);border-color:var(--amber-br)}
.fb b{display:block;margin-bottom:.15rem}
.final{font-size:1.1rem;color:var(--mute);margin:0}
.final b{font-size:clamp(3rem,9vw,4.6rem);font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fline{font-size:1.05rem;font-weight:600;color:var(--ink);margin:.4rem 0 1.2rem}
.review{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.4rem}
.review li{display:flex;flex-direction:column-reverse;gap:.1rem;border-left:4px solid var(--green);background:var(--soft);border-radius:0 .5rem .5rem 0;padding:.5rem .8rem;font-size:.9rem;line-height:1.4}
.review li.no{border-left-color:var(--red)}
.review strong{color:var(--navy)}
.review span{color:var(--mute)}
.board{background:linear-gradient(170deg,var(--navy-d),var(--navy) 60%,var(--navy-l));color:#fff;border-radius:.9rem;padding:1.3rem 1.2rem 1.1rem;position:sticky;top:4.5rem;box-shadow:0 .8rem 2rem rgba(27,58,122,.25)}
.board h2{color:#fff;font-size:1.25rem;margin:0 0 .2rem}
.board .scope{font-size:.78rem;color:#b9cdee;margin:0 0 1.1rem;line-height:1.4}
.podium{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:.45rem;align-items:end}
.podium li{background:rgba(255,255,255,.1);border-radius:.6rem .6rem .3rem .3rem;padding:.7rem .3rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;min-width:0;border-top:4px solid #b9c4d6}
.podium .p1{padding-top:1.5rem;border-top-color:var(--gold);background:rgba(242,183,5,.16)}
.podium .p3{border-top-color:#c98a4b}
.podium .medal{font-weight:800;font-size:.8rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:#b9c4d6;color:var(--navy-d)}
.podium .p1 .medal{background:var(--gold);width:1.9rem;height:1.9rem;font-size:1rem}
.podium .p3 .medal{background:#c98a4b}
.podium .nm{font-weight:700;font-size:.86rem;line-height:1.2;overflow-wrap:anywhere}
.podium .fl{font-size:1.2rem;line-height:1}
.podium .sc{font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--gold)}
.podium .empty .nm{font-weight:400;font-size:.74rem;color:#b9cdee}
.podium .you,.ranks .you{outline:2px solid var(--gold);outline-offset:1px}
.ranks{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.ranks li{display:grid;grid-template-columns:1.4rem auto minmax(0,1fr) auto;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);border-radius:.45rem;padding:.35rem .6rem;font-size:.88rem}
.ranks .rk{color:#b9cdee;font-weight:700;font-variant-numeric:tabular-nums}
.ranks .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranks .sc{font-weight:700;font-variant-numeric:tabular-nums}
.board .rule{font-size:.74rem;color:#b9cdee;margin:1rem 0 0}
@media (max-width:900px){.champ{grid-template-columns:minmax(0,1fr)}.board{position:static}}
@media (max-width:420px){.avgrid{grid-template-columns:repeat(4,3.2rem)}}