/* Stile comune giochi retrò VAB */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body{font-family:'Press Start 2P',monospace;color:#fff}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
body.portrait #stage{align-items:flex-start;padding-top:env(safe-area-inset-top)}
#game{image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#000}
.ovl{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10;padding:12px}
.ovl.on{display:flex}
#ovMenu{align-items:flex-end;padding-bottom:max(4vh,14px)}
.panel{background:rgba(16,24,56,.92);border:4px solid #fff;box-shadow:0 0 0 4px #1a1020,8px 8px 0 4px rgba(0,0,0,.5);padding:16px;max-width:600px;width:100%;max-height:100%;overflow:auto;text-align:center;line-height:1.8;font-size:10px}
.panel h2{font-size:16px;color:#f8d830;text-shadow:3px 3px 0 #b84808;margin-bottom:10px}
.panel p{margin:6px 0}
.hl{color:#f8d830}
.or{color:#f87818}
.dim{color:#a0a8c8;font-size:8px}
.btn{font-family:inherit;font-size:11px;background:#f8d830;color:#1a1020;border:none;padding:12px 14px;margin:7px;cursor:pointer;box-shadow:inset -4px -4px 0 #c89810,inset 4px 4px 0 #fff8a0,0 0 0 3px #1a1020;min-width:170px;display:inline-block;text-decoration:none}
.btn:active{transform:translateY(2px)}
.btn.sec{background:#3c78f8;color:#fff;box-shadow:inset -4px -4px 0 #1c3c98,inset 4px 4px 0 #8cb8ff,0 0 0 3px #1a1020}
.btn.red{background:#e83020;color:#fff;box-shadow:inset -4px -4px 0 #901818,inset 4px 4px 0 #ff8870,0 0 0 3px #1a1020}
.btn.sel{background:#f87818;color:#fff;box-shadow:inset -4px -4px 0 #b84808,inset 4px 4px 0 #ffc080,0 0 0 3px #fff}
.btn.sm{min-width:0;font-size:9px;padding:9px 10px;margin:4px}
input{font-family:inherit;font-size:13px;padding:10px;width:100%;max-width:300px;border:3px solid #fff;background:#000;color:#f8d830;text-align:center;text-transform:uppercase;margin:6px 0;outline:none;user-select:text;-webkit-user-select:text}
table{width:100%;border-collapse:collapse;font-size:9px;margin:8px 0}
td,th{padding:6px 4px;text-align:left;white-space:nowrap}
td.n{max-width:180px;overflow:hidden;text-overflow:ellipsis}
th{color:#f8d830;border-bottom:2px solid #f8d830}
td.r,th.r{text-align:right}
tr:nth-child(even) td{background:rgba(255,255,255,.06)}
tr.me td{background:#f87818 !important;color:#fff}
tr.p1 td:first-child{color:#f8d830}tr.p2 td:first-child{color:#d0d8e8}tr.p3 td:first-child{color:#e09050}
#touch{position:fixed;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:10px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));z-index:4;pointer-events:none}
body.touch.playing #touch{display:flex}
body.portrait #touch{align-items:center;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.grp{display:flex;align-items:flex-end;gap:12px}
.tb{pointer-events:auto;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.16);border:3px solid rgba(255,255,255,.5);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;touch-action:none;font-family:sans-serif}
.tb.down{background:rgba(248,216,48,.55)}
.tb.w{background:rgba(60,120,248,.35)}
body.portrait .tb{width:82px;height:82px;font-size:28px}
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:2px}
.dpad .tb,body.portrait .dpad .tb{width:58px;height:58px;font-size:20px;border-radius:12px}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
body.portrait .dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}
body.portrait .dpad .tb{width:64px;height:64px}
@media (max-height:500px){
  .panel{padding:8px 10px;font-size:8px;line-height:1.6}
  .panel h2{font-size:12px;margin-bottom:4px}
  .btn{padding:8px 10px;min-width:0;font-size:9px;margin:4px}
  #ovMenu .panel{max-width:560px}
  table{font-size:8px}td,th{padding:3px}
  .dpad{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px)}
  .dpad .tb{width:50px;height:50px}
}