:root{
  --bg:#F4F0FF; --surface:#FFFFFF; --surface-2:#FAF8FF; --ink:#23154F; --ink-2:#4B3F7A; --muted:#7C71A8; --line:#E4DCFA; --line-2:#D2C6F4;
  --brand:#5B2DE1; --brand-edge:#3D17AE; --brand-ink:#FFFFFF;
  --green:#58CC02; --green-edge:#46A302; --green-ink:#4A9A04; --green-bg:#D7FFB8;
  --red:#FF4B4B; --red-edge:#D93636; --red-ink:#E02F2F; --red-bg:#FFE1E1;
  --gold:#FFC800; --gold-edge:#E0A500; --xp:#E0A100; --flame:#FF9600;
  --btn:#FFFFFF; --btn-edge:#DED5F8; --btn-ink:#3A2A78; --link:#5B2DE1; --ghost-edge:#DED5F8; --ghost:#FFFFFF; --ghost-ink:#3A2A78;
  --road:#E3DAFB; --road-dash:#FFFFFF;
  --node-off:#E6E0F7; --node-off-edge:#CFC6EC; --node-off-ink:#AFA5D1;
  --vis-bg:#F7F4FF; --ocean:#DCEBFF; --land:#FFFFFF; --land-line:#C6B8F2; --land-hover:#E4D9FF; --sheet-shadow:0 -10px 30px rgba(50,20,140,.10);
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#150B36; --surface:#211458; --surface-2:#1B104A; --ink:#FFFFFF; --ink-2:#DCD3FF; --muted:#A99BE0; --line:#332383; --line-2:#3F2C99;
    --green-ink:#7BE03A; --green-bg:#1A3510; --red-ink:#FF7F7F; --red-bg:#3E1430; --xp:#FFC800;
    --btn:#241660; --btn-edge:#120838; --btn-ink:#EEE9FF; --link:#C3B1FF; --ghost-edge:#D9CCFF; --ghost:#FFFFFF; --ghost-ink:#3A2A78;
    --road:#251764; --road-dash:#4C39A8;
    --node-off:#3B2A8C; --node-off-edge:#271A6E; --node-off-ink:#8676D4;
    --vis-bg:#2A1B6B; --ocean:#1C1250; --land:#3A2A8C; --land-line:#150B36; --land-hover:#4C3AAD; --sheet-shadow:0 -10px 30px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#150B36; --surface:#211458; --surface-2:#1B104A; --ink:#FFFFFF; --ink-2:#DCD3FF; --muted:#A99BE0; --line:#332383; --line-2:#3F2C99;
  --green-ink:#7BE03A; --green-bg:#1A3510; --red-ink:#FF7F7F; --red-bg:#3E1430; --xp:#FFC800;
  --btn:#241660; --btn-edge:#120838; --btn-ink:#EEE9FF; --link:#C3B1FF; --ghost-edge:#D9CCFF; --ghost:#FFFFFF; --ghost-ink:#3A2A78;
  --road:#251764; --road-dash:#4C39A8;
  --node-off:#3B2A8C; --node-off-edge:#271A6E; --node-off-ink:#8676D4;
  --vis-bg:#2A1B6B; --ocean:#1C1250; --land:#3A2A8C; --land-line:#150B36; --land-hover:#4C3AAD; --sheet-shadow:0 -10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
/* No sideways wobble on phones: nothing may scroll the page horizontally (clip keeps the sticky top bar working),
   and a quick double tap no longer zooms in (pinch zoom still works) */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);background:var(--bg);overflow-x:clip;touch-action:manipulation}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.5;font-weight:700;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.sheet-open{padding-bottom:300px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.15;margin:0;font-weight:900;letter-spacing:-.01em}
.muted{color:var(--muted)}
.ico{display:inline-block;vertical-align:-0.18em;flex:none}

/* ---------- Buttons ---------- */
.btn{--c:var(--green);--e:var(--green-edge);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:16px 24px;min-height:52px;font-weight:900;font-size:16px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:var(--c);color:#fff;box-shadow:0 4px 0 var(--e);transition:transform .07s ease,box-shadow .07s ease,filter .15s;-webkit-tap-highlight-color:transparent}
.btn:hover:not([disabled]){filter:brightness(1.06)}
.btn:active:not([disabled]){transform:translateY(4px);box-shadow:0 0 0 var(--e)}
button{-webkit-tap-highlight-color:transparent} /* no grey flash on tap; the button moving down is the feedback */
.btn.wide{width:100%}
.btn.blue{--c:#1CB0F6;--e:#1590CB}
.btn.red{--c:var(--red);--e:var(--red-edge)}
.btn.light{--c:#FFFFFF;--e:#D9CCFF;color:var(--brand)}
.btn.ghost{--c:var(--ghost);--e:var(--ghost-edge);color:var(--ghost-ink);border:2px solid var(--ghost-edge)} /* white in both themes, like the Daily practice button, so it stands out on a dark card */
.btn[disabled]{--c:var(--node-off);--e:var(--node-off-edge);color:var(--node-off-ink);cursor:default}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:2px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.topbar-in{position:relative;max-width:1080px;margin:0 auto;height:64px;padding:0 24px;display:flex;align-items:center;gap:8px}
.brand{font-weight:900;font-size:23px;letter-spacing:-.03em;margin-right:auto;display:flex;align-items:center;gap:8px;color:var(--ink)}
.brand-logo{width:32px;height:32px;flex:none}
/* Phones: everything in the top bar a size smaller, so name, streak, points and avatar fit comfortably */
@media (max-width:480px){
  .topbar-in{gap:4px}
  .brand{font-size:19px;gap:8px}
  .brand-logo{width:28px;height:28px}
  .chip{font-size:16px}
  .chip svg{width:22px;height:22px}
  .avatar{width:36px;height:36px;font-size:16px;margin-left:8px}
}
.chip{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:17px;padding:8px 4px;border-radius:12px;font-variant-numeric:tabular-nums}
.chip.fire{color:var(--flame)}
.chip.fire.off{color:var(--node-off-ink)}
.chip.xp{color:var(--xp)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;border:0;cursor:pointer;flex:none;font-size:17px;margin-left:4px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}

/* ---------- Home layout ---------- */
.home{max-width:1080px;margin:0 auto;padding:24px 24px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.home .side{display:contents}
.drill-card{order:0}
.path-col{order:1}
.board-card{order:2}
@media (min-width:980px){
  .home{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:40px;padding-top:32px}
  .home .side{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px;grid-column:2;grid-row:1}
  .path-col{grid-column:1;grid-row:1}
}

/* Drill card */
.drill-card{position:relative;overflow:hidden;background:var(--brand);color:var(--brand-ink);border-radius:24px;padding:24px;box-shadow:0 6px 0 var(--brand-edge)}
.drill-top{display:flex;gap:16px;align-items:center;position:relative}
.drill-card h2{font-size:28px;letter-spacing:-.02em}
.goal{position:relative;margin:24px 0 16px}
.goal-row{display:flex;justify-content:space-between;font-size:14px;font-weight:800;color:#fff;margin-bottom:8px}
.goal-row b{font-weight:900}
.goal-bar{height:16px;border-radius:10px;background:rgba(0,0,0,.22);overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:10px;background:var(--gold);position:relative;min-width:0;transition:width .5s cubic-bezier(.3,1.3,.6,1)}
.goal-bar i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:2px;background:rgba(255,255,255,.45)}

/* Units and the road */
.unit{margin-bottom:12px}
.unit-head{border-radius:20px;padding:16px 24px;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.unit-head .k{font-size:13px;font-weight:900;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
.unit-head h2{font-size:22px;margin-top:1px}
.unit-head p{margin:2px 0 0;font-size:15px;opacity:.92;font-weight:700}
/* Units that don't have lessons yet: greyed out, with a "Coming soon" label */
.unit.soon{margin-bottom:24px}
.unit.soon .unit-head{background:var(--node-off);color:var(--muted);box-shadow:0 5px 0 var(--node-off-edge)}
.unit.soon .unit-head p{opacity:1}
.unit.soon .unit-head .k{display:flex;align-items:center;justify-content:space-between;gap:8px} /* badge on the right */
.soon-pill{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--surface);color:var(--muted);font-size:11px;letter-spacing:.06em;vertical-align:1px}
.route{position:relative;margin:48px auto}
.route svg.road{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.stop{position:absolute;width:92px;height:84px;transform:translate(-50%,-50%)}
.node{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%}
.node .ring{position:absolute;inset:0}
/* A thick coin seen slightly from above: oval top (::after) on a base with straight sides (::before), 64 wide and 56 tall, centred in the 92x84 ring */
.node .disc{position:absolute;left:14px;top:14px;width:64px;height:56px;display:grid;justify-items:center;align-items:start;color:#fff}
.node .disc::before{content:"";position:absolute;inset:0;border-radius:32px/24px;background:var(--e)}
.node .disc::after{content:"";position:absolute;left:0;top:0;width:64px;height:48px;border-radius:50%;background:var(--c)}
.node:hover .disc{filter:brightness(1.05)}
.node.soon{cursor:default}
.node.soon:hover .disc{filter:none}
.node.soon:active .disc::before{top:0}
.node.soon:active .disc::after,.node.soon:active .disc svg{transform:none}
/* Pressed: no animation on purpose. Phones move the top and the base at different speeds, which flashed a dark rim above the top */
.node:active .disc::before{top:8px}
.node:active .disc::after,.node:active .disc svg{transform:translateY(8px)}
.node.soon .disc{--c:var(--node-off);--e:var(--node-off-edge);color:var(--node-off-ink)}
.node.locked .disc{opacity:.45} /* locked but openable: the lesson's own icon in a pale unit colour */
.road .faint{opacity:.5}
.node.done .disc{--c:var(--gold);--e:var(--gold-edge)}
.node .disc svg{width:30px;height:30px;position:relative;z-index:1;margin-top:9px}
.label{position:absolute;width:max-content;transform:translateY(-50%);line-height:1.2}
.label.l{text-align:right}
.label .t{display:block;font-weight:900;font-size:16px;color:var(--ink)}
.label .s{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-top:4px}
.label.locked .t,.label.soon .t{color:var(--muted)}
.start-tag{position:absolute;bottom:calc(100% + 8px);left:50%;background:var(--surface);color:var(--green-ink);border:2px solid var(--line-2);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:12px;white-space:nowrap;animation:bob 1.8s ease-in-out infinite;z-index:2;transform:translateX(-50%)}
.start-tag::after{content:"";position:absolute;left:50%;bottom:-7px;width:11px;height:11px;background:var(--surface);border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}

/* Leaderboard */
.panel{background:var(--surface);border:2px solid var(--line);border-radius:24px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 8px}
.panel-head h2{font-size:20px}
.board ol{list-style:none;margin:0;padding:0 8px 8px}
.board li{display:grid;grid-template-columns:30px 40px 1fr auto;gap:12px;align-items:center;padding:8px 16px;border-radius:14px}
.board li.me{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.board .rank{display:grid;place-items:center;font-weight:900;font-size:16px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.board .medal{display:block;width:28px;height:28px}
.board .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.board .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm small{color:var(--muted);font-weight:800;font-size:14px}
.board .pts{font-weight:900;color:var(--ink-2);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px}
.board .empty{padding:0 24px 24px;font-size:15px;color:var(--muted);font-weight:700}
.board .empty:has(+ .board-auth){padding-bottom:16px} /* same gap before buttons as in the map quiz card */
/* Quiet dropdown: leaderboard period (top right) and Appearance on the account page */
.pick{appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:800;color:var(--muted);background:transparent;border:0;border-radius:8px;padding:4px 24px 4px 8px;margin-right:-8px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237C71A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.pick:hover{background-color:var(--line)}
.pick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pick[hidden]{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pick{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A99BE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .pick{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A99BE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- Quiz ---------- */
.quiz{max-width:680px;margin:0 auto;padding:0 24px 40px}
.qtop{display:flex;align-items:center;gap:16px;padding:24px 0}
.qtop .x{background:none;border:0;cursor:pointer;color:var(--muted);padding:8px;display:grid;place-items:center;border-radius:10px}
.qtop .x:hover{color:var(--ink)}
.prog{flex:1;height:18px;background:var(--line);border-radius:10px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--green);border-radius:10px;transition:width .6s cubic-bezier(.3,1.4,.5,1);position:relative;min-width:20px}
.prog i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:5px;border-radius:3px;background:rgba(255,255,255,.4)}
.combo{display:flex;align-items:center;gap:4px;font-weight:900;color:var(--flame);font-size:17px;min-width:48px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.combo.pop{animation:pop .35s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.kicker{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:900;color:var(--muted)}
.kicker .newbadge{background:var(--gold);color:#4A3200;padding:2px 8px;border-radius:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.kicker .dot{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff}
.kicker .dot svg{width:15px;height:15px}
.prompt{font-size:24px;font-weight:900;margin:0 0 16px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.visual{background:var(--vis-bg);border-radius:20px;min-height:190px;display:grid;place-items:center;padding:16px;overflow-x:auto;margin-bottom:24px}
.visual svg{display:block;width:100%;max-width:380px;height:auto;border-radius:10px}
.visual .plate-svg{max-width:420px;border-radius:0}
/* Real flags (image files): true shape, plus a hairline edge that follows the outline so white flags stand out */
.visual .flag-img{display:block;width:auto;height:auto;max-width:100%;max-height:200px;border-radius:4px;filter:drop-shadow(0 0 1px rgba(0,0,0,.45))}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.opts{grid-template-columns:1fr}.prompt{font-size:21px}}
.opt{display:flex;gap:12px;align-items:center;text-align:left;background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn-edge);border-radius:16px;padding:12px 16px 12px 12px;cursor:pointer;font-size:16px;font-weight:800;line-height:1.3;min-height:62px;box-shadow:0 4px 0 var(--btn-edge);transition:transform .07s ease,box-shadow .07s ease,background .15s;-webkit-tap-highlight-color:transparent}
.opt:hover:not([disabled]){background:var(--surface-2)}
.opt:active:not([disabled]){transform:translateY(4px);box-shadow:0 0 0 var(--btn-edge)}
.opt .k{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--btn-edge);color:var(--muted);font-size:13px;font-weight:900;display:grid;place-items:center}
@media (hover:none){.opt .k{display:none}.opt{padding-left:16px}}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--green);background:var(--green-bg);color:var(--green-ink);box-shadow:0 4px 0 var(--green)}
.opt.right .k{border-color:var(--green);color:var(--green-ink)}
.opt.wrong{border-color:var(--red);background:var(--red-bg);color:var(--red-ink);box-shadow:0 4px 0 var(--red);animation:shake .32s}
.opt.wrong .k{border-color:var(--red);color:var(--red-ink)}
.opt.dim{opacity:.45}
@keyframes shake{20%{transform:translateX(-6px)}60%{transform:translateX(5px)}85%{transform:translateX(-2px)}}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:16px 24px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:var(--sheet-shadow);animation:up .24s cubic-bezier(.2,.9,.3,1)}
.sheet.ok{background:var(--green-bg)}
.sheet.bad{background:var(--red-bg)}
.sheet-in{max-width:980px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center}
.sheet .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);grid-row:span 2;align-self:start}
.sheet h3{font-size:24px;letter-spacing:-.02em;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.sheet .gain{font-size:18px;line-height:1;color:var(--xp);display:inline-flex;align-items:center;gap:4px;letter-spacing:0}
.sheet .gain svg{display:block}
.sheet .gain .n{text-box:trim-both cap alphabetic} /* box hugs the digits, so they centre on the coin exactly */
.sheet.ok h3{color:var(--green-ink)}
.sheet.bad h3{color:var(--red-ink)}
.sheet .why{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);font-weight:700;max-width:62ch}
.sheet .why b{color:var(--red-ink)}
.sheet .btn{grid-column:1/-1;margin-top:12px}
@media (min-width:760px){
  .sheet-in{grid-template-columns:auto 1fr auto;gap:4px 24px}
  .sheet .btn{grid-column:3;grid-row:1/span 2;margin-top:0;min-width:200px;align-self:center}
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}

/* Script sample */
.script{font-family:"Noto Sans","Noto Sans Thai","Noto Sans Lao","Noto Sans Khmer","Noto Sans Hebrew","Noto Sans Arabic","Noto Sans Bengali","Noto Sans Sinhala","Noto Sans Devanagari","Noto Sans Tamil","Noto Serif Tibetan","Noto Sans JP","Noto Sans KR","Noto Sans TC",sans-serif;font-weight:700;font-size:clamp(26px,6vw,38px);background:#FFFFFF;color:#1E2326;border:4px solid #1E2326;border-radius:10px;padding:16px 24px;line-height:1.35;text-align:center;max-width:100%;box-shadow:0 4px 0 rgba(0,0,0,.12)}

/* ---------- Lesson page ---------- */
.page{max-width:1080px;margin:0 auto;padding:0 24px 64px} /* same width as the top bar and home page, so edges line up */
.back:hover{color:var(--ink)}
.les-hero{position:relative;overflow:hidden;border-radius:24px;padding:24px;color:#fff;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-bottom:32px;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.les-hero .em{background:rgba(255,255,255,.2);border-radius:50%;width:76px;height:76px;display:grid;place-items:center;flex:none}
.les-hero .em svg{width:40px;height:40px}
.les-hero .k{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.les-hero h1{font-size:clamp(26px,5vw,34px);letter-spacing:-.02em}
.les-hero .main{flex:1;min-width:0}
.les-hero .prog-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px}
.les-hero .stats{font-size:14px;font-weight:800;opacity:.9;white-space:nowrap}
.les-hero .act{flex:1 1 100%}
.les-hero .act .btn{width:100%}
@media (min-width:760px){.les-hero .act{flex:0 0 auto}.les-hero .act .btn{width:auto;min-width:200px}}
.les-hero .meter{height:10px;width:min(200px,100%);border-radius:6px;background:rgba(0,0,0,.2);overflow:hidden}
.les-hero .meter i{display:block;height:100%;background:#fff;border-radius:6px}
.intro{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:24px;}
.intro p{margin:0 0 8px;max-width:800px;font-weight:700;line-height:1.5;color:var(--ink-2)}
.intro p:last-child{margin-bottom:0}
.intro h3{margin:16px 0 8px;font-size:16px;font-weight:900;color:var(--ink)}
.intro .k+h3,.intro div>h3:first-child{margin-top:0}
.intro ol,.intro ul{margin:0 0 8px;padding-left:24px;max-width:800px;font-weight:700;line-height:1.5;color:var(--ink-2)}
.intro li{margin-bottom:4px}
.intro li>ul{margin:4px 0 0}
.intro ol:last-child,.intro ul:last-child{margin-bottom:0}
.intro .k{font-size:14px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} /* small label, as on the landing page quiz */
/* Lesson introduction: the lead-in to the cheat sheet */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.sec-head h2{font-size:22px}
.sec-head span{font-size:14px;color:var(--muted);font-weight:800}
.cheat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cheat .item{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:8px 8px 16px;display:flex;flex-direction:column;gap:8px}
.cheat .visual{min-height:130px;padding:12px;border-radius:14px;margin-bottom:8px}
.cheat .visual svg{max-width:250px}
.cheat .visual .flag-img{max-height:120px}
.cheat .script{font-size:22px;padding:8px 16px;border-width:3px}
.cheat .ans{font-weight:900;font-size:16px;line-height:1.3;padding:0 8px}
.cheat .exp{font-size:14px;color:var(--muted);line-height:1.45;font-weight:700;padding:0 8px}
/* Lesson page carousel for cards with several samples: subtle arrows on hover, small dots, swipe on touch */
.car{position:relative;touch-action:pan-y;user-select:none}
.cheat .visual.car{padding-bottom:24px} /* room for the dots below the sample */
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--surface);color:var(--ink-2);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;opacity:0;transition:opacity .15s}
.car-btn.prev{left:8px}.car-btn.next{right:8px}
.car:hover .car-btn,.car-btn:focus-visible{opacity:1}
@media (hover:none){.car-btn{display:none}}
.car-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.car-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);opacity:.25}
.car-dots i.on{opacity:.7}
.lv{margin:0 8px;align-self:flex-start;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;line-height:16px;padding:4px 8px;border-radius:8px}
/* Explanation bubble (data-tip): shows on hover, on tap (focus) and with the keyboard; above by default */
[data-tip]{position:relative;cursor:help}
[data-tip]:focus{outline:none}
[data-tip]:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
[data-tip]::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:10;width:max-content;max-width:224px;padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:700;line-height:1.4;letter-spacing:0;text-transform:none;white-space:pre-line;box-shadow:0 4px 12px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none}
[data-tip]:hover::after,[data-tip]:focus::after{opacity:1;visibility:visible;transform:none}
/* In the top bar the bubble opens just below the bar, lined up with the page margin (it is placed against .topbar-in) */
.tip-below[data-tip]{position:static}
.tip-below[data-tip]::after{bottom:auto;top:calc(100% + 8px);left:auto;right:24px;transform:translateY(-4px)}
.tip-below[data-tip]:hover::after,.tip-below[data-tip]:focus::after{transform:none}
.lv.todo{background:var(--line);color:var(--muted)}
.lv.learning{background:#FFE7A8;color:#6E4A00}
.lv.learned{background:var(--green-bg);color:var(--green-ink)}

/* ---------- Intro in quiz, summary, name ---------- */
.center{max-width:520px;margin:0 auto;padding:40px 24px 64px}
.summary{text-align:center}
.summary h1{font-size:36px;color:var(--xp);letter-spacing:-.02em}
.summary .sub{color:var(--muted);font-weight:800;margin:8px 0 0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}
.tile{border-radius:18px;border:2px solid var(--tc);background:var(--tc);overflow:hidden;text-align:center}
.tile .h{color:#fff;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px}
.tile .v{background:var(--surface);font-weight:900;font-size:22px;padding:16px 4px;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--tc2,var(--tc));font-variant-numeric:tabular-nums}
.tile.y{--tc:var(--gold);--tc2:var(--xp)}
.tile.y .h{color:#5A3E00}
.tile.g{--tc:var(--green);--tc2:var(--green-ink)}
.tile.o{--tc:var(--flame)}
.unlock-note{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:2px solid var(--line-2);border-radius:18px;padding:12px 16px;margin-bottom:12px;font-weight:800}
.unlock-note .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.unlock-note .dot svg{width:22px;height:22px}
.summary .btns{display:flex;flex-direction:column;gap:16px;margin-top:24px}
/* On phones the buttons sit at the bottom of the screen, within thumb reach */
@media (max-width:560px){.summary{min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;padding-bottom:24px}.summary .btns{margin-top:auto;padding-top:24px}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti i{position:absolute;top:-20px;width:10px;height:15px;border-radius:3px;animation:fall 1.8s cubic-bezier(.3,.1,.6,1) forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(600deg)}}
.namebox label{font-weight:900;display:block;margin-bottom:8px}
.namebox input{width:100%;font:inherit;font-weight:800;font-size:19px;padding:12px 16px;border-radius:16px;border:2px solid var(--line-2);background:var(--surface);color:var(--ink);margin-bottom:16px}
.namebox input:focus{border-color:var(--brand);outline:none}
.note{font-size:14px;color:var(--muted);margin-top:16px;text-align:center;font-weight:700}
/* Accounts */
.authbox .btns{display:flex;flex-direction:column;gap:16px}
.authbox .hint{font-size:14px;color:var(--muted);font-weight:700;margin:-8px 0 16px}
.authbox .err{color:var(--red);font-weight:800;margin:-8px 0 16px;min-height:0}
.authbox .err:empty{display:none}
.authbox > .btn.ghost{margin-top:16px}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:16px}
.linkbtn{background:none;border:0;padding:8px 4px;font:inherit;font-weight:800;font-size:15px;color:var(--link);cursor:pointer;text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.linkbtn:hover{text-decoration-thickness:2px}
.linkbtn.danger{color:var(--red)}
.board-auth{display:flex;flex-direction:column;gap:16px;padding:0 24px 24px}
.page-title{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}
.page-title.solo{margin-bottom:24px}
.lead{color:var(--ink-2);font-weight:700;line-height:1.5;margin:0 0 24px;overflow-wrap:anywhere}
.notice{background:color-mix(in srgb,var(--green) 14%,var(--surface));border:2px solid color-mix(in srgb,var(--green) 45%,transparent);color:var(--ink);font-weight:800;line-height:1.45;border-radius:16px;padding:16px;margin:8px 0 24px;overflow-wrap:anywhere}
/* Floating back button (top left) */
.fab-back{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:30;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn-edge);box-shadow:0 4px 0 var(--btn-edge);transition:transform .08s,box-shadow .08s}
.fab-back .ico{margin-left:-2px}
.fab-back:hover{filter:brightness(1.04)}
.fab-back:active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-edge)}
.fab-back:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.has-back{padding-top:96px}
/* On pages with the top bar it sits in the content and stays 16px below the bar (64px + 2px border) while scrolling */
.fab-back.in-page{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);margin:16px 0}
/* Account page */
.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
/* Avatar with an imported GeoGuessr picture instead of the letter */
.avatar.has-img,.acct-av.has-img,.board .av.has-img{background:var(--line);overflow:hidden;box-shadow:none;position:relative;padding:0} /* no button padding, so the picture fills the circle */
.avatar img,.acct-av img,.board .av img{width:100%;height:100%;object-fit:cover;display:block}
/* Same bottom shade as the letter bubbles, laid over the picture so it isn't hidden behind it */
.avatar.has-img::after,.acct-av.has-img::after,.board .av.has-img::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);pointer-events:none}
.acct-av.has-img::after{box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.gg-now{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-weight:700;color:var(--ink-2);line-height:1.5}
.gg-now p{margin:0}
.acct-av{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:32px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.acct-id{min-width:0}
.acct-id h1{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0;overflow-wrap:anywhere}
.acct-id p{margin:4px 0 0;color:var(--muted);font-weight:800;overflow-wrap:anywhere}
.menu{background:var(--surface);border:2px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:24px}
.menu-row{display:flex;align-items:center;gap:16px;width:100%;padding:16px;background:none;border:0;font:inherit;font-weight:800;font-size:17px;color:var(--ink);text-align:left;cursor:pointer}
.menu-row+.menu-row{border-top:2px solid var(--line)}
/* In a menu row the dropdown matches the row: same text size, and the same arrow as the ">" in the rows above */
.pick-wrap{position:relative;display:flex;align-items:center}
:root .pick-wrap .pick{font-size:17px;padding:4px 24px 4px 8px;margin-right:0;background-image:none}
.pick-wrap .ico{position:absolute;right:0;pointer-events:none;color:var(--muted)}
.menu-row:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.menu-row:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.menu-row .ml{flex:1}
.menu-row>.ico:last-child{color:var(--muted)}
.mi{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--link) 14%,transparent);color:var(--link)}
.guest-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:24px;margin-bottom:24px}
.guest-card h2{font-size:20px;margin:0 0 8px}
.guest-card p{margin:0 0 16px;color:var(--ink-2);font-weight:700;line-height:1.5}
/* Map quiz */
.map-card{order:3;padding:16px 24px 24px}
.flag-card{order:4}
.map-card .row{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.map-card h2{font-size:20px}
.map-card p{margin:8px 0 0;font-size:15px;color:var(--muted);font-weight:700}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.region{text-align:left;background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn-edge);border-radius:18px;padding:16px;cursor:pointer;box-shadow:0 4px 0 var(--btn-edge);transition:transform .07s,box-shadow .07s}
.region:hover{background:var(--surface-2)}
.region:active{transform:translateY(4px);box-shadow:0 0 0 var(--btn-edge)}
.region .t{display:block;font-weight:900;font-size:18px}
.region .s{display:block;font-size:14px;color:var(--muted);font-weight:800;margin-top:2px}
.region .hs{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:900;color:#6E4A00;background:#FFE7A8;padding:4px 12px 4px 8px;border-radius:10px;margin-bottom:8px}
.region .hs.none{color:var(--muted);background:var(--line);padding-left:12px}
.mapquiz{max-width:980px}
.prompt .target{color:#1899D6}
.mapbox{position:relative;width:100%;min-height:320px;border-radius:20px;overflow:hidden;background:var(--ocean);border:2px solid var(--line);touch-action:none}
.worldmap{display:block;cursor:grab}
.worldmap:active{cursor:grabbing}
.worldmap .sphere{fill:var(--ocean)}
.worldmap path.c{fill:var(--land);stroke:var(--land-line);stroke-width:.8px;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .15s}
.worldmap path.c:hover{fill:var(--land-hover)}
.worldmap path.c.hit{fill:var(--green);stroke:#fff;stroke-width:1.6px}
.worldmap path.c.miss{fill:var(--red)}
.zoombtns{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2}
.zb{width:44px;height:44px;border-radius:12px;border:2px solid var(--btn-edge);background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 var(--btn-edge)}
.zb:active{transform:translateY(3px);box-shadow:none}
.map-hint{font-size:14px;color:var(--muted);font-weight:700;margin:8px 2px 0}
.map-msg{text-align:center;padding:40px 8px}
.map-msg p{font-weight:800;color:var(--ink-2)}
.prog.timer i{background:#1CB0F6;min-width:0;transition:width .2s linear}
.clock{display:flex;align-items:center;gap:4px;font-weight:900;font-size:17px;color:var(--muted);min-width:66px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.clock.hurry{color:var(--red-ink)}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.map-head .prompt{margin:0}
.found{display:flex;align-items:center;gap:8px;font-weight:900;font-size:20px;color:var(--green-ink);background:var(--green-bg);padding:8px 12px;border-radius:12px;flex:none}
.map-toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;padding:8px 16px;border-radius:12px;font-weight:900;font-size:15px;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15);max-width:calc(100% - 24px);text-align:center;pointer-events:none}
.map-toast.ok{background:var(--green)}
.map-toast.bad{background:var(--red)}
.map-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.map-foot .map-hint{margin:0}
.missed{text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:16px;margin-bottom:8px}
.missed h3{font-size:16px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-c{background:var(--red-bg);color:var(--red-ink);font-weight:800;font-size:14px;padding:4px 12px;border-radius:10px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.confetti{display:none}}

/* Landing page */
.btn.sm{min-height:40px;padding:8px 16px;font-size:14px;border-radius:12px}
.land{max-width:1080px;margin:0 auto;padding:24px 24px 48px;display:grid;gap:48px}
/* Hero: purple card like Daily practice, text left-aligned */
.land-hero{position:relative;overflow:hidden;background:var(--brand);color:var(--brand-ink);border-radius:24px;padding:32px 24px;box-shadow:0 6px 0 var(--brand-edge)}
.land-hero .globe{position:absolute;right:-60px;top:-50px;width:280px;height:280px;opacity:.16;pointer-events:none}
.hero-copy{position:relative;max-width:600px}
.hero-copy h1{font-size:clamp(32px,7vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;text-wrap:balance}
.hero-copy p{margin:0 0 24px;font-size:17px;font-weight:700;line-height:1.5;opacity:.9;max-width:46ch}
.hero-copy .notice{margin-bottom:16px}
/* Phones: full-width button with the guest link centred below. From 560px: side by side, left-aligned. */
.hero-act{display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-act .btn{width:100%}
.hero-act .linkbtn{color:#fff}
@media (min-width:560px){.hero-act{flex-direction:row;align-items:center;gap:24px}.hero-act .btn{width:auto;min-width:240px}}
@media (min-width:860px){.land-hero{padding:56px 48px}.land-hero .globe{right:-40px;top:-40px;width:420px;height:420px}}
/* "Can you spot it?" mini quiz: heading above; in the card the picture sits left and the answers right on wide screens */
.try h2,.land-sec h2{font-size:28px;letter-spacing:-.02em;margin:0 0 8px}
.sec-lead{margin:0 0 24px;color:var(--muted);font-weight:700;line-height:1.5}
.demo{display:grid;gap:16px;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 6px 0 var(--line)}
@media (min-width:760px){.demo{grid-template-columns:1fr 1fr;gap:24px;padding:24px}}
.demo-vis{background:var(--vis-bg);border-radius:16px;height:200px;display:grid;place-items:center;padding:16px}
@media (min-width:760px){.demo-vis{height:auto;min-height:280px}}
.demo-vis svg{display:block;width:100%;height:100%;max-height:220px;border-radius:10px}
.demo-side{display:flex;flex-direction:column;min-width:0}
.demo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.demo-k{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.demo-dots{display:flex;gap:4px}
.demo-dots span{width:24px;height:8px;border-radius:4px;background:var(--line)}
.demo-dots span.done{background:var(--green)}
.demo-dots span.now{background:var(--brand)}
.demo-q{font-size:20px;font-weight:900;line-height:1.25;min-height:2.5em;margin-bottom:16px}
.demo-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo .opt{padding:8px 12px;font-size:15px;border-radius:12px;height:64px;line-height:1.2}
/* Fixed-height row under the answers: "Pick an answer", then the verdict and a Next button */
.demo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;margin-top:16px}
.demo-msg{margin:0;font-size:15px;font-weight:800;color:var(--muted);line-height:1.3}
.demo-msg.ok{color:var(--green-ink)}
.demo-msg.bad{color:var(--red-ink)}
.demo-foot .btn{flex:none}
.demo-end{grid-column:1/-1;display:flex;flex-direction:column;justify-content:center}
.demo-end .demo-top{margin-bottom:auto}
.demo-score{font-size:56px;font-weight:900;color:var(--brand);letter-spacing:-.02em;line-height:1.1;text-align:center;margin-top:24px}
.demo-end p{margin:8px auto 24px;font-weight:700;color:var(--ink-2);line-height:1.5;text-align:center;max-width:40ch}
.demo-end-act{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:auto}
/* Features */
.land-sec h2{margin-bottom:24px}
.feats{display:grid;gap:16px}
@media (min-width:760px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:24px}
.feat .dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:16px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.feat .dot svg{margin-top:-4px} /* centre on the lighter top face, above the 4px darker edge */
.feat h3{font-size:19px;margin:0 0 8px}
.feat p{margin:0;color:var(--muted);font-weight:700;line-height:1.5}
/* Closing call to action */
.land-cta{position:relative;overflow:hidden;background:var(--brand);color:var(--brand-ink);border-radius:24px;padding:40px 24px;text-align:center;box-shadow:0 6px 0 var(--brand-edge)}
.land-cta .globe{position:absolute;right:-70px;top:-60px;width:250px;height:250px;opacity:.16;pointer-events:none}
.land-cta h2{position:relative;font-size:28px;letter-spacing:-.02em;margin:0 0 8px;text-wrap:balance}
.land-cta p{position:relative;margin:0 0 24px;font-weight:700;opacity:.9}
.land-cta .btn{position:relative;min-width:240px}

/* Driving side world map inside the lesson intro */
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;font-weight:800;font-size:15px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:8px}
.legend .sw{width:16px;height:16px;border-radius:4px;display:inline-block}
.sw.left,.covsvg .left{background:#FF9600;fill:#FF9600}
.sw.right,.covsvg .right{background:#1CB0F6;fill:#1CB0F6}
/* Always centred. Phones: one item per line, the list centred as a block so the swatches stay lined up */
.legend{justify-content:center}
@media (max-width:559px){.legend{flex-direction:column;gap:8px;width:fit-content;margin-left:auto;margin-right:auto}}

/* Start here: coverage map of the game */
.covmap{position:relative;margin-top:16px;border-radius:16px;overflow:hidden;background:var(--ocean);touch-action:none}
.covmap .empty{margin:0;padding:24px;color:var(--muted);font-weight:700}
.covsvg{display:block;width:100%;height:auto;cursor:grab}
.covsvg:active{cursor:grabbing}
.covsvg .sphere{fill:var(--ocean)}
.covsvg path.c{stroke:var(--cov-border);stroke-width:.6px;vector-effect:non-scaling-stroke}
.covsvg path.empty{fill:var(--cov-none);fill-rule:evenodd;stroke:none;pointer-events:none} /* uncovered areas inside big countries; evenodd lets an outline have holes */
.covsvg path.hl{fill:none;stroke:var(--gold);stroke-width:2.5px;vector-effect:non-scaling-stroke;pointer-events:none;stroke-linejoin:round} /* hovered country, in the app's coin gold */
/* Three shades for how often a country comes up, and almost-white "never" so the shades stand out */
:root{--cov0:#3D17AE;--cov1:#7A55EA;--cov2:#BBA7F7;--cov-none:#FBFAFE;--cov-border:#D2C6F4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cov0:#C9B8FF;--cov1:#8F70F5;--cov2:#5A44B8;--cov-none:#2A2156;--cov-border:#150B36}}
:root[data-theme="dark"]{--cov0:#C9B8FF;--cov1:#8F70F5;--cov2:#5A44B8;--cov-none:#2A2156;--cov-border:#150B36}
.covsvg .cov0,.sw.cov0{fill:var(--cov0);background:var(--cov0)}
.covsvg .cov1,.sw.cov1{fill:var(--cov1);background:var(--cov1)}
.covsvg .cov2,.sw.cov2{fill:var(--cov2);background:var(--cov2)}
.covsvg .none,.cov-legend .sw.none{fill:var(--cov-none);background:var(--cov-none);box-shadow:inset 0 0 0 1px var(--cov-border)}
.cov-legend{margin-top:12px}
.cov-tip{position:absolute;z-index:3;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:8px 12px;box-shadow:0 4px 12px rgba(0,0,0,.15);pointer-events:none;max-width:240px;font-size:14px;line-height:1.4}
.cov-tip .t{display:flex;align-items:center;gap:8px;color:var(--ink)}
.cov-tip img{height:16px;width:auto;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
.cov-tip .s{color:var(--muted);font-weight:800}
.cov-tip .n{margin-top:4px;font-weight:700;color:var(--ink-2)}