/* SHOT CLOCK show layer: film grain, light leaks, vignette, letterbox, flashes,
   marquee bulbs, LED digits, title cards. body.fx-off turns the film effects off. */
@font-face { font-family: 'DSEG7'; font-weight: 700; font-style: normal; font-display: block; src: url('../fonts/DSEG7Classic-Bold.woff2') format('woff2'); }
:root { --led: 'DSEG7', var(--display); --bulb: #ffd36b; --bulb-dim: #5a4519; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
  font: 700 17px/1 var(--led); color: var(--gold); letter-spacing: .04em;
  background: #000; border: 2px solid var(--gold); border-radius: 6px; padding: 6px 6px 5px;
  text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 80%, transparent);
  box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}
.logo-word { font: 800 24px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.logo-word b { color: var(--gold); margin-left: .28em; font-weight: 800; }

/* ---------- LED digits ---------- */
.led { position: relative; display: inline-block; font-family: var(--led); font-weight: 700; line-height: 1; }
.led-ghost { color: color-mix(in srgb, var(--gold) 9%, transparent); }
.led-digits {
  position: absolute; right: 0; top: 0; color: var(--gold);
  text-shadow: 0 0 .06em #fff3c4, 0 0 .18em color-mix(in srgb, var(--gold) 85%, transparent), 0 0 .5em color-mix(in srgb, var(--gold) 45%, transparent);
}
.led.hurry .led-digits { color: #ff4d4f; text-shadow: 0 0 .06em #ffd0d0, 0 0 .2em rgba(255,60,60,.85), 0 0 .55em rgba(255,40,40,.45); }

/* ---------- marquee bulbs (SVG dots drawn by bulbs() in common.js) ---------- */
.marquee { position: relative; }
.marquee > svg.bulbs { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
.bulbs rect { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 24; }
.bulbs .b1 { stroke: var(--bulb); filter: drop-shadow(0 0 4px var(--bulb)); animation: chase 1.1s steps(1) infinite; }
.bulbs .b2 { stroke: var(--bulb); stroke-dashoffset: 12; filter: drop-shadow(0 0 4px var(--bulb)); animation: chase 1.1s steps(1) infinite reverse; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: .18; } }
.marquee.fast .bulbs .b1, .marquee.fast .bulbs .b2 { animation-duration: .28s; }

/* ---------- stage beams ---------- */
.beams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.beams i {
  position: absolute; top: -20%; width: 60vw; height: 140%; opacity: .16; mix-blend-mode: screen;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, #ffd27a 6deg, #ffbf47 12deg, transparent 18deg);
  filter: blur(6px); transform-origin: 50% 0%;
}
.beams i:first-child { left: -18vw; animation: beamL 9s ease-in-out infinite alternate; }
.beams i:last-child { right: -18vw; animation: beamR 11s ease-in-out infinite alternate; }
@keyframes beamL { from { transform: rotate(-26deg); } to { transform: rotate(-6deg); } }
@keyframes beamR { from { transform: rotate(26deg); } to { transform: rotate(4deg); } }

/* ---------- film layer ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.fx-grain {
  position: absolute; inset: -50%; opacity: .11; mix-blend-mode: overlay;
  background-image: var(--grain); background-size: 180px 180px; animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -8%); } 20% { transform: translate(-12%, 4%); }
  30% { transform: translate(6%, -14%); } 40% { transform: translate(-4%, 16%); } 50% { transform: translate(-14%, 6%); }
  60% { transform: translate(12%, 0); } 70% { transform: translate(0, 12%); } 80% { transform: translate(2%, 22%); } 90% { transform: translate(-8%, 6%); }
}
.fx-leak { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; mix-blend-mode: screen; filter: blur(60px); opacity: .0; }
.fx-leak.a { left: -30vmax; top: -30vmax; background: radial-gradient(circle, rgba(255,120,30,.55), rgba(255,60,0,0) 60%); animation: leakA 14s ease-in-out infinite; }
.fx-leak.b { right: -34vmax; bottom: -36vmax; background: radial-gradient(circle, rgba(255,200,90,.5), rgba(255,140,0,0) 60%); animation: leakB 19s ease-in-out infinite; }
@keyframes leakA { 0%, 100% { opacity: .1; transform: translate(0, 0); } 45% { opacity: .42; transform: translate(8vmax, 5vmax); } 60% { opacity: .2; } }
@keyframes leakB { 0%, 100% { opacity: .08; transform: translate(0, 0); } 55% { opacity: .35; transform: translate(-6vmax, -8vmax); } }
.fx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 72% at 50% 46%, transparent 52%, rgba(0,0,0,.72) 100%); }
.fx-scratch { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,240,210,.35); opacity: 0; animation: scratch 7s steps(1) infinite; }
@keyframes scratch { 0% { left: 23%; opacity: 0; } 61% { left: 23%; opacity: .5; } 63% { left: 71%; opacity: .3; } 64% { opacity: 0; } 88% { left: 44%; opacity: .4; } 89% { opacity: 0; } }
.fx-flicker { position: absolute; inset: 0; background: #000; opacity: 0; animation: flicker 4s steps(1) infinite; }
@keyframes flicker { 0% { opacity: .0; } 17% { opacity: .05; } 19% { opacity: 0; } 52% { opacity: .03; } 54% { opacity: 0; } 83% { opacity: .06; } 84% { opacity: 0; } }
body.fx-off .fx, body.fx-off .beams { display: none; }

/* ---------- letterbox ---------- */
.letterbox i { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 45; transition: height .55s cubic-bezier(.7,0,.2,1); pointer-events: none; }
.letterbox .lb-top { top: 0; } .letterbox .lb-bot { bottom: 0; }
body.cinema .letterbox i { height: 11vh; }

/* ---------- flash ---------- */
.flash { position: fixed; inset: 0; z-index: 46; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fff8e0, #ffcf5a 40%, rgba(255,180,40,0) 75%); mix-blend-mode: screen; }
.flash.go { animation: flashGo .7s ease-out; }
.flash.red { background: radial-gradient(circle at 50% 45%, #ffd6d6, #ff3b3b 40%, rgba(255,0,0,0) 75%); }
@keyframes flashGo { 0% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- 3-2-1 countdown ---------- */
.countdown { position: fixed; inset: 0; z-index: 47; display: grid; place-items: center; background: rgba(0,0,0,.72); pointer-events: none; }
.countdown span { font: 700 min(48vh, 40vw)/1 var(--led); color: var(--gold); text-shadow: 0 0 .05em #fff3c4, 0 0 .2em color-mix(in srgb, var(--gold) 80%, transparent); animation: cd .9s cubic-bezier(.2,1.4,.4,1) both; }
.countdown span.word { font: 800 min(26vh, 22vw)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-shadow: 0 0 40px rgba(255,200,80,.6); }
@keyframes cd { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.92); opacity: 0; } }

/* ---------- title card (big reveals) ---------- */
.titlecard { position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; text-align: center; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(30,24,12,.9), rgba(0,0,0,.95)); }
.titlecard .tc-inner { display: grid; gap: 2vh; justify-items: center; padding: 6vh 6vw; max-width: 92vw; animation: tcIn .7s cubic-bezier(.2,1.2,.3,1) both; }
.titlecard .tc-eyebrow { font: 600 clamp(16px, 2vw, 30px)/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.titlecard .tc-big { font: 800 clamp(60px, 11vw, 220px)/.88 var(--display); text-transform: uppercase; text-wrap: balance; color: var(--text); text-shadow: 0 0 60px rgba(255,190,70,.35); }
.titlecard .tc-num { font: 700 clamp(40px, 7vw, 120px)/1 var(--led); color: var(--gold); text-shadow: 0 0 .2em color-mix(in srgb, var(--gold) 80%, transparent); }
@keyframes tcIn { from { transform: scale(1.25); opacity: 0; filter: blur(12px); } to { transform: none; opacity: 1; filter: none; } }

.confetti { position: fixed; inset: 0; z-index: 43; pointer-events: none; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-leak, .fx-scratch, .fx-flicker, .beams i, .bulbs rect { animation: none !important; }
  .titlecard .tc-inner, .countdown span { animation: none; }
}

/* D10 time die on the title card */
.tc-die { width: min(68vh, 80vw); aspect-ratio: 1; }
.timedie { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.timedie canvas { width: 100%; height: 100%; display: block; }