:root{--bg:#050b14;--panel:#0c1928;--panel2:#10243a;--line:#27425d;--text:#f2f8ff;--dim:#91a7bb;--blue:#2ca9ff;--cyan:#45e5ff;--gold:#ffc83d;--red:#ff5574;--green:#55e6a5;--shadow:0 20px 70px rgba(0,0,0,.48);font-family:Inter,ui-sans-serif,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{background:radial-gradient(circle at 75% 0,#15365b 0,transparent 42%),linear-gradient(145deg,#040912,#071424)}button,input{font:inherit}button{touch-action:manipulation}#app{width:min(1440px,100%);min-height:100dvh;margin:auto;display:flex;flex-direction:column}.top{height:68px;flex:none;display:flex;align-items:center;padding:0 24px;gap:24px;border-bottom:1px solid var(--line);background:rgba(3,9,17,.88);backdrop-filter:blur(15px);position:sticky;top:0;z-index:50}.brand{font-weight:950;letter-spacing:1px;font-size:18px}.brand span{color:var(--gold)}.brand i{color:var(--cyan);font-style:normal;margin-right:9px}.meters{margin-left:auto;display:flex;gap:8px}.meters span{min-width:76px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;color:var(--dim);font-size:8px;letter-spacing:1px}.meters b{display:block;color:white;font-size:15px}.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:white;cursor:pointer}.icon-btn.off{opacity:.45}main{flex:1;min-height:0;position:relative}.screen{display:none;min-height:calc(100dvh - 104px);padding:30px;overflow:auto}.screen.active{display:block}.kicker{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:2px}.hero{max-width:650px;position:relative;z-index:2}.hero h1{font-size:clamp(58px,8vw,112px);line-height:.82;letter-spacing:-6px;margin:22px 0}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--cyan)}.hero p,.lede{color:var(--dim);line-height:1.65}.home-actions{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:10px;margin-top:28px}.btn{min-height:45px;padding:10px 18px;border:1px solid var(--line);border-radius:11px;background:rgba(11,25,40,.9);color:white;font-weight:850;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.btn.primary{background:linear-gradient(135deg,#05aeea,#1567ef);border:0;box-shadow:0 9px 28px rgba(15,130,239,.28)}.btn.huge{display:block;min-width:300px;margin:25px auto 10px;font-size:18px}.btn.small{min-height:34px;padding:5px 12px;font-size:11px}.text-btn{display:block;margin:12px auto;background:none;border:0;color:var(--dim);cursor:pointer}.hero-pokemon{position:absolute;right:3%;bottom:2%;width:52%;height:88%;pointer-events:none}.hero-pokemon img{position:absolute;object-fit:contain;filter:drop-shadow(0 30px 25px #000)}.hero-pokemon img:nth-child(1){width:35%;left:0;bottom:5%}.hero-pokemon img:nth-child(2){width:52%;right:0;bottom:2%}.hero-pokemon img:nth-child(3){width:54%;left:21%;top:0}.panel{width:min(660px,100%);margin:0 auto;padding:28px;background:linear-gradient(150deg,rgba(17,37,58,.96),rgba(7,16,27,.98));border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);text-align:center}.panel.wide{width:min(1080px,100%)}.panel h2,.screen-title h2,.floor-banner h2{font-size:clamp(28px,4vw,48px);margin:8px 0}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.starter-card,.destiny-card,.team-card{position:relative;padding:16px;border:1px solid var(--line);border-radius:15px;background:#091522;color:white;text-align:center;cursor:pointer}.starter-card:hover,.destiny-card:hover{border-color:var(--cyan);transform:translateY(-2px)}.starter-card img,.destiny-card img{width:120px;height:120px;object-fit:contain}.type{display:inline-block;padding:3px 8px;border-radius:999px;background:#17324b;color:var(--cyan);font-size:9px;text-transform:uppercase}.floor-banner,.screen-title{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1080px;margin:0 auto 22px}.floor-banner>div{border-left:4px solid var(--cyan);padding-left:17px}.floor-banner p{color:var(--dim);margin:0}.versus-cards{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:10px}.squad-card{padding:18px;background:rgba(10,24,38,.9);border:1px solid var(--line);border-radius:18px}.squad-card>span{color:var(--cyan);font-size:9px;letter-spacing:2px}.squad-card.enemy>span{color:var(--red)}.mini-team{display:flex;justify-content:center;gap:4px;min-height:150px}.mini{flex:1;min-width:0;text-align:center}.mini img{width:100%;height:110px;object-fit:contain}.mini b{display:block;font-size:11px}.vs{text-align:center;font-size:30px;color:var(--gold)}.battle-screen{padding:14px}.battle-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.battle-head span,.battle-head strong{display:block}.battle-head span{color:var(--cyan);font-size:10px;letter-spacing:2px}.arena{aspect-ratio:1440/650;height:auto;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:center/cover no-repeat;box-shadow:var(--shadow);margin:0 auto}.arena-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,14,.1),rgba(2,8,14,.05) 55%,rgba(2,8,14,.45))}.fighters{position:absolute;inset:0}.fighter{position:absolute;width:150px;transform:translate(-50%,-50%);transition:left .45s linear,top .45s linear;z-index:2;text-align:center}.fighter.foe img{transform:scaleX(-1)}.fighter img{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 15px 9px rgba(0,0,0,.58))}.fighter.hit img{animation:hit .22s}.fighter.attack img{animation:lunge .34s cubic-bezier(.3,.1,.2,1)}.fighter.ko{filter:grayscale(1);opacity:.2;transform:translate(-50%,-50%) rotate(80deg)}.fighter-name{font-size:10px;font-weight:900;text-shadow:0 2px 4px #000}.hp{height:7px;background:#07101a;border:1px solid rgba(255,255,255,.18);border-radius:5px;overflow:hidden}.hp i{display:block;height:100%;background:linear-gradient(90deg,#36d884,#8bf55d);transition:width .25s}.fmeters{height:4px;margin-top:2px}.fmeters span{display:block;width:100%;height:100%;border-radius:3px;background:#07101a;border:1px solid rgba(255,255,255,.14);background-repeat:no-repeat;transition:background-image .08s linear}.fmeters .m-turn{background-image:linear-gradient(90deg,#2ca9ff var(--pct,0%),transparent var(--pct,0%))}.foe .hp i{background:linear-gradient(90deg,#ff4770,#ff9847)}.damage{position:absolute;color:#fff;font-weight:950;font-size:20px;text-shadow:0 2px 4px #000;animation:float .7s forwards}.battle-call{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(60px,12vw,150px);font-weight:1000;font-style:italic;color:white;text-shadow:0 5px 0 #147bec,0 13px 40px #000;animation:call 1.2s forwards;z-index:10}/* The result lands as a small card near the bottom of the arena, over the
   fight that produced it, instead of a full-screen takeover -- the
   battlefield stays visible and it reads as a natural continuation of the
   fight rather than a jarring page swap. */
.battle-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;width:min(92%,480px);padding:16px 22px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(10,12,16,.88);backdrop-filter:blur(8px);text-align:center;box-shadow:var(--shadow);animation:resultRise .34s cubic-bezier(.2,.9,.3,1) both}.battle-result[hidden]{display:none}.battle-result h2{font-size:clamp(26px,5vw,38px);margin:0 0 4px;color:var(--gold)}.battle-result.win{border-color:rgba(85,230,165,.55)}.battle-result.win h2{color:#7cf0b6}.battle-result.loss{border-color:rgba(255,85,116,.55)}.battle-result.loss h2{color:#ff8fa3}@keyframes resultRise{from{opacity:0;transform:translate(-50%,calc(-50% + 16px))}to{opacity:1;transform:translate(-50%,-50%)}}@media(max-width:760px){.battle-result{padding:12px 16px 14px}}.combat-log{height:80px;overflow:auto;margin-top:8px;padding:9px 13px;background:#07111c;border:1px solid var(--line);border-radius:10px;color:var(--dim);font:11px/1.45 ui-monospace,monospace}.dice-panel{margin-top:4vh}.die{width:130px;height:130px;margin:28px auto;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#fff,#9bdcff);color:#07111e;font-size:72px;font-weight:950;box-shadow:0 20px 50px rgba(45,190,255,.3);transform:rotate(-5deg)}.die.roll{animation:roll .8s}.dice-actions{display:flex;justify-content:center;gap:10px}.dice-panel #dice-result{min-height:28px;color:var(--gold);font-weight:850}.destiny-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.team-layout{max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 330px;gap:16px}.team-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.team-card{cursor:default}.team-card img{width:130px;height:130px;object-fit:contain}.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0;font-size:10px;color:var(--dim)}.tactics{text-align:left;margin:0;width:100%}.tactics label{display:block;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px}.tactics small{display:block;color:var(--dim);margin:4px 0 0 22px}.help{width:min(1000px,100%)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;text-align:left}.help-grid article{padding:18px;border:1px solid var(--line);border-radius:13px;background:#091522}.help-grid article>b{color:var(--cyan);font-size:25px}.help-grid p{color:var(--dim);line-height:1.5}footer{height:36px;display:grid;place-items:center;color:#567089;font-size:9px;letter-spacing:.5px}@keyframes hit{50%{filter:brightness(2) saturate(0)}}
.fighter.knockback{animation:knockback .26s ease-out}
/* Critical (Special Attack) hits slam the target all the way to a corner of
   the arena instead of the usual small shove -- the actual position change
   happens in JS (attack()'s resolve(), see the crit-slam branch there),
   this just gives THAT much bigger a move a slower, weightier glide instead
   of the normal snappy .12s knockback transition, plus a little spin on the
   sprite itself so the slide reads as a real excessive recoil, not a
   teleport. !important because .fighter.knockback (above) still applies to
   the very same landed hit and shouldn't win the transition-duration fight.
   */
.fighter.crit-slam{transition:left .52s cubic-bezier(.13,.82,.22,1),top .52s cubic-bezier(.13,.82,.22,1)!important;z-index:15}
.fighter.crit-slam img{animation:critSlamSpin .52s ease-out}
@keyframes critSlamSpin{0%{transform:rotate(0)}35%{transform:rotate(-18deg)}70%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes knockback{0%{transform:translate(-50%,-50%)}28%{transform:translate(calc(-50% + var(--kbx,12px)),calc(-50% + var(--kby,0px)))}100%{transform:translate(-50%,-50%)}}@keyframes lunge{0%{transform:translateX(0) scale(1)}16%{transform:translateX(-7px) scale(.95)}52%{transform:translateX(26px) scale(1.1)}78%{transform:translateX(-8px) scale(.97)}100%{transform:translateX(0) scale(1)}}@keyframes float{to{transform:translateY(-50px);opacity:0}}@keyframes call{0%{opacity:0;transform:scale(1.8)}35%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes roll{50%{transform:rotate(300deg) scale(.75)}100%{transform:rotate(715deg)}}
@media(max-width:760px){.top{height:58px;padding:0 10px;gap:8px}.brand{font-size:12px}.meters{gap:3px}.meters span{min-width:48px;padding:5px;font-size:6px}.meters b{font-size:12px}.screen{min-height:calc(100dvh - 88px);padding:16px 11px}.hero{padding-top:45vh}.hero h1{font-size:14vw;letter-spacing:-3px}.hero-pokemon{top:0;right:0;width:100%;height:48vh}.home-actions{grid-template-columns:1fr}.starter-grid{grid-template-columns:1fr 1fr}.starter-card img,.destiny-card img{width:90px;height:90px}.versus-cards{grid-template-columns:1fr 32px 1fr}.mini-team{min-height:95px}.mini img{height:72px}.mini b{font-size:8px}.vs{font-size:17px}.floor-banner{align-items:flex-start}.fighter-name{font-size:8px}.destiny-grid{grid-template-columns:1fr}.team-layout{grid-template-columns:1fr}.team-list{grid-template-columns:1fr}.help-grid{grid-template-columns:1fr}.panel{padding:20px 13px}.dice-actions{flex-direction:column}}
@media(orientation:landscape) and (max-height:600px){.top{height:45px}.screen{min-height:calc(100dvh - 70px);padding:8px;overflow-y:auto}.battle-screen{padding:5px}.battle-head{height:30px;margin:0}.combat-log{display:none}.battle-result{overflow-y:auto;padding:10px}.battle-result h2{font-size:42px}.panel{margin:0 auto}.starter-grid{grid-template-columns:repeat(3,1fr)}footer{height:25px}}

/* Arena combat: compact 2D fighters, continuous movement, dodges and pixel effects. */
.arena-shade{background:linear-gradient(180deg,rgba(2,8,14,.08),transparent 45%,rgba(2,8,14,.22))}
/* fighterGhost() in game.js sets style.left/top as a % of the arena for
   each attack/dodge afterimage, exactly like .fighter -- but without
   position:absolute here, left/top do nothing and the <img> just sits in
   normal document flow, which is why every ghost trail image used to pile
   up in the arena's top-left corner instead of overlaying the fighter. */
.combat-ghost{position:absolute;left:0;top:0;width:6.4%;aspect-ratio:1/1;object-fit:contain;pointer-events:none;z-index:2;image-rendering:pixelated;animation:ghostFade .42s ease-out forwards}
.combat-ghost.foe{animation-name:ghostFadeFoe}
.combat-ghost.second{opacity:.4;animation-delay:.03s}
.combat-ghost.special{filter:drop-shadow(0 0 10px rgba(255,255,255,.6))}
@keyframes ghostFade{from{opacity:.65;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%) scale(.88)}}
@keyframes ghostFadeFoe{from{opacity:.65;transform:translate(-50%,-50%) scaleX(-1)}to{opacity:0;transform:translate(-50%,-50%) scaleX(-1) scale(.88)}}
.fighter{width:calc(6.4% * var(--fscale,1));transition:left .12s linear,top .12s linear,width .5s ease;z-index:3}
/* In-battle Digimon-style evolution: cutscene + size scaling for evolved/
   legendary fighters. Sizing itself is driven by each fighter's own
   --fscale custom property (set in fighterHTML()/triggerEvolution() in
   game.js) via the .fighter width rule just above -- these rules are only
   the cutscene's own visual flourishes. */
.arena{transition:transform .75s cubic-bezier(.2,.6,.3,1)}
.arena.evo-zoom{transform:scale(1.38);transform-origin:var(--evo-x,50%) var(--evo-y,50%);z-index:5}
.fighter.evolving{z-index:30}
.fighter.evolving img{animation:evoPulse .45s ease-in-out infinite,evoGlow .45s ease-in-out infinite}
@keyframes evoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes evoGlow{0%,100%{filter:drop-shadow(0 15px 9px rgba(0,0,0,.58)) brightness(1) drop-shadow(0 0 2px #fff59d)}50%{filter:drop-shadow(0 15px 9px rgba(0,0,0,.58)) brightness(1.7) drop-shadow(0 0 26px #fff59d) drop-shadow(0 0 46px #ffee58)}}
.fighter img{width:100%;aspect-ratio:1/1;image-rendering:pixelated;filter:drop-shadow(0 9px 5px rgba(0,0,0,.62))}
.fighter.running img{animation:runbob .28s infinite alternate}
.fighter.evade img{animation:dodge .32s ease-out}
.fighter-name{font-size:8px;white-space:nowrap}
.hp{height:6px;border-color:rgba(255,255,255,.3)}
.damage{z-index:8;font-size:17px;transform:translate(-50%,-50%)}
.damage.miss{color:var(--cyan);font-size:13px}
.battle-fx{position:absolute;z-index:7;width:6.9%;aspect-ratio:1/1;object-fit:contain;image-rendering:pixelated;transform:translate(-50%,-50%);pointer-events:none}
@keyframes runbob{to{transform:translateY(-3px)}}
@keyframes dodge{0%{transform:translateX(0);filter:none}30%{transform:translateX(var(--dodgeDir,14px)) scaleX(1.12);filter:blur(1.5px)}62%{transform:translateX(calc(var(--dodgeDir,14px) * -0.35));filter:blur(.4px)}100%{transform:translateX(0);filter:none}}
@keyframes float{to{transform:translate(-50%,-70px);opacity:0}}
@media(max-width:760px){.fighter-name{font-size:7px}}
@media(orientation:landscape) and (max-height:600px){}

/* OpenMon supplies native front and back battle animations; no mirroring is used. */
.fighter.foe img,.fighter.ally img{transform:none}
.fighter.foe.attack img{animation:lungeFoe .34s cubic-bezier(.3,.1,.2,1)}
.openmon-fx{display:block;width:96px;height:96px;background-repeat:no-repeat;transition:left .38s ease-out,top .38s ease-out}
.openmon-fx.contact,.openmon-fx.target{transition:none}
@keyframes lungeFoe{0%{transform:translateX(0) scale(1)}16%{transform:translateX(7px) scale(.95)}52%{transform:translateX(-20px) scale(1.1)}78%{transform:translateX(8px) scale(.97)}100%{transform:translateX(0) scale(1)}}
@media(max-width:760px){.openmon-fx{width:72px;height:72px;transform:translate(-50%,-50%) scale(.75)}}

/* Version 7: brighter adventure UI and journey board. */
:root{--bg:#eaf8ff;--panel:#ffffff;--panel2:#e9f7ff;--line:#b8ddf1;--text:#17324d;--dim:#5f7890;--blue:#248cff;--cyan:#10c6e8;--gold:#ffbb24;--red:#ff5f72;--green:#31c986;--shadow:0 14px 40px rgba(40,112,155,.18);color-scheme:light}
html,body{background:linear-gradient(180deg,#dff6ff,#fff6d9);color:var(--text)}
body{background:linear-gradient(160deg,#dff6ff,#f7fdff 50%,#fff5d7)}
.top{background:rgba(255,255,255,.9);border-color:#bde3f4;box-shadow:0 5px 20px rgba(37,109,148,.12)}
.brand{color:#245070}.brand span{color:#ff9c24}.meters span{background:#eef9ff;color:#6c8aa1}.meters b{color:#17324d}.icon-btn{background:#fff;color:#2187cb}
.screen{color:var(--text)}
#home.screen{padding:0;background:#fff}
.home-sky{min-height:clamp(520px,72vh,760px);padding:clamp(36px,6vw,86px);display:flex;align-items:center;background:linear-gradient(90deg,rgba(6,48,95,.78) 0%,rgba(6,48,95,.48) 31%,rgba(6,48,95,0) 60%),url(assets/arena-premium-v2.jpg) center/cover no-repeat}
.home-sky .hero{max-width:610px;color:white;text-shadow:0 3px 18px rgba(0,45,80,.45)}
.home-sky .hero h1{font-size:clamp(56px,7vw,104px);letter-spacing:-5px;line-height:.84;margin:18px 0}.home-sky .hero h1 em{-webkit-text-stroke:2px #fff;color:#ffd84b}.home-sky .hero p{color:#fff;font-size:17px;font-weight:650;max-width:540px}.home-sky .kicker{color:#fff3a6}
.home-actions .btn{background:rgba(255,255,255,.94);color:#28506d;border-color:white;text-shadow:none}.home-actions .btn.primary{color:white;background:linear-gradient(135deg,#ff9f32,#ff5f64);box-shadow:0 10px 25px rgba(189,53,57,.28)}
.journey-wrap{padding:30px clamp(18px,5vw,70px) 42px;background:linear-gradient(180deg,#fff,#effaff)}.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:auto}.journey-heading h2{margin:4px 0 16px;font-size:34px}.adventure-stats{display:flex;gap:9px;flex-wrap:wrap}.adventure-stats span{padding:9px 13px;border-radius:999px;background:white;border:2px solid #d7effa;box-shadow:0 4px 12px rgba(34,111,155,.1);font-size:12px}.adventure-stats b{color:#146ea8}
.journey-board{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(10,1fr);gap:10px;position:relative}.journey-board:before{content:"";position:absolute;height:6px;left:4%;right:4%;top:32px;background:#cde9f7;border-radius:9px}.board-node{position:relative;z-index:1;min-width:72px;padding:7px 4px 10px;border:2px solid #c7e5f4;border-radius:18px;background:#f8fdff;color:#638096;box-shadow:0 5px 13px rgba(38,111,150,.1)}.board-node i{display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:50%;background:#dceef7;color:#8ba7b9;font-style:normal;font-size:20px}.board-node b,.board-node small{display:block}.board-node b{font-size:19px;margin-top:3px}.board-node small{font-size:7px;letter-spacing:1px}.board-node.done{border-color:#78d9b1;background:#effff7}.board-node.done i{background:#3dd296;color:white}.board-node.current{border-color:#ffaf32;background:#fff8e8;transform:translateY(-7px);box-shadow:0 10px 22px rgba(255,154,28,.25);cursor:pointer}.board-node.current i{background:linear-gradient(145deg,#ffcf43,#ff7c37);color:white;animation:nodePulse 1.5s infinite}.board-node.mini i{border:3px solid #b57cff}.board-node.boss i{border:3px solid #ff6680}.board-tip{text-align:center;color:#577890;font-weight:700;margin:18px 0 0}
.panel,.squad-card,.team-card,.starter-card,.destiny-card,.help-grid article,.tactics{background:rgba(255,255,255,.96);color:var(--text);border-color:#bee0ef;box-shadow:var(--shadow)}.panel{background:linear-gradient(155deg,#fff,#eefaff)}.type{background:#ddf4ff;color:#1777aa}.starter-card:hover,.destiny-card:hover{border-color:#2ab7e9}.floor-banner>div{border-color:#ffb32e}.floor-banner p,.lede,.help-grid p,.tactics small{color:var(--dim)}.btn{background:#fff;color:#264b65;border-color:#abd8eb}.text-btn{color:#638096}.combat-log{background:#f7fcff;color:#507088;border-color:#b9ddec}.battle-head{color:#234b67}.battle-result{background:rgba(239,250,255,.94);color:#17324d}.battle-result h2{color:#ff9d26}.battle-result.win{border-color:rgba(61,210,150,.6)}.battle-result.win h2{color:#1f9e6b}.battle-result.loss{border-color:rgba(255,95,114,.6)}.battle-result.loss h2{color:#e0435a}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.fighter{transition:left .06s linear,top .06s linear}.fighter.attack img{animation-duration:.15s}.fighter.foe.attack img{animation-duration:.15s}.openmon-fx{transition-duration:.19s}
.pokeball{width:142px;height:142px;margin:28px auto;position:relative;border:8px solid #19364a;border-radius:50%;background:linear-gradient(#f6555d 0 43%,#19364a 43% 57%,#fff 57%);box-shadow:0 14px 35px rgba(38,100,140,.22);display:grid;place-items:center}.pokeball:before{content:"";position:absolute;width:48px;height:48px;border:8px solid #19364a;border-radius:50%;background:white;z-index:1}.pokeball i{position:absolute;width:23px;height:23px;border-radius:50%;background:#aeeaff;z-index:2;box-shadow:inset 0 0 0 4px white}.pokeball span{position:absolute;bottom:-34px;font-size:24px;font-weight:950;color:#214b67}.pokeball.roll{animation:ballRoll .9s cubic-bezier(.3,.8,.4,1)}.pokeball.caught i{background:#65e8a9;box-shadow:0 0 20px #26cf86,inset 0 0 0 4px white}.pokeball.caught{animation:ballCaught .6s}
@keyframes nodePulse{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,178,44,.18)}}@keyframes ballRoll{0%{transform:translateX(-110px) rotate(-360deg) scale(.75)}55%{transform:translateX(18px) rotate(25deg)}75%{transform:translateX(-10px) rotate(-18deg)}100%{transform:none}}@keyframes ballCaught{25%,75%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@media(max-width:760px){.home-sky{min-height:620px;padding:32px 18px;align-items:flex-end;background-position:62% center}.home-sky .hero{padding:0}.home-sky .hero h1{font-size:15vw}.home-sky .hero p{font-size:14px}.journey-heading{align-items:flex-start;flex-direction:column}.journey-board{display:flex;overflow-x:auto;padding:12px 4px 18px;scroll-snap-type:x mandatory}.board-node{flex:0 0 78px;scroll-snap-align:center}.journey-board:before{display:none}.adventure-stats{gap:5px}.adventure-stats span{padding:7px 9px;font-size:10px}}

/* Readable arena labels and move announcements. */
.fighter-name{position:relative;overflow:hidden;color:#fff;background:rgba(9,30,45,.82);border:1px solid rgba(255,255,255,.8);border-radius:5px;padding:2px 5px 4px;text-shadow:0 2px 2px #000,1px 0 #000,-1px 0 #000;box-shadow:0 2px 5px rgba(0,0,0,.32);font-size:9px}
.fighter-name b{position:relative;font-weight:inherit}
/* The gold TP meter now lives as a thin underline baked into the name
   badge itself (fills left-to-right via --pct) instead of sitting next to
   the blue turn gauge as its own separate little bar. */
.fighter-name .tp-bar{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(255,255,255,.18);background-image:linear-gradient(90deg,#ffc83d var(--pct,0%),transparent var(--pct,0%));transition:background-image .12s linear}
.skill-call{position:absolute;z-index:12;min-width:112px;padding:7px 13px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:7px;color:#fff;text-align:center;font:950 12px/1 ui-sans-serif,system-ui;letter-spacing:.7px;text-shadow:0 2px 2px rgba(0,0,0,.45);box-shadow:0 4px 0 rgba(22,43,64,.7),0 8px 18px rgba(0,0,0,.28);animation:skillPop .62s forwards;white-space:nowrap;background:#4d7fd7}
.skill-call.type-fire{background:#ef5a42}.skill-call.type-water{background:#3194dc}.skill-call.type-electric{background:#e7ad21}.skill-call.type-grass{background:#45a95a}.skill-call.type-ghost,.skill-call.type-dark{background:#71529e}.skill-call.type-psychic,.skill-call.type-fairy{background:#d75eaf}.skill-call.type-fighting,.skill-call.type-ground,.skill-call.type-rock{background:#b36b3e}.skill-call.type-steel,.skill-call.type-normal{background:#6e8291}.skill-call.type-poison{background:#8f55ad}.skill-call.type-bug{background:#7b9d32}.skill-call.type-ice{background:#42b7c4}.skill-call.type-dragon{background:#6059ce}.skill-call.type-flying{background:#5f93c7}
@keyframes skillPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.92)}}
@media(max-width:760px){.fighter-name{font-size:7px;padding:1px 3px}.skill-call{min-width:90px;padding:5px 8px;font-size:9px}}
.starter-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.starter-card.selected{border-color:#20a9e0;background:#ddf6ff;box-shadow:0 0 0 3px rgba(32,169,224,.18),0 10px 26px rgba(20,102,145,.18)}.starter-card.selected::after{content:'✓ SELECTED';position:absolute;right:9px;top:9px;padding:4px 7px;border-radius:999px;background:#149bd5;color:white;font-size:8px;font-weight:950;letter-spacing:.5px}.starter-count{font-weight:900;color:#28708d;margin:18px 0 0}

/* Storyboard: the Champion node on the adventure board, and the Pokédex collection grid. */
.board-node.champion{border-color:#ffd23e}.board-node.champion i{border:3px solid #ffd23e}.board-node.champion.current i{background:linear-gradient(145deg,#ffe98a,#ffb23e)}
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin:22px 0}
.dex-card{padding:10px 6px;border:1px solid var(--line);border-radius:13px;background:#f8fdff;text-align:center;font-size:10px}
.dex-card img{width:64px;height:64px;object-fit:contain}
.dex-card b{display:block;margin-top:4px;font-size:10px}
.dex-card .type{margin-top:3px}
.dex-card:not(.caught){opacity:.55}
.dex-card:not(.caught) b{color:var(--dim)}
.dex-card.seen img{filter:grayscale(1) brightness(.85)}
.dex-silhouette{width:64px;height:64px;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:#dceef7;color:#8ba7b9;font-size:26px;font-weight:900}
@media(max-width:760px){.dex-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.dex-card img,.dex-silhouette{width:48px;height:48px}}
/* ============================================================
   Pre-battle math gate: one quick problem before every "Enter
   Arena," difficulty following the child's AdikGenius age (see
   js/gate.js mathGate()) -- same idea as Susume's own gate, ported
   to this palette. ============================================ */
.ag-mathgate-backdrop{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,9,17,.72);backdrop-filter:blur(4px)}
.ag-mathgate-backdrop.is-open{display:flex}
.ag-mathgate-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px 22px 20px;text-align:center;transform:scale(.94);transition:transform .16s ease}
.ag-mathgate-backdrop.is-open .ag-mathgate-card{transform:scale(1)}
.ag-mathgate-card.is-shake{animation:ag-mathgate-shake .32s ease}
@keyframes ag-mathgate-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.ag-mathgate-lock{font-size:30px;line-height:1;margin-bottom:6px}
.ag-mathgate-title{font-weight:900;font-size:19px;color:var(--text);margin:0 0 4px}
.ag-mathgate-sub{font-size:13px;color:var(--dim);margin:0 0 18px}
.ag-mathgate-sum{font-weight:900;font-size:30px;color:var(--text);margin-bottom:16px;font-variant-numeric:tabular-nums}
.ag-mathgate-answer{display:flex;gap:8px;margin-bottom:14px}
.ag-mathgate-input{flex:1;min-width:0;padding:12px 10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;font-family:inherit;font-size:20px;font-weight:800;text-align:center;transition:.15s}
.ag-mathgate-input:focus{outline:none;border-color:var(--cyan)}
.ag-mathgate-input:disabled{cursor:default}
.ag-mathgate-input.correct{background:rgba(85,230,165,.18);border-color:var(--green);color:var(--green)}
.ag-mathgate-input.wrong{background:rgba(255,85,116,.18);border-color:var(--red);color:var(--red)}
.ag-mathgate-submit{padding:12px 18px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:.15s}
.ag-mathgate-submit:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.ag-mathgate-submit:disabled{cursor:default;opacity:.6}
.ag-mathgate-msg{min-height:18px;font-size:12.5px;font-weight:800;color:var(--red);margin-bottom:10px}
.ag-mathgate-actions{display:flex;gap:10px;justify-content:center}
@media(max-width:760px){.ag-mathgate-card{max-width:320px;padding:20px 16px 16px}.ag-mathgate-input{padding:10px 6px;font-size:17px}.ag-mathgate-submit{padding:10px 12px;font-size:13px}}
.destiny-card.selected{border-color:#20a9e0;background:#ddf6ff;box-shadow:0 0 0 3px rgba(32,169,224,.18),0 10px 26px rgba(20,102,145,.18)}
/* The light-theme .type pill (#ddf4ff) and a selected card's own
   background (#ddf6ff) are nearly the same color, so the type badge went
   visually invisible -- text with no pill behind it -- the moment a card
   was selected. Give it a solid, higher-contrast pill only in that state. */
.destiny-card.selected .type{background:#1f9fd6;color:#fff}
/* Choose Fighters / Edit Team: each Pokémon's 2 real moves as small chips,
   colored by that Pokémon's own type -- the same type combat actually
   uses (see typeMult()), so this isn't inventing a separate per-move
   type system, just surfacing the one that already drives damage. */
.move-list{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:10px 0}
.move-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cat-icon{flex:none;display:block;border-radius:3px}
/* Tower screen mini roster cards: a real type pill (previously the .type
   class here was silently repurposed to show the level number instead of
   an actual type) plus an optional matchup badge showing how that
   Pokémon's type fares against the opposing roster as a whole. */
.type-pill{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 7px;border-radius:999px;color:#fff;font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.lvl-badge{display:inline-block;margin-top:3px;margin-left:3px;padding:2px 7px;border-radius:999px;background:#e8f4fb;color:#4c7288;font-size:8px;font-weight:800}
.matchup{display:block;margin-top:4px;font-size:8px;font-weight:900;letter-spacing:.3px;padding:2px 6px;border-radius:999px}
.matchup.super{background:#d7f7e6;color:#1a8f5c}
.matchup.resist{background:#ffe3d9;color:#b5502a}
.matchup.immune{background:#e4e9ee;color:#5c6e82}
@media(max-width:760px){.move-chip{font-size:8px;padding:3px 7px}.type-pill,.lvl-badge,.matchup{font-size:7px}}
.destiny-card .select-badge{display:block;margin-top:6px;font-size:10px;font-weight:900;letter-spacing:1px;color:var(--cyan)}
/* ── Battle system additions: Special Attack (TP) meter, Block, Knockdown,
   Status ailments, Provoke/taunt, and home-field terrain. Status rings use
   ::before/::after pseudo-elements rather than an img filter so they never
   fight with the existing hit/lunge/knockback sprite animations. ── */
.status-icons{min-height:14px;text-align:center;font-size:12px;letter-spacing:2px;text-shadow:0 1px 2px #000}
.fighter.poisoned::before,.fighter.stunned::before,.fighter.slowed::before,.fighter.asleep::before,.fighter.taunting::before{content:'';position:absolute;inset:14%;border-radius:50%;z-index:-1;animation:statusPulse 1.1s ease-in-out infinite}
.fighter.poisoned::before{background:radial-gradient(circle,rgba(159,85,196,.45),transparent 70%)}
.fighter.stunned::before{background:radial-gradient(circle,rgba(255,214,64,.5),transparent 70%)}
.fighter.slowed::before{background:radial-gradient(circle,rgba(84,196,255,.4),transparent 70%)}
.fighter.asleep::before{background:radial-gradient(circle,rgba(120,120,220,.4),transparent 70%)}
.fighter.taunting::before{background:radial-gradient(circle,rgba(255,200,61,.5),transparent 70%)}
@keyframes statusPulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.85;transform:scale(1.08)}}
.fighter.down img{animation:knockdownFall .35s forwards}
.fighter.down .status-icons,.fighter.down .fighter-name{opacity:.6}
@keyframes knockdownFall{to{transform:rotate(78deg) translateY(14px);opacity:.55}}
.fighter.blocked::after{content:'';position:absolute;inset:6%;border:3px solid #7fd8ff;border-radius:50%;opacity:.9;animation:blockRing .35s ease-out}
.fighter.crit::after{content:'';position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,61,.55),transparent 70%);animation:critFlash .3s ease-out}
@keyframes blockRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes critFlash{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}}
.damage.special{color:#ffc83d;font-size:23px}
.damage.crit-pop{color:#ff5574;font-size:23px;text-shadow:0 2px 4px #000,0 0 10px rgba(255,85,116,.7)}
.damage.special.crit-pop{color:#ff9147}
.damage.blocked-dmg{color:#9fd8ff;font-size:16px}
.damage.resist{color:#9fb0c4;font-size:15px}
.damage.immune{color:#5c6e82;font-size:14px}
.damage.down-text{color:#ff8fa3;font-size:15px}
.damage.status-text{font-size:13px;color:#c7a6ff}
.damage.poison-tick{color:#c07bd9;font-size:13px}
.skill-call.special{border-color:#ffe27a;box-shadow:0 4px 0 rgba(120,90,10,.7),0 0 22px rgba(255,200,61,.55);background:linear-gradient(135deg,#a8631e,#5a3a12)}
@media(max-width:760px){.status-icons{font-size:9px}}
/* Impact shockwave + arena shake -- the small/big split mirrors the
   Digimon game's own size-scaled hit-effect assets (hitspark_big vs
   hitspark_small), and the shake gives a heavy hit real ground-impact
   weight instead of just a brightness flash on the sprite. */
.impact-ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #fff;opacity:.9;pointer-events:none;z-index:9;animation:impactPop .28s ease-out forwards}
.impact-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;border-width:5px;border-color:#ffe27a;box-shadow:0 0 20px rgba(255,200,61,.6)}
@keyframes impactPop{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
.arena.shake{animation:arenaShake .32s}
@keyframes arenaShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,-1px)}}
/* Special Attack cut-in: a dynamic portrait flash (Digimon-style super-move
   cut-in) that plays over the arena right before a charged Special Attack
   lands -- attacker's sprite, a colored flash + ray burst in its own type
   color, and the move name called out. Sits above fighters/skill-call
   popups but under the win/loss result card. */
.cutin{position:absolute;inset:0;z-index:14;overflow:hidden;pointer-events:none;display:flex;align-items:center}
.cutin-flash{position:absolute;inset:0;background:var(--cutin-color,#fff);opacity:0;animation:cutinFlash .65s ease-out forwards}
.cutin-rays{position:absolute;inset:-25%;opacity:0;mix-blend-mode:screen;background:repeating-conic-gradient(from 0deg,var(--cutin-color,#fff) 0deg 7deg,transparent 7deg 16deg);animation:cutinRays .65s ease-out forwards}
.cutin-card{position:relative;display:flex;align-items:center;gap:12px;margin:0 22px;padding:10px 20px 10px 12px;border-radius:14px;border:2px solid rgba(255,255,255,.55);background:linear-gradient(120deg,rgba(8,13,21,.94),var(--cutin-color,#6e8291));box-shadow:0 14px 34px rgba(0,0,0,.5);transform:translateX(-130%);animation:cutinSlideLeft .65s cubic-bezier(.2,.75,.25,1) forwards}
.cutin.from-right .cutin-card{margin-left:auto;transform:translateX(130%);animation-name:cutinSlideRight}
.cutin-card img{width:104px;height:104px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.cutin.from-right .cutin-card img{transform:scaleX(-1)}
.cutin-text{display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 6px rgba(0,0,0,.75)}
.cutin-text b{font-size:16px;letter-spacing:.4px;color:#fff}
.cutin-text span{font-size:12px;font-weight:900;letter-spacing:1.2px;color:#ffe27a}
@keyframes cutinFlash{0%{opacity:0}10%{opacity:.6}28%{opacity:0}100%{opacity:0}}
@keyframes cutinRays{0%{opacity:0;transform:rotate(0deg) scale(.8)}22%{opacity:.55}100%{opacity:0;transform:rotate(30deg) scale(1.1)}}
@keyframes cutinSlideLeft{0%{transform:translateX(-130%) scale(.92);opacity:0}16%{opacity:1}34%{transform:translateX(4%) scale(1.04)}45%{transform:translateX(0) scale(1)}78%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(-130%) scale(.94);opacity:0}}
@keyframes cutinSlideRight{0%{transform:translateX(130%) scale(.92);opacity:0}16%{opacity:1}34%{transform:translateX(-4%) scale(1.04)}45%{transform:translateX(0) scale(1)}78%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(130%) scale(.94);opacity:0}}
@media(max-width:760px){.cutin-card{margin:0 10px;padding:7px 14px 7px 8px;gap:8px}.cutin-card img{width:72px;height:72px}.cutin-text b{font-size:12px}.cutin-text span{font-size:9px}}

/* ============================================================
   Kid-friendly vibrant reskin: the previous "Version 7" pass (brighter
   adventure UI) still read closer to a clean grown-up dashboard than a
   game built for kids -- navy text, a plain sans font, thin 1px borders,
   flat buttons. This layers a playful rounded font pairing (Baloo 2 for
   headings/buttons/labels, Nunito for body copy), a sunnier and more
   saturated palette, chunky "press-me" 3D buttons, bouncier card/board
   hovers, and a couple of sprinkle/star touches. Purely visual -- no
   layout or functional changes underneath. ============================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{--bg:#fff3da;--panel:#ffffff;--panel2:#fff1cf;--line:#ffcf56;--text:#20395e;--dim:#6d81a6;--blue:#2f9bff;--cyan:#00c9d6;--gold:#ffb703;--red:#ff5d73;--green:#33d788;--shadow:0 16px 36px rgba(255,153,0,.2);font-family:'Nunito',Inter,ui-sans-serif,system-ui,sans-serif}
/* Give every screen the same premium-arena identity the home screen's own
   big banner (.home-sky) already shows in full -- a heavily-tinted, mostly-
   opaque version of the same wash gradient sits on top of the art here so
   panels/text stay just as readable as before, but the arena now reads as
   part of the whole app, not just the first screen. #home.screen still
   paints its own opaque white over this (see #home.screen above) since its
   full-bleed .home-sky banner is the bold, undiluted version of this art. */
html,body{background:linear-gradient(165deg,rgba(255,242,204,.93) 0%,rgba(255,227,240,.91) 45%,rgba(223,243,255,.93) 100%),url(assets/arena-premium-v2.jpg) center top/cover no-repeat}
body{background:linear-gradient(165deg,rgba(255,242,204,.93) 0%,rgba(255,227,240,.91) 45%,rgba(223,243,255,.93) 100%),url(assets/arena-premium-v2.jpg) center top/cover no-repeat}
h1,h2,h3,.brand,.kicker,.board-node b,.board-node small,.battle-result h2,#result-title,.pokeball span,.die,.skill-call,.cutin-text b,.cutin-text span,.ag-mathgate-title,.ag-mathgate-sum{font-family:'Baloo 2','Nunito',ui-sans-serif,system-ui,sans-serif}
.btn,.icon-btn{font-family:'Baloo 2','Nunito',ui-sans-serif,system-ui,sans-serif;letter-spacing:.2px}

/* Chunky, bouncy "press-me" buttons instead of flat 1px-border ones. */
.btn{border-radius:16px;border:3px solid #ffe6a0;background:#fff;color:#28496b;font-weight:800;box-shadow:0 5px 0 #f2b93e,0 11px 20px rgba(242,157,20,.22);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-2px);border-color:#ffe6a0;box-shadow:0 7px 0 #f2b93e,0 15px 24px rgba(242,157,20,.26)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #f2b93e,0 5px 12px rgba(242,157,20,.22)}
.btn.primary{background:linear-gradient(135deg,#5cc4ff,#3d8bff);border-color:#1f78e0;color:#fff;box-shadow:0 5px 0 #1f68c4,0 14px 26px rgba(31,120,224,.32)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1f68c4,0 18px 30px rgba(31,120,224,.36)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #1f68c4,0 6px 14px rgba(31,120,224,.3)}
.btn:disabled{opacity:.5;box-shadow:none;transform:none}
.icon-btn{background:#fff;border:3px solid #ffe6a0;box-shadow:0 4px 0 #f2b93e;color:#ff9f1c;transition:transform .12s ease,box-shadow .12s ease}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #f2b93e}

/* Rounder, friendlier cards and panels with a bit of bounce on hover. */
.panel,.squad-card,.team-card,.starter-card,.destiny-card,.help-grid article,.tactics,.dex-card{border-radius:24px;border-width:3px;border-color:#ffe6a0}
.starter-card,.destiny-card,.team-card{border-radius:22px;transition:transform .16s ease,border-color .16s ease}
.starter-card:hover,.destiny-card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:#ffb703}
.starter-card.selected,.destiny-card.selected{border-color:#ff9f1c!important;background:#fff6e2!important;box-shadow:0 0 0 4px rgba(255,183,3,.22),0 14px 28px rgba(255,159,28,.22)!important}
.starter-card.selected::after{background:#ff9f1c!important}
.type{background:#e9f7ff;color:#0f8fc9;border-radius:999px;font-weight:800}
.stats span{background:#fff6e2;border-radius:8px;padding:2px 5px}

/* Header, hero and journey board: brighter accents, rounder board nodes. */
.top{background:rgba(255,255,255,.92);border-bottom:3px solid #ffe6a0;box-shadow:0 6px 18px rgba(255,183,3,.12)}
.brand{color:#20395e}.brand span{color:#ff6f3c}.brand i{color:#ffb703;filter:drop-shadow(0 2px 3px rgba(255,183,3,.4))}
.meters span{background:#fff6e2;border-color:#ffe6a0;color:#7a8bab;border-radius:12px}
.journey-board:before{background:#ffe6a0}
.board-node{border-radius:22px;border-width:3px;border-color:#ffe6a0;background:#fffaf0}
.board-node i{background:#ffe9b8;color:#c77f00}
.board-node.done{border-color:#7fe6b4;background:#effff8}.board-node.done i{background:#33d788}
.board-node.current{border-color:#ff9f1c;background:#fff3da}
.board-node.current i{background:linear-gradient(145deg,#ffd166,#ff9f1c)}
.board-node.mini i{border:3px solid #b98bff}.board-node.boss i{border:3px solid #ff6f8f}
.board-node.champion{border-color:#ffd23e}.board-node.champion i{border:3px solid #ffd23e}
.adventure-stats span{border-radius:999px;border:2px solid #ffe6a0}
.home-sky{background:linear-gradient(90deg,rgba(30,60,110,.72) 0%,rgba(30,60,110,.4) 31%,rgba(30,60,110,0) 60%),url(assets/arena-premium-v2.jpg) center/cover no-repeat}
.home-sky .hero h1 em{color:#ffe27a;-webkit-text-stroke:2px #fff}
.home-actions .btn.primary{background:linear-gradient(135deg,#ffb14d,#ff6f61);border-color:#e8542f;box-shadow:0 5px 0 #d4451f,0 14px 26px rgba(232,84,47,.32)}

/* Destiny/dice screens and the win/loss result card -- friendlier accent
   colors and rounder edges to match. */
.die{background:linear-gradient(145deg,#fff9e8,#a8e4ff);box-shadow:0 20px 44px rgba(45,190,255,.28)}
.battle-result{border-radius:22px;border-width:3px}
.battle-result h2{font-weight:800}

/* Pre-battle math gate -- one of the most kid-facing screens in the game,
   so it gets the same rounder/chunkier/brighter treatment as everything
   else, not just the leftover dark-theme modal styling. */
.ag-mathgate-card{border-radius:26px;border-width:3px;border-color:#ffe6a0;background:#fffaf0}
.ag-mathgate-input,.ag-mathgate-submit{border-radius:14px;border-width:3px;font-family:'Baloo 2','Nunito',ui-sans-serif,system-ui,sans-serif;font-weight:800}
.ag-mathgate-submit:hover:not(:disabled){background:#fff3da}

/* Type/move/matchup pill fonts follow the same playful pairing. */
.move-chip,.type-pill,.lvl-badge,.matchup,.damage,.destiny-card .select-badge{font-family:'Baloo 2','Nunito',ui-sans-serif,system-ui,sans-serif}

/* ── Friend Battle screen ──────────────────────────────────────────── */
.friend-team-picker{max-width:420px;margin:14px auto 0;text-align:center}
.friend-team-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.friend-menu{max-width:360px;margin:22px auto 0;display:flex;flex-direction:column;gap:10px}
.friend-or{color:var(--dim);font-size:11px;letter-spacing:1px;margin:2px 0}
.friend-join{display:flex;gap:8px}
.friend-join input{flex:1;min-width:0;padding:10px 14px;border-radius:11px;border:1px solid var(--line);background:rgba(11,25,40,.9);color:inherit;font-weight:800;letter-spacing:2px;text-align:center}
.friend-room{max-width:360px;margin:22px auto 0;text-align:center}
.friend-code-label{color:var(--dim);font-size:10px;letter-spacing:2px;margin:0 0 4px}
.friend-code-display{font-size:38px;font-weight:950;letter-spacing:8px;margin:0 0 10px}
.friend-status{color:var(--dim);margin:0 0 14px;min-height:1.4em}

/* ── Hall of Fame leaderboard (home screen) ────────────────────────── */