:root{--lcd-bg:#9BBC0F;--lcd-px:#1F2408;--body:#2b2e31;--body2:#1b1d1f;--silver:#c9ccd0;--silver2:#8d9197;--ink:#23262a}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0d0e10}
body{display:flex;justify-content:center;font-family:Arial,Helvetica,sans-serif;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.phone{position:relative;width:100%;max-width:560px;height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:linear-gradient(90deg,#17191b,#2b2e31 12%,#2b2e31 88%,#17191b);box-shadow:0 0 40px #000}
.arcade-link{position:absolute;top:calc(4px + env(safe-area-inset-top));left:10px;z-index:5;font-size:9px;letter-spacing:1.5px;color:#7d838a;text-decoration:none;opacity:.7}
.arcade-link:hover{opacity:1}
.top{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:20px 1.5% 14px;
  background:linear-gradient(#c3c6ca,#9a9ea4 40%,#6b6f75);border-bottom:3px solid #111;border-radius:0 0 40px 40px/0 0 28px 28px;box-shadow:inset 0 1px 0 #fff8}
.brand{font-weight:800;font-size:clamp(11px,3.4vw,14px);letter-spacing:3px;color:#2a2d31;text-shadow:0 1px 0 #fff7;margin-bottom:8px}
.lcd-frame{container-type:size;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lcd-frame::before{content:none}
.lcd-wrap{position:relative;flex:none;background:var(--lcd-bg);--lh:48;
  border:6px solid #1a1c1e;border-radius:6px;box-shadow:0 0 0 3px #4a4e53,inset 0 0 14px rgba(31,36,8,.45),0 2px 6px #0008;overflow:hidden}
.lcd-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.lcd-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(155,188,15,.55) 1px,transparent 1px),linear-gradient(to bottom,rgba(155,188,15,.55) 1px,transparent 1px);
  background-size:calc(100%/84) calc(100%/var(--lh))}
.keypad{position:relative;container-type:size;flex:0 0 32%;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px 0 22px}
.key{position:relative;transition:transform .06s,box-shadow .06s,filter .06s;will-change:transform}
.dpad{position:relative;justify-self:center;width:min(58%,88cqh,230px);height:auto;aspect-ratio:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e6e8eb,#a4a9af 60%,#6f747a);box-shadow:0 4px 0 #3c4046,0 6px 10px #000a,inset 0 1px 0 #fff}
.dp{background:transparent;display:flex;align-items:center;justify-content:center}
.dp.up{grid-area:1/2}.dp.left{grid-area:2/1}.dp.ok{grid-area:2/2;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0f2f4,#9ba0a6);box-shadow:0 2px 0 #4c5056,inset 0 1px 0 #fff}
.dp.right{grid-area:2/3}.dp.down{grid-area:3/2}
.dp b{width:0;height:0;border:9px solid transparent;opacity:.8}
.dp.up b{border-bottom:10px solid var(--ink);border-top:0}
.dp.down b{border-top:10px solid var(--ink);border-bottom:0}
.dp.left b{border-right:10px solid var(--ink);border-left:0}
.dp.right b{border-left:10px solid var(--ink);border-right:0}
.dp.pressed,.dp:active{filter:brightness(.7);transform:scale(.92)}
.pressed,.key:active{transform:translateY(3px) scale(.96);filter:brightness(.82)}
.key.pressed:not(.dp),.key:not(.dp):active{box-shadow:0 0 0 #000,inset 0 2px 5px #0006}
.dp.ok.pressed,.dp.ok:active{box-shadow:inset 0 2px 5px #0007}
.key:focus-visible{outline:2px solid #2d7bff;outline-offset:2px}
@media (max-height:560px){.top{padding-top:16px}.brand{margin-bottom:4px}}
@media (hover:hover){.key:hover{filter:brightness(1.07)}.pressed:hover,.key:active:hover{filter:brightness(.82)}}

.round{position:absolute;top:50%;width:clamp(38px,11cqw,48px);aspect-ratio:1;margin-top:calc(clamp(38px,11cqw,48px) / -2);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#e6e8eb,#a4a9af 60%,#6f747a);box-shadow:0 3px 0 #3c4046,0 4px 7px #000a,inset 0 1px 0 #fff}
.round.pause{left:7%}.round.mute{right:7%}
.round i{display:block;position:relative;width:38%;height:38%}
.ic-pause::before,.ic-pause::after{content:"";position:absolute;top:0;bottom:0;width:32%;background:var(--ink);border-radius:1px}
.ic-pause::before{left:6%}.ic-pause::after{right:6%}
.ic-sound{width:46%;height:46%;fill:var(--ink)}
.ic-sound .w{stroke:var(--ink)}
.mute[aria-pressed="true"] .ic-sound{opacity:.4}
.mute[aria-pressed="true"] .ic-sound .w{display:none}
.mute[aria-pressed="true"]::after{content:"";position:absolute;width:56%;height:3px;background:#b2231c;transform:rotate(-45deg);border-radius:2px}
.hint{display:none;position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#7d838a}
@media (hover:hover) and (min-width:700px){.hint{display:block}}