/* Game Lounge: a back room with green felt, brass and one pink neon sign.
   Every page in the Lounge loads this file. Each game then dresses its own room on top (see the <style> in its page). */
@font-face { font-family: "Bricolage"; src: url("/assets/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("/assets/fonts/yellowtail.woff2") format("woff2"); font-display: swap; }

:root {
  --felt: #0d3a33;
  --felt-deep: #072722;
  --felt-rise: #124a41;
  --felt-top: #185a4f;
  --rail: #1f6a5d;
  --lamp: #f6e9cf;
  --white: #fff8e8;
  --chalk: #a9c9bd;
  --dim: #7ba395;
  --brass: #eeb548;
  --brass-deep: #b98220;
  --neon: #ff5fa2;
  --mint: #7fe0b0;
  --coral: #ff8873;
  --r: 14px;
  --font-display: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sign: "Yellowtail", "Brush Script MT", cursive;

  /* Older names still used by pages written before the Lounge had its own look. */
  --void: var(--felt-deep); --panel: var(--felt-rise); --panel-2: var(--felt-top);
  --line: #1c5a4f; --line-2: #2c7567;
  --ink: var(--lamp); --parchment: var(--white); --stone: var(--chalk); --mute: var(--dim);
  --teal: var(--brass); --teal-mid: var(--brass-deep); --teal-deep: #6b4b10;
  --gold: var(--brass); --ochre: var(--brass-deep); --sage: var(--mint); --terracotta: var(--coral);
  --font-mono: var(--font-sans);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--felt);
  color: var(--lamp);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--brass); }
::selection { background: var(--neon); color: #2a0716; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.eyebrow { font: 600 13px/1.3 var(--font-sans); color: var(--chalk); }
.muted { color: var(--dim); }
.stone { color: var(--chalk); }

.card { background: var(--felt-rise); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--lamp);
  font: 600 15px var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--felt-top); border-color: var(--chalk); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #2b1c00; }
.btn.primary:hover { background: #ffc75c; border-color: #ffc75c; }
.btn.gold { border-color: var(--brass); color: var(--brass); }
.btn.gold:hover { background: rgba(238,181,72,.14); }
.btn.sm { min-height: 32px; padding: 0 13px; font-size: 14px; }

.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 0 14px;
  background: var(--felt-deep); color: var(--lamp);
  border: 1.5px solid var(--line-2); border-radius: 10px; font: 16px var(--font-sans);
}
textarea.input { padding: 10px 14px; }
.input:focus { outline: none; border-color: var(--brass); }
.input::placeholder { color: var(--dim); }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; margin-bottom: 6px; }

.tag { display: inline-block; font: 700 11px var(--font-sans); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--chalk); }
.tag.teal, .tag.gold { border-color: var(--brass); color: var(--brass); }

/* ───────── The neon sign. Markup: <h1 class="sign"><span class="w" data-t="Game">Game</span> <span class="w" data-t="Lounge">Lounge</span></h1>
   The words themselves are the cold glass tube; the ::after copy on top is the gas when it is lit, so a flicker shows the unlit tube underneath. */
.sign {
  position: relative; display: inline-block; margin: 0; font: 400 40px/1.15 var(--font-sign); letter-spacing: .01em; white-space: nowrap;
  color: #6a2a49; -webkit-text-stroke: .6px #8a3a60; transform: rotate(-4deg); transform-origin: left center; text-decoration: none;
}
.sign .w { position: relative; display: inline-block; padding: 0 .08em; }
.sign .w::after {
  content: attr(data-t); position: absolute; left: .08em; top: 0; color: #fff4f9; -webkit-text-stroke: 0;
  text-shadow: 0 0 .03em #fff, 0 0 .1em #ffb3d3, 0 0 .22em var(--neon), 0 0 .5em var(--neon), 0 0 1.1em rgba(255,95,162,.6), 0 0 2.2em rgba(255,95,162,.35);
}
.sign::before { content: ""; position: absolute; inset: -55% -18%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255,95,162,.26), rgba(255,95,162,.08) 60%, transparent); }
/* It strikes once when it comes on, then holds steady with a slow hum in the glow. (It used to stutter every few seconds, which read as a fault.) */
@media (prefers-reduced-motion: no-preference) {
  .sign .w::after { animation: neonOn 1.5s .15s both; }
  .sign .w + .w::after { animation: neonOn 1.9s .45s both; }
  .sign::before { animation: neonGlow 2.3s both, neonHum 7s 2.3s ease-in-out infinite alternate; }
  .sign.lit .w::after, .sign.lit .w + .w::after { animation: none; }
  .sign.lit::before { animation: neonHum 7s ease-in-out infinite alternate; }
}
/* a sign that is switched off (a dead invite link): cold glass, and the odd failed strike */
.sign.off .w::after { opacity: 0; animation: neonDead 6s 1.2s infinite; } .sign.off .w + .w::after { animation: none; } .sign.off::before { opacity: 0; animation: none; }
@keyframes neonDead { 0%, 100% { opacity: 0; } 2% { opacity: .5; } 3% { opacity: 0; } 5% { opacity: .25; } 6% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sign.off .w::after { animation: none; } }
@keyframes neonOn { 0%, 7% { opacity: 0; } 8%, 11% { opacity: .85; } 12%, 24% { opacity: 0; } 25%, 28% { opacity: 1; } 29%, 33% { opacity: .15; } 34%, 58% { opacity: 1; } 59%, 61% { opacity: .3; } 62%, 100% { opacity: 1; } }
@keyframes neonHum { from { opacity: 1; } to { opacity: .7; } }
@keyframes neonGlow { 0%, 20% { opacity: 0; } 30% { opacity: .7; } 34% { opacity: .2; } 60%, 100% { opacity: 1; } }

/* ───────── The shell: the wall with the menu on it, and the room you are looking into.
   On a desktop the wall has three widths, set on <html data-menu>: open (no attribute), "rail" (icons only) and "hide" (gone, with a brass tab to pull it back). */
/* The wall slides on its own (--sw); the room behind it changes size once, not on every frame of the slide (shell.js holds the column with --hold and glides the room across). */
.shell { --sw: 272px; --ease: cubic-bezier(.3,.85,.25,1); display: grid; grid-template-columns: var(--hold, var(--sw)) minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--felt-deep); }
.shell a, .shell button { -webkit-tap-highlight-color: transparent; }
.side {
  position: relative; z-index: 3; justify-self: start; width: var(--sw); min-width: 0; min-height: 0; isolation: isolate;
  background:
    radial-gradient(130% 30% at 28% 0, rgba(255,95,162,.17), transparent 70%),
    radial-gradient(120% 26% at 50% 100%, rgba(238,181,72,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1px, rgba(255,255,255,.012) 1px 2px, transparent 2px 34px),
    #051d19;
  box-shadow: inset -1px 0 0 #020d0b, inset -4px 0 0 #8a5f17, inset -5px 0 0 #f3c868, inset -7px 0 0 #6b4b10, 14px 0 30px -12px rgba(0,0,0,.7);
}
.side-in { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.brand { position: relative; flex: none; height: 132px; }
.brand .sign { position: absolute; left: 26px; top: 30px; }
.brand .sign.mono { display: none; }
.brand p { position: absolute; left: 26px; top: 99px; margin: 0; white-space: nowrap; font: 500 14px/1.35 var(--font-sans); color: var(--chalk); }
.nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 11px 14px 12px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.nav .group { position: relative; height: 42px; padding: 18px 10px 0; overflow: hidden; white-space: nowrap; font: 600 13px/1.2 var(--font-sans); color: var(--dim); }
.nav .group:first-child { height: 30px; padding-top: 6px; }
.nav .group::before { content: ""; position: absolute; left: 10px; top: 50%; width: 30px; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9a7526 30%, #9a7526 70%, transparent); opacity: 0; }
.nav a.item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px 0 7px; margin-bottom: 2px; border-radius: 14px; overflow: hidden;
  color: var(--lamp); text-decoration: none; font: 600 16px/1.2 var(--font-sans); transition: background .15s, color .15s, box-shadow .15s;
}
.nav a.item .ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); transition: transform .25s cubic-bezier(.2,1.7,.4,1), filter .2s; }
.nav a.item .ico svg { width: 36px; height: 36px; }
.nav a.item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.item .st { margin-left: auto; }
.nav a.item:hover { background: rgba(255,255,255,.055); }
.nav a.item:hover .ico, .nav a.item:focus-visible .ico { transform: rotate(-6deg) scale(1.12); }
.nav a.item:active .ico { transform: scale(.9); }
.nav a.item:focus-visible { outline-offset: -2px; }
.nav a.item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--brass)) 24%, #0b2c27), #0e3a33 85%); color: var(--white); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--brass)) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.06); }
.nav a.item.active .ico { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)) drop-shadow(0 0 7px color-mix(in srgb, var(--c, var(--brass)) 70%, transparent)); }
/* a table is in play at this game */
.nav a.item .live { display: none; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 999px; background: rgba(255,95,162,.16); color: #ffd3e4; font: 700 12px/1.5 var(--font-sans); }
.nav a.item .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 1.6s ease-in-out infinite; }
.nav a.item.has-live .live { display: inline-flex; }
@keyframes livePulse { 50% { transform: scale(.6); opacity: .5; } }
/* you are hosting, or have a seat, at a table of this game: one tap goes back to it */
.nav a.item.has-mine .live { padding: 3px 9px 2px 8px; background: var(--brass); color: #2b1c00; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 0 var(--brass-deep); }
.nav a.item.has-mine .live::before { width: 8px; height: 8px; background: #2b1c00; box-shadow: none; }
.nav a.item.has-mine .lbl { flex: 1 1 0; }

/* the menu icons: each one a small picture (drawn in shell.js). They sit still until you point at them, apart from the odd blink. */
svg.ic { display: block; overflow: visible; }
.ic .a, .ic .b, .ic .c, .ic-me .b circle { transform-box: fill-box; transform-origin: center; } /* only the parts that move; none of them carries a transform of its own */
.ic-home .a { transform-box: view-box; transform-origin: 24px 0; }
.ic-sol .a { transform-box: view-box; transform-origin: 24px 50px; transform: rotate(var(--a)); transition: transform .3s cubic-bezier(.2,1.7,.35,1); }
.ic-clue .a, .ic-home .b, .ic-me .a, .ic-people .a, .ic-people .b { transition: transform .25s cubic-bezier(.2,1.7,.4,1), opacity .2s; }
:is(a, button):hover > .ico .ic-sol .a, .ic-on .ic-sol .a { transform: rotate(calc(var(--a) * 1.45)) translateY(-1.5px); }
:is(a, button):hover > .ico .ic-clue .a, .ic-on .ic-clue .a { transform: translateY(-3.5px) rotate(2deg); }
:is(a, button):hover > .ico .ic-home .b, .ic-on .ic-home .b { opacity: 1; }
:is(a, button):hover > .ico .ic-people .a, .ic-on .ic-people .a { transform: translate(-1px, -2px) rotate(-5deg); }
:is(a, button):hover > .ico .ic-people .b, .ic-on .ic-people .b { transform: translate(1px, -1px) rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .ic-traitor .a { animation: icBlink 7s 2s infinite; }
  .ic-traitor .c { animation: icTwinkle 4.5s ease-in-out infinite; }
  .ic-sud .a { animation: icCage 2.4s linear infinite; animation-play-state: paused; }
  .ic-hex .c { animation: icWave 3.6s ease-in-out infinite alternate; }
  :is(a, button):hover > .ico .ic-home .a, .ic-on .ic-home .a { animation: icSwing 1.5s ease-in-out infinite; }
  :is(a, button):hover > .ico .ic-clue .b, .ic-on .ic-clue .b { animation: icStamp .45s cubic-bezier(.3,1.9,.5,1) both; }
  :is(a, button):hover > .ico .ic-traitor .b, .ic-on .ic-traitor .b { animation: icShifty 1.5s ease-in-out infinite; }
  :is(a, button):hover > .ico .ic-trivia .a, .ic-on .ic-trivia .a { animation: icPress .5s ease-out both; transform-origin: 50% 100%; }
  :is(a, button):hover > .ico .ic-trivia .c, .ic-on .ic-trivia .c { animation: icSpark .5s ease-out both; }
  :is(a, button):hover > .ico .ic-hex .a, .ic-on .ic-hex .a { animation: icRise .55s cubic-bezier(.2,1.8,.4,1) both; animation-delay: calc(var(--j) * 70ms); }
  :is(a, button):hover > .ico .ic-hex .b, .ic-on .ic-hex .b { animation: icRise .55s .2s cubic-bezier(.2,1.8,.4,1) both; }
  :is(a, button):hover > .ico .ic-sud .a, .ic-on .ic-sud .a { animation-play-state: running; }
  :is(a, button):hover > .ico .ic-sud .b, .ic-on .ic-sud .b { animation: icScribble .7s ease-in-out both; }
  :is(a, button):hover > .ico .ic-me .b circle, .ic-on .ic-me .b circle { animation: icBulb .9s ease-in-out infinite; }
  :is(a, button):hover > .ico .ic-me .a, .ic-on .ic-me .a { transform: translateX(11px); opacity: .25; transition-duration: .5s; }
  .ic-me .b circle:nth-child(2n) { animation-delay: -.45s !important; }
}
@keyframes icBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes icTwinkle { 50% { opacity: .25; } }
@keyframes icCage { to { stroke-dashoffset: -10; } }
@keyframes icWave { to { transform: translateX(2.5px); } }
@keyframes icSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes icStamp { 0% { transform: scale(2.1) rotate(10deg); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: none; } }
@keyframes icShifty { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes icPress { 0%, 100% { transform: none; } 30%, 50% { transform: translateY(1px) scaleY(.82); } }
@keyframes icSpark { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes icRise { 40% { transform: translateY(-3px) scale(1.07); } }
@keyframes icScribble { 0%, 100% { transform: none; } 20% { transform: translate(-3px, -2.5px) rotate(-6deg); } 45% { transform: translate(1.5px, -4px) rotate(4deg); } 70% { transform: translate(-2px, -1px) rotate(-4deg); } }
@keyframes icBulb { 50% { fill: #ffd23f; transform: scale(1.25); } }

/* the foot of the menu: you */
.side .foot { position: relative; flex: none; display: flex; align-items: flex-end; gap: 8px; height: 78px; padding: 0 12px 15px 13px; background: linear-gradient(#0000, rgba(0,0,0,.28)); box-shadow: inset 0 1px 0 rgba(238,181,72,.22); }
.side .foot .me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-radius: 26px 12px 12px 26px; }
.side .foot .me:focus-visible { outline-offset: 4px; }
.side .foot .me-av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #27806f, #0b322c 78%); box-shadow: 0 0 0 2px var(--brass-deep), 0 0 0 3.5px #2a1c05; transition: box-shadow .15s; }
.side .foot .me-av .pic { position: absolute; inset: 0; }
/* The portrait's own round backdrop fills the gold ring exactly; hats and shoulder buddies poke out past it. */
.side .foot .me-av .pic svg { position: absolute; left: -6.85%; top: -13.17%; bottom: auto; width: 113.7%; height: 113.7%; max-width: none; filter: none; overflow: visible; }
.side .foot .me-av .brush { position: absolute; left: -6px; bottom: -5px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--brass); color: #2b1c00; box-shadow: 0 0 0 2px #051d19; transition: transform .25s cubic-bezier(.2,1.7,.4,1), background .15s; }
.side .foot .me:hover .me-av, .side .foot .me.active .me-av { box-shadow: 0 0 0 2px #f3c868, 0 0 0 3.5px #2a1c05, 0 0 16px rgba(238,181,72,.45); }
.side .foot .me:hover .brush, .side .foot .me:focus-visible .brush { transform: scale(1.18) rotate(-14deg); background: #ffc75c; }
.side .foot .me-av.fresh { animation: meFresh .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes meFresh { 0% { transform: scale(.6) rotate(-14deg); } 55% { transform: scale(1.14) rotate(5deg); } 100% { transform: none; } }
.side .foot .me-who { flex: 1; min-width: 0; line-height: 1.2; transition: opacity .15s; }
.side .foot .me-who.solo { align-self: center; padding: 0 0 4px 6px; }
.side .foot .me-who b { display: block; font: 700 16px/1.2 var(--font-sans); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .foot .me-who > span { font: 500 13px/1.3 var(--font-sans); color: var(--dim); }
.side .foot .role { position: relative; display: block; height: 17px; }
.side .foot .role span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .15s, transform .2s; }
.side .foot .role span + span { opacity: 0; transform: translateY(5px); color: var(--brass); font-weight: 600; }
.side .foot .me:hover .role span:first-child, .side .foot .me:focus-visible .role span:first-child, .side .foot .me.active .role span:first-child { opacity: 0; transform: translateY(-5px); }
.side .foot .me:hover .role span + span, .side .foot .me:focus-visible .role span + span, .side .foot .me.active .role span + span { opacity: 1; transform: none; }
@media (hover: none) { .side .foot .role span:first-child { opacity: 0; } .side .foot .role span + span { opacity: 1; transform: none; } }
.side .foot .out { flex: none; min-height: 36px; margin-bottom: 6px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--lamp); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, opacity .15s; }
.side .foot .out:hover { border-color: var(--coral); color: #ffd9d1; }
.side .foot-tools, .side .rail-btn, .shell .peek { display: none; }
.side .x { display: none; }
.tip { position: fixed; z-index: 80; pointer-events: none; margin-top: -15px; padding: 5px 10px 4px; border-radius: 5px; background: var(--lamp); color: #2b1c00; font: 700 14px/1.5 var(--font-sans); white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 12px 22px -8px #000; transform-origin: 0 50%; transform: rotate(-2deg); }
.tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tip kbd { display: inline-block; margin-left: 9px; padding: 0 6px; border-radius: 4px; background: rgba(43,28,0,.16); font: 700 12px/1.6 var(--font-sans); vertical-align: 1px; }
.tip.in { animation: tipIn .16s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes tipIn { from { opacity: 0; transform: translateX(-6px) rotate(-2deg) scale(.9); } }

.main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--felt-deep); }
.main .stage { position: relative; flex: 1; min-height: 0; background: var(--felt-deep); }
.main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 1; transition: opacity .2s ease; }
.main.moving iframe { opacity: 0; }
/* the moment between two rooms: the wall, and the table you are walking to */
.shell .curtain { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s ease; background: radial-gradient(60% 50% at 50% 46%, #0f443b, var(--felt-deep) 75%); }
.main.moving .curtain { opacity: 1; }
.curtain .tok { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #16604f, #061f1b 74%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--brass)) 75%, transparent), 0 0 0 10px rgba(0,0,0,.26), 0 0 80px color-mix(in srgb, var(--c, var(--brass)) 42%, transparent); opacity: 0; transform: scale(.72) rotate(-10deg); transition: transform .3s cubic-bezier(.2,1.5,.4,1), opacity .14s; }
.curtain .tok svg { width: 84px; height: 84px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.main.moving .curtain .tok { opacity: 1; transform: none; }
.shell .topbar, .shell .scrim { display: none; }
.shell.snap, .shell.snap * { transition: none !important; }

@media (min-width: 821px) {
  .side { transition: width .32s var(--ease); }
  .main { overflow: hidden; }
  /* what is on the wall keeps its place while the wall slides, so nothing reflows half way */
  .side-in > .brand, .side-in > .nav, .side-in > .foot { width: 265px; }
  .nav a.item { width: 242px; transition: width .32s var(--ease), background .15s, color .15s, box-shadow .15s; }
  .nav a.item .lbl, .nav a.item .st { transition: opacity .2s .08s; }
  .nav .group { transition: height .32s var(--ease), padding .32s var(--ease), color .2s; }
  .nav .group::before { transition: opacity .2s; }
  .brand .sign.full, .brand p { transition: opacity .22s .12s, visibility 0s; }
  .brand .sign.mono { display: inline-block; left: 14px; top: 30px; font-size: 38px; opacity: 0; visibility: hidden; transition: opacity .1s, visibility 0s .1s; }
  .brand .sign.mono::before { inset: -40% -30%; }
  .side .foot { transition: height .32s var(--ease); }
  .side .rail-btn { display: grid; place-items: center; position: absolute; z-index: 2; left: 221px; top: 92px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; color: var(--brass);
    background: #0a2d28; box-shadow: inset 0 0 0 1.5px #3b6d55, 0 2px 0 rgba(0,0,0,.4); transition: left .32s var(--ease), color .15s, background .15s, box-shadow .15s, transform .1s; }
  .side .rail-btn:hover { color: #2b1c00; background: var(--brass); box-shadow: inset 0 0 0 1.5px #f7dc9a, 0 2px 0 var(--brass-deep), 0 0 18px rgba(238,181,72,.4); }
  .side .rail-btn:active { transform: translateY(2px); }
  .side .rail-btn svg { transition: transform .32s var(--ease); }
  .side .foot-tools { display: flex; gap: 5px; position: absolute; left: 4px; top: 12px; opacity: 0; visibility: hidden; transition: opacity .1s, visibility 0s .1s; }
  .side .mini { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; color: var(--chalk); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: color .15s, background .15s, box-shadow .15s; }
  .side .mini:hover { color: #2b1c00; background: var(--brass); box-shadow: inset 0 0 0 1.5px #f7dc9a; }
  .side #out2:hover { background: var(--coral); box-shadow: inset 0 0 0 1.5px #ffd9d1; }

  /* icons only */
  html[data-menu] .shell { --sw: 80px; }
  html[data-menu] .nav { scrollbar-width: none; }
  html[data-menu] .nav::-webkit-scrollbar { display: none; }
  html[data-menu] .nav a.item { width: 50px; }
  html[data-menu] .nav a.item .lbl, html[data-menu] .nav a.item .st { opacity: 0; transition: opacity .1s; }
  html[data-menu] .nav a.item .live { position: absolute; left: 31px; top: 3px; min-width: 17px; height: 17px; padding: 0 4px; justify-content: center; background: var(--neon); color: #2a0716; font: 800 11px/17px var(--font-sans); box-shadow: 0 0 0 2px #051d19, 0 0 10px rgba(255,95,162,.7); }
  html[data-menu] .nav a.item .live::before { display: none; }
  html[data-menu] .nav a.item.has-mine .live { width: 17px; padding: 0; font-size: 0; background: var(--brass); box-shadow: 0 0 0 2px #051d19, 0 0 10px rgba(238,181,72,.8); }
  html[data-menu] .nav a.item.has-mine .live::before { display: block; width: 7px; height: 7px; }
  html[data-menu] .nav .group { height: 15px; padding-top: 0; color: transparent; }
  html[data-menu] .nav .group::before { opacity: 1; }
  html[data-menu] .nav .group:first-child { height: 0; }
  html[data-menu] .nav .group:first-child::before { opacity: 0; }
  html[data-menu] .brand .sign.full, html[data-menu] .brand p { opacity: 0; visibility: hidden; transition: opacity .1s, visibility 0s .1s; }
  html[data-menu] .brand .sign.mono { opacity: 1; visibility: visible; transition: opacity .22s .14s, visibility 0s; }
  html[data-menu] .side .rail-btn { left: 21px; }
  html[data-menu] .side .rail-btn svg { transform: scaleX(-1); }
  html[data-menu] .side .foot { height: 120px; }
  html[data-menu] .side .foot .me { flex: none; width: 48px; border-radius: 50%; }
  html[data-menu] .side .foot .me-who { display: none; }
  html[data-menu] .side .foot .out, html[data-menu] .side .foot .me-who { opacity: 0; }
  html[data-menu] .side .foot-tools { opacity: 1; visibility: visible; transition: opacity .22s .14s, visibility 0s; }
  /* out of the way entirely */
  html[data-menu="hide"] .shell { --sw: 0px; }
  html[data-menu="hide"] .side { visibility: hidden; transition: width .32s var(--ease), visibility 0s .32s; }
  .shell .peek { display: grid; place-items: center; position: fixed; z-index: 6; left: 0; top: 50%; width: 18px; height: 68px; margin-top: -34px; padding: 0 2px 0 0; border: 0; border-radius: 0 12px 12px 0; cursor: pointer; color: #2b1c00;
    background: linear-gradient(90deg, #8a5f17, #f3c868 55%, #c8962f); box-shadow: 0 0 0 1.5px #2a1c05, 4px 0 14px rgba(0,0,0,.5); opacity: .72; transition: width .16s cubic-bezier(.2,1.5,.4,1), opacity .15s; animation: peekIn .3s .3s cubic-bezier(.2,1.4,.4,1) both; }
  .shell .peek:hover, .shell .peek:focus-visible { width: 28px; opacity: 1; }
  .shell .peek svg { margin-left: -1px; }
  @keyframes peekIn { from { transform: translateX(-20px); } }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(88vw, 330px); z-index: 30; transform: translateX(-104%); transition: transform .34s cubic-bezier(.2,.9,.25,1); border-radius: 0 26px 26px 0; overflow: hidden;
    box-shadow: inset -1px 0 0 #6b4b10, inset -3px 0 0 #f3c868, inset -4px 0 0 #6b4b10, 30px 0 60px rgba(0,0,0,.6); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .shell.open .side { transform: none; }
  .shell .scrim { display: block; position: fixed; inset: 0; z-index: 25; border: 0; padding: 0; background: rgba(2,12,10,.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .shell.open .scrim { opacity: 1; pointer-events: auto; }
  .brand { height: 126px; }
  .side .x { display: grid; place-items: center; position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-2); background: rgba(0,0,0,.25); color: var(--lamp); cursor: pointer; }
  .nav { padding: 0 14px 12px 12px; }
  .nav a.item { height: 56px; font-size: 17px; gap: 13px; }
  .nav a.item .ico, .nav a.item .ico svg { width: 40px; height: 40px; }
  .shell.open .nav a.item { animation: drawerItem .4s cubic-bezier(.2,1.2,.3,1) both; animation-delay: calc(var(--i, 0) * 26ms + 60ms); }
  @keyframes drawerItem { from { opacity: 0; transform: translateX(-22px); } }
  .side .foot { height: 82px; padding: 0 16px 17px 16px; }
  .shell .topbar { position: relative; z-index: 4; display: grid; grid-template-columns: 48px 1fr 44px 48px; align-items: center; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0;
    background: radial-gradient(70% 160% at 50% 0, rgba(255,95,162,.16), transparent 70%), #051d19; box-shadow: inset 0 -1px 0 #6b4b10, inset 0 -2.5px 0 #d9a53c, inset 0 -3.5px 0 #6b4b10, 0 10px 24px -14px #000; }
  .topbar .tb { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--lamp); cursor: pointer; }
  .topbar .tb:active { transform: scale(.92); }
  .topbar #menuBtn { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .topbar #meBtn { background: radial-gradient(circle at 50% 30%, #27806f, #0b322c 78%); box-shadow: 0 0 0 2px var(--brass-deep), 0 0 0 3.5px #2a1c05; width: 40px; height: 40px; justify-self: center; }
  .topbar #meBtn .pic { position: relative; display: block; width: 40px; height: 40px; }
  .topbar #meBtn .pic svg { position: absolute; left: -6.85%; top: -13.17%; bottom: auto; width: 113.7%; height: 113.7%; max-width: none; filter: none; overflow: visible; }
  .topbar .mid { display: grid; place-items: center; min-width: 0; overflow: visible; height: 100%; }
  .topbar #sndBtn { width: 40px; height: 40px; color: var(--lamp); opacity: .9; } .topbar #sndBtn[aria-pressed="true"] { color: var(--dim); }
  .topbar .sign { font-size: 36px; line-height: 1; padding: 2px 6px 0; transform: rotate(-4deg); transform-origin: center; transition: opacity .25s; }
  .shell.at-home .topbar .sign { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .main iframe, .curtain, .curtain .tok, .side, .side *, .tip, .shell .peek { transition: none !important; }
  .shell.open .nav a.item, .nav a.item .live::before, .tip.in, .shell .peek, .side .foot .me-av.fresh { animation: none !important; }
}

/* Inside the frame */
.page { max-width: 1080px; margin: 0 auto; padding: 30px 28px 70px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h2 { margin: 2px 0 0; font: 800 clamp(30px, 5vw, 44px)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--white); }
.page-head p { margin: 10px 0 0; color: var(--chalk); max-width: 60ch; }
@media (max-width: 560px) { .page { padding: 20px 16px 60px; } }

/* ───────── The front door at night (sign-in and the invite welcome). */
body.fd { min-height: 100vh; min-height: 100dvh; display: grid; background: #030e0c; overflow-x: hidden; }
.fd-street {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding: 26px 16px 34px; isolation: isolate; overflow: hidden; min-width: 0;
  background:
    radial-gradient(70% 44% at 50% 14%, rgba(255,95,162,.30), transparent 72%),
    radial-gradient(46% 30% at 50% 100%, rgba(255,214,140,.10), transparent 70%),
    linear-gradient(rgba(2,10,9,.25), rgba(2,10,9,.82) 88%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='60'%3E%3Crect width='72' height='60' fill='%23103730'/%3E%3Crect x='0' y='0' width='36' height='30' fill='%230d2f29'/%3E%3Crect x='18' y='30' width='36' height='30' fill='%23143f37'/%3E%3Cpath d='M0 1.500h72M0 31.500h72M1.500 0v30M37.500 0v30M19.500 30v30M55.500 30v30' stroke='%23041412' stroke-width='3'/%3E%3C/svg%3E");
}
.fd-signbox { position: relative; z-index: 2; margin: 0 0 -6px; padding: 0 10px; text-align: center; }
.fd-signbox .sign { font-size: clamp(60px, 17vw, 104px); transform-origin: center; -webkit-text-stroke-width: 1px; }
.fd-way { position: relative; width: min(400px, calc(100% - 30px)); perspective: 1400px; border-radius: 50% 50% 8px 8px / 150px 150px 8px 8px;
  background: radial-gradient(70% 60% at 50% 60%, #ffe2a0, #e9a13b 45%, #7a3d12 100%); box-shadow: 0 0 0 5px #1b1206, 0 0 0 12px #7a5413, 0 0 0 13.5px #f3c868, 0 0 0 17px #1b1206, 0 30px 50px -10px #000; }
.fd-door { position: relative; display: block; margin: 0; padding: 30px 30px 30px; border-radius: inherit; transform-origin: 0 50%; transition: transform .75s cubic-bezier(.6,0,.3,1), filter .75s;
  background: radial-gradient(90% 40% at 50% 0, rgba(255,95,162,.20), transparent 70%), linear-gradient(100deg, #0e3f37, #135045 45%, #0c352e);
  box-shadow: inset 0 0 0 2px #072722, inset 0 0 0 10px #10463c, inset 0 0 0 11.5px #06211d, inset 0 -3px 30px rgba(0,0,0,.45); }
.fd-way.open .fd-door { transform: rotateY(-66deg); filter: brightness(.6); }
.fd-hatch { position: relative; width: 168px; height: 54px; margin: 6px auto 0; border-radius: 12px; background: #020807; overflow: hidden; box-shadow: 0 0 0 3px #7a5413, 0 0 0 4.5px #f3c868, 0 0 0 7px #2a1c05, inset 0 6px 12px #000; }
.fd-hatch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fd-hatch .pupil { transform: translate(calc(var(--look, 0) * 7px), calc(var(--down, 0) * 3px)); transition: transform .15s; }
.fd-hatch .lid { transform-origin: 50% 0; transform: scaleY(var(--lid, .12)); transition: transform .18s; }
.fd-hatch .shutter { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #8a6418 0 12px, #b88a2c 12px 14px, #6b4b10 14px 26px); transform: translateX(-102%); transition: transform .3s cubic-bezier(.3,1.3,.4,1); box-shadow: inset 0 0 12px rgba(0,0,0,.5); }
.fd-hatch.shut .shutter { transform: none; }
.fd-hatch.squint { --lid: .55; }
.fd-says { min-height: 27px; margin: 16px 0 16px; text-align: center; font: 700 19px/1.35 var(--font-sans); color: var(--lamp); text-wrap: balance; }
.fd-door label.field > span { font: 600 14px/1.3 var(--font-sans); color: var(--chalk); }
.fd-door .input { min-height: 50px; background: #062019; border-color: #2c7567; }
.fd-door .err { min-height: 22px; margin: -4px 0 10px; color: #ffb3a4; font: 600 15px/1.4 var(--font-sans); }
.fd-door .err:empty { min-height: 6px; }
.fd-door .btn.primary { width: 100%; min-height: 56px; font-size: 18px; font-weight: 800; box-shadow: 0 5px 0 var(--brass-deep); transition: transform .08s, box-shadow .08s, background .12s; }
.fd-door .btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--brass-deep); }
.fd-knob { position: absolute; right: 13px; top: 56%; width: 9px; height: 46px; border-radius: 6px; background: linear-gradient(90deg, #f7dc9a, #b98220); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.fd-step { width: min(470px, 100%); height: 18px; margin-top: 17px; border-radius: 3px 3px 0 0; background: linear-gradient(#3b4a46, #1a2422); box-shadow: 0 -1px 0 #55665f inset, 0 12px 26px rgba(255,214,140,.10); }
.fd-note { max-width: 36ch; margin: 22px 0 0; text-align: center; font: 500 15px/1.5 var(--font-sans); color: #9db8ae; }
.fd-note b { color: var(--lamp); font-weight: 700; }
.fd-shake { animation: fdShake .45s both; }
@keyframes fdShake { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(7px); } 45% { transform: translateX(-9px); } 58% { transform: translateX(9px); } }
@media (max-width: 420px) { .fd-door { padding: 26px 22px 26px; } .fd-knob { right: 7px; } .fd-way { border-radius: 50% 50% 8px 8px / 130px 130px 8px 8px; } }
@media (max-height: 760px) { .fd-street { align-content: start; } .fd-signbox .sign { font-size: clamp(54px, 14vw, 84px); } }
@media (prefers-reduced-motion: reduce) { .fd-door, .fd-hatch .shutter, .fd-hatch .pupil, .fd-hatch .lid { transition: none; } .fd-shake { animation: none; } }