@font-face { font-family: Shrikhand; src: url(fonts/Shrikhand.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Bricolage; src: url(fonts/Bricolage.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #0d0609; --ink-dark: #120709; --cream: #fbeedd; --muted: #b9a497;
  --corn: #ff6a13; --cherry: #c8102e; --gold: #ffc83a; --ice: #8fb6ff;
  --line: rgba(251, 238, 221, .14);
  --display: Shrikhand, Georgia, serif; --text: Bricolage, system-ui, sans-serif;
  --pad: clamp(14px, 2.2vw, 28px);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--cream); font-family: var(--text); -webkit-font-smoothing: antialiased; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 1, 3, .75) 100%); }
.grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .07; mix-blend-mode: overlay; }
#labels { position: fixed; inset: 0; pointer-events: none; }

/* wrapper-edge (pinked) shape: zigzag left and right ends like a twisted candy wrapper */
.pinked {
  --z: 7px;
  -webkit-mask: conic-gradient(from 45deg at left, #0000 25%, #000 0) 0 50% / 51% calc(var(--z) * 2) repeat-y, conic-gradient(from -135deg at right, #0000 25%, #000 0) 100% 50% / 51% calc(var(--z) * 2) repeat-y;
          mask: conic-gradient(from 45deg at left, #0000 25%, #000 0) 0 50% / 51% calc(var(--z) * 2) repeat-y, conic-gradient(from -135deg at right, #0000 25%, #000 0) 100% 50% / 51% calc(var(--z) * 2) repeat-y;
}

/* ---------- top bar ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: var(--pad); padding-top: max(var(--pad), env(safe-area-inset-top)); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; }
.mark { width: 54px; height: 54px; filter: drop-shadow(0 3px 0 var(--ink-dark)); transform: rotate(-12deg); }
.word { font-family: var(--display); font-size: 30px; line-height: .86; letter-spacing: -.01em; color: var(--cream); text-shadow: 3px 3px 0 var(--corn), 6px 6px 0 var(--ink-dark); transform: rotate(-4deg); }
.stats { display: flex; gap: clamp(14px, 2.6vw, 36px); }
.stat { display: flex; flex-direction: column; align-items: flex-end; }
.k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat b small { font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .1em; margin-left: 4px; color: var(--gold); }
#finale { color: var(--gold); }

/* ---------- vat card (left) ---------- */
.vatcard { position: fixed; left: var(--pad); top: 128px; width: 250px; pointer-events: none; }
.tag { display: inline-block; background: var(--corn); color: var(--ink-dark); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 18px 6px; }
.tag { clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 25%, 100% 50%, calc(100% - 6px) 75%, 100% 100%, 0 100%, 6px 75%, 0 50%, 6px 25%); }
.vatcard h1 { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: .9; margin: 14px 0 18px; color: var(--cream); text-shadow: 0 4px 0 var(--ink-dark), 0 0 40px rgba(255, 106, 19, .35); }
.clock { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.clock b { font-family: var(--display); font-weight: 400; font-size: 40px; font-variant-numeric: tabular-nums; color: var(--gold); }
.clock span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.meter { position: relative; height: 12px; margin-top: 14px; background: rgba(251, 238, 221, .08); border-radius: 99px; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, var(--cream) 0 8px, var(--cherry) 8px 16px); border-radius: 99px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter em { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(255, 106, 19, .45); }
.mrow { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.mrow b { color: var(--cream); }
#roll { color: var(--corn); }

/* ---------- lantern bar (top centre) ---------- */
.lanternbar { position: fixed; left: 50%; top: max(var(--pad), env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: rgba(18, 7, 9, .72); border: 1px solid rgba(255, 166, 64, .35); border-radius: 99px; backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.lanternbar .dot { width: 10px; height: 10px; border-radius: 50%; background: #ffa640; box-shadow: 0 0 12px #ffa640, 0 0 24px #ff6a13; animation: flick 1.2s infinite; }
.lanternbar .lbl { color: var(--muted); }
.lanternbar b { color: #ffd08a; font-weight: 800; }
.lanternbar .cd { font-variant-numeric: tabular-nums; color: var(--cream); opacity: .8; }
.lanternbar.mine { border-color: #ff3e3e; background: rgba(90, 8, 14, .8); }
.lanternbar.mine b { color: #fff; }
@keyframes flick { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 50% { opacity: .95; } 52% { opacity: .6; } }

/* ---------- sugar rush ---------- */
.rushbanner { position: fixed; left: 50%; top: 20%; transform: translateX(-50%) rotate(-3deg); text-align: center; pointer-events: none; }
.rushbanner span { display: block; font-family: var(--display); font-size: clamp(44px, 7vw, 96px); line-height: 1; color: #ffe14d; text-shadow: 0 0 30px #ff3e9a, 4px 4px 0 #c8102e, 8px 8px 0 var(--ink-dark); animation: pulse .5s ease-in-out infinite alternate; }
.rushbanner small { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: #ff3e9a; color: var(--ink-dark); padding: 6px 14px; }
@keyframes pulse { to { transform: scale(1.05); } }

/* ---------- crew dock (bottom) ---------- */
.crewdock { position: fixed; left: 50%; bottom: max(var(--pad), env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.crew { --c: var(--corn); display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; background: rgba(18, 7, 9, .7); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(8px); min-width: 150px; }
.crew i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-family: var(--display); font-style: normal; font-size: 13px; color: var(--ink-dark); }
.crew .n { font-size: 13px; font-weight: 700; }
.crew .p { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.crew.lit { border-color: #ffa640; box-shadow: 0 0 0 1px #ffa640, 0 0 28px rgba(255, 140, 40, .35); }
.crew.me .n::after { content: ' · you'; color: var(--gold); }

@media (max-width: 760px) {
  .word { font-size: 22px; } .mark { width: 40px; height: 40px; }
  .hide-s { display: none; }
  .stat b { font-size: 19px; }
  .lanternbar { top: auto; bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 120px); }
  .vatcard { top: 96px; transform: none; width: auto; right: var(--pad); display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  .vatcard .tag { grid-column: 1 / -1; justify-self: start; }
  .vatcard h1 { font-size: 30px; margin: 8px 0 6px; }
  .vatcard h1 br { display: none; }
  .rushbanner { top: 40%; }
  .clock { border: 0; padding: 0; align-self: center; flex-direction: column; align-items: flex-end; gap: 0; grid-row: 2; grid-column: 2; }
  .clock b { font-size: 30px; } .clock span { font-size: 10px; }
  .meter, .mrow { grid-column: 1 / -1; }
  .crewdock { display: grid; grid-template-columns: 1fr 1fr; width: calc(100% - var(--pad) * 2); }
  .crew { min-width: 0; padding: 7px 10px 7px 8px; } .crew i { width: 24px; height: 24px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .rushbanner span, .lanternbar .dot { animation: none; } }
body.clean > :not(canvas):not(.vignette):not(.grain):not(script) { display: none !important; }