/* ═══════════════════════════════════════════════════════════
 * fym-casino — Studio visual overrides
 * Managed by ~/.design-studio. Edits here are appended / updated
 * every time a property is tweaked in the editor overlay. Commit
 * via the editor's 'Ferdig' button so they land in git with a
 * proper message.
 * ══════════════════════════════════════════════════════════ */


/* ── Chat screen: OV-scope typography + layout tweaks ──────── */

body.ov #chat-panel-content.ov-chat .ov-chat-composer .flex.items-center.justify-end {
    font-size: 9px;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

body.ov #chat-panel-content.ov-chat #chat-active-count {
    font-size: 9px;
    letter-spacing: 0.16em;
}

body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-them {
    align-items: flex-start;
}

body.ov #chat-panel-content.ov-chat .ov-chat-msg.is-them .ov-chat-meta {
    align-items: center;
    min-height: 26px;
}

body.ov #chat-panel-content.ov-chat .ov-chat-main {
    height: calc(100dvh - 140px);
    max-height: calc(100dvh - 140px);
    overflow: hidden;
}

body.ov #chat-panel-content.ov-chat #chat-feed {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #e9c349 transparent;
    min-height: 0;
    flex: 1 1 auto;
}

body.ov #chat-panel-content.ov-chat #chat-feed::-webkit-scrollbar {
    width: 4px;
}

body.ov #chat-panel-content.ov-chat #chat-feed::-webkit-scrollbar-thumb {
    background: #e9c349;
    border-radius: 2px;
}

body.ov #chat-panel-content.ov-chat #chat-feed::-webkit-scrollbar-thumb:hover {
    background: #f0dd92;
}

body.ov #chat-panel-content.ov-chat #chat-feed::-webkit-scrollbar-track {
    background: transparent;
}

body.ov #bottom-nav, body.ov .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    will-change: transform;
}

body.ov:has(#chat-panel-content.active) {
    overflow: hidden;
}


/* ── Home screen: live-wins marquee + session-stats + events banner ── */

body.ov #home-screen #live-wins-feed {
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

body.ov #home-screen #live-wins-feed .text-xs {
    font-size: 9px;
    letter-spacing: 0.18em;
}

body.ov #home-screen #live-wins-feed .text-\[10px\] {
    font-size: 9px;
}

body.ov #home-screen #session-stats {
    background: linear-gradient(180deg, #16140b 0%, #0a0906 100%);
    border: 1px solid rgba(233, 195, 73, 0.22);
    border-radius: 0;
    padding: 1rem 1.25rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    color: #e7e4d6;
}

body.ov #home-screen #session-stats h3, body.ov #home-screen #session-stats .text-lg {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #e9c349;
}

body.ov #home-screen #session-stats .stat-value, body.ov #home-screen #session-stats strong {
    color: #f0dd92;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Events home banner — harmonized with Daily Vault Bounty card style
   (FIX-E). The surface, radius and padding are provided by the
   .bg-surface-container-low / .rounded-xl / .p-6 / .md:p-8 utilities
   on the wrapper. We only tweak inner typography here. */
body.ov #home-screen #events-home-banner .ev-banner-inner h3,
body.ov #home-screen #events-home-banner .ev-banner-title {
    font-family: var(--font-display);
    color: #e5e2e1;
}

body.ov #home-screen #events-home-banner .ev-banner-kicker,
body.ov #home-screen #events-home-banner .ev-banner-meta {
    font-size: 9.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #bfb79c;
}

body.ov #home-screen #events-home-banner .ev-banner-cta,
body.ov #home-screen #events-home-banner button {
    background: #e9c349;
    color: #0a0906;
    border: 1px solid #e9c349;
    border-radius: 0;
    padding: 0.65rem 1.1rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* P2.13 — Live-wins marquee: tighter on phones.
   On viewports < 480px, shrink padding and drop the middle "won"
   connector word so "name +X $FYM in Game" becomes just
   "name +X $FYM · Game" — saves ~30% horizontal space. */
@media (max-width: 480px) {
    body.ov #home-screen #live-wins-feed {
        font-size: 9.5px;
        letter-spacing: 0.02em;
        gap: 0.6rem;
    }
    body.ov #home-screen #live-wins-feed .text-xs,
    body.ov #home-screen #live-wins-feed .text-\[10px\] {
        font-size: 8.5px;
    }
}