/* VRMatch Arcade — shared game chrome (extends ../../assets/css/style.css) */
/* polish pass 2026-10-08: prevent double-tap zoom / scroll interference on game surfaces */
.g-stage,.g-hud{touch-action:manipulation}
.g-stage canvas{touch-action:none}
/* layout fix (2026-10-06): header.nav is position:sticky;top:0 with a 66px inner bar
   + 1px border (= 67px, no CSS var exists). Keep .g-main clear of it with breathing
   room + safe-area-inset-top for notched phones. Sticky keeps the header in flow,
   so this is pure clearance — it cannot break desktop layout. */
.g-main{padding:calc(67px + 20px + env(safe-area-inset-top,0px)) 0 70px;max-width:860px}
.g-crumbs{margin-bottom:10px}
.g-crumbs a{color:var(--muted);text-decoration:none;font-size:.9rem}
.g-crumbs a:hover{color:var(--cyan)}
.g-head h1{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-bottom:.2em}
.g-sub{color:var(--muted);max-width:38rem}
.g-hud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0}
.hchip{background:rgba(8,12,26,.72);border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-family:var(--font-d);font-weight:600;font-size:.92rem}
.hchip b{color:var(--amber)}
.g-btn{font-family:var(--font-d);font-weight:700;border:0;cursor:pointer;border-radius:999px;padding:.7rem 1.5rem;font-size:1rem;background:linear-gradient(100deg,var(--cyan),var(--violet) 60%,var(--magenta));color:#06121f;box-shadow:0 6px 24px rgba(56,225,255,.3)}
.g-btn:active{transform:scale(.96)}
.g-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.g-stage{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:calc(var(--r) + 6px);padding:22px;overflow:hidden;margin-bottom:18px}
.g-how{border:1px solid var(--line);border-radius:var(--r);padding:6px 18px;background:rgba(16,24,48,.5)}
.g-how summary{cursor:pointer;font-family:var(--font-d);font-weight:600;padding:12px 0;color:var(--cyan)}
.g-how p,.g-how li{color:var(--muted);font-size:.95rem}
.g-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,11,22,.88);backdrop-filter:blur(6px);z-index:20;text-align:center;padding:24px;border-radius:inherit}
.g-overlay h2{margin:0}
.g-overlay .big{font-size:3rem}
.hidden{display:none!important}
/* touch action buttons */
.ctl-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.ctl{font-family:var(--font-d);font-weight:700;border:1px solid var(--line);background:rgba(16,24,48,.9);color:var(--ink);border-radius:16px;padding:.9rem 1.1rem;font-size:1.05rem;cursor:pointer;min-width:86px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ctl:active{transform:scale(.94);border-color:var(--cyan)}
.ctl:disabled{opacity:.35}
.ctl.warn{border-color:var(--bad);color:var(--bad)}
/* arcade hub cards */
.arcade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:860px){.arcade-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.arcade-grid{grid-template-columns:1fr}}
.agame{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .18s,border-color .18s;display:flex;flex-direction:column}
.agame:hover{transform:translateY(-5px);border-color:rgba(56,225,255,.45)}
.agame .art{font-size:3.4rem;text-align:center;padding:30px 10px 14px;background:radial-gradient(220px 120px at 50% 30%,rgba(139,92,246,.25),transparent 70%)}
.agame .body{padding:6px 20px 22px}
.agame .body h3{margin:.2rem 0 .4rem}
.agame .body p{color:var(--muted);font-size:.9rem;margin:0 0 .8rem}
.agame .play{color:var(--cyan);font-family:var(--font-d);font-weight:700;font-size:.95rem}
/* health bars */
.hpbar{height:14px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;flex:1}
.hpfill{height:100%;border-radius:99px;transition:width .3s;background:linear-gradient(90deg,var(--good),var(--warn))}
.hpfill.low{background:linear-gradient(90deg,var(--bad),var(--warn))}
.hpwrap{display:flex;align-items:center;gap:10px;margin:6px 0}
.hpname{font-family:var(--font-d);font-weight:700;font-size:.9rem;min-width:64px}
.float-dmg{position:absolute;font-family:var(--font-d);font-weight:700;font-size:1.3rem;pointer-events:none;animation:floatup 1s ease-out forwards;z-index:15}
@keyframes floatup{to{transform:translateY(-46px);opacity:0}}
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.tele{animation:tele .5s infinite}
@keyframes tele{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* ---------- mobile HUD layout fix (2026-10-06): HUD pills wrap with zero overlap ----------
   Scoped to phone widths so desktop is pixel-identical. !important only on .g-hud
   buttons because some game pages set their padding/font-size inline (inline style
   wins over any normal rule); this keeps those pages' desktop look untouched while
   shrinking the controls on phones. */
@media(max-width:520px){
  .g-main{overflow-x:hidden;overflow-x:clip}
  .g-hud{gap:8px;margin:14px 0}
  .hchip{font-size:.78rem;padding:.36rem .7rem;min-width:0;white-space:nowrap;flex:0 1 auto}
  .g-hud .g-btn{font-size:.78rem!important;padding:.36rem .7rem!important;min-width:0}
  .g-hud .sfxwrap{flex:1 1 100%}
  .g-hud #volRange{flex:1 1 auto;width:auto;min-width:0}
  .g-stage{padding:14px}
  .g-stage #board{gap:4px}
  .g-stage .float-pts{font-size:1.05rem}
}

/* ---- SEO content section (per-game about/tips/faq) ---- */
.g-about{max-width:860px;margin:44px auto 0;padding:28px 26px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(16,24,48,.55),rgba(10,16,32,.55))}
.g-about h2{font-size:1.35rem;margin:0 0 14px;font-family:var(--font-d)}
.g-about h3{font-size:1.05rem;margin:26px 0 10px;font-family:var(--font-d);color:var(--cyan)}
.g-about p{color:#c9d4e0;line-height:1.75;margin:0 0 14px}
.g-about .g-tips{margin:0 0 8px;padding-left:22px;color:#c9d4e0;line-height:1.7}
.g-about .g-tips li{margin-bottom:8px}
.g-about .g-faq{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:rgba(8,12,26,.5)}
.g-about .g-faq summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--ink);list-style:none}
.g-about .g-faq summary::-webkit-details-marker{display:none}
.g-about .g-faq summary::after{content:"+";float:right;color:var(--cyan);font-weight:700}
.g-about .g-faq[open] summary::after{content:"–"}
.g-about .g-faq p{padding:0 16px 14px;margin:0}
.g-about .g-cross{margin-top:22px;font-size:.95rem}
.g-about .g-cross a{color:var(--cyan)}
@media(max-width:560px){.g-about{padding:22px 18px;margin-left:12px;margin-right:12px}}