/* Site effects (2026-11-09). Each effect is scoped to a class on <html> (fx-ticker, fx-buttons, fx-neon,
   fx-holo, fx-reveal, fx-konami), added by fx.js, so nothing changes if the script does not run. */
@import url("https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap");

/* 1. LED ticker */
.fx-tick{display:none}
.fx-ticker .fx-tick{display:block;position:sticky;top:var(--fx-top,82px);z-index:49;overflow:hidden;height:34px;background:#0a0603;border-bottom:1px solid #2a1a08;box-shadow:inset 0 0 18px rgba(0,0,0,.9)}
.fx-tick::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 55%,rgba(0,0,0,.55) 60%) 0 0/3px 3px}
.fx-tick-in{display:flex;width:max-content;white-space:nowrap;font:26px/34px VT323,ui-monospace,monospace;letter-spacing:.06em;color:#ffb52d;text-shadow:0 0 6px rgba(255,170,40,.85),0 0 14px rgba(255,120,0,.45);animation:fx-marq var(--fx-dur,60s) linear infinite}
.fx-tick:hover .fx-tick-in{animation-play-state:paused}
.fx-tick-in span{padding-right:56px}.fx-tick-in b{color:#ff5a3c;font-weight:400}.fx-tick-in i{font-style:normal;color:#7dff8a;text-shadow:0 0 6px rgba(80,255,120,.8)}
@keyframes fx-marq{to{transform:translateX(-50%)}}

/* 2. Arcade buttons: glossy domed caps in a dark bezel, lit by the neon logo.
   fx.js sets, per button: --sx/--sy (shadow cast away from the logo), --rx/--ry (neon edge on the side
   facing the logo), --gx (gloss shifted toward the logo) and --li (light strength, fades with distance). */
.fx-buttons .btn,.fx-buttons .nav .book{--cap1:#5ff0ff;--cap2:#18b8d2;--cap3:#0a8094;--side:#06606f;--ink:#03222a;--sx:4;--sy:6;--rx:-1.5;--ry:-1.5;--gx:0%;--li:.7;
  position:relative;isolation:isolate;border:0;color:var(--ink);font-weight:700;letter-spacing:.14em;text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:radial-gradient(120% 140% at calc(50% + var(--gx)) 0%,var(--cap1) 0%,var(--cap2) 55%,var(--cap3) 100%);
  box-shadow:
    inset calc(var(--rx) * 1px) calc(var(--ry) * 1px) 0 rgba(255,70,175,calc(.85 * var(--li))),
    inset calc(var(--rx) * 2.6px) calc(var(--ry) * 2.6px) 6px rgba(90,225,255,calc(.5 * var(--li))),
    inset 0 -4px 6px rgba(0,0,0,.3),
    0 0 0 3px #120b1e, 0 0 0 4px rgba(255,255,255,.07),
    0 6px 0 3px var(--side),
    calc(var(--sx) * 1px) calc(var(--sy) * 1px + 8px) 20px rgba(0,0,0,.7),
    calc(var(--sx) * 2.4px) calc(var(--sy) * 2.4px + 14px) 34px rgba(0,0,0,.35),
    calc(var(--rx) * 6px) calc(var(--ry) * 6px) 22px rgba(255,45,149,calc(.28 * var(--li)));
  transform:translateY(0);transition:transform .09s ease,filter .2s ease}
.fx-buttons .btn::after,.fx-buttons .nav .book::after{content:"";position:absolute;z-index:-1;left:calc(14% + var(--gx));right:calc(14% - var(--gx));top:3px;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,0));pointer-events:none}
.fx-buttons .btn.big,.fx-buttons .nav .book{--cap1:#ff8cc6;--cap2:#f0328f;--cap3:#b5106a;--side:#7c0a47;--ink:#fff;text-shadow:0 1px 1px rgba(80,0,40,.6)}
.fx-buttons .btn:hover,.fx-buttons .nav .book:hover{color:var(--ink);filter:brightness(1.08) saturate(1.1)}
.fx-buttons .btn:active,.fx-buttons .nav .book:active,.fx-buttons .btn.fx-press,.fx-buttons .nav .book.fx-press{transform:translateY(5px);
  box-shadow:inset calc(var(--rx) * 1px) calc(var(--ry) * 1px) 0 rgba(255,70,175,calc(.85 * var(--li))),inset 0 -2px 6px rgba(0,0,0,.35),0 0 0 3px #120b1e,0 0 0 4px rgba(255,255,255,.07),0 1px 0 3px var(--side),calc(var(--sx) * .4px) calc(var(--sy) * .4px + 3px) 8px rgba(0,0,0,.65)}
.fx-buttons .btn:focus-visible,.fx-buttons .nav .book:focus-visible{outline:2px solid #fff;outline-offset:6px}
.fx-buttons .nav .book{margin:4px 0 8px}
.fx-buttons .party-bar .btn,.fx-buttons .btns .btn{margin:6px 8px 12px}

/* 3. Neon sign flicker (plays once on load, then holds a soft glow) */
.fx-neon .brand img{animation:fx-neon-img 1.6s steps(1) .2s both;filter:drop-shadow(0 0 6px rgba(255,45,149,.55)) drop-shadow(0 0 14px rgba(35,213,240,.35))}
.fx-neon main h1{animation:fx-neon-txt 1.8s steps(1) .5s both;text-shadow:0 0 6px rgba(255,255,255,.6),0 0 16px rgba(255,45,149,.75),0 0 34px rgba(255,45,149,.45)}
@keyframes fx-neon-img{0%{filter:brightness(.15)}8%{filter:brightness(1.2) drop-shadow(0 0 10px #ff2d95)}12%{filter:brightness(.2)}20%{filter:brightness(1.1)}24%{filter:brightness(.3)}26%{filter:brightness(1.25) drop-shadow(0 0 14px #23d5f0)}60%{filter:brightness(.6)}62%,100%{filter:brightness(1) drop-shadow(0 0 6px rgba(255,45,149,.55)) drop-shadow(0 0 14px rgba(35,213,240,.35))}}
@keyframes fx-neon-txt{0%{opacity:.15;text-shadow:none}10%{opacity:1}14%{opacity:.25}22%{opacity:1}26%{opacity:.3}30%{opacity:1}70%{opacity:.7}72%,100%{opacity:1}}

/* 5. Holo cards */
.fx-holo .card,.fx-holo .games li,.fx-holo .fq-item{transform-style:preserve-3d;will-change:transform;transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.fx-holo .fx-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 45%),linear-gradient(115deg,transparent 30%,rgba(255,45,149,.16) 42%,rgba(255,210,74,.14) 50%,rgba(35,213,240,.16) 58%,transparent 70%);background-size:100% 100%,250% 250%;background-position:0 0,var(--hx,50%) 50%;mix-blend-mode:screen}
.fx-holo .fx-tilt .fx-glare{opacity:1}
.fx-holo .fx-tilt{box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(35,213,240,.35)}
.fx-holo .fx-shine .fx-glare{animation:fx-shine 1.4s ease .1s both;background:linear-gradient(115deg,transparent 30%,rgba(255,45,149,.2) 42%,rgba(255,210,74,.18) 50%,rgba(35,213,240,.2) 58%,transparent 70%);background-size:250% 250%}
@keyframes fx-shine{0%{opacity:0;background-position:120% 50%}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:-20% 50%}}

/* 6. Fade-in: each heading, paragraph, card and photo rises in, siblings slightly staggered */
.fx-reveal .fx-rv{opacity:0;transform:translateY(26px) scale(.99);filter:blur(2.5px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1),filter .7s ease;transition-delay:var(--fx-d,0s)}
.fx-reveal .fx-rv.fx-in{opacity:1;transform:none;filter:none}

/* 7. Konami code: 1-UP! */
.fx-1up{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center}
.fx-1up canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-1up b{position:relative;font:400 clamp(44px,13vw,140px)/1 "Press Start 2P",monospace;color:#5df27a;text-shadow:6px 6px 0 #0a3d14,0 0 30px rgba(93,242,122,.8);animation:fx-pop 2.2s cubic-bezier(.19,1,.22,1) both}
@keyframes fx-pop{0%{transform:scale(.2) translateY(40px);opacity:0}12%{transform:scale(1.15);opacity:1}20%{transform:scale(1)}70%{transform:translateY(0);opacity:1}100%{transform:translateY(-120px);opacity:0}}

@media (prefers-reduced-motion:reduce){.fx-tick-in,.fx-neon .brand img,.fx-neon main h1,.fx-1up b{animation:none!important}.fx-reveal .fx-rv{opacity:1;transform:none;filter:none;transition:none}}