/**
 * Gaming UI - Unified Entry Stylesheet
 * Laghaim Dragon Realms
 *
 * Single entry point for all gaming theme styles.
 * Import order: tokens -> base -> components -> utilities
 *
 * Usage:
 * <link rel="stylesheet" href="assets/css/gaming.css">
 *
 * For Tailwind integration: Include this AFTER Tailwind CDN
 * The CSS variables defined here can be used in Tailwind config
 */

/* ============================================
   CSS LAYER DEFINITIONS
   Order matters: later layers override earlier ones
   ============================================ */
@layer reset, tokens, base, components, utilities;

/* ============================================
   LAYER: Reset - Basic resets and normalizations
   ============================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    line-height: 1.6;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  button, input, select, textarea {
    font: inherit;
  }

  h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
  }

  /* Remove default button styles */
  button {
    background: none;
    border: none;
    cursor: pointer;
  }

  /* Remove list styles */
  ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Links inherit color */
  a {
    color: inherit;
    text-decoration: none;
  }
}

/* ============================================
   LAYER: Tokens - Design tokens as CSS variables
   ============================================ */
@layer tokens {
  :root {
    /* === Primary Colors === */
    --g-primary: #00E5FF;
    --g-primary-rgb: 0, 229, 255;
    --g-primary-dark: #00B8D4;
    --g-primary-light: #4DFFFF;

    /* === Accent Colors === */
    --g-accent: #B400FF;
    --g-accent-rgb: 180, 0, 255;
    --g-accent-dark: #9000CC;
    --g-accent-light: #D24DFF;

    /* === Background Colors === */
    --g-bg-darkest: #070A12;
    --g-bg-dark: #0B1220;
    --g-bg-medium: #0F1A2E;
    --g-bg-light: #162236;
    --g-bg-lighter: #1E2D47;

    /* === Gradient Backgrounds === */
    --g-gradient-bg: linear-gradient(135deg, #070A12 0%, #0B1220 50%, #0F1A2E 100%);
    --g-gradient-primary: linear-gradient(135deg, var(--g-primary) 0%, var(--g-accent) 100%);
    --g-gradient-glow: linear-gradient(135deg, rgba(0, 229, 255, 0.2) 0%, rgba(180, 0, 255, 0.2) 100%);
    --g-gradient-card: linear-gradient(145deg, rgba(15, 26, 46, 0.8) 0%, rgba(11, 18, 32, 0.9) 100%);

    /* === Text Colors === */
    --g-text-primary: #FFFFFF;
    --g-text-secondary: #A8B2C1;
    --g-text-muted: #6B7A8F;
    --g-text-accent: var(--g-primary);

    /* === Status Colors === */
    --g-success: #00FF88;
    --g-success-rgb: 0, 255, 136;
    --g-warning: #FFB800;
    --g-warning-rgb: 255, 184, 0;
    --g-error: #FF3366;
    --g-error-rgb: 255, 51, 102;
    --g-info: var(--g-primary);

    /* === Border & Lines === */
    --g-border-color: rgba(0, 229, 255, 0.2);
    --g-border-glow: rgba(0, 229, 255, 0.5);
    --g-border-accent: rgba(180, 0, 255, 0.3);

    /* === Glassmorphism === */
    --g-glass-bg: rgba(15, 26, 46, 0.7);
    --g-glass-border: rgba(255, 255, 255, 0.08);
    --g-glass-blur: 12px;

    /* === Glow Effects (reduced for accessibility) === */
    --g-glow-primary: 0 0 15px rgba(0, 229, 255, 0.35);
    --g-glow-accent: 0 0 15px rgba(180, 0, 255, 0.35);
    --g-glow-success: 0 0 15px rgba(0, 255, 136, 0.35);
    --g-glow-error: 0 0 15px rgba(255, 51, 102, 0.35);
    --g-glow-text: 0 0 8px rgba(0, 229, 255, 0.5);

    /* === Typography === */
    --g-font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
    --g-font-body: 'Rajdhani', 'Kanit', system-ui, sans-serif;
    --g-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes */
    --g-text-xs: 0.75rem;
    --g-text-sm: 0.875rem;
    --g-text-base: 1rem;
    --g-text-lg: 1.125rem;
    --g-text-xl: 1.25rem;
    --g-text-2xl: 1.5rem;
    --g-text-3xl: 1.875rem;
    --g-text-4xl: 2.25rem;
    --g-text-5xl: 3rem;

    /* Font Weights */
    --g-font-light: 300;
    --g-font-normal: 400;
    --g-font-medium: 500;
    --g-font-semibold: 600;
    --g-font-bold: 700;

    /* === Spacing === */
    --g-space-1: 0.25rem;
    --g-space-2: 0.5rem;
    --g-space-3: 0.75rem;
    --g-space-4: 1rem;
    --g-space-5: 1.25rem;
    --g-space-6: 1.5rem;
    --g-space-8: 2rem;
    --g-space-10: 2.5rem;
    --g-space-12: 3rem;

    /* === Border Radius === */
    --g-radius-sm: 4px;
    --g-radius-md: 8px;
    --g-radius-lg: 12px;
    --g-radius-xl: 16px;
    --g-radius-2xl: 24px;
    --g-radius-full: 9999px;

    /* === Transitions === */
    --g-transition-fast: 150ms ease;
    --g-transition-normal: 250ms ease;
    --g-transition-slow: 400ms ease;
    --g-transition-glow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-Index Scale === */
    --g-z-dropdown: 100;
    --g-z-sticky: 200;
    --g-z-modal-backdrop: 300;
    --g-z-modal: 400;
    --g-z-tooltip: 500;
    --g-z-toast: 600;

    /* === Shadows === */
    --g-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --g-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --g-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --g-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --g-shadow-glow: 0 0 40px rgba(0, 229, 255, 0.12);
    --g-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

    /* === Focus Ring (Accessibility) === */
    --g-focus-ring: 0 0 0 3px rgba(0, 229, 255, 0.5);
    --g-focus-ring-offset: 2px;
  }

  /* High Contrast Mode adjustments */
  @media (prefers-contrast: high) {
    :root {
      --g-text-secondary: #E0E0E0;
      --g-text-muted: #B0B0B0;
      --g-border-color: rgba(0, 229, 255, 0.5);
      --g-glass-border: rgba(255, 255, 255, 0.2);
    }
  }

  /* Dark mode is default, but support light mode if needed */
  @media (prefers-color-scheme: light) {
    :root.auto-theme {
      --g-bg-darkest: #E8EEF5;
      --g-bg-dark: #DDE4ED;
      --g-bg-medium: #D0D9E5;
      --g-bg-light: #C4CFE0;
      --g-text-primary: #0F1A2E;
      --g-text-secondary: #3A4A5C;
      --g-text-muted: #5C6C7E;
    }
  }
}

/* ============================================
   LAYER: Base - Base element styles
   ============================================ */
@layer base {
  /* Import Gaming Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

  /* Gaming Theme Body */
  body.gaming-theme,
  .gaming-theme {
    background: var(--g-gradient-bg);
    color: var(--g-text-primary);
    font-family: var(--g-font-body);
    font-weight: var(--g-font-medium);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar Styling */
  .gaming-theme::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .gaming-theme::-webkit-scrollbar-track {
    background: var(--g-bg-darkest);
  }

  .gaming-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--g-primary) 0%, var(--g-accent) 100%);
    border-radius: var(--g-radius-full);
  }

  .gaming-theme::-webkit-scrollbar-thumb:hover {
    background: var(--g-primary);
  }

  /* Firefox Scrollbar */
  .gaming-theme {
    scrollbar-width: thin;
    scrollbar-color: var(--g-primary) var(--g-bg-darkest);
  }

  /* Selection Style */
  .gaming-theme ::selection {
    background: rgba(0, 229, 255, 0.3);
    color: var(--g-text-primary);
  }

  /* Typography */
  .gaming-theme h1,
  .gaming-theme h2,
  .gaming-theme h3,
  .gaming-theme h4,
  .gaming-theme h5,
  .gaming-theme h6 {
    font-family: var(--g-font-display);
    font-weight: var(--g-font-bold);
    color: var(--g-text-primary);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0 0 var(--g-space-4);
  }

  .gaming-theme h1 { font-size: var(--g-text-4xl); }
  .gaming-theme h2 { font-size: var(--g-text-3xl); }
  .gaming-theme h3 { font-size: var(--g-text-2xl); }
  .gaming-theme h4 { font-size: var(--g-text-xl); }
  .gaming-theme h5 { font-size: var(--g-text-lg); }
  .gaming-theme h6 { font-size: var(--g-text-base); }

  .gaming-theme p {
    margin: 0 0 var(--g-space-4);
    color: var(--g-text-secondary);
  }

  .gaming-theme a {
    color: var(--g-primary);
    text-decoration: none;
    transition: var(--g-transition-fast);
  }

  .gaming-theme a:hover {
    color: var(--g-primary-light);
    text-shadow: var(--g-glow-text);
  }

  /* Enhanced Focus States for Accessibility */
  .gaming-theme a:focus-visible,
  .gaming-theme button:focus-visible,
  .gaming-theme input:focus-visible,
  .gaming-theme select:focus-visible,
  .gaming-theme textarea:focus-visible,
  .gaming-theme [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--g-focus-ring);
  }

  /* Skip Link for Screen Readers */
  .gaming-theme .skip-link {
    position: absolute;
    top: -100%;
    left: var(--g-space-4);
    padding: var(--g-space-3) var(--g-space-4);
    background: var(--g-primary);
    color: var(--g-bg-darkest);
    font-weight: var(--g-font-bold);
    z-index: 9999;
    border-radius: var(--g-radius-md);
    transition: top var(--g-transition-fast);
  }

  .gaming-theme .skip-link:focus {
    top: var(--g-space-4);
  }

  /* Responsive Typography */
  @media (max-width: 768px) {
    :root {
      --g-text-4xl: 1.875rem;
      --g-text-3xl: 1.5rem;
      --g-text-2xl: 1.25rem;
    }
  }

  /* Reduced Motion - Accessibility */
  @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;
    }

    /* Disable particle effects */
    .g-particles,
    .particles,
    .particle {
      display: none !important;
    }

    /* Remove glow effects that can cause eye strain */
    .g-glow,
    .g-glow-accent,
    .g-animate-glowPulse {
      box-shadow: none !important;
    }
  }
}

/* ============================================
   LAYER: Components - UI Components
   ============================================ */
@layer components {
  /* === BUTTONS === */
  .g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-2);
    padding: var(--g-space-3) var(--g-space-6);
    font-family: var(--g-font-display);
    font-size: var(--g-text-sm);
    font-weight: var(--g-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--g-text-primary);
    background: transparent;
    border: 2px solid var(--g-border-color);
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: all var(--g-transition-glow);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    text-decoration: none;
  }

  .g-btn:hover {
    border-color: var(--g-primary);
    box-shadow: var(--g-glow-primary);
    color: var(--g-primary);
    transform: translateY(-2px);
  }

  .g-btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .g-btn:focus-visible {
    outline: none;
    box-shadow: var(--g-focus-ring), var(--g-glow-primary);
  }

  .g-btn:disabled,
  .g-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
  }

  /* Primary Button */
  .g-btn-primary {
    background: var(--g-primary);
    border-color: var(--g-primary);
    color: var(--g-bg-darkest);
  }

  .g-btn-primary:hover {
    background: var(--g-primary-light);
    border-color: var(--g-primary-light);
    box-shadow: var(--g-glow-primary), 0 0 30px rgba(0, 229, 255, 0.25);
    color: var(--g-bg-darkest);
  }

  .g-btn-primary:active {
    background: var(--g-primary-dark);
  }

  /* Accent Button */
  .g-btn-accent {
    background: var(--g-accent);
    border-color: var(--g-accent);
    color: var(--g-text-primary);
  }

  .g-btn-accent:hover {
    background: var(--g-accent-light);
    border-color: var(--g-accent-light);
    box-shadow: var(--g-glow-accent), 0 0 30px rgba(180, 0, 255, 0.25);
    color: var(--g-text-primary);
  }

  /* Success Button */
  .g-btn-success {
    background: var(--g-success);
    border-color: var(--g-success);
    color: var(--g-bg-darkest);
  }

  .g-btn-success:hover {
    box-shadow: var(--g-glow-success);
    color: var(--g-bg-darkest);
  }

  /* Danger Button */
  .g-btn-danger {
    background: var(--g-error);
    border-color: var(--g-error);
    color: var(--g-text-primary);
  }

  .g-btn-danger:hover {
    box-shadow: var(--g-glow-error);
    color: var(--g-text-primary);
  }

  /* Ghost Button */
  .g-btn-ghost {
    background: transparent;
    border-color: var(--g-primary);
    color: var(--g-primary);
  }

  .g-btn-ghost:hover {
    background: rgba(0, 229, 255, 0.1);
  }

  /* Glass Button */
  .g-btn-glass {
    background: var(--g-glass-bg);
    backdrop-filter: blur(var(--g-glass-blur));
    -webkit-backdrop-filter: blur(var(--g-glass-blur));
    border-color: var(--g-glass-border);
  }

  .g-btn-glass:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--g-primary);
  }

  /* Button Sizes */
  .g-btn-sm {
    padding: var(--g-space-2) var(--g-space-4);
    font-size: var(--g-text-xs);
    min-height: 36px;
  }

  .g-btn-lg {
    padding: var(--g-space-4) var(--g-space-8);
    font-size: var(--g-text-base);
    min-height: 52px;
  }

  .g-btn-icon {
    padding: var(--g-space-3);
    min-width: 44px;
  }

  .g-btn-block {
    display: flex;
    width: 100%;
  }

  /* Button Group */
  .g-btn-group {
    display: inline-flex;
  }

  .g-btn-group .g-btn {
    border-radius: 0;
  }

  .g-btn-group .g-btn:first-child {
    border-radius: var(--g-radius-md) 0 0 var(--g-radius-md);
  }

  .g-btn-group .g-btn:last-child {
    border-radius: 0 var(--g-radius-md) var(--g-radius-md) 0;
  }

  .g-btn-group .g-btn + .g-btn {
    margin-left: -2px;
  }

  /* === FORM INPUTS === */
  .g-form-group {
    margin-bottom: var(--g-space-5);
  }

  .g-label {
    display: block;
    margin-bottom: var(--g-space-2);
    font-family: var(--g-font-display);
    font-size: var(--g-text-sm);
    font-weight: var(--g-font-medium);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .g-input {
    display: block;
    width: 100%;
    padding: var(--g-space-3) var(--g-space-4);
    font-family: var(--g-font-body);
    font-size: var(--g-text-base);
    font-weight: var(--g-font-medium);
    color: var(--g-text-primary);
    background: var(--g-bg-medium);
    border: 2px solid var(--g-border-color);
    border-radius: var(--g-radius-md);
    transition: all var(--g-transition-fast);
    min-height: 48px;
  }

  .g-input::placeholder {
    color: var(--g-text-muted);
  }

  .g-input:hover {
    border-color: var(--g-border-glow);
  }

  .g-input:focus {
    outline: none;
    border-color: var(--g-primary);
    box-shadow: var(--g-glow-primary), inset 0 0 15px rgba(0, 229, 255, 0.03);
    background: var(--g-bg-light);
  }

  .g-input-success {
    border-color: var(--g-success) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
  }

  .g-input-error {
    border-color: var(--g-error) !important;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.15);
  }

  .g-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--g-bg-darkest);
  }

  .g-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .g-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--g-space-3) center;
    background-size: 20px;
    padding-right: var(--g-space-10);
    cursor: pointer;
  }

  .g-select option {
    background: var(--g-bg-dark);
    color: var(--g-text-primary);
  }

  /* Checkbox & Radio */
  .g-checkbox,
  .g-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-2);
    cursor: pointer;
    user-select: none;
  }

  .g-checkbox input,
  .g-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .g-checkbox-mark,
  .g-radio-mark {
    width: 22px;
    height: 22px;
    background: var(--g-bg-medium);
    border: 2px solid var(--g-border-color);
    transition: all var(--g-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .g-checkbox-mark {
    border-radius: var(--g-radius-sm);
  }

  .g-radio-mark {
    border-radius: 50%;
  }

  .g-checkbox input:focus-visible + .g-checkbox-mark,
  .g-radio input:focus-visible + .g-radio-mark {
    box-shadow: var(--g-focus-ring);
  }

  .g-checkbox input:checked + .g-checkbox-mark,
  .g-radio input:checked + .g-radio-mark {
    background: var(--g-primary);
    border-color: var(--g-primary);
    box-shadow: var(--g-glow-primary);
  }

  .g-checkbox input:checked + .g-checkbox-mark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid var(--g-bg-darkest);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .g-radio input:checked + .g-radio-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--g-bg-darkest);
    border-radius: 50%;
  }

  .g-checkbox:hover .g-checkbox-mark,
  .g-radio:hover .g-radio-mark {
    border-color: var(--g-primary);
  }

  /* Input with Icon */
  .g-input-icon-wrapper {
    position: relative;
  }

  .g-input-icon-wrapper .g-input {
    padding-left: var(--g-space-10);
  }

  .g-input-icon-wrapper .g-input-icon {
    position: absolute;
    left: var(--g-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    pointer-events: none;
  }

  .g-input-icon-wrapper .g-input:focus + .g-input-icon,
  .g-input-icon-wrapper .g-input:focus ~ .g-input-icon {
    color: var(--g-primary);
  }

  /* Password Toggle */
  .g-password-toggle {
    position: absolute;
    right: var(--g-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    cursor: pointer;
    padding: var(--g-space-1);
    transition: color var(--g-transition-fast);
    background: none;
    border: none;
  }

  .g-password-toggle:hover {
    color: var(--g-primary);
  }

  /* Helper Text */
  .g-helper-text {
    margin-top: var(--g-space-2);
    font-size: var(--g-text-sm);
    color: var(--g-text-muted);
  }

  .g-helper-text-error {
    color: var(--g-error);
  }

  .g-helper-text-success {
    color: var(--g-success);
  }

  /* === CARDS === */
  .g-card {
    background: var(--g-gradient-card);
    backdrop-filter: blur(var(--g-glass-blur));
    -webkit-backdrop-filter: blur(var(--g-glass-blur));
    border: 1px solid var(--g-glass-border);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-6);
    transition: all var(--g-transition-normal);
  }

  .g-card:hover {
    border-color: var(--g-border-color);
    box-shadow: var(--g-shadow-glow);
  }

  .g-card-glow {
    border: 1px solid var(--g-border-glow);
    box-shadow: var(--g-glow-primary);
  }

  .g-card-header {
    padding-bottom: var(--g-space-4);
    margin-bottom: var(--g-space-4);
    border-bottom: 1px solid var(--g-border-color);
  }

  .g-card-title {
    font-family: var(--g-font-display);
    font-size: var(--g-text-xl);
    font-weight: var(--g-font-bold);
    color: var(--g-text-primary);
    margin: 0;
  }

  .g-card-body {
    color: var(--g-text-secondary);
  }

  .g-card-footer {
    padding-top: var(--g-space-4);
    margin-top: var(--g-space-4);
    border-top: 1px solid var(--g-border-color);
  }

  /* Stat Card */
  .g-stat-card {
    text-align: center;
    padding: var(--g-space-5);
  }

  .g-stat-value {
    font-family: var(--g-font-display);
    font-size: var(--g-text-3xl);
    font-weight: var(--g-font-bold);
    color: var(--g-primary);
    text-shadow: var(--g-glow-text);
    line-height: 1;
  }

  .g-stat-label {
    font-size: var(--g-text-sm);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--g-space-2);
  }

  /* === NAVBAR === */
  .g-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--g-z-sticky);
    background: rgba(7, 10, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--g-border-color);
    padding: var(--g-space-3) var(--g-space-6);
  }

  .g-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
  }

  .g-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    font-family: var(--g-font-display);
    font-size: var(--g-text-xl);
    font-weight: var(--g-font-bold);
    color: var(--g-text-primary);
    text-decoration: none;
  }

  .g-navbar-brand:hover {
    color: var(--g-primary);
  }

  .g-navbar-brand img {
    height: 40px;
    width: auto;
  }

  .g-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .g-nav-link {
    font-family: var(--g-font-display);
    font-size: var(--g-text-sm);
    font-weight: var(--g-font-medium);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: var(--g-space-2) var(--g-space-3);
    transition: all var(--g-transition-fast);
    position: relative;
  }

  .g-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--g-primary);
    box-shadow: 0 0 8px var(--g-primary);
    transition: width var(--g-transition-fast);
  }

  .g-nav-link:hover,
  .g-nav-link.active {
    color: var(--g-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  }

  .g-nav-link:hover::after,
  .g-nav-link.active::after {
    width: 100%;
  }

  /* Enhanced active state with background highlight */
  .g-nav-link.active {
    background: rgba(0, 229, 255, 0.08);
    border-radius: var(--g-radius-sm);
  }

  .g-nav-link.active::after {
    box-shadow: 0 0 12px var(--g-primary), 0 0 20px rgba(0, 229, 255, 0.3);
  }

  .g-nav-link:focus-visible {
    outline: none;
    box-shadow: var(--g-focus-ring);
    border-radius: var(--g-radius-sm);
  }

  /* Mobile Menu Toggle — ย้ายไป MOBILE NAVBAR ENHANCEMENTS section ด้านล่าง */

  /* === MODAL === */
  .g-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 18, 0.85);
    backdrop-filter: blur(4px);
    z-index: var(--g-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--g-transition-normal);
  }

  .g-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  .g-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: var(--g-z-modal);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--g-gradient-card);
    backdrop-filter: blur(var(--g-glass-blur));
    border: 1px solid var(--g-border-glow);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-glow-primary), var(--g-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--g-transition-normal);
    overflow: hidden;
  }

  .g-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .g-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-5) var(--g-space-6);
    border-bottom: 1px solid var(--g-border-color);
  }

  .g-modal-title {
    font-family: var(--g-font-display);
    font-size: var(--g-text-xl);
    font-weight: var(--g-font-bold);
    color: var(--g-primary);
    margin: 0;
  }

  .g-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--g-border-color);
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all var(--g-transition-fast);
  }

  .g-modal-close:hover {
    color: var(--g-error);
    border-color: var(--g-error);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.3);
  }

  .g-modal-close:focus-visible {
    outline: none;
    box-shadow: var(--g-focus-ring);
  }

  .g-modal-body {
    padding: var(--g-space-6);
    overflow-y: auto;
    max-height: 60vh;
  }

  .g-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--g-space-3);
    padding: var(--g-space-4) var(--g-space-6);
    border-top: 1px solid var(--g-border-color);
  }

  /* === TABLE === */
  .g-table-container {
    overflow-x: auto;
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border-color);
  }

  .g-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--g-text-sm);
  }

  .g-table th,
  .g-table td {
    padding: var(--g-space-4);
    text-align: left;
    border-bottom: 1px solid var(--g-border-color);
  }

  .g-table th {
    font-family: var(--g-font-display);
    font-weight: var(--g-font-semibold);
    color: var(--g-primary);
    background: var(--g-bg-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--g-text-xs);
  }

  .g-table td {
    color: var(--g-text-secondary);
    background: var(--g-bg-dark);
  }

  .g-table tbody tr {
    transition: background var(--g-transition-fast);
  }

  .g-table tbody tr:hover {
    background: var(--g-bg-light);
  }

  .g-table tbody tr:hover td {
    background: transparent;
  }

  .g-table-striped tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.02);
  }

  /* === ALERTS === */
  .g-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
    padding: var(--g-space-4) var(--g-space-5);
    border-radius: var(--g-radius-md);
    border: 1px solid;
    margin-bottom: var(--g-space-4);
  }

  .g-alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .g-alert-content {
    flex: 1;
  }

  .g-alert-title {
    font-family: var(--g-font-display);
    font-weight: var(--g-font-semibold);
    margin-bottom: var(--g-space-1);
  }

  .g-alert-success {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--g-success);
    color: var(--g-success);
  }

  .g-alert-error {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--g-error);
    color: var(--g-error);
  }

  .g-alert-warning {
    background: rgba(255, 184, 0, 0.1);
    border-color: var(--g-warning);
    color: var(--g-warning);
  }

  .g-alert-info {
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--g-primary);
    color: var(--g-primary);
  }

  /* === BADGES === */
  .g-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--g-space-1) var(--g-space-3);
    font-family: var(--g-font-display);
    font-size: var(--g-text-xs);
    font-weight: var(--g-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--g-radius-full);
    border: 1px solid;
  }

  .g-badge-primary {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--g-primary);
    color: var(--g-primary);
  }

  .g-badge-accent {
    background: rgba(180, 0, 255, 0.15);
    border-color: var(--g-accent);
    color: var(--g-accent);
  }

  .g-badge-success {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--g-success);
    color: var(--g-success);
  }

  .g-badge-warning {
    background: rgba(255, 184, 0, 0.15);
    border-color: var(--g-warning);
    color: var(--g-warning);
  }

  .g-badge-error {
    background: rgba(255, 51, 102, 0.15);
    border-color: var(--g-error);
    color: var(--g-error);
  }

  /* === PROGRESS === */
  .g-progress {
    height: 8px;
    background: var(--g-bg-medium);
    border-radius: var(--g-radius-full);
    overflow: hidden;
    border: 1px solid var(--g-border-color);
  }

  .g-progress-bar {
    height: 100%;
    background: var(--g-gradient-primary);
    border-radius: var(--g-radius-full);
    transition: width var(--g-transition-slow);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
  }

  /* === TABS === */
  .g-tabs {
    display: flex;
    border-bottom: 1px solid var(--g-border-color);
    gap: var(--g-space-1);
  }

  .g-tab {
    padding: var(--g-space-3) var(--g-space-5);
    font-family: var(--g-font-display);
    font-size: var(--g-text-sm);
    font-weight: var(--g-font-medium);
    color: var(--g-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--g-transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .g-tab:hover {
    color: var(--g-text-secondary);
  }

  .g-tab:focus-visible {
    outline: none;
    box-shadow: var(--g-focus-ring);
    border-radius: var(--g-radius-sm);
  }

  .g-tab.active {
    color: var(--g-primary);
    border-bottom-color: var(--g-primary);
    text-shadow: var(--g-glow-text);
  }

  .g-tab-content {
    padding: var(--g-space-5) 0;
  }

  .g-tab-pane {
    display: none;
  }

  .g-tab-pane.active {
    display: block;
  }

  /* === AVATAR === */
  .g-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-full);
    border: 2px solid var(--g-border-glow);
    object-fit: cover;
    box-shadow: var(--g-glow-primary);
  }

  .g-avatar-sm { width: 32px; height: 32px; }
  .g-avatar-lg { width: 64px; height: 64px; }
  .g-avatar-xl { width: 96px; height: 96px; }

  /* === DIVIDER === */
  .g-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--g-border-color), transparent);
    margin: var(--g-space-6) 0;
  }

  .g-divider-glow {
    background: linear-gradient(90deg, transparent, var(--g-primary), transparent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
  }

  /* === SECTION DIVIDERS === */
  .g-section-divider {
    position: relative;
    height: 80px;
    overflow: hidden;
  }

  .g-section-divider-hud {
    background: linear-gradient(180deg, transparent 0%, rgba(11, 18, 32, 0.5) 100%);
  }

  .g-section-divider-hud::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--g-primary), transparent);
  }

  .g-section-divider-hud::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--g-primary), var(--g-accent), var(--g-primary), transparent);
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
  }

  .g-section-divider-angled {
    background: linear-gradient(175deg, transparent 49%, rgba(0, 229, 255, 0.1) 49.5%, rgba(0, 229, 255, 0.1) 50.5%, rgba(11, 18, 32, 0.8) 51%);
  }

  .g-section-divider-wave {
    background:
      linear-gradient(180deg, transparent 0%, var(--g-bg-dark) 100%);
  }

  .g-section-divider-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--g-primary) 20%,
      var(--g-accent) 50%,
      var(--g-primary) 80%,
      transparent 100%
    );
    opacity: 0.6;
  }

  @media (max-width: 768px) {
    .g-section-divider {
      height: 50px;
    }

    .g-section-divider-hud::after {
      width: 120px;
      height: 3px;
    }
  }

  /* === LAYOUT === */
  .g-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--g-space-4);
  }

  .g-container-sm { max-width: 640px; }
  .g-container-md { max-width: 768px; }
  .g-container-lg { max-width: 1024px; }
  .g-container-xl { max-width: 1280px; }

  .g-page {
    padding-top: 80px;
    min-height: 100vh;
  }

  .g-section {
    padding: var(--g-space-12) 0;
  }

  .g-grid {
    display: grid;
    gap: var(--g-space-4);
  }

  .g-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .g-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .g-grid-4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 768px) {
    .g-grid-2,
    .g-grid-3,
    .g-grid-4 {
      grid-template-columns: 1fr;
    }
  }

  /* === ANIMATIONS === */
  @keyframes g-fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes g-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes g-scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes g-glowPulse {
    0%, 100% {
      box-shadow: 0 0 15px rgba(0, 229, 255, 0.35);
    }
    50% {
      box-shadow: 0 0 25px rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.2);
    }
  }

  @keyframes g-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes g-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes g-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .g-animate-fadeIn {
    animation: g-fadeIn var(--g-transition-normal) ease-out forwards;
  }

  .g-animate-fadeInUp {
    animation: g-fadeInUp var(--g-transition-slow) ease-out forwards;
  }

  .g-animate-scaleIn {
    animation: g-scaleIn var(--g-transition-normal) ease-out forwards;
  }

  .g-animate-glowPulse {
    animation: g-glowPulse 2s ease-in-out infinite;
  }

  .g-animate-float {
    animation: g-float 3s ease-in-out infinite;
  }

  /* Animation Delays */
  .g-delay-100 { animation-delay: 100ms; }
  .g-delay-200 { animation-delay: 200ms; }
  .g-delay-300 { animation-delay: 300ms; }
  .g-delay-400 { animation-delay: 400ms; }
  .g-delay-500 { animation-delay: 500ms; }

  /* Skeleton Loading */
  .g-skeleton {
    background: linear-gradient(
      90deg,
      var(--g-bg-light) 25%,
      var(--g-bg-lighter) 50%,
      var(--g-bg-light) 75%
    );
    background-size: 200% 100%;
    animation: g-shimmer 1.5s infinite;
    border-radius: var(--g-radius-md);
  }

  /* Spinner */
  .g-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--g-bg-lighter);
    border-top-color: var(--g-primary);
    border-radius: 50%;
    animation: g-spin 0.8s linear infinite;
  }

  /* HUD Decorations */
  .g-corner-cut {
    clip-path: polygon(
      0 10px,
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
  }

  .g-hud-frame {
    position: relative;
    border: 1px solid var(--g-border-color);
  }

  .g-hud-frame::before,
  .g-hud-frame::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--g-primary);
  }

  .g-hud-frame::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
  }

  .g-hud-frame::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
  }
}

/* ============================================
   LAYER: Utilities - Utility classes
   ============================================ */
@layer utilities {
  /* Text Colors */
  .g-text-primary { color: var(--g-primary) !important; }
  .g-text-accent { color: var(--g-accent) !important; }
  .g-text-success { color: var(--g-success) !important; }
  .g-text-warning { color: var(--g-warning) !important; }
  .g-text-error { color: var(--g-error) !important; }
  .g-text-muted { color: var(--g-text-muted) !important; }

  /* Text Glow Utilities */
  .g-text-glow {
    text-shadow: var(--g-glow-text);
  }

  .g-text-glow-strong {
    text-shadow:
      0 0 10px rgba(0, 229, 255, 0.6),
      0 0 20px rgba(0, 229, 255, 0.4),
      0 0 30px rgba(0, 229, 255, 0.2);
  }

  .g-text-glow-purple {
    text-shadow:
      0 0 10px rgba(180, 0, 255, 0.6),
      0 0 20px rgba(180, 0, 255, 0.4);
  }

  .g-kpi-glow {
    text-shadow:
      0 0 8px rgba(0, 229, 255, 0.7),
      0 0 16px rgba(0, 229, 255, 0.4),
      0 0 24px rgba(180, 0, 255, 0.2);
  }

  .g-link-glow {
    transition: text-shadow var(--g-transition-fast), color var(--g-transition-fast);
  }

  .g-link-glow:hover {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  }

  .g-text-gradient {
    background: var(--g-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Background Colors */
  .g-bg-dark { background-color: var(--g-bg-dark) !important; }
  .g-bg-medium { background-color: var(--g-bg-medium) !important; }
  .g-bg-glass {
    background: var(--g-glass-bg);
    backdrop-filter: blur(var(--g-glass-blur));
    -webkit-backdrop-filter: blur(var(--g-glass-blur));
  }

  /* Border */
  .g-border {
    border: 1px solid var(--g-border-color);
  }

  .g-border-glow {
    border: 1px solid var(--g-border-glow);
    box-shadow: var(--g-glow-primary);
  }

  /* Glow */
  .g-glow {
    box-shadow: var(--g-glow-primary);
  }

  .g-glow-accent {
    box-shadow: var(--g-glow-accent);
  }

  /* Flex */
  .g-flex { display: flex; }
  .g-flex-col { flex-direction: column; }
  .g-items-center { align-items: center; }
  .g-justify-center { justify-content: center; }
  .g-justify-between { justify-content: space-between; }
  .g-gap-2 { gap: var(--g-space-2); }
  .g-gap-4 { gap: var(--g-space-4); }
  .g-gap-6 { gap: var(--g-space-6); }

  /* Visibility (Accessibility) */
  .g-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .g-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Hidden for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .g-motion-safe-only {
      display: none !important;
    }
  }
}

/* ============================================
   TAILWIND INTEGRATION NOTES
   ============================================

   When using with Tailwind CSS:

   1. Include Tailwind FIRST, then this stylesheet
   2. CSS variables are available in Tailwind config:

      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: 'var(--g-primary)',
              accent: 'var(--g-accent)',
              ink: 'var(--g-bg-darkest)',
              panel: 'var(--g-bg-dark)',
              success: 'var(--g-success)',
              warning: 'var(--g-warning)',
              danger: 'var(--g-error)'
            },
            fontFamily: {
              display: ['Orbitron', 'Rajdhani', 'sans-serif'],
              body: ['Rajdhani', 'Kanit', 'system-ui', 'sans-serif']
            }
          }
        }
      }

   3. Use .gaming-theme class on body for full theming
   4. Gaming components (.g-btn, .g-card, etc.) work alongside Tailwind

   ============================================ */

/* ============================================
   PREMIUM EFFECTS - Gradient Orbs & Glow Blobs
   ============================================ */

/* Floating Gradient Orbs - Premium soft glow */
.g-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); /* เพิ่มจาก 60px → 80px ให้นุ่มขึ้น */
  opacity: 0.25; /* ลดจาก 0.4 → 0.25 ไม่บังข้อความ */
  pointer-events: none;
  will-change: transform;
}

.g-orb-primary {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.5) 0%, rgba(0, 229, 255, 0) 70%); /* ลด 0.6→0.5 */
}

.g-orb-accent {
  background: radial-gradient(circle, rgba(180, 0, 255, 0.4) 0%, rgba(180, 0, 255, 0) 70%); /* ลด 0.5→0.4 */
}

.g-orb-lg { width: 400px; height: 400px; }
.g-orb-md { width: 250px; height: 250px; }
.g-orb-sm { width: 150px; height: 150px; }

/* Orb Animation */
@keyframes g-orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

.g-orb-animate {
  animation: g-orbFloat 25s ease-in-out infinite; /* ช้าลงจาก 20s → 25s นุ่มนวลขึ้น */
}

/* CTA Pulse Animation */
@keyframes g-ctaPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(0, 229, 255, 0.4),
      var(--g-glow-primary);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(0, 229, 255, 0),
      var(--g-glow-primary),
      0 0 30px rgba(0, 229, 255, 0.3);
  }
}

.g-btn-pulse {
  animation: g-ctaPulse 3.5s ease-in-out infinite; /* ช้าลงจาก 2.5s → 3.5s ไม่กวนสายตา */
}

.g-btn-pulse:hover {
  animation: none;
}

/* NEW Badge Animation */
@keyframes g-badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.g-badge-new {
  background: linear-gradient(135deg, var(--g-success), #00CC6A);
  border-color: var(--g-success);
  color: var(--g-bg-darkest);
  font-weight: var(--g-font-bold);
  animation: g-badgePulse 3s ease-in-out infinite; /* ช้าลงจาก 2s → 3s */
}

/* Subtle H3 Glow */
.g-text-glow-subtle {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

/* Video Play Button - Premium soft glow */
.g-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  min-width: 44px; /* A11y: touch target */
  min-height: 44px;
  background: rgba(0, 229, 255, 0.85); /* ลดเล็กน้อย 0.9→0.85 */
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--g-transition-normal);
  box-shadow:
    0 0 25px rgba(0, 229, 255, 0.4),  /* ลด 30px/0.5 → 25px/0.4 */
    0 0 50px rgba(0, 229, 255, 0.2);  /* ลด 60px/0.3 → 50px/0.2 */
}

.g-play-btn i {
  font-size: 2rem;
  color: var(--g-bg-darkest);
  margin-left: 4px;
}

.g-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--g-primary-light);
  box-shadow:
    0 0 40px rgba(0, 229, 255, 0.7),
    0 0 80px rgba(0, 229, 255, 0.4);
}

.g-play-btn:focus-visible {
  outline: none;
  box-shadow: var(--g-focus-ring), 0 0 40px rgba(0, 229, 255, 0.7);
}

/* Play Button Ring Animation - Premium soft ripple */
.g-play-btn-ring {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(0, 229, 255, 0.35); /* ลด 0.5 → 0.35 นุ่มขึ้น */
  border-radius: 50%;
  animation: g-playRing 2.5s ease-out infinite; /* ช้าลงจาก 2s → 2.5s */
}

.g-play-btn-ring-2 {
  inset: -16px;
  animation-delay: 0.7s; /* เพิ่มจาก 0.5s → 0.7s */
}

@keyframes g-playRing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Incentive Text */
.g-incentive {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  padding: var(--g-space-2) var(--g-space-4);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 229, 255, 0.1));
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: var(--g-radius-full);
  font-size: var(--g-text-sm);
  color: var(--g-success);
  font-weight: var(--g-font-semibold);
}

.g-incentive i {
  animation: g-badgePulse 2.5s ease-in-out infinite; /* ช้าลงจาก 1.5s → 2.5s */
}

/* Mobile: Hide orbs and reduce effects for performance */
@media (max-width: 768px) {
  .g-orb {
    display: none !important;
  }

  .g-btn-pulse {
    animation: none;
  }

  /* Badge: ปิด animation บน mobile */
  .g-badge-new {
    animation: none;
  }

  .g-incentive i {
    animation: none;
  }

  /* Play button: ลดขนาดแต่ยังรักษา touch target 44px */
  .g-play-btn {
    width: 56px;
    height: 56px;
    min-width: 44px;
    min-height: 44px;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); /* ลด glow */
  }

  .g-play-btn i {
    font-size: 1.25rem;
  }

  /* ปิด ring animation บน mobile */
  .g-play-btn-ring {
    display: none;
  }

  /* Text glow: ลดความแรง */
  .g-text-glow-subtle {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
  }

  .g-text-glow-strong {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  }
}

/* Reduced motion: Disable ALL animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  /* Premium effects */
  .g-orb-animate,
  .g-btn-pulse,
  .g-badge-new,
  .g-incentive i,
  .g-play-btn-ring {
    animation: none !important;
  }

  .g-orb,
  .g-play-btn-ring {
    display: none !important;
  }

  /* Tailwind/custom animations used in index.html */
  .animate-fadeInUp,
  .animate-fadeInDown,
  .animate-fadeInLeft,
  .animate-fadeInRight,
  .animate-scaleIn,
  .animate-float,
  .animate-glow,
  .animate-borderGlow,
  .animate-bounce,
  .animate-pulse,
  [class*="animate-"] {
    animation: none !important;
    opacity: 1 !important;
  }

  /* ปิด transitions ที่ไม่จำเป็น */
  .card-hover,
  .g-card {
    transition: none !important;
  }

  /* ปิด glow/shadow animations */
  .status-online {
    animation: none !important;
  }

  /* Text glow: คงไว้แต่ไม่ animate */
  .g-text-glow,
  .g-text-glow-strong,
  .g-kpi-glow {
    text-shadow: none;
  }
}

/* ============================================
   A11Y: HIGH CONTRAST & GLASS READABILITY
   ============================================ */

/* ปรับ contrast บน glass surfaces ให้อ่านง่ายขึ้น */
.g-card,
.g-hud-frame {
  /* เพิ่ม background opacity เล็กน้อยให้ text อ่านง่ายขึ้น */
  background: rgba(11, 18, 32, 0.85);
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .g-card,
  .g-hud-frame {
    background: rgba(11, 18, 32, 0.95);
    border-color: var(--g-primary);
  }

  .g-text-glow-subtle {
    text-shadow: none;
    font-weight: 600;
  }

  .g-badge-new {
    border: 2px solid currentColor;
  }
}

/* ============================================
   FOOTER COMPONENT
   ============================================ */
.g-footer {
  background: var(--g-bg-darkest, #070A12);
  padding: var(--g-space-8, 32px) var(--g-space-6, 24px);
  padding-bottom: calc(var(--g-space-8, 32px) + env(safe-area-inset-bottom, 0px));
  position: relative;
}

.g-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-4, 16px);
  text-align: center;
}

.g-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--g-space-3, 12px);
  font-family: var(--g-font-display, 'Orbitron', sans-serif);
  font-size: var(--g-text-lg, 1.125rem);
  font-weight: var(--g-font-bold, 700);
  color: var(--g-text-primary, rgba(255,255,255,.95));
}

.g-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-space-4, 16px);
}

.g-footer-links a {
  color: var(--g-text-muted, rgba(255,255,255,.5));
  text-decoration: none;
  font-size: var(--g-text-sm, 0.875rem);
  padding: var(--g-space-2, 8px) var(--g-space-3, 12px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--g-radius-sm, 6px);
  transition: color var(--g-transition-fast, 0.15s ease);
}

.g-footer-links a:hover {
  color: var(--g-primary, #00E5FF);
}

.g-footer-copyright {
  font-size: var(--g-text-xs, 0.75rem);
  color: var(--g-text-muted, rgba(255,255,255,.5));
  margin: 0;
}

/* ============================================
   MOBILE APP-STYLE NAVIGATION
   ============================================ */
/* hamburger toggle button — 48px touch target */
.g-navbar-toggle {
  min-width: 48px;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.g-navbar-toggle:active {
  background: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.2);
}

.g-navbar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--g-primary, #00E5FF);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* hamburger → X animation */
.g-navbar-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.g-navbar-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.g-navbar-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* === ฉากหลัง overlay เมื่อเปิดเมนู === */
.g-nav-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .g-navbar-toggle {
    display: flex;
  }

  /* Brand ย่อบนมือถือ */
  .g-navbar-brand span {
    font-size: 0.85rem;
  }

  /* Backdrop overlay แบบ app */
  .g-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .g-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  /* === Full-screen slide-in drawer แบบ app === */
  .g-navbar-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 280px;
    max-width: 85vw;
    z-index: 999;
    flex-direction: column;
    background: rgba(7, 10, 18, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 0;
    gap: 0;
    transform: translateX(100%);
    opacity: 1;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(0, 229, 255, 0.15);
  }

  .g-navbar-nav.active {
    transform: translateX(0);
    visibility: visible;
  }

  /* Drawer header — brand area ด้านบน */
  .g-navbar-nav::before {
    content: '';
    display: block;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(180, 0, 255, 0.08));
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    flex-shrink: 0;
  }

  /* Menu items — app list style */
  .g-navbar-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .g-navbar-nav li:last-child {
    border-bottom: none;
    margin-top: 8px;
    padding: 8px 16px 16px;
  }

  .g-navbar-nav .g-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 20px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: 0;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  /* Active indicator — เส้นซ้ายแบบ app */
  .g-navbar-nav .g-nav-link.active {
    color: var(--g-primary, #00E5FF);
    background: rgba(0, 229, 255, 0.06);
  }

  .g-navbar-nav .g-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--g-primary, #00E5FF);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--g-primary, #00E5FF);
  }

  .g-navbar-nav .g-nav-link::after {
    display: none;
  }

  /* Touch press feedback */
  .g-navbar-nav .g-nav-link:active {
    background: rgba(0, 229, 255, 0.1);
    transform: scale(0.98);
  }

  /* CTA button ใน drawer */
  .g-navbar-nav .g-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }

  .g-navbar-nav .g-btn:active {
    transform: scale(0.96);
  }
}

@media (max-width: 360px) {
  .g-navbar-brand span {
    display: none;
  }
}

/* ============================================
   iOS AUTO-ZOOM FIX — บังคับ font 16px สำหรับ inputs
   ============================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea,
  .g-input,
  .g-select,
  .g-textarea {
    font-size: max(1rem, 16px) !important;
  }
}

/* ============================================
   MOBILE APP-STYLE BUTTONS & TOUCH FEEDBACK
   ============================================ */
@media (max-width: 768px) {
  /* ปุ่มทั้งหมดใหญ่ขึ้น + rounded + haptic feedback */
  .g-btn {
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    -webkit-tap-highlight-color: transparent;
  }

  .g-btn:hover {
    transform: none;
  }

  .g-btn:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
  }

  .g-btn-block {
    min-height: 52px;
    border-radius: 16px;
    font-size: 1rem;
  }

  .g-btn-sm {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 12px;
  }

  /* ปุ่ม primary เด่นขึ้นบนมือถือ */
  .g-btn-primary {
    box-shadow: 0 4px 16px rgba(0, 229, 255, 0.25);
  }

  .g-btn-primary:active {
    box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);
  }

  /* Form inputs ก็ต้อง app-style */
  .g-input,
  .g-select,
  .g-textarea {
    min-height: 48px;
    border-radius: 14px;
    padding: 14px 16px;
    -webkit-tap-highlight-color: transparent;
  }

  .g-textarea {
    min-height: 100px;
  }

  /* Form group spacing */
  .g-form-group {
    margin-bottom: 16px;
  }

  /* Label spacing */
  .g-label {
    margin-bottom: 8px;
  }
}

/* ============================================
   MODAL & CARD MOBILE PADDING
   ============================================ */
@media (max-width: 480px) {
  .g-modal {
    width: 95%;
    max-height: 95vh;
    border-radius: 20px;
  }

  .g-modal-header {
    padding: var(--g-space-4, 16px);
  }

  .g-modal-body {
    padding: var(--g-space-4, 16px);
  }

  .g-modal-footer {
    padding: var(--g-space-3, 12px) var(--g-space-4, 16px);
  }

  .g-card {
    padding: var(--g-space-4, 16px);
    border-radius: 16px;
  }
}

/* ============================================
   TABLE RESPONSIVE
   ============================================ */
.g-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--g-radius-lg, 12px);
  border: 1px solid var(--g-border-color, rgba(255,255,255,.08));
}

@media (max-width: 768px) {
  .g-table-responsive .g-table {
    font-size: var(--g-text-xs, 0.75rem);
  }

  .g-table-responsive .g-table th,
  .g-table-responsive .g-table td {
    padding: var(--g-space-2, 8px) var(--g-space-3, 12px);
    white-space: nowrap;
  }
}

/* Card-style table สำหรับจอเล็กมาก */
@media (max-width: 480px) {
  .g-table-cards thead {
    display: none;
  }

  .g-table-cards tbody tr {
    display: block;
    margin-bottom: var(--g-space-3, 12px);
    border: 1px solid var(--g-border-color, rgba(255,255,255,.08));
    border-radius: var(--g-radius-md, 8px);
    overflow: hidden;
  }

  .g-table-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--g-space-3, 12px);
    border-bottom: 1px solid var(--g-border-color, rgba(255,255,255,.08));
    text-align: right;
  }

  .g-table-cards tbody td::before {
    content: attr(data-label);
    font-weight: var(--g-font-semibold, 600);
    color: var(--g-primary, #00E5FF);
    font-family: var(--g-font-display, 'Orbitron', sans-serif);
    font-size: var(--g-text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    margin-right: var(--g-space-4, 16px);
  }

  .g-table-cards tbody td:last-child {
    border-bottom: none;
  }
}

/* ============================================
   MOBILE BOTTOM TAB BAR — แบบ App มือถือ
   ============================================ */
.g-bottom-bar {
  display: none;
}

@media (max-width: 768px) {
  .g-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(7, 10, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 229, 255, 0.12);
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  }

  /* แต่ละ tab item */
  .g-bottom-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    min-height: 56px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.625rem;
    font-family: var(--g-font-display, 'Orbitron', sans-serif);
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 8px;
    margin: 0 2px;
  }

  .g-bottom-bar-item i {
    font-size: 1.25rem;
    transition: all 0.2s ease;
  }

  .g-bottom-bar-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
  }

  /* Active tab */
  .g-bottom-bar-item.active {
    color: var(--g-primary, #00E5FF);
  }

  .g-bottom-bar-item.active i {
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
  }

  /* Active indicator dot */
  .g-bottom-bar-item.active::after {
    content: '';
    position: absolute;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--g-primary, #00E5FF);
    box-shadow: 0 0 6px var(--g-primary, #00E5FF);
  }

  /* Hover/focus */
  .g-bottom-bar-item:hover {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Touch press feedback */
  .g-bottom-bar-item:active {
    transform: scale(0.9);
    color: var(--g-primary, #00E5FF);
    background: rgba(0, 229, 255, 0.06);
  }

  /* CTA center button (พิเศษ ปุ่มเด่น ตรงกลาง) */
  .g-bottom-bar-cta {
    color: #fff !important;
    position: relative;
  }

  .g-bottom-bar-cta i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--g-primary, #00E5FF), var(--g-accent, #B400FF));
    border-radius: 14px;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(0, 229, 255, 0.3);
    filter: none;
    margin-top: -12px;
  }

  .g-bottom-bar-cta:active i {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(0, 229, 255, 0.4);
  }

  .g-bottom-bar-cta::after {
    display: none;
  }

  /* เพิ่ม padding-bottom ให้ body เมื่อมี bottom bar ไม่ทับ content */
  body.has-bottom-bar {
    padding-bottom: 72px;
  }
}

/* === compat: เก่ายังใช้ได้ === */
.g-bottom-cta { display: none; }
@media (max-width: 768px) {
  .g-bottom-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(7, 10, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 229, 255, 0.12);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .g-bottom-cta a,
  .g-bottom-cta button {
    flex: 1;
    max-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    font-family: var(--g-font-display, 'Orbitron', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .g-bottom-cta-primary {
    background: linear-gradient(135deg, var(--g-primary, #00E5FF), var(--g-accent, #B400FF));
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.3);
  }
  .g-bottom-cta-primary:active { transform: scale(0.96); }
  .g-bottom-cta-ghost {
    background: rgba(255,255,255,0.04);
    color: var(--g-primary, #00E5FF);
    border: 1px solid rgba(0, 229, 255, 0.25);
  }
  .g-bottom-cta-ghost:active {
    background: rgba(0, 229, 255, 0.1);
    transform: scale(0.96);
  }
  body.has-bottom-cta { padding-bottom: 78px; }
}

/* ============================================
   FOOTER MOBILE
   ============================================ */
@media (max-width: 480px) {
  .g-footer {
    padding: var(--g-space-6, 24px) var(--g-space-4, 16px);
    padding-bottom: calc(var(--g-space-6, 24px) + env(safe-area-inset-bottom, 0px));
  }

  .g-footer-links {
    flex-direction: column;
    gap: var(--g-space-1, 4px);
  }

  .g-footer-links a {
    min-height: 44px;
    justify-content: center;
  }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {
  /* Reduce backdrop blur on mobile for performance */
  .g-card,
  .g-navbar,
  .g-modal,
  .g-bg-glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Reduce glow intensity on mobile */
  :root {
    --g-glow-primary: 0 0 10px rgba(0, 229, 255, 0.25);
    --g-glow-accent: 0 0 10px rgba(180, 0, 255, 0.25);
  }

  /* Hide heavy particle effects on mobile */
  .particles,
  .g-particles,
  .particle {
    display: none !important;
  }

  /* Simplify shadows on mobile */
  .g-card:hover {
    box-shadow: var(--g-shadow-md);
  }
}

/* Low-power/battery saver mode */
@media (prefers-reduced-motion: reduce) {
  /* Already handled in base layer - this ensures GPU-heavy effects are disabled */
  .g-card,
  .g-navbar,
  .g-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--g-bg-medium);
  }

  .particles,
  .g-particles,
  .particle,
  .glow-orb,
  .cyber-grid {
    display: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  /* Reset colors for print */
  :root {
    --g-text-primary: #000000;
    --g-text-secondary: #333333;
    --g-text-muted: #666666;
    --g-bg-darkest: #FFFFFF;
    --g-bg-dark: #FFFFFF;
    --g-bg-medium: #F5F5F5;
    --g-bg-light: #EEEEEE;
    --g-border-color: #CCCCCC;
    --g-primary: #0066CC;
    --g-accent: #6600CC;
    --g-success: #008800;
    --g-warning: #CC6600;
    --g-error: #CC0000;
  }

  /* Remove background effects */
  body.gaming-theme,
  .gaming-theme {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Hide non-essential elements */
  .g-navbar,
  .g-navbar-toggle,
  .particles,
  .g-particles,
  .particle,
  .glow-orb,
  .cyber-grid,
  .g-modal-backdrop,
  .g-toast-container,
  .g-spinner {
    display: none !important;
  }

  /* Reset cards for print */
  .g-card {
    background: #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    page-break-inside: avoid;
  }

  /* Print-friendly buttons */
  .g-btn {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  .g-btn-primary,
  .g-btn-accent,
  .g-btn-success,
  .g-btn-danger {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Print-friendly inputs */
  .g-input,
  .g-select,
  .g-textarea {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  /* Print-friendly tables */
  .g-table {
    border-collapse: collapse;
  }

  .g-table th,
  .g-table td {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
  }

  .g-table th {
    background: #F0F0F0 !important;
    font-weight: bold;
  }

  /* Print-friendly alerts */
  .g-alert {
    background: #FFFFFF !important;
    border: 2px solid currentColor !important;
    color: #000000 !important;
  }

  .g-alert-success { border-color: #008800 !important; }
  .g-alert-error { border-color: #CC0000 !important; }
  .g-alert-warning { border-color: #CC6600 !important; }
  .g-alert-info { border-color: #0066CC !important; }

  /* Print-friendly badges */
  .g-badge {
    background: transparent !important;
    border: 1px solid currentColor !important;
  }

  /* Remove text shadows and glows */
  * {
    text-shadow: none !important;
  }

  /* Remove transforms */
  .g-btn:hover,
  .g-card:hover,
  .g-nav-link:hover {
    transform: none !important;
  }

  /* Ensure links show URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }

  /* Don't show URL for internal links */
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  /* Page breaks */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  .g-table-container {
    page-break-inside: avoid;
  }

  /* Print page margins */
  @page {
    margin: 2cm;
  }
}