/* MASKERAS ARCADE — shared UI for game pages. Creato da Max Casu */
:root {
  --bg: #0b0a14;
  --bg2: #15122a;
  --ink: #f6eedd;
  --ink-dim: #b9ad98;
  --bronze: #e0a040;
  --bronze-hi: #ffd88a;
  --red: #d8302c;
  --glass: rgba(24, 20, 40, .72);
  --line: rgba(255, 216, 138, .22);
  --pad-h: min(36vh, 270px);
  --side-w: min(28vw, 240px);
  --btn: 82px;
  --dpad: min(190px, calc(var(--pad-h) - 34px));
  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ctrl-S { --btn: 70px; --dpad: min(160px, calc(var(--pad-h) - 34px)); }
.ctrl-L { --btn: 96px; --dpad: min(220px, calc(var(--pad-h) - 24px)); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); }

body.game-page {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(120% 70% at 50% 0%, #2a1d3d 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #3a1a10 0%, transparent 60%),
    var(--bg);
}

.g-app {
  position: fixed; inset: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top" "stage";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.g-pad { display: none; }

/* Touch — portrait: controls panel BELOW the playfield */
body.touch .g-app {
  grid-template-rows: auto 1fr var(--pad-h);
  grid-template-areas: "top" "stage" "pad";
}
body.touch .g-pad {
  grid-area: pad;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 10px 22px 14px;
  background: linear-gradient(180deg, rgba(10, 8, 20, .0), rgba(10, 8, 20, .65) 30%);
  border-top: 1px solid var(--line);
}
body.touch .g-app.no-buttons .g-pad { justify-content: center; }
body.touch .g-app.no-buttons .g-zone-r { display: none; }
.g-zone { display: flex; align-items: center; justify-content: center; gap: 18px; }
.g-zone-r { flex-wrap: wrap; max-width: calc(var(--btn) * 2 + 40px); }

/* Touch — landscape: controls in the side gutters */
@media (orientation: landscape) {
  body.touch .g-app {
    --pad-h: 100%;
    --dpad: min(180px, 26vw, 62vh);
    grid-template-rows: auto 1fr;
    grid-template-columns: var(--side-w) 1fr var(--side-w);
    grid-template-areas: "top top top" "padl stage padr";
  }
  body.touch .g-pad { display: contents; }
  body.touch .g-zone-l { grid-area: padl; }
  body.touch .g-zone-r { grid-area: padr; flex-direction: column-reverse; max-width: none; }
  body.touch .g-app.no-buttons .g-zone-r { display: flex; }
  .ctrl-L .g-app { --dpad: min(210px, 28vw, 70vh); }
}

/* Top bar */
.g-top {
  grid-area: top;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  min-height: 52px;
  background: linear-gradient(180deg, rgba(20, 14, 34, .95), rgba(20, 14, 34, .6));
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.g-title {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: 1px;
  color: var(--bronze-hi);
  text-shadow: 0 2px 0 #6a3a10, 0 0 12px rgba(255, 170, 60, .4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-tools { display: flex; gap: 8px; }
.g-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; height: 42px; padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  font: 600 14px var(--font-ui);
  text-decoration: none; cursor: pointer;
  transition: background .15s, transform .1s;
}
.g-ibtn:hover { background: rgba(255, 216, 138, .16); }
.g-ibtn:active { transform: scale(.94); }
.g-ibtn svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .g-back span { display: none; } .g-title { font-size: 10px; } }

/* Stage & canvas */
.g-stage {
  grid-area: stage;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0; overflow: hidden;
}
.g-screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #2a2036, 0 0 0 5px #120e1c, 0 18px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(224, 160, 64, .12);
}
.g-canvas { display: block; outline: none; image-rendering: pixelated; }
.g-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.g-screen.scan-on .g-scan {
  opacity: 1;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* D-pad */
.dpad {
  width: var(--dpad); height: var(--dpad);
  position: relative; touch-action: none;
  flex: none;
}
.dpad-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 30%, transparent 31%),
    radial-gradient(circle at 35% 30%, rgba(255, 216, 138, .18), rgba(30, 22, 46, .85) 70%);
  border: 2px solid rgba(255, 216, 138, .35);
  box-shadow: inset 0 -6px 16px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
}
.dpad .arw {
  position: absolute; width: 0; height: 0;
  border: 13px solid transparent;
  opacity: .75; transition: opacity .08s, filter .08s;
}
.dpad .arw.up { left: 50%; top: 9%; transform: translateX(-50%); border-bottom: 18px solid var(--bronze-hi); border-top: 0; }
.dpad .arw.down { left: 50%; bottom: 9%; transform: translateX(-50%); border-top: 18px solid var(--bronze-hi); border-bottom: 0; }
.dpad .arw.left { top: 50%; left: 9%; transform: translateY(-50%); border-right: 18px solid var(--bronze-hi); border-left: 0; }
.dpad .arw.right { top: 50%; right: 9%; transform: translateY(-50%); border-left: 18px solid var(--bronze-hi); border-right: 0; }
.dpad[data-dir="up"] .arw.up, .dpad[data-dir="down"] .arw.down,
.dpad[data-dir="left"] .arw.left, .dpad[data-dir="right"] .arw.right { opacity: 1; filter: drop-shadow(0 0 8px #ffb84a); }
.dpad-knob {
  position: absolute; left: 50%; top: 50%;
  width: 34%; height: 34%; margin: -17% 0 0 -17%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c8, #c88a34 55%, #6a3e12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 -3px 6px rgba(0, 0, 0, .35);
  transition: transform .06s;
  pointer-events: none;
}

/* Action buttons */
.tbtn {
  width: var(--btn); height: var(--btn); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #c02420 60%, #6a0e10);
  border: 2px solid rgba(255, 220, 200, .5);
  box-shadow: 0 6px 0 #4a0a0a, 0 10px 20px rgba(0, 0, 0, .5);
  color: #fff; font: 700 13px var(--font-ui); letter-spacing: .5px;
  touch-action: none; flex: none;
  transition: transform .06s, box-shadow .06s;
}
.tbtn.active { transform: translateY(5px); box-shadow: 0 1px 0 #4a0a0a, 0 4px 10px rgba(0, 0, 0, .5); filter: brightness(1.15); }
.tbtn-b { background: radial-gradient(circle at 35% 30%, #ffe1a0, #c88a2a 60%, #5a3a0a); box-shadow: 0 6px 0 #3a2404, 0 10px 20px rgba(0, 0, 0, .5); }

/* Overlays */
.g-overlay { position: absolute; inset: 0; display: none; z-index: 4; }
.g-overlay.show { display: flex; align-items: center; justify-content: center; animation: ovIn .25s ease-out; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.ov-poster { position: absolute; inset: -4%; background-size: cover; background-position: center 30%; animation: kb 18s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-2%); } }
.ov-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 16, .15) 0%, rgba(8, 6, 16, .35) 40%, rgba(8, 6, 16, .92) 78%); }
.g-overlay.is-how, .g-overlay.is-pause, .g-overlay.is-over { background: rgba(8, 6, 18, .82); backdrop-filter: blur(3px); }
.ov-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px; width: 100%; max-height: 100%;
  text-align: center;
}
.ov-title { margin-top: auto; padding-bottom: 16px; }
.g-overlay.is-title { align-items: flex-end; }
.ov-logo {
  font-family: var(--font-pixel); font-size: clamp(16px, 5.4vmin, 30px); line-height: 1.25;
  color: #ffd36a;
  text-shadow: 0 3px 0 #b0400c, 0 6px 0 #4a1404, 0 0 24px rgba(255, 160, 40, .6);
}
.ov-sub { font-size: 14px; color: var(--ink-dim); max-width: 36ch; }
.ov-best { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-dim); letter-spacing: 1px; }
.ov-best b { color: var(--bronze-hi); }
.ov-credit { font-size: 12px; color: var(--bronze-hi); opacity: .85; letter-spacing: .5px; margin-top: 4px; font-style: italic; }
.ov-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 200px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; border: 0; cursor: pointer;
  font: 800 16px var(--font-ui); letter-spacing: 1px; color: #2a1404; text-decoration: none;
  background: linear-gradient(180deg, #ffe6a0, #f0a83a 55%, #c0701a);
  box-shadow: 0 4px 0 #7a3e0a, 0 10px 24px rgba(240, 160, 60, .35);
  transition: transform .1s, filter .15s;
}
.ov-btn svg { width: 18px; height: 18px; }
.ov-btn:hover { filter: brightness(1.08); }
.ov-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a3e0a; }
.ov-btn.ghost { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; min-height: 42px; }
.ov-btn.small { min-width: 0; min-height: 40px; padding: 0 14px; font-size: 14px; }
.ov-play { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 4px 0 #7a3e0a, 0 0 34px rgba(255, 190, 80, .7); } }
.ov-body h2 { font-family: var(--font-pixel); font-size: 18px; color: var(--bronze-hi); margin: 4px 0 6px; text-shadow: 0 3px 0 #6a2a08; }
.ov-body h2.win { color: #9cff8a; text-shadow: 0 3px 0 #1a5a10; }
.g-scroll { overflow-y: auto; touch-action: pan-y; }
.ov-goal { font-size: 14px; line-height: 1.45; color: var(--ink); max-width: 40ch; margin: 0; }
.ov-extra { font-size: 13px; color: var(--ink-dim); max-width: 40ch; margin: 0; line-height: 1.4; }
.ov-ctrls { display: flex; flex-direction: column; gap: 6px; width: min(100%, 340px); }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 13px; text-align: right; }
.kbd { font-family: var(--font-pixel); font-size: 9px; color: #2a1404; background: var(--bronze-hi); padding: 6px 7px; border-radius: 6px; box-shadow: 0 2px 0 #8a5a1a; white-space: nowrap; }
.ov-score { font-family: var(--font-pixel); font-size: 30px; color: #fff; text-shadow: 0 3px 0 #8a3a0a; }
.ov-name { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-dim); }
.ov-name div { display: flex; gap: 8px; }
.ov-name input {
  width: 96px; height: 40px; text-align: center; text-transform: uppercase;
  font: 16px var(--font-pixel); color: var(--bronze-hi);
  background: rgba(0, 0, 0, .4); border: 2px solid var(--line); border-radius: 10px;
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.ov-table ol { margin: 0; padding: 0; list-style: none; width: min(260px, 80vw); font-family: var(--font-pixel); font-size: 10px; counter-reset: r; }
.ov-table li { display: flex; justify-content: space-between; padding: 4px 8px; counter-increment: r; color: var(--ink-dim); }
.ov-table li::before { content: counter(r) '.'; width: 28px; text-align: left; }
.ov-table li span { flex: 1; text-align: left; }
.ov-table li.hl { color: var(--bronze-hi); background: rgba(255, 216, 138, .1); border-radius: 6px; }

/* ---------- extra control types ---------- */
body.touch.no-pad .g-app { grid-template-rows: auto 1fr; grid-template-areas: "top" "stage"; grid-template-columns: 1fr; }
body.touch.no-pad .g-pad { display: none; }
@media (orientation: landscape) {
  body.touch.no-pad .g-app { grid-template-areas: "top" "stage"; }
}
.stick-zone { position: relative; flex: 1; align-self: stretch; min-width: 150px; touch-action: none; }
@media (orientation: landscape) { body.touch .stick-zone { width: 100%; height: 100%; } }
.stick-base {
  position: absolute; width: min(150px, var(--dpad)); height: min(150px, var(--dpad));
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 216, 138, .16), rgba(30, 22, 46, .8) 70%);
  border: 2px solid rgba(255, 216, 138, .35);
  box-shadow: inset 0 -6px 16px rgba(0, 0, 0, .5);
  opacity: .7; transition: opacity .15s; pointer-events: none;
}
.stick-zone.active .stick-base { opacity: 1; transition: none; }
.stick-knob {
  position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c8, #c88a34 55%, #6a3e12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55);
}
.stick-hint { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; color: var(--ink-dim); opacity: .6; pointer-events: none; }
.drag-zone { flex: 1; align-self: stretch; display: flex; align-items: center; touch-action: none; }
.drag-track {
  flex: 1; height: min(110px, 70%); border-radius: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  background: repeating-linear-gradient(90deg, rgba(255, 216, 138, .08) 0 2px, transparent 2px 22px), rgba(30, 22, 46, .75);
  border: 2px solid rgba(255, 216, 138, .35); color: var(--bronze-hi); font: 700 13px var(--font-ui); letter-spacing: 2px;
}
.drag-zone.active .drag-track { border-color: var(--bronze-hi); box-shadow: 0 0 20px rgba(255, 180, 70, .35); }
@media (orientation: landscape) { body.touch .drag-zone { width: 100%; padding: 0 10px; } body.touch .drag-track { height: 60%; flex-direction: row; } }
.tbtn-dir { width: calc(var(--btn) * 1.05); height: calc(var(--btn) * 1.05); border-radius: 22px; background: radial-gradient(circle at 35% 30%, #ffe1a0, #c88a2a 60%, #5a3a0a); box-shadow: 0 6px 0 #3a2404, 0 10px 20px rgba(0, 0, 0, .5); font-size: 24px; }
.tbtn.wide { width: calc(var(--btn) * 1.35); border-radius: 26px; }
.pad-lr .g-zone-l, .pad-none .g-zone-l { gap: 16px; }
@media (orientation: landscape) { body.touch .pad-lr .g-zone-l { flex-direction: row; gap: 12px; } body.touch .pad-lr .tbtn-dir { width: min(calc(var(--btn) * 1.05), 11vw); } }
/* keep every grid track inside the viewport */
.g-app { grid-template-columns: minmax(0, 1fr); }
.g-top, .g-pad, .g-stage { min-width: 0; }
.g-zone-r { flex: none; }
.drag-zone, .stick-zone { min-width: 0; }
@media (orientation: landscape) {
  body.touch .g-app:not(.x) { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); }
  body.touch.no-pad .g-app:not(.x) { grid-template-columns: minmax(0, 1fr); }
}
/* portrait: stack action buttons vertically so nothing leaves the screen */
body.touch .g-zone-r { flex-direction: column-reverse; flex-wrap: nowrap; gap: 14px; max-width: none; }
body.touch .g-app { --dpad: min(190px, calc(var(--pad-h) - 34px), 48vw); }
body.touch .g-pad { padding-left: 16px; padding-right: 16px; }
@media (max-height: 700px) and (orientation: portrait) { body.touch .g-app { --btn: 70px; } }