/* Retro Pixel Arcade — World Tokens
   A cute retro arcade: 8-bit charm, 16-bit color, CRT warmth, chiptune soul.
   Tokens live on html[data-world="retro-pixel-arcade"] so they scope cleanly. */

@media screen {
  /* ── Dark mode (arcade cabinet night) ── */
  html[data-world="retro-pixel-arcade"][data-mode="dark"] {
    /* Core surfaces */
    --world-background: #0d0d1a !important;           /* deep cabinet black */
    --world-deep: #1a1a2e !important;                 /* dark bezel */
    --world-surface: #252542 !important;              /* screen glass */
    --world-elevated: #2f2f55 !important;             /* raised UI */

    /* Text hierarchy */
    --world-text: #ffe8c8 !important;                 /* warm amber glow */
    --world-secondary: #ccb899 !important;            /* muted gold */
    --world-muted: #998877 !important;                /* dim amber */
    --world-faint: #665544 !important;                /* scanline dim */

    /* Accents — the pixel palette */
    --world-accent: #ff6b6b !important;               /* player 1 red */
    --world-accent-hover: #ff9999 !important;         /* bright red */
    --world-accent-secondary: #4ecdc4 !important;     /* player 2 teal */
    --world-accent-tertiary: #ffe66d !important;      /* coin gold */
    --world-accent-quaternary: #a8e6cf !important;    /* mint green */
    --world-accent-quinary: #ffb347 !important;       /* orange power-up */

    /* Borders & highlights */
    --world-border: #3d3d6b !important;               /* cabinet edge */
    --world-border-soft: #2d2d4a !important;          /* soft bezel */
    --world-border-strong: #5a5a8a !important;        /* lit edge */
    --world-highlight: #fff0b3 !important;            /* phosphor glow */
    --world-highlight-soft: #ffe080 !important;       /* soft phosphor */

    /* Semantic — retro meanings */
    --world-danger: #ff4444 !important;               /* game over red */
    --world-success: #44ff44 !important;              /* 1-up green */
    --world-warning: #ffaa00 !important;              /* warning amber */
    --world-info: #44aaff !important;                 /* info blue */

    /* Inks (text on accent) */
    --world-accent-ink: #3d0d0d !important;           /* dark on red */
    --world-accent-secondary-ink: #0d2d2d !important; /* dark on teal */
    --world-on-accent: #1a0d0d !important;            /* universal */

    /* Status accents */
    --world-status-accent: #ff6b6b !important;
    --world-status-accent-secondary: #4ecdc4 !important;

    /* Geometry — pixel perfect */
    --world-radius: 4px !important;                   /* crisp pixels */
    --world-control: 4px !important;                  /* pixel buttons */
    --world-icon: 16px !important;                    /* 16x16 sprites */
    --world-header: 0px !important;                   /* flat headers */

    /* Glass/surface system — CRT clarity */
    --surface-card-opacity: 96% !important;
    --surface-panel-opacity: 98% !important;
    --surface-dense-opacity: 99% !important;
    --surface-elevated-opacity: 99% !important;
    --surface-modal-opacity: 99% !important;
    --surface-blur: 0px !important;                   /* no blur - crisp pixels */
    --surface-border-opacity: 60% !important;
    --surface-shadow-opacity: 35% !important;

    /* Shadow colors — CRT depth */
    --world-shadow: color-mix(in srgb, #000011 95%, transparent) !important;
    --world-shadow-strong: color-mix(in srgb, #000011 98%, transparent) !important;
    --world-shadow-colored: color-mix(in srgb, var(--world-accent) 15%, #000011 85%) !important;
    --world-glow: color-mix(in srgb, var(--world-accent) 50%, transparent) !important;
    --world-glow-teal: color-mix(in srgb, var(--world-accent-secondary) 45%, transparent) !important;
    --world-glow-gold: color-mix(in srgb, var(--world-accent-tertiary) 40%, transparent) !important;

    /* Retro-specific */
    --retro-scanline-opacity: 0.08 !important;
    --retro-phosphor: #00ff0010 !important;
    --retro-crt-curve: 0 !important;
  }

  /* ── Light mode (arcade attract mode) ── */
  html[data-world="retro-pixel-arcade"][data-mode="light"] {
    --world-background: #f0f0e8;           /* cream cabinet */
    --world-deep: #e0e0d8;                 /* light bezel */
    --world-surface: #fafaf5;              /* bright screen */
    --world-elevated: #f0f0e8;             /* raised UI */

    --world-text: #2d2d1a;                 /* dark ink */
    --world-secondary: #5d5d3a;            /* muted ink */
    --world-muted: #8d8d6a !important;                /* faded ink */
    --world-faint: #aaa07a !important;                /* marginalia */

    --world-accent: #cc3333;               /* player 1 red */
    --world-accent-hover: #dd5555 !important;
    --world-accent-secondary: #22aa99;     /* player 2 teal */
    --world-accent-tertiary: #ccaa00 !important;      /* coin gold */
    --world-accent-quaternary: #66cc88 !important;    /* mint green */
    --world-accent-quinary: #cc8800 !important;       /* orange */

    --world-border: #a0a080;               /* wood edge */
    --world-border-soft: #c0c0a0 !important;          /* soft wood */
    --world-border-strong: #808060 !important;        /* dark wood */
    --world-highlight: #fff8cc;            /* paper highlight */
    --world-highlight-soft: #fff0a0 !important;

    --world-danger: #cc0000;
    --world-success: #228822;
    --world-warning: #cc7700 !important;
    --world-info: #2266cc !important;

    --world-accent-ink: #fff8cc;
    --world-accent-secondary-ink: #e8fff8 !important;
    --world-on-accent: #f0f0e8;

    --world-status-accent: #cc3333;
    --world-status-accent-secondary: #22aa99;

    --world-radius: 4px !important;
    --world-control: 4px !important;
    --world-icon: 16px !important;
    --world-header: 0px !important;

    --surface-card-opacity: 94% !important;
    --surface-panel-opacity: 96% !important;
    --surface-dense-opacity: 98% !important;
    --surface-elevated-opacity: 99% !important;
    --surface-modal-opacity: 99% !important;
    --surface-blur: 0px !important;
    --surface-border-opacity: 50% !important;
    --surface-shadow-opacity: 20% !important;

    --world-shadow: color-mix(in srgb, #2d2d1a 25%, transparent) !important;
    --world-shadow-strong: color-mix(in srgb, #2d2d1a 35%, transparent) !important;
    --world-shadow-colored: color-mix(in srgb, var(--world-accent) 12%, #2d2d1a 28%) !important;
    --world-glow: color-mix(in srgb, var(--world-accent) 35%, transparent) !important;
    --world-glow-teal: color-mix(in srgb, var(--world-accent-secondary) 30%, transparent) !important;
    --world-glow-gold: color-mix(in srgb, var(--world-accent-tertiary) 28%, transparent) !important;

    --retro-scanline-opacity: 0.04 !important;
    --retro-phosphor: #00aa0008 !important;
    --retro-crt-curve: 0 !important;
  }
}

/* ── World Preview (theme selector card) ── */
@media screen {
  .world-preview[data-world="retro-pixel-arcade"] .world-portal-art {
    background:
      /* CRT screen */
      linear-gradient(180deg, #0a0a12 0%, #1a1a2e 100%),
      /* Scanlines */
      repeating-linear-gradient(0deg,
        transparent 0 2px,
        rgba(0, 255, 0, 0.03) 2px 4px),
      /* Pixel corner decorations */
      radial-gradient(8px 8px at 8px 8px, #ff6b6b, transparent),
      radial-gradient(8px 8px at calc(100% - 8px) 8px, #4ecdc4, transparent),
      radial-gradient(8px 8px at 8px calc(100% - 8px), #ffe66d, transparent),
      radial-gradient(8px 8px at calc(100% - 8px) calc(100% - 8px), #a8e6cf, transparent) !important;
    background-size: 100% 100%, 100% 4px, 16px 16px, 16px 16px, 16px 16px !important;
    image-rendering: pixelated;
    opacity: 1 !important;
    filter: none !important;
    border: 3px solid #222 !important;
    border-radius: 4px !important;
    box-shadow:
      inset 0 0 0 2px #111,
      inset 0 0 0 4px #333,
      0 8px 0 0 #0a0a12,
      0 12px 24px -8px #0008 !important;
  }

  .world-preview[data-world="retro-pixel-arcade"] .world-sample-card {
    border: 2px solid var(--world-border-strong) !important;
    border-radius: 4px !important;
    background: var(--world-surface) !important;
    box-shadow:
      4px 4px 0 0 var(--world-border),
      8px 8px 0 0 var(--world-border-soft) !important;
    image-rendering: pixelated;
  }

  .world-preview[data-world="retro-pixel-arcade"] .world-sample-heading {
    background:
      repeating-linear-gradient(90deg,
        var(--world-accent) 0 8px,
        var(--world-accent-secondary) 8px 16px,
        var(--world-accent-tertiary) 16px 24px,
        var(--world-accent-quaternary) 24px 32px) !important;
    background-size: 32px 100% !important;
    color: var(--world-accent-ink) !important;
    padding: 4px 8px !important;
    font-family: "Space Mono", monospace !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
}

/* ── CRT Scanline Overlay (applied via data-retro-scanlines) ── */
@media screen {
  html[data-world="retro-pixel-arcade"][data-retro-scanlines="on"]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(0deg,
      transparent 0 2px,
      rgba(0, 0, 0, var(--retro-scanline-opacity)) 2px 4px);
    opacity: 1;
    animation: retro-scanline-flicker 0.12s steps(1) infinite;
  }

  html[data-world="retro-pixel-arcade"][data-retro-scanlines="on"][data-mode="light"]::before {
    background: repeating-linear-gradient(0deg,
      transparent 0 2px,
      rgba(0, 0, 0, var(--retro-scanline-opacity)) 2px 4px);
  }

  @keyframes retro-scanline-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; }
  }

  /* Phosphor ghosting */
  html[data-world="retro-pixel-arcade"][data-retro-phosphor="on"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: var(--retro-phosphor);
    mix-blend-mode: screen;
    opacity: 0.15;
    animation: retro-phosphor-pulse 4s ease-in-out infinite alternate;
  }

  @keyframes retro-phosphor-pulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
  }
}

/* ── Palette Cycle Variants (applied via data-retro-palette) ── */
@media screen {
  html[data-world="retro-pixel-arcade"][data-retro-palette="original"] {
    --world-accent: #ff6b6b !important;        /* red */
    --world-accent-secondary: #4ecdc4 !important; /* teal */
    --world-accent-tertiary: #ffe66d !important;  /* gold */
    --world-accent-quaternary: #a8e6cf !important; /* mint */
    --world-accent-quinary: #ffb347 !important;   /* orange */
  }

  html[data-world="retro-pixel-arcade"][data-retro-palette="pastel"] {
    --world-accent: #ff9aa2 !important;        /* pink */
    --world-accent-secondary: #a8d0e6 !important; /* sky */
    --world-accent-tertiary: #fff59d !important;  /* cream */
    --world-accent-quaternary: #c5e1a5 !important; /* light green */
    --world-accent-quinary: #ffcc80 !important;   /* peach */
  }

  html[data-world="retro-pixel-arcade"][data-retro-palette="neon"] {
    --world-accent: #ff0066 !important;        /* hot pink */
    --world-accent-secondary: #00ffff !important; /* cyan */
    --world-accent-tertiary: #ffff00 !important;  /* yellow */
    --world-accent-quaternary: #66ff66 !important;  /* lime */
    --world-accent-quinary: #ff6600 !important;   /* orange */
  }

  html[data-world="retro-pixel-arcade"][data-retro-palette="gameboy"] {
    --world-accent: #306230 !important;        /* dark green */
    --world-accent-secondary: #8bac0f !important; /* mid green */
    --world-accent-tertiary: #9bbc0f !important;  /* light green */
    --world-accent-quaternary: #c4dc7e !important; /* pale green */
    --world-accent-quinary: #e8f5c4 !important;   /* lightest */
  }
}

/* ── CRT Curve (applied via data-retro-curve) ── */
@media screen {
  html[data-world="retro-pixel-arcade"][data-retro-curve="subtle"] {
    --retro-crt-curve: 20px !important;
  }
  html[data-world="retro-pixel-arcade"][data-retro-curve="strong"] {
    --retro-crt-curve: 60px !important;
  }
}