/* Clean Arcade v1
   A visual layer only: no layout, data or interaction logic lives here. */

body.home-arcade {
    --clean-ink: #061723;
    --clean-navy: #061d2c;
    --clean-navy-2: #0a2a3c;
    --clean-cyan: #39d6f5;
    --clean-blue: #168fc4;
    --clean-line: #78cce4;
    --clean-shadow: rgba(11, 116, 160, .24);
    --clean-radius: 8px;
}

/* Header controls */
body.home-arcade .site-header {
    border-bottom: 2px solid var(--clean-cyan);
    background: var(--clean-navy);
    box-shadow: 0 9px 28px rgba(3, 28, 43, .20);
}

body.home-arcade .navbar { min-height: 72px; }
body.home-arcade .logo { color: #f4fcff; }

body.home-arcade :is(.create-account-nav, .account-nav-link, .header-login-nav, .mobile-menu-button) {
    min-height: 43px;
    border: 2px solid var(--clean-blue);
    border-radius: var(--clean-radius);
    background: var(--clean-navy-2);
    color: #f5fcff;
    box-shadow: 4px 4px 0 var(--clean-shadow);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

body.home-arcade .create-account-nav {
    border-color: var(--clean-cyan);
    background: var(--clean-cyan);
    color: var(--clean-ink);
}

body.home-arcade :is(.create-account-nav, .account-nav-link, .header-login-nav, .mobile-menu-button):hover {
    transform: translate(-1px, -1px);
    border-color: #79e9ff;
    box-shadow: 6px 6px 0 var(--clean-shadow);
}

body.home-arcade .menu-button-lines span,
body.home-arcade .mobile-menu-button span { border-radius: 2px; }

body.home-arcade .mobile-navigation:not([hidden]) {
    border: 2px solid var(--clean-cyan);
    border-radius: var(--clean-radius);
    background: var(--clean-navy);
    box-shadow: 7px 7px 0 var(--clean-shadow);
}

body.home-arcade .mobile-navigation > a {
    border-radius: 6px;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

body.home-arcade .mobile-navigation > a:hover { transform: translateX(2px); }

/* Shared button system */
body.home-arcade :is(.primary-button, .secondary-button) {
    min-height: 46px;
    padding: 0 19px;
    border-width: 2px;
    border-style: solid;
    border-radius: var(--clean-radius);
    font-weight: 850;
    letter-spacing: .005em;
    box-shadow: 4px 4px 0 var(--clean-shadow);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

body.home-arcade .primary-button {
    border-color: var(--clean-cyan);
    background: var(--clean-cyan);
    color: var(--clean-ink);
}

body.home-arcade .secondary-button {
    border-color: var(--clean-blue);
    background: var(--clean-navy);
    color: #f5fcff;
    backdrop-filter: none;
}

body.home-arcade :is(.primary-button, .secondary-button):hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--clean-shadow);
}

body.home-arcade :is(.primary-button, .secondary-button):active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--clean-shadow);
}

body.home-arcade :is(button, a, input, select):focus-visible {
    outline: 3px solid rgba(57, 214, 245, .38);
    outline-offset: 3px;
}

/* Cards and platform identity */
body.home-arcade .stream-card {
    overflow: hidden;
    border: 2px solid var(--clean-blue);
    border-radius: var(--clean-radius);
    box-shadow: 5px 5px 0 var(--clean-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.home-arcade .stream-card:hover {
    transform: translate(-2px, -3px);
    border-color: var(--clean-cyan);
    box-shadow: 8px 8px 0 var(--clean-shadow);
}

body.home-arcade .stream-card .thumbnail-wrapper { border-radius: 5px 5px 0 0; }
body.home-arcade :is(.live-badge, .position, .viewer-overlay, .platform-badge) { border-radius: 4px; }
body.home-arcade .platform-badge.twitch { background: #357df7; }
body.home-arcade .platform-badge.kick { background: #45f323; color: #061507; }
body.home-arcade .platform-badge.youtube { background: #ef334f; color: #fff; }

/* Filters, tabs and compact controls */
body.home-arcade :is(.explore-filters, .ranking-filters) {
    border: 2px solid var(--clean-blue);
    border-radius: var(--clean-radius);
    box-shadow: 5px 5px 0 var(--clean-shadow);
}

body.home-arcade :is(.explore-filters, .ranking-filters) :is(input, select) {
    min-height: 42px;
    border: 1px solid #2f7998;
    border-radius: 6px;
    transition: border-color .14s ease, box-shadow .14s ease;
}

body.home-arcade :is(.explore-filters, .ranking-filters) :is(input, select):focus {
    border-color: var(--clean-cyan);
    box-shadow: 0 0 0 3px rgba(57, 214, 245, .13);
}

body.home-arcade .explore-filter-actions button,
body.home-arcade .ranking-filters button {
    min-height: 40px;
    border: 2px solid var(--clean-cyan);
    border-radius: 6px;
    background: var(--clean-cyan);
    color: var(--clean-ink);
    font-weight: 850;
    box-shadow: 3px 3px 0 var(--clean-shadow);
}

body.home-arcade :is(.explore-category-chips a, .ranking-scope-tabs a, .quick-links a) {
    border-radius: 6px;
}

body.home-arcade .explore-category-chips a {
    border: 1px solid #2b7898;
    background: rgba(6, 29, 44, .92);
    color: #eafaff;
}

body.home-arcade .explore-category-chips a:hover,
body.home-arcade .explore-category-chips a.active {
    border-color: var(--clean-cyan);
    background: #0d4057;
}

body.home-arcade .ranking-scope-tabs {
    border-radius: var(--clean-radius);
    background: var(--clean-navy);
}

body.home-arcade .ranking-scope-tabs a.active {
    border-color: var(--clean-cyan);
    background: #0d4057;
}

/* Dense utility actions */
body.home-arcade :is(
    .profile-actions,
    .compare-actions,
    .account-actions,
    .share-dialog-actions,
    .my-hub-actions
) button,
body.home-arcade :is(
    .profile-actions,
    .compare-actions,
    .account-actions,
    .share-dialog-actions,
    .my-hub-actions
) a {
    border-radius: var(--clean-radius);
}

body.home-arcade .compare-selected-person button,
body.home-arcade .icon-button {
    border-radius: 6px;
}

/* Stream Spin keeps its engine and layout; only its controls join the system. */
body.stream-spin-page .site-header { border-bottom-color: var(--clean-cyan); }

body.stream-spin-page .spin-filter-trigger {
    border: 2px solid var(--clean-blue);
    border-radius: var(--clean-radius);
    background: var(--clean-navy);
    box-shadow: 5px 5px 0 rgba(7, 82, 119, .55);
}

body.stream-spin-page .spin-filter-trigger:hover {
    transform: translate(-1px, -1px);
    box-shadow: 7px 7px 0 rgba(7, 82, 119, .55);
}

body.stream-spin-page .spin-filters-collapsible {
    border-radius: var(--clean-radius);
    box-shadow: 5px 5px 0 rgba(7, 82, 119, .5);
}

body.stream-spin-page .spin-primary-button {
    border: 2px solid var(--clean-cyan);
    border-radius: var(--clean-radius);
    background: var(--clean-cyan);
    color: var(--clean-ink);
    box-shadow: 5px 5px 0 var(--clean-blue);
}

body.stream-spin-page .spin-sound-toggle,
body.stream-spin-page .spin-result-body a { border-radius: var(--clean-radius); }

/* MultiView */
body.multiview-page :is(.multiview-actions button, .multiview-toolbar button, .multiview-add-button) {
    border-radius: var(--clean-radius);
}

/* Current Stream Spin V2 */
body.stream-spin-v2-page .reel-round-control {
    border-color: var(--clean-blue);
    outline: 0;
    background: var(--clean-navy-2);
    box-shadow: 4px 4px 0 rgba(8, 93, 132, .6), inset 0 0 0 4px rgba(57, 214, 245, .04);
}

body.stream-spin-v2-page .reel-round-control:hover,
body.stream-spin-v2-page .reel-control-popover[open] > .reel-round-control {
    transform: translate(-1px, -1px);
    border-color: var(--clean-cyan);
    box-shadow: 6px 6px 0 rgba(8, 93, 132, .6), inset 0 0 0 4px rgba(57, 214, 245, .08);
}

body.stream-spin-v2-page :is(.reel-compact-filter-panel, .reel-mood-panel) {
    border: 2px solid var(--clean-blue);
    border-radius: var(--clean-radius);
    box-shadow: 5px 5px 0 rgba(8, 93, 132, .5);
}

body.stream-spin-v2-page .reel-mood-panel button {
    border-radius: 6px;
    box-shadow: 2px 2px 0 rgba(8, 93, 132, .4);
}

body.stream-spin-v2-page .start-spin {
    border: 2px solid var(--clean-cyan);
    border-radius: var(--clean-radius);
    background: var(--clean-cyan);
    color: var(--clean-ink);
    box-shadow: 6px 6px 0 var(--clean-blue);
}

body.stream-spin-v2-page .start-spin:hover {
    transform: translate(-1px, -1px);
    box-shadow: 8px 8px 0 var(--clean-blue);
}

body.stream-spin-v2-page .watch-now {
    border: 2px solid var(--clean-cyan);
    border-radius: var(--clean-radius);
    background: var(--clean-cyan);
    color: var(--clean-ink);
    box-shadow: 4px 4px 0 var(--clean-blue);
}

body.stream-spin-v2-page :is(.reel-card, .selected-image, .selected-tags span) {
    border-radius: var(--clean-radius);
}

@media (max-width: 700px) {
    body.home-arcade .navbar { min-height: 62px; }
    body.home-arcade :is(.primary-button, .secondary-button) { min-height: 44px; }
    body.home-arcade .stream-card { box-shadow: 4px 4px 0 var(--clean-shadow); }
    body.home-arcade :is(.explore-filters, .ranking-filters) { box-shadow: 4px 4px 0 var(--clean-shadow); }
    body.stream-spin-page .spin-filter-trigger { box-shadow: 4px 4px 0 rgba(7, 82, 119, .55); }
}

@media (prefers-reduced-motion: reduce) {
    body.home-arcade :is(.primary-button, .secondary-button, .stream-card, .mobile-menu-button) { transition: none; }
}