/* BoBo Autonomous - public campus simulation. Black and red theme. */
:root {
  --bg: #050506;
  --red: #ff2d3d;
  --red-dim: #7a1020;
  --text: #f5f5f7;
  --text-2: rgba(245, 245, 247, .62);
  --glass: rgba(18, 18, 20, .62);
  --glass-edge: rgba(255, 255, 255, .10);
  --radius: 18px;
  --gap: 14px;
  --panel-width: 280px;
  --topbar-height: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

/* ---------- map stage ---------- */
.stage { position: fixed; inset: 0; }
.stage canvas#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.stage canvas#scene.adding { cursor: crosshair; }

.labels { position: absolute; inset: 0; pointer-events: none; }
.lbl {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
  color: var(--text); text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  white-space: nowrap;
}
.lbl.pt { font-size: 12px; background: rgba(0, 0, 0, .6); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 2px 9px; }
.lbl.pt.b { color: var(--red); border-color: rgba(255, 45, 61, .5); }
.lbl.r1 { font-size: 11px; background: rgba(0, 0, 0, .6); border: 1px solid; border-radius: 999px; padding: 0 6px; }
.r1-scroll { max-height: 240px; overflow: auto; margin-top: 6px; }
.r1-table { font-size: 10.5px; }
.r1-table td { white-space: nowrap; }
.r1-table th, .r1-table td { padding-left: 2px; padding-right: 2px; }
.r1-table td:last-child { text-align: left; }

/* ---------- north arrow ---------- */
.north {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text); pointer-events: none; z-index: 4;
  transition: transform .2s var(--ease);
}
.north svg { width: 22px; height: 22px; color: var(--red); }
.north span { font-size: 11px; font-weight: 700; letter-spacing: .1em; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 12px; left: 12px; right: 12px; height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; z-index: 6;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red); flex: none; }
.brand h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--red); white-space: nowrap; }
.brand h1 b { color: var(--text); font-weight: 600; }
.brand p { margin: 0; color: var(--text-2); font-size: 12px; white-space: nowrap; }

.views { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .05); border-radius: 999px; border: 1px solid var(--glass-edge); }
.seg {
  appearance: none; border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg[aria-pressed="true"] { background: var(--red); color: #fff; }

/* ---------- side panels ---------- */
.panel {
  position: fixed; top: calc(var(--topbar-height) + 24px); bottom: 96px; width: var(--panel-width);
  padding: 14px 16px; overflow-y: auto; z-index: 5;
  overscroll-behavior: contain;
}
.panel.left { left: 12px; }
.panel.right { right: 12px; }
.panel section + section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-edge); }
.panel h2 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: 8px;
}

dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; }
dt { color: var(--text-2); font-size: 12.5px; }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }

.hint-text { color: var(--text-2); font-size: 12px; margin: 8px 0 6px; min-height: 1.4em; }
.coords { list-style: none; margin: 0; padding: 0; }
.coords li { display: grid; grid-template-columns: 18px 1fr; gap: 0 8px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.coords b { grid-row: span 2; color: var(--text); }
.coords .k { color: var(--text-2); font-size: 11.5px; }
.coords .v { font-size: 12px; }

.obs-list, .team-list, .cam-list { list-style: none; padding: 0; margin: 0 0 10px; }
.obs-list { max-height: 150px; overflow-y: auto; }
.obs-list li, .cam-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.obs-list button {
  appearance: none; border: 1px solid var(--glass-edge); background: transparent; color: var(--text-2);
  border-radius: 8px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer;
}
.obs-list button:hover { color: var(--red); border-color: var(--red); }
.cam-list li { font-size: 11.5px; color: var(--text-2); justify-content: flex-start; }
.team-list { columns: 2; }
.team-list li { font-size: 13px; padding: 2px 0; break-inside: avoid; }
.team-list li.empty { color: var(--text-2); }
.team-section small { color: var(--text-2); font-size: 11px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* status lights next to the section titles */
.led { width: 7px; height: 7px; border-radius: 50%; background: #3a3a40; display: inline-block; transition: background .2s, box-shadow .2s; }
.led.on { background: var(--red); box-shadow: 0 0 10px var(--red); }

/* progress and sensor bars */
.progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 10px; }
.progress-txt { display: flex; justify-content: space-between; color: var(--text-2); font-size: 11.5px; margin-top: 4px; }
.fill { height: 100%; width: 0%; background: var(--text-2); border-radius: inherit; transition: width .2s linear, background .2s; }
.progress .fill { background: var(--red); }
.bar-row { display: grid; grid-template-columns: 46px 1fr 62px; align-items: center; gap: 8px; font-size: 12.5px; margin: 6px 0; }
.bar-row b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar .fill.hot { background: var(--red); box-shadow: 0 0 8px var(--red); }

canvas#radar, canvas#camera {
  display: block; width: 100%; height: auto; border-radius: 12px;
  background: #0b0b0e; border: 1px solid var(--glass-edge); margin-bottom: 8px;
}

/* event log */
.log { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; font-size: 12px; }
.log li { display: grid; grid-template-columns: 44px 84px 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.log .t { color: var(--text-2); font-variant-numeric: tabular-nums; }
.log b { color: var(--red); font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .06);
  color: var(--text); font: inherit; font-weight: 600; font-size: 13px;
  height: 38px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: #ff4a58; }
.btn.small { height: 30px; font-size: 12px; padding: 0 10px; border-radius: 9px; }
.btn[aria-pressed="true"] { border-color: var(--red); color: var(--red); }

/* ---------- bottom controls ---------- */
.controls {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; z-index: 6;
  max-width: calc(100vw - 24px); flex-wrap: wrap; width: max-content;
}
.speed-ctl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 0 6px; }
.speed-ctl input { accent-color: var(--red); width: 130px; }
.speed-ctl span { color: var(--text); font-variant-numeric: tabular-nums; min-width: 66px; }

.alert {
  position: fixed; top: calc(var(--topbar-height) + 26px); left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); padding: 12px 16px; z-index: 7;
  border-color: rgba(255, 45, 61, .6); box-shadow: 0 0 24px rgba(255, 45, 61, .25);
  font-size: 13px; line-height: 1.5;
}
.alert-title { color: var(--red); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; margin-bottom: 2px; }
.alert #alertWhat { font-weight: 600; }
.alert #alertSensors, .alert #alertWhere { color: var(--text-2); font-size: 12.5px; }

.plan-msg { color: var(--text-2); font-size: 12px; padding: 0 8px; width: 100%; text-align: center; min-height: 1em; }

/* waypoint rows: name, label and coordinates, with a remove button */
.coords .wp { grid-template-columns: 18px 1fr auto; }
.coords .wp button {
  grid-row: span 2; align-self: center;
  appearance: none; border: 1px solid var(--glass-edge); background: transparent; color: var(--text-2);
  border-radius: 8px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer;
}
.coords .wp button:hover { color: var(--red); border-color: var(--red); }
.map-hint { color: var(--text-2); font-size: 11px; margin: 0; line-height: 1.4; }

/* map view buttons, bottom right */
.navpad { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 6px; padding: 6px; z-index: 6; }
.navpad .btn { min-width: 36px; padding: 0 8px; }

.credit { position: fixed; left: 14px; bottom: 6px; font-size: 10.5px; color: var(--text-2); z-index: 4; }
.credit a { color: var(--text-2); }

/* ---------- site QR code, bottom left. Size, position and colours come from config.js SITE_QR,
   which qr.js writes onto :root as --qr-* custom properties. ---------- */
.site-qr {
  position: fixed; left: var(--qr-left, 12px); bottom: var(--qr-bottom, 26px); z-index: 4;
  display: block; padding: var(--qr-badge-pad, 5px); margin: 0; border: 0; line-height: 0;
  background: #fff; border-radius: var(--qr-badge-radius, 10px); cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.site-qr img { display: block; width: var(--qr-badge-size, 62px); height: var(--qr-badge-size, 62px); }
.site-qr:hover, .site-qr:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px var(--red), 0 8px 26px rgba(255, 45, 61, .4);
}

.qr-overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(5, 5, 6, var(--qr-backdrop, .82));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.qr-card {
  background: #fff; padding: var(--qr-large-pad, 18px); border-radius: 18px; line-height: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
}
.qr-card img { display: block; width: var(--qr-large-size, 420px); height: var(--qr-large-size, 420px); }
.qr-caption { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.qr-url { margin: 0; font-size: 15px; color: var(--text); word-break: break-all; text-align: center; max-width: calc(100vw - 48px); }
.qr-close { position: fixed; top: 18px; right: 18px; }

/* 1100px = SITE_QR.MIN_SCREEN_PX - 1 in config.js (CSS cannot read the config).
   Below it the control bar sits in the bottom-left corner, so the badge is hidden. */
@media (max-width: 1100px) {
  .site-qr { display: none; }
}

/* ---------- corner mini-map (top right). Size comes from config.js MINIMAP. ---------- */
.minimap {
  position: fixed; top: calc(var(--topbar-height) + 24px); right: calc(12px + min(400px, 36vw) + 12px); z-index: 5;
  overflow: hidden; padding: 0; border-radius: var(--radius);
}
.minimap .leaflet-container { background: #050506; font: inherit; }
.minimap .leaflet-control-attribution { font-size: 9px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .6); }
.minimap .leaflet-control-attribution a { color: rgba(255, 255, 255, .85); }
/* the robot dot blinks; --blink-ms is set from config.js */
.robot-dot { animation: robot-blink var(--blink-ms, 700ms) steps(2, start) infinite; }
@keyframes robot-blink { to { opacity: .15; } }
/* the mini-map can be dragged; the handle is its top-right corner */
.minimap-handle {
  position: absolute; top: 6px; right: 6px; z-index: 1000; cursor: move; touch-action: none; user-select: none;
  height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11px; line-height: 22px;
  color: var(--text-2); background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .15);
}


/* Mini-map: map fills the frame; zoom and size controls sit in the top-left corner */
.minimap-map { position: absolute; inset: 0; }
.minimap-tools { position: absolute; top: 6px; left: 6px; z-index: 1000; display: flex; gap: 4px; }
.minimap-tools .minimap-btn { padding: 2px 8px; font-size: 12px; line-height: 1.3; }

/* Team name in the left panel header */
#teamName { color: #ffffff; }

/* Team member links on the campus page: white, bold, underlined */
.team-list a { color: #ffffff; font-weight: 700; text-decoration: underline; }

/* Building bar: opens under the top bar when a building is clicked */
.bld-bar { position: fixed; top: calc(var(--topbar-height) + 12px); left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; max-width: calc(100vw - 24px); flex-wrap: wrap; }
.bld-bar[hidden] { display: none; }
.bld-bar input { accent-color: var(--red); width: 140px; }
.bld-name { font-weight: 700; }
.bld-pct { min-width: 40px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Map edit panel: opens under the top bar */
.edit-panel { position: fixed; top: calc(var(--topbar-height) + 56px); left: 50%; transform: translateX(-50%); z-index: 9; width: min(300px, calc(100vw - 24px)); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.edit-panel[hidden] { display: none; }
.edit-head { display: flex; align-items: center; justify-content: space-between; }
.edit-form { display: flex; flex-direction: column; gap: 6px; }
.edit-form[hidden] { display: none; }
.edit-form input { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: inherit; font: inherit; }
.edit-form input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.edit-form .btn { align-self: flex-start; }
.edit-row { display: flex; flex-wrap: wrap; gap: 6px; }
.edit-msg { margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 11.5px; color: var(--text-2); max-height: 120px; overflow: auto; }
.edit-msg:empty { display: none; }

/* ---------- Mission points table (left panel) ---------- */
.pts-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pts-table th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; padding: 0 4px 6px; }
.pts-table td { padding: 5px 4px; border-top: 1px solid rgba(255, 255, 255, .06); white-space: nowrap; }
.pts-table .num { text-align: right; }
.pts-table td.pt { font-weight: 700; }
.pts-table td:last-child { text-align: right; }
.pts-table td .btn { height: 22px; font-size: 11px; padding: 0 6px; }

/* ---------- Sensor dashboard (right side, two columns) ---------- */
.panel.right.dash { width: min(400px, 36vw); padding: 10px; top: calc(var(--topbar-height) + 24px); bottom: auto; max-height: calc(100vh - var(--topbar-height) - 150px); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-grid .tile { margin: 0; padding: 6px 8px; min-width: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.tile.wide { grid-column: 1 / -1; }
.tile h3 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.tile canvas { display: block; max-width: 100%; height: auto; margin: 0 auto 4px; }
.tile dl { margin: 0; }
.tile dd { font-size: 11.5px; }
.tile .log { max-height: 120px; }

/* ---------- movable windows: grip bars and grips ---------- */
.grip { text-align: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); cursor: move; user-select: none; touch-action: none; padding: 0 0 6px; margin: -4px -4px 8px; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.grip-inline { cursor: move; user-select: none; touch-action: none; color: var(--text-2); font-size: 16px; line-height: 1; padding: 0 4px; }
.edit-head { cursor: move; user-select: none; }

/* ---------- map arrows and zoom buttons (navpad) ---------- */
.navpad { align-items: center; gap: 6px; }
.pan-pad { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 26px); gap: 3px; }
.pan-pad .btn { min-width: 0; padding: 0; height: 26px; font-size: 10px; }
.pan-pad .blank { visibility: hidden; }
.zoom-grid { display: grid; grid-template-columns: repeat(2, 30px); gap: 3px; }
.zoom-grid .btn { min-width: 0; padding: 0; height: 26px; }
.zoom-grid .wide { grid-column: span 2; }

/* ---------- dashboard: fits on one screen ---------- */
.dash-grid .tile dl { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin: 0; }
.dash-grid .tile dd { text-align: right; }
.tile-count { font-size: 10px; letter-spacing: .02em; text-transform: none; color: var(--text-2); font-weight: 500; }
.tile .cam-list { max-height: 16px; overflow: hidden; margin: 2px 0 0; padding: 0; list-style: none; font-size: 10.5px; color: var(--text-2); }
.dash-grid .tile dl.quad { grid-template-columns: auto 1fr auto 1fr; gap: 0 6px; }
.dash-grid .tile dl.quad dd { text-align: left; }
/* desktop: the control bar sits a little left of centre so it clears the map navpad */
@media (min-width: 1101px) { .controls { left: calc(50% - 60px); } }

/* ---------- datasheets panel ---------- */
.ds-panel { left: calc(50% + 170px); transform: none; }
.ds-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ds-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.ds-list a { color: var(--text-1, inherit); font-weight: 600; text-decoration: none; }
.ds-list a:hover, .ds-list a:focus-visible { text-decoration: underline; }
.ds-note { font-size: 11.5px; color: var(--text-2); }
@media (max-width: 760px) {
  .ds-panel { left: 12px; right: 12px; width: auto; transform: none; }
}

/* ---------- object dialog, object bar and path bar ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label, .field-inline { font-size: 12px; color: var(--text-2); }
.field-inline { display: inline-flex; align-items: center; gap: 6px; }
.edit-form select, .field select {
  height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .35); color: inherit; font: inherit;
}
.field input[type="number"], .path-bar input[type="number"] {
  height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .35); color: inherit; font: inherit; width: 100%;
}
.path-bar input[type="number"] { width: 64px; height: 28px; padding: 0 6px; }
.path-bar input[type="checkbox"] { accent-color: var(--red); width: auto; }
.field input[type="color"] { width: 100%; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; }
.field select:focus, .field input:focus, .path-bar input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.obj-dialog { max-height: calc(100vh - var(--topbar-height) - 120px); overflow-y: auto; }
.path-bar { flex-wrap: wrap; justify-content: center; }
.path-bar input[type="number"] + .field-inline, .path-bar .field-inline { color: var(--text-2); }

/* ---------- drawers: the side panels on tablets and phones ----------
   1100px = LAYOUT_DESKTOP_MIN_PX - 1 in config.js (CSS cannot read the config).
   Below it the map gets the whole screen; Info and Sensors open as drawers from the control bar. */
.drawer-toggle { display: none; }
@media (max-width: 1100px) {
  :root { --panel-width: 250px; --controls-h: 96px; }
  .brand p { display: none; }
  .drawer-toggle { display: inline-flex; }
  .controls { left: 12px; bottom: 10px; transform: none; max-width: calc(100vw - 236px); }   /* beside the map pad */
  .navpad { bottom: 10px; }
  .panel.left:not(.open), .panel.right.dash:not(.open) { display: none; }
  .panel.left.open, .panel.right.dash.open {
    top: calc(var(--topbar-height) + 22px); bottom: calc(var(--controls-h) + 14px);
    max-height: none; transform: none;
  }
  .panel.left.open { left: 12px; right: auto; width: min(340px, calc(100vw - 180px)); }
  .panel.right.dash.open { right: 12px; left: auto; width: min(380px, calc(100vw - 24px)); }
  .north { bottom: calc(var(--controls-h) + 14px); }
  .minimap { right: 12px; }
}
@media (max-width: 760px) {
  :root { --controls-h: 150px; --topbar-height: 56px; }
  .topbar { left: 8px; right: 8px; top: 8px; padding: 0 10px; gap: 8px; }
  .brand h1 b { display: none; }
  .brand h1 { font-size: 16px; }
  .views .seg { padding: 6px 9px; font-size: 11.5px; }
  .controls { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; width: auto; gap: 6px; padding: 6px; justify-content: center; }
  .controls .btn { height: 32px; padding: 0 10px; font-size: 12px; }
  .speed-ctl { width: 100%; justify-content: center; }
  .speed-ctl input { width: 50vw; }
  .navpad { right: 8px; bottom: calc(var(--controls-h) + 16px); padding: 4px; }
  .north { bottom: calc(var(--controls-h) + 16px); }
  .panel.left.open, .panel.right.dash.open {
    left: 8px; right: 8px; width: auto; top: calc(var(--topbar-height) + 16px); bottom: calc(var(--controls-h) + 16px);
  }
  .minimap { top: calc(var(--topbar-height) + 16px); right: 8px; width: 120px !important; height: 92px !important; }
  .minimap .leaflet-control-attribution { display: none; }
  .alert { top: calc(var(--topbar-height) + 16px); }
  .bld-bar, .path-bar { top: calc(var(--topbar-height) + 16px); max-width: calc(100vw - 16px); }
  .edit-panel, .obj-dialog { top: calc(var(--topbar-height) + 16px); width: calc(100vw - 16px); }
  .credit { display: none; }
}

/* Robot Controller button in the header */
#controllerLink, #accountLink { white-space: nowrap; }
@media (max-width: 560px) { #controllerLink .long { display: none; } }

/* ---------- neon accents (3D look) ----------
   Same black and red palette; red light is used for glow, edges and focus only. */
:root {
  --neon: #ff2d3d;
  --neon-edge: rgba(255, 45, 61, .28);
  --neon-glow: 0 0 18px rgba(255, 45, 61, .45);
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6) 100%);
}
.brand h1 { text-shadow: 0 0 14px rgba(255, 45, 61, .55); }
.brand .dot { animation: neon-breathe 2.8s ease-in-out infinite; }
.seg[aria-pressed="true"] { box-shadow: var(--neon-glow), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn-red { box-shadow: 0 0 16px rgba(255, 45, 61, .4); }
.lbl.pt.b { text-shadow: 0 0 10px var(--neon), 0 1px 6px rgba(0, 0, 0, .9); }
.topbar, .panel, .controls, .navpad, .minimap, .bld-bar, .alert, .edit-panel {
  border-color: var(--neon-edge);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 45, 61, .12);
}
.views { box-shadow: 0 0 22px rgba(255, 45, 61, .14); }
@keyframes neon-breathe {
  0%, 100% { box-shadow: 0 0 10px var(--neon); }
  50% { box-shadow: 0 0 22px var(--neon), 0 0 4px #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .dot { animation: none; }
}

/* phones: the view buttons get their own full-width row under the brand, so four of them fit */
@media (max-width: 560px) {
  :root { --topbar-height: 98px; }
  .topbar { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; }
  .brand p { display: none; }
  .views { order: 3; width: 100%; justify-content: space-between; }
  .views .seg { flex: 1 1 0; padding: 6px 4px; }
}

/* ---------- 3D keycap buttons and icons (icons are CSS masks, so the script can change button labels freely) ---------- */
.btn[data-ico] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn[data-ico]::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.btn[data-ico].small::before { width: 13px; height: 13px; }
.seg[data-ico] { display: inline-flex; align-items: center; gap: 6px; }
.seg[data-ico]::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
[data-ico="play"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 4.5v15l12.5-7.5z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
[data-ico="reset"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 12a8 8 0 1 0 2.3-5.6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M4 4v4.5h4.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-ico="cube-plus"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 3l7 3.8v7.4L10 18 3 14.2V6.8z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M3 6.8l7 3.8 7-3.8M10 10.6V18%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Cpath d=%22M19 15v6M16 18h6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-ico="trash"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-ico="pin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.5s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2212%22 cy=%229.5%22 r=%222.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3C/svg%3E"); }
[data-ico="target"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%227.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22 fill=%22%23000%22/%3E%3Cpath d=%22M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-ico="grid"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 4h16v16H4zM4 12h16M12 4v16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-ico="cube"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 3l8 4.5v9L12 21l-8-4.5v-9z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4 7.5l8 4.5 8-4.5M12 12v9%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3C/svg%3E"); }
[data-ico="cube3"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.5l8.5 4.8v9.4L12 21.5l-8.5-4.8V7.3z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
[data-ico="edit"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 20h4L19 9l-4-4L4 16z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-ico="gauge"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3.5 16a8.5 8.5 0 1 1 17 0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12 16l4.5-4.5%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-ico="info"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Cpath d=%22M12 11v6M12 7.5v.5%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-ico="book"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 4.5h11a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5 17a3 3 0 0 1 3-3h11%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3C/svg%3E"); }
[data-ico="user"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Cpath d=%22M4 21c1-4 4-6 8-6s7 2 8 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
[data-ico="chart"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 4v16h16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M7 15l4-5 3 3 5-6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
[data-ico="monitor"] { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 5h18v11H3z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8 21h8M12 16v5%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }

/* keycap buttons: a raised top, a dark lip underneath and a soft shadow; pressing pushes them down */
.btn {
  background: linear-gradient(180deg, #2c2c33 0%, #17171c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #050506, 0 10px 18px rgba(0, 0, 0, .45);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.btn:hover { background: linear-gradient(180deg, #34343c 0%, #1d1d23 100%); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 #050506, 0 3px 8px rgba(0, 0, 0, .4); }
.btn-red, .btn-red:hover {
  background: linear-gradient(180deg, #ff5a66 0%, #e21f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #6a0a13, 0 0 18px rgba(255, 45, 61, .45);
}
.btn-red:hover { background: linear-gradient(180deg, #ff6a75 0%, #ff2d3d 100%); }
.btn-red:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #6a0a13, 0 0 12px rgba(255, 45, 61, .4); }
.seg[aria-pressed="true"] { background: linear-gradient(180deg, #ff5a66 0%, #e21f2f 100%); }

/* floating layers: a thin neon light along the top edge and a deeper shadow give depth */
.topbar, .panel, .controls, .navpad, .minimap, .bld-bar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .6), 0 22px 44px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 45, 61, .10);
}
.topbar::before, .panel::before, .controls::before, .navpad::before {
  content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 12px var(--neon); opacity: .8;
}
.topbar, .controls, .navpad { position: fixed; }


a.btn { text-decoration: none; }

/* BoBo logo in the header (v1.0 site) */
.brand img.logo { width: 36px; height: 36px; object-fit: contain; flex: none; }