/* SHOT CLOCK big-type layer: huge condensed headlines with a warm glow,
   slam-in motion, banner tags, name stickers, chunky buttons. Loads last. */
:root { --slam: var(--display); }

/* the treatment: condensed gold plate, black outline, hard extruded shadow */
.setup-intro h1, .code-big, .prompt-big, .headline, .titlecard .tc-big, .countdown span.word,
.ph1, .pprompt, .action-flash > span, .big-number, .prompt-mid {
  font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase;
  letter-spacing: .01em !important;
  background: linear-gradient(180deg, #fff7da 0%, #f6cf62 36%, #d29a27 60%, #f7d97c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  -webkit-text-stroke: .045em #000; paint-order: stroke fill;
  filter: drop-shadow(1px 1px 0 var(--extrude)) drop-shadow(2px 2px 0 var(--extrude)) drop-shadow(2px 3px 0 var(--extrude-2)) drop-shadow(3px 4px 0 var(--extrude-2)) drop-shadow(6px 10px 14px rgba(0,0,0,.65));
  text-shadow: none !important;
}
:root { --extrude: #6b470e; --extrude-2: #3d2806; }
/* white plates for secondary headlines, gold words inside them */
.prompt-mid, .ph1, .setup-intro h1 { background-image: linear-gradient(180deg, #ffffff 0%, #f3ede1 55%, #cfc6b4 100%); }
.prompt-mid span, .ph1 .gold { background: linear-gradient(180deg, #fff7da 0%, #f6cf62 36%, #d29a27 60%, #f7d97c 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.setup-intro h1::first-line { color: transparent; }
.headline, .review .headline { background-image: linear-gradient(180deg, #ffe1e1 0%, #ff5a5c 40%, #c0181d 65%, #ff8a8a 100%); --extrude: #5e0a0c; --extrude-2: #330506; }
/* a slight forward lean, nothing more */
.prompt-big, .headline, .code-big, .titlecard .tc-big, .countdown span.word, .action-flash > span, .prompt-mid, .pprompt { transform: skewX(-6deg); transform-origin: left center; }
.titlecard .tc-big, .countdown span.word, .action-flash > span { transform-origin: center; display: inline-block; }

/* sizes: bigger than before */
.prompt-big { font-size: clamp(56px, 8.4vw, 168px) !important; line-height: .88 !important; display: inline-block; }
.prompt-mid { font-size: clamp(40px, 5.6vw, 104px) !important; line-height: .9 !important; display: inline-block; }
.headline { font-size: clamp(120px, 19vw, 340px) !important; line-height: .85 !important; }
.code-big { font-size: clamp(64px, min(9.5vw, 14.5vh), 176px) !important; line-height: .95 !important; letter-spacing: .08em !important; display: inline-block; }
.setup-intro h1 { font-size: clamp(48px, 5.8vw, 100px) !important; line-height: .92 !important; }
.titlecard .tc-big { font-size: clamp(72px, 12vw, 250px) !important; line-height: .88 !important; display: inline-block; }
.titlecard .tc-big { animation: slamIn .55s cubic-bezier(.2,1.8,.3,1) both .15s; }
@keyframes slamIn { 0% { transform: skewX(-6deg) scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: skewX(-6deg) scale(1); } }
.prompt-card .prompt-big { animation: slamIn .55s cubic-bezier(.2,1.8,.3,1) both; }

/* screen shake on big impacts */
body.shake #stage, body.shake .titlecard .tc-inner { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); } 30%, 50%, 70% { transform: translate(-9px, 4px); } 40%, 60% { transform: translate(9px, -4px); } }

/* slanted gold banner tags instead of ruled eyebrows */
.eyebrow {
  display: flex !important; width: fit-content; max-width: 100%; align-items: center; gap: 10px;
  font: 800 clamp(14px, 1.1vw, 19px)/1 var(--display) !important; letter-spacing: .16em !important; text-transform: uppercase;
  color: var(--gold-ink) !important; background: linear-gradient(180deg, #f7d77a, #d6a234);
  padding: 7px 18px 6px; transform: skewX(-12deg); box-shadow: 4px 4px 0 #000, 0 0 0 2px #000;
  margin-bottom: 4px;
}
.eyebrow::after { display: none !important; }
.eyebrow > * { transform: none; }
.eyebrow .tally { color: #9e0e12; }
.eyebrow .tally::before { box-shadow: none; }
.panel-body .eyebrow, .drawer .eyebrow { font-size: 12px !important; }

/* rays behind the big moments */
.titlecard::before, .lobby-join::before, .results-main::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 80, .13) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 34%); mask: radial-gradient(circle, #000 0%, transparent 34%);
  animation: rays 40s linear infinite; pointer-events: none;
}
.titlecard { isolation: isolate; overflow: hidden; }
.titlecard::before { -webkit-mask: radial-gradient(circle, #000 0%, transparent 30%); mask: radial-gradient(circle, #000 0%, transparent 30%); background: repeating-conic-gradient(from 0deg, rgba(255, 196, 70, .28) 0deg 6deg, transparent 6deg 15deg); animation-duration: 18s; }
.lobby-join, .results-main { position: relative; isolation: isolate; }
.lobby-join::before { width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; }
@keyframes rays { to { transform: rotate(360deg); } }
body.fx-off .titlecard::before, body.fx-off .lobby-join::before, body.fx-off .results-main::before { animation: none; }

/* comic halftone on the plates */
.join-card, .prompt-card, .clock-wrap {
  background-image: radial-gradient(rgba(220, 174, 69, .09) 1.2px, transparent 1.6px), linear-gradient(#000, #000) !important;
  background-size: 9px 9px, auto !important;
}
.prompt-card { transform: rotate(-1deg); border: 3px solid #000; box-shadow: 10px 10px 0 #000, 0 30px 90px rgba(0,0,0,.7) !important; }
.join-card { transform: rotate(-1.5deg); }

/* name stickers */
.name {
  font: 800 clamp(20px, 1.9vw, 32px)/1 var(--display) !important; letter-spacing: .04em !important; text-transform: uppercase;
  background: #f3ede1 !important; color: #100f0d !important; border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000; transform: rotate(var(--r, -2deg)); padding: 10px 16px 8px !important;
}
.name.pop { background: var(--gold) !important; animation: sticker .55s cubic-bezier(.2,1.8,.4,1) both !important; }
@keyframes sticker { from { transform: scale(2.4) rotate(18deg); opacity: 0; } }
.names.small .name { font-size: clamp(14px, 1.15vw, 20px) !important; }

/* chunky arcade buttons */
.btn.primary { font-family: var(--display); font-weight: 800; letter-spacing: .08em; border: 3px solid #000; box-shadow: 0 6px 0 #7a5410, 0 6px 0 3px #000; transform: skewX(-6deg); }
.btn.primary:active { transform: skewX(-6deg) translateY(4px); box-shadow: 0 2px 0 #7a5410, 0 2px 0 3px #000; }
.btn.primary.big { font-size: 26px; min-height: 64px; padding: 0 34px; }
.btn.primary .kbd { border-color: var(--gold-ink); }

/* podium */
.place-name, .place-rank { font-family: var(--display) !important; font-weight: 800 !important; }
.lower-third { border: 3px solid #000 !important; border-top: 0 !important; }
.place.p1 .lower-third { transform: skewX(-6deg) scale(1.04); }

/* student phone */
.ph1 { font-size: clamp(32px, 10vw, 48px) !important; line-height: .95 !important; }
.pprompt { font-size: clamp(44px, 14vw, 72px) !important; line-height: .9 !important; display: inline-block; }
.big-number { font-size: 140px !important; line-height: 1 !important; }
.action-flash { display: grid !important; font-size: 26vw !important; background: rgba(0, 0, 0, .88) !important; }
.action-flash > span { font-size: inherit; line-height: 1; }
.action-flash[hidden] { display: none !important; }
.logo-word { font-size: 24px; }
.pbar .logo-word { font-size: 18px; }

@media (min-width: 900px) {
  .pprompt { font-size: clamp(56px, 6.4vw, 112px) !important; }
  .ph1 { font-size: clamp(40px, 4.4vw, 72px) !important; }
  .big-number { font-size: 180px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .titlecard .tc-big, .prompt-card .prompt-big, body.shake #stage, .name.pop { animation: none !important; }
}

/* keep decorative rays from adding scroll height */
.screen { overflow: clip; }