/* ============================================================
   AMOCEAN — v5 (minimal, clean, no loader, aligned header)
   ============================================================ */

:root {
    --fg: #ffffff;
    --ease-out: cubic-bezier(.22,.8,.2,1);
    --ease-in-out: cubic-bezier(.65,0,.35,1);
    --spring: cubic-bezier(.2,1.3,.25,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ============================================================
   DEEP SPACE BACKGROUND
   ============================================================ */
.space-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 10%, #0a0f1c 0%, #000 60%),
        radial-gradient(ellipse at 80% 90%, #0d0a1f 0%, #000 60%),
        #000;
}
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: .4;
    will-change: transform;
}
.nebula-1 {
    top: -10%; left: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(closest-side, rgba(120,120,120,.5), rgba(0,0,0,0) 70%);
    animation: nebulaDrift1 40s ease-in-out infinite alternate;
}
.nebula-2 {
    bottom: -15%; right: -15%;
    width: 70vw; height: 70vw;
    background: radial-gradient(closest-side, rgba(120,120,120,.4), rgba(0,0,0,0) 70%);
    animation: nebulaDrift2 50s ease-in-out infinite alternate;
}
@keyframes nebulaDrift1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(6vw,4vh) scale(1.15)} }
@keyframes nebulaDrift2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-6vw,-4vh) scale(1.1)} }

#stars {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

/* ============================================================
   VIDEO — fullscreen, starts immediately
   ============================================================ */
.video-wrap {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1.02);
    will-change: transform;
}
.video-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%),
        linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
}

/* ============================================================
   PARTICLES + CURSOR AURORA
   ============================================================ */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    opacity: .5;
}
.cursor-aurora { display: none !important; }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.page {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
.page > *, .top-col > * { pointer-events: auto; }

/* ============================================================
   TOP ROW — all top buttons perfectly aligned
   ============================================================ */
.top-row {
    position: absolute;
    top: clamp(18px, 2.8vh, 34px);
    left: clamp(18px, 2.4vw, 36px);
    right: clamp(18px, 2.4vw, 36px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 16px;
    z-index: 60;
    pointer-events: none;
    animation: fadeDown 1.2s var(--ease-out) .15s both;
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
.top-col {
    display: flex;
    align-items: center;
    pointer-events: none;
}
.top-col--left   { justify-self: start; }
.top-col--center { justify-self: center; pointer-events: none; }
.top-col--right  {
    justify-self: end;
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    gap: 10px;
    align-items: start;
    justify-items: center;
}
.ctrl-wrap { position: relative; pointer-events: auto; }
.scene { position: fixed; inset: 0; z-index: 0; transition: filter .5s var(--ease-out); }

.top-logo {
    width: clamp(90px, 10vw, 140px);
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 16px rgba(255,255,255,.35))
        drop-shadow(0 0 40px rgba(209,213,219,.15));
}
.floating { animation: floaty 6s ease-in-out infinite; will-change: transform; }
@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(.4deg); }
}

/* ============================================================
   TRANSPARENT DARK GLASS BUTTONS
   ============================================================ */
.glass-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    min-height: 48px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.35) 100%);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 8px 24px rgba(0,0,0,.4);
    overflow: hidden;
    transition:
        transform .4s var(--spring),
        box-shadow .35s var(--ease-out),
        background .35s var(--ease-out),
        border-color .35s var(--ease-out);
    isolation: isolate;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: auto;
}
.glass-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.26), rgba(255,255,255,0) 65%);
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}
.glass-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 45%, transparent 60%);
    transform: translateX(-130%);
    transition: transform 1s var(--ease-out);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}
.glass-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.3) 100%);
    border-color: rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 14px 36px rgba(0,0,0,.55);
}
.glass-btn:hover::after { transform: translateX(130%); }
.glass-btn:active { transform: translateY(-1px) scale(.98); transition-duration: .12s; }

.liquid-spec {
    position: absolute;
    top: 0; left: 0;
    width: 140%;
    height: 140%;
    border-radius: inherit;
    background: radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    transform: translate(-15%, -15%);
}
.liquid:hover .liquid-spec { opacity: 1; }

.glass-btn-glow {
    position: absolute;
    top: 50%; left: -40%;
    width: 180%; height: 280%;
    transform: translateY(-50%);
    background: radial-gradient(closest-side, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
    filter: blur(22px);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: -1;
}
.glass-btn:hover .glass-btn-glow { opacity: 1; }
.glow-cool { background: radial-gradient(closest-side, rgba(209,213,219,.4), rgba(140,140,140,.2) 55%, rgba(0,0,0,0) 75%); }

.glass-btn--icon {
    width: 50px;
    height: 50px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.glass-btn--icon > svg {
    width: 22px;
    height: 22px;
    z-index: 3;
    position: relative;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(209,213,219,.3));
}
.audio-wave { transition: opacity .3s ease; }
.audio-wave-1 { animation: waveSonar 2s ease-in-out infinite; }
.audio-wave-2 { animation: waveSonar 2s ease-in-out infinite .4s; opacity: .7; }
@keyframes waveSonar { 0%,100%{opacity:.35} 50%{opacity:1} }
body.sound-off .audio-wave { opacity: .15 !important; }

/* ============================================================
   SIDE PANEL (audio + games)
   truly hidden when closed (visibility hidden + pointer-events none)
   ============================================================ */
/* Panel anchors to LEFT of its button (since buttons stack vertically on right) */
.side-panel {
    position: absolute;
    top: 0;
    right: calc(100% + 14px);
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px) scale(.94);
    pointer-events: none;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear .45s;
    transform-origin: top right;
    z-index: 90;
}
.side-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear 0s;
}
/* (Mobile panel positioning handled in the main responsive section below) */
.side-panel-inner {
    position: relative;
    padding: 16px 18px 18px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(12,14,20,.82), rgba(6,8,12,.88));
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(40px) saturate(170%);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 30px 80px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.side-panel-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.side-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.side-title {
    flex: 1;
    font-size: 11px;
    letter-spacing: .45em;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
}
.side-close {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    transition: background .25s ease, color .25s ease, transform .25s ease;
    flex-shrink: 0;
}
.side-close svg { width: 14px; height: 14px; }
.side-close:hover { background: rgba(255,255,255,.12); color: #fff; transform: rotate(90deg); }

/* AUDIO PANEL */
.audio-panel { width: min(86vw, 340px); }

.audio-row { display: flex; flex-direction: column; gap: 8px; }
.audio-row-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.audio-label { letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.audio-value { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }

.audio-steppers {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}
.stepper-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 3px 10px rgba(0,0,0,.3);
    transition: transform .2s var(--spring), background .25s ease;
}
.stepper-btn svg { width: 14px; height: 14px; }
.stepper-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px) scale(1.05); }
.stepper-btn:active { transform: scale(.94); }

.audio-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg,
        rgba(209,213,219,.85) 0%,
        rgba(209,213,219,.85) var(--pct, 100%),
        rgba(255,255,255,.06) var(--pct, 100%),
        rgba(255,255,255,.06) 100%);
    border-radius: 999px;
    outline: none;
}
.audio-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #e5e7eb 60%, #9ca3af 100%);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 14px rgba(209,213,219,.5);
    cursor: grab;
    transition: transform .18s var(--spring);
}
.audio-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.audio-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #e5e7eb 60%, #9ca3af 100%);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 14px rgba(209,213,219,.5);
    cursor: grab;
}

.panel-reset {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    transition: background .25s ease, color .25s ease, transform .2s var(--spring);
}
.panel-reset:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }

/* GAMES PANEL */
.games-panel {
    width: min(94vw, 740px);
    max-height: min(90vh, 860px);
}
.games-panel-inner {
    padding: 14px 16px 14px;
    gap: 10px;
    max-height: inherit;
    overflow: hidden;
}
.games-back {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 9px;
    color: #fff;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    transition: background .2s ease, transform .2s var(--spring);
    flex-shrink: 0;
}
.games-back svg { width: 14px; height: 14px; }
.games-back:hover { background: rgba(255,255,255,.12); transform: translateX(-2px); }
.games-score {
    font-size: 10px;
    letter-spacing: .22em;
    color: rgba(255,255,255,.85);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    overflow-y: auto;
    padding: 4px 2px 6px;
    max-height: min(72vh, 700px);
}
.games-grid::-webkit-scrollbar { width: 6px; }
.games-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px 12px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.3));
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    transition:
        transform .35s var(--spring),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}
.game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.game-card::after {
    content: "";
    position: absolute;
    top: -50%; left: -30%;
    width: 160%; height: 200%;
    background: radial-gradient(closest-side, rgba(209,213,219,.22), rgba(209,213,219,0) 60%);
    filter: blur(30px);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: -1;
}
.game-card:hover {
    transform: translateY(-3px) scale(1.03);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
.game-card:hover::after { opacity: 1; }
.game-card-icon {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
    transition: transform .35s var(--spring);
}
.game-card:hover .game-card-icon { transform: translateY(-2px) scale(1.08) rotate(-3deg); }
.game-card-name {
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 700;
}
.game-card-sub {
    font-size: 9px;
    letter-spacing: .1em;
    color: rgba(255,255,255,.5);
}

.game-stage {
    display: none;
    min-height: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(156,163,175,.1), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
    border: 1px solid rgba(255,255,255,.08);
    align-items: center;
    justify-content: center;
    padding: 12px;
    max-height: min(80vh, 740px);
}
.games-panel.playing .game-stage { display: flex; }
.games-panel.playing .games-grid { display: none; }

#gameCanvas {
    display: none;
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
    border-radius: 10px;
}
.game-board {
    display: none;
    width: min(100%, 380px);
    aspect-ratio: 1 / 1;
    padding: 10px;
}
.game-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    text-align: center;
    padding: 24px;
    z-index: 2;
    animation: overlayIn .4s var(--ease-out);
}
.game-overlay.show { display: flex; }
@keyframes overlayIn { from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
.game-overlay-inner { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.game-overlay-title { font-size: 18px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.game-overlay-text { font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.75); max-width: 320px; line-height: 1.5; }
.game-overlay-btn {
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.3));
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 600;
    transition: transform .2s var(--spring), background .25s ease;
}
.game-overlay-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.2)); transform: translateY(-1px) scale(1.03); }

.games-help {
    padding: 4px 2px 0;
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    text-align: center;
}

.ttt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
}
.ttt-cell {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: clamp(32px, 7vw, 54px);
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease, transform .25s var(--spring), box-shadow .25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.ttt-cell:hover:not(.filled) { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.3)); transform: scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.ttt-cell.x { color: #d1d5db; text-shadow: 0 0 18px rgba(209,213,219,.7); }
.ttt-cell.o { color: #ff7ac6; text-shadow: 0 0 18px rgba(255,122,198,.7); }
.ttt-cell.win { background: linear-gradient(180deg, rgba(209,213,219,.22), rgba(140,140,140,.1)); border-color: rgba(255,255,255,.32); }

/* ============================================================
   MUSIC PANEL — Spotify embed
   ============================================================ */
.music-panel { width: min(94vw, 380px); }

.spotify-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.spotify-preset {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s var(--spring);
    cursor: pointer;
}
.spotify-preset:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.2);
    transform: translateY(-1px);
}
.spotify-preset.active {
    background: linear-gradient(180deg, rgba(30,215,96,.22), rgba(30,215,96,.08));
    border-color: rgba(30,215,96,.5);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(30,215,96,.25), 0 6px 16px rgba(0,0,0,.35);
}

.spotify-embed-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    min-height: 80px;
}
.spotify-embed-wrap iframe { display: block; width: 100%; border: 0; }

.spotify-custom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: stretch;
}
.spotify-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
    font-family: inherit;
}
.spotify-input::placeholder { color: rgba(255,255,255,.4); }
.spotify-input:focus { border-color: rgba(30,215,96,.5); background: rgba(255,255,255,.08); }
.spotify-load {
    width: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, rgba(30,215,96,.2), rgba(30,215,96,.08));
    border: 1px solid rgba(30,215,96,.35);
    transition: background .25s ease, transform .2s var(--spring);
}
.spotify-load svg { width: 16px; height: 16px; }
.spotify-load:hover { background: linear-gradient(180deg, rgba(30,215,96,.35), rgba(30,215,96,.15)); transform: translateY(-1px); }

.spotify-hint {
    padding: 2px 2px 0;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    text-align: center;
}

/* ============================================================
   FILTERS PANEL + SCREEN FILTERS
   ============================================================ */
.filters-panel { width: min(92vw, 380px); }

.filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: min(62vh, 480px);
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.filters-grid::-webkit-scrollbar { width: 6px; }
.filters-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

.filter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: transform .28s var(--spring), background .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
    isolation: isolate;
}
.filter-card:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.filter-card.active {
    background: linear-gradient(180deg, rgba(209,213,219,.2), rgba(140,140,140,.08));
    border-color: rgba(209,213,219,.4);
    box-shadow: 0 0 0 1px rgba(209,213,219,.25), 0 12px 28px rgba(0,0,0,.45);
}
.filter-card-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    overflow: hidden;
    background:
        linear-gradient(135deg, #2a3a7a 0%, #5a2d7a 40%, #d14a6b 70%, #f2a33e 100%);
}
.filter-card-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(0,0,0,.3), transparent 50%);
}
.filter-card-name {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.82);
    text-align: center;
}
.filter-card.active .filter-card-name { color: #fff; }

/* The real screen filters — applied to .scene */
body.filter-bw      .scene { filter: grayscale(1) contrast(1.05); }
body.filter-sepia   .scene { filter: sepia(.85) saturate(1.2) brightness(.95); }
body.filter-invert  .scene { filter: invert(1) hue-rotate(180deg); }
body.filter-warm    .scene { filter: saturate(1.3) hue-rotate(-15deg) brightness(1.05) contrast(1.05); }
body.filter-cool    .scene { filter: saturate(1.2) hue-rotate(25deg) brightness(.95) contrast(1.1); }
body.filter-dream   .scene { filter: saturate(1.6) contrast(1.15) brightness(1.08) blur(.6px); }
body.filter-neon    .scene { filter: saturate(2.2) contrast(1.35) hue-rotate(-25deg) brightness(1.1); }
body.filter-night   .scene { filter: brightness(.6) contrast(1.35) hue-rotate(170deg) saturate(2.4); }
body.filter-cinema  .scene { filter: contrast(1.25) saturate(1.1) brightness(.92) sepia(.15); }
body.filter-vintage .scene { filter: sepia(.35) saturate(.85) contrast(1.1) brightness(.95) hue-rotate(-8deg); }

/* Preview thumbs use the same filters so users see the effect */
.filter-card[data-filter="bw"]      .filter-card-preview { filter: grayscale(1) contrast(1.05); }
.filter-card[data-filter="sepia"]   .filter-card-preview { filter: sepia(.85) saturate(1.2) brightness(.95); }
.filter-card[data-filter="invert"]  .filter-card-preview { filter: invert(1) hue-rotate(180deg); }
.filter-card[data-filter="warm"]    .filter-card-preview { filter: saturate(1.3) hue-rotate(-15deg) brightness(1.05) contrast(1.05); }
.filter-card[data-filter="cool"]    .filter-card-preview { filter: saturate(1.2) hue-rotate(25deg) brightness(.95) contrast(1.1); }
.filter-card[data-filter="dream"]   .filter-card-preview { filter: saturate(1.6) contrast(1.15) brightness(1.08) blur(.6px); }
.filter-card[data-filter="neon"]    .filter-card-preview { filter: saturate(2.2) contrast(1.35) hue-rotate(-25deg) brightness(1.1); }
.filter-card[data-filter="night"]   .filter-card-preview { filter: brightness(.6) contrast(1.35) hue-rotate(170deg) saturate(2.4); }
.filter-card[data-filter="cinema"]  .filter-card-preview { filter: contrast(1.25) saturate(1.1) brightness(.92) sepia(.15); }
.filter-card[data-filter="vintage"] .filter-card-preview { filter: sepia(.35) saturate(.85) contrast(1.1) brightness(.95) hue-rotate(-8deg); }

/* ============================================================
   LANGUAGE SELECTOR (bottom-left)
   ============================================================ */
.lang-wrap {
    position: absolute;
    left: clamp(18px, 2.4vw, 36px);
    bottom: clamp(18px, 2.4vh, 32px);
    z-index: 50;
    pointer-events: auto;
    animation: fadeUp 1.3s var(--ease-out) .5s both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.glass-btn--lang {
    padding: 11px 18px;
    font-size: 12px;
    letter-spacing: .14em;
    min-width: 180px;
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
}
.lang-globe {
    width: 16px; height: 16px;
    display: grid; place-items: center;
    color: #d1d5db;
    z-index: 3; position: relative;
    filter: drop-shadow(0 0 6px rgba(209,213,219,.5));
}
.lang-globe svg { width: 16px; height: 16px; }
.lang-current { flex: 1; text-align: left; z-index: 3; position: relative; }
.lang-caret {
    display: grid; place-items: center;
    width: 14px; height: 14px;
    opacity: .8;
    transition: transform .3s var(--ease-out);
    z-index: 3; position: relative;
}
.lang-caret svg { width: 14px; height: 14px; }
.lang-wrap.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    width: min(86vw, 340px);
    max-height: min(60vh, 440px);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(12,14,20,.82), rgba(6,8,12,.88));
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(40px) saturate(170%);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 30px 80px rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.96);
    pointer-events: none;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear .45s;
    transform-origin: bottom left;
}
.lang-wrap.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear 0s;
}
.lang-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    color: #fff;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.lang-search::placeholder { color: rgba(255,255,255,.4); }
.lang-search:focus { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.lang-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;
}
.lang-list::-webkit-scrollbar { width: 6px; }
.lang-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
.lang-item {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s var(--spring);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.lang-item:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.lang-item.selected { background: rgba(255,255,255,.11); color: #fff; }
.lang-item .native { font-size: 11px; opacity: .55; }

/* ============================================================
   MUSIC PANEL (Spotify)
   ============================================================ */
.music-panel { width: min(94vw, 560px); max-height: min(90vh, 820px); }
.music-panel .side-panel-inner { padding: 18px 18px 18px; gap: 14px; max-height: inherit; overflow: hidden; display: flex; flex-direction: column; }

.sp-user {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 11px;
    max-width: 150px;
    overflow: hidden;
}
.sp-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.sp-user span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.sp-connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 10px 10px;
}
.sp-connect-logo svg { width: 54px; height: 54px; filter: drop-shadow(0 0 14px rgba(30,215,96,.35)); }
.sp-connect-title { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.sp-connect-sub   { font-size: 12px; color: rgba(255,255,255,.6); max-width: 260px; line-height: 1.5; }
.sp-connect-btn {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 6px;
    padding: 11px 22px;
    border-radius: 999px;
    background: #1ED760;
    color: #000;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .2s var(--spring), background .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 30px rgba(30,215,96,.3);
}
.sp-connect-btn svg { width: 16px; height: 16px; }
.sp-connect-btn:hover { background: #1DB954; transform: translateY(-1px) scale(1.03); box-shadow: 0 14px 36px rgba(30,215,96,.45); }
.sp-connect-note { font-size: 10px; color: rgba(255,255,255,.4); max-width: 260px; line-height: 1.5; margin-top: 8px; }

.sp-player { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }

.sp-now { display: flex; gap: 12px; align-items: center; }
.sp-art {
    width: 60px; height: 60px;
    border-radius: 10px;
    background: #1a1d26 no-repeat center/cover;
    border: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.sp-now-meta { flex: 1; overflow: hidden; }
.sp-now-title  { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-now-artist { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; letter-spacing: .02em; }

.sp-progress {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.sp-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1ED760, #d1d5db);
    transition: width .4s linear;
    box-shadow: 0 0 12px rgba(30,215,96,.5);
}
.sp-time {
    display: flex; justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,.5);
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
}

.sp-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}
.sp-ctrl {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    transition: transform .2s var(--spring), background .25s ease;
}
.sp-ctrl:hover { background: rgba(255,255,255,.12); transform: translateY(-1px) scale(1.08); }
.sp-ctrl svg { width: 18px; height: 18px; }
.sp-ctrl-play {
    width: 44px; height: 44px;
    background: #fff;
    color: #000;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(255,255,255,.25);
}
.sp-ctrl-play:hover { background: #fff; box-shadow: 0 10px 28px rgba(255,255,255,.4); }

.sp-section-title {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    padding-top: 4px;
}

.sp-playlists {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
    max-height: 220px;
    padding-right: 2px;
}
.sp-playlists::-webkit-scrollbar { width: 6px; }
.sp-playlists::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

.sp-pl {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--spring);
}
.sp-pl:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); transform: translateX(2px); }
.sp-pl-art {
    width: 36px; height: 36px;
    border-radius: 6px;
    background: #1a1d26 no-repeat center/cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.06);
}
.sp-pl-meta { flex: 1; overflow: hidden; }
.sp-pl-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pl-sub   { font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .02em; }

.sp-loading {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 14px 10px;
    letter-spacing: .1em;
}

.sp-disconnect {
    margin-top: 4px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .25s ease, color .25s ease;
}
.sp-disconnect:hover { background: rgba(255,80,80,.12); color: #fff; border-color: rgba(255,80,80,.35); }

.sp-status {
    font-size: 10px;
    color: rgba(255,180,100,.85);
    background: rgba(80,40,0,.3);
    border: 1px solid rgba(255,140,0,.35);
    padding: 6px 10px;
    border-radius: 8px;
    letter-spacing: .04em;
    text-align: center;
}

/* ============================================================
   FILTERS PANEL
   ============================================================ */
.filters-panel { width: min(94vw, 380px); }
.filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.filters-grid::-webkit-scrollbar { width: 6px; }
.filters-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.filter-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: transform .2s var(--spring), background .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
    isolation: isolate;
}
.filter-tile:hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.filter-tile.active {
    background: rgba(255,255,255,.12);
    border-color: rgba(209,213,219,.55);
    box-shadow: 0 0 0 2px rgba(209,213,219,.35), 0 10px 24px rgba(0,0,0,.5);
}
.filter-tile-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background:
        linear-gradient(135deg, #d1d5db 0%, #9ca3af 50%, #ff6fad 100%),
        linear-gradient(45deg, #ffd54a 0%, #ff6b6b 100%);
    background-blend-mode: overlay;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}
.filter-tile-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============================================================
   LAUNCH PILL (bottom center, transparent glass)
   ============================================================ */
.launch-pill {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 3.2vh, 44px);
    transform: translateX(-50%);
    padding: 11px 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.4) 100%);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 10px 30px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    pointer-events: none;
    z-index: 40;
    overflow: hidden;
    isolation: isolate;
    animation: pillIn 1.4s var(--ease-out) .5s both;
}
.launch-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.28), rgba(255,255,255,0) 65%);
    opacity: .55;
    pointer-events: none;
}
@keyframes pillIn {
    from { opacity: 0; transform: translate(-50%, 12px); filter: blur(6px); }
    to   { opacity: 1; transform: translate(-50%, 0);    filter: blur(0); }
}
.launch-pill-main {
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: .35em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #fff 0%, #e5e7eb 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    text-shadow: 0 0 30px rgba(209,213,219,.3);
}
.launch-pill-sub {
    font-size: clamp(9px, .82vw, 10.5px);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
}

/* ============================================================
   CHAT FAB + PANEL (Grok — bottom right)
   ============================================================ */
.chat-fab-wrap {
    position: fixed;
    right: clamp(16px, 2.2vw, 28px);
    bottom: clamp(16px, 2.4vh, 28px);
    z-index: 100;
}
.chat-fab {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(209,213,219,.2) 0%, rgba(140,140,140,.18) 50%, rgba(0,0,0,.45) 100%);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 12px 36px rgba(156,163,175,.22),
        0 18px 48px rgba(0,0,0,.5);
    transition: transform .35s var(--spring), box-shadow .3s ease, background .3s ease;
    overflow: hidden;
    isolation: isolate;
}
.chat-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%);
    pointer-events: none;
}
.chat-fab:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 18px 48px rgba(156,163,175,.35),
        0 20px 56px rgba(0,0,0,.55);
}
.chat-fab:active { transform: translateY(-1px) scale(.98); }
.chat-fab-icon, .chat-fab-close {
    width: 22px; height: 22px;
    position: absolute;
    transition: transform .4s var(--spring), opacity .25s ease;
    filter: drop-shadow(0 0 6px rgba(209,213,219,.5));
}
.chat-fab-close { width: 18px; height: 18px; opacity: 0; transform: rotate(-90deg) scale(.6); }
.chat-fab.open .chat-fab-icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat-fab.open .chat-fab-close { opacity: 1; transform: rotate(0) scale(1); }

.chat-fab-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(209,213,219,.55), rgba(209,213,219,0) 70%);
    opacity: 0;
    animation: chatPulse 2.6s ease-in-out infinite;
    z-index: -1;
}
@keyframes chatPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 0;  transform: scale(1.45); }
}
.chat-fab.open .chat-fab-pulse { animation: none; opacity: 0; }

/* Panel */
.chat-panel {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: min(92vw, 400px);
    height: min(72vh, 580px);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(10,12,18,.88), rgba(5,7,11,.92));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(40px) saturate(170%);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 30px 80px rgba(0,0,0,.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.96);
    pointer-events: none;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear .45s;
    transform-origin: bottom right;
    overflow: hidden;
    isolation: isolate;
}
.chat-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity .35s var(--ease-out),
        transform .45s var(--spring),
        visibility 0s linear 0s;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.chat-head-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(156,163,175,.5);
    flex-shrink: 0;
}
.chat-head-avatar svg { width: 20px; height: 20px; }
.chat-head-meta { flex: 1; overflow: hidden; }
.chat-head-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}
.chat-head-sub {
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
    text-transform: uppercase;
}
.chat-head-btn {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    transition: background .2s ease, color .2s ease, transform .25s ease;
    flex-shrink: 0;
}
.chat-head-btn svg { width: 14px; height: 14px; }
.chat-head-btn:hover { background: rgba(255,255,255,.12); color: #fff; transform: scale(1.08); }
#chatClose:hover { transform: rotate(90deg); }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
    scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    animation: msgIn .35s var(--ease-out);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.chat-msg-body {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: .005em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.chat-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}
.chat-msg.user .chat-msg-body {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 18px rgba(156,163,175,.35);
}
.chat-msg.assistant { align-self: flex-start; }
.chat-msg.assistant .chat-msg-body {
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-bottom-left-radius: 6px;
}
.chat-msg.system {
    align-self: center;
    max-width: 90%;
}
.chat-msg.system .chat-msg-body {
    background: rgba(255,180,80,.08);
    color: rgba(255,200,130,.9);
    border: 1px solid rgba(255,180,80,.25);
    font-size: 11.5px;
    text-align: center;
    border-radius: 12px;
}
.chat-msg.error .chat-msg-body {
    background: rgba(255,80,80,.1);
    color: rgba(255,160,160,.95);
    border: 1px solid rgba(255,80,80,.3);
}
.chat-msg .chat-msg-body a { color: #d1d5db; text-decoration: underline; }
.chat-msg code {
    background: rgba(0,0,0,.35);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
}

.chat-typing {
    display: inline-flex;
    gap: 4px;
    padding: 2px 0;
}
.chat-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    animation: typingDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.chat-welcome {
    padding: 20px 10px;
    text-align: center;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    letter-spacing: .04em;
    line-height: 1.6;
}
.chat-welcome-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 8px 4px 0;
}
.chat-suggestion {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    font-size: 11px;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, transform .2s var(--spring);
}
.chat-suggestion:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    transform: translateY(-1px);
}

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
}
.chat-input {
    flex: 1;
    min-height: 38px;
    max-height: 120px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13.5px;
    color: #fff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    outline: none;
    resize: none;
    transition: border-color .2s ease, background .2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
    line-height: 1.45;
}
.chat-input::placeholder { color: rgba(255,255,255,.4); }
.chat-input:focus { border-color: rgba(209,213,219,.5); background: rgba(255,255,255,.08); }

.chat-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(156,163,175,.45);
    transition: transform .2s var(--spring), box-shadow .2s ease, opacity .2s ease;
    flex-shrink: 0;
}
.chat-send svg { width: 18px; height: 18px; }
.chat-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.05); box-shadow: 0 10px 24px rgba(156,163,175,.6); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.chat-foot {
    padding: 6px 12px 10px;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-align: center;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    background: rgba(0,0,0,.22);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* --- Tablet & small laptop --- */
@media (max-width: 960px) {
    .top-row { gap: 10px; }
    .chat-panel { width: min(94vw, 380px); height: min(68vh, 540px); }
}

/* --- Tablet / small phones --- */
@media (max-width: 720px) {
    .top-row { gap: 8px; top: clamp(14px, 2.2vh, 24px); left: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); }
    .top-logo { width: clamp(80px, 20vw, 120px); }
    .glass-btn { padding: 10px 14px; font-size: 11px; letter-spacing: .12em; min-height: 42px; }
    .glass-btn--icon { width: 42px; height: 42px; }
    .glass-btn--icon > svg { width: 20px; height: 20px; }
    .glass-btn--lang { min-width: 150px; padding: 10px 14px; }

    .top-col--right { gap: 8px; }

    /* All side panels drop BELOW their icon on mobile */
    .side-panel {
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        transform: translateY(-10px) scale(.96);
        transform-origin: top right;
    }
    .side-panel.open { transform: translateY(0) scale(1); }

    .audio-panel   { width: min(calc(100vw - 24px), 340px); }
    .games-panel   { width: min(calc(100vw - 24px), 560px); max-height: min(82vh, 720px); }
    .games-grid    { grid-template-columns: repeat(2, 1fr); }
    .music-panel   { width: min(calc(100vw - 24px), 480px); }
    .filters-panel { width: min(calc(100vw - 24px), 380px); }

    .launch-pill { padding: 9px 18px; bottom: clamp(14px, 2vh, 22px); }
    .launch-pill-main { font-size: 10px; letter-spacing: .22em; }
    .launch-pill-sub  { font-size: 8.5px; letter-spacing: .18em; }

    .chat-fab { width: 52px; height: 52px; }
    .chat-fab-icon { width: 20px; height: 20px; }
    .chat-panel {
        width: calc(100vw - 20px);
        height: min(78vh, 600px);
        max-height: calc(100dvh - 100px);
    }
}

/* --- Phone portrait --- */
@media (max-width: 520px) {
    .top-logo { width: clamp(72px, 22vw, 100px); }
    .glass-btn--icon { width: 40px; height: 40px; }
    .glass-btn--icon > svg { width: 18px; height: 18px; }
    .top-col--right { gap: 7px; }

    .lang-wrap { bottom: clamp(70px, 10vh, 90px); }
    .glass-btn--lang { min-width: 140px; font-size: 11px; padding: 9px 13px; }
    .lang-menu { width: calc(100vw - 32px); }

    .launch-pill { padding: 8px 14px; border-radius: 18px; gap: 2px; }
    .launch-pill-main { font-size: 9.5px; letter-spacing: .18em; }
    .launch-pill-sub  { font-size: 8px;   letter-spacing: .14em; }

    .chat-fab { width: 48px; height: 48px; }
    .chat-fab-wrap { right: 14px; bottom: 14px; }
    .chat-panel {
        width: calc(100vw - 16px);
        height: calc(100dvh - 96px);
        right: -8px;
    }

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

/* --- Very small --- */
@media (max-width: 380px) {
    .launch-pill-sub { display: none; }
    .launch-pill { padding: 7px 14px; }
    .top-col--right { gap: 6px; }
    .glass-btn--icon { width: 38px; height: 38px; }
}

/* --- Short / landscape --- */
@media (max-height: 520px) {
    .top-row { top: 10px; }
    .top-logo { width: 80px; }
    .launch-pill { bottom: 10px; }
    .lang-wrap   { bottom: 10px; }
    .chat-fab-wrap { bottom: 10px; right: 10px; }
    .chat-panel { height: calc(100dvh - 24px); max-height: calc(100vh - 24px); }
    .games-panel, .music-panel { max-height: calc(100vh - 80px); }
}

/* --- Touch devices: make scroll smooth --- */
@media (pointer: coarse) {
    .chat-messages, .games-grid, .sp-playlists, .lang-list, .filters-grid {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   HAMBURGER MENU
   ============================================================ */
.menu-wrap { position: relative; pointer-events: auto; }
.menu-panel {
    width: min(86vw, 320px);
    left: calc(100% + 14px);
    right: auto;
    transform-origin: top left;
    transform: translateX(-14px) scale(.94);
}
.menu-panel.open { transform: translateX(0) scale(1); }
@media (max-width: 720px) {
    .menu-panel {
        left: 0;
        right: auto;
        top: calc(100% + 10px);
        transform: translateY(-10px) scale(.96);
        transform-origin: top left;
    }
    .menu-panel.open { transform: translateY(0) scale(1); }
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.menu-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.menu-section-title {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    padding: 4px 4px 6px;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    letter-spacing: .04em;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    width: 100%;
}
.menu-item:hover {
    background: rgba(209,213,219,.08);
    border-color: rgba(209,213,219,.18);
    color: #fff;
}
.menu-item:active { background: rgba(156,163,175,.16); transform: scale(.98); }
.menu-item--google svg { width: 16px; height: 16px; flex-shrink: 0; }
.menu-item svg { flex-shrink: 0; }

.menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 10px;
}
.menu-user img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,.08);
}
.menu-user img:not([src]) { display: none; }
.menu-user img[src=""] { display: none; }
.menu-user-meta { flex: 1; overflow: hidden; }
.menu-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-user-email { font-size: 10.5px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .03em; }

.menu-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 4px;
    font-size: 10.5px;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
}
.menu-contact a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 12px;
    word-break: break-all;
    transition: color .2s ease;
}
.menu-contact a:hover { color: #fff; }

/* ============================================================
   MUTE TOGGLE + EQUALIZER
   ============================================================ */
.audio-row-actions { display: inline-flex; align-items: center; gap: 8px; }
.mute-toggle {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mute-toggle svg { width: 14px; height: 14px; }
.mute-toggle:hover { background: rgba(209,213,219,.12); color: #fff; border-color: rgba(209,213,219,.25); }
body.muted .mute-toggle { background: rgba(156,163,175,.16); color: #fff; border-color: rgba(156,163,175,.4); }

.eq-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 8px 6px 4px;
}
.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.eq-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 6px;
    height: 110px;
    writing-mode: vertical-lr;
    direction: rtl;
    background: linear-gradient(to top,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.06) 50%,
        rgba(209,213,219,.85) 50%,
        rgba(209,213,219,.85) 100%);
    border-radius: 999px;
    outline: none;
}
.eq-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
    cursor: grab;
}
.eq-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
    cursor: grab;
}
.eq-band-label {
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(20,22,28,.92);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .35s var(--spring);
    box-shadow: 0 14px 40px rgba(0,0,0,.6);
    max-width: calc(100vw - 32px);
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: rgba(255,120,120,.35); color: #ffd1d1; }
.toast.ok    { border-color: rgba(180,220,180,.35); color: #d4f5d4; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =============================================================
   ARCADE — animated tiles, achievements wall, modals, leaderboard
   ============================================================= */

/* Animated tile preview canvas inside each game card */
.game-card { padding: 10px 14px 18px; gap: 8px; }
.game-card-anim {
    width: 100%;
    height: 64px;
    display: block;
    border-radius: 14px;
    background: rgba(0,0,0,.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
    margin-bottom: 4px;
    transition: transform .3s var(--spring);
}
.game-card:hover .game-card-anim { transform: scale(1.02); }

/* Trophy toggle button in side-head */
.games-trophy {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    margin-right: 4px;
    transition: background .2s ease, transform .15s ease;
}
.games-trophy:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.games-trophy svg { width: 16px; height: 16px; }

/* Achievements wall view */
.arc-wall {
    overflow-y: auto;
    max-height: min(72vh, 700px);
    padding: 4px 2px 6px;
}
.arc-wall-head {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
}
.arc-wall-name {
    font-size: 16px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.arc-wall-stats {
    display: flex; gap: 14px; font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.55);
}
.arc-wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.arc-ach {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .25s var(--spring);
}
.arc-ach:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.arc-ach-icon {
    font-size: 24px; line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.arc-ach.locked .arc-ach-icon { filter: grayscale(1) opacity(.45); }
.arc-ach-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.arc-ach-desc  { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 2px; }
.arc-ach.locked .arc-ach-label,
.arc-ach.locked .arc-ach-desc { color: rgba(255,255,255,.4); }
.arc-ach.got    { box-shadow: inset 0 0 0 1px rgba(125,211,252,.25); }

/* Modal root + backdrop + box */
#arcadeModalRoot { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.arc-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    animation: arcFadeIn .25s ease;
}
.arc-modal {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    min-width: 280px; max-width: 360px;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(20,20,28,.95), rgba(8,8,14,.95));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    color: #fff; text-align: center;
    pointer-events: auto;
    animation: arcPop .35s var(--spring);
}
.arc-modal-title { font-size: 16px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.arc-modal-sub   { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 6px; letter-spacing: .08em; }
.arc-modal-row   { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

.arc-input {
    width: 100%;
    padding: 12px 14px;
    margin-top: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    font: 700 14px/1 ui-sans-serif, system-ui;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.arc-input:focus { border-color: rgba(125,211,252,.6); background: rgba(255,255,255,.1); }
.arc-input::placeholder { color: rgba(255,255,255,.3); }

.arc-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: 700 10px/1 ui-sans-serif, system-ui;
    letter-spacing: .28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.arc-btn:hover  { transform: translateY(-1px); background: rgba(255,255,255,.12); }
.arc-btn.primary {
    background: linear-gradient(180deg, rgba(125,211,252,.4), rgba(56,189,248,.18));
    border-color: rgba(125,211,252,.55);
}
.arc-btn.primary:hover { background: linear-gradient(180deg, rgba(125,211,252,.55), rgba(56,189,248,.25)); }
.arc-btn.ghost { background: transparent; }

/* Achievement toast */
.arc-toast {
    position: absolute;
    right: 16px; top: 16px;
    display: flex; gap: 12px; align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20,20,28,.92), rgba(8,8,14,.92));
    border: 1px solid rgba(125,211,252,.45);
    box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 0 30px rgba(125,211,252,.08);
    color: #fff;
    pointer-events: none;
    transform: translateY(-12px); opacity: 0;
    transition: transform .35s var(--spring), opacity .3s ease;
}
.arc-toast.show { transform: translateY(0); opacity: 1; }
.arc-toast-icon { font-size: 24px; }
.arc-toast-label { font-size: 9px; letter-spacing: .35em; color: rgba(125,211,252,.85); text-transform: uppercase; }
.arc-toast-title { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.arc-toast-desc  { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 1px; }

/* Game over screen (uses #gameOverlay container) */
.arc-go {
    width: min(360px, 100%);
    max-height: 100%;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
    padding: 18px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15,18,28,.85), rgba(5,7,14,.95));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 80px rgba(125,211,252,.05);
    --accent: #7ad1ff; --accent2: #5688ff;
}
.arc-go-title {
    font-size: 14px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--accent); font-weight: 700;
    text-shadow: 0 0 18px var(--accent);
}
.arc-go-score {
    font-size: 48px; font-weight: 900; letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 0 30px var(--accent);
    line-height: 1;
}
.arc-go-meta { font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.arc-go-hint { font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.6); max-width: 280px; line-height: 1.5; }
.arc-go-board {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.arc-board-title {
    font-size: 9px; letter-spacing: .35em; color: rgba(255,255,255,.5);
    text-transform: uppercase; margin-bottom: 6px;
}
.arc-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px; letter-spacing: .12em;
    border-bottom: 1px dashed rgba(255,255,255,.06);
}
.arc-row:last-child { border-bottom: 0; }
.arc-row-empty { text-align: center; color: rgba(255,255,255,.4); font-size: 11px; padding: 10px 0; }
.arc-rank  { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .2em; }
.arc-name  { font-weight: 700; text-transform: uppercase; color: #fff; }
.arc-score { color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.arc-go-actions { display: flex; gap: 8px; margin-top: 10px; }

.arc-start { padding-top: 32px; padding-bottom: 32px; }

@keyframes arcFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes arcPop    { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8) } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) } }

/* Mobile tweaks */
@media (max-width: 640px) {
    .games-grid { grid-template-columns: repeat(2, 1fr); }
    .arc-wall-grid { grid-template-columns: 1fr; }
    .arc-modal { max-width: calc(100vw - 32px); }
    .game-card-anim { height: 38px; }
}

/* Cinematic intro overlay */
.arc-cine {
    position: relative;
    width: min(560px, 100%);
    min-height: 480px;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    --accent: #7ad1ff; --accent2: #5688ff; --glow: #7ad1ff;
    overflow: hidden;
    border-radius: 14px;
}
.games-panel.playing .game-stage { min-height: 480px; }
.arc-cine-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(125,211,252,.18), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85));
    background-color: rgba(2,4,10,.85);
    animation: arcCineBg .9s ease-out;
}
.arc-cine-title {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 30px var(--glow), 0 0 60px var(--accent);
    animation: arcCineTitle .9s var(--spring);
    z-index: 1;
}
.arc-cine-hint {
    font-size: 11px;
    letter-spacing: .25em;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    animation: arcCineHint .9s ease-out .25s both;
    z-index: 1;
}
.arc-cine-skip {
    margin-top: 18px;
    z-index: 1;
    animation: arcCineHint .9s ease-out .5s both;
}
@keyframes arcCineBg    { 0% { transform: scale(1.2); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes arcCineTitle { 0% { opacity: 0; transform: scale(.4) } 60% { opacity: 1; transform: scale(1.1) } 100% { transform: scale(1) } }
@keyframes arcCineHint  { 0% { opacity: 0; transform: translateY(8px) } 100% { opacity: 1; transform: translateY(0) } }

/* Clickable name field on achievements wall */
.arc-wall-name {
    cursor: pointer;
    transition: color .2s ease;
    position: relative;
}
.arc-wall-name::after {
    content: " ✎";
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s ease;
    color: rgba(125,211,252,.7);
}
.arc-wall-name:hover { color: rgba(125,211,252,.95); }
.arc-wall-name:hover::after { opacity: 1; }

/* Power-up pickup glow */
.arc-power {
    box-shadow: 0 0 18px currentColor;
    animation: arcPulse 1s ease-in-out infinite alternate;
}
@keyframes arcPulse { 0% { transform: scale(1) } 100% { transform: scale(1.08) } }

/* =============================================================
   MUSIC SOURCE TABS — Spotify / YouTube / SoundCloud
   ============================================================= */
.music-tabs {
    display: flex; gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    margin-bottom: 14px;
}
.music-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.music-tab:hover  { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.music-tab.active {
    background: rgba(255,255,255,.1);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.3);
}
.music-tab[data-source="spotify"].active    { color: #1ED760; }
.music-tab[data-source="youtube"].active    { color: #FF0000; }
.music-tab[data-source="soundcloud"].active { color: #FF7700; }

/* Source view: input row + embed wrap */
.music-source { display: flex; flex-direction: column; gap: 12px; }

.music-input-row {
    display: flex; gap: 8px; align-items: center;
}
.music-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font: 400 12px/1.4 ui-sans-serif, system-ui;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.music-input:focus {
    border-color: rgba(125,211,252,.6);
    background: rgba(255,255,255,.10);
}
.music-input::placeholder { color: rgba(255,255,255,.35); }
.music-go-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease;
    flex-shrink: 0;
}
.music-go-btn:hover { transform: translateY(-1px) scale(1.05); background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); }
.music-go-btn svg { width: 14px; height: 14px; }

.music-embed-wrap {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.08);
    min-height: 180px;
}
.music-embed-wrap iframe {
    display: block;
    width: 100%;
    border: 0;
    background: #000;
}
#ytEmbedWrap iframe { height: 320px; }
#scEmbedWrap iframe { height: 200px; }
.music-embed-empty {
    padding: 60px 20px;
    text-align: center;
    color: rgba(255,255,255,.35);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.music-section-title {
    font-size: 9px;
    letter-spacing: .35em;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    margin-top: 4px;
    padding: 0 4px;
}

.music-recent {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 160px;
    overflow-y: auto;
}
.music-recent-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-size: 11px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    text-align: left;
    width: 100%;
}
.music-recent-item:hover { background: rgba(255,255,255,.10); transform: translateX(2px); }
.music-recent-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-recent-item-remove {
    background: none; border: none;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
.music-recent-item-remove:hover { color: rgba(255,100,100,.9); background: rgba(255,255,255,.05); }
.music-recent-empty {
    color: rgba(255,255,255,.3);
    font-size: 10px;
    padding: 8px 12px;
    text-align: center;
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* =============================================================
   MUSIC PANEL — FLUID GLASS MINIMAL REDESIGN
   smart-row: combined search + paste input, ultra-flat
   .has-player: auto-grows panel ~1.12× when video loaded
   :hover on .has-player: extra grow to ~1.32× (stages: load → hover)
   body.music-playing: dims + blurs background behind panel
   ============================================================= */

.music-smart-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.music-smart-row:focus-within {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(125, 211, 252, .35);
    box-shadow: 0 0 0 3px rgba(125, 211, 252, .08);
}
.music-smart-icon {
    width: 14px; height: 14px;
    color: rgba(255, 255, 255, .42);
    flex-shrink: 0;
    transition: color .2s ease;
}
.music-smart-row:focus-within .music-smart-icon { color: rgba(255, 255, 255, .75); }

.music-smart-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font: 400 12.5px/1.4 ui-sans-serif, system-ui;
    letter-spacing: .01em;
    padding: 10px 10px;
    min-width: 0;
}
.music-smart-input::placeholder { color: rgba(255, 255, 255, .3); }

.music-smart-go {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.music-smart-go:hover {
    background: rgba(125, 211, 252, .25);
    color: #fff;
    transform: translateX(1px);
}
.music-smart-go svg { width: 13px; height: 13px; }

/* Collapsible recents — minimal */
.music-fold {
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding-top: 8px;
}
.music-fold > summary {
    list-style: none;
    cursor: pointer;
    font-size: 9px;
    letter-spacing: .35em;
    color: rgba(255, 255, 255, .42);
    text-transform: uppercase;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: color .2s ease;
}
.music-fold > summary:hover { color: rgba(255, 255, 255, .8); }
.music-fold > summary::-webkit-details-marker { display: none; }
.music-fold > summary::before {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
    margin-right: 2px;
}
.music-fold[open] > summary::before { transform: rotate(45deg); }
.music-fold > .music-recent { margin-top: 8px; }

/* Embed wrap — Fluid Glass: borderless, deeper round */
.music-embed-wrap {
    border-radius: 18px;
    border: 0;
    background: rgba(0, 0, 0, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 16px 36px rgba(0, 0, 0, .45);
    transition: box-shadow .35s ease, transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.music-embed-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 0;
}
.music-embed-empty svg {
    width: 44px; height: 44px;
    opacity: .25;
    color: rgba(255, 255, 255, .8);
}

/* When video is loaded, panel auto-grows. (Hover scale removed.) */
.music-panel.open.has-player {
    transform: translateX(0) scale(1.12);
}
.music-panel.open.has-player .music-embed-wrap {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 24px 60px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(125, 211, 252, .12);
}

/* (Background blur removed — panel grow stages only.) */

/* On small screens, scale less aggressively to avoid overflow */
@media (max-width: 720px) {
    .music-panel.open.has-player { transform: translateY(0) scale(1.04); }
}

/* =============================================================
   VIDEO EFFECTS — 16 toggleable effects in filters panel
   Active effect classes are added to <body>: body.fx-<id>
   Effects are layered: SVG filters via inline JS-built filter chain;
   overlays via dedicated overlay divs; transforms via wrapper divs.
   ============================================================= */

.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* @property declarations let CSS variables interpolate in animations */
@property --fx-pulse-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-zoom-scale  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fx-tide-y      { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* Override the original .bg-video transform to compose all motion effects.
   When no fx is active, all variables = 1 / 0% so the look matches the original. */
body.fx-pulse .bg-video,
body.fx-slowzoom .bg-video,
body.fx-tide .bg-video {
    transform:
        translate(-50%, -50%)
        translateY(var(--fx-tide-y, 0%))
        scale(calc(1.02 * var(--fx-pulse-scale, 1) * var(--fx-zoom-scale, 1)));
}

.fx-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 2;
}

/* ---- 1. WAVES — SVG turbulence displacement ---- */
body.fx-waves .bg-video { /* applied via JS filter chain */ }

/* ---- 2. AURORA — animated cyan/purple/blue overlay, screen blend ---- */
.fx-aurora-layer {
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(125,211,252,.55), transparent 60%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(167,139,250,.45), transparent 60%),
        radial-gradient(ellipse 70% 40% at 50% 0%,  rgba(56,189,248,.35), transparent 60%);
    mix-blend-mode: screen;
    animation: fxAurora 16s ease-in-out infinite alternate;
    filter: blur(40px);
}
body.fx-aurora .fx-aurora-layer { opacity: 1; }
@keyframes fxAurora {
    0%   { transform: translate(0,0) scale(1);    filter: blur(40px) hue-rotate(0deg); }
    50%  { transform: translate(2%,-3%) scale(1.1); filter: blur(50px) hue-rotate(40deg); }
    100% { transform: translate(-2%,2%) scale(1.05); filter: blur(45px) hue-rotate(-20deg); }
}

/* ---- 3. PULSE — slow breathing scale via CSS variable ---- */
body.fx-pulse .bg-video {
    animation: fxPulse 4.5s ease-in-out infinite alternate;
}
@keyframes fxPulse {
    0%   { --fx-pulse-scale: 1; }
    100% { --fx-pulse-scale: 1.045; }
}

/* ---- 4. GLITCH — RGB shift overlay + horizontal scanlines flicker ---- */
.fx-glitch-layer {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    animation: fxGlitch 4s steps(60) infinite;
}
body.fx-glitch .fx-glitch-layer { opacity: 1; }
body.fx-glitch .bg-video { /* SVG filter chain applies via JS */ }
@keyframes fxGlitch {
    0%, 95%, 100% { transform: translateX(0); }
    96%           { transform: translate(2px, 0); }
    97%           { transform: translate(-3px, 1px); }
    98%           { transform: translate(2px, -1px); }
    99%           { transform: translate(-1px, 0); }
}

/* ---- 5. VIGNETTE — radial dark edges ---- */
.fx-vignette-layer {
    background: radial-gradient(ellipse at center,
        transparent 35%,
        rgba(0,0,0,.35) 70%,
        rgba(0,0,0,.7) 100%);
}
body.fx-vignette .fx-vignette-layer { opacity: 1; }

/* ---- 6. GRAIN — animated SVG noise overlay ---- */
.fx-grain-layer {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    animation: fxGrainShift .25s steps(8) infinite;
}
body.fx-grain .fx-grain-layer { opacity: .7; }
@keyframes fxGrainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 4%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-4%, 1%); }
    100% { transform: translate(3%, -2%); }
}

/* ---- 7. TEAL & ORANGE — color grading via filter chain (JS) ---- */
/* Implemented via JS in filter chain: hue-rotate + saturate + contrast tuned */

/* ---- 8. SLOW ZOOM — long ken-burns via CSS variable ---- */
body.fx-slowzoom .bg-video {
    animation: fxSlowZoom 30s ease-in-out infinite alternate;
}
@keyframes fxSlowZoom {
    0%   { --fx-zoom-scale: 1; }
    100% { --fx-zoom-scale: 1.10; }
}

/* ---- 9. VHS — chromatic aberration + saturation + tape jitter ---- */
.fx-scanlines-layer {
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,.18) 0 1px,
        transparent 1px 3px);
    mix-blend-mode: multiply;
}
body.fx-vhs  .fx-scanlines-layer { opacity: .55; }
body.fx-vhs  .bg-video { /* drop-shadow chromatic aberration via JS chain */ }

/* ---- 10. CRT SCANLINES — thicker, separate from VHS ---- */
.fx-crtlines-layer {
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,.32) 0 2px,
        transparent 2px 4px);
}
body.fx-crtlines .fx-crtlines-layer { opacity: 1; }

/* ---- 11. PIXELATE — SVG filter ---- */
/* Applied via JS chain */

/* ---- 12. BLACK & WHITE ---- */
/* Applied via JS chain */

/* ---- 13. UNDERWATER — gentle displacement + cyan tint ---- */
.fx-watertint-layer {
    background: linear-gradient(180deg,
        rgba(8, 80, 130, .25) 0%,
        rgba(2, 30, 60, .35) 100%);
    mix-blend-mode: multiply;
}
body.fx-underwater .fx-watertint-layer { opacity: 1; }

/* ---- 14. CAUSTICS — animated light caustics ---- */
.fx-caustics-layer {
    background:
        radial-gradient(circle at 25% 35%, rgba(186,230,253,.25) 0, transparent 12%),
        radial-gradient(circle at 70% 60%, rgba(186,230,253,.20) 0, transparent 14%),
        radial-gradient(circle at 50% 80%, rgba(186,230,253,.18) 0, transparent 10%),
        radial-gradient(circle at 85% 25%, rgba(186,230,253,.22) 0, transparent 11%),
        radial-gradient(circle at 15% 75%, rgba(186,230,253,.18) 0, transparent 9%);
    mix-blend-mode: screen;
    filter: blur(8px);
    animation: fxCaustics 7s ease-in-out infinite alternate;
}
body.fx-caustics .fx-caustics-layer { opacity: 1; }
@keyframes fxCaustics {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(3%,-2%) scale(1.05); }
    100% { transform: translate(-2%,3%) scale(1.08); }
}

/* ---- 15. BUBBLES — drifting bubbles overlay ---- */
.fx-bubbles-layer { /* populated by JS with bubble divs */ }
body.fx-bubbles .fx-bubbles-layer { opacity: 1; }
.fx-bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255,255,255,.5) 0%,
        rgba(186,230,253,.18) 40%,
        rgba(125,211,252,.05) 100%);
    border: 1px solid rgba(255,255,255,.18);
    animation: fxBubble linear infinite;
    box-shadow: inset 0 0 4px rgba(255,255,255,.4);
}
@keyframes fxBubble {
    0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(var(--drift, 0), -110vh) scale(1); opacity: 0; }
}

/* ---- 16. TIDE — gentle vertical breath via CSS variable ---- */
body.fx-tide .bg-video {
    animation: fxTide 7s ease-in-out infinite alternate;
}
@keyframes fxTide {
    0%   { --fx-tide-y: 0%; }
    100% { --fx-tide-y: -2%; }
}

/* =============================================================
   FILTERS PANEL — extra section: VIDEO EFFECTS
   ============================================================= */
.fx-section-title {
    grid-column: 1 / -1;
    font-size: 9px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    padding: 12px 4px 6px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 6px;
    display: flex; align-items: center; justify-content: space-between;
}
.fx-section-title:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.fx-reset-btn {
    background: none; border: none;
    color: rgba(255,255,255,.5);
    font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
.fx-reset-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

.fx-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: transform .25s var(--spring), background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.fx-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.fx-tile.active {
    background: linear-gradient(180deg, rgba(125,211,252,.16), rgba(125,211,252,.04));
    border-color: rgba(125,211,252,.5);
    box-shadow: 0 6px 18px rgba(125,211,252,.18), inset 0 0 14px rgba(125,211,252,.08);
}
.fx-tile-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #08111c;
}
.fx-tile-name {
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 700;
}
.fx-tile-check {
    position: absolute;
    top: 6px; right: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(125,211,252,.85);
    color: #052639;
    display: none;
    align-items: center; justify-content: center;
    font-size: 10px;
    font-weight: 900;
}
.fx-tile.active .fx-tile-check { display: flex; }

/* Mini visual preview inside each tile thumb */
.fx-thumb-base {
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 40%, #2d5b8a 100%);
}
.fx-thumb-base::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(125,211,252,.45) 0, transparent 30%),
        radial-gradient(circle at 75% 65%, rgba(167,139,250,.35) 0, transparent 35%);
}

/* =============================================================
   MUSIC SEARCH — results list
   ============================================================= */
.music-input--alt { font-size: 11px; }
.music-results {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}
.music-result {
    display: flex; gap: 10px; align-items: center;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, transform .15s ease;
}
.music-result:hover { background: rgba(255,255,255,.10); transform: translateX(2px); }
.music-result-thumb {
    width: 60px; height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    object-fit: cover;
}
.music-result-meta {
    flex: 1; min-width: 0;
}
.music-result-title {
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #fff;
}
.music-result-sub {
    font-size: 9px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-result-dur {
    font-size: 9px;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.music-results-loading,
.music-results-empty,
.music-results-error {
    text-align: center;
    padding: 14px;
    font-size: 10px;
    letter-spacing: .15em;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
}
.music-results-error { color: rgba(248, 113, 113, .8); }

/* SoundCloud "open in new tab" notice */
.music-sc-hint {
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 119, 0, .08);
    border: 1px solid rgba(255, 119, 0, .25);
    color: rgba(255, 200, 150, .9);
    font-size: 10px;
    line-height: 1.5;
}
.music-sc-hint a { color: #FF9050; text-decoration: underline; }

/* =============================================================
   AUTH FORM (in menu panel)
   ============================================================= */
.auth-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 6px;
}
.auth-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font: 400 12px/1.4 ui-sans-serif, system-ui;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.auth-input:focus { border-color: rgba(125,211,252,.6); background: rgba(255,255,255,.10); }
.auth-input::placeholder { color: rgba(255,255,255,.35); }
.auth-row { display: flex; gap: 6px; }
.auth-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font: 700 10px/1 ui-sans-serif, system-ui;
    letter-spacing: .25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease;
}
.auth-btn--primary {
    background: linear-gradient(180deg, rgba(125,211,252,.4), rgba(56,189,248,.18));
    border-color: rgba(125,211,252,.55);
}
.auth-btn--primary:hover  { transform: translateY(-1px); background: linear-gradient(180deg, rgba(125,211,252,.55), rgba(56,189,248,.25)); }
.auth-btn--ghost          { background: rgba(255,255,255,.05); }
.auth-btn--ghost:hover    { background: rgba(255,255,255,.12); }
.auth-btn[disabled]       { opacity: .5; cursor: not-allowed; }
.auth-link {
    background: none; border: none;
    color: rgba(255,255,255,.5);
    font-size: 10px; letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px;
    text-align: left;
}
.auth-link:hover { color: #fff; }
.auth-msg {
    font-size: 10px;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 8px;
    display: none;
}
.auth-msg.visible { display: block; }
.auth-msg.error   { background: rgba(248, 113, 113, .12); color: #fca5a5; border: 1px solid rgba(248,113,113,.3); }
.auth-msg.success { background: rgba(125, 211, 252, .12); color: #7dd3fc; border: 1px solid rgba(125,211,252,.3); }
.auth-divider {
    text-align: center;
    font-size: 9px;
    letter-spacing: .25em;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;
    margin: 6px 0;
    position: relative;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    position: absolute; top: 50%;
    width: 35%;
    height: 1px;
    background: rgba(255,255,255,.08);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider span    { background: transparent; padding: 0 8px; }

/* Signed-in user card */
.menu-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7dd3fc, #a78bfa);
    color: #052639;
    display: grid; place-items: center;
    font: 700 14px ui-sans-serif, system-ui;
    flex-shrink: 0;
}
.menu-sync-status {
    font-size: 9px;
    letter-spacing: .2em;
    color: rgba(125,211,252,.7);
    text-transform: uppercase;
    text-align: center;
    margin: 4px 0;
}
.menu-sync-status.syncing { color: rgba(255,255,255,.5); }
.menu-sync-status.error   { color: #fca5a5; }

/* =============================================================
   FLOATING MINI MUSIC PLAYER
   ============================================================= */
.music-mini {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 320px;
    background: rgba(8, 10, 16, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    overflow: hidden;
    z-index: 95;
    user-select: none;
    animation: musicMiniIn .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes musicMiniIn {
    from { opacity: 0; transform: translateY(20px) scale(.92); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.music-mini[hidden] { display: none !important; }
.music-mini-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 4px;
    background: rgba(255, 255, 255, .04);
    cursor: grab;
}
.music-mini-head:active { cursor: grabbing; }
.music-mini-drag {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    color: rgba(255, 255, 255, .35);
    flex-shrink: 0;
}
.music-mini-drag svg { width: 14px; height: 14px; }
.music-mini-title {
    flex: 1;
    font-size: 10px;
    letter-spacing: .25em;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.music-mini-btn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease;
}
.music-mini-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.music-mini-btn svg { width: 13px; height: 13px; }
.music-mini-body {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.music-mini-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.music-mini.dragging { transition: none; }

/* Hide mini on tablet/mobile (chosen behaviour: only desktop ≥1025px gets mini) */
@media (max-width: 1024px) {
    .music-mini { display: none !important; }
    .music-minimize { display: none !important; }
}

/* =============================================================
   MOBILE / TABLET FAB RADIAL MENU (≤1024px)
   ============================================================= */
.fab-main {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 60px; height: 60px;
    display: none;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(125, 211, 252, .35), rgba(125, 211, 252, 0) 60%),
        rgba(8, 10, 16, .92);
    color: #fff;
    cursor: pointer;
    z-index: 96;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
.fab-main:hover { background: rgba(20, 28, 42, .95); }
.fab-main:active { transform: scale(.94); }
.fab-main-ico { width: 24px; height: 24px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.fab-main.open .fab-main-ico { transform: rotate(135deg); }

.fab-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: none;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    padding-bottom: 70px;
    z-index: 95;
    pointer-events: none;
}
.fab-stack .fab-item {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(8, 10, 16, .9);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(16px) scale(.6);
    pointer-events: none;
    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1),
        background .2s ease;
}
.fab-stack .fab-item:hover { background: rgba(20, 28, 42, .95); color: #fff; }
.fab-stack .fab-item:active { transform: scale(.92); }
.fab-stack .fab-item svg { width: 20px; height: 20px; }
.fab-stack.open {
    display: flex;
    pointer-events: auto;
}
.fab-stack.open .fab-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.fab-stack.open .fab-item:nth-child(1) { transition-delay: .02s; }
.fab-stack.open .fab-item:nth-child(2) { transition-delay: .05s; }
.fab-stack.open .fab-item:nth-child(3) { transition-delay: .08s; }
.fab-stack.open .fab-item:nth-child(4) { transition-delay: .11s; }
.fab-stack.open .fab-item:nth-child(5) { transition-delay: .14s; }
.fab-stack.open .fab-item:nth-child(6) { transition-delay: .17s; }

/* Active state when corresponding panel is open */
.fab-stack .fab-item[data-active="true"] {
    background: rgba(125, 211, 252, .25);
    border-color: rgba(125, 211, 252, .55);
    color: #fff;
}

@media (max-width: 1024px) {
    .fab-main { display: grid; }
    /* Hide the original toggle buttons on mobile/tablet — panels still
       reachable via the FAB. The .ctrl-wrap stays so panels still mount. */
    .top-row .glass-btn--icon,
    .top-row .lang-toggle { display: none !important; }
    .top-row { pointer-events: none; }
    .top-row .side-panel { pointer-events: auto; }
    /* Hide the original chat FAB on mobile/tablet (chat is in the FAB fan) */
    .chat-fab-wrap { display: none !important; }
}

/* On mobile, music panel close behaviour: just X (no minimize). On mobile we
   also reposition panels so they're centered/full-width and don't anchor to
   the now-hidden right buttons. */
@media (max-width: 1024px) {
    /* The .top-row fadeDown animation leaves a transform on it (containing-block trap)
       which forces position:fixed children to anchor to .top-row instead of viewport.
       Reset transform on mobile/tablet so panels truly center on the viewport. */
    .top-row { transform: none !important; animation: none; }
    .top-col { transform: none; }

    .side-panel {
        position: fixed;
        top: 50%; left: 50%; right: auto;
        transform: translate(-50%, -50%) scale(.94);
        max-height: calc(100vh - 32px);
        overflow: hidden;
    }
    .side-panel.open { transform: translate(-50%, -50%) scale(1); }
    .music-panel.open.has-player { transform: translate(-50%, -50%) scale(1); }
    .games-panel { width: min(94vw, 560px); }
    .music-panel { width: min(94vw, 480px); }
    .audio-panel { width: min(94vw, 420px); }
    .filters-panel { width: min(94vw, 480px); }
    .menu-panel  { width: min(94vw, 420px); }
}