/* ArcadeBox v6 — "Clean & Minimal" design system (design_handoff_arcadebox_v6).
   Tokens on body; dark values under body[data-t="dark"]; optional accents via body[data-a].
   Every component references tokens only. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease;
--bg:#faf8f4;--sf:#ffffff;--sf2:#f3efe8;--line:#e7e1d6;--line2:#efeadf;--ink:#211d18;--mut:#514b40;--sub:#5c5648;--dim:#514b40;--line-soft:#e7e1d6;
--acc:#d8532b;--acch:#bf4622;--accsoft:rgba(216,83,43,.09);--grn:#23935a;--term:#211d18;--termline:#211d18;--termink:#f3efe7;--termmut:#98917f;--chip:#211d18;--chipink:#fffdf8;
--shadow:0 1px 2px rgba(40,30,20,.05),0 12px 32px -18px rgba(40,30,20,.22);
/* gameplay-reel wash strength (reel.js) — kept LIGHT so the footage shows through and the
   landing no longer looks "frosted"; hero readability rides on the white heading glow +
   a soft bottom fade only (Ali flagged the milky wash 2026-07-04). */
--reelw1:12%;--reelw2:44%}
/* Dark mode lifted a notch lighter (Ali 2026-07-23) — was #100e0b/#221e19, felt too crushing.
   Backgrounds/surfaces raised ~8–12 in value (warm hue kept); muted text nudged brighter so
   contrast holds on the lighter ground. Lifted AGAIN 2026-07-23 (Ali: "make dark a little
   lighter") — bg #17130f -> #1f1a14 with surfaces/lines/muted text raised to match. */
body[data-t="dark"]{--bg:#1f1a14;--sf:#322c24;--sf2:#403830;--line:#544c3e;--line2:#443d33;--ink:#f6f2ea;--mut:#c2b9aa;--sub:#99907e;--dim:#c2b9aa;--line-soft:#443d33;
--acc:#f0764a;--acch:#ff8a5e;--accsoft:rgba(240,118,74,.12);--grn:#4cc687;--term:#3b352c;--termline:#5e5646;--termink:#f6f2ea;--termmut:#a59c88;--chip:#f3efe7;--chipink:#211d18;
--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -18px rgba(0,0,0,.5);
--reelw1:34%;--reelw2:68%}
body[data-a="indigo"]{--acc:#4f5bd5;--acch:#3d49c0;--accsoft:rgba(79,91,213,.09)}
body[data-t="dark"][data-a="indigo"]{--acc:#7d88ef;--acch:#96a0ff;--accsoft:rgba(125,136,239,.13)}
body[data-a="forest"]{--acc:#25794d;--acch:#1d6640;--accsoft:rgba(37,121,77,.09)}
body[data-t="dark"][data-a="forest"]{--acc:#4cc687;--acch:#63d89a;--accsoft:rgba(76,198,135,.13)}
::selection{background:var(--acc);color:#fffdf8}
/* Hero text sits directly on the gameplay reel — no panel (Ali 2026-07-02 removed the
   frosted box). Readability over the footage comes from a soft white glow on headings
   in light mode only; dark mode's wash already handles it. */
.hero-glass{padding:0}
/* Glow removed (Ali 2026-07-21): the white halo behind headings reduced contrast and read as blur.
   Readability over the reel now comes from the darker light-theme text + the reel wash. No text-shadow. */
input::placeholder,textarea::placeholder{color:var(--sub)}
a{color:inherit;text-decoration:none}
@keyframes v6cur{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes v6fill{0%{width:4%}100%{width:100%}}

/* ---- BIT mark (flat rounded square + pill eyes + smile) ---- */
.bitmark{position:relative;display:inline-block;background:var(--acc);border-radius:26%;flex:none}
.bitmark i{position:absolute;background:#fffdf8;border-radius:999px}
.bitmark .e1{top:30%;left:26%;width:15%;height:22%}
.bitmark .e2{top:30%;right:26%;width:15%;height:22%}
.bitmark .sm{bottom:22%;left:50%;transform:translateX(-50%);width:30%;height:8%}
/* ── BIT is alive (Ali 2026-07-10): a clear DOUBLE-blink everywhere he sits, plus a
   gentle idle float + happy smile-pulse on the BIG "just hovering" marks (login/hero).
   The blink is a tiny local eye-scale (not vestibular motion) so it stays on even under
   reduced-motion — only the float/pulse honor that preference. ── */
.bitmark .e1,.bitmark .e2{transform-origin:center;animation:bitBlink 3.6s ease-in-out infinite}
.bitmark .e2{animation-delay:.06s}                       /* a hair apart reads organic, not robotic */
@keyframes bitBlink{
  0%,84%,100%{transform:scaleY(1)}                        /* eyes open most of the cycle… */
  88%{transform:scaleY(.08)}                              /* blink 1 */
  91%{transform:scaleY(1)}                                /* …open a beat… */
  95%{transform:scaleY(.08)}                              /* blink 2 (double-blink = unmistakably alive) */
}
.bitmark-lg{animation:bitFloat 4.2s ease-in-out infinite;will-change:transform}
@keyframes bitFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-6%) rotate(1.2deg)}}
/* Smile runs on its OWN period (5.3s) with a phase offset — sharing the blink's 3.6s made
   every gesture fire at the same instant ("he's having a stroke", Ali 2026-07-13). With
   co-prime-ish periods the blink and smile-pulse coincide roughly once every 95s, which
   reads as a living face instead of a synchronized twitch. */
.bitmark-lg .sm{animation:bitSmile 5.3s ease-in-out -2.6s infinite}
@keyframes bitSmile{0%,80%,100%{transform:translateX(-50%) scaleX(1)}90%{transform:translateX(-50%) scaleX(1.3) translateY(-5%)}}
@media (prefers-reduced-motion:reduce){.bitmark-lg{animation:none}.bitmark-lg .sm{animation:none}}

/* ---- header / footer ---- */
.v6-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line2)}
.v6-head-in{max-width:1120px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}
.v6-logo{display:flex;align-items:center;gap:9px;cursor:pointer}
.v6-word{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.v6-nav{display:flex;align-items:center;gap:6px}
.v6-navlink{white-space:nowrap;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--mut);padding:8px 12px;border-radius:9px;transition:.15s}
.v6-navlink:hover{color:var(--ink);background:var(--sf2)}
.v6-foot{border-top:1px solid var(--line2)}
.v6-foot-in{max-width:1120px;margin:0 auto;padding:32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* wrap is REQUIRED, not cosmetic: the footer link row is ~930px wide, so without it the row
   overflows every phone viewport and drags the WHOLE page into sideways scrolling (v6.css ships
   on every page, so this was site-wide). Found 2026-08-02 measuring scrollWidth 963 vs 390. */
.v6-foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;color:var(--mut)}
.v6-foot-links a:hover{color:var(--ink)}

/* ---- buttons / chips ---- */
.v6-btn{white-space:nowrap;font-family:inherit;font-weight:700;font-size:14px;color:#fffdf8;background:var(--acc);border:none;border-radius:11px;padding:10px 18px;cursor:pointer;transition:.15s}
.v6-btn:hover{background:var(--acch)}
.v6-btn.lg{font-size:15px;padding:14px 26px;border-radius:12px}
.v6-ghost{font-family:inherit;font-weight:700;font-size:14px;color:var(--ink);background:none;border:1px solid var(--line);border-radius:11px;padding:10px 18px;cursor:pointer;transition:.15s}
.v6-ghost:hover{border-color:var(--acc)}
.v6-green{font-family:inherit;font-weight:700;font-size:14.5px;color:#fffdf8;background:var(--grn);border:none;border-radius:11px;padding:12px;cursor:pointer;transition:.15s}
.v6-green:hover{opacity:.9}
.v6-pill{white-space:nowrap;font-size:13px;font-weight:600;color:var(--mut);background:var(--sf);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.15s}
.v6-pill:hover{border-color:var(--acc);color:var(--ink)}
.v6-pill.on{font-weight:700;color:var(--chipink);background:var(--chip);border-color:var(--chip)}
.v6-theme{display:inline-flex;align-items:center;gap:8px;background:var(--sf);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--mut);transition:.15s}
/* sun/moon mode toggle — injected into the top nav of EVERY page by v6.js.
   Sleek stroke-icon control (Ali 2026-07-25): a calm rounded square that matches the
   drawer/burger icon button; muted by default, accent on hover, no gimmicky spin. */
.v6-mode{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--mut);cursor:pointer;line-height:1;padding:0;transition:border-color .15s,color .15s,background .15s;flex:none}
.v6-mode:hover{border-color:var(--acc);color:var(--ink);background:var(--sf)}
.v6-mode:active{transform:scale(.94)}
.v6-mode .v6-mglyph,.v6-theme .v6-mglyph{display:block}
.v6-theme:hover{border-color:var(--acc);color:var(--ink)}
.v6-theme i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
/* icon-only toggle: v6.js rewrites every .v6-theme into a sleek sun/moon control */
.v6-theme.v6-theme-icon{width:36px;height:36px;border-radius:10px;justify-content:center;padding:0;gap:0;color:var(--mut);line-height:1}
.v6-theme.v6-theme-icon i,.v6-theme.v6-theme-icon b{display:none}
/* footer social icons (2026-07-24): injected by v6.js, URLs filled when Ali supplies them */
.v6-socials{display:inline-flex;gap:12px;align-items:center;margin-left:4px}
.v6-socials a{display:inline-flex;color:var(--sub);transition:color .15s}
.v6-socials a:hover{color:var(--acc)}
.v6-socials svg{width:17px;height:17px;display:block}

/* ---- terminal card ---- */
.v6-term{text-align:left;background:var(--term);border:1px solid var(--termline);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.v6-term .row{font-family:'DM Mono',monospace;font-size:15px;color:var(--termink);display:flex;align-items:center;min-height:24px}
.v6-term .gt{color:var(--termmut);margin-right:10px}
.v6-cursor{display:inline-block;width:8px;height:17px;background:var(--acc);margin-left:3px;animation:v6cur 1.1s steps(1) infinite}
.v6-mono{font-family:'DM Mono',monospace}
.v6-kick{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--sub);text-transform:uppercase}

/* ---- cards ---- */
.v6-card{background:var(--sf);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.v6-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* Cover art pushes in slowly on hover (2026-08-02). Every game on the site was
   represented by a completely still image — on a site about games, nothing moved.
   This is deliberately the honest version: it animates OUR OWN cover art rather than
   implying footage we don't have. Real per-game clips can replace it later; the card
   markup doesn't need to change for that.
   The thumb wrapper already sets overflow:hidden, so the scale crops rather than spills. */
.v6-card img{transition:transform .55s cubic-bezier(.2,.6,.2,1);will-change:transform}
.v6-card:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .v6-card img{transition:none}
  .v6-card:hover img{transform:none}
}
.v6-panel{background:var(--sf);border:1px solid var(--line);border-radius:16px;padding:20px}
.v6-thumb{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.v6-thumb span{font-weight:800;font-size:44px;letter-spacing:-.03em;color:rgba(255,253,248,.92)}
.v6-avatar{width:34px;height:34px;border-radius:50%;background:var(--accsoft);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}

/* ---- typography helpers ---- */
.v6-h1{font-weight:800;letter-spacing:-.03em;margin:0}
.v6-h2{font-weight:800;letter-spacing:-.025em;margin:0}
.v6-mut{color:var(--mut)}
.v6-sub{color:var(--sub)}
.v6-max{max-width:1120px;margin:0 auto;padding-left:32px;padding-right:32px}

/* ---- GDPR consent banner (injected by v6.js on every page) ---- */
.v6-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin:0 auto;
  background:var(--sf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px}
.v6-consent p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut)}
.v6-consent p a{color:var(--acc);font-weight:600}
.v6-consent .row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.v6-consent .row .v6-btn,.v6-consent .row .v6-ghost{padding:9px 16px;font-size:13.5px}

@media(max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)!important}
  .g3{grid-template-columns:repeat(2,1fr)!important}
  .g2,.gsplit,.garcade{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .g4,.g3{grid-template-columns:1fr!important}
  .v6-h1.hero{font-size:42px!important}
  /* small phones (down to 320px): reclaim side space the fixed 32px gutters ate */
  .v6-max{padding-left:18px;padding-right:18px}
  /* comfortable touch targets: inline card actions ("Play"/"Edit") were ~18px tall */
  .v6-card a[href^="play"],.v6-card a[href^="studio"],.arc-card-foot a,.arc-card-foot span{min-height:40px;display:inline-flex;align-items:center}
}