/* =====================================================================
   WIN WORLD · ARCADE POP theme (v8)
   Loaded after styles.css. Bright sky, thick ink outlines, hard offset
   shadows, chunky candy buttons, white sticker panels.
   ===================================================================== */
@font-face{font-family:Fredoka;src:url(fonts/fredoka-he.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Fredoka;src:url(fonts/fredoka-latin.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;src:url(fonts/rubik-he.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Rubik;src:url(fonts/rubik-latin.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1A1A2E; --ink2:#3A3A55;
  --yel:#FFD23F; --yel2:#FFB800; --blue:#2D6BFF; --pink:#FF5DA2; --green:#22C55E; --orange:#FF8A00; --purple:#8B5CFF;
  --sky:#7FD3FF; --cream:#FFF7DD; --tint:#F2F0FF; --tint2:#EAF7FF;
  --bg:#7FD3FF; --txt:#1A1A2E; --mut:#55556E; --line:#1A1A2E; --glass:#fff;
  --gold:#FFC21A; --gold2:#FF9F1C; --cyan:#2D6BFF; --violet:#8B5CFF;
  --o:3px solid var(--ink); --o2:2.5px solid var(--ink);
  --sh:5px 5px 0 var(--ink); --sh2:0 4px 0 var(--ink); --sh3:0 3px 0 var(--ink);
  --up:#0E9F4E; --down:#E0284B;
}
html,body{background-color:#7FD3FF;background-image:radial-gradient(rgba(26,26,46,.12) 1.4px,transparent 1.5px),linear-gradient(180deg,#8ED9FF 0%,#6CC7FF 100%);background-size:16px 16px,100% 100%;color:var(--ink);font-family:Fredoka,Rubik,Heebo,system-ui,sans-serif}
button,input,select,textarea{font-family:Fredoka,Rubik,Heebo,system-ui,sans-serif}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
b,strong,h1,h2,h3,h4{font-weight:700}

/* ---------- core surfaces ---------- */
.glass{background:#fff;border:var(--o);box-shadow:var(--sh);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:22px;color:var(--ink)}
.sheet h2,.city h2,.mc-head h2,.cf-card h2,.ms-card h2,.gate-card h2,.creator-card h2,.lesson-card h3{font-family:Rubik,Fredoka,sans-serif;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.explain{color:var(--mut)}
.scrim{background:rgba(26,26,46,.35);backdrop-filter:none}
.modal{background:rgba(26,26,46,.38)}
.mode-modal,.card-flow{background:rgba(26,26,46,.45)}
.gate{background:rgba(26,26,46,.55)}

/* close buttons */
.city .close,.sheet .close,.lesson-card .close,.mc-head .close,.mc-card>.close,.pop-x,.dlg-x,.wb-x,.br-x{background:var(--yel)!important;border:var(--o2)!important;color:var(--ink)!important;box-shadow:var(--sh3);font-weight:700}
.dlg-x{top:-14px;left:-12px}

/* ---------- buttons ---------- */
.btn-primary{background:var(--yel);color:var(--ink);border:var(--o);border-radius:16px;box-shadow:var(--sh2);font-weight:700;text-shadow:none}
.btn-primary::after{opacity:.35}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-primary:disabled{filter:grayscale(.7);opacity:.6}
.btn-ghost{background:#fff;color:var(--ink);border:var(--o2);border-radius:14px;box-shadow:var(--sh3);font-weight:700}
.btn-ghost:hover{background:var(--cream)}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost.danger{color:var(--down);border-color:var(--ink)}
.btn-invest,.g-buy,.g-buy5{background:#4ADE80!important;color:var(--ink)!important;border:var(--o2)!important;box-shadow:var(--sh3)!important}
.btn-sell{background:#FFE0EA;color:#9F1239;border:var(--o2);box-shadow:var(--sh3)}
.btn-sell.armed{background:var(--pink);color:#fff;border-color:var(--ink)}
.g-sell{background:var(--yel)!important;color:var(--ink)!important;border:var(--o2)!important;box-shadow:var(--sh3)!important}
.btn-offer{background:#DCEBFF;color:#123A8C;border:var(--o2);box-shadow:var(--sh3)}
.btn-list{background:#FFF1C2;color:#7A4A00;border:var(--o2);box-shadow:var(--sh3)}.btn-list.on{background:var(--yel)}
.link-btn{color:var(--blue)}
.chip{background:#fff;border:var(--o2);color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--yel);box-shadow:var(--sh3)}
.chip.sw.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}

/* ---------- inputs ---------- */
.field input,#account input,.cl-box input{background:#fff;border:var(--o2);color:var(--ink);box-shadow:inset 0 3px 0 rgba(26,26,46,.08)}
.field input::placeholder,#account input::placeholder,.cl-box input::placeholder{color:#9A9AB0}
.ac-err{color:var(--down)}

/* ---------- loader ---------- */
.loader{background:var(--sky)}
.ld-ring{border:5px solid #fff;border-top-color:var(--ink);width:60px;height:60px}

/* =========================== LOBBY / COVER =========================== */
.cover{background:linear-gradient(180deg,#5FC4FF 0%,#8ED9FF 100%)}
.cv-shade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,transparent 55%,rgba(26,26,46,.18) 100%)!important}
#intro.cover-mode .kicker{background:#fff;color:var(--ink);border:var(--o2);box-shadow:var(--sh3);backdrop-filter:none;font-weight:700}
#intro.cover-mode .kicker .dot{background:var(--green);box-shadow:none;border:2px solid var(--ink)}
.cv-ribbon{background:var(--pink);border:var(--o);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:2px 24px 4px}
.cv-ribbon::before,.cv-ribbon::after{display:none}
#intro .cv-ribbon .he-title{text-shadow:none;-webkit-text-stroke:0;color:#fff;font-family:Fredoka,Rubik,sans-serif;font-weight:700}
#intro .cv-tag span{background:#fff;color:var(--ink);border:var(--o2);border-radius:12px;box-shadow:var(--sh3);text-shadow:none;padding:4px 16px;font-weight:700}
.cv-badge::before{background:#22C55E;filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(3px 3px 0 var(--ink))}
.cv-badge span{color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink);font-family:Fredoka,Rubik,sans-serif}
.cv-benny::before{border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:radial-gradient(circle at 50% 35%,#FFE27A,#FFC21A 70%)}
/* the bottom band becomes a sticker sheet */
#intro.cover-mode .cv-bottom{background-color:var(--yel);background-image:radial-gradient(rgba(26,26,46,.13) 1.5px,transparent 1.6px);background-size:12px 12px;border:var(--o);border-radius:26px;box-shadow:0 7px 0 var(--ink);padding:12px 12px 8px;gap:8px}
.ma-t{color:var(--ink);text-shadow:none;font-family:Rubik,Fredoka,sans-serif;font-weight:900}
.modes{gap:9px}
.mode{border:var(--o);border-radius:20px;border-bottom:var(--o);box-shadow:0 6px 0 var(--ink);color:#fff;min-height:108px;background:var(--m2)}
.mode::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));inset:0 0 58% 0}
.mode:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink);border-bottom-width:3px}
.mode b{text-shadow:0 2px 0 var(--ink);-webkit-text-stroke:0;font-family:Fredoka,Rubik,sans-serif;font-weight:700}
.mode small{color:#fff;text-shadow:0 1px 0 var(--ink)}
.mode i{filter:drop-shadow(0 3px 0 rgba(26,26,46,.5))}
.m-solo{--m2:var(--blue)}.m-class{--m2:var(--green)}.m-open{--m2:var(--pink)}
.mode.has-save::after{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.mode:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 6px 0 var(--ink),0 0 0 6px var(--ink)}
#intro .intro-links .link-btn,#intro .link-btn{color:var(--ink);text-decoration-color:rgba(26,26,46,.4);font-weight:600}
#intro .install-btn{color:var(--ink)}
#intro.cover-mode .hint{color:var(--ink2)}
.cv-foot{color:var(--ink2)}
.wa-link{color:var(--ink)}.wa-link:hover,.wa-link:focus-visible{color:var(--ink);background:rgba(255,255,255,.5)}
.invite-note{background:#fff;border:var(--o2);color:var(--ink)}
/* continue button */
#intro .btn-primary.game-btn{background:var(--green);color:#fff;border:var(--o)!important;border-bottom:var(--o)!important;box-shadow:0 6px 0 var(--ink)!important;text-shadow:0 2px 0 var(--ink);animation:rise .6s 1.4s forwards}
#intro .btn-primary.game-btn::after{display:none}
#intro .btn-primary.game-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)!important}
.cont-btn .cb-av img{border:3px solid var(--ink)}
.cont-btn .cb-t small{opacity:1;text-shadow:0 1px 0 var(--ink)}
#intro .game-btn.ghost{background:#fff;color:var(--ink);border:var(--o2);box-shadow:var(--sh3)}
.lobby-fx .streak{opacity:.55}

/* mode / class / open-world sheet on the cover */
.ms-card{background:#fff;border:var(--o);box-shadow:var(--sh)}
.ms-sub{color:var(--mut)}
.ms-cont>small{color:var(--ink)}
.ms-world{background:#E3FBEA;border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}
.ms-world small{color:var(--mut)}.ms-world em{color:var(--up)}
.ms-join{background:var(--tint);border:var(--o2)}
.ms-join>small{color:var(--mut)}
.code-in{background:#fff;border:var(--o);box-shadow:inset 0 4px 0 rgba(26,26,46,.1)}
.code-in span{color:var(--green)}
.code-in input{color:var(--ink)}
.code-in input::placeholder{color:#C3C3D3}
.ms-or{color:var(--mut)}.ms-or::before,.ms-or::after{height:2px;background:var(--ink);opacity:.2}
.ms-teach{background:#FFF1C2;border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}
.ms-teach small{color:var(--mut)}
.ms-roster button{background:var(--green);color:#fff;border:var(--o2);border-bottom:var(--o2);box-shadow:var(--sh3);text-shadow:0 1px 0 var(--ink)}
.ms-roster button:disabled{background:#E6E6EE;color:#8A8AA0;text-shadow:none}
.cr-note{color:var(--mut)}
/* waiting room */
.gate-card{background:#fff;border:var(--o);box-shadow:var(--sh)}
.gate-card p{color:var(--mut)}
.gm img{border:2.5px solid var(--ink)}
.gm.me i{color:var(--blue)}
/* iOS install hint */
.ios-ic{background:var(--tint);border:2px solid var(--ink)}
.ios-short{color:var(--ink)}

/* =========================== CREATOR =========================== */
.creator-card{background:#fff}
.avatar-stage::before{background:radial-gradient(circle,#FFE27A 0%,rgba(255,226,122,0) 70%);filter:none}
.stage-ring{background:radial-gradient(closest-side,rgba(26,26,46,.25),transparent)!important;filter:none}
.char-pick{background:var(--tint2);border:var(--o2);box-shadow:var(--sh3)}
.char-pick.on{border-color:var(--ink);background:var(--yel);box-shadow:0 0 0 3px var(--yel),0 4px 0 3px var(--ink)}
.opt-row>span{color:var(--mut)}
.cs-arrow{background:var(--yel);border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}

/* =========================== AVATARS =========================== */
.av-img{background:radial-gradient(circle at 50% 38%,#fff 0%,color-mix(in srgb,var(--ring,#2D6BFF) 40%,#fff) 72%)}
.avatar-sm{border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:var(--yel)}
.board li .av,.cl-list .av,.of-av,.wb-av,.resume-av{border:2px solid var(--ink)}

/* =========================== GLOBE LABELS =========================== */
.city-label .tag{background:#fff;color:var(--ink);border:var(--o2);box-shadow:var(--sh3);backdrop-filter:none;font-weight:700}
.city-label .tag i{color:#B86E00}
.city-label:hover .tag{background:var(--yel)}
.city-label .owners b{border:1.5px solid var(--ink);box-shadow:none}
.ping{border:2px solid var(--ink);box-shadow:var(--sh3);font-weight:700}

/* =========================== HUD =========================== */
.hud .glass{box-shadow:0 4px 0 var(--ink);border-radius:18px}
.hud-meta b{font-family:Rubik,Fredoka,sans-serif;font-weight:800}
.hud-meta small,.hud-wallet small{color:var(--mut)}
.hud-user{color:var(--blue)!important}
.hud-wallet b{font-family:Rubik,Fredoka,sans-serif;font-weight:800}
.wallet-sep{width:2px;background:var(--ink);opacity:.15}
.coin-ico{background:radial-gradient(circle at 35% 30%,#FFF3A8,#FFC21A 55%,#E08A00);border:2.5px solid var(--ink);box-shadow:none}
.coin-ico::after{color:var(--ink);font-family:Rubik,sans-serif}
.hud-wallet.bump{animation:bumpA .5s}
@keyframes bumpA{30%{transform:scale(1.08) rotate(-1deg)}}
.income-pill{background:#4ADE80;color:var(--ink);border:2px solid var(--ink)}
.cargo-pill{background:#DCEBFF;border:2px solid var(--ink);color:var(--ink)}
.cargo-pill small{color:var(--mut)}
.season-chip{background:var(--yel);border:var(--o);color:var(--ink)}
.season-chip small{color:var(--ink2)}.season-chip b{color:var(--ink);font-family:Rubik,sans-serif}
.season-chip .sc-ic{filter:none}
.season-chip.hurry{background:#FF8FA3;border-color:var(--ink)}.season-chip.hurry b{color:var(--ink)}
@keyframes hurry{50%{transform:scale(1.04)}}
.icon-btn{border:var(--o)!important;background:#fff;box-shadow:0 4px 0 var(--ink)}
.icon-btn em{color:var(--ink);font-weight:700}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.icon-btn.hot{background:var(--yel)}
.icon-btn.hot em{color:var(--ink)}
.dotnew{background:var(--pink);border:2px solid var(--ink);box-shadow:none;width:12px;height:12px}
.xpbar{background:#fff;border:2px solid var(--ink);height:9px}
.xpbar i{background:var(--green);box-shadow:none}
.money-float{color:var(--up);text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff;font-family:Rubik,sans-serif}

/* dock */
.dk{background:#fff;color:var(--ink);border:var(--o2)!important;box-shadow:var(--sh3);font-weight:700}
.dk.gold{background:var(--yel)}
.dk.green{background:#4ADE80}
.dk.on{outline:none;background:var(--blue);color:#fff}
.dk:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.dk-badge{background:var(--pink);color:#fff;border:2px solid var(--ink);box-shadow:none}
.dk-badge.soft{background:#fff;color:var(--ink)}
.dk-live{background:#fff;color:var(--ink);border:2px solid var(--ink)}

/* zoom + hint + reactions */
.zoom-ctl button{border:var(--o)!important;box-shadow:0 4px 0 var(--ink)!important;color:var(--ink)}
.zoom-ctl button:active{transform:translateY(3px)}
.hint-bar{color:var(--ink);font-weight:600}
.rx-btn{border:var(--o)!important;box-shadow:0 4px 0 var(--ink)!important;background:var(--yel)}
.react-pop{background:#fff;border:var(--o)}
.rx-emo button,.rx-inline button{background:var(--tint);border:2px solid var(--ink)}
.rx-ph button{background:#fff;border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}
.rx-note{color:var(--mut)}
.rx-b{background:#fff;border:var(--o2);box-shadow:var(--sh3);color:var(--ink)}
.rx-b b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px}

/* ticker */
.ticker{background:var(--ink);border-top:var(--o);backdrop-filter:none;color:#fff}
.tk-label{background:var(--yel);color:var(--ink);border-left:var(--o);font-family:Rubik,sans-serif}
.tk-brand{color:#C9C9E0}

/* =========================== POP PANELS =========================== */
.board li .rk{color:var(--mut)}
.board li.me{background:#DCEBFF;outline:2px solid var(--ink)}
.board li.flash{background:#FFF1C2}
.live{color:var(--down)}.live i{background:var(--down)}
.demo-note{color:var(--mut)}
.quest li{color:var(--mut)}
.quest li .ck{border:2px solid var(--ink)}
.quest li.done{color:var(--up);text-decoration-color:rgba(14,159,78,.5)}
.quest li.done .ck{background:var(--green);border-color:var(--ink);color:#fff}
.quest li.cur{color:var(--ink);background:#FFF1C2;outline:2px solid var(--ink)}
.quest li .xp{color:#B86E00}
.quest li.daily{background:#FFF1C2;border:var(--o2)}
.quest li.daily small{color:#B86E00}
.usermenu .um-head small{color:var(--mut)}
.um-i{background:#fff;border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}
.um-i.hot{background:#DCEBFF}
.um-i.card-i{background:#FFF1C2;border-color:var(--ink)}
.um-i.card-i em{background:var(--yel);border:1.5px solid var(--ink)}

/* =========================== CITY PANEL =========================== */
.city-emoji{background:var(--yel);border:var(--o);box-shadow:var(--sh3)}
.city-head p{color:var(--mut)}
.city-index{background:var(--tint2);border:var(--o2);color:var(--mut)}
.city-index b{color:var(--ink)}
.city-tabs{background:var(--tint);border:var(--o2);padding:4px}
.city-tabs button{color:var(--mut);font-weight:700}
.city-tabs button.on{background:var(--yel);color:var(--ink);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.lot{background:#fff;border:var(--o);box-shadow:0 4px 0 var(--ink)}
.lot .ic{filter:drop-shadow(0 3px 0 rgba(26,26,46,.25))}
.lot h4{font-weight:700}
.lot .meta{color:var(--mut)}
.lot .price{font-family:Rubik,sans-serif;font-weight:800}
.lot .price .c,.opp-nums .c,.g-row .c,.of-in .c{border:2px solid var(--ink);background:radial-gradient(circle at 35% 30%,#FFF3A8,#FFC21A 55%,#E08A00)}
.up{color:var(--up)!important}.down{color:var(--down)!important}
.lot.owned{border-color:var(--ink);background:color-mix(in srgb,var(--me) 16%,#fff);box-shadow:0 0 0 3px var(--me),0 4px 0 3px var(--ink)}
.lot.owned::before{display:none}
.lot .badge{border:2.5px solid var(--ink);box-shadow:none}
.lot .owner-tag{color:var(--ink);text-decoration:underline;text-decoration-color:var(--me);text-decoration-thickness:3px}
.lot.theirs .owner-tag{color:var(--ink);text-decoration-color:var(--oc)}
@keyframes flashUp{20%{background:#C9F7D9}}
@keyframes flashDown{20%{background:#FFD6DF}}
.haggle-tag{background:var(--yel);color:var(--ink);border:2px solid var(--ink)}
.lot .liq{color:var(--mut)}
.lot .share-tag{color:#B86E00}
small.train{background:var(--tint);color:var(--ink2);border:1.5px solid var(--ink)}
.maxed{color:#B86E00}
.lvl-burst{color:var(--up);text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff}
/* goods market */
.g-banner{border:var(--o2)!important;color:var(--ink)}
.g-banner.here{background:#E3FBEA}
.g-banner.fly{background:#DCEBFF}
.g-banner.away{background:#FFF1C2}
.g-head{color:var(--mut)}
.g-row{background:#fff;border:var(--o2);box-shadow:var(--sh3)}
.g-n em{color:var(--mut)}.g-n em.local{color:var(--up)}
.g-acts button{border:2px solid var(--ink)!important}
.g-acts button:disabled{opacity:.35}
.profit-pop{text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff;font-family:Rubik,sans-serif}
.cg-bar{background:#fff;border:2px solid var(--ink);height:12px}.cg-bar i{background:var(--blue)}
.cg-row{background:#fff;border:var(--o2);box-shadow:var(--sh3)}
.cg-best b{color:#B86E00}.cg-best small,.cg-cap small{color:var(--mut)}

/* =========================== DIALOG (Benny) =========================== */
.bubble{background:#fff;color:var(--ink);border:var(--o);box-shadow:var(--sh);border-radius:24px 24px 24px 8px}
.bubble p{font-weight:600}
.char-name{background:var(--yel);color:var(--ink);border:var(--o2);box-shadow:var(--sh3)}
.choices button{background:var(--cream);border:var(--o2);color:var(--ink);box-shadow:var(--sh3);font-weight:600}
.choices button:hover{background:#FFF1C2;border-color:var(--ink);transform:translateY(-1px)}
.choices button.go{background:var(--yel);border-color:var(--ink);font-weight:700}
.choices button small{color:var(--mut)}

/* =========================== SHEETS =========================== */
.stat,.pt,.hw-t,.cl-box,.of-biz,.ofs-row,.tg,.opp,.bw,.hub-item,.mc-item{background:#fff;border:var(--o2);box-shadow:var(--sh3);color:var(--ink)}
.stat small,.pt small,.pf-num small,.pf-name small,.opp-top small,.opp-nums .roi,.bw small,.hub-item small,.tg small,.of-biz small,.of-stats small,.ofs-row small,.cl-box small{color:var(--mut)}
.stat b,.pt b,.pf-num b{font-family:Rubik,sans-serif;font-weight:800}
.pt.big{background:color-mix(in srgb,var(--me) 22%,#fff);border-color:var(--ink)}
.pt.gold{background:#FFF1C2;border-color:var(--ink)}.pt.gold b{color:var(--ink)}
.pf-tabs{border-bottom:var(--o2)}
.pf-tabs button{color:var(--mut);font-weight:700}
.pf-tabs button.on{color:var(--ink);border-bottom:5px solid var(--yel)}
.pf-row{background:#fff;border:var(--o2);box-shadow:var(--sh3)}
.stars{color:#E8A400}.stars i{color:#D8D8E3}
.pf-empty p{color:var(--mut)}
.opp-sort span{color:var(--mut)}
.opp-sort button{background:#fff;border:var(--o2);color:var(--ink)}
.opp-sort button.on{background:var(--yel);border-color:var(--ink)}
.bw{opacity:.6}
.bw.got{background:#FFF1C2;border-color:var(--ink);opacity:1}
.bw-medal{border:2.5px solid var(--ink);box-shadow:var(--sh3)}
.bw:not(.got) .bw-medal{background:#EDEDF3;border-color:#B9B9C9}
.hub-item:hover:not(:disabled){border-color:var(--ink);background:var(--cream)}
.hub-item.done{background:#E3FBEA;border-color:var(--ink)}
.hw-formula i{color:var(--ink)}
.hw-t.hw-gold{background:var(--yel);border-color:var(--ink)}
#mkChart{background:var(--ink);border:var(--o)}
.legend span{color:var(--ink)}
/* settings toggles */
.tg i{background:#D8D8E3;border:2px solid var(--ink)}
.tg i::after{top:2px;right:2px;border:2px solid var(--ink);width:20px;height:20px;box-sizing:border-box}
.tg input:checked+i{background:var(--green)}
.acct-card>div{background:#DCEBFF;border:var(--o2);box-shadow:var(--sh3)}
.acct-card small{color:var(--mut)}
.st-contact{border-top:2px dashed rgba(26,26,46,.25)}
/* class */
.cl-code{background:var(--yel);border:var(--o);box-shadow:var(--sh3)}
.cl-code small{color:var(--ink2)}
.cl-code b{font-family:Rubik,sans-serif;color:var(--ink)}
.wa-btn{border:var(--o);box-shadow:var(--sh2);color:#fff;text-shadow:0 1px 0 var(--ink)}
.cl-list li{background:var(--tint)}
.cl-list .rk,.cl-h small{color:var(--mut)}
.cl-list .dot{background:#C9C9D6;border:1.5px solid var(--ink)}.cl-list .dot.on{background:var(--green);box-shadow:none}
.goal-box{background:#FFF1C2;border:var(--o2);box-shadow:var(--sh3)}
.goal-bar{background:#fff;border:2px solid var(--ink)}
.goal-bar i{background:linear-gradient(90deg,var(--yel),var(--green))}
.goal-box small{color:var(--mut)}
/* offers */
.of-stats>div{background:var(--tint);border:2px solid var(--ink)}
.of-help{color:var(--ink2)}
.of-in{background:#fff;border:var(--o);box-shadow:inset 0 3px 0 rgba(26,26,46,.08)}
.of-in input{color:var(--ink)}
.of-say{background:#DCEBFF;border:var(--o2)}
.of-ok{background:#E3FBEA;border:var(--o2)}
.typing i{background:var(--ink)}
.of-mate{background:#fff;border:var(--o2);color:var(--ink)}
.of-mate.on{background:var(--yel);border-color:var(--ink)}
.of-split{background:var(--tint);border:2px solid var(--ink)}

/* =========================== LESSONS & COURSES =========================== */
.lesson-card{background:#fff}
.ls-steps i{background:#E4E4EE;border:1.5px solid var(--ink);height:8px}
.ls-steps i.on{background:var(--yel)}
.ls-kicker{color:#B86E00}
.ls-visual{background:var(--tint2);border:var(--o2)}
.vcol,.vop{color:var(--ink2)}
.vbar{border:2px solid var(--ink)}
.vprice{color:var(--up);text-shadow:2px 2px 0 #fff}
.vbub{border:2px solid var(--ink);box-shadow:var(--sh3)}
.quiz-opts button{background:#fff;border:var(--o2);color:var(--ink);box-shadow:var(--sh3);font-weight:600}
.quiz-opts button:hover:not(:disabled){border-color:var(--ink);background:var(--cream)}
.quiz-opts button.right{background:#C9F7D9;border-color:var(--ink)}
.quiz-opts button.wrong{background:#FFD6DF;border-color:var(--ink)}
.quiz-fb.ok{color:var(--up)}.quiz-fb.no{color:var(--down)}
.reward .pills span{background:var(--yel);border:var(--o2);box-shadow:var(--sh3)}
.skip-btn{background:#fff;border:var(--o2);color:var(--ink);box-shadow:var(--sh3)}
.levelup b{background:none;-webkit-text-fill-color:var(--yel);color:var(--yel);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;filter:drop-shadow(5px 5px 0 var(--ink));font-family:Rubik,sans-serif}
.levelup span{color:var(--ink);background:#fff;border:var(--o2);border-radius:12px;padding:2px 12px}
.level-go b{background:none;-webkit-text-fill-color:var(--yel);color:var(--yel);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;filter:drop-shadow(5px 5px 0 var(--ink));font-family:Rubik,sans-serif}
/* course drawer + player */
.mc-drawer{background:#fff;border:var(--o);box-shadow:-5px 0 0 var(--ink)}
.mc-head p{color:var(--mut)}
.mc-item{background:color-mix(in srgb,var(--cc) 18%,#fff)}
.mc-e{background:#fff;border:var(--o2);box-shadow:none}
.mc-t small{color:var(--mut)}
.mc-play{border:var(--o2);color:var(--ink)}
.mc-item.done .mc-play{background:var(--green)}
.mc-card{background:#fff}
.mc-stage{color:#fff;border-bottom:var(--o)}
.mc-title{border:2px solid #fff;background:rgba(26,26,46,.55)}
.mc-opts button{color:#fff}
.mc-opts button.yes{color:var(--ink);border:2px solid var(--ink)}
.mc-foot{background:#fff;border-top:0}
.mc-prog{background:#E4E4EE;border:2px solid var(--ink);height:12px}
.mc-prog i{background:var(--yel)}
.mc-time{color:var(--mut)}

/* =========================== POPUPS & FX =========================== */
.toast{background:#fff;color:var(--ink);border:var(--o2);box-shadow:var(--sh3)}
.wb{background:#fff;border:var(--o);box-shadow:var(--sh);color:var(--ink)}
.wb small{color:var(--mut)}
.badge-pop{background:var(--yel);border:var(--o);box-shadow:var(--sh);color:var(--ink)}
.badge-pop small{color:var(--ink2)}.badge-pop em{color:var(--ink2)}
.bp-medal{border:2.5px solid var(--ink)}
.breaking{background:#fff;border:var(--o);box-shadow:var(--sh);color:var(--ink)}
.br-top{background:#FF3B5C;color:#fff;border-bottom:var(--o)}
.br-tag{text-shadow:0 2px 0 var(--ink)}
.br-body p{color:var(--ink2)}
.br-bar{background:#E4E4EE}.br-bar i{background:#FF3B5C}
.fly-coin,.burst-coin,.lobby-fx i{border:2px solid var(--ink);box-shadow:none}
.spark{box-shadow:none;background:var(--yel);border:1.5px solid var(--ink)}
/* season end */
.season-end{background:radial-gradient(ellipse at 50% 30%,#FFE27A,#FFB800 70%)}
.se-rays{background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.35) 0 8deg,transparent 8deg 20deg)}
.se-title{background:none;-webkit-text-fill-color:#fff;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;filter:drop-shadow(5px 5px 0 var(--ink));font-family:Rubik,sans-serif}
.pd b{color:var(--ink)}.pd small{color:var(--ink2)}
.pd-block{border:var(--o);box-shadow:var(--sh2);color:var(--ink)}
.pd-av .av-img{border-radius:50%;border:3px solid var(--ink)}
.cert-in{border:var(--o);box-shadow:var(--sh)}
.cert-seal{border:2.5px solid var(--ink)}

/* =========================== ENTREPRENEUR CARD =========================== */
.cf-card{background:#fff;border:var(--o)}
.cf-tag{background:var(--yel);color:var(--ink);border:2px solid var(--ink)}
.cf-dots i{background:#E4E4EE;border:1.5px solid var(--ink);height:9px}.cf-dots i.on{background:var(--yel)}
.cf-sub{color:var(--mut)}
.cf-ch{background:var(--tint2);border:var(--o2);box-shadow:var(--sh3)}
.cf-ch.on{border-color:var(--ink);background:var(--yel);box-shadow:0 0 0 3px var(--yel),0 4px 0 3px var(--ink)}
.cf-tr,.cf-sec{background:color-mix(in srgb,var(--tc) 18%,#fff);border:var(--o2);box-shadow:var(--sh3);color:var(--ink)}
.cf-tr small{color:var(--ink2)}
.cf-tr.on,.cf-sec.on,.cf-ch.tap,.cf-tr.tap,.cf-sec.tap{border-color:var(--ink);box-shadow:0 0 0 3px var(--yel),0 4px 0 3px var(--ink)}
.cf-skip{color:var(--mut)}
#hudAvatar.card-new{box-shadow:0 0 0 3px var(--yel),0 3px 0 3px var(--ink)}
@keyframes cvPulse{50%{box-shadow:0 0 0 5px var(--yel),0 3px 0 5px var(--ink)}}
.cv-card{background:#fff;border:var(--o);box-shadow:var(--sh)}
.cv-av{border:var(--o);box-shadow:var(--sh3);background:var(--tint2)}
.cv-kicker{color:#B86E00}
.cv-id span,.cv-empty,.cv-note{color:var(--mut)}
.cv-tr{background:color-mix(in srgb,var(--tc) 16%,#fff);border:var(--o2)}
.cv-tr small{color:var(--ink2)}
.cv-tr b em{background:var(--yel);border:1.5px solid var(--ink)}
.cv-tr .lv i{background:#E4E4EE;border:1.5px solid var(--ink)}.cv-tr .lv i.on{box-shadow:none}
.cv-dream{background:var(--tint);border:2px solid var(--ink)}
.cv-stats div{background:#fff;border:var(--o2);box-shadow:var(--sh3)}
.cv-stats b{color:var(--ink);font-family:Rubik,sans-serif}
.cv-stats small{color:var(--mut)}
.cv-badges span{background:#fff;border:2px solid var(--ink)}
.cv-badges span.gold{background:var(--yel)}
.cv-lines li{background:var(--tint)}
.cv-btns .btn-ghost{color:var(--ink)}
.cs-card img{border:var(--o);box-shadow:var(--sh)}
.cs-btns a{color:var(--ink)}

/* =========================== MOBILE =========================== */
@media (max-width:820px){
  :root{--sh:4px 4px 0 var(--ink)}
  .city{border-radius:26px 26px 0 0;box-shadow:0 -4px 0 var(--ink);border-bottom:0}
  .mc-drawer{box-shadow:0 -5px 0 var(--ink)}
  .hud .glass{box-shadow:0 3px 0 var(--ink)}
  .icon-btn{box-shadow:0 3px 0 var(--ink)}
  #intro.cover-mode .cv-bottom{border-radius:24px;padding:10px 10px 6px}
  .mode{min-height:100px}
}
@media (max-width:370px){.mode{min-height:96px;border-radius:16px}}

/* spacing for the close button next to titles */
.sheet h2{padding-left:48px}
.lesson-card .ls-steps{margin-left:118px}
@media (max-width:820px){.mc-title{top:60px;right:50%;transform:translateX(50%);white-space:nowrap}}
.ls-visual small[style]{filter:brightness(.5) saturate(1.4)}
.lot .owner-tag.mate{color:var(--ink)!important}
@media (min-aspect-ratio:1/1) and (min-width:821px){#intro.cover-mode .sub{color:var(--ink2);text-shadow:none;font-weight:600}}
/* course player: bright stage */
.mc-stage{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--cc) 45%,#fff) 0%,color-mix(in srgb,var(--cc) 80%,#1A1A2E) 85%)}
.mc-glow{opacity:.6}
.mc-h,.mc-q>b{text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}
.mc-n{color:#fff;text-shadow:0 4px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink)}
.mc-vis span{filter:drop-shadow(0 6px 0 rgba(26,26,46,.35))}
.mc-q small{color:#fff;text-shadow:0 2px 0 var(--ink)}
.mc-opts button{background:#fff;color:var(--ink);border:var(--o2);box-shadow:var(--sh3)}
.mc-opts button.yes{background:#4ADE80}
.mc-opts button.no{background:#FFD6DF;border-color:var(--ink)}
.mc-fb{color:#fff;text-shadow:0 2px 0 var(--ink)}
.mode small{white-space:normal;text-overflow:clip;overflow:visible;font-size:11.5px;line-height:1.15;text-wrap:balance}