:root {
  --s: 2;
  --shell-a: #3a1f2a;
  --shell-b: #241219;
  --shell-hi: #5a3040;
  --crimson: #e33b45;
}
* { box-sizing: border-box; }
#play {
  margin: 0; 
  background: radial-gradient(ellipse at 50% 30%, #2a1830 0%, #120d18 60%, #08060c 100%);
  color: #b9a9c0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#play { display: flex; align-items: center; justify-content: center; touch-action: none; }
#play #app { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#play canvas {
  display: block;
  width: calc(256px * var(--s));
  height: calc(192px * var(--s));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  touch-action: none;
}
#play #ds { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
#play .half {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--shell-hi) 0%, var(--shell-a) 18%, var(--shell-b) 100%);
  padding: calc(6px * var(--s)) calc(10px * var(--s));
  gap: calc(8px * var(--s));
  border: 1px solid #6a3a4a;
}
#play .top-half { border-radius: calc(10px * var(--s)) calc(10px * var(--s)) calc(3px * var(--s)) calc(3px * var(--s)); }
#play .bottom-half { border-radius: calc(3px * var(--s)) calc(3px * var(--s)) calc(12px * var(--s)) calc(12px * var(--s)); }
#play .screen-wrap {
  padding: calc(3px * var(--s));
  background: #0b0a0e;
  border-radius: calc(3px * var(--s));
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #4a2a36, inset 0 2px 6px rgba(0,0,0,.8);
}
#play .speaker { display: grid; grid-template-columns: repeat(2, calc(3px * var(--s))); gap: calc(3px * var(--s)); width: calc(50px * var(--s)); justify-content: center; }
#play .speaker i { display: block; width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #120a0e; box-shadow: inset 0 1px 1px rgba(0,0,0,.9), 0 1px 0 #5a3040; }
#play .hinge {
  display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--s));
  height: calc(12px * var(--s));
  width: calc(100% - calc(30px * var(--s)));
  background: linear-gradient(180deg, #1a0e14, #3a2230 50%, #1a0e14);
  border-left: 1px solid #000; border-right: 1px solid #000;
}
#play .hinge .brand { font-size: calc(5px * var(--s)); letter-spacing: .3em; color: #8a5a6a; font-weight: bold; }
#play .led { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #3a1820; }
#play .led.on { background: #ff4a5a; box-shadow: 0 0 6px #ff4a5a; }
#play .led.charge { background: #4aff8a; box-shadow: 0 0 6px #4aff8a; }
#play .pad { width: calc(50px * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(14px * var(--s)); }
#play .pad button { font-family: inherit; cursor: pointer; touch-action: none; }
#play .dpad { position: relative; width: calc(40px * var(--s)); height: calc(40px * var(--s)); }
#play .dpad button, #play .dpad .d-mid {
  position: absolute; width: calc(13.5px * var(--s)); height: calc(13.5px * var(--s));
  background: linear-gradient(180deg, #2a2a30, #121216); border: 1px solid #000; padding: 0;
  box-shadow: inset 0 1px 0 #3a3a44;
}
#play .dpad button:active, #play .dpad button.held { background: #0a0a0c; }
#play .d-up { left: calc(13.25px * var(--s)); top: 0; border-radius: 3px 3px 0 0; }
#play .d-down { left: calc(13.25px * var(--s)); bottom: 0; border-radius: 0 0 3px 3px; }
#play .d-left { top: calc(13.25px * var(--s)); left: 0; border-radius: 3px 0 0 3px; }
#play .d-right { top: calc(13.25px * var(--s)); right: 0; border-radius: 0 3px 3px 0; }
#play .d-mid { left: calc(13.25px * var(--s)); top: calc(13.25px * var(--s)); border: none !important; }
#play .abxy { position: relative; width: calc(42px * var(--s)); height: calc(42px * var(--s)); }
#play .face {
  position: absolute; width: calc(13px * var(--s)); height: calc(13px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a52, #18181c 70%); border: 1px solid #000;
  color: #8a8a96; font-size: calc(5px * var(--s)); font-weight: bold; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
#play .face:active, #play .face.held { background: #0a0a0c; color: #fff; }
#play .fa { right: 0; top: calc(14.5px * var(--s)); color: #ff8a92; }
#play .fb { left: calc(14.5px * var(--s)); bottom: 0; color: #ffd27a; }
#play .fx { left: calc(14.5px * var(--s)); top: 0; }
#play .fy { left: 0; top: calc(14.5px * var(--s)); opacity: .5; }
#play .pill {
  font-size: calc(4px * var(--s)); letter-spacing: .15em; color: #9a7a88;
  background: linear-gradient(180deg, #2a1a22, #140c10); border: 1px solid #000;
  border-radius: 999px; padding: calc(2px * var(--s)) calc(5px * var(--s));
}
#play .pill:active, #play .pill.held { color: #fff; background: #0a0608; }
#play #help { font-size: 11px; opacity: .55; text-align: center; padding: 0 16px; }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 521px) {
#play .speaker, #play #help { display: none; }
#play .half { padding: calc(4px * var(--s)); }
#play .bottom-half { flex-wrap: wrap; justify-content: space-between; row-gap: 12px; padding-bottom: 14px; }
#play .bottom-half .screen-wrap { order: -1; margin: 0 auto; }
#play .bottom-half::after { content: ""; order: 0; flex-basis: 100%; height: 0; }
#play .pad { order: 1; --s: 2.7; gap: 12px; width: auto; padding: 0 6px; }

}
@media (orientation: landscape) and (max-height: 520px) {
#play #ds { flex-direction: row; align-items: center; gap: 10px; filter: none; }
#play #ds > .half { display: contents; }
#play .hinge, #play .speaker, #play #help { display: none; }
#play .pad { --s: 2.3; gap: 14px; width: auto; }
#play .pad-left { order: 0; }
#play .top-half .screen-wrap { order: 1; }
#play .bottom-half .screen-wrap { order: 2; }
#play .pad-right { order: 3; }

}