/* =====================================================================
   beIT — ARCADE (/spill/) dark skin
   Loaded ONLY on the beit_game archive + singles (see functions.php). Scoped
   under body.post-type-archive-beit_game / .single-beit_game and .beit-arcade
   so it never leaks into the light Nordic pages. Keeps Figtree/Geist + notch
   cards; swaps the palette to dark neon + ports the stashed textShine.
   ===================================================================== */

/* Arcade-only tokens (this sheet loads only on /spill/ pages, so :root is safe). */
:root {
  --arcade-bg: #05070A;     /* page canvas */
  --arcade-panel: #0A0E14;  /* cabinet bezel */
  --neon-cyan: #00D2FF;
  --neon-green: #00FF88;
  --neon-pink: #FF49C5;
  --neon-yellow: #FCED34;
}

/* Dark page canvas (overrides the light paper gradient from frontend.css). */
body.post-type-archive-beit_game,
body.single-beit_game {
  background: var(--arcade-bg) !important;
}

/* Re-map the design tokens to dark within the arcade scope, so reused
   components (.beit-pagehero, .beit-tag, .beit-lede, .beit-section) adapt. */
.beit-arcade {
  --ink: #EAF2F7;
  --ink-soft: #9FB3C0;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.22);
  --bg-alt: rgba(255,255,255,.04);
  color: var(--ink);
}
.beit-arcade h1,
.beit-arcade h2,
.beit-arcade h3 { color: #fff; }
.beit-arcade .beit-lede { color: var(--ink-soft); }
.beit-arcade .beit-tag { color: var(--ink-soft); }
.beit-arcade .beit-tag a,
.beit-arcade .beit-game-back a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.beit-arcade .beit-tag a:hover,
.beit-arcade .beit-game-back a:hover { color: #fff; }

/* ---- textShine headline (ported from devdocs/snippets/arcade-textshine.md) ---- */
.spill-shine {
  background-image: linear-gradient(to right, #E85D04 0%, var(--neon-yellow) 33.3%, var(--neon-cyan) 66.6%, #E85D04 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spillShine 5s linear infinite;
  filter: drop-shadow(0 0 15px rgba(232, 93, 4, 0.35));
  display: inline-block;
}
@keyframes spillShine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .spill-shine { animation: none; }
}

/* ---- Arcade landing ---- */
.beit-arcade-section { padding-top: var(--space-8); }

.beit-game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Game card — dark notch card (masked ::before notch + neon hover, mirrors the
   site's .beit-appc mechanism but with a dark fill so the drop-shadow traces it). */
.beit-game {
  background: transparent;
  isolation: isolate;
  position: relative;
  padding: var(--space-5);
  border-radius: 58px 0 58px 58px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, filter .2s ease;
  --neon: var(--neon-cyan);
}
.beit-game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 58px 0 58px 58px;
  background: rgba(255,255,255,.045);
  -webkit-mask: var(--notch-mask);
  mask: var(--notch-mask);
}
.beit-game:nth-child(4n+1) { --neon: var(--neon-cyan); }
.beit-game:nth-child(4n+2) { --neon: var(--neon-green); }
.beit-game:nth-child(4n+3) { --neon: var(--neon-pink); }
.beit-game:nth-child(4n+4) { --neon: var(--neon-yellow); }
.beit-game:hover { transform: translateY(-4px); filter: drop-shadow(0 0 16px var(--neon)); }

.beit-game-thumb {
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--line);
  background: #000;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.beit-game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beit-game-thumb--ph span { font-size: 40px; color: var(--neon); text-shadow: 0 0 12px var(--neon); }

.beit-game-title { font-size: 22px; line-height: 1.2; margin: 0 0 var(--space-2); }
.beit-game-title a { color: #fff; text-decoration: none; }
.beit-game-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.beit-game-ex { color: var(--ink-soft); font-size: 18px; line-height: 1.55; margin: 0 0 var(--space-3); flex: 1; }
.beit-game-more {
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .05em; color: var(--neon); text-shadow: 0 0 8px var(--neon);
  margin-top: auto;
}

.beit-game-empty { max-width: 52ch; }
.beit-game-empty h2 { font-size: clamp(26px,3.6vw,40px); margin: 0 0 var(--space-3); }
.beit-game-empty p { color: var(--ink-soft); font-size: 19px; }

/* ---- Single game page ("cabinet" layout) ---- */
.beit-arcade-head { padding: var(--space-8) 0 var(--space-6); }
.beit-arcade-head h1 { font-size: clamp(34px,5vw,56px); line-height: 1.05; margin: 0 0 var(--space-3); }
.beit-arcade-head .beit-lede { max-width: 65ch; margin: 0; font-size: 19px; }

.beit-crumb {
  margin: 0 0 var(--space-4);
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .12em;
}
.beit-crumb a { color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.beit-crumb a:hover { color: #fff; }
/* eyebrow square, made functional: yellow square with a black "<" inside */
.beit-crumb-mk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #0A0D12;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  margin-right: 10px;
  vertical-align: -4px;
}

.beit-arcade-stage { padding-bottom: var(--space-10); }

/* Cabinet bezel: dark panel around the frame, phosphor glow, pedestal shadow. */
.beit-cabinet {
  width: fit-content;
  margin: 0 auto;
  padding: 14px;
  background: var(--arcade-panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 0 34px rgba(0,255,102,.10),
    0 22px 44px -18px rgba(0,0,0,.85);
}
.beit-game-frame {
  /* Per-game aspect via post meta (single-beit_game.php sets the vars); defaults stay 4:3.
     --game-ar is the numeric ratio so portrait games stay viewport-height-bounded on desktop. */
  width: min(82vw, 860px, calc(78vh * var(--game-ar, 1.3333)));
  aspect-ratio: var(--game-ar-css, 4 / 3);
  margin: 0 auto;
  position: relative;
  background: #000;
}
.beit-game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.beit-game-hint {
  text-align: center;
  margin: var(--space-4) 0 0;
  color: rgba(255,255,255,.38);
  font-size: 18px;
  letter-spacing: .06em;
}

/* ABOUT */
.beit-game-about {
  max-width: 760px;
  margin: var(--space-8) auto 0;
}
.beit-game-h {
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
}
.beit-game-h::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--accent); margin-right: 10px; }
.beit-game-about p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; max-width: 65ch; }

.beit-game-others { max-width: 920px; margin: var(--space-9) auto 0; }

/* ---- Ad slots (pre-wired; placeholder reserves space until live) ---- */
.beit-ad { margin: var(--space-5) 0; }
.beit-ad--landing { margin: 0 0 var(--space-6); }
.beit-ad--placeholder {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 4px;
  color: rgba(255,255,255,.25);
  font-family: 'Figtree', sans-serif; font-size: 18px; letter-spacing: .2em;
}
.beit-ad--landing.beit-ad--placeholder { min-height: 90px; }
.beit-ad--below.beit-ad--placeholder { min-height: 250px; margin-top: var(--space-9); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .beit-game-grid { grid-template-columns: 1fr; }
  .beit-cabinet { padding: 8px; }
  .beit-game-frame { width: min(92vw, calc(78vh * var(--game-ar, 1.3333))); }
  .beit-arcade-head { padding: var(--space-6) 0 var(--space-5); }
}