/* ===== estilo juego ===== */
:root{
  --bg:#EEF2F8;--surface:#FFFFFF;--surface2:#E6ECF5;--ink:#1D2433;--muted:#667089;--line:#D5DDEA;
  --xp:#FFB938;--fire:#FF7A1A;--ice:#3AA8F0;--ok:#27B070;--wall:#E9EEF7;--floor:#D3DCEB;
  --shadow:0 3px 0 var(--line);
  --font:ui-rounded,"SF Pro Rounded",-apple-system,"Nunito","Segoe UI",system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
[data-mode=dark]{--ink:#F1F3FA;--muted:#9AA4C0;--bg:#121723;--surface:#1C2333;--surface2:#262F45;--line:#10141D;--shadow:0 3px 0 #0C1018;--wall:#2A3350;--floor:#1E2640;--xp:#FFC04A;--ok:#3DD68C;--fire:#FF9142;--ice:#5CBBF5}
b{font-weight:800}
.card,.tk,.wk,.badge,.chest-b,.theme-c,.sw-b,.onb-o{border-radius:22px;box-shadow:var(--shadow)}
.card{padding:16px}
.m-card{border-radius:30px}.sh-p{border-radius:28px 28px 0 0}
.top h1{font-weight:800;font-size:1.65rem;letter-spacing:-.02em}
.btn{border-radius:16px;font-weight:800;box-shadow:0 4px 0 var(--acc-shade)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--acc-shade)}
.btn.ghost{background:var(--surface2);box-shadow:0 4px 0 var(--line)}
.btn.sm{box-shadow:0 3px 0 var(--acc-shade);border-radius:14px}.btn.sm.ghost{box-shadow:0 3px 0 var(--line)}
#fab{border-radius:50%;width:60px;height:60px;box-shadow:0 5px 0 var(--acc-shade),0 12px 22px rgba(0,0,0,.2)}
.chk{width:52px;height:52px;background:var(--surface2);box-shadow:inset 0 0 0 3px var(--line),0 4px 0 var(--line)}
.chk:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px var(--line),0 1px 0 var(--line)}
.tk.done .chk{box-shadow:0 4px 0 var(--acc-shade)}
.tk-name,.hname,.card-h,.chip,.mtag,.rb,.seg-c button{font-weight:800}
.sec{font-weight:800}
/* barras tipo juego */
.xpbar{height:20px;background:var(--surface2);box-shadow:inset 0 2px 3px rgba(0,0,0,.12);position:relative}
.xpfill{background:linear-gradient(90deg,var(--c),var(--xp));position:relative}
.xpfill::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:5px;border-radius:9px;background:rgba(255,255,255,.4)}
.bar{height:14px;box-shadow:inset 0 2px 3px rgba(0,0,0,.1)}.bar.sm{height:10px}
.bar i{background:linear-gradient(90deg,var(--acc),var(--xp))}
.xpcap{font-weight:700}
.hero{background:var(--surface)}
@supports (background:color-mix(in srgb,red 10%,blue)){.hero{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 22%,var(--surface)),var(--surface) 72%)}}
.hlvl b{display:inline-block;background:var(--c);color:#fff;border-radius:10px;padding:1px 9px;font-size:.8rem}
.hero-xp b{font-size:1.7rem;color:var(--xp);text-shadow:0 2px 0 rgba(0,0,0,.12)}
.chip{padding:7px 13px;font-size:.82rem}
.chip.fire{background:var(--fire);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.chip.ice{background:var(--ice);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.chip.combo{background:var(--xp);color:#4A3200;box-shadow:0 3px 0 rgba(0,0,0,.18);animation:pulse 1.6s ease-in-out infinite}
.chip.off{box-shadow:none}
[data-mode=dark] .chip.fire,[data-mode=dark] .chip.ice{color:#fff}
.mtag{background:var(--xp);color:#4A3200}.mtag.m-rescue{background:#FF6B6B;color:#fff}.mtag.m-favor{background:#FF7EB6;color:#fff}.mtag.m-early{background:var(--ok);color:#fff}
[data-mode=dark] .mtag,[data-mode=dark] .mtag.m-rescue,[data-mode=dark] .mtag.m-favor,[data-mode=dark] .mtag.m-early{color:inherit}
[data-mode=dark] .mtag{color:#4A3200}[data-mode=dark] .mtag.m-rescue,[data-mode=dark] .mtag.m-favor,[data-mode=dark] .mtag.m-early{color:#fff}
.rb{border-width:2px;border-radius:99px}.rb.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);box-shadow:0 3px 0 var(--acc-shade)}
.seg-c{border-radius:18px;background:var(--surface2)}.seg-c button{border-radius:14px}.seg-c button.on{box-shadow:0 3px 0 var(--line)}
.av{background:var(--surface2);box-shadow:0 0 0 3px var(--c,var(--line))}
.av.ini{font-weight:800;font-size:calc(var(--s)*.45);color:var(--c)}
.m-ic{border-radius:16px;background:var(--xp);color:#5A3F00;box-shadow:0 3px 0 rgba(0,0,0,.15)}.mission.done .m-ic{background:var(--ok);color:#fff}
.m-r b{color:var(--xp)}
.clear-ic{background:var(--xp);color:#5A3F00;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.hstate{background:var(--ok)!important;color:#fff!important}.hstate.s-sad{background:var(--xp)!important;color:#4A3200!important}.hstate.s-wilt{background:#FF6B6B!important}
.home-top b{font-size:1.5rem}
.tx b{color:var(--xp)}
.dxp{font-weight:800}
.tag-new{background:var(--xp);color:#5A3F00;font-weight:800}
.effb.on,.dowb.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);box-shadow:0 3px 0 var(--acc-shade)}
.effb,.dowb{border-width:2px;border-radius:14px}
input,select,textarea{border-width:2px;border-radius:14px}
#banner{border-radius:99px;font-weight:800}
.onb-o:first-child{border-color:var(--acc)}
.onb-dots i.on{background:var(--acc)}
.tk{padding:10px 8px 10px 10px}
.tk.done{opacity:.6}
.badge{padding:14px 10px}
.badge.on .medal{filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.badge.on.legendary{box-shadow:var(--shadow),0 0 0 3px var(--xp)}
.badge.on.legendary .medal{filter:drop-shadow(0 0 10px rgba(255,185,56,.7))}
.chest-b svg{animation:wobble 2.4s ease-in-out infinite}
#tabs{box-shadow:0 -3px 0 var(--line);border-top:0}
#tabs button{font-weight:800;border-radius:16px}
#tabs button.on{color:var(--acc);background:var(--surface2)}
@media (min-width:768px){#tabs{box-shadow:3px 0 0 var(--line)}}
[data-mode=dark] .chip.fire{background:var(--fire);color:#fff}
[data-mode=dark] .chip.ice{background:var(--ice);color:#fff}
[data-mode=dark] .chip.combo{background:var(--xp);color:#4A3200}
[data-mode=dark] .mtag.m-rescue{background:#FF6B6B}[data-mode=dark] .mtag.m-favor{background:#FF7EB6}[data-mode=dark] .mtag.m-early{background:var(--ok);color:#06301D}
[data-mode=dark] .hstate.s-radiant,[data-mode=dark] .hstate.s-bloom{background:var(--ok)!important;color:#06301D!important}