/* dude-games1 (2026-10-04): the whole games section follows Holy Dude's WHITE look (Todd: "when I click on Games it all goes
   to black backgrounds"). The games hub, the arcade and its 23 game pages, the 4 Dude Originals (/play/) were all built
   dark. Loaded by every page of the section; games-head.js adds html.g1 (and html.g1-dark when a member picked Dark in
   Settings, the site-wide rule from /js/light1.js: then nothing here applies). Undo: bash /root/dude-games1/undo.sh */

/* ---------- arcade pages + games.php: the arcade css is built on these variables ---------- */
html.g1:not(.g1-dark){--bg:#ffffff;--card:#f7f8fb;--card-solid:#ffffff;--line:rgba(17,24,39,.1);--line2:rgba(17,24,39,.2);--text:#111827;--mut:#374151;--dim:#5b6474;
  --acc:#6d4fd8;--acc-rgb:109 79 216;--acc-ink:#0a0d16;--acc-on-dark:#5b3fc4;--link:#1d4ed8;--top-bg:rgba(255,255,255,.95);--top-text:#111827;--top-mut:#374151;--chip:#eef1f6;color-scheme:light}
html.g1:not(.g1-dark),html.g1:not(.g1-dark) body{background:#ffffff}
html.g1:not(.g1-dark) body{color:#111827}
html.g1:not(.g1-dark) .ar-tiles,html.g1:not(.g1-dark) .ar-tiles.ar-tiles[style]{color:#ffffff!important}
html.g1:not(.g1-dark) a.ar-go{color:#0a0d16}
html.g1:not(.g1-dark) .ar-b.solid{color:#ffffff}
html.g1:not(.g1-dark) .ar-gc,html.g1:not(.g1-dark) .ar-hero,html.g1:not(.g1-dark) .ar-mature{box-shadow:0 10px 28px -18px rgba(17,24,39,.35)}
/* the game itself (board, start card, score bar, word boxes) keeps its own dark surface: give it back the dark tokens so
   its text stays light on dark (the white tokens above made "Play vs Jake" dark-on-dark) */
html.g1:not(.g1-dark) #arcade-host,html.g1:not(.g1-dark) .ar-wbox,html.g1:not(.g1-dark) .ar-wstart,html.g1:not(.g1-dark) .ar-wafter,html.g1:not(.g1-dark) .ar-toast{
  --card:rgba(255,255,255,.04);--card-solid:#141a26;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);--text:#eef0f6;--mut:#b7bfd0;--dim:#7f879b;
  --acc:#a78bfa;--acc-rgb:167 139 250;--acc-on-dark:#b9a4ff;--link:#8fb8e8;--chip:rgba(255,255,255,.07);color-scheme:dark}
/* picture boxes were near-black (#07090b) until their image loaded (lazy images below the fold stayed black boxes) */
html.g1:not(.g1-dark) .ar-hero-m,html.g1:not(.g1-dark) .ar-gc-m:not(:has(.ar-tiles)),html.g1:not(.g1-dark) .ar-more img,html.g1:not(.g1-dark) .ar-cov,html.g1:not(.g1-dark) .ar-fam-face{background:#eef1f6}

/* ---------- the Holy Dude header (games-head.js fills .ar-top, or adds #g1Bar on pages without one) ---------- */
html.g1 .ar-top{background:var(--top-bg,#fff);border-bottom:1px solid var(--line,#e5e7eb)}
html.g1 .g1-logo{display:flex;align-items:center;min-height:40px;flex:0 0 auto}
html.g1 .g1-logo img{height:30px;width:auto;display:block}
html.g1.g1-dark .g1-logo img{filter:brightness(0) invert(1)}
html.g1 .g1-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
html.g1 .g1-nav a,html.g1 .g1-nav button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;color:var(--top-text,#111827)!important;background:transparent;border:1.5px solid var(--line2,#d1d5db);cursor:pointer;white-space:nowrap}
html.g1 .g1-nav a.g1-pri{background:#1f4beb;border-color:#1f4beb;color:#ffffff!important}
html.g1 .g1-nav .g1-back{border-color:transparent;background:var(--chip,#eef1f6)}
html.g1 .g1-logo:focus-visible,html.g1 .g1-nav a:focus-visible,html.g1 .g1-nav button:focus-visible,html.g1 .g1-mini a:focus-visible{outline:3px solid #2c63ff;outline-offset:2px}
html.g1 .ar-topin{display:flex;align-items:center;gap:10px}
html.g1 .ar-top .ar-nav{display:none}
@media (max-width:560px){html.g1 .g1-logo img{height:24px}html.g1 .g1-nav{gap:5px}html.g1 .g1-nav a,html.g1 .g1-nav button{min-height:36px;padding:0 10px;font-size:13px}html.g1 .g1-nav .g1-s{display:none}}
@media (max-width:370px){html.g1 .g1-nav .g1-games{display:none}}
/* full-screen games (/play/): a small pill top-left on the menus; in a game the HD button next to pause */
html.g1 .g1-mini{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;z-index:3;display:flex;align-items:center;gap:6px;padding:4px 5px 4px 10px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid #dbe3ea;box-shadow:0 6px 18px rgba(12,40,60,.18)}
html.g1 .g1-mini a{display:flex;align-items:center;min-height:34px;color:#111827;text-decoration:none;font:800 13.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html.g1 .g1-mini .g1-logo img{height:22px}
html.g1 .g1-mini .g1-back{padding:0 12px;border-radius:999px;background:#eef3f8}
html.g1 #g1Hd{pointer-events:auto;position:absolute;z-index:12;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.92);border:1px solid #dbe3ea;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
html.g1 #g1Hd img{width:26px;height:26px}
html.g1 .g1-plinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
html.g1 .g1-plinks a{text-decoration:none}

/* ---------- Dude Originals (/play/*): white menu cards over the game art; the in-game HUD is untouched ---------- */
html.g1-play:not(.g1-dark){color-scheme:light}
html.g1-play:not(.g1-dark) body{background:#eef3f7}
html.g1-play:not(.g1-dark) #title .shade{background:linear-gradient(0deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
html.g1-play:not(.g1-dark) #title.on{display:flex;flex-direction:column;justify-content:flex-end}
html.g1-play:not(.g1-dark) #title .content{min-height:0;margin:72px 12px 12px;padding:20px 20px 18px;border-radius:24px;background:rgba(255,255,255,.95);color:#111827;box-shadow:0 24px 60px -24px rgba(12,40,60,.5);border:1px solid #dbe3ea;max-width:740px}
@media (min-width:900px){html.g1-play:not(.g1-dark) #title .content{margin-left:4vw}}
html.g1-play:not(.g1-dark) .logo{background:linear-gradient(180deg,#2c63ff 0%,#1230c4 60%,#0b1b6a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
html.g1-play:not(.g1-dark) .logo small{color:#b45309;-webkit-text-fill-color:#b45309}
html.g1-play:not(.g1-dark) .kicker{color:#9a5b00}
html.g1-play:not(.g1-dark) #title .tagline,html.g1-play:not(.g1-dark) .screen:not(#hud) .tagline{color:#374151;text-shadow:none}
html.g1-play:not(.g1-dark) #title .howline,html.g1-play:not(.g1-dark) .howline{color:#111827;text-shadow:none}
html.g1-play:not(.g1-dark) .pillars span{background:#eef3f8;color:#1f2937;box-shadow:inset 0 0 0 1px #dbe3ea}
html.g1-play:not(.g1-dark) .screen:not(#hud) .muted,html.g1-play:not(.g1-dark) .screen:not(#hud) .plbl,html.g1-play:not(.g1-dark) .screen:not(#hud) label.lbl,html.g1-play:not(.g1-dark) .loadnote,html.g1-play:not(.g1-dark) .bestline,html.g1-play:not(.g1-dark) .advnote,html.g1-play:not(.g1-dark) .advs button small{color:#5b6474}
html.g1-play:not(.g1-dark) .bestline b,html.g1-play:not(.g1-dark) #resBest b{color:#111827}
html.g1-play:not(.g1-dark) .screen:not(#hud) .seg button,html.g1-play:not(.g1-dark) .pick .seg button{background:#f3f6f9;color:#111827;box-shadow:inset 0 0 0 1.5px #d5dde6}
html.g1-play:not(.g1-dark) .screen:not(#hud) .seg button.sel{background:#fff3d6;color:#111827;box-shadow:inset 0 0 0 2px #e29a06}
html.g1-play:not(.g1-dark) .screen:not(#hud) .btn.ghost{background:#ffffff;color:#111827;box-shadow:inset 0 0 0 1.5px #cfd8e3}
/* the other menu screens: light page, white cards */
html.g1-play:not(.g1-dark) .screen:not(#hud):not(#title){background:rgba(238,243,247,.94);color:#111827}
html.g1-play:not(.g1-dark) .screen:not(#hud) .panel{background:#ffffff;color:#111827;border-color:#dbe3ea;box-shadow:0 20px 50px -26px rgba(12,40,60,.45)}
html.g1-play:not(.g1-dark) .screen:not(#hud) h1,html.g1-play:not(.g1-dark) .screen:not(#hud) h2,html.g1-play:not(.g1-dark) .screen:not(#hud) h3{color:#111827}
html.g1-play:not(.g1-dark) .screen:not(#hud) input.txt{background:#ffffff;color:#111827;border-color:#cfd8e3}
html.g1-play:not(.g1-dark) .screen:not(#hud) .bot,html.g1-play:not(.g1-dark) .screen:not(#hud) .pl{background:#f3f6f9;color:#111827}
html.g1-play:not(.g1-dark) .screen:not(#hud) .advs button{color:#111827;box-shadow:inset 0 0 0 1.5px #d5dde6}
html.g1-play:not(.g1-dark) .screen:not(#hud) .advs button.sel{background:#fff3d6;box-shadow:inset 0 0 0 2px #e29a06}
html.g1-play:not(.g1-dark) .screen:not(#hud) .how kbd{background:#eef3f8;color:#111827}
html.g1-play:not(.g1-dark) .screen:not(#hud) .code{color:#9a5b00}
html.g1-play:not(.g1-dark) #results .shade{background:linear-gradient(0deg,rgba(255,255,255,.96) 22%,rgba(255,255,255,.7))}
html.g1-play:not(.g1-dark) #results .wrap,html.g1-play:not(.g1-dark) #results .panel{text-shadow:none;color:#111827}
html.g1-play:not(.g1-dark) .home{display:none}