/* ============ POKéMON MAGENTA — GBA SP aesthetic ============ */
:root{
  --shell1:#c81e78; --shell2:#8e1054; --shell3:#e34a9b;
  --screen-bg:#101418;
  --ink:#383030;
  --panel:#f8f8f0; --panel-edge:#5a5a52;
  --hp-green:#58d080; --hp-yellow:#f0d048; --hp-red:#e85038;
  --exp-blue:#48a0d8;
  --menu-red:#e8285a;
  --px:2px; /* logical pixel inside the 480x320 ui space */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:#1a0a14;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, #47123244 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, #2a0a3a33 0%, transparent 60%),
    repeating-linear-gradient(45deg, #ffffff03 0 2px, transparent 2px 14px);
  font-family:'Press Start 2P', monospace;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
#stage{display:flex; flex-direction:column; align-items:center; gap:10px;
  transform-origin:center center;}

/* ---------- shell ---------- */
#shell{
  background:linear-gradient(160deg, var(--shell3) 0%, var(--shell1) 38%, var(--shell2) 100%);
  border-radius:26px; padding:12px 18px 10px;
  box-shadow:0 18px 50px #000a, inset 0 2px 2px #ffffff55, inset 0 -4px 8px #00000045;
}
#shell-top{display:flex; align-items:center; justify-content:space-between;
  font-size:7px; letter-spacing:1px; color:#ffd9ec; text-shadow:0 1px 0 #0006; padding:2px 4px 8px;}
.shell-led{width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #aef3b0, #1fb648 60%, #0a6e28);
  box-shadow:0 0 8px #2ee06a; display:inline-block;}
.shell-model{opacity:.85}
#screen-frame{background:#1c1320; border-radius:12px; padding:10px;
  box-shadow:inset 0 3px 8px #000c, inset 0 -1px 2px #ffffff22;}
#screen{
  position:relative; width:480px; height:320px; overflow:hidden;
  background:var(--screen-bg); border-radius:3px;
  box-shadow:0 0 0 1px #000;
}
#screen::after{ /* subtle LCD scanlines */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(0deg, #00000012 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}
#shell-bottom{text-align:center; font-size:7px; letter-spacing:2px; color:#ffd9ec;
  text-shadow:0 1px 0 #0006; padding-top:8px; opacity:.9}

canvas#game{position:absolute; inset:0; width:480px; height:320px;
  image-rendering:pixelated; image-rendering:crisp-edges;}
#ui,#battle,#title{position:absolute; inset:0; z-index:10;}
#fade{position:absolute; inset:0; background:#000; opacity:0; pointer-events:none;
  transition:opacity .28s linear; z-index:50;}
.hidden{display:none !important}

/* ---------- shared window chrome (FRLG textbox) ---------- */
.win{
  position:absolute; background:var(--panel); color:var(--ink);
  border:3px solid #6878a0; border-radius:6px;
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px #c8d0e8, 0 3px 0 #00000038;
  font-size:13px; line-height:1.55; image-rendering:pixelated;
}
.win.gray{border-color:#787068; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px #d8d0c0, 0 3px 0 #00000038;}

#dialog-box{left:8px; right:8px; bottom:8px; height:84px; padding:12px 16px;
  white-space:pre-wrap; overflow:hidden; z-index:30;}
#dialog-box .arrow{position:absolute; right:14px; bottom:8px; font-size:11px;
  color:#e8285a; animation:bob .5s steps(2) infinite;}
@keyframes bob{50%{transform:translateY(3px)}}

.menu-list{padding:10px 8px; z-index:31;}
.menu-list .mi{padding:5px 10px 5px 26px; position:relative; white-space:nowrap; font-size:13px;}
.menu-list .mi.sel::before{content:'▶'; position:absolute; left:8px; color:#383030; font-size:11px;}
.menu-list .mi.dim{color:#a8a098}

/* ---------- title screen ---------- */
#title{z-index:40; overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 28%, #ff63b1 0%, #d92a86 45%, #7c1257 100%);
}
#title::before{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, #ffffff0a 0 2px, transparent 2px 8px);}
#title .t-stars{position:absolute; inset:0; pointer-events:none;}
#title .t-stars i{position:absolute; width:4px; height:4px; background:#fff;
  box-shadow:0 0 6px #fff; animation:twinkle 1.6s steps(2) infinite;}
@keyframes twinkle{50%{opacity:.15}}
#title h1{margin-top:52px; font-size:34px; color:#ffe14a; letter-spacing:2px;
  text-shadow:3px 3px 0 #1c3a8c, -3px 3px 0 #1c3a8c, 3px -3px 0 #1c3a8c, -3px -3px 0 #1c3a8c, 0 7px 0 #0b1d4d;
  animation:drop .7s cubic-bezier(.2,1.6,.4,1) both;}
#title h2{font-size:13px; color:#fff; margin-top:8px; letter-spacing:6px;
  text-shadow:2px 2px 0 #7c1257;}
@keyframes drop{from{transform:translateY(-90px) scale(1.4); opacity:0}}
#title .t-mon{height:96px; margin-top:14px; image-rendering:pixelated;
  filter:drop-shadow(0 6px 0 #00000040); animation:hover 2.2s ease-in-out infinite;}
@keyframes hover{50%{transform:translateY(-8px)}}
#title .t-press{position:absolute; bottom:46px; left:0; right:0; font-size:12px; color:#fff;
  text-shadow:2px 2px 0 #7c1257; animation:blink 1.1s steps(2) infinite;}
#title .t-cont{position:absolute; bottom:20px; left:0; right:0; font-size:8px; color:#ffd9ec;}
@keyframes blink{50%{opacity:0}}

/* ---------- battle screen ---------- */
#battle{z-index:20; overflow:hidden; font-size:13px; color:var(--ink);
  background:
    linear-gradient(180deg,#b8e8d0 0%, #b8e8d0 52%, #98d8b8 52%, #a8e0c4 100%);
}
#battle::before{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, #ffffff18 0 3px, transparent 3px 9px);}
.b-plat{position:absolute; border-radius:50%; background:#8cc8a4;
  box-shadow:inset 0 4px 0 #9cd4b2, inset 0 -3px 0 #74b890;}
.b-plat.enemy{width:170px; height:44px; right:18px; top:104px;}
.b-plat.ally{width:200px; height:40px; left:-20px; bottom:78px;}
.b-spr{position:absolute; image-rendering:pixelated; z-index:2;}
.b-spr.enemy{width:128px; height:128px; right:38px; top:-2px;
  animation:slideL .5s ease-out both;}
.b-spr.ally{width:150px; height:150px; left:22px; bottom:48px;
  animation:slideR .5s ease-out both;}
@keyframes slideL{from{transform:translateX(260px)}}
@keyframes slideR{from{transform:translateX(-280px)}}
.b-spr.hit{animation:hitflash .42s steps(3)}
@keyframes hitflash{33%{opacity:.15}66%{opacity:1}99%{opacity:.15}}
.b-spr.faintdrop{animation:faintdrop .5s ease-in both}
@keyframes faintdrop{to{transform:translateY(140px); opacity:0}}

.b-info{position:absolute; z-index:3; background:#f8f8d8; border:3px solid #585048;
  border-radius:8px; padding:7px 10px; min-width:180px;
  box-shadow:3px 3px 0 #00000030, inset 0 0 0 2px #fffff0;}
.b-info .n{font-size:12px; display:flex; justify-content:space-between; gap:10px;}
.b-info .n .lv{color:#383030}
.b-info.enemy{left:14px; top:18px;}
.b-info.ally{right:14px; bottom:104px;}
.hp-row{display:flex; align-items:center; gap:5px; margin-top:5px;
  background:#585048; border-radius:6px; padding:2px 6px;}
.hp-row .tag{color:#f8b850; font-size:9px; letter-spacing:1px;}
.hp-outer{flex:1; height:8px; background:#30302a; border-radius:4px; overflow:hidden;}
.hp-fill{height:100%; width:100%; background:var(--hp-green); border-radius:4px;
  transition:none;}
.hp-num{font-size:10px; text-align:right; margin-top:4px;}
.exp-outer{height:5px; background:#585048; border-radius:3px; margin-top:5px; overflow:hidden;}
.exp-fill{height:100%; background:var(--exp-blue); width:0%;}
.st-badge{font-size:8px; background:#c85048; color:#fff; border-radius:3px;
  padding:2px 4px; margin-left:4px; vertical-align:middle;}
.st-badge.slp{background:#9088d8}.st-badge.par{background:#c8a818}

#b-text{position:absolute; left:6px; right:6px; bottom:6px; height:88px;
  background:linear-gradient(180deg,#305868,#284858); border:3px solid #f8f8f0;
  outline:3px solid #485868; border-radius:8px; color:#fff; padding:14px 16px;
  font-size:13px; line-height:1.6; white-space:pre-wrap; z-index:5;}
#b-menu{position:absolute; right:6px; bottom:6px; width:212px; height:88px; z-index:6;
  display:grid; grid-template-columns:1fr 1fr; padding:10px 6px 10px 10px; align-items:center;}
#b-menu .mi{position:relative; padding:4px 2px 4px 20px; font-size:13px;}
#b-menu .mi.sel::before{content:'▶'; position:absolute; left:4px; font-size:11px;}
#b-moves{position:absolute; left:6px; right:142px; bottom:6px; height:88px; z-index:6;
  display:grid; grid-template-columns:1fr 1fr; padding:10px 4px 10px 10px; align-items:center;}
#b-moves .mi{position:relative; padding:4px 0 4px 18px; font-size:11.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
#b-moves .mi.sel::before{content:'▶'; position:absolute; left:2px; font-size:10px;}
#b-mvinfo{position:absolute; right:6px; bottom:6px; width:132px; height:88px; z-index:6;
  padding:12px 10px; font-size:10px; line-height:1.9;}
#b-mvinfo .tp{display:inline-block; background:#a890d0; color:#fff; padding:2px 6px;
  border-radius:3px; font-size:9px;}

.ball-fx{position:absolute; width:22px; height:22px; z-index:8; border-radius:50%;
  background:linear-gradient(180deg,#e8285a 0 46%, #2a2a2a 46% 54%, #f0f0f0 54%);
  box-shadow:inset -3px -3px 0 #00000030, 0 0 0 2px #2a2a2a;}
.ball-fx::after{content:''; position:absolute; left:7px; top:7px; width:8px; height:8px;
  border-radius:50%; background:#fff; border:2px solid #2a2a2a;}
.ball-fx.toss{animation:toss .55s ease-out both;}
@keyframes toss{0%{transform:translate(-180px,120px) scale(.6)}60%{transform:translate(-20px,-60px)}100%{transform:translate(0,0)}}
.ball-fx.shake{animation:bshake .8s ease-in-out;}
@keyframes bshake{20%{transform:rotate(-25deg) translateX(-4px)}60%{transform:rotate(25deg) translateX(4px)}}
.ball-fx.burst{animation:burst .3s ease-out both;}
@keyframes burst{to{transform:scale(2.4); opacity:0}}

/* ---------- overlays: party / bag / dex / summary ---------- */
.full-panel{position:absolute; inset:0; z-index:32; background:#88c8b0;
  background-image:repeating-linear-gradient(45deg,#ffffff12 0 4px, transparent 4px 16px);
  color:var(--ink); padding:10px;}
.full-panel h3{font-size:13px; color:#fff; text-shadow:2px 2px 0 #487860; margin:4px 4px 10px;}
.party-row{display:flex; align-items:center; gap:8px; background:var(--panel);
  border:3px solid #6878a0; border-radius:6px; padding:5px 10px; margin-bottom:6px;
  box-shadow:inset 0 0 0 2px #fff;}
.party-row.sel{border-color:#e8285a; box-shadow:inset 0 0 0 2px #ffd9ec;}
.party-row img{width:40px; height:40px; image-rendering:pixelated; margin:-4px 0;}
.party-row .pr-main{flex:1}
.party-row .pr-name{font-size:11px; display:flex; justify-content:space-between;}
.party-row .pr-name .faint{color:#e85038}
.party-row .hp-outer{height:6px; background:#585048; margin-top:4px;}
.party-row .pr-hp{font-size:9px; margin-top:3px; text-align:right;}
.bag-row{display:flex; justify-content:space-between; font-size:12px; padding:6px 12px 6px 26px; position:relative;}
.bag-row.sel::before{content:'▶'; position:absolute; left:10px; font-size:10px;}
.dex-row{display:flex; gap:10px; font-size:11px; padding:5px 12px; align-items:center;}
.dex-row.sel{background:#ffffff80; border-radius:4px;}
.dex-row .dno{color:#787068; width:46px;}
.dex-row .ball-mini{width:10px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,#e8285a 0 45%, #2a2a2a 45% 55%, #fff 55%); flex:none;}
.dex-row .nope{width:10px; flex:none;}
.summary-card{position:absolute; inset:14px; z-index:33; padding:14px 18px; font-size:11px; line-height:2;}
.summary-card img{position:absolute; right:16px; top:12px; width:110px; height:110px; image-rendering:pixelated;}
.summary-card .big{font-size:14px;}
.summary-card .mv{display:flex; justify-content:space-between; width:240px;}

/* ---------- touch controls ---------- */
#controls{display:none; width:100%; max-width:520px; justify-content:space-between;
  align-items:center; padding:6px 18px 0;}
#dpad{display:grid; grid-template-columns:54px 54px 54px; grid-template-rows:54px 54px 54px;
  grid-template-areas:". up ." "left c right" ". down ."; filter:drop-shadow(0 6px 0 #00000050);}
#pad-up{grid-area:up; border-radius:10px 10px 0 0}
#pad-down{grid-area:down; border-radius:0 0 10px 10px}
#pad-left{grid-area:left; border-radius:10px 0 0 10px}
#pad-right{grid-area:right; border-radius:0 10px 10px 0}
#pad-center{grid-area:c; background:#3a3142;}
#pad-center::after{content:''; display:block; width:26px; height:26px; margin:14px auto;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #564a62, #2a2333);}
.pad-btn{background:#3a3142; border:none; color:#cfc3dd; font-size:16px;
  display:flex; align-items:center; justify-content:center;}
.pad-btn:active{background:#241e2e; transform:translateY(2px)}
#action-btns{display:flex; flex-direction:column; align-items:center; gap:28px;}
#ab{display:flex; gap:32px; align-items:flex-start;}
.ab-btn{width:72px; height:72px; border-radius:50%; border:none;
  background:radial-gradient(circle at 35% 30%, #ff7eb8, #d92a86 65%, #97175e);
  color:#fff; font-family:inherit; font-size:18px;
  box-shadow:0 6px 0 #5e0e3c; text-shadow:0 2px 0 #0006;}
#btn-a{margin-top:-8px}
.ab-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #5e0e3c}
.sys-btn{border:none; background:#3a3142; color:#cfc3dd; font-family:inherit;
  font-size:9px; padding:8px 18px; border-radius:14px; box-shadow:0 4px 0 #00000060;
  letter-spacing:1px;}
.sys-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #00000060}

/* coarse pointers (touch devices): show controls */
@media (pointer:coarse){
  #controls{display:flex}
  #shell{padding:8px 10px 6px; border-radius:18px;}
  #screen-frame{padding:6px}
}
body.touch #controls{display:flex}
body.touch #shell{padding:8px 10px 6px; border-radius:18px}
body.touch #screen-frame{padding:6px}