/* $SEED — BIG MOMENTS (fx/moments.css)
   Full-screen takeovers + the countdown HUD. Same material as the page: brushed steel plates, hazard tape,
   stamped stencil type, hard offset shadows. Light and physical — frost, not darkness. */

/* ---------- stage ---------- */
.mo-stage{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;display:none;font-family:var(--body,'Archivo',system-ui,sans-serif);color:var(--ink,#121212)}
.mo-stage.on{display:block}
.mo-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:3}
.mo-canvas.on{display:block}
.mo-m{position:absolute;inset:0;z-index:2}
/* the big plates sit on a frosted steel sheet so the page stays readable underneath */
.mo-open::before,.mo-crack::before,.mo-allout::before{content:"";position:absolute;inset:0;background:rgba(223,225,221,.66)}

.mo-dismiss{display:none;position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:6;pointer-events:auto;cursor:pointer;
  align-items:center;gap:8px;padding:10px 14px;border:3px solid var(--ink);background:var(--plate);color:var(--ink);box-shadow:4px 4px 0 var(--ink);
  font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.mo-stage.dismissable .mo-dismiss{display:inline-flex}
/* while a moment can be skipped, its plate is a click target too (the rest of the stage stays pointer-events:none) */
.mo-stage.dismissable .mo-plate{pointer-events:auto;cursor:pointer}
.mo-dismiss:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.mo-dismiss i{font-style:normal;font-size:14px;line-height:1}

/* ---------- shake (applied to <main> and the stage, never <body>) ---------- */
.mo-shake{animation:moShake .16s linear 1}
.mo-shake-big{animation:moShakeBig .34s cubic-bezier(.2,.8,.3,1) 1}
@keyframes moShake{0%{transform:translate(0,0)}35%{transform:translate(-8px,5px)}70%{transform:translate(7px,-4px)}100%{transform:translate(0,0)}}
@keyframes moShakeBig{0%{transform:translate(0,0)}15%{transform:translate(-14px,8px) rotate(-.4deg)}35%{transform:translate(12px,-7px) rotate(.3deg)}55%{transform:translate(-7px,4px)}75%{transform:translate(4px,-2px)}100%{transform:translate(0,0)}}

/* ---------- shared pieces ---------- */
.mo-plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,760px);max-height:94vh;overflow:hidden;
  padding:clamp(18px,4vw,40px) clamp(14px,4vw,44px);background:var(--plate);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0}
.mo-plate::before{content:"";position:absolute;inset:9px;border:2px dashed rgba(18,18,18,.3);pointer-events:none}
.mo-plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle,#8e938f 3px,var(--ink) 3.5px,var(--ink) 5px,transparent 6px) 6px 6px/14px 14px no-repeat,
  radial-gradient(circle,#8e938f 3px,var(--ink) 3.5px,var(--ink) 5px,transparent 6px) calc(100% - 6px) 6px/14px 14px no-repeat,
  radial-gradient(circle,#8e938f 3px,var(--ink) 3.5px,var(--ink) 5px,transparent 6px) 6px calc(100% - 6px)/14px 14px no-repeat,
  radial-gradient(circle,#8e938f 3px,var(--ink) 3.5px,var(--ink) 5px,transparent 6px) calc(100% - 6px) calc(100% - 6px)/14px 14px no-repeat}
.mo-kicker{display:inline-block;background:var(--ink);color:#fff;font-weight:800;font-size:clamp(10px,1.6vw,13px);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;max-width:100%}
.mo-h1{font-family:var(--stencil);font-weight:900;font-size:clamp(54px,13vw,160px);line-height:.86;text-transform:uppercase;letter-spacing:.01em;color:var(--orange-d);max-width:100%;overflow-wrap:anywhere}
.mo-h2{font-family:var(--stencil);font-weight:900;font-size:clamp(24px,5vw,54px);line-height:.95;text-transform:uppercase;color:var(--ink)}
.mo-stamp{display:inline-block;margin-top:6px;padding:6px 16px;border:4px solid var(--orange-d);color:var(--orange-d);background:rgba(255,255,255,.4);
  font-family:var(--stencil);font-weight:900;font-size:clamp(22px,4.6vw,44px);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  transform:rotate(-6deg);opacity:0;box-shadow:inset 0 0 0 3px var(--plate),inset 0 0 0 5px var(--orange-d)}
.mo-stamp-orange{border-color:var(--orange);color:var(--orange-d);box-shadow:inset 0 0 0 3px var(--plate),inset 0 0 0 5px var(--orange)}
.mo-line{font-weight:800;font-size:clamp(10px,1.7vw,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;max-width:100%}

/* hazard tape racking in from the edges. Period of a 44px -45° stripe along x is 44·√2 ≈ 62.2px, so the run loops seamlessly */
.mo-hz{position:absolute;background:repeating-linear-gradient(-45deg,var(--ink) 0 22px,var(--yellow) 22px 44px);animation:moHzRun .7s linear infinite;z-index:1}
.mo-hz-t{left:0;right:0;top:0;height:clamp(28px,7vh,64px);border-bottom:4px solid var(--ink);transform:translateY(-110%)}
.mo-hz-b{left:0;right:0;bottom:0;height:clamp(28px,7vh,64px);border-top:4px solid var(--ink);transform:translateY(110%)}
.mo-hz-l{top:0;bottom:0;left:0;width:clamp(16px,4vw,48px);border-right:4px solid var(--ink);transform:translateX(-110%)}
.mo-hz-r{top:0;bottom:0;right:0;width:clamp(16px,4vw,48px);border-left:4px solid var(--ink);transform:translateX(110%)}
.mo-hz-blue{background-image:repeating-linear-gradient(-45deg,var(--ink) 0 22px,var(--won) 22px 44px)}
@keyframes moHzRun{to{background-position:62.2px 0}}

/* klaxon: a light pulse around the edges, no darkness in the middle */
.mo-klaxon{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,74,28,0) 38%,rgba(255,74,28,.45) 72%,rgba(217,58,16,.85) 100%);animation:moKlaxon .5s ease-in-out infinite alternate}
.mo-klaxon-blue{background:radial-gradient(ellipse at 50% 50%,rgba(31,109,255,0) 38%,rgba(31,109,255,.4) 72%,rgba(31,109,255,.8) 100%)}
.mo-klaxon-y{background:radial-gradient(ellipse at 50% 50%,rgba(255,210,58,0) 38%,rgba(255,210,58,.5) 72%,rgba(255,74,28,.8) 100%)}
@keyframes moKlaxon{from{opacity:.35}to{opacity:1}}

.mo-ring-wave{position:absolute;width:40vmin;height:40vmin;border:6px solid var(--orange);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.15);pointer-events:none}

/* ---------- (1) word drop ---------- */
.mo-band{position:absolute;left:0;right:0;top:50%;height:clamp(150px,36vh,380px);transform:translateY(-50%) scaleY(0);background:var(--yellow);
  border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 3px)}
.mo-band::before,.mo-band::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px)}
.mo-band::before{top:0}.mo-band::after{bottom:0}
.mo-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.4vh,14px);padding:0 16px}
.mo-word-top{opacity:0;background:var(--ink);color:var(--yellow);font-weight:800;font-size:clamp(11px,1.8vw,15px);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px}
.mo-word-top b{color:#fff}
.mo-word-big{opacity:0;font-family:var(--stencil);font-weight:900;font-size:clamp(64px,18vw,250px);line-height:.85;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
  max-width:100%;overflow-wrap:anywhere;text-shadow:6px 6px 0 var(--orange);will-change:transform}
.mo-word-sub{opacity:0;font-family:var(--mono);font-weight:600;font-size:clamp(11px,1.8vw,15px);letter-spacing:.06em;text-transform:uppercase;background:var(--plate);border:3px solid var(--ink);padding:5px 10px;box-shadow:4px 4px 0 var(--ink);max-width:100%;text-align:center}
.mo-word-sub b{color:var(--orange-d)}
.mo-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;will-change:transform;z-index:4}
.mo-chip small{color:var(--ink-2);font-size:9px}
.mo-stamp-ring{position:absolute;width:110px;height:44px;border:3px solid var(--orange-d);opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}
/* the slot the word landed on (the core re-renders the card soon after, which clears it) */
.v-words li.mo-hit{animation:moHit .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes moHit{0%{background:var(--orange);color:#fff;transform:scale(1.25)}55%{background:var(--yellow);color:var(--ink)}100%{background:#fff;transform:scale(1)}}

/* ---------- (2) vault open ---------- */
.mo-plate-open{border-color:var(--orange-d)}
.mo-plate-open .mo-h1{color:var(--orange)}

/* ---------- (3) crack ---------- */
.mo-blueflash{position:absolute;inset:0;background:var(--won);opacity:0;z-index:1}
.mo-plate-crack{border-color:var(--won);box-shadow:12px 12px 0 var(--won)}
.mo-plate-crack .mo-h1{color:var(--won)}
.mo-plate-crack.you{border-color:var(--orange);box-shadow:14px 14px 0 var(--orange)}
.mo-winner{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;justify-content:center}
.mo-winner code{background:var(--won);color:#fff;padding:5px 10px;font-size:clamp(14px,3vw,22px);letter-spacing:0}
.mo-you{opacity:0;font-family:var(--stencil);font-weight:900;font-size:clamp(96px,30vw,320px);line-height:.8;color:var(--orange);text-shadow:8px 8px 0 var(--ink);will-change:transform}
.mo-amount{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.mo-amount b{font-family:var(--stencil);font-weight:900;font-size:clamp(48px,9vw,110px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.mo-amount span{font-weight:800;color:var(--orange-d);letter-spacing:.2em;font-size:clamp(12px,2vw,18px)}
.mo-amount em{font-style:normal;font-family:var(--mono);color:var(--ink-2);font-size:clamp(12px,2vw,16px);width:100%}

/* ---------- (4) leak: the jackpot seeps out of the top edge ---------- */
.mo-goo{position:absolute;left:0;right:0;top:0;height:12px;background:var(--ink);z-index:1}
.mo-goo i{position:absolute;top:100%;left:calc(var(--i) * 11% + 3%);width:clamp(10px,2.4vw,22px);height:var(--h);background:var(--ink);
  border-radius:0 0 50% 50% / 0 0 100% 100%;transform-origin:50% 0;animation:moGoo 1.7s cubic-bezier(.3,.8,.3,1) var(--d) both}
@keyframes moGoo{0%{transform:scaleY(0)}60%{transform:scaleY(1.18)}100%{transform:scaleY(1)}}
.mo-drips{position:absolute;inset:0;z-index:2}
.mo-drip{position:absolute;left:var(--x);top:12px;width:0}
/* the thread stretches down, the chip rides its end, then the thread snaps back as the chip tears off and falls */
.mo-drip i{position:absolute;left:-3px;top:0;width:7px;height:32vh;background:var(--ink);transform-origin:50% 0;transform:scaleY(1);
  animation:moThread 2.1s cubic-bezier(.55,0,.6,1) var(--d) both}
.mo-drip span{position:absolute;top:32vh;left:0;transform:translate(-50%,-4px);display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;
  background:var(--yellow);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--mono);font-weight:600;font-size:13px;white-space:nowrap;
  animation:moDrop 2.1s cubic-bezier(.55,0,.6,1) var(--d) both}
.mo-drip span small{color:var(--ink-2);font-size:9px}
@keyframes moThread{0%{transform:scaleY(0)}42%{transform:scaleY(1)}58%{transform:scaleY(1)}72%{transform:scaleY(0)}100%{transform:scaleY(0)}}
@keyframes moDrop{0%{transform:translate(-50%,-32vh)}42%{transform:translate(-50%,-4px)}58%{transform:translate(-50%,8px) rotate(2deg)}100%{transform:translate(-50%,92vh) rotate(-9deg);opacity:0}}
.mo-strip{position:absolute;left:0;right:0;top:56%;transform:translateX(-102%);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:14px 16px;
  background:var(--ink);color:var(--yellow);border-top:5px solid var(--yellow);border-bottom:5px solid var(--yellow);
  font-family:var(--stencil);font-weight:900;font-size:clamp(30px,7vw,80px);line-height:.9;text-transform:uppercase;z-index:3}
.mo-strip b{background:var(--orange);color:#fff;font-size:.45em;padding:6px 12px;letter-spacing:.06em;transform:rotate(-3deg)}

/* ---------- (5) all out ---------- */
.mo-plate-all{border-color:var(--ink)}
.mo-plate-all .mo-h1{color:var(--ink)}
.mo-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;margin:6px 0;padding:0;width:100%;max-width:580px}
.mo-slots li{display:flex;align-items:center;gap:5px;height:30px;padding:0 8px;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;opacity:0;overflow:hidden;min-width:0}
.mo-slots li small{color:var(--mute);font-size:9px}

/* ---------- HUD ---------- */
.mo-hud{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:48;transform:translate(-50%,160px);
  appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:7px 14px 7px 7px;
  background:var(--ink);color:#fff;border:3px solid var(--orange);box-shadow:5px 5px 0 var(--orange-d);cursor:pointer;
  font:800 12px/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-align:left;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1),border-color .3s,box-shadow .3s}
.mo-hud.on{transform:translate(-50%,0)}
.mo-hud.on.busy{transform:translate(-50%,160px)}
.mo-hud:active{transform:translate(calc(-50% + 3px),3px);box-shadow:2px 2px 0 var(--orange-d)}
.mo-hud-ring{width:30px;height:30px;flex:none;transform:rotate(-90deg)}
.mo-hud-ring circle{fill:none;stroke-width:4.5}
.mo-hud-ring .t{stroke:rgba(255,255,255,.18)}
.mo-hud-ring .p{stroke:var(--yellow);stroke-dasharray:94.25;stroke-dashoffset:94.25;transition:stroke-dashoffset .25s linear}
.mo-hud.wait .mo-hud-ring .p,.mo-hud.open .mo-hud-ring .p{stroke:var(--orange)}
.mo-hud.done .mo-hud-ring .p{stroke:var(--won)}
.mo-hud-main b{font-family:var(--stencil);font-weight:900;font-size:21px;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums;vertical-align:-2px;margin:0 2px}
.mo-hud.wait .mo-hud-main b,.mo-hud.open .mo-hud-main b{color:var(--orange)}
.mo-hud-sep{color:var(--orange)}
.mo-hud-sub{color:#cfd3cf;font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mo-hud.hot{border-color:var(--yellow);box-shadow:5px 5px 0 var(--yellow);animation:moHudHot .5s steps(2,end) infinite}
@keyframes moHudHot{50%{border-color:var(--orange);box-shadow:5px 5px 0 var(--orange-d)}}
.mo-hud.done{border-color:var(--won);box-shadow:5px 5px 0 #1452c4}
/* the voice module's command strip (z-index 55) rises from the bottom and steps the toast back — step the HUD back the same way */
body.vc-open .mo-hud{bottom:calc(min(46vh,420px) + 80px)}

/* the small ring on a dropping card, parked right before its badge (auto margin wins over space-between) */
.mo-ring{flex:none;margin-left:auto;margin-right:8px;width:22px;height:22px;display:inline-block}
.mo-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.mo-ring circle{fill:none;stroke-width:3.5}
.mo-ring .t{stroke:rgba(255,255,255,.3)}
.mo-ring .p{stroke:#fff;stroke-dasharray:56.55;stroke-dashoffset:56.55;transition:stroke-dashoffset .25s linear}
.mo-ring.hot .p{stroke:var(--yellow)}

/* ---------- phones ---------- */
@media (max-width:600px){
  .mo-hz-l,.mo-hz-r{display:none}
  .mo-plate{box-shadow:7px 7px 0 var(--ink);gap:6px}
  .mo-plate-crack{box-shadow:7px 7px 0 var(--won)}
  .mo-plate-crack.you{box-shadow:8px 8px 0 var(--orange)}
  .mo-slots{grid-template-columns:repeat(3,1fr);gap:5px}
  .mo-slots li{font-size:11px;padding:0 5px;height:28px}
  .mo-word-big{text-shadow:4px 4px 0 var(--orange)}
  .mo-drip span{font-size:12px;height:28px;padding:0 8px}
  /* narrower on phones so it clears a thumb dock parked at the right edge; the sub line ellipsises */
  .mo-hud{font-size:11px;gap:8px;padding:6px 10px 6px 6px;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 112px)}
  .mo-hud-ring{width:26px;height:26px}
  .mo-hud-main b{font-size:18px}
  .mo-dismiss{padding:9px 12px}
}
@media (max-height:520px){
  .mo-plate{padding:12px 16px;gap:4px}
  .mo-h1{font-size:clamp(40px,9vh,120px)}
}

/* reduced motion: the stylesheet's global rule already stops every CSS animation; the JS shortens the Web Animations and skips shake + particles */
@media (prefers-reduced-motion:reduce){
  .mo-drip i{transform:scaleY(1)}
  .mo-drip span{transform:translate(-50%,-4px)}
  .mo-strip{transform:none}
  .mo-slots li{opacity:1}
  .mo-klaxon{opacity:.6}
}