/* Short Fuse. Fireworks night: indigo sky, vermilion and gold crate-label print, paper plates with ink type.
   The TV stage sizes everything in --u (1/100 of a 16:9 screen width); the phone uses px. */
@font-face { font-family: 'Bowlby One'; font-weight: 400; font-display: swap; src: url(/fonts/bowlby-one-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --night: #14102b; --night-2: #1f1842; --night-3: #2c2358; --deep: #0b0818;
  --red: #e23d28; --red-d: #a8241a; --gold: #f6b93b; --gold-l: #ffd66b;
  --paper: #f4e7c8; --paper-d: #d9c79c; --ink: #1a1430; --ash: #8d86a8;
  --display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --out: cubic-bezier(.2, .9, .25, 1); --stamp: cubic-bezier(.2, 1.5, .4, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scrollbar-color: var(--night-3) var(--deep); scrollbar-width: thin; }
body { margin: 0; min-height: 100dvh; background: var(--night); color: var(--paper); font: 600 18px/1.3 var(--body); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
h1, h2, p, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; }
button { font: inherit; color: inherit; } b { font-weight: 800; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.2em; height: 1.2em; flex: none; }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
#app { position: relative; z-index: 2; }
body.is-home #fx { z-index: 1; }
body:has(.stage[data-scene="lobby"]) #fx { z-index: 1; }
body.is-phone #fx { visibility: hidden; }

/* ---- shared pieces -------------------------------------------------------------------------------------------------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 6px;
  background: var(--paper); color: var(--ink); font: 800 22px/1.1 var(--body); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 0 var(--deep);
  transition: transform .08s, box-shadow .08s, background .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--deep); }
.btn:disabled { cursor: default; }
.btn.main { background: var(--red); color: #fff8e6; border-color: var(--red-d); box-shadow: 0 5px 0 var(--red-d); min-height: 66px; font-size: 26px; }
.btn.main:active { box-shadow: 0 1px 0 var(--red-d); }
.btn.second { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 0 5px 0 rgba(0, 0, 0, .45); }
.btn.ghost { background: transparent; color: var(--paper); border-color: rgba(244, 231, 200, .5); box-shadow: none; min-height: 50px; font-size: 19px; margin-top: auto; }
.btn.link { background: none; border: 0; box-shadow: none; color: var(--paper-d); font-size: 18px; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; min-height: 48px; }
.stamp { display: inline-block; padding: .12em .6em .16em; border: .12em solid var(--gold); border-radius: .25em; color: var(--gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.rocket { display: block; height: 100%; width: auto; overflow: visible; }
.rocket .rk-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rocket .rk-fuse { opacity: .9; }
@keyframes sparkle { 0%, 100% { transform: scale(.7); opacity: .75; } 50% { transform: scale(1.5); opacity: 1; } }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo-spark path { animation: logospark 1.1s steps(6) infinite; transform-origin: 0 0; }
@keyframes logospark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(40deg) scale(1.25); } 100% { transform: rotate(80deg) scale(1); } }

/* ---- home ----------------------------------------------------------------------------------------------------------- */
body.is-home { background: radial-gradient(120% 70% at 50% 110%, #4a2247 0%, rgba(74, 34, 71, 0) 60%), linear-gradient(#0d0a20, var(--night) 45%, #231a4a); background-attachment: fixed; }
.home { position: relative; max-width: 460px; min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.home-brand .logo { max-width: 250px; margin: 0 auto 4px; }
.home-tag { font-size: 22px; font-weight: 700; text-align: center; text-wrap: balance; }
.home-facts { margin-top: 4px; text-align: center; color: var(--paper-d); font-size: 17px; }
.home-join { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 18px 18px 20px; box-shadow: 7px 7px 0 rgba(0, 0, 0, .4); display: flex; flex-direction: column;
  background-image: repeating-linear-gradient(0deg, rgba(26, 20, 48, .035) 0 1px, transparent 1px 4px); }
.home-join h1 { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--red-d); margin-bottom: 12px; }
.home-join label { font-size: 17px; font-weight: 700; margin: 8px 0 4px; }
.home-join input { width: 100%; height: 58px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 6px; background: #fffaf0; color: var(--ink); font: 700 26px/1 var(--body); }
.home-join input::placeholder { color: #6d6585; font-weight: 600; }
.home-join input:focus-visible { outline-color: var(--red); }
#code { font: 400 32px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; }
#code::placeholder { font-family: var(--display); font-weight: 400; color: #b9ad94; }
.home-err { min-height: 24px; margin: 8px 0 6px; color: var(--red-d); font-weight: 700; font-size: 18px; }
.home-host { display: flex; flex-direction: column; gap: 10px; }
.home-host h2 { font: 400 20px/1 var(--display); text-transform: uppercase; color: var(--gold); }
.home-chip { display: flex; justify-content: center; min-height: 10px; }
@media (min-width: 900px) and (min-height: 560px) {
  .home { max-width: 980px; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto auto; column-gap: 56px; align-content: center; align-items: start; }
  .home-brand { grid-row: 1 / span 2; align-self: center; } .home-brand .logo { max-width: 470px; }
  .home-tag { font-size: 30px; } .home-facts { font-size: 20px; }
  .home-join { grid-column: 2; } .home-host { grid-column: 2; } .home-chip { grid-column: 1 / -1; }
}

/* ---- TV stage --------------------------------------------------------------------------------------------------------- */
.stage { --u: min(1vw, 1.778vh); position: fixed; inset: 0; overflow: hidden; display: grid; grid-template-rows: calc(var(--u) * 4.4) 1fr auto; font-size: calc(var(--u) * 1.8); cursor: default; user-select: none; }
.sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 55% at 50% 108%, #6b2a4c 0%, rgba(107, 42, 76, 0) 62%), linear-gradient(#090716, var(--night) 42%, #2a1f55 88%, #3a2459); }
.stars { position: absolute; inset: 0 0 30% 0; opacity: .8; animation: twinkle 5s ease-in-out infinite alternate;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, #ffe9b0 0 1.2px, transparent 1.9px), radial-gradient(circle, #cfd6ff 0 .9px, transparent 1.4px);
  background-size: 173px 149px, 257px 211px, 97px 131px; background-position: 12px 20px, 80px 90px, 40px 60px; }
.stars.s2 { animation-delay: -2.5s; background-size: 311px 223px, 199px 283px, 149px 181px; opacity: .55; }
@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }
.glow { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(226, 61, 40, .16)); }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(var(--u) * 8); fill: var(--deep); }

.bar { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.6); font-size: calc(var(--u) * 1.55); color: var(--paper-d); }
.bar-mark { font: 400 calc(var(--u) * 1.7) / 1 var(--display); color: var(--gold); letter-spacing: .06em; }
.bar-mid { flex: 1; text-align: center; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bar-join b { color: var(--paper); } .bar-join .bar-code { font: 400 calc(var(--u) * 1.9) / 1 var(--display); color: var(--gold-l); letter-spacing: .14em; margin-left: .2em; }
.stage[data-scene="lobby"] .bar-join, .stage[data-scene="lobby"] .bar-mark { visibility: hidden; }

.scene { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 4); }
.scene > * { width: 100%; max-width: calc(var(--u) * 92); }
.scene.enter > * { animation: scene-in .45s var(--out) both; }
@keyframes scene-in { from { opacity: 0; transform: translateY(calc(var(--u) * 1.5)); } }
.title { font: 400 calc(var(--u) * 4.6) / 1.02 var(--display); text-transform: uppercase; text-align: center; color: var(--paper); text-wrap: balance; }
.sub { text-align: center; font-size: calc(var(--u) * 2); color: var(--paper-d); } .sub b { color: var(--paper); }
.stage.shake .scene { animation: shake .4s linear; }
@keyframes shake { 15% { transform: translate(-.5%, .6%); } 35% { transform: translate(.5%, -.5%); } 55% { transform: translate(-.35%, -.3%); } 75% { transform: translate(.25%, .3%); } }

/* the rack */
.rack { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 1.2); height: calc(var(--u) * 12.6); padding: 0 calc(var(--u) * 2) calc(var(--u) * 1); }
.stage[data-scene="lobby"] .rack, .stage[data-scene="scores"] .rack, .stage[data-scene="launch"] .rack, .stage[data-scene="end"] .rack, .stage[data-scene="intro"] .rack { display: none; }
.rk { position: relative; width: calc(var(--u) * 8.4); display: flex; flex-direction: column; align-items: center; transition: opacity .3s; }
.rk .rocket { height: calc(var(--u) * 6.6); transition: transform .35s var(--stamp), filter .3s; transform-origin: 50% 90%; }
.rk-name { margin-top: calc(var(--u) * .3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: calc(var(--u) * 1.5); line-height: 1.1; color: var(--paper); }
.rk-score { font: 400 calc(var(--u) * 1.55) / 1.15 var(--display); color: var(--pc); font-variant-numeric: tabular-nums; }
.rk.off { opacity: .35; }
.rk.locked .rocket { transform: translateY(calc(var(--u) * -.8)); }
.rk.locked .rk-spark { opacity: 1; animation: sparkle .5s ease-in-out infinite; }
.rk.dud .rocket { transform: rotate(24deg) translateY(calc(var(--u) * .4)); filter: grayscale(1) brightness(.55); }
.rk.dud .rk-spark { opacity: 0; animation: none; }
.rk-tag { position: absolute; top: calc(var(--u) * 2.4); font: 400 calc(var(--u) * 1.5) / 1 var(--display); color: #fff; background: var(--red); padding: .1em .35em; transform: rotate(-9deg); }
.rk-tag:empty { display: none; }
.rk.right .rocket { animation: hop .7s var(--out) .9s both; }
.rk.wrong .rocket { animation: droop .5s ease-out .9s both; }
@keyframes hop { 40% { transform: translateY(calc(var(--u) * -2.4)) rotate(-4deg); } 100% { transform: none; } }
@keyframes droop { to { transform: rotate(14deg); filter: saturate(.5) brightness(.8); } }
.rk-delta { position: absolute; z-index: 2; left: 60%; top: calc(var(--u) * 1.4); font: 400 calc(var(--u) * 1.7) / 1 var(--display); opacity: 0; white-space: nowrap; text-shadow: 0 .12em 0 var(--deep); }
.rk-delta.show { animation: delta 3.4s var(--out) both; } .rk-delta.up { color: var(--gold-l); } .rk-delta.down { color: #ff7a66; }
@keyframes delta { 0% { opacity: 0; transform: translateY(60%) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.15); } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%); } }

/* lobby */
.lobby { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: 1fr auto auto; column-gap: calc(var(--u) * 5); row-gap: calc(var(--u) * 1.6); align-items: center; height: 100%; padding-bottom: calc(var(--u) * 2.4); }
.lobby-brand .logo { width: calc(var(--u) * 37); margin: 0 auto; }
.tagline { margin-top: calc(var(--u) * 1); text-align: center; font-size: calc(var(--u) * 2.5); font-weight: 700; line-height: 1.15; }
.ticket { justify-self: center; display: flex; align-items: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.8); background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * .5); transform: rotate(1.5deg); box-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 rgba(0, 0, 0, .42);
  background-image: repeating-linear-gradient(0deg, rgba(26, 20, 48, .04) 0 1px, transparent 1px 4px); }
.ticket-qr { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; background: #fff; padding: calc(var(--u) * .5); } .ticket-qr svg { display: block; width: 100%; height: 100%; }
.ticket-txt { display: flex; flex-direction: column; padding-left: calc(var(--u) * 2.2); border-left: calc(var(--u) * .2) dashed rgba(26, 20, 48, .4); font-size: calc(var(--u) * 1.8); font-weight: 700; line-height: 1.2; }
.ticket-host { font: 400 calc(var(--u) * 2.3) / 1.2 var(--display); color: var(--red-d); margin-bottom: calc(var(--u) * .7); }
.ticket-code { display: flex; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * .5); }
.ticket-code i { display: grid; place-items: center; width: calc(var(--u) * 5); height: calc(var(--u) * 6); background: var(--ink); color: var(--gold-l); font: 400 calc(var(--u) * 4.2) / 1 var(--display); font-style: normal; border-radius: calc(var(--u) * .3); }
.pad { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--u) * .8); align-items: end; border-bottom: calc(var(--u) * .5) solid var(--deep); padding: 0 calc(var(--u) * 1); }
.slot { position: relative; height: calc(var(--u) * 13); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.tube { width: calc(var(--u) * 2.6); height: calc(var(--u) * 4.4); border: calc(var(--u) * .22) dashed rgba(244, 231, 200, .32); border-bottom: 0; border-radius: calc(var(--u) * .4) calc(var(--u) * .4) 0 0; }
.slot .rocket { height: calc(var(--u) * 8.4); }
.slot.new .rocket { animation: drop .6s var(--stamp) both; }
@keyframes drop { from { transform: translateY(calc(var(--u) * -9)) rotate(-12deg); opacity: 0; } }
.slot.off { opacity: .4; }
.slot-name { display: block; width: 100%; text-align: center; height: calc(var(--u) * 4.2); padding-top: calc(var(--u) * .3); font-size: calc(var(--u) * 1.55); font-weight: 800; line-height: 1.1; color: var(--pc); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot-name em { display: block; font-style: normal; font-size: calc(var(--u) * 1.15); font-weight: 700; color: var(--paper-d); text-transform: uppercase; letter-spacing: .05em; }
.lobby-status { grid-column: 1 / -1; text-align: center; font-size: calc(var(--u) * 2.1); color: var(--paper-d); } .lobby-status b { color: var(--gold-l); }

/* intro */
.intro { display: flex; flex-direction: column; gap: calc(var(--u) * 3.4); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.6); }
.step { background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * .5); padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2.2); text-align: center; opacity: .16; transform: scale(.94); box-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(0, 0, 0, .4); }
.step:nth-child(1) { rotate: -1.2deg; } .step:nth-child(3) { rotate: 1.2deg; }
.step.on { opacity: 1; transform: none; transition: opacity .2s, transform .4s var(--stamp); }
.step h2 { font: 400 calc(var(--u) * 2.5) / 1.05 var(--display); text-transform: uppercase; color: var(--red-d); margin: calc(var(--u) * 1.4) 0 calc(var(--u) * .6); }
.step p { font-size: calc(var(--u) * 1.9); line-height: 1.2; text-wrap: balance; }
.demo { height: calc(var(--u) * 9); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .7); }
.demo-fuse { position: relative; }
.demo-fuse i { display: block; width: 60%; height: calc(var(--u) * .9); border-radius: 1em; background: linear-gradient(90deg, var(--ink) 50%, #c9a36a 50%); background-size: 200% 100%; background-position: 100% 0; }
.step.on .demo-fuse i { animation: demoburn 3s linear infinite; }
@keyframes demoburn { to { background-position: 0 0; } }
.demo-fuse b { font: 400 calc(var(--u) * 3) / 1 var(--display); color: var(--red-d); }
.demo-pop span { display: grid; place-items: center; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); background: var(--ink); color: var(--paper); font: 400 calc(var(--u) * 2.2) / 1 var(--display); border-radius: calc(var(--u) * .3); }
.step.on .demo-pop .bang { animation: demobang 2.4s ease-in infinite; }
@keyframes demobang { 0%, 55% { transform: none; opacity: 1; background: var(--ink); } 62% { transform: scale(1.5) rotate(8deg); background: var(--red); } 72%, 100% { transform: scale(.8) rotate(-10deg); opacity: .22; } }
.demo-lock .ico { width: calc(var(--u) * 6); height: calc(var(--u) * 6); color: var(--red-d); }

/* round card */
.roundcard { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); animation: stampin .5s var(--stamp) .15s both !important; }
@keyframes stampin { from { transform: scale(1.7) rotate(-6deg); opacity: 0; } }
.round-n { display: grid; place-items: center; width: calc(var(--u) * 20); height: calc(var(--u) * 20); background: var(--red); color: var(--gold-l); font: 400 calc(var(--u) * 15) / 1 var(--display); border-radius: 50%; border: calc(var(--u) * .5) solid var(--gold); outline: calc(var(--u) * .8) solid var(--red); box-shadow: calc(var(--u) * .9) calc(var(--u) * .9) 0 calc(var(--u) * .8) rgba(0, 0, 0, .4); flex: none; }
.round-name { font: 400 calc(var(--u) * 7.4) / .98 var(--display); text-transform: uppercase; color: var(--paper); }
.round-rule { margin-top: calc(var(--u) * 1.4); max-width: calc(var(--u) * 46); font-size: calc(var(--u) * 2.7); font-weight: 700; line-height: 1.18; color: var(--gold-l); }

/* pick */
.pick { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.pick-who { color: var(--pc); }
.crates { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2.4); }
.crate { position: relative; height: calc(var(--u) * 17); display: grid; place-items: center; border-radius: calc(var(--u) * .4); border: calc(var(--u) * .5) solid #6e4a22; background: #c08f4c repeating-linear-gradient(0deg, transparent 0 calc(var(--u) * 3.9), rgba(60, 35, 10, .5) calc(var(--u) * 3.9) calc(var(--u) * 4.2)); box-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 rgba(0, 0, 0, .42); transition: transform .5s var(--stamp), opacity .4s, filter .4s; }
.crate:nth-child(1) { rotate: -1.5deg; } .crate:nth-child(3) { rotate: 1.5deg; }
.crate-lid { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 35, 10, .55) 0 calc(var(--u) * 1.1), transparent 0 calc(100% - var(--u) * 1.1), rgba(60, 35, 10, .55) 0); }
.crate-label { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 62%; max-width: 84%; padding: calc(var(--u) * 1) calc(var(--u) * 1.4) calc(var(--u) * 1.2); background: var(--paper); color: var(--ink); text-align: center; font: 400 calc(var(--u) * 2.7) / 1.05 var(--display); text-transform: uppercase; border: calc(var(--u) * .2) solid var(--red-d); outline: calc(var(--u) * .3) solid var(--paper); }
.crate-label small { font: 800 calc(var(--u) * 1.2) / 1 var(--body); letter-spacing: .2em; color: var(--red-d); margin-bottom: calc(var(--u) * .5); }
.crate.chosen { transform: scale(1.12); z-index: 2; border-color: var(--gold); }
.crate.passed { opacity: .28; filter: grayscale(.6); transform: scale(.94); }

/* question */
.q { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.q-meta { display: flex; align-items: center; gap: calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.7); font-weight: 700; color: var(--paper-d); }
.q-count { letter-spacing: .06em; text-transform: uppercase; }
.q-mult { margin-left: auto; background: var(--red); color: #fff8e6; padding: .1em .6em .16em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(1.5deg); }
.q-text { font: 800 calc(var(--u) * 4.7) / 1.06 var(--body); color: #fff8e6; text-wrap: balance; min-height: calc(var(--u) * 10); display: flex; align-items: center; }
.q-text.long { font-size: calc(var(--u) * 3.8); }
.fuse { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.fuse-rope { position: relative; flex: 1; height: calc(var(--u) * 1); border-radius: 1em; background: repeating-linear-gradient(115deg, #e9dcc0 0 calc(var(--u) * .5), #b89f72 calc(var(--u) * .5) calc(var(--u) * .8)); }
.fuse-ash { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 1em; background: repeating-linear-gradient(115deg, #2a2440 0 calc(var(--u) * .5), #16122b calc(var(--u) * .5) calc(var(--u) * .8)); }
.knot { position: absolute; top: 50%; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); margin: calc(var(--u) * -1.1) 0 0 calc(var(--u) * -1.1); border-radius: 50%; background: var(--red); border: calc(var(--u) * .28) solid var(--gold); transition: transform .3s var(--stamp), background .2s, border-color .2s; }
.knot.spent { background: #2a2440; border-color: #4a4266; transform: scale(.7); }
.fuse-tip { position: absolute; top: 50%; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); margin: calc(var(--u) * -.9) 0 0 calc(var(--u) * -.9); border-radius: 50%; background: #fff8e0; box-shadow: 0 0 calc(var(--u) * 1.2) calc(var(--u) * .5) var(--gold-l), 0 0 calc(var(--u) * 3.6) calc(var(--u) * 1.2) rgba(255, 122, 69, .7); animation: flicker .14s steps(2) infinite; z-index: 1; }
.fuse-tip.out { display: none; }
@keyframes flicker { 50% { transform: scale(.78); opacity: .85; } }
.keg { flex: none; min-width: calc(var(--u) * 14); display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * .5) calc(var(--u) * 1.4) calc(var(--u) * .6); background: var(--red); border: calc(var(--u) * .28) solid var(--gold); border-radius: calc(var(--u) * .5); box-shadow: calc(var(--u) * .45) calc(var(--u) * .45) 0 rgba(0, 0, 0, .42); }
.keg-label { font-size: calc(var(--u) * 1.15); font-weight: 800; letter-spacing: .18em; color: #ffe4c4; }
.keg-val { font: 400 calc(var(--u) * 3.5) / 1 var(--display); color: var(--gold-l); font-variant-numeric: tabular-nums; }
.stage.urgent .keg { animation: kegpulse .5s ease-in-out infinite; }
@keyframes kegpulse { 50% { transform: scale(1.05); } }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6); }
.ans { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-height: calc(var(--u) * 5.9); padding: calc(var(--u) * .5) calc(var(--u) * 1.4) calc(var(--u) * .5) calc(var(--u) * .6); background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * .45); box-shadow: calc(var(--u) * .45) calc(var(--u) * .45) 0 rgba(0, 0, 0, .42); transition: transform .4s var(--stamp), opacity .4s, background .25s; }
.answers:not(.wait) .ans { animation: ansin .4s var(--out) both; } .ans:nth-child(2) { animation-delay: .07s !important; } .ans:nth-child(3) { animation-delay: .14s !important; } .ans:nth-child(4) { animation-delay: .21s !important; }
@keyframes ansin { from { opacity: 0; transform: translateY(40%); } }
.answers.wait .ans { opacity: .22; }
.ans-letter { flex: none; display: grid; place-items: center; width: calc(var(--u) * 4.7); height: calc(var(--u) * 4.7); background: var(--red); color: #fff8e6; font: 400 calc(var(--u) * 2.9) / 1 var(--display); border-radius: calc(var(--u) * .3); }
.ans-text { flex: 1; font-size: calc(var(--u) * 3); font-weight: 800; line-height: 1.02; }
.ans.small .ans-text { font-size: calc(var(--u) * 2.3); }
.ans.popped { background: #2a2440; color: #8d86a8; box-shadow: none; transform: rotate(-1.2deg) scale(.97); }
.ans.popped:nth-child(even) { transform: rotate(1.2deg) scale(.97); }
.ans.popped .ans-letter { background: #3a3358; color: #8d86a8; } .ans.popped .ans-text { text-decoration: line-through; text-decoration-thickness: .12em; }
.ans.correct { background: var(--gold-l); transform: scale(1.04); z-index: 1; } .ans.correct .ans-letter { background: var(--ink); color: var(--gold-l); }
.ans.faded:not(.popped) { opacity: .5; }
.ans-who { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * -1.15); display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: calc(var(--u) * .4); max-width: 92%; }
.who { display: inline-flex; align-items: center; gap: .35em; padding: .1em .5em .14em .4em; background: var(--ink); color: var(--paper); border-radius: .3em; font-size: calc(var(--u) * 1.45); font-weight: 700; white-space: nowrap; animation: ansin .3s var(--out) .5s both; }
.who i { width: .7em; height: .7em; border-radius: 50%; background: var(--pc); }
.q-status { min-height: calc(var(--u) * 2.8); text-align: center; font-size: calc(var(--u) * 2.1); color: var(--paper-d); } .q-status b { color: var(--gold-l); }

/* close call */
.q.cc { gap: calc(var(--u) * 1.1); }
.range { min-height: calc(var(--u) * 12.6); display: grid; align-items: center; }
.range-hint { text-align: center; font-size: calc(var(--u) * 2.7); font-weight: 700; color: var(--gold-l); text-wrap: balance; max-width: calc(var(--u) * 60); margin: 0 auto; }
.range-line { position: relative; height: calc(var(--u) * 12.6); margin: 0 calc(var(--u) * 5); }
.range-track { position: absolute; left: calc(var(--u) * -4); right: calc(var(--u) * -4); top: 50%; height: calc(var(--u) * .5); margin-top: calc(var(--u) * -.25); border-radius: 1em; background: repeating-linear-gradient(115deg, #e9dcc0 0 calc(var(--u) * .5), #b89f72 calc(var(--u) * .5) calc(var(--u) * .8)); }
.pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); animation: pinin .45s var(--stamp) var(--d) both; white-space: nowrap; line-height: 1.05; }
.pin.high { bottom: 50%; } .pin.low { top: 50%; flex-direction: column-reverse; }
@keyframes pinin { from { opacity: 0; transform: translateX(-50%) scale(.3); } }
.pin b { font: 400 calc(var(--u) * 2.1) / 1.1 var(--display); color: var(--pc); } .pin span { font-size: calc(var(--u) * 1.5); font-weight: 700; color: var(--paper); }
.pin i { width: calc(var(--u) * .4); height: calc(var(--u) * 1.5); margin: calc(var(--u) * .3) 0; background: var(--pc); border-radius: 1em; }
.pin.far { opacity: .6; }
.pin.win b { font-size: calc(var(--u) * 2.9); text-shadow: 0 0 calc(var(--u) * 1.2) var(--pc); } .pin.win { z-index: 2; }
.truth { position: absolute; z-index: 3; left: 50%; top: calc(var(--u) * -3.6); bottom: 50%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%) scale(1.8); opacity: 0; pointer-events: none; }
.truth.on { opacity: 1; transform: translateX(-50%); transition: transform .4s var(--stamp), opacity .1s; }
.truth b { background: var(--gold-l); color: var(--ink); padding: .08em .5em .12em; font: 400 calc(var(--u) * 2.6) / 1.1 var(--display); border-radius: calc(var(--u) * .3); white-space: nowrap; }
.truth i { flex: 1; width: calc(var(--u) * .34); background: var(--gold-l); opacity: .75; }

/* scoreboard */
.scores { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); height: 100%; justify-content: center; }
.chart { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 1.2); border-bottom: calc(var(--u) * .5) solid var(--deep); }
.col { position: relative; width: calc(var(--u) * 8.2); height: calc(var(--u) * 33); }
.col-fly { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4.4 + var(--h) * .5); display: flex; flex-direction: column; align-items: center; animation: fly 1.3s var(--out) var(--d) both; }
@keyframes fly { from { bottom: calc(var(--u) * 4.4); } }
.col-fly .rocket { height: calc(var(--u) * 8); }
.col-score { font: 400 calc(var(--u) * 2) / 1.2 var(--display); color: var(--pc); font-variant-numeric: tabular-nums; }
.col-trail { position: absolute; top: 96%; left: 50%; width: calc(var(--u) * .5); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -.25); background: linear-gradient(var(--gold-l), rgba(255, 214, 107, 0)); border-radius: 1em; opacity: .8; }
.col-name { position: absolute; left: calc(var(--u) * -.5); right: calc(var(--u) * -.5); bottom: calc(var(--u) * .5); display: block; text-align: center; font-size: calc(var(--u) * 1.5); font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-name em { display: block; font-style: normal; font-size: calc(var(--u) * 1.25); color: var(--paper-d); font-weight: 700; }

/* launch + end */
.launch { display: flex; flex-direction: column; height: 100%; padding: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
.launch .title { font-size: calc(var(--u) * 3.2); color: var(--paper-d); }
.launch-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; text-align: center; }
.launch-card.show { opacity: 1; } .launch-card.in { animation: stampin .45s var(--stamp) both; }
.lc-name { font: 400 calc(var(--u) * 6) / 1 var(--display); text-transform: uppercase; text-shadow: 0 .08em 0 var(--deep); }
.lc-score { font-size: calc(var(--u) * 2.8); font-weight: 800; color: var(--paper); text-shadow: 0 .1em 0 var(--deep); }
.launch-card.win .lc-name { font-size: calc(var(--u) * 10); }
.launch-row { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 1.4); border-bottom: calc(var(--u) * .5) solid var(--deep); }
.lr { width: calc(var(--u) * 8); display: flex; flex-direction: column; align-items: center; }
.lr .rocket { height: calc(var(--u) * 8); } .lr span { padding: calc(var(--u) * .3) 0 calc(var(--u) * .5); font-size: calc(var(--u) * 1.6); font-weight: 800; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: opacity .3s; }
.lr.gone .rocket { visibility: hidden; } .lr.gone span { opacity: .4; }
.end { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.2); }
.end-win { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.end-win .rocket { height: calc(var(--u) * 17); rotate: 14deg; }
.end-name { font: 400 calc(var(--u) * 9) / 1 var(--display); text-transform: uppercase; color: var(--pc); text-shadow: 0 .07em 0 var(--deep); }
.end-score { display: block; margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 2.6); font-weight: 700; }
.end-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: calc(var(--u) * .5) calc(var(--u) * 4); min-width: calc(var(--u) * 40); }
.end-list li { display: flex; align-items: center; gap: calc(var(--u) * 1); min-width: calc(var(--u) * 26); padding: calc(var(--u) * .35) calc(var(--u) * 1.2); background: rgba(11, 8, 24, .6); font-size: calc(var(--u) * 2); font-weight: 700; border-radius: calc(var(--u) * .3); }
.end-list em { font: 400 calc(var(--u) * 1.6) / 1 var(--display); font-style: normal; color: var(--paper-d); width: 1.4em; } .end-list i { width: .7em; height: .7em; border-radius: 50%; background: var(--pc); }
.end-list span { flex: 1; } .end-list b { font: 400 calc(var(--u) * 1.9) / 1 var(--display); color: var(--gold-l); }

.soundchip { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 1.6); z-index: 8; display: flex; align-items: center; gap: .5em; padding: .4em .8em; background: var(--paper); color: var(--ink); border: 0; border-radius: .3em; font: 700 calc(var(--u) * 1.5) / 1 var(--body); cursor: pointer; }
.veil { position: absolute; inset: 0; z-index: 7; display: none; place-items: center; background: rgba(11, 8, 24, .82); font-size: calc(var(--u) * 3); font-weight: 700; text-align: center; }
.veil.on { display: grid; }

/* ---- phone ------------------------------------------------------------------------------------------------------------ */
body.is-phone { background: linear-gradient(#0f0b24, var(--night) 40%, #241b4b); background-attachment: fixed; }
.ph { max-width: 520px; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; }
.ph-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 16px 8px; background: var(--deep); border-bottom: 2px solid var(--night-3); }
.ph-me { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: 21px; font-weight: 800; color: var(--pc); }
.ph-me .rocket { height: 34px; flex: none; } .ph-me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-code { font: 400 15px/1 var(--display); letter-spacing: .14em; color: var(--paper-d); }
.ph-score { min-width: 64px; text-align: right; font: 400 23px/1 var(--display); color: var(--gold-l); font-variant-numeric: tabular-nums; }
.ph-main { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px max(20px, env(safe-area-inset-bottom)); }
.ph-main.enter > * { animation: ph-in .3s var(--out) both; }
@keyframes ph-in { from { opacity: 0; transform: translateY(10px); } }
.ph-h { font: 400 30px/1.06 var(--display); text-transform: uppercase; text-wrap: balance; }
.ph-p { font-size: 22px; line-height: 1.25; } .ph-p b { color: var(--gold-l); }
.ph-note { font-size: 18px; color: var(--paper-d); }
.ph-share { display: flex; gap: 14px; align-items: center; background: var(--paper); color: var(--ink); padding: 12px; border-radius: 6px; font-size: 19px; line-height: 1.2; }
.ph-qr { width: 124px; height: 124px; flex: none; background: #fff; padding: 4px; } .ph-qr svg { display: block; width: 100%; height: 100%; }
.ph-crew { display: flex; flex-direction: column; gap: 6px; }
.ph-crew li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(11, 8, 24, .6); border-radius: 6px; font-size: 21px; font-weight: 700; }
.ph-crew li i, .ph-table li i { width: 14px; height: 14px; border-radius: 50%; background: var(--pc); flex: none; }
.ph-crew li em { margin-left: auto; font-style: normal; font-size: 15px; color: var(--paper-d); text-transform: uppercase; letter-spacing: .05em; }
.ph-crew li.off { opacity: .4; }
.ph-how { display: flex; flex-direction: column; gap: 12px; counter-reset: how; }
.ph-how li { counter-increment: how; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 21px; line-height: 1.22; }
.ph-how li::before { content: counter(how); display: grid; place-items: center; width: 40px; height: 40px; background: var(--red); color: #fff8e6; font: 400 21px/1 var(--display); border-radius: 50%; }
.ph-how b { color: var(--gold-l); }
.ph-round { display: flex; align-items: center; gap: 14px; }
.ph-round b { display: grid; place-items: center; width: 74px; height: 74px; flex: none; background: var(--red); color: var(--gold-l); border: 3px solid var(--gold); border-radius: 50%; font: 400 44px/1 var(--display); }
.ph-crates { display: flex; flex-direction: column; gap: 14px; }
.btn.crate { min-height: 84px; background: #c08f4c repeating-linear-gradient(0deg, transparent 0 25px, rgba(60, 35, 10, .45) 25px 27px); border-color: #6e4a22; font: 400 23px/1.05 var(--display); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.ph-cat { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--paper-d); font-weight: 700; }
.ph-cat .stamp { font-size: 15px; }
.ph-q { font: 800 25px/1.12 var(--body); color: #fff8e6; text-wrap: pretty; }
.ph-worth { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: -8px; }
.ph-worth span { font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-d); }
.ph-worth b { font: 400 30px/1 var(--display); color: var(--gold-l); font-variant-numeric: tabular-nums; }
.ph-fuse { height: 12px; border-radius: 6px; background: #2a2440; overflow: hidden; }
.ph-fuse i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; will-change: transform; }
.ph-fuse.hot i { background: #ff5a3c; }
.ph-answers { display: flex; flex-direction: column; gap: 11px; }
.btn.ans { justify-content: flex-start; text-align: left; min-height: 64px; padding: 7px 12px 7px 8px; gap: 12px; text-transform: none; letter-spacing: 0; }
.btn.ans span { flex: none; display: grid; place-items: center; width: 46px; height: 46px; background: var(--red); color: #fff8e6; font: 400 24px/1 var(--display); border-radius: 4px; }
.btn.ans b { font-size: 23px; line-height: 1.05; }
.btn.ans:disabled:not(.popped):not(.picked) { opacity: .45; }
.btn.ans.popped { background: #2a2440; color: #8d86a8; border-color: #3a3358; box-shadow: none; transform: translateY(4px) rotate(-.8deg); }
.btn.ans.popped span { background: #3a3358; color: #8d86a8; } .btn.ans.popped b { text-decoration: line-through; }
.btn.ans.picked { background: var(--gold-l); }
.ph-locked { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; border: 3px dashed var(--gold); border-radius: 6px; text-align: center; font-size: 22px; line-height: 1.2; }
.ph-locked b { color: var(--gold-l); } .ph-lockicon .ico { width: 44px; height: 44px; color: var(--gold-l); }
.ph-lockval b { font: 400 28px/1 var(--display); }
.ph-locked.dud { border-color: #ff7a66; animation: dudshake .4s linear; } .ph-locked.dud b, .ph-locked.dud .ico { color: #ff7a66; }
@keyframes dudshake { 20% { transform: translateX(-8px) rotate(-1deg); } 50% { transform: translateX(7px) rotate(1deg); } 80% { transform: translateX(-4px); } }
.btn.fizz { background: transparent; color: var(--gold-l); border-color: var(--gold); box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 20px; min-height: 76px; }
.btn.fizz.pop { animation: fizzpop .25s var(--out); }
@keyframes fizzpop { 40% { transform: scale(.95); background: rgba(246, 185, 59, .22); } }
.ph-result { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border-radius: 6px; text-align: center; background: rgba(11, 8, 24, .6); border: 3px solid var(--ash); }
.ph-result.right { border-color: var(--gold); } .ph-result.right .ph-h, .ph-result.right .ph-delta, .ph-result.right .ico { color: var(--gold-l); }
.ph-result.wrong { border-color: #ff7a66; } .ph-result.wrong .ph-delta, .ph-result.wrong .ph-resicon .ico { color: #ff7a66; }
.ph-resicon .ico { width: 52px; height: 52px; }
.ph-delta { font: 400 54px/1 var(--display); font-variant-numeric: tabular-nums; }
.ph-streak { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; color: #ffb38a; }
.ph-entry { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 62px; padding: 8px 12px; background: var(--paper); color: var(--ink); border-radius: 6px; }
.ph-num { font: 400 40px/1 var(--display); font-variant-numeric: tabular-nums; } .ph-entry span { font-size: 20px; font-weight: 700; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.btn.key { min-height: 60px; font: 400 26px/1 var(--display); }
.btn.key.go { background: var(--red); color: #fff8e6; border-color: var(--red-d); box-shadow: 0 5px 0 var(--red-d); font-size: 21px; }
.btn.key.go:disabled { opacity: .4; }
.ph-table { display: flex; flex-direction: column; gap: 5px; }
.ph-table li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(11, 8, 24, .6); border-radius: 6px; font-size: 21px; font-weight: 700; }
.ph-table li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-table li b { font: 400 20px/1 var(--display); color: var(--gold-l); font-variant-numeric: tabular-nums; }
.ph-table li.me { background: var(--paper); color: var(--ink); } .ph-table li.me b { color: var(--red-d); }
.conn { position: fixed; left: 50%; top: 10px; z-index: 20; transform: translateX(-50%); padding: 6px 14px; background: var(--paper); color: var(--ink); border-radius: 6px; font-weight: 700; font-size: 17px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}