:root{
  --ink:#0e0a14;
  --cab:#241a2e;
  --cab2:#170f1f;
  --gold:#ffcf4a;
  --bone:#f3e2c0;
  --muted:#8f7fa0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(120% 90% at 50% 0%, #3a2440 0%, #150e1d 60%, #0b0710 100%);
  color:var(--bone);
  font-family:"Trebuchet MS",system-ui,-apple-system,sans-serif;
  display:flex;justify-content:center;
  padding:16px;
  -webkit-text-size-adjust:100%;
}

.cab{
  width:100%;max-width:1000px;
  background:linear-gradient(180deg,var(--cab),var(--cab2));
  border:2px solid #3d2e4d;
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding:14px;
}

.cab__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 6px 12px}
.cab__title{font-weight:900;letter-spacing:.14em;font-size:15px;color:var(--gold)}
.cab__title span{color:var(--muted);margin-left:6px}
.cab__sound{
  background:#1b1426;color:var(--muted);border:1px solid #3d2e4d;border-radius:8px;
  padding:7px 12px;font:700 11px/1 inherit;letter-spacing:.08em;cursor:pointer;white-space:nowrap;flex:none;
}
.cab__sound:hover{color:var(--gold);border-color:#5c4670}

.cab__screen{
  background:#000;border-radius:10px;overflow:hidden;
  border:2px solid #0a0710;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9);
}
#screen{display:block;width:100%;height:auto;image-rendering:auto}

/* ------------------------------------------------------------ controles */
.cab__panel{
  margin-top:14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px;
  background:linear-gradient(180deg,#2c2039,#1d1527);
  border:1px solid #3d2e4d;border-radius:14px;
}

.stick{
  position:relative;width:140px;height:140px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #3b2c4e, #241a33);
  border:2px solid #543f6b;touch-action:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.stick__ring{
  position:absolute;inset:16px;border-radius:50%;
  border:1px dashed rgba(255,207,74,.28);
}
.stick__knob{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(180deg,#ffcf4a,#c99a24);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  transition:transform .04s linear;pointer-events:none;
}
.side{display:flex;flex-direction:column;gap:8px}
.start--ghost{background:#241a33;color:var(--muted);font-weight:700}
.start--ghost:active,.start--ghost.is-down{background:var(--gold);color:#1a1222}

.btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn{
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  color:#1a1222;font:900 17px/1 inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;touch-action:none;
  box-shadow:0 5px 0 rgba(0,0,0,.4);
}
.btn small{font-size:8px;letter-spacing:.06em;opacity:.8}
.btn:active,.btn.is-down{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn--a{background:#ff5a6b}
.btn--s{background:#ffcf4a}
.btn--d{background:#4fd6a0}
.btn--z{background:#5b8dd6}
.btn--x{background:#bd83ff}

.start{
  background:#3a2c4c;color:var(--bone);border:1px solid #543f6b;border-radius:8px;
  padding:12px 18px;font:900 12px/1 inherit;letter-spacing:.1em;cursor:pointer;touch-action:none;
}
.start:active,.start.is-down{background:var(--gold);color:#1a1222}

.cab__help{
  margin:12px 4px 2px;font-size:12px;line-height:1.7;color:var(--muted);text-align:center;
}
.cab__help b{color:var(--bone)}

/* ------------------------------------------------------------ telefone */
@media (max-width:760px){
  body{padding:8px}
  .cab{padding:9px;border-radius:14px}
  .cab__panel{grid-template-columns:auto 1fr;gap:10px;padding:10px}
  .start{grid-column:1 / -1;width:100%}
  .dpad{width:120px;height:120px}
  .dpad__b{width:40px;height:40px}
  .dpad__up{left:40px}.dpad__left{top:40px}.dpad__right{left:80px;top:40px}.dpad__down{left:40px;top:80px}
  .btns{gap:8px}
  .btn{width:54px;height:54px;font-size:14px}
  .btn small{font-size:7px}
  .cab__help{font-size:11px;line-height:1.6}
}
@media (max-width:420px){
  .btn{width:48px;height:48px}
  .cab__help{display:none}
}

/* ------------------------------------------------ direcional no telefone */
@media (max-width:760px){
  .stick{width:124px;height:124px}
  .stick__knob{width:48px;height:48px}
  .side{flex-direction:row;gap:8px;grid-column:1 / -1}
  .side .start{flex:1}
}
@media (max-width:420px){
  .stick{width:112px;height:112px}
  .stick__knob{width:44px;height:44px}
}