/* Shared look for the Halloween games: a candlelit manor. Deliberately single dark theme. */
:root{
  --night:#120d10; --velvet:#1f1418; --velvet-2:#2b1b20; --bone:#ecdfc8; --ash:#a8988a;
  --brass:#c9a45c; --blood:#9b2229; --teal:#3f8a83; --violet:#6d4c92; --paper:#e7d9bb; --ink:#2b1e18; --warn:#e48a8f;
  --line:rgba(201,164,92,.3);
  --f-display:"IM Fell English SC","Cormorant SC",Georgia,serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  --f-type:"Special Elite","Courier New",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--bone);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(110% 65% at 50% 112%,rgba(214,128,52,.24),transparent 62%),radial-gradient(70% 45% at 85% -8%,rgba(155,34,41,.22),transparent 70%);
  animation:flicker 6s infinite steps(1)}
@keyframes flicker{0%{opacity:1}12%{opacity:.86}15%{opacity:1}48%{opacity:.93}52%{opacity:.8}55%{opacity:1}80%{opacity:.9}}
#app{position:relative;z-index:1;min-height:100%;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:540px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:.01em}
p,ol,ul{margin:0}
a{color:var(--brass)}
.eyebrow{font-family:var(--f-type);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.muted{color:var(--ash)}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.gap-l{gap:28px}
.mt{margin-top:48px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.btn{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.04em;color:var(--night);background:var(--brass);border:0;border-radius:2px;padding:12px 22px;cursor:pointer;min-height:48px;text-align:center;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn.blood{background:var(--blood);color:var(--bone)}
.chip{font-family:var(--f-type);font-size:.85rem;border:1px solid var(--line);padding:6px 12px;border-radius:2px;background:transparent;color:var(--ash);cursor:pointer;text-decoration:none}
.chip:hover{color:var(--bone);border-color:var(--brass)}
.chip.on{background:var(--brass);color:var(--night);border-color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Home */
.home{display:grid;align-content:center;gap:44px;max-width:1000px;margin:0 auto;padding-block:5vh}
.mast h1{font-size:clamp(3.2rem,11vw,8.5rem);line-height:.9}
.mast h1 small{display:block;font-size:.3em;color:var(--brass);letter-spacing:.22em;margin-bottom:.3em}
.mast p.lede{margin-top:20px}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.door{text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;
  background:linear-gradient(180deg,var(--velvet-2),var(--velvet));border:1px solid var(--line);
  border-radius:200px 200px 3px 3px / 120px 120px 3px 3px;padding:64px 26px 26px}
.door:hover{border-color:var(--brass)}
.door h2{font-size:2rem;line-height:1.1;color:var(--brass)}
.door p{color:var(--ash)}

/* TV */
.tvbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto 32px;max-width:1180px;font-family:var(--f-type);color:var(--ash);font-size:.9rem}
.big{font-size:clamp(2.3rem,5.6vw,5.2rem);line-height:1.02}
.lede{font-size:clamp(1.12rem,2vw,1.6rem);line-height:1.5;max-width:38em}
.stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:820px){.stage{grid-template-columns:1fr}}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{background:var(--velvet);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;color:inherit;font:inherit}
.card h3{font-size:1.45rem}
button.card{cursor:pointer}
button.card:hover{border-color:var(--brass)}
.pass{border:1px dashed var(--brass);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.clock{font-family:var(--f-type);font-size:clamp(3rem,8.5vw,6.8rem);line-height:1;font-variant-numeric:tabular-nums}
.center{display:grid;justify-items:center;gap:16px;text-align:center;padding-top:6vh}
.txt{font-family:var(--f-type);font-size:1.25rem;letter-spacing:.06em;background:var(--night);color:var(--bone);border:1px solid var(--line);padding:10px 12px;width:100%;min-width:0;border-radius:2px}
.txt.caps{text-transform:uppercase;letter-spacing:.18em}
.inline{display:flex;gap:8px}.inline .txt{flex:1}
.err{color:var(--warn)}
.steps{padding-left:1.3em;display:flex;flex-direction:column;gap:.55em}
.grow{flex:1;min-width:120px}
.late{animation:appear 1.2s 1.6s both}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.glow,.late{animation:none}}

/* Smooth fade between pages of the same site (ignored by browsers that do not support it) */
@view-transition{navigation:auto}