/**
 * Arcade UI polish — neon accents, viewport attract, CRT, readability.
 * Loaded last (after crt-tv-ui.css).
 */

:root {
  --neon-pink: #ff2d9a;
  --neon-cyan: #00f0ff;
  --neon-yellow: #ffe14a;
  --neon-purple: #a855f7;
  --arcade-sky-top: #1a0a3e;
  --arcade-sky-mid: #2d1b69;
  --arcade-sky-low: #4a7cff;
  --arcade-grass: #2d8a3e;
  --arcade-grass-dark: #1a5c28;
}

/* ── Room ambience — warmer neon spill ── */
.arcade-room {
  background:
    radial-gradient(ellipse 70% 45% at 15% 20%, rgba(255, 45, 154, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 25%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 80% 55% at 50% 88%, rgba(168, 85, 247, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0, 0, 0, 0.88) 0%, transparent 50%),
    repeating-linear-gradient(90deg, #0a0a16 0 3px, #0e0e1c 3px 6px),
    linear-gradient(180deg, #04040c 0%, #10102a 42%, #080812 100%) !important;
}

.arcade-machine.arcade-90s {
  box-shadow:
    inset 0 0 0 3px var(--cab-90s-tmold),
    inset 0 0 0 6px #000,
    0 0 40px rgba(255, 45, 154, 0.18),
    0 0 90px rgba(0, 240, 255, 0.12),
    0 28px 60px rgba(0, 0, 0, 0.85) !important;
}

/* ── Marquee — punchier neon ── */
.arcade-machine.arcade-90s .arcade-marquee {
  background:
    linear-gradient(180deg, rgba(255, 45, 154, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, #0e2868 0%, #061840 55%, #040c28 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(0, 240, 255, 0.25),
    inset 0 -4px 12px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(61, 143, 255, 0.35),
    0 0 48px rgba(255, 45, 154, 0.15) !important;
}

.arcade-machine.arcade-90s .arcade-marquee-inner {
  text-shadow:
    0 0 8px rgba(255, 225, 74, 0.9),
    0 0 18px rgba(255, 45, 154, 0.55),
    0 0 32px rgba(0, 240, 255, 0.35) !important;
}

.arcade-machine.arcade-90s .arcade-marquee-lights span:nth-child(odd) {
  background: var(--neon-pink) !important;
  box-shadow: 0 0 8px var(--neon-pink), 0 0 16px rgba(255, 45, 154, 0.6) !important;
}

.arcade-machine.arcade-90s .arcade-marquee-lights span:nth-child(even) {
  background: var(--neon-cyan) !important;
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px rgba(0, 240, 255, 0.55) !important;
}

/* ── Side columns — balance & glow ── */
.arcade-machine.arcade-90s .arcade-col.arcade-left,
.arcade-machine.arcade-90s .arcade-col.arcade-right {
  min-width: clamp(148px, 17vw, 210px) !important;
  gap: 0.55rem !important;
}

.arcade-machine.arcade-90s .arcade-score-box,
.arcade-machine.arcade-90s .kintara-panel {
  border-color: rgba(0, 240, 255, 0.28) !important;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.72),
    inset 0 2px 0 rgba(142, 252, 106, 0.1),
    0 0 14px rgba(0, 240, 255, 0.08),
    0 0 22px rgba(255, 45, 154, 0.05) !important;
}

/* ── Readability bumps ── */
.arcade-machine.arcade-90s .quest-desc,
.arcade-machine.arcade-90s .arcade-left .battle-team-hint {
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
  color: #fff4d0 !important;
}

.arcade-machine.arcade-90s .quest-name {
  font-size: clamp(0.42rem, 1.1vw, 0.52rem) !important;
  line-height: 1.35 !important;
}

.arcade-machine.arcade-90s .global-chat .chat-messages {
  font-size: 0.68rem !important;
  line-height: 1.4 !important;
}

.arcade-machine.arcade-90s .arcade-score-val {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem) !important;
  letter-spacing: 0.06em !important;
}

.arcade-machine.arcade-90s .panel-title {
  font-size: clamp(0.38rem, 1vw, 0.48rem) !important;
  margin-bottom: 0.35rem !important;
}

.arcade-machine.arcade-90s .arcade-right .hud-lb-row {
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
}

/* ── Viewport attract (behind canvas) ── */
.arcade-viewport-attract {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  transition: opacity 0.9s ease, filter 0.9s ease;
}

body.game-started .arcade-viewport-attract {
  opacity: 0.22;
  filter: saturate(0.85) brightness(0.9);
}

.attract-layer {
  position: absolute;
  inset: 0;
}

.attract-sky {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 225, 74, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--arcade-sky-top) 0%, var(--arcade-sky-mid) 38%, var(--arcade-sky-low) 72%, #6eb5ff 100%);
}

.attract-sun {
  inset: auto;
  top: 12%;
  left: 72%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9c0 0%, #ffe14a 35%, rgba(255, 225, 74, 0) 70%);
  box-shadow: 0 0 30px rgba(255, 225, 74, 0.55);
  animation: attractSunPulse 4s ease-in-out infinite;
}

@keyframes attractSunPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

.attract-clouds {
  background:
    radial-gradient(ellipse 22% 8% at 20% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 18% 7% at 28% 26%, rgba(255, 255, 255, 0.28) 0%, transparent 100%),
    radial-gradient(ellipse 26% 9% at 55% 22%, rgba(255, 255, 255, 0.32) 0%, transparent 100%),
    radial-gradient(ellipse 20% 7% at 62% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  animation: attractCloudDrift 28s linear infinite;
}

@keyframes attractCloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(6%); }
}

.attract-hills {
  top: auto;
  height: 42%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(26, 92, 40, 0.35) 35%, var(--arcade-grass-dark) 100%),
    radial-gradient(ellipse 40% 100% at 15% 100%, #1f6b34 0%, transparent 70%),
    radial-gradient(ellipse 50% 100% at 55% 100%, #2d8a3e 0%, transparent 72%),
    radial-gradient(ellipse 38% 100% at 88% 100%, #1a5c28 0%, transparent 68%);
}

.attract-grass {
  top: auto;
  height: 22%;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, 0.08) 6px 7px),
    linear-gradient(180deg, var(--arcade-grass) 0%, #1e6b30 55%, #144a22 100%);
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.25);
}

.attract-grid {
  opacity: 0.12;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255, 255, 255, 0.35) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255, 255, 255, 0.35) 15px 16px);
  mix-blend-mode: overlay;
}

.attract-scan {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(0, 0, 0, 0.06) 3px 4px
  );
  animation: attractScanRoll 8s linear infinite;
}

@keyframes attractScanRoll {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

.attract-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-pixel);
  font-size: clamp(0.42rem, 1.4vw, 0.58rem);
  letter-spacing: 0.18em;
  color: var(--neon-yellow);
  text-shadow:
    0 0 10px rgba(255, 225, 74, 0.9),
    0 0 22px rgba(255, 45, 154, 0.5),
    2px 2px 0 rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(0, 240, 255, 0.45);
  background: rgba(0, 0, 0, 0.42);
  box-shadow:
    0 0 18px rgba(0, 240, 255, 0.25),
    inset 0 0 12px rgba(255, 45, 154, 0.12);
  animation: attractTagPulse 2.2s ease-in-out infinite;
}

body.game-started .attract-tag {
  display: none;
}

@keyframes attractTagPulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}

/* ── Canvas — richer fallback + arcade punch ── */
.arcade-machine.arcade-90s .arcade-crt-glass {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(74, 124, 255, 0.35) 0%, transparent 60%),
    linear-gradient(180deg, var(--arcade-sky-top) 0%, var(--arcade-sky-mid) 45%, var(--arcade-sky-low) 100%) !important;
  border-color: rgba(0, 240, 255, 0.22) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    inset 0 0 90px rgba(142, 252, 106, 0.05),
    0 0 24px rgba(0, 240, 255, 0.12),
    0 0 36px rgba(255, 45, 154, 0.08) !important;
}

.arcade-machine.arcade-90s #game-canvas {
  z-index: 2;
  background:
    radial-gradient(ellipse 100% 80% at 50% 20%, #7ec8ff 0%, transparent 55%),
    linear-gradient(180deg, #3a7bd5 0%, #5c94fc 42%, #4a7cff 100%) !important;
  filter: saturate(1.14) contrast(1.06) brightness(1.02);
}

body.game-started .arcade-machine.arcade-90s #game-canvas {
  /* Full-canvas CSS filters tank FPS — color punch stays on menu only */
  filter: none;
}

/* ── CRT — subtle but stronger ── */
.arcade-machine.arcade-90s .arcade-crt-glass::before {
  z-index: 6 !important;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(0, 240, 255, 0.05) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 50%, transparent 32%, rgba(0, 0, 0, 0.38) 100%) !important;
}

.arcade-machine.arcade-90s .arcade-crt-glass::after {
  z-index: 7 !important;
  opacity: 0.32 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.09) 2px,
    rgba(0, 0, 0, 0.09) 4px
  ) !important;
  animation: crtScanFlicker 6s steps(1) infinite;
}

@keyframes crtScanFlicker {
  0%, 97%, 100% { opacity: 0.32; }
  98% { opacity: 0.38; }
  99% { opacity: 0.28; }
}

.arcade-machine.arcade-90s .arcade-crt-filter::before {
  opacity: 0.78 !important;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.62) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0 2px,
      rgba(0, 0, 0, 0.12) 2px 3px
    ) !important;
}

.arcade-machine.arcade-90s .arcade-crt-filter::after {
  opacity: 0.55 !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(142, 252, 106, 0.05) 0%, transparent 58%),
    linear-gradient(90deg, rgba(255, 0, 80, 0.022) 0%, transparent 32%, transparent 68%, rgba(0, 120, 255, 0.022) 100%) !important;
}

/* ── HUD bar — clearer hierarchy ── */
.arcade-machine.arcade-90s .hud-top {
  padding: 0.5rem 0.75rem !important;
  gap: 0.55rem 0.9rem !important;
  border-color: rgba(255, 225, 74, 0.35) !important;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(142, 252, 106, 0.12),
    0 2px 0 rgba(0, 240, 255, 0.15) !important;
}

.arcade-machine.arcade-90s .hud-zone {
  font-size: clamp(0.72rem, 1.6vw, 0.95rem) !important;
}

.arcade-machine.arcade-90s .hud-stats {
  font-size: clamp(0.58rem, 1.2vw, 0.72rem) !important;
  gap: 0.45rem 0.65rem !important;
}

/* ── Control deck & buttons ── */
.arcade-machine.arcade-90s .cp-free-play {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.85) !important;
}

.arcade-machine.arcade-90s .dex-hint-bar {
  border-color: rgba(0, 240, 255, 0.2) !important;
  color: rgba(255, 244, 208, 0.88) !important;
  font-size: 0.58rem !important;
  line-height: 1.4 !important;
}

.arcade-machine.arcade-90s .arcade-btn-a {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.25),
    0 5px 0 #0d47a1,
    0 0 18px rgba(30, 136, 229, 0.45) !important;
}

.arcade-machine.arcade-90s .arcade-btn-b {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.25),
    0 5px 0 #1b5e20,
    0 0 18px rgba(67, 160, 71, 0.45) !important;
}

.arcade-machine.arcade-90s .arcade-btn-x {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.25),
    0 5px 0 #b71c1c,
    0 0 18px rgba(229, 57, 53, 0.45) !important;
}

/* ── Quality pills ── */
.arcade-machine.arcade-90s .gfx-pill.active {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45) !important;
  color: var(--neon-cyan) !important;
}

@media (max-width: 900px) {
  .attract-tag {
    font-size: 0.38rem;
    letter-spacing: 0.12em;
  }

  body.game-started .arcade-viewport-attract {
    opacity: 0.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attract-sun,
  .attract-clouds,
  .attract-scan,
  .attract-tag,
  .arcade-machine.arcade-90s .arcade-crt-glass::after {
    animation: none !important;
  }
}