/* ============================================================
   Triggered Games — unofficial concept redesign
   Original site is dense and word-heavy; this rebuild is built
   around scanning: five rooms, one price answer, four visit facts.
   ============================================================ */

:root {
  --void: #07060d;
  --panel: #100d1a;
  --panel-2: #17132557;
  --line: #241d38;
  --line-soft: #1a1528;
  --ink: #f4f2ff;
  --dim: #9a93b5;
  --dim-2: #6d6689;
  --hot: #ff2d6f;
  --volt: #c9ff3d;
  --flame: #ff8a1f;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.15rem, 4.5vw, 5.5rem);
  --maxw: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* An author `display` beats the UA sheet's `[hidden] { display: none }`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--hot); color: #fff; }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 0.8rem 1.2rem; background: var(--hot); color: #fff; font-size: 0.85rem;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- concept notice ---------- */
.concept-bar {
  position: relative;
  z-index: 120;
  padding: 0.6rem var(--pad);
  background: #16111f;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}
.concept-bar strong { color: var(--volt); font-weight: 700; }
.concept-bar a { color: var(--ink); border-bottom: 1px solid var(--dim-2); white-space: nowrap; }
.concept-bar a:hover { border-bottom-color: var(--volt); color: var(--volt); }

/* ---------- shared ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: 1.1rem;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h2 em { font-style: normal; color: var(--hot); }

h3 { font-family: var(--font-display); font-size: 1.18rem; letter-spacing: -0.01em; text-transform: uppercase; }

p { line-height: 1.65; color: var(--dim); }

.section { position: relative; z-index: 2; padding: clamp(4rem, 9vw, 8rem) var(--pad); }

.sec-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(2.2rem, 5vw, 3.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: end;
}
.sec-note { max-width: 46ch; font-size: 0.95rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.95) translateY(0); }
.btn-hot { background: var(--hot); color: #fff; box-shadow: 0 12px 34px -14px rgba(255, 45, 111, 0.9); }
.btn-hot:hover { background: #ff4a82; }
.btn-line { border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--volt); color: var(--volt); }
.btn-wide { width: 100%; }
.btn-lg { padding: 1.15rem 2.2rem; font-size: 1rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 110;
  padding: 0.85rem var(--pad);
  background: rgba(7, 6, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s, background 0.35s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(7, 6, 13, 0.94); }

.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.logo { display: flex; align-items: center; gap: 0.55rem; }
.logo-mark { color: var(--hot); display: block; }
/* The company is called "Triggered Games", not "Triggered". Both words carry
   identical weight and size so the wordmark reads as one name — only the
   colour differs, which is branding rather than hierarchy. */
.logo-word,
.logo-suffix {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.logo-suffix { color: var(--hot); margin-left: 0.32em; }

.nav-links { display: flex; gap: 1.9rem; }
.nav-links a {
  font-size: 0.85rem; color: var(--dim);
  position: relative; padding-block: 0.3rem; transition: color 0.25s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--hot);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  font-size: 0.82rem; font-weight: 600;
  padding: 0.6rem 1.15rem;
  border-radius: 7px;
  background: var(--hot); color: #fff;
  transition: background 0.25s, transform 0.3s var(--ease);
}
.nav-cta:hover { background: #ff4a82; transform: translateY(-1px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) var(--pad) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.lava {
  position: absolute;
  inset: auto 0 0 0;
  /* Keep it in the lower band — it reads as a floor the content stands on,
     and it stops the bright seams running through the body copy. */
  height: 56%;
  z-index: -2;
}
.lava canvas { display: block; width: 100%; height: 100%; }
.lava.is-dead { display: none; }

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 20% 30%, rgba(255, 45, 111, 0.10), transparent 60%),
    /* Dips over the copy band so the grid never fights the text, then darkens
       again at the very bottom where the near-field seams are brightest. */
    linear-gradient(to bottom,
      var(--void) 8%,
      rgba(7, 6, 13, 0.80) 40%,
      rgba(7, 6, 13, 0.46) 58%,
      rgba(7, 6, 13, 0.66) 82%,
      rgba(7, 6, 13, 0.88) 100%);
  pointer-events: none;
}

.hero-inner { position: relative; max-width: var(--maxw); margin-inline: auto; width: 100%; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--dim);
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(16, 13, 26, 0.6);
  margin-bottom: 1.6rem;
}
.pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--volt);
  box-shadow: 0 0 0 0 rgba(201, 255, 61, 0.6);
  animation: pip 2.2s ease-out infinite;
}
@keyframes pip {
  0% { box-shadow: 0 0 0 0 rgba(201, 255, 61, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(201, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 255, 61, 0); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8.2vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-title em { font-style: normal; color: var(--hot); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-title .rise { display: block; transform: translateY(110%); transition: transform 1s var(--ease); }
.hero.is-lit .rise { transform: translateY(0); }
.hero.is-lit .line:nth-child(2) .rise { transition-delay: 0.07s; }
.hero.is-lit .line:nth-child(3) .rise { transition-delay: 0.14s; }
.hero.is-lit .line:nth-child(4) .rise { transition-delay: 0.21s; }

/* ---- deliberate glitch ----
   A faint jitter on the live text reads as "my browser is broken". This is
   built to read as an effect instead: two hard-coloured ghost copies of the
   headline tear sideways in opposite directions, over a scanline field, in a
   fixed stutter rhythm. It also fires on hover, so anyone who suspects a fault
   can reproduce it on demand and see that it's deliberate. */
/* z-index 0 makes .rise a stacking context so the ghosts can sit *behind* the
   real text. Painted on top they cover the headline and it just looks pink;
   behind it, the white text stays crisp and only the colour fringes show. */
.hero-title .rise { position: relative; z-index: 0; }
.hero-title .rise::before,
.hero-title .rise::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  /* the ghosts are flat colour — the <em> tint in the real line would muddy them */
  -webkit-text-fill-color: currentColor;
}
.hero-title .rise::before { color: #00eaff; }
.hero-title .rise::after { color: #ff2d6f; }

.hero.is-glitching .hero-title .rise::before,
.hero-title:hover .rise::before { animation: ghostA 0.34s ease-out both; }
.hero.is-glitching .hero-title .rise::after,
.hero-title:hover .rise::after { animation: ghostB 0.34s ease-out both; }

/* One clean separation and a settle — deliberately not a stutter. A long
   multi-hit tear reads as chaos, and chaos is indistinguishable from a fault.
   Offsets stay small enough that the headline is legible the whole time. */
@keyframes ghostA {
  0%   { opacity: 0; transform: translate(0); }
  15%  { opacity: .85; transform: translate(-4px, -1px); }
  45%  { opacity: .5; transform: translate(-2px, 0); }
  100% { opacity: 0; transform: translate(0); }
}
@keyframes ghostB {
  0%   { opacity: 0; transform: translate(0); }
  15%  { opacity: .85; transform: translate(4px, 1px); }
  45%  { opacity: .5; transform: translate(2px, 0); }
  100% { opacity: 0; transform: translate(0); }
}

/* A single scan line sweeping the headline, in place of the full-hero CRT
   field. One controlled element crossing a known area is legible as an effect;
   a screen full of flickering bars is not. */
.glitch-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 234, 255, 0.06) 42%,
    rgba(0, 234, 255, 0.55) 50%,
    rgba(0, 234, 255, 0.06) 58%,
    transparent 100%);
  background-size: 100% 14px;
  background-repeat: no-repeat;
}
.hero.is-glitching .glitch-bars,
.hero:has(.hero-title:hover) .glitch-bars { animation: scanSweep 0.55s ease-out both; }
@keyframes scanSweep {
  0%   { opacity: 0; background-position: 0 12%; }
  12%  { opacity: 1; }
  85%  { opacity: .7; }
  100% { opacity: 0; background-position: 0 78%; }
}

/* Sparse ember-and-static particles, spawned by main.js at random offsets
   and intervals so the timing never repeats identically. */
.spark-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  opacity: 0;
  animation-name: sparkPop;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}
@keyframes sparkPop {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

.hero-sub { max-width: 44ch; font-size: clamp(0.95rem, 1.3vw, 1.08rem); margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.6rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.facts > div {
  flex: 1 1 128px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(16, 13, 26, 0.62);
  backdrop-filter: blur(6px);
}
.facts dt {
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-2);
  margin-bottom: 0.3rem;
}
.facts dd { font-family: var(--font-display); font-size: 1.22rem; color: var(--ink); }

/* ============================================================
   GAMES
   ============================================================ */
.games { background: var(--void); }

.game-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  /* No overflow:hidden. A hovered card lifts and scales past the grid's edge,
     and clipping it cut the top off the very hover border that is meant to
     show which card you are on. The rounded outer corners are instead carried
     by the corner cards themselves, below. */
}

/* Corner rounding follows the column count, so it has to be restated at each
   breakpoint — with 6 cards the corner cards change as the grid reflows. */
.game { overflow: hidden; }
.game:first-child { border-top-left-radius: 11px; }
.game:nth-child(3) { border-top-right-radius: 11px; }
.game:nth-child(4) { border-bottom-left-radius: 11px; }
.game:last-child { border-bottom-right-radius: 11px; }
.game {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
              transform 0.35s var(--ease);
}
/* A smooth lift rather than the previous shake. Six cards that twitch when the
   cursor crosses them is exactly the "chaos" the rest of this page avoids;
   the same information arrives from a quiet rise and the accent border. */
.game { position: relative; }
/* The little shake, back by request — one quick settle rather than a loop, and
   it ends parked on the lift so the card stays raised while hovered. */
.game:hover {
  background: #17122a;
  z-index: 2;   /* lift above neighbours so the border is never clipped by them */
  animation: cardJolt 0.42s var(--ease) forwards;
}
@keyframes cardJolt {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  35%  { transform: translateY(-5px) scale(1.014) rotate(-0.4deg); }
  68%  { transform: translateY(-2px) scale(0.997) rotate(0.22deg); }
  100% { transform: translateY(-3px) scale(1) rotate(0); }
}

/* The hover border lives on its own layer above the card's contents.
   As an inset box-shadow it painted on the card's background, so the art
   panel — which has its own opaque background — covered the top half of it,
   and the one piece of UI whose whole job is to confirm "you are on this
   card" was the piece being hidden. */
.game::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: inherit;   /* follow whichever corners this card rounds */
  transition: border-color 0.3s var(--ease);
}
.game:hover::after { border-color: var(--hot); }

/* ---- room diagram ----
   Original isometric SVG per room (see IMAGE-CREDITS.md). The real venue
   shows a render of each room; a schematic diagram gives the same "here's
   what you're walking into" read without passing off artwork as theirs. */
.game-art {
  position: relative;
  background: linear-gradient(168deg, #120e20, #0b0914);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
/* Fine grain over the diagram. A render has sampling noise and flat vector
   fills don't, which is a good part of why clean SVG reads as "drawing" rather
   than "render". The tile is a real Photoshop grain pass (see IMAGE-CREDITS.md)
   rather than synthetic CSS noise — 128px so it stays about 5KB, since noise is
   essentially incompressible and a full-size tile ran to 34KB. */
.game-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("../img/grain.webp");
  background-size: 128px 128px;
}
.room-art {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}
/* The room itself comes up in colour as you arrive — the lights coming on,
   before any of the individual fittings start their own sweep. */
.game:hover .room-art { transform: scale(1.04); filter: saturate(1.3) brightness(1.14); }

/* Nothing animates at rest — six rooms all idling would be noise. Everything
   below only runs while the card is hovered. */
.t-lava, .b-on, .hx-on, .hoop, .scr { transform-origin: center; }
.game:hover .t-lava { animation: lavaPulse 2.4s ease-in-out infinite; }
.game:hover .b-on { animation: btnPulse 1.1s ease-in-out infinite; }
.game:hover .hx-on { animation: btnPulse 1.5s ease-in-out infinite; }
.game:hover .hoop { animation: hoopPulse 1.6s ease-in-out infinite; }
.game:hover .scr { animation: scrFlick 0.9s steps(3, end) infinite; }
@keyframes lavaPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes btnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes hoopPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes scrFlick { 0%, 100% { opacity: .8; } 50% { opacity: .3; } }

/* The room waking up.
   Dormant fittings (--off) run up to the room's own accent (--rm) in a
   staggered sweep driven by each element's --i, so hovering a card starts
   something happening *inside* the room rather than only at its edges. Both
   custom properties are set on the <svg> by the generator. */
.room-art .cell { fill: var(--off, #241c44); }
.game:hover .room-art .cell {
  animation: cellWake 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.11s);
}
@keyframes cellWake {
  0%, 55%, 100% { fill: var(--off, #241c44); }
  22% { fill: var(--rm, #ff2d6f); }
}

/* ---- Hide & Seek: things watching from the dark ----
   Nearly shut and barely visible at rest, so the wall just looks like it has
   marks on it. Arriving opens them. They blink on individual offsets — eyes
   blinking in unison read as a light fitting, not as eyes — and the pupils
   drift, which is the detail that makes a shape feel like it is looking. */
.eye, .eye-lid, .eye-iris, .eye-look {
  transform-box: fill-box;
  transform-origin: center;
}
.eye { opacity: 0.4; transition: opacity 0.5s var(--ease); }
.game:hover .eye { opacity: 1; }

/* Shut, the lid collapses to a thin glowing line — a dormant slit on the wall
   rather than a squashed eye — and the iris scales away entirely, so nothing
   can peek outside a closed lid. */
.eye-lid {
  transform: scaleY(0.05);
  transition: transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.055s);
}
.eye-iris {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  transition-delay: calc(0.16s + var(--i, 0) * 0.055s);
}
/* Opening runs left to right around the room off --i, so they wake in sequence
   rather than snapping open together. */
.game:hover .eye-lid {
  transform: scaleY(1);
  animation: blinkLid 3.6s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i, 0) * 0.71s);
}
.game:hover .eye-iris {
  transform: scale(1);
  opacity: 1;
  animation: blinkIris 3.6s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i, 0) * 0.71s);
}
@keyframes blinkLid {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.05); }
}
@keyframes blinkIris {
  0%, 90%, 100% { transform: scale(1); }
  94% { transform: scale(0.1); }
}

/* The glance lives on its own layer so it never fights the open/shut scale. */
.game:hover .eye-look {
  animation: glance 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.47s);
}
@keyframes glance {
  0%, 20%, 100% { transform: translate(0, 0); }
  34%, 48% { transform: translate(1.6px, 0.5px); }
  62%, 80% { transform: translate(-1.5px, -0.4px); }
}

/* Hoops: a column of light rises out of each ring, staggered left to right,
   like a basket going in. Idle state is fully transparent so nothing shows
   until the cursor arrives. */
/* ---- Hoops: dark rig, fire on contact ----
   At rest these are unlit hoops on a wall and nothing else — no glow, no
   colour. Hovering lights the rings and boards and sets the flames going, so
   the effect is the reward for arriving rather than the resting state. */
/* Unlit, but still legibly a hoop: a visible metal ring against a dim backboard.
   Too dark and the wall just has five black rectangles on it. */
.room-art .hoop { stroke: #9184b8; transition: stroke 0.35s var(--ease); }
.room-art .hoop-plate {
  fill: #2a2250;
  stroke: #574778;
  stroke-width: 1;
  transition: fill 0.35s var(--ease), opacity 0.35s var(--ease), stroke 0.35s var(--ease);
}
.game:hover .room-art .hoop-plate { stroke: var(--rm); }
.game:hover .room-art .hoop { stroke: var(--rm); }
.game:hover .room-art .hoop-plate { fill: var(--rm); opacity: 0.42; }

.hoop-fire { opacity: 0; transition: opacity 0.3s var(--ease); }
.game:hover .hoop-fire { opacity: 1; }
/* Each tongue flickers on its own offset and duration; identical timing across
   all three is what makes fire look like a rigid shape instead of fire. */
.lick { transform-box: fill-box; transform-origin: bottom center; }
.game:hover .lick {
  animation: lick 0.85s ease-in-out infinite alternate;
  animation-delay: calc((var(--i, 0) * 0.13s) + (var(--f, 0) * 0.21s));
}
@keyframes lick {
  0%   { transform: translateY(2px) scaleY(0.72) scaleX(1.05); opacity: 0.75; }
  100% { transform: translateY(-3px) scaleY(1.12) scaleX(0.88); opacity: 1; }
}

.game-body {
  padding: 1.5rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.game h3 { margin-bottom: 0.6rem; }
.game-body > p { font-size: 0.92rem; margin-bottom: 1.3rem; }
.game.is-flag .game-art { background: linear-gradient(168deg, #24123c, #0b0914); }
.game.is-flag h3 { color: var(--hot); }
.game-flag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--volt);
  border: 1px solid rgba(201, 255, 61, 0.35);
  border-radius: 100px;
  padding: 0.28rem 0.65rem;
  margin-bottom: 0.9rem;
}

.game-meta { margin-top: auto; display: flex; gap: 1.4rem; }
.game-meta dt {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-2);
  margin-bottom: 0.2rem;
}
.game-meta dd { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

.game-combo { background: #0d0b16; }
.game-combo strong { color: var(--ink); font-weight: 600; }
.combo-note { font-size: 0.84rem; color: var(--dim-2); margin-top: auto; }

.age-note {
  max-width: var(--maxw);
  margin: 1.6rem auto 0;
  font-size: 0.86rem;
  color: var(--dim-2);
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--hot);
  background: #0d0b16;
  border-radius: 0 8px 8px 0;
}
.age-note strong { color: var(--ink); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: #0a0812; border-block: 1px solid var(--line-soft); }

.calc {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
}
.calc-controls {
  background: var(--panel);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  align-content: start;
}
.cfield { border: 0; }
.cfield-wide { grid-column: 1 / -1; }
.cfield legend {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim-2);
  margin-bottom: 0.7rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Seven equal columns rather than a flex wrap that orphans Sun on its own row. */
#dayChips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#dayChips .chip { padding-inline: 0.2rem; text-align: center; }
.chip {
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--dim); background: transparent;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0.55rem 0.8rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip:hover { color: var(--ink); border-color: var(--dim-2); }
.chip.is-on { background: var(--hot); border-color: var(--hot); color: #fff; }

#timeSel {
  width: 100%;
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--ink); background: #0c0a15;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
#timeSel:focus { outline: none; border-color: var(--hot); }

.stepper { display: inline-flex; align-items: center; gap: 0.85rem; }
.step {
  width: 38px; height: 38px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.step:hover:not(:disabled) { border-color: var(--hot); color: var(--hot); }
.step:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper output { font-size: 0.9rem; color: var(--dim); min-width: 8ch; text-align: center; }
.stepper output strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-right: 0.15em; }

.disc-hint { font-size: 0.78rem; color: var(--dim-2); margin-top: 0.7rem; }

.calc-out {
  background: linear-gradient(170deg, #17102a, #0d0b16 70%);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
}
.rate-badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: 100px;
  border: 1px solid rgba(201, 255, 61, 0.4); color: var(--volt);
  transition: color 0.3s, border-color 0.3s;
}
.rate-badge.is-peak { color: var(--hot); border-color: rgba(255, 45, 111, 0.45); }
.rate-why { font-size: 0.78rem; color: var(--dim-2); margin: 0.7rem 0 1.4rem; }

.rate-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.rate-cur { font-family: var(--font-display); font-size: 1.5rem; color: var(--dim); }
.rate-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.7rem);
  line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rate-unit { width: 100%; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }
.rate-strike { font-size: 0.82rem; color: var(--volt); margin-top: 0.7rem; }
.rate-strike s { color: var(--dim-2); }

.rate-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-2);
}
.rate-total strong {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--volt); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.rate-break { font-size: 0.8rem; color: var(--dim-2); margin: 0.4rem 0 1.4rem; }
.calc-out .btn { margin-top: auto; }
.rate-fine { font-size: 0.72rem; color: var(--dim-2); margin-top: 0.8rem; text-align: center; }

.rate-table { max-width: var(--maxw); margin: 2.2rem auto 0; }
.rate-table h3 { margin-bottom: 1rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.rate-table table { width: 100%; border-collapse: collapse; min-width: 460px; }
.rate-table th, .rate-table td { padding: 0.85rem 1.1rem; text-align: left; font-size: 0.9rem; }
.rate-table thead th {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-2);
  background: #0d0b16; border-bottom: 1px solid var(--line-soft);
}
.rate-table tbody th { font-weight: 400; color: var(--dim); }
.rate-table tbody td { font-family: var(--font-mono); color: var(--ink); }
.rate-table tbody tr + tr th, .rate-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.rate-table tbody tr:last-child td { color: var(--volt); }
.table-note { font-size: 0.8rem; color: var(--dim-2); margin-top: 0.9rem; max-width: 72ch; }

/* ============================================================
   VISIT
   ============================================================ */
.visit-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.vcard { background: var(--panel); padding: 1.6rem 1.5rem 1.7rem; }
.vcard h3 {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hot);
  margin-bottom: 1rem;
}
.vbig {
  font-family: var(--font-display); font-size: 1.22rem;
  line-height: 1.2; color: var(--ink); text-transform: none;
  margin-bottom: 0.7rem;
}
.vcard p { font-size: 0.88rem; }
.vsmall { font-size: 0.8rem !important; color: var(--dim-2); margin-top: 0.7rem; }

/* Grid stacking, not absolute positioning: both frames occupy the same single
   grid cell, so they can only ever overlap. The absolute version relied on the
   container establishing a containing block and stacked into two full-size
   copies whenever that didn't hold. */
.visit-shot {
  position: relative;
  display: grid;
  max-width: var(--maxw);
  margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.visit-shot img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) brightness(0.85);
}
/* The glitch layer is a Photoshop chromatic-aberration pass on the same
   photo (see IMAGE-CREDITS.md) — a real edit, not a CSS filter fake. */
.visit-glitch {
  opacity: 0;
  transition: opacity 0.12s steps(2, end);
}
.visit-shot:hover .visit-glitch {
  opacity: 1;
  animation: visitFlicker 0.7s steps(7, end) infinite;
}
@keyframes visitFlicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 0.82; }
  52% { opacity: 1; }
  79% { opacity: 0.55; }
  84% { opacity: 1; }
}
.visit-hint {
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  background: rgba(7, 6, 13, 0.6);
  border: 1px solid var(--line);
  opacity: 0.85;
  transition: opacity 0.3s;
  pointer-events: none;
}
.visit-shot:hover .visit-hint { opacity: 0; }
@media (hover: none) { .visit-hint { display: none; } }

/* ============================================================
   GROUPS
   ============================================================ */
.groups { background: #0a0812; border-block: 1px solid var(--line-soft); }
.groups-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.groups-copy h2 { margin-bottom: 1.3rem; }
.groups-copy > p { max-width: 44ch; }

.group-list { list-style: none; margin: 1.8rem 0; display: grid; gap: 0.9rem; }
.group-list li {
  font-size: 0.92rem; color: var(--dim);
  padding-left: 1.1rem; position: relative; line-height: 1.6;
}
.group-list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--hot);
}
.group-list strong { color: var(--ink); font-weight: 600; }

.group-cta { font-size: 0.92rem; }
.group-cta a { color: var(--volt); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.group-cta a:hover { border-bottom-color: var(--volt); }

/* A fact grid rather than a stock "people celebrating" photo — nothing in
   the licensed library actually shows this venue's rooms, and a generic
   crowd shot doesn't earn its place next to real numbers. */
.groups-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.groups-stats > div { background: var(--panel); padding: 1.5rem 1.4rem; }
.groups-stats dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-bottom: 0.55rem;
}
.groups-stats dd {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--hot);
  text-transform: uppercase;
  line-height: 1.15;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 860px; margin-inline: auto; }
.faq-list details {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.3rem 0;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 2.2rem 1.05rem 0;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.25s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--hot); }
.faq-list summary::after {
  content: '+';
  position: absolute; right: 0.2rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 1.15rem; color: var(--hot);
  transition: transform 0.3s var(--ease);
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 2.2rem 1.15rem 0; font-size: 0.92rem; max-width: 70ch; }

/* ============================================================
   BOOK
   ============================================================ */
.book { background: var(--void); text-align: center; }
.book-inner { max-width: 640px; margin-inline: auto; }
.book-inner h2 { margin-bottom: 1.1rem; }
.book-inner p { margin-bottom: 2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative; z-index: 2;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad) 2.2rem;
  background: #0a0812;
  border-top: 1px solid var(--line-soft);
}
.foot-top {
  max-width: var(--maxw);
  margin: 0 auto 2.4rem;
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
}
.foot-wordmark { margin-bottom: 0.7rem; }
.foot-brand p { font-size: 0.85rem; max-width: 38ch; }
.foot-brand a { color: var(--dim); border-bottom: 1px solid transparent; }
.foot-brand a:hover { color: var(--volt); border-bottom-color: var(--volt); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-links a { font-size: 0.85rem; color: var(--dim); transition: color 0.25s; }
.foot-links a:hover { color: var(--hot); }

.foot-legal {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--dim-2);
  position: relative;
  padding-right: 5rem;
}
.foot-legal strong { color: var(--dim); }
.foot-legal a { color: var(--dim); border-bottom: 1px solid var(--dim-2); }
.foot-legal a:hover { color: var(--volt); border-bottom-color: var(--volt); }
.foot-sig {
  position: absolute; right: 0; bottom: 0;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--line);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns: corners are 1, 2, 5, 6 */
  .game { border-radius: 0; }
  .game:first-child { border-top-left-radius: 11px; }
  .game:nth-child(2) { border-top-right-radius: 11px; }
  .game:nth-child(5) { border-bottom-left-radius: 11px; }
  .game:last-child { border-bottom-right-radius: 11px; }
}

@media (max-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .groups-grid { grid-template-columns: minmax(0, 1fr); }
  /* The games link stays reachable; the rest collapse. */
  .nav-links { gap: 1rem; }
  .nav-links a:not(.nav-key) { display: none; }
}

@media (max-width: 620px) {
  /* Both wordmark halves are now full display size, which is a much wider
     logo than the old tiny-suffix version. At phone widths the nav row
     (logo + link + CTA) no longer fits, so the logo steps down and the lone
     nav link drops — "Book now" is the one thing that has to survive, and
     the games section is still reachable via the skip link and the footer. */
  .logo-word, .logo-suffix { font-size: 0.85rem; letter-spacing: 0.03em; }
  .nav-links { display: none; }

  .hero { min-height: auto; }
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  /* one column: only the first and last cards have outer corners */
  .game { border-radius: 0; }
  .game:first-child { border-radius: 11px 11px 0 0; }
  .game:last-child { border-radius: 0 0 11px 11px; }
  .visit-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-controls { grid-template-columns: minmax(0, 1fr); }
  .facts > div { flex-basis: calc(50% - 0.3rem); }
  .foot-legal { padding-right: 0; }
  .foot-sig { position: static; display: block; margin-top: 0.8rem; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-title .rise { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .lava { display: none; }
}