/* ============================================================
   CCG MODE CSS — SYSTEM PERSONALITY LAYER
   Phase P18 — Header Nav Hover Refinement
   ------------------------------------------------------------
   • Unified timing philosophy with buttons
   • Glow bloom → decay (no snap)
   • ZERO layout or spacing changes
============================================================ */

/* ============================================================
   DEFAULT (C64 MODE)
============================================================ */

:root,
html[data-ccg-mode="c64"] {
    --ccg-primary: #00f0ff;
    --ccg-secondary: #0094ff;
    --ccg-accent: #33ffff;
    --ccg-glow: rgba(0,240,255,0.8);
    --ccg-bg-tint: rgba(0,40,80,0.6);
    --ccg-success: #67ff8f;
    --ccg-success-rgb: 103, 255, 143;
    --ccg-danger: #ff77d6;
    --ccg-danger-rgb: 255, 119, 214;
    --ccg-warning: #ffc65f;
    --ccg-warning-rgb: 255, 198, 95;

    --ccg-panel-bg: rgba(5,15,30,0.85);
    --ccg-btn-bg: linear-gradient(145deg,#003a66,#0066aa);
}

html[data-ccg-mode="amiga"] {
    --ccg-primary: #ff3eb5;
    --ccg-secondary: #c94bff;
    --ccg-accent: #ff9bdc;
    --ccg-glow: rgba(255,62,181,0.75);
    --ccg-bg-tint: rgba(35,35,40,0.75);
    --ccg-success: #a8ffd6;
    --ccg-success-rgb: 168, 255, 214;
    --ccg-danger: #ff9bdc;
    --ccg-danger-rgb: 255, 155, 220;
    --ccg-warning: #ffcf8f;
    --ccg-warning-rgb: 255, 207, 143;

    --ccg-panel-bg: rgba(30,30,35,0.9);
    --ccg-btn-bg: linear-gradient(145deg,#444,#666);
}

body[data-ccg-mode="c64"] {
    --accent-rgb: 0, 240, 255;
    --accent-main: #00f0ff;
    --accent-soft: #33ffff;
    --ccg-header-glow: rgba(0,240,255,0.5);
    --ccg-header-glow-strong: rgba(0,240,255,0.7);
    --ccg-header-halo: rgba(0,240,255,0.22);
    --ccg-header-sheen: rgba(69,216,255,0.28);
    --ccg-header-edge: rgba(0,240,255,0.32);

    --ccg-neon-main:
        0 0 6px rgba(0,240,255,0.45),
        0 0 14px rgba(0,240,255,0.25);

    --ccg-neon-strong:
        0 0 10px rgba(0,240,255,0.65),
        0 0 22px rgba(0,240,255,0.4);

    --ccg-nav-panel: linear-gradient(135deg, rgba(6, 14, 30, 0.92), rgba(2, 8, 18, 0.96));
    --ccg-nav-panel-border: rgba(0, 240, 255, 0.24);

    --ccg-ease-ui: cubic-bezier(.25,.8,.35,1);

    --ccg-divider-rgb: 0, 240, 255;
    --ccg-divider-secondary-rgb: 196, 255, 255;
    --ccg-divider-halo-opacity: 0.55;
}

/* ============================================================
   AMIGA MODE — WORKBENCH 2.0 INSPIRED
============================================================ */

body[data-ccg-mode="amiga"] {
    --accent-rgb: 255, 62, 181;
    --accent-main: #ff3eb5;
    --accent-soft: #ff9bdc;
    --ccg-header-glow: rgba(255,62,181,0.38);
    --ccg-header-glow-strong: rgba(255,62,181,0.55);
    --ccg-header-halo: rgba(255,62,181,0.18);
    --ccg-header-sheen: rgba(255,155,220,0.18);
    --ccg-header-edge: rgba(255,155,220,0.28);

    --amiga-surface: linear-gradient(160deg, rgba(28, 34, 48, 0.96), rgba(10, 12, 20, 0.98));
    --amiga-surface-strong: linear-gradient(165deg, rgba(36, 42, 58, 0.98), rgba(12, 14, 22, 0.99));
    --amiga-border: rgba(148, 170, 200, 0.28);
    --amiga-titlebar: linear-gradient(135deg, rgba(30, 36, 52, 0.97), rgba(12, 14, 22, 0.98));
    --amiga-shadow:
        0 16px 38px rgba(4, 6, 12, 0.82),
        inset 0 0 0 1px rgba(150, 170, 200, 0.08);
    --amiga-header-shadow:
        0 18px 42px rgba(4, 6, 12, 0.78),
        0 0 16px rgba(92, 127, 163, 0.18),
        inset 0 -1px 0 rgba(148, 170, 200, 0.45);

    --panel-bg: var(--amiga-surface);
    --panel-bg-strong: var(--amiga-surface-strong);
    --panel-shadow: var(--amiga-shadow);

    --ccg-neon-main:
        0 0 4px rgba(255,62,181,0.2),
        0 0 8px rgba(255,62,181,0.12);

    --ccg-neon-strong:
        0 0 6px rgba(255,62,181,0.28),
        0 0 12px rgba(255,62,181,0.18);

    --ccg-nav-panel: linear-gradient(150deg, rgba(28, 30, 40, 0.95), rgba(12, 14, 20, 0.97));
    --ccg-nav-panel-border: rgba(255, 155, 220, 0.22);

    --ccg-ease-ui: cubic-bezier(.22,.9,.32,1);

    --ccg-divider-rgb: 255, 62, 181;
    --ccg-divider-secondary-rgb: 201, 75, 255;
    --ccg-divider-halo-opacity: 0.5;
}

/* ============================================================
   PAGE AURA — MODED WOW HALO
============================================================ */

body[data-ccg-mode] .ccg-main {
    position: relative;
    z-index: 1;
}

body[data-ccg-mode] .ccg-main::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    border-radius: 28px;
    filter: none;
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
}

body[data-ccg-mode="c64"] .ccg-main::before {
    background: radial-gradient(circle at 30% 18%, rgba(0,170,255,0.28), transparent 55%);
}

body[data-ccg-mode="amiga"] .ccg-main::before {
    background: radial-gradient(circle at 70% 20%, rgba(122,136,155,0.24), transparent 62%);
}

/* ============================================================
   HEADER NAV — BASELINE (NO VISUAL CHANGE)
============================================================ */

body[data-ccg-mode] .ccg-nav__link {
    transition:
        color var(--ccg-hover-duration) var(--ccg-ease-ui),
        text-shadow var(--ccg-hover-duration) var(--ccg-ease-ui),
        filter var(--ccg-hover-duration) var(--ccg-ease-ui);

    will-change: color, text-shadow;
}

/* ============================================================
   HEADER NAV — HOVER (BLOOM THEN SETTLE)
============================================================ */

body[data-ccg-mode] .ccg-nav__link:hover {
    color: var(--accent-soft);

    text-shadow:
        0 0 6px rgba(0,0,0,0.85),
        var(--ccg-neon-main);

    filter: brightness(1.08);
}

/* ============================================================
   HEADER NAV — ACTIVE LINK (CURRENT PAGE)
============================================================ */

body[data-ccg-mode] .ccg-nav__link--active {
    color: var(--accent-main);

    text-shadow:
        0 0 8px rgba(0,0,0,0.9),
        var(--ccg-neon-strong);
}

/* ============================================================
   HEADER NAV — KEYBOARD FOCUS (QUIET, CLEAN)
============================================================ */

body[data-ccg-mode] .ccg-nav__link:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb),0.55);
    outline-offset: 2px;

    text-shadow:
        0 0 0 rgba(0,0,0,0),
        0 0 6px rgba(var(--accent-rgb),0.45);
}

/* ============================================================
   BUTTONS (UNCHANGED — CONTINUITY)
============================================================ */

body[data-ccg-mode] .ccg-btn--primary {
    transition:
        box-shadow var(--ccg-hover-duration) var(--ccg-ease-ui),
        transform var(--ccg-hover-duration) var(--ccg-ease-ui),
        filter var(--ccg-hover-duration) var(--ccg-ease-ui);

    box-shadow:
        0 0 10px rgba(var(--accent-rgb),0.45),
        inset 0 0 12px rgba(var(--accent-rgb),0.25);
}

body[data-ccg-mode] .ccg-btn--primary:hover {
    transform: translateY(-1px) scale(1.03);

    box-shadow:
        var(--ccg-neon-strong),
        inset 0 0 14px rgba(var(--accent-rgb),0.35);
}

/* ============================================================
   HEADER NEON STRIP (UNCHANGED)
============================================================ */

body[data-ccg-mode] .ccg-header-neon-strip {
    box-shadow:
        0 0 10px rgba(var(--accent-rgb),0.6),
        0 0 18px rgba(var(--accent-rgb),0.35);
}

/* ============================================================
   AMIGA SURFACE SWAPS — HEADER, CARDS, PANELS
============================================================ */

body[data-ccg-mode="amiga"] .ccg-header {
    background:
        var(--amiga-titlebar),
        radial-gradient(circle at 18% 15%, var(--ccg-header-halo), transparent 52%),
        radial-gradient(circle at 82% 5%, var(--ccg-header-sheen), transparent 48%);
    box-shadow:
        var(--amiga-header-shadow),
        0 0 22px var(--ccg-header-edge);
}

body[data-ccg-mode="amiga"] .ccg-game-card,
body[data-ccg-mode="amiga"] .ccg-card,
body[data-ccg-mode="amiga"] .ccg-genre-tile,
body[data-ccg-mode="amiga"] .ccg-feature-card {
    background: var(--amiga-surface);
    border-color: var(--amiga-border);
    box-shadow: var(--amiga-shadow);
}

.ccg-header-inner {
    position: relative;
}

/* ============================================================
   MODE TOGGLE HINT
============================================================ */

.ccg-mode-hint {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: rgba(120, 220, 255, 0.35);
    text-shadow:
        0 0 6px rgba(120,220,255,0.25),
        0 0 12px rgba(120,220,255,0.15);
    pointer-events: none;
    user-select: none;
    opacity: 0.35;
    white-space: nowrap;
    z-index: 2;
    max-width: 100%;
    overflow: visible;
    will-change: opacity;
}

html[data-ccg-mode="c64"] .ccg-mode-hint,
body[data-ccg-mode="c64"] .ccg-mode-hint {
    color: rgba(120,220,255,0.35);
}

html[data-ccg-mode="amiga"] .ccg-mode-hint,
body[data-ccg-mode="amiga"] .ccg-mode-hint {
    color: rgba(255,140,220,0.35);
    text-shadow:
        0 0 6px rgba(255,140,220,0.25),
        0 0 12px rgba(255,140,220,0.15);
}

@keyframes ccgHintPulse {
    0%,100% { opacity: 0.25; }
    50% { opacity: 0.5; }
}

@media (min-width: 1024px) {
    .ccg-mode-hint {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
        transform: translateY(-100%);
    }
}

body[data-ccg-mode] .ccg-header,
body[data-ccg-mode] .ccg-header-inner,
body[data-ccg-mode] .ccg-header-actions,
body[data-ccg-mode] .ccg-mode-toggle,
body[data-ccg-mode] .ccg-mode-toggle__pill {
    overflow: visible;
}

html[data-ccg-page="home"] body[data-ccg-mode] .ccg-header-inner,
html[data-ccg-page="home"] body[data-ccg-mode] .ccg-header-actions {
    overflow: clip;
}

@supports not (overflow: clip) {
    html[data-ccg-page="home"] body[data-ccg-mode] .ccg-header-inner,
    html[data-ccg-page="home"] body[data-ccg-mode] .ccg-header-actions {
        overflow: hidden;
    }
}

/* ============================================================
   MODE TOGGLE — NEON WOW PILL
============================================================ */

.ccg-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.72));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 14px rgba(var(--accent-rgb), 0.35),
        inset 0 0 18px rgba(var(--accent-rgb), 0.18);
    gap: 8px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.ccg-mode-toggle__pill {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    width: 100%;
    border-radius: 999px;
    isolation: isolate;
}

.ccg-mode-toggle__label {
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(224, 234, 250, 0.7);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition:
        color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease,
        filter 200ms ease,
        opacity 200ms ease;
}

.ccg-mode-toggle__label--c64 { color: rgba(200, 228, 245, 0.7); }
.ccg-mode-toggle__label--amiga { color: rgba(190, 206, 226, 0.7); }

.ccg-mode-toggle__thumb {
    position: absolute;
    inset: 4px;
    width: calc(50% - 6px);
    border-radius: 999px;
    background: linear-gradient(135deg, #00aaff, #7fe9ff);
    box-shadow:
        0 0 14px rgba(0, 255, 255, 0.45),
        inset 0 0 10px rgba(0,0,0,0.4);
    transition: transform 360ms var(--ccg-ease-ui), box-shadow 360ms var(--ccg-ease-ui);
    z-index: 1;
}

body[data-ccg-mode="c64"] .ccg-mode-toggle__pill::before,
body[data-ccg-mode="amiga"] .ccg-mode-toggle__pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

body[data-ccg-mode="c64"] .ccg-mode-toggle__pill::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 3px
        );
    opacity: 0.35;
}

body[data-ccg-mode="c64"] .ccg-mode-toggle {
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 0 18px rgba(0, 220, 255, 0.55),
        inset 0 0 20px rgba(0, 220, 255, 0.25);
}

body[data-ccg-mode="c64"] .ccg-mode-toggle__label--c64 {
    color: #e9fcff;
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.38), rgba(0, 80, 160, 0.32));
    box-shadow:
        inset 0 0 0 1px rgba(120, 230, 255, 0.55),
        0 0 12px rgba(0, 210, 255, 0.55),
        0 0 20px rgba(0, 150, 255, 0.35);
    text-shadow:
        0 0 8px rgba(0, 210, 255, 0.8),
        0 0 14px rgba(0, 140, 255, 0.6);
    filter: brightness(1.08);
}

body[data-ccg-mode="c64"] .ccg-mode-toggle__label--amiga {
    opacity: 0.55;
    color: rgba(200, 210, 230, 0.55);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__label--amiga {
    color: #f8f5ff;
    background: linear-gradient(135deg, rgba(230, 232, 238, 0.92), rgba(170, 176, 188, 0.65));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        0 0 12px rgba(255, 120, 226, 0.45),
        0 0 20px rgba(170, 110, 215, 0.35);
    text-shadow:
        0 0 8px rgba(255, 180, 240, 0.65),
        0 0 12px rgba(160, 100, 210, 0.4);
    filter: brightness(1.05);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__label--c64 {
    opacity: 0.55;
    color: rgba(176, 194, 214, 0.6);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle {
    border: 1px solid #7c8796;
    border-top-color: #f1f3f6;
    border-left-color: #e6e9ee;
    background: #d7dbe2;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.85),
        inset -1px -1px 0 rgba(62, 73, 89, 0.45),
        0 4px 10px rgba(36, 58, 95, 0.2);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__pill::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    opacity: 0.35;
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__pill {
    background: #cfd4dc;
    border: 1px solid #7b8798;
    border-top-color: #f1f3f6;
    border-left-color: #e5e8ee;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.8),
        inset -1px -1px 0 rgba(62, 73, 89, 0.35);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle:hover,
body[data-ccg-mode="amiga"] .ccg-mode-toggle:focus-within {
    border-color: #687384;
    border-top-color: #f4f6f9;
    border-left-color: #e9edf3;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.9),
        inset -1px -1px 0 rgba(62, 73, 89, 0.5),
        0 3px 8px rgba(36, 58, 95, 0.2);
}

/* ============================================================
   MODE TOGGLE THUMB
============================================================ */

body[data-ccg-mode="c64"] .ccg-mode-toggle__thumb {
    background: linear-gradient(135deg, #00aaff, #7fe9ff);
    transform: translateX(0%);
    box-shadow:
        0 0 18px rgba(0, 200, 255, 0.55),
        inset 0 0 10px rgba(0,0,0,0.45);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__thumb {
    background: linear-gradient(135deg, #e2e6ee, #b7becb);
    border: 1px solid #7b8798;
    border-top-color: #f2f4f7;
    border-left-color: #e7eaf0;
    transform: translateX(100%);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.9),
        inset -1px -1px 0 rgba(62, 73, 89, 0.5),
        0 0 12px rgba(255, 120, 226, 0.45),
        0 0 18px rgba(160, 100, 210, 0.35);
}

body[data-ccg-mode="amiga"] .ccg-mode-toggle__thumb::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 35% 35%, #dbe7ff, #6c86b8 70%);
    box-shadow: none;
}

/* ============================================================
   MODE BACKGROUND TINT LAYER
============================================================ */

html[data-ccg-mode] .ccg-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ccg-bg-tint);
    pointer-events: none;
    transition: background .4s ease;
}

/* ============================================================
   MODE BUTTON SYSTEM
============================================================ */

html[data-ccg-mode] button,
html[data-ccg-mode] .game-pill,
html[data-ccg-mode] .ccg-nav__link,
html[data-ccg-mode] .admin-btn,
html[data-ccg-mode] input[type="button"],
html[data-ccg-mode] input[type="submit"] {
    background: var(--ccg-btn-bg);
    border: 1px solid var(--ccg-primary);
    color: #fff;
    box-shadow:
        0 0 6px var(--ccg-glow),
        inset 0 0 4px var(--ccg-glow);
    transition: all .2s ease;
}

html[data-ccg-mode] button:hover,
html[data-ccg-mode] .game-pill:hover,
html[data-ccg-mode] .ccg-nav__link:hover,
html[data-ccg-mode] .admin-btn:hover,
html[data-ccg-mode] input[type="button"]:hover,
html[data-ccg-mode] input[type="submit"]:hover {
    box-shadow:
        0 0 12px var(--ccg-glow),
        inset 0 0 6px var(--ccg-glow);
}

html[data-ccg-mode] button:active,
html[data-ccg-mode] .game-pill:active,
html[data-ccg-mode] .ccg-nav__link:active,
html[data-ccg-mode] .admin-btn:active,
html[data-ccg-mode] input[type="button"]:active,
html[data-ccg-mode] input[type="submit"]:active {
    transform: scale(.96);
}

/* ============================================================
   MODE PANELS, CARDS, SECTIONS
============================================================ */

html[data-ccg-mode] .ccg-card,
html[data-ccg-mode] .game-section,
html[data-ccg-mode] .admin-panel,
html[data-ccg-mode] .related-carousel,
html[data-ccg-mode] .ccg-modal-content {
    background: var(--ccg-panel-bg);
    border: 1px solid var(--ccg-primary);
    box-shadow:
        0 0 10px var(--ccg-glow),
        inset 0 0 6px var(--ccg-glow);
}

/* ============================================================
   MODE NAV IDENTITY
============================================================ */

html[data-ccg-mode] .ccg-nav__link {
    position: relative;
}

html[data-ccg-mode] .ccg-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--ccg-primary);
    box-shadow: 0 0 6px var(--ccg-glow);
    transition: width .25s ease;
}

html[data-ccg-mode] .ccg-nav__link:hover::after {
    width: 100%;
}

/* ============================================================
   MODE TRANSITION FLASH
============================================================ */

.ccg-mode-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 99999;
}

.c64-flash,
.amiga-flash {
    background:
        linear-gradient(120deg,
            transparent 40%,
            rgba(var(--accent-rgb), 0.9),
            transparent 60%);
    animation: ccg-flash .35s ease;
}

.ccg-mode-flash--lite {
    background: radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.35), transparent 70%);
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

@keyframes ccg-flash {
    0% { opacity: 0; }
    30% { opacity: .9; }
    100% { opacity: 0; }
}

/* ============================================================
   MODE MICRO ANIMATIONS
============================================================ */

html[data-ccg-mode="c64"] .game-hero__title,
html[data-ccg-mode="c64"] .ccg-card {
    animation: ccg-scan 6s linear infinite;
}

@keyframes ccg-scan {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
    100% { filter: brightness(1); }
}

html[data-ccg-mode="amiga"] .game-hero__title,
html[data-ccg-mode="amiga"] .ccg-card {
    animation: ccg-pulse 4s ease-in-out infinite;
}

@keyframes ccg-pulse {
    0% { box-shadow: 0 0 6px var(--ccg-glow); }
    50% { box-shadow: 0 0 14px var(--ccg-glow); }
    100% { box-shadow: 0 0 6px var(--ccg-glow); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ccg-mode] .game-hero__title,
    html[data-ccg-mode] .ccg-card {
        animation: none;
    }

    .ccg-mode-hint {
        animation: none;
    }

    .ccg-mode-flash,
    .c64-flash,
    .amiga-flash,
    .ccg-mode-flash--lite {
        animation: none;
        transition: none;
    }
}

@media (max-width: 640px) {
    .ccg-mode-hint {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        bottom: calc(100% + 4px);
    }
}

@media (max-width: 768px) {
    .ccg-mode-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .ccg-mode-toggle__pill {
        padding: 8px 10px;
    }
}

@media (max-width: 768px) {
    .ccg-mode-hint {
        font-size: 0.82rem;
        margin-bottom: 10px;
        opacity: 0.55;
        letter-spacing: 0.18em;
        text-shadow:
            0 0 8px rgba(120,220,255,0.35),
            0 0 16px rgba(120,220,255,0.25);
        display: block;
        min-height: 1em;
        line-height: 1.4;
        white-space: nowrap;
        overflow: visible;
    }

    .ccg-mode-amiga .ccg-mode-hint,
    body[data-ccg-mode="amiga"] .ccg-mode-hint {
        text-shadow:
            0 0 8px rgba(255,140,220,0.35),
            0 0 16px rgba(255,140,220,0.25);
    }
}

/* ============================================================
   OMEGA UI CONTRACT TOKENS
============================================================ */
:root[data-mode="c64"],
:root[data-ccg-mode="c64"] {
    --btn-bg: #02aaff;
    --btn-border: #01a1e0;
    --btn-hover: #19beff;
    --btn-glow: drop-shadow(0 0 8px rgba(0,170,255,0.7));
}

:root[data-mode="amiga"],
:root[data-ccg-mode="amiga"] {
    --btn-bg: #666;
    --btn-border: #444;
    --btn-hover: #888;
    --btn-glow: none;
}

.ccg-button,
.ccg-btn {
    background-color: var(--btn-bg);
    border: 2px solid var(--btn-border);
    filter: var(--btn-glow) !important;
    border-radius: 0 !important;
    transition: all 0.15s ease-in-out;
}

.ccg-button:hover,
.ccg-btn:hover {
    background-color: var(--btn-hover);
}

.game-card .btn,
.game-card .button {
    border-radius: 0 !important;
    filter: none !important;
}