/* Mobile game shell: one column, max 480px, screen body scrolls, bottom navbar outside rounds. Light theme. */
:root{
  color-scheme:light;
  --page:#E4EBDA; --screen:#F6F8EF; --card:#FEFFFA; --ink:#1E2B1F; --muted:#56664F; --line:#D9E2CC; --line-d:#C5CFB7;
  --jade:#4F8A47; --jade-d:#386833; --jade-s:#E2EEDA;
  --sun:#F2A33A; --sun-d:#C77E1A; --sun-s:#FDEFD8;
  --coral:#D65A44; --coral-d:#A9402D; --coral-s:#FBE3DD;
  --lv-facil:#4F8A47; --lv-facil-d:#386833;
  --lv-normal:#2F7FB3; --lv-normal-d:#1F5F88;
  --lv-dificil:#DB8317; --lv-dificil-d:#A86010;
  --lv-experto:#B21D55; --lv-experto-d:#83143E;
  --lv-gold:#B8860B; --lv-gold-d:#7D5A06;
  --display:Fredoka,"Trebuchet MS",system-ui,sans-serif;
  --body:Nunito,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:var(--vvh,100%)}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:15px;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:3px solid var(--lv-normal);outline-offset:2px}
.app{max-width:480px;height:100%;margin:0 auto;background:var(--screen);display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px)}
@media (min-width:520px){.app{height:calc(100% - 32px);margin-top:16px;border-radius:32px;box-shadow:0 30px 60px -20px rgb(30 43 31 / .35)}}
.body{flex:1;overflow-y:auto;padding:14px 18px 22px;display:flex;flex-direction:column;gap:16px}
.body>*{flex-shrink:0}

/* hud */
.hud{display:flex;align-items:center;gap:8px;padding:14px 18px 10px}
.hud .sp{flex:1}
/* the current language beside the coins (Journey and Friends) */
.pill.langbadge{padding:4px 12px;min-height:36px;color:var(--jade-d);cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 6px;font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.pill .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.pill .ic svg{width:15px;height:15px}
.ic.coin{background:var(--sun)}.ic.fire{background:var(--coral)}
.pill.flash{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.15)}}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--jade);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;border:3px solid var(--jade-s)}
.iconbtn{width:40px;height:40px;border-radius:14px;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;flex:none}
.iconbtn svg{width:20px;height:20px}

/* 3D buttons */
.btn{--c:var(--jade);--d:var(--jade-d);display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:18px;padding:15px 18px;background:var(--c);color:#fff;
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em;box-shadow:0 5px 0 var(--d);transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d)}
.btn svg{width:22px;height:22px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.sun{--c:var(--sun);--d:var(--sun-d)}
.btn.bad{--c:var(--coral);--d:var(--coral-d)}
.btn:disabled{background:var(--line);color:var(--muted);box-shadow:0 5px 0 var(--line-d);cursor:not-allowed;transform:none}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.title{font-size:24px;font-weight:700}
.h3{font-family:var(--display);font-size:18px;font-weight:600}
.foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.foot.bar{flex:none;margin:0;padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px));background:var(--screen);box-shadow:0 -10px 14px -10px rgb(30 43 31 / .18);z-index:2}
.rule{font-size:13px;font-weight:700;color:var(--muted);text-align:center}

/* home */
.hero{border-radius:28px;padding:20px;background:var(--theme-bg,var(--jade));color:var(--theme-ink,#fff);position:relative;overflow:hidden;isolation:isolate;box-shadow:0 6px 0 var(--jade-d)}
.hero::before{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgb(255 255 255 / .12)}
.hero::after{content:"";position:absolute;right:30px;bottom:-70px;width:150px;height:150px;border-radius:50%;background:rgb(255 255 255 / .08)}
.hero small{font-weight:800;opacity:.85;font-size:13px}
.hero h2{font-size:30px;font-weight:700;margin:4px 0 2px}
.hero p{margin:0 0 18px;opacity:.9;max-width:28ch}
.hero .btn{--c:var(--sun);--d:var(--sun-d);position:relative;z-index:1;font-size:22px;padding:17px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.week div{display:flex;flex-direction:column;gap:4px}
.week span{font-size:11px;font-weight:800;color:var(--muted)}
.week i{display:grid;place-items:center;height:34px;border-radius:12px;background:var(--screen);border:2px solid var(--line);font-style:normal;color:var(--coral)}
.week i.on{background:var(--coral-s);border-color:var(--coral)}
.week i.today{border-style:dashed;border-color:var(--coral)}
.week i svg{width:16px;height:16px}
.tilebtn{display:flex;align-items:center;gap:14px;text-align:left;width:100%}
.tilebtn .ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--jade-s);color:var(--jade);flex:none}
.tilebtn .ico svg{width:24px;height:24px}
.tilebtn b{font-family:var(--display);font-size:18px;display:block}

/* round bar */
.flowbar{display:flex;align-items:center;gap:12px;padding:14px 18px 0}
.prog{flex:1;height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;border-radius:999px;background:var(--c,var(--jade));transition:width .35s cubic-bezier(.16,1,.3,1);box-shadow:inset 0 -4px 0 rgb(0 0 0 / .12)}
.steps{display:flex;gap:6px;justify-content:center}
.steps span{font-size:11px;font-weight:800;color:var(--muted);padding:3px 9px;border-radius:999px;background:var(--screen);border:2px solid var(--line)}
.steps span.on{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* difficulty */
.lv{--c:var(--lv-facil);--d:var(--lv-facil-d);display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:12px 14px;box-shadow:0 4px 0 var(--line);transition:transform .08s}
.lv:active{transform:translateY(3px)}
.lv[aria-pressed="true"]{border-color:var(--c);box-shadow:0 4px 0 var(--d)}
.lv .badge{width:52px;height:52px;border-radius:16px;background:var(--c);color:#fff;display:grid;place-items:center;box-shadow:0 4px 0 var(--d)}
.lv .badge svg{width:26px;height:26px}
.lv b{font-family:var(--display);font-size:20px;display:block}
.lv .rules{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.lv .rules em{font-style:normal;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--screen);color:var(--muted)}
.lv .pay{font-family:var(--display);font-weight:700;color:var(--sun-d);display:flex;align-items:center;gap:3px;font-size:15px}
.lv .pay{flex-direction:column;align-items:flex-end;gap:0}.lv .pay small{font-family:var(--body);font-size:11px;font-weight:800;color:var(--muted)}
.lv .pay svg{width:15px;height:15px}

/* challenge */
.stakes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.targets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choice{border:3px solid var(--line);background:var(--card);border-radius:16px;padding:10px 4px;font-family:var(--display);font-weight:700;font-size:19px;box-shadow:0 3px 0 var(--line);display:flex;flex-direction:column;align-items:center;gap:2px}
.choice small{font-family:var(--body);font-size:11.5px;font-weight:800;color:var(--muted)}
.choice[aria-pressed="true"]{border-color:var(--sun);background:var(--sun-s);box-shadow:0 3px 0 var(--sun-d)}
.choice:disabled{opacity:.45;cursor:not-allowed}
.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:14px}
.scale i{font-style:normal;text-align:center;font-family:var(--display);font-weight:700;padding:6px 0;border-radius:10px;font-size:15px}
.z-l{background:var(--coral-s);color:var(--coral-d)}.z-n{background:var(--sun-s);color:var(--sun-d)}.z-w{background:var(--jade-s);color:var(--jade-d)}
.legend{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:14px}
.legend div{display:flex;justify-content:space-between}
.legend b{font-family:var(--display);font-variant-numeric:tabular-nums}
.note{background:var(--screen);border-radius:14px;padding:10px 12px;font-weight:700;font-size:13px;color:var(--muted)}
.note svg{width:15px;height:15px;vertical-align:-2px}

/* listen */
.lvtag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-weight:800;font-size:12.5px;color:#fff;background:var(--c)}
.lvtag svg{width:14px;height:14px}
/* tiers (what you learn) are outlined in ink, so they never read as a difficulty (solid colour) */
.tiertag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border-radius:999px;padding:3px 11px;font-weight:800;font-size:12.5px;color:var(--ink);border:2px solid var(--ink);background:var(--card)}
.tiertag svg{width:15px;height:15px}
.hero .tiertag{display:flex;width:fit-content;color:inherit;border-color:currentColor;background:rgb(255 255 255 / .14);margin-bottom:8px;position:relative;z-index:1}
.ctx{display:flex;flex-direction:column;gap:6px}
.ctx b{font-family:var(--display);font-size:17px}
.ctx small{font-weight:700;font-size:12.5px}
.tierpick{display:grid;grid-template-columns:48px 1fr 30px;gap:12px;align-items:center;text-align:left;width:100%;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:12px 14px;box-shadow:0 4px 0 var(--line)}
.tierpick .badge{width:48px;height:48px;border-radius:16px;border:3px solid var(--jade);color:var(--jade);background:var(--jade-s);display:grid;place-items:center}
.tierpick .badge svg{width:24px;height:24px}
.tierpick b{font-family:var(--display);font-size:19px;display:block}
.tierpick small{color:var(--muted);font-weight:700;font-size:12.5px}
.tierpick .tick{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;color:transparent}
.tierpick .tick svg{width:18px;height:18px}
.tierpick[aria-pressed="true"]{border-color:var(--jade);box-shadow:0 4px 0 var(--jade-d)}
.tierpick[aria-pressed="true"] .tick{background:var(--jade);border-color:var(--jade);color:#fff}
.langpick .badge{font-family:var(--display);font-weight:700;font-size:18px}
.langpick .native{font-family:var(--body);font-weight:700;font-size:14px;color:var(--muted)}
.langpick:disabled{opacity:.6;cursor:default;box-shadow:none}
.langpick:disabled .tick{color:var(--muted)}
.tierhead{display:flex;align-items:center;gap:12px;padding-top:6px;border-top:2px dashed var(--line)}
.tierhead .badge{width:40px;height:40px;border-radius:13px;border:3px solid var(--ink);color:var(--ink);display:grid;place-items:center;flex:none}
.tierhead .badge svg{width:20px;height:20px}
.tierhead b{font-family:var(--display);font-size:19px;display:block}
.tierhead small{color:var(--muted);font-weight:700;font-size:12.5px}
.tierhead.locked{opacity:.55}
.ring4{width:68px;height:68px;margin:-6px;border-radius:50%;display:grid;place-items:center;flex:none;--m:radial-gradient(circle,#000 28px,transparent 28.5px 30px,#000 30.5px);-webkit-mask:var(--m);mask:var(--m)}
.ring4 i{box-shadow:none !important}
.toplv{font-style:normal;font-weight:800;font-size:12px;color:var(--c);margin-left:6px}
.lvstars{display:flex;gap:1px}
.lvstars svg{width:17px;height:17px;color:var(--sun);fill:var(--sun)}
.lvstars svg.off{color:var(--line);fill:var(--line)}
.lv .pay.earned{color:var(--muted)}
.lv .pay small.odds{color:var(--c);margin-top:2px}
.lv .pay small.odds.used{color:var(--muted);text-decoration:line-through}
.unlock{display:flex;flex-direction:column;gap:4px;border-color:var(--ink)}
.unlock b{font-family:var(--display);font-size:18px}
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0 4px}
/* the speaker follows the app theme (its material surface and ink), not the difficulty colour */
.bigplay{width:150px;height:150px;border-radius:50%;border:0;background:var(--theme-bg);color:var(--theme-ink);display:grid;place-items:center;box-shadow:0 8px 0 var(--jade-d);transition:transform .08s,box-shadow .08s;position:relative;flex:none}
.bigplay:active{transform:translateY(6px);box-shadow:0 2px 0 var(--jade-d)}
.bigplay svg{width:64px;height:64px}
.bigplay.sm{width:84px;height:84px;box-shadow:0 6px 0 var(--jade-d)}
.bigplay.sm svg{width:38px;height:38px}
.bigplay:disabled{background:var(--line);color:var(--muted);box-shadow:0 8px 0 var(--line-d);cursor:not-allowed;transform:none}
.bigplay.speaking::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--jade);animation:ring 1s ease-out infinite}
@keyframes ring{from{transform:scale(.9);opacity:.6}to{transform:scale(1.15);opacity:0}}
.pips{display:flex;gap:6px;align-items:center;font-weight:800;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pips i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 2px 0 var(--d)}
.pips i.used{background:var(--line);box-shadow:none}
.pips svg{width:16px;height:16px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.tool{border:3px solid var(--line);background:var(--card);border-radius:18px;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:16px;box-shadow:0 3px 0 var(--line);line-height:1.1;text-align:left}
.tool svg{width:20px;height:20px;flex:none}
.tool:disabled{opacity:.45;cursor:not-allowed}
.tool small{font-family:var(--body);font-size:11px;font-weight:800;color:var(--muted)}
.tool.sm{padding:6px 10px;font-size:14px}
.sub{background:var(--card);border:2px dashed var(--line);border-radius:18px;padding:14px;text-align:center;font-family:var(--display);font-size:19px;width:100%;min-height:58px}
.sub.off{color:var(--muted);font-family:var(--body);font-size:14px;font-weight:700}

/* answer */
.prompt{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.35}
.gap{display:inline-block;min-width:90px;border-bottom:4px solid var(--c);margin:0 4px;text-align:center;color:var(--c)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.stack{grid-template-columns:1fr}
.opt{border:3px solid var(--line);background:var(--card);border-radius:18px;padding:14px 12px;font-family:var(--display);font-weight:600;font-size:18px;box-shadow:0 4px 0 var(--line);text-align:center;transition:transform .08s}
.opts.stack .opt{text-align:left;font-family:var(--body);font-weight:700;font-size:15px}
.opt:active{transform:translateY(3px)}
.opt[aria-pressed="true"]{border-color:var(--lv-normal);background:#E3EFF7;box-shadow:0 4px 0 var(--lv-normal-d)}
.opt.right{border-color:var(--jade);background:var(--jade-s);box-shadow:0 4px 0 var(--jade-d)}
.opt.wrong{border-color:var(--coral);background:var(--coral-s);box-shadow:0 4px 0 var(--coral-d)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:800;font-size:13px}
.field textarea{width:100%;min-height:110px;border:3px solid var(--line);border-radius:18px;background:var(--card);padding:12px;font-family:var(--display);font-size:19px;color:var(--ink);resize:none}
.field textarea:focus{border-color:var(--c);outline:none}
.field textarea::placeholder{color:#7B8873}
.field small{color:var(--muted);font-weight:700}
.warn{display:flex;gap:8px;align-items:center;background:var(--coral-s);color:var(--coral-d);border-radius:14px;padding:8px 12px;font-weight:800;font-size:13px}
.warn svg{width:18px;height:18px;flex:none}

/* bottom sheets */
.scrim{position:absolute;inset:0;background:rgb(30 43 31 / .35);z-index:4;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;display:flex;flex-direction:column;gap:12px;animation:up .28s cubic-bezier(.16,1,.3,1);z-index:5;background:var(--card)}
.sheet.good{background:var(--jade-s);color:var(--jade-d)}
.sheet.bad{background:var(--coral-s);color:var(--coral-d)}
.sheet h3{font-size:24px;display:flex;align-items:center;gap:8px}
.sheet h3 svg{width:28px;height:28px}
.sheet p{margin:0;color:var(--ink);font-weight:700}
.sheet .es{font-family:var(--display);font-size:18px;color:var(--ink)}
.sayrow{display:flex;gap:12px;align-items:center;text-align:left;width:100%}
.say{width:44px;height:44px;border-radius:14px;border:0;flex:none;display:grid;place-items:center;background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--line-d)}
.say svg{width:22px;height:22px}
.say:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line-d)}
.recap{display:flex;flex-direction:column;gap:8px}
.recap button{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:0 3px 0 var(--line)}
.recap .say{background:var(--screen);box-shadow:none;width:40px;height:40px}
.recap .es{font-family:var(--display);font-size:16px;font-weight:600}
.recap p{margin:2px 0 0;font-size:13px;color:var(--muted);font-weight:700}
.recap .mark{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none;margin-left:auto}
.recap .mark svg{width:15px;height:15px}
.recap .mark.ok{background:var(--jade)}.recap .mark.no{background:var(--coral)}.recap .mark.skip{background:var(--line)}
.sheet .yours{font-size:14px;color:var(--coral-d);font-weight:800}
.sheet .earned{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--sun);color:#fff;border-radius:999px;padding:4px 12px;font-family:var(--display);font-weight:700;box-shadow:0 3px 0 var(--sun-d)}
.sheet .earned svg{width:16px;height:16px}
.line{display:flex;flex-wrap:wrap;gap:8px;min-height:64px;padding:12px;border-radius:18px;background:var(--card);border:2px solid var(--line);align-content:flex-start}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{border:3px solid var(--line);background:var(--card);border-radius:14px;padding:7px 12px;font-family:var(--display);font-weight:600;font-size:17px;box-shadow:0 3px 0 var(--line);transition:transform .08s}
.tile:active{transform:translateY(2px)}
.tile.used{opacity:.25;box-shadow:none}
.line .tile{border-color:var(--c);box-shadow:0 3px 0 var(--d)}
.line .tile.right{border-color:var(--jade);background:var(--jade-s);box-shadow:0 3px 0 var(--jade-d)}
.line .tile.wrong{border-color:var(--coral);background:var(--coral-s);box-shadow:0 3px 0 var(--coral-d)}
.tile:disabled{cursor:default}
.slot{width:52px;height:40px;border:2px dashed var(--line);border-radius:14px}
@keyframes up{from{transform:translateY(100%)}}
/* game feel: badge pop, wrong-answer shake, star pop, coin burst */
.sheet h3 .earned{margin-left:auto;font-size:18px;animation:badge .5s .15s cubic-bezier(.34,1.56,.64,1) backwards}
.sheet.good h3>svg{animation:badge .45s cubic-bezier(.34,1.56,.64,1)}
.sheet.bad{animation:up .28s cubic-bezier(.16,1,.3,1),shake .4s .28s}
@keyframes badge{from{transform:scale(0) rotate(-20deg)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.stars svg{animation:starpop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.stars svg:nth-child(2){animation-delay:.25s}.stars svg:nth-child(3){animation-delay:.5s}
.stars svg.off{animation:none}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}}
.score .big{animation:badge .5s .1s cubic-bezier(.34,1.56,.64,1) backwards}
.coinfx{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;z-index:7;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#FFE6A8,var(--sun) 55%,var(--sun-d));box-shadow:inset 0 -2px 0 var(--sun-d),0 0 0 2px #FFD27A}
.coinfx::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgb(255 255 255 / .55)}
.snd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.toggle{width:56px;height:32px;border-radius:999px;border:0;background:var(--line);position:relative;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--card);box-shadow:0 2px 0 rgb(30 43 31 / .2);transition:transform .2s}
.toggle[aria-checked="true"]{background:var(--jade)}
.toggle[aria-checked="true"]::after{transform:translateX(24px)}

/* results */
.score{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px}
.score .big{font-family:var(--display);font-size:72px;font-weight:700;line-height:1}
.stars{display:flex;gap:8px}
.stars svg{width:40px;height:40px;color:var(--sun);fill:var(--sun)}
.stars svg.off{color:var(--line);fill:var(--line)}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff}
.dots i svg{width:16px;height:16px}
.dots .ok{background:var(--jade)}.dots .no{background:var(--coral)}.dots .skip{background:var(--line)}
.ledger{display:flex;flex-direction:column;gap:10px}
.ledger div{display:flex;justify-content:space-between;font-weight:700}
.ledger b{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums}
.ledger .tot{border-top:2px dashed var(--line);padding-top:10px}
.plus{color:var(--jade-d)}.minus{color:var(--coral-d)}

/* practice */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--line);border-radius:16px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;border-radius:12px;padding:8px 0;font-weight:800;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 0 rgb(30 43 31 / .12)}
.pstats{display:flex;gap:8px}
.pstats span{flex:1;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 10px;font-weight:800;font-size:12px;color:var(--muted)}
.pstats b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.loop{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;font-weight:800;color:var(--muted)}
.loop span{padding:3px 10px;border-radius:999px;border:2px solid var(--line)}
.loop span.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.loop svg{width:14px;height:14px}
.player{display:flex;align-items:center;gap:14px}
.player .side{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}

/* shop */
.shopgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.skin{min-width:0;border:3px solid var(--line);background:var(--card);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 0 var(--line)}
.skin .sw{height:70px;border-radius:14px;background:var(--sc);position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 -6px 0 rgb(0 0 0 / .15)}
.skin .sw.none{background:repeating-linear-gradient(45deg,var(--screen) 0 8px,var(--line) 8px 10px)}
.skin .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 6px}
.rar{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--screen);color:var(--muted);white-space:nowrap}
.rar.rare{background:#DCEBF4;color:#08547C}.rar.epic{background:#ECE6FD;color:#4B33A8}.rar.legendary{background:#FBF1D6;color:#7A5806}
/* moving shine on epic and legendary materials; it sits under the content of whatever it's in */
.shine{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgb(255 255 255 / .42) 50%,transparent 62%);background-size:260% 100%;animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.shine{animation:none;opacity:0}}
.skin b{font-family:var(--display);font-size:16px}
.skin .btn,.skin .equipped{margin-top:auto}
.skin button.sw{border:0;padding:0;width:100%;display:block;cursor:zoom-in}
.pvhint{position:absolute;right:6px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgb(255 255 255 / .85);color:var(--ink);display:grid;place-items:center}
.pvhint svg{width:15px;height:15px}
/* shop preview: a mini version of where the material goes */
.pvbox{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:20px;background:var(--screen);border:2px solid var(--line);pointer-events:none}
.pvhero{padding:16px}.pvhero h2{font-size:22px}.pvhero .btn{font-size:17px;padding:11px;margin-top:12px;position:relative;z-index:1}
.pvbox > .btn{font-size:16px;padding:11px}
.pvprog{position:relative;isolation:isolate;height:190px;margin:-12px;padding:18px 12px;border-radius:18px;overflow:hidden}
.pvprog .pbanner{height:190px}
.pvduel{display:flex;flex-direction:column;height:230px;margin:-12px;border-radius:18px;overflow:hidden}
.pvduel .dhalf{padding:10px !important;gap:4px}.pvduel .dscore{font-size:38px}.pvduel .dscore span{font-size:18px}.pvduel b{font-family:var(--display);font-size:18px}
.skin .btn{font-size:15px;padding:9px;border-radius:14px}
.skin.eq{border-color:var(--jade)}
.equipped{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;padding:9px;background:var(--jade-s);color:var(--jade-d);font-family:var(--display);font-weight:700}
.equipped svg{width:18px;height:18px}
.item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.item .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff}
.item .ico svg{width:26px;height:26px}
.item b{font-family:var(--display);font-size:17px;display:block}
.item small{color:var(--muted);font-weight:700}
.buy{border:0;border-radius:14px;background:var(--sun);color:#fff;font-family:var(--display);font-weight:700;padding:9px 12px;box-shadow:0 4px 0 var(--sun-d);display:flex;gap:5px;align-items:center;font-size:16px}
.buy svg{width:16px;height:16px}
.buy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-d)}
.buy:disabled{background:var(--line);color:var(--muted);box-shadow:0 4px 0 var(--line-d);cursor:not-allowed}

/* progression */
.lvlcard{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center}
.ring{width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--jade) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring span{width:66px;height:66px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:28px;line-height:1;text-align:center}
.ring small{display:block;font-size:11px;color:var(--muted);font-family:var(--body);font-weight:800}
.xp{height:14px;border-radius:999px;background:var(--line);overflow:hidden;margin:8px 0 4px}
.xp i{display:block;height:100%;background:var(--sun);border-radius:999px;box-shadow:inset 0 -4px 0 rgb(0 0 0 / .12)}
.acc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.acc div{border-radius:14px;padding:10px 4px;background:var(--screen)}
.acc b{font-family:var(--display);font-size:22px;display:block;color:var(--c);font-variant-numeric:tabular-nums}
.acc small{font-weight:800;font-size:11.5px;color:var(--muted)}
.path{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.node{display:flex;align-items:center;gap:14px;border:0;background:none;text-align:left;padding:0}
.node:nth-child(4n+2){padding-left:44px}.node:nth-child(4n+3){padding-left:88px}.node:nth-child(4n){padding-left:44px}
.node i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.node i svg{width:24px;height:24px}
.node .done{background:var(--jade);box-shadow:0 5px 0 var(--jade-d)}
.node .cur{background:var(--sun);box-shadow:0 5px 0 var(--sun-d);outline:4px solid var(--sun-s);outline-offset:3px}
.node .lock{background:var(--line);color:var(--muted);box-shadow:0 5px 0 var(--line-d)}
.node b{font-family:var(--display);font-size:16px;display:block}
.node small{color:var(--muted);font-weight:700;display:flex;gap:2px;align-items:center}
.node small svg{width:14px;height:14px;color:var(--sun);fill:var(--sun)}
.node small svg.off{color:var(--line);fill:var(--line)}
.node:disabled{cursor:default}
.reset{background:none;border:0;color:var(--muted);font-weight:800;text-decoration:underline;text-underline-offset:3px;align-self:center;padding:6px}

/* nav */
.nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:2px solid var(--line)}
.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:16px;font-weight:800;font-size:11.5px;color:var(--muted)}
.nav .ic{width:46px;height:34px;border-radius:12px;display:grid;place-items:center;transition:background .2s}
.nav svg{width:24px;height:24px}
.nav button[aria-current="page"]{color:var(--jade-d)}
.nav button[aria-current="page"] .ic{background:var(--jade-s);color:var(--jade)}

/* friends */
/* a friend's card: the profile head (as on Account), the duel, and its buttons */
.duo{display:flex;flex-direction:column;gap:10px;position:relative}
.duo.fresh{border-color:var(--sun)}
.duohead{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.duohead>div{min-width:0}
.duohead .avatar{width:62px;height:62px;font-size:26px;background:var(--fc,var(--jade));border-color:color-mix(in srgb,var(--fc,var(--jade)) 25%,#fff)}
.duohead .frame .avatar{border:0}
.duohead .h3{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duohead .pins{display:flex;margin-top:4px}
.duo small{display:flex;align-items:center;gap:4px;color:var(--muted);font-weight:800;font-size:12.5px}
.duo small svg{width:14px;height:14px;color:var(--coral)}
.duo .myturn{color:var(--jade-d)}
.duoinfo{min-width:0}
.duostreak{display:inline-flex;align-items:center;gap:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.duostreak svg{width:15px;height:15px;color:var(--coral)}
.duobtns{display:flex;gap:8px}
/* tapping a friend's card opens their profile; the head is the button for keyboards and screen readers */
.duo{cursor:pointer}
.duohead{background:none;border:0;padding:0;margin:0;text-align:left;width:100%;border-radius:14px}
.fprof .avatar{background:var(--fc,var(--jade))}
.btn.ghost.bad{color:var(--coral-d)}
/* a simulated friend's card in their app theme, like your own card on Account */
.duo.themed{background:var(--theme-bg);color:var(--theme-ink);border-color:transparent;box-shadow:0 6px 0 var(--theme-d);overflow:hidden;isolation:isolate}
.duo.themed .muted,.duo.themed small,.duo.themed .duostreak,.duo.themed .duostreak svg,.duo.themed small svg{color:inherit}
.duo.themed small{opacity:.9}
.duo.themed .langpill,.duo.themed .planbadge:not(.prem){background:color-mix(in srgb,currentColor 18%,transparent);border-color:transparent;color:inherit}
.duo.themed .duohead .avatar{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.duobtns>.btn{padding:12px 16px}
.duobtns>.duolast{width:auto;flex:none}
.duobtns>.btn[aria-disabled="true"]{background:var(--line);color:var(--muted);box-shadow:0 5px 0 var(--line-d)}
.langpill{display:inline-block;margin:3px 0 4px;border:2px solid var(--line);border-radius:999px;padding:1px 10px;font-weight:800;font-size:12px;color:var(--muted);background:var(--screen)}
/* swipe a friend's tile left to remove them: the red strip behind shows through as it slides */
.swipe{position:relative}
.swipebg{position:absolute;inset:2px;border-radius:20px;background:var(--coral);display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-right:22px;color:#fff;font-family:var(--display);font-weight:700;font-size:16px}
.swipebg svg{width:20px;height:20px}
.swipe>.duo{touch-action:pan-y;transition:transform .25s cubic-bezier(.16,1,.3,1);user-select:none}
.swipe>.duo.dragging{transition:none}
/* Play greyed out when the duel is in another language; it still takes taps, to explain */
.buy.off{background:var(--line);color:var(--muted);box-shadow:0 4px 0 var(--line-d)}
.tip.langtip{left:auto;right:0;width:220px;max-width:calc(100% - 24px)}
.vs{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;align-items:center}
.vs b{font-family:var(--display);font-size:20px;text-align:right;font-variant-numeric:tabular-nums}
.vs .win{color:var(--jade-d)}
.vs .lvtag{justify-self:start}
/* duel result: full screen, one half per player (their background goes on .dhalf later) */
.duelscr{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}
.dhalf{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;color:#fff;background:linear-gradient(160deg,var(--pc),color-mix(in srgb,var(--pc) 70%,#000));text-align:center;min-height:0}
.dhalf.top{padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:40px}
.dhalf.bot{padding-top:40px}
.dhalf.lost{filter:saturate(.55)}
.dwho{display:flex;align-items:center;gap:10px}
.dwho .avatar{width:52px;height:52px;font-size:24px;background:rgb(255 255 255 / .2);border:3px solid #fff}
.dwho b{font-family:var(--display);font-size:22px}
.dwho svg{width:22px;height:22px;color:var(--sun);fill:var(--sun)}
.dscore{font-family:var(--display);font-weight:700;font-size:56px;line-height:1}
.dscore span{font-size:26px;opacity:.75}
.dhalf .lvtag{background:#fff;color:var(--c)}
.dhalf .dots i{width:26px;height:26px;border-radius:9px;border:2px solid rgb(255 255 255 / .85)}
.dhalf .dots .ok{background:rgb(255 255 255 / .25)}.dhalf .dots .no{background:var(--coral)}
.dhalf .dots .skip{background:transparent}
.dhalf.mat{position:relative;isolation:isolate;text-shadow:0 1px 3px rgb(0 0 0 / .35)}
.dhalf.mat.inkdark{text-shadow:0 1px 2px rgb(255 255 255 / .5)}
/* progression background: the material across the top of the page, fading out before the path */
.body.banner{position:relative;isolation:isolate}
.pbanner{position:absolute;left:0;right:0;top:0;height:330px;z-index:-1;overflow:hidden;isolation:isolate;-webkit-mask:linear-gradient(#000 50%,transparent);mask:linear-gradient(#000 50%,transparent)}
.dhalf.inkdark .dwho .avatar,.dhalf.inkdark .dots i{border-color:currentColor}
.dhalf.inkdark .dwho .avatar{background:rgb(255 255 255 / .45)}
.dstat{font-weight:800;font-size:13.5px;opacity:.92}
.dbanner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:8px 22px;font-family:var(--display);font-size:22px;font-weight:700;white-space:nowrap;box-shadow:0 5px 0 var(--ink);z-index:1;animation:badge .5s .1s cubic-bezier(.34,1.56,.64,1) backwards}
.dbanner small{display:block;text-align:center;font-family:var(--body);font-size:12px;font-weight:800;color:var(--muted)}
.flame{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:56px;line-height:1;color:var(--coral)}
.flame svg{width:48px;height:48px}
.field input{width:100%;border:3px solid var(--line);border-radius:16px;background:var(--card);padding:12px;font-family:var(--display);font-size:19px;color:var(--ink)}
.field input:focus{border-color:var(--jade);outline:none}
.toast{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--ink);color:var(--card);border-radius:999px;padding:8px 16px;font-weight:800;font-size:13px;z-index:6;white-space:nowrap;animation:fade .2s}
.lucide{stroke-width:2.5}
/* tab bars that scroll sideways once they have more tabs than fit */
.seg.tabs{display:flex;overflow-x:auto;position:relative;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.seg.tabs::-webkit-scrollbar{display:none}
.seg.tabs button{flex:1 0 auto;padding:8px 16px;white-space:nowrap;scroll-snap-align:center}
/* avatar frames: a ring of the equipped material around the avatar */
.frame{display:inline-grid;place-items:center;padding:4px;border-radius:50%;position:relative;isolation:isolate;overflow:hidden;flex:none}
.frame .avatar{border:0}
.dhalf .frame .avatar{background:var(--jade)}
.dhalf.top .frame .avatar{background:var(--pc)}
.pvframe{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0}
.pvframe .frame{padding:7px}
.pvframe .avatar{width:86px;height:86px;font-size:36px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* victory flourishes: one layer over the duel result, under the banner; see js/flourish.js */
.flfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;perspective:600px}
.flfx>div{position:absolute;will-change:transform}
.flfx .cf{border-radius:2px}
.flfx .spark{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;box-shadow:0 0 8px 2px currentColor}
.flfx .fwflash{width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255 / .9),rgb(255 255 255 / 0) 65%)}
.flfx .hopper{width:56px;height:56px;transform:translateX(-80px);filter:drop-shadow(0 3px 0 rgb(0 0 0 / .2))}
.flfx .flstar{width:18px;height:18px;margin:-9px 0 0 -9px}
.dbanner .flic{display:inline-grid;vertical-align:-3px;margin-right:6px}.dbanner .flic svg{width:22px;height:22px}
.pvduel{position:relative}
.pvduel .dbanner{font-size:18px;padding:6px 16px;animation:none}
.skin .flsw{display:grid;place-items:center;color:var(--theme-ink)}
.skin .flsw .flic svg{width:34px;height:34px}
/* More: Finch-style grouped rows */
.mlabel{font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 6px -4px}
.mcard{background:var(--card);border:3px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 4px 0 var(--line);flex:none}
.mrow{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;width:100%;padding:13px 16px;border:0;background:none;text-align:left;font:inherit;color:var(--ink)}
.mrow+.mrow{border-top:2px solid var(--line)}
button.mrow:active{background:var(--screen)}
.mrow .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--c)}
.mrow .ico svg{width:22px;height:22px}
.mrow b{font-family:var(--display);font-size:18px;display:block}
.mrow small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.mrow .chev{color:var(--muted);display:grid}.mrow .chev svg{width:22px;height:22px}
.mrow.danger b{color:var(--coral)}
/* voice picker: a radio-style row to choose, and a speaker to hear a sample */
.vopt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding-right:12px}
.vopt+.vopt{border-top:2px solid var(--line)}
.vpick{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;min-width:0;border:0;background:none;text-align:left;padding:12px 0 12px 16px;font:inherit;color:var(--ink)}
.vpick .tick{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;color:transparent}
.vpick .tick svg{width:15px;height:15px}
.vpick[aria-pressed="true"] .tick{background:var(--jade);border-color:var(--jade);color:#fff}
.vpick b{font-family:var(--display);font-size:16px;display:block;overflow-wrap:anywhere}
.vpick small{display:block;color:var(--muted);font-weight:700;font-size:12.5px}
.vopt .say{background:var(--screen);box-shadow:none}
.mrow.me .avatar{width:42px;height:42px;font-size:18px}
.hudme{border:0;background:none;padding:0;border-radius:50%}
/* Profile */
.profhead{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.profhead .avatar{width:76px;height:76px;font-size:32px}
.profhead .xp{margin:6px 0}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:12px 14px;box-shadow:0 4px 0 var(--line);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.stat .ic{grid-row:span 2;width:38px;height:38px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center}
.stat .ic svg{width:20px;height:20px}
.stat b{font-family:var(--display);font-size:22px;line-height:1.1}.stat b span{font-size:14px;color:var(--muted)}
.stat small{color:var(--muted);font-weight:700;font-size:12.5px}
/* the Reduce motion switch in More does what the device setting does */
.calm *{animation:none!important;transition:none!important}.calm .shine{opacity:0}
.pins{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.profhead .pins{display:flex;margin-top:4px}
.bbar{width:80%;height:6px;border-radius:999px;background:var(--line);overflow:hidden}.bbar i{display:block;height:100%;background:var(--jade);border-radius:inherit}
.badgesheet{align-items:center;text-align:center}
.badgesheet .btn{align-self:stretch}
.avatar.lvbig{width:96px;height:96px;font-size:42px;animation:badge .5s .1s cubic-bezier(.34,1.56,.64,1) backwards}
/* awards: a shield in the award's colour, its icon, and a banner number (the step reached); see js/badges.js */
.shield{position:relative;display:inline-grid;place-items:center;width:84px;height:94px;flex:none;filter:drop-shadow(0 3px 0 rgb(0 0 0 / .12))}
.shield .sh{position:absolute;inset:0;width:100%;height:100%}
.shield .rim{fill:color-mix(in srgb,var(--c) 68%,#000)}
.shield .face{fill:var(--c)}
.shield .sic{position:relative;display:grid;color:#fff;margin-top:-12px}.shield .sic svg{width:34px;height:34px;stroke-width:2.4}
.shield .snum{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:24px;line-height:1;color:#fff;white-space:nowrap;
  -webkit-text-stroke:6px color-mix(in srgb,var(--c) 60%,#000);paint-order:stroke fill}
.shield.locked{filter:none}.shield.locked .rim{fill:var(--line)}.shield.locked .face{fill:var(--screen)}
.shield.locked .sic{color:var(--muted)}.shield.locked .snum{color:var(--muted);-webkit-text-stroke-color:var(--card)}
.shield.max .rim{fill:#E8B52A}.shield.max{filter:drop-shadow(0 0 6px rgb(246 215 122 / .9)) drop-shadow(0 3px 0 rgb(0 0 0 / .12))}
.shield.sm{width:24px;height:27px;filter:none}.shield.sm .sic{margin-top:-2px}.shield.sm .sic svg{width:12px;height:12px;stroke-width:3}
.shield.big{width:120px;height:134px;animation:badge .5s .1s cubic-bezier(.34,1.56,.64,1) backwards}
.shield.big .sic svg{width:50px;height:50px}.shield.big .snum{font-size:32px;bottom:-8px}
.agroup{margin:6px 6px -4px}
.awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 6px}
.atile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;border:0;background:none;font:inherit;color:var(--ink);text-align:center}
.atile .shield{margin-bottom:6px}
.atile b{font-family:var(--display);font-size:14.5px;line-height:1.15}
.atile small{color:var(--muted);font-weight:800;font-size:12px}
.atile.locked b{color:var(--muted)}
.atile .pinmark{position:absolute;top:0;right:6px;color:var(--jade)}.atile .pinmark svg{width:16px;height:16px}
.shrow{display:flex;gap:6px;justify-content:center}.shrow .shield{width:64px;height:72px}.shrow .snum{font-size:18px}.shrow .sic svg{width:26px;height:26px}
.steps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.steps span{padding:3px 10px;border-radius:999px;background:var(--screen);border:2px solid var(--line);font-weight:800;font-size:12.5px;color:var(--muted)}
.steps span.got{background:var(--jade);border-color:var(--jade);color:#fff}
/* gold mastery: the card on the difficulty screen, the gold button, the results crown and gold lessons on the path */
.btn.gold{--c:var(--lv-gold);--d:var(--lv-gold-d);background:linear-gradient(135deg,#C9971C,#F3D26E 45%,#B8860B);color:#3D2A02}
.goldcard{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;padding:14px;border-radius:22px;border:3px solid var(--line);background:var(--card)}
.goldcard>svg{width:26px;height:26px;color:var(--muted);margin-top:2px}
.goldcard b{font-family:var(--display);font-size:19px;display:block}
.goldcard small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.goldcard .rules{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.goldcard .rules em{font-style:normal;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:#FBF1D6;color:#7A5806}
.goldcard .btn{grid-column:1/-1;margin-top:6px}
.goldcard.open{border-color:#E8B52A;background:linear-gradient(160deg,#FFF8E2,var(--card) 60%)}
.goldcard.open>svg,.goldcard.done>svg{color:#B8860B}
.goldcard.done{border-color:#E8B52A}
.goldcard.locked{opacity:.75}
.goldmark{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--screen);color:var(--muted);border:3px solid var(--line)}
.goldmark svg{width:42px;height:42px}
.toplv.goldtag{--c:#B8860B;margin:0 6px 0 0;display:inline-flex;align-items:center;gap:2px}.toplv.goldtag svg{width:13px;height:13px}
/* the gold flame (js/screens/gold.js goldFlame): round flat flame, glint, glow and hovering bubbles */
.gflame{position:relative;width:var(--w);height:var(--w);flex:none;display:block}
.gflame .fl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 92%;animation:gflicker 2.6s ease-in-out infinite}
.gflame .fl .core{transform-origin:50% 92%;animation:gcore 1.9s ease-in-out infinite}
.gflame .glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle at 50% 62%,rgb(255 196 50 / .45),rgb(255 190 40 / 0) 62%);animation:gglow 2.6s ease-in-out infinite}
.gflame .ico{position:absolute;z-index:2;left:50%;top:70%;transform:translate(-50%,-50%);color:#9A5A04;display:grid;filter:drop-shadow(0 0 3px rgb(255 255 230 / .9))}
.gflame .ico svg{width:calc(var(--w)*.3);height:calc(var(--w)*.3);stroke-width:2.6}
.gflame .glint{position:absolute;z-index:3;width:calc(var(--w)*.2);height:calc(var(--w)*.2);left:56%;top:38%;opacity:0;animation:gglint 3.4s ease-in-out infinite}
.gflame .glint svg{width:100%;height:100%;display:block}
.gflame .bub{position:absolute;z-index:1;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;opacity:.9;pointer-events:none;
  background:radial-gradient(circle,#FFFBE6 0 22%,#FFC93A 45%,rgb(245 160 20 / .55) 62%,rgb(245 160 20 / 0) 74%);box-shadow:0 0 calc(var(--s)*.6) rgb(255 180 30 / .55);
  animation:gwander var(--d) ease-in-out var(--t) infinite}
@keyframes gflicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(1.02,1.04) skewX(-2deg)}55%{transform:scale(.99,.97) skewX(1.5deg)}80%{transform:scale(1.01,1.02) skewX(-1deg)}}
@keyframes gcore{0%,100%{transform:scale(1)}50%{transform:scale(1.05,1.08)}}
@keyframes gglow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes gglint{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0)}72%{opacity:1;transform:scale(1) rotate(45deg)}84%{opacity:0;transform:scale(.3) rotate(90deg)}}
/* bubbles stay put and drift between three nearby points, twinkling as they go */
@keyframes gwander{0%,100%{transform:translate(0,0) scale(1);opacity:.9}30%{transform:translate(var(--ax),var(--ay)) scale(.8);opacity:.6}60%{transform:translate(var(--bx),var(--by)) scale(1.1);opacity:1}80%{transform:translate(var(--cx),var(--cy)) scale(.9);opacity:.75}}
.node .gflame{margin:-6px}
.goldcard>.gflame{margin:-6px 0 0 -4px}
.score .gflame{margin-bottom:4px}
/* a title with something beside it (the Journey info button and its tooltip) */
.titlewrap{flex:1;display:flex;align-items:center;gap:8px;position:relative;min-width:0}
.infobtn{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;padding:0;flex:none}
.infobtn svg{width:17px;height:17px}
.infobtn[aria-expanded="true"]{background:var(--jade);border-color:var(--jade);color:#fff}
.tip{position:absolute;top:calc(100% + 10px);left:0;right:-60px;z-index:5;background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;line-height:1.45;padding:12px 14px;border-radius:16px;box-shadow:0 6px 18px rgb(0 0 0 / .18);animation:badge .25s cubic-bezier(.34,1.56,.64,1) backwards}
.tip::before{content:"";position:absolute;top:-6px;left:var(--ax,118px);width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.sparenote{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--jade-d);margin-top:-4px}.sparenote svg{width:16px;height:16px}
/* rows of rules inside a tooltip (the Friends info button) */
.tiprows{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin-bottom:10px}
.tiprows span{font-weight:700;opacity:.8}
.tiprows b{font-family:var(--display);text-align:right}
/* leaderboards (js/screens/boards.js): a list of rows, yours highlighted and pinned to the edge while you scroll.
   No overflow:hidden on the list, or your row couldn't stick */
.lblist{display:flex;flex-direction:column;background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line);flex:none;padding:4px 0}
.lbrow{display:grid;grid-template-columns:30px auto 1fr auto;gap:10px;align-items:center;padding:8px 14px;background:var(--card)}
.lbrow+.lbrow{border-top:2px solid var(--line)}
.lbrow .avatar{width:40px;height:40px;font-size:17px}
.lbrank{font-family:var(--display);font-weight:700;font-size:16px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lbrank.top{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px}
.lbrank.r1{background:#D4A017}.lbrank.r2{background:#9AA5B1}.lbrank.r3{background:#B4793F}
.lbname{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.lbname b{font-family:var(--display);font-size:16.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbuser{font-weight:700;font-size:12px;color:var(--muted);margin-top:-3px}
.lbval{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums;text-align:right;line-height:1.1}
.lbval small{display:block;font-family:var(--body);font-weight:800;font-size:11px;color:var(--muted)}
.lbrow.me{position:sticky;top:0;bottom:0;z-index:1;background:var(--jade-s);box-shadow:inset 0 0 0 3px var(--jade);border-radius:16px;border-top-color:transparent}
.lbrow.me+.lbrow{border-top-color:transparent}
.lbrow:has(+.lbrow.me){border-bottom:0}
.lbrow.me .lbname b{color:var(--jade-d)}
.lbzone{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-top:2px dashed var(--line)}
.lbzone+.lbrow{border-top:2px dashed var(--line)}
.lbzone svg{width:15px;height:15px}
.lbzone.up{color:var(--jade-d)}.lbzone.down{color:var(--coral-d)}
.lbgap{display:grid;place-items:center;color:var(--muted);padding:2px;border-top:2px solid var(--line)}.lbgap svg{width:18px;height:18px}
.lbgap+.lbrow.me{border-top-color:transparent}
/* the league header: the five leagues in a row, yours big */
.lghead{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:none}
.lghead small{color:var(--muted);font-weight:700;font-size:13px}
.lgtiers{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.lgbadge{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--screen);color:var(--muted);border:2px solid var(--line);flex:none}
.lgbadge svg{width:18px;height:18px}
.lgbadge.past{background:color-mix(in srgb,var(--lc) 20%,var(--card));color:var(--lc);border-color:transparent}
.lgbadge.on{background:var(--lc);color:#fff;border-color:transparent;width:56px;height:56px;border-radius:18px;box-shadow:0 4px 0 color-mix(in srgb,var(--lc) 65%,#000)}
.lgbadge.on svg{width:28px;height:28px}
.lgbadge.big{width:88px;height:88px;border-radius:28px;animation:badge .5s .1s cubic-bezier(.34,1.56,.64,1) backwards}.lgbadge.big svg{width:44px;height:44px}
.lgtime{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:12.5px;color:var(--muted);background:var(--screen);border-radius:999px;padding:3px 10px}
.lgtime svg{width:14px;height:14px}
/* account (js/screens/account.js) */
.acctmark{background:var(--jade-s);color:var(--jade);border-color:var(--jade-s)}
.acctuser{display:block;font-weight:700;font-size:14px}
/* Free and Premium (js/screens/premium.js) */
.planbadge{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:4px;padding:2px 10px;border-radius:999px;background:var(--screen);border:2px solid var(--line);
  font-family:var(--body);font-weight:800;font-size:12px;color:var(--muted)}
.planbadge.prem{background:linear-gradient(135deg,#C9971C,#F3D26E 45%,#B8860B);border-color:transparent;color:#3D2A02}
.planbadge svg{width:13px;height:13px}
.plancard{display:flex;flex-direction:column;gap:10px;flex:none}
.perklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perklist li{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14.5px}
.perklist svg{width:18px;height:18px;color:var(--lv-gold);flex:none}
.premhero{border-radius:28px;padding:22px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;color:#3D2A02;
  background:linear-gradient(135deg,#C9971C,#F6D77A 40%,#E8B52A 70%,#B8860B);box-shadow:0 6px 0 var(--lv-gold-d)}
.premhero p{margin:0;font-weight:800;font-size:14.5px}
.premcrown{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:rgb(255 255 255 / .55);color:#7D5A06}.premcrown svg{width:34px;height:34px}
.compare{display:grid;grid-template-columns:1fr 58px 72px;align-items:center;row-gap:0;padding:10px 14px;flex:none}
.compare>b{font-weight:800;font-size:12.5px;text-align:center;color:var(--muted);padding-bottom:6px}
.compare>b.pc{color:var(--lv-gold-d)}
.compare>.pk,.compare>.yes,.compare>.no{border-top:2px solid var(--line);align-self:stretch;display:flex;align-items:center;padding:9px 0}
.compare>.yes,.compare>.no{justify-content:center}
.compare .pk{gap:10px;font-weight:800;font-size:14px}
.compare .pk>svg{width:18px;height:18px;color:var(--muted);flex:none}
.compare .pk small{display:block;font-weight:700;font-size:12px;color:var(--muted)}
.compare .yes svg{width:20px;height:20px;color:var(--jade);stroke-width:3}
.compare .no svg{width:18px;height:18px;color:var(--line-d)}
.planpick .price{font-size:17px;color:var(--lv-gold-d);margin-left:4px}.planpick .price small{font-family:var(--body);font-size:12px}
.planpick[aria-pressed="true"]{border-color:var(--lv-gold);box-shadow:0 4px 0 var(--lv-gold-d)}
.planpick[aria-pressed="true"] .tick{background:var(--lv-gold);border-color:var(--lv-gold)}
.planpick .badge{border-color:var(--lv-gold);color:var(--lv-gold-d);background:#FBF1D6}
.terms{margin:0;font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
/* the name card on Account and Profile wears the app theme, like the Home card */
.profhead.themed{background:var(--theme-bg,var(--jade));color:var(--theme-ink,#fff);border-color:transparent;box-shadow:0 6px 0 var(--jade-d);position:relative;overflow:hidden;isolation:isolate}
.profhead.themed .muted{color:inherit;opacity:.85}
.profhead.themed>.avatar,.profhead.themed .frame .avatar{background:color-mix(in srgb,currentColor 18%,transparent);border-color:color-mix(in srgb,currentColor 45%,transparent);color:inherit}
.profhead.themed .planbadge:not(.prem){background:color-mix(in srgb,currentColor 18%,transparent);border-color:transparent;color:inherit}
.profhead.themed .xp{background:color-mix(in srgb,currentColor 22%,transparent)}
/* real friends: their @username beside the name, Waiting while it's their turn, and friend requests */
.reqrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;flex:none}
.reqrow .avatar{width:44px;height:44px;background:var(--fc,var(--jade))}
.reqrow b{font-family:var(--display);font-size:17px;display:block}
.reqrow small{display:block;color:var(--muted);font-weight:800;font-size:12.5px}
.reqrow.sent{border-style:dashed}
.reqbtns{display:flex;gap:6px;align-items:center}
/* sign-in: Apple and Google shown but switched off, the "or with email" divider, and links under the form */
.btn.soon{flex-direction:column;gap:0;opacity:.55;cursor:not-allowed;box-shadow:0 4px 0 var(--line);transform:none;padding:10px 18px}
.btn.soon small{font-family:var(--body);font-size:12px;font-weight:800;color:var(--muted)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.authswitch{margin:-6px 0 0;text-align:center;font-weight:700;color:var(--muted)}
.authswitch .reset{padding:4px}
.note.okmsg{background:var(--jade-s);color:var(--jade-d)}
/* Home's "Set a password" prompt, for accounts from before passwords */
.pwnudge{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;text-align:left;font:inherit;color:var(--ink);flex:none;border-color:var(--coral)}
.pwnudge .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--coral)}
.pwnudge .ico svg{width:22px;height:22px}
.pwnudge b{font-family:var(--display);font-size:17px;display:block}
.pwnudge small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.pwnudge>svg{color:var(--muted)}
/* password fields: an eye button inside the field shows or hides what's typed */
.pwwrap{position:relative}
.pwwrap input{padding-right:52px}
.peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:12px;background:none;color:var(--muted);display:grid;place-items:center;padding:0}
.peek svg{width:22px;height:22px}
.peek[aria-pressed="true"]{color:var(--jade-d)}