:root { color-scheme: light; font-size: 19.2px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); }
#platform-account { width: min(680px, calc(100vw - 32px)); max-height: 86vh; box-sizing: border-box; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); overflow: auto; }
#platform-account::backdrop { background: rgba(0, 0, 0, .65); }
#platform-account h2 { margin: 0; font-size: 24px; }
#platform-account h3 { margin: 28px 0 12px; font-size: 20px; }
#platform-account label { display: grid; gap: 6px; margin: 12px 0; font-size: 15px; }
#platform-account input { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px; background: var(--field); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: inherit; }
#platform-account button, #platform-account-button { border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; background: var(--secondary); color: var(--text); font: inherit; cursor: pointer; }
#platform-account button:hover, #platform-account-button:hover { border-color: var(--highlight); }
#platform-account-button { width: 100%; margin-top: 16px; }
#platform-menu-links { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: center; width: min(100%, 690px); gap: 10px; }
#platform-menu-links button { min-width: 0; width: 100%; margin: 0; padding: 11px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; box-shadow: 0 12px 32px #123d3624; }
#platform-menu-links button:hover { border-color: var(--highlight); background: var(--selected); }
#platform-menu-links[data-single="true"] { grid-template-columns: minmax(0, 1fr); width: min(100%, 260px); }
#platform-menu-links[data-single="true"] #platform-leaders-button { grid-column: auto; }
#platform-leaders { box-sizing: border-box; width: min(920px, calc(100vw - 32px)); max-height: 86vh; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); overflow: auto; }
#platform-leaders::backdrop { background: rgba(0, 0, 0, .65); }
#platform-leaders h2 { margin: 0; font-size: 26px; }
#platform-leaders h3 { margin: 24px 0 12px; font-size: 21px; }
#platform-leaders button { padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--secondary); color: var(--text); font: inherit; cursor: pointer; }
.platform-leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.platform-leader-board { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--field); }
.platform-leader-board h4 { margin: 0 0 12px; font-size: 18px; }
.platform-leader-table-wrap { overflow-x: auto; }
.platform-leader-board table { width: 100%; border-collapse: collapse; font-size: 14px; }
.platform-leader-board th, .platform-leader-board td { padding: 10px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.platform-leader-board th:first-child, .platform-leader-board td:first-child { width: 38px; }
.platform-leader-crown { display: block; width: 28px; height: 19px; object-fit: contain; }
.platform-leader-board th:last-child, .platform-leader-board td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.platform-leader-board td[colspan] { color: var(--muted); }
@media (max-width: 640px) { .platform-leader-grid { grid-template-columns: 1fr; } #platform-menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } #platform-leaders-button { grid-column: 1 / -1; } }
#platform-preferences-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
#platform-preferences-actions button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; }
#platform-preferences-actions button:hover, #platform-preferences-actions button[aria-expanded="true"] { border-color: var(--highlight); background: var(--selected); }
#platform-preferences-actions button span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#platform-preferences-actions button span:last-child { flex-shrink: 0; font-size: 18px; }
.platform-preferences-panel { padding-top: 18px; }
.platform-preferences-panel[hidden] { display: none; }
#platform-account .platform-skin, .skin-section .platform-skin { display: block; margin: 12px 0; }
@media (max-width: 440px) { #platform-preferences-actions button { gap: 4px; padding: 10px 8px; font-size: 12px; } #platform-menu-links { gap: 6px; } #platform-menu-links button { padding: 9px 5px; font-size: 14px; } }
.platform-account-heading, .platform-account-actions, .platform-clan-row, #platform-account nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.platform-account-actions > button { max-width: 100%; }
.platform-account-heading { justify-content: space-between; }
.platform-clan-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.platform-clan-row span { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.platform-stats { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.platform-stats dd { margin: 0; font-weight: 700; }
.platform-skin { border-radius: 50%; }
#platform-account [role="status"] { position: sticky; top: -24px; margin: 12px 0; padding: 10px 0; background: var(--surface); font-size: 15px; overflow-wrap: anywhere; }
#platform-account nav { justify-content: center; margin-top: 12px; }
#platform-account-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
#platform-account-tabs[hidden] { display: none; }
#platform-account-tabs [role="tab"] { border-radius: 10px; background: var(--field); }
#platform-account-tabs [aria-selected="true"] { border-color: var(--highlight); background: var(--selected); font-weight: 700; }
#platform-account .platform-clan-search { display: flex; align-items: stretch; gap: 10px; margin: 12px 0; }
#platform-account .platform-clan-search input { flex: 1; min-width: 0; }
#platform-account .platform-clan-search button { flex-shrink: 0; white-space: nowrap; }
:root {
    --text: #143b36;
    --page: #f4f8f5;
    --surface: #fffefa;
    --field: #f5f7f2;
    --border: #dde5dd;
    --selected: #edf7ee;
    --selected-border: #84b99d;
    --muted: #657d70;
    --placeholder: #8b978e;
    --accent: #208f6b;
    --primary: #143b36;
    --primary-text: #fff;
    --secondary: #e5eee4;
    --overlay: rgba(228, 238, 232, .64);
    --highlight: #32bb8e;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --text: #f0f0f0;
    --page: #000;
    --surface: #161616;
    --field: #222;
    --border: #363636;
    --selected: #303030;
    --selected-border: #737373;
    --muted: #b5b5b5;
    --placeholder: #969696;
    --accent: #eee;
    --primary: #eee;
    --primary-text: #000;
    --secondary: #2d2d2d;
    --overlay: #000;
    --highlight: #eee;
}
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
body { background: var(--page); font-family: inherit; }
button, input, select { font: inherit; }
button, summary, select { cursor: pointer; }
button { transition: background .15s, transform .15s; }
button:hover { filter: brightness(.95); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; }
#overlays { background: var(--overlay); backdrop-filter: blur(7px); }
:root[data-theme="dark"] #overlays { background: rgba(0, 0, 0, .42); }
#death-dialog { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: #0009; backdrop-filter: blur(7px); }
#death-dialog[hidden] { display: none; }
.death-card { width: min(420px, 100%); padding: 32px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 24px 80px #0005; }
.death-card h2 { margin: 0 0 14px; font-size: 28.8px; }
.death-card p { margin: 0 0 26px; font-size: 16.8px; line-height: 1.6; color: var(--muted); }
#death-ok { width: 100%; background: var(--primary); color: var(--primary-text); }
#death-ok:disabled { opacity: .65; cursor: wait; }
#menu-layout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; width: min(900px, calc(100% - 32px)); max-height: calc(100dvh - 32px); }
#helloDialog, #servers-panel { min-width: 0; min-height: 0; padding: 30px; border-radius: 26px; background: var(--surface); box-shadow: 0 22px 90px #123d3624; border: 1px solid var(--border); max-height: calc(100dvh - 32px); overflow-y: auto; }
:root[data-theme="dark"] #helloDialog, :root[data-theme="dark"] #servers-panel { box-shadow: 0 24px 80px #0008, inset 0 1px 0 #ffffff05; }
#helloDialog { position: static; transform: none; width: auto; margin: 0; }
#servers-panel h2 { margin: 0 0 24px; font-size: 28.8px; letter-spacing: -.6px; }
#server-list { display: grid; gap: 10px; }
.server-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px; text-align: left; background: var(--field); border: 1px solid var(--border); border-radius: 13px; color: var(--text); }
.server-row[aria-pressed="true"] { background: var(--selected); border-color: var(--selected-border); box-shadow: inset 3px 0 var(--highlight); }
.server-row:disabled { opacity: .55; cursor: default; }
.server-row strong { display: block; font-size: 16.8px; font-weight: 650; }
.server-row small { display: block; margin-top: 6px; color: var(--muted); font-size: 13.2px; }
.server-population { flex-shrink: 0; padding: 6px 9px; border-radius: 7px; background: var(--surface); color: var(--accent); font-size: 15.6px; font-variant-numeric: tabular-nums; font-weight: 650; }
#servers-status { margin: 14px 0 0; color: var(--muted); font-size: 14.4px; line-height: 1.6; }
.form-group { margin-bottom: 12px; }
.profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: 15.6px; color: var(--muted); }
#profile-points { color: var(--text); font-variant-numeric: tabular-nums; }
#progress-status { margin: 10px 0 0; color: var(--muted); font-size: 13.2px; line-height: 1.5; }
#progress-status:empty { display: none; }
.skin-section + .skin-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.skin-section h3 { margin: 0 0 8px; font-size: 21.6px; }
.skin-section > p { margin: 0 0 12px; color: var(--muted); font-size: 14.4px; }
.daily-skins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.daily-skin { padding: 12px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--field); color: var(--text); min-width: 0; }
.daily-skin[aria-pressed="true"] { border-color: var(--highlight); box-shadow: inset 0 0 0 1px var(--highlight); background: var(--selected); }
.daily-skin-frame { position: relative; display: block; width: min(100%, 100px); aspect-ratio: 1; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; }
.daily-skin-frame img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; }
.daily-skin strong { display: block; font-size: 14.4px; overflow-wrap: anywhere; }
.daily-skin span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.daily-skin:disabled { cursor: default; }
.daily-skin:disabled img { filter: saturate(.6); opacity: .65; }
.skin-clear { margin-bottom: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--field); color: var(--text); font-size: 14.4px; }
@media (max-width: 430px) { #gallery-body { padding: 16px; } .daily-skins-grid { gap: 8px; } .daily-skin { padding: 8px 4px; } }
.form-control { border: 1px solid var(--border); color: var(--text); background: var(--field); border-radius: 11px; padding: 12px; height: 50px; outline: none; min-width: 0; }
.form-control::placeholder { color: var(--placeholder); }
.identity-row { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(100px, 1.7fr) 54px; align-items: center; gap: 8px; }
.identity-row #nick { width: 100%; }
.tag-field { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; height: 50px; border: 1px solid var(--border); border-radius: 11px; background: var(--field); color: var(--muted); font-size: 14px; }
.tag-field input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); outline: none; font: inherit; }
.skin-preview { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 3px; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; background: var(--field); color: var(--muted); font-size: 28px; cursor: pointer; }
.identity-row #skin { width: 54px; height: 54px; margin: 0; }
.skin-preview img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.skin-preview [hidden] { display: none; }
.btn { border: 0; border-radius: 11px; padding: 13px 16px; font-size: 16.8px; font-weight: 650; }
.play-actions { display: flex; gap: 10px; margin: 4px 0 10px; }
#play-btn, #spectate-btn { flex: 1; min-width: 0; width: auto; margin: 0; float: none; text-align: center; }
#play-btn { background: var(--primary); color: var(--primary-text); }
#spectate-btn { background: var(--secondary); color: var(--text); }
.menu-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.menu-secondary-actions > button { min-width: 0; min-height: 50px; margin: 0; }
#gallery-btn { width: 100%; margin: 0; background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 10px 8px; font-size: 14.4px; }
.preferences { margin-top: 21px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.preferences summary { padding: 15px 0; list-style: none; font-size: 14.4px; color: var(--muted); }
.preferences summary::-webkit-details-marker { display: none; }
.preferences summary span { float: right; }
#settings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 4px; padding: 0 0 16px; font-size: 13.2px; color: var(--muted); }
#settings label { display: flex; align-items: center; gap: 6px; margin: 0; }
.skin-display-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--field); color: var(--text); font-size: 15px; font-weight: 650; }
#settings .skin-display-setting { grid-column: 1 / -1; }
.skin-display-setting select { min-width: 145px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.render-scale-setting { grid-column: 1 / -1; justify-content: space-between; }
.render-scale-setting select, .mobile-fps-setting select { min-width: 155px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: inherit; }
input[type="checkbox"] { accent-color: var(--accent); }
#open-settings { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--field); color: var(--text); font-size: 15px; font-weight: 700; text-align: left; }
#open-settings span { font-size: 20px; font-weight: 400; }
@media (max-width: 380px) { #gallery-btn, #open-settings { padding-right: 8px; padding-left: 8px; font-size: 12px; } #open-settings span { font-size: 17px; } }
#settings-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 24px)); max-height: min(86dvh, 760px); padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px #0006; overflow-y: auto; }
#settings-dialog::backdrop { background: #07141bcc; }
.settings-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.settings-dialog-heading h2 { margin: 0; font-size: 25px; }
#settings-close { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: var(--field); color: var(--text); font-size: 28px; line-height: 1; }
#settings-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
#settings-tabs button { flex: 1; min-width: 0; padding: 10px 4px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 15px; font-weight: 650; }
#settings-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--highlight); }
#settings-tabs button[hidden], #settings-dialog [role="tabpanel"][hidden] { display: none; }
#settings-dialog .controls-help { margin-top: 0; }
#settings-mobile { display: grid; gap: 11px; }
#settings-mobile[hidden] { display: none; }
.mobile-setting-check { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.4; }
.mobile-setting-check input { margin: 3px 0 0; flex: 0 0 auto; }
.mobile-fps-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 650; }
@media (pointer: coarse) {
    :root.mobile-simple-style #mobileTopActions button, :root.mobile-simple-style #mobileLeadersBtn, :root.mobile-simple-style #splitBtn, :root.mobile-simple-style #ejectBtn, :root.mobile-simple-style #touchpad, :root.mobile-simple-style #touchCircle { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
    :root.mobile-simple-style #mobileTopActions button, :root.mobile-simple-style #mobileLeadersBtn, :root.mobile-simple-style #splitBtn, :root.mobile-simple-style #ejectBtn { background: #536473dd; }
    :root.mobile-simple-style #overlays, :root.mobile-simple-style #connecting, :root.mobile-simple-style #mobilePauseMenu, :root.mobile-simple-style #death-dialog { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.mobile-opacity-label, .mobile-range-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 15px; font-weight: 650; }
#settings-mobile input[type="range"] { width: 100%; margin: -8px 0 2px; accent-color: var(--accent); }
.mobile-control-preview { display: flex; align-items: center; justify-content: center; gap: 36px; min-height: 104px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(#d7e7e5 1px, transparent 1px), linear-gradient(90deg, #d7e7e5 1px, transparent 1px), #edf7f5; background-size: 20px 20px; }
.mobile-joystick-preview { position: relative; display: grid; place-items: center; width: calc(76px * var(--mobile-joystick-scale, 1)); height: calc(76px * var(--mobile-joystick-scale, 1)); border: 2px solid #5f7381; border-radius: 50%; background: #546373; opacity: var(--mobile-control-opacity, 1); }
.mobile-joystick-preview span { width: 42%; height: 42%; border: 2px solid #fff; border-radius: 50%; background: #b9d6e7; }
.mobile-button-preview { display: grid; place-items: center; width: calc(54px * var(--mobile-button-scale, 1)); height: calc(54px * var(--mobile-button-scale, 1)); border: 2px solid #f8fbff; border-radius: 50%; background: #6b7b8b; opacity: var(--mobile-control-opacity, 1); }
.mobile-button-preview img { width: 60%; height: 60%; object-fit: contain; }
.mobile-layout-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 15px; }
#open-mobile-layout { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--selected); color: var(--text); font-weight: 650; }
#mobile-settings-reset { justify-self: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--field); color: var(--text); font-weight: 650; }
#mobile-layout-editor { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: linear-gradient(#dfe7ee66 1px, transparent 1px), linear-gradient(90deg, #dfe7ee66 1px, transparent 1px), #f1f8ff22; background-size: 24px 24px; color: #143b36; overflow: hidden; }
#mobile-layout-editor::backdrop { background: transparent; }
body.mobile-layout-editing #overlays, body.mobile-layout-editing #mobileStuff { visibility: hidden; }
.mobile-layout-toolbar { position: fixed; z-index: 2; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: #fffefaea; box-shadow: 0 6px 24px #17253930; }
.mobile-layout-toolbar > strong { font-size: 15px; }
.mobile-layout-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-layout-toolbar button { padding: 9px 10px; border: 1px solid #bdd0c7; border-radius: 9px; background: #edf7ee; color: #143b36; font-size: 13px; font-weight: 700; }
#mobile-layout-save { background: #208f6b; color: #fff; }
.mobile-layout-help { position: fixed; z-index: 1; top: 90px; left: 50%; width: min(360px, calc(100vw - 24px)); margin: 0; padding: 9px 12px; transform: translateX(-50%); border-radius: 9px; background: #fffefaeb; color: #143b36; font-size: 13px; line-height: 1.3; text-align: center; pointer-events: none; }
.mobile-layout-action { position: fixed; z-index: 3; display: grid; place-items: center; width: var(--mobile-action-size, 72px); height: var(--mobile-action-size, 72px); padding: 0; transform: translate(-50%, -50%); border: 2px solid #f8fbffae; border-radius: 50%; background: #6b7b8b85; box-shadow: 0 4px 18px #0b1a2955; touch-action: none; cursor: grab; user-select: none; }
.mobile-layout-action:active { cursor: grabbing; }
.mobile-layout-action img { width: var(--mobile-action-icon-size, 44px); height: var(--mobile-action-icon-size, 44px); object-fit: contain; pointer-events: none; }
@media (max-width: 460px) { .mobile-layout-toolbar > strong { width: 100%; } .mobile-layout-help { top: 112px; } #settings-dialog { padding: 18px; } .mobile-layout-setting { align-items: flex-start; flex-direction: column; } }
#connection-status { margin: 16px 0 0; color: var(--muted); font-size: 14.4px; line-height: 1.6; }
#client-version { margin: 18px 0 0; color: var(--muted); font-size: 13.2px; text-align: center; }
#connecting { z-index: 350; background: var(--overlay); backdrop-filter: blur(7px); }
#connecting-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: min(360px, calc(100% - 36px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px; text-align: center; border-radius: 22px; box-shadow: 0 16px 70px #123d3615; }
#connecting h2 { font-size: 24px; }
#connecting p { font-size: 15.6px; color: var(--muted); line-height: 1.6; }
#connecting-description { white-space: pre-line; }
#connecting button { width: 100%; margin-top: 10px; white-space: normal; }
#connecting button[hidden] { display: none; }
#connecting[data-state="error"] .connection-orb { animation: none; opacity: .5; }
#connection-steps { display: grid; gap: 10px; margin: 22px 0 10px; padding: 0; list-style: none; text-align: left; }
#connection-steps:empty { display: none; }
.connection-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); color: var(--muted); transition: background .2s, border-color .2s; }
.connection-step strong { overflow-wrap: anywhere; font-size: 15px; font-weight: 650; }
.connection-step-marker { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; }
.connection-step-status { grid-column: 2; font-size: 12px; line-height: 1.5; }
.connection-step[data-state="active"] { border-color: var(--highlight); background: var(--selected); color: var(--text); }
.connection-step[data-state="active"] .connection-step-marker { border: 2px solid var(--border); border-top-color: var(--accent); color: transparent; animation: connection-spin .9s linear infinite; }
.connection-step[data-state="failed"] .connection-step-marker { font-size: 22px; }
@keyframes connection-spin { to { transform: rotate(360deg); } }
.connection-orb { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--highlight); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.75); opacity: .5; } }
#chat-compose { display: contents; }
#chat_textbox { font-family: inherit; border-radius: 8px; max-width: calc(100% - 20px); }
#chat_textbox::placeholder { color: var(--placeholder); opacity: 1; }
#mobileChatSendBtn { display: none; }
#chat-send-status { position: absolute; z-index: 3; bottom: 48px; left: 10px; max-width: min(300px, calc(100vw - 20px)); padding: 7px 11px; border: 1px solid #55c988; border-radius: 8px; background: #123d2eeb; color: #eafff1; font: 13px/1.3 system-ui, sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px #0004; pointer-events: none; }
#chat-send-status[hidden] { display: none; }
body.chat-cooling #chat-panel { bottom: 90px; }
#chat-access-notice { position: fixed; bottom: 62px; left: 16px; z-index: 350; max-width: min(430px, calc(100% - 32px)); padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); font-size: 16.8px; line-height: 1.5; box-shadow: 0 10px 36px #0005; }
#chat-access-notice[hidden] { display: none; }
#gallery { z-index: 300; background: var(--overlay); }
#gallery-content { max-width: calc(100% - 24px); border-radius: 18px; }
#gallery-header { font-size: 21.6px; }
.close-gallery { float: right; background: transparent; border: 0; font-size: 28.8px; }
#touchpad, #touchCircle { position: fixed; z-index: 10; display: none; pointer-events: none; transform: translate(-50%, -50%); }
#touchpad { width: var(--mobile-joystick-base-size, 136px); height: var(--mobile-joystick-base-size, 136px); border: 2px solid #f8fbffb8; border-radius: 50%; background: #54637355; box-shadow: 0 0 0 4px #17253933, inset 0 0 20px #ffffff26; }
#touchCircle { width: var(--mobile-joystick-knob-size, 56px); height: var(--mobile-joystick-knob-size, 56px); border: 2px solid #fff; border-radius: 50%; background: #e5f4ffae; box-shadow: 0 4px 18px #0b1a2980; }
#touchpad, #touchCircle, #splitBtn, #ejectBtn, .mobile-layout-action { opacity: var(--mobile-control-opacity, 1); }
#mobileTopActions { position: fixed; z-index: 11; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 8px; }
#mobileTopActions button, #mobileLeadersBtn, #splitBtn, #ejectBtn { display: grid; place-items: center; width: var(--mobile-menu-button-size, 58px); height: var(--mobile-menu-button-size, 58px); padding: 0; border: 2px solid #f8fbffae; border-radius: 17px; background: #6b7b8b85; color: #fff; box-shadow: 0 4px 18px #0b1a2955; backdrop-filter: blur(5px); touch-action: manipulation; }
#mobileMovementBtn { font: 800 calc(25px * var(--mobile-button-scale, 1)) system-ui, sans-serif; }
#mobileMovementBtn[hidden] { display: none; }
#mobileMovementBtn[aria-pressed="true"] { background: #bd543dcc; }
#mobileTopActions svg { width: var(--mobile-menu-icon-size, 32px); height: var(--mobile-menu-icon-size, 32px); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
#mobileChatBtn circle { fill: currentColor; stroke: none; }
#mobileLeadersBtn { position: fixed; z-index: 11; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); font-size: calc(14px * var(--mobile-button-scale, 1)); font-weight: 800; line-height: 1; }
#mobileLeadersBtn[aria-pressed="true"] { background: #244c5ccc; }
#splitBtn, #ejectBtn { position: fixed; z-index: 11; width: var(--mobile-action-size, 72px); height: var(--mobile-action-size, 72px); border-radius: 50%; }
#splitBtn { right: max(16px, env(safe-area-inset-right)); bottom: max(calc(var(--mobile-action-size, 72px) + 54px), calc(env(safe-area-inset-bottom) + var(--mobile-action-size, 72px) + 38px)); }
#ejectBtn { right: max(calc(var(--mobile-action-size, 72px) + 19px), calc(env(safe-area-inset-right) + var(--mobile-action-size, 72px) + 3px)); bottom: max(20px, env(safe-area-inset-bottom)); }
#splitBtn img, #ejectBtn img { width: var(--mobile-action-icon-size, 44px); height: var(--mobile-action-icon-size, 44px); object-fit: contain; pointer-events: none; }
#mobilePauseMenu { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 20px; background: #07141bcc; backdrop-filter: blur(8px); }
#mobilePauseMenu[hidden] { display: none; }
.mobile-pause-card { width: min(360px, 100%); padding: 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px #0007; }
.mobile-pause-card button { display: block; width: 100%; margin-top: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); color: var(--text); font-weight: 700; }
#mobileResumeBtn { margin-top: 0; background: var(--primary); color: var(--primary-text); }
#mobile-keyboard[hidden], #mobile-keyboard button[hidden] { display: none; }
#mobile-keyboard { position: fixed; z-index: 1000; right: 0; bottom: 0; left: 0; display: grid; gap: 6px; padding: 5px max(5px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); border-top: 1px solid #425666; background: #243746; color: #f9fcff; box-shadow: 0 -7px 25px #07121d88; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mobile-keyboard-toolbar { display: flex; align-items: center; gap: 6px; min-height: 29px; font: 600 12px system-ui, sans-serif; }
.mobile-keyboard-toolbar span { flex: 1; }
#mobile-keyboard button { border: 0; border-radius: 6px; color: #182b37; background: #f4f8fb; font: 600 17px system-ui, sans-serif; touch-action: manipulation; }
.mobile-keyboard-toolbar button { min-height: 28px; padding: 2px 11px; background: #b6cad7; font-size: 12px; }
#mobile-keyboard-rows { display: grid; gap: 5px; }
.mobile-keyboard-row, .mobile-keyboard-actions { display: flex; justify-content: center; gap: 3px; }
.mobile-keyboard-row button { flex: 1; min-width: 0; height: 43px; padding: 0; }
#mobile-keyboard .mobile-keyboard-decor button { display: grid; place-items: center; overflow: hidden; font-size: 15px; line-height: 1; }
.mobile-keyboard-row .mobile-keyboard-special { flex: 1.4; background: #b6cad7; }
.mobile-keyboard-actions button { flex: 1; min-width: 0; height: 43px; padding: 0 3px; font-size: 13px; }
.mobile-keyboard-actions [data-key="space"] { flex: 3; }
.mobile-keyboard-actions [data-key="decor"][aria-pressed="true"] { background: #a7efd0; }
.mobile-keyboard-actions [data-key="done"] { flex: 1.8; background: #5ee28b; font-weight: 750; }
body.mobile-keyboard-open #menu-layout { max-height: calc(100dvh - var(--mobile-keyboard-height, 230px)); }
body.mobile-keyboard-open dialog[open] { max-height: calc(100dvh - var(--mobile-keyboard-height, 230px) - 8px); }
@media (max-height: 500px) { .mobile-keyboard-row button { height: 32px; } .mobile-keyboard-actions button { height: 34px; } .mobile-keyboard-toolbar { min-height: 24px; } }
@media (pointer: coarse) {
    #chat-compose { position: fixed; z-index: 40; top: calc(max(12px, env(safe-area-inset-top)) + 132px); left: max(12px, env(safe-area-inset-left)); display: flex; gap: 8px; width: min(420px, calc(100vw - 24px)); opacity: 0; pointer-events: none; }
    #chat-compose:focus-within { opacity: 1; pointer-events: auto; }
    #chat-compose #chat_textbox { position: static; flex: 1; min-width: 0; width: auto; max-width: none; height: 46px; padding: 0 12px; border: 1px solid var(--highlight); background: var(--surface); color: var(--text); text-indent: 0; box-sizing: border-box; transition: none; }
    #mobileChatSendBtn { display: block; flex: 0 0 auto; height: 46px; padding: 0 14px; border: 1px solid var(--highlight); border-radius: 8px; background: var(--primary); color: var(--primary-text); font: 700 14px system-ui, sans-serif; }
    #chat-send-status { position: fixed; z-index: 41; top: calc(max(12px, env(safe-area-inset-top)) + 186px); bottom: auto; left: max(12px, env(safe-area-inset-left)); }
}
@media (max-width: 400px), (max-height: 720px) { #helloDialog, #servers-panel { padding: 22px; } .preferences { margin-top: 14px; } }
@media (max-width: 760px) { #menu-layout { top: 0; left: 0; transform: none; display: flex; flex-direction: column; gap: 16px; width: 100%; height: 100%; max-height: 100dvh; padding: 16px; overflow-y: auto; } #helloDialog, #servers-panel { flex-shrink: 0; max-height: none; } #servers-panel h2 { margin-bottom: 14px; font-size: 24px; } #servers-panel { padding: 20px 24px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.controls-panel { margin-top: 0; border-top: 0; }
.arena-tabs { display: flex; gap: 8px; margin: -8px 0 24px; border-bottom: 1px solid var(--border); }
.arena-tabs button { flex: 1; padding: 14px 4px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-family: inherit; font-size: 18px; font-weight: 650; line-height: 1.25; cursor: pointer; }
.arena-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--highlight); }
#arena-servers[hidden], #arena-practice[hidden], #practice-dialog[hidden], #practice-toolbar[hidden], #spectate-btn[hidden] { display: none; }
#arena-practice h2 { margin: 14px 0; font-size: 25px; }
#arena-practice p { color: var(--muted); font-size: 16px; line-height: 1.6; }
#practice-start, #practice-confirm { width: 100%; background: var(--primary); color: var(--primary-text); }
#practice-status:empty { display: none; }
.practice-modes { display: flex; gap: 8px; }
.practice-modes button { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field); color: var(--muted); font: inherit; cursor: pointer; }
.practice-modes button[aria-pressed="true"] { border-color: var(--highlight); color: var(--text); background: var(--selected); }
.practice-preview { display: block; width: 100%; aspect-ratio: 360 / 202; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: #090d14 url("../img/practice/pop-v3.png") center / contain no-repeat; pointer-events: none; }
.practice-dialog { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: var(--overlay); backdrop-filter: blur(6px); }
.practice-card { width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); }
.practice-card h2 { margin: 0 0 24px; font-size: 25px; }
.practice-card label { display: block; margin: 16px 0 8px; font-size: 17px; }
.practice-card input { width: 100%; font-size: 19px; }
.practice-card select { width: 100%; font-size: 17px; }
#practice-live-time-scale { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--field); font: inherit; cursor: pointer; }
.practice-card p { color: var(--muted); font-size: 15px; line-height: 1.5; }
#practice-form-error { color: #ed5577; }
#practice-cancel { background: var(--secondary); color: var(--text); }
#practice-toolbar { position: fixed; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); font-size: 14px; }
#practice-toolbar button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--field); cursor: pointer; }
@media (max-width: 600px) { #practice-toolbar > span { display: none; } .arena-tabs button { font-size: 17px; } }
.controls-help, #keybind-status { font-size: 13.2px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.keybind-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14.4px; border-top: 1px solid var(--border); }
.keybind-button { flex: 0 0 auto; min-width: 66px; max-width: 150px; padding: 8px 10px; color: var(--text); border: 1px solid var(--border); border-radius: 8px; background: var(--field); font-size: 14.4px; font-weight: 650; }
.keybind-button[aria-pressed="true"] { background: var(--selected); border-color: var(--highlight); }
#keybind-status { min-height: 35px; padding-top: 10px; margin-bottom: 4px; }
#reset-controls { padding: 8px 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 13.2px; text-decoration: underline; }

#connecting-content, #gallery-content { background: var(--surface); color: var(--text); }
#gallery-header { background: var(--field); color: var(--text); padding: 10px; }
.close-gallery { color: var(--text); }
#skinsUL { scrollbar-color: var(--muted) var(--surface); }
:root[data-theme="dark"] #chat_textbox { background: #000c; color: var(--text); }
#chat-messages { position: fixed; z-index: 2; left: 10px; bottom: 55px; max-width: min(700px, calc(100vw - 20px)); max-height: 45vh; overflow: auto; font: 18px/1.35 system-ui, sans-serif; color: #151b24; pointer-events: none; text-shadow: 0 0 4px #fffd; }
#chat-panel { position: fixed; z-index: 2; left: 10px; bottom: 55px; width: min(700px, calc(100vw - 20px)); pointer-events: none; }
#chat-panel[hidden] { display: none; }
#chat-panel #chat-messages { position: static; max-width: 100%; }
#chat-tabs { display: flex; gap: 6px; margin-bottom: 8px; pointer-events: auto; }
#chat-tabs button { padding: 7px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font: 15px system-ui, sans-serif; cursor: pointer; }
#chat-tabs button[aria-selected="true"] { background: var(--primary); color: var(--primary-text); border-color: var(--highlight); }
#chat-tabs button:disabled { opacity: .5; cursor: default; }
.chat-message { display: flex; align-items: baseline; gap: 5px; overflow-wrap: anywhere; }
.chat-author { flex-shrink: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-report { flex-shrink: 0; pointer-events: auto; border: 1px solid #6f8199; border-radius: 5px; background: #ecf2f9e8; color: #33445f; padding: 0 5px; min-width: 24px; min-height: 24px; font: inherit; cursor: pointer; text-shadow: none; }
.chat-report:hover, .chat-report:focus-visible { background: #bbd8ff; outline: 2px solid #4c8ddd; }
.chat-report:disabled { opacity: .6; cursor: default; }
#chat-report-status { position: fixed; z-index: 3; bottom: 13px; left: 325px; max-width: calc(100vw - 340px); padding: 8px 12px; border-radius: 8px; background: #102033ed; color: #eff6ff; font: 13px/1.4 system-ui, sans-serif; pointer-events: none; }
#chat-report-status:empty { display: none; }
:root[data-theme="dark"] #chat-messages { color: #fff; text-shadow: 0 1px 4px #000; }
:root[data-theme="dark"] .chat-report { background: #17283de8; color: #bfdcff; border-color: #456383; }
@media (max-width: 760px) { #chat-messages { max-width: calc(100vw - 20px); font-size: 14px; } #chat-report-status { left: 10px; bottom: 46px; max-width: calc(100vw - 20px); } }