/* ============================================================
   Vue Islands Theme — CineStream CSS Override
   Maps all Vue components to main.css design tokens
   Supports both light and dark mode via prefers-color-scheme
   ============================================================ */

/* ── CSS Custom Properties scoped to Vue islands ──────── */

#search-island,
#carousel-island,
#charts-island {
    /* Light mode (default) */
    --v-bg: #fafafa;
    --v-bg-surface: #ffffff;
    --v-bg-elevated: #f5f5f7;
    --v-bg-hover: #eef0f2;
    --v-bg-subtle: #f0f0f3;
    --v-border: #e5e7eb;
    --v-border-bright: #d1d5db;
    --v-border-subtle: #f3f4f6;
    --v-text-primary: #111827;
    --v-text-secondary: #6b7280;
    --v-text-muted: #71767F;
    /*--v-text-muted was #9ca3af*/
    --v-text-data: #374151;
    --v-accent: #6366f1;
    --v-accent-dim: #4f46e5;
    --v-accent-glow: rgba(99, 102, 241, 0.12);
    --v-accent-subtle: rgba(99, 102, 241, 0.06);
    --v-green: #10b981;
    --v-green-subtle: rgba(16, 185, 129, 0.1);
    --v-amber: #f59e0b;
    --v-amber-subtle: rgba(245, 158, 11, 0.1);
    --v-red: #ef4444;
    --v-red-subtle: rgba(239, 68, 68, 0.1);
    --v-coral: #f472b6;
    --v-coral-subtle: rgba(244, 114, 182, 0.1);
    --v-radius-sm: 6px;
    --v-radius-md: 10px;
    --v-radius-lg: 14px;
    --v-font-ui: "Inter", system-ui, -apple-system, sans-serif;
    --v-font-data: "JetBrains Mono", "SF Mono", "Courier New", monospace;
    --v-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    --v-shadow-md:
        0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --v-chart-1: #4f46e5;
    --v-chart-1-fill: rgba(79, 70, 229, 0.1);
    --v-chart-2: #db2777;
    --v-chart-2-fill: rgba(219, 39, 119, 0.1);
    --v-chart-3: #059669;
    --v-chart-3-fill: rgba(5, 150, 105, 0.1);
    --v-chart-4: #d97706;
    --v-chart-4-fill: rgba(217, 119, 6, 0.1);
    --v-chart-5: #7c3aed;
    --v-chart-5-fill: rgba(124, 58, 237, 0.1);
    --v-chart-6: #ea580c;
    --v-chart-6-fill: rgba(234, 88, 12, 0.1);
    --v-chart-7: #dc2626;
    --v-chart-7-fill: rgba(220, 38, 38, 0.1);
}

@media (prefers-color-scheme: dark) {
    #search-island,
    #carousel-island,
    #charts-island {
        --v-bg: #0c0c0e;
        --v-bg-surface: #141416;
        --v-bg-elevated: #1a1a1e;
        --v-bg-hover: #222226;
        --v-bg-subtle: #1e1e22;
        --v-border: #27272a;
        --v-border-bright: #3f3f46;
        --v-border-subtle: #1c1c1f;
        --v-text-primary: #fafafa;
        --v-text-secondary: #a1a1aa;
        --v-text-muted: #71717a;
        --v-text-data: #d4d4d8;
        --v-accent: #818cf8;
        --v-accent-dim: #6366f1;
        --v-accent-glow: rgba(129, 140, 248, 0.15);
        --v-accent-subtle: rgba(129, 140, 248, 0.08);
        --v-green: #34d399;
        --v-green-subtle: rgba(52, 211, 153, 0.1);
        --v-amber: #fbbf24;
        --v-amber-subtle: rgba(251, 191, 36, 0.1);
        --v-red: #f87171;
        --v-red-subtle: rgba(248, 113, 113, 0.1);
        --v-coral: #f9a8d4;
        --v-coral-subtle: rgba(249, 168, 212, 0.1);
        --v-shadow-sm:
            0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
        --v-shadow-md:
            0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
        --v-chart-1: #818cf8;
        --v-chart-1-fill: rgba(129, 140, 248, 0.12);
        --v-chart-2: #f472b6;
        --v-chart-2-fill: rgba(244, 114, 182, 0.12);
        --v-chart-3: #34d399;
        --v-chart-3-fill: rgba(52, 211, 153, 0.12);
        --v-chart-4: #fbbf24;
        --v-chart-4-fill: rgba(251, 191, 36, 0.12);
        --v-chart-5: #a78bfa;
        --v-chart-5-fill: rgba(167, 139, 250, 0.12);
        --v-chart-6: #fb923c;
        --v-chart-6-fill: rgba(251, 146, 60, 0.12);
        --v-chart-7: #f87171;
        --v-chart-7-fill: rgba(248, 113, 113, 0.12);
    }
}

/* ═══════════════════════════════════════════════════════════
   SEARCH ISLAND — SearchPage.vue + FilterPanel.vue + GameTable.vue
   ═══════════════════════════════════════════════════════════ */

/* ── Search Root Layout ────────────────────────────────── */
#search-island .search-root {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100%;
    min-height: 600px;
    background: var(--v-bg);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
}

/* ── Sidebar / Filter Panel ────────────────────────────── */
#search-island .search-sidebar,
#search-island .filter-panel {
    background: var(--v-bg-surface);
    border-right: 1px solid var(--v-border);
    min-height: 100%;
    overflow-y: auto;
}

#search-island .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--v-border);
}

#search-island .filter-title {
    font-family: var(--v-font-data);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--v-text-muted);
    text-transform: uppercase;
}

#search-island .reset-btn {
    font-family: var(--v-font-data);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--v-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--v-radius-sm);
    transition: all 0.15s ease;
}

#search-island .reset-btn:hover {
    color: var(--v-text-secondary);
    background: var(--v-bg-hover);
}

#search-island .filter-group {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--v-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#search-island .filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--v-font-data);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--v-text-muted);
    text-transform: uppercase;
}

#search-island .plus-tag {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--v-accent-dim);
    border: 1px solid var(--v-accent-glow);
    padding: 0.1rem 0.4rem;
    border-radius: var(--v-radius-sm);
    background: var(--v-accent-subtle);
}

#search-island .range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#search-island .range-sep {
    color: var(--v-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── PrimeVue Input Overrides ──────────────────────────── */
#search-island :deep(.p-inputtext),
#search-island :deep(.p-multiselect),
#search-island :deep(.p-datepicker-input),
#search-island :deep(.p-inputnumber-input) {
    background: var(--v-bg-elevated) !important;
    border-color: var(--v-border) !important;
    color: var(--v-text-primary) !important;
    font-size: 0.8125rem !important;
    font-family: var(--v-font-ui) !important;
    border-radius: var(--v-radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
}

#search-island :deep(.p-inputtext:focus),
#search-island :deep(.p-inputtext.p-focus),
#search-island :deep(.p-multiselect.p-focus),
#search-island :deep(.p-datepicker-input:focus) {
    border-color: var(--v-accent) !important;
    box-shadow: 0 0 0 3px var(--v-accent-glow) !important;
    outline: none !important;
}

#search-island :deep(.p-multiselect-chip) {
    background: var(--v-bg-hover) !important;
    color: var(--v-text-secondary) !important;
    font-size: 0.75rem !important;
    font-family: var(--v-font-data) !important;
    border-radius: var(--v-radius-sm) !important;
}

#search-island :deep(.p-chip-remove-icon) {
    color: var(--v-text-muted) !important;
}

#search-island :deep(.p-checkbox-box) {
    background: var(--v-bg-elevated) !important;
    border-color: var(--v-border) !important;
}

#search-island :deep(.p-checkbox-box.p-highlight) {
    background: var(--v-accent) !important;
    border-color: var(--v-accent) !important;
}

/* ── Main Content Area ─────────────────────────────────── */
#search-island .search-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--v-bg);
}

#search-island .search-bar {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--v-border);
    background: var(--v-bg-surface);
    min-height: 44px;
}

#search-island .result-count {
    font-family: var(--v-font-data);
    font-size: 0.8125rem;
    color: var(--v-text-muted);
    letter-spacing: 0.04em;
}

#search-island .loading-pulse {
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

#search-island .search-error {
    padding: 0.75rem 1.25rem;
    background: var(--v-red-subtle);
    border-bottom: 1px solid var(--v-red);
    color: var(--v-red);
    font-size: 0.8125rem;
    font-family: var(--v-font-data);
}

#search-island .search-error strong {
    color: var(--v-red);
    font-weight: 600;
}

/* ── Game Table ────────────────────────────────────────── */
#search-island .game-table-root {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* PrimeVue DataTable overrides */
#search-island :deep(.steam-table) {
    background: transparent !important;
    font-size: 0.875rem;
    color: var(--v-text-primary);
    font-family: var(--v-font-ui);
}

#search-island :deep(.p-datatable-header-cell) {
    background: var(--v-bg-subtle) !important;
    border-bottom: 1px solid var(--v-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--v-text-muted) !important;
    font-family: var(--v-font-data) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    padding: 0.875rem 1rem !important;
    white-space: nowrap;
    text-transform: uppercase;
}

#search-island :deep(.p-datatable-header-cell:hover) {
    background: var(--v-bg-hover) !important;
    color: var(--v-text-secondary) !important;
}

#search-island :deep(.p-datatable-sort-icon) {
    color: var(--v-text-muted) !important;
    width: 12px !important;
    height: 12px !important;
}

#search-island :deep(.p-datatable-header-cell-sorted .p-datatable-sort-icon) {
    color: var(--v-accent) !important;
}

#search-island :deep(.p-datatable-tbody > tr) {
    background: var(--v-bg-surface) !important;
    border-bottom: 1px solid var(--v-border-subtle) !important;
    transition: background 0.12s ease;
}

#search-island :deep(.p-datatable-tbody > tr:nth-child(even)) {
    background: var(--v-bg-elevated) !important;
}

#search-island :deep(.p-datatable-tbody > tr:hover) {
    background: var(--v-bg-hover) !important;
}

#search-island :deep(.p-datatable-tbody > tr > td) {
    padding: 0.625rem 1rem !important;
    border: none !important;
    vertical-align: middle;
}

/* Pagination */
#search-island :deep(.p-paginator) {
    background: var(--v-bg-surface) !important;
    border-top: 1px solid var(--v-border) !important;
    border-bottom: none !important;
    padding: 0.5rem 1rem !important;
}

#search-island :deep(.p-paginator-page),
#search-island :deep(.p-paginator-first),
#search-island :deep(.p-paginator-prev),
#search-island :deep(.p-paginator-next),
#search-island :deep(.p-paginator-last) {
    background: transparent !important;
    border: 1px solid var(--v-border) !important;
    color: var(--v-text-secondary) !important;
    border-radius: var(--v-radius-sm) !important;
    min-width: 32px !important;
    height: 32px !important;
    font-family: var(--v-font-data) !important;
    font-size: 0.8125rem !important;
    transition: all 0.12s ease;
}

#search-island :deep(.p-paginator-page:hover),
#search-island :deep(.p-paginator-first:hover),
#search-island :deep(.p-paginator-prev:hover),
#search-island :deep(.p-paginator-next:hover),
#search-island :deep(.p-paginator-last:hover) {
    background: var(--v-bg-hover) !important;
    color: var(--v-text-primary) !important;
    border-color: var(--v-border-bright) !important;
}

#search-island :deep(.p-paginator-page-selected) {
    background: var(--v-accent-subtle) !important;
    color: var(--v-accent) !important;
    border-color: var(--v-accent) !important;
    font-weight: 600;
}

/* ── Cell Content Styling ──────────────────────────────── */
#search-island .cover-img {
    width: 96px;
    height: 45px;
    object-fit: cover;
    display: block;
    border-radius: var(--v-radius-sm);
    box-shadow: var(--v-shadow-sm);
}

#search-island .game-link {
    color: var(--v-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.12s ease;
}

#search-island .game-link:hover {
    color: var(--v-accent);
    text-decoration: underline;
}

#search-island .badge {
    font-family: var(--v-font-data);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.15rem 0.4rem;
    border-radius: var(--v-radius-sm);
    flex-shrink: 0;
}

#search-island .badge-soon {
    background: var(--v-green-subtle);
    color: var(--v-green);
    border: 1px solid var(--v-green);
}

#search-island .badge-nsfw {
    background: var(--v-red-subtle);
    color: var(--v-red);
    border: 1px solid var(--v-red);
}

#search-island .mono {
    font-family: var(--v-font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--v-text-data);
}

#search-island .dim {
    color: var(--v-text-muted);
}

#search-island .locked {
    color: var(--v-text-muted);
    letter-spacing: 0.15em;
    opacity: 0.6;
}

#search-island .score-positive {
    color: var(--v-green);
    font-weight: 500;
}

#search-island .score-mixed {
    color: var(--v-amber);
    font-weight: 500;
}

#search-island .score-negative {
    color: var(--v-red);
    font-weight: 500;
}

#search-island .revenue {
    color: var(--v-green);
    font-weight: 500;
}

#search-island .price-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#search-island .price-original {
    font-family: var(--v-font-data);
    font-size: 0.75rem;
    color: var(--v-text-muted);
    text-decoration: line-through;
}

#search-island .price-discount {
    font-family: var(--v-font-data);
    font-size: 0.6875rem;
    color: var(--v-green);
    background: var(--v-green-subtle);
    border-radius: var(--v-radius-sm);
    padding: 0 0.25rem;
    width: fit-content;
}

#search-island .price-final {
    font-family: var(--v-font-data);
    font-size: 0.875rem;
    color: var(--v-text-primary);
}

#search-island .col-plus-tag {
    font-family: var(--v-font-data);
    font-size: 0.625rem;
    color: var(--v-accent-dim);
    border: 1px solid var(--v-accent-glow);
    padding: 0.1rem 0.35rem;
    border-radius: var(--v-radius-sm);
    margin-left: 0.35rem;
    letter-spacing: 0.08em;
    background: var(--v-accent-subtle);
}

#search-island .link-group {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

#search-island .ext-link {
    font-family: var(--v-font-data);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--v-text-muted);
    border: 1px solid var(--v-border);
    padding: 0.2rem 0.4rem;
    border-radius: var(--v-radius-sm);
    text-decoration: none;
    transition: all 0.12s ease;
}

#search-island .ext-link:hover {
    color: var(--v-accent);
    border-color: var(--v-accent);
    background: var(--v-accent-subtle);
}

#search-island .table-empty,
#search-island .table-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: var(--v-text-muted);
    font-family: var(--v-font-data);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════
   CAROUSEL ISLAND — MediaCarousel.vue
   ═══════════════════════════════════════════════════════════ */

#carousel-island .carousel-root {
    width: 100%;
    background: var(--v-bg-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
}

/* ── NSFW gate ──────────────────────────────────────────── */
#carousel-island .nsfw-gate {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        var(--v-bg) 0px,
        var(--v-bg) 10px,
        var(--v-bg-elevated) 10px,
        var(--v-bg-elevated) 20px
    );
}

#carousel-island .nsfw-gate-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
    color: var(--v-text-secondary);
}

#carousel-island .nsfw-gate-inner svg {
    color: var(--v-text-muted);
}

#carousel-island .nsfw-label {
    font-family: var(--v-font-data);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v-text-primary);
    margin: 0;
}

#carousel-island .nsfw-sub {
    font-size: 0.8125rem;
    color: var(--v-text-muted);
    margin: 0;
    max-width: 280px;
}

#carousel-island .nsfw-login-link {
    font-family: var(--v-font-data);
    font-size: 0.75rem;
    color: var(--v-accent);
    text-decoration: none;
    border: 1px solid var(--v-accent-glow);
    padding: 6px 14px;
    border-radius: var(--v-radius-sm);
    transition: all 0.15s ease;
}

#carousel-island .nsfw-login-link:hover {
    color: var(--v-accent-dim);
    border-color: var(--v-accent);
    background: var(--v-accent-subtle);
}

/* ── No media ───────────────────────────────────────────── */
#carousel-island .no-media {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v-text-muted);
    font-size: 0.8125rem;
    font-family: var(--v-font-data);
}

/* ── Stage ──────────────────────────────────────────────── */
#carousel-island .carousel-stage {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--v-bg);
    overflow: hidden;
}

#carousel-island .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#carousel-island .carousel-video {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    background: var(--v-bg);
}

/* ── Arrows ─────────────────────────────────────────────── */
#carousel-island .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid var(--v-border-bright);
    color: var(--v-text-secondary);
    cursor: pointer;
    border-radius: var(--v-radius-sm);
    transition: all 0.15s ease;
    z-index: 4;
}

#carousel-island .carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--v-accent);
    color: var(--v-text-primary);
}

#carousel-island .carousel-arrow--prev {
    left: 10px;
}
#carousel-island .carousel-arrow--next {
    right: 10px;
}

/* ── Counter ────────────────────────────────────────────── */
#carousel-island .carousel-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-family: var(--v-font-data);
    font-size: 0.6875rem;
    color: var(--v-text-secondary);
    background: rgba(0, 0, 0, 0.72);
    padding: 2px 8px;
    border-radius: var(--v-radius-sm);
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* ── Thumbnails ─────────────────────────────────────────── */
#carousel-island .carousel-thumbs {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--v-bg-surface);
    border-top: 1px solid var(--v-border);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--v-border) transparent;
    justify-content: center
}

#carousel-island .thumb-btn {
    flex-shrink: 0;
    width: 68px;
    height: 42px;
    border: 2px solid transparent;
    border-radius: var(--v-radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--v-bg-elevated);
    padding: 0;
    transition: border-color 0.12s ease;
}

#carousel-island .thumb-btn:hover {
    border-color: var(--v-border-bright);
}

#carousel-island .thumb-btn--active {
    border-color: var(--v-accent) !important;
}

#carousel-island .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#carousel-island .thumb-video-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v-text-muted);
    background: var(--v-bg-elevated);
}

#carousel-island .thumb-btn--active .thumb-video-icon {
    color: var(--v-accent);
}

/* ═══════════════════════════════════════════════════════════
   CHARTS ISLAND — GameCharts.vue
   ═══════════════════════════════════════════════════════════ */

#charts-island .charts-island {
    background: var(--v-bg-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: 1.25rem;
}

#charts-island .charts-header {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

#charts-island .charts-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-text-primary);
    letter-spacing: -0.01em;
}

#charts-island .charts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

#charts-island .charts-tab {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-sm);
    background: transparent;
    color: var(--v-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--v-font-ui);
}

#charts-island .charts-tab:hover {
    border-color: var(--v-border-bright);
    color: var(--v-text-secondary);
}

#charts-island .charts-tab.active {
    background: var(--v-accent-subtle);
    font-weight: 600;
}

#charts-island .charts-canvas-wrap {
    height: 320px;
    position: relative;
}

#charts-island .charts-loading {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#charts-island .charts-skeleton {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
}

#charts-island .skeleton-line {
    height: 200px;
    background: linear-gradient(
        90deg,
        var(--v-bg-elevated) 25%,
        var(--v-bg-hover) 50%,
        var(--v-bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--v-radius-sm);
}

#charts-island .skeleton-line--short {
    height: 40px;
    width: 60%;
}

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

#charts-island .charts-error,
#charts-island .charts-empty {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--v-text-muted);
    font-size: 0.875rem;
}

#charts-island .charts-empty-hint {
    font-size: 0.75rem;
    color: var(--v-text-muted);
    opacity: 0.7;
}

#charts-island .charts-stats {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--v-border);
}

#charts-island .stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

#charts-island .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 80px;
}

#charts-island .stat-item-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--v-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#charts-island .stat-item-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v-text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--v-font-data);
}

#charts-island .stat-item-value.positive {
    color: var(--v-green);
}

#charts-island .stat-item-value.negative {
    color: var(--v-red);
}

/* ═══════════════════════════════════════════════════════════
   PLUS LOCK — PlusLock.vue
   ═══════════════════════════════════════════════════════════ */

.plus-lock-wrapper {
    position: relative;
    display: contents;
}

.plus-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--v-radius-sm);
}

@media (prefers-color-scheme: dark) {
    .plus-lock-overlay {
        background: rgba(0, 0, 0, 0.55);
    }
}

.plus-lock-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--v-bg-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-sm);
    color: var(--v-text-secondary);
    font-family: var(--v-font-data);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

.plus-lock-badge svg {
    flex-shrink: 0;
    color: var(--v-accent);
}

/* ═══════════════════════════════════════════════════════════
    SUMMARY OF GAMETABLE
   ═══════════════════════════════════════════════════════════ */

.game-table-root {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.summary-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    flex-shrink: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--surface-200);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    white-space: nowrap;
}

.summary-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-secondary);
}

.summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-color);
}

.summary-value.revenue {
    color: var(--green-500);
}

.summary-item.locked .summary-value {
    color: var(--text-color-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.summary-sep {
    width: 1px;
    height: 1.5rem;
    background: var(--surface-300);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #search-island .search-root {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    #search-island .search-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--v-border);
        max-height: 50vh;
        overflow-y: auto;
    }
    #carousel-island .carousel-arrow {
        width: 32px;
        height: 32px;
    }
    #carousel-island .carousel-thumbs {
        gap: 3px;
        padding: 4px;
    }
    #carousel-island .thumb-btn {
        width: 56px;
        height: 36px;
    }
}