/* fallbacks sized to the web fonts' widths (measured against Arial), so the swap doesn't move the layout */
@font-face { font-family: "Michroma Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 144%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 94%; }
/* Lava Floor — Arcade Night. Tokens from agency/3-direction/brand.json; do not invent values. */
:root {
  --bg: #06041C; --bg-darker: #030212; --surface: #110A3A; --surface-2: #1A1150;
  --violet: #3622D9; --violet-edge: #2414A8; --lava: #E3025E; --mint: #26F7A2; --blue: #4F74FF;
  --text: #ECEAFB; --muted: #A9A4D8; --lava-text: #FF4D8F; --violet-text: #9D92FF; --on-mint: #04140D;
  --grid: rgba(169,164,216,.16); --hair: rgba(169,164,216,.24);
  --glow-lava: 0 0 0 1px rgba(227,2,94,.4), 0 0 28px rgba(227,2,94,.55);
  --glow-mint: 0 0 22px rgba(38,247,162,.32);
  --glow-violet: 0 0 26px rgba(54,34,217,.55);
  --glow-blue: 0 0 18px rgba(79,116,255,.38);
  --font-display: "Michroma", "Michroma Fallback", sans-serif;
  --font-body: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  --font-label: "Silkscreen", ui-monospace, monospace;
  --font-led: "Doto", ui-monospace, monospace;
  --h1: clamp(1.75rem, 4.2vw, 3.2rem); --h2: clamp(1.35rem, 2.6vw, 2rem); --h3: 1.15rem;
  --wrap: 1180px; --gutter: 16px; --section-y: clamp(4rem, 9vw, 7rem);
  --dur-micro: 140ms; --dur-in: 420ms; --ease: cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background-color: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mint); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, .h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
/* thick white headings with a neon halo: the display face is a single weight, so a stroke in the text colour thickens it */
h1, h2 { color: #fff; -webkit-text-stroke: .035em currentColor; letter-spacing: .03em; text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 22px rgba(227,2,94,.45), 0 0 54px rgba(54,34,217,.8); }
h3, .h3 { -webkit-text-stroke: .02em currentColor; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--mint); color: var(--on-mint); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ----- labels, buttons ----- */
.eyebrow { display: flex; align-items: center; gap: 10px; font: .75rem/1.2 var(--font-label); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font: .8125rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  padding: 14px 22px; color: #fff; background: var(--lava); border: 2px solid var(--lava); border-radius: 0;
  transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); touch-action: manipulation; cursor: pointer;
}
.btn:not(.btn-ghost) { box-shadow: 0 0 0 1px rgba(227,2,94,.4), 0 0 24px rgba(227,2,94,.5); }
.btn:hover { color: #fff; transform: translateY(-1px); background: #F51A72; border-color: #F51A72; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { color: var(--bg); background: #fff; border-color: #fff; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.textlink { font: .8125rem var(--font-label); text-transform: uppercase; color: var(--mint); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding-block: 14px; margin-block: -14px; }
.textlink::after { content: "→"; transition: transform var(--dur-micro) var(--ease); }
.textlink:hover::after { transform: translateX(4px); }

/* ----- header ----- */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 12px; background: linear-gradient(var(--bg) 60%, transparent); }
.bar { position: relative; display: flex; align-items: center; gap: 12px; background: var(--bg-darker); border: 1px solid var(--violet); padding: 8px 10px 8px 14px; min-height: 56px; box-shadow: 0 0 26px rgba(54,34,217,.6), 0 10px 30px rgba(0,0,0,.35); }
.logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104px; }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.menu { list-style: none; margin: 0; padding: 0; display: none; }
.menu a { font: .75rem var(--font-label); text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: .03em; }
.menu a[aria-current="page"], .menu a:hover { color: var(--mint); }
.btn-bar { margin-left: auto; min-height: 40px; padding: 10px 14px; font-size: .75rem; }
.burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; }
.burger i { display: block; width: 22px; height: 2px; background: #fff; }
.menu.open { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-darker); border: 1px solid var(--hair); padding: 8px 0; }
.menu.open a { display: block; padding: 14px 18px; font-size: .875rem; }
@media (min-width: 1000px) {
  .burger { display: none; }
  .menu { display: flex; gap: 22px; }
  .bar { padding: 8px 10px 8px 22px; }
  .logo { width: 128px; }
}

/* ----- cards / tones ----- */
.card { position: relative; background: var(--surface); border: 2px solid var(--violet); margin: 0; }
/* lit cards: a tile-coloured border with the matching glow; they power on as they scroll into view */
.tone-mint { border-color: var(--mint); box-shadow: var(--glow-mint); }
.tone-lava { border-color: var(--lava); box-shadow: var(--glow-lava); }
.tone-blue { border-color: var(--blue); box-shadow: var(--glow-blue); }
.tone-violet { border-color: var(--violet); box-shadow: var(--glow-violet); }
[data-light] { transition: box-shadow var(--dur-in) var(--ease), border-color var(--dur-in) var(--ease); }
.js [data-light]:not(.lit) { box-shadow: none; border-color: var(--hair); }
figure.card { overflow: hidden; }
figure.card img { width: 100%; height: 100%; object-fit: cover; }
.tile { padding: 22px; }
.tile-name { font: 1rem/1.25 var(--font-display); text-transform: uppercase; margin-bottom: 8px; }
.tile p:last-child { margin-bottom: 0; }
.tile .ico { color: var(--muted); margin-bottom: 12px; }

/* ----- sections, layout ----- */
.section { padding: calc(var(--section-y) / 2) 0; }
.two-col { display: grid; gap: 32px; align-items: start; }
.head-row { align-items: end; margin-bottom: 28px; }
.head-row p { color: var(--muted); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 56px; } .section { padding: calc(var(--section-y) * .6) 0; } }
.tiles { display: grid; gap: 14px; margin: 24px 0; }
@media (min-width: 640px) { .tiles-3, .tiles-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles-3 { grid-template-columns: repeat(3, 1fr); } .tiles-4 { grid-template-columns: repeat(4, 1fr); } }

/* ----- photos (client, 2026-10-04: "there are no pictures at all") ----- */
/* a backdrop fills its section under a dark wash; each section sets its own wash */
.backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.backdrop::after { content: ""; position: absolute; inset: 0; }
/* .side (sidePhoto()): the photo runs down the right side, fading in from the left and out at the top and bottom, with the
   section's words in a column on the left. On phones it sits across the top and fades downward into the words.
   Used by page heroes, sections with a photo, the home rules row and the footer (user, 2026-10-04) */
.has-photo { position: relative; isolation: isolate; overflow: hidden; }
.backdrop.side { left: auto; width: 58%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%); }
.backdrop.side::after { background: rgba(3,2,18,.35); }
.backdrop.side img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.section.has-photo { padding: clamp(64px, 8vw, 112px) 0; }
.photo-copy { max-width: 560px; }
.has-photo .stack { align-self: center; }
@media (min-width: 900px) {
  .page-hero.has-photo { display: grid; align-items: center; min-height: clamp(440px, 38vw, 560px); padding: 56px 0; }
  .page-hero.has-photo > .wrap { width: 100%; }
  .page-hero.has-photo .ph-grid { grid-template-columns: minmax(0, 580px); }
}
@media (max-width: 899px) {
  .backdrop.side { width: 100%; height: 420px; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
  .backdrop.side img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
  .section.has-photo, .page-hero.has-photo { padding-top: 250px; }
}
/* two photos edge to edge between text sections, split by black grout like the LED floor's tiles. The wider photo swaps
   sides on .flip, and the pair fades into the page at the top and bottom */
.photo-row { display: grid; grid-template-columns: 7fr 5fr; gap: 6px; height: clamp(260px, 38vw, 580px); background: linear-gradient(180deg, var(--mint), var(--blue) 50%, var(--lava));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); }
.photo-row.flip { grid-template-columns: 5fr 7fr; }
.photo-row figure { margin: 0; min-width: 0; overflow: hidden; }
.photo-row img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 719px) { .photo-row, .photo-row.flip { grid-template-columns: 1fr 1fr; gap: 4px; height: 250px; } }

/* ----- vibrant redesign (client, 2026-10-04: the old look was "more colourful... vibrant/exciting", the new one reads
   better and has "lesser nonstop colours in all the fonts and buttons"). Colour lives in light: the lit floor, glows
   and pools behind sections. Words stay white, buttons stay one pink. ----- */
/* home hero: the real photo sits dark; a lit LED floor runs along the bottom, playing levels, and its light rises into the hero */
.hero-x { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 0; text-align: center; }
.hero-x .backdrop { --focus: 50% 55%; }
.hero-x .backdrop::after { background: radial-gradient(ellipse 75% 60% at 50% 38%, rgba(6,4,28,.62), rgba(6,4,28,.9) 72%), linear-gradient(180deg, rgba(6,4,28,.4), transparent 30%, transparent 72%, var(--bg)); }
/* the lit floor lights the room: a soft glow in the three tile colours rising from the bottom of the hero */
.hero-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 55% at 22% 100%, rgba(38,247,162,.22), transparent 70%), radial-gradient(ellipse 40% 65% at 50% 100%, rgba(227,2,94,.3), transparent 72%), radial-gradient(ellipse 34% 55% at 78% 100%, rgba(79,116,255,.28), transparent 70%); }
.hero-center { position: relative; display: flex; flex-direction: column; align-items: center; }
/* eyebrow chip: the logo's iso tile block and a pixel label in a dark tile */
.chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 12px; font: .75rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: rgba(3,2,18,.72); border: 1px solid var(--hair); }
.iso-mark { display: inline-grid; grid-template-columns: repeat(2, 7px); gap: 2px; transform: rotateX(55deg) rotateZ(-45deg); flex: none; }
.iso-mark i { width: 7px; height: 7px; background: var(--lava); }
.iso-mark i:nth-child(1), .iso-mark i:nth-child(4) { background: transparent; outline: 1.5px solid var(--violet-text); outline-offset: -1.5px; }
/* the slogan, huge and neon, one word per tile colour. Each word pops in, then switches colour like a floor tile: green,
   blue, red with a dark flick between (the tile going off and on), each word in a different order so all three colours
   stay on screen, the switch rippling left to right (user, 2026-10-04) */
.slogan-x { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .42em; margin: 0 0 clamp(14px, 2vw, 22px); font: clamp(2.6rem, 5.1vw, 4.7rem)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.slogan-x span { display: inline-block; -webkit-text-stroke: .05em currentColor; text-shadow: 0 0 2px rgba(255,255,255,.55), 0 0 20px currentColor, 0 0 56px currentColor; color: var(--c1); animation: pop-in .75s cubic-bezier(.2,1.5,.4,1) both, led-cycle 6.6s steps(1, end) infinite; animation-delay: calc(var(--i) * 170ms + 150ms), calc(var(--i) * 140ms + 1.6s); }
.slogan-x .sl-mint { --c1: var(--mint); --c2: #8EA5FF; --c3: #FF3D86; }
.slogan-x .sl-blue { --c1: #8EA5FF; --c2: #FF3D86; --c3: var(--mint); }
.slogan-x .sl-lava { --c1: #FF3D86; --c2: var(--mint); --c3: #8EA5FF; }
@keyframes led-cycle { 0% { color: var(--c1); } 30% { color: #231a55; } 33% { color: var(--c2); } 63% { color: #231a55; } 66% { color: var(--c3); } 96% { color: #231a55; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.35) rotate(-8deg); } 60% { opacity: 1; } to { transform: none; } }
@media (max-width: 599px) { .slogan-x { flex-direction: column; font-size: clamp(2.4rem, 13vw, 3.3rem); } }
.hero-x h1 { max-width: 20em; margin: 0 0 14px; font-size: clamp(1.45rem, 3vw, 2.4rem); }
.hero-x .lede { max-width: 36em; margin: 0 0 22px; }
/* the price in LED digits (hero, /how-to-play/) */
.hero-price { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 10px; }
.hero-price p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.hero-price .led { font-size: clamp(2.1rem, 3.6vw, 2.7rem); }
.hp-l { font: .75rem/1.3 var(--font-label); text-transform: uppercase; color: var(--muted); }
/* on the home hero the two prices sit side by side as lit scoreboard boxes */
.hero-x .hero-price { justify-content: center; gap: 12px; margin: 0 0 24px; }
.hero-x .hero-price p { flex-direction: column; align-items: center; gap: 6px; padding: 12px 22px 10px; background: rgba(3,2,18,.8); border: 2px solid var(--mint); box-shadow: var(--glow-mint), inset 0 0 20px rgba(38,247,162,.12); }
.hero-x .hero-price .led { font-size: clamp(2.2rem, 4vw, 3rem); }
@media (max-width: 599px) { .hero-x .hero-price { flex-wrap: nowrap; width: 100%; max-width: 360px; } .hero-x .hero-price p { flex: 1 1 0; padding: 10px 8px 8px; } .hero-x .hp-l { text-align: center; } }
.hero-x .ctas { justify-content: center; }
.btn-xl { min-height: 56px; padding: 18px 28px; font-size: .875rem; }
.hero-x .btn:not(.btn-ghost) { animation: cta-pulse 2.4s ease-in-out infinite; }
@keyframes cta-pulse { 50% { box-shadow: 0 0 0 1px rgba(255,42,122,.8), 0 0 54px rgba(255,42,122,.85); } }
.hero-x .rating-chip { margin-top: 20px; }
/* the lit floor along the bottom of the hero, in perspective; lit tiles flick in a wave out from the middle */
.hero-floor { position: relative; height: clamp(150px, 19vw, 250px); margin-top: clamp(24px, 4vw, 48px); perspective: 420px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); }
.hf-grid { position: absolute; left: 50%; bottom: 0; width: 160%; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; padding: 4px; background: #000;
  transform: translateX(-50%) rotateX(64deg); transform-origin: 50% 100%; }
.hf-grid i { aspect-ratio: 1; background: #120d33; transition: background .2s, box-shadow .2s, opacity .35s calc(var(--row) * 70ms); }
.hf-grid i.g { background: var(--mint); box-shadow: 0 0 16px rgba(38,247,162,.75); }
.hf-grid i.b { background: var(--blue); box-shadow: 0 0 16px rgba(79,116,255,.8); }
.hf-grid i.r { background: var(--lava); box-shadow: 0 0 16px rgba(227,2,94,.85); animation: hf-lava 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -53ms); }
@keyframes hf-lava { 50% { background: #ff2a7a; box-shadow: 0 0 28px rgba(255,42,122,.95); } }
/* a blue tile going out as the player steps off it */
.hf-grid i.pop { animation: hf-pop .46s ease-out; }
@keyframes hf-pop { 0% { background: #dfe8ff; box-shadow: 0 0 30px #9fc2ff; } 100% { background: #120d33; box-shadow: none; } }
/* the player: a white-lit tile */
.hf-grid i.p { background: #fff; box-shadow: 0 0 22px rgba(255,255,255,.9), 0 0 54px rgba(160,190,255,.65); animation: none; }
/* between levels the floor goes dark, then lights again row by row from the front */
.hf-grid.dark i { opacity: .1; }
/* level clear: a blue ripple out from the last step */
.hf-grid.won i { animation: hf-won .75s ease-out both; animation-delay: calc(var(--w, 0) * 55ms); }
@keyframes hf-won { 35% { background: #6E8DFF; box-shadow: 0 0 24px rgba(79,116,255,.95); } }

/* sections: a centred head with a thick glowing heading, and a pool of coloured light behind each section */
.sec-x { position: relative; isolation: isolate; overflow-x: clip; }
.sec-x::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1200px, 130%); height: 560px; translate: -50% -12%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 46% at 50% 32%, var(--pool), transparent 72%); }
.pool-mint { --pool: rgba(38,247,162,.16); } .pool-violet { --pool: rgba(54,34,217,.42); } .pool-lava { --pool: rgba(227,2,94,.2); } .pool-blue { --pool: rgba(79,116,255,.24); }
.sec-head { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.sec-head h2 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.sec-lede { max-width: 40em; margin: 16px 0 0; color: var(--muted); }
.ctas-c { justify-content: center; }
/* a row of LED floor tiles between sections: square tiles in black grout that switch on and off like the real floor.
   steps() makes each colour snap on, the way an LED tile does, rather than fade */
.tile-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); grid-auto-rows: 26px; gap: 4px; height: 34px; padding: 4px; overflow: hidden; background: #000; box-shadow: 0 0 34px rgba(54,34,217,.5); }
.tile-strip i { background: #120d33; animation: var(--t) steps(1, end) var(--o) infinite; }
.tile-strip i.sa { animation-name: ts-a; } .tile-strip i.sb { animation-name: ts-b; } .tile-strip i.sc { animation-name: ts-c; }
@keyframes ts-a { 0% { background: #120d33; box-shadow: none; } 34% { background: var(--mint); box-shadow: 0 0 14px rgba(38,247,162,.7); } 52% { background: #120d33; box-shadow: none; } 74% { background: var(--blue); box-shadow: 0 0 14px rgba(79,116,255,.75); } 86% { background: #120d33; box-shadow: none; } }
@keyframes ts-b { 0% { background: var(--blue); box-shadow: 0 0 14px rgba(79,116,255,.75); } 16% { background: #120d33; box-shadow: none; } 56% { background: var(--lava); box-shadow: 0 0 14px rgba(227,2,94,.8); } 70% { background: #120d33; box-shadow: none; } 90% { background: var(--mint); box-shadow: 0 0 14px rgba(38,247,162,.7); } }
@keyframes ts-c { 0% { background: #120d33; box-shadow: none; } 42% { background: var(--lava); box-shadow: 0 0 14px rgba(227,2,94,.8); } 56% { background: #120d33; box-shadow: none; } 78% { background: var(--mint); box-shadow: 0 0 14px rgba(38,247,162,.7); } 90% { background: var(--blue); box-shadow: 0 0 14px rgba(79,116,255,.75); } }
/* two rooms: words left, the two gameplay clips tilted in their lit frames */
.squad-grid { align-items: center; }
.squad-copy .lede { font-size: 1.2rem; }
.vid-row.vid-row-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vid-row.tilt > :nth-child(1) { rotate: -2deg; }
.vid-row.tilt > :nth-child(2) { rotate: 2deg; translate: 0 18px; }
/* how it works: the client's explainer clip beside three big lit rule tiles */
.how-grid { display: grid; gap: 32px; align-items: center; }
.how-vid { width: min(100%, 320px); justify-self: center; }
.how-vid .vid { rotate: -2deg; }
.how-tiles { display: grid; gap: 14px; }
.how-tiles .rule-tile { grid-template-columns: 76px 1fr; align-content: center; padding: 20px 22px; background: rgba(17,10,58,.92); }
.how-tiles .rule-tile .led-tile { width: 76px; grid-row: 1 / 3; margin: 0; }
.how-tiles .rule-tile .tile-name { font-size: 1.4rem; }
.how-link { margin: 6px 0 0; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 360px minmax(0, 540px); justify-content: center; gap: 64px; } .how-vid { width: 100%; } }
/* reviews: three lit cards, the outer two tipped like scattered tiles */
@media (min-width: 900px) { .reviews-sec .review-row > :nth-child(1) { rotate: -1.2deg; } .reviews-sec .review-row > :nth-child(3) { rotate: 1.2deg; } .reviews-sec .review-row > :nth-child(2) { translate: 0 -10px; } }
.games-grid { align-items: center; margin-top: clamp(24px, 3vw, 40px); }
.faq-wrap { max-width: 820px; margin: 0 auto 28px; }
.rule-tile { display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; align-items: center; padding: 16px 18px; }
.rule-tile .led-tile { grid-row: 1 / 3; }
.rule-tile .tile-name { margin: 0 0 4px; font-size: 1.15rem; }
.rule-tile p:last-child { margin: 0; }
@media (min-width: 900px) { .rule-tile { grid-template-columns: 1fr; align-content: start; padding: 24px 22px; } .rule-tile .led-tile { grid-row: auto; margin-bottom: 18px; } }
/* one LED floor tile: bright core, black grout ring, coloured glow; it powers on when the card lights up */
.led-tile { --c: var(--mint); --g: rgba(38,247,162,.6); width: 60px; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.8) 0, var(--c) 42%, color-mix(in srgb, var(--c) 72%, #000) 100%); box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--hair), 0 0 26px var(--g); transition: filter var(--dur-in) var(--ease), box-shadow var(--dur-in) var(--ease); }
.tone-blue .led-tile { --c: var(--blue); --g: rgba(79,116,255,.65); }
.tone-lava .led-tile { --c: var(--lava); --g: rgba(227,2,94,.7); }
.tone-lava.lit .led-tile { animation: led-breathe 2.6s ease-in-out infinite; }
@keyframes led-breathe { 50% { box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--hair), 0 0 44px rgba(255,42,122,.95); } }
.js .rule-tile:not(.lit) .led-tile { filter: brightness(.3) saturate(.6); box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--hair); }
.games-head { align-items: center; }
.games-cta { margin: 0 0 28px; }
.games-sec .games-table { margin-top: 28px; }
.stats-3 { grid-template-columns: 1fr; }
.stats-3 .card { padding: 20px; }
@media (min-width: 560px) { .stats-3 { grid-template-columns: repeat(3, 1fr); } }
/* a rating inside a facts list uses the same badge as the hero */
.facts .rating-chip { margin-top: 0; }
.lede { font-size: 1.125rem; color: var(--text); }
.price-line { font: .8125rem/1.5 var(--font-label); color: var(--muted); text-transform: uppercase; }
/* rating chip: a Google panel and a Tripadvisor panel, like two small scoreboards */
.rating-chip { display: inline-grid; grid-auto-flow: column; margin-top: 22px; background: rgba(3,2,18,.72); border: 1px solid var(--hair); color: var(--muted); text-decoration: none; transition: border-color var(--dur-micro), box-shadow var(--dur-micro); }
.rating-chip:hover { border-color: var(--muted); }
.rc-cell { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 10px 18px 10px 14px; }
.rc-cell + .rc-cell { border-left: 1px solid var(--hair); }
.rc-logo { grid-row: 1 / 3; width: 22px; height: 22px; fill: #fff; opacity: .9; }
.rc-score { display: flex; align-items: center; gap: 8px; }
.rc-score .led-sm { font-size: 1.4rem; }
.rc-score .stars { gap: 2px; }
.rc-score .stars i { width: 11px; height: 11px; }
.rc-count { font-size: .75rem; line-height: 1.2; color: var(--muted); }
.rating-chip:hover .rc-count { color: var(--text); }
@media (max-width: 400px) { .rc-cell { column-gap: 9px; padding: 9px 12px 9px 10px; } .rc-logo { width: 18px; height: 18px; } .rc-score { gap: 6px; } .rc-score .led-sm { font-size: 1.2rem; } .rc-score .stars i { width: 9px; height: 9px; } }

/* ----- scoreboard (from direction C) ----- */
.scoreboard { display: grid; grid-template-columns: 1.2fr 1fr 1.25fr; background: var(--bg-darker); border: 1px solid var(--hair); }
.sb-cell { padding: 12px 14px; border-right: 1px solid var(--hair); min-width: 0; }
.sb-cell:last-child { border-right: 0; }
.sb-label { display: block; font: .625rem var(--font-label); color: var(--muted); letter-spacing: .1em; margin-bottom: 4px; }
.led, .led-sm, .led-lg, .led-xl { font-family: var(--font-led); font-weight: 900; color: var(--mint); text-shadow: 0 0 10px rgba(38,247,162,.3); line-height: 1; font-variant-numeric: tabular-nums; }
.led { font-size: clamp(1.6rem, 5vw, 3rem); }
.led-sm { font-size: 1.15rem; }
.led-lg { font-size: clamp(2.2rem, 5vw, 3.2rem); display: block; }
.led-xl { font-size: clamp(3.2rem, 9vw, 5rem); }
.led-lava { color: var(--lava-text); text-shadow: 0 0 10px rgba(227,2,94,.35); }
/* star after a rating; sized to its text, mint with the LED glow */
.rate-star { display: inline-block; width: .62em; height: .62em; margin: 0 .04em 0 .14em; vertical-align: .02em; fill: var(--mint); }
.led-sm .rate-star, .led-lg .rate-star, .led-xl .rate-star { width: .55em; height: .55em; vertical-align: .12em; }
/* lives are pixel hearts (a 7x6 grid), dimmed when lost */
.lives { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; }
.lives i { width: clamp(10px, 2.2vw, 18px); aspect-ratio: 7 / 6; background: #ff2a7a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E") center / contain no-repeat; transition: background var(--dur-micro); }
.lives i.off { background: #3a1024; }
.sb-stack { margin-bottom: 16px; }

/* games table */
.games-table { border: 1px solid var(--hair); background: var(--bg-darker); margin: 8px 0 20px; }
.gt-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 16px; border-bottom: 1px solid var(--hair); align-items: center; }
.gt-row:last-child { border-bottom: 0; }
.gt-row > span:nth-child(3) { grid-column: 1 / -1; color: var(--muted); }
.gt-head { display: none; }
.gt-name { font: .875rem var(--font-label); text-transform: uppercase; }
.gt-row .led { font-size: 2rem; text-align: right; }
@media (min-width: 720px) {
  .gt-row { grid-template-columns: 1.1fr .6fr 2fr; }
  .gt-row > span:nth-child(3) { grid-column: auto; }
  .gt-row .led { text-align: left; }
  .gt-head { display: grid; font: .625rem var(--font-label); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; }
}

/* ----- iso floor (from direction B) ----- */
.iso { display: grid; place-items: center; min-height: 300px; perspective: 1200px; overflow: hidden; container-type: inline-size; }
.iso-slab { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; width: min(330px, 64cqi); padding: 8px; background: #000; transform: rotateX(56deg) rotateZ(-45deg); box-shadow: -12px 12px 0 var(--violet-edge), 0 0 60px rgba(54,34,217,.35); }
.iso-slab i { aspect-ratio: 1; background: #17123a; transition: background var(--dur-micro), box-shadow var(--dur-micro); }
.iso-slab .t-r { background: var(--lava); box-shadow: 0 0 10px rgba(227,2,94,.7); }
.iso-slab .t-g { background: var(--mint); box-shadow: 0 0 10px rgba(38,247,162,.6); }
.iso-slab .t-b { background: var(--blue); box-shadow: 0 0 10px rgba(79,116,255,.7); }
.iso-slab .t-b.cleared { background: #17123a; box-shadow: none; }
/* the slab turns 45deg, so its on-screen width is about 1.42x its own; 64cqi keeps the corners inside the box */
@media (min-width: 900px) { .iso { min-height: 420px; } .iso-slab { width: min(380px, 64cqi); } }

/* iso floor animation (main.js) */
.iso { grid-template-rows: 1fr auto; }
.iso-slab { animation: iso-float 6s ease-in-out infinite; }
@keyframes iso-float {
  0%, 100% { transform: translateY(0) rotateX(56deg) rotateZ(-45deg); }
  50% { transform: translateY(-10px) rotateX(56deg) rotateZ(-45deg); }
}
.iso-slab i { transition: background .22s, box-shadow .22s, transform .22s, opacity .22s; }
.iso-slab .t-r { animation: lava-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -97ms); }
@keyframes lava-breathe { 50% { background: #ff2a7a; box-shadow: 0 0 16px rgba(255,42,122,.85); } }
.iso-slab.dark i:not(.on) { background: #0d0a24 !important; box-shadow: none !important; animation: none; opacity: .7; }
.iso-slab i { position: relative; }
.iso-slab i.player { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 16px rgba(255,255,255,.4); animation: none; }
.iso-slab i.pop { animation: tile-pop .42s ease-out; }
@keyframes tile-pop { 0% { background: #bfe0ff; box-shadow: 0 0 26px #9fc2ff; } 100% { background: #17123a; box-shadow: none; } }
.iso-slab i.flare { animation: lava-flare .7s ease-out; }
@keyframes lava-flare { 0%, 100% { background: #17123a; } 30% { background: #ff2a7a; box-shadow: 0 0 22px rgba(255,42,122,.9); } }
/* the player is a pair of bare feet: prints land left, right, left on the tiles walked and fade into a short trail */
.iso-slab { --foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M12.5 12C17.5 11.6 20.6 14.6 20.2 19.2C19.9 22.6 17 24.4 16.2 27.4C15.6 29.8 17.2 32 16.6 35.2C16 38.4 13.6 39.6 11 39.6C7.6 39.6 5.6 37.4 5.8 33.6C6 29.6 4.2 25.6 4.2 20.6C4.2 15.4 7.6 12.4 12.5 12Z'/%3E%3Cellipse cx='17.6' cy='6.4' rx='3' ry='3.7'/%3E%3Cellipse cx='12.6' cy='4.6' rx='2' ry='2.4'/%3E%3Cellipse cx='9' cy='5.6' rx='1.75' ry='2.05'/%3E%3Cellipse cx='6.1' cy='7.7' rx='1.5' ry='1.75'/%3E%3Cellipse cx='4' cy='10.6' rx='1.25' ry='1.45'/%3E%3C/svg%3E"); }
.fp { --side: -1; position: absolute; left: 50%; top: 50%; z-index: 2; width: 50%; height: 84%; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--dir, 0deg)) translateX(calc(var(--side) * 46%)); filter: drop-shadow(0 0 1px rgba(6,4,28,.95)) drop-shadow(0 0 5px rgba(255,255,255,.8)); }
.fp.r { --side: 1; }
.fp::before { content: ''; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--foot) center / contain no-repeat; mask: var(--foot) center / contain no-repeat; opacity: 0; animation: fp-step 1.6s ease-out forwards; }
.fp.r::before { transform: scaleX(-1); }
.fp.stand::before { animation-duration: 2.6s; }
@keyframes fp-step { 0% { opacity: 0; scale: 1.4; } 10% { opacity: 1; scale: 1; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1; } }
/* level clear: the floor thumps and shakes, and a blue ripple covers it, running out from the last step (--d = rings from the player) */
.iso-slab.shake { animation: iso-float 6s ease-in-out infinite, iso-shake .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes iso-shake {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  10% { translate: 0 9px; scale: .975; }
  22% { translate: -8px -3px; rotate: -1.2deg; scale: 1.015; }
  36% { translate: 7px 2px; rotate: 1deg; scale: 1; }
  50% { translate: -5px -1px; rotate: -.6deg; }
  64% { translate: 4px 1px; rotate: .4deg; }
  80% { translate: -2px 0; rotate: -.15deg; }
}
.iso-slab.cleared i { animation: level-clear .6s ease-out; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes level-clear { 25% { background: #6E8DFF; box-shadow: 0 0 22px rgba(79,116,255,.95); } }
/* floor sits on a soft violet glow; the HUD is a mini scoreboard, centred under the slab */
.iso { background: radial-gradient(ellipse 46% 30% at 50% 46%, rgba(54,34,217,.32), transparent 72%); }
.iso-hud { display: grid; grid-template-columns: 1.5fr 1fr 1fr; width: min(380px, 92%); margin: -18px auto 0; background: var(--bg-darker); border: 1px solid var(--hair); position: relative; z-index: 1; }
.hud-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; min-width: 0; border-right: 1px solid var(--hair); }
.hud-cell:last-child { border-right: 0; }
.iso-hud .sb-label { margin: 0; }
.hud-text { font: .75rem/1.2 var(--font-label); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iso-hud .led { font-size: 1.6rem; }
.iso-hud.clear .hud-text { color: #8EA5FF; text-shadow: 0 0 12px rgba(79,116,255,.7); }
.iso-note { width: min(380px, 92%); margin: 10px auto 0; font-size: .8rem; line-height: 1.4; color: var(--muted); text-align: center; text-wrap: balance; }

/* ----- facts ----- */
.facts { margin: 0; border-top: 1px solid var(--hair); }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font: .75rem var(--font-label); color: var(--muted); text-transform: uppercase; }
.facts dd { margin: 0; }
@media (min-width: 560px) { .facts > div { grid-template-columns: 9.5rem 1fr; gap: 16px; } }

/* ----- rooms / video ----- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.stats > div { min-width: 0; }
.stat-l { display: block; font: .7rem/1.35 var(--font-label); text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.stats-col { grid-template-columns: 1fr; }
.stats-col > div { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.stats-4 { grid-template-columns: repeat(2, 1fr); }
.stats-4 .card { padding: 20px; }
@media (min-width: 900px) { .stats-4 { grid-template-columns: repeat(4, 1fr); } }
.vid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vid { aspect-ratio: 9 / 16; }
.vid video, .vid img { width: 100%; height: 100%; object-fit: cover; }

/* ----- reviews ----- */
.score-line { display: flex; align-items: center; gap: 14px; }
.review-grid { display: grid; gap: 14px; margin: 8px 0 20px; }
@media (min-width: 720px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .review-grid { grid-template-columns: repeat(4, 1fr); } .review-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.review { padding: 20px; display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 14px; flex: 1; }
.review-title { font: .8125rem/1.3 var(--font-label); text-transform: uppercase; margin: 10px 0 8px; }
.review-meta { color: var(--muted); font-size: .8125rem; margin: 0; }
.stars { display: inline-flex; gap: 4px; }
.stars i { width: 15px; height: 15px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4 0h1v2H4zM3 2h3v1H3zM0 3h9v1H0zM1 4h7v1H1zM2 5h5v1H2zM2 6h2v1H2zM5 6h2v1H5zM1 7h2v1H1zM6 7h2v1H6zM1 8h1v1H1zM7 8h1v1H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4 0h1v2H4zM3 2h3v1H3zM0 3h9v1H0zM1 4h7v1H1zM2 5h5v1H2zM2 6h2v1H2zM5 6h2v1H5zM1 7h2v1H1zM6 7h2v1H6zM1 8h1v1H1zM7 8h1v1H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.stars i.off { background: var(--surface-2); }
.review-wall { columns: 1; column-gap: 14px; }
.review-wall .review { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 720px) { .review-wall { columns: 2; } }
@media (min-width: 1100px) { .review-wall { columns: 3; } }
/* reviews: a photo of each kind of group beside a testimonial from that group */
.stories { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 760px) { .stories { grid-template-columns: 1fr 1fr; } }
.card.story { display: grid; padding: 0; overflow: hidden; }
@media (min-width: 520px) { .card.story { grid-template-columns: 42% 1fr; } }
.story-shot { position: relative; min-height: 240px; background: var(--bg-darker); }
.story-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.story-tag { position: absolute; left: 10px; top: 10px; padding: 6px 9px; color: #fff; background: rgba(6,4,28,.85); border: 1px solid var(--hair); font: .65rem var(--font-label); text-transform: uppercase; letter-spacing: .08em; }
.story-body { display: flex; flex-direction: column; padding: 22px; }
.story-body blockquote { margin: 0 0 14px; flex: 1; }
.stories-note { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.score { padding: 28px; text-align: left; }
.score .stars { margin: 10px 0 14px; }

/* ----- visit ----- */
.tall { aspect-ratio: 3 / 4; max-height: 560px; }
.info-list { list-style: none; padding: 0; margin: 0 0 20px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.info-list .ico { color: var(--muted); flex: none; margin-top: 2px; }

/* ----- faq ----- */
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-child { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 14px; height: 14px; flex: none; margin-top: 6px; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--text); left: 0; top: 6px; width: 14px; height: 2px; transition: transform var(--dur-micro) var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.faq-a { padding: 0 0 18px; color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.jump a { font: .75rem var(--font-label); text-transform: uppercase; text-decoration: none; border: 1px solid var(--hair); padding: 10px 12px; }
.jump a:hover { border-color: var(--muted); }
.faq-group + .faq-group { padding-top: 0; }

/* ----- page hero (subpages) ----- */
.page-hero { padding: clamp(40px, 7vw, 80px) 0 calc(var(--section-y) / 3); }
.ph-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ph-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } .ph-solo { grid-template-columns: minmax(0, 860px); } }
.ph-side figure { aspect-ratio: 4 / 3; }
.ph-side figure.tall { aspect-ratio: 3 / 4; }
.checked { font: .75rem var(--font-label); color: var(--muted); text-transform: uppercase; }

/* ----- lists ----- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 900 1.6rem/1 var(--font-led); color: var(--mint); }
.tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: t; }
.tips li { counter-increment: t; padding: 18px 18px 18px 64px; position: relative; background: var(--surface); border: 1px solid var(--hair); }
.tips li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 16px; top: 16px; font: 900 1.5rem/1 var(--font-led); color: var(--mint); }
.tips li p:last-child { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .tips-grid { grid-template-columns: repeat(3, 1fr); } }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--hair); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; background: var(--mint); }
.icon-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.icon-tiles li { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--hair); background: var(--surface); font-size: .9375rem; }
.icon-tiles .ico { color: var(--muted); width: 28px; height: 28px; }
.game-cards { display: grid; gap: 14px; margin-bottom: 24px; }
@media (min-width: 720px) { .game-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .game-cards { grid-template-columns: repeat(4, 1fr); } }
.game { padding: 22px; }
.game-lives { font: .75rem var(--font-label); color: var(--muted); text-transform: uppercase; }
.wide-shot { aspect-ratio: 16 / 9; max-height: 560px; }
.route { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.route li { padding: 22px; }
@media (min-width: 900px) { .route { grid-template-columns: repeat(3, 1fr); } }
.big-stat { padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.lives-10 i { width: 16px; }
.note { border-left: 3px solid var(--hair); padding: 6px 0 6px 14px; color: var(--muted); margin-top: 8px; }
.quote-lede { font: 1rem/1.4 var(--font-display); text-transform: uppercase; color: var(--text) !important; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--hair); }
.timeline li { display: flex; flex-direction: column; gap: 4px; padding: 0 0 22px 22px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; background: var(--text); }
.partners { display: grid; gap: 14px; }
@media (min-width: 1000px) { .partners { grid-template-columns: repeat(3, 1fr); } }
.partner-logo { height: 52px; width: auto; margin-bottom: 16px; }
.prose { max-width: 70ch; }
.policy h2 { margin: 40px 0 14px; }
.policy h2:first-child { margin-top: 0; }
.policy .check-list { margin-bottom: 16px; }
.policy p { color: var(--muted); }

/* ----- compare table ----- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); margin: 16px 0 10px; }
.compare { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .9375rem; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.compare thead th { font: .625rem var(--font-label); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; background: var(--bg-darker); }
.compare tbody th { font-weight: 600; white-space: nowrap; }
.compare tr.ours { background: rgba(38,247,162,.06); }
.compare tr.ours th a { color: var(--mint); }

/* ----- booking ----- */
.booking-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .booking-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.widget { padding: 12px; min-height: 640px; background: #fff; }
.widget-note { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--hair); background: var(--bg-darker); font-size: .9375rem; }
.widget-note .textlink { padding: 6px 0; }
.booking-side .h3 { margin-top: 8px; }

/* ----- forms ----- */
.form { display: grid; gap: 14px; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font: .7rem var(--font-label); text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.opt { text-transform: none; font-family: var(--font-body); }
.field input, .field select, .field textarea { font: 1rem var(--font-body); color: var(--text); background: var(--bg-darker); border: 1px solid var(--hair); border-radius: 0; padding: 12px; min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mint); outline: none; }
.hp { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-status { margin: 0; color: var(--mint); }
.form-status.err { color: var(--lava-text); }

/* ----- CTA band, footer ----- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--section-y) * .7) 0; background: var(--bg-darker); margin-top: calc(var(--section-y) / 3); }
.cta-band .backdrop::after { background: linear-gradient(90deg, rgba(3,2,18,.92), rgba(3,2,18,.7)); }
.cta-inner { display: grid; gap: 20px; align-items: center; }
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { color: #fff; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1fr auto; } }
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 96px; background: var(--bg-darker); border-top: 1px solid var(--hair); }
.site-footer .side { --focus: 50% 40%; }
@media (max-width: 899px) { .site-footer .side::after { background: rgba(3,2,18,.6); } }
.ft-top { display: grid; gap: 32px; }
@media (min-width: 720px) { .ft-top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ft-top { grid-template-columns: 1.3fr repeat(3, .8fr) 1.3fr; } }
.ft-brand img { width: 120px; height: auto; margin-bottom: 12px; }
/* the slogan signs off every page, one line across the footer */
.ft-slogan .slogan span { -webkit-text-stroke: .04em currentColor; text-shadow: 0 0 18px currentColor; }
.ft-slogan { margin: 44px 0 4px; font: clamp(1.2rem, 5.2vw, 3.6rem)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.ft-brand p:last-child, .site-footer address { color: var(--muted); font-style: normal; font-size: .9375rem; }
.ft-title { font: .7rem var(--font-label); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ft-col ul { list-style: none; padding: 0; margin: 0; }
.ft-col li { padding: 5px 0; }
.ft-col a { color: var(--text); text-decoration: none; }
.ft-col a:hover { color: var(--mint); }
.ft-contact { font-style: normal; }
.ft-contact p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.ft-contact a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.ico-s { width: 16px; height: 16px; flex: none; color: var(--muted); margin-top: 3px; }
.ft-col .socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ft-col .socials li { padding: 0; }
.ft-col .socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--hair); font: .65rem var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ft-col .socials a:hover { border-color: var(--muted); color: var(--text); }
.soc-ico { flex: none; width: 15px; height: 15px; }
.legal { margin: 40px 0 0; color: var(--muted); font-size: .8125rem; }

/* ----- whatsapp float ----- */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px 0 12px; background: #25D366; color: #06210F; text-decoration: none; font: .75rem var(--font-label); text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.wa-float:hover { color: #06210F; background: #1EBE5A; }
.wa-float span { display: none; }
@media (max-width: 719px) { .wa-float { padding: 0 12px; } }
@media (min-width: 720px) { .wa-float span { display: inline; } }

/* ----- back to top: an LED floor tile in black grout with a pixel arrow, stacked above the WhatsApp button. It shows
   once the visitor is a screen down, and lights up blue under the pointer like a tile underfoot. ----- */
.to-top { position: fixed; right: 16px; bottom: 80px; z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; background: #120d33; border: 2px solid var(--blue); color: var(--blue); box-shadow: 0 0 0 3px #000, 0 0 22px rgba(79,116,255,.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--blue); color: #fff; box-shadow: 0 0 0 3px #000, 0 0 30px rgba(79,116,255,.9), 0 0 64px rgba(79,116,255,.45); }
.to-top:active { background: #dfe8ff; color: var(--blue); }
.to-top svg { display: block; }

/* ----- blog ----- */
.prose-wrap > * { max-width: 860px; }
.crumbs { font: .75rem var(--font-label); text-transform: uppercase; margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a::after { content: " /"; }
.byline { font: .75rem var(--font-label); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.answer { padding: 22px 24px; margin: 18px 0; }
.answer p:last-child { margin: 0; font-size: 1.0625rem; }
.blog-list { display: grid; gap: 14px; margin-top: 18px; }
.blog-list h3 { font-size: 1rem; margin-bottom: 8px; }
/* numbered tips: the number in LED digits down the left of each card */
.blog-list.numbered .tile { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
.blog-list.numbered .tile > :not(.tip-n) { grid-column: 2; }
.tip-n { grid-row: 1 / span 2; font: 900 2rem/1 var(--font-led); color: var(--mint); text-shadow: 0 0 12px rgba(38,247,162,.4); font-variant-numeric: tabular-nums; }
.sources { padding-left: 18px; color: var(--muted); }
.sources li { padding: 0; }
.sources a { display: inline-block; padding: 10px 0; }
.post-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; padding: 24px; color: var(--text); text-decoration: none; }
.post h2, .post h3 { font-size: 1.05rem; margin: 6px 0 10px; }
.post p { color: var(--muted); flex: 1; }
.post:hover { color: var(--text); }
.post:hover .textlink::after { transform: translateX(4px); }
.more-guides { margin: 40px 0 16px; }

/* booking page: the age rule above the calendar, in a lava-bordered box so parents see it before they book */
.age-note { max-width: 62ch; margin: 18px 0 0; padding: 14px 18px; border: 2px solid var(--lava); background: rgba(227,2,94,.1); box-shadow: 0 0 22px rgba(227,2,94,.25); }

/* "Updated" date on guide pages (the page's real last-changed date) */
.updated { margin: 14px 0 22px; font: .7rem var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ----- share a section: a primary button at the end of the section; it turns mint (a lit safe tile) once the link is
   copied, with the message beside it. In two-column sections the row spans both columns, under everything. ----- */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 32px 0 0; }
.two-col > .share-row, .route-split + .share-row { grid-column: 1 / -1; }
.btn.share { gap: 10px; }
.btn.share .ico-s { width: 16px; height: 16px; color: #fff; }
.btn.share.done { background: var(--mint); border-color: var(--mint); color: var(--on-mint); box-shadow: 0 0 0 1px rgba(38,247,162,.4), 0 0 24px rgba(38,247,162,.55); }
.btn.share.done .ico-s { color: var(--on-mint); }
.share-done { font: .7rem/1.5 var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--mint); }
.share-done:empty { display: none; }
/* someone opened a shared link: the section's heading flashes mint twice, like a tile lighting up */
.section:target h2 { animation: target-flash 1.2s steps(1, end) 2; }
@keyframes target-flash { 0% { text-shadow: 0 0 1px #fff, 0 0 22px rgba(38,247,162,.95), 0 0 60px rgba(38,247,162,.75); } 50% { text-shadow: none; } }

/* ----- MRT station cards (/where-to-play-floor-is-lava-central-singapore/): the station code in LED digits ----- */
.stations { margin: 28px 0 18px; }
.stn-code { display: block; margin-bottom: 14px; font: 900 clamp(1.6rem, 3vw, 2.1rem)/1 var(--font-led); color: var(--mint); text-shadow: 0 0 12px rgba(38,247,162,.4); white-space: nowrap; }
.stn-lines { margin: -4px 0 10px; font: .7rem var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ----- review scores ----- */
.scores { display: grid; gap: 14px; margin-top: 28px; }
.scores .score { display: flex; align-items: center; gap: 22px; padding: 22px 24px; }
.scores .led-xl { font-size: clamp(3rem, 6vw, 4rem); flex: none; }
.scores .score-body { min-width: 0; }
.scores .score .stars { margin: 0 0 8px; }
.scores .tile-name { font-size: .9rem; margin-bottom: 4px; }
.scores .score p { margin: 0 0 4px; }
.scores .score .small { margin-top: 6px; }
@media (min-width: 720px) { .scores { grid-template-columns: 1fr 1fr; } }

/* ----- nav dropdown ----- */
.sub-toggle { font: .75rem var(--font-label); text-transform: uppercase; letter-spacing: .03em; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.has-sub.current > .sub-toggle, .sub-toggle:hover { color: var(--mint); }
.caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-micro) var(--ease); }
.sub-toggle[aria-expanded="true"] .caret { transform: translateY(2px) rotate(-135deg); }
/* ----- Play megamenu ----- */
.mega { display: none; }
.mega.open { display: block; }
.mega-list { list-style: none; margin: 0; padding: 0; }
.menu .mega-link { display: grid; grid-template-columns: 14px 1fr auto; gap: 2px 14px; align-items: center; text-decoration: none; }
.mega-tile { grid-row: span 2; width: 14px; height: 14px; background: var(--surface-2); outline: 1px solid var(--hair); transition: background var(--dur-micro), box-shadow var(--dur-micro); }
.mega-link .sub-l { font: .8125rem var(--font-label); text-transform: uppercase; color: #fff; }
.mega-link .sub-n { font: .875rem var(--font-body); text-transform: none; letter-spacing: 0; color: var(--muted); grid-column: 2; }
.mega-arrow { grid-row: span 2; color: var(--muted); transition: transform var(--dur-micro) var(--ease), color var(--dur-micro); }
.mega-link:hover .mega-arrow, .mega-link[aria-current="page"] .mega-arrow { transform: translateX(4px); color: var(--mint); }
.mega-link.t-mint:hover .mega-tile, .mega-link.t-mint[aria-current="page"] .mega-tile { background: var(--mint); box-shadow: 0 0 12px rgba(38,247,162,.7); }
.mega-link.t-blue:hover .mega-tile, .mega-link.t-blue[aria-current="page"] .mega-tile { background: var(--blue); box-shadow: 0 0 12px rgba(79,116,255,.7); }
.mega-link.t-lava:hover .mega-tile, .mega-link.t-lava[aria-current="page"] .mega-tile { background: var(--lava); box-shadow: 0 0 12px rgba(227,2,94,.7); }
.mega-col-extra { display: none; }
.menu.open .has-sub > .sub-toggle { width: 100%; justify-content: space-between; padding: 14px 18px; font-size: .875rem; }
.menu.open .mega-link { display: grid; padding: 12px 18px 12px 22px; }
.mega-h { display: none; }
@media (min-width: 1000px) {
  /* the panel hangs from the whole violet bar, not from the "Play" item */
  .has-sub { position: static; }
  .mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; z-index: 60; }
  .has-sub:hover > .mega, .has-sub:focus-within > .mega, .mega.open { display: block; }
  .mega-inner { display: grid; grid-template-columns: .9fr 1.25fr 1fr; background: var(--bg-darker); border: 1px solid var(--hair); box-shadow: 0 24px 60px rgba(0,0,0,.55);
    animation: mega-in var(--dur-entrance, 420ms) var(--ease) both; }
  @keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mega-col { padding: 24px 26px; min-width: 0; }
  .mega-col + .mega-col { border-left: 1px solid var(--hair); }
  .mega-col-extra { display: block; }
  .mega-h { display: block; font: .625rem var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 14px; }
  .menu .mega-link { padding: 12px 10px; min-height: 0; }
  .mega-list li + li { border-top: 1px solid var(--hair); }
  .menu .mega-link:hover, .menu .mega-link[aria-current="page"] { background: rgba(26,17,80,.7); }
  .menu .mega-link:hover .sub-l { color: var(--mint); }
  .mega-games { list-style: none; margin: 0 0 14px; padding: 0; background: rgba(3,2,18,.7); border: 1px solid var(--hair); }
  .mega-games li { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; }
  .mega-games li + li { border-top: 1px solid var(--hair); }
  .mega-games .gt-name { font-size: .75rem; color: #fff; }
  .mega-games .led { font-size: 1.6rem; }
  .menu .mega-col .textlink { display: inline-flex; min-height: 0; padding: 0; color: var(--mint); }
  .mega-visit .mega-price { display: flex; gap: 18px; margin: 0 0 12px; }
  .mega-visit .mega-price span { display: flex; flex-direction: column; font: .625rem var(--font-label); text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
  .mega-visit .mega-price .led { font-size: 2.2rem; margin-bottom: 4px; }
  .mega-visit p { font-size: .875rem; color: var(--muted); margin: 0 0 6px; }
  .mega-extra { margin-top: 12px !important; }
  .menu .mega-visit .btn { display: inline-flex; margin-top: 14px; padding: 12px 18px; min-height: 44px; color: #fff; }
}

/* ----- YouTube facades + player ----- */
.yt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.yt-grid .yt-landscape { grid-column: span 2; }
@media (min-width: 900px) {
  /* two landscape videos stacked on the left, three portrait shorts filling the same height on the right */
  .yt-grid { grid-template-columns: repeat(5, 1fr); }
  .yt-grid .yt-landscape { grid-column: 1 / span 2; }
  .yt-grid .yt-portrait { grid-row: 1 / span 2; aspect-ratio: auto; }
  .yt-grid > :nth-child(1) { grid-row: 1; } .yt-grid > :nth-child(2) { grid-row: 2; }
  .yt-grid > :nth-child(3) { grid-column: 3; } .yt-grid > :nth-child(4) { grid-column: 4; } .yt-grid > :nth-child(5) { grid-column: 5; }
  .yt-grid-2 > :nth-child(n) { grid-row: auto; grid-column: auto; }
  .yt-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .yt-grid-2 .yt-portrait { grid-row: auto; aspect-ratio: 9 / 16; }
}
.yt { display: block; width: 100%; padding: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-in) var(--ease), opacity var(--dur-in); }
.yt-landscape { aspect-ratio: 16 / 9; }
.yt-portrait { aspect-ratio: 9 / 16; }
.yt:hover img { transform: scale(1.04); opacity: .85; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); background: var(--lava); }
.yt-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.yt:hover .yt-play { background: #F51A72; }
.yt-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; align-items: end; padding: 28px 10px 10px; background: linear-gradient(transparent, rgba(3,2,18,.9)); }
.yt-title { font: .75rem/1.3 var(--font-label); text-transform: uppercase; }
.yt-dur { font: 900 .9rem var(--font-led); color: var(--mint); }
/* the player's width follows the screen height too, so the frame always keeps the clip's shape (capping only the height
   left black bars beside a portrait clip on a laptop). 120px leaves room for the close button above. */
.yt-modal { width: min(960px, 94vw, calc((100vh - 120px) * 16 / 9)); width: min(960px, 94vw, calc((100dvh - 120px) * 16 / 9)); padding: 0; border: 1px solid var(--hair); background: #000; overflow: visible; }
.yt-modal.portrait { width: min(420px, 92vw, calc((100vh - 120px) * 9 / 16)); width: min(420px, 92vw, calc((100dvh - 120px) * 9 / 16)); }
.yt-modal::backdrop { background: rgba(3,2,18,.85); }
.yt-frame { aspect-ratio: 16 / 9; }
.yt-modal.portrait .yt-frame { aspect-ratio: 9 / 16; }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-close { position: absolute; top: -48px; right: -2px; width: 44px; height: 44px; background: var(--lava); border: 0; cursor: pointer; }
.yt-close::before, .yt-close::after { content: ""; position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); }
.yt-close::after { transform: rotate(-45deg); }
.watch .two-col > .stick .review { margin-top: 20px; }

/* ----- homepage cut (2026-10-02) ----- */
/* three reviews: a swipeable row on phones, three columns from tablet up */
.review-row { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; margin: 8px calc(var(--gutter) * -1) 20px; padding: 4px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.review-row > * { scroll-snap-align: start; }
@media (min-width: 720px) { .review-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin-inline: 0; padding: 0; overflow: visible; } }
.link-row { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: -4px; }
.reel-wrap { width: min(100%, 300px); }
.visit-grid { align-items: center; }
@media (min-width: 900px) { .visit-grid .reel-wrap { justify-self: center; } }
.reel { text-decoration: none; }
.reel .yt-title { font-size: .8rem; }
/* the reel cover carries its own title in the middle, so the play button moves to the corner */
.reel .yt-play { left: auto; top: 12px; right: 12px; width: 48px; height: 48px; transform: none; }
.reel .yt-play::after { left: 19px; top: 14px; border-left-width: 14px; border-top-width: 10px; border-bottom-width: 10px; }
/* /marina-square/: the three steps stacked beside the "how to get here" reel */
.route-split { display: grid; gap: 24px; margin-top: 24px; }
.route-split .route { margin: 0; }
.reel-note { margin: 12px 0 0; }
@media (min-width: 900px) { .route-split { grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } .route-split .route { grid-template-columns: 1fr; } }
.listings { list-style: none; padding: 0; margin: 4px 0 12px; }
.listings li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 4px 0; }
.listings .textlink { margin-block: -10px; padding-block: 10px; }

/* ----- QA round 1 ----- */
@media (min-width: 1000px) { .menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } }
@media (min-width: 900px) { .two-col > .stick { position: sticky; top: 112px; } }
@media (max-width: 899px) {
  .iso { min-height: 240px; }
}
.page-hero h1 { font-size: clamp(1.55rem, 3.1vw, 2.5rem); }
@media (min-width: 900px) { .ph-grid { grid-template-columns: 1.3fr .7fr; } .ph-solo { grid-template-columns: minmax(0, 900px); } }
.compare tbody th a, .compare td a { display: inline-block; padding: 10px 0; }
.info-list a { display: inline-block; padding: 10px 0; margin: -10px 0; }


/* ----- mobile pass (2026-10-02): no sideways scroll, 44px taps, readable labels ----- */
body { overflow-x: clip; }
.two-col > *, .ph-grid > *, .hero-split > * { min-width: 0; }
h1, h2, h3, .h3 { overflow-wrap: break-word; }
@media (max-width: 380px) { :root { --h2: 1.2rem; } }
.iso-hud .sb-label { white-space: nowrap; }
@container (max-width: 420px) { .hud-cell { padding: 8px 10px; } .iso-hud .sb-label { letter-spacing: .04em; } }
@media (max-width: 899px) {
  .ft-col li { padding: 0; }
  .ft-col li a { display: inline-block; padding: 12px 0; }
  .ft-contact a { padding: 12px 0; margin: -12px 0; }
  .ft-col .socials a { min-height: 44px; font-size: .7rem; }
  .field label { font-size: .8rem; }
  .compare thead th { font-size: .7rem; }
}

.rate { white-space: nowrap; }
.led-sm, .led-lg, .led-xl { white-space: nowrap; }
/* comparison tables become one card per venue on phones */
@media (max-width: 719px) {
  .table-wrap { overflow: visible; border: 0; }
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { border: 1px solid var(--hair); margin-bottom: 12px; background: var(--surface); }
  .compare tr.ours { border-color: var(--mint); }
  .compare tbody th { padding: 12px 16px 4px; border-bottom: 0; font-size: 1.05rem; }
  .compare td { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 8px 16px; border-bottom: 0; }
  .compare td:last-child { padding-bottom: 14px; }
  .compare td::before { content: attr(data-label); font: .7rem/1.6 var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
}

/* hearts in the game lists (homepage table, megamenu) */
.hearts { padding-top: 0; gap: 3px; justify-content: flex-end; }
.hearts i { width: 12px; }
.gt-lives { display: flex; justify-content: flex-end; }
@media (min-width: 720px) { .gt-lives, .gt-lives .hearts { justify-content: flex-start; } }
.mega-games .hearts i { width: 10px; }
.mega-games .hearts { gap: 2px; }

/* pixel rating star: crisp at any size */
.rate-star { shape-rendering: crispEdges; }
/* WhatsApp buttons wear WhatsApp green with its logo (dark text: white on #25D366 fails contrast) */
.btn.btn-wa { gap: 10px; background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn.btn-wa:hover { background: #fff; border-color: #fff; color: var(--bg); }
.wa-ico { flex: none; width: 18px; height: 18px; }
.btn-wa .wa-ico { color: #25D366; }
.ctas .textlink { align-self: center; margin-left: 6px; }

/* hearts on the game cards */
.game-lives { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 14px; }
.game-lives p { margin: 0; font: .75rem var(--font-label); color: var(--muted); text-transform: uppercase; }
.game-lives .hearts { justify-content: flex-start; }
.game-lives .hearts i { width: 14px; }
/* a wide strip of a lit level under the game cards; 16:9 on phones */
.wide-shot.strip { aspect-ratio: 1920 / 520; max-height: none; }
.wide-shot.strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 719px) { .wide-shot.strip { aspect-ratio: 16 / 9; } }