.arcade-mode-toggle {
  position: relative;
  width: 2rem;
  height: 1.1rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.arcade-mode-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: hsl(var(--foreground));
  transition: transform 0.2s ease;
}

.arcade-mode-toggle.is-on {
  background: linear-gradient(90deg, hsl(330 70% 42%), hsl(190 75% 38%));
  border-color: hsl(55 90% 58% / 0.5);
}

.arcade-mode-toggle.is-on::after {
  transform: translateX(0.85rem);
  background: hsl(55 95% 62%);
  box-shadow: 0 0 8px hsl(55 95% 55% / 0.8);
}

.arcade-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}

html.arcade-mode .arcade-layer {
  opacity: 1;
}

html.arcade-mode main {
  position: relative;
  z-index: 10;
}

.arcade-bezel {
  position: absolute;
  inset: 1.1rem;
  border: 2px solid hsl(330 75% 52% / 0.4);
  border-radius: 0.45rem;
  box-shadow:
    inset 0 0 50px hsl(190 90% 50% / 0.07),
    0 0 18px hsl(330 80% 50% / 0.15);
  animation:
    arcade-bezel-pulse 2.2s ease-in-out infinite alternate,
    arcade-bezel-breathe 3.6s ease-in-out infinite alternate;
}

.arcade-grid {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background:
    linear-gradient(to top, hsl(280 45% 10% / 0.5) 0%, transparent 100%),
    repeating-linear-gradient(90deg, hsl(190 75% 52% / 0.09) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, hsl(330 70% 55% / 0.07) 0 1px, transparent 1px 36px);
  mask-image: linear-gradient(to top, black 20%, transparent 88%);
  animation: arcade-grid-scroll 3s linear infinite;
}

.arcade-marquee {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: hsl(55 95% 58%);
  text-shadow: 0 0 10px hsl(55 90% 50% / 0.6);
  white-space: nowrap;
  animation:
    arcade-marquee-blink 1.1s step-end infinite,
    arcade-marquee-bop 2.4s ease-in-out infinite alternate;
  letter-spacing: 0.08em;
}

.arcade-pixel {
  position: absolute;
  width: 6px;
  height: 6px;
  background: hsl(var(--px, 190) 85% 58%);
  box-shadow: 0 0 6px hsl(var(--px, 190) 90% 55% / 0.7);
  animation: arcade-pixel-float 3.2s ease-in-out infinite alternate;
}

.arcade-pixel-1 { top: 18%; left: 8%; --px: 330; animation-delay: 0s; }
.arcade-pixel-2 { top: 28%; right: 10%; --px: 190; animation-delay: -1s; }
.arcade-pixel-3 { top: 62%; left: 12%; --px: 55; animation-delay: -2s; }
.arcade-pixel-4 { top: 72%; right: 14%; --px: 280; animation-delay: -0.5s; }

@keyframes arcade-bezel-pulse {
  from { border-color: hsl(330 75% 52% / 0.32); }
  to { border-color: hsl(190 80% 55% / 0.45); }
}

@keyframes arcade-bezel-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.012); }
}

@keyframes arcade-grid-scroll {
  to { background-position: 0 36px, 44px 0, 0 0; }
}

@keyframes arcade-marquee-blink {
  50% { opacity: 0.45; }
}

@keyframes arcade-marquee-bop {
  from { transform: translateX(calc(-50% - 4px)) translateY(0); }
  to { transform: translateX(calc(-50% + 4px)) translateY(-3px); }
}

@keyframes arcade-pixel-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  35% { transform: translate(7px, -10px) scale(1.35); opacity: 0.9; }
  70% { transform: translate(-5px, -5px) scale(0.9); opacity: 0.65; }
  100% { transform: translate(9px, -14px) scale(1.2); opacity: 0.95; }
}

html.arcade-mode .glitch-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 3.5rem !important;
  line-height: 6rem;
  min-height: 6rem;
  letter-spacing: 0.04em;
  color: hsl(55 95% 62%);
  text-shadow:
    0 0 12px hsl(330 85% 58% / 0.55),
    0 0 24px hsl(190 80% 55% / 0.35);
  animation:
    glitch 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite,
    arcade-title-bop 0.9s ease-in-out infinite alternate,
    arcade-title-glow 1.4s ease-in-out infinite alternate;
}

@media (min-width: 640px) {
  html.arcade-mode .glitch-text {
    font-size: 4.75rem !important;
    line-height: 8rem;
    min-height: 8rem;
  }
}

html.arcade-mode .glitch-text::before,
html.arcade-mode .glitch-text::after {
  line-height: 6rem;
}

@media (min-width: 640px) {
  html.arcade-mode .glitch-text::before,
  html.arcade-mode .glitch-text::after {
    line-height: 8rem;
  }
}

html.arcade-mode .glitch-text::before {
  text-shadow: -3px 0 hsl(330 90% 58%);
}

html.arcade-mode .glitch-text::after {
  text-shadow: 3px 0 hsl(190 90% 55%);
}

html.arcade-mode main > p.text-sm {
  animation: arcade-subtitle-bop 1.15s ease-in-out infinite alternate;
}

html.arcade-mode .rounded-lg.border {
  border-color: hsl(190 75% 52% / 0.4);
  box-shadow: 0 0 14px hsl(330 70% 50% / 0.12);
  animation:
    arcade-card-pulse 1.6s ease-in-out infinite alternate,
    arcade-card-dance 2.8s ease-in-out infinite;
}

html.arcade-mode section .grid > div:nth-child(1) { animation-delay: 0s, 0s; }
html.arcade-mode section .grid > div:nth-child(2) { animation-delay: 0s, -0.45s; }
html.arcade-mode section .grid > div:nth-child(3) { animation-delay: 0s, -0.9s; }
html.arcade-mode section .grid > div:nth-child(4) { animation-delay: 0s, -1.35s; }
html.arcade-mode section .grid > div:nth-child(5) { animation-delay: 0s, -1.8s; }
html.arcade-mode section .grid > div:nth-child(6) { animation-delay: 0s, -2.25s; }

html.arcade-mode section .grid > div:nth-child(even) {
  animation-direction: alternate, alternate-reverse;
}

html.arcade-mode section .font-mono {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.7;
}

html.arcade-mode section .font-mono.text-sm {
  display: inline-block;
  animation: arcade-value-jitter 2.2s ease-in-out infinite;
}

html.arcade-mode section .text-xs.font-medium.uppercase {
  color: hsl(190 80% 68%);
  display: inline-block;
  animation: arcade-label-bop 2s ease-in-out infinite alternate;
}

html.arcade-mode section .grid > div:nth-child(odd) .text-xs.font-medium.uppercase {
  animation-direction: alternate-reverse;
}

html.arcade-mode section .rounded-full.bg-emerald-500 {
  animation: arcade-online-pulse 0.85s ease-in-out infinite alternate;
}

html.arcade-mode section > .mt-4 > .font-mono.text-xs {
  animation: arcade-date-blink 2.4s step-end infinite;
}

html.arcade-mode .scanline {
  opacity: 0.45;
  background: linear-gradient(to bottom, transparent 50%, hsl(120 60% 50% / 0.04) 50%);
  animation: arcade-scanline-dance 4s ease-in-out infinite alternate;
}

@keyframes arcade-title-bop {
  from { margin-top: 0; letter-spacing: 0.04em; }
  to { margin-top: -7px; letter-spacing: 0.07em; }
}

@keyframes arcade-title-glow {
  from {
    text-shadow:
      0 0 12px hsl(330 85% 58% / 0.55),
      0 0 24px hsl(190 80% 55% / 0.35);
  }
  to {
    text-shadow:
      0 0 18px hsl(330 90% 62% / 0.75),
      0 0 32px hsl(190 85% 58% / 0.5),
      0 0 10px hsl(55 95% 62% / 0.65);
  }
}

@keyframes arcade-subtitle-bop {
  from { transform: translateY(0) scale(1); opacity: 0.72; }
  to { transform: translateY(-3px) scale(1.04); opacity: 1; }
}

@keyframes arcade-card-pulse {
  from {
    border-color: hsl(190 75% 52% / 0.35);
    box-shadow: 0 0 10px hsl(190 70% 50% / 0.1);
  }
  to {
    border-color: hsl(330 75% 55% / 0.45);
    box-shadow: 0 0 16px hsl(330 70% 50% / 0.18);
  }
}

@keyframes arcade-card-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-0.7deg); }
  50% { transform: translateY(2px) rotate(0.5deg); }
  75% { transform: translateY(-3px) rotate(-0.4deg); }
}

@keyframes arcade-value-jitter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 0); }
  60% { transform: translate(0, 1px); }
  80% { transform: translate(1px, 0); }
}

@keyframes arcade-label-bop {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes arcade-online-pulse {
  from { transform: scale(1); box-shadow: 0 0 0 hsl(142 76% 45% / 0); }
  to { transform: scale(1.25); box-shadow: 0 0 8px hsl(142 76% 45% / 0.75); }
}

@keyframes arcade-date-blink {
  0%, 70% { opacity: 1; }
  75%, 85% { opacity: 0.35; }
  90%, 100% { opacity: 1; }
}

@keyframes arcade-scanline-dance {
  from { opacity: 0.38; }
  to { opacity: 0.52; }
}

.disco-skeleton-flyer {
  position: fixed;
  z-index: 8;
  top: var(--disco-fly-y, 35%);
  left: -6rem;
  width: 4.5rem;
  height: 6rem;
  pointer-events: none;
  will-change: left, transform;
  filter: drop-shadow(0 0 14px hsl(330 85% 58% / 0.55));
  animation:
    disco-skeleton-fly-ltr var(--disco-fly-duration, 7s) linear forwards,
    disco-skeleton-hue 1.4s linear infinite;
}

.disco-skeleton-flyer.fly-rtl {
  animation-name: disco-skeleton-fly-rtl, disco-skeleton-hue;
}

.disco-skeleton-flyer svg {
  width: 100%;
  height: 100%;
}

.disco-skeleton-flyer .run-arm-a {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: disco-dance-arm-a 0.3s ease-in-out infinite alternate;
}

.disco-skeleton-flyer .run-arm-b {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: disco-dance-arm-b 0.3s ease-in-out infinite alternate-reverse;
}

.disco-skeleton-flyer .run-leg-a {
  transform-box: fill-box;
  transform-origin: center top;
  animation: disco-dance-leg-a 0.36s ease-in-out infinite alternate;
}

.disco-skeleton-flyer .run-leg-b {
  transform-box: fill-box;
  transform-origin: center top;
  animation: disco-dance-leg-b 0.36s ease-in-out infinite alternate-reverse;
}

@keyframes disco-skeleton-fly-ltr {
  0% { left: -6rem; transform: translateY(0) rotate(-6deg); }
  15% { transform: translateY(-16px) rotate(8deg); }
  30% { transform: translateY(6px) rotate(-5deg); }
  45% { transform: translateY(-12px) rotate(7deg); }
  60% { transform: translateY(10px) rotate(-4deg); }
  75% { transform: translateY(-8px) rotate(6deg); }
  100% { left: calc(100vw + 6rem); transform: translateY(0) rotate(-6deg); }
}

@keyframes disco-skeleton-fly-rtl {
  0% { left: calc(100vw + 6rem); transform: scaleX(-1) translateY(0) rotate(-6deg); }
  15% { transform: scaleX(-1) translateY(-16px) rotate(8deg); }
  30% { transform: scaleX(-1) translateY(6px) rotate(-5deg); }
  45% { transform: scaleX(-1) translateY(-12px) rotate(7deg); }
  60% { transform: scaleX(-1) translateY(10px) rotate(-4deg); }
  75% { transform: scaleX(-1) translateY(-8px) rotate(6deg); }
  100% { left: -6rem; transform: scaleX(-1) translateY(0) rotate(-6deg); }
}

@keyframes disco-skeleton-hue {
  to { filter: drop-shadow(0 0 14px hsl(330 85% 58% / 0.55)) hue-rotate(360deg); }
}

@keyframes disco-dance-arm-a {
  from { transform: rotate(-55deg); }
  to { transform: rotate(60deg); }
}

@keyframes disco-dance-arm-b {
  from { transform: rotate(55deg); }
  to { transform: rotate(-60deg); }
}

@keyframes disco-dance-leg-a {
  from { transform: rotate(35deg); }
  to { transform: rotate(-28deg); }
}

@keyframes disco-dance-leg-b {
  from { transform: rotate(-35deg); }
  to { transform: rotate(28deg); }
}

.war-mode-control {
  display: none !important;
}