:root{
  color-scheme: dark;
  --gold:#ffe14a; --gold2:#ffb020; --pink:#ff5a9a; --blue:#3ab8ff; --mint:#5affa8; --leaf:#2ec27a;
  --ok:#2fe07a; --bad:#ff4a5a; --ink:#fff;
  --panel:rgba(14,52,48,.9); --glass:rgba(10,40,40,.58); --edge:rgba(255,255,255,.85);
  --font:'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --display:'Lilita One', 'Fredoka', sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:#2a8a6a;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden;user-select:none;-webkit-user-select:none}
button{font-family:inherit;color:inherit;touch-action:manipulation}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:none}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;pointer-events:none}
.screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}
.screen > *{pointer-events:auto}
.spacer{flex:1}

/* ── Botones ── */
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{border:0;border-radius:999px;min-height:48px;padding:10px 22px;font-weight:700;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
.btn:active{transform:scale(.95)}
.btn.gold{background:linear-gradient(180deg,#fff7b0,var(--gold) 40%,var(--gold2));color:#4a2000;box-shadow:0 5px 0 #c06a00,0 12px 26px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn.mint{background:linear-gradient(180deg,#b0ffd8,var(--mint) 45%,#1ac070);color:#053a20;box-shadow:0 5px 0 #0a7a40,0 10px 22px rgba(0,0,0,.3)}
.btn.pink{background:linear-gradient(180deg,#ffc0dc,var(--pink) 50%,#d82a72);color:#fff;box-shadow:0 5px 0 #8a1048,0 10px 22px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn.ghost{background:rgba(10,40,40,.55);border:1.5px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.btn.big{font-size:24px;min-height:62px;padding:12px 38px}
.btn.small{min-height:40px;font-size:15px;padding:8px 14px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.iconbtn{width:44px;height:44px;border-radius:14px;border:1.5px solid rgba(255,255,255,.45);background:var(--glass);font-size:18px;font-weight:700;cursor:pointer;flex:0 0 auto;display:grid;place-items:center;backdrop-filter:blur(4px)}
.chip{border:1.5px solid rgba(255,255,255,.5);background:var(--glass);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;min-height:36px;display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(4px);white-space:nowrap}
.chip.berries{color:#ffd6e8}
.chip.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.2)}}

/* ── Títulos ── */
.brand{text-align:center;margin-top:4px}
.title{margin:0;font-family:var(--display);font-weight:400;line-height:.88;font-size:clamp(46px,13.5vw,96px);color:#fff;-webkit-text-stroke:3px #0d5a3a;paint-order:stroke fill;text-shadow:0 6px 0 #0d5a3a,0 14px 24px rgba(0,0,0,.35);animation:rise .9s cubic-bezier(.2,.9,.3,1.3) both;transform:rotate(-3deg)}
.title span{display:block;font-size:1.1em;color:var(--gold);-webkit-text-stroke:3px #a85a00;text-shadow:0 6px 0 #a85a00,0 14px 24px rgba(0,0,0,.35)}
.brand.small .title{font-size:clamp(34px,9vw,58px);display:inline-block}
.brand.small .title span{display:inline;margin-left:.15em;font-size:1em}
.tag{margin:12px 0 0;font-weight:600;font-size:17px;text-shadow:0 2px 8px rgba(0,0,0,.7)}
@keyframes rise{from{transform:translateY(-30px) scale(.8) rotate(-3deg);opacity:0}}
@keyframes pop{from{transform:scale(.8);opacity:0}}

/* ── Bienvenida ── */
#scr-intro{padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));align-items:center;gap:10px;overflow-y:auto}
.intro-box{margin-top:auto;width:min(560px,100%);background:var(--panel);border:3px solid var(--edge);border-radius:26px;padding:16px;box-shadow:0 14px 34px rgba(0,0,0,.4);animation:pop .4s both;text-align:center}
.intro-box h2{margin:0 0 4px;font-family:var(--display);font-weight:400;font-size:26px}
.intro-box p{margin:4px 0 10px;line-height:1.35}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grades button{border:2.5px solid rgba(255,255,255,.6);border-radius:18px;min-height:64px;background:linear-gradient(160deg,#3ad08a,#178a5a);font-weight:700;font-size:20px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.3);line-height:1.05}
.grades button small{display:block;font-size:12.5px;font-weight:600;opacity:.9}
.grades button:active{transform:scale(.96)}
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.starters button{border:3px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(255,255,255,.1);padding:6px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;font-size:15px}
.starters button canvas{width:100%;max-width:120px;aspect-ratio:1}
.starters button small{font-weight:600;font-size:12px;opacity:.85}
.starters button.on{border-color:var(--gold);background:rgba(255,225,74,.18);transform:scale(1.04)}

/* ── Santuario ── */
#scr-menu{padding:calc(10px + env(safe-area-inset-top,0px)) 14px calc(12px + env(safe-area-inset-bottom,0px));gap:6px;align-items:center;overflow-y:auto}
.menu-top{display:flex;gap:8px;align-items:center;width:min(760px,100%)}
.menu-stage{flex:1 1 auto;min-height:110px;width:100%;pointer-events:auto!important}
.menu-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(760px,100%)}
.progress{margin:0;font-weight:600;font-size:15px;text-shadow:0 2px 6px rgba(0,0,0,.8);background:rgba(10,40,40,.55);padding:3px 12px;border-radius:999px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.card{position:relative;border:2px solid rgba(255,255,255,.35);border-radius:18px;color:#fff;padding:9px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 rgba(10,30,30,.75),0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35);animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .12s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.card:active{transform:scale(.96)}
.card.c1{background:linear-gradient(160deg,#ff7aa8,#d0306a)}
.card.c2{background:linear-gradient(160deg,#ffaa4a,#d8661a);animation-delay:.05s}
.card.c3{background:linear-gradient(160deg,#c48aff,#7a3ad8);animation-delay:.1s}
.card.c4{background:linear-gradient(160deg,#4ac8ff,#2a6ad0);animation-delay:.15s}
.card.c5{background:linear-gradient(160deg,#ffd84a,#e0900a);animation-delay:.2s;color:#3a1a00;text-shadow:none}
.card.c6{background:linear-gradient(160deg,#5ae08a,#1a9a5a);animation-delay:.25s}
.card i{font-style:normal;font-size:28px;line-height:1}
.card b{font-size:15px;line-height:1.1;text-align:center}
.card span{font-size:12px;font-weight:500;opacity:.92;text-align:center;line-height:1.15}
.badge{position:absolute;top:-6px;right:-4px;font-style:normal;background:var(--bad);color:#fff;border:2px solid #fff;border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font-size:13px;font-weight:700;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18)}}

/* ── Mapa ── */
.topbar{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 6px;position:relative;z-index:3}
.biotabs{flex:1;display:flex;gap:4px;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.biotabs button{width:42px;height:42px;flex:0 0 auto;border-radius:14px;border:2px solid rgba(255,255,255,.4);background:var(--glass);font-size:20px;cursor:pointer;position:relative}
.biotabs button.on{border-color:var(--gold);background:rgba(255,225,74,.3);transform:scale(1.1)}
.biotabs button.lock{opacity:.5}
.biotabs button.done::after{content:"✓";position:absolute;right:-4px;top:-5px;background:var(--ok);border-radius:50%;width:17px;height:17px;font-size:11px;font-weight:700;display:grid;place-items:center;color:#053a20}
.biohead{display:flex;justify-content:center;padding:2px 12px 0}
.bioname{display:flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--edge);border-radius:18px;padding:6px 14px 6px 8px;max-width:min(560px,100%);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.bioname i{font-style:normal;font-size:30px}
.bioname b{display:block;font-size:19px;line-height:1.1}
.bioname small{display:block;font-size:13px;opacity:.9;font-weight:600;line-height:1.2}
.biostage{flex:1 1 auto;min-height:60px}
.biopanel{margin:0 auto calc(8px + env(safe-area-inset-bottom,0px));width:min(640px,calc(100% - 16px));background:var(--panel);border:2.5px solid var(--edge);border-radius:24px;padding:10px 10px 6px;box-shadow:0 10px 26px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.biofound{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.biofound img{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.1);padding:2px}
.zones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.25fr);gap:5px;align-items:end}
.zone{position:relative;border:3px solid #fff;border-radius:16px;min-height:62px;background:linear-gradient(180deg,#3ad08a,#178a5a);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px;box-shadow:0 4px 0 rgba(0,0,0,.35);font-weight:700}
.zone b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1}
.zone .st{font-size:11px;letter-spacing:-1px;white-space:nowrap}
.zone .st i{font-style:normal;filter:grayscale(1) brightness(.6)}
.zone .st i.on{filter:none}
.zone.lock{background:#4a5a62;opacity:.65;cursor:default}
.zone.next{border-color:var(--gold);animation:glow 1.2s ease-in-out infinite}
.zone.boss{background:linear-gradient(180deg,#ffd84a,#e07a0a);color:#3a1a00;min-height:72px}
.zone.boss b{font-size:26px}
.zone small{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.zone.boss.lock{background:#5a5a62;color:#ddd}
@keyframes glow{50%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 6px rgba(255,225,74,.5)}}
.maphint{margin:6px 0 2px;text-align:center;font-weight:600;font-size:14px;line-height:1.3}
.freeplay{display:flex;justify-content:center;margin-top:8px}

/* ── Juego ── */
.hudbar{gap:6px}
.hearts{display:flex;flex:0 0 auto;gap:1px;font-size:20px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.hearts i{font-style:normal;transition:transform .3s}
.hearts i.off{filter:grayscale(1) opacity(.4);transform:scale(.8)}
.dots{flex:1;display:flex;gap:4px;overflow:hidden;justify-content:safe center;align-items:center;min-width:0}
.dots i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.7);flex:0 0 auto;font-style:normal;font-size:10px;display:grid;place-items:center}
.dots i.cur{background:var(--gold);transform:scale(1.2)}
.dots i.ok{background:var(--ok)}
.dots i.ko{background:#ffb43c}
.score{background:var(--panel);border:2px solid #ff9ac8;border-radius:999px;padding:5px 12px;font-weight:700;font-size:16px;color:#ffe0ee;white-space:nowrap}
.score.bump{animation:bump .3s}
.duelbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px;position:relative;z-index:3}
.hp{background:var(--panel);border:2px solid rgba(255,255,255,.7);border-radius:14px;padding:4px 8px 6px}
.hp span{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .bar{height:12px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;border:1.5px solid rgba(255,255,255,.5)}
.hp .bar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#8affb0,#1ac070);transition:width .5s}
.hp.foe .bar i{background:linear-gradient(180deg,#ffb08a,#e8402a)}
.hp .bar i.low{background:linear-gradient(180deg,#ffe08a,#e8a02a)}
.teamrow{display:flex;gap:6px;padding:6px 12px 0;position:relative;z-index:3}
.teamrow img{width:40px;height:40px;border-radius:12px;background:var(--glass);border:2px solid rgba(255,255,255,.5);padding:2px}
.teamrow img.on{border-color:var(--gold)}
.teamrow img.ko{filter:grayscale(1) brightness(.5)}
.stage{flex:1 1 auto;min-height:100px;pointer-events:auto!important}
.panel{position:relative;z-index:3;margin:0 auto calc(8px + env(safe-area-inset-bottom,0px));width:min(640px,calc(100% - 16px));max-height:56vh;overflow-y:auto;background:var(--panel);border:2.5px solid var(--edge);border-radius:22px;padding:10px 12px 12px;box-shadow:0 8px 22px rgba(0,0,0,.35);backdrop-filter:blur(6px);touch-action:pan-y}
.panel.in{animation:cardin .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes cardin{from{transform:translateY(14px) scale(.96);opacity:.3}}
.q{display:flex;gap:8px;align-items:flex-start}
.q .txt{flex:1;min-width:0}
.q p{margin:0;font-size:clamp(17px,4.6vw,21px);font-weight:700;line-height:1.25;white-space:pre-line}
.q small{display:block;font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.q .read{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);font-size:18px;cursor:pointer}
.ops{display:grid;gap:8px;margin-top:10px;grid-template-columns:1fr 1fr}
.ops.one{grid-template-columns:1fr}
.op{border:2.5px solid rgba(255,255,255,.8);border-radius:16px;min-height:54px;padding:8px 10px;font-weight:700;font-size:clamp(16px,4.4vw,20px);cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));text-align:center;line-height:1.2;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .1s}
.op:active{transform:scale(.97)}
.ops.long .op{font-size:clamp(14.5px,3.9vw,17px)}
.op.right{background:linear-gradient(180deg,#5affa8,#1ac070);color:#053a20;border-color:#fff}
.op.wrong{background:linear-gradient(180deg,#ff8a9a,#d82a4a);border-color:#fff}
.op.dim{opacity:.4}
.banner{display:flex;align-items:center;gap:10px;border-radius:16px;padding:8px 12px;margin:0 0 8px;font-weight:700;font-size:16px;line-height:1.25}
.banner i{font-style:normal;font-size:30px}
.banner.ok{background:rgba(47,224,122,.22);border:2px solid var(--ok)}
.banner.ko{background:rgba(255,180,60,.2);border:2px solid #ffb43c}
.banner small{display:block;font-weight:600;font-size:14px;opacity:.95}
.say{display:flex;gap:10px;align-items:center;font-weight:700;font-size:17px;line-height:1.3}
.say i{font-style:normal;font-size:34px}
.say small{display:block;font-weight:600;font-size:14px;opacity:.9}

/* ── Hojas ── */
.modal{position:fixed;inset:0;z-index:60;background:rgba(4,20,20,.62);display:grid;place-items:center;padding:12px;backdrop-filter:blur(3px)}
.sheet{width:min(560px,100%);max-height:calc(100% - 8px);overflow-y:auto;background:linear-gradient(180deg,#1f8a6a,#0f4a40);border:3px solid var(--edge);border-radius:26px;padding:18px 14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:sheetin .35s cubic-bezier(.2,.9,.3,1.25);position:relative;touch-action:pan-y}
@keyframes sheetin{from{transform:translateY(30px) scale(.94);opacity:0}}
.sheet h2{margin:0 0 8px;text-align:center;font-family:var(--display);font-weight:400;font-size:28px;padding:0 40px}
.sheet h3{margin:14px 0 6px;font-size:17px}
.sheet p{margin:6px 0;line-height:1.4}
.sheet .x{position:absolute;right:10px;top:10px}
.sheet .row{margin-top:14px}
.sub{text-align:center;opacity:.95;font-weight:600}
.stars{display:flex;justify-content:center;gap:4px;font-size:44px}
.stars i{font-style:normal;filter:grayscale(1) brightness(.5)}
.stars i.on{filter:none;animation:starin .5s cubic-bezier(.2,.9,.3,1.5) both}
.stars i:nth-child(2).on{animation-delay:.15s}
.stars i:nth-child(3).on{animation-delay:.3s}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.stats div{background:rgba(255,255,255,.12);border-radius:14px;padding:6px 4px;text-align:center}
.stats b{display:block;font-size:21px}
.stats span{font-size:12px;opacity:.9}
.rule{background:rgba(255,255,255,.12);border-radius:16px;padding:10px 12px;margin:8px 0;line-height:1.45}
.rule b{color:var(--gold)}
.how li{margin:6px 0;line-height:1.35}
.tabs{display:flex;gap:3px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.tabs button{border:2px solid rgba(255,255,255,.45);background:transparent;border-radius:999px;padding:3px 4px;font-weight:700;cursor:pointer;font-size:16px;min-width:34px;min-height:36px}
.tabs button.on{background:#fff;color:#0f4a40}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.grid button{position:relative;border:2px solid rgba(255,255,255,.35);border-radius:16px;background:rgba(255,255,255,.1);padding:4px 3px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;font-weight:700;line-height:1.1;min-height:92px;text-align:center}
.grid button img{width:60px;height:60px}
.grid button small{font-weight:600;opacity:.85;font-size:10.5px}
.grid button.team{border-color:var(--gold);background:rgba(255,225,74,.16)}
.grid button.off{opacity:.65}
.grid button .shiny{position:absolute;top:2px;right:4px;font-size:13px}
.grid button .lv{position:absolute;top:2px;left:4px;font-size:10.5px;background:rgba(0,0,0,.45);border-radius:8px;padding:1px 5px}
.rar1{color:#d8ffe8}.rar2{color:#9ad8ff}.rar3{color:#ffd0ff}.rar4{color:#ffe14a}
.ficha{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.ficha canvas{width:150px;height:150px;border-radius:20px;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.28),rgba(255,255,255,.05));}
.ficha .who b{font-size:20px;display:block;line-height:1.1}
.ficha .who span{display:block;font-size:13.5px;opacity:.9;margin-top:2px}
.xpbar{height:12px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;margin:6px 0 2px;border:1.5px solid rgba(255,255,255,.5)}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffe14a,#ff9a3a)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0}
.facts div{background:rgba(255,255,255,.12);border-radius:12px;padding:5px 8px;font-size:13px;line-height:1.2}
.facts div b{display:block;font-size:11px;text-transform:uppercase;opacity:.8;letter-spacing:.03em}
.facts div.wide{grid-column:1/-1}
.dato{display:flex;gap:8px;background:rgba(255,225,74,.15);border:1.5px dashed rgba(255,225,74,.75);border-radius:14px;padding:8px 10px;font-size:14.5px;line-height:1.35;margin:6px 0 4px}
.dato i{font-style:normal;font-size:22px}
.accs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.accs button{border:2px solid rgba(255,255,255,.4);border-radius:14px;background:rgba(255,255,255,.1);min-width:46px;height:46px;font-size:24px;cursor:pointer}
.accs button.on{border-color:var(--gold);background:rgba(255,225,74,.3)}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.shop button{border:2px solid rgba(255,255,255,.4);border-radius:16px;background:rgba(255,255,255,.1);padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:700;font-size:14px}
.shop button i{font-style:normal;font-size:32px}
.shop button span{font-size:13px;color:#ffd6e8}
.shop button.own{opacity:.6}
.eggs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.egg{border:2px solid rgba(255,255,255,.4);border-radius:18px;background:rgba(255,255,255,.1);padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:700;text-align:center;cursor:pointer;min-height:160px;justify-content:center}
.egg canvas{width:84px;height:100px}
.egg.ready{border-color:var(--gold);animation:glow 1.2s ease-in-out infinite}
.egg.empty{opacity:.55;cursor:default;border-style:dashed}
.egg .xpbar{width:90%}
.missions{display:flex;flex-direction:column;gap:8px}
.mission{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.12);border-radius:16px;padding:8px 10px}
.mission i{font-style:normal;font-size:28px}
.mission .info{flex:1}
.mission .info b{display:block;font-size:15px;line-height:1.2}
.mission.done{background:rgba(47,224,122,.22)}
.hatch{display:flex;flex-direction:column;align-items:center}
.hatch canvas{width:min(260px,70vw);height:min(260px,70vw)}
.toastmsg{position:fixed;z-index:70;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--gold);color:#4a2000;font-weight:700;border-radius:999px;padding:8px 16px;box-shadow:0 8px 20px rgba(0,0,0,.35);animation:pop .3s both;max-width:92vw;text-align:center;pointer-events:none}
.opts{display:flex;flex-direction:column;gap:8px}
.opts label{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;font-weight:600;cursor:pointer}
.opts input{width:22px;height:22px;accent-color:#ffe14a}
.grades.mini button{min-height:48px;font-size:17px}
.grades.mini button.on{background:linear-gradient(160deg,#ffe14a,#e0900a);color:#3a1a00}
@media (min-width:760px){
  .panel{margin-bottom:14px}
  .cards{grid-template-columns:repeat(6,1fr)}
}
@media (max-height:640px){
  .brand.small{display:none}
  .op{min-height:44px;padding:6px 10px}
  .card{padding:6px 4px}
  .card span{display:none}
  .zone{min-height:52px}
}

@media (max-width:420px){.dots{gap:2px}.dots i{width:11px;height:11px;border-width:1.5px}.hearts{font-size:17px}.hudbar .score{padding:4px 9px;font-size:15px}}