/* GH Games: shared look for the 3D arcade classics (games built on arcade3d.js) */
:root{
  color-scheme: dark;
  --bg:#0f1a33; --panel:#18264a; --panel2:#213260; --line:#344a85;
  --ink:#f3f7ff; --muted:#a9b8dd; --gold:#ffc93c; --orange:#ff8a3d; --pink:#ff6fa3; --green:#5fd36a; --red:#ff5d5d; --blue:#4aa8ff;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
button,a,.stage,canvas{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.stage,.stage *,button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{background:var(--bg);margin:0}
body{font-family:var(--body);color:var(--ink);padding:14px 14px 40px;font-size:15px}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.links{display:flex;gap:16px;flex-wrap:wrap}
.home{font-weight:900;color:var(--muted);text-decoration:none;font-size:14px}
.home:hover{color:var(--gold)}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,46px);margin:0;line-height:1;color:var(--gold);text-shadow:0 3px 0 #b3541e,0 6px 0 rgba(0,0,0,.3)}
h1 small{font-size:.45em;color:#fff;margin-left:8px;text-shadow:none;background:var(--pink);border-radius:8px;padding:2px 8px;vertical-align:middle}
.hud{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:6px 12px;display:flex;flex-direction:column;align-items:flex-start;min-width:64px}
.chip span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.chip b{font-size:17px;font-weight:900}
.stage{position:relative;touch-action:none;border-radius:20px;overflow:hidden;border:3px solid var(--line);background:#111;width:100%;aspect-ratio:16/10;max-height:calc(100vh - 150px);min-height:320px}
.stage.tall{aspect-ratio:3/4;max-width:640px;margin:0 auto}
.stage.square{aspect-ratio:1/1;max-width:760px;margin:0 auto}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.stage:fullscreen{border-radius:0;border:0;max-height:none;aspect-ratio:auto}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center;background:linear-gradient(180deg,rgba(8,14,32,.35),rgba(8,14,32,.86));overflow:auto;z-index:20}
.ov[hidden]{display:none}
.ov h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,8vw,68px);line-height:.95;margin:0;color:var(--gold);text-shadow:0 4px 0 #b3541e,0 9px 0 rgba(0,0,0,.35)}
.ov p{margin:0;max-width:560px;font-weight:700;color:#dfe7ff;line-height:1.35}
.btn{font-family:var(--display);font-size:22px;border:none;border-radius:16px;padding:11px 30px;color:#3b2200;background:linear-gradient(#ffe27a,#ffb300);box-shadow:0 6px 0 #a86a00,0 10px 18px rgba(0,0,0,.4);cursor:pointer;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #a86a00}
.btn.alt{background:linear-gradient(#bfe6ff,#6cc0ff);color:#0b2a44;box-shadow:0 6px 0 #2f78a8}
.btn.pink{background:linear-gradient(#ffb3cf,#ff6fa3);color:#3d0c22;box-shadow:0 6px 0 #a8406d}
.btn.green{background:linear-gradient(#a8f0ae,#4cc95a);color:#0d3312;box-shadow:0 6px 0 #23803a}
.btn.small{font-size:16px;padding:7px 14px;border-radius:12px}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.seg button{font-family:var(--body);font-weight:900;font-size:15px;background:var(--panel2);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:7px 14px;cursor:pointer}
.seg button.on{background:var(--gold);color:#3b2200;border-color:#ffe27a}
.seg button:disabled{opacity:.4;cursor:default}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(20,14,40,.92);border:2px solid var(--gold);border-radius:14px;padding:8px 14px;font-weight:900;max-width:88%;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s;font-size:clamp(13px,2vw,17px);z-index:30}
.toast.on{opacity:1}
.ingame{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:15}
.ingame button{font-family:var(--body);font-weight:900;font-size:14px;border:none;border-radius:10px;padding:8px 12px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.score3d{position:absolute;right:12px;top:10px;z-index:15;font-family:var(--display);font-size:clamp(22px,4vw,36px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5);pointer-events:none;text-align:right;line-height:1}
.score3d small{display:block;font-family:var(--body);font-weight:900;font-size:13px;color:var(--gold)}
.tbtn{position:absolute;z-index:16;width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.6);background:rgba(255,255,255,.18);color:#fff;font-family:var(--display);font-size:20px;display:flex;align-items:center;justify-content:center;touch-action:none}
.tbtn.down{background:rgba(255,201,60,.6)}
.shopbox{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:12px 16px;width:min(580px,100%);text-align:left}
.shopbox h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold)}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:7px 10px;font-weight:800;font-size:14px;margin:5px 0}
.item .c{color:var(--gold)}
.help{color:var(--muted);font-weight:700;font-size:14px;margin:0;line-height:1.45}
.help a{color:var(--gold)}
.stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-weight:900}
.stats div{background:rgba(255,255,255,.08);border-radius:12px;padding:6px 12px}
.stats b{color:var(--gold)}
[hidden]{display:none!important}