:root{
  --red:#EE1515; --darkred:#B00; --navy:#1a1c2c;
  --grass:#7bc86c; --grass2:#5a9e4f;
  --box:#f8f8f8; --border:#202020;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, #2b3350 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, #3a2540 0%, transparent 50%),
    var(--navy);
  min-height:100vh;
  color:#fff;
  font-family:'VT323', monospace;
}
.ppt{font-family:'Press Start 2P', monospace; line-height:1.6;}
.vt{font-family:'VT323', monospace; font-size:1.1rem;}
.small{font-size:0.5rem;}

/* Loading */
.loading-screen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; gap:1.5rem;
}
.pokeball-spin{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(#EE1515 0 50%, #fff 50% 100%);
  border:5px solid #202020; position:relative;
  animation:spin 1s linear infinite;
}
.pokeball-spin::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;background:#fff;border:5px solid #202020;border-radius:50%;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Starter screen */
.starter-screen{
  max-width:720px; margin:0 auto; padding:2rem 1rem; text-align:center;
}
.title-glow{
  font-size:1.8rem; color:#ffcb05;
  text-shadow:3px 3px 0 #2a75bb, 6px 6px 0 rgba(0,0,0,.3);
  margin:0.5rem 0; letter-spacing:2px;
}
.oak-box{
  background:var(--box); color:#202020; border:4px solid var(--border);
  border-radius:4px; padding:1rem; margin:1rem auto; max-width:560px;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.oak-box.small{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.name-input{
  width:100%; margin-top:0.6rem; padding:0.5rem;
  border:3px solid var(--border); border-radius:3px; font-size:1.3rem;
  background:#fff; color:#202020;
}
.name-input:focus{outline:none;border-color:var(--red);}
.starter-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; margin-top:1rem;
}
.starter-card{
  background:linear-gradient(#fff,#e8e8e8); border:4px solid var(--border);
  border-radius:6px; padding:0.8rem 0.4rem; cursor:pointer; color:#202020;
  transition:transform .15s, box-shadow .15s; box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.starter-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 0 rgba(0,0,0,.4);}
.starter-card:disabled{opacity:.5;cursor:not-allowed;}
.starter-sprite{width:96px;height:96px;}
.hint{color:#ffcb05;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:.3;}}
.badge-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.badge-row.small{margin-top:2px;}
.type-badge{
  font-family:'Press Start 2P',monospace; font-size:0.4rem; color:#fff;
  padding:3px 5px; border-radius:3px; border:2px solid rgba(0,0,0,.3);
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}

/* Game layout */
.game-wrap{max-width:640px;margin:0 auto;padding:0.5rem;}
.game-header{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--red);border:4px solid var(--border);border-radius:6px;
  padding:0.6rem 0.8rem; box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.trainer-info{display:flex;gap:0.4rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.stat-pill{background:rgba(0,0,0,.25);padding:2px 8px;border-radius:10px;font-size:1rem;}
.tab-nav{display:flex;gap:0.4rem;margin:0.6rem 0;}
.tab-btn{
  flex:1;font-family:'Press Start 2P',monospace;font-size:0.5rem;
  padding:0.6rem 0.2rem;background:#2b3350;color:#aab;
  border:3px solid var(--border);border-radius:5px;cursor:pointer;
}
.tab-btn.active{background:#ffcb05;color:#202020;}

/* Battle arena */
.battle-view{display:flex;flex-direction:column;gap:0.5rem;}
.arena{
  position:relative; min-height:280px;
  background:
    linear-gradient(180deg,#87c5e8 0%,#a8d8f0 45%,#7bc86c 45%,#5a9e4f 100%);
  border:4px solid var(--border); border-radius:8px;
  padding:0.8rem; overflow:hidden;
}
.combatant{display:flex;align-items:flex-start;}
.combatant.top{justify-content:flex-start;flex-direction:row-reverse;}
.combatant.bottom{justify-content:flex-end;margin-top:0.5rem;}
.platform{
  position:relative;padding:0.5rem 1.2rem;
}
.platform::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:80px;height:14px;background:rgba(0,0,0,.15);border-radius:50%;
}
.enemy{width:88px;height:88px;}
.player{width:96px;height:96px;}
.mon-sprite{display:block;}
.mon-sprite.flash{animation:hitflash .3s;}
@keyframes hitflash{0%,100%{opacity:1;}50%{opacity:.15;filter:brightness(3);}}
.fainted{opacity:0.3;transform:translateY(20px) rotate(90deg);transition:.5s;}
.info-box{
  background:var(--box);color:#202020;border:3px solid var(--border);
  border-radius:6px;padding:0.4rem 0.6rem;min-width:150px;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.player-info{align-self:flex-end;}
.name-line{font-size:1rem;font-weight:bold;margin-bottom:3px;}
.hp-num{font-size:0.9rem;text-align:right;}
.hpbar-outer{
  height:9px;background:#555;border:2px solid #202020;border-radius:4px;
  overflow:hidden;margin:2px 0;
}
.hpbar-inner{height:100%;}
.pokeball-throw{
  position:absolute;top:0;right:10px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(#EE1515 0 50%,#fff 50% 100%);border:3px solid #202020;
  animation:ballshake .4s ease-in-out infinite;
}
@keyframes ballshake{0%,100%{transform:rotate(-15deg);}50%{transform:rotate(15deg);}}

/* Log */
.log-box{
  background:#0e1020;border:4px solid var(--border);border-radius:6px;
  padding:0.5rem 0.7rem;height:90px;overflow-y:auto;font-size:1rem;
}
.log-line{margin:1px 0;color:#cde;}

/* Action panel */
.action-panel{min-height:120px;}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;}
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;}
.act-btn{
  font-family:'Press Start 2P',monospace;font-size:0.55rem;line-height:1.5;
  background:var(--box);color:#202020;border:4px solid var(--border);
  border-radius:6px;padding:0.9rem 0.5rem;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.4);transition:transform .1s;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.act-btn:hover:not(:disabled){transform:translateY(-2px);}
.act-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4);}
.act-btn:disabled{opacity:.5;cursor:not-allowed;}
.act-btn.wide{grid-column:1/-1;}
.act-btn.full{grid-column:1/-1;}
.act-btn.heal{background:#e8f6e8;}
.act-btn.back{background:#dcdce8;}
.act-btn.small{font-size:0.45rem;padding:0.5rem;}
.no-battle{display:flex;flex-direction:column;gap:0.5rem;}
.move-btn .mv-name{font-size:0.5rem;}
.move-btn .mv-meta{font-size:0.4rem;}
.switch-btn{
  display:flex;align-items:center;gap:6px;background:var(--box);color:#202020;
  border:3px solid var(--border);border-radius:6px;padding:0.4rem;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.switch-btn.current{background:#ffcb05;}
.switch-btn.ko{opacity:.4;}
.switch-btn:disabled{cursor:not-allowed;}
.mini-sprite{width:40px;height:40px;}

/* Team view */
.team-view,.lb-view{display:flex;flex-direction:column;gap:0.6rem;}
.dex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;}
@media(min-width:520px){.dex-grid{grid-template-columns:repeat(3,1fr);}}
.dex-card{
  background:var(--box);color:#202020;border:4px solid var(--border);
  border-radius:8px;padding:0.6rem;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.dex-card.lead{border-color:#ffcb05;box-shadow:0 4px 0 #b8930a;}
.dex-sprite{width:72px;height:72px;}
.stats-mini{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;font-size:0.9rem;margin-top:4px;}
.lead-btn{
  margin-top:5px;background:#2b3350;color:#fff;border:2px solid #202020;
  border-radius:4px;padding:3px 8px;cursor:pointer;font-size:0.9rem;width:100%;
}

/* Leaderboard */
.lb-table{width:100%;border-collapse:collapse;background:var(--box);color:#202020;
  border:4px solid var(--border);border-radius:6px;overflow:hidden;font-size:1.1rem;}
.lb-table th{background:var(--red);color:#fff;padding:0.5rem;font-size:0.9rem;}
.lb-table td{padding:0.4rem 0.5rem;border-top:2px solid #ddd;}
.lb-table tr.top3{background:#fff6d8;font-weight:bold;}

/* Footer */
.foot{text-align:center;margin:1rem 0 0.5rem;}
.foot a{color:#8ab;text-decoration:none;border-bottom:1px dotted #8ab;}
.foot a:hover{color:#ffcb05;}

@media(max-width:400px){
  .starter-grid{grid-template-columns:1fr;}
  .starter-sprite{width:80px;height:80px;}
  .title-glow{font-size:1.3rem;}
  .info-box{min-width:120px;}
}
</parameter>