/**
 * Persephone Casino // Equilibrium Dystopian Luxury Olympus Design System
 * Architecture: Monolithic Alabaster & Obsidian Brutalism with Visceral Ruby Accents
 */

:root {
  /* Surface & Canvas Tokens */
  --pc-alabaster: #F8F9FA;
  --pc-obsidian: #111317;
  --pc-obsidian-deep: #0C0E12;
  --pc-obsidian-low: #1A1C20;
  --pc-obsidian-container: #1E2024;
  --pc-obsidian-high: #282A2E;
  --pc-obsidian-highest: #333539;
  
  /* Specular Chrome & Platinum Hairlines */
  --pc-chrome: #E2E8F0;
  --pc-platinum: #2D3139;
  --pc-platinum-muted: #6E727B;
  --pc-platinum-dim: #C1C7CF;
  
  /* Tetragrammaton Ruby Crimson Accents */
  --pc-ruby: #DC2626;
  --pc-ruby-bright: #EF4444;
  --pc-ruby-deep: #991B1B;
  --pc-ruby-dark: #450A0A;
  --pc-ruby-glow: 0 0 15px rgba(220, 38, 38, 0.35);
  --pc-ruby-glow-lg: 0 0 25px rgba(220, 38, 38, 0.5);

  /* Typographic Stacks */
  --pc-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --pc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pc-font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   STRICT 0PX BORDER RADIUS ENFORCEMENT
   In accordance with Equilibrium brutalist architecture: ZERO rounded corners.
   ========================================================================== */
*, *::before, *::after {
  border-radius: 0px !important;
}

html, body {
  background-color: var(--pc-obsidian);
  color: var(--pc-chrome);
  font-family: var(--pc-font-body);
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Monolithic Symmetrical Architectural Container */
.pc-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  border-left: 1px solid var(--pc-platinum);
  border-right: 1px solid var(--pc-platinum);
}

@media (min-width: 640px) {
  .pc-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .pc-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ==========================================================================
   45-DEGREE CHAMFERED POLYGON CUTOUTS
   ========================================================================== */
.chamfer-btn, .btn-chamfer {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.clip-corner-sm {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.clip-corner-tag {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* ==========================================================================
   CRT SCANLINE OVERLAY & PULSING DIODES
   ========================================================================== */
.crt-grid {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  transform: translateZ(0);
  pointer-events: none;
}

@keyframes pulse-diode {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px #dc2626;
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 2px #dc2626;
  }
}

.animate-diode {
  animation: pulse-diode 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tetragrammaton Crest Diamond SVG */
.tetragrammaton-seal {
  display: inline-block;
  vertical-align: middle;
}

/* Brand Monolith Insignia */
.brand-monolith {
  display: flex;
  flex-direction: column;
}

.brand-monolith .crest {
  font-family: var(--pc-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pc-alabaster);
}

.brand-monolith .sub {
  font-family: var(--pc-font-display);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pc-ruby);
}

/* Visceral Ruby Hover States */
.ruby-hover-glow {
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.ruby-hover-glow:hover {
  color: #DC2626;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
}

/* ==========================================================================
   MOBILE TACTICAL HUD DOCK (b6cf8599...)
   ========================================================================== */
#mobile-tactical-hud {
  display: none;
}

@media (max-width: 768px) {
  #mobile-tactical-hud {
    display: flex;
  }
}

.tactical-tab-btn {
  min-height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   EMERGENCY PANIC CLOAK OVERLAY
   ========================================================================== */
#cloak-overlay {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  z-index: 99999;
  display: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--pc-obsidian-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--pc-platinum);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pc-ruby);
}