:root {
    color-scheme: dark;
    --bg: #050714;
    --panel: rgba(12, 17, 34, .78);
    --panel2: rgba(17, 24, 47, .72);
    --line: rgba(255, 255, 255, .105);
    --line2: rgba(126, 148, 255, .22);
    --text: #f7f8ff;
    --muted: #9da8c4;
    --cyan: #42f2df;
    --blue: #38a7ff;
    --violet: #9b5cff;
    --green: #50e38e;
    --gold: #ffd766;
    --orange: #ffb13d;
    --bad: #5c667b;
    --shadow: 0 28px 90px rgba(0, 0, 0, .48);
}

* { box-sizing: border-box }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: radial-gradient(ellipse at 50% -10%, #14204a 0%, #070914 58%, #03040a 100%)
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    cursor: pointer
}

img, svg { display: block; max-width: 100% }

/* ============== LAYOUT SHELL ============== */

.room-shell {
    min-height: 100vh;
    display: grid;
    place-items: start center;
}

.room-stage {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(10, 14, 29, .82), rgba(5, 7, 16, .94));
    padding: 15px;
}

.room-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
    opacity: .38;
    pointer-events: none
}

.room-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    pointer-events: none
}

.room-orb-a {
    width: 360px;
    height: 360px;
    left: -130px;
    top: 80px;
    background: radial-gradient(circle, rgba(155, 92, 255, .28), transparent 67%)
}

.room-orb-b {
    width: 420px;
    height: 420px;
    right: -160px;
    top: 170px;
    background: radial-gradient(circle, rgba(66, 242, 223, .16), transparent 66%)
}

.room-topbar, .arena-hero, .room-grid { position: relative; z-index: 1 }

/* ============== TOPBAR ============== */

.room-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
}

.ghost-btn {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 13px;
    font-weight: 850;
    color: #dfe6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: .15s transform, .15s border-color, .15s background;
    white-space: nowrap;
}

.ghost-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(66, 242, 223, .32);
    background: rgba(66, 242, 223, .065)
}

.back-btn { justify-self: start }
.share-btn { justify-self: end }

/* ============== HERO ============== */

.arena-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: stretch;
}

.arena-title-wrap, .timer-card, .side-panel, .game-panel {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(18, 25, 50, .76), rgba(9, 13, 28, .72));
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055)
}

.arena-title-wrap {
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    padding: 14px 18px;
    min-width: 0;
}

.arena-title-wrap:after {
    content: "";
    position: absolute;
    inset: auto -40px -90px auto;
    width: 280px;
    height: 180px;
    background: radial-gradient(circle, rgba(66, 242, 223, .16), transparent 66%);
    pointer-events: none;
}

.arena-title-wrap h1 {
    margin: 0 0 6px;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.1;
    letter-spacing: -.03em;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.arena-title-wrap h1 > span { min-width: 0 }

.arena-title-wrap p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 680px;
    line-height: 1.5;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.status-pill span {
    width: 8px;
    height: 8px;
    border-radius: 50%;

}
.status-pill.status-live {
    background: rgba(80, 227, 142, .095);
    border: 1px solid rgba(80, 227, 142, .25);
    color: #baffd2;
}

.status-pill.status-pending {
    background: rgba(255, 165, 0, 0.095);
    border: 1px solid rgba(255, 165, 0, 0.25);
    color: #fddcb2;
}
.status-pill.status-live span {
    background: var(--green);
    box-shadow: 0 0 16px var(--green);
}

.status-pill.status-pending span {
    background: var(--orange);
    box-shadow: 0 0 16px var(--orange);
}

.timer-card {
    border-radius: 22px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.timer-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.timer-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 900;
    white-space: nowrap;
}

.timer-value {
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    min-width: 5.6ch;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.045em;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.timer-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden
}

.timer-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 22px rgba(66, 242, 223, .38)
}

/* ============== MAIN GRID ============== */

.room-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: start;
}

.side-panel, .game-panel {
    border-radius: 22px;
    padding: 14px;
    min-width: 0;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.panel-head h2, .leader-head h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -.02em
}

.panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700
}

/* ============== PLAYERS PANEL ============== */

.players-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: -2px 0 12px;
}

.room-badge {
    position: relative;
    overflow: hidden;
    border-radius: 17px;
    padding: 8px 5px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055)
}

.room-badge:after {
    content: "";
    position: absolute;
    inset: auto -20px -30px auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .45;
    background: radial-gradient(circle, var(--cyan), transparent 70%);
    pointer-events: none;
}

.room-badge b {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -.04em;
    text-align: center;
}

.room-badge span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .5rem;
    text-transform: uppercase;
    font-weight: 950;
    letter-spacing: .08em;
    text-align: center;
}

.room-badge.players:after { background: radial-gradient(circle, var(--violet), transparent 70%) }
.room-badge.watchers:after { background: radial-gradient(circle, var(--blue), transparent 70%) }

.join-player-btn {
    width: 100%;
    height: 46px;
    border-radius: 16px;
    /*background: linear-gradient(135deg, rgba(80, 227, 142, .96), rgba(66, 242, 223, .78));*/
    border: 1px solid rgba(255, 255, 255, .16);
    /*box-shadow: 0 14px 34px rgba(66, 242, 223, .18);*/
    color: #041215;
    font-weight: 950;
    letter-spacing: -.01em
}

.join-player-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(66, 242, 223, .24)
}

.is-player .join-player-btn { display: none }

.player-list { display: grid; gap: 10px }

.player-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .06)
}

.player-row.current {
    background: linear-gradient(135deg, rgba(155, 92, 255, .18), rgba(66, 242, 223, .08));
    border-color: rgba(155, 92, 255, .32)
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 45%),
                linear-gradient(135deg, rgba(155, 92, 255, .36), rgba(66, 242, 223, .14));
    font-size: 23px;
    border: 1px solid rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

.player-info { min-width: 0 }

.player-info b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
}

.player-info span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700
}

.player-score {
    font-weight: 950;
    color: #cbe2ff
}

.player-info .player-solved-text{
    display:inline-flex;
    width:auto;
    align-items:center;
    gap:6px;
    margin-top:5px;
    padding:4px 10px;
    border-radius:999px;
    color:#fff7c2;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:linear-gradient(135deg,rgba(255,216,102,.28),rgba(155,92,255,.22));
    border:1px solid rgba(255,216,102,.42);
    box-shadow:0 0 18px rgba(255,216,102,.16),inset 0 1px 0 rgba(255,255,255,.16);
}
.player-info .player-solved-text:before{content:"✓";font-size:12px;color:#ffe27a;text-shadow:0 0 10px rgba(255,216,102,.45)}

.muted-row { opacity: .62 }

/* ============== GAME PANEL ============== */

.notice-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    border: 1px solid rgba(66, 242, 223, .22);
    background: rgba(66, 242, 223, .055);
    border-radius: 20px;
    color: #c9fff7;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
}

.pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 20px var(--cyan);
    animation: pulse 1.4s infinite;
    flex-shrink: 0;
}

.board-card {
    padding: clamp(16px, 3vw, 28px);
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: radial-gradient(circle at 50% 0%, rgba(155, 92, 255, .16), transparent 48%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018));
    overflow: hidden;
    width: max-content;
    max-width: 100%;
    margin: 16px auto;
}

.board-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 242, 223, .12), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.word-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, clamp(44px, 11vw, 64px));
    gap: clamp(6px, 1.2vw, 10px);
    justify-content: center;
}

.cell {
    width: 100%;
    height: 2.6rem;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
    border: 1px solid rgba(255, 255, 255, .095);
    font-size: clamp(18px, 4.5vw, 28px);
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 22px rgba(0, 0, 0, .14);
    text-transform: uppercase;
}

.cell.filled, .cell.active {
    border-color: rgba(155, 92, 255, .6);
    box-shadow: 0 0 0 4px rgba(155, 92, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.cell.active { animation: activeCell 1.2s infinite }

.cell.good {
    background: linear-gradient(135deg, #24ce7c, #108c57);
    border-color: rgba(97, 255, 174, .45)
}

.cell.miss {
    background: linear-gradient(135deg, #ffb83f, #bd7716);
    border-color: rgba(255, 210, 93, .45)
}

.cell.bad {
    background: linear-gradient(135deg, #657087, #424a5d);
    border-color: rgba(255, 255, 255, .08)
}

/* ============== KEYBOARD ============== */
#keyboard {
    display: grid;
    gap: 8px;
}

.keyboard-card {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.key-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.key-row button {
    flex: 1;
    min-width: 0;
    height: clamp(42px, 6.5vw, 52px);
    padding: 0 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    font-weight: 950;
    font-size: clamp(12px, 2vw, 15px);
    color: #e9efff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.key-row button.wide {
    flex: 1.5;
    font-size: clamp(11px, 1.6vw, 13px);
}

/* ============== WINNERS / LEADERBOARD ============== */

.winner-list { display: grid; gap: 10px }

.winner-card {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 11px;
    align-items: center;
    min-height: 66px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 19px;
    padding: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    overflow: hidden
}

.winner-info { min-width: 0 }

.avatar.sm {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 18px;
}

.winner-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 216, 102, .75), transparent),
                      radial-gradient(1px 1px at 85% 30%, rgba(255, 216, 102, .65), transparent),
                      radial-gradient(1px 1px at 55% 80%, rgba(255, 216, 102, .55), transparent);
    opacity: .55;
    pointer-events: none;
}

.winner-card > * { position: relative; z-index: 1 }

.medal {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 950;
    color: #170f00;
    background: linear-gradient(135deg, var(--gold), #b77918);
    box-shadow: 0 0 18px rgba(255, 215, 102, .24);
    flex-shrink: 0;
}

.winner-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }

.winner-info span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 3px
}

.silver .medal {
    background: linear-gradient(135deg, #f4f7fb, #8f9aac);
    color: #111827
}

.bronze .medal {
    background: linear-gradient(135deg, #f2a653, #9a5522);
    color: white
}

.leader-block {
    /*margin-top: 18px;*/
    /*padding-top: 17px;*/
    /*border-top: 1px solid rgba(255, 255, 255, .08)*/
}

.leader-head {
    display: grid;
    gap: 11px;
    margin-bottom: 10px
}

.tabs {
    display: flex;
    gap: 7px;
    /*flex-wrap: wrap;*/
}

.tabs button {
    display: flex;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .075);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    width: 100%;
}

.tabs .active {
    color: white;
    background: rgba(155, 92, 255, .18);
    border-color: rgba(155, 92, 255, .35)
}

.leader-row {
    display: grid;
    grid-template-columns: 32px auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.leader-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900
}

.leader-row b {
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leader-row em {
    font-style: normal;
    color: var(--cyan);
    font-weight: 950
}

/* ============== ANIMATIONS ============== */

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1 }
    50% { transform: scale(1.55); opacity: .45 }
}

@keyframes activeCell {
    0%, 100% { box-shadow: 0 0 0 4px rgba(155, 92, 255, .12), 0 0 0 0 rgba(66, 242, 223, 0) }
    50% { box-shadow: 0 0 0 4px rgba(155, 92, 255, .12), 0 0 0 7px rgba(66, 242, 223, .08) }
}

/* ============== RESPONSIVE ============== */

/* Tablet: 2-column with board on top */
@media (max-width: 1220px) {
    .room-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "game game"
            "players score";
    }

    .game-panel    { grid-area: game }
    .players-panel { grid-area: players }
    .score-panel   { grid-area: score }
}

/* Small tablet / large phone: stack hero parts */
@media (max-width: 860px) {
    .room-topbar {
        grid-template-columns: auto auto;
        gap: 10px;
    }

    .arena-hero {
        grid-column: 1 / -1;
        order: 2;
        grid-template-columns: 1fr;
    }

    .back-btn { order: 0 }
    .share-btn { order: 1 }
}

/* Phone */
@media (max-width: 640px) {

    .room-stage {
        padding: 14px;
    }

    .room-topbar {
        gap: 8px;
    }

    .ghost-btn {
        padding: 9px 11px;
        font-size: 13px;
        border-radius: 14px;
    }

    .arena-title-wrap, .timer-card {
        padding: 12px 14px;
        border-radius: 18px;
    }

    .arena-title-wrap h1 {
        font-size: clamp(18px, 5.5vw, 24px);
        gap: 8px;
    }

    .arena-title-wrap p { font-size: 12px }

    .status-pill {
        padding: 5px 9px;
        font-size: 10px;
    }

    .room-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 10px;
        margin-top: 12px;
    }

    .players-panel, .game-panel, .score-panel {
        grid-area: auto;
        grid-column: auto;
    }

    .game-panel    { order: 1 }
    .players-panel { order: 2 }
    .score-panel   { order: 3 }

    .side-panel, .game-panel {
        padding: 12px;
        border-radius: 18px;
    }

    .board-card {
        padding: 16px 10px;
        border-radius: 22px;
        margin: 12px auto;
    }

    .word-board {
        grid-template-columns: repeat(5, clamp(40px, 13vw, 56px));
        gap: 6px;
    }

    .cell {
        height: 2.4rem;
        border-radius: 6px;
        font-size: clamp(18px, 5.5vw, 24px);
    }

    .keyboard-card {
        margin-top: 14px;
        gap: 6px;
    }

    .key-row {
        gap: 4px;
    }

    .key-row button {
        height: 44px;
        padding: 0 2px;
        border-radius: 10px;
        font-size: 13px;
    }

    .key-row button.wide {
        flex: 1.4;
        font-size: 11px;
    }

    .notice-bar {
        font-size: 12px;
        padding: 8px 12px;
        min-height: 44px;
    }

    .players-badges { gap: 6px }

    .room-badge { padding: 9px 7px }
    .room-badge b { font-size: 20px }

    .winner-card { padding: 10px; min-height: 60px }

    .tabs button {
        padding: 7px 9px;
        font-size: 11px;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .ghost-btn {
        padding: 8px 9px;
        font-size: 12px;
    }

    .word-board {
        grid-template-columns: repeat(5, clamp(36px, 14vw, 50px));
        gap: 5px;
    }

    .cell {
        height: 2.2rem;
        font-size: clamp(16px, 5vw, 22px);
    }

    .key-row button {
        height: 40px;
        font-size: 12px;
    }

    .key-row button.wide {
        font-size: 10px;
    }
}


/* ============== STICKY TIMER BAR ============== */

.sticky-timer-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px 16px;
    background: rgba(8, 12, 26, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}

.sticky-timer-bar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

body.match-ended-modal-open .sticky-timer-bar {
    z-index: 1200;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-timer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "label value track";
    align-items: center;
    gap: 16px;
}

.sticky-timer-label {
    grid-area: label;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 900;
    white-space: nowrap;
}

.sticky-timer-value {
    grid-area: value;
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    min-width: 5.6ch;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.sticky-timer-track {
    grid-area: track;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    max-width: 240px;
    width: 100%;
    justify-self: end;
}

.sticky-timer-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 22px rgba(66, 242, 223, .38);
}

@media (max-width: 640px) {
    .sticky-timer-bar {
        padding: 8px 12px;
    }

    .sticky-timer-inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label value"
            "track track";
        gap: 6px 12px;
    }

    .sticky-timer-label {
        font-size: 11px;
    }

    .sticky-timer-value {
        font-size: 20px;
    }

    .sticky-timer-track {
        max-width: none;
        justify-self: stretch;
    }
}
.hidden{display:none!important}

.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(2,4,14,.68);backdrop-filter:blur(14px)}
.modal-card{width:min(460px,100%);border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,24,47,.96),rgba(8,12,27,.96));border-radius:28px;padding:24px;box-shadow:var(--shadow);color:var(--text)}
.modal-card h2{margin:0 0 8px;font-size:26px;letter-spacing:-.04em}.modal-card p{margin:0 0 16px;color:var(--muted)}
.modal-card input[type="text"],.modal-card input[type="email"],.modal-card input:not([type]){width:100%;height:46px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.06);color:var(--text);padding:0 14px;font:inherit;outline:none}
.avatar-picker-title{margin:16px 0 8px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.avatar-picker{display:flex;gap:8px;flex-wrap:wrap}.avatar-picker button{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:20px;cursor:pointer}.avatar-picker button.active{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(66,242,223,.13)}
.check{display:flex;gap:10px;align-items:flex-start;margin:16px 0;color:var(--text);font-weight:700}.check span{display:block;color:var(--muted);font-size:12px;font-weight:600}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}.modal-actions button,.secondary{min-height:42px;border-radius:14px;border:1px solid var(--line);padding:0 16px;font-weight:900;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.1}.modal-actions button:not(.secondary){background:linear-gradient(135deg,var(--cyan),var(--blue));color:#031018;border:0}.secondary{background:rgba(255,255,255,.06);color:var(--text)}.signin-choice-btn{position:relative;overflow:hidden;padding:0 18px!important;border-color:rgba(126,148,255,.28)!important;background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.18);transition:transform .16s ease,border-color .16s ease,background .16s ease}.signin-choice-btn:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 22% 0%,rgba(66,242,223,.22),transparent 36%),radial-gradient(circle at 90% 110%,rgba(155,92,255,.18),transparent 42%);pointer-events:none}.signin-choice-btn>*{position:relative;z-index:1}.signin-choice-btn:hover{transform:translateY(-1px);border-color:rgba(66,242,223,.45)!important;background:linear-gradient(180deg,rgba(66,242,223,.13),rgba(255,255,255,.06))!important}.signin-choice-icon{width:22px;height:22px;border-radius:9px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#06111f;box-shadow:0 8px 18px rgba(66,242,223,.18)}.signin-choice-icon svg{width:15px;height:15px}.win-badge{font-size:40px;margin-bottom:8px}

.cell.m2,.cell.good{background:linear-gradient(135deg,#24ce7c,#108c57);border-color:rgba(97,255,174,.45)}
.cell.m1,.cell.miss{background:linear-gradient(135deg,#ffb83f,#bd7716);border-color:rgba(255,210,93,.45)}
.cell.m0,.cell.bad{background:linear-gradient(135deg,#657087,#424a5d);border-color:rgba(255,255,255,.08)}
.hidden{display:none!important}

.player-row.watch-selectable{cursor:pointer;transition:border-color .16s ease, background .16s ease, transform .16s ease}
.player-row.watch-selectable:hover{border-color:rgba(155,92,255,.42);background:rgba(155,92,255,.08);transform:translateY(-1px)}
.player-row.selected-watch{border-color:rgba(155,92,255,.78);background:linear-gradient(135deg,rgba(155,92,255,.22),rgba(66,242,223,.08));box-shadow:0 0 0 3px rgba(155,92,255,.12)}
.cell.watch-fog{color:#efe7ff;background:linear-gradient(135deg,rgba(155,92,255,.34),rgba(93,46,179,.22));border-color:rgba(190,150,255,.42);text-shadow:0 0 10px rgba(190,150,255,.85);box-shadow:0 0 0 4px rgba(155,92,255,.10),inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px rgba(40,15,85,.24)}

.match-winners-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:18px;padding:12px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.match-winners-title{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.match-winners-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.match-winner-slot{position:relative;display:flex;align-items:center;gap:10px;min-width:0;border:1px dashed rgba(255,255,255,.12);border-radius:14px;padding:10px;background:rgba(0,0,0,.14);overflow:hidden}
.match-winner-slot.empty{opacity:.62;filter:grayscale(.9)}
.match-winner-slot.filled{border-style:solid;border-color:rgba(251,191,36,.35);background:radial-gradient(circle at 20% 10%,rgba(251,191,36,.18),transparent 46%),rgba(255,255,255,.06)}
.match-winner-medal{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;background:rgba(148,163,184,.22);color:#d1d5db;flex:0 0 auto}
.match-winner-slot.filled .match-winner-medal{background:linear-gradient(135deg,#fbbf24,#f97316);color:#1b1000;box-shadow:0 0 16px rgba(251,191,36,.35)}
.match-winner-slot b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-winner-slot span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.confetti-pop:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 10% 20%,#fbbf24 0 2px,transparent 3px),radial-gradient(circle at 30% 70%,#42f2df 0 2px,transparent 3px),radial-gradient(circle at 55% 25%,#9b5cff 0 2px,transparent 3px),radial-gradient(circle at 80% 65%,#22c55e 0 2px,transparent 3px);animation:confettiFlash .8s ease both}
@keyframes confettiFlash{0%{opacity:0;transform:translateY(-8px) scale(.96)}35%{opacity:1}100%{opacity:0;transform:translateY(8px) scale(1.04)}}
body.light .match-winners-card{background:#fff;border-color:#e5e7eb;box-shadow:0 12px 30px rgba(15,23,42,.06)}
body.light .match-winner-slot{background:#f8fafc;border-color:#e5e7eb}
@media (max-width:720px){.match-winners-list{grid-template-columns:1fr}.match-winner-slot{padding:9px}}
#nick.disabled,#nick:disabled{opacity:.55;cursor:not-allowed}

.auth-card{position:relative;width:min(440px,100%);padding:24px;background:radial-gradient(circle at 18% 0%,rgba(66,242,223,.16),transparent 34%),radial-gradient(circle at 100% 10%,rgba(155,92,255,.18),transparent 34%),linear-gradient(180deg,rgba(17,24,47,.98),rgba(8,12,27,.98));border-color:rgba(255,255,255,.12)}
.auth-card h2{font-size:26px;text-align:center;margin-top:4px}.auth-card>p{text-align:center;max-width:360px;margin:0 auto 16px!important;line-height:1.4;font-size:14px}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);font-size:23px;line-height:1;cursor:pointer}.modal-close:hover{background:rgba(255,255,255,.12)}
.auth-hero-icon{width:48px;height:48px;margin:0 auto 8px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,rgba(66,242,223,.22),rgba(155,92,255,.22));box-shadow:0 18px 45px rgba(66,242,223,.12),inset 0 1px 0 rgba(255,255,255,.18);font-size:24px}
.social-auth{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px 0 16px}
.social-btn{position:relative;width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.075);color:var(--text);cursor:pointer;padding:0;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.16);transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.social-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.24);box-shadow:0 16px 35px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12)}.social-btn:active{transform:translateY(0)}
.social-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.16);flex:0 0 auto}.social-icon svg{width:21px;height:21px;display:block}.social-btn.apple .social-icon{background:#050505;color:#fff}.social-btn.facebook .social-icon{background:#fff}.social-btn.google:hover{border-color:rgba(66,133,244,.46)}.social-btn.apple:hover{border-color:rgba(255,255,255,.42)}.social-btn.facebook:hover{border-color:rgba(24,119,242,.52)}
.secondary:hover{background:rgba(255,255,255,.1)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--muted);font-size:11px;font-weight:950;letter-spacing:.16em}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.email-auth{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(0,0,0,.16)}.email-auth label{display:block;margin:0 0 8px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.email-row,.pin-row{display:grid;grid-template-columns:1fr auto;gap:10px}.pin-row{margin-top:12px}.auth-card input[type="email"],.auth-card input:not([type]){height:50px;border-radius:17px;background:rgba(255,255,255,.08)}.auth-card input:focus{border-color:rgba(66,242,223,.58);box-shadow:0 0 0 4px rgba(66,242,223,.12)}
.email-row button,.pin-row button{height:50px;border:0;border-radius:17px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#031018;font-weight:950;cursor:pointer;padding:0 18px;box-shadow:0 12px 28px rgba(66,242,223,.16);white-space:nowrap}.email-row button:hover,.pin-row button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.auth-help{margin:10px 0 0!important;font-size:13px;line-height:1.45}.auth-status{min-height:18px;margin-top:10px;color:var(--muted);font-size:13px;font-weight:800}.auth-status:empty{display:none!important}.auth-status.error{color:#ff9aa7}.auth-status.ok{color:#8ff5c8}
body.light .auth-card{background:radial-gradient(circle at 18% 0%,rgba(14,165,233,.13),transparent 34%),radial-gradient(circle at 100% 10%,rgba(124,58,237,.12),transparent 34%),#fff;border-color:#e5e7eb}body.light .modal-close,body.light .social-btn{background:#fff;border-color:#e5e7eb;box-shadow:0 10px 24px rgba(15,23,42,.06)}body.light .social-btn:hover{background:#f8fafc;border-color:#cbd5e1}body.light .email-auth{background:#f8fafc;border-color:#e5e7eb}body.light .auth-divider:before,body.light .auth-divider:after{background:linear-gradient(90deg,transparent,#dbe3ef,transparent)}
@media (max-width:560px){.auth-card{padding:20px;width:min(400px,100%)}.social-auth{gap:10px}.social-btn{width:50px;height:50px;border-radius:17px}.email-row,.pin-row{grid-template-columns:1fr}.email-row button,.pin-row button{width:100%}}

@media (max-width:560px){
  #guestChoiceModal .modal-card{padding:20px;width:min(400px,100%)}
  #guestChoiceModal .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #guestChoiceModal .modal-actions button{width:100%;min-width:0;min-height:48px;padding:0 12px}
  #guestChoiceContinue{grid-column:1 / -1}
}
@media (max-width:380px){
  #guestChoiceModal .modal-actions{grid-template-columns:1fr}
  #guestChoiceContinue{grid-column:auto}
}

.join-player-btn.hidden{display:none!important}


/* Polished solved CTA state */
.arena-cta-btn.arena-cta-solved,
.arena-cta-btn.arena-cta-solved[aria-disabled="true"]{
  position:relative;
  overflow:hidden;
  opacity:1!important;
  pointer-events:none;
  cursor:default!important;
  color:#ecfdf5!important;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.30),transparent 28%),
    radial-gradient(circle at 92% 105%,rgba(20,184,166,.36),transparent 42%),
    linear-gradient(135deg,#16a34a 0%,#10b981 46%,#14b8a6 100%)!important;
  border-color:rgba(167,243,208,.62)!important;
  box-shadow:
    0 12px 30px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(6,95,70,.35)!important;
  transform:none!important;
}
.arena-cta-btn.arena-cta-solved:before{
  content:"";
  position:absolute;
  inset:-40% -25%;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.24) 47%,transparent 60%);
  transform:translateX(-55%);
  animation:solvedSheen 3.8s ease-in-out infinite;
  pointer-events:none;
}
.arena-cta-btn.arena-cta-solved:after{
  content:"DONE";
  position:absolute;
  top:8px;
  right:10px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.92);
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
  line-height:1;
}
.arena-cta-btn.arena-cta-solved .arena-cta-icon{
  position:relative;
  z-index:1;
  width:38px;
  height:38px;
  border-radius:14px;
  background:rgba(255,255,255,.22)!important;
  color:#fff!important;
  font-size:20px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 18px rgba(5,150,105,.24);
}
.arena-cta-btn.arena-cta-solved .arena-cta-icon span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#059669;
  line-height:1;
  box-shadow:0 5px 13px rgba(4,120,87,.22);
}
.arena-cta-btn.arena-cta-solved .arena-cta-text,
.arena-cta-btn.arena-cta-solved .arena-cta-title,
.arena-cta-btn.arena-cta-solved .arena-cta-sub{
  position:relative;
  z-index:1;
}
.arena-cta-btn.arena-cta-solved .arena-cta-title{
  color:#fff!important;
  font-size:14px;
  letter-spacing:-.01em;
  text-shadow:0 1px 1px rgba(4,120,87,.28);
}
.arena-cta-btn.arena-cta-solved .arena-cta-sub{
  color:rgba(236,253,245,.88)!important;
}
.arena-cta-btn.arena-cta-solved .arena-cta-arrow{display:none!important}
body.light .arena-cta-btn.arena-cta-solved,
body.light .arena-cta-btn.arena-cta-solved[aria-disabled="true"]{
  color:#064e3b!important;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.76),transparent 30%),
    linear-gradient(135deg,#dcfce7 0%,#bbf7d0 44%,#99f6e4 100%)!important;
  border-color:#86efac!important;
  box-shadow:0 12px 28px rgba(16,185,129,.20),inset 0 1px 0 rgba(255,255,255,.75)!important;
}
body.light .arena-cta-btn.arena-cta-solved .arena-cta-title{color:#064e3b!important;text-shadow:none}
body.light .arena-cta-btn.arena-cta-solved .arena-cta-sub{color:#047857!important}
body.light .arena-cta-btn.arena-cta-solved:after{background:rgba(255,255,255,.72);border-color:rgba(16,185,129,.22);color:#047857}
@keyframes solvedSheen{0%,55%{transform:translateX(-62%)}78%,100%{transform:translateX(62%)}}
@media (prefers-reduced-motion:reduce){.arena-cta-btn.arena-cta-solved:before{animation:none;display:none}}


.match-ended-card{position:relative;overflow:hidden;width:min(520px,100%)}
.match-ended-card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 18% 0%,rgba(66,242,223,.16),transparent 38%),radial-gradient(circle at 95% 20%,rgba(155,92,255,.18),transparent 36%);pointer-events:none}
.match-ended-card>*{position:relative;z-index:1}
.match-ended-word-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06)}
.match-ended-word-card span{color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.match-ended-word-card b{font-size:28px;letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 24px rgba(66,242,223,.22)}
.match-ended-section-title{margin:10px 0 8px;color:var(--text);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.match-ended-winners{display:grid;gap:9px;max-height:220px;overflow:auto;padding-right:2px}
.match-ended-winner{display:grid;grid-template-columns:34px 36px 1fr;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045)}
.match-ended-winner.first{background:linear-gradient(135deg,rgba(255,206,84,.13),rgba(255,255,255,.045));border-color:rgba(255,206,84,.25)}
.match-ended-place{width:30px;height:30px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:1000;color:var(--text)}
.match-ended-winner-info{min-width:0}.match-ended-winner-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-ended-winner-info span{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:700}
.match-ended-empty{padding:14px;border:1px dashed rgba(255,255,255,.14);border-radius:16px;color:var(--muted);text-align:center;font-weight:800}
.match-ended-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr}.match-ended-actions button{width:100%;}
body.light .match-ended-card{background:radial-gradient(circle at 18% 0%,rgba(14,165,233,.13),transparent 34%),radial-gradient(circle at 100% 10%,rgba(124,58,237,.12),transparent 34%),#fff;border-color:#e5e7eb}
body.light .match-ended-word-card,body.light .match-ended-winner{background:#f8fafc;border-color:#e5e7eb}body.light .match-ended-empty{border-color:#dbe3ef}
@media (max-width:560px){.match-ended-actions{grid-template-columns:1fr}.match-ended-word-card{align-items:flex-start;flex-direction:column}.match-ended-word-card b{font-size:24px}}

/* Match winners moved to the left panel instead of the players list */
.players-panel .match-winners-card {
    margin-top: 12px;
    margin-bottom: 0;
}

.players-panel .match-winners-list {
    grid-template-columns: 1fr;
}














/* Copy these styles from home.css to room.css for the Leaderboard home-page Top winners look.
   Required selectors/classes used by room_leaderboard_home_winners.js:
   .arena-leaderboard-winners, .arena-winner-card, .arena-winner-gold,
   .arena-winner-silver, .arena-winner-bronze, .arena-winner-regular,
   .arena-winner-avatar-wrap, .arena-medal, .arena-rank-badge,
   .arena-winner-avatar, .arena-winner-info, .arena-winner-name,
   .arena-winner-stats, .arena-winner-time, .arena-winner-tries,
   .arena-empty-winners, .leaderboard-load-top100.
*/
/*#leader {*/
/*    max-height: 500px;overflow-y: auto;*/
/*}*/
#leader.arena-leaderboard-winners {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

#leader.arena-leaderboard-winners .arena-winner-card {
    min-width: 0;
    border-radius: 10px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    /*overflow: unset;*/
}

#leader.arena-leaderboard-winners .arena-winner-gold {
    background:
            radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.18) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
            linear-gradient(135deg, #1a1505 0%, #0f0a02 100%);
    border-color: rgba(251, 191, 36, 0.25);
}

#leader.arena-leaderboard-winners .arena-winner-silver {
    background:
            radial-gradient(circle at 20% 30%, rgba(203, 213, 225, 0.12) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(203, 213, 225, 0.08) 0%, transparent 50%),
            linear-gradient(135deg, #131826 0%, #0a0e1c 100%);
    border-color: rgba(203, 213, 225, 0.18);
}

#leader.arena-leaderboard-winners .arena-winner-bronze {
    background:
            radial-gradient(circle at 20% 30%, rgba(180, 83, 9, 0.18) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(180, 83, 9, 0.1) 0%, transparent 50%),
            linear-gradient(135deg, #1a0e05 0%, #0d0702 100%);
    border-color: rgba(180, 83, 9, 0.25);
}

#leader.arena-leaderboard-winners .arena-winner-regular {
    background:
            radial-gradient(circle at 20% 30%, rgba(148, 163, 184, 0.08) 0%, transparent 50%),
            linear-gradient(135deg, rgba(17, 22, 42, .96) 0%, rgba(10, 14, 31, .96) 100%);
    border-color: rgba(255, 255, 255, 0.06);
}

#leader.arena-leaderboard-winners .arena-winner-gold::before,
#leader.arena-leaderboard-winners .arena-winner-silver::before,
#leader.arena-leaderboard-winners .arena-winner-bronze::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
            radial-gradient(1px 1px at 10% 20%, rgba(251, 191, 36, 0.8) 50%, transparent 100%),
            radial-gradient(1px 1px at 30% 60%, rgba(251, 191, 36, 0.6) 50%, transparent 100%),
            radial-gradient(2px 2px at 60% 30%, rgba(251, 191, 36, 0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 80% 80%, rgba(251, 191, 36, 0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 90% 40%, rgba(251, 191, 36, 0.5) 50%, transparent 100%),
            radial-gradient(1px 2px at 15% 75%, rgba(251, 191, 36, 0.6) 50%, transparent 100%),
            radial-gradient(2px 1px at 45% 85%, rgba(251, 191, 36, 0.4) 50%, transparent 100%),
            radial-gradient(1px 1px at 70% 15%, rgba(251, 191, 36, 0.7) 50%, transparent 100%);
}

#leader.arena-leaderboard-winners .arena-winner-silver::before {
    background-image:
            radial-gradient(1px 1px at 10% 20%, rgba(226, 232, 240, 0.85) 50%, transparent 100%),
            radial-gradient(1px 1px at 30% 60%, rgba(203, 213, 225, 0.7) 50%, transparent 100%),
            radial-gradient(2px 2px at 60% 30%, rgba(226, 232, 240, 0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 80% 80%, rgba(203, 213, 225, 0.75) 50%, transparent 100%),
            radial-gradient(1px 1px at 90% 40%, rgba(226, 232, 240, 0.55) 50%, transparent 100%),
            radial-gradient(1px 2px at 15% 75%, rgba(203, 213, 225, 0.65) 50%, transparent 100%),
            radial-gradient(2px 1px at 45% 85%, rgba(226, 232, 240, 0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 70% 15%, rgba(203, 213, 225, 0.75) 50%, transparent 100%);
}

#leader.arena-leaderboard-winners .arena-winner-bronze::before {
    background-image:
            radial-gradient(1px 1px at 10% 20%, rgba(217, 119, 6, 0.8) 50%, transparent 100%),
            radial-gradient(1px 1px at 30% 60%, rgba(217, 119, 6, 0.6) 50%, transparent 100%),
            radial-gradient(2px 2px at 60% 30%, rgba(217, 119, 6, 0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 80% 80%, rgba(217, 119, 6, 0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 90% 40%, rgba(217, 119, 6, 0.5) 50%, transparent 100%),
            radial-gradient(1px 2px at 15% 75%, rgba(217, 119, 6, 0.6) 50%, transparent 100%),
            radial-gradient(2px 1px at 45% 85%, rgba(217, 119, 6, 0.4) 50%, transparent 100%),
            radial-gradient(1px 1px at 70% 15%, rgba(217, 119, 6, 0.7) 50%, transparent 100%);
}

#leader.arena-leaderboard-winners .arena-winner-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

#leader.arena-leaderboard-winners .arena-winner-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
    background: #1a1f35;
}

#leader.arena-leaderboard-winners .arena-winner-gold .arena-winner-avatar {
    border-color: var(--gold, #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
#leader.arena-leaderboard-winners .arena-winner-silver .arena-winner-avatar { border-color: var(--silver, #cbd5e1); }
#leader.arena-leaderboard-winners .arena-winner-bronze .arena-winner-avatar {
    border-color: #d97706;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.3);
}

#leader.arena-leaderboard-winners .arena-medal {
    position: absolute;
    top: -3px;
    left: -7px;
    width: 19px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
}

#leader.arena-leaderboard-winners .arena-medal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#leader.arena-leaderboard-winners .arena-medal span {
    position: relative;
    z-index: 1;
    margin-top: -5px;
}

#leader.arena-leaderboard-winners .arena-rank-badge {
    position: absolute;
    top: -4px;
    left: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

#leader.arena-leaderboard-winners .arena-winner-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

#leader.arena-leaderboard-winners .arena-winner-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#leader.arena-leaderboard-winners .arena-winner-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    min-width: 0;
}

#leader.arena-leaderboard-winners .arena-winner-time {
    color: var(--teal, #14b8a6);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#leader.arena-leaderboard-winners .arena-winner-tries {
    color: var(--text-secondary, #8b93a7);
    white-space: nowrap;
}

#leader.arena-leaderboard-winners .arena-empty-winners {
    grid-column: 1 / -1;
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-secondary, #8b93a7);
    font-size: 13px;
    font-weight: 700;
}

/*.leaderboard-load-top100 {*/
/*    width: 100%;*/
/*    display: inline-flex !important;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    margin: 8px 0 12px;*/
/*    padding: 10px 14px !important;*/
/*    border-radius: 999px !important;*/
/*    font-size: 14px !important;*/
/*    line-height: 1 !important;*/
/*    font-weight: 850 !important;*/
/*}*/
/*.leaderboard-load-top100:disabled {*/
/*    opacity: .58;*/
/*    cursor: wait;*/
/*}*/

@media (max-width: 760px) {
    #leader.arena-leaderboard-winners {
        grid-template-columns: 1fr;
    }
}




.leaderboard-load-top100 {
    width: 100%;
    margin: 12px 0 0;
    min-height: 48px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .01em;
    /*background:*/
    /*        radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 28%),*/
    /*        linear-gradient(135deg, #7c3aed, #2563eb 48%, #06b6d4);*/
    background:
            radial-gradient(circle at 18% 18%, rgba(167,139,250,.22), transparent 30%),
            radial-gradient(circle at 82% 80%, rgba(6,182,212,.16), transparent 34%),
            linear-gradient(135deg, #17112b, #0f172a 48%, #082f49);
    box-shadow: 0 16px 34px rgba(37, 99, 235, .24), 0 8px 18px rgba(124, 58, 237, .2);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease;
    position: relative;
    overflow: hidden;
}
.leaderboard-load-top100::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: translateX(-120%);
    transition: transform .45s ease;
}
.leaderboard-load-top100:hover:not(:disabled)::before { transform: translateX(120%); }
.leaderboard-load-top100:hover:not(:disabled) {
    /*transform: translateY(-1px);*/
    box-shadow: 0 20px 42px rgba(37, 99, 235, .3), 0 10px 22px rgba(124, 58, 237, .24);
    filter: saturate(1.08);
}
.leaderboard-load-top100:active:not(:disabled) { transform: translateY(0); }
.leaderboard-load-top100:disabled {
    cursor: not-allowed;
    opacity: .72;
    filter: grayscale(.08);
    transform: none;
}
.leaderboard-load-top100[hidden] { display: none !important; }
.leaderboard-load-top100 .leaderboard-load-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    font-size: 15px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.leaderboard-load-top100 .leaderboard-load-label,
.leaderboard-load-top100 .leaderboard-load-arrow {
    position: relative;
    z-index: 1;
}
.leaderboard-load-top100 .leaderboard-load-arrow {
    opacity: .9;
    font-size: 18px;
    line-height: 1;
}
.leaderboard-load-top100.is-loading .leaderboard-load-icon {
    color: transparent;
}
.leaderboard-load-top100.is-loading .leaderboard-load-icon::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    animation: leaderboardTop100Spin .75s linear infinite;
}
@keyframes leaderboardTop100Spin { to { transform: rotate(360deg); } }



[data-board].is-loading {
    cursor: wait;
}

.leaderboard-tab-spinner {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 7px;
    animation: leaderboardTop100Spin .75s linear infinite;
}




/*.stats {*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    flex-wrap: wrap;*/
/*    justify-content: flex-end*/
/*}*/


/*.arena-stats-grid {*/
/*    display: grid;*/
/*    grid-template-columns:repeat(4, minmax(0, 1fr));*/
/*    gap: 10px*/
/*}*/

/*.arena-stat-card {*/
/*    background: var(--bg-stat);*/
/*    border: 1px solid var(--border-soft);*/
/*    border-radius: 11px;*/
/*    padding: 11px 12px;*/
/*    position: relative*/
/*}*/

/*.arena-stat-header {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*    color: var(--text-secondary);*/
/*    font-size: 11px;*/
/*    font-weight: 600;*/
/*    margin-bottom: 7px*/
/*}*/

/*.arena-stat-header svg {*/
/*    width: 12px;*/
/*    height: 12px*/
/*}*/

/*.arena-stat-value-row {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between*/
/*}*/

/*.arena-stat-value {*/
/*    font-size: 22px;*/
/*    font-weight: 800;*/
/*    line-height: 1*/
/*}*/

/*.arena-stat-icon-box {*/
/*    width: 28px;*/
/*    height: 28px;*/
/*    border-radius: 7px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    flex-shrink: 0*/
/*}*/

/*.arena-stat-icon-box svg {*/
/*    width: 15px;*/
/*    height: 15px*/
/*}*/

/*.arena-dot {*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    border-radius: 50%;*/
/*    display: inline-block;*/
/*    background: var(--green);*/
/*    box-shadow: 0 0 8px var(--green);*/
/*    flex-shrink: 0*/
/*}*/

/*.arena-stat-online .arena-stat-value {*/
/*    color: var(--green)*/
/*}*/

/*.arena-stat-online .arena-stat-icon-box {*/
/*    background: rgba(34, 197, 94, .15);*/
/*    color: var(--green)*/
/*}*/

/*.arena-stat-watching .arena-stat-header, .arena-stat-watching .arena-stat-value {*/
/*    color: var(--blue)*/
/*}*/

/*.arena-stat-watching .arena-stat-icon-box {*/
/*    background: rgba(59, 130, 246, .15);*/
/*    color: var(--blue)*/
/*}*/

/*.arena-stat-match .arena-stat-header, .arena-stat-match .arena-stat-value {*/
/*    color: var(--orange)*/
/*}*/

/*.arena-stat-match .arena-stat-icon-box {*/
/*    background: rgba(245, 158, 11, .15);*/
/*    color: var(--orange)*/
/*}*/

/*.arena-stat-waiting .arena-stat-header, .arena-stat-waiting .arena-stat-value {*/
/*    color: var(--purple-bright)*/
/*}*/

/*.arena-stat-waiting .arena-stat-icon-box {*/
/*    background: rgba(168, 85, 247, .15);*/
/*    color: var(--purple-bright)*/
/*}*/

/*!* Home hero stats use the same visual language as room card stats *!*/
/*.hero .stats{*/
/*    display:flex;*/
/*    flex-direction: column;*/
/*    gap:7px;*/
/*    justify-content:stretch;*/
/*    align-items:stretch;*/
/*    width: 100%;*/
/*}*/
/*.hero .home-stat-card{*/
/*    --bg-stat:rgba(255,255,255,.035);*/
/*    --border-soft:var(--border);*/
/*    --text-secondary:var(--muted);*/
/*    --green:#22c55e;*/
/*    --blue:#3b82f6;*/
/*    --orange:#f59e0b;*/
/*    --purple-bright:#b794ff;*/
/*    --teal:#14b8a6;*/
/*    min-width:0;*/
/*    padding:8px 9px;*/
/*    border-radius:9px;*/
/*    background:var(--bg-stat);*/
/*    border-color:var(--border-soft);*/
/*}*/
/*.hero .home-stat-card .arena-stat-value{*/
/*    font-size:19px;*/
/*    font-variant-numeric:tabular-nums;*/
/*}*/

/*.hero .home-stat-card .arena-stat-header{*/
/*    gap:4px;*/
/*    margin-bottom:4px;*/
/*    font-size:10px;*/
/*    line-height:1.1;*/
/*}*/
/*.hero .home-stat-card .arena-stat-header svg{width:10px;height:10px}*/
/*.hero .home-stat-card .arena-stat-icon-box{width:22px;height:22px;border-radius:6px}*/
/*.hero .home-stat-card .arena-stat-icon-box svg{width:12px;height:12px}*/
/*.hero .home-stat-card .arena-dot{width:6px;height:6px}*/

/*.hero .arena-stat-rooms .arena-stat-header,*/
/*.hero .arena-stat-rooms .arena-stat-value{*/
/*    color:var(--teal,var(--aqua));*/
/*}*/
/*.hero .arena-stat-rooms .arena-stat-icon-box{*/
/*    background:rgba(69,234,214,.15);*/
/*    color:var(--teal,var(--aqua));*/
/*}*/
/*body.light .hero .home-stat-card{*/
/*    --bg-stat:#fff;*/
/*    --border-soft:#e1e7f2;*/
/*    --text-secondary:#68738a;*/
/*    box-shadow:0 8px 18px rgba(27,39,70,.06);*/
/*}*/
/*@media(max-width:980px){*/
/*    .hero{align-items:stretch;flex-direction:column}*/
/*    .hero .stats{min-width:0;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:stretch}*/
/*}*/
/*@media(max-width:760px){*/
/*    .hero .stats{grid-template-columns:repeat(2,minmax(0,1fr))}*/
/*    .hero .arena-stat-rooms{grid-column:span 2}*/
/*}*/
/*@media(max-width:420px){*/
/*    .hero .stats{grid-template-columns:1fr}*/
/*    .hero .arena-stat-rooms{grid-column:auto}*/
/*}*/
/* Room mode button: homepage CTA style */
.mode-action-btn.join-player-btn,
.mode-action-btn {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px 12px;
    /*border: 1px solid rgba(255,255,255,.12);*/
    border: none;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    cursor: pointer;
    color: #fff;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease;
}

.mode-action-btn.join-player-btn::before,
.mode-action-btn::before {
    content: '';
    position: absolute;
    inset: -45% -25%;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.20) 47%, transparent 60%);
    transform: translateX(-65%);
    transition: transform .55s ease;
    pointer-events: none;
}

.mode-action-btn.join-player-btn:hover:not(:disabled),
.mode-action-btn:hover:not(:disabled) {
    /*transform: translateY(-1px);*/
    filter: saturate(1.08);
}

.mode-action-btn.join-player-btn:hover:not(:disabled)::before,
.mode-action-btn:hover:not(:disabled)::before { transform: translateX(65%); }

.mode-action-btn.join-player-btn:active:not(:disabled),
.mode-action-btn:active:not(:disabled) { transform: translateY(0); }

.mode-action-btn.join-player-btn:disabled,
.mode-action-btn:disabled {
    cursor: not-allowed;
    opacity: .72;
    filter: grayscale(.08);
    transform: none;
}

.mode-action-btn.mode-play {
    /*background:linear-gradient(90deg, rgb(139, 92, 246) 0%, rgb(99, 102, 241) 50%, rgb(59, 130, 246) 100%);*/
    background:
            radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 28%),
            linear-gradient(135deg, #7c3aed, #2563eb 48%, #06b6d4);

    /*border-color: rgba(139, 92, 246, 0.4);*/
    /*box-shadow: rgba(99, 102, 241, 0.25) 0px 6px 22px;*/
}

.mode-action-btn.mode-play:hover:not(:disabled) {
    /*box-shadow: 0 16px 38px rgba(16,185,129,.34), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(6,95,70,.30);*/
    box-shadow: rgba(99, 102, 241, 0.25) 0px 6px 22px;
}

.mode-action-btn.mode-watch {
    background:
            radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 28%),
            linear-gradient(135deg, rgba(22,27,47,.96), rgba(15,20,38,.98));
    border-color: rgba(139,92,246,.28);
    box-shadow: 0 12px 28px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.06);
    color: #f8fafc;
}

.mode-action-btn.mode-watch:hover:not(:disabled) {
    border-color: rgba(139,92,246,.46);
    box-shadow: 0 16px 36px rgba(15,23,42,.34), 0 0 0 1px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.07);
}

.mode-action-btn .mode-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.mode-action-btn .mode-action-icon svg {
    width: 22px;
    height: 22px;
}

.mode-action-btn.mode-play .mode-action-icon {
    background: rgba(255,255,255,.22);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px rgba(5,150,105,.24);
}

.mode-action-btn.mode-watch .mode-action-icon {
    background: rgba(124,58,237,.16);
    color: #8b5cf6;
    box-shadow: inset 0 0 0 1px rgba(139,92,246,.14), 0 8px 18px rgba(2,6,23,.18);
}

.mode-action-btn .mode-action-text {
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
}

.mode-action-btn .mode-action-label {
    display: block;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-action-btn .mode-action-sub {
    display: block;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-action-btn.mode-play .mode-action-sub { color: rgba(236,253,245,.88); }
.mode-action-btn.mode-watch .mode-action-sub { color: rgba(203,213,225,.72); }

.mode-action-btn .mode-action-arrow {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    opacity: .78;
    margin-left: auto;
}

.mode-action-btn.mode-watch .mode-action-arrow { color: rgba(148,163,184,.86); }
.mode-action-btn.mode-play .mode-action-arrow { color: rgba(255,255,255,.84); }

body.light .mode-action-btn.mode-play {
    color: #064e3b;
    background:
            radial-gradient(circle at 18% 18%, rgba(255,255,255,.76), transparent 30%),
            linear-gradient(135deg, #dcfce7 0%, #bbf7d0 44%, #99f6e4 100%);
    border-color: #86efac;
    box-shadow: 0 12px 28px rgba(16,185,129,.20), inset 0 1px 0 rgba(255,255,255,.75);
}
body.light .mode-action-btn.mode-play .mode-action-icon { background: rgba(16,185,129,.15); color: #047857; }
body.light .mode-action-btn.mode-play .mode-action-sub { color: #047857; }
body.light .mode-action-btn.mode-play .mode-action-arrow { color: #047857; }

body.light .mode-action-btn.mode-watch {
    color: #111827;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-color: rgba(148,163,184,.34);
    box-shadow: 0 12px 26px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.80);
}
body.light .mode-action-btn.mode-watch .mode-action-icon { background: rgba(124,58,237,.10); color: #7c3aed; }
body.light .mode-action-btn.mode-watch .mode-action-sub { color: #64748b; }
body.light .mode-action-btn.mode-watch .mode-action-arrow { color: #94a3b8; }


.watch-player-panel {
    margin: 14px 0 16px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(37,99,235,.08));
    border: 1px solid rgba(124,58,237,.20);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
.watch-player-panel.hidden { display: none; }
.watch-player-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.watch-player-head b { display:block; font-size:14px; }
.watch-player-head span { display:block; font-size:12px; color: var(--muted, #64748b); font-weight:650; }


.watch-player-form {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(160px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.watching-player-card,
.watching-player-empty {
    min-width: 0;
}

.watch-player-form input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: inherit;
    font-weight: 750;
    outline: none;
}

.watch-player-form input::placeholder {
    color: rgba(255,255,255,.42);
}

.watch-player-form button {
    height: 42px;
    border: 0;
    border-radius: 14px;
    padding: 0 14px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .watch-player-form {
        grid-template-columns: 1fr;
    }

    .watch-player-form button {
        width: 100%;
    }
}



.watch-player-submit { color:#fff; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 12px 24px rgba(124,58,237,.22); }
.watch-player-random {
    min-width: max-content;
    position: relative;
    overflow: hidden;

    height: 42px;
    border-radius: 14px;
    padding: 0 16px;

    color: rgba(255,255,255,.94);
    font-weight: 900;
    letter-spacing: .01em;

    background:
            radial-gradient(circle at 25% 15%, rgba(255,255,255,.22), transparent 34%),
            linear-gradient(135deg, rgba(124,58,237,.82), rgba(37,99,235,.72));

    border: 1px solid rgba(255,255,255,.18) !important;

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.20),
            0 10px 24px rgba(124,58,237,.22);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
            transform .16s ease,
            box-shadow .16s ease,
            border-color .16s ease,
            filter .16s ease;
}

.watch-player-random::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 72%);
    transform: translateX(-120%);
    transition: transform .45s ease;
    pointer-events: none;
}

.watch-player-random:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(255,255,255,.30) !important;
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.24),
            0 14px 30px rgba(124,58,237,.30);
}

.watch-player-random:hover::before {
    transform: translateX(120%);
}

.watch-player-random:active {
    transform: translateY(0) scale(.98);
}
.watch-player-current {
    margin-top: 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color: var(--muted, #64748b);
    font-size:12px;
    font-weight:750;
}
.watch-player-current strong { color: inherit; }
.watch-player-spinner {
    width:14px;
    height:14px;
    border-radius:999px;
    border:2px solid rgba(124,58,237,.22);
    border-top-color:#7c3aed;
    animation: watchPlayerSpin .75s linear infinite;
    display:inline-block;
    vertical-align:-2px;
    margin-right:6px;
}
@keyframes watchPlayerSpin { to { transform: rotate(360deg); } }

.watching-player-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 16px;

    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 10px 28px rgba(0,0,0,.12);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.watching-player-avatar {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.watching-player-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.watching-player-kicker {
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(167,139,250,.95);
}

.watching-player-name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 14px;
    line-height: 1.15;
    font-weight: 900;
    color: rgba(255,255,255,.94);
}

.watching-player-id {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
    line-height: 1.15;
    font-weight: 750;
    color: rgba(255,255,255,.48);
}

/*#joinModal {*/
/*    align-items: flex-start;*/
/*    overflow-y: auto;*/
/*}*/

/*#joinModal .modal-card {*/
/*    max-height: calc(100vh - 48px);*/
/*    overflow-y: auto;*/
/*    margin: auto;*/
/*}*/

#joinModal .modal-card {
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#joinModal .avatar-picker {
    flex: 1;          /* занимает всё оставшееся место */
    overflow-y: auto;
    min-height: 80px;
}

#nick-error{color:#ff9aa7}