/**
 * Old CRT television — phosphor green / amber typography on tube-dark panels.
 * Loaded after arcade-cabinet-90s.css to fix washed-out side UI.
 */

:root {
  --crt-tube-bg: #060c06;
  --crt-tube-mid: #0a140a;
  --crt-tube-edge: rgba(142, 252, 106, 0.22);
  --crt-phosphor: #8efc6a;
  --crt-phosphor-bright: #c8ffaa;
  --crt-phosphor-dim: #5a9c48;
  --crt-amber: #ffc861;
  --crt-amber-hot: #ffe49a;
  --crt-cyan: #6ef0ff;
  --crt-warm: #fff0c8;
  --crt-chroma: 1px 0 0 rgba(255, 55, 95, 0.2), -1px 0 0 rgba(55, 175, 255, 0.16);
  --crt-glow-green: 0 0 6px rgba(142, 252, 106, 0.7), 0 0 14px rgba(142, 252, 106, 0.32);
  --crt-glow-amber: 0 0 8px rgba(255, 200, 97, 0.75), 0 0 16px rgba(255, 200, 97, 0.32);
  --crt-glow-cyan: 0 0 8px rgba(110, 240, 255, 0.55), 0 0 14px rgba(110, 240, 255, 0.22);
  --crt-scanlines: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
}

/* ── CRT tube panels (side monitors) ── */
.arcade-machine.arcade-90s .arcade-score-box,
.arcade-machine.arcade-90s .kintara-panel {
  position: relative;
  overflow: hidden;
  color: var(--crt-phosphor) !important;
  background:
    var(--crt-scanlines),
    radial-gradient(ellipse at 50% 28%, rgba(142, 252, 106, 0.06) 0%, transparent 58%),
    linear-gradient(180deg, var(--crt-tube-mid) 0%, var(--crt-tube-bg) 100%) !important;
  border: 2px solid var(--crt-tube-edge) !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.72),
    inset 0 2px 0 rgba(142, 252, 106, 0.08),
    0 0 12px rgba(142, 252, 106, 0.06) !important;
}

.arcade-machine.arcade-90s .arcade-score-box::after,
.arcade-machine.arcade-90s .kintara-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.5) 100%);
}

/* ── Labels & titles — amber phosphor ── */
.arcade-machine.arcade-90s .arcade-score-label,
.arcade-machine.arcade-90s .panel-title,
.arcade-machine.arcade-90s .arcade-header-title,
.arcade-machine.arcade-90s .dex-dpad-label {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-chroma), var(--crt-glow-amber) !important;
  font-family: var(--font-pixel) !important;
  letter-spacing: 0.12em !important;
}

.arcade-machine.arcade-90s .arcade-score-val {
  color: var(--crt-phosphor-bright) !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  text-shadow: var(--crt-chroma), var(--crt-glow-green), 0 0 22px rgba(142, 252, 106, 0.35) !important;
}

/* ── Quest & team (left) ── */
.arcade-machine.arcade-90s .arcade-left .quest-name,
.arcade-machine.arcade-90s .arcade-left .battle-team-slot-name,
.arcade-machine.arcade-90s .arcade-left .battle-team-add-label {
  color: var(--crt-phosphor-bright) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: var(--crt-chroma), var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .arcade-left .quest-desc,
.arcade-machine.arcade-90s .arcade-left .battle-team-slot-lv,
.arcade-machine.arcade-90s .arcade-left .battle-team-stat-val,
.arcade-machine.arcade-90s .arcade-left .battle-team-hint {
  color: var(--crt-warm) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 8px rgba(255, 240, 200, 0.22) !important;
}

.arcade-machine.arcade-90s .arcade-left .battle-team-stat-label,
.arcade-machine.arcade-90s .arcade-left .battle-subtitle {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .arcade-left .battle-team-slot {
  border-color: rgba(142, 252, 106, 0.2) !important;
  background: rgba(0, 0, 0, 0.42) !important;
}

.arcade-machine.arcade-90s .arcade-left .battle-team-slot.active {
  border-color: var(--crt-amber) !important;
  box-shadow: 0 0 12px rgba(255, 200, 97, 0.28) !important;
}

.arcade-machine.arcade-90s .arcade-left .battle-team-slot-num {
  color: var(--crt-cyan) !important;
  text-shadow: var(--crt-glow-cyan) !important;
}

.arcade-machine.arcade-90s .arcade-left .quest-fill {
  background: linear-gradient(90deg, var(--crt-phosphor-dim), var(--crt-phosphor)) !important;
  box-shadow: 0 0 10px rgba(142, 252, 106, 0.45) !important;
}

/* ── World chat (left) ── */
.arcade-machine.arcade-90s .arcade-left .global-chat .chat-header {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-glow-amber) !important;
  font-family: var(--font-pixel) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-name {
  color: var(--crt-cyan) !important;
  font-family: var(--font-mono) !important;
  text-shadow: var(--crt-glow-cyan) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-line,
.arcade-machine.arcade-90s .arcade-left .global-chat .chat-text {
  color: var(--crt-phosphor) !important;
  font-family: var(--font-mono) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-line.self .chat-name {
  color: var(--crt-amber-hot) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-form input {
  color: var(--crt-phosphor-bright) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(142, 252, 106, 0.28) !important;
  font-family: var(--font-mono) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-form input::placeholder {
  color: var(--crt-phosphor-dim) !important;
}

.arcade-machine.arcade-90s .arcade-left .global-chat .chat-send-btn {
  color: var(--crt-tube-bg) !important;
  background: linear-gradient(180deg, var(--crt-phosphor-bright), var(--crt-phosphor-dim)) !important;
  border-color: var(--crt-phosphor) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: none !important;
}

/* ── Ranking (right) ── */
.arcade-machine.arcade-90s .arcade-right .hud-lb-self {
  color: var(--crt-warm) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 8px rgba(255, 240, 200, 0.2) !important;
}

.arcade-machine.arcade-90s .arcade-right .hud-lb-self.has-rank {
  color: var(--crt-amber-hot) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .hud-lb-rank {
  color: var(--crt-cyan) !important;
  text-shadow: var(--crt-glow-cyan) !important;
}

.arcade-machine.arcade-90s .hud-lb-pts {
  color: var(--crt-phosphor-bright) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .hud-lb-row {
  color: var(--crt-phosphor) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  font-family: var(--font-mono) !important;
}

.arcade-machine.arcade-90s .hud-lb-row.lb-me {
  color: var(--crt-amber-hot) !important;
  border-color: rgba(255, 200, 97, 0.38) !important;
  background: rgba(255, 200, 97, 0.07) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .hud-lb-name .lb-trainer {
  font-family: var(--font-mono) !important;
  color: var(--crt-warm) !important;
}

.arcade-machine.arcade-90s .quality-btn {
  color: var(--crt-phosphor) !important;
  border-color: rgba(142, 252, 106, 0.22) !important;
  background: rgba(0, 0, 0, 0.42) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .quality-btn.active {
  color: var(--crt-amber-hot) !important;
  border-color: var(--crt-amber) !important;
  background: rgba(255, 200, 97, 0.1) !important;
  box-shadow: 0 0 10px rgba(255, 200, 97, 0.25) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .hud-lb-more {
  color: var(--crt-cyan) !important;
  border-color: rgba(110, 240, 255, 0.35) !important;
  background: rgba(110, 240, 255, 0.08) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: var(--crt-glow-cyan) !important;
}

/* ── In-game HUD bar (top of CRT) ── */
.arcade-machine.arcade-90s .hud-top {
  background:
    var(--crt-scanlines),
    linear-gradient(180deg, #142414 0%, #0a160a 100%) !important;
  border-color: rgba(142, 252, 106, 0.32) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45), 0 0 10px rgba(142, 252, 106, 0.08) !important;
}

.arcade-machine.arcade-90s .hud-brand,
.arcade-machine.arcade-90s .hud-zone,
.arcade-machine.arcade-90s .hud-stats,
.arcade-machine.arcade-90s .hud-stats .gold,
.arcade-machine.arcade-90s .hud-stats .dex,
.arcade-machine.arcade-90s .hud-stats .online {
  color: var(--crt-phosphor) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: var(--crt-chroma), var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .hud-brand em {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .hud-time {
  color: var(--crt-warm) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(142, 252, 106, 0.25) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 6px rgba(255, 240, 200, 0.25) !important;
}

.arcade-machine.arcade-90s .hood-label {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-chroma), var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .hood-online-text {
  color: var(--crt-warm) !important;
  font-family: var(--font-pixel) !important;
  text-shadow: 0 0 6px rgba(255, 240, 200, 0.2) !important;
}

.arcade-machine.arcade-90s .hood-online-text strong {
  color: var(--crt-phosphor-bright) !important;
  text-shadow: var(--crt-glow-green) !important;
}

/* ── Dialog — TV subtitle crawl ── */
.arcade-machine.arcade-90s .poke-dialog .dialog-inner {
  background:
    var(--crt-scanlines),
    linear-gradient(180deg, #101a10 0%, #060c06 100%) !important;
  border: 3px solid rgba(142, 252, 106, 0.35) !important;
  outline: 2px solid var(--crt-amber) !important;
  color: var(--crt-phosphor) !important;
  box-shadow:
    0 0 24px rgba(142, 252, 106, 0.12),
    inset 0 0 36px rgba(0, 0, 0, 0.55) !important;
}

.arcade-machine.arcade-90s .dialog-body,
.arcade-machine.arcade-90s #dialog-text {
  color: var(--crt-warm) !important;
  text-shadow: var(--crt-chroma), 0 0 10px rgba(255, 240, 200, 0.28) !important;
}

.arcade-machine.arcade-90s .dialog-speaker {
  color: var(--crt-cyan) !important;
  text-shadow: var(--crt-glow-cyan) !important;
}

.arcade-machine.arcade-90s .dialog-hint,
.arcade-machine.arcade-90s .dialog-prompt-icon {
  color: var(--crt-amber) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: var(--crt-amber) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

/* ── Stronger CRT on game picture ── */
.arcade-machine.arcade-90s .arcade-crt-glass::after {
  opacity: 0.38 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 4px
  ) !important;
}

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

.arcade-machine.arcade-90s .arcade-crt-filter::after {
  opacity: 0.48 !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(142, 252, 106, 0.04) 0%, transparent 58%),
    linear-gradient(90deg, rgba(255, 0, 60, 0.018) 0%, transparent 35%, transparent 65%, rgba(0, 90, 255, 0.018) 100%) !important;
}

.arcade-machine.arcade-90s .arcade-crt-glass {
  border-color: #1a2818 !important;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(142, 252, 106, 0.04),
    0 0 18px rgba(142, 252, 106, 0.08) !important;
}

/* ── Control deck readout ── */
.arcade-machine.arcade-90s .dex-status-text,
.arcade-machine.arcade-90s .cp-credit-val {
  color: var(--crt-phosphor-bright) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .cp-credit-label,
.arcade-machine.arcade-90s .cp-free-play {
  color: var(--crt-amber) !important;
  text-shadow: var(--crt-glow-amber) !important;
}

.arcade-machine.arcade-90s .dex-hint-bar {
  background:
    var(--crt-scanlines),
    linear-gradient(180deg, var(--crt-tube-mid), var(--crt-tube-bg)) !important;
  border-color: var(--crt-tube-edge) !important;
  color: var(--crt-phosphor) !important;
  font-family: var(--font-mono) !important;
  text-shadow: var(--crt-glow-green) !important;
}

.arcade-machine.arcade-90s .dex-hint-bar strong {
  color: var(--crt-amber-hot) !important;
  text-shadow: var(--crt-glow-amber) !important;
}
