/* game.css — Buehne, Publikum, Effekt-Layer, Anzeiger, Timer, Event-Karte. */

.screen--game { padding: 0; }

/* ---- Buehne ---- */
.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: #06060b;
  isolation: isolate;
  will-change: transform;
}

.stage-world { position: absolute; inset: 0; z-index: 0; will-change: transform; }

.stage-hall {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(249, 197, 0, .10), transparent 55%),
    linear-gradient(180deg, #0c0c14 0%, #0a0a12 42%, #08080f 66%, #050509 100%);
}
/* seitliche Wandandeutung + Bodenlinie */
.stage-hall::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55)),
    radial-gradient(140% 60% at 50% 118%, rgba(249,197,0,.06), transparent 60%);
}

/* Praesentationsleinwand hinten */
.stage-screen {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: min(46%, 520px); aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(249,197,0,.16), rgba(120,150,200,.06));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 60px -10px rgba(249,197,0,.22), inset 0 0 40px rgba(0,0,0,.4);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), opacity .4s var(--ease);
  z-index: 1;
}
.stage-screen span {
  position: absolute; inset: 14% 18%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);
  opacity: .5;
}
.stage-screen.black { background: #000; box-shadow: inset 0 0 60px rgba(0,0,0,.9); }
.stage-screen.black span { opacity: 0; }

/* Lichtkegel von oben */
.stage-beams {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background:
    conic-gradient(from 200deg at 30% -8%, transparent 0deg, rgba(249,197,0,.03) 10deg, rgba(249,197,0,.08) 18deg, rgba(249,197,0,.03) 26deg, transparent 40deg),
    conic-gradient(from 150deg at 70% -8%, transparent 0deg, rgba(120,160,255,.02) 9deg, rgba(120,160,255,.06) 16deg, rgba(120,160,255,.02) 23deg, transparent 38deg);
  opacity: .85;
}

/* Publikum */
.stage-audience {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  z-index: 2; pointer-events: none;
}
.aud-svg { width: 100%; height: 100%; display: block; }
.aud-fig { transition: transform .5s var(--ease), opacity .5s var(--ease); transform-box: fill-box; transform-origin: center bottom; }
.aud-fig .aud-face { transition: opacity .4s var(--ease); }
.aud-fig.lit .aud-face, .aud-fig.lit-soft .aud-face { opacity: .55; }
.aud-fig.lit-soft .aud-face { opacity: .3; }
.aud-fig.sway { animation: audSway 1.1s var(--ease) 0s 2 alternate; }
.aud-fig.clap { animation: audClap .28s ease-in-out 0s 4 alternate; }
.aud-fig.jitter { animation: audJitter .12s linear 0s 12; }
.aud-fig.cluster { transform: translateY(-4px) scale(1.04); }
.aud-fig.leaving { animation: audLeave 2.4s var(--ease) forwards; }
/* Dynamische Publikumsgroesse: leere Plaetze weich ausblenden (nur Opazitaet,
   damit die SVG-Positionierung der Silhouetten unangetastet bleibt). */
.aud-fig.gone { opacity: 0 !important; }
@keyframes audSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes audClap { from { transform: scaleY(1); } to { transform: scaleY(1.08) translateY(-2px); } }
@keyframes audJitter { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
@keyframes audLeave { to { transform: translateX(80px) translateY(6px); opacity: 0; } }

/* Bodenlicht / Spot auf der Buehne (Vordergrund) */
.stage-spot {
  position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%);
  width: 80%; height: 42%; z-index: 3; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(249,197,0,.14), rgba(249,197,0,.08) 28%, rgba(249,197,0,.03) 52%, transparent 74%);
  transition: opacity .5s var(--ease); opacity: .9;
}
.stage-podium {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 34%; height: 12%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), #04040a 70%);
  border-radius: 50% 50% 0 0 / 90% 90% 0 0;
  filter: blur(1px);
}

/* ---- Effekt-Layer ---- */
.stage-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.fx-el { position: absolute; }
.fx-vignette { inset: 0; box-shadow: inset 0 0 220px 40px rgba(0,0,0,.85); }
.fx-vignette-soft { inset: 0; box-shadow: inset 0 0 180px 20px rgba(0,0,0,.55); }
.fx-flash { inset: 0; background: rgba(255,255,255,.14); animation: fxFade .26s ease-out forwards; }
.fx-strobe { inset: 0; background: rgba(229,72,77,.0); animation: fxStrobe 1.6s steps(1) 3; }
.fx-alarm-static { inset: 0; background: rgba(229,72,77,.18); box-shadow: inset 0 0 200px 30px rgba(229,72,77,.5); }
.fx-ring {
  left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.7); animation: fxRing .8s ease-out forwards;
}
.fx-phone {
  width: 14px; height: 22px; border-radius: 3px;
  background: radial-gradient(circle at 50% 35%, #cfe8ff, #6aa4ff 60%, #2b57b0);
  box-shadow: 0 0 16px 6px rgba(120,170,255,.7); animation: fxPhone 1.1s ease-in-out infinite;
}
.fx-bubble {
  transform: translate(-50%, -100%);
  min-width: 30px; padding: 6px 12px; border-radius: 12px 12px 12px 2px;
  background: #fff; color: #111; font-weight: 800; font-size: 1.1rem; line-height: 1;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.6); animation: fxBubble 2.6s var(--ease) forwards;
}
.fx-bubble span { display: block; }
.fx-spark {
  bottom: 8%; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 10px 2px rgba(249,197,0,.6); animation: fxSpark 1.4s ease-out forwards;
}
@keyframes fxFade { to { opacity: 0; } }
@keyframes fxStrobe { 0% { background: rgba(229,72,77,.42); } 50% { background: rgba(229,72,77,0); } 100% { background: rgba(229,72,77,.42); } }
@keyframes fxRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@keyframes fxPhone { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-3px); } }
@keyframes fxBubble { 0% { transform: translate(-50%,-90%) scale(.6); opacity: 0; } 12% { transform: translate(-50%,-100%) scale(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(-50%,-118%) scale(1); opacity: 0; } }
@keyframes fxSpark { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-220px) scale(.4); opacity: 0; } }

/* Buehnen-Zustaende (nur die visuelle Welt, nicht HUD/Karte) */
.stage-world.fx-dark .stage-hall, .stage-world.fx-dark .stage-audience { filter: brightness(.32); transition: filter .4s var(--ease); }
.stage-world.fx-dark .stage-spot { opacity: .25; }
.stage-world.fx-silence { filter: saturate(.7) brightness(.82); transition: filter .5s var(--ease); }
.stage-world.fx-spotlight .stage-spot { opacity: 1; filter: brightness(1.5); }
.stage-world.fx-spotlight .stage-hall { filter: brightness(1.08); }
.stage-world.fx-murmur .stage-audience { filter: brightness(.9); }
.stage-world.fx-alarm .stage-hall { animation: alarmTint 1.6s steps(1) 3; }
@keyframes alarmTint { 0% { filter: brightness(1.1) hue-rotate(-8deg); } 50% { filter: brightness(.7); } 100% { filter: brightness(1.1) hue-rotate(-8deg); } }
.stage-world.fx-shake { animation: stageShake .6s var(--ease); }
@keyframes stageShake {
  10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); }
}

/* ---- HUD: Anzeiger + Ton ---- */
.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px clamp(14px, 3vw, 28px);
  pointer-events: none;
}
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hud-meters { display: flex; gap: clamp(8px, 1.6vw, 18px); pointer-events: auto; }
.meter {
  position: relative; width: clamp(92px, 15vw, 168px);
  background: rgba(12,12,20,.62); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px 9px;
}
.meter.pulse { animation: meterPulse .5s var(--ease); }
@keyframes meterPulse { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.meter-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.meter-val { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.meter-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter-fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width .6s var(--ease), background .4s var(--ease);
}
.meter-fill.low { background: linear-gradient(90deg, var(--danger-deep), var(--danger)); }
.meter-fill.high { background: linear-gradient(90deg, var(--gold-deep), var(--ok)); }
.meter-chip {
  position: absolute; right: 10px; top: 30px; font-size: .8rem; font-weight: 800;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.meter-chip.show { animation: chipFloat 1.4s var(--ease) forwards; }
.meter-chip.up { color: var(--ok); }
.meter-chip.down { color: var(--danger); }
@keyframes chipFloat { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: translateY(-2px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.sound-toggle {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(12,12,20,.62); backdrop-filter: blur(8px);
  border: 1px solid var(--border); color: var(--text); cursor: pointer;
  display: grid; place-items: center; pointer-events: auto;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.sound-toggle:hover { border-color: var(--line-gold); transform: translateY(-1px); }
.sound-toggle .sound-off { display: none; color: var(--text-faint); }
.sound-toggle[aria-pressed="false"] .sound-on { display: none; }
.sound-toggle[aria-pressed="false"] .sound-off { display: block; }

/* ---- Wunschkunden-Zaehler: eigenstaendige Warteschlange am Buehnenrand ----
   Bewusst KEIN 4. Balken: eigene Form (Pille + Figuren-Reihe), warmer Rand-Akzent,
   grenzt sich klar von den .meter-Karten der 3 Dimensionen ab. */
.wk-counter {
  position: relative;
  align-self: flex-start; max-width: min(420px, 100%);
  background: linear-gradient(120deg, rgba(249,197,0,.14), rgba(16,16,24,.68));
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-gold); border-radius: 999px;
  padding: 8px 16px;
  pointer-events: auto;
  transition: transform .3s var(--ease);
}
.wk-counter.pulse { animation: wkPulse .5s var(--ease); }
@keyframes wkPulse { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.wk-row { display: flex; align-items: center; gap: 10px; position: relative; }
.wk-figs { display: flex; gap: 1px; flex: none; }
.wk-fig { width: 9px; height: 11px; flex: none; }
.wk-fig circle, .wk-fig path { fill: rgba(249,197,0,.34); transition: fill .35s var(--ease); }
.wk-fig.lit circle, .wk-fig.lit path { fill: var(--gold-bright); }
.wk-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wk-label {
  font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-num { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.wk-max { color: var(--text-faint); font-size: .8rem; margin-left: 1px; }
.wk-chip {
  position: absolute; right: 0; top: -4px; font-size: .78rem; font-weight: 800;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.wk-chip.show { animation: chipFloat 1.4s var(--ease) forwards; }
.wk-chip.up { color: var(--ok); }
.wk-chip.down { color: var(--danger); }

/* Tooltip bewusst AUSSERHALB des Pillen-Flusses: absolut positioniertes Popover
   direkt unter dem Zaehler, damit .wk-counter (border-radius:999px) beim Aufklappen
   nicht in die Hoehe waechst (das liess den Radius auf die halbe Hoehe anwachsen und
   die Boegen mit der rechteckigen Tooltip-Box kollidieren, Principal-Befund). */
.wk-tooltip {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  margin: 0; padding: 10px 12px; width: max-content; max-width: 320px;
  background: rgba(8,8,13,.94); border: 1px solid var(--line-gold); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .82rem; line-height: 1.42;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wk-tooltip.show { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 640px) {
  .wk-counter { max-width: 100%; padding: 7px 14px 7px 13px; }
  .wk-label { font-size: .58rem; }
  .wk-num { font-size: .92rem; }
  .wk-fig { width: 7px; height: 9px; }
  .wk-tooltip { font-size: .78rem; max-width: min(300px, calc(100vw - 56px)); }
}

/* ---- Event-Dock: Timer + Karte ---- */
.event-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* zusaetzlicher unterer Freiraum fuer den persistenten globalen Footer */
  padding: 0 clamp(12px, 3vw, 24px) calc(clamp(16px, 3vh, 26px) + 26px);
  background: linear-gradient(180deg, transparent, rgba(4,4,9,.55) 26%, rgba(4,4,9,.94) 100%);
  pointer-events: none;
}
.event-dock > * { pointer-events: auto; }

/* Fuss der Buehne: Presenter-Monitor (Buehnenzeit) + Reaktions-Timer nebeneinander. */
.dock-top {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 26px);
}

/* Presenter-Monitor: Confidence-Display im LED/Buehnen-Look. */
.presenter-monitor {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 20px; border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(10,12,18,.92), rgba(4,5,9,.94));
  border: 1px solid rgba(249,197,0,.24);
  box-shadow: 0 0 26px -8px rgba(249,197,0,.3), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 22px rgba(0,0,0,.6);
}
.pm-label {
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-faint);
}
.pm-time {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700; font-size: 1.55rem; line-height: 1; letter-spacing: .06em;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(249,197,0,.55), 0 0 2px rgba(249,197,0,.9);
}
.pm-time.pm-final { color: var(--danger); text-shadow: 0 0 12px rgba(229,72,77,.6); }

.timer { position: relative; width: 72px; height: 72px; flex: none; }
.timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; }
.timer-progress {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round;
  transition: stroke .3s var(--ease);
}
.timer.warn .timer-progress { stroke: #f5a524; }
.timer.danger .timer-progress { stroke: var(--danger); }
.timer.danger { animation: timerPulse .7s ease-in-out infinite; }
@keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.timer-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.timer.danger .timer-num { color: var(--danger); }

.event-card {
  width: min(720px, 100%);
  background: rgba(16,16,24,.9); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8);
  padding: clamp(18px, 3vw, 26px);
}
.event-card.card-in { animation: cardIn .5s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.event-situation {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.12rem, 2.4vw, 1.42rem);
  line-height: 1.35; color: var(--text); margin-bottom: 16px; text-wrap: balance;
}
.event-options { display: grid; gap: 9px; }
.opt-btn {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); padding: 13px 15px; cursor: pointer; font-size: .98rem; line-height: 1.4;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.opt-btn:hover:not(:disabled) { border-color: var(--line-gold); background: #191922; transform: translateY(-1px); }
.opt-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt-btn:disabled { cursor: default; opacity: .6; }
.opt-key {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  background: rgba(249,197,0,.12); color: var(--gold); border: 1px solid var(--line-gold);
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}
.opt-btn.chosen { opacity: 1; }
.opt-btn.chosen.q-good { border-color: var(--ok); background: rgba(70,177,123,.12); }
.opt-btn.chosen.q-ok { border-color: var(--gold); background: rgba(249,197,0,.1); }
.opt-btn.chosen.q-bad { border-color: var(--danger); background: rgba(229,72,77,.1); }
.opt-btn.chosen.q-catastrophic { border-color: var(--danger); background: rgba(229,72,77,.18); }
.opt-btn.chosen .opt-key { background: transparent; }

/* Feedback nach Wahl */
.event-feedback { margin-top: 4px; }
.event-feedback.show { animation: cardIn .4s var(--ease); }
.fb-verdict { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.fb-verdict.q-good { color: var(--ok); }
.fb-verdict.q-ok { color: var(--gold); }
.fb-verdict.q-bad, .fb-verdict.q-catastrophic { color: var(--danger); }
.fb-text { color: var(--text-muted); font-size: .96rem; line-height: 1.45; margin-bottom: 12px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.fb-chip {
  font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.fb-chip.up { color: var(--ok); border-color: rgba(70,177,123,.4); background: rgba(70,177,123,.08); }
.fb-chip.down { color: var(--danger); border-color: rgba(229,72,77,.4); background: rgba(229,72,77,.08); }
.fb-chip.neutral { color: var(--text-faint); }
.fb-next { width: 100%; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .stage-screen { top: 6%; width: 62%; }
  .stage-audience { height: 64%; }
  .hud { padding: 10px 12px; }
  .hud-top { gap: 8px; }
  /* Enger als der Desktop-Wert: 3 Meter + Ton-Button muessen auf schmalen Screens
     (z.B. 390px) nebeneinander passen, ohne dass der Ton-Button aus dem Viewport
     gedrueckt wird (war vor dieser Anpassung der Fall). */
  .hud-meters { gap: 6px; }
  .meter { width: clamp(76px, 26vw, 108px); padding: 6px 8px 7px; }
  .meter-label { font-size: .6rem; }
  .meter-val { font-size: .95rem; }
  .sound-toggle { width: 38px; height: 38px; }
  .dock-top { gap: 14px; }
  .presenter-monitor { padding: 7px 15px; }
  .pm-time { font-size: 1.3rem; }
  .pm-label { font-size: .52rem; letter-spacing: .2em; }
  .timer { width: 58px; height: 58px; }
  .timer-num { font-size: 1.2rem; }
  .event-card { border-radius: var(--radius-md); }
  .event-situation { font-size: 1.08rem; }
  .opt-btn { padding: 12px 13px; font-size: .94rem; }
}
@media (max-width: 380px) {
  .meter { width: 25vw; }
  .hud-top { gap: 6px; }
  .sound-toggle { width: 34px; height: 34px; }
}

/* Reduced Motion: alle Bewegungen daempfen, kein Stroboskop */
@media (prefers-reduced-motion: reduce) {
  .stage-world.fx-shake, .timer.danger, .fx-strobe, .aud-fig.sway, .aud-fig.clap, .aud-fig.jitter,
  .fx-phone, .stage-world.fx-alarm .stage-hall { animation: none !important; }
  .aud-fig, .meter-fill, .stage-screen { transition-duration: .25s; }
  .fx-spark { display: none; }
  .pm-time { text-shadow: none; }
}
.stage.reduced .fx-strobe { display: none; }