/* styles.css — Faithful to Qt client Theme.js colours + QML layouts
   ===================================================================== */

:root {
    color-scheme: dark;

    --ui-scale: 1;
    --density-scale: 1;
    --space-1: calc(4px * var(--density-scale));
    --space-2: calc(8px * var(--density-scale));
    --space-3: calc(12px * var(--density-scale));
    --space-4: calc(16px * var(--density-scale));
    --space-5: calc(20px * var(--density-scale));
    --space-6: calc(24px * var(--density-scale));
    --radius-sm: 4px;
    --radius-md: 7px;
    --radius-lg: 10px;
    --font-small: calc(12px * var(--ui-scale));
    --font-control: calc(14px * var(--ui-scale));
    --font-body: calc(15px * var(--ui-scale));
    --font-title: calc(24px * var(--ui-scale));
    --font-hero: calc(32px * var(--ui-scale));
    --button-height: calc(42px * var(--ui-scale) * var(--density-scale));
    --button-pad-x: calc(16px * var(--density-scale));
    --control-height: calc(38px * var(--ui-scale) * var(--density-scale));

    --bg-menu:#171A1F; --bg-menu-top:#1E2430; --bg-menu-bottom:#151817;
    --bg-lobby:#182128; --bg-lobby-top:#1D2830; --bg-lobby-bottom:#151C22;
    --bg-grid:#202124; --bg-statusbar:#252B34; --bg-modal:#20242B; --bg-networkbar:#1B222A;

    --card-primary:#252A33; --card-secondary:#263A38; --card-active:#313846; --card-hover:#303744; --card-pressed:#202630;
    --card-level:#242934; --card-level-started:#2A3342; --card-level-done:#24382F;
    --panel-bg:#20252D; --panel-elevated:#2A303B; --panel-border:#3B4552; --border:#3B4552; --focus-ring:#69D6FF;

    --leaderboard-panel-bg:#202733; --leaderboard-panel-raised:#283141; --leaderboard-row-bg:#212936; --leaderboard-row-bg-alt:#263142; --leaderboard-time-bg:#151B24; --leaderboard-row-border:#3C4A5E; --leaderboard-row-text:#F2F6FA; --leaderboard-row-muted:#99A8B8; --leaderboard-row-accent:#69D6FF; --leaderboard-gold:#F6C85F; --leaderboard-silver:#C8D1DC; --leaderboard-bronze:#D8945F;

    --text-primary:#F7FAFC; --text-secondary:#C8D0D8; --text-muted:#98A4B1; --text-dimmed:#798594; --text-detail:#A4AFBA; --text-info:#D5DCE4; --text-continue:#8EF2B2; --text-on-accent:#FFFFFF;

    --accent-red:#F06464; --accent-green:#39D98A; --accent-blue:#4F8CFF; --accent-orange:#F6B44B; --accent-teal:#1FD1B9; --accent-purple:#B18CFF; --accent-pink:#F472B6;
    --win-green:#39D98A; --win-green-dark:#19B96B; --loss-red:#F06464; --loss-red-light:#FF8A8A; --loss-red-dark:#C84A4A; --pause-yellow:#F6D365; --duel-pause:#F6B44B;

    --btn-default:#303743; --btn-pressed:#242B35; --btn-border:#46515F; --danger-default:#C84A4A; --danger-pressed:#A83A3A;
    --display-bg:#080A0C; --display-text:#FF5757;
    --separator:#3A4552; --modal-border:#DCE6F0; --modal-overlay:rgba(10,14,20,0.82);
    --duel-stat-text:#D5DCE4; --duel-divider:#46515F; --duel-score-text:#D5DCE4; --duel-score-colon:#8793A1; --reason-box-bg:#181C22; --reason-box-border:#3A4552;
    --progress-bg:#1E232B; --progress-complete:#39D98A; --progress-partial:#4F8CFF;
    /* Level stars are GOLD, not green — green is the "completed" colour and the
       stars vanished into the completed card's green when they shared it. */
    --star-earned:#F6C453; --star-pending:#9A874F; --star-track:#4A5361;
    --ready-active:#2ECC71; --ready-inactive:#7F8C8D;
    --avatar-bg:#2A303B; --avatar-text:#F7FAFC; --avatar-border:#46515F;
    --input-bg:#20252D; --input-border:#46515F;
}

:root[data-theme="blue"] {
    color-scheme: dark;
    --bg-menu:#2B3D50; --bg-menu-top:#344D63; --bg-menu-bottom:#26384A;
    --bg-lobby:#2B4254; --bg-lobby-top:#365267; --bg-lobby-bottom:#263A4B;
    --bg-grid:#546777; --bg-statusbar:#25384C; --bg-modal:#26394D; --bg-networkbar:#263B50;
    --card-primary:#3A5065; --card-secondary:#375B61; --card-active:#486174; --card-hover:#435B70; --card-pressed:#2D4357;
    --card-level:#374D61; --card-level-started:#405C74; --card-level-done:#3A6558;
    --panel-bg:#2F455A; --panel-elevated:#3A5268; --panel-border:#6D8AA1; --border:#6D8AA1; --focus-ring:#8DDCFF;
    --leaderboard-panel-bg:#33495F; --leaderboard-panel-raised:#405872; --leaderboard-row-bg:#354C63; --leaderboard-row-bg-alt:#3D566F; --leaderboard-time-bg:#25384B; --leaderboard-row-border:#728AA0; --leaderboard-row-text:#F3F8FC; --leaderboard-row-muted:#C1D2E1; --leaderboard-row-accent:#8DDCFF;
    --text-primary:#F3F8FC; --text-secondary:#D4E2EE; --text-muted:#AFC4D5; --text-dimmed:#92AABB; --text-detail:#BCD0DF; --text-info:#DCE8F2; --text-continue:#9DF4C5;
    --accent-red:#FF7373; --accent-green:#3BE39A; --accent-blue:#62A6FF; --accent-orange:#FFC65E; --accent-teal:#39E0CF; --accent-purple:#BFA2FF; --accent-pink:#FF8CC7;
    --win-green:#3BE39A; --win-green-dark:#22C77A; --loss-red:#FF7373; --loss-red-light:#FF9090; --loss-red-dark:#D95A5A; --pause-yellow:#F7D875; --duel-pause:#F2B85C;
    --btn-default:#38536B; --btn-pressed:#263E54; --btn-border:#7895AA; --danger-default:#D95A5A; --danger-pressed:#B94848;
    --display-bg:#080A0C; --display-text:#FF6B6B;
    --separator:#70869A; --modal-border:#78A6C7; --modal-overlay:rgba(7,17,30,0.78);
    --duel-stat-text:#DCE8F2; --duel-divider:#7890A3; --duel-score-text:#E4EFF7; --duel-score-colon:#A7BBCC; --reason-box-bg:#263A4C; --reason-box-border:#70869A;
    --progress-bg:#2D4357; --progress-complete:#3BE39A; --progress-partial:#62A6FF; --ready-active:#3BE39A; --ready-inactive:#99AAB7;
    --star-earned:#FFD166; --star-pending:#B39A5E; --star-track:#5D7B93;
    --avatar-bg:#3A5268; --avatar-text:#F3F8FC; --avatar-border:#7895AA;
    --input-bg:#2F455A; --input-border:#7895AA;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg-menu:#E7F0F7; --bg-menu-top:#F2F7FB; --bg-menu-bottom:#DCEAF4;
    --bg-lobby:#E3EEF6; --bg-lobby-top:#EEF6FB; --bg-lobby-bottom:#D8E7F1;
    --bg-grid:#D8E3EC; --bg-statusbar:#D6E2EC; --bg-modal:#EDF4F8; --bg-networkbar:#DCE8F2;
    --card-primary:#F3F8FC; --card-secondary:#E3F1EE; --card-active:#D9E7F2; --card-hover:#EAF3FA; --card-pressed:#CFDEE9;
    --card-level:#F4F8FB; --card-level-started:#E4EEF8; --card-level-done:#E0F0E9;
    --panel-bg:#EAF2F8; --panel-elevated:#F5F9FC; --panel-border:#B6C8D7; --border:#B6C8D7; --focus-ring:#2D8FD6;
    --leaderboard-panel-bg:#EAF2F8; --leaderboard-panel-raised:#F5F9FD; --leaderboard-row-bg:#F7FAFD; --leaderboard-row-bg-alt:#EDF5FA; --leaderboard-time-bg:#DDEAF4; --leaderboard-row-border:#B5C8D8; --leaderboard-row-text:#233244; --leaderboard-row-muted:#667A8E; --leaderboard-row-accent:#2D8FD6;
    --text-primary:#1F2D3D; --text-secondary:#42566B; --text-muted:#667A8E; --text-dimmed:#8292A4; --text-detail:#5D7186; --text-info:#31465C; --text-continue:#147A4A;
    --accent-red:#D85656; --accent-green:#199D64; --accent-blue:#347FEB; --accent-orange:#D98A1E; --accent-teal:#139D93; --accent-purple:#7D62D8; --accent-pink:#D45591;
    --win-green:#199D64; --win-green-dark:#11834F; --loss-red:#D85656; --loss-red-light:#C94E4E; --loss-red-dark:#A93C3C; --pause-yellow:#C78E16; --duel-pause:#D98A1E;
    --btn-default:#DCE8F2; --btn-pressed:#C8D8E5; --btn-border:#AFC2D2; --danger-default:#D85656; --danger-pressed:#B94747;
    --display-bg:#080A0C; --display-text:#C93C3C;
    --separator:#B9CAD8; --modal-border:#AFC1D0; --modal-overlay:rgba(68,84,102,0.48);
    --duel-stat-text:#42566B; --duel-divider:#B6C8D7; --duel-score-text:#31465C; --duel-score-colon:#6F8397; --reason-box-bg:#E3ECF4; --reason-box-border:#B8CAD8;
    --progress-bg:#D6E4EE; --progress-complete:#199D64; --progress-partial:#347FEB; --ready-active:#199D64; --ready-inactive:#8EA0AF;
    --star-earned:#C8890F; --star-pending:#A8945E; --star-track:#B9C7D4;
    --avatar-bg:#DDEAF4; --avatar-text:#1F2D3D; --avatar-border:#AFC2D2;
    --input-bg:#F5F9FC; --input-border:#AFC2D2;
}

:root[data-ui-size="micro"] { --ui-scale: .82; }
:root[data-ui-size="small"] { --ui-scale: .92; }
:root[data-ui-size="big"] { --ui-scale: 1.12; }
:root[data-ui-density="veryCompact"] { --density-scale: .58; }
:root[data-ui-density="compact"] { --density-scale: .76; }

/* ====================================================================
   Reset
   ==================================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-menu);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh; width: 100vw;     /* fallback for older browsers */
    height: 100dvh; width: 100dvw;  /* dynamic viewport — excludes mobile browser chrome */
    user-select: none; -webkit-user-select: none;
}

#app {
    width:100%; height:100%;
    display:flex; flex-direction:column;
    position:relative;
}

/* ====================================================================
   Buttons
   ==================================================================== */
.btn {
    min-height: var(--button-height);
    background: var(--btn-default);
    color: var(--text-primary);
    border: 1px solid var(--btn-border); border-radius: var(--radius-md);
    padding: var(--space-2) var(--button-pad-x); font-size: var(--font-control);
    font-weight: 600;
    cursor: pointer; text-align: center;
    width: 100%;
    transition: background .12s, border-color .12s, transform .08s;
}
.btn:hover { background: var(--card-hover); border-color: var(--focus-ring); }
.btn:active { background: var(--btn-pressed); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:disabled { opacity:.68; cursor:not-allowed; background:var(--card-primary); border-color:var(--panel-border); color:var(--text-muted); transform:none; }
.btn:disabled:hover { background:var(--card-primary); border-color:var(--panel-border); color:var(--text-muted); }

.btn-small  { min-height:calc(32px * var(--ui-scale) * var(--density-scale)); padding: var(--space-1) var(--space-3); font-size: var(--font-small); width: auto; }
.btn-icon   { width: auto; padding: var(--space-1) var(--space-3); font-size: var(--font-control); font-weight: bold; }

.btn-accent { background: var(--accent-blue); color:var(--text-on-accent); border-color:color-mix(in srgb, var(--accent-blue), white 18%); }
.btn-accent:hover { background:color-mix(in srgb, var(--accent-blue), white 8%); }
.btn-danger { background: var(--danger-default); color:var(--text-on-accent); border-color:color-mix(in srgb, var(--danger-default), white 15%); }
.btn-danger:hover { background:var(--danger-pressed); }
.btn-success{ background: var(--accent-green); color:var(--text-on-accent); border-color:color-mix(in srgb, var(--accent-green), white 15%); }
.btn-warning{ background: var(--accent-orange); color:var(--text-on-accent); border-color:color-mix(in srgb, var(--accent-orange), white 15%); }
.btn-duel{ background: var(--accent-purple); color:var(--text-on-accent); border-color:color-mix(in srgb, var(--accent-purple), white 15%); }

/* ====================================================================
   Inputs
   ==================================================================== */
input[type="text"],input[type="number"],select {
    background: var(--input-bg); color: var(--text-primary);
    border: 1px solid var(--input-border); border-radius: var(--radius-md);
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3); font-size: var(--font-body); outline:none; width:100%;
}
input:focus,select:focus { border-color: var(--focus-ring); box-shadow:0 0 0 2px color-mix(in srgb, var(--focus-ring), transparent 70%); }

input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width:100%; height:8px; border-radius:4px;
    background: var(--input-border); outline:none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; width:18px; height:18px;
    border-radius:50%; background: var(--accent-blue); cursor:pointer;
}

input[type="checkbox"] {
    width:18px; height:18px; accent-color: var(--accent-blue);
}

/* ====================================================================
   Screens  (stack on top of each other)
   ==================================================================== */
.screen {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    display:none; flex-direction:column;
}
.screen.active { display:flex; }

/* ====================================================================
   MAIN MENU
   ==================================================================== */
#mainMenu {
    background:
        linear-gradient(165deg, var(--bg-menu-top), var(--bg-menu-bottom)),
        var(--bg-menu);
    align-items:center;
    justify-content:flex-start;
    padding: clamp(16px, 4vw, 28px);
    overflow-x:hidden;
    overflow-y:auto;
}
#mainMenu::before {
    content:"";
    position:absolute;
    inset:-40px;
    pointer-events:none;
    opacity:.35;
    background-image:
        linear-gradient(color-mix(in srgb, var(--panel-border), transparent 72%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--panel-border), transparent 72%) 1px, transparent 1px);
    background-size:42px 42px;
    transform:rotate(-10deg);
}
.main-menu-header {
    position:relative;
    z-index:1;
    width:min(100%, 620px);
    min-height:calc(72px * var(--ui-scale));
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.menu-content {
    position:relative;
    z-index:1;
    max-width:582px; width:100%;
    flex:0 0 auto;
    margin-block:auto;
    display:flex; flex-direction:column;
    gap:var(--space-3);
    padding:var(--space-3) 0;
}
#mainMenu h1 { font-size:var(--font-hero); text-align:center; margin:0; letter-spacing:0; }
.subtitle { color:var(--text-secondary); text-align:center; font-size:16px; margin-bottom:8px; }
.menu-separator { height:2px; background:var(--separator); margin:8px 0; }
.menu-section { display:flex; flex-direction:column; gap:var(--space-1); }
.menu-section-title { color:var(--text-muted); font-weight:bold; text-align:left; font-size:var(--font-small); margin:0; }
.menu-action {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:var(--space-3);
    min-height:calc(64px * var(--ui-scale) * var(--density-scale));
    background:var(--card-primary);
    border-color:var(--panel-border);
    border-left:5px solid var(--menu-accent, var(--accent-blue));
    padding-inline:var(--space-3) var(--space-2);
    text-align:left;
    font-size:calc(20px * var(--ui-scale));
    font-weight:800;
}
.menu-action:hover,
.menu-action:focus-visible { background:var(--card-hover); border-color:var(--focus-ring); border-left-color:var(--menu-accent, var(--accent-blue)); }
.menu-action-title {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.menu-action-solo { --menu-accent:var(--accent-green); }
.menu-action-online { --menu-accent:var(--accent-blue); }
.menu-action-ranked { --menu-accent:var(--accent-purple); }
.menu-action-friends { --menu-accent:var(--accent-pink); }
.menu-action-browser { --menu-accent:var(--accent-teal); }
.menu-action-records { --menu-accent:var(--accent-orange); }
.menu-action-stats { --menu-accent:var(--accent-purple); }
.menu-action-app { --menu-accent:var(--text-secondary); }
.menu-action-count {
    flex:0 0 auto;
    min-width:96px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    border:1px solid var(--menu-accent, var(--panel-border));
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    font-size:var(--font-small);
    font-weight:800;
    white-space:nowrap;
}
.menu-arrow {
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--menu-accent, var(--focus-ring));
    border-radius:var(--radius-md);
    color:var(--text-primary);
}
.main-menu-status {
    position:relative;
    z-index:1;
    flex-shrink:0;
    min-height:calc(34px * var(--ui-scale));
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.online-count {
    color:var(--text-secondary);
    text-align:center;
    font-size:var(--font-small);
    font-weight:700;
    border:1px solid var(--panel-border);
    background:var(--panel-bg);
    border-radius:var(--radius-md);
    padding:var(--space-1) var(--space-3);
}
.online-count.low-population {
    color:var(--accent-orange);
    border-color:var(--accent-orange);
    background:color-mix(in srgb, var(--accent-orange), transparent 90%);
}
.menu-row { display:flex; gap:10px; }
.menu-row .btn { flex:1; }
.version-text { color:var(--text-secondary); text-align:center; font-size:12px; margin-top:14px; }
.settings-section-title { color:var(--text-primary); font-size:14px; font-weight:bold; margin-top:14px; margin-bottom:6px; }
.settings-desc-text { color:var(--text-muted); font-size:11px; margin-bottom:10px; }
.privacy-link { color:var(--accent-blue); font-size:12px; text-align:left; display:block; margin-top:8px; }

/* Server address row at bottom of main menu */
.server-address-row { display:flex; gap:8px; margin-top:4px; }
.server-addr-row { display:flex; gap:8px; align-items:center; margin-top:4px; min-width:0; }
.server-addr-row .server-input { flex:1; min-width:0; }
.server-addr-row .btn:not(.refetch-btn) { flex:0 0 auto; width:auto; }
.server-addr-row .refetch-btn {
    position:relative; flex:0 0 34px; width:34px; height:32px;
    padding:0; overflow:hidden; white-space:nowrap; text-indent:100%;
}
.server-addr-row .refetch-btn::after {
    content:"↻"; position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center; text-indent:0; font-size:16px;
}
.refetch-btn { white-space:nowrap; flex-shrink:0; font-size:12px; padding:6px 10px; width:auto; }
.server-input { font-size:13px; padding:8px 10px; text-align:center; }
.address-error { color:var(--accent-red); font-size:12px; text-align:center; }

/* Connection indicator — full status bar (replaces the old dot) */
.connection-indicator {
    display:flex; align-items:center; justify-content:center;
    gap:6px; padding:6px 12px; border-radius:4px;
    margin:4px auto 0; max-width:320px; box-sizing:border-box;
    transition:background .3s;
}
.connection-indicator .ci-emoji { font-size:14px; line-height:1; }
.connection-indicator .ci-text { font-size:12px; font-weight:bold; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connection-indicator .ci-btn {
    background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.3);
    border-radius:4px; width:24px; height:24px;
    font-size:11px; cursor:pointer; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
}
.connection-indicator .ci-btn:hover { background:rgba(0,0,0,.3); }

/* Connection indicator states */
.bg-connected    { background:var(--accent-green); }
.bg-connecting   { background:var(--accent-orange); }
.bg-retrying     { background:var(--text-muted); }
.bg-failed       { background:var(--accent-red); }
.bg-givenup      { background:#7F3C3C; }
.bg-disconnected { background:var(--text-dimmed); }
.bg-server-offline { background:var(--accent-red); }
.bg-server-maintenance { background:#5A4A12; }
.bg-session-elsewhere { background:#5B3A8C; }

/* Account tab (session transfer) */
.account-transfer-phrase {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--card-primary);
    border: 1px solid var(--separator);
    border-radius: 4px;
    padding: 8px;
    word-break: break-all;
    user-select: all;
}
.account-status-error { color: #E74C3C; }
.account-status-ok { color: var(--accent-green); }
.account-device-row { font-size: 12px; color: var(--text-secondary); margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.account-device-row.current { color: var(--text-primary); }
.account-device-label { flex: 1 1 auto; }
.account-device-remove { flex: 0 0 auto; }

/* Take-over box: the small "leave this account" escape hatch sits below the
   main Take over / Exit actions. */
.session-takeover-leave { margin-top: 10px; text-align: center; }
.btn-compact { padding: 4px 10px; font-size: 12px; }
.btn-link { background: transparent; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--text-primary); }

.killed-overlay {
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0, 0, 0, 0.8);
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
}
.killed-overlay.active { display:flex; }
.killed-overlay-content {
    width:min(80vw, 620px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}
.killed-overlay-icon {
    font-size:64px;
    line-height:1;
    color:#FF6B6B;
}
.killed-overlay-title {
    color:#fff;
    font-size:22px;
    font-weight:bold;
}
.killed-overlay-message {
    color:#CCCCCC;
    font-size:16px;
}

/* Embedded indicator in dialogs */
.connection-indicator-embed {
    display:flex; align-items:center; justify-content:center;
    gap:6px; padding:8px 14px; border-radius:4px;
    margin:4px auto; max-width:300px; background:var(--text-dimmed);
}
.connection-indicator-embed .ci-emoji { font-size:14px; }
.connection-indicator-embed .ci-text { font-size:12px; font-weight:bold; color:#fff; }
.connection-indicator-embed .ci-btn {
    background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.3);
    border-radius:4px; width:24px; height:24px;
    font-size:11px; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
}

/* Spinner for connecting / waiting dialogs */
.spinner {
    width:32px; height:32px; margin:8px auto;
    border:3px solid rgba(255,255,255,.2);
    border-top-color:var(--accent-blue);
    border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ====================================================================
   SOLO MENU
   ==================================================================== */
#soloMenu {
    background: var(--bg-menu);
    padding:0;
}
.solo-content {
    display:flex; flex-direction:column;
    height:100%;
}
.solo-header {
    flex-shrink:0;
    padding:10px 12px 0;
}
.solo-title {
    font-size:24px; font-weight:bold; color:white; margin:0;
    text-align:center; flex:1;
}
.solo-variant-row {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    margin-top:10px;
}
.solo-variant-button {
    min-width:0;
    min-height:36px;
    padding:0 8px;
    border:1px solid var(--separator);
    border-radius:4px;
    background:var(--card-primary);
    color:var(--text-primary);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
}
.solo-variant-button:hover { background:var(--card-active); }
.solo-variant-button.active {
    background:var(--accent-blue);
    border-color:var(--accent-blue);
    color:#fff;
}
.solo-scroll-area {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:20px;
}

/* Shared top-header row (back btn | title | spacer) — mirrors Qt RowLayout */
.screen-header-row {
    display:flex; align-items:center;
    gap:10px;
}
.screen-back-btn {
    flex-shrink:0;
    width:50px; height:50px;
    background:var(--accent-blue);
    color:#fff; border:none; border-radius:4px;
    font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:filter .12s;
}
.screen-back-btn:hover  { filter:brightness(0.9); }
.screen-back-btn:active { filter:brightness(0.87); }
.screen-header-spacer {
    flex-shrink:0;
    width:50px; height:50px;
}

/* Monochrome header icons drawn from inline SVG via CSS mask, so they take the
   button text colour (theme-aware) and never fall back to a missing-glyph box
   the way a font character (e.g. "↻") can on some Android system fonts. */
.hdr-icon {
    display:inline-block;
    width:58%; height:58%;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
}
.hdr-icon.icon-back {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%205%208%2012%2015%2019'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%205%208%2012%2015%2019'/%3E%3C/svg%3E");
}
.hdr-icon.icon-refresh {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%202v6h-6'/%3E%3Cpath%20d='M3%2012a9%209%200%200%201%2015-6.7L21%208'/%3E%3Cpath%20d='M3%2022v-6h6'/%3E%3Cpath%20d='M21%2012a9%209%200%200%201-15%206.7L3%2016'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%202v6h-6'/%3E%3Cpath%20d='M3%2012a9%209%200%200%201%2015-6.7L21%208'/%3E%3Cpath%20d='M3%2022v-6h6'/%3E%3Cpath%20d='M21%2012a9%209%200%200%201-15%206.7L3%2016'/%3E%3C/svg%3E");
}
/* Inline (non-header) refresh buttons size the icon to the text line instead. */
.btn .hdr-icon { width:1.1em; height:1.1em; vertical-align:-0.15em; }

/* Tinted monochrome glyphs from res/icons/ — the web twin of AppIcon.qml. Same
   mask trick as .hdr-icon, but the asset is a file rather than an inline data
   URI, so the whole icon set is shared with the Qt client byte for byte.
   See Client/src/ui/web/AppIcon.js. */
.app-icon {
    display:inline-block;
    flex:0 0 auto;
    width:var(--app-icon-size, 16px);
    height:var(--app-icon-size, 16px);
    background-color:currentColor;
    -webkit-mask-image:var(--app-icon-src); mask-image:var(--app-icon-src);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
}
/* Turns a glyph around so one asset can serve a symmetric pair (play/previous,
   skip-to-end/skip-to-start) — the web twin of AppIcon.qml's `rotation`. */
.app-icon.flip-180 { transform:rotate(180deg); }

/* Menu-button icon chip: a rounded accent-tinted square holding the glyph. */
.menu-action-icon {
    flex:0 0 auto;
    width:34px; height:34px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-md);
    border:1px solid var(--menu-accent, var(--accent-blue));
    background:color-mix(in srgb, var(--menu-accent, var(--accent-blue)) 13%, transparent);
    color:var(--menu-accent, var(--accent-blue));
    transition:background-color 120ms;
}
.menu-action:hover .menu-action-icon,
.menu-action:focus-visible .menu-action-icon {
    background:color-mix(in srgb, var(--menu-accent, var(--accent-blue)) 22%, transparent);
}
.menu-action:active .menu-action-icon {
    background:color-mix(in srgb, var(--menu-accent, var(--accent-blue)) 28%, transparent);
}

.main-menu-title { display:flex; align-items:center; justify-content:center; gap:12px; }
.main-menu-logo { color:var(--accent-teal); }

/* Level cards */
.level-card {
    background: var(--card-primary);
    border-radius:6px; margin-bottom:12px;
    overflow:hidden;
}

/* Continue saved game card */
.continue-card {
    background: var(--card-secondary, #3a3a5a);
    border-left: 4px solid var(--text-continue, #4CAF50);
    cursor: pointer;
}
.continue-card:hover { background: var(--card-active); }
.continue-title {
    color: var(--text-continue, #4CAF50) !important;
    font-size: 18px !important;
}
.level-card-body {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; gap:14px;
}
.level-info { flex:1; }
.level-name { font-size:16px; font-weight:bold; }
.level-detail { font-size:12px; color:var(--text-detail); }
.level-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

/* Custom level cards: keep them compact — flow the icon buttons in a row */
.custom-level-card .level-card-body { flex-wrap:nowrap; align-items:center; }
/* Compact shape-silhouette thumbnail (overrides the 150px preset preview). */
.custom-level-card .custom-level-thumb { width:54px; height:54px; }
.custom-level-card .level-actions {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
}

/* Category header (collapsible) */
.category-header {
    background: var(--card-primary);
    border-radius:6px; padding:14px 16px;
    cursor:pointer; display:flex; align-items:center; gap:10px;
    margin-bottom:6px; transition:background .15s;
}
.category-header:hover { background:var(--card-active); }
.category-header.expanded { background:var(--card-active); }
.category-arrow { font-size:14px; width:18px; text-align:center; }
.category-name { font-size:18px; font-weight:bold; flex:1; }
.category-count { font-size:12px; color:var(--text-detail); }

/* Level items inside expanded category */
.category-levels { display:none; padding-left:8px; margin-bottom:10px; }
.category-levels.expanded { display:block; }

/* Game mode cards */
.game-mode-card { cursor:pointer; }
.game-mode-card .level-card-body { padding:12px 16px; }

.level-card-preset {
    border-radius:6px; margin-bottom:8px; overflow:hidden;
}
.level-card-preset .level-card-body {
    flex-wrap:wrap;
}
/* The record strip owns the "best time" treatment on level cards now; this is
   only still used for the custom-size card's current-score line. */
.level-best-set { color:var(--text-continue); }

/* ── Star ladder + level record strip ────────────────────────────────────────
   Twin of StarRow.qml / LevelRecordStrip.qml. The ladder is a LADDER, not a
   score: every bar keeps its time on screen in every state, so a mastered level
   still says what it was mastered at. State is carried by emphasis, not by
   presence — earned = gold fill, next up = pending colour with the label in
   bold (the live target), locked = track outline with a dimmed label. */
.star-row {
    display:flex; align-items:flex-start; gap:10px; line-height:1;
}
.star-cell {
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
/* The glyph is an .app-icon (res/icons/ui/star{,_outline}.svg), so the state
   colours below tint it through currentColor. */
.star-cell-glyph {
    line-height:1;
    /* transform-origin keeps the pop centred on the glyph, not the column. */
    transform-origin:50% 50%;
}
.star-cell-label { font-size:9px; white-space:nowrap; }
.star-cell.earned  .star-cell-glyph { color:var(--star-earned); }
.star-cell.earned  .star-cell-label { color:var(--text-secondary); }
.star-cell.pending .star-cell-glyph { color:var(--star-pending); }
.star-cell.pending .star-cell-label { color:var(--text-primary); font-weight:bold; }
.star-cell.locked  .star-cell-glyph { color:var(--star-track); }
.star-cell.locked  .star-cell-label { color:var(--text-dimmed); }

/* Staggered pop across the earned stars on a win. Celebrates the run, not a
   newly-earned star — the client cannot know what the count was before it. */
.star-cell.pop .star-cell-glyph {
    animation:star-pop 300ms ease-out both;
    animation-delay:var(--star-pop-delay, 0ms);
}
@keyframes star-pop {
    0%   { transform:scale(0.55); }
    57%  { transform:scale(1.2); }
    100% { transform:scale(1); }
}
@media (prefers-reduced-motion:reduce) {
    .star-cell.pop .star-cell-glyph { animation:none; }
}

/* The record for a level as one object: the time, the ladder that time is
   scored against, and (in the modal) how the run is pacing against the next
   bar. Shared by the solo-menu level cards and the game modal. */
.record-strip {
    display:flex; flex-direction:column; gap:5px;
    margin-top:4px; padding:7px 10px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    border-radius:8px;
}
.record-strip.mastered { border-color:color-mix(in srgb, var(--star-earned) 45%, transparent); }
.record-strip.centered { align-items:center; text-align:center; }
.record-strip-header {
    display:flex; align-items:baseline; gap:6px;
}
.record-strip.centered .record-strip-header { justify-content:center; }
.record-strip-best-label {
    font-size:9px; font-weight:bold; color:var(--text-dimmed);
}
.record-strip-time { font-size:13px; font-weight:bold; color:var(--text-primary); }
.record-strip-time.run   { font-size:20px; }
.record-strip-time.empty { color:var(--text-dimmed); }
/* How the run is pacing against the next bar, as one line of text. This was a
   drainable bar and it earned its removal: it read as a progress meter
   (full = done) when it meant the opposite. */
.record-strip-pace { font-size:11px; }
.record-strip-pace.met    { color:var(--text-secondary); }
.record-strip-pace.missed { color:var(--text-muted); }
.record-strip-note { font-size:10px; color:var(--text-muted); }
.record-strip-scores {
    display:grid; grid-template-columns:auto auto; gap:3px 8px; align-items:baseline;
}
.record-strip-score-label { font-size:11px; color:var(--text-detail); }
.record-strip-score-value { font-size:11px; color:var(--text-detail); }
.record-strip-score-value.high { font-weight:bold; color:var(--text-continue); }

/* The modal's strip matches the leaderboard placement card below it, so the two
   read as one stack rather than a framed panel next to loose glyphs. */
.gm-level-stars { display:flex; justify-content:center; margin-top:6px; }
.gm-level-stars .record-strip { width:100%; max-width:280px; }

/* Progress bar */
.progress-bar-container {
    width:100%; height:8px; border-radius:4px;
    background:var(--progress-bg);
    margin-top:4px; position:relative;
}
.progress-bar-fill {
    height:100%; border-radius:4px;
    transition:width .3s;
}
.progress-bar-text {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:bold; color:#aaa;
}

/* ====================================================================
   WAN LOBBY
   ==================================================================== */
#wanLobby {
    background: var(--bg-lobby);
    padding:0;
}
.lobby-content {
    display:flex; flex-direction:column;
    height:100%;
}
.lobby-scroll {
    flex:1; overflow-y:auto; padding:20px;
    max-width:700px; margin:0 auto; width:100%;
}
.lobby-bottom-buttons {
    padding:12px 20px;
    max-width:700px; margin:0 auto; width:100%;
    display:flex; flex-direction:column; gap:8px;
}

.lobby-header-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lobby-title { font-size:24px; font-weight:bold; flex:1; text-align:center; color:#fff; margin:0; }
.lobby-header-controls { display:flex; align-items:center; gap:8px; }
.screen-settings-btn { background: var(--btn-default); }
.lobby-public-toggle { display:flex; align-items:center; gap:4px; font-size:14px; cursor:pointer; }
.lobby-gameid { color:var(--accent-blue); font-size:18px; font-weight:bold; text-align:center; }
.lobby-share-row { display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0; flex-wrap:wrap; }
.lobby-share-btn { width:auto; min-width:168px; padding:8px 12px; font-size:14px; background:var(--btn-default); }
.lobby-share-status { min-height:18px; color:var(--text-secondary); font-size:12px; }
.lobby-friends-panel {
    margin:8px 0;
    padding:10px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
}
.lobby-friends-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--text-primary);
    font-size:13px;
    font-weight:900;
}
.lobby-friends-header span:last-child {
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:700;
}
.lobby-friends-open {
    width:100%;
    margin-top:8px;
}
.lobby-friends-list {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
    max-height:150px;
    overflow:auto;
}
.lobby-friend-row {
    display:grid;
    grid-template-columns:30px minmax(0, 1fr) auto auto auto;
    gap:6px;
    align-items:center;
    padding:6px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--card-primary);
}
.lobby-friend-row.status-online {
    border-left:3px solid var(--accent-green);
    box-shadow:0 0 12px rgba(57,217,138,.18);
}
.lobby-friend-row.status-busy {
    border-left:3px solid var(--pause-yellow);
    box-shadow:0 0 12px rgba(246,211,101,.2);
}
.lobby-friend-avatar {
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:var(--avatar-bg);
    border:1px solid var(--avatar-border);
    color:var(--avatar-text);
    font-weight:900;
}
.lobby-friend-main { min-width:0; }
.lobby-friend-name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-primary);
    font-weight:900;
}
.lobby-friend-meta {
    color:var(--text-muted);
    font-size:11px;
}
.lobby-friends-empty {
    color:var(--text-muted);
    font-size:var(--font-small);
    padding:8px;
    text-align:center;
}
.modal.lobby-friends-modal {
    width:min(520px, 92vw);
    max-height:min(560px, calc(100vh - 20px));
    overflow:auto;
}
.lobby-friends-dialog-list {
    max-height:min(360px, 58vh);
    margin:var(--space-3) var(--space-4) 0;
}
.lobby-config { color:var(--text-secondary); text-align:center; font-size:14px; }
.lobby-hint { color:var(--text-secondary); text-align:center; font-size:13px; margin:4px 0; }

.player-list-title { color:var(--accent-green); font-size:16px; font-weight:bold; margin-top:8px; }
.pending-title { color:var(--accent-orange)!important; }

.player-card {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:6px; gap:10px;
    margin-bottom:6px;
}
.player-card .player-name { flex:1; font-weight:bold; }
.player-card .player-status { font-size:13px; color:var(--text-secondary); }
.player-card .kick-btn { width:auto; padding:4px 10px; font-size:12px; }

.pending-card {
    background: var(--bg-networkbar);
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 14px; border-radius:6px; gap:10px; margin-bottom:6px;
}
.pending-card .player-name { flex:1; }
.pending-actions { display:flex; gap:6px; }
.pending-actions .btn { width:auto; }
.player-profile-btn,
.npt-profile {
    width:22px; height:22px; min-width:22px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.72); border-radius:4px;
    background:rgba(10,14,20,.28); color:#fff;
    font-size:12px; font-weight:900; line-height:1;
    cursor:pointer;
}
.player-profile-btn:hover,
.npt-profile:hover { background:rgba(255,255,255,.18); }

/* ====================================================================
   FRIENDS / RECENT PLAYERS
   ==================================================================== */
.social-screen {
    background:
        linear-gradient(165deg, var(--bg-lobby-top), var(--bg-lobby-bottom)),
        var(--bg-lobby);
    padding:0;
}
.social-content {
    width:min(700px, 100%);
    height:100%;
    margin:0 auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    min-height:0;
}
.social-header-row { flex:0 0 auto; }
.social-title {
    flex:1;
    text-align:center;
    font-size:24px;
    color:#fff;
}
.social-tabs {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-1);
    padding:var(--space-1);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    min-height:42px;
}
.social-tab-buttons {
    width:min(330px, calc(100% - 150px));
    display:flex;
    gap:var(--space-1);
}
.social-tabs-status {
    position:absolute;
    right:var(--space-2);
    top:50%;
    transform:translateY(-50%);
    min-width:120px;
    text-align:right;
    pointer-events:none;
}
.social-tab {
    flex:1;
    min-width:0;
    min-height:32px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--text-secondary);
    font-size:var(--font-small);
    font-weight:800;
    cursor:pointer;
}
.social-tab.active {
    background:var(--card-primary);
    color:var(--text-primary);
    border-color:var(--focus-ring);
}
.social-toolbar {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-2);
    align-items:end;
}
.social-category-field {
    margin:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
}
.social-category-field label {
    color:var(--text-secondary);
    font-size:var(--font-small);
    font-weight:800;
}
.social-status-box {
    min-height:34px;
    display:block;
    padding:var(--space-2);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--panel-bg);
}
.social-id-tools {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:var(--space-2);
    align-items:center;
}
.social-own-id {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-primary);
    font-size:var(--font-small);
    font-weight:800;
}
.social-add-id {
    display:flex;
    align-items:center;
    justify-self:end;
    gap:var(--space-1);
    min-width:220px;
}
.social-add-id input {
    min-width:0;
    width:112px;
    height:28px;
    padding:0 var(--space-2);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--panel-elevated);
    color:var(--text-primary);
    font-size:var(--font-small);
}
.social-add-id input:focus {
    outline:none;
    border-color:var(--focus-ring);
}
.social-status { color:var(--text-primary); font-size:var(--font-small); font-weight:900; }
.social-cooldown { color:var(--accent-orange); font-size:var(--font-small); font-weight:800; min-height:14px; }
.social-list {
    flex:1;
    min-height:0;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-bottom:var(--space-2);
}
.social-empty {
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--panel-bg);
    font-size:var(--font-small);
    text-align:center;
    padding:var(--space-3);
}
.social-row {
    display:grid;
    grid-template-columns:34px minmax(0, 1fr) auto;
    gap:var(--space-2);
    align-items:center;
    min-height:50px;
    padding:7px 8px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--bg-networkbar);
    cursor:pointer;
}
.social-row.status-online {
    border-color:color-mix(in srgb, var(--accent-green), var(--panel-border) 42%);
    box-shadow:0 0 14px rgba(57,217,138,.16);
}
.social-row.status-busy {
    border-color:color-mix(in srgb, var(--pause-yellow), var(--panel-border) 38%);
    box-shadow:0 0 14px rgba(246,211,101,.18);
}
.social-row:hover,
.social-row:focus {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    outline:none;
}
.social-avatar {
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:var(--avatar-bg);
    border:1px solid var(--avatar-border);
    color:var(--avatar-text);
    font-size:var(--font-small);
    font-weight:900;
}
.social-main { min-width:0; }
.social-name-line {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-1);
}
.social-name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-primary);
    font-weight:800;
}
.social-meta {
    margin-top:1px;
    color:var(--text-muted);
    font-size:11px;
}
.social-note {
    margin-top:2px;
    color:var(--text-secondary);
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.social-pill {
    display:inline-flex;
    align-items:center;
    min-height:20px;
    padding:1px 6px;
    border-radius:var(--radius-sm);
    border:1px solid var(--panel-border);
    color:var(--text-secondary);
    font-size:10px;
    font-weight:800;
}
.social-pill.online { color:var(--accent-green); border-color:var(--accent-green); }
.social-pill.busy { color:var(--pause-yellow); border-color:var(--pause-yellow); }
.social-pill.friend { color:var(--text-secondary); border-color:var(--panel-border); }
.social-pill.blocked { color:var(--accent-orange); border-color:var(--accent-orange); }
.social-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--space-1);
    flex-wrap:wrap;
}
.modal.social-profile-modal,
.modal.social-duel-modal {
    width:min(430px, 92vw);
    max-height:min(560px, calc(100vh - 20px));
    overflow:auto;
}
.social-profile-head {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 var(--space-4) var(--space-2);
}
.social-profile-avatar {
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:var(--avatar-bg);
    border:1px solid var(--avatar-border);
    color:var(--avatar-text);
    font-size:20px;
    font-weight:900;
}
.social-profile-title-block {
    min-width:0;
    flex:1;
}
.social-profile-title-block h3 {
    margin:0;
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.social-profile-icon,
.social-profile-exit {
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:var(--radius-sm);
    border:1px solid var(--panel-border);
    background:transparent;
    color:var(--text-secondary);
    font-weight:800;
    cursor:pointer;
}
.social-profile-icon {
    font-size:15px;
}
.social-profile-friend {
    width:58px;
    flex-basis:58px;
    border-color:var(--accent-blue);
    color:var(--accent-blue);
}
.social-profile-friend:hover,
.social-profile-friend.active {
    background:var(--card-hover);
}
.social-profile-friend.remove {
    border-color:var(--accent-red);
    color:var(--accent-red);
}
.social-profile-friend:disabled {
    border-color:var(--panel-border);
    color:var(--text-muted);
    cursor:default;
}
.social-profile-exit {
    font-size:13px;
}
.social-profile-icon:hover,
.social-profile-exit:hover {
    background:var(--card-hover);
    color:var(--text-primary);
}
.social-profile-block {
    border-color:var(--accent-red);
    color:var(--accent-red);
}
.social-profile-block:hover,
.social-profile-block.active {
    background:var(--card-hover);
    color:var(--accent-red);
}
.modal .social-profile-title-block h3 {
    background:transparent;
    border:0;
    padding:0;
    font-size:calc(18px * var(--ui-scale));
    text-align:left;
}
.social-profile-meta {
    color:var(--text-muted);
    font-size:var(--font-small);
}
.social-profile-badges {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:4px 0 0;
}
#btnFriendProfileUpdateName {
    display:block;
    width:calc(100% - var(--space-4) - var(--space-4));
    margin:0 var(--space-4) var(--space-2);
    min-height:30px;
}
.social-note-editor {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:8px var(--space-4) 0;
}
.social-note-editor label {
    color:var(--text-secondary);
    font-size:var(--font-small);
    font-weight:800;
}
.social-note-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
}
.social-note-editor textarea {
    width:100%;
    min-height:68px;
    resize:vertical;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--input-bg);
    color:var(--text-primary);
    padding:8px 10px;
    font:inherit;
    font-size:var(--font-small);
}
.social-note-editor textarea:focus {
    outline:2px solid color-mix(in srgb, var(--accent-blue), transparent 35%);
    border-color:var(--accent-blue);
}
.social-note-actions {
    display:flex;
    gap:6px;
}
.social-note-actions .btn {
    width:34px;
    min-width:34px;
    padding-inline:0;
}
.social-profile-actions {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:var(--space-2);
    margin:var(--space-3) var(--space-4) var(--space-1);
}
.social-profile-actions .btn { min-width:0; }
.social-duel-categories {
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:320px;
    overflow:auto;
    margin:10px 0;
}
.social-duel-category {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-height:52px;
    padding:10px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--card-primary);
    color:var(--text-primary);
    cursor:pointer;
    text-align:left;
}
.social-duel-category.selected {
    border-color:var(--accent-blue);
    background:var(--card-active);
}
.social-duel-category span {
    font-weight:900;
}
.social-duel-category small {
    color:var(--text-muted);
    font-size:var(--font-small);
}

/* Player ranked stats modal - mirrors the Qt PlayerStatsPanel layout. */
.modal.player-stats-modal {
    width:min(480px, calc(100vw - 24px));
    max-width:none;
    max-height:min(560px, calc(100vh - 24px));
    padding:0;
    gap:0;
    overflow:hidden;
    background:var(--bg-modal);
    border:1px solid var(--panel-border);
    border-radius:12px;
    box-shadow:0 18px 48px rgba(0,0,0,.42);
}
.player-stats-head {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-4);
    border-bottom:1px solid color-mix(in srgb, var(--panel-border), transparent 40%);
}
.player-stats-title-block {
    flex:1;
    min-width:0;
}
.modal.player-stats-modal #playerStatsName {
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    color:var(--text-primary);
    font-size:calc(18px * var(--ui-scale));
    font-weight:800;
    line-height:1.2;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.player-stats-subtitle {
    min-height:14px;
    margin-top:2px;
    color:var(--text-muted);
    font-size:calc(11px * var(--ui-scale));
    line-height:1.2;
}
.player-stats-modal .social-profile-exit {
    width:30px;
    height:30px;
    flex:0 0 30px;
    background:var(--panel-elevated);
}
.player-stats-loading {
    flex:1;
    min-height:260px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-4);
    color:var(--text-muted);
    font-size:var(--font-small);
}
.player-stats-spinner {
    width:28px;
    height:28px;
    border:3px solid color-mix(in srgb, var(--panel-border), transparent 25%);
    border-top-color:var(--leaderboard-row-accent);
    border-radius:50%;
    animation:playerStatsSpin .8s linear infinite;
}
@keyframes playerStatsSpin {
    to { transform:rotate(360deg); }
}
.player-stats-body {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:var(--space-3) var(--space-4) var(--space-4);
    display:flex;
    flex-direction:column;
    gap:6px;
}
.player-stats-row {
    --player-stats-accent:var(--leaderboard-row-accent);
    display:flex;
    align-items:center;
    gap:var(--space-2);
    min-height:58px;
    padding:7px 12px;
    background:var(--leaderboard-row-bg);
    border:1px solid var(--leaderboard-row-border);
    border-radius:8px;
    color:var(--leaderboard-row-text);
}
.player-stats-row:nth-child(even) {
    background:var(--leaderboard-row-bg-alt);
}
.player-stats-accent-bar {
    align-self:stretch;
    width:3px;
    flex:0 0 3px;
    border-radius:2px;
    background:var(--player-stats-accent);
}
.player-stats-main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.player-stats-cat {
    color:var(--text-primary);
    font-size:calc(13px * var(--ui-scale));
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.player-stats-games {
    color:var(--text-muted);
    font-size:calc(10px * var(--ui-scale));
}
.player-stats-elo {
    width:62px;
    flex:0 0 62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    line-height:1.05;
}
.player-stats-rating {
    color:var(--player-stats-accent);
    font-size:calc(18px * var(--ui-scale));
    font-weight:900;
}
.player-stats-elo-label {
    color:var(--text-muted);
    font-size:calc(9px * var(--ui-scale));
    font-weight:700;
}
.player-stats-wl {
    width:42px;
    flex:0 0 42px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    line-height:1.1;
}
.player-stats-wins,
.player-stats-losses {
    font-size:calc(13px * var(--ui-scale));
    font-weight:900;
}
.player-stats-wins { color:var(--accent-green); }
.player-stats-losses { color:var(--accent-red); }
.player-stats-empty {
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-4);
    color:var(--text-muted);
    font-size:calc(13px * var(--ui-scale));
    text-align:center;
}

/* ====================================================================
   PROFILE PANEL — avatar, section tabs, statistics + achievement cards
   ==================================================================== */
.player-stats-avatar {
    width:40px; height:40px; flex:0 0 40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px;
    background:var(--card-active); border:1px solid var(--panel-border);
    color:var(--text-primary);
    font-size:calc(18px * var(--ui-scale)); font-weight:800;
}
.player-stats-tabs {
    display:flex; gap:6px;
    padding:var(--space-3) var(--space-4) 0;
}
.player-stats-tab {
    flex:1; min-width:0; height:34px;
    padding:0 6px;
    border:1px solid var(--panel-border); border-radius:8px;
    background:var(--panel-bg); color:var(--text-secondary);
    font-size:calc(11px * var(--ui-scale)); font-weight:600;
    cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:background .12s, border-color .12s, color .12s;
}
.player-stats-tab:hover { background:var(--card-hover); }
.player-stats-tab.active {
    background:var(--accent-blue); border-color:var(--focus-ring);
    color:var(--text-on-accent); font-weight:800;
}
.profile-stat-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;
}
.profile-stat-tile {
    display:flex; align-items:center; gap:10px;
    min-height:62px; padding:0 12px;
    background:var(--card-primary); border:1px solid var(--panel-border);
    border-radius:10px;
}
.profile-stat-icon { font-size:calc(20px * var(--ui-scale)); line-height:1; }
.profile-stat-text { min-width:0; }
.profile-stat-value {
    color:var(--text-primary); font-size:calc(17px * var(--ui-scale));
    font-weight:800; line-height:1.15;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.profile-stat-label { color:var(--text-muted); font-size:calc(10px * var(--ui-scale)); }
.profile-ach-card {
    padding:14px;
    background:var(--card-primary); border:1px solid var(--panel-border);
    border-radius:12px;
    display:flex; flex-direction:column; gap:6px;
}
.profile-ach-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.profile-ach-title {
    color:var(--text-primary); font-size:calc(13px * var(--ui-scale)); font-weight:800;
}
.profile-ach-count { font-size:calc(15px * var(--ui-scale)); font-weight:900; }
.profile-ach-green { color:var(--win-green); }
.profile-ach-orange { color:var(--accent-orange); }
.profile-ach-sub { color:var(--text-muted); font-size:calc(10px * var(--ui-scale)); }

/* ====================================================================
   ACHIEVEMENTS PAGE — full-screen overlay opened from the trophy button
   ==================================================================== */
.stats-trophy-btn { font-size:calc(18px * var(--ui-scale)); }
.achievements-page {
    position:fixed; inset:0; z-index:60;
    display:none;
    background:
        linear-gradient(165deg, var(--bg-menu-top), var(--bg-menu-bottom)),
        var(--bg-menu);
}
.achievements-page.visible { display:block; }
.achievements-inner {
    height:100%;
    /* Cards are laid out in an auto-fill grid, so the page is allowed to use a
       wide window — the same "how many 380px cards fit" rule the Qt page has. */
    max-width:1600px; margin:0 auto;
    padding:clamp(14px, 3.5vw, 24px);
    display:flex; flex-direction:column;
}
.achievements-header { display:flex; align-items:center; gap:var(--space-2); margin-bottom:10px; }
.achievements-title-block { flex:1; min-width:0; text-align:center; }
.achievements-title {
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:var(--text-primary); font-size:calc(24px * var(--ui-scale)); font-weight:800;
}
.ach-title-icon { color:var(--star-earned); }
.achievements-subtitle { color:var(--text-secondary); font-size:calc(11px * var(--ui-scale)); }

/* Hero: two numbers over one bar measured in stars (the finer of the two
   scales). No panel frame — the page already has enough chrome. */
.ach-hero { display:flex; flex-direction:column; gap:5px; margin-bottom:var(--space-3); }
.ach-hero-row { display:flex; align-items:center; gap:8px; }
.ach-hero-count { color:var(--text-secondary); font-size:calc(12px * var(--ui-scale)); }
.ach-hero-stars {
    margin-left:auto; display:flex; align-items:center; gap:5px;
    color:var(--text-primary); font-size:calc(12px * var(--ui-scale)); font-weight:bold;
}
.ach-hero-star-icon { color:var(--star-earned); }
.ach-hero-bar { height:6px; border-radius:3px; background:var(--progress-bg); overflow:hidden; }
.ach-hero-fill {
    height:100%; border-radius:3px; background:var(--star-earned);
    transition:width 320ms cubic-bezier(.22,.61,.36,1);
}

/* Filters: one panel, not three stacked ones. Rows that do not apply are
   hidden rather than left as empty boxes. */
.ach-filters {
    display:flex; flex-direction:column; gap:6px;
    padding:var(--space-2);
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:8px;
    margin-bottom:var(--space-3);
}
.ach-filters .achievements-cats { margin-bottom:0; padding:0; background:none; border:none; }
.ach-filter-top { display:flex; gap:6px; }
.ach-search-wrap { position:relative; flex:1; min-width:0; }
.ach-search-icon {
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    color:var(--text-dimmed); pointer-events:none;
}
.ach-search {
    width:100%; height:34px;
    padding:0 10px 0 32px;
    border:1px solid var(--panel-border); border-radius:8px;
    background:var(--card-primary); color:var(--text-primary);
    font-size:calc(12px * var(--ui-scale));
}
.ach-search:focus { outline:none; border-color:var(--focus-ring); }
.ach-sort { flex:0 0 auto; width:auto; min-width:140px; }
/* Status chips share the width equally, so the four read as one control. */
.ach-status-row { flex-wrap:nowrap; }
.ach-status-chip { flex:1 1 0; min-width:0; }

.achievements-cats {
    display:flex; flex-wrap:wrap; gap:4px;
    padding:var(--space-2);
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:8px;
    margin-bottom:var(--space-3);
}
/* Mode / variant sub-filter: same chips as the category tabs, but centred on one
   line that scrolls horizontally once the mode list outgrows a narrow window
   (mirrors the leaderboard's selector rows). */
.achievements-subfilter {
    flex-wrap:nowrap;
    /* `safe` keeps the first chips reachable once the row overflows — plain
       centring would push them past the left edge with no way to scroll back. */
    justify-content:center; justify-content:safe center;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin;
}
.achievements-subfilter .achievements-cat { flex:0 0 auto; }
.achievements-cat {
    min-width:54px; height:32px; padding:0 10px;
    border:1px solid var(--panel-border); border-radius:8px;
    background:var(--panel-bg); color:var(--text-secondary);
    font-size:calc(12px * var(--ui-scale)); cursor:pointer;
    transition:background .12s, border-color .12s, color .12s;
}
.achievements-cat:hover { background:var(--card-hover); }
.achievements-cat.selected {
    background:var(--accent-blue); border-color:var(--focus-ring);
    color:var(--text-on-accent); font-weight:800;
}
.achievements-list {
    flex:1; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; gap:8px;
    padding-right:4px;
}
/* Empty state: a blank void gave no clue that a filter, not the catalog, was
   the reason nothing was on screen. */
.achievements-empty-state {
    flex:1; min-height:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.ach-empty-icon { color:var(--text-dimmed); opacity:.6; }
.ach-empty-text { color:var(--text-secondary); font-size:calc(13px * var(--ui-scale)); }

/* Level group header — collapsible, the way the solo menu groups presets. */
.ach-group-header {
    width:100%; min-height:38px;
    display:flex; align-items:center; gap:8px;
    padding:0 12px;
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:8px;
    color:var(--text-primary); font-size:calc(13px * var(--ui-scale)); font-weight:bold;
    cursor:pointer; text-align:left;
}
.ach-group-header:hover { background:var(--card-hover); }
.ach-group-caret { color:var(--text-muted); transform:rotate(90deg); transition:transform 140ms; }
.ach-group-header.collapsed .ach-group-caret { transform:rotate(0deg); }
.ach-group-icon { color:var(--text-secondary); }
.ach-group-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ach-group-count { color:var(--text-secondary); font-size:calc(11px * var(--ui-scale)); font-weight:normal; }
.ach-group-count.complete { color:var(--win-green); }
.ach-group-star { color:var(--star-earned); }

/* One line of cards. What a card actually needs — the star ladder with its
   threshold labels plus a pair of action buttons — sits a little under 380px,
   so the column count is "how many of these fit" rather than a breakpoint
   ladder. */
.ach-card-row {
    display:grid; gap:8px;
    grid-template-columns:repeat(auto-fill, minmax(min(380px, 100%), 1fr));
}
.ach-card {
    display:flex; gap:12px; padding:12px 12px 12px 14px;
    background:var(--card-primary); border:1px solid var(--panel-border);
    border-left:4px solid var(--text-dimmed);
    border-radius:10px;
    align-items:flex-start;
}
.ach-card:not(.locked) { border-left-color:var(--progress-partial); }
.ach-card.complete {
    background:color-mix(in srgb, var(--win-green), transparent 90%);
    border-color:color-mix(in srgb, var(--win-green), transparent 55%);
    border-left-color:var(--progress-complete);
}
.ach-card-icon {
    width:44px; height:44px; flex:0 0 44px; margin-top:2px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    background:var(--panel-elevated); border:1px solid color-mix(in srgb, var(--ach-accent), transparent 55%);
}
.ach-card-icon.idle {
    background:var(--panel-bg); border-color:var(--panel-border); opacity:.75;
}
.ach-card-icon.complete {
    background:color-mix(in srgb, var(--win-green), transparent 80%);
    border-color:color-mix(in srgb, var(--win-green), transparent 50%);
}
.ach-card-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ach-card-top { display:flex; align-items:center; gap:8px; }
.ach-card-name {
    flex:1; min-width:0;
    color:var(--text-primary); font-size:calc(14px * var(--ui-scale)); font-weight:800;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ach-card-name.complete { color:var(--win-green); }
/* Recorded best time on a level card — the value its stars are derived from. */
.ach-best { display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.ach-best-label { color:var(--text-dimmed); font-size:calc(9px * var(--ui-scale)); font-weight:800; }
.ach-best-value { color:var(--text-primary); font-size:calc(12px * var(--ui-scale)); font-weight:bold; }
.ach-best-value.dim { color:var(--text-dimmed); }
/* Stage pill: N / M, plus a check or a padlock at the extremes. */
.ach-stage-pill {
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:6px;
    background:var(--panel-bg); border:1px solid var(--panel-border);
    color:var(--text-secondary); font-size:calc(10px * var(--ui-scale));
}
.ach-stage-pill.complete {
    border-color:color-mix(in srgb, var(--win-green), transparent 50%); color:var(--win-green);
}

.ach-ladder-row { display:flex; align-items:center; gap:10px; }
/* The star ladder. State is carried by emphasis, never by presence: every bar
   stays on screen, and the selected column carries a raised pill behind it so
   the interaction is visible before it is discovered. */
.ach-stars { display:flex; gap:4px; }
.ach-star {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:25px; padding:3px 4px;
    border:1px solid transparent; border-radius:6px;
    background:transparent;
    cursor:pointer; transition:background .12s, border-color .12s;
}
.ach-star:hover { background:var(--card-hover); }
.ach-star.selected { background:var(--panel-elevated); border-color:var(--panel-border); }
.ach-star-label { font-size:calc(9px * var(--ui-scale)); line-height:1; white-space:nowrap; }
.ach-star.earned  .ach-star-glyph { color:var(--star-earned); }
.ach-star.earned  .ach-star-label { color:var(--text-secondary); }
.ach-star.pending .ach-star-glyph { color:var(--star-pending); }
.ach-star.pending .ach-star-label { color:var(--text-primary); font-weight:bold; }
.ach-star.locked  .ach-star-glyph { color:var(--star-track); }
.ach-star.locked  .ach-star-label { color:var(--text-dimmed); }
.ach-star.selected .ach-star-label { font-weight:bold; }

/* Level actions: a filled primary (Play) and an outlined secondary (Rated).
   The labels drop out on a narrow card rather than squeezing the ladder. */
.ach-actions { margin-left:auto; display:flex; gap:6px; }
.ach-action {
    height:32px; min-width:32px; padding:0 10px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border-radius:7px; border:1px solid transparent;
    font-size:calc(12px * var(--ui-scale)); font-weight:bold;
    cursor:pointer;
}
.ach-action.filled { background:var(--accent-blue); color:var(--text-on-accent); }
.ach-action.filled:hover { background:color-mix(in srgb, var(--accent-blue), white 12%); }
.ach-action.rated {
    background:var(--panel-elevated); border-color:var(--accent-orange); color:var(--accent-orange);
}
.ach-action.rated:hover { background:var(--card-hover); }
.ach-action-label { white-space:nowrap; }
@media (max-width:560px) {
    .ach-action { padding:0; min-width:32px; }
    .ach-action-label { display:none; }
}

.ach-goal {
    display:flex; align-items:center; gap:5px;
    color:var(--text-secondary); font-size:calc(12px * var(--ui-scale));
}
.ach-goal > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ach-goal.done { color:var(--win-green); }
.ach-progress { display:flex; align-items:center; gap:8px; }
.ach-progress-track {
    flex:1; min-width:0; height:6px; border-radius:3px;
    background:var(--progress-bg); overflow:hidden;
}
.ach-progress-fill {
    height:100%; border-radius:3px; background:var(--progress-partial);
    transition:width 220ms cubic-bezier(.22,.61,.36,1);
}
.ach-progress-fill.complete { background:var(--progress-complete); }
.ach-progress-text { color:var(--text-muted); font-size:calc(10px * var(--ui-scale)); white-space:nowrap; }

/* ====================================================================
   ACHIEVEMENT UNLOCK TOAST
   ==================================================================== */
.achievement-toast-stack {
    position:fixed; top:16px; left:0; right:0; z-index:90;
    display:flex; justify-content:center; pointer-events:none;
}
.achievement-toast {
    pointer-events:auto;
    width:min(440px, calc(100vw - 24px));
    display:flex; align-items:center; gap:14px;
    padding:14px 18px;
    background:var(--panel-elevated); border:2px solid var(--win-green);
    border-radius:14px;
    box-shadow:0 12px 36px rgba(0,0,0,.4);
    transform:translateY(-130%); opacity:0;
    transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .26s;
    cursor:pointer;
}
.achievement-toast.visible { transform:translateY(0); opacity:1; }
.achievement-toast-icon { font-size:calc(30px * var(--ui-scale)); line-height:1; }
.achievement-toast-body { min-width:0; }
.achievement-toast-label {
    color:var(--win-green); font-size:calc(11px * var(--ui-scale));
    font-weight:800; letter-spacing:1.5px;
}
.achievement-toast-name {
    color:var(--text-primary); font-size:calc(16px * var(--ui-scale)); font-weight:800;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.achievement-toast-stars { color:var(--win-green); font-size:calc(14px * var(--ui-scale)); }
.achievement-toast-sub { color:var(--text-secondary); font-size:calc(11px * var(--ui-scale)); }

/* Server announcements — operator broadcasts. Sit above the achievement toast:
   a maintenance warning is the one thing that must never be covered. */
.server-announcement-stack {
    position:fixed; top:16px; left:0; right:0; z-index:95;
    display:flex; justify-content:center; pointer-events:none;
}
.server-announcement {
    pointer-events:auto; position:relative;
    width:min(520px, calc(100vw - 24px));
    padding:16px 44px 16px 18px;
    background:var(--panel-elevated); border:2px solid var(--accent-orange);
    border-radius:14px;
    box-shadow:0 12px 36px rgba(0,0,0,.4);
    transform:translateY(-130%); opacity:0;
    transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .26s;
    cursor:pointer;
}
.server-announcement.visible { transform:translateY(0); opacity:1; }
.server-announcement-close {
    position:absolute; top:10px; right:14px;
    color:var(--text-secondary); font-size:calc(15px * var(--ui-scale)); line-height:1;
}
.server-announcement-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.server-announcement-icon { font-size:calc(16px * var(--ui-scale)); line-height:1; }
.server-announcement-label {
    color:var(--accent-orange); font-size:calc(11px * var(--ui-scale));
    font-weight:800; letter-spacing:1.5px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.server-announcement-text {
    color:var(--text-primary); font-size:calc(15px * var(--ui-scale));
    /* A 255-byte message can run to several lines; the banner grows to fit. */
    white-space:pre-wrap; overflow-wrap:anywhere;
}
.server-announcement-sub {
    color:var(--text-secondary); font-size:calc(11px * var(--ui-scale)); margin-top:6px;
}

.modal.social-invite-modal {
    width:min(340px, calc(100vw - 24px));
    min-width:0;
    max-width:none;
    padding:0;
    overflow:hidden;
}
.modal.social-invite-modal h3 {
    margin:0;
    padding:var(--space-3) var(--space-4);
    text-align:left;
    font-size:calc(18px * var(--ui-scale));
    background:var(--panel-elevated);
    border-bottom:1px solid var(--separator);
}
.modal.social-invite-modal .modal-desc {
    margin:0;
    padding:var(--space-3) var(--space-4);
    text-align:left;
    font-size:var(--font-small);
    color:var(--text-secondary);
}
.modal.social-invite-modal .modal-actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-4);
    margin:0;
    background:transparent;
    border-top:1px solid var(--separator);
}
.modal.social-invite-modal .btn {
    flex:0 0 auto;
    width:auto;
    min-width:86px;
    min-height:32px;
    padding:0 var(--space-4);
}
@media (max-height: 520px) {
    .modal.social-profile-modal,
    .modal.social-duel-modal {
        max-height:calc(100vh - 12px);
    }
    .social-profile-head {
        margin-bottom:6px;
    }
    .social-profile-avatar {
        width:44px;
        height:44px;
        font-size:20px;
    }
    .social-profile-actions {
        grid-template-columns:1fr;
        margin-top:8px;
    }
    .social-duel-categories {
        max-height:180px;
    }
}
@media (max-width: 640px) {
    .social-content { padding:12px; }
    .social-tabs {
        display:grid;
        justify-content:stretch;
        gap:var(--space-1);
    }
    .social-tab-buttons { width:100%; }
    .social-tabs-status {
        position:static;
        transform:none;
        min-width:0;
        text-align:right;
    }
    .social-toolbar { grid-template-columns:1fr; }
    .social-id-tools { grid-template-columns:1fr; }
    .social-add-id { min-width:0; width:100%; justify-self:stretch; }
    .social-add-id input { flex:1; width:auto; }
    .social-row { grid-template-columns:34px minmax(0, 1fr); }
    .lobby-friend-row { grid-template-columns:30px minmax(0, 1fr); }
    .lobby-friend-row .btn { grid-column:1 / -1; }
    .social-actions {
        grid-column:1 / -1;
        justify-content:stretch;
    }
    .social-actions .btn { flex:1 1 72px; }
}

@media (max-width: 420px) {
    .social-profile-head {
        display:grid;
        grid-template-columns:46px minmax(0, 1fr) 34px;
        align-items:start;
    }
    .social-profile-friend,
    .social-profile-block {
        grid-row:2;
        width:100%;
        min-width:0;
        flex-basis:auto;
    }
    .social-profile-friend {
        grid-column:1 / 3;
    }
    .social-profile-block {
        grid-column:3;
    }
}

/* Return to game / Join in progress */
.btn-return-game { background:#9B59B6; font-size:18px; font-weight:bold; }
.btn-join-progress { background:#27AE60; font-size:18px; font-weight:bold; }
.btn-force-restart { background:#C0392B; font-size:17px; font-weight:bold; }

/* Pulse animation */
.pulse-opacity {
    animation: pulseOpacity 2s ease-in-out infinite;
}
@keyframes pulseOpacity {
    0%,100% { opacity:0.8; }
    50% { opacity:1; }
}

/* ====================================================================
   GAME VIEW
   ==================================================================== */
#gameView { flex-direction:column; position:relative; }

/* Network bar */
#networkBar {
    display:none; flex-direction:column;
    padding:8px 12px; background:var(--bg-networkbar);
    min-height:34px; position:relative; z-index:80; gap:6px;
}
#networkBar.visible { display:flex; }

.netbar-header {
    display:flex; align-items:center; gap:8px;
}
.netbar-role { font-size:14px; font-weight:bold; color:#fff; }
.netbar-gameid { font-size:12px; color:var(--accent-blue); }
.netbar-spacer { flex:1; }

.net-lobby-btn {
    background:var(--accent-blue); color:#fff;
    border:none; border-radius:4px; padding:4px 12px;
    font-size:12px; font-weight:bold; cursor:pointer;
}
.net-leave-btn {
    background:var(--accent-red); color:#fff;
    border:none; border-radius:4px; width:28px; height:28px;
    font-size:14px; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
}

.netbar-players {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    font-size:11px;
}
.netbar-players-label { color:var(--text-secondary); margin-right:4px; }

/* Player tag in network bar */
.net-player-tag {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 8px; border-radius:3px;
    font-size:11px; color:#fff; position:relative;
}
.net-player-tag .npt-icon { font-size:11px; }
.net-player-tag .npt-name { font-size:11px; }
.net-player-tag .npt-name.self { text-decoration:underline; }
.net-player-tag .npt-name.host-player { font-weight:bold; }
.net-player-tag .npt-state { font-size:11px; }
.net-player-tag .npt-kick {
    background:transparent; border:1px solid var(--accent-red);
    border-radius:3px; width:18px; height:18px;
    color:var(--accent-red); font-size:9px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
}
.net-player-tag .npt-ready {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:2px;
    font-size:11px; border:1px solid var(--ready-inactive);
}
.net-player-tag .npt-ready.ready {
    background:var(--ready-active); border-color:var(--ready-active);
    font-weight:bold;
}

/* Player tags wrapper — fills available width to push buttons right */
.netbar-player-tags {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    flex:1; min-width:0;
}

/* Ready button in network bar */
.netbar-ready-slot {
    display:inline-flex; justify-content:flex-end;
    flex:0 0 92px; margin-left:auto; min-width:92px;
}
.netbar-ready-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:3px;
    background:var(--bg-lobby); border:2px solid var(--accent-blue);
    color:#fff; font-size:11px; font-weight:bold; cursor:pointer;
    flex-shrink:0;
    transition:background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.netbar-ready-btn:active { transform:translateY(1px); }
.netbar-ready-btn.is-ready { border-color:var(--ready-active); }
.netbar-ranked-slot { position:relative; flex-basis:118px; min-width:118px; }
.netbar-ranked-btn { min-width:108px; justify-content:center; }
.netbar-ready-btn.netbar-ranked-btn.is-open {
    background:var(--accent-blue);
    border-color:var(--accent-blue);
    color:var(--text-on-accent);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-blue), transparent 72%);
}
.netbar-ranked-btn.has-offer { border-color:var(--accent-orange); }
.netbar-ready-btn.netbar-ranked-btn.is-open.has-offer {
    background:var(--accent-orange);
    border-color:var(--accent-orange);
}
.netbar-chevron {
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-secondary); font-size:10px; line-height:1;
    transform-origin:center; transition:transform .12s ease, color .12s ease;
}
.netbar-ranked-btn.is-open .netbar-chevron { color:currentColor; transform:rotate(180deg); }
.netbar-ranked-menu {
    display:flex; flex-direction:column; gap:3px;
    position:absolute; right:0; top:calc(100% + 4px); z-index:2200;
    min-width:128px; padding:4px; border:1px solid var(--panel-border);
    border-radius:6px; background:var(--panel-bg); box-shadow:0 8px 22px rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transform:translateY(-4px); visibility:hidden;
    transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.netbar-ranked-menu.open {
    opacity:1; pointer-events:auto; transform:translateY(0); visibility:visible;
    transition-delay:0s;
}
.netbar-ranked-menu button {
    width:100%; border:0; border-radius:4px; padding:6px 8px;
    background:transparent; color:var(--text-primary); text-align:left;
    font-size:12px; cursor:pointer; transition:background .1s ease, color .1s ease;
}
.netbar-ranked-menu button:hover,
.netbar-ranked-menu button:focus-visible {
    background:var(--card-hover);
    outline:none;
}
.netbar-ranked-menu button:disabled { opacity:.55; cursor:default; }
.netbar-ranked-menu button.danger { color:var(--loss-red); }

/* Respawn button in network bar */
.netbar-respawn-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:3px;
    background:var(--bg-lobby); border:2px solid var(--accent-blue);
    color:#fff; font-size:11px; font-weight:bold; cursor:pointer;
    flex-shrink:0; margin-left:auto;
}
.netbar-respawn-btn.enabled { border-color:var(--ready-active); }
.netbar-respawn-btn:disabled { opacity:0.7; cursor:default; }

/* Pending players in network bar */
.netbar-pending {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    font-size:11px;
}
.netbar-pending-label { color:var(--accent-orange); margin-right:4px; }
.net-pending-tag {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 8px; border-radius:3px;
    background:var(--bg-lobby); border:1px solid var(--accent-orange);
    font-size:11px; color:#fff;
}
.net-pending-tag .npt-approve {
    background:transparent; border:1px solid var(--accent-green);
    border-radius:3px; width:18px; height:18px;
    color:var(--accent-green); font-size:10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
}
.net-pending-tag .npt-reject {
    background:transparent; border:1px solid var(--accent-red);
    border-radius:3px; width:18px; height:18px;
    color:var(--accent-red); font-size:9px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
}

/* Chat button in network bar */
.net-chat-btn-wrapper {
    position:relative; display:inline-flex;
}
.net-chat-btn {
    background:var(--accent-blue); color:#fff;
    border:none; border-radius:4px; width:28px; height:28px;
    font-size:14px; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
}
.net-chat-btn:hover { filter:brightness(1.1); }
.chat-unread-dot {
    display:none; position:absolute; top:-3px; right:-3px;
    width:10px; height:10px; border-radius:50%;
    background:#FF3B30; pointer-events:none;
}
.chat-unread-dot.visible { display:block; }

/* Chat panel (overlays game view) */
.chat-panel {
    display:none; flex-direction:column;
    position:absolute; right:8px; top:80px; bottom:60px;
    width:320px; max-width:90vw;
    background:rgba(0,0,0,0.88); border-radius:8px;
    border:1px solid var(--border); padding:8px;
    z-index:20; gap:4px;
}
.chat-header {
    display:flex; align-items:center; justify-content:space-between;
}
.chat-title {
    color:#fff; font-size:14px; font-weight:bold;
}
.chat-close-btn {
    background:transparent; border:none; color:var(--text-secondary);
    font-size:18px; font-weight:bold; cursor:pointer;
    width:28px; height:28px; display:flex;
    align-items:center; justify-content:center;
    line-height:1; border-radius:4px;
}
.chat-close-btn:hover { color:#fff; }
.chat-separator {
    height:1px; background:var(--border); margin:2px 0;
}
.chat-messages {
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; gap:2px;
    scrollbar-width:thin; scrollbar-color:var(--text-muted) transparent;
}
.chat-msg-row {
    display:flex; flex-direction:column; gap:2px;
    font-size:11px; line-height:1.4;
}
.chat-msg-head {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
.chat-role { font-size:11px; }
.chat-name { font-size:11px; font-weight:bold; }
.chat-name-link { cursor:pointer; }
.chat-name-link:hover { text-decoration:underline; }
.chat-state { font-size:11px; }
.chat-text { font-size:11px; color:var(--text-secondary); word-break:break-word; }
.chat-msg-blocked { opacity:0.55; }
.chat-text-blocked { font-style:italic; color:var(--text-muted); }
.chat-input-row {
    /* wrap so the charset warning (.wire-text-warning) drops to its own line
       instead of competing with the input and the Send button for this one. */
    display:flex; gap:4px; align-items:center; flex-wrap:wrap;
}
.chat-input {
    flex:1; background:#2a2a2a; border:1px solid var(--border);
    border-radius:4px; padding:6px 8px; color:#fff;
    font-size:12px; outline:none;
}
.chat-input:focus { border-color:var(--accent-blue); }
.chat-input::placeholder { color:var(--text-muted); }

/* The "13/20" readout beside a wire-text input (see ui/web/WireTextInput.js).
   The element is created by that module, so the layout it needs lives here
   rather than in the markup: it sits inline after its input, stays out of the
   flex stretch, and turns red at the limit. */
.wire-text-counter {
    flex:0 0 auto;
    font-size:11px;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    transition:color 110ms ease;
}
.wire-text-counter[hidden] { display:none; }
.wire-text-counter.at-limit { color:var(--accent-red); }

/* Charset rejection notice — see WireTextInput.js. The module inserts it as a
   flex sibling of its input, and the two containers that host one disagree
   about direction: .form-group is a column, .chat-input-row is a row. Hence
   width rather than flex-basis — a basis of 100% would resolve against HEIGHT
   in the column case — plus flex-wrap on the row below, which is what sends
   this onto its own line instead of squeezing the input and the Send button. */
.wire-text-warning {
    flex:0 0 auto;
    width:100%;
    box-sizing:border-box;
    margin-top:4px;
    font-size:11px;
    line-height:1.35;
    color:#F1C40F;
}
.wire-text-warning[hidden] { display:none; }
.chat-send-btn {
    background:var(--accent-blue); color:#fff; border:none;
    border-radius:4px; padding:6px 12px; font-size:12px;
    font-weight:bold; cursor:pointer; white-space:nowrap;
}
.chat-send-btn:hover { filter:brightness(1.1); }

/* Compact in-game chat notifications (under status/network bars) */
.chat-toast-stack {
    position:absolute;
    top:8px;
    right:10px;
    display:flex;
    flex-direction:column;
    gap:4px;
    z-index:18;
    pointer-events:none;
}

.chat-toast {
    width:min(320px, 55vw);
    background:rgba(32, 37, 48, 0.85);
    border:1px solid #3F5165;
    border-radius:7px;
    padding:4px 9px;
    display:flex;
    align-items:center;
    gap:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
}

.chat-toast-name {
    font-size:11px;
    font-weight:bold;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:45%;
    flex:0 1 auto;
}

.chat-toast-message {
    font-size:11px;
    color:#F5F7FA;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1 1 auto;
    min-width:0;
}

.in-game-notice-banner {
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:min(560px, calc(100% - 32px));
    min-width:min(260px, calc(100% - 32px));
    z-index:19;
    box-sizing:border-box;
    padding:8px 34px 8px 12px;
    background:rgba(35, 42, 53, 0.90);
    color:#F5F7FA;
    border:1px solid #5C708A;
    border-radius:7px;
    box-shadow:0 4px 16px rgba(0,0,0,0.30);
    font-size:12px;
    font-weight:bold;
    line-height:1.25;
}

.in-game-notice-message {
    overflow-wrap:anywhere;
}

.in-game-notice-close {
    position:absolute;
    top:4px;
    right:5px;
    width:18px;
    height:18px;
    border:1px solid transparent;
    border-radius:50%;
    background:transparent;
    color:#DCE6F2;
    font-size:12px;
    font-weight:bold;
    line-height:16px;
    padding:0;
    cursor:pointer;
}

.in-game-notice-close:hover,
.in-game-notice-close:focus-visible {
    background:rgba(51, 60, 74, 0.45);
    border-color:rgba(175, 192, 210, 0.55);
    outline:none;
}

/* Status bar — modeled after the Qt StatusBar with LED displays */
#statusBar {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 10px; background:var(--bg-statusbar);
    min-height:46px; position:relative; z-index:61; gap:6px;
}
.status-left {
    display:flex; align-items:center; gap:6px;
}
/* LED-style display (mine counter + timer) */
.status-display {
    background:var(--display-bg);
    color:var(--display-text);
    font-family:'Courier New', Courier, monospace;
    font-weight:bold; font-size:18px;
    padding:4px 10px; border-radius:4px;
    min-width:80px; text-align:center;
    letter-spacing:2px;
    border:2px inset #444;
}
.status-btn {
    background:none; border:none;
    font-size:24px; cursor:pointer;
    line-height:1;
}

/* Fog of war countdown bar */
#fogCounterBar {
    text-align:center; font-size:12px; color:#aaaacc;
    background:#1a1a2e; padding:3px 0; line-height:1;
}

/* Duel / PVPTeams banner (mirrors Qt DuelBanner) */
#duelBanner {
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bg-networkbar); color:var(--text-primary);
    height:26px; padding:0 10px; font-size:13px; font-weight:bold;
    line-height:1; box-sizing:border-box;
}
#duelBanner .duel-banner-left,
#duelBanner .duel-banner-right { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
#duelBanner .duel-banner-left { text-align:left; }
#duelBanner .duel-banner-right { text-align:right; }
#duelBanner .duel-banner-center {
    display:inline-flex; align-items:center; gap:4px;
    font-size:14px; flex-shrink:0;
}
#duelBanner .duel-banner-score-self,
#duelBanner .duel-banner-score-opp { color:var(--accent-blue); }
#duelBanner .duel-banner-score-colon { color:var(--text-muted); }
#duelBanner.team-banner .duel-banner-left { color:#5DADE2; }
#duelBanner.team-banner .duel-banner-right { color:#F5B041; }
#duelBanner.team-banner-multi .duel-banner-left,
#duelBanner.team-banner-multi .duel-banner-right {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    white-space:normal;
}
#duelBanner.team-banner-multi .duel-banner-left { justify-content:flex-start; }
#duelBanner.team-banner-multi .duel-banner-right { justify-content:flex-end; }

/* Grid area — wrapper for own + opponent grid */
#gridsWrapper { flex:1; display:flex; overflow:hidden; }
#gridContainer { flex:1; position:relative; overflow:hidden; }
#gridCanvas { position:absolute; top:0;left:0; width:100%;height:100%; }
#infiniteCanvas { position:absolute; top:0;left:0; width:100%;height:100%; }

/* Keyboard selection position badge (mirrors Qt keyboardPositionBadge) */
.kbd-pos-badge {
    position:absolute;
    left:10px;
    top:8px;
    z-index:12;
    background:rgba(26,31,45,0.80);
    border:1px solid rgba(230,192,88,1.0);
    border-radius:6px;
    padding:3px 8px;
    font-size:12px;
    font-weight:bold;
    color:#F6F1D0;
    pointer-events:none;
    white-space:nowrap;
}

/* Opponent grid mini-map (PVP Duel / PVPTeams) — bottom-right corner overlay matching Qt */
#opponentGridContainer {
    display:none; position:absolute;
    right:10px; bottom:10px;
    width:min(25%, 300px); height:min(25%, 300px);
    z-index:1000;
    background:#2a2a2a; border:2px solid #555555;
    border-radius:4px; overflow:hidden;
}
#opponentGridContainer.visible { display:block; }
#opponentGridCanvas,
#opponentGrid3DCanvas { position:absolute; top:24px; left:0; width:100%; height:calc(100% - 24px); }
.opponent-label {
    position:absolute; top:0; left:0; right:0; height:24px;
    background:#1a1a1a; color:#ffffff;
    font-size:12px; font-weight:bold;
    display:flex; align-items:center; justify-content:center;
    z-index:5; pointer-events:none;
}
.opponent-label.opponent-tabs {
    gap:2px;
    padding:2px;
    pointer-events:auto;
}
.opponent-team-tab {
    flex:1 1 0;
    min-width:0;
    height:20px;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:3px;
    background:rgba(255,255,255,0.08);
    color:#ffffff;
    font-size:11px;
    font-weight:bold;
    line-height:18px;
    cursor:pointer;
}
.opponent-team-tab.active {
    border-color:#F6F1D0;
    background:rgba(93,173,226,0.42);
}
.opponent-team-tab:focus-visible {
    outline:1px solid #F6F1D0;
    outline-offset:-2px;
}

/* Freeze time overlay */
#freezeOverlay {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:200px; height:200px;
    z-index:50;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
}
#freezeOverlay.blocking { pointer-events:all; }
#freezeCanvas { position:absolute; top:0;left:0; }
#freezeText {
    position:relative; z-index:1;
    color:#fff; font-size:32px; font-weight:bold;
    text-shadow:0 0 8px rgba(0,0,0,.5);
}
/* Freeze blocker covers entire grid */
#freezeBlocker {
    position:absolute; top:0;left:0; width:100%;height:100%;
    z-index:49; cursor:not-allowed;
}

/* Spectator click feedback */
#spectatorFeedback {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    z-index:48;
    pointer-events:none;
}
#spectatorEmoji {
    font-size:100px;
    opacity:0;
    transition:opacity .8s ease-in;
}
#spectatorFeedback.show #spectatorEmoji {
    opacity:0.8;
}

/* Level preview canvas (solo menu) */
.level-preview-container {
    width:150px; height:150px; flex-shrink:0;
    background:var(--bg-grid); border-radius:4px;
    overflow:hidden;
}
.level-preview-canvas {
    display:block;
}

/* Claim victory */
.btn-claim-victory {
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    background:var(--accent-orange); color:#fff;
    border:none; border-radius:8px; padding:12px 24px;
    font-size:16px; font-weight:bold; cursor:pointer;
    z-index:55; box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* The connection-lost choice box is raised over the game modal: it opens while
   that modal is being shown by the disconnect teardown, and it owns the board's
   fate, so it must not end up behind it. */
#connectionLostInGameDialog { z-index:2100; }

/* ====================================================================
   GAME MODAL (pause / game-over / duel results)
   ==================================================================== */
#gameModal {
    position:absolute; top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,.35);
    z-index:2000;
    display:flex; align-items:center; justify-content:center;
}
.game-modal-card {
    background:var(--bg-modal);
    border:3px solid var(--modal-border);
    border-radius:12px;
    padding:20px 24px 18px;
    max-width:420px; width:92%;
    max-height:85vh; overflow-y:auto;
    position:relative;
    display:flex; flex-direction:column; gap:6px;
}
.game-modal-card.gm-community-stats { max-width:520px; }
.game-modal-card.gm-pvpteams-stats { max-width:700px; }
.gm-close-btn {
    position:absolute; top:10px; right:10px;
    background:transparent;
    border:1px solid var(--panel-border);
    border-radius:8px; width:34px; height:34px;
    font-size:16px; cursor:pointer; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
}
.gm-close-btn:hover {
    background:var(--card-hover);
    border-color:var(--loss-red-light, var(--loss-red));
    color:var(--loss-red-light, var(--loss-red));
}
.gm-close-btn:active { background:var(--card-pressed); }

.gm-settings-btn {
    position:absolute; top:10px; right:50px;
    background:transparent;
    border:1px solid var(--panel-border);
    border-radius:8px; width:34px; height:34px;
    font-size:16px; cursor:pointer; color:var(--text-primary);
    display:flex; align-items:center; justify-content:center;
}
.gm-settings-btn:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
}
.gm-settings-btn:active { background:var(--card-pressed); }

.gm-title { font-size:26px; font-weight:bold; margin-right:84px; }
.gm-pause-info { text-align:center; line-height:1.2; margin-top:2px; }
.gm-pause-category { font-size:13px; color:#b0b0b0; }
.gm-pause-specs { font-size:12px; color:#9a9a9a; margin-top:2px; }
.gm-alive { font-size:17px; text-align:center; }
.gm-time  { font-size:17px; text-align:center; }
.gm-infinite-scores {
    text-align:center;
    font-size:16px;
    color:var(--text-primary);
    line-height:1.25;
    max-width:100%;
}
.gm-infinite-score-row {
    display:flex;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    max-width:100%;
}
.gm-infinite-score-value {
    font-weight:bold;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.gm-infinite-high-score { color:var(--text-continue); }

/* Solo rated leaderboard placement (shown after a SoloLeaderboard win) */
.gm-leaderboard {
    align-self:center;
    width:min(100%, 280px);
    box-sizing:border-box;
    padding:14px 16px;
    border-radius:12px;
    background:var(--panel-elevated);
    border:1px solid var(--gm-lb-accent, var(--accent-blue));
    text-align:center;
}
.gm-lb-pending { display:flex; align-items:center; justify-content:center; gap:10px; }
.gm-lb-pending .spinner { width:24px; height:24px; margin:0; }
.gm-lb-pending-text { color:var(--text-secondary); font-size:14px; }
.gm-lb-rank { font-size:32px; font-weight:bold; line-height:1.1; color:var(--gm-lb-accent, var(--accent-green)); }
.gm-lb-label { font-size:11px; font-weight:bold; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
.gm-lb-miss-title { font-size:16px; font-weight:bold; color:var(--gm-lb-accent, var(--accent-orange)); }
.gm-lb-miss-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* Duel stats */
.duel-score-row { display:flex; align-items:center; justify-content:center; gap:6px; margin:4px 0; }
.duel-score { font-size:20px; font-weight:bold; color:var(--duel-score-text); }
.duel-score-colon { font-size:20px; font-weight:bold; color:var(--duel-score-colon); }

.duel-columns { display:flex; gap:0; margin-top:4px; }
.duel-col { flex:1; display:flex; flex-direction:column; gap:3px; padding:4px 8px; }
.duel-col-right { text-align:right; }
.duel-divider { width:1px; background:var(--duel-divider); align-self:stretch; }

.duel-col .duel-name { font-size:17px; font-weight:bold; text-decoration:underline; }
.duel-col .duel-sublabel { font-size:11px; font-weight:bold; }
.duel-col .duel-stat { font-size:13px; color:var(--duel-stat-text); }

.duel-reason-box {
    background:var(--reason-box-bg);
    border:1px solid var(--reason-box-border);
    border-radius:4px; padding:8px;
    color:var(--text-secondary);
    text-align:center; font-size:13px;
    margin-top:8px;
}

.game-modal-card.gm-duel-stats {
    max-width:430px;
    overflow:hidden;
}
.game-modal-card.gm-duel-stats #duelStatsArea {
    min-height:0;
    max-height:clamp(220px, 56vh, 500px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
}
.duel-score-card {
    width:min(180px, 100%);
    min-height:44px;
    margin:4px auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--reason-box-bg);
    border:1px solid var(--reason-box-border);
    border-radius:8px;
}
.duel-result-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}
.duel-result-card {
    min-height:132px;
    padding:10px;
    background:var(--card-primary);
    border:1px solid transparent;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.duel-result-card.resolved {
    border-color:var(--duel-card-accent);
}
.duel-result-card .duel-name {
    color:var(--duel-card-accent);
    font-size:16px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.duel-result-card .duel-sublabel {
    color:var(--duel-card-accent);
    font-size:11px;
    font-weight:800;
}
.duel-card-separator {
    height:1px;
    background:var(--separator);
    opacity:.55;
}
.duel-result-card .duel-stat {
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:var(--text-muted);
    font-size:12px;
}
.duel-result-card .duel-stat strong {
    color:var(--text-primary);
    min-width:58px;
    text-align:right;
}
.ranked-summary-card {
    margin-top:8px;
    padding:10px;
    background:var(--panel-bg);
    border:1px solid var(--ranked-summary-accent);
    border-radius:7px;
}
.ranked-summary-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:var(--ranked-summary-accent);
    font-size:13px;
    font-weight:800;
}
.ranked-summary-score {
    margin-top:8px;
    color:var(--text-primary);
    font-size:20px;
    font-weight:800;
    text-align:center;
}
.ranked-summary-reason {
    margin-top:4px;
    color:var(--text-muted);
    font-size:12px;
    text-align:center;
}
.ranked-summary-stats {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:8px;
}
.ranked-summary-stats div,
.ranked-summary-round {
    background:var(--card-primary);
    border:1px solid var(--panel-border);
    border-radius:6px;
    padding:7px;
}
.ranked-summary-stats span {
    display:block;
    color:var(--text-muted);
    font-size:12px;
}
.ranked-summary-stats strong {
    display:block;
    color:var(--text-primary);
    font-size:12px;
    overflow-wrap:anywhere;
}
.ranked-summary-rounds {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
}
.ranked-summary-round {
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.25;
}
.gm-rematch-notice {
    width:230px;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:800;
    text-align:center;
}
.gm-rematch-notice.danger {
    color:var(--loss-red);
}
.gm-action-row.ranked-rematch,
.gm-action-row.ranked-rematch .gm-primary-btn,
.gm-action-row.ranked-rematch + .gm-btn {
    width:230px;
}

@media (max-width:520px) {
    .duel-result-grid,
    .ranked-summary-stats {
        grid-template-columns:1fr;
    }
}

.gm-bottom-buttons {
    display:flex; flex-direction:column; gap:8px;
    margin-top:10px; align-items:center;
}
.gm-btn { width:220px; text-align:center; }

.gm-action-row {
    width:220px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:0;
}

.gm-primary-btn {
    width:220px;
    flex:0 0 auto;
}

.gm-next-btn {
    display:none;
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    font-size:14px;
    padding:10px 10px;
    margin-left:8px;
}

.gm-action-row.has-next .gm-primary-btn {
    width:auto;
    flex:1 1 auto;
}

.gm-action-row.has-next .gm-next-btn {
    display:inline-block;
}

/* Community game stats table */
#communityStatsArea {
    max-height:clamp(148px, 42vh, 340px); overflow-y:auto;
    margin:4px 0;
    scrollbar-width:thin;
}
#pvpTeamsStatsArea {
    max-height:clamp(220px, 52vh, 520px);
    overflow-y:auto;
    margin:4px 0;
    scrollbar-width:thin;
}
.team-stats-panel { display:grid; gap:12px; }
.team-stats-col { min-width:0; }
.team-stats-scroll {
    overflow-y:auto;
    scrollbar-width:thin;
}
.team-stats-title { font-size:16px; font-weight:bold; text-align:center; margin-bottom:2px; }
.team-stats-total { font-size:11px; color:#ccc; text-align:center; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-winner-badge { margin-left:8px; color:#00FF00; font-size:11px; letter-spacing:0; }
.team-badge { display:inline-block; min-width:22px; padding:2px 5px; border-radius:3px; color:#fff; font-size:10px; font-weight:bold; text-align:center; }
.team-badge.team1 { background:#2E86C1; }
.team-badge.team2 { background:#B9770E; }
.cs-table { width:100%; border-collapse:collapse; font-size:13px; }
.cs-th {
    cursor:pointer; user-select:none;
    padding:4px 6px;
    color:#aaa; font-weight:bold; font-size:12px;
    border-bottom:1px solid rgba(255,255,255,0.15);
    white-space:nowrap;
}
.cs-th:hover { color:#fff; }
.cs-th.cs-sorted { color:#3498DB; }
.cs-th-name { text-align:left; }
.cs-th-num  { text-align:right; }
.cs-table td {
    padding:3px 6px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.cs-td-name  { text-align:left; color:#ddd; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-td-num   { text-align:right; color:#ccc; }
.cs-td-score { color:#eee; font-weight:bold; }
.cs-row-own  { background:rgba(52,152,219,0.18); }
.cs-row-own .cs-td-name { color:#3498DB; font-weight:bold; }

/* Top-3 podium (completed community games) */
.gm-podium { display:flex; gap:8px; margin-bottom:8px; }
.gm-podium-card {
    flex:1 1 0;
    min-width:0;
    box-sizing:border-box;
    padding:8px 6px;
    border-radius:8px;
    background:var(--panel-elevated);
    border:1px solid var(--gm-podium-accent, var(--accent-blue));
    text-align:center;
}
.gm-podium-place { font-size:13px; font-weight:bold; color:var(--gm-podium-accent, var(--accent-blue)); }
.gm-podium-name {
    font-size:13px; font-weight:bold; color:var(--text-primary);
    margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-podium-reveals { font-size:11px; color:var(--text-muted); margin-top:1px; }
.gm-screenshot-btn {
    position:absolute; top:10px; right:calc(90px * var(--ui-scale)); z-index:2;
    width:calc(34px * var(--ui-scale)); height:calc(34px * var(--ui-scale)); padding:0;
    border:1px solid var(--panel-border); border-radius:8px;
    background:var(--card-primary); color:var(--text-primary); cursor:pointer;
}
.gm-screenshot-btn { font-size:0; }
.gm-screenshot-btn::before,
#btnScreenshotGallery::before {
    content:""; display:block; width:19px; height:19px; margin:auto;
    background:currentColor;
    -webkit-mask:center / contain no-repeat var(--screenshot-icon);
    mask:center / contain no-repeat var(--screenshot-icon);
}
.gm-screenshot-btn::before { --screenshot-icon:url('../../../res/icons/ui/camera.svg'); }
#btnScreenshotGallery { font-size:0; }
#btnScreenshotGallery::before { --screenshot-icon:url('../../../res/icons/ui/gallery.svg'); }
.gm-screenshot-btn:disabled { opacity:.45; cursor:wait; }
.stats-header-actions { display:flex; gap:6px; }
.modal.screenshot-gallery-modal {
    position:relative;
    width:min(900px, 96vw); max-width:900px;
    height:min(820px, 92vh);
}
.screenshot-gallery-header { display:flex; align-items:center; border-bottom:1px solid var(--separator); }
.screenshot-gallery-header h3 { flex:1; border-bottom:0; }
.screenshot-gallery-header .screen-back-btn { margin-right:var(--space-3); }
.screenshot-gallery-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:12px; padding:16px; overflow:auto;
}
.screenshot-tile {
    display:flex; flex-direction:column; gap:5px; padding:7px;
    border:1px solid var(--panel-border); border-radius:10px;
    background:var(--card-primary); color:var(--text-primary); text-align:left; cursor:pointer;
}
.screenshot-tile:hover { border-color:var(--focus-ring); background:var(--card-hover); }
.screenshot-tile img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; background:#020617; }
.screenshot-tile span { font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.screenshot-tile small { color:var(--text-muted); }
.screenshot-empty { grid-column:1/-1; padding:48px; color:var(--text-muted); text-align:center; }
.screenshot-preview-pane {
    display:none; position:absolute; inset:0; z-index:3;
    flex-direction:column; align-items:center; gap:10px;
    padding:18px; background:var(--bg-modal); overflow:auto;
}
.screenshot-preview-pane.visible { display:flex; }
.screenshot-preview-close { align-self:flex-start; }
.screenshot-preview-pane img { max-width:100%; min-height:0; flex:1; object-fit:contain; background:#020617; }
.screenshot-preview-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }

/* ====================================================================
   MODAL DIALOGS  (host / join / settings / etc.)
   ==================================================================== */
.modal-backdrop {
    display:none; position:fixed; top:0;left:0;
    width:100%;height:100%;
    background:var(--modal-overlay);
    z-index:100; align-items:center; justify-content:center;
}
.modal-backdrop.active { display:flex; }

.modal {
    background:var(--bg-menu);
    border-radius:12px; padding:24px;
    max-width:440px; width:92%;
    max-height:82vh; overflow-y:auto;
    display:flex; flex-direction:column; gap:14px;
}
.modal-tall { max-height:88vh; }
.modal-wide { max-width:600px; }

.modal h3 { font-size:20px; text-align:center; }
.modal-desc { color:var(--text-secondary); font-size:13px; text-align:center; }
#gmCustomOverwriteText { white-space:pre-line; }
.modal label { color:var(--text-secondary); font-size:13px; display:block; margin-bottom:4px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.field-error { min-height:16px; color:#F1C40F; font-size:12px; }
.modal-actions { display:flex; gap:10px; margin-top:6px; }
.modal-actions .btn { flex:1; width:auto; }
.welcome-name-modal { max-width:380px; }

.settings-warning { color:var(--accent-orange); font-size:12px; text-align:center; padding:6px; background:rgba(243,156,18,.1); border-radius:4px; }
.click-mapping-warning { color:#F1C40F; background:rgba(241,196,15,.14); }

/* Solo game settings should be compact and not reserve space for online-only controls. */
#gameSettingsDialog.solo-mode .modal {
    max-height:64vh;
    max-width:400px;
    padding:20px;
    gap:10px;
}
#gameSettingsDialog.solo-mode .form-group { gap:2px; }
#gameSettingsDialog.solo-mode .modal-actions { margin-top:2px; }
#gameSettingsDialog.solo-mode #settingsOnlineWarning,
#gameSettingsDialog.solo-mode #gameVariantRow,
#gameSettingsDialog.solo-mode #gameTypeRow,
#gameSettingsDialog.solo-mode #gridLengthRow,
#gameSettingsDialog.solo-mode #visibleCellsRow,
#gameSettingsDialog.solo-mode #levelPresetRow { display:none !important; }

.toggle-row { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.toggle-row label { margin:0; }

/* ====================================================================
   SETTINGS TABS
   ==================================================================== */
.settings-tabs {
    display:flex; gap:8px; flex-wrap:wrap;
}
.settings-tab {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    min-height:36px;
    padding:0 8px;
    border:1px solid var(--separator);
    border-radius:4px;
    background:var(--card-primary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--text-primary);
    transition:background .12s, border-color .12s;
}
.settings-tab:hover { background:var(--card-active); }
.settings-tab.active { background:var(--accent-blue); border-color:var(--accent-blue); color:#fff; }
.settings-tab.active:hover { background:var(--accent-blue); }
.settings-tab-content { display:none; flex-direction:column; gap:14px; }
.settings-tab-content.active { display:flex; }
#appSettingsDialog .modal { width:min(720px, 94vw); max-width:720px; }
#appSettingsDialog .connection-indicator { width:100%; max-width:100%; justify-content:flex-start; }
#appSettingsDialog .modal-actions { flex-shrink:0; }
.guide-content { display:flex; flex-direction:column; gap:8px; }
.guide-intro,
.guide-topic {
    border:1px solid var(--separator);
    border-radius:var(--radius-md);
    background:var(--card-primary);
}
.guide-intro { padding:12px; }
.guide-intro h4,
.guide-intro p { margin:0 0 6px; }
.guide-intro p:last-child { margin-bottom:0; }
.guide-muted { color:var(--text-muted); font-size:12px; }
.guide-group {
    margin:14px 2px 2px;
    color:var(--accent-blue);
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.guide-topic { overflow:hidden; }
.guide-topic summary {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:10px 12px;
    cursor:pointer;
    color:var(--text-primary);
}
.guide-topic summary span { font-weight:800; }
.guide-topic summary small { color:var(--text-muted); font-size:11px; }
.guide-topic-body { padding:0 14px 12px; color:var(--text-secondary); font-size:13px; line-height:1.45; }
.guide-topic-body p { margin:8px 0 0; }
.guide-topic-body ul { margin:8px 0 0; padding-left:20px; }
.guide-topic-body li + li { margin-top:6px; }
.board-theme-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    overflow:visible;
}
.board-theme-tile {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px;
    border:1px solid var(--separator);
    border-radius:var(--radius-md);
    background:var(--card-primary);
    color:var(--text-primary);
    cursor:pointer;
}
.board-theme-tile:hover { background:var(--card-hover); border-color:var(--focus-ring); }
.board-theme-tile.active { background:var(--card-active); border-width:2px; border-color:var(--focus-ring); }
.board-theme-preview {
    width:100%;
    min-height:32px;
    aspect-ratio:10 / 6;
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    grid-template-rows:repeat(6, 1fr);
    gap:1px;
    padding:5px;
    border:1px solid;
    border-radius:var(--radius-sm);
}
.board-theme-preview-cell {
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid;
    overflow:hidden;
}
.board-theme-preview-cell img {
    width:82%;
    height:82%;
    object-fit:contain;
}
.board-theme-preview-cell span {
    font-size:10px;
    line-height:1;
}
.board-theme-name {
    display:block;
    min-width:0;
    color:var(--text-primary);
    font-size:11px;
    font-weight:800;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ── Custom board theme editor ─────────────────────────────────────── */
.ct-preview-host {
    padding:3px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
}
/* The editor's preview is the same widget the tiles use, just larger. */
.ct-preview-host .board-theme-preview { min-height:70px; }
.ct-preview-host .board-theme-preview-cell span { font-size:15px; }

.ct-row { display:flex; align-items:center; gap:10px; }
.ct-row > label {
    flex:1; min-width:0; margin-bottom:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ct-row > .settings-select { flex:2; min-width:0; }
.ct-row > .btn { flex:0 0 auto; width:auto; }
.ct-row.ct-checks { gap:18px; }
.ct-row.ct-checks > label { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.ct-hint { color:var(--text-muted); font-size:12px; margin:0; }
.ct-bevel-only { display:flex; flex-direction:column; gap:10px; }

.ct-row input[type="color"] {
    flex:0 0 auto; width:44px; height:26px; padding:0;
    border:1px solid var(--panel-border); border-radius:var(--radius-sm);
    background:none; cursor:pointer;
}

.ct-digits { display:flex; flex-wrap:wrap; gap:6px; }
/* Each digit swatch is a colour input sitting on the revealed-cell colour, with
   the digit itself drawn on top — clicking anywhere opens the picker. */
.ct-digit { position:relative; width:34px; height:34px; }
.ct-digit input[type="color"] {
    position:absolute; inset:0; width:100%; height:100%; padding:0;
    border:1px solid var(--panel-border); border-radius:var(--radius-md);
    background:none; cursor:pointer; opacity:0;
}
.ct-digit-face {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--panel-border); border-radius:var(--radius-md);
    font-size:17px; font-weight:800; pointer-events:none;
}
.ct-digit:hover .ct-digit-face { border-width:2px; border-color:var(--focus-ring); }

.ct-presets { display:flex; flex-wrap:wrap; gap:6px; }
.ct-presets .btn { flex:1 1 auto; width:auto; min-width:64px; }

/* Standalone close/action buttons at bottom of tall dialogs */
.modal-tall > .btn:last-child,
.modal-wide > .btn:last-child { width:auto; max-width:200px; margin:4px auto 0; }
.density-slider,.volume-slider { margin-top:4px; }

/* ====================================================================
   PUBLIC LOBBIES DIALOG
   ==================================================================== */
.lobby-list-header { display:flex; align-items:center; justify-content:space-between; }
.scrollable-list { max-height:250px; overflow-y:auto; }
.list-empty { color:var(--text-muted); text-align:center; padding:20px; }
/* Same slot as .list-empty, but for a page request still in flight. */
.list-loading { display:flex; flex-direction:column; align-items:center; gap:4px; }
.list-loading .spinner { width:24px; height:24px; margin:0; }

.lobby-list-entry {
    display:flex; flex-direction:column; gap:4px;
    padding:10px 12px; border-radius:4px;
    background:#F5F5F5; border:1px solid #BDBDBD;
    cursor:pointer; margin-bottom:8px;
    transition:background .12s;
}
.lobby-list-entry:hover { background:#E3F2FD; }
.lobby-entry-header {
    display:flex; align-items:center; justify-content:space-between;
}
.lobby-entry-host { font-size:16px; font-weight:bold; color:#212121; flex:1; }
.lobby-entry-players {
    background:#4CAF50; color:#fff; font-size:12px; font-weight:bold;
    padding:2px 10px; border-radius:12px; white-space:nowrap;
}

/* ====================================================================
   STATS MENU
   ==================================================================== */
#statsMenu {
    background: var(--bg-menu);
    padding:0;
}
.stats-content {
    display:flex; flex-direction:column;
    height:100%;
}
.stats-header {
    padding:10px 12px 0;
    flex-shrink:0;
}
.stats-header h2 { font-size:24px; text-align:center; flex:1; margin:0; }
.stats-tab-bar {
    display:flex; gap:4px;
    flex-wrap:wrap;
    padding:0 12px 10px;
    overflow-x:visible;
    flex-shrink:0;
}
.stats-tab {
    background: var(--card-primary);
    color: var(--text-secondary);
    border:none; border-radius:6px;
    padding:8px 14px; font-size:12px; font-weight:bold;
    cursor:pointer; white-space:nowrap;
    transition: background .12s, color .12s;
}
.stats-tab:hover { filter: brightness(1.15); }
.stats-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.stats-variant-bar {
    display:flex;
    align-items:center;
    gap:4px;
    /* Scroll the chip strip horizontally rather than wrapping/clipping, so a
       long variant list never hides its last chips. No visible scrollbar — it
       reads as a swipe/drag chip strip, matching the Qt Flickable. */
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 12px 10px;
    flex-shrink:0;
}
.stats-variant-bar::-webkit-scrollbar { display:none; }

.stats-variant-label {
    font-size:12px;
    color:var(--text-secondary);
    margin-right:4px;
    white-space:nowrap;
    flex:0 0 auto;
}

.stats-variant-tab {
    padding:5px 12px;
    border-radius:4px;
    background:var(--card-primary);
    color:var(--text-primary);
    border:none;
    cursor:pointer;
    font-size:11px;
    white-space:nowrap;
    flex:0 0 auto;
    transition:filter .12s;
}

.stats-variant-tab:hover { filter:brightness(1.15); }

.stats-variant-tab.active {
    background:var(--accent-blue);
    font-weight:bold;
}
.stats-scroll {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:10px 20px;
    display:flex; flex-direction:column; gap:10px;
}
.stats-mode-title { display:none; }
.stats-cards {
    display:flex; flex-direction:column; gap:16px;
}

/* Grouped stat sections */
.stats-section { display:flex; flex-direction:column; gap:8px; }
.stats-section-header { display:flex; align-items:center; gap:8px; }
.stats-section-title {
    font-size:11px; font-weight:bold; letter-spacing:1px;
    text-transform:uppercase; color:var(--text-detail); white-space:nowrap;
}
.stats-section-rule { flex:1; height:1px; background:var(--panel-border); }
.stats-section-grid { display:grid; gap:8px; }
.stats-section-grid.cols-2 { grid-template-columns:1fr 1fr; }
.stats-section-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }

.stat-card {
    padding:12px 8px;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; text-align:center;
    min-height:80px;
}
.stat-card-wide { grid-column: span 2; }
.stat-card-icon { font-size:17px; line-height:1; }
.stat-card-value { font-size:21px; font-weight:bold; line-height:1.1; color:var(--text-primary); }
.stat-card-value.stat-pos { color:var(--win-green); }
.stat-card-value.stat-neg { color:var(--loss-red); }
.stat-card-value.stat-warn { color:var(--accent-orange); }
.stat-card-value.stat-team { color:var(--accent-blue); }
.stat-card-label { font-size:10px; color:var(--text-detail); line-height:1.2; }

.lobby-entry-detail { font-size:12px; color:#757575; }
.lobby-entry-cooldown { font-size:12px; color:#888; }
.lobby-entry-cooldown.active { color:#D32F2F; font-weight:bold; }

.pagination-row { display:flex; align-items:center; justify-content:center; gap:12px; }

/* ====================================================================
   LEADERBOARD DIALOG
   ==================================================================== */
.lb-tabs-scroll { overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
.lb-tabs {
    display:flex; gap:8px; min-width:min-content;
}
.lb-tab {
    min-width:0;
    min-height:36px;
    padding:0 8px;
    border:1px solid var(--separator);
    border-radius:4px;
    background:var(--card-primary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--text-primary);
    transition:background .12s, border-color .12s;
}
.lb-tab:hover { background:var(--card-active); }
.lb-tab.active {
    background:var(--accent-blue);
    border-color:var(--accent-blue);
    color:#fff;
}
.lb-tab.active:hover { background:var(--accent-blue); }

.lb-level-tabs .lb-tab {
    font-size:11px;
    min-height:44px;
    padding:6px 10px;
    white-space:normal;
    line-height:1.2;
}

.lb-selection-row {
    display:flex; align-items:center; gap:8px;
    background:var(--leaderboard-panel-bg); border:1px solid var(--leaderboard-row-border);
    border-radius:4px; padding:6px 10px;
}
.lb-selection-text { flex:1; font-size:12px; font-weight:bold; color:var(--leaderboard-row-accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lb-list { max-height:300px; }
.lb-entry {
    display:flex; align-items:center;
    padding:6px 10px; font-size:13px; gap:8px;
    background:var(--leaderboard-row-bg);
    border:1px solid var(--leaderboard-row-border);
    border-radius:4px;
    color:var(--leaderboard-row-text);
    margin-bottom:2px;
}
.lb-entry:nth-child(odd) { background:var(--leaderboard-row-bg-alt); }

/* Medal highlights */
.lb-entry.lb-gold   { background:linear-gradient(90deg, rgba(255,215,0,.16), var(--leaderboard-row-bg) 58%); }
.lb-entry.lb-silver { background:linear-gradient(90deg, rgba(192,192,192,.16), var(--leaderboard-row-bg) 58%); }
.lb-entry.lb-bronze { background:linear-gradient(90deg, rgba(205,127,50,.16), var(--leaderboard-row-bg) 58%); }
.lb-entry:nth-child(odd).lb-gold   { background:linear-gradient(90deg, rgba(255,215,0,.16), var(--leaderboard-row-bg-alt) 58%); }
.lb-entry:nth-child(odd).lb-silver { background:linear-gradient(90deg, rgba(192,192,192,.16), var(--leaderboard-row-bg-alt) 58%); }
.lb-entry:nth-child(odd).lb-bronze { background:linear-gradient(90deg, rgba(205,127,50,.16), var(--leaderboard-row-bg-alt) 58%); }
.lb-entry.lb-own {
    background:linear-gradient(90deg, rgba(105,214,255,.18), var(--leaderboard-time-bg) 68%);
    border-color:var(--leaderboard-row-accent);
    border-width:2px;
}
.lb-own-badge {
    flex:0 0 auto;
    padding:2px 7px;
    border-radius:4px;
    background:var(--leaderboard-row-accent);
    color:var(--leaderboard-time-bg);
    font-size:10px;
    font-weight:bold;
    line-height:1.2;
}

.lb-rank { width:40px; font-weight:bold; font-size:14px; text-align:center; color:var(--leaderboard-row-accent); }
.lb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-time { font-family:monospace; color:var(--leaderboard-row-accent); white-space:nowrap; }
.lb-date { font-size:10px; color:var(--leaderboard-row-muted); white-space:nowrap; }

/* WATCH — shown only on rows whose run has a stored recording. */
.lb-watch {
    flex:0 0 auto;
    padding:2px 8px;
    border:1px solid var(--leaderboard-row-accent); border-radius:5px;
    background:transparent; color:var(--leaderboard-row-accent);
    font-size:10px; font-weight:bold; white-space:nowrap; cursor:pointer;
}
.lb-watch:hover { background:color-mix(in srgb, var(--leaderboard-row-accent) 18%, transparent); }

.lb-showing-info { font-size:10px; color:var(--text-dimmed); text-align:center; margin-top:4px; padding:0 12px 6px; }

/* ====================================================================
   REPLAY VIEWER (full screen)
   ==================================================================== */
.replay-page {
    position:fixed; inset:0; z-index:70;
    display:none;
    background:
        linear-gradient(165deg, var(--bg-menu-top), var(--bg-menu-bottom)),
        var(--bg-menu);
}
.replay-page.visible { display:block; }
.replay-inner {
    height:100%;
    max-width:1100px; margin:0 auto;
    padding:clamp(12px, 3vw, 22px);
    display:flex; flex-direction:column; gap:10px;
}
.replay-header { display:flex; align-items:center; gap:var(--space-2); }
.replay-title-block { flex:1; min-width:0; }
.replay-title {
    display:flex; align-items:center; gap:6px;
    color:var(--text-primary); font-size:calc(20px * var(--ui-scale)); font-weight:800;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.replay-subtitle { color:var(--text-muted); font-size:calc(11px * var(--ui-scale)); }
.replay-xray { width:auto; flex:0 0 auto; }
.replay-xray.active {
    background:var(--accent-orange); border-color:var(--accent-orange);
    color:var(--text-on-accent);
}

/* Board slot. The two canvases are stacked in the same box; the controller
   shows whichever variant the recording needs. */
.replay-board {
    position:relative; flex:1; min-height:0;
    border:1px solid var(--panel-border); border-radius:10px;
    background:var(--bg-grid); overflow:hidden;
}
.replay-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

.replay-truncated {
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    padding:4px 10px; border-radius:6px; z-index:50;
    background:var(--panel-elevated); border:1px solid var(--accent-orange);
    color:var(--accent-orange); font-size:calc(10px * var(--ui-scale));
}
.replay-overlay {
    position:absolute; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-grid);
}
.replay-overlay-inner {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    max-width:360px; text-align:center;
}
.replay-overlay-text { color:var(--text-secondary); font-size:calc(13px * var(--ui-scale)); }
.replay-overlay-text.error { color:var(--danger-default); }
.replay-spinner {
    width:28px; height:28px; border-radius:50%;
    border:3px solid var(--panel-border); border-top-color:var(--leaderboard-row-accent);
    animation:replay-spin 800ms linear infinite;
}
@keyframes replay-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .replay-spinner { animation-duration:2s; } }

/* Transport bar */
.replay-transport {
    flex:0 0 auto;
    display:flex; flex-direction:column; gap:6px;
    padding:7px;
    background:var(--leaderboard-panel-raised);
    border:1px solid var(--leaderboard-row-border); border-radius:10px;
}
.replay-transport.disabled { opacity:.45; pointer-events:none; }
.replay-scrub-row { display:flex; align-items:center; gap:8px; }
.replay-clock, .replay-total {
    flex:0 0 auto; width:84px; font-family:monospace;
    font-size:calc(13px * var(--ui-scale));
}
.replay-clock { color:var(--leaderboard-row-accent); font-weight:bold; text-align:right; }
.replay-total { color:var(--text-muted); font-size:calc(11px * var(--ui-scale)); }
.replay-scrub { flex:1; min-width:0; }

.replay-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.replay-buttons { display:flex; gap:4px; }
/* A plain button rather than .btn: the transport glyphs are single symbols that
   need to sit optically centred at a fixed square size. */
.replay-btn {
    width:38px; height:30px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--panel-border); border-radius:7px;
    background:var(--panel-elevated); color:var(--text-primary);
    font-size:calc(13px * var(--ui-scale)); font-weight:bold; cursor:pointer;
}
.replay-btn.wide { width:54px; }
.replay-btn:hover:not(:disabled) { background:var(--card-hover); }
.replay-btn:disabled { opacity:.4; cursor:not-allowed; }
.replay-btn.primary {
    background:var(--leaderboard-row-accent);
    border-color:var(--leaderboard-row-accent);
    color:var(--leaderboard-time-bg);
}

.replay-speeds { display:flex; gap:3px; }
.replay-speed {
    width:46px; height:30px;
    border:1px solid var(--panel-border); border-radius:7px;
    background:transparent; color:var(--text-secondary);
    font-size:calc(11px * var(--ui-scale)); cursor:pointer;
}
.replay-speed.active {
    background:var(--accent-purple); border-color:var(--accent-purple);
    color:var(--text-on-accent); font-weight:bold;
}
.replay-counters {
    margin-left:auto; display:flex; gap:10px; align-items:center;
    font-family:monospace; font-size:calc(11px * var(--ui-scale));
    color:var(--text-secondary);
}

/* ====================================================================
   LEADERBOARD PAGE (full screen)
   ==================================================================== */
#leaderboardPage {
    background: var(--bg-menu);
    padding:0;
}
.lb-page-content {
    display:flex; flex-direction:column;
    height:100%;
}
.lb-page-header {
    flex-shrink:0;
    padding:10px 12px 0;
}
.lb-page-header h2 { font-size:24px; text-align:center; flex:1; margin:0; color:#fff; }
.lb-page-tabs-row {
    flex-shrink:0;
    background: var(--card-primary);
    border:1px solid var(--separator);
    border-radius:4px;
    margin:6px 12px 0;
    padding:4px;
}
.lb-page-tabs-row .lb-tabs { min-width:min-content; }
.lb-page-tabs-row .lb-tab {
    font-size:11px;
}
.lb-page-tabs-row .lb-level-tabs .lb-tab {
    font-size:10px;
}
.lb-page-selection-row {
    flex-shrink:0;
    margin:6px 12px 0;
    background:var(--leaderboard-panel-bg);
    border:1px solid var(--leaderboard-row-border);
    color:var(--leaderboard-row-accent);
    border-radius:4px;
    padding:6px 10px;
}
.lb-page-selection-row .lb-selection-text { color:var(--leaderboard-row-accent); }
.lb-page-list {
    flex:1; overflow-y:auto; overflow-x:hidden;
    margin:6px 12px 0;
    max-height:none;
    border:1px solid var(--leaderboard-row-border);
    border-radius:4px;
}
.lb-page-pagination {
    flex-shrink:0;
    padding:8px 12px 2px;
}

/* ====================================================================
   TOAST NOTIFICATIONS
   ==================================================================== */
.social-invite-toast-stack {
    position:fixed;
    top:16px;
    right:16px;
    z-index:2100;
    display:flex;
    flex-direction:column;
    gap:8px;
    pointer-events:none;
}
.social-invite-toast {
    width:min(330px, calc(100vw - 32px));
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px;
    background:var(--bg-modal);
    color:var(--text-primary);
    border:1px solid var(--focus-ring);
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transform:translateX(calc(100% + 24px));
    opacity:0;
    transition:transform .18s ease-out, opacity .18s ease-out;
    pointer-events:auto;
}
.social-invite-toast.visible {
    transform:translateX(0);
    opacity:1;
}
.social-invite-toast.ranked {
    border-color:var(--accent-purple);
}
.social-invite-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--panel-border);
    border-radius:6px;
    background:var(--panel-elevated);
    color:var(--text-primary);
    font-weight:900;
    font-size:12px;
}
.social-invite-main {
    flex:1;
    min-width:0;
}
.social-invite-profile {
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--panel-border);
    border-radius:6px;
    background:var(--panel-elevated);
    color:var(--text-primary);
    padding:0;
    font-family:inherit;
    font-size:16px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}
.social-invite-profile:hover {
    border-color:var(--focus-ring);
    background:rgba(255,255,255,.12);
}
.social-invite-title {
    font-size:15px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.social-invite-sender,
.social-invite-body {
    margin-top:2px;
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.social-invite-actions {
    display:flex;
    gap:8px;
    margin-top:8px;
}
.social-invite-actions .btn {
    flex:1;
    min-width:0;
}
#toastContainer {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:300; display:flex; flex-direction:column;
    gap:8px; align-items:center;
}
.toast {
    background:#323232; color:#fff;
    padding:10px 20px; border-radius:8px; font-size:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    animation:toastIn .3s ease-out, toastOut .3s ease-in 2.7s forwards;
    max-width:90vw; text-align:center;
}
.toast.warning {
    border:1px solid var(--accent-orange);
    background:rgba(48,37,32,.96);
    color:var(--text-primary);
}
@keyframes toastIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

.ready-inactivity-warning {
    position:absolute;
    top:calc(var(--networkbar-h, 64px) + 96px);
    left:50%;
    transform:translateX(-50%);
    width:min(520px, calc(100vw - 28px));
    min-height:66px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:10px;
    border:2px solid var(--accent-orange);
    background:var(--panel-elevated);
    color:var(--text-primary);
    font-weight:900;
    text-align:center;
    white-space:pre-line;
    z-index:18000;
    box-shadow:0 8px 22px rgba(0,0,0,.34);
    pointer-events:none;
}
.ready-inactivity-warning.visible { display:flex; }
.ready-inactivity-warning.critical {
    border-width:2px;
    border-color:var(--loss-red);
    background:color-mix(in srgb, var(--loss-red), var(--panel-elevated) 78%);
    animation:readyInactivityPulse .44s ease-in-out infinite alternate;
}
@keyframes readyInactivityPulse {
    from { transform:translateX(-50%) scale(1); }
    to { transform:translateX(-50%) scale(1.025); }
}

/* ====================================================================
   GAME BROWSER SCREEN
   ==================================================================== */
.game-browser-content {
    display: flex; flex-direction: column;
    height: 100%;
}
.game-browser-header {
    flex-shrink: 0;
    padding: 10px 12px 0;
}
.gb-join-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.gb-join-input {
    flex: 1;
    min-width: 0;
}
.gb-join-btn {
    flex: 0 0 96px;
    width: 96px;
}
.gb-filters-area {
    flex-shrink: 0;
    padding: 6px 12px 0;
    display: flex; flex-direction: column; gap: 4px;
}
.gb-list {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 8px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.gb-pagination {
    flex-shrink: 0;
    padding: 8px 12px;
}

/* Game entry card */
.gb-entry {
    display: flex; flex-direction: column;
    padding: 10px 12px 10px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-left: 4px solid var(--gb-accent, #3498DB);
    cursor: pointer;
    background: var(--card-primary);
    transition: background .1s, border-color .1s;
    position: relative;
}
.gb-entry:hover { background: var(--card-active, #5a5a80); border-color: var(--accent-blue); }

.gb-entry-row {
    display: flex; align-items: center; gap: 8px;
}
.gb-type-badge {
    flex-shrink: 0;
    font-size: 10px; font-weight: bold; color: #fff;
    padding: 3px 7px; border-radius: 4px;
    white-space: nowrap;
}
.gb-type-community { background: #1976D2; }
.gb-type-coopsoft  { background: #388E3C; }
.gb-type-coophard  { background: #D32F2F; }
.gb-type-pvpduel   { background: #7B1FA2; }
.gb-type-pvpteams { background: #B9770E; }
.gb-type-pvpconquest { background: #2E7D6E; }
.gb-type-other     { background: var(--bg-networkbar); }

/* Left strip color per type is applied inline via --gb-accent */

.gb-host {
    flex: 1; font-size: 15px; font-weight: bold;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-grid {
    flex-shrink: 0; font-size: 11px; color: var(--text-dimmed);
    white-space: nowrap;
}
.gb-players {
    flex-shrink: 0;
    font-size: 10px; font-weight: bold; color: #fff;
    background: #4CAF50; padding: 3px 8px; border-radius: 10px;
    white-space: nowrap;
}
.gb-sub-row {
    margin-top: 3px;
    font-size: 11px; color: var(--text-dimmed);
}
.gb-cooldown {
    font-size: 11px; color: #EF9A9A; font-weight: bold;
    margin-top: 3px;
}
.gb-cooldown.static { color: var(--text-dimmed); }

/* ====================================================================
   GAME BROWSER TABS + FILTERS (legacy modal, kept for reference)
   ==================================================================== */
.browser-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.browser-tab {
    background: var(--bg-networkbar);
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.browser-tab:hover { background: #4a5f74; }
.browser-tab.active { background: var(--accent-blue); color: #fff; font-weight: bold; }

.browser-filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.browser-filter {
    background: var(--bg-networkbar);
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.browser-filter:hover { background: #4a5f74; }
.browser-filter.active { background: var(--accent-blue); color: #fff; font-weight: bold; }

/* ====================================================================
   QT FACELIFT PORT OVERRIDES
   ==================================================================== */
#soloMenu,
#statsMenu,
#leaderboardPage,
#gameBrowserScreen {
    background:
        linear-gradient(165deg, var(--bg-menu-top), var(--bg-menu-bottom)),
        var(--bg-menu);
}

#wanLobby {
    background:
        linear-gradient(165deg, var(--bg-lobby-top), var(--bg-lobby-bottom)),
        var(--bg-lobby);
}

.solo-content,
.stats-content,
.lb-page-content,
.game-browser-content,
.lobby-content {
    color:var(--text-primary);
}

.solo-header,
.stats-header,
.lb-page-header,
.game-browser-header {
    padding:var(--space-3) var(--space-4) 0;
}

.screen-header-row {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--space-3);
}

.solo-title,
.stats-header h2,
.lb-page-header h2 {
    color:var(--text-primary);
    font-size:var(--font-title);
    font-weight:800;
    text-align:center;
}

.screen-back-btn,
.screen-settings-btn {
    width:calc(46px * var(--ui-scale) * var(--density-scale));
    height:calc(46px * var(--ui-scale) * var(--density-scale));
    min-width:34px;
    min-height:34px;
    background:var(--panel-elevated);
    color:var(--text-primary);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    box-shadow:none;
}

.screen-back-btn:hover,
.screen-settings-btn:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    filter:none;
}

.screen-back-btn:active,
.screen-settings-btn:active {
    filter:none;
    transform:translateY(1px);
}

.screen-header-spacer {
    width:calc(46px * var(--ui-scale) * var(--density-scale));
    height:calc(46px * var(--ui-scale) * var(--density-scale));
    min-width:34px;
    min-height:34px;
}

.solo-scroll-area,
.stats-scroll,
.gb-list {
    padding:var(--space-4);
    gap:var(--space-3);
}

.level-card,
.category-header,
.stat-card,
.gb-entry,
.pending-card,
.team-row {
    background:var(--card-primary);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.level-card:hover,
.category-header:hover,
.gb-entry:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    filter:none;
}

.continue-card {
    background:var(--card-secondary);
    border-left:5px solid var(--text-continue);
}

.level-card-body {
    padding:var(--space-3) var(--space-4);
    gap:var(--space-3);
}

.level-name,
.category-name {
    color:var(--text-primary);
    font-size:calc(16px * var(--ui-scale));
}

.level-detail,
.category-count,
.stat-card-label,
.gb-grid,
.gb-sub-row,
.lobby-config,
.lobby-hint {
    color:var(--text-detail);
}

.level-preview-container {
    background:var(--bg-grid);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
}

.solo-variant-row,
.stats-tab-bar,
.stats-variant-bar,
.gb-filters-area {
    gap:var(--space-2);
}

.solo-variant-button,
.settings-tab,
.lb-tab,
.stats-tab,
.stats-variant-tab,
.browser-tab,
.browser-filter {
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    color:var(--text-secondary);
    min-height:calc(34px * var(--ui-scale) * var(--density-scale));
    padding:var(--space-1) var(--space-3);
    text-overflow:clip;
}

.solo-variant-button:hover,
.settings-tab:hover,
.lb-tab:hover,
.stats-tab:hover,
.stats-variant-tab:hover,
.browser-tab:hover,
.browser-filter:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    filter:none;
}

.solo-variant-button.active,
.settings-tab.active,
.lb-tab.active,
.stats-tab.active,
.stats-variant-tab.active,
.browser-tab.active,
.browser-filter.active {
    background:var(--accent-blue);
    border-color:var(--focus-ring);
    color:var(--text-on-accent);
    font-weight:800;
}

.lobby-scroll {
    flex:1;
    overflow-y:auto;
    width:min(760px, 100%);
    max-width:760px;
    margin:0 auto;
    padding:var(--space-4);
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}
.lobby-bottom-buttons {
    width:min(760px, 100%);
    max-width:760px;
    margin:0 auto;
    padding:var(--space-3) var(--space-4);
    border-top:1px solid var(--separator);
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

.lobby-header-row { margin-bottom:0; }
.lobby-title { color:var(--text-primary); font-size:var(--font-title); }
.lobby-gameid-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(42px, 1fr) auto minmax(42px, 1fr);
    align-items:center;
    min-height:38px;
    width:100%;
}
.lobby-gameid {
    grid-column:2;
    display:block;
    color:var(--accent-blue);
    text-align:center;
    margin:0;
    font-size:calc(20px * var(--ui-scale));
    font-weight:900;
}
.lobby-icon-btn {
    width:40px;
    min-width:40px;
    height:34px;
    min-height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--btn-border);
    border-radius:var(--radius-sm);
    background:var(--btn-default);
    color:var(--text-primary);
    font-size:calc(20px * var(--ui-scale));
    line-height:1;
    cursor:pointer;
    box-shadow:none;
    filter:none;
}
.lobby-icon-btn:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
}
.lobby-icon-btn:active { background:var(--btn-pressed); }
.lobby-share-btn.lobby-icon-btn {
    grid-column:3;
    justify-self:start;
    margin-left:var(--space-2);
}
.lobby-friends-open.lobby-icon-btn {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    margin:0;
}
#lobbyFriendsPanel { display:none !important; }
.lobby-share-row {
    justify-content:center;
    margin:0;
    min-height:18px;
}
.lobby-share-status {
    color:var(--text-secondary);
    font-size:var(--font-small);
}
.lobby-config,
.lobby-hint {
    text-align:center;
}
.lobby-hint[style*="bold"] {
    color:var(--accent-orange);
}
.player-list-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    margin-top:0;
}
.player-list-title {
    color:var(--accent-green);
    min-width:0;
    font-size:var(--font-title);
    font-weight:900;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.make-host-btn {
    flex:0 0 auto;
    min-width:118px;
    min-height:32px;
}
.promote-host-modal {
    width:min(420px, 92vw);
}
.promote-host-list {
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin:var(--space-3) 0;
}
.promote-host-option {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    min-height:54px;
    width:100%;
    padding:var(--space-2);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--bg-networkbar);
    color:var(--text-primary);
    text-align:left;
    cursor:pointer;
}
.promote-host-option.selected {
    border-width:2px;
    border-color:var(--accent-blue);
    background:var(--card-hover);
}
.promote-host-dot {
    width:14px;
    min-width:14px;
    height:14px;
    border-radius:50%;
    border:1px solid var(--panel-border);
}
.promote-host-option.selected .promote-host-dot {
    background:var(--accent-blue);
    border-color:var(--accent-blue);
}
.promote-host-avatar {
    width:34px;
    min-width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:var(--avatar-bg);
    border:1px solid var(--avatar-border);
    color:var(--avatar-text);
    font-weight:900;
}
.promote-host-copy {
    min-width:0;
    flex:1;
}
.promote-host-name,
.promote-host-meta {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.promote-host-name {
    color:var(--text-primary);
    font-size:calc(14px * var(--ui-scale));
    font-weight:900;
}
.promote-host-meta {
    color:var(--text-muted);
    font-size:var(--font-small);
}
@media (max-width: 420px) {
    .player-list-title-row {
        align-items:flex-start;
    }
    .make-host-btn {
        min-width:104px;
    }
}
#playerList,
#pendingList {
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}
.player-card {
    min-height:50px;
    border:0;
    border-radius:var(--radius-sm);
    padding:var(--space-2);
    margin:0;
    color:var(--text-on-accent);
    box-shadow:none;
    justify-content:flex-start;
}
.player-card .player-name {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:white;
    font-size:calc(16px * var(--ui-scale));
    font-weight:800;
}
.player-icon {
    color:white;
    font-size:calc(20px * var(--ui-scale));
    line-height:1;
}
.player-state {
    min-width:18px;
    color:var(--text-primary);
    font-size:calc(16px * var(--ui-scale));
    line-height:1;
    text-align:center;
}
.player-ready-indicator {
    width:24px;
    min-width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ready-inactive);
    border-radius:var(--radius-sm);
    background:var(--bg-networkbar);
    color:var(--text-muted);
    font-size:var(--font-small);
    line-height:1;
}
.player-ready-indicator.ready {
    background:var(--ready-active);
    border-color:var(--ready-active);
    color:white;
    font-weight:900;
}
.player-host-tag {
    color:var(--text-on-accent);
    font-size:var(--font-small);
    font-weight:900;
    letter-spacing:0;
}
.player-card .team-badge,
.pending-card .team-badge {
    min-width:28px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    font-size:11px;
}
.player-card .player-profile-btn,
.pending-card .player-profile-btn {
    width:30px;
    min-width:30px;
    height:30px;
    border-color:var(--panel-border);
    background:var(--bg-networkbar);
    color:var(--text-primary);
}
.player-card .kick-btn {
    width:40px !important;
    min-width:40px;
    height:30px;
    min-height:30px;
    padding:0;
    border-radius:var(--radius-sm);
}
.team-row {
    margin:0;
    padding:var(--space-2);
    background:var(--bg-networkbar);
    border:1px solid var(--team-color, var(--panel-border));
    border-radius:var(--radius-sm);
    box-shadow:none;
}
.team-row.drag-over {
    border-color:var(--accent-blue);
    border-width:2px;
}
.team-row-header {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin-bottom:var(--space-2);
}
.team-row-badge {
    width:34px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:var(--team-color, var(--accent-blue));
    color:white;
    font-size:var(--font-small);
    font-weight:900;
}
.team-row-title {
    flex:1;
    color:var(--text-primary);
    font-size:calc(15px * var(--ui-scale));
    font-weight:900;
}
.team-row .player-card {
    margin-top:0;
}
.team-row .player-card + .player-card {
    margin-top:var(--space-2);
}
.pending-card {
    min-height:60px;
    border:0;
    border-radius:var(--radius-sm);
    background:var(--bg-networkbar);
    box-shadow:none;
    margin:0;
    color:white;
}
.pending-card > span:first-child {
    color:white;
    font-size:calc(20px * var(--ui-scale));
}
.pending-card .player-name {
    color:white;
    font-size:calc(16px * var(--ui-scale));
    font-weight:800;
}
.pending-actions .approve-btn,
.pending-actions .reject-btn {
    width:100px !important;
    min-width:100px;
    min-height:32px;
}
.lobby-bottom-buttons .btn {
    min-height:60px;
    font-size:calc(20px * var(--ui-scale));
    font-weight:900;
}
.lobby-bottom-buttons #btnForceRestart {
    min-height:50px;
    background:var(--danger-default);
    border-color:color-mix(in srgb, var(--danger-default), white 16%);
}
.lobby-bottom-buttons #btnLobbyStart {
    background:var(--accent-green);
    border-color:color-mix(in srgb, var(--accent-green), white 16%);
    color:var(--text-on-accent);
}

#networkBar {
    background:var(--bg-networkbar);
    border-bottom:1px solid var(--panel-border);
    padding:var(--space-2) var(--space-3);
}
.netbar-role,
.netbar-players-label {
    color:var(--text-primary);
}
.netbar-gameid {
    color:var(--accent-blue);
}
.netbar-pending-label { color:var(--accent-orange); }

.net-lobby-btn,
.net-leave-btn,
.net-chat-btn,
.netbar-ready-btn,
.netbar-respawn-btn {
    border-radius:var(--radius-md);
    border:1px solid var(--panel-border);
    background:var(--panel-elevated);
    color:var(--text-primary);
    min-height:calc(30px * var(--ui-scale) * var(--density-scale));
    box-shadow:none;
    filter:none;
}
.net-lobby-btn:hover,
.net-chat-btn:hover,
.netbar-ready-btn:hover,
.netbar-respawn-btn:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    filter:none;
}
.net-leave-btn {
    background:var(--danger-default);
    border-color:color-mix(in srgb, var(--danger-default), white 16%);
    color:var(--text-on-accent);
}
.net-leave-btn:hover {
    background:var(--danger-pressed);
    border-color:color-mix(in srgb, var(--danger-default), white 24%);
}
.net-chat-btn {
    width:calc(30px * var(--ui-scale) * var(--density-scale));
    height:calc(30px * var(--ui-scale) * var(--density-scale));
    min-width:28px;
    min-height:28px;
}
.net-player-tag,
.net-pending-tag {
    border-radius:var(--radius-sm);
    border:1px solid color-mix(in srgb, var(--panel-border), transparent 35%);
}
.net-player-tag .npt-kick,
.net-pending-tag .npt-approve,
.net-pending-tag .npt-reject {
    border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--panel-bg), transparent 35%);
}
.btn-claim-victory {
    background:var(--accent-orange);
    color:var(--text-on-accent);
    border:1px solid color-mix(in srgb, var(--accent-orange), white 18%);
    border-radius:var(--radius-md);
}

#statusBar {
    background:var(--bg-statusbar);
    border-bottom:1px solid var(--panel-border);
    padding:var(--space-1) var(--space-3);
    min-height:calc(48px * var(--ui-scale) * var(--density-scale));
}

.status-display {
    background:var(--display-bg);
    color:var(--display-text);
    border:1px solid #1B2028;
    border-radius:var(--radius-sm);
    min-width:max-content;
    padding:var(--space-1) var(--space-2);
    letter-spacing:0;
    font-size:clamp(15px, calc(20px * var(--ui-scale)), 24px);
    line-height:1.1;
}
.status-mines { min-width:calc(84px * var(--ui-scale)); }
.status-timer { min-width:calc(108px * var(--ui-scale)); }
.status-btn {
    color:var(--text-primary);
    background:var(--panel-elevated);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    width:calc(36px * var(--ui-scale) * var(--density-scale));
    min-width:30px;
    height:calc(36px * var(--ui-scale) * var(--density-scale));
    min-height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.chat-panel {
    background:color-mix(in srgb, var(--panel-bg), transparent 6%);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-lg);
    padding:var(--space-3);
    gap:var(--space-2);
    box-shadow:0 18px 40px rgba(0,0,0,.34);
}
.chat-title { color:var(--text-primary); font-size:var(--font-control); }
.chat-separator { background:var(--separator); }
.chat-close-btn {
    color:var(--text-secondary);
    border-radius:var(--radius-sm);
}
.chat-close-btn:hover {
    color:var(--text-primary);
    background:var(--card-hover);
}
.chat-messages {
    gap:var(--space-1);
    scrollbar-color:var(--panel-border) transparent;
}
.chat-msg-row {
    background:color-mix(in srgb, var(--panel-elevated), transparent 26%);
    border:1px solid color-mix(in srgb, var(--panel-border), transparent 35%);
    border-radius:var(--radius-md);
    padding:var(--space-1) var(--space-2);
    gap:2px;
}
.chat-msg-row.chat-msg-server {
    background:color-mix(in srgb, var(--accent-orange), transparent 88%);
    border-color:color-mix(in srgb, var(--accent-orange), transparent 55%);
}
.chat-input {
    background:var(--input-bg);
    border-color:var(--input-border);
    color:var(--text-primary);
}
.chat-send-btn {
    background:var(--accent-blue);
    border:1px solid var(--focus-ring);
    border-radius:var(--radius-md);
    color:var(--text-on-accent);
    min-height:var(--control-height);
}

#gameModal { background:var(--modal-overlay); }
.game-modal-card {
    background:var(--bg-modal);
    color:var(--text-primary);
    border-color:var(--modal-border);
    border-width:2px;
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    width:min(calc(100vw - 32px), 420px);
    max-width:none;
    max-height:min(84vh, calc(100vh - 24px));
    gap:var(--space-2);
    box-shadow:0 22px 54px rgba(0,0,0,.36);
}
.game-modal-card.gm-community-stats { width:min(560px, calc(100vw - 32px)); max-width:none; }
.game-modal-card.gm-pvpteams-stats { width:min(760px, calc(100vw - 32px)); max-width:none; }
.game-modal-card.gm-duel-stats { width:min(430px, calc(100vw - 32px)); }
.gm-close-btn {
    background:transparent;
    color:var(--text-muted);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    width:calc(34px * var(--ui-scale));
    height:calc(34px * var(--ui-scale));
    font-size:calc(16px * var(--ui-scale));
}
.gm-close-btn:hover {
    background:var(--card-hover);
    border-color:var(--loss-red-light, var(--loss-red));
    color:var(--loss-red-light, var(--loss-red));
}
.gm-close-btn:active {
    background:var(--card-pressed);
}
.gm-settings-btn {
    background:transparent;
    color:var(--text-primary);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    width:calc(34px * var(--ui-scale));
    height:calc(34px * var(--ui-scale));
    font-size:calc(16px * var(--ui-scale));
}
.gm-settings-btn:hover {
    background:var(--card-hover);
    border-color:var(--focus-ring);
}
.gm-settings-btn:active {
    background:var(--card-pressed);
}
.gm-title {
    color:var(--pause-yellow);
    font-size:calc(26px * var(--ui-scale));
    letter-spacing:0;
    margin-right:calc(124px * var(--ui-scale));
}
.gm-pause-category,
.gm-pause-specs,
.gm-time,
.gm-alive { color:var(--text-secondary); }
.gm-infinite-scores,
.duel-col .duel-stat {
    color:var(--text-secondary);
}
.duel-score { color:var(--duel-score-text); }
.duel-score-colon { color:var(--duel-score-colon); }
.duel-divider { background:var(--duel-divider); }
.duel-reason-box,
.team-stats-scroll {
    background:var(--reason-box-bg);
    border:1px solid var(--reason-box-border);
    border-radius:var(--radius-sm);
}
.duel-reason-box { color:var(--text-secondary); }
.team-stats-total,
.cs-td-name,
.cs-td-num {
    color:var(--text-secondary);
}
.cs-th {
    color:var(--text-muted);
    border-bottom-color:var(--separator);
}
.cs-th:hover,
.cs-th.cs-sorted,
.cs-row-own .cs-td-name {
    color:var(--accent-blue);
}
.cs-table td {
    border-bottom-color:color-mix(in srgb, var(--separator), transparent 45%);
}
.gm-bottom-buttons { margin-top:var(--space-3); gap:var(--space-2); }
.gm-btn,
.gm-action-row,
.gm-primary-btn { width:min(220px, 100%); }

#freezeOverlay {
    width:clamp(118px, 16vw, 158px);
    height:clamp(118px, 16vw, 158px);
    background:var(--bg-modal);
    border:2px solid var(--focus-ring);
    border-radius:18px;
    box-shadow:0 16px 34px rgba(0,0,0,.25);
    overflow:hidden;
}
#freezeCanvas {
    width:100%;
    height:100%;
}
#freezeText {
    color:var(--text-primary);
    font-size:calc(30px * var(--ui-scale));
    text-shadow:none;
}

.ranked-intro-overlay {
    position:absolute;
    inset:0;
    z-index:20000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-4);
    background:var(--modal-overlay);
    opacity:1;
    transition:opacity .48s ease;
    pointer-events:all;
}
.ranked-intro-overlay.fading { opacity:0; }
.ranked-intro-card {
    width:min(560px, 100%);
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}
.ranked-intro-title {
    color:var(--text-primary);
    font-size:calc(30px * var(--ui-scale));
    font-weight:900;
    text-align:center;
}
.ranked-intro-players {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    align-items:center;
    gap:var(--space-3);
}
.ranked-intro-player {
    min-height:118px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-1);
    border:2px solid var(--player-color);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    padding:var(--space-3);
    min-width:0;
}
.ranked-intro-name {
    color:var(--player-color);
    font-size:var(--font-body);
    font-weight:900;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-intro-rating {
    color:var(--text-primary);
    font-size:calc(28px * var(--ui-scale));
    font-weight:900;
}
.ranked-intro-label {
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:700;
}
.ranked-intro-vs {
    color:var(--text-secondary);
    font-size:var(--font-body);
    font-weight:900;
}
.ranked-intro-elo {
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--card-primary);
    padding:var(--space-3);
}
.ranked-intro-elo-row {
    display:flex;
    justify-content:space-between;
    gap:var(--space-3);
    color:var(--text-primary);
    font-size:var(--font-small);
    font-weight:900;
}
.ranked-intro-elo-row.win span:first-child { color:var(--win-green); }
.ranked-intro-elo-row.draw span:first-child { color:var(--accent-orange); }
.ranked-intro-elo-row.loss span:first-child { color:var(--loss-red); }
.ranked-intro-countdown {
    color:var(--text-secondary);
    text-align:center;
    font-size:var(--font-body);
    font-weight:900;
}

.modal-backdrop {
    background:var(--modal-overlay);
    padding:var(--space-4);
}
#leaveConfirmDialog,
#lobbyLeaveConfirmDialog,
#appSettingsDialog {
    z-index:2400;
}
.modal {
    background:var(--bg-modal);
    color:var(--text-primary);
    border:1px solid var(--modal-border);
    border-radius:var(--radius-lg);
    padding:0;
    gap:0;
    width:auto;
    min-width:min(calc(320px * var(--ui-scale)), calc(100vw - 32px));
    max-width:min(440px, 92vw);
    max-height:min(88vh, calc(100vh - 24px));
    overflow:hidden auto;
    box-shadow:0 20px 54px rgba(0,0,0,.36);
}
.modal h3 {
    color:var(--text-primary);
    font-size:calc(20px * var(--ui-scale));
    text-align:left;
    background:var(--panel-elevated);
    border-bottom:1px solid var(--separator);
    padding:var(--space-4) var(--space-5);
    margin:0;
}
.modal.modal-wide { max-width:min(600px, 94vw); }
.modal.modal-tall { max-height:min(88vh, calc(100vh - 24px)); }
.modal.welcome-name-modal { max-width:min(380px, 92vw); }
.ranked-screen {
    background:
        linear-gradient(165deg, var(--bg-menu-top), var(--bg-menu-bottom)),
        var(--bg-menu);
    padding: clamp(14px, 3.5vw, 24px);
    overflow:hidden;
}
.ranked-page-content {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    min-width:0;
}
.ranked-page-title {
    flex:1;
    color:var(--text-primary);
    text-align:center;
    font-size:var(--font-title);
    line-height:1.2;
    margin:0;
}
.ranked-page-grid {
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(520px, 1fr) minmax(360px, .78fr);
    gap:var(--space-3);
    overflow:hidden;
}
.ranked-page-section {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    overflow:hidden;
}
.ranked-page-section .ranked-history-title {
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    font-size:var(--font-body);
}
.ranked-page-section .ranked-history-title span {
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:700;
}
.ranked-overview {
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
}
.ranked-overview-main {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.ranked-status {
    color:var(--text-secondary);
    font-size:var(--font-body);
    font-weight:800;
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-status[data-state="searching"] { color:var(--accent-purple); }
.ranked-status[data-state="found"] { color:var(--accent-green); }
.ranked-status[data-state="cancelled"] { color:var(--accent-orange); }
.ranked-status-meta {
    color:var(--text-muted);
    font-size:var(--font-small);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-format-pill {
    flex:0 0 auto;
    min-width:54px;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--accent-purple);
    border-radius:var(--radius-md);
    color:var(--accent-purple);
    background:color-mix(in srgb, var(--accent-purple), transparent 88%);
    font-size:var(--font-small);
    font-weight:900;
}
.ranked-format-stack {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    align-items:stretch;
}
.ranked-active-pill {
    min-width:70px;
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--card-primary);
    color:var(--text-secondary);
    font-size:var(--font-small);
    font-weight:900;
    white-space:nowrap;
}
.btn-ranked-cancel {
    background:var(--accent-orange);
    color:var(--text-on-accent);
    border-color:color-mix(in srgb, var(--accent-orange), white 15%);
}
.btn-ranked-cancel:hover {
    background:color-mix(in srgb, var(--accent-orange), white 8%);
}
.ranked-category-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
    margin:var(--space-4);
}
.ranked-screen .ranked-category-grid {
    flex:1;
    min-height:0;
    margin:0;
    overflow:auto;
}
.ranked-category-btn {
    --category-accent:var(--accent-purple);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-2);
    min-height:154px;
    padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 4px);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    color:var(--text-primary);
    text-align:left;
    cursor:pointer;
    overflow:hidden;
    transition:background .12s, border-color .12s, opacity .12s, transform .08s;
}
.ranked-category-btn::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:var(--category-accent);
}
.ranked-category-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
}
.ranked-category-badges {
    flex:0 0 auto;
    display:flex;
    gap:var(--space-1);
    align-items:center;
}
.ranked-category-btn:hover,
.ranked-category-btn:focus-visible {
    background:var(--card-hover);
    border-color:var(--focus-ring);
    outline:none;
}
.ranked-category-btn:active { transform:translateY(1px); }
.ranked-category-btn:disabled {
    opacity:.62;
    cursor:not-allowed;
    transform:none;
}
.ranked-category-btn.searching {
    opacity:1;
    border-color:var(--category-accent);
    background:color-mix(in srgb, var(--category-accent), var(--card-primary) 84%);
}
.ranked-category-title {
    min-width:0;
    font-size:calc(17px * var(--ui-scale));
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-category-tag {
    flex:0 0 auto;
    min-width:34px;
    min-height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--category-accent);
    border-radius:var(--radius-md);
    color:var(--category-accent);
    background:var(--card-primary);
    font-size:var(--font-small);
    font-weight:900;
}
.ranked-category-queue {
    border-color:var(--panel-border);
    color:var(--text-secondary);
}
.ranked-category-queue.ranked-category-queue-active {
    border-color:var(--accent-green);
    border-width:2px;
}
.ranked-category-empty {
    grid-column:1 / -1;
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:700;
    text-align:center;
}
.ranked-category-detail {
    color:var(--text-muted);
    font-size:var(--font-small);
}
.ranked-category-rating {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--space-3);
    margin-top:var(--space-1);
}
.ranked-category-rating span {
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:700;
}
.ranked-category-rating strong {
    color:var(--text-primary);
    font-size:calc(30px * var(--ui-scale));
    line-height:1;
}
.ranked-category-stats {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-2);
    margin-top:auto;
    color:var(--text-secondary);
    font-size:var(--font-small);
}
.ranked-category-stats span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-category-stats strong {
    color:var(--text-primary);
}
.ranked-history-title {
    margin:0 var(--space-4) var(--space-1);
    color:var(--text-primary);
    font-weight:800;
    font-size:var(--font-small);
}
.ranked-history-list {
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    margin:0 var(--space-4) var(--space-3);
    max-height:300px;
    overflow:auto;
}
.ranked-screen .ranked-history-list {
    flex:1;
    min-height:0;
    max-height:none;
    margin:0;
    overflow:auto;
}
.ranked-history-row,
.ranked-history-empty {
    display:flex;
    align-items:flex-start;
    gap:var(--space-2);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--panel-bg);
    padding:var(--space-2);
    color:var(--text-secondary);
    font-size:var(--font-small);
    overflow-wrap:anywhere;
}
.ranked-history-empty {
    justify-content:center;
    min-height:44px;
}
.ranked-history-badge {
    flex:0 0 46px;
    min-height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    color:var(--text-on-accent);
    font-weight:900;
}
.ranked-history-row.win .ranked-history-badge { background:var(--win-green); }
.ranked-history-row.draw .ranked-history-badge { background:var(--accent-orange); }
.ranked-history-row.loss .ranked-history-badge { background:var(--loss-red); }
.ranked-history-main {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:1px;
}
.ranked-history-title-line {
    color:var(--text-primary);
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-history-subline {
    color:var(--text-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-history-details {
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-top:4px;
    color:var(--text-muted);
    font-size:11px;
}
.ranked-history-details span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-history-rating {
    flex:0 0 auto;
    color:var(--text-primary);
    font-weight:900;
    white-space:nowrap;
}
.ranked-history-row.win .ranked-history-rating { color:var(--win-green); }
.ranked-history-row.draw .ranked-history-rating { color:var(--accent-orange); }
.ranked-history-row.loss .ranked-history-rating { color:var(--loss-red); }

/* RankedDuelPage.qml parity overrides */
.ranked-header-row { flex:0 0 auto; }
.ranked-page-title {
    flex:initial;
    text-align:left;
    font-size:calc(24px * var(--ui-scale));
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-scroll {
    flex:1;
    min-height:0;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}
.ranked-page-grid {
    flex:initial;
    min-height:initial;
    grid-template-columns:minmax(560px, 1fr) minmax(360px, .64fr);
    align-items:start;
    overflow:visible;
}
.ranked-page-section {
    min-height:initial;
    gap:var(--space-1);
    overflow:visible;
}
.ranked-section-title {
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    color:var(--text-primary);
    font-size:calc(15px * var(--ui-scale));
    font-weight:800;
}
.ranked-history-section .ranked-section-title { font-size:calc(17px * var(--ui-scale)); }
.ranked-section-title span:last-child {
    color:var(--text-muted);
    font-size:var(--font-small);
    font-weight:800;
}
.ranked-status-panel {
    position:relative;
    margin:0;
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:calc(9px * var(--ui-scale)) var(--space-2) calc(9px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    background:var(--panel-bg);
    overflow:hidden;
}
.ranked-status-panel[data-state="searching"],
.ranked-status-panel[data-state="found"] { border-width:2px; }
.ranked-status-panel[data-state="searching"] { border-color:var(--accent-purple); }
.ranked-status-panel[data-state="found"] { border-color:var(--accent-green); }
.ranked-status-panel[data-state="cancelled"] { border-color:var(--accent-blue); }
.ranked-status-strip {
    position:absolute;
    inset:0 auto 0 0;
    width:5px;
    background:var(--accent-blue);
}
.ranked-status-panel[data-state="searching"] .ranked-status-strip { background:var(--accent-purple); }
.ranked-status-panel[data-state="found"] .ranked-status-strip { background:var(--accent-green); }
.ranked-status-panel[data-state="cancelled"] .ranked-status-strip { background:var(--accent-blue); }
.ranked-status-dot {
    flex:0 0 12px;
    width:12px;
    height:12px;
    border-radius:999px;
    background:var(--accent-blue);
}
.ranked-status-panel[data-state="searching"] .ranked-status-dot {
    background:var(--accent-purple);
    animation:ranked-search-pulse 1.04s ease-in-out infinite alternate;
}
.ranked-status-panel[data-state="found"] .ranked-status-dot { background:var(--accent-green); }
.ranked-status-copy {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
}
@keyframes ranked-search-pulse {
    from { opacity:.35; }
    to { opacity:1; }
}
.ranked-status { font-size:calc(16px * var(--ui-scale)); }
.ranked-status[data-state="cancelled"] { color:var(--accent-blue); }
.ranked-status-meta { font-size:calc(11px * var(--ui-scale)); }
.ranked-active-pill {
    flex:0 0 auto;
    width:calc(174px * var(--ui-scale));
    min-width:132px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ranked-status-cancel {
    flex:0 0 auto;
    width:auto;
    min-width:72px;
    min-height:30px;
    padding:0 var(--space-3);
    background:var(--accent-orange);
    color:var(--text-on-accent);
    border-color:color-mix(in srgb, var(--accent-orange), white 15%);
}
.ranked-category-grid {
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 184px), 1fr));
    gap:var(--space-2);
    margin:0;
}
.ranked-screen .ranked-category-grid {
    flex:initial;
    min-height:initial;
    overflow:visible;
}
.ranked-category-btn {
    gap:calc(5px * var(--ui-scale));
    min-height:112px;
    padding:calc(8px * var(--ui-scale));
    background:var(--card-primary);
}
.ranked-category-btn::before { content:none; }
.ranked-category-top { gap:calc(5px * var(--ui-scale)); }
.ranked-category-btn.searching {
    border-width:2px;
    background:var(--card-active);
}
.ranked-category-title { font-size:calc(14px * var(--ui-scale)); }
.ranked-category-tag {
    min-width:26px;
    min-height:20px;
    border-color:var(--panel-border);
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    background:var(--panel-bg);
    font-size:calc(10px * var(--ui-scale));
}
.ranked-category-empty { min-height:58px; }
.ranked-category-detail {
    font-size:calc(10px * var(--ui-scale));
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-category-rating {
    gap:var(--space-2);
    margin-top:auto;
}
.ranked-category-rating-block {
    flex:0 0 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
    align-self:center;
}
.ranked-category-rating span { font-size:calc(10px * var(--ui-scale)); }
.ranked-category-rating strong { font-size:calc(22px * var(--ui-scale)); }
.ranked-category-stats {
    min-width:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:2px;
    font-size:calc(10px * var(--ui-scale));
}
.ranked-category-stats span,
.ranked-category-record {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-category-record strong:first-child { color:var(--win-green); }
.ranked-category-record strong:last-child { color:var(--loss-red); }
.ranked-category-record {
    display:flex;
    justify-content:flex-end;
    gap:0;
    color:var(--text-primary);
    font-size:calc(13px * var(--ui-scale));
    font-weight:800;
}
.ranked-category-record span,
.ranked-category-stats strong {
    font-size:calc(13px * var(--ui-scale));
}
.ranked-category-action {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    border:1px solid var(--panel-border);
    border-radius:var(--radius-sm);
    background:var(--panel-elevated);
    color:var(--text-primary);
    font-size:calc(10px * var(--ui-scale));
    font-weight:900;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ranked-category-btn.searching .ranked-category-action {
    background:var(--category-accent);
    border-color:var(--category-accent);
    color:var(--text-on-accent);
}
.ranked-history-list,
.ranked-screen .ranked-history-list {
    gap:var(--space-2);
    margin:0;
    max-height:none;
    overflow:visible;
}
.ranked-history-row,
.ranked-history-empty {
    background:var(--card-primary);
    padding:calc(10px * var(--ui-scale));
}
.ranked-history-row {
    cursor:pointer;
    transition:background .12s, border-color .12s, border-width .12s;
}
.ranked-history-row:hover { background:var(--card-hover); }
.ranked-history-row.expanded { border-width:2px; }
.ranked-history-row.win.expanded { border-color:var(--win-green); }
.ranked-history-row.draw.expanded { border-color:var(--accent-orange); }
.ranked-history-row.loss.expanded { border-color:var(--loss-red); }
.ranked-history-empty {
    min-height:56px;
    align-items:center;
}
.ranked-history-badge {
    flex-basis:54px;
    min-height:28px;
}
.ranked-history-reason {
    color:var(--text-secondary);
    font-weight:800;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    white-space:normal;
    overflow:hidden;
}
.ranked-history-row.expanded .ranked-history-reason { -webkit-line-clamp:3; }
.ranked-history-details { display:none; gap:4px; }
.ranked-history-row.expanded .ranked-history-details { display:flex; }
.ranked-page-bottom-spacer { flex:0 0 var(--space-2); }
.ranked-result-score {
    margin:var(--space-4) var(--space-4) var(--space-2);
    color:var(--text-primary);
    font-size:calc(34px * var(--ui-scale));
    font-weight:900;
    text-align:center;
}
.modal-desc,
.modal label {
    color:var(--text-secondary);
    text-align:left;
    font-size:var(--font-small);
}
.modal > .form-group,
.modal > .toggle-row,
.modal > .settings-section-title,
.modal > .settings-warning,
.modal > .modal-desc,
.modal > p,
.modal > .connection-indicator,
.modal > .connection-indicator-embed {
    margin-left:var(--space-4);
    margin-right:var(--space-4);
    margin-top:var(--space-3);
}
.modal > .form-group:first-of-type,
.modal > .toggle-row:first-of-type,
.modal > .settings-section-title:first-of-type,
.modal > .settings-warning:first-of-type,
.modal > .modal-desc:first-of-type,
.modal > p:first-of-type {
    margin-top:var(--space-4);
}
.modal-actions {
    background:color-mix(in srgb, var(--panel-bg), transparent 16%);
    border-top:1px solid var(--separator);
    padding:var(--space-3) var(--space-4);
    margin-top:var(--space-3);
}
.modal > .modal-actions:last-child { margin-top:var(--space-4); }
#gameSettingsDialog.solo-mode .modal {
    padding:0;
    gap:0;
    max-height:min(88vh, calc(100vh - 24px));
}
.settings-tabs {
    justify-content:center;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-4) 0;
}
.settings-tab-content {
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4) 0;
}
#appSettingsDialog .modal { width:min(410px, 92vw); max-width:410px; max-height:90vh; }
.settings-section-title {
    color:var(--text-primary);
    font-size:var(--font-control);
    margin-top:var(--space-2);
    margin-bottom:0;
}
.settings-desc-text { color:var(--text-muted); }
.settings-warning {
    color:var(--accent-orange);
    background:color-mix(in srgb, var(--accent-orange), transparent 86%);
    border:1px solid color-mix(in srgb, var(--accent-orange), transparent 50%);
}
.lb-page-tabs-row {
    background:var(--panel-bg);
    border-color:var(--panel-border);
    border-radius:var(--radius-md);
    padding:var(--space-1);
}
.lb-tabs {
    flex-wrap:wrap;
    min-width:0;
}
.lb-page-tabs-row .lb-tab,
.lb-level-tabs .lb-tab {
    flex:0 0 auto;
    min-width:max-content;
    min-height:calc(32px * var(--ui-scale) * var(--density-scale));
    line-height:1.12;
    padding:var(--space-1) var(--space-2);
    white-space:normal;
}
.lb-level-tabs .lb-tab {
    min-width:calc(70px * var(--ui-scale));
    max-width:calc(116px * var(--ui-scale));
    overflow:visible;
}
.lb-level-tabs .lb-tab span {
    display:block;
    color:var(--text-muted);
    font-size:calc(9px * var(--ui-scale));
}
.lb-level-name {
    color:var(--text-primary) !important;
    font-size:calc(11px * var(--ui-scale)) !important;
    font-weight:800;
    line-height:1.05;
}
.lb-level-specs {
    white-space:normal;
    line-height:1.05;
}
.lb-selection-row,
.lb-page-selection-row {
    background:var(--leaderboard-panel-bg);
    border-color:var(--leaderboard-row-border);
    border-radius:var(--radius-md);
    padding:var(--space-2) var(--space-3);
}
.lb-page-selection-row .btn {
    flex:0 0 auto;
    white-space:nowrap;
}
.lb-page-list {
    background:var(--leaderboard-panel-bg);
    border-color:var(--leaderboard-row-border);
    border-radius:var(--radius-md);
    padding:var(--space-1);
}
.lb-entry {
    min-height:calc(36px * var(--ui-scale) * var(--density-scale));
    padding:var(--space-1) var(--space-2);
    gap:var(--space-2);
    background:var(--leaderboard-row-bg);
    border-color:var(--leaderboard-row-border);
    border-radius:var(--radius-md);
    color:var(--leaderboard-row-text);
}
.lb-entry.lb-own {
    background:linear-gradient(90deg, rgba(105,214,255,.18), var(--leaderboard-time-bg) 68%);
    border-color:var(--leaderboard-row-accent);
    border-width:2px;
}
.lb-rank {
    width:calc(38px * var(--ui-scale));
    color:var(--leaderboard-row-accent);
}
.lb-name {
    min-width:0;
    color:var(--leaderboard-row-text);
}
.lb-time {
    background:var(--leaderboard-time-bg);
    color:var(--leaderboard-row-accent);
    border-radius:var(--radius-sm);
    padding:2px 7px;
    font-weight:bold;
}
.lb-own-badge {
    background:var(--leaderboard-row-accent);
    color:var(--leaderboard-time-bg);
    border-radius:var(--radius-sm);
    padding:2px 7px;
    font-size:10px;
    font-weight:bold;
}
.lb-date { color:var(--leaderboard-row-muted); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:980px) {
    .ranked-page-grid {
        grid-template-columns:1fr;
        overflow:auto;
    }
    .ranked-page-section { overflow:visible; }
    .ranked-screen .ranked-category-grid,
    .ranked-screen .ranked-history-list {
        overflow:visible;
    }
}

@media (max-width:500px) {
    #mainMenu h1 { font-size:22px; }
    .btn { font-size:14px; padding:10px 16px; }
    .modal { padding:18px; }
    .ranked-screen { padding:12px; }
    .ranked-page-grid { grid-template-columns:1fr; overflow:auto; }
    .ranked-page-section { overflow:visible; }
    .ranked-screen .ranked-category-grid,
    .ranked-screen .ranked-history-list { overflow:visible; }
    .ranked-status-panel { flex-wrap:wrap; }
    .ranked-status-copy { flex-basis:calc(100% - 24px); }
    .ranked-active-pill { width:150px; }
    .ranked-category-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ranked-intro-players { grid-template-columns:1fr; }
    .ranked-intro-vs { text-align:center; }
    .ranked-history-row { align-items:flex-start; }
    .ranked-history-rating { align-self:center; }
    .game-modal-card { padding:16px 14px 14px; }
    .status-display { font-size:15px; min-width:65px; }
    .level-preview-container { width:100px; height:100px; }
}

@media (max-width:330px) {
    .ranked-category-grid { grid-template-columns:1fr; }
}

/* ---- Player country flag -------------------------------------------------
   Sits immediately after a player's name. Sized in em so it tracks whatever
   text it trails (lobby rows, leaderboards, chat, the ranked banner) without
   each call site restating a size. Global/anonymous players render no element
   at all, so there is no empty-state rule here. */
.player-flag {
    display:inline-block;
    height:1em;
    width:calc(1em * 4 / 3);
    min-height:14px;
    min-width:19px;
    margin-left:0.4em;
    vertical-align:-0.06em;
    border-radius:1px;
    object-fit:cover;
    flex:none;
}

/* The country picker reuses the app's list-row look; the flag there is a
   leading icon at a fixed readable size rather than a name suffix. */
.country-picker-list { max-height:min(52vh, 420px); overflow-y:auto; }
.country-row {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:8px 10px; border:none; border-radius:8px;
    background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.country-row:hover { background:rgba(127,127,127,0.16); }
.country-row.selected { background:rgba(127,127,127,0.28); font-weight:bold; }
.country-row .player-flag { height:16px; width:22px; margin-left:0; }
.country-row-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-row-sub { font-size:12px; opacity:0.7; }
.country-picker-divider { height:1px; margin:6px 2px; background:rgba(127,127,127,0.3); }