/* GAMING modal theme — near-black, neon cyan, mono, subtle grid + scanlines. */
.modal-panel[data-theme="gaming"] {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 240, 255, 0.025) 0px,
      rgba(0, 240, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      180deg,
      #0b0f16 0%,
      #07090e 100%
    );
  color: #d8e4ec;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.08),
    0 30px 80px -20px rgba(0, 240, 255, 0.18),
    0 30px 80px -20px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}

/* faint grid overlay */
.modal-panel[data-theme="gaming"]::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mix-blend-mode: screen;
}
.modal-panel[data-theme="gaming"] > * { position: relative; }

.modal-panel[data-theme="gaming"] .modal-close {
  color: #00f0ff;
  font-family: var(--font-mono);
  opacity: 0.7;
}
.modal-panel[data-theme="gaming"] .modal-close:hover { opacity: 1; }

.modal-panel[data-theme="gaming"] .modal-content h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #00f0ff;
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
}
.modal-panel[data-theme="gaming"] .modal-content .m-tagline {
  font-family: var(--font-mono);
  color: #6cf;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.75rem;
  border-left: 2px solid #00f0ff;
  padding-left: 0.75rem;
  margin-bottom: 2rem;
}
.modal-panel[data-theme="gaming"] .modal-content .m-text {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
  color: #c0d4dc;
}
.modal-panel[data-theme="gaming"] .modal-content .m-text code {
  background: rgba(0, 240, 255, 0.08);
  color: #00f0ff;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}
.modal-panel[data-theme="gaming"] .modal-content .m-stats {
  border-top: 1px dashed rgba(0, 240, 255, 0.25);
}
.modal-panel[data-theme="gaming"] .modal-content .m-stat-label {
  font-family: var(--font-mono);
  color: #6cf;
}
.modal-panel[data-theme="gaming"] .modal-content .m-stat-value {
  font-family: var(--font-mono);
  color: #00f0ff;
  font-weight: 600;
}

/* gaming pager — dark, neon, page index in mono on the side */
.modal-panel[data-theme="gaming"][data-mode="pager"] {
  background: #07090e;
}
.modal-panel[data-theme="gaming"] .modal-page {
  background:
    repeating-linear-gradient(0deg, rgba(0,240,255,0.025) 0, rgba(0,240,255,0.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #0b0f16 0%, #07090e 100%);
}
/* re-apply faint grid on the active page only */
.modal-panel[data-theme="gaming"] .modal-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mix-blend-mode: screen;
}
.modal-panel[data-theme="gaming"] .modal-page-inner h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #00f0ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
}
.modal-panel[data-theme="gaming"] .modal-pager-dots {
  background: linear-gradient(to bottom, transparent, rgba(7,9,14,0.95) 35%);
  color: #00f0ff;
  border-top: 1px dashed rgba(0,240,255,0.2);
}
.modal-panel[data-theme="gaming"] .pager-dot-mark {
  background: rgba(0,240,255,0.5);
  box-shadow: 0 0 8px rgba(0,240,255,0.3);
}
.modal-panel[data-theme="gaming"] .pager-dot.active .pager-dot-mark {
  background: #00f0ff;
  box-shadow: 0 0 12px rgba(0,240,255,0.7);
}
.modal-panel[data-theme="gaming"] .modal-pager-hint {
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,0.5);
}
.modal-panel[data-theme="gaming"] .modal-close {
  background: rgba(7,9,14,0.6);
  border: 1px solid rgba(0,240,255,0.2);
}