/* ==========================================================================
   THE AUSTRALIAN CASINO REVIEWER // AUSTRALIAN GAMING INDEX
   Dark Luxury Design System — Monte Carlo / VIP Aesthetic
   Obsidian (#0B0A09) • Onyx (#141210) • 24k Brass (#D4AF37) • Crimson (#C81E1E)
   Baize Emerald (#10B981) • Alabaster (#F5F2EB) • Pewter (#9A9286)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & ROOT VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --color-obsidian: #0b0a09;
  --color-onyx: #141210;
  --color-felt: #1a1614;
  --color-bronze: #28231d;
  --color-bronze-light: #3a3229;
  --color-alabaster: #f5f2eb;
  --color-pewter: #9a9286;
  --color-brass: #d4af37;
  --color-brass-light: #f3e5ab;
  --color-brass-dark: #8c6e14;
  --color-crimson: #c81e1e;
  --color-crimson-bright: #dc2626;
  --color-emerald: #10b981;
  --color-emerald-deep: #064e3b;

  --font-serif: "Cinzel", "Playfair Display", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-apple-spring: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-out-apple: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-apple: cubic-bezier(0.77, 0, 0.175, 1);

  /* Safe Area Inset Tokens (iOS Notch / Dynamic Island / Home Indicator) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS & MOBILE-NATIVE HARDENING
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  background-color: var(--color-obsidian);
  color: var(--color-alabaster);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
  background-color: var(--color-obsidian);
  color: var(--color-alabaster);
  overflow-x: hidden;
  position: relative;
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* Sticky top masthead safe area accommodation */
header.sticky {
  padding-top: var(--sat);
}

/* Tabular figures for telemetry & numerical alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Selection aesthetics — 24k Royal Gold */
::selection {
  background-color: #d4af37;
  color: #0b0a09;
}

/* Tasteful Gold & Brass Accent Utilities */
.border-brass-delicate {
  border-color: rgba(212, 175, 55, 0.35);
}

.hover-brass-subtle:hover {
  border-color: rgba(212, 175, 55, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.22) !important;
}

.text-brass-accent {
  color: #d4af37;
}

.bg-brass-chip {
  background-color: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f3e5ab;
}

/* --------------------------------------------------------------------------
   3. ARCHITECTURAL PATTERNS & LUXURY SURFACES
   -------------------------------------------------------------------------- */
/* Subtle Architectural Grid Lines - Milled Bronze */
.architectural-grid {
  background-size: 56px 56px;
  background-image: 
    linear-gradient(to right, rgba(212, 175, 55, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.04) 1px, transparent 1px);
}

/* Subtle Film Grain Texture Overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: radial-gradient(rgba(245, 242, 235, 0.8) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Milled Brass Border Hairline Surface */
.ledger-surface {
  background-color: var(--color-onyx);
  border: 1px solid var(--color-bronze);
  position: relative;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* --------------------------------------------------------------------------
   4. HARDWARE BEZEL DETAILS (SCREW HEADS & CORNER BRACKETS)
   -------------------------------------------------------------------------- */
/* Recessed Screw Head Accent */
.screw-head {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #42382c 0%, #1f1b16 70%, #0d0b09 100%);
  border: 1px solid #5a4b36;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

.screw-head::after {
  content: "";
  display: block;
  width: 5px;
  height: 1px;
  background-color: #7a6649;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.8);
  transform: rotate(45deg);
}

.screw-tl { top: 7px; left: 7px; }
.screw-tr { top: 7px; right: 7px; }
.screw-bl { bottom: 7px; left: 7px; }
.screw-br { bottom: 7px; right: 7px; }

/* Milled Brass Corner Brackets */
.corner-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-color: rgba(212, 175, 55, 0.5);
  z-index: 3;
}

.corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

/* Live LED Ticker Strip on Cabinet Bezel */
.led-ticker-container {
  overflow: hidden;
  background: #080706;
  border-bottom: 1px solid #28231d;
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.led-ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: ledTickerScroll 36s linear infinite;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass-light);
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
}

@keyframes ledTickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   5. TACTILE MECHANICAL BUTTONS & SWITCHES
   -------------------------------------------------------------------------- */
.btn-mechanical {
  background: linear-gradient(180deg, #e5c158 0%, #c59b27 100%);
  color: var(--color-obsidian);
  border: 1px solid #f3e5ab;
  box-shadow: 0 4px 0 #785c12, 0 8px 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s var(--ease-out-apple), box-shadow 0.1s var(--ease-out-apple), filter 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-mechanical:active,
.btn-mechanical.depressed {
  transform: scale(0.97) translateY(2px) !important;
  box-shadow: 0 1px 0 #785c12, 0 3px 10px rgba(0, 0, 0, 0.6);
}

.btn-lever {
  background: linear-gradient(180deg, #e5c158 0%, #c59b27 100%);
  color: var(--color-obsidian);
  border: 1px solid #f9edd0;
  box-shadow: 0 4px 0 #856417, 0 8px 24px rgba(212, 175, 55, 0.35);
  transition: transform 0.1s var(--ease-out-apple), box-shadow 0.1s var(--ease-out-apple), filter 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-lever:active,
.btn-lever.depressed {
  transform: scale(0.97) translateY(2px) !important;
  box-shadow: 0 1px 0 #856417, 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Symbol Keycap Button */
.symbol-keycap {
  background: var(--color-onyx);
  border: 1px solid var(--color-bronze);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 0 #050504;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.1s var(--ease-out-apple), box-shadow 0.14s ease;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.symbol-keycap:active {
  transform: scale(0.96) translateY(1px);
}

.symbol-keycap.active {
  background: #201c15;
  border-color: #d4af37;
  color: var(--color-alabaster);
  box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.25), 0 2px 0 #050504;
}

/* Global button press responsiveness & tactile feedback (Emil Kowalski / Apple Design) */
button,
a.btn-mechanical,
a.btn-lever,
.symbol-keycap,
.ledger-filter-btn,
[role="button"],
input[type="range"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:active:not(:disabled),
a.btn-mechanical:active,
a.btn-lever:active,
.symbol-keycap:active,
.ledger-filter-btn:active {
  transform: scale(0.97) translateY(1px) !important;
  transition: transform 60ms var(--ease-out-apple) !important;
}

@media (hover: hover) and (pointer: fine) {
  .ledger-surface:hover {
    border-color: rgba(212, 175, 55, 0.45);
  }
  .btn-mechanical:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 0 #785c12, 0 10px 24px rgba(0, 0, 0, 0.7);
  }
  .btn-lever:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 0 #856417, 0 10px 28px rgba(212, 175, 55, 0.45);
  }
  .symbol-keycap:hover {
    border-color: var(--color-brass);
    color: var(--color-alabaster);
  }
  .ledger-filter-btn:not(.active):hover {
    border-color: rgba(212, 175, 55, 0.6);
    color: var(--color-alabaster);
  }
}

/* --------------------------------------------------------------------------
   6. 3D PERSPECTIVE CARD TILT & CURSOR-TRACKED SPECULAR GLARE
   -------------------------------------------------------------------------- */
.casino-card {
  position: relative;
  background-color: var(--color-onyx);
  border: 1px solid var(--color-bronze);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.28s var(--ease-out-spring), transform 0.28s var(--ease-out-spring), box-shadow 0.28s var(--ease-out-spring);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Specular Warm Brass Glare Border Highlight */
.casino-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212, 175, 55, 0.42),
    rgba(212, 175, 55, 0.12) 50%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .casino-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.8), 0 0 24px rgba(212, 175, 55, 0.08);
  }
  .casino-card:hover::before {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   7. 12-POINT AUDIT SCORECARD DRAWER & ACCORDIONS
   -------------------------------------------------------------------------- */
.audit-drawer-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height 0.4s var(--ease-out-spring), opacity 0.3s ease, transform 0.35s var(--ease-out-spring);
}

.audit-drawer-content.open {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}

/* Audit Score Gauge Bar */
.audit-score-bar-bg {
  height: 6px;
  background: var(--color-bronze);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.audit-score-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d4af37 0%, #10b981 100%);
  border-radius: 3px;
  transition: width 0.8s var(--ease-out-spring);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

/* FAQ Accordion Transitions */
.faq-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out-spring), opacity 0.25s ease, padding 0.3s ease;
}

.faq-body.open {
  max-height: 380px;
  opacity: 1;
}

.faq-icon {
  display: inline-block;
  transition: transform 0.3s var(--ease-out-spring);
}

.faq-icon.open {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   8. BRASS RANGE SLIDER FOR DEPOSIT CALCULATOR
   -------------------------------------------------------------------------- */
input[type="range"].brass-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-bronze);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

input[type="range"].brass-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3e5ab 0%, #d4af37 60%, #8c6e14 100%);
  border: 2px solid var(--color-alabaster);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.5);
  transition: transform 0.12s ease;
}

input[type="range"].brass-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

input[type="range"].brass-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3e5ab 0%, #d4af37 60%, #8c6e14 100%);
  border: 2px solid var(--color-alabaster);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.5);
}

/* --------------------------------------------------------------------------
   9. 3D STAGE & MOBILE TOUCH ERGONOMICS
   -------------------------------------------------------------------------- */
#slot-canvas-stage {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  background: radial-gradient(ellipse at 50% 55%, #1c1814 0%, #110f0d 55%, #080706 100%);
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
}

#slot-canvas-stage:active {
  cursor: grabbing;
}

#slot-webgl-canvas {
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
  will-change: transform;
}

/* Prevent iOS Safari 16px auto-zoom */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Sticky Bottom Mobile Quick-Spin Bar */
.mobile-quick-spin-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background-color: rgba(11, 10, 9, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-bronze);
  padding: 0.65rem max(1rem, var(--sal)) calc(0.65rem + var(--sab)) max(1rem, var(--sar));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.75);
}

#compliance-consent-bar {
  padding-bottom: max(0.75rem, calc(0.75rem + var(--sab)));
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 767.98px) {
  #compliance-consent-bar {
    bottom: calc(4.15rem + var(--sab));
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  }
}

/* --------------------------------------------------------------------------
   10. MODAL DIALOGS & ACCESSIBILITY (APPLE-GRADE BOTTOM SHEET ON MOBILE)
   -------------------------------------------------------------------------- */
.sheet-handle {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out-spring);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background-color: var(--color-onyx);
  border: 1px solid var(--color-brass);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95), 0 0 35px rgba(212, 175, 55, 0.15);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.28s var(--ease-out-spring);
  width: 100%;
}

.modal-overlay.open .modal-box {
  transform: scale(1) translateY(0);
}

/* Apple-style Bottom Sheet on Mobile & Compact Devices (< 1024px) */
@media (max-width: 1024px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .sheet-handle {
    display: block !important;
    width: 44px;
    height: 4.5px;
    background: rgba(245, 242, 235, 0.4);
    border-radius: 9999px;
    margin: 8px auto 14px;
  }

  .modal-box {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 24px 24px 0 0 !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    max-height: 88svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(2.25rem, calc(1.75rem + var(--sab))) !important;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }

  .modal-overlay.open .modal-box {
    transform: translateY(0) !important;
  }
}

/* --------------------------------------------------------------------------
   11. CUSTOM SCROLLBARS
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-bronze);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brass);
}

/* --------------------------------------------------------------------------
   12. ACCESSIBILITY / REDUCED MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .led-ticker-text {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. MOBILE OFF-CANVAS NAVIGATION DRAWER & HAMBURGER (< 1024px)
   -------------------------------------------------------------------------- */
#mobile-nav-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#mobile-nav-drawer {
  will-change: transform;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.9);
}

#mobile-menu-btn:active {
  transform: scale(0.96);
}