/* lobby.css — design language for the openspadesh front end.
 *
 * Built from the original OpenSpades main menu's DNA: flat rectangles, no
 * rounded corners, the squared wordmark, the game's own world sitting behind
 * everything. Extended with the pieces the original lacks — real map imagery,
 * a readable type scale (DIN 1451, the same face the in-game HUD uses), and
 * a single brass accent that never competes with the team colors.
 *
 * The landing page is shaped the way every browser shooter that gets played
 * is shaped (specs/ui_hud.md §11): the world behind, one Play button in the
 * middle of the screen — the screen, not the pane — a name box fused to it
 * on the public deployment, the live count under it, and everything else a
 * tab in the top bar.
 */

@font-face {
  font-family: 'DIN';
  src: url('/assets/gfx/fonts/AlteDIN1451.ttf');
  font-display: swap;
}

:root {
  color-scheme: dark;      /* the scrollbars this page does need are dark */
  --bg: #090c0f;
  --panel: #11161b;
  --panel-2: #161d23;
  --panel-3: #1c242c;
  --line: #232d36;
  --line-2: #31404c;
  --txt: #e9eff5;
  --txt-2: #94a5b3;
  --txt-3: #5e6f7d;
  --brass: #d9b45f;
  --brass-2: #b28f3f;
  --brass-dim: rgba(217, 180, 95, 0.14);
  --blue: #4a72d6;   /* team 0 — same values as the in-game minimap */
  --green: #4fb54a;  /* team 1 */
  --danger: #d1544a;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
/* .btn sets display, which would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
img { display: block; }

/* Type helpers ---------------------------------------------------------- */
.din { font-family: 'DIN', 'Oswald', system-ui, sans-serif; font-style: italic; }
.eyebrow {
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* The world behind everything --------------------------------------------
   Five layers, bottom up: the live world (menu3d.js), the still it fades in
   over, a dim so type stays legible against a bright sky, film grain, and a
   vignette. Behind a list the dim goes heavy; behind the landing it keeps the
   middle of the screen open. */
#backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #16202a 0%, #0a0e12 55%, #070a0c 100%);
}
#backdrop > * { position: absolute; inset: 0; }
#bg3d { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1400ms ease; }
#bg3d.on { opacity: 1; }
#backdrop .shot {
  inset: -6%;
  background: no-repeat center/cover;
  filter: blur(26px) saturate(0.55) brightness(0.42);
  opacity: 0; transition: opacity 1200ms ease;
}
#backdrop .shot.on { opacity: 0.5; }
/* a vista is a real frame of the world, shown as it is */
#backdrop .shot.vista { inset: 0; filter: saturate(0.92); }
#backdrop .shot.vista.on { opacity: 1; }
#backdrop .dim {
  background: linear-gradient(180deg, rgba(6, 9, 12, 0.66) 0%, rgba(6, 9, 12, 0.30) 32%,
                              rgba(6, 9, 12, 0.36) 62%, rgba(6, 9, 12, 0.88) 100%);
  transition: background 600ms ease, opacity 600ms ease;
}
#backdrop.dense .dim { background: rgba(6, 9, 12, 0.84); }
#backdrop .grain {
  background: url('/assets/gfx/MonoNoise.png') repeat;
  opacity: 0.035; mix-blend-mode: overlay;
}
#backdrop .vig {
  background: radial-gradient(100% 75% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.62) 100%);
}
/* tools/gen_menushots.py: the world alone, for a still */
body.still #shell, body.still #backdrop .dim, body.still #backdrop .grain, body.still #backdrop .vig,
body.still #toast { display: none; }

/* Shell ----------------------------------------------------------------- */
#shell {
  position: relative; z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Top bar: brand, the tabs, the live count and who you are ----------------- */
#topbar {
  display: grid; align-items: center; column-gap: 18px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'brand nav right';
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 19, 24, 0.86), rgba(9, 12, 15, 0.78));
  backdrop-filter: blur(8px);
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 52px; }
.brand img { height: 22px; opacity: 0.92; }
.topright { grid-area: right; display: flex; align-items: center; gap: 16px; min-height: 52px; }
#livestat { display: flex; align-items: center; gap: 16px; }
#livestat .s { display: flex; align-items: baseline; gap: 6px; }
#livestat .n { font: italic 600 17px/1 'DIN', system-ui; color: var(--txt); }
#livestat .l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-3); }
.pulse {
  width: 7px; height: 7px; background: var(--green); flex: none;
  box-shadow: 0 0 0 0 rgba(79, 181, 74, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 181, 74, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(79, 181, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 181, 74, 0); }
}
#who {
  display: flex; align-items: center; gap: 8px;
  padding-left: 16px; border-left: 1px solid var(--line);
  font-size: 12px; color: var(--txt-2); white-space: nowrap;
}
#who b { color: var(--txt); font-weight: 600; }
#who .admin {
  font: 600 9px/14px system-ui; letter-spacing: 0.12em; padding: 0 5px;
  color: var(--brass); border: 1px solid var(--brass-2); text-transform: uppercase;
  background: none; cursor: pointer;
}
#who .admin:hover { background: var(--brass-dim); }
/* Admin-only shortcut to the AI reference, beside the badge that explains why
   it is visible. */
#who .railai {
  padding: 2px 7px; text-decoration: none;
  font: 600 10px/1.6 system-ui; letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt-2); border: 1px solid var(--line-2);
}
#who .railai:hover { color: var(--brass); border-color: var(--brass-2); }

/* The tabs. #rail is the id every test drives; it used to be a side rail
   and is now the row of tabs in the top bar, so the landing page can be
   centred on the screen rather than on what was left beside a rail. */
#rail { grid-area: nav; justify-self: center; display: flex; align-items: stretch; gap: 2px; min-height: 52px; }
#rail .navbtn {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 14px; background: none; border: 0;
  cursor: pointer; color: var(--txt-2); white-space: nowrap;
}
#rail .navbtn .k {
  font: italic 600 14px/1 'DIN', system-ui; letter-spacing: 0.08em; text-transform: uppercase;
}
#rail .navbtn .n {
  font: italic 600 12px/1 'DIN', system-ui; color: var(--brass);
  padding: 3px 5px 2px; border: 1px solid var(--brass-2);
}
#rail .navbtn:hover { color: var(--txt); }
#rail .navbtn.on { color: var(--txt); }
#rail .navbtn.on::before {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--brass);
}

/* Body ------------------------------------------------------------------ */
#pane { overflow-y: auto; overflow-x: hidden; padding: 26px 30px 40px; scrollbar-width: thin; }
#pane::-webkit-scrollbar { width: 10px; }
#pane::-webkit-scrollbar-thumb { background: var(--line-2); }
/* the landing page fills the pane edge to edge and lays itself out */
#pane.is-play { padding: 0; }
.view { display: none; max-width: 1400px; margin: 0 auto; animation: fade 260ms ease; }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The landing page -------------------------------------------------------
   A column the full height of the pane: the menu block floats to the
   middle of whatever height there is (auto margins in a flex column), and
   the caption strip sits on the floor. Widths are clamped, not fixed, so
   the same block reads on a phone in portrait and a 21:9 monitor. */
#view-play { max-width: none; }
#view-play.on { display: flex; flex-direction: column; min-height: 100%; }
#menu {
  position: relative;
  margin: auto; padding: 28px 16px;
  width: min(100%, 560px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* a pool of shadow behind the block, so the type holds against a bright sky */
#menu::before {
  content: ''; position: absolute; z-index: -1; inset: -12% -40%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 9, 12, 0.62), rgba(6, 9, 12, 0) 100%);
  pointer-events: none;
}
#menu-logo {
  width: clamp(250px, 38vw, 512px); max-width: 100%; height: auto;
  max-height: 19vh; object-fit: contain;
  margin-bottom: clamp(22px, 3.6vh, 36px);
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}
#playbox { width: min(100%, 440px); display: flex; flex-direction: column; gap: 10px; }
#identity {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
#identity b { font: italic 600 16px/1 'DIN', system-ui; letter-spacing: 0.05em; color: var(--txt); }
#quickplay {
  width: 100%; flex-direction: column; gap: 4px;
  padding: clamp(14px, 2.2vh, 20px) 24px;
  box-shadow: 0 0 0 1px rgba(217, 180, 95, 0.35), 0 18px 50px rgba(217, 180, 95, 0.18),
              inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
#quickplay .lead {
  font: italic 700 clamp(21px, 1.1vw + 13px, 27px)/1 'DIN', system-ui; letter-spacing: 0.16em;
}
#quickplay:hover { box-shadow: 0 0 0 1px rgba(230, 194, 115, 0.6), 0 22px 60px rgba(217, 180, 95, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
#menu .menu-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: clamp(10px, 1.6vh, 16px); width: min(100%, 440px);
}
#menu .menu-row .btn {
  padding: 12px 10px; background: rgba(17, 22, 27, 0.72); backdrop-filter: blur(4px);
}
.hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px 14px; font-size: 11px; color: var(--txt-3);
}
#bgcap {
  display: flex; align-items: baseline; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--txt-2);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); white-space: nowrap;
}
#bgcap b { font: italic 600 14px/1 'DIN', system-ui; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt); }
#bgcap:hover b { color: var(--brass); }

/* The name box, on the public deployment (signin.js). It mounts above the
   Play button and shares its width; the mode is the pair of links under it. */
.aob-veil { width: 100%; text-align: left; }
.aob-row { display: flex; gap: 6px; }
.aob-row input {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px;
  background: rgba(9, 12, 15, 0.78); border: 1px solid var(--line-2); backdrop-filter: blur(4px);
  color: var(--txt); font-size: 16px; outline: none;
}
.aob-row input::placeholder { color: var(--txt-3); }
.aob-row input:focus { border-color: var(--brass); }
.aob-row input:focus-visible { outline: none; }   /* the border is the focus ring */
.aob-row + .aob-row { margin-top: 6px; }
.aob-dice {
  flex: none; width: 50px; height: 50px; cursor: pointer;
  background: rgba(9, 12, 15, 0.78); border: 1px solid var(--line-2); color: var(--txt-2); font-size: 20px;
}
.aob-dice:hover { color: var(--brass); border-color: var(--brass-2); }
.aob-err { min-height: 18px; margin: 6px 0 0; font-size: 12.5px; color: #e8877e; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.aob-err:empty { margin: 0; min-height: 0; }
.aob-links {
  margin: 8px 0 2px; text-align: center; font-size: 12px; color: var(--txt-3);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.aob-links button {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--txt-2);
  font: inherit; border-bottom: 1px solid var(--line-2);
}
.aob-links button:hover { color: var(--brass); border-color: var(--brass-2); }

/* Section header -------------------------------------------------------- */
.sec { display: flex; align-items: center; gap: 14px; margin: 30px 0 14px; }
.sec:first-child { margin-top: 0; }
.sec h2 {
  margin: 0; font: italic 600 17px/1 'DIN', system-ui;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt);
}
.sec .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec .count { font: italic 600 15px/1 'DIN'; color: var(--brass); }
.sec .act { display: flex; gap: 8px; }

/* Panels ---------------------------------------------------------------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
}
.panel.ticks::before, .panel.ticks::after {
  content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid var(--brass);
  opacity: 0.5; pointer-events: none;
}
.panel.ticks::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.panel.ticks::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line-2); background: var(--panel-3);
  color: var(--txt); cursor: pointer; text-transform: uppercase;
  font: 600 11px/1 system-ui; letter-spacing: 0.1em; transition: 120ms;
}
.btn:hover { border-color: var(--txt-3); background: #232d36; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #14100a; }
.btn.primary:hover { background: #e6c273; border-color: #e6c273; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible, .card:focus-visible, .navbtn:focus-visible, input:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}

/* Server browser rows --------------------------------------------------- */
.searchbox {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  background: var(--panel); border: 1px solid var(--line); min-width: 210px;
}
.searchbox input { background: none; border: 0; outline: none; width: 100%; font-size: 12.5px; }
.searchbox input::placeholder { color: var(--txt-3); }
.searchbox .slash {
  font: 600 9px/14px system-ui; color: var(--txt-3); border: 1px solid var(--line-2);
  padding: 0 5px; flex: none;
}
.rowhead, .room {
  display: grid; align-items: center;
  grid-template-columns: minmax(180px, 2fr) 88px minmax(150px, 1.1fr) 82px 104px;
  gap: 14px;
}
.rowhead {
  padding: 0 14px 7px; font: 600 9.5px/1 system-ui; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt-3); border-bottom: 1px solid var(--line);
}
.rowhead [data-sort] { cursor: pointer; }
.rowhead [data-sort]:hover { color: var(--txt-2); }
.rowhead [data-sort].on { color: var(--brass); }
.rowhead [data-sort].on::after { content: ' ▾'; }
.room {
  width: 100%; padding: 9px 14px; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; text-align: left; cursor: pointer; transition: background 120ms;
}
.room:hover { background: rgba(255, 255, 255, .035); }
.room:hover .go { background: var(--brass); color: #14100a; border-color: var(--brass); }
.room .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.room .thumb {
  width: 74px; height: 46px; flex: none; object-fit: cover; background: #0d1216;
  border: 1px solid var(--line);
}
.room .nm {
  display: block;
  font: italic 600 17px/1.1 'DIN', system-ui; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room .sub { display: block; font-size: 10.5px; color: var(--txt-3); margin-top: 2px; }
.room .modetag {
  justify-self: start; padding: 3px 8px; border: 1px solid var(--line-2);
  font: 600 9.5px/1.4 system-ui; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2);
}
.room .pl { display: flex; align-items: center; gap: 9px; }
.room .pl .n { font: italic 600 15px/1 'DIN'; color: var(--txt-2); flex: none; }
.room .pl .n b { color: var(--txt); }
/* a count only the public list vouches for (aoslist.js): dimmer, and approximate */
.room .pl .n.listed b { color: var(--txt-2); }
.room .pl .n.listed::before { content: '~'; }
.room .score { font: italic 600 15px/1 'DIN'; color: var(--txt-2); }
.room .score .b { color: var(--blue); } .room .score .g { color: var(--green); }
.room .go {
  justify-self: end; padding: 7px 14px; border: 1px solid var(--line-2); background: var(--panel-3);
  font: 600 10px/1 system-ui; letter-spacing: .13em; text-transform: uppercase; transition: 120ms;
}
.room.full { opacity: .5; cursor: not-allowed; }
.room.full:hover { background: none; }
.room.full:hover .go { background: var(--panel-3); color: var(--txt-2); border-color: var(--line-2); }

/* Admin provenance card ------------------------------------------------- */
#admincard { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#adminfacts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 11.5px; }
#adminfacts dt { color: var(--txt-3); white-space: nowrap; }
#adminfacts dd { margin: 0; color: var(--txt-2); }
#adminfacts dd b { color: var(--txt); font-weight: 600; }
#adminfacts .why { border-bottom: 1px dotted var(--line-2); cursor: help; }
#adminmodes { display: flex; flex-wrap: wrap; gap: 6px; }
#adminmodes button {
  padding: 4px 9px; border: 1px solid var(--line-2); background: var(--panel);
  font: 600 10px/1.4 system-ui; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); cursor: pointer;
}
#adminmodes button.on { border-color: var(--brass); color: var(--brass); background: var(--brass-dim); }
#adminmodes button:disabled { opacity: .35; cursor: not-allowed; }
#adminmodes button.on::before { content: '✓ '; }
.adminnote { margin: 9px 0 0; font-size: 10.5px; color: var(--txt-3); }
.ext { display: inline-block; margin: 0 4px 3px 0; padding: 1px 5px; border: 1px solid var(--line-2);
       font: 600 9.5px/1.5 ui-monospace, monospace; color: var(--txt-2); }
/* colour chip beside a map's fog / babel platform colour in the admin panel */
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 4px;
      border: 1px solid var(--line-2); vertical-align: baseline; }

/* Card grids ------------------------------------------------------------ */
.grid { display: grid; gap: 14px; }
#rooms { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#mapgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
#quick { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.card.qs .meta { padding: 8px 10px 9px; }
.card.qs .nm { font-size: 14px; }
.card.qs .join span { padding: 6px 12px; font-size: 10.5px; }
.sec .note { font-size: 11px; color: var(--txt-3); }

.card {
  position: relative; display: block; width: 100%; padding: 0; text-align: left;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); color: inherit; cursor: pointer;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
/* the previews are transparent-sky renders, so the card lights them from behind */
.card .shot {
  position: relative; aspect-ratio: 8 / 5; overflow: hidden;
  background: radial-gradient(72% 72% at 50% 56%, #1a232b 0%, #0d1216 68%, #090d10 100%);
}
.card .shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
}
.card:hover .shot img { transform: scale(1.045); }
.card .shot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 38%, rgba(9,12,15,.85) 100%);
}
.badge {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; font: 600 9.5px/1.35 system-ui; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(9, 12, 15, 0.78); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--txt);
}
.badge.tl { left: 8px; top: 8px; }
.badge.tr { right: 8px; top: 8px; }
.badge .dot { width: 6px; height: 6px; background: var(--green); }
.card .meta { padding: 11px 13px 13px; }
.card .row1 { display: flex; align-items: baseline; gap: 10px; }
.card .nm {
  font: italic 600 19px/1 'DIN', system-ui; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .pc { margin-left: auto; font: italic 600 16px/1 'DIN'; color: var(--txt-2); flex: none; }
.card .pc b { color: var(--txt); }
.card .join {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: rgba(9, 12, 15, 0.55); opacity: 0; transition: opacity 140ms;
  font: 600 12px/1 system-ui; letter-spacing: 0.16em; text-transform: uppercase;
}
.card:hover .join { opacity: 1; }
.card .join span { padding: 9px 18px; background: var(--brass); color: #14100a; }
.card.full { cursor: not-allowed; opacity: 0.62; }
.card.full:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card.full .join span { background: var(--panel-3); color: var(--txt-2); }

/* team split bar */
.split { display: flex; height: 4px; margin-top: 9px; background: #0c1116; border: 1px solid #0c1116; gap: 1px; }
.split i { display: block; height: 100%; }
.split .b { background: var(--blue); }
.split .g { background: var(--green); }
.split .e { background: #1d262e; flex: 1; }

/* Map picker ------------------------------------------------------------ */
#mapsplit { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 20px; align-items: start; }
#mapsearch {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  background: var(--panel); border: 1px solid var(--line); min-width: 190px;
}
#mapsearch input { background: none; border: 0; outline: none; width: 100%; font-size: 12.5px; }
#mapsearch input::placeholder { color: var(--txt-3); }
#mapsearch .slash {
  font: 600 9px/14px system-ui; color: var(--txt-3); border: 1px solid var(--line-2); padding: 0 5px; flex: none;
}
/* One row over the gallery holding every way to narrow it down: search, mode,
   the recommended switch and the sort order. */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 14px;
}
.toolbar .searchbox { min-width: 210px; }
.toolbar .field {
  display: flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font: 600 10px/1 system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.toolbar select {
  background: var(--panel); border: 1px solid var(--line); color: var(--txt-1);
  padding: 7px 9px; font: 500 12.5px/1 system-ui; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.toolbar select:focus-visible { outline: 1px solid var(--brass); outline-offset: 1px; }
.btn.sm { padding: 6px 10px; font-size: 11px; }

/* A switch that reads as on/off rather than as a button you press. Named
   .filtersw, not .toggle -- the settings page already owns that class for its
   40x20 sliders and would flatten this one. */
.filtersw {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none;
  white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); color: var(--txt-3);
  padding: 7px 11px; font: 600 11px/1 system-ui; letter-spacing: .04em; text-transform: uppercase;
}
.filtersw .box {
  width: 11px; height: 11px; border: 1px solid var(--line-2); flex: none; position: relative;
}
.filtersw[aria-checked="true"] { color: var(--txt-1); border-color: var(--brass); }
.filtersw[aria-checked="true"] .box { background: var(--brass); border-color: var(--brass); }
.filtersw[aria-checked="true"] .box::after {
  content: ''; position: absolute; inset: 2px 1px 3px 1px;
  border: solid var(--ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg);
}
.filtersw:hover { color: var(--txt-1); }
.searchbox .clear {
  background: none; border: 0; color: var(--txt-3); cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0 2px;
}
.searchbox .clear:hover { color: var(--txt-1); }

#adminfacts .sub2 { color: var(--txt-3); font-size: 11px; margin-top: 3px; line-height: 1.35; }

.card.mp .shot { aspect-ratio: 8 / 5; }
.card.mp .shot::after {
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 30%, rgba(9,12,15,.5) 100%);
}
.card.mp .meta { padding: 9px 11px 11px; }
.card.mp .nm { font-size: 16px; }
.card.mp.sel { border-color: var(--brass); }
.card.mp.sel::before, .card.mp.sel::after {
  content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--brass); z-index: 4;
}
.card.mp.sel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.card.mp.sel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.card.mp .join { display: none; }

#detail { position: sticky; top: 0; }
#detail .hero { position: relative; aspect-ratio: 8 / 5; background: #0b0f13; overflow: hidden; }
#detail .hero img { width: 100%; height: 100%; object-fit: cover; }
#detail .hero img.top { object-fit: contain; background: #0b0f13; }
#viewtoggle { position: absolute; right: 9px; top: 9px; z-index: 2; display: flex; }
#viewtoggle button {
  padding: 4px 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(9,12,15,.8);
  font: 600 9.5px/1.4 system-ui; letter-spacing: 0.1em; cursor: pointer; color: var(--txt-2);
}
#viewtoggle button.on { background: var(--brass); color: #14100a; border-color: var(--brass); }
#detail .info { padding: 15px 16px 17px; }
#detail h3 {
  margin: 0; font: italic 600 25px/1 'DIN', system-ui;
  letter-spacing: 0.05em; text-transform: uppercase;
}
#detail .blurb { margin: 7px 0 14px; color: var(--txt-2); font-size: 12.5px; min-height: 34px; }
#detail #detailauthor { margin-top: 5px; }

.modehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--txt-3);
  font: 600 9.5px/1 system-ui; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
.linkbtn:hover { color: var(--brass); border-color: var(--brass-2); }
.linkbtn[aria-pressed="true"] { color: var(--brass); border-color: var(--brass); }
.btn.ghost[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
/* combinations outside the curated set: available, but visibly off-menu */
.mode.adv { border-style: dashed; }
.mode.adv .t::after {
  content: 'untested'; margin-left: 6px; padding: 1px 4px; vertical-align: middle;
  font: 600 8px/1.4 system-ui; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-3); border: 1px solid var(--line-2);
}
.hiddennote { font-size: 11px; color: var(--txt-3); padding: 10px 14px; }
.mode:disabled { opacity: .32; cursor: not-allowed; }
.mode:disabled .d::after { content: ' — not on this map'; color: var(--danger); }
.mode {
  padding: 10px 11px; border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; text-align: left; transition: 120ms;
}
.mode:hover { border-color: var(--line-2); }
.mode.on { border-color: var(--brass); background: linear-gradient(180deg, var(--brass-dim), transparent); }
.mode .t { font: italic 600 15px/1 'DIN', system-ui; letter-spacing: 0.06em; text-transform: uppercase; }
.mode .d { font-size: 10.5px; color: var(--txt-3); margin-top: 3px; line-height: 1.45; }
/* what the selected mode asks of you; the cards only name the modes */
#modenote { font-size: 12px; line-height: 1.5; color: var(--txt-2); margin: 0 0 14px;
            border-left: 2px solid var(--brass-2); padding-left: 10px; }
#createbtn { width: 100%; padding: 13px; font-size: 12.5px; }

/* Settings + controls --------------------------------------------------- */
.form { max-width: 660px; }
/* margin on top only: a <p>'s own bottom margin is exactly the kind of
   seven-pixel scroll lobby_test exists to catch */
.settings-note { color: var(--txt-3); font-size: 11.5px; margin: 12px 0 0; max-width: 660px; }
.settings-about { margin-top: 18px; }
/* About: one panel, reached from the foot of Settings rather than a tab */
.panel.about { max-width: 660px; padding: 16px 18px; }
.panel.about p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--txt-2); }
.panel.about p:last-child { margin-bottom: 0; }
.panel.about b { color: var(--txt); font-weight: 600; }
.panel.about code { font: 11.5px ui-monospace, monospace; color: var(--brass); }
.panel.about a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.panel.about a:hover { color: var(--brass); border-color: var(--brass-2); }
.field { display: grid; grid-template-columns: 168px 1fr 62px; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field .lbl { font-size: 12.5px; }
.field .lbl small { display: block; color: var(--txt-3); font-size: 10.5px; margin-top: 1px; }
.field .val { font: italic 600 16px/1 'DIN', system-ui; color: var(--brass); text-align: right; }
.field input[type=text] {
  background: var(--bg); border: 1px solid var(--line-2); padding: 7px 10px; width: 100%; outline: none;
}
.field input[type=text]:focus { border-color: var(--brass); }
.field input[type=text]:disabled { color: var(--txt-2); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--line-2); outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; background: var(--brass); cursor: pointer;
  border: 2px solid #0d1216;
}
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; background: var(--brass); cursor: pointer; border: 2px solid #0d1216; }
.toggle { position: relative; width: 40px; height: 20px; background: var(--panel-3); border: 1px solid var(--line-2); cursor: pointer; }
.toggle i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--txt-3); transition: 140ms; }
.toggle.on { border-color: var(--brass-2); background: rgba(217, 180, 95, 0.16); }
.toggle.on i { left: 22px; background: var(--brass); }

.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.keys section { padding: 14px 16px 16px; }
.keys h4 {
  margin: 0 0 9px; font: italic 600 14px/1 'DIN', system-ui;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass);
}
.keys .kr { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; color: var(--txt-2); }
.keys .kr .kk { display: flex; gap: 4px; margin-left: auto; flex: none; }
.keys p { margin: 0; font-size: 12.5px; color: var(--txt-2); line-height: 1.65; }
.keys p b { color: var(--txt); font-weight: 600; }
.keys p code { font: 11.5px ui-monospace, monospace; color: var(--brass); }
.keys a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.keys a:hover { color: var(--brass); border-color: var(--brass-2); }
kbd {
  font: 600 10.5px/17px system-ui; min-width: 19px; height: 19px; padding: 0 5px; text-align: center;
  background: var(--panel-3); border: 1px solid var(--line-2); border-bottom-width: 2px; color: var(--txt);
  display: inline-block;
}

/* Empty + toast + deploy overlay ---------------------------------------- */
.empty { padding: 34px 22px; text-align: center; color: var(--txt-3); }
.empty .big { font: italic 600 18px/1 'DIN', system-ui; color: var(--txt-2); letter-spacing: 0.06em; text-transform: uppercase; }
.empty p { margin: 8px 0 16px; font-size: 12.5px; }
.skel, .card .shot.skel {
  background: linear-gradient(90deg, #141a20, #1b232a, #141a20);
  background-size: 200% 100%; animation: sh 1.3s linear infinite;
}
@keyframes sh { to { background-position: -200% 0; } }

#toast {
  position: fixed; z-index: 40; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  padding: 11px 18px; background: var(--panel-2); border: 1px solid var(--danger);
  border-left-width: 3px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: 200ms;
}
#toast.on { opacity: 1; transform: translateX(-50%); }

#deploy {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; background: rgba(6, 9, 11, 0.93);
}
#deploy.on { display: flex; animation: fade 200ms ease; }
#deploy .box { width: min(620px, 88vw); text-align: center; }
#deploy .shot { position: relative; aspect-ratio: 8 / 5; overflow: hidden; border: 1px solid var(--line); }
#deploy .shot img { width: 100%; height: 100%; object-fit: cover; }
#deploy h2 {
  margin: 18px 0 4px; font: italic 600 27px/1 'DIN', system-ui;
  letter-spacing: 0.12em; text-transform: uppercase;
}
#deploy .sub { color: var(--txt-2); font-size: 12.5px; }
#deploy .bar { margin-top: 18px; height: 2px; background: var(--line); overflow: hidden; }
#deploy .bar i { display: block; height: 100%; width: 34%; background: var(--brass); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(390%); } }

/* Responsive ------------------------------------------------------------ */
/* The top bar folds to two rows before the tabs and the right-hand group can
   touch: brand and identity on the first, the tabs on their own strip. */
@media (max-width: 1500px) {
  #topbar {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'brand right' 'nav nav';
    padding: 0 12px 0 20px;
  }
  .topright { justify-self: end; }
  #rail {
    justify-self: stretch; min-height: 40px; margin: 0 -12px 0 -20px; padding: 0 10px;
    border-top: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  #rail::-webkit-scrollbar { display: none; }
  #rail .navbtn { padding: 0 12px; }
}
@media (max-width: 1120px) {
  #mapsplit { grid-template-columns: 1fr; }
  #detail { position: static; }
}
@media (max-width: 860px) {
  #pane { padding: 18px 16px 30px; }
  #livestat { display: none; }
  .field { padding: 10px 14px; grid-template-columns: 140px 1fr 56px; gap: 10px; }
}
@media (max-width: 760px) {
  .rowhead { display: none; }
  .room { grid-template-columns: 1fr auto; grid-template-areas: 'who go' 'pl pl'; row-gap: 8px; }
  .room .who { grid-area: who; } .room .go { grid-area: go; }
  .room .pl { grid-area: pl; } .room .modetag, .room .score { display: none; }
}
@media (max-width: 720px) {
  #who .lbl { display: none; }
  #who { border-left: 0; padding-left: 0; }
  #topbar { column-gap: 10px; }
}
@media (max-height: 560px) {
  #menu-logo { max-height: 15vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

#bot-composition { border: 1px solid var(--line, #31404c); margin: 16px 0; padding: 12px; min-width: 0; }
#bot-composition legend { font-size: 11px; color: #d9b45f; }
.bot-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.bot-counts label { display: grid; gap: 6px; font-size: 11px; color: #94a5b3; }
.bot-counts input { min-width: 0; width: 100%; background: #11161b; border: 1px solid #31404c; color: #e9eff5; padding: 7px; font: inherit; font-size: 15px; }
#create-bot-note { font: 11px/1.5 system-ui; color: #94a5b3; margin: 10px 0 0; }
/* What anybody may ask of a new room's bots: three sliders, each with its
   reading beside it, and one line saying what the choice comes to. */
#bot-choice { border: 1px solid var(--line, #31404c); margin: 14px 0 10px; padding: 8px 12px 12px; min-width: 0; }
#bot-choice legend { font-size: 11px; color: #d9b45f; }
.bc-on { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 11.5px; color: #d9b45f; }
.bc-on input { accent-color: #d9b45f; width: 14px; height: 14px; margin: 0; cursor: pointer; }
/* Off: the settings stay where they were, greyed, ready for the next tick. */
#bot-choice.off .bc-row, #bot-composition:disabled { opacity: 0.4; }
.bc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; align-items: center; gap: 10px; margin: 8px 0; }
.bc-row[hidden] { display: none; }
.bc-row label { font-size: 11.5px; color: #94a5b3; }
.bc-row output { font-size: 12px; color: #e9eff5; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#create-bots-note { font: 11px/1.5 system-ui; color: #94a5b3; margin: 8px 0 0; }


/* The mode filter. It used to be a <select> among the other fields, which made
   the single most consequential choice on the page look like a sort order —
   picking a mode decides which maps exist and which rooms you can be put in, so
   it is the first thing offered and it looks like it. */
.modebar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.modebar button {
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--txt-2); border-radius: 6px; padding: 7px 13px;
  font: 600 12px/1 system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.modebar button:hover { color: var(--txt); border-color: var(--line-2); }
.modebar button[aria-pressed="true"] {
  background: var(--brass-dim); border-color: var(--brass-2); color: var(--brass);
}
.modebar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }


/* A playlist is a room that plays several maps in a row, in one mode. A single
   map is a playlist of one, so there is no second kind of room to explain —
   which is why this is one button beside Create rather than a separate flow. */
/* The match clock a created room runs (30 minutes unless changed) */
.timelimit { display: flex; align-items: center; justify-content: space-between; gap: 10px;
             margin: 4px 0 10px; }
.timelimit select { background: #11161b; border: 1px solid #31404c; color: #e9eff5;
                    padding: 6px 8px; font: inherit; font-size: 13px; min-width: 150px; }
.createrow { display: flex; gap: 6px; }
.createrow .btn.primary { flex: 1; }
.playlistbox { margin: 10px 0 8px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.playlistbox ol { margin: 6px 0 0; padding-left: 20px; color: var(--txt-2); font-size: 13px; }
.playlistbox li { padding: 2px 0; }
.playlistbox li button {
  background: none; border: 0; color: var(--txt-3); cursor: pointer; padding: 0 4px; font-size: 13px;
}
.playlistbox li button:hover { color: var(--danger); }
.plclear { background: none; border: 0; color: var(--txt-3); cursor: pointer; font-size: 11px; }
.plclear:hover { color: var(--txt); }