:root {
  --ink: #03040a;
  --white: #fffdf7;
  --pink: #fa0050;
  --cyan: #00e8df;
  --yellow: #ffd11a;
  --muted: #a5a2a9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font-family: Arial, Helvetica, sans-serif; margin: 0; }
a { color: inherit; text-decoration: none; }

.site-header { align-items: center; background: rgba(3, 4, 10, .92); border-bottom: 1px solid rgba(255, 255, 255, .12); display: flex; height: 74px; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5.5rem); position: sticky; top: 0; z-index: 10; }
.wordmark { align-items: center; display: flex; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.35rem; letter-spacing: .12em; }
.wordmark-dot { background: var(--pink); box-shadow: 5px 0 var(--cyan); height: 11px; margin-right: 11px; transform: rotate(45deg); width: 11px; }
nav { display: flex; gap: clamp(1rem, 2.4vw, 2.8rem); }
nav a { color: #e8e5e0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
nav a:hover { color: var(--cyan); }

.hero { align-items: center; background: radial-gradient(circle at 50% 35%, #161d4a 0, #05050d 52%, #020307 100%); display: grid; min-height: min(790px, calc(100svh - 74px)); overflow: hidden; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 4rem) 4.5rem; place-items: center; position: relative; }
.hero::before, .hero::after { background-image: linear-gradient(rgba(0, 232, 223, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 0, 80, .11) 1px, transparent 1px); background-size: 52px 52px; bottom: -33%; content: ""; height: 62%; left: -10%; position: absolute; transform: perspective(420px) rotateX(61deg); transform-origin: bottom; width: 120%; }
.hero::after { filter: blur(18px); opacity: .45; }
.hero-stars { background-image: radial-gradient(var(--yellow) 1px, transparent 1.5px), radial-gradient(var(--cyan) 1px, transparent 1.5px), radial-gradient(var(--pink) 1px, transparent 1.5px); background-position: 0 0, 37px 52px, 76px 19px; background-size: 115px 113px, 149px 143px, 177px 173px; inset: 0; opacity: .85; pointer-events: none; position: absolute; }
.hero-poster-frame { border: 2px solid rgba(255, 255, 255, .18); box-shadow: -7px 7px 0 var(--pink), 7px 7px 0 var(--cyan), 0 26px 70px rgba(0, 0, 0, .62); max-width: 100%; position: relative; width: min(1180px, 100%, calc(min(68vh, 650px) * 1.7768)); z-index: 1; }
.hero-poster { display: block; width: 100%; }
.scroll-cue { bottom: 1.3rem; color: var(--yellow); font-size: .65rem; font-weight: 800; left: 50%; letter-spacing: .17em; position: absolute; text-transform: uppercase; transform: translateX(-50%); z-index: 2; }
.scroll-cue span { font-size: 1.2rem; margin-left: .3rem; }

.pixel-pal { --pal: var(--cyan); --pal-shadow: #008d89; display: block; filter: drop-shadow(4px 4px 0 rgba(3, 4, 10, .55)); height: 68px; pointer-events: none; position: absolute; transform-origin: 50% 100%; width: 54px; z-index: 3; }
.pixel-pal--pink { --pal: var(--pink); --pal-shadow: #8b002e; }
.pixel-pal--yellow { --pal: var(--yellow); --pal-shadow: #a47900; }
.pixel-pal > span { display: block; position: absolute; }
.pixel-pal__antenna { background: var(--pal); box-shadow: 5px -4px 0 var(--pal); height: 10px; left: 25px; top: 0; width: 5px; }
.pixel-pal__head { background: var(--pal); box-shadow: -5px 5px 0 var(--pal-shadow), 5px 0 var(--white), 5px 5px var(--pal-shadow); height: 24px; left: 10px; top: 10px; width: 34px; }
.pixel-pal__eye { background: var(--ink); height: 6px; top: 9px; width: 5px; }
.pixel-pal__eye--left { left: 8px; }
.pixel-pal__eye--right { right: 8px; }
.pixel-pal__body { background: var(--pal); box-shadow: 5px 5px 0 var(--pal-shadow); height: 19px; left: 8px; top: 39px; width: 38px; }
.pixel-pal__arm { background: var(--pal); height: 14px; top: 41px; width: 6px; }
.pixel-pal__arm--left { left: 0; transform: rotate(18deg); }
.pixel-pal__arm--right { right: 0; transform: rotate(-18deg); }
.pixel-pal__leg { background: var(--pal-shadow); bottom: 0; height: 11px; width: 8px; }
.pixel-pal__leg--left { left: 13px; }
.pixel-pal__leg--right { right: 13px; }
.pixel-pal--hero { animation: pixel-patrol 6s steps(4, end) infinite; bottom: 2.35rem; left: clamp(1.2rem, 4vw, 4.2rem); }
.pixel-pal--intro { animation: pixel-bob 4.5s steps(3, end) infinite; bottom: 1.3rem; right: clamp(1.2rem, 4vw, 4.2rem); }
.pixel-pal--experiences { animation: pixel-hop 3.8s steps(3, end) infinite; right: clamp(1.2rem, 4vw, 4.2rem); top: 2.4rem; }
.pixel-pal--live { animation: pixel-bob 4.2s steps(3, end) -1.4s infinite; right: clamp(1.2rem, 4vw, 4.2rem); top: 1.5rem; }
.pixel-pal--visit { animation: pixel-patrol 5.2s steps(4, end) -2.1s infinite; bottom: 2.1rem; right: clamp(1.2rem, 3vw, 3.5rem); }
@keyframes pixel-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pixel-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-10px); } 50% { transform: translateY(-10px) scaleX(1.06); } 65% { transform: translateY(0) scaleY(.9); } }
@keyframes pixel-patrol { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

.section-shell { margin: 0 auto; max-width: 1240px; padding-left: clamp(1.25rem, 5vw, 5.5rem); padding-right: clamp(1.25rem, 5vw, 5.5rem); }
.intro { padding-bottom: clamp(4.5rem, 10vw, 9.5rem); padding-top: clamp(4.5rem, 9vw, 8rem); position: relative; }
.eyebrow { color: var(--cyan); font-size: .74rem; font-weight: 900; letter-spacing: .17em; margin: 0 0 1.2rem; text-transform: uppercase; }
.intro-grid { align-items: start; display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 7.5vw, 7.3rem); letter-spacing: -.02em; line-height: .9; margin-bottom: 0; text-shadow: 4px 3px var(--pink), 7px 4px var(--cyan); }
.intro-copy { max-width: 39rem; }
.intro-copy > p { color: #d4d0cc; font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.62; margin-bottom: 1.05rem; }
.intro-schedule { border-left: 3px solid var(--yellow); display: grid; gap: .35rem; margin-top: 1.75rem; padding: .45rem 0 .45rem 1rem; }
.intro-schedule span { color: var(--yellow); font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: .035em; text-transform: uppercase; }

.experiences { border-top: 1px solid rgba(255, 255, 255, .13); padding-bottom: clamp(5rem, 10vw, 9rem); padding-top: clamp(4rem, 8vw, 7rem); position: relative; }
.section-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2.8rem; }
h2 { font-size: clamp(2.7rem, 5vw, 5.3rem); letter-spacing: .015em; line-height: .9; margin-bottom: 0; }
.heading-side-note { color: var(--muted); font-size: .9rem; margin: 0 0 .3rem; max-width: 12rem; text-align: right; }
.experience-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.experience-card { background: #080a11; border: 2px solid currentColor; color: var(--cyan); display: flex; flex-direction: column; min-height: 300px; padding: 1.25rem; position: relative; }
.experience-card::before, .experience-card::after { background: currentColor; content: ""; height: 6px; position: absolute; width: 32px; }
.experience-card::before { left: 13px; top: -4px; }
.experience-card::after { bottom: -4px; right: 13px; }
.experience-card.yellow { color: var(--yellow); }
.experience-card.pink { color: var(--pink); }
.card-index { color: currentColor; font-family: monospace; font-size: .8rem; font-weight: 700; letter-spacing: .12em; }
.experience-card h3 { color: var(--white); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: .035em; margin: auto 0 1rem; }
.experience-card p { color: #d0ccd1; font-size: .92rem; line-height: 1.55; margin-bottom: 1.5rem; }
.card-pixels { color: currentColor; font-size: .8rem; letter-spacing: .35em; }
.experience-details { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.2rem; }
.experience-detail { background: #060810; border-left: 3px solid var(--cyan); padding: clamp(1.4rem, 3vw, 2.2rem); position: relative; }
.experience-detail::after { background: var(--cyan); content: ""; height: 8px; position: absolute; right: 0; top: 0; width: 52px; }
.experience-detail.yellow { border-left-color: var(--yellow); }
.experience-detail.yellow::after { background: var(--yellow); }
.experience-detail.pink { border-left-color: var(--pink); }
.experience-detail.pink::after { background: var(--pink); }
.experience-detail h3 { color: var(--cyan); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: .03em; margin-bottom: 1.1rem; }
.experience-detail.yellow h3 { color: var(--yellow); }
.experience-detail.pink h3 { color: var(--pink); }
.experience-detail p { color: #d0ccd1; font-size: 1rem; line-height: 1.62; margin-bottom: 1rem; max-width: 44rem; }
.experience-detail p:last-child { margin-bottom: 0; }

.live-section { background: linear-gradient(135deg, #ee004c 0%, #bd003d 55%, #79002e 100%); overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.live-pixel-grid { background-image: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 25px 25px; inset: 0; mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); opacity: .5; position: absolute; }
.live-content { position: relative; }
.live-content .eyebrow { color: var(--yellow); }
.live-content h2 { font-size: clamp(3.3rem, 8vw, 8rem); max-width: 960px; text-shadow: 4px 4px #111; }
.live-detail { align-items: flex-start; border-top: 2px solid rgba(255, 255, 255, .45); display: flex; gap: 1.5rem; margin-top: 2.5rem; max-width: 820px; padding-top: 1.1rem; }
.live-detail > span { color: var(--yellow); font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .9; text-shadow: 2px 2px #111; }
.live-detail > div { max-width: 610px; }
.live-detail p { font-size: 1.05rem; line-height: 1.5; margin-bottom: .9rem; }
.live-detail p:last-child { margin-bottom: 0; }

.pixel-section { background: #07162d; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0; position: relative; }
.pixel-section__grid { background-image: linear-gradient(rgba(0, 232, 223, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 232, 223, .12) 1px, transparent 1px); background-size: 30px 30px; inset: 0; opacity: .55; position: absolute; }
.pixel-section__content { align-items: center; display: grid; gap: clamp(2rem, 8vw, 8rem); grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); position: relative; }
.pixel-copy { max-width: 45rem; }
.pixel-copy .eyebrow { color: var(--yellow); }
.pixel-copy h2 { color: var(--white); margin-bottom: 1.7rem; text-shadow: 3px 3px var(--pink); }
.pixel-copy > p:not(.eyebrow) { color: #d9e1ed; font-size: 1.08rem; line-height: 1.62; margin-bottom: 1rem; }
.pixel-copy > p:last-child { margin-bottom: 0; }
.pixel-fox-stage { align-items: center; background: radial-gradient(circle at 50% 45%, #0c5e94 0%, #083454 55%, #051120 100%); border: 2px solid var(--cyan); box-shadow: 9px 9px 0 var(--pink); display: flex; height: clamp(240px, 28vw, 340px); justify-content: center; overflow: hidden; position: relative; }
.pixel-fox-label { color: rgba(255, 255, 255, .2); font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(4rem, 9vw, 8rem); left: 50%; letter-spacing: .08em; line-height: 1; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.pixel-fox { animation: pixel-fox-bounce 4s steps(3, end) infinite; filter: drop-shadow(7px 8px 0 rgba(0, 0, 0, .38)); height: 180px; position: relative; transform-origin: 50% 100%; width: 180px; z-index: 1; }
.pixel-fox > span, .pixel-fox__face > span { display: block; position: absolute; }
.pixel-fox__ear { background: var(--cyan); height: 49px; top: 1px; width: 43px; }
.pixel-fox__ear--left { clip-path: polygon(0 0, 100% 100%, 0 100%); left: 26px; }
.pixel-fox__ear--right { clip-path: polygon(0 100%, 100% 0, 100% 100%); right: 26px; }
.pixel-fox__face { background: #08b9d2; box-shadow: -8px 8px 0 #066f97, 8px 8px 0 #064d70; height: 91px; left: 31px; position: absolute; top: 39px; width: 118px; }
.pixel-fox__eye { background: var(--ink); height: 13px; top: 29px; width: 13px; }
.pixel-fox__eye--left { left: 24px; }
.pixel-fox__eye--right { right: 24px; }
.pixel-fox__muzzle { background: var(--white); bottom: 8px; height: 30px; left: 38px; width: 43px; }
.pixel-fox__muzzle::after { background: var(--pink); content: ""; height: 9px; left: 17px; position: absolute; top: 8px; width: 9px; }
.pixel-fox__body { background: #0787b8; box-shadow: -8px 8px 0 #06567b, 8px 8px 0 #064665; bottom: 8px; height: 50px; left: 49px; width: 84px; }
.pixel-fox__tail { background: var(--cyan); bottom: 6px; height: 54px; left: 3px; transform: skewY(-25deg); width: 58px; z-index: -1; }
.pixel-fox__tail::after { background: var(--white); bottom: 0; content: ""; height: 19px; position: absolute; right: 0; width: 26px; }
.pixel-trail { background: var(--cyan); height: 10px; opacity: .78; position: absolute; transform: rotate(45deg); width: 10px; }
.pixel-trail--one { bottom: 30px; left: 30px; }
.pixel-trail--two { bottom: 53px; left: 54px; }
.pixel-trail--three { bottom: 24px; right: 30px; }
@keyframes pixel-fox-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.cosplay-callout { background: var(--yellow); color: var(--ink); padding: clamp(4.2rem, 8vw, 7rem) 0; position: relative; }
.cosplay-callout::before { background-image: linear-gradient(rgba(3, 4, 10, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(3, 4, 10, .13) 1px, transparent 1px); background-size: 25px 25px; content: ""; inset: 0; mask-image: linear-gradient(90deg, transparent, black 25%, black 75%, transparent); position: absolute; }
.cosplay-callout__content { max-width: 960px; position: relative; }
.cosplay-callout .eyebrow { color: #9f0050; }
.cosplay-callout h2 { font-size: clamp(3rem, 7vw, 6.8rem); margin-bottom: 1.6rem; text-shadow: 3px 3px var(--white); }
.cosplay-callout p:not(.eyebrow) { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; margin-bottom: .8rem; max-width: 51rem; }

.visit { align-items: center; display: grid; gap: clamp(2rem, 8vw, 8rem); grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr); padding-bottom: clamp(4.5rem, 9vw, 8rem); padding-top: clamp(4.5rem, 9vw, 8rem); position: relative; }
.visit-copy > p:not(.eyebrow) { color: #d1ced2; font-size: 1.05rem; line-height: 1.65; margin: 1.5rem 0 1.8rem; max-width: 37rem; }
.visit-link { border-bottom: 2px solid var(--cyan); color: var(--cyan); display: inline-block; font-size: .82rem; font-weight: 900; letter-spacing: .1em; padding-bottom: .45rem; text-transform: uppercase; }
.visit-link span { margin-left: .5rem; }
.tombola-card { background: var(--ink); border: 3px solid var(--yellow); box-shadow: 8px 8px 0 var(--pink); color: var(--white); padding: 2rem 1.5rem; text-align: center; }
.tombola-card p { color: var(--yellow); font-family: Impact, Haettenschweiler, sans-serif; font-size: 2.1rem; letter-spacing: .06em; margin-bottom: .55rem; text-transform: uppercase; }
.tombola-card strong { color: var(--pink); display: block; font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(4rem, 8vw, 6rem); line-height: .8; text-shadow: 2px 2px var(--white); }
.tombola-card span { color: var(--cyan); display: block; font-size: .88rem; font-weight: 900; letter-spacing: .15em; margin-top: 1rem; }
footer { align-items: center; border-top: 1px solid rgba(255,255,255,.15); color: #aaa6ac; display: flex; font-family: monospace; font-size: .66rem; font-weight: 700; justify-content: space-between; letter-spacing: .11em; padding: 1.5rem clamp(1.25rem, 5vw, 5.5rem); text-transform: uppercase; }
.social-links { display: flex; gap: 1rem; }
.social-links a { color: var(--cyan); text-decoration: none; }
.social-links a:hover, .social-links a:focus-visible { color: var(--pink); text-decoration: underline; text-underline-offset: .3rem; }

@media (max-width: 760px) {
  .site-header { height: 64px; }
  nav a:not(:first-child) { display: none; }
  .hero { min-height: auto; padding-bottom: 4rem; padding-top: 1.5rem; }
  .hero-poster-frame { width: 100%; }
  .intro-grid, .visit, .pixel-section__content { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .heading-side-note { text-align: left; }
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-details { grid-template-columns: 1fr; }
  .experience-card { min-height: 270px; }
  .experience-card p { font-size: .8rem; }
  .live-detail { align-items: start; flex-direction: column; gap: .35rem; }
  .live-detail span { font-size: 2.8rem; }
  .pixel-pal--experiences, .pixel-pal--visit { display: none; }
  .pixel-pal--hero { bottom: 1.4rem; left: 1.15rem; transform: scale(.8); }
  .pixel-pal--intro { bottom: .9rem; right: 1.15rem; transform: scale(.75); }
  .pixel-pal--live { right: 1.15rem; top: 1.1rem; transform: scale(.72); }
  .pixel-fox-stage { max-width: 360px; }
  footer { flex-wrap: wrap; gap: .65rem 1.3rem; }
}

@media (max-width: 440px) {
  .experience-grid { grid-template-columns: 1fr; }
  .experience-card { min-height: 215px; }
  .experience-card h3 { margin-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-pal, .pixel-fox { animation: none; }
}