:root{
  --bg:#12101d;
  --stone:#2a2540;
  --panel:#1a1730;
  --border:#4a4270;
  --gold:#f2c14e;
  --orange:#f2793b;
  --hp:#e0435a;
  --shield:#4db4ff;
  --energy:#7de07d;
  --tp:#c46bf2;
  --ink:#e9e4ff;
  --dim:#8a82b0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(circle at 50% 0%, #1e1836 0%, #0b0a14 80%);
  font-family:'VT323',monospace;
  color:var(--ink);
  display:flex;flex-direction:column;align-items:center;
  min-height:100%;
  overflow-x:hidden;
  image-rendering:pixelated;
}
#game-wrap{
  position:relative;
  width:100%;max-width:520px;
  margin-top:8px;
  padding:6px;
}
canvas{
  width:100%;
  display:block;
  background:#0d0b18;
  border:3px solid var(--border);
  box-shadow:0 0 0 3px #0b0a14, 6px 6px 0 rgba(0,0,0,.5);
  image-rendering:pixelated;
  touch-action:manipulation;
}
#scanlines{
  pointer-events:none;
  position:absolute;inset:6px;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.14) 3px, rgba(0,0,0,.14) 4px);
  mix-blend-mode:multiply;
  z-index:5;
}
#log{
  margin-top:6px;
  height:60px;overflow-y:auto;
  background:var(--panel);
  border:2px solid var(--border);
  padding:4px 8px;
  font-size:16px;line-height:1.15;
  color:var(--dim);
  width:100%;
}
#log .hit{color:var(--ink)}
#log .crit{color:var(--orange)}
#log .good{color:var(--energy)}
#log .tp{color:var(--tp)}
#controls{
  margin-top:6px;width:100%;
  display:flex;flex-wrap:wrap;gap:6px;
}
.btn{
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  padding:10px 8px;
  background:var(--stone);
  color:var(--ink);
  border:2px solid var(--border);
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  cursor:pointer;
  flex:1 1 auto;
  min-width:72px;
  text-align:center;
  line-height:1.5;
  transition:transform .05s, background .1s;
  user-select:none;
}
.btn small{display:block;color:var(--gold);font-size:8px;margin-top:4px}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.on{background:var(--orange);color:#1a1120}
.btn.disabled{opacity:.35;pointer-events:none;filter:grayscale(1)}
.btn.wide{flex-basis:100%}
.btn.end{background:#2d5a3d}
.btn.tp{background:linear-gradient(#5a2d70,#3a1d50);border-color:var(--tp)}
.btn.tp.ready{animation:glow 1s infinite alternate}
@keyframes glow{to{box-shadow:0 0 12px var(--tp),3px 3px 0 rgba(0,0,0,.5)}}
#toast{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'Press Start 2P',monospace;
  font-size:14px;color:var(--gold);
  text-shadow:2px 2px 0 #000;
  pointer-events:none;opacity:0;
  text-align:center;z-index:10;
  transition:opacity .2s;
  width:90%;
}
#toast.show{opacity:1}
footer{margin:14px 0;font-size:16px}
footer a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}
h1,h2,h3{font-family:'Press Start 2P',monospace}
body.corrupted #game-wrap{ animation:corrupt-glitch .4s infinite steps(2); }
body.corrupted canvas{ filter:hue-rotate(300deg) saturate(2) contrast(1.4); }
body.corrupted #log, body.corrupted #controls{ filter:invert(1) hue-rotate(180deg); opacity:.5; }
body.corrupted footer{ opacity:.2; }
@keyframes corrupt-glitch{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3px,1px) skewX(2deg)}
  50%{transform:translate(2px,-2px) skewX(-3deg)}
  75%{transform:translate(-2px,2px)}
  100%{transform:translate(1px,-1px)}
}
.shake{animation:shake .25s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  50%{transform:translate(4px,-2px)}
  75%{transform:translate(-3px,-1px)}
}
</style>