/* =====================================================================
   SWIFTY'S JOOK JOINT - shared stylesheet
   Cozy small-web / neocities vibe, inspired by dimden.dev.
   Each "room" (page) overrides a few CSS variables via a body class.
   ===================================================================== */

/* ---- Theme tokens (home / juke-joint base) ------------------------- */
:root{
  --bg: #14110f; /* warm near-black */
  --bg2: #1d1916; /* panel background */
  --bg3: #2a231e; /* raised / hover */
  --ink: #ece3d6; /* main text (warm off-white) */
  --muted: #9c9082; /* secondary text */
  --line: #3a322b; /* borders / rules */
  --accent: #ffb347; /* warm amber neon */
  --accent2: #ff5d8f; /* hot pink neon */
  --ok: #6ee36e; /* terminal green */
  --warn: #ffd23f; /* amber */
  --down: #ff5b5b; /* red */
  --link: var(--accent);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --font-pixel: 'Silkscreen', 'Courier New', monospace;
  --font-term: 'VT323', 'Courier New', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;

  --wrap: 760px;
}

/* ---- Reset-ish ----------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle CRT scanlines + vignette over everything */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%);
  mix-blend-mode:multiply; opacity:.55;
}

/* =====================================================================
   THE DOOR IS SHUT (gate.js) - 8am to 5pm, unless you know the word.
   `shut` lands on <html> from the <head>, so nothing behind the sign is
   ever painted. The scanlines live on body::before, not a child, which
   is why the CRT stays on while the joint is dark.
   ===================================================================== */
html.shut, html.shut body{ overflow:hidden; height:100%; }
html.shut body > *{ display:none !important; }
html.shut body > .gate{ display:flex !important; }

.gate{
  position:fixed; inset:0; z-index:9990;
  align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, #1a1512 0%, #0b0908 60%, #060505 100%);
}
.gate-card{
  width:min(430px, 100%); text-align:center;
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px 22px; box-shadow:var(--shadow);
}
.gate-card.nope{ animation:gateNope .4s; }
@keyframes gateNope{ 20%{ transform:translateX(-9px) } 55%{ transform:translateX(7px) } 80%{ transform:translateX(-3px) } }
.gate-sign{ margin-bottom:14px; }
.gate-sign span{
  display:inline-block; font-family:var(--font-pixel); font-size:16px; letter-spacing:.34em;
  color:#ffd9d9; padding:7px 16px 7px 20px; border-radius:5px;
  border:2px solid color-mix(in srgb, var(--down) 80%, transparent);
  text-shadow:0 0 8px var(--down);
  box-shadow:0 0 18px color-mix(in srgb, var(--down) 40%, transparent),
             inset 0 0 12px color-mix(in srgb, var(--down) 20%, transparent);
  animation:openBuzz 3.4s steps(1) infinite;
}
.gate-rac{ width:54px; margin:0 auto 6px; opacity:.75; }
.gate-rac svg{ width:100%; height:auto; }
.gate-card h1{ font-size:17px; margin:6px 0 4px; color:var(--ink); }
.gate-when{ color:var(--muted); font-family:var(--font-term); font-size:19px; margin:0 0 16px; }
.gate-when b{ color:var(--accent); }
.gate-form{ display:flex; gap:8px; }
.gate-input{
  flex:1; min-width:0; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.gate-input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.gate-btn{
  font-family:var(--font-pixel); font-size:11px; letter-spacing:.5px; cursor:pointer;
  color:var(--bg); background:var(--accent); border:0; border-radius:10px; padding:10px 16px;
}
.gate-btn:hover{ filter:brightness(1.08); }
.gate-msg{ min-height:1.5em; margin:12px 0 0; font-family:var(--font-term); font-size:19px; color:var(--down); }
.gate-msg.good{ color:var(--ok); }

/* ---- the book: a card over the room, not instead of it ------------- */

.book-veil{
  position:fixed; inset:0; z-index:9980;
  background:rgba(6,5,5,.46);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  transition:background .32s ease, backdrop-filter .32s ease;
}
/* The card sits in the middle of the room. The wrapper spans the screen so
   it can centre the card, and takes no clicks itself, or it would swallow
   the notice sitting over in the corner. */
.book{
  position:fixed; inset:0; z-index:9982;
  display:flex; align-items:center; justify-content:center;
  padding:18px; pointer-events:none;
}
.book-card{
  width:min(330px, 100%); pointer-events:auto;
  transition:filter .32s ease;
  position:relative; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:16px 16px 14px; box-shadow:var(--shadow);
  animation:bookIn .34s cubic-bezier(.25,1,.3,1) both;
}
@keyframes bookIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.book-card.nope{ animation:gateNope .4s; }
.book-top{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.book-rac{ width:30px; flex:0 0 30px; opacity:.8; }
.book-rac svg{ width:100%; height:auto; display:block; }
.book-card h2{ font-size:14px; margin:0; color:var(--ink); }
.book-say{ margin:0 0 12px; font-family:var(--font-term); font-size:17px; line-height:1.35; color:var(--muted); }
.book-msg{ min-height:1.2em; margin:9px 0 0; font-family:var(--font-term); font-size:16px; color:var(--down); }
.book-msg.good{ color:var(--ok); }

/* ---- shut until the notice is accepted ------------------------------
   The room goes soft and the name card goes with it. Blur alone would be
   theatre, so gate.js disables the field underneath at the same time. */
.book-wrap.waiting .book-veil{
  background:rgba(6,5,5,.62);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.book-wrap.waiting .book-card{
  filter:blur(4px);
  pointer-events:none; user-select:none;
}

/* ---- the privacy notice -------------------------------------------- *
   Standard issue on purpose. A light card, a system face, one button,
   sitting in the opposite corner. It is not part of the joint and is not
   supposed to look like it is.                                          */

.notice-pop{
  position:fixed; left:18px; bottom:18px; z-index:9990;
  width:min(340px, calc(100vw - 36px));
  background:#fbfbfa; color:#1c1c1b;
  border:1px solid #d9d9d6; border-radius:8px;
  padding:14px 15px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11.5px; line-height:1.55;
  animation:bookIn .34s cubic-bezier(.25,1,.3,1) both;
}
.notice-pop.gone{ opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; }
.notice-pop .np-h{ margin:0 0 6px; font-size:12.5px; font-weight:600; color:#000; }
.notice-pop p{ margin:0 0 8px; }
.notice-pop a{ color:#1a4fd6; }
.np-act{ display:flex; justify-content:flex-end; margin-top:10px; }
.np-ok{
  font:inherit; font-weight:600; font-size:11.5px;
  padding:6px 18px; border:1px solid #1c1c1b; border-radius:5px;
  background:#1c1c1b; color:#fff; cursor:pointer;
}
.np-ok:hover{ background:#000; }
.np-ok:focus-visible{ outline:2px solid #1a4fd6; outline-offset:2px; }

@media (max-width:720px){
  .book{ padding:12px; }
  .notice-pop{ left:12px; right:12px; width:auto; bottom:12px; }
}

/* the way in for the house. dead square, bottom right corner of a card. */
.gate-card, .book-card{ position:relative; }
.gate-slip{
  position:absolute; right:0; bottom:0; width:30px; height:30px;
  padding:0; margin:0; border:0; background:transparent;
  appearance:none; -webkit-appearance:none; cursor:default; opacity:0;
}
.gate-slip:focus{ outline:none; }

@media (prefers-reduced-motion:reduce){
  .gate-card.nope{ animation:none; } .gate-sign span{ animation:none; }
}

/* ---- Layout -------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* for labels that only a screen reader needs */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

main{ padding:18px 0 70px; }

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

img{ max-width:100%; image-rendering:pixelated; }

hr{ border:0; border-top:1px dashed var(--line); margin:30px 0; }

/* ---- Top bar ------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; gap:14px; height:58px; }
.brand{
  font-family:var(--font-pixel); font-size:15px; letter-spacing:.5px; margin-right:auto;
  color:var(--ink); display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand .blip{
  width:10px; height:10px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 10px var(--ok); animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Jukebox button (topbar) -------------------------------------- */
.juke-wrap{ position:relative; display:inline-flex; flex:none; }
.jukebox-btn{
  font-family:var(--font-pixel); font-size:12px;
  color:var(--accent); background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:6px 14px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, background .15s, transform .1s;
}
.jukebox-btn:hover{ border-color:var(--accent); background:var(--bg3); transform:translateY(-1px); }
.jukebox-btn.playing{ border-color:var(--accent2); color:var(--accent2); animation:pulse 2s infinite; }
/* the jukebox block icon sits inside the button, left of the label */
.jukebox-btn{ display:inline-flex; align-items:center; gap:7px; }
.juke-ico{ width:18px; height:18px; display:block; image-rendering:pixelated; }
.jukebox-btn.playing .juke-ico{ animation:jukeBop .6s ease-in-out infinite; }
@keyframes jukeBop{ 50%{ transform:translateY(-2px) rotate(-4deg); } }

/* ---- "turn on music" - an arrow at the jukebox, once ---------------- */
.music-hint{
  position:absolute; top:calc(100% + 13px); right:2px; z-index:60;
  font-family:var(--font-term); font-size:19px; line-height:1; white-space:nowrap;
  color:#14110f; background:var(--accent2); border-radius:9px; padding:6px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  animation:hintBob 1.5s ease-in-out infinite;
}
.music-hint .mh-arrow{         /* the point of the thing, aimed at the button */
  position:absolute; right:22px; bottom:100%;
  border:8px solid transparent; border-bottom-color:var(--accent2);
}
@keyframes hintBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
@media (prefers-reduced-motion:reduce){ .music-hint{ animation:none; } }

/* ---- Neon sign (home title) --------------------------------------- */
.sign{
  font-family:var(--font-pixel); font-weight:700;
  font-size:clamp(28px, 6vw, 50px); line-height:1.1; margin:8px 0 6px;
  color:var(--accent);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--accent) 80%, #fff),
    0 0 18px var(--accent), 0 0 36px color-mix(in srgb,var(--accent) 60%, transparent);
  animation:flickerSign 6s infinite;
}
.sign .pink{ color:var(--accent2);
  text-shadow:0 0 6px #fff, 0 0 18px var(--accent2), 0 0 36px color-mix(in srgb,var(--accent2) 60%, transparent); }
@keyframes flickerSign{
  0%,18%,22%,25%,53%,57%,100%{ opacity:1 }
  19%,24%,55%{ opacity:.55 }
}
.tagline{ color:var(--muted); margin:0 0 6px; font-size:16px; }

/* ---- Headings / prose --------------------------------------------- */
h1,h2,h3{ font-family:var(--font-pixel); line-height:1.25; }
h1{ font-size:clamp(24px,5vw,36px); margin:.2em 0 .4em; }
h2{ font-size:20px; margin:1.6em 0 .5em; color:var(--accent); }
h3{ font-size:15px; margin:1.3em 0 .3em; color:var(--ink); }
.lead{ font-size:18px; color:var(--ink); }
.muted{ color:var(--muted); }
small,.small{ font-size:13px; }

/* editable hint */
.note{
  font-size:13px; color:var(--warn);
  border-left:3px solid var(--warn); padding:6px 12px; margin:14px 0;
  background:color-mix(in srgb,var(--warn) 8%, transparent); border-radius:0 8px 8px 0;
}
.note::before{ content:"✎ "; }

/* ---- Panels / cards ------------------------------------------------ */
.panel{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow); margin:18px 0;
}
.panel.tight{ padding:14px 16px; }

/* ---- Systems status terminal -------------------------------------- */
.status{
  font-family:var(--font-term); font-size:21px; line-height:1.45;
  background:#0c0a08; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; box-shadow:inset 0 0 40px rgba(0,0,0,.6), var(--shadow);
  overflow:hidden;
}
.status .head{
  color:var(--muted); border-bottom:1px solid var(--line);
  padding-bottom:6px; margin-bottom:8px; display:flex; justify-content:space-between;
}
.status .head b{ color:var(--ok); }
.status-row{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.status-row .tag{
  color:var(--muted); display:inline-block; min-width:64px;
}
.status-row .tag::before{ content:"[ "; }
.status-row .tag::after{ content:" ]"; }
.status-row.ok .tag{ color:var(--ok); }
.status-row.down .tag{ color:var(--down); }
.status-row.check .tag{ color:var(--warn); }
.status-row .svc{ color:var(--ink); }
.status-row a.svc:hover{ color:var(--accent); }
.status-row .fill{ flex:1; border-bottom:2px dotted var(--line); transform:translateY(-4px); }
.status-row .ping{ color:var(--muted); font-size:16px; }
.blink{ animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* ---- Rooms grid (home) -------------------------------------------- */
.rooms{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0;
}
.room-card{
  display:block; background:var(--bg2); border:1px solid var(--line);
  border-radius:14px; padding:16px; color:var(--ink); position:relative;
  overflow:hidden; transition:transform .15s ease, border-color .15s ease;
}
.room-card:hover{ transform:translateY(-3px); text-decoration:none; border-color:var(--accent); }
.room-card .ico{ font-size:30px; display:block; margin-bottom:6px; }
.room-card .rname{ font-family:var(--font-pixel); font-size:15px; }
.room-card .rdesc{ color:var(--muted); font-size:13.5px; margin-top:4px; }
.room-card::after{
  content:"→"; position:absolute; right:14px; top:14px; color:var(--muted);
  transition:transform .15s ease, color .15s;
}
.room-card:hover::after{ transform:translateX(4px); color:var(--accent); }

/* ---- Generic tag chips / lists ------------------------------------ */
.chips{ list-style:none; padding:0; margin:10px 0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  font-family:var(--font-term); font-size:17px; background:var(--bg3);
  border:1px solid var(--line); border-radius:999px; padding:2px 12px; color:var(--ink);
}
.tick{ list-style:none; padding:0; margin:10px 0; }
.tick li{ padding:3px 0 3px 26px; position:relative; }
.tick li::before{ content:"✔"; position:absolute; left:0; color:var(--ok); }
.tick li.todo::before{ content:"▢"; color:var(--muted); }

/* the "what I'd add next" lists. Not a checklist - nothing here gets
   ticked off, they are just the ideas, so they get a rule and no box. */
.plain{ list-style:none; padding:0; margin:8px 0 0; }
.plain li{
  padding:8px 0 8px 16px; position:relative; font-size:15px;
  border-top:1px solid var(--line);
}
.plain li:first-child{ border-top:0; padding-top:2px; }
.plain li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }

/* ---- Now-playing, top right ----------------------------------------
   It reports the audio element, nothing else: if the bars are moving,
   sound is coming out. Off the air it goes grey and the bars sit down. */
.nowplaying{
  font-family:var(--font-term); font-size:17px; color:var(--accent2);
  border:1px dashed var(--line); border-radius:9px; padding:3px 11px;
  display:flex; align-items:center; gap:9px; min-width:0; flex:0 1 auto;
  max-width:min(38vw, 260px); overflow:hidden; white-space:nowrap;
}
.nowplaying .track{ overflow:hidden; text-overflow:ellipsis; }
.nowplaying .eq{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; flex:none; }
.nowplaying .eq i{ width:3px; height:4px; background:var(--accent2); animation:eq .9s ease-in-out infinite; }
.nowplaying .eq i:nth-child(2){ animation-delay:.15s } .nowplaying .eq i:nth-child(3){ animation-delay:.3s }
.nowplaying .eq i:nth-child(4){ animation-delay:.45s }
@keyframes eq{ 0%,100%{height:4px} 50%{height:14px} }
.nowplaying.off{ color:var(--muted); }
.nowplaying.off .eq i{ animation:none; height:3px; background:var(--muted); }
@media (max-width:720px){ .nowplaying{ display:none; } }

/* ---- Prev / next room nav ----------------------------------------- */
.room-nav{
  display:flex; justify-content:space-between; gap:12px; margin-top:36px;
  border-top:1px solid var(--line); padding-top:16px; font-weight:600;
}
.room-nav a{ color:var(--muted); }
.room-nav a:hover{ color:var(--accent); }
.back-link{ display:inline-block; margin:6px 0 2px; color:var(--muted); font-size:14px; }

/* ---- Footer -------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line); margin-top:40px; padding:22px 0 60px;
  color:var(--muted); font-size:13.5px;
}
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; }
/* the 88x31 buttons never fit on the same line as the two text spans
   (they need ~731px inside a 716px wrap), so give them their own
   centered row instead of letting the row stretch to the edges. */
.btns88{ display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; justify-content:center; }
@media (max-width:560px){
  .site-foot .wrap{ justify-content:center; text-align:center; }
}
/* the classic 88x31 badge. The labels are wider than 88px on one line, so
   they wrap - two 10px lines still sit comfortably inside the 31px box. */
.btn88{
  font-family:var(--font-pixel); font-size:9px; line-height:1.1; letter-spacing:.3px;
  width:88px; height:31px; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; padding:2px 4px; overflow:hidden;
  text-align:center; border:1px solid var(--line); border-radius:3px; color:var(--ink);
  background:linear-gradient(160deg, var(--bg3), var(--bg2));
}
.btn88:hover{ border-color:var(--accent); text-decoration:none; }

/* ---- Guestbook ----------------------------------------------------- */
.gb-form{ display:block; }
.gb-row{ display:flex; gap:10px; margin-bottom:10px; }
.gb-input{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.gb-input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
#gb-name{ flex:1; min-width:0; }
.gb-mood{ width:140px; cursor:pointer; }
.gb-msg{ width:100%; resize:vertical; min-height:64px; }
.gb-actions{ display:flex; align-items:center; gap:14px; margin-top:10px; }
.gb-sign{
  font-family:var(--font-pixel); font-size:12px; color:var(--bg); background:var(--accent);
  border:0; border-radius:10px; padding:11px 16px; cursor:pointer; letter-spacing:.5px;
  transition:transform .12s ease, filter .12s ease;
}
.gb-sign:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.gb-sign:active{ transform:translateY(0); }

.gb-entry{
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:12px; padding:12px 16px; margin:12px 0; box-shadow:var(--shadow);
  animation:gbIn .25s ease;
}
@keyframes gbIn{ from{ opacity:0; transform:translateY(-6px) } }
.gb-entry .gb-meta{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.gb-entry .gb-who{ font-family:var(--font-pixel); font-size:13px; color:var(--accent); }
.gb-entry .gb-mood-ico{ /* a little wax seal */
  font-size:13px; width:26px; height:26px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c23b3b, #7e1f1f 70%);
  box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 0 4px rgba(0,0,0,.45);
  transform:rotate(-8deg);
}
.gb-entry .gb-date{ color:var(--muted); font-size:12.5px; margin-left:auto; }
.gb-entry .gb-body{ white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.gb-entry.host{ border-left-color:var(--accent); }
.gb-empty{ color:var(--muted); }

/* guestbook banner: the joint is open late */
.gb-banner{
  display:block; width:100%; height:170px; object-fit:cover; object-position:center 42%;
  border:1px solid var(--line); border-radius:12px; margin:14px 0 18px;
  image-rendering:auto; box-shadow:var(--shadow);
}

/* ---- pixel stamp doodles ------------------------------------------- */
.gb-stamp-wrap{ margin:10px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gb-stamp-pad{
  display:grid; grid-template-columns:repeat(8, 20px); grid-auto-rows:20px;
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; touch-action:none; cursor:crosshair;
}
.gb-stamp-cell{ background:var(--bg); transition:background .06s; }
.gb-stamp-cell.on{ background:var(--accent2); }
.gb-stamp-clear{
  font-family:var(--font-pixel); font-size:10px; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer;
}
.gb-stamp-clear:hover{ color:var(--ink); border-color:var(--muted); }
.gb-stamp{
  display:inline-grid; grid-template-columns:repeat(8, 3px); grid-auto-rows:3px;
  gap:0; vertical-align:middle; image-rendering:pixelated;
}
.gb-stamp i{ background:transparent; }
.gb-stamp i.on{ background:var(--accent2); }

/* (the 404 room's styles live in css/notfound.css) */

@media (max-width:560px){
  .gb-row{ flex-direction:column; }
  .gb-mood{ width:100%; }
}

/* =====================================================================
   ROOM THEMES - override tokens per page via <body class="room-…">
   ===================================================================== */

/* FNAF - a colder, dirtier night shift. Grimy blue-grey dark, sodium-lamp
   amber, and a sickly red that only shows up when something is wrong. */
body.room-fnaf{
  --bg:#04060a; --bg2:#080c13; --bg3:#0e141d; --ink:#c3ccd8; --muted:#5d6b7d;
  --line:#18202c; --accent:#b3262a; --accent2:#3d5a73; --link:#c8474a;
  --sodium:#c98a3c;
}
body.room-fnaf .sign{ animation:flickerHard 3.5s infinite; }
@keyframes flickerHard{ 0%,12%,14%,40%,42%,100%{opacity:1} 13%,41%,70%{opacity:.25} 71%{opacity:1} }
.office-eyes{ font-size:30px; letter-spacing:14px; color:var(--accent); animation:blink 4s steps(2) infinite; }

/* Stardew - cozy green farm, golden hour */
body.room-stardew{
  --bg:#10160e; --bg2:#18211440; --bg2:#172013; --bg3:#23301d; --ink:#eef2df; --muted:#9fae87;
  --line:#33422a; --accent:#8fcf4f; --accent2:#f2c24b; --link:#a7e065;
}

/* Undertale - black void, white text, determination yellow + red */
body.room-undertale{
  --bg:#000; --bg2:#0a0a0a; --bg3:#141414; --ink:#ffffff; --muted:#9a9a9a;
  --line:#2a2a2a; --accent:#ffd400; --accent2:#ff2a2a; --link:#ffd400;
  font-family:var(--font-term);
}
body.room-undertale{ font-size:20px; }
.dialogue{
  border:4px solid #fff; border-radius:4px; background:#000; color:#fff;
  font-family:var(--font-term); font-size:24px; line-height:1.4; padding:18px 20px;
  box-shadow:0 0 0 4px #000, 0 0 24px rgba(255,255,255,.15); margin:18px 0;
}
.dialogue .star{ color:var(--accent); }
.soul{ color:var(--accent2); text-shadow:0 0 8px var(--accent2); }
.savepoint{
  background:none; border:0; cursor:pointer; color:var(--accent); font-family:var(--font-term);
  font-size:24px; display:inline-flex; align-items:center; gap:10px;
}
.savepoint .yel{ animation:spin 3s linear infinite; display:inline-block; text-shadow:0 0 10px var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Fencing - steel piste, scoring lights */
body.room-fencing{
  --bg:#0c0e13; --bg2:#141822; --bg3:#1d2330; --ink:#e7ecf5; --muted:#8b97ad;
  --line:#2a3243; --accent:#d8dee9; --accent2:#3da9fc; --link:#7fc4ff;
}
.scorebox{
  display:flex; gap:18px; justify-content:center; align-items:stretch; margin:20px 0;
  background:#05070b; border:1px solid var(--line); border-radius:12px; padding:18px;
}
.lamp{ flex:1; max-width:160px; text-align:center; }
.lamp .bulb{
  height:74px; border-radius:8px; border:2px solid #000; background:#1a1a1a;
  box-shadow:inset 0 0 24px #000; transition:all .12s;
}
.lamp.red.on .bulb{ background:#ff2b2b; box-shadow:0 0 26px 6px #ff2b2b, inset 0 0 10px #fff; }
.lamp.green.on .bulb{ background:#27e36a; box-shadow:0 0 26px 6px #27e36a, inset 0 0 10px #fff; }
.lamp .lab{ font-family:var(--font-pixel); font-size:10px; color:var(--muted); margin-top:8px; }
.enguarde{ text-align:center; font-family:var(--font-pixel); color:var(--muted); letter-spacing:2px; }

/* Hamilton - candlelit parchment and revolutionary blue/gold */
body.room-hamilton{
  --bg:#1a1408; --bg2:#231a0e; --bg3:#312413; --ink:#f2e6c9; --muted:#b3a184;
  --line:#4a3a20; --accent:#e8c15a; --accent2:#3c6ea5; --link:#e8c15a;
}

/* Medieval - wet stone, cold northern light, one gold gate */
body.room-medieval{
  --bg:#0f1216; --bg2:#171b21; --bg3:#222831; --ink:#e4e2d9; --muted:#8d958f;
  --line:#2e353e; --accent:#c8a24a; --accent2:#9fb6cc; --link:#d8b45e;
}

/* =====================================================================
   RACCOON cursor-follower
   ===================================================================== */
#raccoon{
  position:fixed; left:0; top:0; width:48px; height:48px; z-index:9000;
  pointer-events:none; transform:translate(-100px,-100px);
  will-change:transform; filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));
}
#raccoon.run .bob{ animation:racBob .28s steps(2) infinite; }
@keyframes racBob{ 50%{ transform:translateY(-3px) } }
#raccoon.morphing{ animation:racMorph .4s steps(4) infinite; }
@keyframes racMorph{
  25%{ filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)) brightness(2.1) saturate(0); }
  75%{ filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)) brightness(1.4) hue-rotate(90deg); }
}
#raccoon .tail{ transform-origin:6px 30px; animation:wag 1.6s ease-in-out infinite; }
@keyframes wag{ 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(8deg) } }
.rac-speech{
  position:fixed; z-index:9001; pointer-events:none; font-family:var(--font-term);
  font-size:18px; background:#fff; color:#111; border:2px solid #111; border-radius:10px;
  padding:2px 10px; transform:translate(-50%,-130%); white-space:nowrap;
  box-shadow:2px 2px 0 #111; opacity:0; transition:opacity .2s;
}
.rac-speech.show{ opacity:1; }

/* =====================================================================
   Responsive + motion/touch preferences
   ===================================================================== */
@media (max-width:560px){
  body{ font-size:16px; }
  .rooms{ grid-template-columns:1fr; }
  .nav{ font-size:13px; }
  .scorebox{ flex-direction:column; align-items:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto; }
  body::before{ background:radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%); }
}

/* Hide the raccoon when there's no real pointer (touch) */
@media (pointer:coarse){
  #raccoon, .rac-speech{ display:none !important; }
}

/* =====================================================================
   BOTTLE CAP HUNT (quest.js) - toast + shelf, shared by every room
   ===================================================================== */
.cap-toast{
  position:fixed; left:50%; bottom:26px; z-index:9500;
  transform:translate(-50%, 140%); max-width:min(92vw, 480px);
  font-family:var(--font-term); font-size:20px; line-height:1.35; text-align:center;
  background:#171310; color:#ffe9c7; border:2px solid var(--accent);
  border-radius:12px; padding:10px 18px;
  box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);
  pointer-events:none;
}
.cap-toast.show{ transform:translate(-50%, 0); }
.cap-toast.big{ border-color:var(--accent2); font-size:22px;
  box-shadow:0 0 30px color-mix(in srgb, var(--accent2) 55%, transparent), var(--shadow); }

.cap-shelf{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:12px; border:1px dashed var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--bg2) 70%, transparent);
}
.cap-slot{
  width:64px; padding:8px 0 6px; text-align:center; text-decoration:none;
  border:2px dashed var(--line); border-radius:50% 50% 12px 12px;
  color:var(--muted); background:var(--bg);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .15s, border-color .15s;
}
.cap-slot:hover{ transform:translateY(-3px); text-decoration:none; border-color:var(--accent); }
.cap-slot .cap-ico{ font-size:22px; line-height:1.2; filter:grayscale(1) opacity(.35); }
/* room initial, sitting under the cap mark */
.cap-slot .cap-lab{
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:var(--muted); line-height:1;
}
.cap-slot.got .cap-lab{ color:var(--accent); }
.cap-slot.got{ border-style:solid; border-color:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.cap-slot.got .cap-ico{ filter:none; animation:capPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes capPop{ from{ transform:scale(.2) rotate(-180deg) } }
/* the raccoon's own cap - a bonus, not one of the five the door wants */
.cap-slot.bonus{ border-color:var(--accent2);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent2) 35%, transparent); }
.cap-slot.bonus .cap-lab{ color:var(--accent2); }

/* something he is carrying off. Sits just behind him (#raccoon is 9000). */
.rac-loot{
  position:fixed; left:0; top:0; z-index:8999; pointer-events:none;
  will-change:transform; filter:drop-shadow(0 6px 6px rgba(0,0,0,.55));
}

/* mute toggle injected by sfx.js */
.mute-btn{
  font-size:14px; line-height:1; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer;
  transition:border-color .15s, transform .1s;
}
.mute-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }