/* =========================================================
   1. Design tokens / frequently adjusted values
   ========================================================= */
:root {
  --black: #090a12;
  --navy: #11162c;
  --blue: #315bff;
  --violet: #7856d8;
  --paper: #f2f0eb;
  --yellow: #f6d34b;
  --cyan: #0db5f5;
  --pink: #f000ed;
  --hero-scale: 1;
  --hero-x: 0px;
  --hero-y: 0px;
  --hagiwara-x: 0px;
  --hagiwara-y: 0px;
  --hagiwara-scale: 1;
  --matsuda-x: 0px;
  --matsuda-y: 0px;
  --matsuda-scale: 1;
  --condensed: "Barlow Condensed","Arial Narrow",sans-serif;
  --sans: Inter,Arial,sans-serif;
  --script: Caveat,cursive
}

* {
  box-sizing: border-box
}

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black)
}

body {
  color: var(--paper);
  font-family: var(--sans)
}

a {
  color: inherit
}

/* =========================================================
   2. Intro overlay
   ========================================================= */
.intro {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: #05060b;
  overflow: hidden
}

.intro__noise,.poster__noise {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  opacity: .12;
  animation: grain .2s steps(2) infinite
}

/* Noise texture is intentionally disabled across the main experience. */
.intro__noise {
  display: none
}

.intro p {
  margin: 0 0 22px;
  font: 800 9px var(--sans);
  letter-spacing: .35em;
  color: #a7a9bb
}

.intro strong {
  position: relative;
  font: 900 clamp(70px,11vw,200px)/.75 var(--condensed);
  letter-spacing: -.055em
}

.intro strong:before,.intro strong:after {
  content: attr(data-text);
  position: absolute;
  inset: 0
}

.intro strong:before {
  color: var(--cyan);
  clip-path: inset(15% 0 60%);
  transform: translateX(-6px)
}

.intro strong:after {
  color: var(--pink);
  clip-path: inset(62% 0 12%);
  transform: translateX(7px)
}

.intro__bar {
  width: min(440px,72vw);
  height: 2px;
  margin: 34px auto 12px;
  background: #30313c
}

.intro__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow)
}

.intro>span {
  font: 800 10px var(--sans);
  letter-spacing: .2em
}

/* =========================================================
   3. Main poster canvas and background
   ========================================================= */
.poster {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  background: radial-gradient(circle at 61% 42%,#252d6d 0,#151b42 32%,#090a12 73%)
}

.poster__grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,transparent calc(50% - 1px),#ffffff12 50%,transparent calc(50% + 1px)),repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),#ffffff0a 8.333%),repeating-linear-gradient(0deg,transparent 0 89px,#ffffff09 90px)
}

.poster__noise {
  display: none
}

.poster__scan {
  display: none
}

.orb {
  position: absolute;
  z-index: 0;
  width: min(67vw,1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  left: 31%;
  top: -4%;
  background: radial-gradient(circle at 43% 39%,#7856d8dd,#315bff42 58%,transparent 72%);
  box-shadow: 0 0 0 1px #c6c2ff4d,0 0 0 44px #315bff0d
}

/* Large outlined AFTER 11:07 title */
.title {
  position: absolute;
  z-index: 1;
  left: 5vw;
  top: 8vh;
  font: 900 1px/.68 var(--condensed);
  letter-spacing: -.075em;
  white-space: nowrap;
  user-select: none
}

.title__after {
  position: relative;
  font-size: clamp(200px,27vw,510px);
  color: transparent;
  -webkit-text-stroke: 2px #f2f0ebd9
}

.title__after:before,.title__after:after {
  display: none
}

.title__time {
  margin-left: 11vw;
  font-size: clamp(240px,31vw,590px);
  color: transparent;
  -webkit-text-stroke: 2px #f2f0ebd9
}

.title__time span {
  -webkit-text-stroke: 0;
  color: var(--yellow)
}

/* Main character artwork
   Adjust --hero-x, --hero-y and --hero-scale in :root. */
.characters {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -8%;
  transform: translateX(calc(-34% + var(--hero-x))) translateY(var(--hero-y)) scale(var(--hero-scale));
  transform-origin: center bottom;
  width: min(70vw,1120px);
  height: 108%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(24px 28px 0 #02030a5c)
}

.characters img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom
}

/* Handwritten decorative typography */
.hand {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  font-family: var(--script);
  line-height: .65;
  pointer-events: none
}

.hand--back {
  z-index: 2;
  left: 7vw;
  top: 33%;
  font-size: clamp(80px,10vw,190px);
  color: #7856d890;
  transform: rotate(-12deg)
}

.hand--front {
  z-index: 10;
  left: 28%;
  top: clamp(63%,calc(54% + 10vh),68%);
  font-size: clamp(95px,12vw,230px);
  font-weight: 600;
  color: var(--yellow);
  text-shadow: 0 3px var(--black);
  transform: rotate(-8deg)
}

.scribble {
  position: absolute;
  z-index: 9;
  left: 20%;
  top: 55%;
  width: 64%;
  height: 22%;
  overflow: visible;
  pointer-events: none
}

.scribble path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700
}

/* Character name labels
   Individual positions: .name--hagiwara / .name--matsuda */
.name {
  position: absolute;
  z-index: 12;
  font-family: var(--condensed);
  line-height: .76;
  letter-spacing: -.03em
}

.name small {
  display: block;
  margin-bottom: 8px;
  font: 800 8px var(--sans);
  letter-spacing: .2em;
  color: var(--yellow)
}

.name b,.name strong {
  display: block
}

.name b {
  font-size: clamp(32px,3vw,57px);
  color: var(--paper)
}

.name strong {
  font-size: clamp(52px,5vw,96px);
  color: transparent;
  -webkit-text-stroke: 1px var(--paper)
}

.name i {
  display: block;
  width: 105%;
  height: 4px;
  margin-top: 10px;
  background: linear-gradient(90deg,var(--yellow) 0 72%,transparent 72% 76%,var(--paper) 76%)
}

.name--hagiwara {
  right: 19vw;
  top: 17%;
  text-align: right;
  transform: translate(var(--hagiwara-x),var(--hagiwara-y)) scale(var(--hagiwara-scale));
  transform-origin: right top
}

.name--hagiwara i {
  transform: scaleX(-1)
}

.name--matsuda {
  left: 4vw;
  top: 43%;
  transform: translate(var(--matsuda-x),var(--matsuda-y)) scale(var(--matsuda-scale));
  transform-origin: left top
}

/* =========================================================
   4. Poster decorations and small labels
   ========================================================= */
.micro {
  position: absolute;
  z-index: 5;
  font: 800 8px var(--sans);
  letter-spacing: .2em
}

.micro--side {
  right: 1.2vw;
  top: 32%;
  writing-mode: vertical-rl
}

.tape {
  position: absolute;
  z-index: 3;
  top: 52%;
  left: -2%;
  right: -2%;
  padding: 7px 0;
  border: 1px solid #f6d34b73;
  color: var(--yellow);
  font: 800 8px var(--sans);
  letter-spacing: .72em;
  white-space: nowrap;
  transform: rotate(-2deg)
}

.halftone {
  position: absolute;
  z-index: 3;
  width: 350px;
  height: 350px;
  background-image: radial-gradient(#f2f0eba8 1.3px,transparent 1.8px);
  background-size: 8px 8px;
  mask-image: radial-gradient(circle,#000 13%,transparent 70%)
}

.halftone--one {
  left: -6%;
  top: 15%
}

.halftone--two {
  right: -3%;
  bottom: -5%
}

.checker {
  position: absolute;
  z-index: 3;
  width: 128px;
  height: 42px;
  background: conic-gradient(var(--paper) 25%,transparent 0 50%,var(--paper) 0 75%,transparent 0) 0 0/22px 22px;
  opacity: .18
}

.checker--one {
  left: 2vw;
  bottom: 7vh
}

.checker--two {
  right: 5vw;
  top: 8vh;
  transform: rotate(90deg)
}

.crosshair {
  position: absolute;
  z-index: 4;
  width: 72px;
  height: 72px;
  border: 1px solid #f2f0eb70;
  border-radius: 50%
}

.crosshair:before,.crosshair:after {
  content: "";
  position: absolute;
  background: #f2f0eb70
}

.crosshair:before {
  left: -18%;
  top: 50%;
  width: 136%;
  height: 1px
}

.crosshair:after {
  left: 50%;
  top: -18%;
  height: 136%;
  width: 1px
}

.crosshair i {
  position: absolute;
  inset: 32%;
  border: 1px solid var(--yellow);
  border-radius: 50%
}

.crosshair--one {
  left: 5vw;
  top: 17%
}

.crosshair--two {
  right: 8vw;
  bottom: 17%;
  transform: scale(.65)
}

/* =========================================================
   5. Header logo and image navigation
   ========================================================= */
.event-logo {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: max(1.2vh,env(safe-area-inset-top));
  width: clamp(145px,13vw,250px);
  aspect-ratio: 2048/1463;
  display: block;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 13px #000);
  transition: transform .24s ease,filter .24s ease
}

.event-logo:hover,.event-logo:focus-visible {
  transform: translateX(-50%) scale(1.035);
  filter: drop-shadow(0 0 18px #7856d899);
  outline: none
}

.event-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.image-nav {
  position: absolute;
  z-index: 25;
  right: 2.5vw;
  bottom: 4.8vh;
  display: flex;
  align-items: center;
  gap: clamp(12px,1vw,18px)
}

.image-nav__item {
  display: block;
  width: clamp(100px,7vw,115px);
  aspect-ratio: 1.12;
  transition: transform .22s ease,filter .22s ease
}

.image-nav__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.image-nav__item:hover,.image-nav__item:focus-visible {
  transform: translateY(-5px) scale(1.06) rotate(-1deg);
  filter: drop-shadow(0 0 14px currentColor) brightness(1.08);
  outline: 2px solid var(--yellow);
  outline-offset: 4px
}

.image-nav__item:active {
  transform: scale(.96)
}

.image-nav__item--schedule,.image-nav__item--notice {
  color: var(--cyan)
}

.image-nav__item--game,.image-nav__item--gallery {
  color: var(--pink)
}

/* =========================================================
   6. Bottom metadata and footer decorations
   ========================================================= */
.serial {
  position: absolute;
  z-index: 11;
  left: 4vw;
  bottom: 9vh;
  font: 800 8px var(--sans);
  letter-spacing: .14em
}

.serial>* {
  display: block
}

.serial b {
  font: 900 40px var(--condensed);
  letter-spacing: -.03em
}

.serial span {
  color: #a9acc0
}

.serial i {
  width: 155px;
  height: 28px;
  margin-top: 7px;
  background: repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 5px,var(--paper) 5px 6px,transparent 6px 10px,var(--paper) 10px 13px,transparent 13px 16px)
}

.starburst {
  position: absolute;
  z-index: 4;
  right: 26vw;
  bottom: 7vh;
  width: 120px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--black);
  clip-path: polygon(50% 0,58% 30%,75% 7%,73% 35%,100% 25%,78% 44%,100% 58%,72% 57%,85% 87%,61% 68%,50% 100%,43% 70%,16% 92%,31% 61%,0 65%,28% 49%,2% 35%,32% 36%,23% 7%,45% 31%);
  transform: rotate(10deg)
}

.starburst b {
  font: 900 25px var(--condensed)
}

.corner {
  position: absolute;
  z-index: 18;
  width: 70px;
  height: 70px;
  pointer-events: none
}

.corner--tl {
  top: 1.5vh;
  left: 1vw;
  border-top: 1px solid #ffffff70;
  border-left: 1px solid #ffffff70
}

.corner--br {
  right: 1vw;
  bottom: 1.5vh;
  border-right: 1px solid #ffffff70;
  border-bottom: 1px solid #ffffff70
}

.footer-code {
  position: absolute;
  z-index: 18;
  left: 3vw;
  right: 3vw;
  bottom: 2.5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid #ffffff35;
  font: 800 7px var(--sans);
  letter-spacing: .2em
}

.footer-code b {
  color: var(--yellow)
}

@keyframes grain {
  0% {
    transform: translate(0)
  }

  25% {
    transform: translate(2%,-3%)
  }

  50% {
    transform: translate(-3%,2%)
  }

  75% {
    transform: translate(3%,3%)
  }

}

/* =========================================================
   7. Responsive layout: tablet and mobile
   ========================================================= */
@media(max-width:1100px) {
  .image-nav {
    right: 2vw
  }

  .characters {
    width: 82vw;
    transform: translateX(calc(-43% + var(--hero-x))) translateY(var(--hero-y)) scale(var(--hero-scale))
  }

  .name--hagiwara {
    right: 24vw
  }

  .starburst {
    right: 29vw
  }

  .event-logo {
    width: 150px
  }

  .title {
    left: 0
  }

  .title__after {
    font-size: 31vw
  }

  .title__time {
    font-size: 37vw
  }

}

@media(max-width:700px) {
  .poster {
    min-height: 620px
  }

  .orb {
    width: 130vw;
    left: -8%;
    top: 18%
  }

  .title {
    left: -6vw;
    top: 10vh
  }

  .title__after {
    font-size: 39vw
  }

  .title__time {
    font-size: 49vw;
    margin-left: 0;
    margin-top: 5vh;
    -webkit-text-stroke-width: 1px
  }

  .characters {
    height: calc(100dvh - 150px);
    width: 100vw;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    transform: translateX(calc(-50% + var(--hero-x))) translateY(var(--hero-y)) scale(var(--hero-scale))
  }

  .event-logo {
    top: max(7px,env(safe-area-inset-top));
    left: 50%;
    width: 118px
  }

  .micro--side {
    display: none
  }

  .name small {
    font-size: 6px
  }

  .name b {
    font-size: 23px
  }

  .name strong {
    font-size: 38px
  }

  .name--matsuda {
    left: 4vw;
    top: 35%
  }

  .name--hagiwara {
    right: 4vw;
    top: 20%
  }

  .hand--back {
    top: 28%;
    left: -3%;
    font-size: 25vw
  }

  .hand--front {
    top: auto;
    bottom: calc(90px + env(safe-area-inset-bottom) + 4vh);
    left: -5%;
    font-size: 31vw
  }

  .scribble {
    left: -9%;
    top: 52%;
    width: 120%
  }

  .tape {
    top: 44%;
    font-size: 6px;
    letter-spacing: .32em
  }

  .image-nav {
    right: auto;
    left: 50%;
    bottom: max(1.5vh,env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    gap: 5px
  }

  .image-nav__item {
    width: clamp(65px,18vw,78px);
    height: auto
  }

  .image-nav__item:hover,.image-nav__item:focus-visible {
    transform: translateY(-3px) scale(1.04)
  }

  .footer-code,.serial,.starburst,.crosshair--two,.halftone--two,.checker {
    display: none
  }

  .crosshair--one {
    left: -4%;
    top: 14%;
    transform: scale(.55)
  }

  .halftone--one {
    width: 230px;
    height: 230px
  }

  .corner--br {
    bottom: 1vh
  }

  .intro strong {
    font-size: 20vw
  }

}

@media(max-width:380px) {
  .image-nav__item {
    width: clamp(62px,18vw,68px);
    height: auto
  }

  .characters {
    height: calc(100dvh - 138px);
    bottom: calc(70px + env(safe-area-inset-bottom))
  }

  .name--hagiwara {
    top: 22%
  }

  .name--matsuda {
    top: 36%
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important
  }

  .intro {
    display: none
  }

  .scribble path {
    stroke-dashoffset: 0
  }

}

/* =========================================================
   8. Interaction effects and final overrides
   ========================================================= */
.nav-flash {
  position: absolute;
  z-index: 80;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,transparent 0 18%,#0db5f55c 18% 21%,transparent 21% 49%,#f000ed66 49% 52%,transparent 52%),#ffffff12;
  mix-blend-mode: screen
}

.nav-flash.is-active {
  animation: nav-flash .14s steps(2)
}

@keyframes nav-flash {
  0% {
    opacity: 0;
    clip-path: inset(0 0 80%)
  }

  35% {
    opacity: 1;
    clip-path: inset(18% 0 42%)
  }

  70% {
    opacity: .7;
    clip-path: inset(66% 0 12%)
  }

  100% {
    opacity: 0;
    clip-path: inset(0)
  }

}

@media(max-width:700px) and (max-height:720px) {
  .characters {
    height: calc(100dvh - 132px);
    bottom: calc(74px + env(safe-area-inset-bottom))
  }

  .hand--front {
    bottom: calc(90px + env(safe-area-inset-bottom) + 3vh)
  }

  .image-nav__item {
    width: clamp(62px,17vw,70px)
  }

  .halftone,.crosshair,.orb {
    opacity: .72
  }

}

.event-logo {
  width: clamp(120px,9vw,170px)
}

@media(max-width:700px) {
  .event-logo {
    width: 110px
  }

}

/* Main page has no loading overlay. */
body.is-intro {
  overflow: auto!important
}

/* Place Matsuda on the same far-right alignment line as Hagiwara. */
.name--matsuda {
  left: auto;
  right: 10vw;
  text-align: right;
  transform-origin: right top;
}

@media(max-width:700px) {
  .name--matsuda {
    right: 4vw
  }

}