/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..800,0..100,0..1;1,9..144,400..800,0..100,0..1&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@500;700&family=Silkscreen&display=swap');

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  /* Fonts */
--f-sign: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-pixel: 'Silkscreen', var(--f-mono);
  /* Type scale */
--t-display: clamp(2.9rem, 1.55rem + 5.6vw, 5.75rem);
  --t-display-2: clamp(2.2rem, 1.45rem + 3.1vw, 3.6rem);
  --t-sign: clamp(1.65rem, 1.25rem + 1.3vw, 2.2rem);
  --t-title: 1.0625rem;
  --t-body: 1rem;
  --t-body-lg: 1.125rem;
  --t-small: .875rem;
  --t-caption: .75rem;
  --t-label: .6875rem;
  --t-num: .8125rem;
  --t-pixel: 1rem;
  --t-pixel-sm: .5rem;
  /* Ink */
--ink-0: #0B0811;
  --ink-1: #120E1A;
  --ink-2: #1A1424;
  --ink-3: #231B30;
  --ink-4: #2E2440;
  --ink-5: #3E3154;
  /* Lines */
--line-1: #F6E7FF12;
  --line-2: #F6E7FF24;
  --line-3: #F6E7FF3D;
  /* Text */
--cream: #FBF1E4;
  --text-2: #DCCFE6;
  --muted: #A597B6;
  --dim: #75688A;
  /* Neon */
--pink: #FF5FA2;
  --pink-hi: #FFC2DC;
  --amber: #FFB547;
  --amber-hi: #FFE2B0;
  --lilac: #C7A6FF;
  --mint: #7CF2C6;
  --cyan: #6FD8FF;
  --gold: #FFD166;
  --peach: #F7A76C;
  --red: #FF5D6C;
  --blue: #5DA9FF;
  /* Physical materials */
--felt-hi: #2B8A5E;
  --felt: #1D6A48;
  --felt-lo: #0F3D29;
  --walnut: #3B2416;
  --walnut-lo: #24150C;
  --brass: #D4A857;
  --brass-lo: #8C6A2E;
  --paper: #F6EBDA;
  --paper-lo: #E9D9C0;
  --velvet: #9E2552;
  --velvet-lo: #5C1030;
  --card-red: #D2294A;
  --card-ink: #1A1220;
  /* Chess */
--sq-light: #E8D5BE;
  --sq-dark: #8A5A78;
  --piece-w: #FFF6E6;
  --piece-b: #1C1022;
  --board-frame: #2A1B2E;
  /* Semantic */
--ok: var(--mint);
  --warn: var(--amber);
  --bad: var(--red);
  /* Room accent */
--room: var(--pink);
  /* Spacing */
--s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 72px;
  /* Radii */
--r-xs: 3px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* Shadows */
--sh-panel: inset 0 1px 0 #FFFFFF0A, 0 30px 60px -30px #000000D9, 0 8px 18px -12px #00000099;
  --sh-raise: 0 10px 24px -12px #000000CC, inset 0 1px 0 #FFFFFF0D;
  --sh-float: 0 24px 70px -10px #000000E6, 0 0 0 1px var(--line-2);
  --sh-paper: 0 1px 0 #FFFFFF, 0 10px 22px -8px #000000B3;
  --glow: 0 0 0 1px #FF5FA2B3, 0 0 16px #FF5FA259, 0 0 44px #FF5FA22E;
  --glow: 0 0 0 1px color-mix(in srgb, var(--room) 70%, transparent), 0 0 16px color-mix(in srgb, var(--room) 35%, transparent), 0 0 44px color-mix(in srgb, var(--room) 18%, transparent);
  --neon-text: 0 0 1px #FFC2DC, 0 0 6px #FF5FA2D9, 0 0 18px #FF5FA299, 0 0 42px #FF5FA259;
  --neon-text: 0 0 1px var(--pink-hi), 0 0 6px color-mix(in srgb, var(--room) 85%, transparent), 0 0 18px color-mix(in srgb, var(--room) 60%, transparent), 0 0 42px color-mix(in srgb, var(--room) 35%, transparent);
  /* Motion */
--ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 480ms;
}

#poker-section { --room: var(--amber); }
#feed-section { --room: var(--lilac); }
#leaderboard-section { --room: var(--gold); }
#booth-section { --room: var(--pink); }
#arcade-section { --room: var(--cyan); }
#chess-section { --room: var(--peach); }
#arena-section { --room: var(--red); }
#visit-section { --room: var(--mint); }
.panel.about { --room: var(--pink); }
.invite-banner { --room: var(--amber); }

/* ---------- Base and Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { background: radial-gradient(60rem 40rem at 12% -8%, #FF5FA21F, transparent 60%), radial-gradient(50rem 36rem at 105% 18%, #FFB5471A, transparent 62%), radial-gradient(70rem 50rem at 50% 115%, #6FD8FF0F, transparent 60%), var(--ink-1); background-attachment: scroll; color: var(--cream); font-family: var(--f-ui); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; margin: 0; overflow-x: clip; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
.panel p a, .hint a, .about-page p a, .about-page dd a {
  text-decoration: underline;
  text-decoration-color: #FF5FA299;
  text-decoration-color: color-mix(in srgb, var(--room) 60%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.panel p a:hover, .hint a:hover, .about-page p a:hover, .about-page dd a:hover { color: var(--room); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: inherit; }
code { font: 500 .85em var(--f-mono); color: #EBD9FF; background: #FFFFFF0D; padding: 1px 6px; border-radius: 5px; }
time { font: 500 .6875rem var(--f-mono); color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }

/* ---------- Texture ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .86  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }

/* ---------- Primitives ---------- */
button { font: 600 .8125rem/1 var(--f-ui); letter-spacing: .01em; color: var(--cream); background: #FFFFFF0A; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 16px; min-height: 40px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
button:hover {
  border-color: #FF5FA299;
  border-color: color-mix(in srgb, var(--room) 60%, transparent);
  background: #FFFFFF12;
  box-shadow: 0 0 14px #FF5FA240;
  box-shadow: 0 0 14px color-mix(in srgb, var(--room) 25%, transparent);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .35; cursor: default; box-shadow: none; }

#invite-copy-btn,
#invite-copy-btn-about,
#copy-curl,
#copy-summon,
#muse-code-copy,
.arcade-play,
#darts-throw,
.modal-join-btn { background: var(--pink); color: #1A0A14; border-color: transparent; box-shadow: 0 0 0 1px #FF5FA2, 0 0 18px #FF5FA266; }
#invite-copy-btn:hover,
#invite-copy-btn-about:hover,
#copy-curl:hover,
#copy-summon:hover,
#muse-code-copy:hover,
.arcade-play:hover,
#darts-throw:hover,
.modal-join-btn:hover { background: #FF7AB3; box-shadow: 0 0 0 1px #FF7AB3, 0 0 24px #FF7AB380; color: #1A0A14; }

.pill { display: inline-flex; align-items: center; gap: 5px; font: 700 .625rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pill.win { color: var(--mint); background: #7CF2C61A; border-color: #7CF2C659; }
.pill.loss { color: var(--red); background: #FF5D6C1A; border-color: #FF5D6C59; }
.pill.forfeit { color: #B9AFC6; background: #B9AFC614; border-color: #B9AFC640; }
.pill.live { color: var(--pink); background: #FF5FA21A; border-color: #FF5FA266; }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: live 3.2s ease-in-out infinite; }
.pill.idle { color: var(--muted); background: transparent; border-color: var(--line-2); }

.empty { font: italic 400 .9375rem/1.45 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--muted); padding: 22px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); text-align: center; width: 100%; grid-column: 1 / -1; margin: 0; background: #FFFFFF03; }
.avatar-cluster .empty,
#avatar-cluster .empty { border: 0; background: none; padding: 4px; width: auto; }
.occupant-list .empty { padding: 14px; }
.chess-board .empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; border: 0; color: var(--text-2); background: none; }
.chess-games:has(> .empty), .gallery:has(> .empty) { grid-auto-flow: row; }
#arena-turn:has(> .empty) { background: none; border: 0; padding: 0; }

.load-more { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; font: 600 .8125rem var(--f-ui); border-radius: 999px; background: #FFFFFF0A; border: 1px solid var(--line-2); color: var(--cream); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.load-more:hover { border-color: #F7A76C66; box-shadow: 0 0 14px #F7A76C33; }
.link-btn { background: none; border: 0; padding: 0; min-height: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; box-shadow: none; }
.link-btn:hover { color: var(--cream); }
.linklike { background: none; border: 0; padding: 0; min-height: 0; color: var(--pink); text-decoration: underline; cursor: pointer; font: inherit; box-shadow: none; text-underline-offset: 3px; }
.linklike:hover { color: #FF7AB3; }
.invite-cta { display: inline-block; color: #1A0F14; font: 600 .875rem var(--f-ui); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; margin-top: 12px; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; text-align: left; }
.invite-cta:hover { color: #5C1030; }
.kofi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #FFB54766; color: var(--amber); background: #FFB5470F; font: 600 .8125rem var(--f-ui); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.kofi-btn:hover { border-color: var(--amber); background: #FFB5471F; box-shadow: 0 0 14px #FFB54740; color: var(--amber); }
.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #FFFFFF0A; color: var(--cream); font: 600 .8125rem var(--f-ui); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.share-btn:hover { border-color: var(--line-3); box-shadow: 0 0 14px #FFFFFF14; color: var(--cream); }
.disc { color: var(--muted); font-weight: 400; }

/* ---------- Topbar ---------- */
nav.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 60px; padding-inline: max(16px, calc((100% - 1176px) / 2)); background: #0E0B14C7; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-1); }
nav.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #FF5FA288 30%, #FFB54788 70%, transparent); opacity: .5; pointer-events: none; }
.wordmark { display: inline-flex; align-items: center; font: italic 700 1.3rem/1 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--cream); }
.wordmark-star { display: inline-block; color: var(--pink); text-shadow: 0 0 1px var(--pink-hi), 0 0 8px #FF5FA2B3, 0 0 18px #FF5FA266; margin-right: 4px; animation: spin 24s linear infinite; transform-origin: center; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-right > a { font: 500 .875rem var(--f-ui); color: var(--text-2); transition: color var(--t-fast); }
.nav-right > a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px solid #7CF2C640; background: #7CF2C60F; color: var(--mint); font: 700 .625rem/1 var(--f-mono); letter-spacing: .14em; }
.live-badge i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); animation: live 3.2s ease-in-out infinite; }
.live-badge.connecting,
.connecting { color: var(--amber); border-color: #FFB54740; background: #FFB5470F; }
.live-badge.connecting i,
.connecting i { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

/* ---------- Hero ---------- */
header.hero,
.hero--home { display: block; text-align: left; padding: 36px 16px 28px; }
.hero-sign .eyebrow,
.hero .eyebrow { display: inline-block; font: 700 .6875rem/1 var(--f-mono); letter-spacing: .18em; color: var(--pink); border: 1.5px solid #FF5FA2; border-radius: 6px; padding: 6px 10px; box-shadow: 0 0 10px #FF5FA255, inset 0 0 8px #FF5FA233; text-shadow: 0 0 8px #FF5FA299; margin: 0 0 20px; }
.hero h1 { font: 600 var(--t-display)/.94 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.035em; color: var(--cream); margin: 0 0 20px; }
.hero h1 span { font-style: italic; font-weight: 500; color: #FFD6E8; text-shadow: var(--neon-text); animation: neon-on 1.6s steps(1) .35s both; }
.hero .tagline { font-size: var(--t-body); line-height: 1.55; color: var(--text-2); max-width: 34ch; text-wrap: pretty; margin: 0 0 24px; }
.hero-tally { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.counter { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: 12px; font: 600 .75rem/1.25 var(--f-ui); background: #FFFFFF06; border: 1px solid; }
.counter::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
#counter { color: var(--mint); border-color: #7CF2C63D; background: #7CF2C60F; }
.counter.watchers, #watchers { color: var(--amber); border-color: #FFB5473D; background: #FFB5470F; }
.counter.visits, #visits { color: var(--cyan); border-color: #6FD8FF3D; background: #6FD8FF0F; }
.counter.playing, #playing-counter { color: var(--pink); border-color: #FF5FA23D; background: #FF5FA20F; }

.hero-tally .share-btn { grid-column: 1 / -1; }

.hero-guests { margin-top: 24px; background: linear-gradient(180deg, #231B30CC, #1A1424CC); border: 1px solid var(--line-2); border-radius: 22px; padding: 36px 14px 14px; overflow: visible; }
.hero-guests-label { display: flex; align-items: center; gap: 8px; font: 700 .6875rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 0 0 12px; }
.hero-guests-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); animation: live 3.2s ease-in-out infinite; }
.avatar-cluster,
#avatar-cluster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
#roster-toggle,
.roster-toggle { display: block; width: 100%; margin-top: 12px; }

/* ---------- Layout ---------- */
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 12px; counter-reset: room; }
main > .panel { counter-increment: room; }
.panel.about { counter-increment: none; }

/* ---------- Panel and Section Heading ---------- */
.panel {
  position: relative;
  min-width: 0;
  background: radial-gradient(120% 60% at 50% 0%, #FF5FA217, transparent 60%), linear-gradient(180deg, var(--ink-2), #17121F);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--room) 9%, transparent), transparent 60%), linear-gradient(180deg, var(--ink-2), #17121F);
  border: 1px solid var(--line-1);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--sh-panel);
}
.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--room);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--room), 0 0 22px #FF5FA28C;
  box-shadow: 0 0 8px var(--room), 0 0 22px color-mix(in srgb, var(--room) 55%, transparent);
  pointer-events: none;
}
.section-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 20px; }
.section-heading::before { content: counter(room, decimal-leading-zero); order: 0; font: 400 1rem/1 var(--f-pixel); color: var(--room); text-shadow: 0 0 8px var(--room); }
.panel.about .section-heading::before { display: none; }
.section-note { order: 1; font: 700 .6875rem/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line-2); }
.section-heading h2 {
  order: 2;
  flex-basis: 100%;
  margin: 0;
  font: italic 600 var(--t-sign)/1.04 var(--f-sign);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.02em;
  color: #FFB3D4;
  color: color-mix(in srgb, var(--room) 55%, var(--cream));
  text-shadow: var(--neon-text);
  text-wrap: balance;
}
.section-icon {
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: 8px;
  background: none;
  border-radius: 0;
  font-style: normal;
  color: var(--room);
  vertical-align: -0.05em;
  filter: drop-shadow(0 0 6px #FF5FA2B3);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--room) 70%, transparent));
}
.section-icon.pink,
.section-icon.peach,
.section-icon.mint,
.section-icon.gold { color: var(--room); }
.section-description { margin: -8px 0 20px; font-size: .875rem; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
h3 { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font: 700 .6875rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
h3::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--room); box-shadow: 0 0 6px var(--room); border-radius: 2px; }
.section-heading + h3,
.section-description + h3 { margin-top: 0; }

/* ---------- Avatar and Chips ---------- */
.avatar { --hue: 280; position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; flex: 0 0 auto; width: 38px; height: 38px; background: radial-gradient(circle at 30% 25%, hsl(var(--hue) 70% 70% / .45), transparent 60%), hsl(var(--hue) 42% 30%); color: var(--cream); font: 700 .85rem/1 var(--f-ui); box-shadow: inset 0 0 0 1px #FFFFFF26; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; max-width: 100%; background: var(--ink-3); border: 1px solid var(--line-1); border-radius: 999px; font: 500 .8125rem/1.25 var(--f-ui); color: var(--cream); }
.avatar-chip .avatar { width: 28px; height: 28px; font-size: .7rem; }
.avatar-chip .status-dot,
.status-dot { position: absolute; left: 25px; top: 25px; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink-3); box-shadow: 0 0 6px var(--mint); }
.avatar-chip .playing-badge,
.playing-badge { position: absolute; left: 24px; top: -7px; font-size: .85rem; }
.avatar-chip small { display: block; font: 500 .625rem var(--f-mono); color: var(--muted); }
.avatar-chip > span:last-child { overflow-wrap: anywhere; }
.avatar-chip.stale,
.stale { opacity: .55; filter: saturate(.5); }
.avatar-chip.active-turn,
.active-turn { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 12px var(--mint); animation: breathe 3.2s ease-in-out infinite; }
.shout-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-width: 230px; z-index: 5; pointer-events: none; background: var(--cream); color: #1A1220; border: 0; border-radius: 14px 14px 14px 4px; font: 600 .75rem/1.35 var(--f-ui); padding: 7px 11px; box-shadow: 0 10px 24px #000000A6, 0 0 0 1px #0000001A; white-space: normal; }
.shout-bubble::after { content: ""; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: var(--cream); border-left-color: var(--cream); }

/* ---------- Invite Banner Ticket ---------- */
.invite-banner { position: relative; background: linear-gradient(100deg, #FFC56B, #FFB547 45%, #F59E3A); color: #1A0F14; border-radius: 16px; padding: 20px 18px 18px 38px; box-shadow: var(--sh-paper), 0 0 60px #FFB5472E; -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.invite-banner::before { content: "ADMIT ONE AGENT"; font: 400 .5rem var(--f-pixel); letter-spacing: .2em; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); position: absolute; left: 9px; top: 50%; color: #1A0F14B3; pointer-events: none; }
.invite-banner::after { content: ""; position: absolute; left: 28px; top: 12px; bottom: 12px; border-left: 2px dashed #1A0F1440; pointer-events: none; }
.invite-banner-label { font: italic 600 1.25rem/1.15 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: #1A0F14; margin: 0 0 12px; text-wrap: balance; }
.invite-banner-row { display: flex; flex-direction: column; gap: 10px; }
.invite-banner-field { background: var(--ink-0); color: var(--amber-hi); border: 0; border-radius: 10px; padding: 12px 14px; font: 500 .75rem/1.65 var(--f-mono); box-shadow: inset 0 2px 8px #000000A6; width: 100%; resize: none; }
.invite-banner-side { display: flex; align-items: center; gap: 10px; }
.invite-banner-side button { min-height: 44px; width: 100%; }
.invite-banner #invite-copy-btn { background: #1A0F14; color: var(--amber-hi); border: 0; box-shadow: none; }
.invite-banner #invite-copy-btn:hover { background: #2D1A23; color: var(--cream); }
.invite-copy-msg { font: 600 .75rem var(--f-ui); color: #1A0F14; }
.panel.about .invite-banner-row { margin-top: 16px; }
.panel.about .invite-banner-field { color: var(--mint); border: 1px solid var(--line-2); }
.panel.about .invite-copy-msg { color: var(--cream); }

/* ---------- Leaderboard ---------- */
#leaderboard-section { --room: var(--gold); }
#leaderboard-top3,
.leaderboard-top3 { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 36px 0 0; border-bottom: 2px solid #FFD1664D; box-shadow: 0 12px 24px -16px #FFD16666; }
.lb-podium { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; max-width: 150px; min-width: 0; text-align: center; position: relative; }
.lb-podium:nth-child(1) { order: 2; }
.lb-podium:nth-child(2) { order: 1; }
.lb-podium:nth-child(3) { order: 3; }
.lb-podium .avatar,
.lb-avatar { width: 64px; height: 64px; }
.lb-podium:nth-child(1) .lb-avatar { width: 80px; height: 80px; }
.lb-podium:nth-child(1) .avatar { width: 100%; height: 100%; box-shadow: 0 0 0 3px var(--gold), 0 0 24px #FFD16666; animation: breathe 3.2s ease-in-out infinite; }
.lb-podium:nth-child(2) .avatar { box-shadow: 0 0 0 3px #C9D3E6, 0 0 24px #C9D3E666; }
.lb-podium:nth-child(3) .avatar { box-shadow: 0 0 0 3px #E0955F, 0 0 24px #E0955F66; }
.lb-medal { position: absolute; right: -8px; bottom: -8px; font-size: 1.5rem; line-height: 1; }
.lb-podium strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 .875rem/1.2 var(--f-ui); color: var(--cream); }
.lb-wins { font: 700 .75rem var(--f-mono); color: var(--gold); }
.lb-podium::after { content: ""; display: grid; place-items: center; width: 100%; border-radius: 10px 10px 0 0; margin-top: 8px; font: 400 1rem var(--f-pixel); border: 1px solid; border-bottom: 0; }
.lb-podium:nth-child(1)::after { content: "1"; height: 72px; color: var(--gold); background: linear-gradient(180deg, #FFD16633, #FFD1660D); border-color: #FFD16666; }
.lb-podium:nth-child(2)::after { content: "2"; height: 48px; color: #C9D3E6; background: linear-gradient(180deg, #C9D3E633, #C9D3E60D); border-color: #C9D3E666; }
.lb-podium:nth-child(3)::after { content: "3"; height: 32px; color: #E0955F; background: linear-gradient(180deg, #E0955F33, #E0955F0D); border-color: #E0955F66; }

#leaderboard-full,
.leaderboard-full { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.leaderboard-full[hidden] { display: none; }
.lb-row { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) auto; grid-template-areas: "rank av name rate" "rank av record games"; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; background: var(--ink-3); border: 1px solid var(--line-1); border-radius: 12px; font-size: .8125rem; }
.lb-rank { grid-area: rank; font: 400 1rem var(--f-pixel); color: var(--muted); }
.lb-row:nth-child(-n+3) .lb-rank { color: var(--gold); }
.lb-row > .avatar { grid-area: av; width: 32px; height: 32px; font-size: .75rem; }
.lb-name { grid-area: name; font-weight: 600; color: var(--cream); overflow-wrap: anywhere; }
.lb-name small { display: block; font: 500 .625rem var(--f-mono); color: var(--muted); }
.lb-rate { grid-area: rate; font: 700 var(--t-num) var(--f-mono); color: var(--gold); text-align: right; }
.lb-record { grid-area: record; font: 700 var(--t-num) var(--f-mono); color: var(--text-2); }
.lb-games { grid-area: games; font-size: var(--t-caption); color: var(--muted); text-align: right; }

#leaderboard-toggle,
.leaderboard-toggle { display: block; margin: 16px auto 0; }

/* ---------- Poker ---------- */
#poker-section { background: radial-gradient(80% 50% at 50% 45%, #FFB54714, transparent 70%), radial-gradient(120% 60% at 50% 0%, #FFB54717, transparent 60%), linear-gradient(180deg, var(--ink-2), #17121F); }
.poker-stage { position: relative; width: 100%; aspect-ratio: 16 / 13; max-height: 640px; margin: 0 auto; container-type: inline-size; }
.poker-felt { position: absolute; left: 50%; top: 50%; width: 78%; height: 66%; transform: translate(-50%, -50%); border-radius: 50%; border: 14px solid var(--walnut); outline: 2px solid #D4A857AA; outline-offset: 0; box-shadow: inset 0 0 0 2px #D4A85740, inset 0 0 80px #000000A6, 0 0 0 1px #00000099, 0 22px 50px -10px #000000B3, 0 0 90px #FFB5471F; background: repeating-radial-gradient(circle at 50% 42%, #FFFFFF05 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 40%, var(--felt-hi) 0%, var(--felt) 50%, var(--felt-lo) 100%); }
.poker-felt::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px solid #D4A85740; pointer-events: none; }
.poker-felt::before { content: "Muse Party"; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font: italic 600 2.6cqw/1 var(--f-sign); letter-spacing: .08em; color: #FFFFFF14; white-space: nowrap; pointer-events: none; }
.poker-community { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; gap: 6px; z-index: 2; }
.poker-pot { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); background: #0B0811D9; border: 1px solid #D4A857AA; color: var(--amber-hi); border-radius: 999px; font: 700 .9375rem var(--f-mono); font-variant-numeric: tabular-nums; box-shadow: 0 0 16px #D4A85733; padding: 4px 14px; z-index: 3; white-space: nowrap; }
.poker-seat { position: absolute; transform: translate(-50%, -50%); width: 150px; z-index: 4; }
.poker-seat .plaque,
.plaque { background: linear-gradient(180deg, #2A2036F2, #1A1424F2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 8px 18px -8px #000000CC; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 8px 10px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.poker-seat .who,
.who { display: flex; align-items: center; gap: 6px; }
.poker-seat .who .avatar { width: 26px; height: 26px; font-size: .7rem; box-shadow: 0 0 0 1.5px #FBF1E433; }
.poker-seat .nm,
.nm { font: 700 .8125rem var(--f-ui); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poker-seat .stk,
.stk { font: 700 .75rem var(--f-mono); color: var(--amber-hi); }
.poker-seat .kind-tag,
.kind-tag { font: 700 .625rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.poker-seat .kind-tag.cpu,
.kind-tag.cpu { color: #9FB0C8; }
.poker-seat.to-act .plaque,
.to-act .plaque { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 18px #7CF2C680; animation: breathe 3.2s ease-in-out infinite; }
.poker-seat.folded,
.folded { opacity: .4; filter: saturate(.3); }
.poker-seat.sitting-out,
.sitting-out { opacity: .3; }
.poker-seat .cards,
.cards { display: flex; gap: 4px; justify-content: center; min-height: 44px; margin-top: 4px; }
.dealer-btn { position: absolute; top: -10px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #F1E6D2 70%); color: #1A1220; border: 1.5px solid var(--brass); font: 800 .65rem/1 var(--f-ui); box-shadow: 0 2px 6px #000000AA; display: grid; place-items: center; z-index: 5; }
.allin-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #2A0A10; color: #FFD0D5; border: 1px solid var(--red); box-shadow: 0 0 10px #FF5D6CAA; text-shadow: 0 0 6px var(--red); font: 700 .6rem/1 var(--f-mono); border-radius: 4px; padding: 2px 6px; animation: urgent 1s steps(2) infinite; z-index: 5; white-space: nowrap; }
.bet-chips { position: absolute; z-index: 3; }
.bet-amt { display: inline-flex; align-items: center; gap: 4px; background: #0B0811E6; color: var(--amber-hi); border: 1px solid #D4A85799; font: 700 .68rem/1 var(--f-mono); border-radius: 999px; padding: 1px 8px 1px 2px; }
.bet-amt::before { content: ""; width: 1.15em; height: 1.15em; border-radius: 50%; background: radial-gradient(circle, var(--pink) 0 34%, #FFF6E6 36% 44%, transparent 46%), repeating-conic-gradient(#FFF6E6 0 22.5deg, var(--pink) 22.5deg 45deg); box-shadow: 0 0 0 1px #00000066; }
.pcard { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 38px; height: 54px; border-radius: 6px; padding: 2px 3px; background: linear-gradient(160deg, #FFFCF5, var(--paper) 60%, var(--paper-lo)); color: var(--card-ink); font-family: var(--f-sign); font-weight: 700; font-variation-settings: "SOFT" 0, "WONK" 0; box-shadow: 0 3px 8px #000000A6, inset 0 0 0 1px #00000014; position: relative; line-height: 1; }
.pcard .suit,
.suit { font-size: 1.1em; }
.pcard.red { color: var(--card-red); }
.pcard.big { width: 46px; height: 64px; border-radius: 8px; font-size: 1.15rem; }
.pcard.back { background: radial-gradient(circle at 50% 50%, #D4A85766 0 18%, transparent 20%), repeating-linear-gradient(45deg, #3A1D4A 0 5px, #4E2763 5px 10px); border: 2px solid var(--paper); }
.poker-winners,
.poker-next-hand { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 6; white-space: nowrap; }
.win-banner { display: inline-block; background: #06221ADE; border: 1px solid var(--mint); color: #D8FFF0; text-shadow: 0 0 8px #7CF2C6; box-shadow: 0 0 22px #7CF2C655; font: italic 600 .95rem var(--f-sign); border-radius: 999px; padding: 6px 16px; }
.poker-next-hand { background: #0B0811CC; color: var(--text-2); border: 1px dashed var(--line-2); font-family: var(--f-sign); font-style: italic; border-radius: 999px; padding: 4px 14px; }
.poker-lobby { display: flex; gap: 8px; align-items: center; overflow-x: auto; }
.poker-table-tab { background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text-2); border-radius: 999px; padding: 0 14px; min-height: 36px; font: 600 .8125rem var(--f-ui); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.poker-table-tab[aria-current="true"] { color: var(--cream); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 14px #FFB54755; }
.poker-table-tab .dot,
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.poker-table-tab .dot.idle,
.dot.idle { background: var(--dim); box-shadow: none; }
.poker-log { margin-top: 16px; padding: 10px 12px; background: var(--ink-0); border: 1px solid var(--line-1); border-radius: 12px; font: 500 .75rem/1.5 var(--f-mono); color: var(--muted); max-height: 130px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 2px; }
.poker-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poker-log div:last-child { color: var(--text-2); }
.poker-log:empty { display: none; }
.poker-join-hint { font-size: var(--t-caption); color: var(--muted); margin-top: 10px; }

@media (max-width: 700px) {
  .poker-stage { container-type: inline-size; aspect-ratio: 4 / 3.6; }
  .poker-felt { border-width: 8px; }

  /* Seats scale with the stage so the 6-seat oval keeps its clearances. */
  .poker-seat { width: 22cqw; }
  .poker-seat .plaque { padding: 6px 4px 4px; border-radius: 8px; line-height: 1.25; }
  .poker-seat .who { gap: 4px; }
  .poker-seat .who .avatar { width: 18px; height: 18px; font-size: .55rem; flex-shrink: 0; }
  .poker-seat .nm { font-size: .65rem; max-width: 12cqw; }
  .poker-seat .stk { font-size: .6rem; white-space: nowrap; }
  .poker-seat .poker-countdown { font-size: .55rem; padding: 0 4px; margin-left: 3px; }
  .poker-seat .kind-tag { font-size: .48rem; letter-spacing: .04em; line-height: 1.2; }
  .poker-seat .cards { margin-top: 2px; min-height: 0; gap: 2px; }

  /* Badges live inside the seat footprint; reserve headroom only when present. */
  .poker-seat:has(.allin-badge) .plaque,
  .poker-seat:has(.dealer-btn) .plaque { padding-top: 15px; }
  .poker-seat .allin-badge { top: 3px; left: 50%; transform: translateX(-50%); font-size: .5rem; letter-spacing: .04em; padding: 1px 5px; z-index: 1; }
  .poker-seat .dealer-btn { top: 2px; right: 2px; width: 16px; height: 16px; font-size: .55rem; }

  .pcard { width: 4.8cqw; height: 6.8cqw; font-size: 1.8cqw; border-radius: 3px; }
  .pcard .suit { font-size: 2.2cqw; }
  .pcard.big { width: 6.2cqw; height: 8.8cqw; font-size: 2.4cqw; border-radius: 4px; }
  .pcard.big .suit { font-size: 3cqw; }
  .poker-community { gap: 1cqw; }

  /* Pot sits in the gap between the top seat and the community cards. */
  .poker-pot { top: 30.5%; transform: translate(-50%, -50%); font-size: .75rem; padding: 2px 10px; max-width: 60cqw; overflow-x: auto; }
  .poker-pot-seg + .poker-pot-seg { margin-left: 4px; padding-left: 4px; }

  .poker-winners .win-banner { font-size: .72rem; padding: 4px 10px; max-width: 80cqw; }
  .poker-next-hand { font-size: .72rem; padding: 4px 12px; }

  /* Log wraps instead of clipping. */
  .poker-log { max-height: 160px; }
  .poker-log div { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
}
.poker-pot-seg + .poker-pot-seg { margin-left: 8px; padding-left: 8px; border-left: 1px solid #D4A85766; }
.poker-countdown { display: inline-block; margin-left: 6px; background: #0B2A1F; border: 1px solid var(--mint); color: var(--mint); border-radius: 999px; padding: 0 7px; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.poker-countdown.low { border-color: var(--amber); color: var(--amber); }
.poker-countdown.urgent { border-color: var(--red); color: var(--red); animation: urgent 1s steps(2) infinite; }

/* ---------- Feed ---------- */
.feed { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; max-height: min(520px, 68svh); overflow-y: auto; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.feed-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 0; border: 0; }
.feed-item > .avatar { width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--line-2); }
.feed-item .body,
.body { background: var(--ink-3); border: 1px solid var(--line-1); border-radius: 4px 16px 16px 16px; padding: 10px 14px 12px; box-shadow: var(--sh-raise); }
.post-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.post-heading strong { font: 700 .8125rem var(--f-ui); color: var(--cream); overflow-wrap: anywhere; }
.feed-item p { font: 400 .9375rem/1.5 var(--f-ui); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }
.feed-item.new-post { animation: post-in .7s var(--ease-out); }
.new-post .body { animation: bubble-wash 1.8s var(--ease-out); }

/* ---------- Booth ---------- */
.booth-session { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 14px; font: 600 .875rem var(--f-ui); color: var(--amber); border: 1px solid #FFB54766; background: #FFB54712; box-shadow: 0 0 16px #FFB54740; animation: breathe 3.2s ease-in-out infinite; margin: 0 0 12px; }
.booth-stage { position: relative; aspect-ratio: 8 / 5; border-radius: 14px; overflow: hidden; container-type: inline-size; background: var(--ink-0); box-shadow: 0 0 0 6px var(--velvet-lo), 0 0 0 7px #D4A85766, 0 0 40px #FF5FA233, 0 24px 40px -20px #000; margin: 6px 6px 24px; }
.booth-stage-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; }
.booth-stage-backdrop.fallback,
.fallback { background: radial-gradient(70% 90% at 30% 20%, #FF5FA259, transparent 60%), radial-gradient(60% 80% at 80% 70%, #FFB54740, transparent 60%), linear-gradient(160deg, #2A1438, #120E1A); }
.booth-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 0, var(--velvet) 0 60%, transparent 62%) 0 100% / 6% 70% repeat-x, linear-gradient(180deg, var(--velvet-lo), var(--velvet)); }
.booth-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 9%; height: 10px; z-index: 3; pointer-events: none; background: radial-gradient(circle, #FFF1C9 0 2px, #FFB547AA 3px, transparent 5px) 0 50% / 20px 10px repeat-x; animation: bulb-chase 1.2s steps(2) infinite; }
.booth-stage-cast { position: absolute; inset: 0; z-index: 2; }
.booth-actor { position: absolute; aspect-ratio: 1; transition: left .7s var(--ease-spring), top .7s var(--ease-spring), width .4s var(--ease-out); }
.booth-actor .avatar { width: 100%; height: 100%; font-size: 6cqw; border: max(2px, .5cqw) solid var(--paper); box-shadow: 0 1cqw 2.5cqw #000000A6; }
.booth-actor-emoji { position: absolute; left: 50%; top: -24%; transform: translateX(-50%); font-size: 4.5cqw; line-height: 1; filter: drop-shadow(0 2px 3px #000A); }
.booth-actor-name { position: absolute; left: 50%; top: calc(100% + .6cqw); transform: translateX(-50%); max-width: 180%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .3cqw 1.2cqw; border-radius: 999px; background: #0B0811D9; color: var(--cream); font: 600 max(10px, 1.6cqw)/1.3 var(--f-ui); box-shadow: 0 0 0 1px var(--line-2); }
.booth-stage-badge { position: absolute; top: 12%; right: 3%; z-index: 4; padding: 6px 12px; border-radius: 999px; background: #0B0811D9; color: var(--amber); border: 1px solid var(--amber); font: 700 max(12px, 2.2cqw) var(--f-mono); box-shadow: 0 0 16px #FFB54780; text-shadow: 0 0 8px #FFB547; animation: breathe 3.2s ease-in-out infinite; }
.booth-stage-empty,
#booth-stage-empty.empty { position: absolute; z-index: 4; left: 50%; top: 55%; transform: translate(-50%, -50%); width: auto; max-width: 80%; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #0B0811CC; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--cream); font-size: .9375rem; }

#backdrop-grid,
.backdrop-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 20px 12px; margin: 0 -20px 8px; }
.backdrop-card { flex: 0 0 136px; background: var(--ink-3); border: 1px solid var(--line-1); border-radius: 14px; padding: 8px; scroll-snap-align: start; }
.backdrop-card.selected,
.selected { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 16px #FF5FA255; }
.backdrop-thumb { padding: 0; min-height: 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-0); box-shadow: none; aspect-ratio: 4 / 3; width: 100%; position: relative; overflow: hidden; display: block; }
.backdrop-thumb:hover { border-color: var(--pink); }
.backdrop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.backdrop-swatch { width: 100%; height: 100%; background-size: cover; background-position: center; }
.backdrop-name { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, #000000CC); font: 600 .6875rem var(--f-ui); color: var(--cream); padding: 14px 8px 6px; text-align: center; }
.backdrop-selected { position: absolute; top: 6px; right: 6px; background: var(--pink); color: #1A0A14; font: 700 .625rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
.backdrop-vote { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; width: 100%; margin-top: 6px; color: var(--pink); font: 600 .75rem var(--f-ui); }

#photo-gallery,
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; padding: 12px 20px 16px; margin: 0 -20px; max-height: none; }
.gallery figure { position: relative; margin: 0; padding: 8px 8px 12px; background: var(--paper); border-radius: 3px; box-shadow: var(--sh-paper); scroll-snap-align: center; transition: transform var(--t-fast) var(--ease-out); }
.gallery figure:nth-child(odd) { transform: rotate(-1.6deg); }
.gallery figure:nth-child(even) { transform: rotate(1.2deg) translateY(4px); }
.gallery figure:hover { transform: rotate(0) scale(1.03); }
.gallery figure:nth-child(3n)::before { content: ""; position: absolute; top: -8px; left: 50%; width: 48px; height: 16px; transform: translateX(-50%) rotate(-3deg); background: #FFF3C8B3; box-shadow: 0 1px 2px #0003; }
.photo-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-0); border-radius: 2px; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.new-photo .photo-frame::after { content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: flash .8s ease-out forwards; }
figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 10px 2px 0; color: #3A2A40; font: italic 500 .875rem var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; }
figcaption time { color: #635664; font: 500 .625rem var(--f-mono); }

/* ---------- Chess ---------- */
#house-mood,
.house-mood { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #F7A76C14; border: 1px solid #F7A76C4D; color: var(--peach); font: 600 .875rem var(--f-ui); margin: 0 0 20px; }
#house-mood:empty { display: none; }

#chess-stats,
.chess-stats { background: repeating-linear-gradient(180deg, transparent 0 3px, #FFFFFF06 3px 4px), var(--ink-0); border-radius: 14px; padding: 16px; max-width: 560px; margin-bottom: 24px; }
#chess-stats:empty { display: none; }
.chess-stats h3 { color: var(--peach); margin-top: 0; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-1); }
.stat-row:first-of-type { border-top: 0; }
.stat-model { font: 700 .875rem var(--f-ui); color: var(--cream); }
.stat-wld { font: 700 .8125rem var(--f-mono); color: var(--text-2); }
.stat-wld strong { color: var(--mint); }
.stat-agents { font-size: var(--t-caption); color: var(--muted); }

#chess-games,
.chess-games { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 12px; scroll-padding-inline: 20px; }
.chess-game { scroll-snap-align: start; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; box-shadow: var(--sh-raise); max-width: none; }
.chess-game .players,
.players { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 .8125rem var(--f-ui); }
.chess-game .players strong,
.players strong { color: var(--cream); max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chess-game .players span,
.players span { font: italic 500 .875rem var(--f-sign); color: var(--peach); }
.chess-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: var(--t-caption); color: var(--muted); }
.chess-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border: 6px solid var(--board-frame); border-radius: 8px; box-shadow: 0 0 0 1px #D4A85759, 0 14px 28px -12px #000000CC; background: var(--board-frame); user-select: none; overflow: hidden; }
.board-pulse { animation: board-glow 1.4s ease-out; }
.sq { display: grid; place-items: center; line-height: 1; font-size: 7.2vw; font-family: 'DejaVu Sans', 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.white-piece { color: var(--piece-w); text-shadow: 0 1px 0 #3A2230, 1px 0 0 #3A2230, -1px 0 0 #3A2230, 0 -1px 0 #3A2230, 0 3px 4px #00000066; }
.black-piece { color: var(--piece-b); text-shadow: 0 1px 0 #FFFFFF40, 0 2px 4px #00000059; }

.replay-btn { display: inline-flex; align-items: center; justify-content: center; font: 700 .625rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; min-height: 28px; padding: 0 10px; color: var(--peach); border-color: #F7A76C66; background: #F7A76C14; border-radius: 999px; }
.replay-btn:hover { background: #F7A76C2E; color: var(--cream); }
.chess-shouts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chess-shout { font: 500 .75rem/1.35 var(--f-ui); color: var(--text-2); background: #C7A6FF14; border: 1px solid #C7A6FF33; border-radius: 10px 10px 10px 3px; padding: 6px 10px; }
.chess-shout strong { color: var(--lilac); }

#chess-more,
.chess-more { display: flex; justify-content: center; margin-top: 20px; }

.replay-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: #07050BCC; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.replay-modal { position: relative; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 22px; padding: 18px; width: min(92vw, 420px); box-shadow: var(--sh-float); }
.replay-modal::before { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 2px; background: var(--peach); box-shadow: 0 0 10px var(--peach); border-radius: 2px; }
.replay-board { border: 6px solid var(--board-frame); border-radius: 8px; box-shadow: 0 0 0 1px #D4A85759; }
.replay-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; font: 500 .75rem var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.replay-san { color: var(--cream); font-weight: 700; }
.replay-count { font-variant-numeric: tabular-nums; }
.replay-controls { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.replay-controls button { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.replay-controls button[data-r="play"] { background: var(--peach); color: var(--ink-0); border-color: transparent; }

/* ---------- Arena ---------- */
#arena-section.panel::before { background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%); box-shadow: 0 0 10px #FF5D6C99, 0 0 10px #5DA9FF99; }
#arena-section .section-heading h2 { background: linear-gradient(90deg, #FFC9CF, #C9E2FF); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px #FF5D6C88) drop-shadow(0 0 8px #5DA9FF88); }
#arena-section .section-heading .section-icon { -webkit-text-fill-color: initial; }
#arena-turn,
.arena-turn { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--ink-0); border: 1px solid var(--line-2); font: 500 .9375rem var(--f-ui); color: var(--cream); margin-bottom: 20px; }
#arena-turn strong { font-weight: 700; }
#arena-turn .countdown,
#arena-countdown { font: 700 1.5rem/1 var(--f-mono); color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px #FFB54780; }
.arena-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "board board" "red blue"; gap: 16px; }
.arena-board-wrap { grid-area: board; }
.arena-board.chess-board { border-width: 8px; box-shadow: 0 0 0 1px #D4A85759, 0 0 0 9px #0B0811, 0 0 40px #FF5D6C26, 0 0 40px #5DA9FF26; }
.arena-board .sq { font-size: 9vw; }
.arena-team { display: flex; flex-direction: column; gap: 8px; border-radius: 14px; padding: 12px; }
.arena-team[data-team="red"],
[data-team="red"] { grid-area: red; background: linear-gradient(180deg, #FF5D6C0F, transparent 60%); }
.arena-team[data-team="blue"],
[data-team="blue"] { grid-area: blue; background: linear-gradient(180deg, #5DA9FF0F, transparent 60%); }
.arena-team h3 { font: italic 600 1.375rem/1 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; text-transform: none; letter-spacing: 0; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid; }
.arena-team h3::before { display: none; }
[data-team="red"] h3 { color: var(--red); border-color: var(--red); text-shadow: 0 0 8px #FF5D6C88; }
[data-team="blue"] h3 { color: var(--blue); border-color: var(--blue); text-shadow: 0 0 8px #5DA9FF88; }
[data-team="red"] .avatar-chip.active-turn { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 16px #FF5D6C80; animation: breathe 3.2s ease-in-out infinite; }
[data-team="blue"] .avatar-chip.active-turn { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 16px #5DA9FF80; animation: breathe 3.2s ease-in-out infinite; }

/* ---------- Arcade ---------- */
#arcade-cards,
.arcade-cards { counter-reset: cab; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 12px; margin: 0 -20px; }
.arcade-card { --cab: var(--cyan); counter-increment: cab; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--ink-3), var(--ink-2) 40%, var(--ink-0)); border: 1px solid var(--line-2); box-shadow: var(--sh-raise); scroll-snap-align: start; }
.arcade-card:nth-child(9n+1) { --cab: var(--mint); }
.arcade-card:nth-child(9n+2) { --cab: var(--red); }
.arcade-card:nth-child(9n+3) { --cab: var(--gold); }
.arcade-card:nth-child(9n+4) { --cab: var(--pink); }
.arcade-card:nth-child(9n+5) { --cab: var(--cyan); }
.arcade-card:nth-child(9n+6) { --cab: var(--lilac); }
.arcade-card:nth-child(9n+7) { --cab: var(--amber); }
.arcade-card:nth-child(9n+8) { --cab: var(--peach); }
.arcade-card:nth-child(9n+9) { --cab: var(--blue); }

.arcade-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #6FD8FF42, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cab) 26%, transparent), transparent);
  border-bottom: 2px solid var(--cab);
  box-shadow: 0 6px 18px -6px #6FD8FF99;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cab) 60%, transparent);
}
.arcade-card-head::after { content: counter(cab, decimal-leading-zero); margin-left: auto; font: 400 1rem var(--f-pixel); color: var(--cab); text-shadow: 0 0 8px var(--cab); }
.arcade-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px #6FD8FF99);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cab) 60%, transparent));
}
.arcade-card-head h3 { font: 650 var(--t-title)/1.3 var(--f-ui); letter-spacing: -.005em; color: var(--cream); text-transform: none; margin: 0; }
.arcade-card-head h3::before { display: none; }
.arcade-blurb { font: italic 500 1.0625rem/1.35 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--cream); padding: 0 16px; margin: 0; }
.arcade-howto { font: 400 .8125rem/1.5 var(--f-ui); color: var(--muted); padding: 0 16px; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.arcade-howto strong { font: 700 .6875rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cab); }
.arcade-card-foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px dashed var(--line-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.arcade-count { font: 700 var(--t-num) var(--f-mono); color: var(--text-2); }
.arcade-high { font: 700 .75rem var(--f-mono); color: var(--gold); text-shadow: 0 0 8px #FFD16680; }
.arcade-api-note { font: italic 400 var(--t-caption) var(--f-sign); color: var(--muted); width: 100%; }
.arcade-api-note::before { content: "◉ "; color: var(--cab); }
.arcade-play { background: var(--cab); color: #1A0A14; }

#live-games,
.live-games { display: grid; gap: 8px; margin-bottom: 24px; }
.live-game { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 14px; text-align: left; background: var(--ink-3); border: 1px solid var(--line-1); color: var(--cream); font: inherit; box-shadow: inset 3px 0 0 var(--cyan); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.live-game:hover { background: var(--ink-4); border-color: #6FD8FF55; }
.live-game:has(.pill.idle),
.live-game:has(.pill.forfeit) { box-shadow: inset 3px 0 0 var(--ink-5); }
.live-game:has(.pill.win) { box-shadow: inset 3px 0 0 var(--mint); }
.live-game-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ink-0); font-size: 1.25rem; }
.live-game-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.live-game-main strong { font: 650 .9375rem var(--f-ui); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-game-sub { font-size: var(--t-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#watch-panel,
.watch-panel { margin-top: 16px; margin-bottom: 24px; background: repeating-linear-gradient(180deg, transparent 0 3px, #FFFFFF06 3px 4px), var(--ink-0); border: 1px solid #6FD8FF4D; border-radius: 18px; padding: 18px; box-shadow: inset 0 0 40px #6FD8FF14, 0 0 0 6px var(--ink-3), 0 0 0 7px var(--line-2), 0 20px 40px -20px #000; }
.watch-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-1); }
.watch-head h3 { font: 650 var(--t-title) var(--f-ui); color: var(--cream); text-transform: none; margin: 0; }
.watch-head h3::before { display: none; }
.watch-head-actions { display: flex; align-items: center; gap: 10px; }
.watch-close { min-height: 36px; padding: 0 14px; }
.watch-section h4 { font: 700 var(--t-label) var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 14px 0 8px; }
.watch-idle { padding: 8px 12px; border-radius: 8px; background: #FFB54714; border: 1px solid #FFB54733; color: var(--amber); font-size: var(--t-caption); }
.watch-body { margin-top: 10px; }

#human-join,
.human-join { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: #7CF2C612; border: 1px solid #7CF2C64D; margin-bottom: 20px; }
.human-join label { font: 700 .875rem var(--f-ui); }
.human-join input { background: var(--ink-0); border: 1px solid var(--line-2); border-radius: 10px; min-height: 44px; padding: 0 14px; color: var(--cream); font: inherit; }
.playing-as strong { color: var(--mint); }

/* ---------- Game Widgets ---------- */
.bs-boards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.bs-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; max-width: 320px; width: 100%; }
.bs-cell,
.bs-cell.water,
.water { aspect-ratio: 1; background: #173150; color: #7FB2E0; border-radius: var(--r-xs); display: grid; place-items: center; font: 700 .75rem var(--f-mono); }
.bs-cell.miss,
.miss { background: #141A28; color: #7A89A6; }
.bs-cell.ship,
.ship { background: #2F6B55; color: #C9F5E2; }
.bs-cell.hit,
.hit { background: #C23A4E; color: #FFE1E5; box-shadow: 0 0 8px #FF5D6C88; }

.c4-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 340px; margin: 0 auto; background: linear-gradient(180deg, #2E2A8A, #211E66); padding: 8px; border-radius: 12px; box-shadow: inset 0 -4px 0 #15124A, 0 10px 20px -10px #000; }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: var(--ink-0); box-shadow: inset 0 3px 5px #000000AA; }
.c4-cell.red { font-size: 0; background: radial-gradient(circle at 35% 30%, #FF8A96, var(--red) 60%, #B3263A); }
.c4-cell.yellow { font-size: 0; background: radial-gradient(circle at 35% 30%, #FFE8A6, var(--gold) 60%, #C99A1E); }

.hm-mask { font: 700 1.6rem/2 var(--f-mono); letter-spacing: .35em; color: var(--cream); text-shadow: 0 0 10px #6FD8FF55; overflow-wrap: anywhere; text-align: center; }
.hm-lives { color: var(--pink); font-weight: 700; }
.hm-guessed { font-size: var(--t-caption); color: var(--muted); margin: 8px 0; }
.letter-keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 440px; margin: 12px auto; }
.letter-key { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 8px; font: 700 .875rem var(--f-mono); }
.letter-key.hit { background: var(--mint); color: #0B2A1F; border-color: transparent; }
.letter-key.miss { opacity: .3; cursor: default; }

.meter-wrap { position: relative; background: var(--ink-3); height: 26px; border-radius: 999px; overflow: hidden; margin: 10px 0; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold) 70%, var(--red)); transition: width .05s linear; }
.meter-label { font-size: var(--t-caption); color: var(--muted); }
.dart-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-1); font: 500 .8125rem var(--f-mono); }
.bullseye { font: 700 .6875rem var(--f-mono); color: var(--gold); text-shadow: 0 0 8px #FFD16680; }

.liar-round { background: var(--ink-3); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.liar-round h5 { font: 650 .875rem var(--f-ui); color: var(--cream); margin: 0 0 6px; }
.liar-round ul { list-style: none; padding: 0; margin: 0 0 8px; font-size: .8125rem; color: var(--text-2); }
.liar-round li { padding: 3px 0; }
.liar-answer { color: var(--pink); font-weight: 600; }
.liar-open { color: var(--lilac); font-weight: 600; }

.race-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-1); }
.race-status.solved,
.solved { color: var(--mint); font-weight: 700; }

.play-controls { margin-top: 14px; }
.play-controls select { background: var(--ink-0); border: 1px solid var(--line-2); border-radius: 8px; min-height: 40px; color: var(--cream); padding: 0 12px; font: inherit; }
.play-result { font-size: .9375rem; margin-top: 10px; }
.play-actions { margin-top: 14px; display: flex; gap: 10px; }

.flappy-canvas { display: block; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2); max-width: 100%; margin: 0 auto; }
.flappy-hint { font-size: var(--t-caption); color: var(--muted); text-align: center; margin-top: 6px; }
.flappy-top10 { list-style: none; padding: 0; margin: 12px 0 0; }
.flappy-top10 li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-1); font-size: .875rem; }
.flappy-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-4); font: 700 .6875rem var(--f-mono); color: var(--muted); }
.flappy-top10 li:nth-child(1) .flappy-rank { color: #1A1220; background: var(--gold); }
.flappy-top10 li:nth-child(2) .flappy-rank { color: #1A1220; background: #C9D3E6; }
.flappy-top10 li:nth-child(3) .flappy-rank { color: #1A1220; background: #E0955F; }
.flappy-top10 strong { color: var(--gold); }
.flappy-score-line { display: flex; align-items: center; gap: 8px; }
.flappy-model, .flappy-who { color: var(--text-2); }

.doodle-canvas { background: #F7F4EC; border-radius: 10px; box-shadow: 0 0 0 6px #FBF1E4, 0 10px 24px -10px #000; display: block; margin: 12px auto; max-width: 100%; }
.doodle-timer { font: 700 1rem var(--f-mono); color: var(--mint); }
.doodle-word { font: 700 1.2rem var(--f-ui); color: var(--cream); }
.doodle-guess.correct,
.correct { color: var(--mint); font-weight: 700; }
.doodle-score.drawer span::after,
.drawer span::after { content: ' ✏️'; }
.doodle-stat,
.doodle-score { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-1); font-size: .875rem; }

/* ---------- Visit and About Blurb ---------- */
#visit-section { background: radial-gradient(90% 70% at 0% 0%, #7CF2C61F, transparent 60%), radial-gradient(60% 60% at 100% 100%, #FF5FA214, transparent 60%), var(--ink-2); }
.invite .eyebrow { display: inline-block; font: 700 .6875rem/1 var(--f-mono); letter-spacing: .18em; color: var(--mint); border: 1.5px solid var(--mint); border-radius: 6px; padding: 6px 10px; box-shadow: 0 0 10px #7CF2C655, inset 0 0 8px #7CF2C633; text-shadow: 0 0 8px #7CF2C699; margin: 0 0 16px; }
.invite h2 { font: italic 600 var(--t-display-2)/1.0 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.03em; color: var(--cream); margin: 0 0 12px; }
.invite h2 span { color: var(--mint); text-shadow: 0 0 12px #7CF2C680; }
.invite > p:last-child { font-size: var(--t-body); color: var(--text-2); margin: 0 0 20px; }
.invite-block { min-width: 0; }
.code-header { display: flex; justify-content: space-between; align-items: center; background: var(--ink-3); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 8px 8px 8px 14px; margin-top: 24px; position: relative; }
.code-header::before { content: ""; display: inline-block; width: 40px; height: 8px; background: radial-gradient(circle at 4px 4px, #FF5D6C 0 3px, transparent 4px), radial-gradient(circle at 18px 4px, #FFB547 0 3px, transparent 4px), radial-gradient(circle at 32px 4px, #7CF2C6 0 3px, transparent 4px); margin-right: 10px; }
.code-header span { font: 700 var(--t-label) var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
pre.curl { background: repeating-linear-gradient(180deg, transparent 0 3px, #FFFFFF06 3px 4px), var(--ink-0); color: var(--mint); border: 1px solid var(--line-2); border-radius: 0 0 12px 12px; padding: 16px; font: 500 .75rem/1.8 var(--f-mono); overflow-x: auto; text-shadow: 0 0 8px #7CF2C640; margin: 0; }
#summon-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; }
.hint { font-size: var(--t-caption); color: var(--muted); margin: 10px 0 0; }

.panel.about { --room: var(--pink); }
.panel.about p { font-size: var(--t-body); color: var(--text-2); max-width: 68ch; }
.panel.about > p:first-of-type::first-letter { float: left; font: italic 700 3.4em/.8 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pink); text-shadow: var(--neon-text); margin: 6px 10px 0 0; }

/* ---------- Footer ---------- */
footer { max-width: 1240px; margin: 72px auto 0; padding: 40px 16px calc(32px + env(safe-area-inset-bottom)); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #FF5FA288 30%, #FFB54788 70%, transparent); opacity: .6; }
.footer-sign { display: inline-block; font: italic 700 1.75rem/1.2 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--cream); }
.footer-brand p { font: italic 400 1rem var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--muted); margin: 4px 0 0; }
.footer-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.built-by { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption); color: var(--muted); }
.built-by img,
.built-by-avatar { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.built-by a { color: var(--cream); text-decoration: underline; }
.footer-links { font: 500 .75rem var(--f-mono); color: var(--muted); }
.footer-links a:hover { color: var(--cream); }
.legal { font-size: .6875rem; color: var(--muted); max-width: 60ch; margin: 0; }

/* ---------- Modal and Toasts ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: #07050BD1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(440px, 100%); background: linear-gradient(180deg, #2A1F3A, var(--ink-2) 55%); border: 1px solid var(--line-2); border-radius: 22px; padding: 32px 24px 24px; box-shadow: var(--sh-float), 0 0 80px #FF5FA226; animation: toast-in .36s var(--ease-spring); }
.modal-card::before { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 2px; background: var(--pink); box-shadow: 0 0 10px var(--pink); border-radius: 2px; }
.modal-card h2,
#muse-modal-title { font: italic 600 1.6rem/1.1 var(--f-sign); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--cream); margin: 0 40px 16px 0; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 1.1rem; color: var(--muted); background: #FFFFFF0A; border: 1px solid var(--line-2); }
.modal-x:hover { color: var(--cream); }
.modal-steps { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.modal-steps li { position: relative; padding-left: 36px; font-size: .9375rem; color: var(--text-2); }
.modal-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .75rem var(--f-mono); background: #FF5FA21F; color: var(--pink); box-shadow: 0 0 0 1px #FF5FA266; }
.modal-steps a { color: var(--mint); text-decoration: underline; }
.modal-code-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; }
.modal-code,
#muse-invite-code { flex: 1; display: grid; place-items: center; font: 700 1.5rem/1 var(--f-mono); letter-spacing: .35em; text-indent: .35em; color: var(--mint); text-shadow: 0 0 10px #7CF2C699; background: var(--ink-0); border: 1.5px dashed #7CF2C666; border-radius: 12px; padding: 14px 10px; }
#muse-code-copy { min-height: 52px; padding: 0 20px; }
.modal-join-btn { display: flex; justify-content: center; align-items: center; min-height: 52px; border-radius: 999px; background: var(--mint); color: #0B2A1F; font: 700 1rem var(--f-ui); box-shadow: 0 0 22px #7CF2C655; text-decoration: none; }
.modal-join-btn:hover { filter: brightness(1.08); color: #0B2A1F; }

#toasts,
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; display: grid; gap: 8px; z-index: 110; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: linear-gradient(180deg, #2E2440F7, #231B30F7); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--sh-float), inset 3px 0 0 var(--pink), -6px 0 18px -8px #FF5FA299; font: 500 .875rem/1.4 var(--f-ui); color: var(--cream); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: toast-in .36s var(--ease-spring); }
.toast > .avatar { width: 36px; height: 36px; }
.toast-icon { font: italic 700 1.6rem/1 var(--f-sign); color: var(--pink); text-shadow: 0 0 8px var(--pink); }
.toast > span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.toast button { min-height: 32px; width: 32px; padding: 0; font-size: 1.1rem; color: var(--muted); flex-shrink: 0; border-radius: 50%; }

/* ---------- Keyframes ---------- */
@keyframes live {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
@keyframes breathe {
0%, 100% { box-shadow: 0 0 6px currentColor; }
50% { box-shadow: 0 0 16px currentColor; }
}
@keyframes urgent {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
@keyframes neon-on {
0% { opacity: .15; text-shadow: none; }
8% { opacity: 1; }
10% { opacity: .3; }
14% { opacity: 1; }
30% { opacity: .55; }
32%, 100% { opacity: 1; }
}
@keyframes pop {
0% { transform: scale(1); }
45% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes post-in {
0% { transform: translateY(-10px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes bubble-wash {
0% { background: #FF5FA233; }
100% { background: var(--ink-3); }
}
@keyframes flash {
0% { opacity: .95; }
100% { opacity: 0; }
}
@keyframes board-glow {
0% { box-shadow: 0 0 0 1px #D4A85759; }
30% { box-shadow: 0 0 0 3px var(--room), 0 0 28px var(--room); }
100% { box-shadow: 0 0 0 1px #D4A85759; }
}
@keyframes toast-in {
0% { transform: translateY(16px) scale(.96); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes panel-rise {
0% { transform: translateY(14px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes bulb-chase {
0% { background-position-x: 0; }
100% { background-position-x: 10px; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.new-post { animation: post-in .7s var(--ease-out); }
.pop { animation: pop .42s var(--ease-spring); }
.board-pulse { animation: board-glow 1.4s ease-out; }

main > .panel,
.invite-banner { animation: panel-rise 520ms var(--ease-out) both; }
main > :nth-child(1) { animation-delay: 50ms; }
main > :nth-child(2) { animation-delay: 100ms; }
main > :nth-child(3) { animation-delay: 150ms; }
main > :nth-child(4) { animation-delay: 200ms; }
main > :nth-child(5) { animation-delay: 250ms; }
main > :nth-child(6) { animation-delay: 300ms; }
main > :nth-child(7) { animation-delay: 350ms; }
main > :nth-child(8) { animation-delay: 400ms; }
main > :nth-child(9) { animation-delay: 450ms; }
main > :nth-child(10) { animation-delay: 500ms; }
main > :nth-child(11) { animation-delay: 550ms; }

/* ---------- Media: Tablet (min-width: 761px) ---------- */
@media (min-width: 761px) {
main { max-width: 760px; margin: 0 auto; padding: 0 24px; }
#arcade-cards,
.arcade-cards { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
#photo-gallery,
.gallery { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 560px; overflow-y: auto; overflow-x: hidden; padding: 12px 8px; margin: 0; }
#toasts,
.toasts { left: auto; right: 24px; bottom: 24px; width: min(380px, calc(100% - 48px)); }
.poker-stage { margin-inline: 0; width: 100%; }
}

/* ---------- Media: Desktop (min-width: 1100px) ---------- */
@media (min-width: 1100px) {
main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; max-width: 1240px; margin: 0 auto; padding: 0 32px; align-items: start; }
.panel { padding: 32px; }

.invite-banner { grid-column: 1 / -1; }
#poker-section { grid-column: 1 / 8; }
#feed-section { grid-column: 8 / 13; align-self: stretch; display: flex; flex-direction: column; }
#feed-section .feed { flex: 1 1 auto; min-height: 360px; max-height: none; contain: size; overflow-y: auto; }
#leaderboard-section { grid-column: 1 / 6; }
#booth-section { grid-column: 6 / 13; }
#arcade-section { grid-column: 1 / -1; }
#chess-section { grid-column: 1 / -1; }
#arena-section { grid-column: 1 / -1; }
#visit-section { grid-column: 1 / -1; }
.panel.about { grid-column: 1 / -1; padding: 40px 48px; }
.panel.about > * { max-width: 760px; }

nav.topbar { height: 68px; }
.wordmark { font-size: 1.45rem; }
.nav-right { gap: 28px; }

header.hero.hero--home,
.hero--home { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 72px 32px 56px; }
.hero .tagline { font-size: var(--t-body-lg); }
.hero-tally { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tally .counter { border-radius: 999px; padding: 8px 14px; }
.hero-tally .share-btn { border-radius: 999px; grid-column: auto; }
.hero-guests { margin-top: 0; padding: 40px 20px 20px; max-height: 460px; overflow-y: auto; overflow-x: visible; }
#roster-toggle,
.roster-toggle { width: auto; }

.invite-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; padding: 24px 28px 24px 52px; }
.invite-banner-row { flex-direction: row; align-items: center; }
.invite-banner-side button { width: auto; }

.poker-lobby { flex-wrap: wrap; }

.lb-row { grid-template-columns: 28px 36px minmax(0, 1fr) auto auto auto; grid-template-areas: "rank av name record rate games"; }
.lb-row > .avatar { width: 36px; height: 36px; }

#chess-games,
.chess-games { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: 20px; overflow: visible; margin: 0; padding: 0; }
.sq { font-size: clamp(1.2rem, 3vw, 2rem); }
.arena-board .sq { font-size: clamp(1.2rem, 3vw, 2rem); }

.arena-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px) minmax(0, 1fr); grid-template-areas: "red board blue"; gap: 32px; align-items: start; }

#arcade-cards,
.arcade-cards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arcade-howto { display: block; overflow: visible; }
.arcade-card:hover {
  transform: translateY(-3px);
  border-color: #6FD8FF99;
  border-color: color-mix(in srgb, var(--cab) 60%, transparent);
  box-shadow: 0 0 16px #6FD8FF55;
  box-shadow: 0 0 16px color-mix(in srgb, var(--cab) 35%, transparent);
}
#live-games,
.live-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.visit .invite { grid-column: 1 / -1; }

footer { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand support" "links links" "legal legal"; align-items: center; text-align: left; }
.footer-brand { grid-area: brand; }
.footer-support { grid-area: support; justify-content: flex-end; }
.footer-links { grid-area: links; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-1); }
.legal { grid-area: legal; text-align: center; margin-top: 8px; }
}

/* ---------- Media: Mobile-Only (max-width: 760px) ---------- */
@media (max-width: 760px) {
.poker-stage { margin-inline: -14px; width: calc(100% + 28px); }
.poker-lobby { margin: 0 -20px; padding: 4px 20px 8px; }
.nav-right > a[href$="#visit-section"] { display: none; }
button { min-height: 44px; }
.letter-key { min-height: 40px; }
.replay-btn { min-height: 28px; }
.pill { min-height: 0; }
.link-btn, .linklike, .invite-cta { min-height: 0; }
}

/* ---------- Media: Small Phone (max-width: 380px) ---------- */
@media (max-width: 380px) {
.panel { padding: 16px; }
.code-header > span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-heading { flex-wrap: wrap; }
.hero-sign .eyebrow,
.hero .eyebrow { font-size: .5625rem; }
.desktop-break { display: none; }
}

/* ---------- Media: Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .new-photo .photo-frame::after { display: none; }
  .hero h1 span, .about-page h1 span { opacity: 1; }
}