/* Team Sync console — compact production layout
   Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 */

:root {
    /* Single warm family — ink / steel / gold (no cool blues) */
    --ts-copper: #d8893a;
    --ts-copper-hot: #f0a45a;
    --ts-copper-dim: rgba(216, 137, 58, 0.14);
    --ts-copper-line: rgba(216, 137, 58, 0.45);
    --ts-steel: #b8a078;
    --ts-steel-hot: #d4c09a;
    --ts-ink: #06080e;
    --ts-panel: #0c121c;
    --ts-panel-2: #101826;
    --ts-line: rgba(184, 160, 120, 0.16);
    --ts-line-strong: rgba(184, 160, 120, 0.28);
    --ts-soft: rgba(255, 255, 255, 0.03);
    --ts-radius: 10px;
    --ts-radius-sm: 10px;
    --ts-radius-xs: 10px;
    --ts-btn-radius: 10px;
    --ts-font: "Barlow", Bahnschrift, "Segoe UI Variable", "Segoe UI", sans-serif;
    --ts-display: "Barlow Condensed", "Barlow", Bahnschrift, sans-serif;
    --z-font: var(--ts-font);
    --z-display: var(--ts-display);
    --z-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
    --ts-pad-x: 0px; /* flush main on large screens; side pad only when shell fills the viewport */
    --ts-topbar-pad-x: 20px;
    --ts-gap: 18px;
    --ts-surface-shadow:
        0 1px 0 rgba(255, 255, 255, 0.035) inset,
        0 12px 28px rgba(0, 0, 0, 0.28);

    /* Remap entire base token set → warm console (overrides z5-ui cool slate) */
    --z-bg: #07090e;
    --z-bg-elevated: #0a0e16;
    --z-surface: #10161f;
    --z-surface-elevated: #151c28;
    --z-border: rgba(184, 160, 120, 0.22);
    --z-border-subtle: rgba(184, 160, 120, 0.14);
    --z-text: #f2e6d4;
    --z-text-secondary: #d2c2a6;
    --z-muted: #9a8a70;
    --z-dim: #5c5040;

    --z-accent: #e09a45;
    --z-accent-hover: #f0b060;
    --z-accent-dim: #c07a30;
    --z-accent-muted: rgba(224, 154, 69, 0.14);
    --z-accent-subtle: rgba(224, 154, 69, 0.08);
    --z-accent-border: rgba(224, 154, 69, 0.4);
    --z-on-accent: #1a1008;

    /* Former “cyan/info” → warm champagne (same family as accent) */
    --z-cyan: #e8c07a;
    --z-cyan-muted: rgba(232, 192, 122, 0.12);
    --z-cyan-border: rgba(232, 192, 122, 0.35);

    --z5-mint: var(--z-accent);
    --z5-cyan: var(--ts-copper-hot);
    --z5-muted: var(--z-muted);
    --z5-dim: var(--z-dim);
    --z5-text: var(--z-text);

    --z-scrollbar-track: rgba(6, 8, 14, 0.2);
    --z-scrollbar-thumb: rgba(184, 160, 120, 0.32);
    --z-scrollbar-thumb-hover: rgba(224, 154, 69, 0.45);
    --z-scrollbar-thumb-active: rgba(240, 164, 90, 0.55);
}

/* ── App shell ────────────────────────────────────────────────────────────── */

body.is-app,
body.is-login {
    background:
        radial-gradient(900px 420px at 12% -8%, rgba(216, 137, 58, 0.12), transparent 55%),
        radial-gradient(700px 360px at 92% 0%, rgba(240, 164, 90, 0.06), transparent 50%),
        linear-gradient(180deg, #0a1018 0%, var(--ts-ink) 55%, #04060a 100%);
    min-height: 100vh;
    font-family: var(--ts-font);
    /* Every UI word starts with a capital letter */
    text-transform: capitalize;
}

.toast,
.z-modal {
    text-transform: capitalize;
}

/* Keys, timers, and raw IDs keep their exact casing */
body.is-app input,
body.is-app textarea,
body.is-login input,
.input--mono,
#queueTimer,
#countdownText,
#licCountdown,
.victory-id,
.match-id,
.ts-roster-pid {
    text-transform: none;
}

body.is-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(184, 160, 120, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 160, 120, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
    z-index: 0;
}

.ts-app,
.ts-app .ts-main {
    position: relative;
    z-index: 1;
}

.ts-app {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 0 24px;
    box-sizing: border-box;
}

body.is-app header.ts-topbar.app-header {
    position: static;
    z-index: 20;
    width: 100%;
    max-width: 1180px;
    height: 64px;
    margin: 20px auto 0;
    /* Explicit sides — do not rely on shorthand that media queries can clobber */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--ts-topbar-pad-x) !important;
    padding-right: var(--ts-topbar-pad-x) !important;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-btn-radius);
    background: rgba(10, 14, 22, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
}

.ts-topbar .app-brand {
    gap: 12px;
    align-items: center;
}

.ts-topbar .brand-icon {
    width: 34px;
    height: 34px;
}

.ts-topbar .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.ts-topbar .brand-copy h1 {
    font-family: var(--ts-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
}

.ts-topbar .brand-sub {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-steel);
}

.ts-topbar .app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-topbar .btn--ghost {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--ts-btn-radius);
    font-size: 0.8rem;
    font-weight: 600;
    border-color: var(--ts-line);
    background: var(--ts-soft);
}

.ts-topbar .pill--active {
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--ts-btn-radius);
    font-size: 0.75rem;
    font-weight: 650;
}

/* Fixed radius for every interactive control + label chip */
body.is-app .btn,
body.is-app .btn--ghost,
body.is-app .btn--primary,
body.is-app .btn--launch,
body.is-app .btn--activity,
body.is-app .pill,
body.is-app .pill--active,
body.is-app .ts-mode-btn,
body.is-app .ts-show-teams,
body.is-app .ts-slot-cta,
body.is-app .ts-icon-btn,
body.is-app .ts-icon-btn--surrender,
body.is-app .ts-team-count__btn,
body.is-app .ts-team__badge,
body.is-app .ts-seat-tag,
body.is-app .acct-copy,
body.is-app .acct-del,
body.is-app .acct-skip-tuts,
body.is-app .select,
body.is-login .btn,
body.is-login .btn--primary,
body.is-login .input {
    border-radius: var(--ts-btn-radius) !important;
}

.ts-main {
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px var(--ts-pad-x) 48px;
    display: flex;
    flex-direction: column;
    gap: var(--ts-gap);
    box-sizing: border-box;
}

.ts-layout {
    display: flex;
    flex-direction: column;
    gap: var(--ts-gap);
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */

.ts-modebar,
.ts-team,
.ts-panel,
.ts-actions,
.ts-teams-toolbar {
    border: 1px solid var(--ts-line);
    background:
        linear-gradient(180deg, rgba(22, 30, 44, 0.98), var(--ts-panel) 55%),
        var(--ts-panel);
    box-shadow: var(--ts-surface-shadow);
    position: relative;
}

.ts-modebar::before,
.ts-actions::before,
.ts-panel::before,
.ts-teams-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--ts-copper), transparent);
    opacity: 0.55;
    pointer-events: none;
}

.ts-eyebrow {
    margin: 0 0 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ts-copper);
}

/* ── Mode bar ─────────────────────────────────────────────────────────────── */

.ts-modebar {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
    gap: 22px;
    align-items: center;
    padding: 20px 22px 20px 24px;
    border-radius: var(--ts-radius);
    overflow: hidden;
}

.ts-modebar__title {
    margin: 0;
    font-family: var(--ts-display);
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--z-text);
    text-transform: uppercase;
}

.ts-modebar__hint {
    margin: 6px 0 0;
    color: var(--z-muted);
    font-size: 0.84rem;
    line-height: 1.4;
    max-width: 38ch;
}

.ts-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ts-mode-btn {
    appearance: none;
    border: 1px solid var(--ts-line);
    background: rgba(4, 6, 10, 0.45);
    color: var(--z-text-secondary);
    border-radius: var(--ts-radius-sm);
    padding: 12px 12px 11px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ts-mode-btn:hover {
    border-color: var(--ts-line-strong);
    color: var(--z-text);
    background: rgba(255, 255, 255, 0.03);
}

.ts-mode-btn.is-active {
    border-color: var(--ts-copper-line);
    background: linear-gradient(180deg, rgba(216, 137, 58, 0.16), rgba(216, 137, 58, 0.05));
    color: var(--z-text);
}

.ts-mode-btn__label {
    display: block;
    font-family: var(--ts-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ts-mode-btn__meta {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--z-muted);
}

.ts-mode-btn.is-active .ts-mode-btn__meta {
    color: var(--ts-copper-hot);
}

/* ── Teams toolbar + arena ────────────────────────────────────────────────── */

.ts-teams-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--ts-radius);
    overflow: hidden;
    border: 1px solid var(--ts-line);
    box-shadow: var(--ts-surface-shadow);
    background: rgba(8, 12, 18, 0.35);
}

.ts-teams-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 14px 22px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--ts-line);
    box-shadow: none;
}

.ts-teams-toolbar__title {
    margin: 0;
    font-family: var(--ts-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--z-text);
    text-transform: uppercase;
}

.ts-team-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ts-team-count__value {
    min-width: 5.5rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ts-copper-hot);
}

.ts-team-count__btn {
    appearance: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ts-btn-radius);
    border: 1px solid var(--ts-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--z-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ts-team-count__btn:hover:not(:disabled) {
    border-color: var(--ts-copper-line);
    background: rgba(224, 154, 69, 0.12);
    color: var(--ts-copper-hot);
}

.ts-team-count__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ts-arena {
    display: grid;
    grid-template-columns: repeat(var(--ts-team-cols, 2), minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    background:
        radial-gradient(520px 180px at 50% 0%, rgba(216, 137, 58, 0.06), transparent 70%),
        rgba(4, 6, 10, 0.35);
}

.ts-arena[data-teams="4"],
.ts-arena[data-teams="5"],
.ts-arena[data-teams="6"] {
    --ts-team-cols: 3;
}

.ts-team {
    border-radius: var(--ts-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    border: 1px solid var(--ts-line);
    box-shadow: none;
    background:
        linear-gradient(160deg, rgba(216, 137, 58, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(18, 26, 40, 0.98), var(--ts-panel));
}

.ts-team__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
}

.ts-team__head h3 {
    margin: 0;
    font-family: var(--ts-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ts-team__badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ts-steel);
    border: 1px solid var(--ts-line);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--ts-btn-radius);
    padding: 5px 9px;
    white-space: nowrap;
}

.ts-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-slot {
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-sm);
    background: rgba(4, 6, 10, 0.5);
    padding: 10px 10px 10px 12px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 64px;
    transition: border-color .15s ease, background .15s ease;
}

.ts-slot.is-synced {
    border-color: rgba(224, 154, 69, 0.38);
    background: rgba(224, 154, 69, 0.06);
}

.ts-slot.is-unsynced {
    border-style: dashed;
}

.ts-slot--leader.is-synced {
    border-color: var(--ts-copper-line);
    background: linear-gradient(90deg, rgba(216, 137, 58, 0.10), rgba(4, 6, 10, 0.25));
}

.ts-slot__role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--z-muted);
}

.ts-slot__role i {
    font-size: 0.82rem;
    color: var(--ts-steel);
}

.ts-slot--leader .ts-slot__role,
.ts-slot--leader .ts-slot__role i {
    color: var(--ts-copper-hot);
}

.ts-slot__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ts-slot .acct-name {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.25;
}

.ts-slot .acct-name.is-empty {
    color: var(--z-dim);
    font-style: normal;
    font-weight: 500;
    font-size: 0.84rem;
}

.ts-slot .acct-name.is-resolved .acct-display-name {
    color: #f2e6d4;
    font-weight: 700;
}

.ts-slot .acct-platform-sep {
    color: rgba(184, 160, 120, 0.35);
}

.ts-slot .acct-platform {
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--ts-btn-radius);
    vertical-align: middle;
    line-height: 1.2;
    color: var(--ts-steel);
    background: rgba(184, 160, 120, 0.08);
    border: 1px solid rgba(184, 160, 120, 0.22);
}

/* Platform chips — warm steel family (Steam slightly cooler champagne, Xbox warmer) */
.ts-slot .acct-platform--steam {
    color: #e8d8b8;
    background:
        linear-gradient(180deg, rgba(232, 192, 122, 0.14), rgba(16, 18, 24, 0.55));
    border-color: rgba(232, 192, 122, 0.38);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
}

.ts-slot .acct-platform--xbox_pc,
.ts-slot .acct-platform--xbox {
    color: #f0dcc0;
    background:
        linear-gradient(180deg, rgba(224, 154, 69, 0.14), rgba(16, 18, 24, 0.55));
    border-color: rgba(224, 154, 69, 0.36);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
}

.ts-slot .acct-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ts-slot .acct-skip-tuts {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    border-radius: var(--ts-radius-xs);
    font-size: 0.72rem;
    font-weight: 650;
}

.ts-slot.is-clickable {
    cursor: pointer;
}

.ts-slot.is-clickable:hover {
    border-color: var(--ts-copper-line);
    background: rgba(216, 137, 58, 0.06);
}

/* Icon-only slot actions */
.ts-icon-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--ts-btn-radius);
    border: 1px solid var(--ts-line);
    background: rgba(255, 255, 255, 0.02);
    color: var(--ts-steel);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

/* Author display:flex/inline-flex beats UA [hidden] — force hide for slot actions */
.ts-icon-btn[hidden],
.acct-skip-tuts[hidden] {
    display: none !important;
}

.ts-icon-btn i {
    font-size: 0.78rem;
    line-height: 1;
}

.ts-icon-btn:hover {
    color: var(--z-text);
    border-color: var(--ts-copper-line);
    background: rgba(224, 154, 69, 0.1);
    transform: translateY(-1px);
}

.ts-icon-btn:focus-visible {
    outline: 2px solid rgba(224, 154, 69, 0.55);
    outline-offset: 2px;
}

.ts-icon-btn--key {
    border: 0;
    color: #1a1008;
    background: linear-gradient(180deg, #f0a45a, #d8893a);
    box-shadow: 0 4px 12px rgba(216, 137, 58, 0.28);
}

.ts-icon-btn--key:hover {
    color: #1a1008;
    border: 0;
    background: linear-gradient(180deg, #f7b56a, #e09448);
}

.ts-icon-btn--edit,
.ts-icon-btn--copy {
    color: var(--ts-copper-hot);
}

.ts-icon-btn--edit:hover,
.ts-icon-btn--copy:hover {
    color: #ffd59a;
}

.ts-icon-btn--clear:hover {
    color: #f0a0a0;
    border-color: rgba(240, 110, 110, 0.45);
    background: rgba(240, 110, 110, 0.1);
}

.ts-icon-btn--surrender {
    color: #f0b060;
    border-color: rgba(240, 160, 80, 0.45);
    background: rgba(240, 160, 80, 0.12);
    animation: ts-surrender-pulse 1.8s ease-in-out infinite;
}

.ts-icon-btn--surrender:hover {
    color: #ffe0a8;
    border-color: rgba(240, 160, 80, 0.7);
    background: rgba(240, 160, 80, 0.2);
}

.ts-icon-btn--surrender.is-busy {
    opacity: 0.65;
    cursor: wait;
    animation: none;
}

.ts-slot.is-in-match {
    border-color: rgba(240, 160, 80, 0.45);
    box-shadow: inset 0 0 0 1px rgba(240, 160, 80, 0.08);
}

@keyframes ts-surrender-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 160, 80, 0); }
    50% { box-shadow: 0 0 0 4px rgba(240, 160, 80, 0.12); }
}

/* Tip hosts — needed so disabled buttons still show tooltips */
.ts-tip-host,
.ts-show-teams-host {
    display: block;
    width: 100%;
    min-width: 0;
}

.has-rich-tip {
    cursor: help;
}

button.has-rich-tip,
a.has-rich-tip,
.ts-mode-btn.has-rich-tip,
.ts-show-teams,
.ts-icon-btn.has-rich-tip {
    cursor: pointer;
}

.ts-show-teams-host .ts-show-teams {
    width: 100%;
}

.ts-show-teams:disabled {
    pointer-events: none;
}

/* Rich floating tooltip */
.ts-tip {
    position: fixed;
    z-index: 1200;
    width: min(280px, calc(100vw - 24px));
    padding: 12px 14px 13px;
    border-radius: var(--ts-radius);
    border: 1px solid rgba(224, 154, 69, 0.35);
    background:
        linear-gradient(165deg, rgba(28, 22, 14, 0.98), rgba(10, 14, 22, 0.98));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 18px 40px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(216, 137, 58, 0.12);
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
    text-transform: capitalize;
}

.ts-tip.is-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ts-tip[data-place="below"] {
    transform: translateY(-4px) scale(0.98);
}

.ts-tip[data-place="below"].is-show {
    transform: translateY(0) scale(1);
}

.ts-tip__glow {
    position: absolute;
    inset: 0 auto auto 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 164, 90, 0.22), transparent 70%);
    transform: translate(-24%, -36%);
    pointer-events: none;
}

.ts-tip__kicker {
    position: relative;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ts-copper-hot);
    margin-bottom: 4px;
}

.ts-tip__title {
    position: relative;
    font-family: var(--ts-font);
    font-size: 0.92rem;
    font-weight: 750;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

.ts-tip__body {
    position: relative;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(232, 214, 180, 0.82);
}

.ts-tip[data-tone="danger"] {
    border-color: rgba(240, 110, 110, 0.4);
}

.ts-tip[data-tone="danger"] .ts-tip__kicker {
    color: #f0a0a0;
}

.ts-tip[data-tone="danger"] .ts-tip__glow {
    background: radial-gradient(circle, rgba(240, 110, 110, 0.2), transparent 70%);
}

.ts-slot--party {
    border-style: dashed;
    min-height: 56px;
}

.ts-slot--party.is-synced {
    border-style: solid;
}

.ts-seat-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--z-muted);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-btn-radius);
    padding: 5px 8px;
    white-space: nowrap;
}

.ts-arena[data-mode="1v1"] .ts-slot--member,
.ts-arena[data-mode="1v1"] .ts-slot--party {
    display: none;
}

/* ── Reveal / actions strip ───────────────────────────────────────────────── */

.ts-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 16px 22px;
    border-radius: var(--ts-radius);
    overflow: hidden;
}

.ts-actions__head {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.ts-actions__note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--z-muted);
}

.ts-actions__note strong {
    color: var(--ts-copper-hot);
    font-weight: 700;
}

.ts-live-rosters {
    display: grid;
    grid-template-columns: repeat(var(--ts-live-cols, 2), minmax(0, 1fr));
    gap: 10px;
}

.ts-live-rosters[data-teams="3"],
.ts-live-rosters[data-teams="4"],
.ts-live-rosters[data-teams="5"],
.ts-live-rosters[data-teams="6"] {
    --ts-live-cols: 3;
}

.ts-live-team {
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-sm);
    background: rgba(4, 6, 10, 0.45);
    padding: 10px 12px;
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ts-live-team.is-ok {
    border-color: rgba(224, 154, 69, 0.45);
    background: rgba(224, 154, 69, 0.06);
}

.ts-live-team.is-bad {
    border-color: rgba(240, 160, 80, 0.4);
}

.ts-live-team.is-empty {
    opacity: 0.72;
}

.ts-live-team.is-loading {
    opacity: 0.85;
}

.ts-live-team__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ts-live-team__head h3 {
    margin: 0;
    font-family: var(--ts-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--z-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-live-team__status {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ts-steel);
}

.ts-live-team.is-ok .ts-live-team__status {
    color: var(--ts-copper-hot);
}

.ts-live-team.is-bad .ts-live-team__status {
    color: #f0c48a;
}

.ts-live-team__seats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ts-live-seat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--ts-line);
    background: rgba(255, 255, 255, 0.02);
    min-width: 0;
}

.ts-live-seat.is-leader {
    border-color: rgba(224, 154, 69, 0.35);
    background: rgba(224, 154, 69, 0.08);
}

.ts-live-seat.is-empty {
    border-style: dashed;
    opacity: 0.7;
}

.ts-live-seat__name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--z-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-live-seat.is-empty .ts-live-seat__name {
    color: var(--z-muted);
    font-weight: 600;
}

.ts-live-seat__meta {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    color: var(--z-muted);
}

.ts-show-teams {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    padding: 0 14px 0 10px;
    border-radius: var(--ts-radius-sm);
    border: 1px solid var(--ts-line);
    background: rgba(4, 6, 10, 0.45);
    color: var(--z-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.ts-show-teams.is-loading .ts-show-teams__chev {
    animation: ts-spin 0.8s linear infinite;
}

@keyframes ts-spin {
    to { transform: rotate(360deg); }
}

.ts-show-teams:hover {
    border-color: var(--ts-line-strong);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

.ts-show-teams:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

.ts-show-teams.is-ready {
    border-color: rgba(224, 154, 69, 0.55);
    background: rgba(224, 154, 69, 0.08);
}

.ts-show-teams.is-warn {
    border-color: rgba(247, 186, 83, 0.55);
}

.ts-show-teams.is-loading {
    opacity: 0.8;
}

.ts-actions[data-state="ok"] .ts-actions__note strong {
    color: var(--ts-copper-hot);
}

.ts-actions[data-state="partial"] .ts-actions__note,
.ts-actions[data-state="error"] .ts-actions__note {
    color: #f0c48a;
}

.ts-dot.is-on {
    background: var(--ts-copper-hot);
}

.ts-roster-card.is-ok {
    border-color: rgba(224, 154, 69, 0.4);
}

.ts-roster-card.is-bad {
    border-color: rgba(247, 186, 83, 0.35);
}

.ts-roster-status {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-roster-status.is-ok { color: var(--ts-copper-hot); }
.ts-roster-status.is-bad { color: #f0c48a; }

.ts-show-teams[data-mode="1v1"],
.ts-show-teams[data-mode="2v2"],
.ts-show-teams[data-mode="3v3"] {
    border-color: rgba(216, 137, 58, 0.38);
}

.ts-show-teams__formation {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--ts-line);
    flex-shrink: 0;
}

.ts-form-side {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.ts-form-vs {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--z-muted);
}

.ts-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(184, 160, 120, 0.35);
}

.ts-dot--leader {
    background: var(--ts-copper-hot);
    box-shadow: 0 0 0 2px rgba(216, 137, 58, 0.2);
}

.ts-show-teams[data-mode="1v1"] .ts-dot--leader,
.ts-show-teams[data-mode="2v2"] .ts-dot--leader,
.ts-show-teams[data-mode="3v3"] .ts-dot--leader {
    background: var(--ts-copper-hot);
    box-shadow: 0 0 0 2px rgba(216, 137, 58, 0.22);
}

.ts-show-teams__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ts-show-teams__kicker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--z-muted);
}

.ts-show-teams__label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-show-teams__chev {
    margin-left: auto;
    color: var(--z-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* ── Match + activity ─────────────────────────────────────────────────────── */

.ts-control-row {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.ts-panel {
    border-radius: var(--ts-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.ts-panel__head {
    height: 50px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ts-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.ts-panel__head h2 {
    margin: 0;
    font-family: var(--ts-display);
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-panel__head h2 i {
    color: var(--ts-copper);
    font-size: 0.85rem;
}

.ts-panel__body,
.ts-match-fields {
    padding: 16px 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.ts-match-fields .field {
    margin: 0;
}

.ts-match-fields .field label {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--z-muted);
    margin-bottom: 5px;
}

.ts-match-fields .select {
    height: 40px;
    border-radius: var(--ts-radius-xs);
    font-size: 0.88rem;
}

.ts-panel--match .attempt-bar-wrap {
    margin: 2px 0 2px;
}

.ts-panel--match .btn--launch {
    margin-top: 4px;
    width: 100%;
    height: 46px;
    border-radius: var(--ts-radius-sm);
    font-family: var(--ts-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-panel--activity .activity-bar {
    height: 50px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--ts-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.ts-panel--activity .activity-head {
    height: 40px;
    padding: 0 16px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ts-panel--activity .activity-head > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--z-muted);
}

.ts-panel--activity .btn--activity {
    height: 28px;
    padding: 0 10px;
    font-size: 0.72rem;
}

.ts-panel--activity .activity-feed {
    flex: 1;
    min-height: 180px;
    max-height: 300px;
    padding: 8px 12px 14px;
    margin: 0;
}

/* Victory banner sits cleanly in the stack */
.ts-layout > .victory--banner {
    border-radius: var(--ts-radius);
}

/* Kill leftover green accents from base UI inside the console */
body.is-app .btn--launch,
body.is-login .btn--primary {
    background: linear-gradient(180deg, #f0a45a, #d8893a);
    color: #1a1008;
}

body.is-app .btn--launch:hover,
body.is-login .btn--primary:hover {
    background: linear-gradient(180deg, #f6b56e, #e09a45);
}

body.is-app .pill--active,
body.is-app .status-dot--ok,
body.is-app .status-msg--ok,
body.is-app .status-msg--running,
body.is-app .log-ok .log-line-icon,
body.is-app .log-info .log-line-icon,
body.is-app .activity-head i {
    color: var(--ts-copper-hot);
}

body.is-app .pill--active {
    border-color: var(--ts-copper-line);
    background: var(--ts-copper-dim);
}

body.is-app .status-dot--idle {
    background: var(--ts-steel);
    box-shadow: none;
    opacity: 0.55;
}

body.is-app .status-dot--ok,
body.is-app .status-dot--running {
    background: var(--ts-copper-hot);
    box-shadow: 0 0 0 3px rgba(216, 137, 58, 0.18);
}

body.is-app .status-msg--idle {
    color: var(--z-muted);
}

body.is-app .log-info .log-line-msg {
    color: var(--z-text-secondary);
}

body.is-app .log-ok .log-line-msg {
    color: var(--ts-copper-hot);
}

body.is-app .input,
body.is-app .select,
body.is-login .input {
    border-color: var(--ts-line);
    background: rgba(4, 6, 10, 0.55);
    color: var(--z-text);
}

body.is-app .input:focus,
body.is-app .select:focus,
body.is-login .input:focus {
    border-color: var(--ts-copper-line);
    box-shadow: 0 0 0 3px rgba(216, 137, 58, 0.12);
}

body.is-app .btn--ghost {
    border-color: var(--ts-line);
    color: var(--z-text-secondary);
}

body.is-app .btn--ghost:hover {
    border-color: var(--ts-line-strong);
    color: var(--z-text);
    background: rgba(224, 154, 69, 0.08);
}

body.is-app .acct.is-synced,
body.is-app .ts-slot.is-synced {
    box-shadow: none;
}

/* ── Rosters modal ────────────────────────────────────────────────────────── */

.z-modal__panel--wide {
    width: min(980px, calc(100vw - 24px));
}

.ts-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ts-roster-empty {
    grid-column: 1 / -1;
    padding: 28px 20px;
    text-align: center;
    color: var(--z-muted);
    border: 1px dashed var(--ts-line);
    border-radius: var(--ts-radius-sm);
    font-size: 0.88rem;
}

.ts-roster-card {
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-sm);
    background: rgba(4, 6, 10, 0.45);
    padding: 14px;
}

.ts-roster-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.ts-roster-card header h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}

.ts-roster-card header span,
.ts-roster-pid {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--z-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-roster-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
}

.ts-roster-member {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--ts-soft);
    border: 1px solid var(--ts-line);
}

.ts-roster-member--leader {
    border-color: var(--ts-copper-line);
    background: var(--ts-copper-dim);
}

.ts-roster-member--empty {
    opacity: 0.65;
    border-style: dashed;
}

.ts-roster-member__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--z-text);
}

.ts-roster-member__meta {
    font-size: 0.72rem;
    color: var(--z-muted);
}

.ts-roster-card[data-mode="2v2"] header span,
.ts-roster-card[data-mode="3v3"] header span {
    color: var(--ts-copper-hot);
}

/* ── Login ────────────────────────────────────────────────────────────────── */

.page-login .login-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-copper);
    margin-bottom: 10px;
}

.page-login .login-hero {
    background:
        radial-gradient(720px 360px at 18% 8%, rgba(216, 137, 58, 0.16), transparent 55%),
        linear-gradient(165deg, #101827 0%, #070b12 72%);
}

.page-login .login-hero h1,
.page-login .gate h2 {
    font-family: var(--ts-display);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.is-app,
body.is-login {
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Side padding only when the 1180 shell is edge-to-edge with the viewport */
@media (max-width: 1180px) {
    :root { --ts-pad-x: 20px; }
}

@media (max-width: 980px) {
    .ts-modebar,
    .ts-arena,
    .ts-control-row,
    .ts-actions__head,
    .ts-roster-grid {
        grid-template-columns: 1fr;
    }

    .ts-arena[data-teams="3"],
    .ts-arena[data-teams="4"],
    .ts-arena[data-teams="5"],
    .ts-arena[data-teams="6"],
    .ts-live-rosters[data-teams="3"],
    .ts-live-rosters[data-teams="4"],
    .ts-live-rosters[data-teams="5"],
    .ts-live-rosters[data-teams="6"] {
        grid-template-columns: 1fr 1fr;
        --ts-live-cols: 2;
    }

    .ts-control-row {
        grid-template-columns: 1fr;
    }

    .ts-teams-toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .ts-arena[data-teams="3"],
    .ts-arena[data-teams="4"],
    .ts-arena[data-teams="5"],
    .ts-arena[data-teams="6"],
    .ts-live-rosters,
    .ts-live-rosters[data-teams="3"],
    .ts-live-rosters[data-teams="4"],
    .ts-live-rosters[data-teams="5"],
    .ts-live-rosters[data-teams="6"] {
        grid-template-columns: 1fr;
        --ts-live-cols: 1;
    }
}

@media (max-width: 640px) {
    :root {
        --ts-pad-x: 14px;
        --ts-topbar-pad-x: 14px;
    }

    body.is-app header.ts-topbar.app-header {
        height: auto;
        min-height: 64px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: var(--ts-topbar-pad-x) !important;
        padding-right: var(--ts-topbar-pad-x) !important;
        flex-wrap: wrap;
    }

    .ts-mode-switch {
        grid-template-columns: 1fr;
    }

    .ts-slot {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .ts-slot__body {
        width: 100%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ts-mode-btn.is-active {
        animation: ts-mode-in .22s ease;
    }

    .ts-slot {
        animation: ts-slot-in .28s ease both;
    }

    .ts-slot:nth-child(2) { animation-delay: .03s; }
    .ts-slot:nth-child(3) { animation-delay: .06s; }
}

@keyframes ts-mode-in {
    from { transform: translateY(3px); opacity: .7; }
    to { transform: none; opacity: 1; }
}

@keyframes ts-slot-in {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── Toast — ops console alert (overrides z5-ui) ─────────────────────────── */

.toast {
    position: fixed;
    top: 78px;
    right: max(16px, calc((100vw - 1180px) / 2 + 16px));
    left: auto;
    bottom: auto;
    transform: translate3d(18px, -6px, 0) scale(0.96);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(360px, calc(100vw - 28px));
    max-width: min(360px, calc(100vw - 28px));
    padding: 14px 16px 14px 0;
    border-radius: var(--ts-radius);
    border: 1px solid rgba(224, 154, 69, 0.38);
    background:
        linear-gradient(155deg, rgba(34, 26, 16, 0.98), rgba(10, 14, 22, 0.98) 55%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 18px 42px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(216, 137, 58, 0.14);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1300;
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.toast.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.toast__glow {
    position: absolute;
    inset: 0 auto auto 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 164, 90, 0.28), transparent 68%);
    transform: translate(-30%, -40%);
    pointer-events: none;
}

.toast__rail {
    width: 3px;
    align-self: stretch;
    margin: 4px 0 4px 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ts-copper-hot), var(--ts-copper));
    box-shadow: 0 0 12px rgba(240, 164, 90, 0.45);
}

.toast__icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(224, 154, 69, 0.35);
    background: rgba(224, 154, 69, 0.12);
    color: var(--ts-copper-hot);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.toast__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-right: 2px;
}

.toast__kicker {
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ts-copper-hot);
}

.toast__msg {
    font-family: var(--ts-display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 0.02em;
}

.toast--ok {
    border-color: rgba(224, 154, 69, 0.45);
}

.toast--ok .toast__rail {
    background: linear-gradient(180deg, #f0c07a, var(--ts-copper));
}

.toast--err {
    border-color: rgba(240, 120, 110, 0.45);
    background:
        linear-gradient(155deg, rgba(40, 16, 16, 0.98), rgba(12, 12, 18, 0.98) 55%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 18px 42px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(220, 80, 70, 0.16);
}

.toast--err .toast__glow {
    background: radial-gradient(circle, rgba(240, 110, 110, 0.28), transparent 68%);
}

.toast--err .toast__rail {
    background: linear-gradient(180deg, #f0a0a0, #d06058);
    box-shadow: 0 0 12px rgba(240, 110, 110, 0.4);
}

.toast--err .toast__icon {
    border-color: rgba(240, 120, 110, 0.4);
    background: rgba(240, 110, 110, 0.12);
    color: #f0a8a0;
}

.toast--err .toast__kicker {
    color: #f0a8a0;
}

.toast--info {
    border-color: rgba(184, 160, 120, 0.35);
}

.toast--info .toast__kicker {
    color: var(--ts-steel);
}

.toast--info .toast__rail {
    background: linear-gradient(180deg, var(--ts-steel), rgba(184, 160, 120, 0.55));
    box-shadow: none;
}

@media (max-width: 640px) {
    .toast {
        top: auto;
        bottom: 18px;
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
        transform: translate3d(0, 12px, 0) scale(0.98);
    }

    .toast.is-show {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: opacity 0.15s ease;
        transform: none;
    }

    .toast.is-show {
        transform: none;
    }
}