/* Rainey's Arcade — deep sea, lit by arcade neon. */
:root {
    --ink: #0a1033; --deep: #101a4d; --blue: #054d7d; --blue-2: #0a6aa8;
    --pink: #ec1380; --pink-2: #ff4fa5; --pink-ink: #d40f72; /* pink that carries text: 5.1:1 under white, 4.8:1 on the light backgrounds */ --aqua: #19c3e6; --aqua-2: #8be9ff;
    --sun: #ffc93c; --sea: #2fd6a3; --coral: #ff6b5e; --violet: #7b4dd6;
    --sand: #fff6e6; --foam: #f1f9fd; --paper: #fff; --line: #dbe6ef;
    --text: #1b2340; --muted: #5a6685; --ok: #12996b; --warn: #c97a00; --bad: #d23a4b;
    --r: 18px; --r-sm: 12px; --shadow: 0 10px 30px rgba(10, 16, 51, .12); --shadow-lg: 0 24px 60px rgba(10, 16, 51, .22);
    --head: 'Fredoka', 'Trebuchet MS', sans-serif; --body: 'Nunito', 'Segoe UI', sans-serif; --pixel: 'Silkscreen', monospace;
    --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--foam); overflow-x: clip; } /* clip, not hidden: the page can never be dragged sideways on a phone, and the sticky header keeps working */
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--blue-2); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; color: var(--ink); letter-spacing: .005em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.narrow { width: min(780px, 100% - 40px); margin-inline: auto; }
.sr { 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(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; z-index: 300; font-weight: 800; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
[data-off] { display: none !important; }
/* The marker a preview browser sees (site.js). Customers never see it. */
/* Pinned by its left edge with a width cap on big screens. On a phone it is pinned on BOTH sides instead (below), so it can never be wider than the screen, and it stops short of the accessibility button in the corner. */
.pv-ribbon { position: fixed; left: 12px; bottom: 12px; z-index: 95; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; max-width: min(780px, calc(100% - 24px)); background: var(--ink); color: #fff; border: 2px solid var(--sun); border-radius: 14px; padding: 9px 12px 9px 16px; font-size: .88rem; box-shadow: var(--shadow-lg); }
.pv-ribbon.live { border-color: var(--sea); } .pv-ribbon.live b { color: var(--sea); } .pv-ribbon.live button { background: var(--sea); } /* the dashboard's "See the live site" tab */
.pv-ribbon b { color: var(--sun); } .pv-ribbon button { border: 0; background: var(--sun); color: var(--ink); font-family: var(--head); font-weight: 600; border-radius: 999px; padding: 6px 14px; cursor: pointer; } 
@media (max-width: 700px) { .pv-ribbon { right: 84px; max-width: none; font-size: .82rem; padding: 8px 10px 8px 12px; } }
/* a feature switched off in Dashboard > Site controls (site.js applyFeatures) */

/* ---------- header ---------- */
/* The top bar, the header and the footer are full-bleed rows: their content runs edge to edge, not in the centered column. */
.topbar .wrap, .site-head .wrap, .site-foot .wrap { width: auto; margin-inline: clamp(16px, 2.6vw, 44px); }
.topbar { background: var(--ink); color: #cfe3ff; font-size: .9rem; }
.topbar .wrap { display: flex; gap: 6px 22px; align-items: center; justify-content: center; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; }
.topbar .now { display: flex; gap: 4px 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; } /* when the items wrap (phones), every line stays centered */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 4px rgba(47, 214, 163, .22); margin-right: 7px; vertical-align: 1px; }
.dot.off { background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 107, 94, .22); }
.dot.warn { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 201, 60, .22); }
/* No backdrop-filter/transform/filter here: any of them would make this bar the containing block for the fixed mobile menu and clip it to the bar's height. */
.site-head { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 78px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 68px; width: auto; }
/* The big logo (site.js logoState). html.logo-room = a screen wide enough for it; html.logo-big = the page is at the top.
   The logo and its white panel reach up over the rows above the menu, and slide back into the menu row on scroll.
   The top bar and the announcement leave room for it on the left so nothing sits underneath. */
/* --logo-h never drops below 160px. When the rows above the menu are too short to hold that (the public view has only the
   hours bar), the logo and its panel hang below the menu row over the top of the hero by --drop, and the hero's first
   lines move down by the same amount so nothing sits underneath. */
html.logo-room { --logo-h: clamp(160px, calc(var(--above, 40px) + 66px), 190px); --logo-w: calc(var(--logo-h) * 1.64); --drop: max(0px, calc(var(--logo-h) - var(--above, 40px) - 66px)); }
html.logo-room .site-head .brand { position: relative; height: 78px; width: 112px; transition: width .28s ease; }
html.logo-room .site-head .brand img { position: absolute; left: 0; bottom: 5px; height: 68px; width: auto; max-width: none; z-index: 2; transition: height .28s ease; }
html.logo-room .site-head .brand::before { content: ''; position: absolute; left: -60px; right: -44px; bottom: 0; height: 78px; background: #fff; opacity: 0; z-index: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%); transition: height .28s ease, bottom .28s ease, opacity .18s ease; }
html.logo-room .site-head .brand img { transition: height .28s ease, bottom .28s ease; }
html.logo-big .site-head .brand { width: var(--logo-w); }
html.logo-big .site-head .brand img { height: var(--logo-h); bottom: calc(6px - var(--drop)); }
html.logo-big .site-head .brand::before { height: calc(var(--above, 40px) + 78px + var(--drop) + 4px); bottom: calc(-4px - var(--drop)); opacity: 1; }
html.logo-room .hero > .wrap, html.logo-room .page-hero > .wrap { padding-top: var(--drop); }
html.logo-room .topbar .wrap { padding-left: calc(var(--logo-w) + 30px); }
html.logo-room .banner { padding-left: calc(var(--logo-w) + 70px); }
html.no-anim .site-head .brand, html.no-anim .site-head .brand img, html.no-anim .site-head .brand::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.logo-room .site-head .brand, html.logo-room .site-head .brand img, html.logo-room .site-head .brand::before { transition: none; } }
.nav { display: flex; gap: 1px; margin-left: auto; align-items: center; }
.nav a { font-family: var(--head); font-weight: 500; font-size: 1rem; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.nav a:hover { background: #e8f4fb; }
.nav a[aria-current=page] { background: var(--ink); color: #fff; }
.head-cta { display: flex; gap: 8px; align-items: center; }
.cart-btn { position: relative; border: 2px solid var(--ink); background: #fff; border-radius: 999px; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; }
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn b { position: absolute; top: -6px; right: -6px; background: var(--pink); color: #fff; font-size: .74rem; min-width: 21px; height: 21px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
.nav-close, .nav-logo { display: none; }
.burger { display: none; border: 0; background: var(--ink); color: #fff; border-radius: 12px; width: 46px; height: 46px; cursor: pointer; }
.burger svg { width: 24px; height: 24px; margin: auto; }
/* The menu fits itself. site.js measures the row of links (fitNav) and puts .nav-tight (smaller links) or .nav-burger
   (the menu button) on <html> when they would not fit, so adding or hiding a menu item can never break the header.
   The header is drawn by site.js, so the class is already in place the first time it shows. */
html.nav-tight .nav a { padding: 8px 6px; font-size: .9rem; } html.nav-tight .site-head .wrap { gap: 10px; }
html.nav-burger .burger { display: block; }
html.nav-burger .nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); background: var(--ink); flex-direction: column; align-items: stretch; padding: 14px 16px 16px; gap: 2px; display: none; z-index: 120; overflow-y: auto; }
/* Never park the closed menu off-canvas: an off-screen fixed box widens the page on phones and the panel opens half outside the screen. It is display:none when closed and wipes in with clip-path, which cannot overflow. */
html.nav-burger .nav.open { display: flex; box-shadow: var(--shadow-lg); animation: navIn .26s ease both; }
html.nav-burger .nav { height: 100vh; height: 100dvh; }
html.nav-burger .nav-scrim { position: fixed; inset: 0; background: rgba(10, 16, 51, .55); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
html.nav-burger .nav-scrim.open { opacity: 1; visibility: visible; transition: opacity .25s; }
/* Link size and spacing follow the screen height, so all twelve links (every feature on) fit a short phone without scrolling; a tall phone gets roomier rows. */
html.nav-burger .nav a { color: #fff; line-height: 1.25; font-size: clamp(.95rem, 2.5vh, 1.2rem); padding: clamp(4px, calc(4.15vh - 17px), 13px) 16px; }
@supports (height: 1dvh) { html.nav-burger .nav a { font-size: clamp(.95rem, 2.5dvh, 1.2rem); padding: clamp(4px, calc(4.15dvh - 17px), 13px) 16px; } }
html.nav-burger .nav a:hover, html.nav-burger .nav a[aria-current=page] { background: rgba(255, 255, 255, .12); }
/* The logo art has dark navy in it, so it sits on a white chip (same as the footer) instead of straight on the navy panel. */
html.nav-burger .nav a.nav-logo { display: block; align-self: flex-start; background: #fff; border-radius: 14px; padding: 6px 12px; margin: 0 60px 10px 0; }
html.nav-burger .nav a.nav-logo:hover { background: #fff; }
html.nav-burger .nav-logo img { height: 46px; width: auto; }
html.nav-burger .nav-close { display: grid; place-items: center; position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.25rem; cursor: pointer; }
html.nav-burger .head-cta { margin-left: auto; }
html.nav-burger .head-cta .btn { display: none; }
.banner { background: var(--pink-ink) linear-gradient(90deg, var(--pink-ink), var(--violet)); color: #fff; text-align: center; font-weight: 700; padding: 9px 16px; font-size: .96rem; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; line-height: 1.4; }
.banner a { flex: none; background: #fff; color: #b80c62; text-decoration: none; font-family: var(--head); font-weight: 600; font-size: .92rem; padding: 6px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(10, 16, 51, .25); transition: transform .12s; }
.banner a:hover { transform: translateY(-1px); }
@media (max-width: 600px) { .banner { padding: 12px 16px 14px; font-size: .95rem; } .banner a { font-size: 1rem; padding: 9px 22px; } }
/* "Go here next" links: bold pill-shaped tap target instead of a thin underlined phrase */
.more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 600; text-decoration: none; color: #b80c62; background: #ffe3f1; padding: 8px 16px; border-radius: 999px; margin-top: 4px; transition: background .15s, transform .12s; }
.more::after { content: '→'; transition: transform .15s; }
.more:hover { background: #ffd0e6; } .more:hover::after { transform: translateX(3px); }
.dark .more { background: rgba(255, 255, 255, .12); color: #fff; }

@keyframes navIn { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--head); font-weight: 600; font-size: 1.05rem; padding: 13px 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .15s, background .15s; line-height: 1.15; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-pink { background: var(--pink-ink); color: #fff; box-shadow: 0 8px 22px rgba(236, 19, 128, .38); }
.btn-pink:hover { background: #bd0c64; }
.btn-aqua { background: var(--aqua); color: var(--ink); box-shadow: 0 8px 22px rgba(25, 195, 230, .35); }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 8px 22px rgba(255, 201, 60, .35); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; border-color: currentColor; color: var(--ink); }
.dark .btn-ghost { color: #fff; }
.btn-sm { padding: 8px 16px; font-size: .95rem; }
.btn-lg { padding: 16px 32px; font-size: 1.18rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-block { width: 100%; }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.dark { background: var(--ink); color: #d7e3ff; }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark a { color: var(--aqua-2); }
/* A button keeps its own text color inside a dark section. Without this the link color above won and put light aqua text on the yellow and aqua buttons. */
.dark a.btn-sun, .dark a.btn-aqua { color: var(--ink); } .dark a.btn-pink, .dark a.btn-ink { color: #fff; }
.sand { background: var(--sand); }
.paper { background: var(--paper); }
.eyebrow { font-family: var(--pixel); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-ink); display: block; margin-bottom: 14px; }
.dark .eyebrow { color: var(--sun); }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 62ch; }
.dark .lead { color: #b9c9f2; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.glow { text-shadow: 0 0 28px rgba(25, 195, 230, .55); }
.wave { position: absolute; left: 0; right: 0; height: 60px; width: 100%; pointer-events: none; }
.wave.top { top: -1px; transform: rotate(180deg); } .wave.bottom { bottom: -1px; }

/* ---------- hero ---------- */
.hero { background: radial-gradient(1200px 600px at 78% -10%, #24379a 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, #5a1a78 0%, transparent 55%), var(--ink); color: #fff; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(90px, 10vw, 140px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--pink-2); text-shadow: 0 0 34px rgba(236, 19, 128, .7); }
.hero p.lead { color: #c5d3f7; }
.hero-art { position: relative; }
.hero-art img { border-radius: 28px; box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255, 255, 255, .08), 0 0 80px rgba(25, 195, 230, .28); transform: rotate(1.6deg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.hero-chip { position: absolute; background: #fff; color: var(--ink); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg); font-weight: 800; font-size: .95rem; display: flex; gap: 10px; align-items: center; animation: bob 5s ease-in-out infinite; }
.hero-chip small { display: block; font-weight: 600; color: var(--muted); font-size: .8rem; }
/* The chips are links (pizza wait opens ordering, top score opens that leaderboard): a small arrow says so, and the bobbing stops under the pointer so the target holds still. */
a.hero-chip { text-decoration: none; cursor: pointer; transition: box-shadow .15s; }
a.hero-chip::after { content: '›'; font-family: var(--head); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--pink-ink); margin-left: 2px; }
a.hero-chip:hover, a.hero-chip:focus-visible { animation-play-state: paused; box-shadow: var(--shadow-lg), 0 0 0 3px var(--aqua); }
a.hero-chip[data-off] { display: none; }
.hero-chip.a { left: -18px; bottom: 34px; } .hero-chip.b { right: -10px; top: 26px; animation-delay: -2.4s; }
.hero-chip .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--sand); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* On a phone every row of buttons is centered (Get directions / Contact us, Hours and directions / Contact us, and the rest). */
@media (max-width: 640px) { .cta-row { justify-content: center; } }
/* Home hero, all three buttons showing but not enough room for them in one row (every phone, and the narrower desktop widths where the
   hero is two columns): the two colored ones share the first row, "Join the club" sits centered on its own row. Measured on the row itself. */
.hero-cta { container: herocta / inline-size; }
@container herocta (max-width: 630px) {
    .hero-cta > .btn-lg { padding: 14px clamp(8px, 3.4vw, 24px); font-size: clamp(.92rem, 4.3vw, 1.14rem); white-space: nowrap; }
    .hero-cta:has(> a[href="/order"]:not([data-off])):has(> a[href="/parties"]:not([data-off])):has(> a[href="/memberships"]:not([data-off])) > a[href="/order"], .hero-cta:has(> a[href="/order"]:not([data-off])):has(> a[href="/parties"]:not([data-off])):has(> a[href="/memberships"]:not([data-off])) > a[href="/parties"] { flex: 1 0 calc(50% - 6px); min-width: 0; justify-content: center; } /* half the row each (the gap is 12px), so the third button has to wrap */
    .hero-cta:has(> a[href="/order"]:not([data-off])):has(> a[href="/parties"]:not([data-off])):has(> a[href="/memberships"]:not([data-off])) > a[href="/memberships"] { margin-inline: auto; }
}
@keyframes bob { 50% { transform: translateY(-9px); } }
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bubbles i { position: absolute; bottom: -60px; border-radius: 50%; border: 2px solid rgba(139, 233, 255, .45); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(139, 233, 255, .05) 60%); animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-120vh) translateX(30px); opacity: 0; } }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero-chip.a { left: 6px; } .hero-chip.b { right: 6px; } }
.page-hero { background: radial-gradient(900px 420px at 85% -20%, #24379a 0%, transparent 60%), var(--ink); color: #fff; padding: clamp(44px, 6vw, 80px) 0 clamp(70px, 8vw, 110px); overflow: hidden; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.page-hero .wrap { position: relative; z-index: 2; }

/* ---------- live strip ---------- */
.today { margin-top: -58px; position: relative; z-index: 5; padding: 0; }
/* Flex, not a fixed grid: with a card switched off in Site controls the cards that are left stay centered. */
.today-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.today-grid > * { flex: 0 1 calc((100% - 42px) / 4); min-width: 0; }
.today-card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); border: 1px solid var(--line); transition: transform .15s; }
a.today-card:hover { transform: translateY(-3px); }
.today-card .ic { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.6rem; }
.today-card b { font-family: var(--head); font-size: 1.12rem; display: block; color: var(--ink); line-height: 1.2; }
.today-card span { font-size: .9rem; color: var(--muted); }
@media (max-width: 980px) { .today-grid > * { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 540px) { .today-grid > * { flex-basis: 100%; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
/* A card row that lost a card to Site controls: keep the card size, center what is left (no hole on the right). */
/* The same for a list whose number of cards changes (challenges, contests, games, packs, party packages, tournaments): `g-center` keeps the card size and centers a row that is not full. */
.g2:has(> [data-off]), .g3:has(> [data-off]), .g4:has(> [data-off]), .g-center { display: flex; flex-wrap: wrap; justify-content: center; }
.g2:has(> [data-off]) > *, .g2.g-center > * { flex: 0 1 calc((100% - 22px) / 2); min-width: 0; }
.g3:has(> [data-off]) > *, .g3.g-center > * { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }
.g4:has(> [data-off]) > *, .g4.g-center > * { flex: 0 1 calc((100% - 66px) / 4); min-width: 0; }
@media (max-width: 980px) { .g3:has(> [data-off]) > *, .g4:has(> [data-off]) > *, .g3.g-center > *, .g4.g-center > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 640px) { .g2:has(> [data-off]) > *, .g3:has(> [data-off]) > *, .g4:has(> [data-off]) > *, .g2.g-center > *, .g3.g-center > *, .g4.g-center > * { flex-basis: 100%; } }
.g-center > p { flex-basis: 100% !important; } /* the "nothing running right now" line takes the whole row */
.card { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.dark .card { background: #151f5c; border-color: #26337a; color: #d7e3ff; box-shadow: none; }
.card h3, .card .h3 { margin-bottom: .35em; }
/* .h3: a heading that must be an h2 for the page outline but should look like the h3 it sits among. */
.h3 { font-size: 1.3rem; }
/* A card that ends in a badge: the badge sits in the bottom right corner of every card in the row, however long the text above it is. */
.card:has(> .pill:last-child) { display: flex; flex-direction: column; }
.card > .pill:last-child { margin-top: auto; align-self: flex-end; }
.card .ic-lg { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.9rem; margin-bottom: 16px; }
.bg-pink { background: #ffe3f1; } .bg-aqua { background: #dcf6fc; } .bg-sun { background: #fff1c7; } .bg-sea { background: #d9f8ee; } .bg-violet { background: #ebe3fb; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature.flip > :first-child { order: 2; }
.feature img { border-radius: 26px; box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature.flip > :first-child { order: 0; } }
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 9px; }
.ticks li { padding-left: 32px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: #e8f4fb; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pill.pink { background: #ffe3f1; color: #b80c62; } .pill.sun { background: #fff1c7; color: #8a5a00; } .pill.sea { background: #d9f8ee; color: #0b6b4b; } .pill.bad { background: #fde4e7; color: #a3202f; } .pill.ink { background: var(--ink); color: #fff; }
.game-chip { display: flex; align-items: center; gap: 12px; background: #151f5c; border: 1px solid #2a3a8c; border-radius: 16px; padding: 14px 16px; color: #fff; font-family: var(--head); font-weight: 500; text-decoration: none; transition: transform .15s, border-color .15s; }
.game-chip[href]:hover { transform: translateY(-3px); border-color: var(--aqua); } /* a tile with no link (feature switched off) sits still */
.game-chip .e { font-size: 1.6rem; }
.game-chip small { display: block; font-family: var(--body); color: #9db0e8; font-size: .8rem; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label, .lbl { font-weight: 800; font-size: .93rem; color: var(--ink); }
.field .hint { font-size: .85rem; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 2px solid var(--line); background: #fff; transition: border-color .15s, box-shadow .15s; min-height: 50px; }
.input:focus { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(25, 195, 230, .18); outline: 0; }
textarea.input { min-height: 110px; resize: vertical; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .row3 { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .row, .row3 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: 10px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--pink); flex: none; }
.err { color: var(--bad); font-weight: 700; font-size: .92rem; }
.note { color: var(--text); background: #e8f4fb; border-left: 5px solid var(--aqua); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .96rem; }
.note.sun { background: #fff6da; border-color: var(--sun); } .note.pink { background: #ffeaf4; border-color: var(--pink); }
.seg { display: inline-flex; background: #e6eef6; border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-family: var(--head); font-weight: 500; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(10, 16, 51, .14); }
.dark .seg { background: #1b2769; } .dark .seg button { color: #9db0e8; } .dark .seg button[aria-pressed=true] { background: var(--aqua); color: var(--ink); }
.hp-wrap { position: absolute; left: -5000px; height: 0; overflow: hidden; }

/* ---------- menu / ordering ---------- */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.order-layout > *, .grid > *, .feature > * { min-width: 0; }
@media (max-width: 1020px) { .order-layout { grid-template-columns: minmax(0, 1fr); } }
.cat-nav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; position: sticky; top: 79px; z-index: 20; background: var(--foam); scrollbar-width: none; }
.cat-nav a { flex: none; font-family: var(--head); text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--line); padding: 8px 17px; border-radius: 999px; }
.cat-nav a:hover { border-color: var(--pink); }
.menu-cat { margin: 26px 0 14px; display: flex; align-items: baseline; gap: 12px; }
.menu-cat h2 { font-size: 1.7rem; margin: 0; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; gap: 14px; cursor: pointer; text-align: left; transition: transform .12s, box-shadow .15s, border-color .15s; width: 100%; }
.menu-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--pink); }
.menu-item .e { flex: none; width: 60px; height: 60px; border-radius: 16px; background: var(--sand); display: grid; place-items: center; font-size: 2rem; }
.menu-item b { font-family: var(--head); font-weight: 600; font-size: 1.12rem; color: var(--ink); display: block; }
.menu-item p { margin: 3px 0 8px; font-size: .92rem; color: var(--muted); line-height: 1.45; }
.menu-item .price { font-weight: 800; color: var(--pink-ink); }
.menu-item.out { opacity: .55; cursor: not-allowed; }
.cart-panel { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); position: sticky; top: 96px; overflow: hidden; }
.cart-panel header { background: var(--ink); color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.cart-panel header h3 { color: #fff; margin: 0; }
.cart-body { padding: 16px 20px; max-height: 46vh; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.cart-line small { color: var(--muted); grid-column: 1; line-height: 1.4; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { border: 0; background: #fff; width: 32px; height: 32px; cursor: pointer; font-weight: 800; font-size: 1.1rem; }
.qty button:hover { background: var(--sand); } .qty span { min-width: 26px; text-align: center; font-weight: 800; }
.cart-foot { padding: 16px 20px 20px; background: #fafcfe; border-top: 1px solid var(--line); }
.tot { display: flex; justify-content: space-between; padding: 3px 0; } .tot.big { font-family: var(--head); font-size: 1.3rem; font-weight: 600; color: var(--ink); padding-top: 8px; }
.wait-badge { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #fff1c7, #ffe3f1); border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; }
.wait-badge .big { font-family: var(--head); font-weight: 700; font-size: 1.7rem; color: var(--ink); line-height: 1; }
.wait-badge.closed { background: #fde4e7; }
.mob-cart { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; }
@media (max-width: 1020px) { .mob-cart.show { display: block; } .cart-panel { position: static; } }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: flex; justify-content: space-between; gap: 8px; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 10px 13px; font-weight: 700; font-size: .95rem; background: #fff; transition: all .12s; }
.opt span small { color: var(--muted); font-weight: 600; }
.opt input:checked + span { border-color: var(--pink); background: #fff0f7; box-shadow: inset 0 0 0 1px var(--pink); }
.opt input:focus-visible + span { outline: 3px solid var(--aqua); }
.steps { display: flex; gap: 0; margin: 26px 0; counter-reset: s; }
.steps li { list-style: none; flex: 1; text-align: center; position: relative; font-size: .86rem; font-weight: 800; color: var(--muted); padding-top: 44px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: #e1e9f2; color: var(--muted); display: grid; place-items: center; font-family: var(--head); z-index: 2; }
.steps li::after { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 4px; background: #e1e9f2; z-index: 1; }
.steps li:first-child::after { display: none; }
.steps li.done, .steps li.on { color: var(--ink); }
.steps li.done::before { background: var(--sea); color: #fff; content: '✓'; }
.steps li.on::before { background: var(--pink); color: #fff; box-shadow: 0 0 0 6px rgba(236, 19, 128, .2); animation: pulse 1.6s infinite; }
.steps li.done::after, .steps li.on::after { background: var(--sea); }
@keyframes pulse { 50% { box-shadow: 0 0 0 11px rgba(236, 19, 128, .08); } }

/* ---------- modal / drawer / toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(10, 16, 51, .62); backdrop-filter: blur(3px); z-index: 200; display: grid; place-items: center; padding: 16px; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 24px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop .22s cubic-bezier(.2, 1.2, .4, 1); }
.modal.wide { width: min(900px, 100%); }
@keyframes pop { from { transform: scale(.94) translateY(12px); opacity: 0; } }
.modal-head { padding: 22px 26px 0; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal-head h3 { font-size: 1.5rem; margin: 0; }
.modal-body { padding: 16px 26px 8px; }
.modal-foot { padding: 16px 26px 22px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; position: sticky; bottom: 0; background: linear-gradient(transparent, #fff 28%); flex-wrap: wrap; }
.x { border: 0; background: #eef3f8; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; flex: none; }
.x:hover { background: #dfe8f1; }
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 400; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); }
.toast { background: var(--ink); color: #fff; padding: 13px 18px; border-radius: 14px; box-shadow: var(--shadow-lg); font-weight: 700; animation: pop .2s; display: flex; gap: 10px; align-items: center; }
.toast.ok { background: #0c7a55; } .toast.bad { background: #b32636; }

/* ---------- pricing tiers ---------- */
.tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; align-items: stretch; } .tiers > * { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; } /* three across; fewer than three, or a fourth, sits centered */
@media (max-width: 960px) { .tiers { max-width: 520px; margin-inline: auto; } .tiers > * { flex-basis: 100%; } }
.tier { background: #fff; border-radius: 26px; padding: 30px 28px; border: 2px solid var(--line); display: flex; flex-direction: column; position: relative; color: var(--text); }
.tier.feat { border-color: var(--sun); box-shadow: 0 0 0 5px rgba(255, 201, 60, .25), var(--shadow-lg); transform: translateY(-10px); }
@media (max-width: 960px) { .tier.feat { transform: none; } }
.tier .flag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--sun); color: var(--ink); font-family: var(--pixel); font-size: .72rem; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.tier h3 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.tier .medal { width: 34px; height: 34px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), inset 0 3px 0 rgba(255, 255, 255, .5); }
.tier .amt { font-family: var(--head); font-weight: 700; font-size: 3rem; color: var(--ink); line-height: 1; }
.tier .amt small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.tier .sub { color: var(--muted); font-size: .92rem; min-height: 2.9em; margin: 6px 0 16px; }
.tier .ticks { flex: 1; font-size: .97rem; }
.calc { background: #151f5c; border: 1px solid #2a3a8c; border-radius: 26px; padding: clamp(22px, 4vw, 40px); }
.calc-rows { display: grid; gap: 10px; }
.calc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #2a3a8c; }
.calc-row .qty { border-color: #2a3a8c; } .calc-row .qty button { background: #1b2769; color: #fff; } .calc-row .qty span { color: #fff; }
.bar { height: 22px; border-radius: 999px; background: #1b2769; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }

/* ---------- leaderboard ---------- */
.board { background: #0d1440; border: 2px solid #2a3a8c; border-radius: 22px; overflow: hidden; box-shadow: 0 0 60px rgba(25, 195, 230, .12); }
.board-head { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #2a3a8c; background: linear-gradient(90deg, rgba(236, 19, 128, .18), rgba(25, 195, 230, .12)); }
.board-head h3 { margin: 0; color: #fff; font-size: 1.4rem; }
.board ol { list-style: none; margin: 0; padding: 8px; }
.board li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; color: #fff; }
.board li:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.board .rk { font-family: var(--pixel); font-size: 1rem; color: #7f93d6; }
.board li:nth-child(1) .rk { color: var(--sun); text-shadow: 0 0 12px rgba(255, 201, 60, .8); } .board li:nth-child(2) .rk { color: #d8e2f0; } .board li:nth-child(3) .rk { color: #e89b5e; }
.board .tag { font-family: var(--head); font-weight: 500; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .tag small { font-family: var(--body); color: #7f93d6; font-size: .78rem; margin-left: 8px; }
.board .sc { font-family: var(--pixel); color: var(--aqua-2); font-size: 1.05rem; text-shadow: 0 0 12px rgba(25, 195, 230, .6); }
.board li.me { outline: 2px solid var(--pink); background: rgba(236, 19, 128, .14); }
/* A score row is a share control (site.js, "challenge a friend"): tap it and the phone's texting app opens with the dare ready to send. */
.board li[data-share] { cursor: pointer; transition: background .12s; } .board li[data-share]:hover { background: rgba(25, 195, 230, .14); }
.board li[data-share]:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; }
.board-tip { margin: 0; padding: 10px 16px 14px; text-align: center; font-size: .86rem; font-weight: 700; color: #9db0e8; }
.share-btn { align-self: flex-start; } .quest-body .share-btn { align-self: flex-end; } /* on a challenge, contest or drawing card it sits bottom right */
.board .empty { padding: 34px; text-align: center; color: #7f93d6; }
.quest { background: #fff; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); color: var(--text); }
.quest-top { padding: 20px 22px 14px; color: #fff; position: relative; }
.quest-top h3 { color: #fff; margin: 8px 0 0; font-size: 1.25rem; }
.quest-body { padding: 16px 22px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.quest-body p { margin: 0; font-size: .96rem; }
/* In-store drawing card and its entry pass (compete.js). */
.draw-how { margin: 0; font-size: .95rem; } .draw-when { font-weight: 800; color: var(--ink); }
.epass { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(6, 12, 40, .86); overflow-y: auto; }
.epass-card { position: relative; width: min(420px, 100%); border-radius: 26px; padding: 26px 22px 22px; text-align: center; color: #fff; background: linear-gradient(160deg, #ec1380, #7b4dd6 55%, #19c3e6); background-size: 200% 200%; animation: passGlow 6s ease-in-out infinite; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
@keyframes passGlow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.epass.used .epass-card { background: linear-gradient(160deg, #0f7a4c, #0a5a6e); animation: none; }
.epass-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .22); color: #fff; font-size: 1.1rem; cursor: pointer; }
.epass-logo { height: 84px; width: auto; background: #fff; border-radius: 16px; padding: 8px 14px; }
.epass-kicker { display: block; margin-top: 14px; font-family: var(--pixel); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; opacity: .9; }
.epass-card h2 { color: #fff; font-size: clamp(1.5rem, 6vw, 2rem); margin: 6px 0 6px; line-height: 1.15; } .epass-prize { margin: 0 0 14px; font-weight: 800; font-size: 1.05rem; }
.epass-clock { background: rgba(10, 16, 51, .55); border-radius: 16px; padding: 12px 10px; margin-bottom: 14px; } .epass-clock b { display: block; font-size: 1.02rem; } .epass-clock span { display: block; font-family: var(--pixel); font-size: 1.7rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.epass-done { background: #fff; color: #0f7a4c; border-radius: 16px; padding: 14px; font-family: var(--head); font-weight: 700; font-size: 1.4rem; } .epass-done small { display: block; font-family: var(--body); font-size: .9rem; font-weight: 700; color: var(--ink); }
.epass-ask { margin: 0 0 10px; font-weight: 800; } .epass-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.epass-fine { margin: 14px 0 0; font-size: .86rem; font-weight: 700; opacity: .95; }
@media (prefers-reduced-motion: reduce) { .epass-card { animation: none; } }
.reward { margin-top: auto; display: flex; align-items: center; gap: 10px; background: var(--sand); border-radius: 12px; padding: 10px 14px; font-weight: 800; font-size: .95rem; }

/* ---------- tickets (power packs) ---------- */
.ticket { background: #fff; border-radius: 22px; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow); color: var(--text); overflow: hidden; }
.ticket-top { padding: 24px 24px 20px; color: #fff; position: relative; }
.ticket-top h3 { color: #fff; font-size: 1.5rem; margin: 6px 0 2px; }
.ticket-top .amt { font-family: var(--head); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.ticket-cut { height: 22px; position: relative; background: radial-gradient(circle at 0 50%, var(--cut, #0a1033) 11px, transparent 12px), radial-gradient(circle at 100% 50%, var(--cut, #0a1033) 11px, transparent 12px); }
.ticket-cut::after { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 3px dashed var(--line); }
.ticket-body { padding: 8px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.grad-pink { background: linear-gradient(135deg, #ec1380, #7b4dd6); } .grad-aqua { background: linear-gradient(135deg, #0a6aa8, #19c3e6); } .grad-sun { background: linear-gradient(135deg, #ff8a3c, #ffc93c); } .grad-sea { background: linear-gradient(135deg, #0c8f6a, #2fd6a3); } .grad-ink { background: linear-gradient(135deg, #0a1033, #24379a); }

/* ---------- calendar ---------- */
.cal { background: #fff; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-head h3 { margin: 0; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { border: 2px solid var(--line); background: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.cal-nav button:hover:not([disabled]) { border-color: var(--pink); } .cal-nav button[disabled] { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-dow { text-align: center; font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal-day { aspect-ratio: 1; border-radius: 13px; border: 2px solid transparent; background: #f4f8fb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-weight: 800; position: relative; padding: 0; min-width: 0; width: 100%; overflow: hidden; }
.cal-day:hover:not([disabled]) { border-color: var(--aqua); }
.cal-day[disabled] { background: transparent; color: #b9c4d3; cursor: default; font-weight: 600; }
.cal-day.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-day.today { border-color: var(--pink); }
.cal-day .marks { display: flex; gap: 3px; height: 7px; }
.cal-day .marks i { width: 7px; height: 7px; border-radius: 50%; }
.m-open { background: var(--sea); } .m-some { background: var(--sun); } .m-full { background: var(--coral); } .m-tramp { background: var(--violet); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.slot { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 6px; font-weight: 800; cursor: pointer; text-align: center; }
.slot:hover:not([disabled]) { border-color: var(--pink); } .slot[aria-pressed=true] { background: var(--pink); border-color: var(--pink); color: #fff; }
.slot[disabled] { background: #f1f4f8; color: #a9b4c5; text-decoration: line-through; cursor: not-allowed; }
.timeline { position: relative; background: #f4f8fb; border-radius: 12px; height: 46px; overflow: hidden; margin: 8px 0 4px; }
.timeline i { position: absolute; top: 5px; bottom: 5px; border-radius: 8px; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; display: grid; place-items: center; overflow: hidden; white-space: nowrap; padding: 0 4px; }
.tl-room { background: var(--pink); } .tl-tramp { background: var(--violet); } .tl-pending { background: repeating-linear-gradient(45deg, #ffb74a, #ffb74a 6px, #ffc93c 6px, #ffc93c 12px); color: var(--ink) !important; }
.tl-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); font-weight: 700; }

/* ---------- waiver ---------- */
.waiver-text { background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 22px 24px; max-height: 340px; overflow-y: auto; font-size: .95rem; }
.waiver-text h4 { margin-top: 1.1em; font-size: 1.02rem; }
.sig-pad { border: 2px dashed #9fb2c8; border-radius: var(--r); background: #fff; position: relative; touch-action: none; }
.sig-pad canvas { width: 100%; height: 190px; display: block; border-radius: var(--r); cursor: crosshair; }
.sig-pad .sig-line { position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 2px solid #c7d3e0; pointer-events: none; }
.sig-pad .sig-x { position: absolute; left: 26px; bottom: 48px; color: #9fb2c8; font-weight: 800; pointer-events: none; }
.minor { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px 2px; margin-bottom: 10px; position: relative; }
.minor .x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; font-size: 1rem; }

/* ---------- member pass ---------- */
.pass { border-radius: 26px; color: #fff; padding: 26px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); max-width: 440px; }
.pass::after { content: ''; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0, rgba(255, 255, 255, .28), transparent 60%); pointer-events: none; }
.pass h3 { color: #fff; margin: 0; font-size: 1.5rem; }
.pass .code { font-family: var(--pixel); letter-spacing: .1em; font-size: 1.05rem; }
.pass-qr { background: #fff; border-radius: 16px; padding: 10px; width: 132px; height: 132px; flex: none; }
.pass-silver { background: linear-gradient(135deg, #5d6f8a, #a9b8cc 55%, #6f819c); } .pass-gold { background: linear-gradient(135deg, #a86b00, #ffc93c 55%, #c98a10); } .pass-platinum { background: linear-gradient(135deg, #1b1f3a, #6b5bd6 55%, #19c3e6); }
.perk-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: center; }
.perk-row small { color: var(--muted); display: block; }
.pips { display: flex; gap: 5px; } .pips i { width: 16px; height: 16px; border-radius: 50%; background: var(--sea); } .pips i.used { background: #dfe6ee; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #b9c9f2; padding: 70px 0 28px; position: relative; font-size: .97rem; }
.site-foot h4, .site-foot .foot-h { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.site-foot a { color: #d7e3ff; text-decoration: none; } .site-foot a:hover { color: var(--aqua-2); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } /* Phone: the logo block and the hours each take the full width; Play and Plan sit side by side as two columns between them. */
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .foot-grid > div:first-child, .foot-grid > div:last-child { grid-column: 1 / -1; } }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* Social icons: round buttons in the footer, and the "Follow us" bar docked under the logo (site.js). */
.soc { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .15s, transform .15s; }
.soc svg { width: 21px; height: 21px; } .site-foot a.soc:hover, .soc:hover { background: var(--pink); color: #fff; text-decoration: none; transform: translateY(-2px); }
.foot-links { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; } .foot-soc { display: flex; gap: 8px; margin-top: 16px; } /* icons live under the address, clear of the accessibility button */
.follow-dock { position: fixed; left: 0; top: 232px; z-index: 80; display: none; align-items: stretch; background: var(--ink); border-radius: 0 16px 16px 0; overflow: hidden; box-shadow: var(--shadow); }
.follow-dock .fd-icons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; }
.follow-dock .fd-label { display: flex; align-items: center; justify-content: center; width: 24px; padding: 12px 0; background: var(--pink-ink); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--pixel); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #fff; } /* the colored band down the drawer's outer edge */
.follow-dock .soc { width: 36px; height: 36px; } .follow-dock .soc svg { width: 19px; height: 19px; }
@media (min-width: 1300px) { .follow-dock { display: flex; } } /* only where the page has an empty left margin to sit in */
.foot-logo { background: #fff; border-radius: 26px; padding: 14px 24px; display: inline-block; margin-bottom: 18px; } .foot-logo img { height: clamp(104px, 9vw, 140px); width: auto; }
.hours-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; } .hours-list dt { color: #fff; font-weight: 700; } .hours-list dd { margin: 0; } .hours-list .now { color: var(--sun); }
.foot-base { border-top: 1px solid #26337a; margin-top: 44px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .87rem; color: #8698cf;
    /* The accessibility button is fixed in the bottom-right corner (about 96px in from the edge). Keep this row's right end out from under it: reserve whatever part of that 96px the page margin does not already cover. */
    padding-right: max(0px, calc(96px - (100vw - 100%) / 2)); }
/* On a phone that row stacks and its last line is short and on the left, so nothing sits under the button: no reserve, which was pushing "Kansas." onto a line by itself. */
@media (max-width: 700px) { .foot-base { padding-right: 0; } }
.nw { white-space: nowrap; }
.foot-note { margin: 12px 0 0; font-size: .88rem; text-align: center; } /* "Open as long as we have people playing." centered under the hours */

/* ---------- gate ---------- */
.gate { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(800px 500px at 50% 0, #24379a, var(--ink)); display: grid; place-items: center; padding: 20px; color: #fff; }
.gate form { background: #fff; color: var(--text); padding: 34px; border-radius: 26px; width: min(420px, 100%); text-align: center; box-shadow: var(--shadow-lg); }
.gate img { height: 84px; width: auto; margin: 0 auto 16px; }

/* ---------- Reef Run promo ---------- */
.reef-promo { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; border-radius: 22px; padding: 20px 24px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #0a6aa8, #19c3e6 60%, #2fd6a3); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; transition: transform .15s; }
.reef-promo:hover { transform: translateY(-3px); }
.reef-promo .fish { font-size: 3rem; animation: bob 3s ease-in-out infinite; display: inline-block; transform: scaleX(-1); }
.reef-promo b { font-family: var(--head); font-weight: 700; font-size: 1.45rem; display: block; line-height: 1.15; }
.reef-promo span.t { font-size: .98rem; opacity: .95; }
.reef-promo .btn { white-space: nowrap; }
@media (max-width: 640px) { .reef-promo { grid-template-columns: auto 1fr; } .reef-promo .btn { grid-column: 1 / -1; } }

/* ---------- small screens ---------- */
@media (max-width: 700px) { .topbar .wrap > div:last-child { display: none; } .topbar .wrap { min-height: 36px; padding: 4px 0; } }
@media (max-width: 520px) { .seg button { padding: 8px 13px; font-size: .92rem; } .seg { border-radius: 22px; } body { font-size: 16px; } .card { padding: 20px; } .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; } }
.wait-badge > div { min-width: 0; } .wait-badge .pill { white-space: normal; }

/* ---------- misc ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; }
.table { width: 100%; border-collapse: collapse; font-size: .96rem; } .table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); } .table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; } .kv dt { font-weight: 800; color: var(--muted); font-size: .9rem; } .kv dd { margin: 0; font-weight: 700; }
.spin { width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; display: inline-block; } @keyframes sp { to { transform: rotate(360deg); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; } .confetti i { position: absolute; top: -20px; width: 10px; height: 16px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
@media print { .site-head, .topbar, .site-foot, .banner, .no-print, .toasts { display: none !important; } body { background: #fff; } }

/* ---------- tournaments (public page; the dashboard reuses the standings and bracket pieces) ---------- */
.tback { color: #9db0e8; font-weight: 700; text-decoration: none; } .tback:hover { color: #fff; }
/* These two are white cards sitting on the dark section, so they set their own dark text instead of inheriting its light text. */
.dark .tcard, .dark .tinfo { color: var(--text); } .dark .tcard h3, .dark .tinfo h2 { color: var(--ink); } .dark .tcard .g { color: var(--blue-2); }
.tcard { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: var(--r); padding: 22px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .15s; }
.tcard:hover { transform: translateY(-3px); } .tcard-top { display: flex; justify-content: space-between; align-items: center; } .tcard .e { font-size: 2.4rem; line-height: 1; }
.tcard h3 { margin: 6px 0 0; font-size: 1.35rem; } .tcard p { margin: 0; } .tcard .g { font-weight: 800; color: var(--blue-2); } .tcard .w { color: var(--muted); } .tcard .s { color: var(--muted); font-size: .92rem; } .tcard .champ { color: var(--ink); } .tcard .btn { margin-top: 12px; }
.tinfo { background: #fff; border-radius: var(--r); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow); }
.tinfo-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .tinfo-head .e { font-size: 3rem; line-height: 1; } .tinfo-head > div { flex: 1; min-width: 200px; } .tinfo-head h2 { margin: 0; font-size: 1.6rem; } .tinfo-head p { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.tblurb { margin: 16px 0 0; font-size: 1.05rem; }
.tfacts { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; } .tfacts > div { background: var(--foam); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 16px; min-width: 150px; flex: 1; }
.tfacts dt { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .tfacts dd { margin: 2px 0 0; font-family: var(--head); font-weight: 500; font-size: 1.08rem; color: var(--ink); }
.tnote { margin: 12px 0 0; color: var(--muted); font-weight: 700; }
.tchamp { margin-top: 26px; background: linear-gradient(135deg, #241a5e, #0d1440); border: 2px solid var(--sun); border-radius: 22px; padding: 22px 26px; color: #fff; box-shadow: 0 0 50px rgba(255, 201, 60, .18); }
.tchamp ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; } .tchamp li { display: flex; gap: 10px; align-items: center; font-family: var(--head); font-size: 1.15rem; } .tchamp li:first-child { font-size: 1.7rem; flex-basis: 100%; } .tchamp li span { font-family: var(--pixel); font-size: .9em; color: var(--sun); }
.thead { color: #fff; font-size: 1.5rem; margin: 38px 0 14px; }
.tpools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.tboard { background: #0d1440; border: 2px solid #2a3a8c; border-radius: 22px; overflow: hidden; color: #fff; }
.ttable { width: 100%; border-collapse: collapse; font-size: .96rem; } .ttable th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #7f93d6; padding: 10px 8px; text-align: center; } .ttable th:nth-child(2), .ttable td:nth-child(2) { text-align: left; }
.ttable td { padding: 9px 8px; text-align: center; border-top: 1px solid #1e2b70; } .ttable .rk { font-family: var(--pixel); color: #7f93d6; width: 44px; } .ttable tbody tr:first-child .rk { color: var(--sun); } .ttable .tag { font-family: var(--head); font-weight: 500; font-size: 1.05rem; }
.tgames { list-style: none; margin: 0; padding: 10px 14px 14px; display: grid; gap: 6px; border-top: 2px solid #2a3a8c; background: rgba(255, 255, 255, .03); }
.tgames li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: .92rem; color: #9db0e8; } .tgames li span:last-child { text-align: right; } .tgames li b { font-family: var(--pixel); font-size: .82rem; color: #7f93d6; } .tgames li.done b { color: var(--aqua-2); } .tgames .won { color: #fff; font-weight: 800; }
.tbracket { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 10px; align-items: stretch; }
.tround { flex: 0 0 220px; display: flex; flex-direction: column; } .tround h4, .tthird h4 { color: #9db0e8; font-family: var(--pixel); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.tcol { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.tm { background: #151f5c; border: 1px solid #2a3a8c; border-radius: 12px; overflow: hidden; } .tm.bye { opacity: .55; } .tm small { display: block; padding: 4px 12px 0; color: #7f93d6; font-size: .72rem; font-weight: 800; }
.tm-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; color: #c9d6ff; font-family: var(--head); font-weight: 500; } .tm-row + .tm-row { border-top: 1px solid #2a3a8c; }
.tm-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-row b { font-family: var(--pixel); font-size: .9rem; color: #9db0e8; }
.tm-row.won { background: rgba(47, 214, 163, .16); color: #fff; } .tm-row.won b { color: var(--sea); } .tm-row.lost { color: #6f82c4; }
.tthird { margin-top: 20px; max-width: 220px; }
.tpanel { background: #151f5c; border: 1px solid #2a3a8c; border-radius: var(--r); padding: 22px; color: #dbe6ff; } .tpanel h3 { color: #fff; display: flex; gap: 10px; align-items: center; }
.tplayers { margin: 0; padding-left: 26px; columns: 2; column-gap: 26px; font-family: var(--head); font-weight: 500; } .tplayers li { padding: 3px 0; break-inside: avoid; } .tplayers li::marker { color: #7f93d6; font-family: var(--pixel); font-size: .78rem; }
.trules { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .tsub { color: #9db0e8; margin: 10px 0 0; font-size: .95rem; }
.tpromo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #7b4dd6, #ec1380); color: #fff; border-radius: var(--r); padding: 16px 22px; text-decoration: none; margin-bottom: 30px; box-shadow: var(--shadow); }
.tpromo .e { font-size: 2.2rem; line-height: 1; } .tpromo > span:nth-child(2) { flex: 1; min-width: 200px; } .tpromo b { display: block; font-family: var(--head); font-size: 1.2rem; } .tpromo .t { font-size: .95rem; opacity: .95; }
@media (max-width: 640px) { .tplayers { columns: 1; } .tround { flex-basis: 190px; } }

/* ---------- the shop ---------- */
.shop-cats { margin-bottom: 18px; }
/* As many 200px-or-wider cards as fit in a row, all the same size; a row that is not full sits centered. */
.shop-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; container-type: inline-size; } .shop-grid > * { flex: 0 0 100%; min-width: 0; }
@container (min-width: 416px) { .shop-grid > * { flex-basis: calc((100% - 16px) / 2); } }
@container (min-width: 632px) { .shop-grid > * { flex-basis: calc((100% - 32px) / 3); } }
@container (min-width: 848px) { .shop-grid > * { flex-basis: calc((100% - 48px) / 4); } }
@container (min-width: 1064px) { .shop-grid > * { flex-basis: calc((100% - 64px) / 5); } }
@container (min-width: 1280px) { .shop-grid > * { flex-basis: calc((100% - 80px) / 6); } }
.shop-grid > p { flex-basis: 100% !important; }
.prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; text-align: left; padding: 0; transition: transform .12s, box-shadow .15s, border-color .15s; }
.prod:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--pink); } .prod.out { opacity: .6; cursor: not-allowed; }
.prod-pic { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); display: block; } .prod-pic.ph { display: grid; place-items: center; font-size: 4rem; }
.prod-body { padding: 14px 16px 16px; display: grid; gap: 4px; justify-items: start; } .prod-body b { font-family: var(--head); font-weight: 600; font-size: 1.1rem; color: var(--ink); } .prod-body .price { font-weight: 800; color: var(--pink-ink); }
/* ---------- the card payment pop-up (js/pay.js) ---------- */
.pay-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--foam); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; }
.pay-sum b { font-family: var(--head); font-size: 1.5rem; color: var(--ink); } .pay-card { min-height: 120px; } .pay-wait { color: var(--muted); display: flex; gap: 10px; align-items: center; }