/* The Back Room — the house Zen palette (Hex Smash), Space Grotesk self-hosted.
 * The club photos carry all the colour; the chrome stays warm, dark and flat. */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --ground: #262421;
  --panel: #21201d;
  --panel-2: #4b4741;
  --ink: #e4e1dd;
  --ink-dim: #98948e;
  --rule: #221f1c;
  --rule-soft: #2f2c28;
  --accent: #81b64c;
  --accent-ink: #1a1a17;
  --good: #81b64c;
  --warn: #d9a13b;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 0px;
  --rule-w: 1.5px;
  --shadow-hard: none;
  color-scheme: dark;
}
.big, .display { font-weight: 700 !important; }

/* ---- FurryTwerk's door: the host chrome dressed for the club ---------------- */
:root { --neon: #ff2f8e; --cyan: #2fe3ff; }
body { background: #0b0710; }
.screen.on-splash {
  background: transparent; box-shadow: none; clip-path: none; border: 0;
  padding: 0 0 max(10px, env(safe-area-inset-bottom));
}
.screen.on-splash > .big { display: none; }            /* the wordmark is in the art */
.screen.on-splash > .label:first-child { color: var(--neon); letter-spacing: .3em; font-weight: 700; font-size: 12px; }
.screen.on-splash > .muted { color: #e8dcef; font-size: 17px; font-weight: 500; text-shadow: 0 2px 10px #000; }
.screen.on-splash .btn {
  background: var(--accent); color: var(--accent-ink); border: 0; min-height: 58px; font-size: 20px;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1.5px #1a1a17, 0 0 28px rgba(129,182,76,.55);
}
.screen.on-splash .btn.ghost {
  background: rgba(11,7,16,.62); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18);
  min-height: 48px; font-size: 16px; text-transform: none; letter-spacing: 0; backdrop-filter: blur(6px);
}
.screen.on-splash .feet .textlink { color: #a99bb3; }
/* desktop: the door is the whole visit */
.ft-desktop .screen.on-splash > :not(.feet) { display: none; }
.ft-desktop .screen.on-splash .feet { position: fixed; left: 0; right: 0; bottom: 6px; justify-content: center; z-index: 4; }
/* result + other host screens: club dark, neon number */
.screen .big { text-shadow: 0 0 18px rgba(255,47,142,.45); }
.screen .label { color: #b8a7c4; }
.strip { font-size: 30px; }

/* ---- every host sheet (name for the board, crews, credits): club stickers ---- */
.sheet { background: rgba(11,7,16,.82); z-index: 60; }
.sheet-body {
  background: linear-gradient(180deg,#24162d,#140d18); color: #fff;
  border: 0; border-top: 3px solid var(--neon); border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 50px rgba(255,47,142,.35);
  animation: ftsheet .35s cubic-bezier(.2,1.3,.4,1);
}
@keyframes ftsheet { from { transform: translateY(60%) } }
@media (min-width: 700px) { .sheet-body { border-radius: 26px; border: 3px solid var(--neon); } }
.sheet-body h2 { font: 800 30px/1.05 "Space Grotesk", sans-serif; letter-spacing: -.02em; transform: rotate(-2deg); margin: 4px 0 8px;
  text-shadow: -3px 0 0 var(--neon), 3px 0 0 var(--cyan); }
.sheet-body .muted { color: #d9cfe0; }
.sheet-body input { background: #0b0710 !important; border: 3px solid #0b0710 !important; box-shadow: inset 0 0 0 2px rgba(47,227,255,.5); border-radius: 14px !important;
  color: #fff !important; font: 700 20px "Space Grotesk", sans-serif !important; padding: 14px !important; margin: 6px 0 14px; }
.sheet-body .btn, .screen .btn {
  border: 3px solid #0b0710 !important; border-radius: 18px !important; min-height: 58px; font: 800 19px "Space Grotesk", sans-serif !important;
  letter-spacing: .04em; text-transform: uppercase; transform: rotate(-1.5deg); box-shadow: 0 7px 0 #0b0710, 0 0 26px rgba(129,182,76,.45) !important;
  transition: transform .08s, box-shadow .08s;
}
.sheet-body .btn:active, .screen .btn:active { transform: rotate(-1.5deg) translateY(6px); box-shadow: 0 1px 0 #0b0710 !important; }
.sheet-body .btn.ghost, .screen .btn.ghost { background: #1c1522 !important; color: #fff !important; box-shadow: 0 7px 0 #000 !important; transform: rotate(1deg); }
.sheet-body .textlink, .sheet-body button:not(.btn) { color: #a99bb3; }
#toast { background: #ff2f8e; color: #fff; font: 800 15px "Space Grotesk", sans-serif; border: 3px solid #0b0710; box-shadow: 0 5px 0 #0b0710; }
/* the board, for the night you already played */
ol.board li { background: #1c1522; border: 3px solid #0b0710; border-radius: 14px; box-shadow: 0 4px 0 #0b0710; margin-bottom: 8px; padding: 10px 12px; color: #fff; }
ol.board .v { color: var(--neon); }