/* Bullseye, game show style: a lit marquee header over a purple stage.
   One deliberate look, so it doesn't switch with light and dark mode. */
:root {
  --night: #1a0838;     /* page background and outlines */
  --stage: #3a1580;     /* the main card */
  --stage-2: #5a2fa8;   /* empty track, unlit dots */
  --red: #ff3d5a;       /* marquee, off-by tile, bullseye rings */
  --gold: #ffc93c;      /* bulbs, fill, buttons */
  --white: #ffffff;
  --lilac: #c4b2ee;     /* secondary text on the stage */
  --mint: #6dffa8;      /* correct answer */
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--white);
  font: 500 17px/1.45 var(--body);
}
[hidden] { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.top, main {
  max-width: 580px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top { padding-block: 18px 14px; }
main { padding-block: 0 40px; }

/* Marquee header with a ring of "bulbs" */
.marquee {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--red); border: 4px dotted var(--gold); border-radius: 18px;
  padding: 12px 16px; box-shadow: 0 6px 0 var(--night), 0 0 0 4px var(--night);
}
.logo {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font: 400 26px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
}
.logo-mark { width: 32px; height: 32px; flex: none; }
.puzzle-no { font: 400 15px/1 var(--display); color: var(--gold); white-space: nowrap; }

.card {
  background: var(--stage); border-radius: 26px; padding: 20px;
  display: flex; flex-direction: column;
}

/* Question screen */
.meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-count { font: 400 20px/1 var(--display); color: var(--white); }
.q-count small { font-size: 15px; color: var(--lilac); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--gold); color: var(--night); border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.tag.fermi { background: var(--white); }

.bubble {
  margin: 18px 0 26px; background: var(--white); color: var(--night);
  border: 4px solid var(--night); border-radius: 22px; padding: 18px 20px;
  box-shadow: 0 6px 0 var(--night);
}
.prompt { margin: 0; font-size: 25px; line-height: 1.28; font-weight: 800; text-wrap: balance; }

.readout { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
#guess-box {
  flex: 1; min-width: 0; max-width: 340px; text-align: center;
  font: 400 38px/1.1 var(--display); color: var(--gold);
  background: var(--night); border: 3px solid var(--gold); border-radius: 14px; padding: 8px 6px;
  -moz-appearance: textfield; appearance: textfield;
}
#guess-box::-webkit-outer-spin-button, #guess-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nudge {
  width: 44px; height: 44px; flex: none; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--night); background: var(--white); color: var(--night);
  font-size: 24px; font-weight: 800; line-height: 1;
}
.nudge:active { transform: translateY(2px); }

/* Slider with a bullseye as the handle */
#slider {
  --fill: 0%;
  width: 100%; height: 48px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
#slider::-webkit-slider-runnable-track {
  height: 12px; border-radius: 6px;
  background: linear-gradient(to right, var(--gold) var(--fill), var(--night) var(--fill));
}
#slider::-moz-range-track { height: 12px; border-radius: 6px; background: var(--night); }
#slider::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--gold); }
#slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 44px; margin-top: -16px; border: none; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17' fill='%23ff3d5a' stroke='%231a0838' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='18' r='12' fill='%23fff'/%3E%3Ccircle cx='18' cy='18' r='7' fill='%23ff3d5a'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 0 var(--night));
}
#slider::-moz-range-thumb {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17' fill='%23ff3d5a' stroke='%231a0838' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='18' r='12' fill='%23fff'/%3E%3Ccircle cx='18' cy='18' r='7' fill='%23ff3d5a'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
#slider:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.scale { display: flex; justify-content: space-between; color: var(--lilac); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.primary {
  display: block; width: 100%; margin-top: 24px; padding: 16px; cursor: pointer;
  border: 4px solid var(--night); border-radius: 16px; background: var(--gold); color: var(--night);
  font: 400 20px/1 var(--display); box-shadow: 0 6px 0 var(--night);
}
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--night); }
#next, #share { background: var(--white); }
.secondary {
  display: block; width: 100%; margin-top: 14px; padding: 12px; cursor: pointer;
  border: 3px solid var(--gold); border-radius: 14px; background: transparent; color: var(--gold);
  font-size: 15px; font-weight: 800;
}

/* Reveal screen */
.r-prompt { margin: 0 0 14px; color: #e3d8ff; font-size: 19px; font-weight: 700; }
.points-row, .answer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.points-row { margin-top: 30px; }
.tile { border: 4px solid var(--night); border-radius: 18px; padding: 12px 14px; min-width: 0; }
.tile-score { background: var(--white); color: var(--night); }
.tile-off { background: var(--red); color: var(--white); text-align: right; }
.tile-bull { background: var(--gold); color: var(--night); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.label { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.points { font: 400 50px/1 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.points small { font-size: 18px; color: #6b5a96; }
.accuracy-value { display: block; font: 400 38px/1.2 var(--display); margin-top: 4px; }
.bull-mark { width: 40px; height: 40px; }

.track { position: relative; height: 12px; border-radius: 6px; background: var(--night); margin: 46px 0 6px; }
.t-window { position: absolute; top: -3px; height: 18px; background: rgb(109 255 168 / 0.35); border-radius: 4px; }
.t-mark { position: absolute; top: -7px; width: 6px; height: 26px; margin-left: -3px; border-radius: 3px; }
.t-mark span {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.t-mark[data-edge="end"] span { left: auto; right: -3px; transform: none; }
.t-mark[data-edge="start"] span { left: -3px; transform: none; }
.t-answer { background: var(--mint); }
.t-answer span { color: var(--mint); }
.t-guess { background: var(--gold); }
.t-guess span { color: var(--gold); bottom: -26px; }

/* Your answer / correct answer tiles above the track */
.tile-value { display: block; margin-top: 4px; font: 400 32px/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.tile-value .unit { font: 700 15px/1 var(--body); white-space: nowrap; opacity: 0.75; }
.tile-you { background: var(--gold); color: var(--night); }
.tile-answer { background: var(--mint); color: var(--night); text-align: right; }
.tile-answer.waiting #r-answer { visibility: hidden; }
.tile-answer.show #r-answer { animation: answer-in 420ms 1100ms both cubic-bezier(.3,1.7,.5,1); }
@keyframes answer-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.bull-range {
  margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--night);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
}
.bull-range .label { color: var(--lilac); width: 100%; }
#r-range { color: var(--gold); font: 400 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
#r-range .unit { font: 700 14px/1 var(--body); color: var(--lilac); }
.range-note { color: var(--white); font-size: 16px; font-weight: 700; }
.working { background: var(--night); border-radius: 12px; padding: 12px 14px; font-size: 16px; margin: 16px 0 0; }

.source-toggle {
  align-self: flex-start; margin-top: 18px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--gold); font-size: 14px; font-weight: 700; text-decoration: underline;
}
.source-panel { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--white); color: var(--night); font-size: 14px; }
.source-panel p { margin: 0; }
.source-site { margin-top: 6px !important; color: #6b5a96; font-size: 13px; }

/* Start screen */
.start-streak { margin: 4px 0 12px; text-align: center; font-weight: 800; color: var(--gold); }

/* Summary */
.summary-title { margin: 0; text-align: center; font: 400 22px/1.2 var(--display); color: var(--gold); text-wrap: balance; }
.summary-score { margin-top: 16px; text-align: center; }
.points.big { text-align: center; font-size: 64px; margin-top: 6px; }
.points.big small { color: #6b5a96; font-size: 22px; }
.squares { text-align: center; font-size: 19px; margin: 8px 0 0; letter-spacing: 0; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.stat { background: var(--night); border-radius: 14px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.stat-n { font: 400 24px/1.1 var(--display); color: var(--white); font-variant-numeric: tabular-nums; }
.stat-l { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lilac); }
.countdown { margin-top: 18px; text-align: center; }
.countdown .label { color: var(--lilac); }
.countdown-n { display: block; margin-top: 4px; font: 400 34px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.s-list-title { margin: 26px 0 0; font: 400 16px/1 var(--display); color: var(--lilac); }
.share-text { width: 100%; margin-top: 10px; padding: 10px; border: 3px solid var(--night); border-radius: 12px; background: var(--white); color: var(--night); font: inherit; resize: none; }
/* Your answers */
.ans-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.ans {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n q pts" "n v v";
  gap: 8px 12px; align-items: start;
  background: var(--night); border-radius: 16px; padding: 12px; border-left: 6px solid var(--tier);
}
.ans-bull { --tier: var(--gold); } .ans-good { --tier: var(--mint); }
.ans-ok { --tier: #ff9f43; } .ans-miss { --tier: var(--red); }
.ans-n { grid-area: n; align-self: center;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--stage-2); font: 400 14px/1 var(--display);
}
.ans-q { grid-area: q; margin: 0; font-size: 15px; line-height: 1.3; color: #e3d8ff; }
.ans-v { grid-area: v; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.ans-v small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.ans-real b { color: var(--mint); font-size: 17px; }
.ans-you b { color: var(--gold); font-size: 17px; }
.ans-pts { grid-area: pts;
  min-width: 52px; padding: 8px 8px; border-radius: 12px; text-align: center; white-space: nowrap;
  background: var(--tier); color: var(--night); font: 400 18px/1 var(--display);
}

/* Crowd: better than X% of players, and the day's score graph */
.crowd { margin-top: 14px; background: var(--night); border-radius: 18px; padding: 16px; }
.crowd-loading { margin: 0; text-align: center; color: var(--lilac); font-size: 15px; }
.crowd-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: center; }
.crowd-stat { background: var(--stage); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; justify-content: space-between; }
.crowd-stat .label { color: var(--lilac); font-size: 11.5px; }
.crowd-n { display: block; margin-top: 4px; font: 400 36px/1 var(--display); color: var(--white); font-variant-numeric: tabular-nums; }
.crowd-n.you { color: var(--gold); }
.crowd-line { margin: 12px 0 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--white); text-wrap: balance; }
.chart { margin-top: 16px; }
.chart-bars { height: 110px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 3px solid var(--stage-2); padding-top: 22px; }
.bar {
  position: relative; flex: 1; height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--stage-2);
  transform-origin: bottom; animation: bar-in 500ms both cubic-bezier(.3,1.4,.5,1);
}
.bar.you { background: var(--gold); }
.bar em {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font: 400 12px/1 var(--display); font-style: normal; color: var(--gold); white-space: nowrap;
}
@keyframes bar-in { from { transform: scaleY(0); } to { transform: none; } }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--lilac); font-size: 13px; font-weight: 700; }

@media (max-width: 400px) {
  .logo { font-size: 22px; }
  .prompt { font-size: 20px; }
  #guess-box { font-size: 32px; }
  .points { font-size: 40px; }
  .accuracy-value { font-size: 28px; }
  .tile-value { font-size: 26px; }
  .answer-row .tile { padding: 12px 10px; }
  .answer-row .label { font-size: 11.5px; letter-spacing: 0.04em; white-space: nowrap; }
  .prompt { font-size: 21px; }
  .stat-n { font-size: 20px; }
  .stat-l { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Reveal animations ---------- */
.t-mark.anim { transition: left 1100ms cubic-bezier(.2,.8,.2,1); }
#t-answer.anim { animation: drop-in 450ms 1100ms both cubic-bezier(.3,1.6,.5,1); transition: none; }
@keyframes drop-in { from { transform: translateY(-24px) scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.pop { animation: pop 260ms cubic-bezier(.3,1.8,.5,1); display: inline-block; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.22); } 100% { transform: scale(1); } }
#screen-reveal:not([hidden]) .tile { animation: tile-in 320ms both cubic-bezier(.3,1.5,.5,1); }
#screen-reveal:not([hidden]) .tile + .tile { animation-delay: 90ms; }
#screen-reveal:not([hidden]) .points-row .tile { animation-delay: 180ms; }
#screen-reveal:not([hidden]) .points-row .tile + .tile { animation-delay: 270ms; }
@keyframes tile-in { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* Bullseye: dartboard pops up, a dart flies in from off-screen, slows,
   then slams into the bull. Flash, shake, shockwave, rings light up. */
.bull-fx {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgb(90 47 168 / 0.85), rgb(26 8 56 / 0.95) 70%);
  overflow: hidden;
}
.fx-stage { position: relative; width: min(78vw, 320px); aspect-ratio: 1; max-width: 100%; }
.fx-board, .fx-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-board { filter: drop-shadow(0 12px 0 #0b0320) drop-shadow(0 0 30px rgb(255 201 60 / 0.25)); }
.fx-rings circle { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 4px var(--gold)); }
.fx-shock {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 6px solid var(--white); opacity: 0;
}
.fx-dart-wrap {
  position: absolute; left: calc(50% + var(--lx, 0%)); top: calc(50% + var(--ly, 0%)); width: 62%; height: 0;
  transform-origin: 0 0; transform: rotate(-28deg);
}
.fx-dart { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-50%); filter: drop-shadow(-6px 10px 4px rgb(11 3 32 / 0.55)); }
.fx-trail {
  position: absolute; left: 70%; top: -5px; width: 260%; height: 10px; border-radius: 5px;
  background: linear-gradient(to right, rgb(255 255 255 / 0.9), rgb(255 201 60 / 0.5) 30%, transparent);
  opacity: 0; filter: blur(2px);
}
.fx-flash { position: fixed; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; }
.fx-text {
  position: absolute; left: 50%; bottom: -70px; margin: 0; transform: translateX(-50%);
  font: 400 44px/1 var(--display); color: var(--gold); white-space: nowrap;
  text-shadow: 0 5px 0 var(--night), 0 0 24px rgb(255 201 60 / 0.7);
}
.fx-burst { position: absolute; left: 50%; top: 50%; }
.fx-burst i {
  position: absolute; width: 10px; height: 24px; margin: -12px 0 0 -5px; border-radius: 5px;
  background: var(--gold); opacity: 0;
}
.fx-burst i:nth-child(3n) { background: var(--white); }
.fx-burst i:nth-child(3n+1) { background: var(--red); }
.fx-burst i:nth-child(1) { --a: 0deg; } .fx-burst i:nth-child(2) { --a: 30deg; } .fx-burst i:nth-child(3) { --a: 60deg; }
.fx-burst i:nth-child(4) { --a: 90deg; } .fx-burst i:nth-child(5) { --a: 120deg; } .fx-burst i:nth-child(6) { --a: 150deg; }
.fx-burst i:nth-child(7) { --a: 180deg; } .fx-burst i:nth-child(8) { --a: 210deg; } .fx-burst i:nth-child(9) { --a: 240deg; }
.fx-burst i:nth-child(10) { --a: 270deg; } .fx-burst i:nth-child(11) { --a: 300deg; } .fx-burst i:nth-child(12) { --a: 330deg; }

.bull-fx.play { animation: fx-fade 3000ms both; }
.bull-fx.play .fx-stage { animation: stage-shake 450ms 1400ms both; }
.bull-fx.play .fx-board { animation: board-pop 700ms both cubic-bezier(.3,1.6,.5,1), board-thud 300ms 1400ms forwards; }
.bull-fx.play .fx-dart-wrap { animation: dart-fly 700ms 700ms both linear, dart-wobble 700ms 1400ms forwards; }
.bull-fx.play .fx-trail { animation: trail 700ms 700ms both linear; }
.bull-fx.play .fx-flash { animation: flash 350ms 1400ms forwards ease-out; }
.bull-fx.play .fx-shock { animation: shock 700ms 1400ms forwards ease-out; }
.bull-fx.play .fx-rings circle { animation: ring-light 900ms both ease-out; }
.bull-fx.play .fx-burst i { animation: burst 1000ms 1400ms forwards cubic-bezier(.1,.8,.3,1); }
.bull-fx.play .fx-text { animation: text-pop 500ms 1550ms both cubic-bezier(.3,1.8,.5,1); }

@keyframes fx-fade { 0% { opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes board-pop { from { transform: scale(0.2) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes board-thud { 0%, 100% { transform: none; } 30% { transform: scale(0.93); } 60% { transform: scale(1.03); } }
/* Fast approach from off-screen, slow-motion close in, then the final snap. */
@keyframes dart-fly {
  0%   { transform: rotate(-28deg) translate(260%, 0) scale(3.2); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: rotate(-28deg) translate(40%, 0) scale(1.5); }
  85%  { transform: rotate(-28deg) translate(12%, 0) scale(1.12); }
  100% { transform: rotate(-28deg) translate(0, 0) scale(1); opacity: 1; }
}
@keyframes dart-wobble {
  0%, 100% { transform: rotate(-28deg); }
  15% { transform: rotate(-19deg); } 35% { transform: rotate(-35deg); }
  55% { transform: rotate(-24deg); } 75% { transform: rotate(-31deg); } 90% { transform: rotate(-27deg); }
}
@keyframes trail { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }
@keyframes stage-shake {
  0%, 100% { transform: none; } 15% { transform: translate(-8px, 5px); } 30% { transform: translate(7px, -6px); }
  45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); }
}
@keyframes shock { from { transform: scale(1); opacity: 0.95; } to { transform: scale(22); opacity: 0; border-width: 1px; } }
@keyframes ring-light { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes burst {
  from { transform: rotate(var(--a)) translateY(0) scaleY(0.4); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(-170px) scaleY(1); opacity: 0; }
}
@keyframes text-pop { from { transform: translateX(-50%) scale(0.3) rotate(-8deg); opacity: 0; } to { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; } }

/* Non-bullseye throws: shorter, no flash, shake, shockwave or ring lights. */
.bull-fx.play:not(.tier-bull) { animation: fx-fade 2000ms both; }
.bull-fx.play.tier-miss { animation-duration: 2300ms; }
.bull-fx.play:not(.tier-bull) .fx-stage,
.bull-fx.play:not(.tier-bull) .fx-flash,
.bull-fx.play:not(.tier-bull) .fx-shock,
.bull-fx.play:not(.tier-bull) .fx-rings circle,
.bull-fx.play:not(.tier-bull) .fx-burst i { animation: none; }
.bull-fx.play:not(.tier-bull) .fx-board { animation: board-pop 550ms both cubic-bezier(.3,1.6,.5,1), board-thud 260ms 950ms forwards; }
.bull-fx.play:not(.tier-bull) .fx-dart-wrap { animation: dart-fly 550ms 400ms both cubic-bezier(.5,0,.9,.5), dart-wobble 600ms 950ms forwards; }
.bull-fx.play:not(.tier-bull) .fx-trail { animation: trail 550ms 400ms both linear; }
.bull-fx.play:not(.tier-bull) .fx-text { animation: text-pop 450ms 1020ms both cubic-bezier(.3,1.8,.5,1); }
.bull-fx.play.tier-miss .fx-dart-wrap { animation: dart-fly 550ms 400ms both cubic-bezier(.5,0,.9,.5), dart-wobble 500ms 950ms forwards, dart-fall 700ms 1450ms forwards ease-in; }
.bull-fx.play.tier-miss .fx-board { animation: board-pop 550ms both cubic-bezier(.3,1.6,.5,1); }
@keyframes dart-fall {
  from { transform: rotate(-28deg); opacity: 1; }
  to { transform: translate(-10%, 260%) rotate(70deg); opacity: 0; }
}
.tier-close .fx-text { color: #6dffa8; }
.tier-decent .fx-text { color: var(--gold); }
.tier-ouch .fx-text, .tier-miss .fx-text { color: var(--red); text-shadow: 0 5px 0 var(--night), 0 0 18px rgb(255 61 90 / 0.5); }

.top-right { display: flex; align-items: center; gap: 10px; }
.sound-btn {
  width: 36px; height: 36px; padding: 6px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--night); background: var(--white); color: var(--night);
}
.sound-btn svg { width: 100%; height: 100%; display: block; }
.sound-btn .mute { display: none; }
.sound-btn[aria-pressed="false"] .waves { display: none; }
.sound-btn[aria-pressed="false"] .mute { display: inline; }
@media (prefers-reduced-motion: reduce) { .bull-fx { display: none !important; } }

/* How-to-play popup: a marquee banner over numbered steps, with a live slider demo */
.help-btn { padding: 0; font: 400 18px/1 var(--display); display: grid; place-items: center; }
.rules {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  margin: auto; padding: 0 16px 16px; border: 4px solid var(--night); border-radius: 26px;
  background: var(--stage); color: var(--white); box-shadow: 0 8px 0 var(--night), 0 24px 60px rgb(0 0 0 / 0.5);
}
.rules[open] { animation: rules-in 380ms cubic-bezier(.3,1.5,.5,1); }
@keyframes rules-in { from { transform: scale(0.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.rules::backdrop { background: rgb(26 8 56 / 0.85); }
.rules-banner {
  margin: 14px 0 12px; padding: 8px; text-align: center;
  background: var(--red); border: 4px dotted var(--gold); border-radius: 18px;
  box-shadow: 0 5px 0 var(--night);
}
.rules-banner h2:focus { outline: none; }
.rules-banner h2 { margin: 0; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  background: var(--night); border-radius: 16px; padding: 10px 12px;
}
.rules[open] .step { animation: step-in 360ms both cubic-bezier(.3,1.4,.5,1); }
.rules[open] .step:nth-child(2) { animation-delay: 60ms; }
.rules[open] .step:nth-child(3) { animation-delay: 120ms; }
.rules[open] .step:nth-child(4) { animation-delay: 180ms; }
.rules[open] .step:nth-child(5) { animation-delay: 240ms; }
@keyframes step-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.step-n {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--night); font: 400 18px/1 var(--display);
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.35);
}
.step h3 { margin: 1px 0 2px; font: 400 17px/1.15 var(--display); color: var(--gold); text-transform: uppercase; letter-spacing: 0.01em; }
.step p { margin: 0; font-size: 15px; line-height: 1.35; color: #e3d8ff; }
.step .hl { color: var(--white); }
.twists { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.twist { display: flex; align-items: center; gap: 8px; }
.chip {
  flex: none; min-width: 58px; text-align: center; padding: 4px 8px; border-radius: 999px;
  background: var(--mint); color: var(--night); font: 400 12px/1 var(--display); text-transform: uppercase;
}
.chip-fermi { background: var(--gold); }
/* Mini slider: the same gold fill and bullseye handle as the real one */
.demo { margin-top: 8px; padding: 8px 12px 12px; background: var(--stage); border-radius: 14px; }
.demo-num { display: block; text-align: center; font: 400 22px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.demo-track { position: relative; height: 10px; margin: 12px 14px 0; border-radius: 5px; background: var(--night); }
.demo-fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 47%); border-radius: 5px; background: var(--gold); }
.demo-handle {
  position: absolute; top: 50%; left: var(--p, 47%); width: 30px; height: 30px; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17' fill='%23ff3d5a' stroke='%231a0838' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='18' r='12' fill='%23fff'/%3E%3Ccircle cx='18' cy='18' r='7' fill='%23ff3d5a'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 var(--night));
}
.rules form { margin: 14px 0 0; display: flex; }
.rules form .primary { flex: 1; margin-top: 0; padding: 14px; }

/* Scratchpad: calculator + notes. Beside the card on wide screens, inline in
   the question header on phones, where the panel opens as a bottom sheet. */
#screen-question { position: relative; }
.tools { display: flex; gap: 8px; margin-left: auto; margin-right: 10px; }
.tool-btn {
  width: 44px; height: 44px; padding: 8px; border-radius: 14px; cursor: pointer;
  border: 3px solid var(--night); background: var(--white); color: var(--night);
  box-shadow: 0 4px 0 var(--night);
}
.tool-btn svg { width: 100%; height: 100%; display: block; }
.tool-btn[aria-expanded="true"] { background: var(--gold); }
.tool-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--night); }
.tool-panel {
  position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 100vw); padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--stage); border: 4px solid var(--night); border-bottom: none; border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.5);
}
.tool-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.tool-tab {
  flex: 1; padding: 8px 6px; border-radius: 12px; cursor: pointer; border: 3px solid var(--night);
  background: var(--night); color: var(--lilac); font: 400 13px/1 var(--display); text-transform: uppercase;
}
.tool-tab[aria-selected="true"] { background: var(--gold); color: var(--night); }
.tool-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid var(--night);
  background: var(--white); color: var(--night); font: 400 20px/1 var(--display);
}
.calc-screen { background: var(--night); border-radius: 14px; padding: 8px 12px; text-align: right; min-height: 64px; }
.calc-expr { min-height: 18px; color: var(--lilac); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.calc-out { font: 400 28px/1.15 var(--display); color: var(--gold); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.calc-keys button {
  height: 42px; border-radius: 12px; cursor: pointer; border: 3px solid var(--night);
  background: var(--white); color: var(--night); font: 400 18px/1 var(--display); box-shadow: 0 3px 0 var(--night);
}
.calc-keys button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--night); }
.calc-keys .k-fn { background: var(--lilac); }
.calc-keys .k-op { background: var(--stage-2); color: var(--white); }
.calc-keys .k-eq { background: var(--gold); }
.calc-use {
  width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 3px solid var(--night); background: var(--mint); color: var(--night); font: 400 14px/1 var(--display); text-transform: uppercase;
}
.calc-use:disabled { opacity: 0.45; cursor: default; }
.notes-text {
  width: 100%; height: 262px; resize: none; padding: 12px; border-radius: 14px; border: 3px solid var(--night);
  background: #fffbea; color: var(--night); font: 500 16px/1.5 var(--body);
  background-image: repeating-linear-gradient(transparent 0 23px, #e9dfb8 23px 24px); background-position: 0 11px;
}
@media (min-width: 1080px) {
  .tools { position: absolute; top: 0; left: calc(100% + 18px); margin: 0; flex-direction: row; }
  .tool-btn { width: 54px; height: 54px; padding: 10px; }
  .tool-panel {
    position: absolute; top: 68px; left: 0; bottom: auto; transform: none; width: 248px;
    padding: 12px; border-bottom: 4px solid var(--night); border-radius: 20px; box-shadow: 0 6px 0 var(--night);
  }
  .calc-keys button { height: 40px; font-size: 16px; }
  .notes-text { height: 280px; }
}