/* v5 preview: sniped.gg-style homepage effects. Everything falls back to static with reduced motion or Motion: OFF. */
.v5-hero .wrap{position:relative;z-index:2}
.v5-title{margin:0}
.v5-stage{position:relative;width:100%;margin:.4rem 0 1.4rem;touch-action:pan-y;cursor:crosshair}
.v5-stage canvas{display:block;width:100%;height:auto}
.v5-fallback{display:block;font:900 clamp(2.4rem,9vw,7.5rem)/.95 "Archivo Black","Arial Black",Impact,sans-serif;color:#ffd23f;text-transform:uppercase;text-shadow:0 0 18px rgba(255,210,63,.35)}
html.v5-ok .v5-fallback{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.v5-ok) .v5-stage{display:none}
.v5-lead{max-width:44rem}
/* every section heading is drawn by the gold pixel canvas; the real heading stays for screen readers and search */
html.v5-ok .v5-pixh{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important}
.v5-auto{margin:.2rem 0 1rem}.v5-small{margin:.2rem 0 .6rem}
/* cards fade + slide up */
.v5-up{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.v5-up.in{opacity:1;transform:none}
html.calm .v5-up{opacity:1;transform:none;transition:none}
/* light flare across a section on reveal */
.v5-sec{position:relative;overflow-x:clip}
.v5-flare{position:absolute;left:0;top:var(--y,40px);width:45%;height:3px;pointer-events:none;z-index:3;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(34,230,255,.0) 10%,#22e6ff 55%,#fff 80%,#ff3fb4 92%,transparent);
  box-shadow:0 0 18px 4px rgba(34,230,255,.55),0 0 50px 10px rgba(255,63,180,.25);animation:v5flare 1.15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes v5flare{from{transform:translateX(-110%);opacity:0}15%{opacity:1}to{transform:translateX(260%);opacity:0}}
/* comet border on main CTAs: conic gradient spinning clockwise, 2.2s per loop */
@property --ca{syntax:'<angle>';initial-value:0deg;inherits:false}
.comet{position:relative;isolation:isolate}
.comet::before,.comet::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--ca),transparent 0 62%,rgba(34,230,255,.2) 70%,#22e6ff 84%,#fff 92%,#ff3fb4 97%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:v5comet 2.2s linear infinite}
.comet::after{filter:blur(6px);opacity:.85;inset:-6px;padding:5px}
@keyframes v5comet{to{--ca:360deg}}
html.calm .comet::before,html.calm .comet::after{animation:none;--ca:45deg}
@media (prefers-reduced-motion:reduce){.comet::before,.comet::after{animation:none}}
.v5-about{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:center}
.v5-about img{width:100%;height:auto;border:4px solid #fff;box-shadow:8px 8px 0 #ff3fb4}
@media (max-width:700px){.v5-about{grid-template-columns:1fr}.v5-about img{max-width:240px}}
#tokens .price{font-family:var(--pixel);color:var(--gold,#ffd23f);font-size:1.4rem;margin:.2rem 0 .6rem}
.v5-title{border:0!important;box-shadow:none!important;background:none!important;padding:0!important;min-height:0}
.v5-stage-q{max-width:860px}
/* ===== GOLD ARCADE TEXT (Oct 13): Press Start 2P, solid gold with horizontal scanlines + magenta drop shadow,
   matching the "1 TOKEN = $125" headline. One reusable class (.ka-gold / .ka-gt) plus the selector list below.
   Body copy (p, li, FAQ answers, form help) deliberately stays in the readable font. */
:root{--ka-gold-scan:repeating-linear-gradient(180deg,#ffd23f 0,#ffd23f 2px,#d9a520 2px,#d9a520 3px);--ka-gold-shadow:#c0187a}
.ka-gold,.ka-gt,
main h3,main h4,main h5,main h6,
.price,#tokens .price,.price-table td:last-child,.tm-cost b,
.label,.press-start,.map-title,.fx-title,.soon,.hud,.scoreboard dt,.level .num,.who span,.sv-label,.set-title,
.levelnav a span,.lv-links a,footer h2,footer h3,.logo,.nf .continue,.tm-sign,.tm-shelf,.biz-box h4{
  font-family:var(--pixel)!important;font-weight:400!important;letter-spacing:.02em;text-transform:none;
  color:#ffd23f;background:var(--ka-gold-scan);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none!important;filter:drop-shadow(.14em .14em 0 var(--ka-gold-shadow));
  overflow-wrap:normal;word-break:normal;hyphens:none}
/* legible pixel sizes (Press Start 2P runs wide, so these stay modest) */
main h3{font-size:clamp(14px,1.6vw,19px);line-height:1.6}
main h4,main h5,main h6{font-size:clamp(12.8px,1.3vw,15px);line-height:1.7}
.levelnav a span{font-size:12.8px;line-height:1.5;text-align:center}
.lv-links a{font-size:12.8px}
.tm-shelf{font-size:12.8px;line-height:1.7}
.ka-gt{display:inline;font-size:inherit;line-height:inherit}
/* buttons: text gets the gold wrapper (added by v5.js); boxes go dark so gold reads, borders keep their color */
.btn,.quest-btn{font-family:var(--pixel)!important;font-weight:400!important;font-size:14px!important;line-height:1.6!important;text-align:center}
.btn.btn-primary,.btn.btn-navy,.btn.btn-gold,.btn{background:#0b1030;border-color:currentColor}
.btn.btn-primary{color:#ff3fb4}.btn.btn-navy{color:#22e6ff}.btn.btn-gold{color:#ffd23f}
.btn:hover,.btn.btn-primary:hover,.btn.btn-navy:hover,.btn.btn-gold:hover{background:#1a1f55}
.quest-btn[aria-pressed="true"]{background:#1a1f55;outline:3px solid #ffd23f}
.quest-btn small{font-family:var(--body);font-size:1.05rem}
.btn small,.quest-btn small{-webkit-text-fill-color:currentColor}
.btn-big{font-size:16px!important}
/* the yellow status bar, chips and stamps on solid color keep their own high-contrast look */
.statusbar .ka-gt,.tierchip .ka-gt,.tm-chip .ka-gt{all:unset}
@media (max-width:560px){
  .btn,.quest-btn{font-size:12.8px!important;padding:.7rem .9rem}
  .btn-big{font-size:14px!important}
  .price,#tokens .price{font-size:1.15rem}
  main h3{font-size:14px}
}
/* exclusions: pills/chips with their own colored box keep solid readable text */
.loc-pill,.tierchip,.soldout,.tm-chip,.label .loc-pill{-webkit-text-fill-color:currentColor;filter:none}
/* mobile quick-action dock: 4 buttons in a 390px row, so it keeps the readable bold font and original colors */
.fx-dock .btn{font-family:var(--body)!important;font-weight:700!important;line-height:1.15!important}
.fx-dock .btn.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--border)}
.fx-dock .btn.btn-navy{background:var(--heading);color:var(--on-accent);border-color:var(--border)}
.fx-dock .btn.btn-gold{background:#ffd23f;color:#0b1030;border-color:var(--border)}
@media (max-width:700px){.fx-dock .btn{font-size:1rem!important}}
/* no color/background transition on buttons, so the dark box is in place on first paint */
.btn{transition:transform .08s ease,box-shadow .08s ease}
/* text sitting on a solid gold box (current nav tab, pressed toggle buttons) switches to navy so it stays readable */
.levelnav a[aria-current="page"] span,.btn[aria-pressed="true"] .ka-gt,.quest-btn[aria-pressed="true"] .ka-gt{color:#0b1030;background:none;-webkit-text-fill-color:#0b1030;filter:none}
@media (max-width:900px){.levelnav a span{font-size:12.8px}}
.btn small,.btn-soon small{font-size:12.8px!important}
/* business price list amounts */
.biz-list b{font-family:var(--pixel);font-weight:400;font-size:12.8px;line-height:1.7;color:#ffd23f;background:var(--ka-gold-scan);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(2px 2px 0 var(--ka-gold-shadow))}