:root { color-scheme: dark; font: 14px/1.5 Arial, Helvetica, sans-serif; color: #dedfd7; background: #171a17; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
[hidden] { display: none !important; }
button, select { font: inherit; color: inherit; border: 1px solid #555b4e; border-radius: 2px; background: #30362c; }
button { cursor: pointer; padding: 9px 16px; }
button:hover { background: #404937; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, select:focus-visible { outline: 2px solid #c2cc9b; outline-offset: 3px; }
.primary { color: #f0f2e5; border-color: #727f5e; background: #4b583d; }
.primary:hover { background: #5b6b49; }
.secondary { background: transparent; }
h1, h2, p { margin: 0; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.7px; }
h2 { font-size: 18px; font-weight: 500; }
.muted { color: #979e90; }
#viewport { display: block; width: 100vw; height: 100dvh; position: fixed; inset: 0; outline: none; }
#pause { position: fixed; inset: 0; display: grid; place-items: center; background: #070d1480; z-index: 2; overflow: auto; padding: 24px; color: #e4eaf0; }
.pause-panel { width: min(100%, 420px); max-height: calc(100dvh - 48px); overflow-y: auto; background: #151e27f5; border: 1px solid #435766; border-radius: 4px; padding: 30px; }
#pause-title { font-size: 24px; font-weight: 600; letter-spacing: -.4px; }
#pause-map { margin: 6px 0 28px; color: #8d9ba6; overflow-wrap: anywhere; }
.pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
#pause button { min-height: 46px; border-radius: 3px; border-color: #536b7d; font-size: 15px; }
#pause button:hover { background: #2b4051; }
#pause button:focus-visible { outline-color: #8cc8ec; }
#pause .primary { color: #f0f6fa; background: #3f627b; border-color: #678da6; font-weight: 600; }
#pause .primary:hover { background: #4c7591; }
#pause .muted { color: #8d9ba6; }
#back-to-maps, #reconnect { width: 100%; margin-top: 10px; }
#reconnect { margin: 0 0 16px; }
select { padding: 9px; }
#pointer-status:empty, #map-warning:empty { display: none; }
#pointer-status, #map-warning { margin-top: 12px; font-size: 12px; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #e0e7cf; text-shadow: 0 1px 3px #000, 0 0 4px #000; font: 12px/1.5 monospace; }
.hud-top, .hud-bottom { position: absolute; left: 20px; right: 20px; display: flex; gap: 20px; align-items: center; }
.hud-top { top: 16px; justify-content: space-between; }
.hud-top span:last-child { color: #bfcca1; }
.hud-bottom { bottom: 16px; right: 140px; flex-wrap: wrap; }
#run-hud { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: grid; text-align: center; font-variant-numeric: tabular-nums; }
#timer { font-size: 22px; }
#timer-state, #checkpoint-count { font-size: 10px; color: #bfcca1; }
#use-hint, #notice { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
#use-hint { top: calc(50% + 25px); }
#notice { bottom: 110px; }
#speed { position: absolute; right: 20px; bottom: 16px; font-size: 18px; font-variant-numeric: tabular-nums; }
#equipment { position: absolute; left: 20px; bottom: 42px; font-size: 11px; }
.appearance-options .volume-control { display: flex; align-items: center; gap: 16px; margin-top: 8px; border: 0; }
.volume-control input { min-width: 0; width: 100%; accent-color: #8cc8ec; }
#crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; opacity: .65; }

.appearance-pause { width: 100%; }
#appearance { width: min(740px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 22px; color: #e4eaf0; background: #151e27; border: 1px solid #435766; overflow: auto; }
#appearance::backdrop { background: #070d14c9; }
.appearance-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.appearance-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(190px, 1fr); gap: 24px; }
#avatar-preview { display: block; width: 100%; height: 460px; cursor: grab; touch-action: none; }
#avatar-preview:active { cursor: grabbing; }
.appearance-options > p { font-size: 12px; margin-bottom: 22px; }
.appearance-options label { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #ffffff17; }
.appearance-options input[type="color"] { width: 54px; height: 34px; padding: 3px; background: transparent; border: 1px solid #536b7d; cursor: pointer; }
.appearance-options input:focus-visible { outline: 2px solid #8cc8ec; outline-offset: 3px; }
#appearance-reset { margin: 24px 0 16px; }
@media (max-width: 600px) {
  #appearance { padding: 16px; }
  .appearance-body { grid-template-columns: 1fr; gap: 20px; }
  #avatar-preview { height: 300px; }
  .appearance-options > p { margin-bottom: 8px; }
}

#appearance { scroll-padding-top: 180px; }
.settings-header { position: sticky; top: -22px; z-index: 2; padding: 8px 0 12px; background: #151e27; }
.settings-tabs { display: flex; gap: 20px; border-bottom: 1px solid #607b8d66; margin-bottom: 8px; }
.settings-tabs button { padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #8d9ba6; }
.settings-tabs button[aria-selected="true"] { color: #e4eaf0; border-bottom-color: #8cc8ec; }
.appearance-options .nickname-setting { display: block; border: 0; padding: 0 0 16px; }
#nickname { display: block; margin-top: 7px; width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: inherit; background: #0e161e; border: 1px solid #536b7d; }
#settings-status { margin: 8px 0; font-size: 12px; min-height: 18px; }
.bindings-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 12px 0 18px; }
.bindings-table th { text-align: left; font-weight: normal; }
.bindings-table thead { color: #8d9ba6; font-size: 12px; }
.bindings-table th:first-child { width: 44%; }
.bindings-table th, .bindings-table td { padding: 7px 6px; border-bottom: 1px solid #ffffff17; }
.binding-key { width: 100%; padding: 6px 8px; min-height: 34px; background: #1b2a36; }
.binding-key.capturing { background: #3f627b; border-color: #8cc8ec; }
.binding-help { font-size: 12px; margin-bottom: 16px; }
#appearance .muted { color: #8d9ba6; }
#appearance button { border-color: #536b7d; }
#appearance button:hover { background: #2b4051; }
#appearance button:focus-visible { outline-color: #8cc8ec; }
#appearance .settings-tabs button { border-color: transparent; }
#appearance .settings-tabs button[aria-selected="true"] { border-bottom-color: #8cc8ec; }
#settings-status:empty, #appearance-status:empty { display: none; }

#scoreboard { position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); width: min(740px,calc(100% - 32px)); z-index: 1; color: #e4eaf0; background: #151e27f5; border: 1px solid #435766; border-radius: 4px; padding: 20px; pointer-events: none; }
.score-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.score-heading h2 span { color: #8d9ba6; font-size: 13px; margin-left: 8px; }
[data-score-map] { color: #8d9ba6; font-size: 12px; }
#scoreboard table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
#scoreboard th { font-weight: normal; color: #8d9ba6; font-size: 12px; text-align: left; }
#scoreboard th, #scoreboard td { padding: 10px 8px; border-bottom: 1px solid #ffffff17; }
#scoreboard th:first-child { width: 27%; }
#scoreboard th:nth-child(2) { width: 23%; }
#scoreboard th:nth-child(3) { width: 20%; }
#scoreboard th:nth-child(4), #scoreboard th:nth-child(5) { width: 7%; }
#scoreboard th:last-child { width: 16%; }
#scoreboard td:last-child { white-space: nowrap; }
#scoreboard td:first-child { overflow-wrap: anywhere; }
#scoreboard .local-player { background: #47647a60; }
#scoreboard > p { margin-top: 14px; font-size: 12px; }
#scoreboard .muted { color: #8d9ba6; }
@media (max-width:600px) {
  .settings-header { top: -16px; }
  #appearance { scroll-padding-top: 220px; }
  .bindings-table th:first-child { width: 40%; }
  .bindings-table { font-size: 12px; }
  .binding-key { padding: 5px 3px; overflow-wrap: anywhere; }
  #scoreboard { padding: 12px; }
  #scoreboard th, #scoreboard td { padding: 8px 4px; font-size: 11px; }
}

/* Lobby palette. */
#menu { --menu-muted:#8d9ba6; --menu-line:#ffffff17; --menu-accent:#8cc8ec; position:relative; isolation:isolate; min-height:100dvh; color:#e4eaf0; background:#0e141a; font-size:clamp(14px,.85vw,18px); }
.menu-backdrop { position:absolute; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(90deg,#0e141af5 0%,#10171ee8 42%,#101820c9 100%),url('/src/assets/menu/kz_gigacave.jpg') center/cover no-repeat; }
.menu-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#0a1018eb,transparent 60%,#10182030); }
.menu-shell { width:min(1920px,calc(100% - clamp(40px,10vw,256px))); min-height:100dvh; margin:auto; padding:clamp(32px,6vh,96px) 0 30px; display:flex; flex-direction:column; }
.menu-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 clamp(32px,5vh,72px); }
.brand { display:flex; align-items:center; gap:15px; margin:0; line-height:1; }
.brand img { width:clamp(42px,3.5vw,70px); height:auto; }
.brand-word { font-size:clamp(30px,2.65vw,52px); font-weight:800; letter-spacing:-1.8px; }
.brand-domain { color:#93a9b9; font-weight:400; letter-spacing:-1.5px; }
#menu button { border-radius:3px; }
#menu button:focus-visible { outline:2px solid var(--menu-accent); outline-offset:3px; }
#menu .menu-settings { display:flex; align-items:center; gap:12px; border:1px solid transparent; background:none; color:#bdc8d2; padding:10px 0 10px 16px; }
#menu .menu-settings:hover { color:#fff; }
.menu-settings svg { width:23px; height:23px; }
.menu-tabs { display:flex; gap:14px; border-bottom:1px solid #607b8d66; margin-bottom:clamp(32px,5vh,64px); }
#menu .menu-tabs button { border:0; border-bottom:2px solid transparent; border-radius:3px 3px 0 0; background:transparent; color:#a4b1bc; font-size:clamp(16px,1.1vw,22px); padding:16px 36px 17px; min-width:190px; }
#menu .menu-tabs button:hover { color:#f2f6fa; background:#829fb20b; }
#menu .menu-tabs button[aria-selected="true"] { background:#47647a45; color:#f2f6fa; border-bottom-color:#8cc8ec; font-weight:600; }
.menu-content { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:clamp(36px,4vw,88px); align-items:start; }
.menu-browser { min-width:0; }
.browser-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; }
.browser-heading h2 { font-size:clamp(24px,1.8vw,34px); font-weight:600; letter-spacing:-.5px; }
.browser-count { color:var(--menu-muted); font-size:.8em; white-space:nowrap; }
#menu .table-heading { color:#97a8b5; font-size:.7em; letter-spacing:1px; text-transform:uppercase; padding:0 18px 13px; }
.server-columns, #menu .server-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) 72px 70px; gap:16px; align-items:center; }
.map-columns, #menu .map-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 100px; gap:16px; align-items:center; }
.table-heading span:nth-last-child(-n+2), .server-row span:nth-last-child(-n+2), .map-row span:last-child { text-align:right; }
#server-list { min-height:clamp(210px,29vh,420px); }
#map-list { max-height:clamp(250px,40vh,600px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#566d7c #ffffff05; }
#menu .server-row, #menu .map-row { width:100%; min-height:58px; margin:0; padding:15px 18px; border:1px solid transparent; border-bottom-color:var(--menu-line); background:transparent; text-align:left; }
#menu .server-row:hover, #menu .map-row:hover { background:#718b9e15; }
#menu .server-row[aria-pressed="true"], #menu .map-row[aria-pressed="true"] { background:#47647a60; border-color:#688ca34d; box-shadow:inset 3px 0 #8cc8ec; }
.server-row > span:first-child { font-weight:600; }
.server-row > span, .map-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-map, .map-kind, .map-size { color:#afbdc8; }
#menu .server-ping { font-variant-numeric:tabular-nums; color:#a2d5f3; }
#menu .server-players { font-variant-numeric:tabular-nums; }
#menu .browser-note:empty { display:none; }
#menu .browser-note { color:var(--menu-muted); font-size:.8em; min-height:1.5em; margin-top:20px; }
.launch-row { display:flex; align-items:center; gap:16px; margin-top:30px; }
#menu .launch-row button { min-height:50px; padding:12px 26px; font-size:1em; }
#menu .primary { color:#f0f6fa; background:#3f627b; border-color:#678da6; font-weight:600; min-width:200px; display:flex; justify-content:space-between; align-items:center; gap:28px; }
#menu .primary:hover { background:#4c7591; }
#menu .primary span { color:#b1d8ee; font-size:1.3em; line-height:1; }
#menu .secondary { border-color:#62758377; background:transparent; color:#c4cfd8; }
#menu .secondary:hover { background:#ffffff08; border-color:#8fa4b3; }
#menu button:disabled { opacity:.4; cursor:default; }
#status { min-height:22px; margin-top:16px; font-size:.85em; color:#a5cce5; }
#status.error, #pointer-status { color:#e6b59f; }
.map-detail { padding-top:5px; }
.map-art { width:100%; aspect-ratio:1.6; position:relative; overflow:hidden; border:1px solid #8ea2b326; border-radius:5px; background:#111b24; }
#map-preview { width:100%; height:100%; display:block; object-fit:cover; }
#preview-empty { position:absolute; inset:0; display:grid; place-items:center; color:#718596; font-size:.9em; }
.preview-label { position:absolute; bottom:12px; left:14px; padding:3px 7px; background:#0b131acc; color:#d8e3ea; font-size:10px; letter-spacing:.7px; text-transform:uppercase; }
.detail-heading { margin:24px 0; }
.detail-context { color:#7e9db3; text-transform:uppercase; letter-spacing:1.8px; font-size:10px; margin-bottom:6px; }
#detail-name { font-size:clamp(25px,1.8vw,36px); font-weight:600; letter-spacing:-.7px; overflow-wrap:anywhere; }
.map-facts { margin:0; display:grid; gap:12px; }
.map-facts > div { display:flex; justify-content:space-between; gap:24px; }
.map-facts dt { color:#8f9da9; font-size:.8em; text-transform:uppercase; letter-spacing:1px; }
.map-facts dd { margin:0; color:#ccd7df; text-align:right; }
#map-description { color:var(--menu-muted); font-size:.75em; margin-top:20px; }
.menu-content { padding-bottom:48px; }
@media (min-width:2200px) { .server-columns, #menu .server-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) 100px 100px; } #menu .server-row,#menu .map-row { min-height:68px; } }
@media (max-width:1050px) { .menu-content { grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr); gap:30px; } .menu-shell { width:calc(100% - 64px); } .server-columns, #menu .server-row { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 54px 52px; gap:10px; } #menu .server-row { padding:13px 10px; } #menu .table-heading { padding-left:10px; padding-right:10px; } }
@media (max-width:760px) { .menu-shell { width:calc(100% - 36px); padding-top:28px; } .menu-header { margin-bottom:28px; } .brand { gap:8px; } .brand-word { font-size:28px; letter-spacing:-1px; } .brand-domain { letter-spacing:-1px; } .brand img { width:38px; } #menu .menu-settings { gap:7px; padding:8px 0; font-size:12px; } .menu-settings svg { width:18px; height:18px; } #menu .menu-tabs button { flex:1; min-width:0; padding:13px 10px; font-size:16px; } .menu-tabs { margin-bottom:28px; gap:8px; } .menu-content { grid-template-columns:1fr; gap:32px; } .map-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; } .map-art { grid-column:1; grid-row:1/4; } .detail-heading { margin:0 0 14px; } #detail-name { font-size:21px; } .map-facts { gap:8px; font-size:12px; } #map-description { grid-column:1/-1; margin-top:12px; } #server-list { min-height:130px; } .browser-heading { margin-bottom:24px; } #menu .server-row { font-size:12px; min-height:52px; } .server-columns,#menu .server-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 44px 46px; gap:8px; } #menu .table-heading { font-size:9px; letter-spacing:.5px; } .map-columns,#menu .map-row { grid-template-columns:minmax(0,1fr) 54px 68px; gap:10px; } #menu .map-row { padding:12px 10px; min-height:50px; } .launch-row { gap:12px; margin-top:24px; } #menu .launch-row button { padding:10px 20px; } #menu .primary { min-width:180px; } }
@media (prefers-reduced-motion:no-preference) { #menu button { transition:background-color .12s,border-color .12s,color .12s; } }
@media (min-width:1051px) { .menu-content { grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr); } }
@media (max-height:850px) and (min-width:761px) {
  .menu-shell { padding-top:28px; padding-bottom:22px; }
  .menu-header { margin-bottom:28px; }
  .menu-tabs { margin-bottom:30px; }
  .menu-content { padding-bottom:28px; }
  .map-art { aspect-ratio:1.85; }
  .detail-heading { margin:16px 0; }
  .map-facts { gap:8px; }
  #map-description { margin-top:14px; }
}