/* VRMatch Arcade — shared game chrome (extends ../../assets/css/style.css) */
/* polish pass 2026-10-08: prevent double-tap zoom on game chrome.
   F1 (2026-10-25): the canvas is NOT touch-locked by default any more — a
   play surface locks only while its game is actually playing (the
   .vm-locked state, driven by games/touch-guard.js). Before start, a drag
   that begins on the board/canvas must scroll the page like anywhere else. */
.g-stage,.g-hud{touch-action:manipulation}
/* 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}
/* F1 (2026-10-25): the pre-start overlay is a light scrim, not a blackout.
   At .88 alpha + 6px blur the arena underneath rendered near-black, so the
   first screen of every shared-shell game looked broken. At .55 + 2px the
   board stays clearly visible — the game reads as alive and waiting, and
   the TAP TO START prompt sits on top of it. */
.g-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,11,22,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);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}}

/* === iPhone touch posture (2026-10-24 fix; scoped 2026-10-24 night;
   REBUILT 2026-10-25, wave F1 — read this before touching it) ===
   The Oct 24 posture locked the play surface permanently, which meant a
   first-time visitor's natural drag — starting on the board, which fills
   most of screen 1 — did nothing, and the how-to text below the game was
   unreachable by finger on most pages. The lock is now a STATE, not a
   posture: a surface carries touch-action:none ONLY while its game is
   actively playing, under the .vm-locked class that games/touch-guard.js
   drives (shared-shell games: locked while their .g-overlay start menu is
   hidden; other surfaces: locked from the first deliberate touch on the
   surface itself; released when a menu/overlay returns). Everything else
   — header, margins, text, the board before start, everything below the
   game — always scrolls. NEVER lock main/body or a page container again:
   the blanket main-wide version froze the arcade listing itself.
   [data-vm-scroll-x] marks deliberately horizontal scrollers (Minefield's
   expert board) and keeps pan-x; [data-vm-scroll-y] keeps pan-y; both get
   overscroll containment so their scrolling can never chain into a page
   pull, and both win over .vm-locked. Selection/callout suppression stays
   (it never blocked scrolling). */
html,body{overscroll-behavior:none !important}
body,body *:not(input):not(textarea):not(select){-webkit-touch-callout:none !important;-webkit-user-select:none !important;user-select:none !important}
.vm-locked,.vm-locked *:not(input):not(textarea):not(select){touch-action:none !important}
.vm-locked [data-vm-scroll-x],.vm-locked [data-vm-scroll-x] *,body.vm-full-lock [data-vm-scroll-x],body.vm-full-lock [data-vm-scroll-x] *{touch-action:pan-x !important;overscroll-behavior:contain !important}
.vm-locked [data-vm-scroll-y],.vm-locked [data-vm-scroll-y] *,body.vm-full-lock [data-vm-scroll-y],body.vm-full-lock [data-vm-scroll-y] *{touch-action:pan-y !important;overscroll-behavior:contain !important}
body.vm-full-lock,body.vm-full-lock *:not(input):not(textarea):not(select){touch-action:none !important}
main [data-vm-scroll-x],main [data-vm-scroll-x] *,#wrap [data-vm-scroll-x],#wrap [data-vm-scroll-x] *,body [data-vm-scroll-x],body [data-vm-scroll-x] *{touch-action:pan-x !important}
body img{-webkit-user-drag:none}
main [data-vm-scroll-x],#wrap [data-vm-scroll-x],body [data-vm-scroll-x]{overscroll-behavior:contain !important}
main [data-vm-scroll-y],main [data-vm-scroll-y] *,#wrap [data-vm-scroll-y],#wrap [data-vm-scroll-y] *,body [data-vm-scroll-y],body [data-vm-scroll-y] *{touch-action:pan-y !important;overscroll-behavior:contain !important}
input[type="range"]{touch-action:pan-x !important}

/* === F1 phone shell compaction (2026-10-25) ===
   On phones the shared shell spent screen 1 on chrome: an 87px top pad
   under a sticky header that is already in flow, a three-line subtitle and
   a HUD wrapped over three rows — so the stage, and the TAP TO START
   overlay centred in it, began below the fold (measured at 763–1,122px).
   Below: the same shell, tightened for ≤520px only. Desktop is untouched.
   The HUD becomes one horizontally scrollable row (its chips keep their
   full size and labels; the row itself pans, the page does not trap). */
@media(max-width:520px){
  .g-main{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .g-crumbs{margin-bottom:4px;font-size:.84rem}
  .g-head h1{font-size:1.5rem;line-height:1.15;margin-bottom:.15em}
  .g-sub{font-size:.88rem;line-height:1.45}
  .g-hud{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;padding-bottom:4px;margin:12px 0 10px}
  .g-hud::-webkit-scrollbar{display:none}
  .g-hud>*{flex:0 0 auto}
  .g-hud .sfxwrap{flex:0 0 auto}
  .g-stage{padding:10px;margin-bottom:12px}
  /* Tall boards (Backgammon's stage is ~930px on a phone) centre their
     start overlay a full screen down even after compaction. On phones the
     overlay's content anchors to the TOP of the stage instead, so the
     title, difficulty and TAP TO START sit in the first viewport. */
  .g-overlay{justify-content:flex-start;padding-top:7vh}
}