* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; overflow-x: hidden; }

/* ── SELECTION ── */
#selection-screen { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; min-height: 100vh; position: relative; z-index: 0; }
/* Living background (auto-hides with the screen) */
#select-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sb-aurora { position: absolute; inset: 0; filter: blur(70px); opacity: .45; }
.sb-aurora::before, .sb-aurora::after { content: ''; position: absolute; width: 46vw; height: 46vw; border-radius: 50%; }
.sb-aurora::before { background: radial-gradient(circle, rgba(255,180,60,.55), transparent 70%); top: -8%; left: -6%; animation: sbDriftA 20s ease-in-out infinite; }
.sb-aurora::after  { background: radial-gradient(circle, rgba(70,120,220,.5), transparent 70%); bottom: -10%; right: -8%; animation: sbDriftB 26s ease-in-out infinite; }
@keyframes sbDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw,10vh) scale(1.18); } }
@keyframes sbDriftB { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12vw,-8vh) scale(.9); } }
.sb-ember { position: absolute; bottom: -24px; border-radius: 50%; background: #ffcf6b; box-shadow: 0 0 8px 2px rgba(255,180,80,.55); opacity: 0; animation: sbEmber linear infinite; }
@keyframes sbEmber { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .85; } 88% { opacity: .6; } 100% { transform: translateY(-104vh) translateX(var(--sway,20px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-aurora::before, .sb-aurora::after, .sb-ember { animation: none; } .sb-ember { opacity: .4; } }
h1 { font-family: 'Bangers', cursive; font-size: 3rem; color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,.5); margin-bottom: 40px; letter-spacing: 4px; }
.type-badges { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.type-badge { padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: bold; text-transform: capitalize; color: #fff; }
.stats-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; text-align: left; }
.stat-name { color: #aaa; font-size: 0.72rem; text-transform: uppercase; align-self: center; }
.stat-bar { background: #0f3460; border-radius: 4px; height: 7px; overflow: hidden; align-self: center; }
.stat-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.stat-value { color: #FFD700; font-weight: bold; font-size: 0.85rem; text-align: right; }
#battle-btn { margin-top: 36px; padding: 16px 52px; font-size: 1.2rem; font-weight: bold; background: linear-gradient(135deg,#FFD700,#FF6B35); color: #000; border: none; border-radius: 50px; cursor: pointer; display: none; transition: transform .2s, box-shadow .2s; }
#battle-btn:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(255,215,0,.4); }
#battle-btn.visible { display: block; }
#hints-toggle { margin-top: 18px; display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.85rem; cursor: pointer; user-select: none; }
#hints-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: #FF6B35; }

/* ── BATTLE ── */
#battle-screen { display: none; flex-direction: column; height: 100vh; padding: 12px; max-width: 1000px; margin: 0 auto; gap: 10px; }
#battle-screen.active { display: flex; position: relative; z-index: 1; }
#battle-field { flex: 1; min-height: 0; position: relative; }
#battle-bottom { display: flex; gap: 10px; align-items: flex-end;
  position: absolute; bottom: 12px; left: 12px; right: 12px; }
.battle-pokemon { position: relative; overflow: visible; flex-shrink: 0; width: 260px; }
/* Sprite floats upward out of the info strip into the arena */
.battle-sprite { position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  width: auto; object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.7));
  transition: transform .3s, height .4s ease; }
.battle-sprite:hover { transform: translateX(-50%) scale(1.04); }
#player-sprite { transform: translateX(-50%) scaleX(-1); }
#player-sprite:hover { transform: translateX(-50%) scaleX(-1) scale(1.04); }
#player-sprite.no-mirror { transform: translateX(-50%); }
#player-sprite.no-mirror:hover { transform: translateX(-50%) scale(1.04); }
#player-sprite.v-flip { transform: translateX(-50%) scaleX(-1) scaleY(-1); }
#player-sprite.v-flip:hover { transform: translateX(-50%) scaleX(-1) scaleY(-1) scale(1.04); }
#player-sprite.no-mirror.v-flip { transform: translateX(-50%) scaleY(-1); }
#player-sprite.no-mirror.v-flip:hover { transform: translateX(-50%) scaleY(-1) scale(1.04); }
.battle-info { background: rgba(8,12,32,.55); border-radius: 12px;
  padding: 8px 12px; backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.13);
  border-top: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  width: 100%; }
.battle-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.battle-types { display: flex; gap: 5px; justify-content: center; margin-bottom: 8px; }
.battle-type-badge { padding: 1px 9px; border-radius: 20px; font-size: 0.62rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.battle-poke-name { font-size: 1.05rem; font-weight: bold; text-transform: capitalize; }
.form-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.75); vertical-align: middle; margin-left: 4px; text-transform: uppercase; }
.level-txt { color: #aaa; font-size: 0.78rem; }
.status-chip { padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: bold; display: none; }
.hp-row { display: flex; align-items: center; gap: 8px; }
.hp-lbl { font-size: 0.75rem; color: #aaa; min-width: 20px; }
.hp-bar { flex: 1; height: 12px; background: rgba(0,0,0,.45); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.hp-fill { height: 100%; border-radius: 6px; transition: width .6s ease, background .5s ease; }
.hp-fill.hi { background: linear-gradient(90deg, #2ecc71, #57e89c);
  box-shadow: 0 0 8px rgba(46,204,113,.6); }
.hp-fill.md { background: linear-gradient(90deg, #f39c12, #f1c40f);
  box-shadow: 0 0 8px rgba(243,156,18,.6); }
.hp-fill.lo { background: linear-gradient(90deg, #c0392b, #e74c3c);
  box-shadow: 0 0 8px rgba(231,76,60,.7); }
.hp-fill.critical { animation: hpPulse .65s ease-in-out infinite; }
@keyframes hpPulse {
  0%,100% { filter: brightness(1); box-shadow: 0 0 8px rgba(231,76,60,.7); }
  50%     { filter: brightness(1.4); box-shadow: 0 0 18px rgba(231,76,60,1); }
}
.hp-nums { font-size: 0.75rem; color: #aaa; min-width: 65px; text-align: right; }
#battle-log { background: transparent; border-radius: 10px; padding: 10px 14px; flex: 1; min-width: 0; overflow-y: auto; font-size: 1.1rem; line-height: 1.7; text-align: center; }
.log-line { animation: fadeUp .25s ease; text-align: center; }
@keyframes fadeUp { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
#move-panel { background: rgba(10,16,40,.6); border-radius: 16px; padding: 16px; flex-shrink: 0;
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
#move-panel h3 { margin-bottom: 10px; color: #aaa; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
#tts-toggle { background: none; border: 1px solid #aaa; border-radius: 6px; cursor: pointer; font-size: 0.9rem; padding: 1px 6px; line-height: 1; color: #aaa; transition: border-color .2s; }
#tts-toggle:hover { border-color: #FFD700; }
.special-btns { display: flex; gap: 8px; margin-top: 8px; }
#zmove-btn, #mega-btn { flex: 1; padding: 9px; font-size: 0.9rem; font-weight: bold; color: #fff; border: none; border-radius: 8px; cursor: pointer; letter-spacing: 1px; transition: opacity .2s, transform .1s; }
#zmove-btn { background: linear-gradient(135deg, #9b59b6, #3498db); }
#mega-btn  { background: linear-gradient(135deg, #e74c3c, #f39c12); }
#zmove-btn:hover:not(:disabled), #mega-btn:hover:not(:disabled) { opacity: .9; transform: scale(1.01); }
#zmove-btn:disabled, #mega-btn:disabled { opacity: .35; cursor: not-allowed; background: #444; }
@keyframes zFlash { 0%,100%{filter:brightness(1);} 50%{filter:brightness(3);} }
.z-flash { animation: zFlash .4s ease 3; }
@keyframes megaEvolve {
  0%   { filter: brightness(1) saturate(1); }
  20%  { filter: brightness(4) saturate(0); }
  50%  { filter: brightness(6) saturate(0) hue-rotate(180deg); }
  80%  { filter: brightness(3) saturate(2) hue-rotate(360deg); }
  100% { filter: brightness(1) saturate(1); }
}
.mega-evolving { animation: megaEvolve 1.2s ease forwards; }
/* X/Y picker modal */
#mega-picker { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:500; align-items:center; justify-content:center; }
#mega-picker.active { display:flex; }
.mega-picker-box { background:#16213e; border:2px solid #e74c3c; border-radius:16px; padding:28px; text-align:center; }
.mega-picker-box h3 { margin-bottom:18px; font-size:1.1rem; color:#FFD700; }
.mega-picker-box .pick-row { display:flex; gap:14px; justify-content:center; }
.mega-form-btn { padding:12px 28px; border:none; border-radius:10px; font-size:1rem; font-weight:bold; cursor:pointer; color:#fff; transition:transform .1s; }
.mega-form-btn:hover { transform:scale(1.05); }
.mega-form-btn.x { background:linear-gradient(135deg,#2980b9,#1abc9c); }
.mega-form-btn.y { background:linear-gradient(135deg,#e74c3c,#9b59b6); }
#moves-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; max-height: 180px; overflow-y: auto; }
.move-btn { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.82rem; font-weight: bold; text-transform: capitalize; color: #fff; transition: transform .15s, box-shadow .15s, filter .15s; display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.35); }
.move-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); filter: brightness(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.4), 0 0 14px rgba(255,255,255,.12); }
.move-btn:active:not(:disabled) { transform: translateY(0px) scale(0.99); }
.move-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.move-btn.eff-se  { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 12px rgba(76,175,80,.55), 0 2px 4px rgba(0,0,0,.35); }
.move-btn.eff-imm { opacity: .5; }
.move-cat { font-size: 0.7rem; opacity: .8; white-space: nowrap; }
.move-eff { font-size: 0.68rem; font-weight: bold; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.move-eff.se  { background: rgba(76,175,80,.3);  color: #a5d6a7; }
.move-eff.nve { background: rgba(255,152,0,.25); color: #ffcc80; }
.move-eff.imm { background: rgba(150,150,150,.2); color: #bdbdbd; }
.dmg-num { position: absolute; font-size: 1.4rem; font-weight: bold; pointer-events: none; animation: floatUp 1.4s ease forwards; z-index: 10; text-shadow: 1px 1px 3px #000; }
.stat-arrow { position: absolute; font-size: 1.1rem; font-weight: bold; pointer-events: none; animation: floatUp 1.6s ease forwards; z-index: 10; text-shadow: 1px 1px 3px #000; }
@keyframes floatUp { 0%{transform:translateY(0);opacity:1;} 100%{transform:translateY(-55px);opacity:0;} }
@keyframes shake { 0%,100%{left:50%;} 25%{left:calc(50% - 8px);} 75%{left:calc(50% + 8px);} }
.shake { animation: shake .3s ease; }
.loading-txt { color:#aaa; text-align:center; padding:20px; grid-column: span 2; }
.anim-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
#anim-travel { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; display:none; }

/* ── VICTORY ── */
#victory-screen { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); flex-direction:column; align-items:center; justify-content:center; z-index:1000; }
#victory-screen.active { display:flex; }
.victory-box { text-align:center; animation: popIn .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from{transform:scale(0) rotate(-8deg);opacity:0;} to{transform:scale(1) rotate(0);opacity:1;} }
.victory-title { font-size:3rem; color:#FFD700; text-shadow:0 0 30px rgba(255,215,0,.8); margin-bottom:12px; }
.victory-sprite { width:220px; height:220px; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(255,215,0,.4)); animation:bounce 1s ease infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} }
.victory-poke-name { font-size:2rem; font-weight:bold; text-transform:capitalize; margin:12px 0 4px; }
.victory-sub { color:#aaa; font-size:1.1rem; }
#play-again-btn { margin-top:24px; padding:14px 44px; font-size:1.1rem; font-weight:bold; background:linear-gradient(135deg,#FFD700,#FF6B35); color:#000; border:none; border-radius:50px; cursor:pointer; transition:transform .2s; }
#play-again-btn:hover { transform:scale(1.05); }
.confetti-piece { position:fixed; width:9px; height:9px; animation:confFall linear forwards; pointer-events:none; }
@keyframes confFall { 0%{transform:translateY(-80px) rotate(0deg);opacity:1;} 100%{transform:translateY(110vh) rotate(720deg);opacity:0;} }
::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:#0f3460;border-radius:3px;} ::-webkit-scrollbar-thumb{background:#FFD700;border-radius:3px;}

/* ── TEAM BUILDER (selection) ── */
.team-builder { width:100%; max-width:760px; background: linear-gradient(180deg, rgba(20,32,70,.9) 0%, rgba(10,18,45,.9) 100%); border-radius:18px; padding:28px; border:1px solid rgba(255,255,255,.08); box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07); }
.team-builder-title { font-size:0.78rem; font-weight:600; color:rgba(180,200,255,.5); text-transform:uppercase; letter-spacing:3px; margin-bottom:20px; text-align:center; }
.hero-card { width:100%; margin-bottom:18px; border-radius:14px; padding:16px 20px; background:rgba(15,42,90,.4); border:1px solid rgba(100,140,220,.25); display:flex; align-items:center; gap:24px; min-height:210px; flex-wrap:wrap; justify-content:center; transition:border-color .25s, box-shadow .25s; }
.hero-card.filled { border-color:#FFD700; box-shadow:0 0 20px rgba(255,215,0,.18); }
.hero-empty { width:100%; text-align:center; color:rgba(180,200,255,.45); font-size:0.9rem; }
.hero-sprite { width:210px; height:210px; object-fit:contain; flex:none; }
.hero-info { flex:1; min-width:200px; max-width:300px; }
.hero-name { font-family:'Bangers',cursive; letter-spacing:1px; font-size:1.5rem; text-transform:capitalize; margin-bottom:6px; }
.hero-info .type-badges { justify-content:flex-start; margin-bottom:10px; }
.hero-info .type-badge { font-size:0.64rem; padding:2px 9px; }
.hero-info .stats-grid { gap:3px 8px; }
.hero-info .stat-name { font-size:0.6rem; }
.hero-info .stat-bar { height:5px; }
.hero-info .stat-value { font-size:0.7rem; }
.hero-bst { margin-top:8px; font-size:0.65rem; color:#9fb0cc; text-transform:uppercase; letter-spacing:1px; }
.hero-bst b { color:#FFD700; font-size:0.9rem; }
.team-slot-preview { cursor:pointer; }
.team-slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.team-slot { background: linear-gradient(160deg, #0f2a5a 0%, #0a1e3d 100%); border-radius:12px; padding:12px; border:1.5px solid rgba(100,140,220,.3); position:relative; min-height:100px; display:flex; flex-direction:column; align-items:center; gap:5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.team-slot:hover { transform: translateY(-3px); border-color: rgba(100,160,255,.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 16px rgba(80,130,255,.2), inset 0 1px 0 rgba(255,255,255,.08); }
.team-slot:hover, .team-slot:focus-within { z-index: 30; } /* lift slot+dropdown above later rows */
.team-slot.filled { border-color: #FFD700; box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 18px rgba(255,215,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.team-slot.filled:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 24px rgba(255,215,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.ts-inp-wrap { position:relative; width:100%; }
.team-slot-input { width:100%; padding:10px 12px; border-radius:6px; border:1px solid #1a4a8a; background:#16213e; color:#fff; font-size:1rem; outline:none; }
.team-slot-input:focus { border-color:#FFD700; }
.team-slot-ac { position:absolute; top:100%; left:0; right:0; background:#0f3460; border-radius:0 0 8px 8px; max-height:140px; overflow-y:auto; z-index:200; display:none; border:1px solid #1a4a8a; border-top:none; }
.team-slot-ac.open { display:block; }
.team-slot-ac-item { padding:7px 12px; cursor:pointer; font-size:0.8rem; text-transform:capitalize; }
.team-slot-ac-item:hover { background:#1a4a8a; }
.team-slot-random { background:none; border:1px dashed #1a4a8a; border-radius:5px; color:#888; font-size:0.85rem; cursor:pointer; padding:6px 8px; width:100%; transition:border-color .15s,color .15s; }
.team-slot-random:hover { border-color:#FFD700; color:#FFD700; }
.team-slot-preview { display:none; flex-direction:column; align-items:center; gap:2px; width:100%; }
.team-slot-preview.visible { display:flex; }
.team-slot-sprite { width:56px; height:56px; image-rendering:pixelated; }
.team-slot-name { font-size:0.75rem; text-transform:capitalize; color:#eee; }
.team-slot-clear { position:absolute; top:4px; right:6px; background:none; border:none; color:#666; cursor:pointer; font-size:0.82rem; padding:1px; line-height:1; }
.team-slot-clear:hover { color:#F44336; }
.team-builder-hint { color:#555; font-size:0.78rem; text-align:center; margin-top:12px; }

/* ── TEAM DOTS (battle) ── */
.team-dots { display:flex; gap:5px; justify-content:center; margin-top:5px; }
.team-dot { width:10px; height:10px; border-radius:50%; background:#4CAF50; transition:background .3s; }
.team-dot.active { animation:dotPulse .9s ease-in-out infinite; }
.team-dot.fainted { background:#1a1a2e; border:1px solid #333; }
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── SWITCH MODAL ── */
#switch-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:600; align-items:center; justify-content:center; }
#switch-modal.active { display:flex; }
.switch-box { background:#16213e; border:2px solid #0f3460; border-radius:16px; padding:24px; max-width:420px; width:92%; }
.switch-box h3 { color:#FFD700; margin-bottom:16px; text-align:center; font-size:1rem; }
.switch-team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.switch-member-btn { padding:10px 8px; border-radius:8px; border:2px solid #1a4a8a; background:#0f3460; color:#fff; cursor:pointer; text-align:center; font-size:0.78rem; text-transform:capitalize; transition:border-color .15s; }
.switch-member-btn:hover { border-color:#FFD700; }
.switch-member-btn img { width:52px; height:52px; image-rendering:pixelated; display:block; margin:0 auto 4px; }
#switch-cancel-btn { display:block; width:100%; margin-top:12px; padding:9px; background:transparent; border:1px solid #444; border-radius:8px; color:#aaa; cursor:pointer; font-size:0.88rem; }
#switch-cancel-btn:hover { border-color:#aaa; color:#eee; }

/* ── SWITCH BUTTON ── */
#switch-btn { flex:1; padding:9px; font-size:.88rem; font-weight:bold; color:#fff; border:none; border-radius:8px; cursor:pointer; letter-spacing:.5px; transition:opacity .2s,transform .1s; background:linear-gradient(135deg,#1a6b3a,#2e7d32); }
#switch-btn:hover:not(:disabled) { opacity:.9; transform:scale(1.01); }
#switch-btn:disabled { opacity:.35; cursor:not-allowed; background:#444; }

/* ── DYNAMAX / GIGANTAMAX ── */
#dynamax-btn { flex:1; padding:9px; font-size:.9rem; font-weight:bold; color:#fff; border:none; border-radius:8px; cursor:pointer; letter-spacing:1px; transition:opacity .2s,transform .1s; background:linear-gradient(135deg,#7b241c,#6c3483); }
#dynamax-btn.is-gmax { background:linear-gradient(135deg,#d35400,#922b21,#6c3483); }
#dynamax-btn:hover:not(:disabled) { opacity:.9; transform:scale(1.01); }
#dynamax-btn:disabled { opacity:.35; cursor:not-allowed; background:#444; }
/* Grow from the feet so the enlarged sprite rises into the arena instead of down behind the info panel */
#bp-player.dynamaxed #player-sprite { transform-origin: bottom center; }
#bp-player.dynamaxed #player-sprite { transform:translateX(-50%) scaleX(-1) scale(1.6) !important; animation:dynamaxPulse 1.8s ease infinite; }
#bp-player.dynamaxed #player-sprite:hover { transform:translateX(-50%) scaleX(-1) scale(1.65) !important; }
#bp-player.dynamaxed #player-sprite.no-mirror { transform:translateX(-50%) scale(1.6) !important; animation:dynamaxPulse 1.8s ease infinite; }
#bp-player.dynamaxed #player-sprite.no-mirror:hover { transform:translateX(-50%) scale(1.65) !important; }
#bp-player.dynamaxed #player-sprite.v-flip { transform:translateX(-50%) scaleX(-1) scaleY(-1) scale(1.6) !important; animation:dynamaxPulse 1.8s ease infinite; }
#bp-player.dynamaxed #player-sprite.v-flip:hover { transform:translateX(-50%) scaleX(-1) scaleY(-1) scale(1.65) !important; }
#bp-player.dynamaxed #player-sprite.no-mirror.v-flip { transform:translateX(-50%) scaleY(-1) scale(1.6) !important; animation:dynamaxPulse 1.8s ease infinite; }
#bp-player.dynamaxed #player-sprite.no-mirror.v-flip:hover { transform:translateX(-50%) scaleY(-1) scale(1.65) !important; }
@keyframes dynamaxPulse { 0%,100%{filter:drop-shadow(0 0 14px rgba(255,40,0,.9)) drop-shadow(0 6px 22px rgba(0,0,0,.7));} 50%{filter:drop-shadow(0 0 32px rgba(255,40,0,1)) drop-shadow(0 0 60px rgba(200,30,0,.75)) drop-shadow(0 6px 22px rgba(0,0,0,.6));} }
@keyframes dynamaxEntry { from{transform:translateX(-50%) scaleX(-1) scale(1);} to{transform:translateX(-50%) scaleX(-1) scale(1.6);} }

/* ── STADIUM BACKGROUND ── */
#stadium-bg { display:none; position:fixed; inset:0; z-index:0; overflow:hidden;
  background: #05050f url('stadium-image') center center / cover no-repeat; }
#stadium-bg.active { display:block; }
/* Dark overlay so UI panels stay legible against the image */
.sb-overlay { position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.55) 100%); }

/* ── POKÉBALL RANDOM ── */
.random-btn { width:100%; margin-top:8px; padding:9px; background:transparent; border:1.5px dashed #1a4a8a; border-radius:8px; color:#666; font-size:0.85rem; cursor:pointer; transition:border-color .2s,color .2s; letter-spacing:.5px; }
.random-btn:hover { border-color:#FFD700; color:#FFD700; }
.pokeball-wrap { display:none; align-items:center; justify-content:center; padding:28px 0 16px; }
.pokeball { position:relative; width:110px; height:110px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.pb-top { position:absolute; top:0; left:0; right:0; height:50%; background:#e74c3c; border-radius:55px 55px 0 0; border:3.5px solid #111; border-bottom:none; transform-origin:bottom center; transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
.pb-bot { position:absolute; bottom:0; left:0; right:0; height:50%; background:#efefef; border-radius:0 0 55px 55px; border:3.5px solid #111; border-top:none; transform-origin:top center; transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
.pb-seam { position:absolute; top:50%; left:0; right:0; height:12px; background:#111; transform:translateY(-50%); z-index:2; }
.pb-btn { position:absolute; top:50%; left:50%; width:26px; height:26px; background:#e0e0e0; border:3.5px solid #111; border-radius:50%; transform:translate(-50%,-50%); z-index:3; box-shadow:inset 0 2px 4px rgba(255,255,255,.5); transition:background .25s,box-shadow .25s; }
.pokeball.lit .pb-btn { background:#fff; box-shadow:0 0 18px 7px rgba(255,255,255,.95),inset 0 2px 4px rgba(255,255,255,.9); }
.pokeball.opening .pb-top { transform:translateY(-46px) rotate(-18deg); }
.pokeball.opening .pb-bot { transform:translateY(46px) rotate(18deg); }
@keyframes pbWobble { 0%,100%{transform:rotate(0) scale(1);} 15%{transform:rotate(-15deg) scale(1.06);} 35%{transform:rotate(15deg) scale(1.06);} 55%{transform:rotate(-9deg);} 75%{transform:rotate(9deg);} 90%{transform:rotate(-3deg);} }
.pokeball.wobble { animation:pbWobble .75s ease; }
.pb-flash { position:absolute; inset:0; background:#fff; border-radius:14px; opacity:0; pointer-events:none; z-index:20; transition:opacity .15s; }
.pb-flash.lit { opacity:1; }

/* ── STORY MODE BUTTON (selection) ── */
#story-mode-btn { margin-top:14px; padding:14px 44px; font-size:1.05rem; font-weight:bold; background:linear-gradient(135deg,#6890F0,#9b59b6); color:#fff; border:none; border-radius:50px; cursor:pointer; transition:transform .2s, box-shadow .2s; }
#story-mode-btn:hover { transform:scale(1.05); box-shadow:0 8px 25px rgba(104,144,240,.4); }

/* ── STORY MODE: THROW BALL / RUN BUTTONS ── */
#throw-ball-btn, #run-btn { flex:1; padding:9px; font-size:.88rem; font-weight:bold; color:#fff; border:none; border-radius:8px; cursor:pointer; letter-spacing:.5px; transition:opacity .2s,transform .1s; }
#throw-ball-btn { background:linear-gradient(135deg,#e74c3c,#c0392b); }
#run-btn { background:linear-gradient(135deg,#555,#333); }
#throw-ball-btn:hover:not(:disabled), #run-btn:hover:not(:disabled) { opacity:.9; transform:scale(1.01); }
#throw-ball-btn:disabled, #run-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── STORY MODE: NODE MAP ── */
#story-map-screen { display:none; flex-direction:column; height:100vh; padding:12px; max-width:1000px; margin:0 auto; position:relative; z-index:1; }
#story-map-screen.active { display:flex; }
#story-map-header { background:rgba(10,16,40,.6); border-radius:16px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-shrink:0;
  backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.1); border-top:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
#story-back-btn, #story-collection-btn, #story-collection-back-btn { padding:9px 16px; font-size:.85rem; font-weight:bold; color:#fff; border:none; border-radius:8px; cursor:pointer; background:linear-gradient(135deg,#1a6b3a,#2e7d32); transition:opacity .2s,transform .1s; }
#story-back-btn:hover, #story-collection-btn:hover, #story-collection-back-btn:hover { opacity:.9; transform:scale(1.01); }
#story-ball-tray { display:flex; gap:14px; font-size:1rem; color:#eee; }
#story-map-viewport { position:relative; flex:1; margin-top:16px; overflow:auto; background:rgba(8,12,32,.35); border-radius:16px; }
#story-map-edges { position:absolute; inset:0; width:100%; height:100%; }
#story-map-nodes { position:relative; width:100%; height:100%; }
.story-node { position:absolute; transform:translate(-50%,-50%); padding:12px 16px; border-radius:12px; border:1.5px solid rgba(100,140,220,.3); background:linear-gradient(160deg,#0f2a5a 0%,#0a1e3d 100%); color:#eee; font-size:.78rem; font-weight:bold; cursor:pointer; min-width:90px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.story-node:hover:not(:disabled) { transform:translate(-50%,-50%) translateY(-3px); border-color:rgba(100,160,255,.55); }
.story-node.node-cleared { border-color:#FFD700; box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 18px rgba(255,215,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.story-node.node-locked { opacity:.4; cursor:not-allowed; }

/* ── STORY MODE: COLLECTION SCREEN ── */
#story-collection-screen { display:none; flex-direction:column; height:100vh; padding:12px; max-width:1000px; margin:0 auto; position:relative; z-index:1; }
#story-collection-screen.active { display:flex; }
#story-collection-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
#story-collection-header h3 { color:#FFD700; font-size:1.1rem; }
#story-collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; overflow-y:auto; }
.story-collection-card { background:linear-gradient(160deg,#0f2a5a 0%,#0a1e3d 100%); border-radius:12px; padding:12px; border:1.5px solid rgba(100,140,220,.3); text-align:center; }
.story-collection-card img { width:64px; height:64px; image-rendering:pixelated; }
.story-collection-card div { font-size:.78rem; text-transform:capitalize; }
.story-collection-node { color:#888; font-size:.65rem; margin-top:4px; }

/* ── STORY MODE: ROULETTE WHEEL MODAL ── */
#wheel-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:600; align-items:center; justify-content:center; }
#wheel-modal.active { display:flex; }
.wheel-box { background:#16213e; border:2px solid #0f3460; border-radius:16px; padding:24px; text-align:center; }
.wheel-box h3 { color:#FFD700; margin-bottom:16px; font-size:1rem; }
#wheel-pointer { width:0; height:0; margin:0 auto 6px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:18px solid #FFD700; }
#wheel-disc { width:220px; height:220px; border-radius:50%; border:4px solid #111; box-shadow:0 6px 18px rgba(0,0,0,.6); background:conic-gradient(#888 0deg 360deg); transform:rotate(0deg); }