/*
 * Cheat Code Lounge — Front-end styles.
 * theme.json carries the design tokens; this file carries the bespoke
 * retro-arcade UI: CRT bezels, HUD panels, the boot terminal, level-select
 * cabinets, the menu inventory, and the neon glow system.
 */

:root {
	--ink:         var(--wp--preset--color--ink);
	--ink-2:       var(--wp--preset--color--ink-2);
	--ink-3:       var(--wp--preset--color--ink-3);
	--bone:        var(--wp--preset--color--bone);
	--bone-dim:    var(--wp--preset--color--bone-dim);
	--bone-faint:  rgba(234, 246, 255, 0.12);
	--cyan:        var(--wp--preset--color--neon-cyan);
	--magenta:     var(--wp--preset--color--neon-magenta);
	--yellow:      var(--wp--preset--color--neon-yellow);
	--green:       var(--wp--preset--color--neon-green);
	--violet:      var(--wp--preset--color--neon-violet);
	--hair:        rgba(0, 232, 255, 0.10);
	--hair-strong: rgba(0, 232, 255, 0.24);

	--f-pixel: 'Press Start 2P', system-ui, monospace;
	--f-head:  'Orbitron', sans-serif;
	--f-term:  'VT323', monospace;
	--f-body:  'Bricolage Grotesque', sans-serif;
	--f-script:'Pacifico', cursive;
}

html { scroll-behavior: smooth; }
html, body { background: var(--ink); color: var(--bone); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; position: relative; }

section[id] { scroll-margin-top: calc(var(--cc-header-h, 114px) + 14px); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ─────────── GLOBAL CRT OVERLAY ─────────── */
/* Fine horizontal scanlines + a faint moving glow + grain, fixed over all. */
body::before {
	content: '';
	position: fixed; inset: 0; pointer-events: none; z-index: 9998;
	background: repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0, rgba(0,0,0,0.32) 1px, transparent 2px, transparent 3px);
	opacity: 0.5; mix-blend-mode: multiply;
}
body::after {
	content: '';
	position: fixed; inset: 0; pointer-events: none; z-index: 9999;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.05; mix-blend-mode: overlay;
}
/* Soft screen vignette so the whole page reads like a curved tube. */
.cc-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9997; box-shadow: inset 0 0 220px rgba(0,0,0,0.7); }

/* ─────────── WORDMARK LOCKUP (official neon PNG) ─────────── */
.cc-logo { display: block; width: auto; height: auto; }
.cc-logo--header { height: 48px; }
.cc-logo--footer { height: 66px; }
.cc-logo--hero { width: auto; height: clamp(112px, 20vh, 210px); }

/* ─────────── HEADER ─────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; }
.util-strip {
	height: 40px;
	background: rgba(5, 8, 23, 0.82);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid var(--hair);
	transition: height 0.4s ease, opacity 0.4s ease;
	overflow: hidden;
}
.util-inner {
	height: 100%; max-width: 1500px; margin: 0 auto; padding: 0 28px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	font-family: var(--f-term); font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--bone-dim);
}
.util-status { display: flex; align-items: center; gap: 11px; white-space: nowrap; flex-shrink: 0; }
.util-status .dot { width: 8px; height: 8px; background: #2a2f4a; transition: 0.4s; }
.util-status.is-open .dot { background: var(--green); box-shadow: 0 0 10px var(--green), 0 0 20px color-mix(in srgb, var(--green) 60%, transparent); animation: cc-pulse 1.6s ease-in-out infinite; }
.util-status.is-open { color: var(--bone); }
@keyframes cc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.util-meta { display: flex; align-items: center; gap: 22px; min-width: 0; }
.util-meta .util-link { white-space: nowrap; color: var(--bone-dim); text-decoration: none; transition: 0.2s; }
.util-meta .util-link:hover { color: var(--cyan); }
.util-meta .sep { width: 1px; height: 16px; background: var(--hair-strong); }
.util-pill {
	display: inline-flex; align-items: center;
	border: 1px solid var(--hair-strong);
	background: rgba(0, 232, 255, 0.04);
	padding: 3px 12px;
	font-size: 15px; letter-spacing: 0.06em;
	max-width: 460px; min-width: 0; overflow: hidden; text-decoration: none;
}
.ticker-text { display: block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.25s ease; }
.ticker-text.is-swapping { opacity: 0; }
.ticker-text.is-scrolling { overflow: visible; text-overflow: clip; max-width: none; animation: cc-ticker var(--ticker-dur, 8s) linear 1.2s infinite alternate; }
@keyframes cc-ticker { from { transform: translateX(0); } to { transform: translateX(var(--ticker-shift, 0px)); } }
.util-pill.is-age,    .util-pill.is-age:hover    { color: var(--yellow);  text-shadow: 0 0 8px color-mix(in srgb, var(--yellow) 65%, transparent); }
.util-pill.is-afters, .util-pill.is-afters:hover { color: var(--cyan);    text-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 65%, transparent); }
.util-pill.is-event,  .util-pill.is-event:hover  { color: var(--magenta); text-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 65%, transparent); }
.util-social { display: flex; gap: 13px; flex-shrink: 0; }
.util-social a { display: inline-flex; align-items: center; color: var(--bone-dim); }
.util-social svg { width: 15px; height: 15px; display: block; }
.util-social a:hover { color: var(--cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent)); }

.main-nav {
	background: rgba(5, 8, 23, 0.5);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border-bottom: 1px solid var(--hair);
	transition: background 0.4s ease, box-shadow 0.4s ease, border-bottom-color 0.4s ease;
}
.nav-inner { height: 78px; max-width: 1500px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-lockup { display: flex; align-items: center; text-decoration: none; padding: 6px 4px; transition: transform 0.3s ease; }
.brand-lockup:hover { transform: translateY(-1px); }
.brand-lockup:hover .cc-logo { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cyan) 50%, transparent)); }

.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.primary-nav a {
	color: var(--bone); text-decoration: none;
	font-family: var(--f-pixel); font-size: 10px;
	letter-spacing: 0.02em; text-transform: uppercase;
	padding: 14px 16px; position: relative; transition: color 0.25s ease;
}
.primary-nav a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform-origin: left; transform: scaleX(0); transition: transform 0.35s cubic-bezier(.6,0,.2,1); }
.primary-nav a:hover { color: var(--cyan); }
.primary-nav a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-divider { width: 1px; height: 26px; background: var(--hair-strong); }
.ghost-cta {
	font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase;
	color: var(--ink); text-decoration: none; padding: 13px 18px;
	border: 1px solid var(--cyan); background: var(--cyan);
	transition: 0.25s ease; display: inline-flex; align-items: center; gap: 9px;
	box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.ghost-cta .arrow { transition: transform 0.25s ease; }
.ghost-cta:hover { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 24px color-mix(in srgb, var(--yellow) 55%, transparent); }
.ghost-cta:hover .arrow { transform: translateX(3px); }

.hamburger { display: none; width: 46px; height: 46px; background: transparent; border: 1px solid var(--hair-strong); cursor: pointer; position: relative; padding: 0; }
.hamburger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--cyan); transition: 0.3s ease; }
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); background: var(--magenta); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); background: var(--magenta); }

.site-header.scrolled .util-strip { height: 0; opacity: 0; border-bottom-color: transparent; }
.site-header.scrolled .main-nav { background: rgba(5, 8, 23, 0.92); border-bottom-color: var(--hair-strong); box-shadow: 0 12px 36px -16px color-mix(in srgb, var(--cyan) 30%, transparent); }

/* ─────────── MOBILE OVERLAY ─────────── */
.mobile-overlay { position: fixed; inset: 0; background: var(--ink); z-index: 89; display: flex; flex-direction: column; padding: 120px 28px 40px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; overflow: hidden; }
.mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
.overlay-scan { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 30%, rgba(0,232,255,0.10), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(255,31,156,0.10), transparent 60%); }
.overlay-nav { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.overlay-nav a {
	font-family: var(--f-head); font-weight: 800;
	font-size: clamp(30px, 9vw, 52px); line-height: 1.1; text-transform: uppercase;
	color: var(--bone); text-decoration: none;
	text-shadow: 0 0 14px var(--c), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent);
	display: flex; align-items: baseline; gap: 16px;
	opacity: 0; transform: translateX(-16px); transition: 0.45s ease;
}
.overlay-nav a .lvl { font-family: var(--f-pixel); font-size: 13px; color: var(--c); }
.mobile-overlay.is-open .overlay-nav a { opacity: 1; transform: translateX(0); }
.mobile-overlay.is-open .overlay-nav a:nth-child(1) { transition-delay: 0.06s; }
.mobile-overlay.is-open .overlay-nav a:nth-child(2) { transition-delay: 0.12s; }
.mobile-overlay.is-open .overlay-nav a:nth-child(3) { transition-delay: 0.18s; }
.mobile-overlay.is-open .overlay-nav a:nth-child(4) { transition-delay: 0.24s; }
.overlay-foot { margin-top: auto; position: relative; z-index: 2; font-family: var(--f-term); font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); line-height: 1.9; }
.overlay-foot strong { color: var(--bone); }

/* ─────────── REUSABLE: BUTTONS, PANELS, LABELS ─────────── */
.cc-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-pixel); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
	padding: 16px 24px; text-decoration: none; cursor: pointer;
	border: 1px solid var(--accent, var(--cyan)); color: var(--ink); background: var(--accent, var(--cyan));
	box-shadow: 0 0 20px color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent);
	transition: 0.25s ease;
}
.cc-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px color-mix(in srgb, var(--accent, var(--cyan)) 60%, transparent); }
.cc-btn--cyan    { --accent: var(--cyan); }
.cc-btn--magenta { --accent: var(--magenta); }
.cc-btn--yellow  { --accent: var(--yellow); }
.cc-btn-ghost {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase;
	padding: 15px 22px; text-decoration: none; cursor: pointer;
	border: 1px solid var(--accent, var(--cyan)); color: var(--accent, var(--cyan)); background: transparent;
	transition: 0.25s ease;
}
.cc-btn-ghost:hover { background: color-mix(in srgb, var(--accent, var(--cyan)) 12%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent, var(--cyan)) 35%, transparent); }

/* Corner-bracket panel — the targeting-reticle HUD frame used across sections. */
.cc-panel { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border: 1px solid var(--hair); }
.cc-panel::before, .cc-panel::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.cc-panel::before { top: -1px; left: -1px; border-top: 2px solid var(--accent, var(--cyan)); border-left: 2px solid var(--accent, var(--cyan)); }
.cc-panel::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent, var(--cyan)); border-right: 2px solid var(--accent, var(--cyan)); }

.section-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-pixel); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 26px; color: var(--cyan); }
.section-label::before { content: ''; width: 24px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.section-title { font-family: var(--f-head); font-weight: 800; font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; max-width: 16ch; margin: 0; }
.section-title em { font-style: normal; color: var(--magenta); text-shadow: 0 0 16px color-mix(in srgb, var(--magenta) 60%, transparent); }
.section-title em.cy { color: var(--cyan); text-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 60%, transparent); }
.section-title em.yl { color: var(--yellow); text-shadow: 0 0 16px color-mix(in srgb, var(--yellow) 60%, transparent); }
.cc-section { position: relative; padding: 120px 40px; }

/* ─────────── BOOT TERMINAL HERO ─────────── */
/* The stack (logo → terminal → CTA) is sized in viewport-height units so the
   Insert Coin button is always visible without scrolling, on any screen. */
.boot { position: relative; min-height: 100svh; display: grid; grid-template-rows: var(--cc-header-h, 118px) 1fr auto; padding: 0 24px; overflow: hidden; }
/* Starfield / arcade-glow backdrop */
.boot::before { content: ''; position: absolute; inset: 0; z-index: 0; background:
	radial-gradient(ellipse at 18% 22%, rgba(0,232,255,0.12), transparent 45%),
	radial-gradient(ellipse at 82% 78%, rgba(255,31,156,0.12), transparent 45%),
	radial-gradient(ellipse at 60% 12%, rgba(255,210,63,0.07), transparent 40%),
	var(--ink); }
.boot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(180deg, transparent, var(--ink)); z-index: 1; pointer-events: none; }
.boot-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
	background-image: linear-gradient(color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
	transform: perspective(420px) rotateX(58deg) translateY(36%) scale(2.2); transform-origin: bottom; }

.boot-inner { position: relative; z-index: 3; grid-row: 2; width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(10px, 2vh, 24px) 0; }
.boot-logo { margin-bottom: clamp(14px, 3vh, 36px); }

/* The terminal "screen" */
.terminal { width: 100%; max-width: 760px; text-align: left; background: rgba(3, 6, 18, 0.86); border: 1px solid var(--hair-strong); box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 30px 80px -30px rgba(0,0,0,0.9), inset 0 0 60px rgba(0,232,255,0.05); position: relative; overflow: hidden; }
.terminal::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 4px); opacity: 0.5; }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--hair); background: rgba(0,232,255,0.04); }
.terminal-bar .lamp { width: 11px; height: 11px; border-radius: 50%; }
.terminal-bar .lamp.r { background: var(--magenta); }
.terminal-bar .lamp.y { background: var(--yellow); }
.terminal-bar .lamp.g { background: var(--green); }
.terminal-bar .title { margin-left: 8px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); }
.terminal-body { padding: clamp(16px, 2.4vh, 26px) 24px clamp(18px, 2.6vh, 30px); font-family: var(--f-term); font-size: clamp(15px, min(2.2vw, 2.4vh), 23px); line-height: 1.5; color: var(--green); min-height: clamp(128px, 19vh, 188px); }
.terminal-line { white-space: pre-wrap; }
.terminal-line .prompt { color: var(--cyan); }
.terminal-line .muted  { color: var(--bone-dim); }
.terminal-line .ok     { color: var(--green); }
.terminal-line .hi     { color: var(--yellow); }
.terminal-out { color: var(--bone); }
.terminal-caret { display: inline-block; width: 0.62em; height: 1.05em; vertical-align: -0.18em; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); margin-left: 2px; animation: cc-blink 1s steps(1) infinite; }
@keyframes cc-blink { 50% { opacity: 0; } }

.boot-cta { margin-top: clamp(16px, 2.8vh, 34px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
/* Insert Coin is THE call to action — bigger, with an attract-mode glow pulse. */
.boot-cta .cc-btn { font-size: clamp(13px, 1.5vw, 16px); padding: 20px 34px; animation: cc-attract 1.7s ease-in-out infinite; }
.boot-cta .cc-btn:hover { animation: none; }
@keyframes cc-attract {
	0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 45%, transparent); transform: translateY(0) scale(1); }
	50% { box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 85%, transparent), 0 0 64px color-mix(in srgb, var(--cyan) 45%, transparent); transform: translateY(-3px) scale(1.03); }
}
.boot-press { font-family: var(--f-pixel); font-size: clamp(9px, 1vw, 11px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); animation: cc-press 1.1s steps(1) infinite; }
@keyframes cc-press { 50% { opacity: 0.3; } }
.boot-cue { grid-row: 3; position: relative; z-index: 3; justify-self: center; padding-bottom: clamp(12px, 2.2vh, 26px); font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); text-align: center; }
.boot-cue::after { content: ''; display: block; width: 2px; height: clamp(20px, 3vh, 34px); background: linear-gradient(180deg, var(--cyan), transparent); margin: 10px auto 0; }
/* Short viewports (small laptops, landscape phones): compress the stack further
   and drop the scroll cue so Insert Coin always stays on screen. */
@media (max-height: 820px) {
	.terminal-body { line-height: 1.4; }
}
@media (max-height: 720px) {
	.cc-logo--hero { height: clamp(80px, 14vh, 132px); }
	.boot-logo { margin-bottom: clamp(8px, 1.6vh, 18px); }
	.terminal-body { font-size: clamp(13px, 1.9vh, 18px); line-height: 1.34; min-height: 0; padding: 14px 22px 16px; }
	.terminal-bar { padding: 8px 14px; }
	.boot-cta { margin-top: clamp(12px, 2vh, 22px); gap: 10px; }
	.boot-cta .cc-btn { padding: 14px 28px; }
	.boot-cue { display: none; }
}

/* ─────────── TICKER ─────────── */
.events-ticker { background: linear-gradient(90deg, var(--cyan), var(--magenta)); color: var(--ink); font-family: var(--f-pixel); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; padding: 12px 0; overflow: hidden; white-space: nowrap; border-block: 1px solid rgba(0,0,0,0.25); }
.events-ticker .track { display: inline-flex; gap: 44px; animation: cc-scroll 42s linear infinite; }
.events-ticker span { display: inline-flex; align-items: center; gap: 18px; }
.events-ticker span::after { content: '◆'; opacity: 0.6; }
@keyframes cc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─────────── MODE SELECT (level cabinets) ─────────── */
/* This is the "LEVEL SELECT" screen Insert Coin drops you into: it fills the
   viewport and vertically centers, so the cabinets + HUD fit as one screen on
   any display, then flow naturally when the content is taller than the window. */
.mode-select { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(72px, 12vh, 116px) 40px clamp(64px, 10vh, 96px); }
.mode-head { width: 100%; max-width: 1340px; margin: 0 auto clamp(28px, 5vh, 56px); }
.mode-grid { width: 100%; max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mode-card {
	position: relative; display: flex; flex-direction: column; justify-content: space-between;
	min-height: clamp(248px, 34vh, 340px); padding: clamp(20px, 2.4vh, 28px); text-decoration: none; color: var(--bone);
	background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
	border: 1px solid var(--hair); overflow: hidden; transition: 0.3s ease;
	--accent: var(--cyan);
}
.mode-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 4px); opacity: 0.35; }
.mode-shot { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.28; filter: saturate(1.15) contrast(1.02); transition: opacity 0.35s ease, transform 0.5s ease; }
.mode-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,23,0.3) 0%, rgba(5,8,23,0.93) 100%); }
.mode-card:hover .mode-shot { opacity: 0.46; transform: scale(1.05); }
.mode-card .scan-screen { position: absolute; inset: 0; z-index: 0; opacity: 0.5; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); transition: 0.3s ease; }
.mode-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 26px 60px -28px var(--accent), inset 0 0 40px color-mix(in srgb, var(--accent) 8%, transparent); }
.mode-card:hover .scan-screen { opacity: 0.85; }
.mode-card.m-cyan    { --accent: var(--cyan); }
.mode-card.m-magenta { --accent: var(--magenta); }
.mode-card.m-yellow  { --accent: var(--yellow); }
.mode-card-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.mode-level { font-family: var(--f-pixel); font-size: 13px; color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.mode-coin { width: 30px; height: 12px; border: 2px solid var(--accent); border-radius: 2px; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); position: relative; }
.mode-coin::after { content: 'INSERT'; position: absolute; top: 16px; right: 0; font-family: var(--f-pixel); font-size: 6px; letter-spacing: 0.1em; color: var(--bone-dim); white-space: nowrap; }
.mode-card-body { position: relative; z-index: 1; }
.mode-name { font-family: var(--f-head); font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; text-transform: uppercase; margin: 0 0 14px; color: var(--bone); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.mode-desc { font-family: var(--f-body); font-size: 15px; line-height: 1.55; color: var(--bone-dim); max-width: 30ch; margin: 0; }
.mode-go { position: relative; z-index: 1; margin-top: 26px; font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.mode-card:hover .mode-go { text-shadow: 0 0 10px var(--accent); }
/* When Insert Coin drops you into the level-select screen, the cabinets briefly
   "power up" in sequence so it's obvious you've arrived and can pick a level. */
.mode-select.is-arriving .mode-card { animation: cc-power-up 0.7s ease both; }
.mode-select.is-arriving .mode-card:nth-child(2) { animation-delay: 0.1s; }
.mode-select.is-arriving .mode-card:nth-child(3) { animation-delay: 0.2s; }
@keyframes cc-power-up {
	0%   { transform: translateY(0); box-shadow: none; }
	45%  { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 26px 60px -28px var(--accent), inset 0 0 40px color-mix(in srgb, var(--accent) 14%, transparent); }
	100% { transform: translateY(0); }
}

/* HUD stat strip below the cabinets */
.hud-strip { width: 100%; max-width: 1340px; margin: clamp(22px, 4vh, 40px) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hud-stat { position: relative; padding: 20px 22px; background: rgba(0, 232, 255, 0.03); border: 1px solid var(--hair); --accent: var(--cyan); }
.hud-stat .k { font-family: var(--f-pixel); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.hud-stat .v { font-family: var(--f-term); font-size: 24px; line-height: 1.15; color: var(--bone); }
.hud-stat .v strong { color: var(--bone); font-weight: 400; }
.hud-stat.h-cyan { --accent: var(--cyan); }
.hud-stat.h-magenta { --accent: var(--magenta); }
.hud-stat.h-yellow { --accent: var(--yellow); }
.hud-stat.h-green { --accent: var(--green); }

/* On shorter screens, shrink the Level Select heading + cabinets so the cards
   and their info fit the viewport as one screen rather than spilling far below
   the fold. The heading is scoped here so other sections keep their full size. */
@media (max-height: 820px) and (min-width: 1025px) {
	.mode-select .section-label { margin-bottom: clamp(12px, 1.8vh, 22px); }
	.mode-select .section-title { font-size: clamp(34px, 5.2vh, 64px); }
	.mode-card { min-height: clamp(214px, 28vh, 300px); }
	.mode-name { font-size: clamp(26px, 3.6vh, 42px); margin-bottom: clamp(6px, 1.2vh, 14px); }
	.mode-desc { font-size: clamp(13px, 1.7vh, 15px); line-height: 1.45; }
	.mode-go { margin-top: clamp(12px, 1.8vh, 24px); }
	.hud-stat { padding: clamp(12px, 1.8vh, 20px) 20px; }
	.hud-stat .v { font-size: clamp(18px, 2.6vh, 24px); }
}

/* ─────────── EVENTS CAROUSEL ─────────── */
.events-section { padding: 120px 40px 150px; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); position: relative; }
.events-section-inner { max-width: 1340px; margin: 0 auto; position: relative; }
.events-head { margin-top: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px; }
.events-head .events-title { margin: 0; flex: 1; }
.events-title { max-width: 18ch; line-height: 1.04; }
.events-controls { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.events-counter { font-family: var(--f-pixel); font-size: 11px; letter-spacing: 0.04em; color: var(--bone-dim); min-width: 78px; text-align: right; }
.events-counter .now { color: var(--cyan); }
.events-arrow { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(5,8,23,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair-strong); color: var(--bone); cursor: pointer; padding: 0; font-family: var(--f-term); font-size: 30px; line-height: 0; transition: 0.25s ease; }
.events-arrow:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,232,255,0.08); box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 35%, transparent); }
.events-arrow:active { transform: scale(0.95); }
.events-rail-wrap { position: relative; margin: 0 -40px; }
.events-rail { display: flex; gap: 22px; padding: 8px 40px 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.events-rail::-webkit-scrollbar { display: none; }
.events-rail-wrap::before, .events-rail-wrap::after { content: ''; position: absolute; top: 0; bottom: 32px; width: 56px; pointer-events: none; z-index: 2; }
.events-rail-wrap::before { left: 0;  background: linear-gradient(90deg, var(--ink-2), transparent); }
.events-rail-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }

.event-card { position: relative; display: flex; flex-direction: column; background: var(--ink-3); border: 1px solid var(--hair); color: var(--bone); text-decoration: none; overflow: hidden; transition: 0.3s ease; flex-shrink: 0; width: clamp(280px, 32vw, 400px); scroll-snap-align: start; scroll-snap-stop: always; --accent: var(--cyan); }
.event-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 18px 50px -22px var(--accent), 0 0 30px -14px var(--accent); }
.event-card:hover .event-card-media img { transform: scale(1.06); filter: saturate(1.15) brightness(1.05); }
.event-card:hover .event-card-go { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.event-card.room-cheat, .event-card.room-house { --accent: var(--cyan); }
.event-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); border-bottom: 1px solid var(--hair); }
.event-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; filter: saturate(0.95) brightness(0.82); }
.event-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,23,0.05) 0%, rgba(5,8,23,0.6) 100%); pointer-events: none; }
.event-card-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 55%), radial-gradient(circle at 70% 70%, var(--magenta), transparent 55%), var(--ink-2); opacity: 0.25; }
.event-card-fallback-mark { font-family: var(--f-head); font-weight: 800; font-size: 108px; color: var(--bone); opacity: 0.55; text-shadow: 0 0 22px var(--accent); line-height: 1; }
.event-card-date { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(5,8,23,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 9px 13px; border: 1px solid var(--hair-strong); font-family: var(--f-term); text-align: center; line-height: 1; color: var(--bone); }
.event-card-date .day { display: block; font-size: 32px; }
.event-card-date .month { display: block; margin-top: 2px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.06em; color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.event-card-room { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(5,8,23,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 7px 11px; border: 1px solid var(--accent); color: var(--accent); text-shadow: 0 0 6px var(--accent); font-family: var(--f-pixel); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.event-card-body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 20px; gap: 16px; }
.event-card-title { font-family: var(--f-head); font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.18; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bone); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.event-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--hair); font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }
.event-card-time { color: var(--bone-dim); }
.event-card-go { color: var(--bone); }
.event-card-tonight { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--f-pixel); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; color: var(--ink); background: var(--accent); box-shadow: 0 0 18px var(--accent); animation: cc-pulse 2.4s ease-in-out infinite; }
.event-card.is-tonight { border-color: var(--accent); }
.event-source { display: inline-block; margin-top: 46px; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); }
.event-source a { color: var(--cyan); text-decoration: none; }
.event-source a:hover { text-shadow: 0 0 8px var(--cyan); }
.events-empty { margin-top: 18px; font-family: var(--f-term); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); }
.events-dots { display: none; justify-content: center; gap: 10px; padding-top: 4px; }
.events-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--bone-dim); background: transparent; cursor: pointer; transition: 0.25s ease; }
.events-dots button.is-active { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform: scale(1.2); }
.events-cta { margin-top: 40px; }

/* ─────────── VISIT HUD ─────────── */
.visit-section { position: relative; padding: 120px 40px; }
.visit-inner { max-width: 1340px; margin: 0 auto; }
.visit-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; margin-top: 56px; align-items: stretch; }
.visit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.visit-stat { position: relative; padding: 24px; background: rgba(0,232,255,0.03); border: 1px solid var(--hair); --accent: var(--cyan); }
.visit-stat.s-magenta { --accent: var(--magenta); }
.visit-stat.s-yellow { --accent: var(--yellow); }
.visit-stat.s-green { --accent: var(--green); }
.visit-stat.wide { grid-column: span 2; }
.visit-stat .k { font-family: var(--f-pixel); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.visit-stat .v { font-family: var(--f-term); font-size: 21px; line-height: 1.3; color: var(--bone); }
.visit-stat .v a { color: var(--bone); text-decoration: none; }
.visit-stat .v a:hover { color: var(--accent); }
.visit-photo { position: relative; min-height: 360px; border: 1px solid var(--hair-strong); background-size: cover; background-position: center; overflow: hidden; }
.visit-photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(0,232,255,0.28); background: repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 1px, transparent 2px, transparent 4px); opacity: 0.6; }
.visit-photo .tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); background: rgba(5,8,23,0.8); border: 1px solid var(--hair-strong); padding: 8px 12px; }

/* ─────────── PAGE HERO ─────────── */
.page-hero { position: relative; padding: 210px 40px 100px; background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); border-bottom: 1px solid var(--hair); overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent, var(--cyan)) 16%, transparent), transparent 50%), radial-gradient(ellipse at 82% 76%, rgba(255,31,156,0.10), transparent 50%); pointer-events: none; }
.page-hero .inner { max-width: 1340px; margin: 0 auto; position: relative; }
.page-hero .crumb { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 22px; }
.page-hero .crumb a { color: var(--bone-dim); text-decoration: none; }
.page-hero .crumb a:hover { color: var(--cyan); }
.page-hero .lvl-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-pixel); font-size: 10px; color: var(--accent, var(--cyan)); margin-bottom: 18px; }
.page-hero .lvl-tag::before { content: ''; width: 22px; height: 2px; background: var(--accent, var(--cyan)); box-shadow: 0 0 8px var(--accent, var(--cyan)); }
.page-hero h1 { font-family: var(--f-head); font-weight: 800; font-size: clamp(44px, 8vw, 110px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bone); text-shadow: 0 0 8px color-mix(in srgb, var(--accent, var(--cyan)) 60%, transparent), 0 0 30px color-mix(in srgb, var(--accent, var(--cyan)) 35%, transparent); margin: 0; }

.page-content { max-width: 880px; margin: 0 auto; padding: 80px 24px 120px; font-size: 17px; line-height: 1.7; color: var(--bone); font-family: var(--f-body); }
.page-content > h2 { margin-top: 48px; }
.page-content a { color: var(--cyan); }
/* Buttons & cards inside page content keep their own text colors (the link
   rule above must not win on specificity). */
.page-content a.cc-btn, .page-content a.cc-btn:hover { color: var(--ink); }
.page-content a.cc-btn-ghost { color: var(--accent, var(--cyan)); }
.page-content a.kit-card { color: var(--bone); }

/* ─────────── MENU INVENTORY ─────────── */
.menu-wrap { max-width: 1340px; margin: 0 auto; padding: 30px 24px 40px; }
.menu-warn { display: flex; align-items: center; gap: 14px; max-width: 1340px; margin: 0 auto 40px; padding: 16px 22px; border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); background: color-mix(in srgb, var(--yellow) 7%, transparent); font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--yellow); }
.menu-warn .ic { font-size: 14px; }
.menu-cat { margin-bottom: 26px; }
.menu-cat-head { display: flex; align-items: baseline; gap: 16px; padding: 16px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.menu-cat-num { font-family: var(--f-pixel); font-size: 12px; color: var(--accent, var(--cyan)); text-shadow: 0 0 10px color-mix(in srgb, var(--accent, var(--cyan)) 50%, transparent); flex-shrink: 0; }
.menu-cat-title { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: 1; text-transform: uppercase; color: var(--bone); margin: 0; }
.menu-cat-note { margin-left: auto; font-family: var(--f-body); font-size: 14px; color: var(--bone-dim); max-width: 38ch; text-align: right; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.menu-slot { position: relative; padding: 18px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border: 1px solid var(--hair); transition: 0.25s ease; --accent: var(--cyan); }
.menu-slot:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 36px -20px var(--accent); }
.menu-slot:hover .menu-slot-name { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.menu-slot-name { font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bone); margin: 0 0 7px; transition: 0.25s ease; line-height: 1.2; }
.menu-slot-desc { font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--bone-dim); margin: 0; }
.menu-slot-tag { position: absolute; top: 14px; right: 14px; font-family: var(--f-pixel); font-size: 7px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); opacity: 0.8; }
.menu-cat.c-cyan    { --accent: var(--cyan); }
.menu-cat.c-magenta { --accent: var(--magenta); }
.menu-cat.c-yellow  { --accent: var(--yellow); }
.menu-cat.c-green   { --accent: var(--green); }
.menu-cat.c-violet  { --accent: var(--violet); }
.menu-cat .menu-cat-num, .menu-cat.c-cyan .menu-cat-num { color: var(--accent); }

/* ─────────── CONTACT HUD ─────────── */
.contact-wrap { max-width: 1100px; margin: 0 auto; padding: 30px 24px 60px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-card { position: relative; padding: 30px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--hair); --accent: var(--cyan); transition: 0.25s ease; text-decoration: none; display: block; }
.contact-card:hover { border-color: var(--accent); box-shadow: 0 18px 44px -22px var(--accent); transform: translateY(-3px); }
.contact-card.c-cyan { --accent: var(--cyan); }
.contact-card.c-magenta { --accent: var(--magenta); }
.contact-card.c-yellow { --accent: var(--yellow); }
.contact-card.c-green { --accent: var(--green); }
.contact-card.wide { grid-column: span 2; }
.contact-k { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.contact-v { font-family: var(--f-term); font-size: 28px; line-height: 1.25; color: var(--bone); }
.contact-card:hover .contact-v { color: var(--accent); }
.contact-sub { font-family: var(--f-body); font-size: 14px; color: var(--bone-dim); margin-top: 8px; }
.contact-socials { display: flex; gap: 12px; margin-top: 14px; }
.contact-socials a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--hair-strong); color: var(--bone); transition: 0.25s ease; }
.contact-socials a:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.contact-socials svg { width: 19px; height: 19px; }
.contact-map { margin-top: 16px; border: 1px solid var(--hair); aspect-ratio: 21/9; width: 100%; filter: grayscale(0.3) brightness(0.85) contrast(1.05); }

/* ─────────── MEDIA KIT ─────────── */
.kit-wrap { max-width: 1180px; margin: 0 auto; padding: 30px 24px 70px; }
.kit-intro { --accent: var(--cyan); display: grid; grid-template-columns: 0.85fr 1fr; gap: 40px; align-items: center; padding: 40px; margin-bottom: 56px; }
.kit-intro-art { display: flex; align-items: center; justify-content: center; padding: 30px; background: radial-gradient(ellipse at center, rgba(0,232,255,0.08), transparent 70%); border: 1px solid var(--hair); }
.kit-intro-art img { width: 100%; max-width: 320px; height: auto; }
.kit-lead { font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--bone-dim); margin: 18px 0 24px; max-width: 46ch; }
.kit-swatches { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.kit-swatch { font-family: var(--f-pixel); font-size: 8px; letter-spacing: 0.04em; line-height: 1.7; color: var(--bone-dim); padding: 12px 14px 12px 30px; border: 1px solid var(--hair); position: relative; }
.kit-swatch::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--sw); box-shadow: 0 0 10px var(--sw); }
.kit-swatch b { color: var(--bone); font-size: 9px; }
.kit-zip { margin-top: 4px; }

.kit-grid-head { display: flex; align-items: baseline; gap: 16px; padding: 16px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kit-card { position: relative; display: flex; flex-direction: column; padding: 24px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--hair); --accent: var(--cyan); text-decoration: none; color: var(--bone); transition: 0.25s ease; }
.kit-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 44px -22px var(--accent); }
.kit-card.k-cyan { --accent: var(--cyan); } .kit-card.k-magenta { --accent: var(--magenta); } .kit-card.k-yellow { --accent: var(--yellow); } .kit-card.k-violet { --accent: var(--violet); } .kit-card.k-bone { --accent: var(--bone); }
.kit-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.kit-format { font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.04em; color: var(--ink); background: var(--accent); padding: 6px 9px; }
.kit-size { font-family: var(--f-term); font-size: 18px; color: var(--bone-dim); }
.kit-name { font-family: var(--f-head); font-weight: 700; font-size: 18px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bone); margin: 0 0 8px; }
.kit-card:hover .kit-name { color: var(--accent); }
.kit-blurb { font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--bone-dim); margin: 0 0 18px; flex: 1; }
.kit-go { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-top: auto; }
.kit-foot { margin-top: 40px; font-family: var(--f-term); font-size: 19px; color: var(--bone-dim); }
.kit-foot a { color: var(--cyan); text-decoration: none; }
.kit-foot a:hover { text-shadow: 0 0 8px var(--cyan); }

@media (max-width: 880px) {
	.kit-intro { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
	.kit-grid { grid-template-columns: 1fr; }
}

/* ─────────── FOOTER ─────────── */
.site-footer { background: #03050f; padding: 80px 40px 44px; border-top: 1px solid var(--hair); color: var(--bone); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; max-width: 1500px; margin: 0 auto 56px; padding-bottom: 56px; border-bottom: 1px solid var(--hair); }
.foot-brand .cc-logo { align-items: flex-start; }
.foot-blurb { font-family: var(--f-body); font-size: 14px; line-height: 1.6; color: var(--bone-dim); margin: 26px 0 0; max-width: 30ch; }
.foot-col h4 { font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 20px; color: var(--bone); }
.foot-col h4::before { content: '▸ '; color: var(--cyan); }
.foot-col a { font-family: var(--f-term); font-size: 18px; color: var(--bone-dim); line-height: 1.7; text-decoration: none; display: block; }
.foot-col a:hover { color: var(--cyan); }
.foot-col a.social-link { display: flex; align-items: center; gap: 9px; }
.foot-col a.social-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.foot-bottom { max-width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-term); font-size: 16px; letter-spacing: 0.04em; color: var(--bone-dim); }
.foot-bottom a { color: var(--bone-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--cyan); }
.foot-bottom .legal a { margin: 0 10px; }
.foot-bottom .pipe { color: rgba(234,246,255,0.2); }

/* ─────────── GAME OVER (404) ─────────── */
.gameover { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: center; padding: 180px 24px 120px; overflow: hidden; }
.gameover-scan { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,31,156,0.12), transparent 60%), var(--ink); }
.gameover-inner { position: relative; z-index: 2; text-align: center; max-width: 720px; }
.gameover-eyebrow { font-family: var(--f-pixel); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 30px; }
.gameover-title { font-family: var(--f-head); font-weight: 800; font-size: clamp(48px, 12vw, 140px); line-height: 1; text-transform: uppercase; color: var(--magenta); text-shadow: 0 0 10px var(--magenta), 0 0 40px color-mix(in srgb, var(--magenta) 50%, transparent); margin: 0; }
.gameover-sub { font-family: var(--f-body); font-size: 18px; color: var(--bone-dim); margin: 26px 0 30px; }
.gameover-continue { font-family: var(--f-pixel); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yellow); margin-bottom: 36px; }
.gameover-count { color: var(--cyan); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1200px) {
	.util-meta .util-link, .util-meta .util-link + .sep { display: none; }
}
@media (max-width: 1024px) {
	.mode-grid { grid-template-columns: 1fr; }
	.hud-strip { grid-template-columns: 1fr 1fr; }
	.visit-grid { grid-template-columns: 1fr; gap: 36px; }
	.menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
	.util-strip { height: auto; min-height: 34px; padding: 5px 0; }
	.util-inner { height: auto; padding: 0 16px; font-size: 14px; gap: 14px; }
	.util-meta { gap: 12px; }
	.util-meta .sep { display: none; }
	.util-pill { font-size: 13px; padding: 2px 9px; max-width: 46vw; }
	.nav-inner { height: 66px; padding: 0 16px; gap: 14px; }
	.primary-nav, .nav-divider, .ghost-cta { display: none; }
	.hamburger { display: block; }
	.cc-section, .mode-select, .events-section, .visit-section { padding-left: 20px; padding-right: 20px; }
	.boot { padding: 0 18px; grid-template-rows: var(--cc-header-h, 100px) 1fr auto; }
	.events-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 34px; }
	.events-rail-wrap { margin: 0 -20px; }
	.events-rail { padding: 8px 20px 28px; gap: 16px; }
	.events-rail-wrap::before, .events-rail-wrap::after { width: 24px; }
	.event-card { width: clamp(260px, 80vw, 330px); scroll-snap-align: center; }
	.events-rail { scroll-padding: 0 20px; }
	.events-arrow { width: 44px; height: 44px; font-size: 24px; }
	.events-dots { display: flex; }
	.menu-grid { grid-template-columns: 1fr; }
	.menu-cat-head { flex-direction: column; gap: 8px; }
	.menu-cat-note { margin-left: 0; text-align: left; }
	.contact-grid { grid-template-columns: 1fr; }
	.contact-card.wide { grid-column: span 1; }
	.foot-top { grid-template-columns: 1fr 1fr; gap: 30px; }
	.foot-bottom { flex-direction: column; gap: 16px; text-align: center; }
	.page-hero { padding: 150px 20px 70px; }
	.page-content { padding: 56px 20px 100px; }
}
@media (max-width: 560px) {
	.hud-strip { grid-template-columns: 1fr; }
	.foot-top { grid-template-columns: 1fr; }
	/* Keep the terminal readable but viewport-relative so the hero stack (logo →
	   terminal → Insert Coin) still fits without scrolling on small phones. */
	.terminal-body { font-size: 18px; min-height: clamp(150px, 26vh, 200px); }
}
/* Very short viewports (landscape phones, tiny laptops): compress the hero hard
   so Insert Coin is always on screen, and let the cabinets stack and scroll. */
@media (max-height: 600px) {
	.cc-logo--hero { height: clamp(64px, 12vh, 104px); }
	.terminal-body { font-size: clamp(13px, 3.4vh, 17px); min-height: 0; padding: 12px 20px 14px; }
	.boot-cta { margin-top: clamp(10px, 1.6vh, 18px); }
	.boot-cta .cc-btn { padding: 12px 26px; }
	.mode-select { min-height: 0; }
}

/* ─────────── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.terminal-caret { animation: none; opacity: 1; }
	.boot-press { animation: none; opacity: 1; }
	.boot-grid { display: none; }
}