@font-face{font-family:'PS2P';src:url('/ps2p.ttf') format('truetype');font-display:swap}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#000;display:grid;place-items:center;overflow:hidden;
  font-family:'PS2P',monospace;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 130px 80px,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 70px 150px,#01cdfe 50%,transparent 51%),
    radial-gradient(1px 1px at 200px 40px,#ff71ce 50%,transparent 51%),
    radial-gradient(1px 1px at 40px 220px,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 170px 190px,#fffb96 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 240px 120px,#39ff14 50%,transparent 51%);
  background-size:280px 280px;
}
.handheld{
  position:fixed;left:50%;top:50%;translate:-50% -50%;width:360px;height:600px;scale:var(--fit,1);
  background:linear-gradient(160deg,#d9d6cf 0%,#c4c0b6 60%,#b3aea3 100%);
  border-radius:16px 16px 70px 16px;padding:22px 22px 0;
  box-shadow:inset -6px -8px 0 rgba(0,0,0,.12),inset 4px 4px 0 rgba(255,255,255,.5),0 30px 60px rgba(0,0,0,.7);
  display:flex;flex-direction:column;
}
.handheld.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px) rotate(-1deg)}40%,80%{transform:translateX(8px) rotate(1deg)}}
.screen-bezel{background:#5d5f6e;border-radius:10px 10px 40px 10px;padding:10px 22px 22px}
.bezel-top{display:flex;align-items:center;gap:8px;color:#b8b9c8;font-size:5px;letter-spacing:.1em;margin-bottom:8px;white-space:nowrap}
.bezel-top::before,.bezel-top::after{content:"";flex:1;height:2px;background:linear-gradient(#a3305c 0 50%,#2b2b8f 50% 100%)}
.power{order:-1;width:8px;height:8px;border-radius:50%;background:#400;flex:none}
.power.on{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a}
.screen{
  position:relative;aspect-ratio:10/9;background:#9bbc0f;border-radius:3px;padding:12px 10px;
  color:#0f380f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  box-shadow:inset 0 0 0 3px #8bac0f,inset 4px 4px 0 rgba(0,0,0,.15);overflow:hidden;
}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(15,56,15,.06) 0 1px,transparent 1px 3px)}
.screen.flash{animation:flash .12s steps(1) 6}
@keyframes flash{50%{background:#0f380f;color:#9bbc0f}}
.lcd-title{font-size:10px;letter-spacing:.05em}
.lcd-msg{font-size:8px;line-height:1.8;min-height:30px;display:grid;place-items:center}
.lcd-input{font-size:14px;min-height:22px;letter-spacing:.12em;word-break:break-all;line-height:1.6}
.caret{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.lcd-hint{font-size:6px;opacity:.7}
.brand{color:#2b2b8f;font-size:11px;font-style:italic;margin:12px 0 0 4px;letter-spacing:.02em}
.brand span{font-size:16px;margin-left:4px}

.controls{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:0 2px}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.d{background:#222;border:none;cursor:pointer;position:relative}
.d:active,.d.press{background:#000;transform:translateY(2px)}
.up{grid-column:2;grid-row:1;border-radius:6px 6px 0 0}
.left{grid-column:1;grid-row:2;border-radius:6px 0 0 6px}
.mid{grid-column:2;grid-row:2;background:#222}
.right{grid-column:3;grid-row:2;border-radius:0 6px 6px 0}
.down{grid-column:2;grid-row:3;border-radius:0 0 6px 6px}
.d::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:6px solid transparent;transform:translate(-50%,-50%)}
.up::after{border-bottom-color:#555;margin-top:-3px}
.down::after{border-top-color:#555;margin-top:3px}
.left::after{border-right-color:#555;margin-left:-3px}
.right::after{border-left-color:#555;margin-left:3px}
.ab{display:flex;gap:14px;transform:rotate(-25deg);margin-right:4px}
.ab button{
  width:54px;height:54px;border-radius:50%;border:none;background:#a3305c;color:#2b2b8f;cursor:pointer;
  font-family:'PS2P',monospace;font-size:0;box-shadow:0 5px 0 #6e1d3d;position:relative;
}
.ab button::after{content:attr(data-k);position:absolute;bottom:-22px;left:50%;transform:translateX(-50%) rotate(25deg);font-size:10px;color:#2b2b8f}
.btn-b{margin-top:26px}
.ab button:active,.ab button.press{transform:translateY(4px);box-shadow:0 1px 0 #6e1d3d}
.pills{display:flex;justify-content:center;gap:10px;margin:22px 40px 34px 0}
.pill{background:none;border:none;color:#2b2b8f;font-family:'PS2P',monospace;font-size:7px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transform:rotate(-25deg);padding:4px}
.pill span{width:48px;height:12px;border-radius:8px;background:#8a8b96;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.pill:active span,.pill.press span{background:#6b6c75}
.speaker{position:absolute;right:26px;bottom:26px;display:flex;gap:7px;transform:rotate(-25deg)}
.speaker i{width:6px;height:44px;border-radius:3px;background:#9d998f;box-shadow:inset 1px 2px 2px rgba(0,0,0,.35)}
.handheld.unlocked{animation:zoomin .7s .55s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes zoomin{to{transform:scale(6);opacity:0}}
@media (prefers-reduced-motion:reduce){.handheld.shake,.handheld.unlocked,.screen.flash{animation:none}}