:root{
  --shell:#e9dcc4; --shell-d:#cdbb9c; --shell-l:#f7eedc;
  --tomato:#c8462f; --ink:#2a1a16; --bez:#3a2c2a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:'Silkscreen',monospace;color:#f3e4c8;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,190,120,.18),transparent 60%),
    repeating-linear-gradient(45deg,#5a3424 0 8px,#62392a 8px 16px);
  background-color:#5a3424;
  display:flex;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
#wrap{display:flex;flex-direction:column;align-items:center;padding:16px 8px 24px;gap:14px}
.console{
  position:relative;
  background:linear-gradient(170deg,var(--shell-l),var(--shell) 40%,var(--shell-d));
  border-radius:60px 60px 70px 70px / 50px 50px 90px 90px;
  padding:26px 26px 18px;
  box-shadow:0 18px 0 #3b2219,0 24px 40px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.7), inset 0 -6px 0 rgba(0,0,0,.08);
}
.shoulders{position:absolute;top:-10px;left:40px;right:40px;display:flex;justify-content:space-between;pointer-events:none}
.sh{pointer-events:auto;width:90px;height:22px;border-radius:14px 14px 4px 4px;background:#b9a688;border:none;
  font-family:inherit;color:#6d5a44;font-size:11px;box-shadow:0 -3px 0 #d8c8aa inset}
.face{display:grid;grid-template-columns:auto auto auto;grid-template-areas:"l s r";align-items:center;gap:18px}
.leftc{grid-area:l}.screenc{grid-area:s}.rightc{grid-area:r}
.bezel{background:var(--bez);border-radius:14px 14px 30px 14px;padding:10px 18px 8px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.ledrow{display:flex;align-items:center;gap:6px;font-size:7px;color:#9d8a80;margin-bottom:6px}
.led{width:7px;height:7px;border-radius:50%;background:#ff4b2b;box-shadow:0 0 8px #ff4b2b;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35;box-shadow:0 0 2px #ff4b2b}}
.screen{position:relative;background:#000;line-height:0}
#canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:crosshair}
#crt{position:absolute;inset:0;pointer-events:none;display:none}
#crt.on{display:block;
  background:
    repeating-linear-gradient(to bottom,transparent 0 50%,rgba(0,0,0,.17) 50% 100%),
    radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);
  animation:flick .12s steps(2) infinite}
@keyframes flick{50%{opacity:.93}}
.brand{text-align:center;font-size:10px;color:#c9b8ae;margin-top:7px;letter-spacing:2px}
.brand b{color:#f2a03c;font-style:italic}
.dpad{display:grid;grid-template-columns:34px 34px 34px;grid-template-rows:34px 34px 34px;
  grid-template-areas:". u ." "l m r" ". d .";filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.d{background:#3d302c;border:none;padding:0}
.d.up{grid-area:u;border-radius:6px 6px 0 0}.d.down{grid-area:d;border-radius:0 0 6px 6px}
.d.left{grid-area:l;border-radius:6px 0 0 6px}.d.right{grid-area:r;border-radius:0 6px 6px 0}
.d.mid{grid-area:m;background:#3d302c;position:relative}
.d.mid:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#33282a}
.ab{display:flex;gap:12px;transform:rotate(-22deg);background:rgba(0,0,0,.07);padding:10px;border-radius:40px}
.abwrap:first-child{margin-top:26px}
.round{width:52px;height:52px;border-radius:50%;border:none;font-family:inherit;font-size:16px;color:#f5d6c8;
  background:radial-gradient(circle at 35% 30%,#e8664c,var(--tomato) 60%,#8f2c1d);box-shadow:0 5px 0 #6a2216}
.pills{display:flex;justify-content:center;gap:34px;margin-top:14px}
.pills div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8px;color:#8a7558;transform:rotate(-18deg)}
.pill{width:46px;height:12px;border-radius:8px;border:none;background:#8f8073;box-shadow:0 3px 0 #5d5147}
.grille{position:absolute;right:46px;bottom:26px;display:flex;gap:5px;transform:rotate(-25deg)}
.grille i{width:4px;height:26px;border-radius:3px;background:rgba(80,55,40,.35)}
.btn{cursor:pointer;transition:transform .05s}
.btn.down,.btn:active{transform:translateY(3px);filter:brightness(.88)}
.round.down,.round:active{box-shadow:0 2px 0 #6a2216}
#controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:9px}
.tog{font-family:inherit;font-size:10px;background:#f3e4c8;color:#4a2a1e;border:2px solid #2a1a16;border-radius:6px;padding:6px 10px;box-shadow:0 3px 0 #2a1a16;cursor:pointer}
.tog:active{transform:translateY(2px);box-shadow:0 1px 0 #2a1a16}
.keys{opacity:.75;text-align:center}
footer a{color:#f2a03c;font-size:11px;text-decoration:none;border-bottom:1px dashed #f2a03c}
@media (max-width:760px){
  .console{padding:20px 14px 16px;border-radius:30px 30px 50px 50px}
  .face{grid-template-columns:1fr 1fr;grid-template-areas:"s s" "l r";gap:14px}
  .leftc{justify-self:center}.rightc{justify-self:center}
  .bezel{padding:8px 8px 6px}
  .shoulders{left:20px;right:20px}
  .grille{display:none}
}