/* SNES movement: discrete steps; countdown cells follow the server deadline. */
.clock-ring{display:flex;align-items:center;gap:16px;margin:20px 0;padding:16px;border:4px solid currentColor;border-radius:0;color:var(--gold)}
.clock-ring strong,.clock-ring span,.clock-ring small{display:block}.clock-ring strong{font-size:16px}.clock-ring span{font-size:28px;font-variant-numeric:tabular-nums;line-height:1.3;color:var(--ink)}
.clock-ring.proof{color:var(--green)}.clock-ring.cooldown{color:var(--aqua)}
.draw-anchor{display:block;width:76px;height:76px;color:var(--gold);overflow:hidden;margin-bottom:16px}

.event-banner{display:flex;gap:24px;align-items:center;border:4px solid currentColor;background:var(--bg);padding:24px;border-radius:0;color:var(--red);overflow:hidden;overflow-wrap:anywhere}.event-banner.hook_laukesi{color:var(--gold)}.event-banner h2{color:var(--ink)}.event-banner p:last-child{margin:0;color:var(--ink)}.event-art{width:112px;flex:none}.event-art svg{width:100%;display:block;overflow:visible}.burn-left{animation:burn-left .8s steps(8, end) both}.burn-right{animation:burn-right .8s steps(8, end) both}.burn-cut{animation:cut-in .45s steps(8, end) both}.hook-catch{animation:catch-in .85s steps(8, end) both}.hook-ripple{animation:ripple-in .8s steps(8, end) both}
@keyframes burn-left{to{transform:translate(-12px,8px) rotate(-6deg);opacity:1}}@keyframes burn-right{to{transform:translate(12px,16px) rotate(7deg);opacity:1}}@keyframes cut-in{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes catch-in{from{transform:translateY(-84px)}65%{transform:translateY(8px)}to{transform:translateY(0)}}@keyframes ripple-in{from{opacity:0;transform:translateX(-12px)}60%{opacity:1}to{opacity:0;transform:translateX(0)}}
#public-event:empty{display:none}#public-event{position:fixed;left:16px;right:16px;bottom:20px;max-width:740px;margin:auto;z-index:90;pointer-events:none}.tv #public-event{max-width:1248px;bottom:6vh}.tv #public-event h2{font-size:clamp(32px,5vw,80px)}.tv #public-event p:last-child{font-size:clamp(20px,2.4vw,44px)}.tv #public-event .event-art{width:192px}
.count-gain{display:inline-block;animation:count-gain .55s steps(8, end)}.reveal-card{animation:reveal-in .65s steps(8, end) both}.tv .reveal-card{min-height:40vh;display:flex;flex-direction:column;justify-content:center;padding:4vw}.tv .reveal-card h2{font-size:clamp(32px,4vw,72px)}.tv .reveal-card .eyebrow{font-size:clamp(16px,2vw,32px)}.reveal-awards{animation:reveal-in .7s steps(8, end) both}
@keyframes count-gain{from{transform:translateY(8px);opacity:1}to{transform:translateY(0);opacity:1}}@keyframes reveal-in{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.review main{max-width:1200px}.review-intro{max-width:720px}.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px}.review-item{min-width:0}.review-item>p{color:var(--muted)}.demo-stage{margin:20px 0;min-height:192px;border-block:4px solid var(--line);padding:24px 0}.demo-stage .clock-ring{max-width:360px}.demo-stage .event-banner{gap:16px;padding:16px}.demo-stage .event-art{width:80px}.demo-stage .event-banner h2{font-size:24px}.demo-stage .draw-anchor{width:120px;height:120px;margin:auto}.demo-stage .summary{margin:16px 0}.review .reveal-card h2{font-size:24px}.review .award::before{width:80px}.review-status{font-size:16px;color:var(--gold)}
@media(max-width:600px){.event-banner{gap:12px;padding:16px}.event-art{width:64px}.event-banner h2{font-size:24px}.tv #public-event .event-art{width:64px}.clock-ring{gap:12px;padding:8px}.review .card{padding:16px}.demo-stage .event-banner{flex-direction:column;align-items:flex-start}.tv h1{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.burn-left,.burn-right,.burn-cut,.hook-catch,.hook-ripple,.count-gain,.reveal-card,.reveal-awards{animation:none!important}.hook-ripple{opacity:0}.burn-left{transform:translate(-12px,8px) rotate(-6deg);opacity:1}.burn-right{transform:translate(12px,16px) rotate(7deg);opacity:1}}

/* Static stroke dashes reveal in order; only opacity is animated. */
.anchor-eye{animation:anchor-ink .15s steps(8, end) both}.anchor-segment{animation:anchor-ink .12s steps(8, end) both}
@keyframes anchor-ink{from{opacity:0}to{opacity:1}}
.segment-0{animation-delay:0.1s}
.segment-1{animation-delay:0.16s}
.segment-2{animation-delay:0.22s}
.segment-3{animation-delay:0.28s}
.segment-4{animation-delay:0.34s}
.segment-5{animation-delay:0.4s}
.segment-6{animation-delay:0.46s}
.segment-7{animation-delay:0.52s}
.segment-8{animation-delay:0.58s}
.segment-9{animation-delay:0.64s}
.segment-10{animation-delay:0.7s}
.segment-11{animation-delay:0.76s}
.segment-12{animation-delay:0.82s}
.segment-13{animation-delay:0.88s}
.segment-14{animation-delay:0.94s}
.segment-15{animation-delay:1.0s}
.segment-16{animation-delay:1.06s}
.segment-17{animation-delay:1.12s}
.segment-18{animation-delay:1.18s}
.segment-19{animation-delay:1.24s}
@media(prefers-reduced-motion:reduce){.anchor-eye,.anchor-segment{animation:none!important;opacity:1}}

/* Twelve discrete cells use the same server deadline as the numeric clock.
   Updating classes also keeps reduced motion and resumed tabs accurate. */
.clock-ring{display:flex;flex-direction:column;align-items:stretch;border:4px solid var(--black);background:var(--navy);padding:16px;gap:12px;box-shadow:4px 4px 0 var(--black)}
.clock-blocks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:24px}.clock-blocks i{display:block;background:currentColor;border:4px solid var(--black)}.clock-blocks .spent{background:var(--black)}.clock-ring strong{font-size:20px}.clock-ring span{font-size:32px}.clock-ring small{font-size:16px}.clock-ring.proof{color:var(--lime)}
.event-banner{border:4px solid var(--black);box-shadow:inset 4px 4px 0 var(--foam),4px 4px 0 var(--black);background:var(--bark)}.event-art svg{shape-rendering:crispEdges;stroke-linejoin:miter}.event-banner.hook_laukesi{background:var(--sea)}
.tv .reveal-card{padding:32px}.tv .reveal-card h2{font-size:48px}.tv .reveal-card .eyebrow{font-size:24px}.tv #public-event{bottom:32px}.tv #public-event h2{font-size:48px}.tv #public-event p:last-child{font-size:32px}
@media(max-width:600px){.tv .reveal-card{padding:20px}.tv .reveal-card h2,.tv #public-event h2{font-size:28px}.tv #public-event p:last-child{font-size:20px}.clock-ring{padding:12px}.clock-blocks{gap:0}}