/* Menus over the live 3D featured-room view: main, play, loadout, settings,
   credits, controls, in-match menu and dialogs. */

.ds-menu {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: auto;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ds-menu-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 8, 7, 0.94) 0%, rgba(6, 8, 7, 0.82) 30%, rgba(6, 8, 7, 0.22) 62%, rgba(6, 8, 7, 0.5) 100%),
        linear-gradient(0deg, rgba(6, 8, 7, 0.7) 0%, rgba(6, 8, 7, 0) 30%);
}

.ds-menu[data-screen]:not([data-screen='main']) .ds-menu-shade {
    background: linear-gradient(180deg, rgba(6, 8, 7, 0.86), rgba(6, 8, 7, 0.93));
}

/* LOADOUT: the renderer draws the live operator on the canvas under this layer, inside
   the preview frame's rect (ui/loadout.js sets --hole-*); the shade leaves that rect
   clear so the preview is not dimmed to a silhouette. */
.ds-menu[data-screen='loadout'][data-preview] .ds-menu-shade {
    -webkit-mask:
        linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
        linear-gradient(#000 0 0) var(--hole-x, 0) var(--hole-y, 0) / var(--hole-w, 0) var(--hole-h, 0) no-repeat;
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
        linear-gradient(#000 0 0) var(--hole-x, 0) var(--hole-y, 0) / var(--hole-w, 0) var(--hole-h, 0) no-repeat;
    mask-composite: exclude;
}

.ds-menu-top {
    position: absolute;
    left: calc(56 * var(--u));
    right: calc(40 * var(--u));
    top: calc(26 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.ds-menu-mark {
    display: flex;
    align-items: baseline;
    gap: calc(10 * var(--u));
    opacity: 0;
    transition: opacity 0.2s;
}

.ds-menu[data-screen]:not([data-screen='main']) .ds-menu-mark { opacity: 1; }
.ds-mark-mk { font-size: calc(13 * var(--t)); letter-spacing: 0.36em; color: var(--tan-2); }
.ds-mark-name { font-family: var(--font-title); font-size: calc(22 * var(--t)); letter-spacing: 0.06em; }

.ds-menu-topright {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--u));
}

.ds-conn {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    font-size: calc(13 * var(--t));
    letter-spacing: 0.2em;
    color: var(--muted);
}

.ds-conn-dot {
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border-radius: 50%;
    background: var(--dim);
}

.ds-conn-dot[data-state='online'],
.ds-conn-dot[data-state='connected'] { background: var(--mk); box-shadow: 0 0 calc(8 * var(--u)) var(--mk); }
.ds-conn-dot[data-state='connecting'],
.ds-conn-dot[data-state='reconnecting'] { background: var(--warn); animation: ds-pulse 1s infinite; }
.ds-conn-dot[data-state='error'] { background: var(--enemy); }

.ds-profile-chip {
    min-width: calc(250 * var(--u));
    padding: calc(8 * var(--u)) calc(14 * var(--u));
    background: rgba(12, 15, 13, 0.78);
    border: 1px solid var(--line);
    border-left: calc(3 * var(--u)) solid var(--tan);
}

.ds-pc-name { font-size: calc(19 * var(--t)); font-weight: 700; letter-spacing: 0.06em; }
.ds-pc-row { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(3 * var(--u)); }
.ds-pc-level { font-size: calc(13 * var(--t)); font-weight: 700; color: var(--tan-2); letter-spacing: 0.12em; white-space: nowrap; }
.ds-pc-bar { position: relative; flex: 1; height: calc(4 * var(--u)); background: rgba(236, 232, 220, 0.14); }
.ds-pc-fill { position: absolute; inset: 0 auto 0 0; background: var(--mk-2); }
.ds-pc-xp { font-size: calc(11 * var(--t)); color: var(--muted); letter-spacing: 0.08em; white-space: nowrap; }

.ds-screens {
    position: absolute;
    inset: 0;
}

.ds-screen {
    position: absolute;
    inset: calc(86 * var(--u)) calc(56 * var(--u)) calc(34 * var(--u));
    display: flex;
    flex-direction: column;
    min-height: 0;
    animation: ds-screen-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Screens take focus when they open (menus.js): no ring around a whole screen. */
.ds-ui .ds-screen:focus,
.ds-ui .ds-screen:focus-visible { outline: none; }

@keyframes ds-screen-in {
    from { opacity: 0; transform: translateX(calc(-14 * var(--u))); }
}

.ds-screen-head { margin-bottom: calc(18 * var(--u)); }

.ds-screen-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: calc(54 * var(--t));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}

.ds-screen-sub {
    margin: calc(6 * var(--u)) 0 0;
    max-width: calc(760 * var(--u));
    color: var(--ink-2);
    font-size: calc(17 * var(--t));
    font-weight: 500;
    letter-spacing: 0.02em;
}

.ds-screen-foot {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    margin-top: auto;
    padding-top: calc(16 * var(--u));
}

/* ------------------------------------------------------------------ main */

.ds-main {
    inset: 0;
    display: grid;
    grid-template-columns: minmax(calc(420 * var(--u)), calc(560 * var(--u))) 1fr;
    /* One row exactly the screen's height: the columns fit it, never grow past it. */
    grid-template-rows: minmax(0, 1fr);
    padding: calc(90 * var(--u)) calc(56 * var(--u)) calc(44 * var(--u));
    gap: calc(40 * var(--u));
}

/* The left column fits the screen at every HUD scale and text size (menus.js
   fitMain steps data-fit up while it overflows): the brand and the DEPLOY box keep
   their size, the nav between them gives way, and scrolls in place only past the
   last fit level. The DEPLOY box always stays on screen. */
.ds-main-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ds-brand { flex: none; }
.ds-main-left > .ds-nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 204, 147, 0.4) transparent;
}
.ds-main-left > .ds-deploy { flex: none; padding-top: calc(16 * var(--u)); }
.ds-main[data-fit='1'] .ds-nav-sub,
.ds-main[data-fit='2'] .ds-nav-sub,
.ds-main[data-fit='1'] .ds-brand-tag,
.ds-main[data-fit='2'] .ds-brand-tag,
.ds-main[data-fit='2'] .ds-brand-kicker { display: none; }
.ds-main[data-fit='1'] .ds-nav,
.ds-main[data-fit='2'] .ds-nav { margin-top: calc(16 * var(--u)); }
/* The wordmark is a logo, not body text: it follows the HUD scale and the screen
   height, not the text size. */
.ds-main[data-fit='2'] .ds-brand-title { font-size: min(calc(64 * var(--u)), 9vh); }
.ds-main[data-fit='2'] .ds-nav-item { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }

.ds-brand-kicker {
    font-size: calc(15 * var(--t));
    letter-spacing: 0.5em;
    color: var(--tan-2);
}

.ds-brand-title {
    margin: calc(4 * var(--u)) 0 0;
    font-family: var(--font-title);
    font-size: min(calc(96 * var(--u)), 13vh);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-shadow: 0 calc(4 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.6);
}

.ds-brand-tag {
    margin-top: calc(10 * var(--u));
    font-size: calc(18 * var(--t));
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0.04em;
}

.ds-nav {
    display: flex;
    flex-direction: column;
    margin-top: calc(36 * var(--u));
}

.ds-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* A set min-height replaces the flex item's content minimum: never shrink (the nav
       scrolls instead of squashing its items). */
    flex-shrink: 0;
    min-height: var(--tap);
    padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)) calc(20 * var(--u));
    border: 0;
    border-left: calc(3 * var(--u)) solid transparent;
    background: transparent;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, padding 0.15s;
}

.ds-nav-item:hover,
.ds-nav-item:focus-visible {
    background: linear-gradient(90deg, rgba(201, 168, 106, 0.2), rgba(201, 168, 106, 0));
    border-left-color: var(--tan-2);
    padding-left: calc(26 * var(--u));
    outline: none;
}

.ds-nav-label {
    font-size: calc(34 * var(--t));
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
}

.ds-nav-sub {
    margin-top: calc(3 * var(--u));
    font-size: calc(14 * var(--t));
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.06em;
}

/* LEAVE MATCH stands apart from the other items (it asks before leaving). */
.ds-nav-gap { flex: none; height: calc(18 * var(--u)); }
.ds-nav-item-leave .ds-nav-label { color: #ffb09f; }
.ds-nav-item-leave:hover,
.ds-nav-item-leave:focus-visible {
    background: linear-gradient(90deg, rgba(255, 74, 61, 0.2), rgba(255, 74, 61, 0));
    border-left-color: var(--enemy);
}

.ds-deploy {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    margin-top: auto;
    max-width: calc(470 * var(--u));
}

.ds-field-label {
    font-size: calc(13 * var(--t));
    letter-spacing: 0.26em;
    color: var(--muted);
}

.ds-input {
    height: max(var(--tap), calc(48 * var(--u)));
    padding: 0 calc(14 * var(--u));
    border: 1px solid var(--line-2);
    border-bottom: calc(2 * var(--u)) solid var(--tan);
    background: rgba(14, 18, 15, 0.85);
    color: var(--ink);
    font-size: calc(21 * var(--t));
    font-weight: 600;
    letter-spacing: 0.04em;
    user-select: text;
    -webkit-user-select: text;
}

.ds-input:focus { outline: none; border-color: var(--tan-2); }
.ds-ui .ds-input:focus-visible { outline: none; }
.ds-input::placeholder { color: var(--dim); }
.ds-input-small { height: max(var(--tap), calc(40 * var(--u))); width: calc(150 * var(--u)); font-size: calc(17 * var(--t)); }

.ds-btn-deploy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: max(var(--tap), calc(76 * var(--u)));
    padding: calc(10 * var(--u)) calc(24 * var(--u));
    border: 0;
    background: linear-gradient(100deg, var(--mk) 0%, #16a34a 100%);
    color: #06140b;
    clip-path: polygon(0 0, calc(100% - calc(18 * var(--u))) 0, 100% 50%, calc(100% - calc(18 * var(--u))) 100%, 0 100%);
    text-shadow: none;
}

.ds-btn-deploy:hover:not(:disabled) {
    background: linear-gradient(100deg, var(--mk-2) 0%, var(--mk) 100%);
}

.ds-btn-deploy.is-busy { animation: ds-pulse 1s ease-in-out infinite; }
.ds-deploy-label { font-size: calc(34 * var(--t)); font-weight: 700; letter-spacing: 0.22em; line-height: 1; }
.ds-deploy-sub { font-size: calc(14 * var(--t)); font-weight: 700; letter-spacing: 0.22em; opacity: 0.8; }
.ds-deploy-error { min-height: calc(18 * var(--u)); color: #ffb09f; font-size: calc(15 * var(--t)); }
.ds-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10 * var(--u));
    padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(12, 32, 18, 0.72);
    color: var(--mk-2);
    font-size: calc(15 * var(--t));
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ds-invite.is-invalid { border-color: rgba(255, 90, 70, 0.6); background: rgba(48, 14, 10, 0.78); color: #ffb09f; }

.ds-btn-small { min-height: max(var(--tap), calc(30 * var(--u))); padding: 0 calc(12 * var(--u)); font-size: calc(13 * var(--t)); letter-spacing: 0.14em; }
.ds-btn-danger { border-color: rgba(255, 90, 70, 0.7); color: #ffb09f; }
.ds-btn-danger:hover:not(:disabled) { border-color: var(--enemy); background: rgba(90, 16, 12, 0.85); }

.ds-btn-inline {
    min-height: max(var(--tap), calc(52 * var(--u)));
    padding: 0 calc(40 * var(--u)) 0 calc(24 * var(--u));
    font-size: calc(20 * var(--t));
    letter-spacing: 0.18em;
    margin-left: auto;
}

.ds-main-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: calc(14 * var(--u));
}

.ds-live,
.ds-matchcard {
    width: calc(400 * var(--u));
    padding: calc(14 * var(--u)) calc(18 * var(--u));
    background: rgba(10, 13, 11, 0.8);
    border: 1px solid var(--line);
    border-top: calc(2 * var(--u)) solid var(--enemy);
}

.ds-matchcard { border-top-color: var(--tan); }
.ds-live-head { display: flex; align-items: center; gap: calc(8 * var(--u)); }

.ds-live-dot {
    display: inline-block;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border-radius: 50%;
    background: var(--enemy);
    box-shadow: 0 0 calc(8 * var(--u)) var(--enemy);
    animation: ds-pulse 1.4s ease-in-out infinite;
}

.ds-live-title { font-size: calc(13 * var(--t)); letter-spacing: 0.3em; color: #ffb09f; }
.ds-live-mode { margin-top: calc(6 * var(--u)); font-size: calc(28 * var(--t)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ds-live-venue { font-size: calc(16 * var(--t)); color: var(--ink-2); letter-spacing: 0.08em; }
.ds-live-meta { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)) calc(16 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--t)); letter-spacing: 0.18em; color: var(--tan-2); }
/* Each count stays on one line ("40 ON FIELD"); at large text they wrap as a whole. */
.ds-live-meta > span { white-space: nowrap; }
.ds-live-pop { margin-top: calc(10 * var(--u)); padding-top: calc(8 * var(--u)); border-top: 1px solid var(--line); font-size: calc(14 * var(--t)); color: var(--muted); letter-spacing: 0.06em; }
.ds-menu[data-context='match'] .ds-main-right { justify-content: center; }

/* The next-match vote in the in-match menu (results vote stage): the mouse is free
   here while the results screen keeps the pointer locked. */
.ds-menu-vote {
    width: calc(400 * var(--u));
    padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
    background: rgba(10, 13, 11, 0.86);
    border: 1px solid var(--line);
    border-top: calc(2 * var(--u)) solid var(--gold);
}

.ds-menu-vote-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--u)); }
.ds-menu-vote-timer { font-size: calc(16 * var(--t)); font-weight: 700; color: var(--tan-2); letter-spacing: 0.1em; }
.ds-menu-vote-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }

.ds-menu-vote-option {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    min-height: max(var(--tap), calc(52 * var(--u)));
    padding: calc(6 * var(--u)) calc(12 * var(--u));
    border: 1px solid var(--line);
    border-left: calc(3 * var(--u)) solid transparent;
    background: rgba(18, 23, 19, 0.82);
    text-align: left;
}

.ds-menu-vote-option:hover { background: rgba(34, 40, 32, 0.9); }
.ds-menu-vote-option.is-selected {
    border-color: rgba(230, 204, 147, 0.5);
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(242, 193, 78, 0.2), rgba(18, 23, 19, 0.85));
}

.ds-menu-vote-key {
    flex: none;
    width: calc(26 * var(--u));
    border: 1px solid var(--line-2);
    font-size: calc(14 * var(--t));
    font-weight: 700;
    text-align: center;
    color: var(--muted);
}

.ds-menu-vote-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-menu-vote-venue { font-size: calc(19 * var(--t)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; overflow-wrap: anywhere; }
.ds-menu-vote-mode { font-size: calc(13 * var(--t)); letter-spacing: 0.16em; color: var(--tan-2); text-transform: uppercase; }
.ds-menu-vote-pct { flex: none; font-size: calc(16 * var(--t)); font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------------ play */

.ds-playlists {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(16 * var(--u));
}

.ds-playlist {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--u));
    min-height: calc(440 * var(--u));
    padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(38, 44, 34, 0.9), rgba(10, 13, 11, 0.92));
    text-align: left;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ds-playlist:hover { border-color: var(--line-2); transform: translateY(calc(-3 * var(--u))); }

.ds-playlist.is-selected {
    border-color: var(--tan-2);
    box-shadow: inset 0 0 0 1px var(--tan-2), 0 0 calc(30 * var(--u)) rgba(230, 204, 147, 0.18);
}

.ds-playlist.is-selected::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 calc(28 * var(--u)) calc(28 * var(--u)) 0;
    border-color: transparent var(--tan-2) transparent transparent;
}

.ds-pl-featured {
    padding: calc(2 * var(--u)) calc(7 * var(--u));
    background: var(--enemy);
    color: #1a0906;
    font-size: calc(12 * var(--t));
    font-weight: 700;
    letter-spacing: 0.2em;
    text-shadow: none;
}

.ds-pl-name { font-size: calc(32 * var(--t)); font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.ds-pl-desc { font-size: calc(16 * var(--t)); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.ds-pl-modes, .ds-pl-rules { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }

.ds-pl-limits {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    width: 100%;
    margin-top: calc(6 * var(--u));
    padding-top: calc(10 * var(--u));
    border-top: 1px solid var(--line);
}

.ds-pl-limit { display: flex; align-items: baseline; gap: calc(10 * var(--u)); font-size: calc(14 * var(--t)); font-weight: 500; color: var(--ink-2); }
.ds-pl-limit-mode { min-width: calc(40 * var(--u)); font-weight: 700; letter-spacing: 0.12em; color: var(--tan-2); }

.ds-mode-chip,
.ds-rule-chip {
    padding: calc(2 * var(--u)) calc(7 * var(--u));
    border: 1px solid var(--line-2);
    font-size: calc(12 * var(--t));
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ds-rule-chip { border-color: rgba(255, 179, 71, 0.6); color: var(--warn); }

.ds-pl-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: calc(10 * var(--u));
    border-top: 1px solid var(--line);
    font-size: calc(14 * var(--t));
    letter-spacing: 0.14em;
}

.ds-pl-size { color: var(--tan-2); }
.ds-pl-pop { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--ink-2); }

.ds-room { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ds-input[aria-invalid='true'] { border-bottom-color: var(--enemy); }
/* The room code's validation, beside the field (role=alert). */
.ds-room-error { max-width: calc(320 * var(--u)); color: #ffb09f; font-size: calc(15 * var(--t)); font-weight: 600; line-height: 1.25; }
.ds-room-error:empty { display: none; }

/* ------------------------------------------------------------------ loadout */

.ds-loadout-grid {
    flex: 1;
    display: grid;
    grid-template-columns: calc(330 * var(--u)) minmax(0, 1fr) minmax(calc(360 * var(--u)), 0.9fr);
    gap: calc(24 * var(--u));
    min-height: 0;
}

.ds-lo-classes,
.ds-lo-weapons {
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--u));
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ds-col-title {
    font-size: calc(14 * var(--t));
    letter-spacing: 0.3em;
    color: var(--tan-2);
    margin: calc(6 * var(--u)) 0 calc(2 * var(--u));
}

.ds-col-sub { font-size: calc(12 * var(--t)); letter-spacing: 0.26em; color: var(--muted); margin-top: calc(4 * var(--u)); }

.ds-class-card,
.ds-weapon-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    min-height: var(--tap);
    gap: calc(2 * var(--u));
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border: 1px solid var(--line);
    border-left: calc(3 * var(--u)) solid transparent;
    background: rgba(18, 23, 19, 0.82);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.ds-class-card:hover,
.ds-weapon-card:hover { background: rgba(34, 40, 32, 0.9); }

.ds-class-card.is-selected,
.ds-weapon-card.is-selected {
    border-color: rgba(230, 204, 147, 0.5);
    border-left-color: var(--tan-2);
    background: linear-gradient(90deg, rgba(201, 168, 106, 0.22), rgba(18, 23, 19, 0.85));
}

.ds-class-name,
.ds-wc-name { font-size: calc(22 * var(--t)); font-weight: 700; letter-spacing: 0.08em; }
.ds-class-role,
.ds-wc-tag { font-size: calc(14 * var(--t)); color: var(--muted); letter-spacing: 0.08em; }
.ds-class-speeds { display: flex; gap: calc(10 * var(--u)); width: 100%; margin-top: calc(4 * var(--u)); }
.ds-speed { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.ds-speed-label { font-size: calc(10 * var(--t)); letter-spacing: 0.2em; color: var(--muted); }
.ds-speed-bar { position: relative; height: calc(3 * var(--u)); background: rgba(236, 232, 220, 0.12); }
.ds-speed-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }

.ds-weapon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(210 * var(--u)), 1fr)); gap: calc(7 * var(--u)); }

.ds-stats {
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    background: rgba(10, 13, 11, 0.7);
}

.ds-stat {
    display: grid;
    grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr) calc(110 * var(--u));
    align-items: center;
    gap: calc(10 * var(--u));
    font-size: calc(13 * var(--t));
    letter-spacing: 0.14em;
}

.ds-stat-name { color: var(--muted); }
.ds-stat-bar { position: relative; height: calc(5 * var(--u)); background: rgba(236, 232, 220, 0.12); }
.ds-stat-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--tan), var(--tan-2)); }
.ds-stat-text { text-align: right; color: var(--ink); }

.ds-skins { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }

.ds-swatch {
    position: relative;
    width: max(var(--tap), calc(46 * var(--u)));
    height: max(var(--tap), calc(30 * var(--u)));
    border: 1px solid var(--line-2);
    background: linear-gradient(160deg, color-mix(in srgb, var(--swatch) 80%, #fff 20%), var(--swatch));
    padding: 0;
}

.ds-swatch.is-selected { outline: calc(2 * var(--u)) solid var(--tan-2); outline-offset: calc(2 * var(--u)); }
.ds-swatch.is-locked { filter: grayscale(0.8) brightness(0.55); cursor: not-allowed; }

.ds-swatch-lock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(11 * var(--t));
    font-weight: 700;
    color: #fff;
}

.ds-equip-list { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }

.ds-equip-chip,
.ds-toggle-chip {
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border: 1px solid var(--line-2);
    background: rgba(18, 23, 19, 0.82);
    font-size: calc(13 * var(--t));
    letter-spacing: 0.12em;
}

.ds-toggle-chip { min-height: var(--tap); }

.ds-toggle-chip.is-on { border-color: #7dff6a; color: #7dff6a; }
.ds-toggle-chip:disabled { opacity: 0.5; cursor: not-allowed; }

.ds-lo-preview {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--u));
    min-height: 0;
}

.ds-lo-frame {
    position: relative;
    flex: 1;
    min-height: calc(260 * var(--u));
    border: 1px solid var(--line);
    /* No fill: the renderer's studio backdrop shows through (any tint here would sit
       over the live operator). */
    background: none;
}

.ds-lo-frame::before,
.ds-lo-frame::after,
.ds-lo-frame-corner::before,
.ds-lo-frame-corner::after {
    content: '';
    position: absolute;
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    border-color: var(--tan-2);
    border-style: solid;
}

.ds-lo-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.ds-lo-frame::after { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.ds-lo-frame-corner::before { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.ds-lo-frame-corner::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.ds-lo-frame-corner { position: absolute; inset: 0; pointer-events: none; }

.ds-lo-frame-label {
    position: absolute;
    left: calc(16 * var(--u));
    top: calc(12 * var(--u));
    font-size: calc(14 * var(--t));
    letter-spacing: 0.24em;
    color: var(--ink-2);
}

.ds-chrono {
    padding: calc(12 * var(--u)) calc(16 * var(--u));
    background: #0b0f0c;
    border: 1px solid rgba(125, 255, 106, 0.35);
    font-variant-numeric: tabular-nums;
}

.ds-chrono-title { font-size: calc(11 * var(--t)); letter-spacing: 0.36em; color: rgba(125, 255, 106, 0.8); }
.ds-chrono-main { font-size: calc(24 * var(--t)); font-weight: 700; color: #7dff6a; letter-spacing: 0.08em; text-shadow: 0 0 calc(10 * var(--u)) rgba(125, 255, 106, 0.4); }
.ds-chrono-detail { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); font-size: calc(12 * var(--t)); color: rgba(210, 255, 200, 0.7); letter-spacing: 0.14em; }
.ds-lo-saved { color: var(--mk-2); font-size: calc(15 * var(--t)); letter-spacing: 0.08em; }
.ds-lo-note { margin-top: calc(4 * var(--u)); color: var(--warn); font-size: calc(13 * var(--t)); font-weight: 500; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ small screens */

@media (max-width: 1100px) {
    .ds-playlists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-playlist { min-height: calc(240 * var(--u)); }
    /* No room for the model preview: the chronograph (SPEC 14) moves under the
       weapon column instead of disappearing with it. */
    .ds-loadout-grid {
        grid-template-columns: calc(280 * var(--u)) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .ds-lo-classes { grid-row: 1 / span 2; }
    .ds-lo-preview { grid-column: 2; grid-row: 2; }
    .ds-lo-frame { display: none; }
    .ds-chrono { padding: calc(8 * var(--u)) calc(12 * var(--u)); }
}

@media (max-height: 560px) {
    .ds-main { padding-top: calc(64 * var(--u)); padding-bottom: calc(20 * var(--u)); }
    .ds-brand-kicker, .ds-brand-tag { display: none; }
    .ds-brand-title { font-size: min(calc(58 * var(--u)), 12vh); }
    .ds-main[data-fit='2'] .ds-brand-title { font-size: min(calc(46 * var(--u)), 10vh); }
    .ds-nav { flex-direction: row; flex-wrap: wrap; align-content: flex-start; margin-top: calc(10 * var(--u)); gap: 0 calc(4 * var(--u)); }
    /* LEAVE MATCH gets a row of its own. */
    .ds-nav-gap { flex-basis: 100%; height: calc(8 * var(--u)); }
    .ds-nav-label { font-size: calc(22 * var(--t)); }
    .ds-nav-sub { display: none; }
    .ds-nav-item { padding: calc(6 * var(--u)) calc(12 * var(--u)); }
    .ds-nav-item:hover, .ds-nav-item:focus-visible { padding-left: calc(12 * var(--u)); }
    .ds-deploy { gap: calc(4 * var(--u)); }
    .ds-btn-deploy { min-height: max(var(--tap), calc(60 * var(--u))); }
    .ds-playlist { min-height: 0; }
    .ds-pl-desc, .ds-pl-limits { display: none; }
    .ds-screen { inset: calc(58 * var(--u)) calc(28 * var(--u)) calc(14 * var(--u)); }
    .ds-screen-title { font-size: calc(36 * var(--t)); }
    .ds-screen-sub { display: none; }
    /* Short screens: the screen title names the page, so the brand mark (which
       would sit on top of it) steps aside and the title shares the top row with
       the profile chip. */
    .ds-menu[data-screen]:not([data-screen='main']) .ds-menu-mark { opacity: 0; visibility: hidden; }
    .ds-screen-head { margin-bottom: calc(10 * var(--u)); }
    /* One-line chronograph so the weapon list keeps its room. */
    .ds-chrono { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(14 * var(--u)); }
    .ds-chrono-title { display: none; }
    .ds-chrono-main { font-size: calc(18 * var(--t)); }
}