/* Website navigation + boot gate (arena) */
:root{--site-nav-h:52px}
#site-nav{position:fixed;left:0;right:0;top:0;height:var(--site-nav-h);z-index:150000;
  display:flex;align-items:center;gap:18px;padding:0 16px 0 18px;
  background:#14141c;border-bottom:3px solid #43307A;color:#fff;
  font-family:'Baloo 2',system-ui,sans-serif}
#site-nav .sn-logo{font-family:'Lilita One','Baloo 2',sans-serif;font-size:22px;letter-spacing:.5px;color:#fff;text-decoration:none;white-space:nowrap}
#site-nav .sn-logo b{color:#FFD93B}
#site-nav .sn-tabs{display:flex;gap:4px;align-items:center}
#site-nav .sn-tabs a,#site-nav .sn-tabs span.soon{
  font:800 14px/1 'Baloo 2',sans-serif;text-transform:uppercase;padding:6px 12px;border-radius:10px;
  color:#b9b3d6;text-decoration:none;border:2px solid transparent;white-space:nowrap}
#site-nav .sn-tabs a.on{background:#FFD93B;color:#1A1A24;border-color:#1A1A24}
#site-nav .sn-tabs a:hover:not(.on){background:#43307A;color:#fff}
#site-nav .sn-tabs span.soon{color:#8e88b0;cursor:default}
#site-nav .sn-tabs span.soon small{font-size:10px;margin-left:4px;color:#FF7FA8}
#site-nav .sn-spacer{flex:1}
#site-nav .sn-back{font:800 13px 'Baloo 2',sans-serif;color:#FFD93B;text-decoration:none;padding:6px 10px;border:2px solid #FFD93B;border-radius:10px}
#site-nav .sn-back:hover{background:#FFD93B;color:#1A1A24}
#site-nav .sn-boost{font:800 12px/1 'Baloo 2',sans-serif;color:#1A1A24;text-decoration:none;padding:5px 10px;border:2px solid #FFD93B;border-radius:10px;background:#FFD93B;margin-right:8px;white-space:nowrap}
#site-nav .sn-boost:hover{background:#fff;color:#1A1A24}
#site-nav .sn-boost.on{background:#c8f5d4;border-color:#14532d}
#site-nav .sn-boost.warn{background:#ffe0e8;border-color:#8a2040}
@media (max-width:640px){#site-nav .sn-boost{padding:4px 7px;font-size:11px;margin-right:4px}}
#site-nav .sn-fs{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:5px 10px;border:2px solid #FFD93B;border-radius:10px;background:transparent;color:#FFD93B;font:800 13px 'Baloo 2',sans-serif;cursor:pointer;white-space:nowrap}
#site-nav .sn-fs img{width:18px;height:18px;display:block;filter:brightness(0) saturate(100%) invert(86%) sepia(42%) saturate(748%) hue-rotate(359deg) brightness(104%) contrast(104%)}
#site-nav .sn-fs:hover,#site-nav .sn-fs.on{background:#FFD93B;color:#1A1A24}
#site-nav .sn-fs:hover img,#site-nav .sn-fs.on img{filter:none}
@media (max-width:640px){#site-nav .sn-fs .sn-fs-lbl{display:none}#site-nav .sn-fs{padding:4px 8px}}

#boot-load{position:fixed;inset:0;z-index:200000;background:#1A1A24;display:grid;place-items:center;
  transition:opacity .45s ease,visibility .45s}
#boot-load.done{opacity:0;visibility:hidden;pointer-events:none}
#boot-load .boot-card{--fill:#FFF8E7;padding:22px 28px;width:min(340px,86vw);text-align:center}
#boot-load .boot-logo{font-family:'Lilita One','Baloo 2',sans-serif;font-size:28px;margin-bottom:8px}
#boot-load .boot-msg{font:800 15px 'Baloo 2',sans-serif;color:#4A3C34;margin-bottom:14px}
#boot-load .boot-bar{height:16px;border:3px solid #1A1A24;border-radius:10px;background:#1A1A24;overflow:hidden}
#boot-load .boot-bar>i{display:block;height:100%;width:0%;background:#FFD93B;border-radius:0 6px 6px 0;transition:width .2s steps(4)}
#boot-load .boot-pct{font:800 13px 'Baloo 2',sans-serif;margin-top:8px}

/* Arena (battle scene) – Sticker Book HUD, straight (no tilt). Design resolution 1280x720, letterboxed. */
html,body{background:#1d1626}
body{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);overflow:hidden}
h1,h2,.title{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;letter-spacing:.5px}
/* Sticker Book (copied from battle.css): 3px ink + 6px white margin + 3px ink, hard shadow bottom-right, no rotation */
.sticker{--fill:var(--white);background:var(--fill);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink)}
#root{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#2a2233}
#stage{position:absolute;left:0;top:0;width:1280px;height:720px;display:block}

/* HUD */
.hud{position:absolute;inset:0;pointer-events:none}
.hud>*{pointer-events:auto}
.slide{transition:transform .55s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.hud.off #lead,.hud.off #bench{transform:translateX(-340px)}
.hud.off #enemy{transform:translateX(420px)}
.hud.off #skillbar{transform:translate(-50%,200px)}
.hud.off #catch{transform:translateY(280px)}

#lead{--fill:var(--yellow);position:absolute;left:24px;top:24px;width:292px;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;z-index:4}
#lead .pic,.bm .pic{border-radius:10px;border:3px solid var(--ink);display:grid;place-items:center;overflow:hidden;flex:none}
#lead .pic{width:58px;height:58px}
#lead .pic img{width:52px;height:52px;object-fit:contain}
#lead .info{flex:1;min-width:0}
.row{display:flex;justify-content:space-between;align-items:baseline;line-height:1}
#lead .name{font-family:'Lilita One';font-size:19px}
#lead .lv{font-weight:800;font-size:14px}
.tag{display:inline-block;font:800 10px/14px 'Baloo 2';text-transform:uppercase;border:2px solid var(--ink);border-radius:6px;padding:0 5px;margin-top:3px}
.bar{height:14px;border:3px solid var(--ink);border-radius:8px;background:var(--ink);overflow:hidden;margin-top:4px;position:relative}
.bar>i{display:block;height:100%;width:100%;background:var(--grass);border-radius:0 4px 4px 0;transition:width .22s steps(5)}
.bar>i::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.45)}
.bar>b{position:absolute;top:0;bottom:0;background:#fff;opacity:.85;width:0;transition:width .7s ease-in .25s}
.bar.low>i{background:var(--fire)}
.hpnum{font-size:12px;font-weight:800;text-align:right;line-height:1.15;margin-top:1px}
.bar.exp{height:10px;margin-top:3px}
.bar.exp>i{background:var(--sky)}
.expnum{font-size:11px;font-weight:800;text-align:right;margin-top:1px;line-height:1.1;opacity:.9}
#lead .guard{position:absolute;right:-10px;top:-12px;font:800 11px 'Baloo 2';background:var(--sky);border:3px solid var(--ink);border-radius:8px;padding:0 6px;display:none}
#lead.guarding .guard{display:block}

#bench{position:absolute;left:24px;top:168px;display:flex;gap:12px;z-index:3}
.bm{--fill:var(--cream);width:56px;padding:3px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;border-radius:12px}
.bm .pic{width:42px;height:42px}
.bm .pic img{width:36px;height:36px;object-fit:contain}
.bm .bar{height:8px;border-width:2px;width:42px;margin-top:2px}
.bm .k{position:absolute;right:-10px;top:-10px;font:400 11px/16px 'Lilita One';background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 4px}
.bm.fainted{filter:grayscale(1) opacity(.7);cursor:not-allowed}
.bm:hover{--fill:#fff}

#enemy{--fill:var(--white);position:absolute;right:28px;top:24px;width:300px;padding:8px 12px 9px;display:flex;gap:10px;align-items:center;z-index:6}
#enemy .badge{width:44px;height:44px;border-radius:10px;border:3px solid var(--ink);display:grid;place-items:center;flex:none}
#enemy .badge svg{width:30px;height:30px}
#enemy .grow{flex:1}
#enemy .name{font-family:'Lilita One';font-size:23px;line-height:1}
#enemy .meta{font-size:13px;font-weight:800}
#enemy .bar{height:18px}
#enemy .bar>i{background:var(--fire)}
#enemy .bar .mark{position:absolute;left:25%;top:-3px;bottom:-3px;width:3px;background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink);z-index:2}
#enemy .catchhint{font-size:11px;font-weight:800;color:#6b5a4a}
#enemy .catchhint.ok{color:var(--leaf)}

/* ARENA-RUN-FIX: bottom skillbar = skills + Run (flex, centered). No topbar chips. */
#skillbar{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:18px;align-items:flex-end;z-index:6}
#skills{display:flex;gap:18px;align-items:flex-end}
#run{--fill:var(--white);position:relative;flex:none;width:82px;height:78px;padding:4px 0 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;user-select:none;
  font:inherit;color:var(--ink);appearance:none;-webkit-appearance:none}
#run img{width:42px;height:42px;display:block}
#run .lbl{font-family:'Lilita One';font-size:17px;line-height:1}
#run .hint{position:absolute;top:-12px;right:-12px;font:800 11px/18px 'Baloo 2';background:var(--white);border:3px solid var(--ink);border-radius:8px;padding:0 5px}
#run:hover{--fill:var(--pink)}
#run:active{transform:translate(2px,2px)}
.skill{--fill:var(--orange);width:86px;height:90px;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;user-select:none;transition:transform .06s}
.skill.pressed{transform:translate(3px,3px);box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),2px 2px 0 9px var(--ink)}
.skill .key{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:8px;background:var(--white);border:3px solid var(--ink);font-family:'Lilita One';font-size:16px;display:grid;place-items:center;z-index:3}
.skill svg{width:48px;height:48px;margin-bottom:3px}
.skill .label{font-weight:800;font-size:12px;line-height:1;color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:6px;padding:2px 5px;white-space:nowrap}
.skill .cd{position:absolute;inset:0;border-radius:13px;display:none;place-items:center;background:conic-gradient(rgba(26,26,36,.62) calc(var(--p,0)*1turn),transparent 0);z-index:2}
.skill.cooling{pointer-events:none;cursor:default}
.skill.cooling .cd{display:grid}
.skill .cd b{font-family:'Lilita One';font-weight:400;font-size:30px;color:var(--white);-webkit-text-stroke:2px var(--ink);paint-order:stroke}
.skill.ult::before{content:'';position:absolute;inset:-3px;border-radius:16px;box-shadow:inset 0 0 0 3px var(--yellow);pointer-events:none}
.skill.ult .label{background:var(--yellow)}
.hud.busy .skill,.hud.busy #catch{filter:saturate(.5) brightness(.92)}

#catch{--fill:var(--white);position:absolute;right:56px;bottom:42px;width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;z-index:6}
#catch .lbl{font-family:'Lilita One';font-size:20px;margin-top:-6px}
#catch.locked{--fill:#d9d6df}
#catch.locked svg{filter:grayscale(.9) opacity(.6)}
#catch.ready{--fill:var(--yellow);animation:bob .6s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
#catch .hint{position:absolute;top:-4px;right:-4px;width:30px;height:30px;display:grid;place-items:center;font-family:'Lilita One';font-size:16px;border:3px solid var(--ink);background:var(--white);border-radius:8px}

/* banners */
#banner{--fill:var(--white);position:absolute;left:50%;top:574px;padding:10px 26px 12px;display:flex;gap:14px;align-items:center;white-space:nowrap;transform:translate(120%,0);opacity:0;transition:transform .5s cubic-bezier(.2,1.3,.4,1),opacity .25s}
#banner.show{transform:translate(-50%,0);opacity:1}
#banner.out{transform:translate(-260%,0);opacity:0}
#banner .big{font-family:'Lilita One';font-size:34px;line-height:1}
#banner .sub{font-weight:800;font-size:14px;color:#6b5a4a}
#banner .badge{width:46px;height:46px;border-radius:10px;border:3px solid var(--ink);display:grid;place-items:center}
#banner .badge svg{width:30px;height:30px}
#callout{position:absolute;left:50%;top:300px;transform:translate(-50%,-50%) scale(.2);font-family:'Lilita One';font-size:92px;color:var(--yellow);-webkit-text-stroke:7px var(--ink);paint-order:stroke;text-shadow:7px 7px 0 var(--ink);opacity:0;pointer-events:none;white-space:nowrap;letter-spacing:2px}
#callout.show{animation:callout 1s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes callout{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
#skillname{--fill:var(--ink);position:absolute;left:50%;top:96px;transform:translate(-50%,-30px);opacity:0;color:#fff;font-family:'Lilita One';font-size:24px;padding:2px 22px;white-space:nowrap;transition:transform .25s cubic-bezier(.2,1.5,.4,1),opacity .2s;pointer-events:none}
#skillname.show{transform:translate(-50%,0);opacity:1}
#skillname small{font:800 13px 'Baloo 2';color:var(--yellow);margin-left:8px}
#skillname.ult{--fill:transparent;top:118px;font-size:40px;letter-spacing:2px;padding:10px 42px;background:linear-gradient(90deg,transparent,#1A1A24 12%,#1A1A24 88%,transparent);border:none;box-shadow:none;color:#FFD93B;-webkit-text-stroke:4px #1A1A24;paint-order:stroke;text-shadow:4px 4px 0 #1A1A24}
#skillname.ult .slash{display:inline-block;transform:skewX(-8deg)}
#toast{--fill:var(--cream);position:absolute;left:50%;top:150px;transform:translateX(-50%);padding:6px 18px;font-weight:800;font-size:16px;display:none;white-space:nowrap}
#toast.show{display:block}

/* result — ARENA-UI-FIX: keep GOT AWAY / VICTORY title fully visible (stroke + sticker ring not clipped)
   ARENA-POLISH: glass blur backdrop, edge glow, scale+fade entrance, skin variants */
#result{position:absolute;inset:0;display:none;place-items:center;align-content:center;
  background:rgba(18,12,28,.52);padding:40px 22px 36px;box-sizing:border-box;z-index:35;overflow:visible;
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
#result.show{display:grid}
#result .panel{--fill:rgba(255,248,231,.9);width:520px;max-width:100%;max-height:100%;
  padding:32px 28px 24px;text-align:center;overflow:visible;box-sizing:border-box;
  background:linear-gradient(165deg,rgba(255,252,244,.96) 0%,rgba(255,240,214,.88) 55%,rgba(255,232,200,.9) 100%);
  box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink),
    0 0 28px 2px rgba(255,217,59,.35),0 18px 40px rgba(20,10,30,.35);
  animation:resultIn .55s cubic-bezier(.2,1.45,.35,1) both}
@keyframes resultIn{
  0%{transform:scale(.72);opacity:0;filter:blur(2px)}
  55%{transform:scale(1.045);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:1;filter:none}
}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#result h2{font-size:48px;letter-spacing:1.2px;line-height:1.2;color:var(--yellow);
  -webkit-text-stroke:5px var(--ink);paint-order:stroke;
  text-shadow:5px 5px 0 var(--ink),0 0 18px rgba(255,217,59,.45);
  margin:8px 0 10px;padding:8px 12px 4px;overflow:visible}
#result .sub{font-weight:800;font-size:16px;letter-spacing:.2px;color:#4A3C34;margin-bottom:2px}
#result .card{display:flex;gap:16px;align-items:center;justify-content:center;margin:14px 0;
  padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.45);border:2px solid rgba(26,26,36,.12)}
#result .card .pic{width:120px;height:120px;border:3px solid var(--ink);border-radius:14px;display:grid;place-items:center;
  box-shadow:3px 3px 0 var(--ink),0 0 16px rgba(255,255,255,.35)}
#result .card .pic img{width:108px;height:108px;object-fit:contain}
#result .card .txt{text-align:left;font-weight:800;font-size:14px;line-height:1.55}
#result .card .txt b{font-family:'Lilita One';font-weight:400;font-size:22px;letter-spacing:.4px}
#result .rew{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 18px}
#result .rew span{--fill:#fff;font-weight:800;font-size:14px;padding:0 12px;line-height:28px}
#result .btns{display:flex;gap:22px;justify-content:center}
#result button,#result a.btn{--fill:var(--yellow);font:800 17px 'Baloo 2';padding:6px 20px;cursor:pointer;color:var(--ink);text-decoration:none;
  transition:transform .08s,filter .12s}
#result button:hover,#result a.btn:hover{filter:brightness(1.05)}
#result button:active,#result a.btn:active{transform:translate(2px,2px)}
#result .alt{--fill:#fff !important}
/* skin accents (title + edge glow) */
#result.skin-win h2,#result.skin-caught h2{color:var(--yellow);text-shadow:5px 5px 0 var(--ink),0 0 22px rgba(255,217,59,.55)}
#result.skin-win .panel,#result.skin-caught .panel{box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink),
  0 0 36px 4px rgba(255,217,59,.42),0 18px 40px rgba(20,10,30,.35)}
#result.skin-fled h2{color:#7EC8FF;text-shadow:5px 5px 0 var(--ink),0 0 18px rgba(126,200,255,.4)}
#result.skin-fled .panel{box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink),
  0 0 28px 2px rgba(126,200,255,.32),0 18px 40px rgba(20,10,30,.35)}
#result.skin-lose h2{color:#FF9AA8;text-shadow:5px 5px 0 var(--ink),0 0 18px rgba(255,154,168,.4)}
#result.skin-lose .panel{box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink),
  0 0 28px 2px rgba(255,154,168,.3),0 18px 40px rgba(20,10,30,.35)}
/* CINEMA-MOVE-FX: OS reduce-motion — HUD anim off; FX engine also shortens via FX.reduceMotion */
@media (prefers-reduced-motion:reduce){
  #result .panel{animation:none;opacity:1;transform:none;filter:none}
  #callout.show{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}
  #skillname.show,#toast.show,#banner.show{animation:none!important}
}

#trans{position:absolute;inset:0;width:1280px;height:720px;pointer-events:none;z-index:50}
/* ?sfxtest=1 audition panel (Sticker Book style, nothing rotated) */
#sfxtest{position:fixed;left:12px;top:120px;z-index:200;width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 140px);overflow:auto;padding:12px 14px;font:700 13px/1.3 'Baloo 2',sans-serif;color:#1A1A24;background:#FFFDF6;transform:none}
#sfxtest .hd span{font-weight:600;opacity:.7;margin-left:6px}
#sfxtest .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
#sfxtest .row b{width:70px;flex:none}
#sfxtest .vol{display:flex;gap:16px;align-items:center;margin-top:8px}
#sfxtest button{font:800 12px 'Baloo 2',sans-serif;padding:4px 10px;border:2.5px solid #1A1A24;border-radius:10px;background:#fff;box-shadow:0 3px 0 #1A1A24;cursor:pointer}
#sfxtest button:active{transform:translateY(2px);box-shadow:0 1px 0 #1A1A24}
#sfxtest .t-fire{background:#FFD9C8}#sfxtest .t-water{background:#CDEBFA}#sfxtest .t-grass{background:#DDF0C8}#sfxtest .t-electric{background:#FFF1A8}#sfxtest .t-rock{background:#EAD9BE}#sfxtest .t-shadow{background:#DCCCF2}
#sfxtest .row{justify-content:flex-start}

#items{position:absolute;left:24px;bottom:28px;display:flex;gap:10px;align-items:center}
.hud.off #items{transform:translateY(200px);opacity:0}
.itemchip{--fill:#FFE0EA;min-width:72px;padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;user-select:none}
.itemchip .ic{font-size:22px;line-height:1}
.itemchip .nm{font:800 11px 'Baloo 2';color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 5px}
.itemchip .qty{font:800 12px 'Baloo 2'}
.itemchip.disabled{opacity:.4;filter:grayscale(.5);cursor:not-allowed}
.itemchip.pressed{transform:translate(2px,2px)}

#swapPick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;min-width:320px;max-width:520px;padding:16px 18px;display:none}
#swapPick.show{display:block}
#swapPick .swap-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center}
#swapPick .swap-card{min-width:110px;padding:8px;cursor:pointer;text-align:center}
#swapPick .swap-card.fainted{opacity:.35;pointer-events:none}

#learnPick{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:45;min-width:360px;max-width:560px;padding:16px 18px;display:none}
#learnPick.show{display:block}
#learnPick .learn-moves{display:flex;flex-direction:column;gap:6px;margin:10px 0}
#learnPick .learn-slot{display:flex;justify-content:space-between;align-items:center;gap:8px}
#learnPick .btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}

.status-pill{display:inline-block;margin-left:0;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:800;color:#1A1A24;border:2px solid #1A1A24;letter-spacing:.04em}
/* ARENA-UI-FIX: status badges live under HP rows — clear of floating dmg / effectiveness text */
.status-row{min-height:0;margin-top:3px;display:flex;justify-content:flex-start;align-items:center;gap:4px;line-height:1}
.status-row:empty{display:none}
#enemy .status-row{justify-content:flex-end}

#ballPick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:42;min-width:340px;max-width:540px;padding:16px 18px;display:none}
#ballPick.show{display:block}
#ballPick .ball-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center}
#ballPick .ball-card{min-width:120px;padding:10px 8px;cursor:pointer;text-align:center}
#ballPick .ball-card .ic{font-size:28px;line-height:1.2}
#ballPick .ball-card .rate{font:700 11px 'Baloo 2';opacity:.75;margin-top:2px}
#ballPick .ball-card.master{outline:3px solid #C77DFF}
#ballPick .ball-cancel{margin-top:12px;display:flex;justify-content:center}


/* ===== ARENA-DESKTOP-HUD: keep top chrome clear of lead/enemy ===== */
#enemy .name{font-size:20px}
#items{left:24px;bottom:28px;z-index:5}
@media (max-width:900px){
  #enemy{width:260px;right:20px}
  #catch{right:36px;bottom:28px;width:104px;height:104px}
  #bench{top:150px}
}
@media (max-width:640px){
  #lead{width:min(240px,46vw);left:12px;top:12px}
  #bench{left:12px;top:130px;gap:8px}
  #enemy{width:min(220px,46vw);right:12px;top:12px;padding:6px 8px}
  #enemy .name{font-size:16px}
  #skillbar{bottom:18px;gap:10px}
  #skills{gap:10px}
  .skill{width:68px;height:74px}
  .skill svg{width:36px;height:36px}
  .skill .label{font-size:10px}
  #run{width:70px;height:70px}
  #run img{width:34px;height:34px}
  #run .lbl{font-size:14px}
  #catch{right:16px;bottom:16px;width:88px;height:88px}
  #catch .lbl{font-size:15px}
  #items{left:10px;bottom:16px;gap:6px}
  .itemchip{min-width:56px;padding:4px 6px}
}

/* ===== ARENA-RUN-FIX: Run lives in #skillbar flex row (no magic left:872px; topbar removed from DOM) =====
   FX / SFX / Music stay in the field Menu; F / M hotkeys + Esc flee unchanged. */
/* phones: keep the 1280x720 stage from inflating the layout viewport (HUD was pushed off-screen) */
@media (hover:none) and (pointer:coarse){
  html,body{width:100%;height:100%;overflow:hidden}
  body{position:fixed;inset:0}
}

/* TAP-FIX: no blue tap flash / selection / callout on mobile taps (text fields keep normal behaviour) */
html,body,*,*::before,*::after{-webkit-tap-highlight-color:transparent!important;tap-highlight-color:transparent}
canvas,img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
canvas,canvas:focus,canvas:focus-visible{outline:none!important}
button,a,[role="button"]{-webkit-touch-callout:none}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default}
#root,#hud,#viewport,#world,#site-nav,.hud,.sticker{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#boot-load .boot-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
#boot-load .boot-actions button{font:800 15px 'Baloo 2',sans-serif;padding:8px 16px;border:3px solid #1A1A24;border-radius:12px;background:#FFD93B;color:#1A1A24;cursor:pointer;box-shadow:0 3px 0 #1A1A24}
#boot-load .boot-actions button#boot-back{background:#fff}


/* TYPEFEEL1 — type matchup hints on skill buttons + strip (arena HUD only) */
.skill .eff{position:absolute;right:-10px;top:-10px;min-width:28px;height:22px;padding:0 5px;border-radius:8px;border:3px solid var(--ink);font:800 10px/16px 'Baloo 2',sans-serif;display:grid;place-items:center;z-index:4;background:var(--white);color:var(--ink);letter-spacing:.02em}
.skill .eff.se{background:#FFE566;color:#1a1a24}
.skill .eff.nve{background:#c8c0d0;color:#4a4458}
.skill .eff.neu{background:var(--white);color:#6b5a4a}
.skill.match-se{box-shadow:0 0 0 3px rgba(255,213,99,.55)}
.skill.match-nve{opacity:.92;filter:saturate(.85)}
.matchup-strip{position:absolute;left:50%;bottom:148px;transform:translateX(-50%);display:flex;gap:8px;z-index:5;pointer-events:none;white-space:nowrap}
.matchup-strip .mu{font:800 12px/1 'Baloo 2',sans-serif;padding:5px 10px;border-radius:10px;border:3px solid var(--ink);background:var(--white);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.matchup-strip .mu.se{background:#FFE566}
.matchup-strip .mu.nve{background:#d5d0dc;color:#4a4458}
.matchup-strip .mu.neu{background:var(--white)}
@media (max-width:900px){
  .matchup-strip{bottom:128px;gap:6px}
  .matchup-strip .mu{font-size:11px;padding:4px 8px}
  .skill .eff{min-width:24px;height:20px;font-size:9px;right:-8px;top:-8px}
}


/* bossphase1 — gym leader dual-phase HP */
#enemy.boss-phase2{box-shadow:0 0 0 3px #FFE66D, 4px 4px 0 #1A1A24}
#enemy .bar.boss-phase{position:relative;overflow:visible}
#enemy .bar.boss-phase .mark{left:50%;background:#FFE66D;width:4px;box-shadow:0 0 0 1.5px #1A1A24,0 0 10px #FFE66D}
#enemy .bar.boss-phase .phase-pip{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font:800 9px/1 'Baloo 2',sans-serif;background:#FFE66D;color:#1A1A24;border:2px solid #1A1A24;border-radius:6px;padding:1px 5px}
#enemy .bar.boss-phase .phase-pip::after{content:'P2'}
#enemy .bar.boss-phase.phase2>i{background:linear-gradient(90deg,#FF5A2A,#FFE66D,#FF5A2A);background-size:200% 100%;animation:bossPhasePulse 1.1s linear infinite}
#enemy .bar.boss-phase.phase2{box-shadow:inset 0 0 0 2px #FFE66D}
@keyframes bossPhasePulse{0%{background-position:0% 50%}100%{background-position:200% 50%}}