:root{
  --ink:#0d0820; --panel:#160d33; --panel2:#21154a; --line:rgba(255,255,255,.1);
  --text:#eef0f6; --muted:#a59cc8; --cream:#f6f1ff; --purple:#9945FF; --green:#14F195; --teal:#00C2FF;
  --pixel:"Press Start 2P", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------------- title */
#title{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);position:relative}
.t-left{position:relative;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px clamp(20px,5vw,72px) 110px;
  background:repeating-linear-gradient(135deg,rgba(153,69,255,.06) 0 2px,transparent 2px 14px),var(--ink);border-right:4px solid var(--green)}
.logo{margin:0;line-height:0}
.logo img{width:min(440px,100%);height:auto;filter:drop-shadow(0 10px 24px rgba(153,69,255,.35));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.ticker{flex:none;font-family:var(--pixel);font-size:9px;color:var(--ink);background:var(--green);padding:6px 8px}
.start{display:flex;align-items:center;gap:16px;width:min(420px,100%);padding:16px 18px;border:0;border-left:8px solid var(--green);background:var(--cream);color:var(--ink);
  font-family:var(--pixel);font-size:15px;box-shadow:6px 6px 0 var(--purple);transition:transform .08s}
.start:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--purple)}
.start:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--purple)}
.start .a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-size:12px;flex:none}
.start .chev{margin-left:auto;font-size:20px}
.start.small{font-size:12px;padding:12px 14px;width:100%}
.hint{margin:-6px 0 0;font-family:var(--pixel);font-size:9px;color:var(--muted);letter-spacing:.1em}
.bar{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,3vw,40px);bottom:46px;display:flex;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--line);min-width:0}
.x{display:grid;place-items:center;width:34px;height:34px;flex:none;color:var(--text);text-decoration:none;font-size:18px;border:1px solid var(--line)}
.x:hover{border-color:var(--green)}
.ca-l{font-family:var(--pixel);font-size:9px;color:var(--green)}
.ca{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.copy{margin-left:auto;flex:none;background:none;border:1px solid var(--line);padding:8px 10px;font-family:var(--pixel);font-size:9px;color:var(--text)}
.copy:hover{border-color:var(--green);color:var(--green)}
.t-right{position:relative;overflow:hidden;background:linear-gradient(#5f8cff,#9cbcff 70%,#c9dbff);display:flex;flex-direction:column;justify-content:flex-end}
.lineup{display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:clamp(4px,1vw,14px);padding:0 16px;--k:1}
.fig{height:calc(32px * var(--s) * var(--k));animation:bob 1s steps(2) infinite;animation-delay:var(--d)}
@keyframes bob{50%{transform:translateY(-4px)}}
.lineup-ground{height:64px;background-size:32px 32px;background-repeat:repeat;image-rendering:pixelated}
.count{position:absolute;right:16px;bottom:76px;margin:0;font-family:var(--pixel);font-size:9px;color:#fff;text-shadow:2px 2px 0 #000}
.legal{position:absolute;left:clamp(20px,5vw,72px);bottom:12px;margin:0;font-size:11px;color:#7d74a3;max-width:46ch}

/* ---------------- character select */
#select{min-height:100dvh;padding:28px clamp(16px,4vw,56px) 24px;display:flex;flex-direction:column;gap:20px;
  background:radial-gradient(1000px 500px at 80% -10%,rgba(153,69,255,.25),transparent 60%),var(--ink)}
.s-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.s-head h2{margin:0;font-family:var(--pixel);font-size:clamp(14px,2.2vw,22px);letter-spacing:.02em}
.ghost{background:none;border:1px solid var(--line);padding:10px 14px;font-family:var(--pixel);font-size:10px}
.ghost:hover{border-color:var(--green)}
.s-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 14px;background:var(--panel);border:2px solid var(--line);
  transition:transform .08s,border-color .08s}
.card img{width:64px;height:64px}
.card span{font-family:var(--pixel);font-size:10px}
.card:hover{border-color:rgba(20,241,149,.5)}
.card.on{border-color:var(--green);background:var(--panel2);box-shadow:0 0 0 2px var(--green) inset,6px 6px 0 var(--purple)}
.card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.detail{background:var(--panel);border:2px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px}
#preview{width:160px;height:140px;align-self:center;background:linear-gradient(transparent 80%,rgba(20,241,149,.12))}
.detail h3{margin:4px 0 0;font-family:var(--pixel);font-size:16px}
.ability{margin:0;font-family:var(--pixel);font-size:10px;color:var(--green)}
.tag{margin:0;color:var(--muted);min-height:42px}
.stats{display:grid;grid-template-columns:64px 1fr;gap:8px 10px;align-items:center;margin:4px 0 8px}
.stats span{font-family:var(--pixel);font-size:8px;color:var(--muted)}
.stats i{height:10px;background:rgba(255,255,255,.08);position:relative}
.stats i::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) / 5 * 100%);background:linear-gradient(90deg,var(--purple),var(--green));transition:width .2s}
.keys{margin:0;color:#7d74a3;font-size:12px}

/* ---------------- game */
#game{position:fixed;inset:0;background:#000;display:flex;flex-direction:column}
.view{flex:1;display:grid;place-items:center;min-height:0}
#screen{display:block;background:#000}
.g-btns{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.g-btns button{background:rgba(13,8,32,.75);border:1px solid var(--line);padding:6px 8px;font-family:var(--pixel);font-size:8px;color:var(--text)}
.g-btns button:hover{border-color:var(--green)}
.pad{display:none}
@media (pointer:coarse){
  .pad{display:flex;justify-content:space-between;align-items:flex-end;padding:12px 16px max(16px,env(safe-area-inset-bottom));pointer-events:none;position:absolute;inset:auto 0 0 0}
  .pad button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:68px;height:68px;border-radius:50%;
    background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);font-family:var(--pixel);font-size:14px;color:#fff}
  .pad button.on{background:rgba(20,241,149,.35);border-color:var(--green)}
  .pad-l,.pad-r{display:flex;gap:14px}
  .pad-r .a{transform:translateY(-22px)}
}

/* ---------------- phones */
@media (max-width:820px){
  #title{grid-template-columns:1fr;grid-template-rows:auto auto}
  .t-left{border-right:0;border-bottom:4px solid var(--green);padding:40px 16px 96px;gap:18px}
  .bar{left:16px;right:16px;bottom:36px}
  .legal{position:static;padding:12px 16px 18px;font-size:10px;max-width:none}
  .t-right{min-height:260px}
  .lineup{--k:.9;gap:4px}
  .count{top:14px;bottom:auto}
  .s-body{grid-template-columns:1fr}
  .detail{order:-1}
  #preview{width:120px;height:105px}
  .card{padding:12px 4px 10px}
  .card img{width:48px;height:48px}
  .card span{font-size:8px}
}
@media (max-width:560px){ .lineup{--k:.62;gap:2px} }
@media (max-width:400px){ .lineup{--k:.52} }
@media (prefers-reduced-motion:reduce){ .fig,.logo img{animation:none} }