/* Quiz mariuscomper.uk: tokens, fonts, topbar, footer, share page. Quiz engine owns .quiz/*. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/EBGaramond.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2")}
:root{
  --paper:#f5efe3;--paper-2:#ece3d1;--card:#fffaf0;--card-edge:#d9ccb6;
  --ink:#1c1812;--ink-2:#4a4034;--ink-3:#7a6c5c;
  --accent:#8a2f10;--link:#8a2f10;
  --shadow:0 1px 0 #d9ccb6,0 12px 30px -18px rgba(60,40,20,.35);
  --display:"EB Garamond",Georgia,serif;--serif:"Source Serif 4",Georgia,serif;
  --sans:"Atkinson Hyperlegible Next",-apple-system,"Segoe UI",Roboto,sans-serif;
  --bar:44px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14110d;--paper-2:#221c15;--card:#1f1a14;--card-edge:#3a3128;
  --ink:#f2ebdf;--ink-2:#cdbfa9;--ink-3:#9a8b76;
  --accent:#f2b489;--link:#f2b489;
  --shadow:0 1px 0 #3a3128,0 12px 30px -18px rgba(0,0,0,.7);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#14110d;--paper-2:#221c15;--card:#1f1a14;--card-edge:#3a3128;
  --ink:#f2ebdf;--ink-2:#cdbfa9;--ink-3:#9a8b76;
  --accent:#f2b489;--link:#f2b489;
  --shadow:0 1px 0 #3a3128,0 12px 30px -18px rgba(0,0,0,.7);color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 12px);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--ink);padding:8px 12px;z-index:20}
.skip:focus{left:8px}
.js [hidden]{display:none!important}

/* single-row topbar: MC badge + section + lang + theme */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;height:var(--bar);padding:0 14px;
  background:var(--paper);border-bottom:1px solid var(--card-edge);font-size:15px;white-space:nowrap}
.topbar .home{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;text-decoration:none;min-height:44px}
.mc{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:#8a2f10;color:#fbf3e2;
  font:700 14px/1 var(--sans);letter-spacing:.02em}
.topbar .sec{color:var(--ink-3);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spacer{flex:1}
.chip{color:var(--ink);border:1px solid var(--card-edge);border-radius:999px;padding:4px 11px;text-decoration:none;font-size:14px;font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}

/* base button: the engine styles .big/.ghost on top */
.btn{font:600 1rem/1.2 var(--sans);background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:999px;
  padding:.85rem 1.7rem;min-height:52px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{filter:brightness(1.08)}

/* quiz level hues: two levels only */
.lv-usor{--lv:#2d5f63;--lv-soft:rgba(45,95,99,.12)}
.lv-greu{--lv:#8a2a1b;--lv-soft:rgba(138,42,27,.11)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-usor{--lv:#93cdc8;--lv-soft:rgba(147,205,200,.12)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-greu{--lv:#f0a58c;--lv-soft:rgba(240,165,140,.12)}}
:root[data-theme="dark"] .lv-usor{--lv:#93cdc8;--lv-soft:rgba(147,205,200,.12)}
:root[data-theme="dark"] .lv-greu{--lv:#f0a58c;--lv-soft:rgba(240,165,140,.12)}
.quiz .levels{grid-template-columns:1fr 1fr;max-width:34rem}
.quiz .len button{min-height:44px;min-width:56px}
.r-tip{font:400 1rem/1.5 var(--serif);color:var(--ink-2);margin:0 auto 1.6rem;max-width:30em}
.r-tip::before{content:"✦ ";color:var(--lv)}

/* sections below the game */
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
section.blk{scroll-margin-top:calc(var(--bar) + 12px);padding:0 0 8px}
h2.blk-t{font:700 26px/1.2 var(--display);margin:44px 0 12px}
.how{margin:0;padding-left:1.2em;color:var(--ink-2)}
.how li{margin:.35em 0}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.cats a{display:flex;flex-direction:column;gap:.2rem;background:var(--card);border:1.5px solid var(--card-edge);border-radius:12px;
  padding:.8rem .95rem;text-decoration:none;min-height:44px}
.cats a:hover{border-color:var(--accent)}
.cats a[aria-current="true"]{border-color:var(--accent);background:linear-gradient(rgba(138,47,16,.07),rgba(138,47,16,.07)),var(--card)}
.cats b{color:var(--ink);font-size:1rem}
.cats span{color:var(--ink-3);font-size:.85rem}
.foot{max-width:760px;margin:48px auto 0;padding:20px 16px 90px;border-top:1px solid var(--card-edge);color:var(--ink-2);font-size:15px}
.foot p{margin:4px 0}

/* share page (/quiz/t/<cat>/<slug>-<n>/) */
.share-main{max-width:640px;margin:0 auto;padding:4rem 16px 2rem;text-align:center}
.share-kicker{font:700 .8rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .6rem}
.share-title{font:700 clamp(2.4rem,9vw,3.8rem)/1.02 var(--display);margin:0 0 .7rem}
.share-sub{font:400 1.1rem/1.5 var(--serif);color:var(--ink-2);margin:0 auto 1.8rem;max-width:28em}
.share-card{background:var(--card);border:1px solid var(--card-edge);border-radius:16px;padding:1.4rem;box-shadow:var(--shadow);margin:0 0 1.6rem}
.share-card img{width:100%;max-width:300px;height:auto;border-radius:10px;box-shadow:var(--shadow)}
.share-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.to-top{position:fixed;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-edge);
  background:var(--card);color:var(--ink);font-size:20px;cursor:pointer;box-shadow:var(--shadow)}

@media (max-width:640px){
  .quiz .levels{grid-template-columns:1fr 1fr}
  .topbar{gap:9px;padding:0 10px}
  .topbar .sec{display:none}
  .share-main{padding-top:2.6rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}