@font-face{font-family:'Fraunces';src:url(../fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ink:#07050d; --ink-2:#0d0916; --ink-3:#150f24;
  --line:rgba(241,230,208,.12); --line-2:rgba(241,230,208,.22);
  --bone:#f1e6d0; --ash:#a99fbd; --dim:#756a8c;
  --pumpkin:#ff7a1a; --amber:#ffb347; --ember:#ff4d1a; --slime:#b6ff3c;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --peek:176px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
svg{display:block}
.num{font-variant-numeric:tabular-nums}

/* ---------- map + atmosphere ---------- */
#map{position:fixed;inset:0;background:var(--ink)}
.maplibregl-canvas{outline:none}
.maplibregl-ctrl-attrib{background:rgba(7,5,13,.6)!important;color:var(--dim)!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--ash)!important}
.maplibregl-ctrl-bottom-right{z-index:12}
.atmos{position:fixed;inset:0;pointer-events:none;z-index:8}
.atmos>*{position:absolute;inset:0}
.fog{background:radial-gradient(60% 40% at 30% 70%,rgba(120,90,170,.16),transparent 70%);animation:fogA 38s ease-in-out infinite alternate;will-change:transform}
.fog-b{background:radial-gradient(55% 38% at 75% 35%,rgba(255,122,26,.07),transparent 70%);animation:fogB 52s ease-in-out infinite alternate}
@keyframes fogA{to{transform:translate3d(14%,-6%,0) scale(1.25)}}
@keyframes fogB{to{transform:translate3d(-16%,8%,0) scale(1.15)}}
.vignette{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(3,1,8,.72) 100%)}
.grain,.intro-grain{opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#embers{width:100%;height:100%;opacity:.85}
.bolt{background:#c9dcff;opacity:0}
.bolt.fire{animation:bolt 1s linear 1}
@keyframes bolt{0%{opacity:0}6%{opacity:.8}12%{opacity:.08}20%{opacity:1}34%{opacity:.05}52%{opacity:.3}100%{opacity:0}}
#bat-layer{overflow:hidden}
.bat{position:absolute;left:0;top:0;color:#05030a}
.bat use{transform-box:fill-box;transform-origin:50% 50%}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:20;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.brand,.iconbtn{pointer-events:auto;background:rgba(10,7,18,.9);border:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;padding:6px 15px 6px 7px;border-radius:999px}
.brand svg{width:28px;height:28px;color:#e0560b}
.brand b{font-family:var(--serif);font-weight:650;font-size:15px;letter-spacing:.005em;font-variation-settings:'SOFT' 100,'opsz' 24}
.tools{display:flex;gap:8px;pointer-events:auto}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.iconbtn svg{width:22px;height:22px}
.iconbtn:hover{border-color:var(--line-2)}
.iconbtn:active{transform:scale(.94)}
.iconbtn[aria-pressed=false]{color:var(--dim)}
.iconbtn.on{color:var(--amber);border-color:rgba(255,179,71,.5)}
body.is-intro .hud{opacity:0;transform:translateY(-14px);pointer-events:none}
body.is-intro .sheet{transform:translateY(105%)!important}

/* ---------- pins ---------- */
.pin{position:absolute;left:-17px;top:-17px;width:34px;height:34px;display:block;transition:opacity .4s}
.pin .ico{position:absolute;inset:0;display:block;color:#cf4f0c;transition:transform .35s var(--ease)}
.pin .ico::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,70,.75) 0,rgba(255,110,25,.38) 38%,rgba(255,90,20,0) 70%);animation:flick 3.6s ease-in-out infinite;animation-delay:var(--d,0s);z-index:-1}
.pin .ico svg{position:relative;width:100%;height:100%}
.pin .tag{position:absolute;left:40px;top:50%;transform:translateY(-50%);display:none;align-items:baseline;gap:6px;padding:3px 9px 4px;border-radius:999px;background:rgba(10,6,18,.84);border:1px solid rgba(255,179,71,.35);white-space:nowrap}
.pin .tag b{font-family:var(--serif);font-weight:650;font-size:13px;font-variation-settings:'SOFT' 100,'opsz' 14}
.pin .tag i{font-style:normal;font-size:12px;color:var(--amber);font-variant-numeric:tabular-nums}
.pin .cnt{position:absolute;left:21px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--bone);color:#1a0b00;font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.zoomed .pin .tag{display:flex}
.zoomed .pin .cnt{display:none}
.pin:not(.lit){opacity:0;pointer-events:none}
.pin.lit{animation:ignite .9s var(--ease) both}
.pin.sel .ico{transform:scale(1.25)}
.pin.sel .ico::before{background:radial-gradient(circle,rgba(255,225,130,.95) 0,rgba(255,140,40,.5) 40%,rgba(255,90,20,0) 72%)}
.pin.sel .tag{display:flex;border-color:var(--amber)}
.pin.dim .ico{color:#46395f;animation:none}
.pin.dim .ico::before{display:none}
.pin.dim .cnt{display:none}
.pin.dim .tag b{color:var(--dim)}
.pin.dim .tag{border-color:var(--line)}
.pin.dim.lit{opacity:.9}
.pin.inroute .ico::before{background:radial-gradient(circle,rgba(190,255,90,.8) 0,rgba(150,255,60,.4) 38%,rgba(150,255,60,0) 70%)}
.pin.done .ico{color:#5b7a2a}
@keyframes ignite{0%{transform:scale(.2);opacity:0}45%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes flick{0%,100%{opacity:.85}12%{opacity:.5}18%{opacity:1}55%{opacity:.7}}
.stop-badge{width:30px;height:30px;border-radius:50%;background:var(--slime);color:#10200a;font:700 15px var(--sans);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(182,255,60,.22),0 0 22px rgba(182,255,60,.55);font-variant-numeric:tabular-nums}
.me-dot{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2),0 0 20px #fff;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55),0 0 20px #fff}100%{box-shadow:0 0 0 20px rgba(255,255,255,0),0 0 20px #fff}}

/* ---------- sheet ---------- */
.sheet{position:fixed;z-index:30;left:0;right:0;bottom:0;height:min(90dvh,860px);display:flex;flex-direction:column;
  transform:translateY(var(--sheet-y,calc(100% - var(--peek))));transition:transform .55s var(--ease);
  background:linear-gradient(180deg,rgba(21,14,36,.97),rgba(8,5,15,.99));
  border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.5)}
.sheet.dragging{transition:none}
.sheet-head{flex:none;padding:0 16px 0;touch-action:none}
.sheet-grab{display:grid;place-items:center;height:22px;cursor:grab}
.sheet-grab span{width:38px;height:4px;border-radius:2px;background:var(--line-2)}
.when-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:0 2px 8px}
.countdown{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums}
.progress{font-size:12.5px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap}
.search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ash)}
.search svg{width:20px;height:20px;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--bone);font:inherit;font-size:16px}
.search input::placeholder{color:var(--dim)}
.search:focus-within{border-color:rgba(255,179,71,.6)}
.tabs{display:flex;gap:4px;margin:10px -4px 0;border-bottom:1px solid var(--line)}
.tabs button{position:relative;flex:1;padding:11px 6px 12px;font-size:14px;font-weight:600;color:var(--dim);transition:color .2s}
.tabs button[aria-selected=true]{color:var(--bone)}
.tabs button[aria-selected=true]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;border-radius:2px;background:var(--pumpkin);box-shadow:0 0 12px var(--pumpkin)}
.tabs em{font-style:normal;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--slime);color:#10200a;font-size:11.5px;font-weight:700}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(24px + var(--safe-b));scrollbar-width:thin;scrollbar-color:#3a2f55 transparent}
.view{animation:viewin .45s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}}

.sortbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 2px 8px;color:var(--ash);font-size:13px}
.seg{display:flex;padding:2px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.seg button{padding:5px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--dim)}
.seg button[aria-pressed=true]{background:rgba(255,255,255,.1);color:var(--bone)}

.ledger{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;width:100%;padding:11px 2px;border-bottom:1px solid var(--line)}
.rowmain{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;text-align:left;min-width:0}
.row:hover .name{color:var(--amber)}
.row .glyph{position:relative;width:38px;height:38px;color:#cf4f0c}
.row .glyph svg{width:100%;height:100%}
.row.dimmed .glyph{color:#43375b;filter:none}
.row .name{font-family:var(--serif);font-weight:620;font-size:19px;line-height:1.15;font-variation-settings:'SOFT' 100,'opsz' 24;transition:color .2s}
.row .meta{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--ash);font-size:13px}
.heat{flex:none;width:64px;height:4px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.heat i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--ember),var(--amber));border-radius:2px}
.addbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);color:var(--bone);transition:all .25s var(--ease)}
.addbtn svg{width:18px;height:18px}
.addbtn:hover{border-color:var(--slime);color:var(--slime)}
.addbtn[aria-pressed=true]{background:var(--slime);border-color:var(--slime);color:#10200a;box-shadow:0 0 18px rgba(182,255,60,.45)}
.empty{padding:36px 8px;text-align:center;color:var(--ash)}
.empty b{display:block;font-family:var(--serif);font-weight:620;font-size:21px;color:var(--bone);margin-bottom:6px}

.hit{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;width:100%;padding:13px 2px;border-bottom:1px solid var(--line);text-align:left}
.hit b{font-family:var(--serif);font-weight:620;font-size:19px;font-variation-settings:'SOFT' 100,'opsz' 24}
.hit span{color:var(--ash);font-size:13px}
.hit svg{width:20px;height:20px;color:var(--dim)}

/* detail */
.back{display:inline-flex;align-items:center;gap:4px;margin:12px 0 4px -6px;padding:6px 10px 6px 4px;color:var(--ash);font-size:14px;font-weight:600}
.back svg{width:18px;height:18px}
.d-title{font-family:var(--serif);font-weight:700;font-size:38px;line-height:1.02;margin:6px 0 4px;font-variation-settings:'SOFT' 100,'opsz' 72;padding-bottom:.06em}
.d-sub{color:var(--ash);font-size:14.5px;margin:0 0 14px}
.d-sub b{color:var(--amber);font-weight:650}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);font-weight:650;font-size:14.5px;color:var(--bone);text-decoration:none;transition:all .25s var(--ease)}
.btn svg{width:18px;height:18px}
.btn:hover{border-color:var(--bone)}
.btn.primary{background:var(--pumpkin);border-color:var(--pumpkin);color:#1a0b00}
.btn.primary:hover{background:var(--amber);border-color:var(--amber);box-shadow:0 0 28px rgba(255,150,40,.45)}
.btn.slime{background:var(--slime);border-color:var(--slime);color:#10200a}
.btn.slime:hover{box-shadow:0 0 28px rgba(182,255,60,.45)}
.btn.on{background:rgba(182,255,60,.14);border-color:var(--slime);color:var(--slime)}
.btn.ghost{background:rgba(255,255,255,.04)}
.h-label{margin:18px 0 8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:650;display:flex;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;min-width:62px;padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);font-variant-numeric:tabular-nums;font-weight:650;font-size:15px;transition:all .22s var(--ease)}
.chip small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:1px}
.chip:hover{border-color:var(--amber)}
.chip.done{background:rgba(182,255,60,.1);border-color:rgba(182,255,60,.55);color:var(--slime)}
.chip.done small{color:rgba(182,255,60,.7)}
.chip.flash{animation:flash 1.6s ease-out 1}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--amber),0 0 26px var(--amber);background:rgba(255,179,71,.25)}100%{box-shadow:none}}
.note{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ash);font-size:13.5px;line-height:1.5}

/* route */
.r-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:14px 0 6px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.r-summary div{padding:12px 12px 11px;background:var(--ink-2)}
.r-summary b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(21px,6.2vw,26px);line-height:1;white-space:nowrap;font-variation-settings:'SOFT' 100,'opsz' 48;font-variant-numeric:tabular-nums}
.r-summary span{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:650}
.r-fine{margin:6px 2px 0;font-size:12.5px;color:var(--dim)}
.timeline{list-style:none;margin:14px 0 0;padding:0}
.stop{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:9px 0}
.stop .badge{width:30px;height:30px;border-radius:50%;background:var(--slime);color:#10200a;font-weight:700;font-size:14px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.stop .badge.me{background:#fff;color:#111}
.stop b{font-family:var(--serif);font-weight:620;font-size:18px;font-variation-settings:'SOFT' 100,'opsz' 24;cursor:pointer}
.stop .sub{display:block;font-size:13px;color:var(--ash)}
.stop .x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--dim)}
.stop .x:hover{color:var(--bone);background:rgba(255,255,255,.07)}
.stop .x svg{width:16px;height:16px}
.leg{display:grid;grid-template-columns:34px 1fr;gap:12px;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.leg i{justify-self:center;width:2px;min-height:26px;background:repeating-linear-gradient(180deg,rgba(182,255,60,.7) 0 4px,transparent 4px 8px)}
.leg span{align-self:center}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.maps-btns{display:grid;gap:8px;margin:18px 0 0}

/* join */
.join h3,.rules h3{font-family:var(--serif);font-weight:650;font-size:24px;line-height:1.1;margin:20px 0 6px;font-variation-settings:'SOFT' 100,'opsz' 36}
.join p{color:var(--ash);margin:0 0 12px;font-size:14.5px}
.form{display:grid;grid-template-columns:1fr 110px;gap:8px;margin:0 0 10px}
.field{display:block}
.field span{display:block;margin:0 0 5px 2px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:650}
.field select,.field input{width:100%;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--bone);font:inherit;font-size:16px;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a99fbd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.field option{background:#150f24;color:var(--bone)}
.rules ul{margin:0;padding:0;list-style:none}
.rules li{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--line);color:var(--ash);font-size:14.5px}
.rules li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--pumpkin);box-shadow:0 0 10px var(--pumpkin)}
.credit{margin:22px 2px 0;color:var(--dim);font-size:12px}

.toast{position:fixed;z-index:200;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);transform:translate(-50%,-14px);opacity:0;padding:10px 16px;border-radius:999px;background:var(--bone);color:#1a0b00;font-weight:650;font-size:14px;pointer-events:none;transition:all .4s var(--ease);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:900px){
  .sheet{left:16px;top:72px;bottom:16px;right:auto;width:420px;height:auto;transform:none!important;border-radius:22px;border-bottom:1px solid var(--line);transition:none}
  body.is-intro .sheet{opacity:0;transform:translateX(-30px)!important}
  .sheet{transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s}
  .sheet-grab{display:none}
  .sheet-head{padding-top:16px;touch-action:auto}
  .hud{padding-left:16px;padding-right:16px}
}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;overflow:clip;contain:paint;color:var(--bone);
  transition:opacity 1.3s var(--ease),transform 1.6s var(--ease)}
.intro.leave{opacity:0;transform:scale(1.05);pointer-events:none}
.intro.gone{display:none}
.plate{position:absolute;inset:0;transform-origin:50% 42%;animation:drift 26s linear forwards}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.plate.shake{animation:drift 26s linear forwards,shake .5s linear 3}
@keyframes shake{0%,100%{translate:0 0}25%{translate:-3px 1px}60%{translate:3px -1px}}
.poster,.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.film{opacity:0;transition:opacity 1.1s var(--ease)}
.intro[data-state=play] .film,.intro[data-state=hold] .film{opacity:1}
.scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,1,7,.94) 0%,rgba(3,1,7,.62) 26%,rgba(3,1,7,0) 55%),radial-gradient(130% 95% at 50% 40%,transparent 50%,rgba(0,0,0,.65) 100%)}
.intro-grain{position:absolute;inset:0;opacity:.11}
.intro-fog{position:absolute;inset:auto -10% -6% -10%;height:46%;background:radial-gradient(50% 60% at 30% 70%,rgba(170,170,210,.18),transparent 70%),radial-gradient(40% 55% at 78% 80%,rgba(170,170,210,.14),transparent 70%);animation:fogA 30s ease-in-out infinite alternate}
.skip{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(8,5,14,.7);font-size:13px;font-weight:600;color:var(--ash);opacity:0;animation:fadein .8s 1.2s forwards}
.skip:hover{color:var(--bone);border-color:var(--line-2)}
@keyframes fadein{to{opacity:1}}

.gate{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:0 24px calc(34px + var(--safe-b));display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.intro:not([data-state=gate]) .gate{opacity:0;transform:translateY(16px);pointer-events:none}
.gate-kicker{margin:0 0 20px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);font-weight:600;opacity:0;animation:fadein 1.2s .5s forwards}
.knock{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#ffd9a0;background:radial-gradient(circle at 50% 40%,rgba(255,140,40,.42),rgba(255,90,10,.14) 60%,transparent 72%);border:1px solid rgba(255,179,71,.55);box-shadow:0 0 40px rgba(255,120,30,.5),inset 0 0 22px rgba(255,140,40,.3);opacity:0;animation:fadein 1.2s .7s forwards;transition:transform .3s var(--ease),box-shadow .3s}
.knock svg{width:44px;height:44px}
.knock:hover{transform:scale(1.06);box-shadow:0 0 60px rgba(255,130,30,.75),inset 0 0 28px rgba(255,140,40,.45)}
.knock:active{transform:scale(.95)}
.knock .ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,179,71,.6);animation:ripple 3s ease-out infinite}
.knock .r2{animation-delay:1.5s}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.gate-cta{margin:18px 0 6px;font-family:var(--serif);font-weight:650;font-size:26px;font-variation-settings:'SOFT' 100,'opsz' 48;opacity:0;animation:fadein 1.2s .9s forwards}
.gate-note{margin:0;font-size:13.5px;color:var(--ash);opacity:0;animation:fadein 1.2s 1.1s forwards}
.linkish{color:var(--ash);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--dim)}
.linkish:hover{color:var(--bone)}

.lockup{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:0 clamp(22px,6vw,96px) calc(clamp(34px,7vh,72px) + var(--safe-b));pointer-events:none}
.lockup .mask{display:block;overflow:hidden;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.lockup .mask>span{display:block;transform:translateY(112%);filter:blur(6px);transition:transform 1.25s var(--ease),filter 1.25s var(--ease)}
.lockup .mask.in>span{transform:none;filter:none}
.kicker{margin:0 0 14px;font-size:clamp(11.5px,1.4vw,14px);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);font-weight:650}
.headline{margin:0;font-family:var(--serif);font-weight:760;font-size:clamp(60px,12.6vw,196px);line-height:.94;letter-spacing:-.025em;font-variation-settings:'SOFT' 100,'opsz' 144,'WONK' 1;color:var(--bone);text-shadow:0 4px 60px rgba(0,0,0,.7)}
.headline .mask{padding:.1em 0 .22em;margin:-.1em 0 -.22em}
.headline b{font-weight:inherit;color:var(--amber);text-shadow:0 0 50px rgba(255,120,20,.55),0 4px 60px rgba(0,0,0,.7);font-variant-numeric:tabular-nums}
.when{margin:clamp(22px,3.4vh,36px) 0 0;font-size:clamp(15px,1.7vw,20px);color:var(--ash);font-weight:500}
.cta{pointer-events:none;display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,3.4vh,34px);height:56px;padding:0 26px 0 30px;border-radius:999px;background:var(--pumpkin);color:#1a0b00;font-weight:700;font-size:17px;box-shadow:0 0 0 0 rgba(255,140,40,.6);opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease),background .25s}
.cta svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.cta.in{opacity:1;transform:none;pointer-events:auto;animation:beacon 2.4s 1s ease-out infinite}
.cta:hover{background:var(--amber)}
.cta:hover svg{transform:translateX(4px)}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,140,40,.55)}100%{box-shadow:0 0 0 22px rgba(255,140,40,0)}}

@media (max-width:560px){
  .headline{font-size:clamp(46px,15.6vw,110px);letter-spacing:-.02em}
  .lockup{padding-bottom:calc(34px + var(--safe-b))}
  .kicker,.gate-kicker{letter-spacing:.15em}
  .when{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .plate,.fog,.fog-b,.intro-fog,.pin .ico,.knock .ring,.cta.in{animation:none!important}
  .lockup .mask>span{transition:none;filter:none}
  #embers,#bat-layer{display:none}
  .pin.lit{animation:none}
}