/* Baja Sim radio: Race Manager's look. Dark first: black, grey and the deep
   red off the badge; orange and yellow only on what you're meant to look at. */
@font-face { font-family: "BajaHeader"; src: url("fonts/Kanit-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: normal; }
:root {
  --rm-black: #0a0a0c; --rm-panel: rgba(14, 14, 17, 0.96); --rm-bar: rgba(10, 10, 12, 0.78);
  --rm-line: rgba(255, 255, 255, 0.10); --rm-line-lit: rgba(200, 60, 60, 0.55);
  --rm-text: #f2f0eb; --rm-dim: #8a8f95; --rm-red: #a81d22; --rm-red-lit: #c62b30; --rm-red-deep: #6e1114;
  --rm-orange: #e8801e; --rm-yellow: #f0b429; --rm-good: #7ddc8a; --rm-bad: #e0574c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 500px at 50% -120px, rgba(168, 29, 34, 0.22), transparent 70%),
              linear-gradient(180deg, #0e0b0c, var(--rm-black) 60%);
  background-attachment: fixed;
  color: var(--rm-text); font: 14px/1.4 "Overpass", "Segoe UI", system-ui, sans-serif;
}
.hidden { display: none !important; }
.hdr {
  font-family: "BajaHeader", "Kanit", "Arial Black", sans-serif; font-weight: 900; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.05em;
  -webkit-mask-image: url("images/mud.png"); -webkit-mask-size: 220px; mask-image: url("images/mud.png"); mask-size: 220px;
  filter: drop-shadow(2px 2px 0 #4a140f) drop-shadow(0 0 10px rgba(214, 58, 53, 0.25));
}

/* top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--rm-bar); border-bottom: 2px solid var(--rm-red); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 8px; }
.mark { width: 30px; height: 30px; }
.word { font-size: 18px; color: #fff; white-space: nowrap; }
.word em { color: #e0443c; font-style: normal; }
.sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.12); margin: 0 4px; }
.top-title { font-size: 16px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.grow { flex: 1; }
.link-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10px;
  font-weight: 800; letter-spacing: 0.12em; border: 1px solid var(--rm-line); color: var(--rm-dim); }
.link-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--rm-dim); }
.link-state.ok { color: var(--rm-good); border-color: rgba(125, 220, 138, 0.35); }
.link-state.ok i { background: var(--rm-good); box-shadow: 0 0 8px var(--rm-good); }
.link-state.bad { color: var(--rm-bad); border-color: rgba(224, 87, 76, 0.45); }
.link-state.bad i { background: var(--rm-bad); }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #444; flex-shrink: 0; }
.dot.on { background: var(--rm-good); box-shadow: 0 0 10px rgba(125, 220, 138, 0.6); }
.dot.talk { background: var(--rm-red-lit); box-shadow: 0 0 12px rgba(198, 43, 48, 0.9); }
.dot.off { background: #555; }

.shell { max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }

/* windows: Race Manager's players / relative window */
.win { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(198, 43, 48, 0.3); border-radius: 12px;
  background: linear-gradient(160deg, rgba(18, 12, 14, 0.95), rgba(8, 8, 10, 0.96)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
#joinCard { max-width: 420px; margin: 24px auto 0; }
.win-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 8px;
  background: linear-gradient(180deg, rgba(168, 29, 34, 0.18), transparent); border-bottom: 1px solid rgba(198, 43, 48, 0.2); }
.win-title { font-size: 18px; color: #fff; }
.win-sub { padding: 5px 14px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.3); }
.win-sub.cols { display: flex; justify-content: space-between; }
.win-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.pill, .count { display: inline-flex; align-items: center; gap: 5px; min-width: 24px; justify-content: center; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--rm-red); color: #fff; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rm-dim); }
label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type=text], input:not([type]), input[type=password], select {
  width: 100%; border-radius: 7px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; padding: 8px 10px; font: 14px "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; }
input:focus, select:focus { outline: none; border-color: var(--rm-line-lit); }
select option { background: #151517; }
input[type=range] { accent-color: var(--rm-red-lit); width: 100%; }
.check { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--rm-text); cursor: pointer; }
.check input { accent-color: var(--rm-red-lit); width: 16px; height: 16px; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }

/* buttons: Race Manager's */
button { background: rgba(26, 26, 30, 0.9); border: 1px solid var(--rm-line); color: var(--rm-text); padding: 8px 14px;
  border-radius: 3px; font: 13px "Segoe UI", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
button:hover:not(:disabled) { background: rgba(48, 30, 32, 0.95); border-color: var(--rm-line-lit); }
button:active:not(:disabled) { filter: brightness(1.4); transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: default; }
button.primary { background: var(--rm-red); border-color: var(--rm-red-lit); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--rm-red-lit); }
button.big { padding: 12px; font-size: 14px; font-weight: 700; }
button.on { background: var(--rm-red); border-color: var(--rm-red-lit); color: #fff; }

.ptt { padding: 22px 12px; font-size: 16px; font-weight: 800; letter-spacing: 0.12em; border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 20, 22, 0.95), rgba(18, 12, 14, 0.95)); border: 1px solid rgba(198, 43, 48, 0.4); }
.ptt.down { background: linear-gradient(180deg, var(--rm-red-lit), var(--rm-red)); border-color: #ff6a5c; color: #fff;
  box-shadow: 0 0 24px rgba(198, 43, 48, 0.55); }
.meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
#meterBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--rm-orange), var(--rm-yellow)); transition: width 0.06s linear; }

/* nearby list: Race Manager's rows */
.list { list-style: none; margin: 0; padding: 4px 6px 8px; min-height: 60px; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; margin-bottom: 2px;
  border-left: 3px solid transparent; border-radius: 6px; font-size: 14px; }
.list li:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.list li .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .tag { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--rm-dim); white-space: nowrap; }
.list li.near { border-left-color: var(--rm-good); background: rgba(125, 220, 138, 0.06); }
.list li.near .tag { color: var(--rm-good); }
.list li.all { border-left-color: var(--rm-yellow); }
.list li.all .tag { color: var(--rm-yellow); font-weight: 700; }
.list li.problem .tag { color: var(--rm-bad); }
.list li.talking { border-left-color: var(--rm-red-lit); background: rgba(168, 29, 34, 0.25); }
.list li.empty { color: var(--rm-dim); font-size: 12px; border: 0; }

.hint { margin: 0; color: var(--rm-dim); font-size: 12px; line-height: 1.5; }
.hint b { color: var(--rm-text); font-weight: 600; }
.hint.bad { color: var(--rm-bad); }
.hint:empty { display: none; }
kbd { background: rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 0 5px; font-size: 11px; color: #fff; }
.err { color: var(--rm-bad); margin: 0; font-size: 13px; }
.err:empty { display: none; }
.warn { background: rgba(240, 180, 41, 0.12); border: 1px solid rgba(240, 180, 41, 0.45); border-left: 3px solid var(--rm-yellow);
  color: #ffe19a; padding: 10px 12px; border-radius: 6px; line-height: 1.45; margin: 0 0 14px; }
#insecure { background: rgba(224, 87, 76, 0.12); border: 1px solid rgba(224, 87, 76, 0.5); padding: 10px 12px; border-radius: 6px; margin: 0 0 14px; }
.unlock { display: block; width: 100%; margin: 0 0 14px; padding: 16px; font-size: 17px; font-weight: 800;
  background: var(--rm-red); border: 1px solid var(--rm-red-lit); color: #fff; border-radius: 10px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.3); } }
@media (max-width: 560px) { .top-title, .sep { display: none; } }