@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; font-family: Manrope, system-ui, sans-serif; color: #e8e5dc; background: #101414; }
.players-panel { position: fixed; right: 14px; top: 82px; z-index: 3; width: 240px; max-height: calc(100vh - 110px); overflow: auto; padding: 14px; border: 1px solid #354038; border-radius: 8px; background: #171d1bf2; box-shadow: 0 16px 50px #0008; }
.players-panel summary { cursor: pointer; font: 12px 'DM Mono', monospace; color: #c5d8b6; }
#player-count { float: right; border-radius: 4px; padding: 0 6px; background: #354038; }
#players-status { color: #a6afa5; font-size: 11px; line-height: 1.5; }
#player-follow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #d9e8b7; font-size: 11px; }
#player-follow[hidden] { display: none; }
#player-follow span { flex: 1; overflow-wrap: anywhere; }
.player-row { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 52px; margin-top: 6px; padding: 8px; text-align: left; }
.player-row img { width: 28px; height: 28px; image-rendering: pixelated; border-radius: 3px; }
.player-row span { min-width: 0; }
.player-row strong, .player-row small { display: block; overflow-wrap: anywhere; }
.player-row strong { font: 600 12px Manrope, sans-serif; }
.player-row small { margin-top: 4px; color: #a6afa5; font-size: 10px; }
.player-row[aria-pressed="true"] { border-color: #b8d597; background: #34452e; }
#player-layer { position: absolute; inset: 0; pointer-events: none; }
.player-head { position: absolute; z-index: 3; pointer-events: auto; width: 30px; min-width: 30px; height: 30px; padding: 2px; border: 1px solid #e4eddb; border-radius: 4px; background: #17211e; box-shadow: 0 2px 8px #000c; transform-origin: center; }
.player-head img { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.player-head.following { outline: 2px solid #b8d597; outline-offset: 3px; }
#player-layer.stale { opacity: .45; }
#waypoint-layer { position: absolute; inset: 0; pointer-events: none; }
.calibration-waypoint { position: absolute; pointer-events: auto; min-width: 28px; width: 28px; height: 28px; padding: 0; border: 1px solid #f3cf72; color: #f3cf72; background: #17211ee8; font-size: 23px; }
.calibration-waypoint.invalid { color: #f5a89b; border-color: #f5a89b; }
.tracking-coordinates { display: flex; gap: 6px; }
.tracking-coordinates label { flex: 1; min-width: 0; }
.tracking-coordinates input { width: 100%; min-width: 0; }
#waypoint-form input { width: 100%; padding: 7px; color: #e5e7df; background: #202825; border: 1px solid #37413b; border-radius: 5px; font: 12px Manrope, sans-serif; }
#waypoint-form button { margin: 4px 0; }
#waypoint-form fieldset { border: 1px solid #37413b; border-radius: 5px; padding: 8px; margin: 10px 0; }
#waypoint-form legend { font-size: 11px; }
#waypoint-form p, #tracking-calibration-state { font-size: 11px; }
#tracking-overlaps { color: #f3cf72; white-space: pre-wrap; }
#tracking-diagnostics { white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.6 'DM Mono', monospace; padding: 8px; background: #101513; }
@media (max-width: 600px) { .players-panel { top: auto; bottom: 12px; right: 10px; width: 200px; max-height: 36vh; padding: 10px; } }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; height: 100vh; overflow: hidden; }
.toolbar { height: 68px; display: flex; align-items: center; gap: 30px; padding: 0 24px; background: #171d1b; border-bottom: 1px solid #2d3530; box-shadow: 0 4px 20px #0005; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; letter-spacing: -.02em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; font-weight: 700; }
.brand small { color: #929c91; font-size: 10px; margin-top: 2px; }
.mark { width: 35px; height: 35px; border-radius: 9px; color: #132019; background: #a8c58f; display: grid; place-items: center; font: 500 11px 'DM Mono', monospace; }
.floor-picker { font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; color: #a6afa5; }
select, button { color: #e5e7df; background: #202825; border: 1px solid #37413b; border-radius: 6px; font: inherit; }
select { margin-left: 8px; padding: 8px 25px 8px 10px; font: 12px Manrope, sans-serif; text-transform: none; letter-spacing: 0; }
.actions { display: flex; gap: 7px; }
button { min-width: 34px; height: 34px; padding: 0 11px; cursor: pointer; font: 12px 'DM Mono', monospace; transition: background .16s ease, border-color .16s ease; }
button:hover { background: #2c3730; border-color: #657860; }
button:focus-visible, select:focus-visible { outline: 2px solid #b8d597; outline-offset: 2px; }
#viewport { position: relative; width: 100%; height: calc(100vh - 68px); overflow: hidden; background-color: #101513; background-image: radial-gradient(#28312c 1px, transparent 1px); background-size: 22px 22px; touch-action: none; }
#map-frame { position: absolute; left: 50%; top: 50%; transform-origin: center; will-change: transform; cursor: grab; }
#map-frame.dragging { cursor: grabbing; }
#map { display: block; image-rendering: pixelated; max-width: none; }
#block-selection { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#section-selection { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#section-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.section-connection-line { fill: none; stroke: #f3cf72; stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .95; }
.section-connection-endpoint { fill: #101512; stroke: #fff0a6; stroke-width: 2; vector-effect: non-scaling-stroke; }
.section-connection-icon { image-rendering: pixelated; }
.section-connection-label { fill: #fff0a6; stroke: #17211e; stroke-width: 3px; paint-order: stroke; font: 12px 'DM Mono', monospace; vector-effect: non-scaling-stroke; }
#section-label-layer { position: absolute; inset: 0; pointer-events: none; }
.section-label { position: absolute; z-index: 1; width: auto; min-width: 34px; height: 26px; padding: 2px 7px; transform: translate(-50%,-50%); color: #f0e9ce; background: #17211ee8; border: 1px solid #c7a969; border-radius: 4px; box-shadow: 0 2px 8px #000b; font: 10px 'DM Mono', monospace; white-space: nowrap; pointer-events: auto; touch-action: none; }
.section-label.selected { outline: 2px solid #e5cb7c; outline-offset: 2px; }
.block-selection-cell { fill: #d8f28a55; stroke: #e7ff9a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.block-selection-proposed { fill: #65e5b044; stroke: #74f3c1; stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.layout-conflict { fill: #ff365777; stroke: #ff3447; stroke-width: 2; vector-effect: non-scaling-stroke; }
#block-selection-status { min-height: 22px; padding: 7px; background: #202825; border-radius: 5px; color: #d5e2cb; font: 11px 'DM Mono', monospace; }
#message { position: absolute; inset: 0; display: grid; place-items: center; margin: auto; color: #b4bcae; font-size: 13px; text-align: center; padding: 30px; pointer-events: none; }
#message[hidden] { display: none; }
.sidebar { position: fixed; z-index: 4; left: 14px; top: 82px; bottom: 14px; width: 278px; overflow: auto; padding: 18px; background: #171d1bf2; border: 1px solid #354038; border-radius: 8px; box-shadow: 0 16px 50px #0008; }
.sidebar[hidden] { display: none; }
.sidebar h2 { margin: 0 0 14px; font-size: 14px; }
.sidebar p, .sidebar label { color: #aeb8aa; font-size: 12px; line-height: 1.5; }
.sidebar label, .sidebar input { display: block; margin: 10px 0; }
.sidebar input[type="password"], .sidebar input[type="file"] { max-width: 100%; color: #e5e7df; font: 11px Manrope, sans-serif; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; }
.sidebar-reopen { position: fixed; z-index: 4; left: 14px; top: 82px; box-shadow: 0 8px 30px #0008; }
.sidebar-reopen[hidden], [hidden] { display: none !important; }
#setup-status, #login-status { min-height: 20px; }
.map-caption { position: absolute; left: 19px; bottom: 17px; padding: 9px 12px; border-radius: 5px; background: #171d1bdb; border: 1px solid #303a34; color: #b5c1ac; font: 10px 'DM Mono', monospace; letter-spacing: .06em; }
#marker-layer { position: absolute; inset: 0; pointer-events: none; }
.map-marker { position: absolute; z-index: 2; width: 28px; height: 28px; min-width: 28px; padding: 2px; border: 2px solid #fff; border-radius: 50%; background-color: #18201d; transform: translate(-50%,-50%) scale(var(--marker-scale, 1)); box-shadow: 0 0 0 3px #101512bd, 0 2px 8px #000b; pointer-events: auto; transition: box-shadow 120ms ease; }
.map-marker img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.map-marker:hover, .map-marker:focus-visible { z-index: 8; transform: translate(-50%,-50%) scale(var(--marker-scale, 1)); box-shadow: 0 0 0 4px #101512d9, 0 4px 12px #000d; }
.map-marker[hidden] { display: none; }
.map-marker.highlighted { outline: 3px solid #f2d36b; outline-offset: 3px; z-index: 2; }
#marker-layer.editing .map-marker { cursor: move; touch-action: none; }
#marker-popup { position: absolute; z-index: 3; min-width: 190px; max-width: 280px; padding: 14px 32px 10px 14px; color: #e8e5dc; background: #171d1bf2; border: 1px solid #87977c; border-radius: 7px; box-shadow: 0 8px 28px #000b; }
#marker-popup p { margin: 7px 0 2px; color: #c0c8bc; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
#marker-tooltip { position: absolute; z-index: 9; display: grid; gap: 2px; min-width: 100px; max-width: 220px; padding: 6px 9px; color: #f0ead8; background: #111715f2; border: 1px solid #677267; border-radius: 5px; box-shadow: 0 3px 10px #000b; transform: translate(-50%,-100%); pointer-events: none; font-size: 11px; }
#marker-tooltip span { color: #c1cabb; font-size: 10px; }
#marker-tooltip[hidden] { display: none; }
#popup-close { position: absolute; right: 4px; top: 4px; min-width: 25px; width: 25px; height: 25px; padding: 0; }
#legend-groups .legend-type { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 7px 0; border-top: 1px solid #303a34; cursor: pointer; color: #d8dfd2; }
.legend-type input { margin: 0; accent-color: #b8d597; }
.legend-type img { width: 24px; height: 24px; border: 1px solid; border-radius: 4px; image-rendering: pixelated; }
.coordinate-inputs { display: flex; gap: 8px; margin-top: 5px; }
.coordinate-inputs input, #marker-form textarea, #marker-form select, #marker-form input:not([type=hidden]):not([type=checkbox]) { width: 100%; padding: 7px; color: #e5e7df; background: #202825; border: 1px solid #37413b; border-radius: 5px; font: 12px Manrope, sans-serif; }
#marker-form input[type=checkbox] { width: auto; margin: 0 6px 0 0; vertical-align: middle; }
#marker-form label { display: block; margin: 8px 0; }
#marker-form button { margin: 4px 3px 0 0; }
.marker-row { display: block; margin: 5px 0; padding: 6px; border-left: 3px solid #73896a; }
.marker-actions { display: flex; gap: 6px; margin: 8px 0; }
.block-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 240px; overflow: auto; margin: 8px 0; }
.block-option { height: auto; min-height: 30px; padding: 5px 7px; text-align: left; text-transform: capitalize; font: 10px Manrope, sans-serif; }
#block-properties label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#block-properties select { min-width: 110px; margin: 0; }
#block-inspector { border-top: 1px solid #303a34; margin-top: 8px; padding-top: 6px; }
#block-inspector[hidden] { display: none; }
#block-inspector { position: fixed; z-index: 5; top: 82px; right: 14px; width: min(310px, calc(100vw - 28px)); max-height: calc(100vh - 100px); overflow: auto; padding: 14px; background: #171d1bf5; border: 1px solid #87977c; border-radius: 8px; box-shadow: 0 12px 36px #000b; }
.editor-section { border-top: 1px solid #303a34; padding: 8px 0; }
.editor-section > summary { cursor: pointer; color: #d8dfd2; font-size: 12px; font-weight: 600; }
.cell-popup { position: absolute; z-index: 4; display: grid; gap: 6px; min-width: 180px; padding: 10px; background: #171d1bf5; border: 1px solid #87977c; border-radius: 7px; box-shadow: 0 8px 28px #000b; }
.cell-popup[hidden] { display: none; }
.cell-popup strong { color: #c5d2b9; font: 10px 'DM Mono', monospace; }
.cell-popup button { text-align: left; }
@media (max-width: 600px) {
  .toolbar { height: 58px; gap: 8px; padding: 0 10px; }
  .brand { gap: 7px; min-width: 0; margin-right: 0; }
  .brand .mark { width: 30px; height: 30px; }
  .brand strong { font-size: 11px; }
  .brand small, .floor-picker, #zoom-out, #zoom-in { display: none !important; }
  #viewport { height: calc(100vh - 58px); }
  .actions { position: static; gap: 5px; }
  #fit { position: fixed; right: 58px; top: 12px; width: 72px; padding: 0 7px; font-size: 11px; white-space: nowrap; }
  #edit-mode { position: fixed; right: 10px; top: 12px; width: 42px; padding: 0 5px; font-size: 11px; }
  .sidebar { left: 10px; right: 10px; top: 68px; bottom: 10px; width: auto; max-width: 320px; padding: 14px; }
  .sidebar-reopen { left: 10px; top: 68px; }
  #block-inspector { top: auto; right: 10px; bottom: 10px; max-height: 46vh; }
}

.section-connection-target { pointer-events: all; cursor: pointer; transform-box: view-box; transform: scale(var(--exit-scale, 1)); }
.section-connection-target:focus .section-connection-endpoint { stroke: white; stroke-width: 4; }

.marker-size-setting { padding: 12px 0; border-bottom: 1px solid #37413b; margin-bottom: 12px; font-size: 12px; }
.marker-size-setting label, .marker-size-setting output { display: block; }
.marker-size-setting input { width: 100%; margin: 10px 0; accent-color: #b8d597; }
.marker-size-setting output { color: #a6afa5; font-size: 11px; }

/* Tracker corrections are an editor-only overlay. */
#tracker-layer { position: absolute; inset: 0; pointer-events: none; }
.tracker-point { position: absolute; pointer-events: auto; width: 26px; min-width: 26px; height: 26px; padding: 0; color: #8ce0db; border: 1px solid #8ce0db; background: #162b2b; }
.tracker-reach { position: absolute; transform: translate(-50%, -50%); border: 1px dashed #8ce0db; border-radius: 50%; background: #8ce0db18; }
.tracker-controls { border-top: 1px solid #465448; margin-top: 16px; padding-top: 8px; }
.tracker-controls output { float: right; color: #8ce0db; }
.tracker-controls input[type="range"] { width: 100%; accent-color: #8ce0db; }
.tracker-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tracker-actions select { min-width: 0; max-width: 100%; }
.tracker-item { padding: 10px 0; border-bottom: 1px solid #465448; }
.tracker-item small { display: block; margin-top: 6px; }
.tracker-item [aria-pressed="true"] { border-color: #8ce0db; }
.tracker-overlaps { white-space: pre-line; color: #f3cf72; }
.tracker-capture { padding: 10px; border: 1px solid #8ce0db; margin-top: 12px; }
.tracker-capture p { overflow-wrap: anywhere; }
.tracker-online-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; border-top: 1px solid #465448; padding-top: 8px; }
.tracker-online-row strong, .tracker-online-row small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.tracker-online-row small { color: #a6afa5; }

/* Recording history follows the map's dark field-notes palette. */
.run-panel { border-top: 1px solid #354038; margin-top: 14px; padding-top: 12px; }
.run-panel label { display: block; color: #bac6b4; font-size: 11px; margin: 8px 0; }
.run-panel input, .run-panel select { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px; color: #e5e7df; background: #202825; border: 1px solid #465044; border-radius: 4px; color-scheme: dark; }
.run-panel small { display: block; color: #acb8a6; font-size: 10px; line-height: 1.6; }
.run-panel button { height: auto; min-height: 30px; white-space: normal; }
.run-status, .run-live, .run-gap { font-size: 11px; line-height: 1.5; color: #acb8a6; }
.run-results { display: grid; gap: 8px; margin: 10px 0; }
.run-card { border-left: 2px solid #8c9186; padding: 5px 0 5px 9px; }
.run-card.win { border-color: #9ec784; }
.run-card.loss { border-color: #dd756a; }
.run-card > button:first-child { width: 100%; text-align: left; background: transparent; padding: 3px 0; border: 0; }
.run-participants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.run-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.run-person img { width: 22px; height: 22px; flex: none; image-rendering: pixelated; border-radius: 3px; border: 1px solid #697562; }
.run-person > span { overflow-wrap: anywhere; }
.run-ampersand { color: #c8c2ad; }
.run-card > button:last-child:not(:first-child) { margin-top: 6px; color: #e1a298; font-size: 10px; }
.run-replay { margin-top: 14px; padding-top: 10px; border-top: 2px solid #c85d52; }
.run-replay h3 { font: 12px 'DM Mono', monospace; color: #ec9c8d; text-transform: uppercase; letter-spacing: .12em; }
.run-title { font-size: 12px; overflow-wrap: anywhere; }
.run-actions { display: flex; gap: 8px; align-items: end; }
.run-actions > * { flex: 1; min-width: 0; }
.run-clock { display: block; font: 12px 'DM Mono', monospace; color: #e4d8ba; }
.run-exit { margin-top: 12px; width: 100%; }
#run-routes, #run-heads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#run-routes { z-index: 1; }
#run-routes polyline { fill: none; stroke: #f2685c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#run-routes .run-route-glow { stroke: #ffd9b1; stroke-width: 10; opacity: .55; filter: drop-shadow(0 0 4px #ff6d58); }
#run-routes .run-route-outline { stroke: #241c19; stroke-width: 6; }
#run-routes .run-route-line { stroke: #ff7968; stroke-width: 3; }
#run-annotations { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.run-annotation { position: absolute; display: flex; align-items: center; gap: 5px; transform-origin: 0 0; color: #f9e9d3; white-space: nowrap; font: 11px 'DM Mono', monospace; }
.run-annotation-icon { width: 28px; height: 28px; line-height: 24px; box-sizing: border-box; text-align: center; flex: none; background: #201d1bee; border: 2px solid #e9c58c; border-radius: 50%; font-size: 21px; font-weight: bold; box-shadow: 0 0 8px #171d1b; }
.run-annotation > span:last-child { background: #171d1bed; padding: 4px 7px; border: 1px solid #6d7361; border-radius: 4px; }
.run-loss-marker .run-annotation-icon { color: #ff9b89; border-color: #ff7968; }
#run-heads { z-index: 3; }
.run-head { position: absolute; width: 26px; height: 26px; image-rendering: pixelated; border: 2px solid #f2685c; background: #171d1b; border-radius: 5px; }
.run-head:nth-child(2) { border-style: dashed; }
.run-endpoint { position: absolute; z-index: 3; color: #b7e193; background: #17251fe8; border: 1px solid #9ec784; border-radius: 50%; width: 28px; height: 28px; text-align: center; line-height: 28px; pointer-events: none; }
.replaying #player-layer { display: none; }
@media (max-width: 600px) { .players-panel:has(.run-replay:not([hidden])) { max-height: 50vh; width: 230px; } }

.run-search-bar { display: flex; align-items: stretch; margin: 10px 0; border: 1px solid #465044; border-radius: 6px; background: #202825; }
.run-search-bar:focus-within { outline: 2px solid #b8d597; outline-offset: 2px; }
.run-search-bar input { flex: 1; width: 0; border: 0; background: transparent; outline: none; }
.run-search-bar .run-date-toggle { display: grid; place-items: center; flex: none; width: 34px; padding: 6px; border: 0; border-left: 1px solid #465044; border-radius: 0 5px 5px 0; }
.run-date-toggle svg { width: 18px; height: 18px; }
.run-date-toggle[data-active="true"] { color: #d9e8b7; background: #34452e; }
.run-date-popover { position: fixed; inset: auto; margin: 0; width: min(280px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; padding: 14px; color: #e5e7df; background: #171d1b; border: 1px solid #657860; border-radius: 8px; box-shadow: 0 12px 36px #0009; }
.run-date-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.run-date-popover input:focus-visible { outline: 2px solid #b8d597; outline-offset: 2px; }
.run-date-clear { margin-top: 10px; }
/* Minecraft Java GUI textures: preserve the original nine-slice borders. */
:root { --ui-text: #f0f0f0; --ui-muted: #bcbcbc; --ui-line: #555; }
.toolbar { background: #252525 url('/ui/menu_background.png') repeat; background-size: 32px; border-bottom: 2px solid #080808; box-shadow: inset 0 -2px #656565, 0 3px #0006; gap: 24px; }
.brand { min-width: 0; }
.brand-logo { display: block; width: 190px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.floor-picker { color: var(--ui-text); text-shadow: 1px 1px #000; }
.sidebar, .players-panel, #block-inspector, #marker-popup, .cell-popup, .run-date-popover {
  border: 6px solid transparent; border-image: url('/ui/popup-background.png') 6 fill / 6px / 0 stretch;
  border-radius: 0; background: #303030; box-shadow: 4px 4px #0007; color: var(--ui-text); image-rendering: pixelated;
}
.sidebar { padding: 14px; }
.players-panel { padding: 10px; }
.sidebar h2, .sidebar h3, .players-panel summary, .editor-section > summary, .run-date-heading, .run-replay h3 { color: var(--ui-text); font-family: 'DM Mono', monospace; text-shadow: 2px 2px #111; }
.sidebar p, .sidebar label, .run-panel label, .run-panel small, .run-status, .run-live, .run-gap, #players-status, .player-row small { color: var(--ui-muted); }
button:not(.map-marker):not(.player-head):not(.calibration-waypoint):not(.tracker-point):not(.minecraft-close):not(.run-annotation-link), select {
  border: 3px solid transparent; border-image: url('/ui/widget-button.png') 3 fill / 3px / 0 stretch;
  border-radius: 0; background: #777; color: var(--ui-text); text-shadow: 1px 2px #292929;
  image-rendering: pixelated; box-shadow: 1px 2px #0008; font-family: 'DM Mono', monospace; transition: none;
}
button:not(.map-marker):not(.player-head):not(.calibration-waypoint):not(.tracker-point):not(.minecraft-close):not(.run-annotation-link):is(:hover, :focus-visible), select:is(:hover, :focus-visible) {
  border-image-source: url('/ui/widget-button_highlighted.png'); color: #ffffa0; background: #888;
}
button:not(.map-marker):not(.player-head):not(.calibration-waypoint):not(.tracker-point):not(.minecraft-close):not(.run-annotation-link):active { translate: 0 1px; box-shadow: none; }
button:disabled { border-image: url('/ui/widget-button_disabled.png') 1 fill / 3px / 0 stretch !important; color: #aaa !important; text-shadow: 1px 1px #222; cursor: not-allowed; }
button:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
select { padding: 5px 8px; }
select option { background: #303030; color: #eee; text-shadow: none; }
.minecraft-close, #popup-close {
  display: grid; place-items: center; flex: none; width: 26px; min-width: 26px; height: 26px; min-height: 26px;
  padding: 0; border: 0; border-radius: 0; background: url('/ui/widget-cross_button.png') center / 22px 22px no-repeat;
  font-size: 0; color: transparent; box-shadow: none; image-rendering: pixelated;
}
.minecraft-close:is(:hover, :focus-visible), #popup-close:is(:hover, :focus-visible) { background-image: url('/ui/widget-cross_button_highlighted.png'); }
.sidebar-heading { gap: 10px; margin-bottom: 12px; }
.sidebar-heading h2 { margin: 0; }
#legend-groups .legend-type { border-color: #484848; color: var(--ui-text); }
.legend-type img { border: 0; border-radius: 0; }
input[type='checkbox'] { appearance: none; display: inline-block; flex: none; width: 18px; height: 18px; border: 0; border-radius: 0; background: url('/ui/widget-checkbox.png') center / contain no-repeat; image-rendering: pixelated; cursor: pointer; vertical-align: middle; }
input[type='checkbox']:checked { background-image: url('/ui/widget-checkbox_selected.png'); }
input[type='checkbox']:is(:hover, :focus-visible) { background-image: url('/ui/widget-checkbox_highlighted.png'); outline: none; }
input[type='checkbox']:checked:is(:hover, :focus-visible) { background-image: url('/ui/widget-checkbox_selected_highlighted.png'); }
#marker-form input[type='checkbox'] { width: 18px; }
.sidebar input:not([type='checkbox']):not([type='range']):not([type='color']), .sidebar textarea, .run-panel input:not([type='range']), #marker-form textarea, #marker-form input:not([type='hidden']):not([type='checkbox']), #waypoint-form input {
  color: #eee; background: #151515; border: 1px solid #777; border-radius: 0; box-shadow: inset 2px 2px #080808;
}
.sidebar input[type='range'], .run-panel input[type='range'] { accent-color: #c6c6c6; }
.run-search-bar { background: #151515; border-color: #777; border-radius: 0; }
.run-search-bar:focus-within { outline-color: #fff; }
.run-panel .run-search-bar input { border: 0; box-shadow: none; }
.run-search-bar .run-date-toggle { border-width: 3px; border-radius: 0; }
.run-date-toggle[data-active='true'] { color: #ffffa0 !important; }
.run-date-toggle[data-active='true']::after { content: ''; position: absolute; width: 4px; height: 4px; background: #ffffa0; transform: translate(8px, 8px); }
.run-card { background: #1d1d1d; border: 2px solid #111; border-left: 3px solid #888; padding: 8px; box-shadow: inset 1px 1px #454545; }
.run-card.win { border-left-color: #9ec784; }
.run-card.loss { border-left-color: #dd756a; }
.run-card > button.run-participants { padding: 5px; }
.run-person img, .player-row img { border-radius: 0; }
.run-panel, .editor-section, .run-replay, .marker-size-setting { border-color: #555; }
#player-count { background: #151515; border: 1px solid #666; border-radius: 0; }
.player-row[aria-pressed='true'] { outline: 2px solid #ffffa0; outline-offset: -2px; }
.map-caption, #marker-tooltip { background: #170d20f2; border: 2px solid #35205d; border-radius: 0; color: #ddd; box-shadow: 2px 2px #0008; }
#marker-tooltip span, #marker-popup p { color: #c4c4c4; }
@media (max-width: 600px) {
  .toolbar { padding: 0 10px; gap: 8px; }
  .brand { margin-right: 138px; }
  .brand-logo { width: min(170px, calc(100vw - 158px)); height: 50px; }
  .sidebar { padding: 12px; }
  .players-panel { padding: 8px; }
}

/* First-visit title screen, using the same Minecraft popup frame. */
#welcome-screen {
  width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 24px 28px;
  overflow: auto; color: #eee; background: #303030; border: 6px solid transparent;
  border-image: url('/ui/popup-background.png') 6 fill / 6px / 0 stretch;
  border-radius: 0; box-shadow: 6px 6px #0008; text-align: center; image-rendering: pixelated;
}
#welcome-screen::backdrop { background: #080b0bed; }
.welcome-logo { display: block; width: min(360px, 100%); height: auto; margin: 0 auto 18px; image-rendering: pixelated; }
.welcome-eyebrow { margin: 0 0 8px; color: #f8ce73; font: 11px 'DM Mono', monospace; }
#welcome-title { margin: 0 0 14px; font: 500 20px/1.4 'DM Mono', monospace; text-shadow: 2px 2px #111; }
#welcome-intro, .welcome-server p { margin: 0; font-size: 13px; line-height: 1.7; color: #c9c9c9; }
#welcome-screen strong { color: #eee; }
.welcome-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; text-align: left; }
.welcome-features p { margin: 0; padding: 12px; background: #222; border: 1px solid #555; box-shadow: inset 2px 2px #171717; }
.welcome-features strong { display: block; margin-bottom: 7px; font: 12px/1.5 'DM Mono', monospace; }
.welcome-features span { color: #bcbcbc; font-size: 12px; line-height: 1.6; }
.welcome-server { padding: 16px 0 0; border-top: 2px solid #555; }
.welcome-server h2 { margin: 0 0 8px; font: 500 14px 'DM Mono', monospace; text-shadow: 2px 2px #111; }
#copy-server-ip { margin-top: 14px; height: 38px; padding: 0 18px; color: #ffffa0; user-select: text; }
.welcome-server #copy-server-status { margin: 8px 0 18px; min-height: 18px; font-size: 11px; color: #c9c9c9; }
#welcome-enter { width: 100%; height: 40px; }
@media (max-width: 600px) {
  #welcome-screen { padding: 18px; }
  .welcome-logo { width: 260px; margin-bottom: 12px; }
  #welcome-title { font-size: 17px; }
  .welcome-features { grid-template-columns: 1fr; gap: 8px; margin: 16px 0; }
  .welcome-features p { padding: 8px 12px; }
  .welcome-features strong { margin-bottom: 2px; }
}

.run-invisibility-start-marker .run-annotation-icon, .run-invisibility-end-marker .run-annotation-icon { color: #c9b2f2; border-color: #ac86db; border-style: dashed; }
.run-startpoint { color: #b5dbff; border-color: #8bbce8; }

.player-missing { box-sizing: border-box; }
.player-missing-portrait { position: relative; flex: 0 0 28px; width: 28px; height: 28px; }
.player-missing-portrait > img:first-child { opacity: .35; }
.player-missing-portrait .player-invisibility-icon { position: absolute; width: 18px; height: 18px; right: -5px; bottom: -4px; image-rendering: pixelated; }

#run-routes .run-invisibility-link { stroke: #bf8cff; stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
.run-annotation-link { pointer-events: auto; cursor: pointer; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; }
.run-annotation-link:focus-visible { outline: 2px solid #bf8cff; outline-offset: 3px; }

#welcome-open, #welcome-open:hover, #welcome-open:focus-visible { height: auto; padding: 0; border: 0; border-image: none; background: transparent; box-shadow: none; cursor: pointer; }