:root {
  --bg: #0c0b10;
  --surface: #15131b;
  --raised: #1d1a25;
  --line: #2b2735;
  --text: #ece9f1;
  --muted: #9b95a7;
  --faint: #6a6477;
  --accent: #e3b35e;
  --accent-ink: #1d1505;
  --enemy: #ef6f61;
  --neutral: #9aa9b3;
  --ally: #5fc28e;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }

/* Backdrop: hex HUD over the whole screen, cheat-menu glow top (magenta) and bottom (violet) */
.grid-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(255,63,242,.13), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(139,92,255,.13), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'42'%20height%3D'72.7'%3E%3Cpath%20d%3D'M21%200l21%2012.1v24.2L21%2048.5%200%2036.4V12.1zM21%2048.5v24.2'%20fill%3D'none'%20stroke%3D'rgba(170%2C160%2C200%2C0.08)'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") 0 0 / 42px 72.7px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, #000 40%, rgba(0,0,0,.25) 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, #000 40%, rgba(0,0,0,.25) 100%);
}

/* ESP overlay (joke): cheat-style box + skeleton behind the dashboard */
.esp { --esp: #ff3ff2; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .8; }
.esp svg { position: absolute; overflow: visible; }
.esp-near { right: 4vw; bottom: 5vh; height: 60vh; }
.esp-far { --esp: #3f8cff; left: 2vw; top: 36vh; height: 22vh; opacity: .8; }
.esp-bone circle, .esp-bone path {
  fill: none; stroke: var(--esp); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .42;
  filter: drop-shadow(0 0 4px var(--esp));
}
.esp-box path { fill: none; stroke: var(--esp); stroke-width: 2.5; stroke-linecap: square; opacity: .5; animation: esp-blink 2.8s steps(2) infinite; }
.esp-hp rect { fill: rgba(255,255,255,.08); }
.esp-hp .fill { fill: #5fe36a; opacity: .5; }
.esp-label, .esp-dist { font: 700 15px var(--cond); letter-spacing: .03em; text-anchor: middle; fill: var(--esp); opacity: .6; }
.esp-dist { font-weight: 600; opacity: .45; }
@keyframes esp-blink { 50% { opacity: .25; } }

/* Brand: ESP box around a skeleton, cheat-menu style */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { --esp: #ff3ff2; width: 34px; height: 34px; flex: none; overflow: visible; }
.brand-mark .bm-box { fill: none; stroke: var(--esp); stroke-width: 3; filter: drop-shadow(0 0 3px var(--esp)); }
.brand-mark .bm-bone circle, .brand-mark .bm-bone path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--esp)); }
.brand-mark .bm-dot { fill: #ff4040; animation: bm-ping 2.4s ease-out infinite; transform-origin: 20px 11.5px; }
@keyframes bm-ping { 0%, 60% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }
.brand-name { display: flex; align-items: center; gap: 6px; font: 800 26px/1 var(--cond); letter-spacing: .06em; white-space: nowrap; }
.brand-name b {
  font-weight: 800; font-size: .72em; letter-spacing: .12em; color: #ff3ff2;
  padding: 3px 5px 2px 7px; border: 1.5px solid #ff3ff2; border-radius: 3px;
  text-shadow: 0 0 8px rgba(255,63,242,.7); box-shadow: 0 0 10px rgba(255,63,242,.25), inset 0 0 8px rgba(255,63,242,.15);
}
@media (prefers-reduced-motion: reduce) { .brand-mark .bm-dot { animation: none; } }

/* Assign picker: sub-label for factions, "no gang" chip */
.pick-sub { flex-basis: 100%; font-size: 13px; color: var(--muted); margin-top: 8px; }
.tag-none-pick { font-weight: 600; }

/* Buttons & fields */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-m); border: 1px solid var(--line);
  background: var(--raised); font-weight: 600; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: #ecc173; border-color: #ecc173; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }
.btn-danger { color: var(--enemy); }
.btn-s { padding: 5px 10px; font-size: 14px; border-radius: var(--radius-s); }
.field {
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); min-width: 0;
}
.field:focus { outline: none; border-color: var(--accent); }
textarea.field { resize: vertical; min-height: 70px; }

/* Gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-box { width: min(380px, 100%); }
.gate h1 { font: 600 40px/1.05 var(--cond); margin: 40px 0 8px; }
.gate p { color: var(--muted); margin: 0 0 28px; }
.code-input {
  width: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); font: 600 28px/1 var(--cond); letter-spacing: .3em; text-align: center;
}
.code-input::placeholder { color: var(--faint); }
.code-input:focus { border-color: var(--accent); outline: none; }
.gate .field { width: 100%; margin-top: 10px; }
.gate .btn-primary { width: 100%; margin-top: 12px; padding: 14px; font-size: 17px; }
.gate-error { color: var(--enemy); font-size: 14px; min-height: 22px; margin-top: 8px; }

/* Shell */
.app { max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; }
.top { display: flex; align-items: center; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; }
.tab {
  background: none; border: 0; padding: 8px 12px; border-radius: var(--radius-s);
  font: 600 18px/1 var(--cond); color: var(--muted); letter-spacing: .02em;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); background: var(--raised); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.server { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.server b { color: var(--text); font-weight: 600; margin-right: 4px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.live-dot.ok { background: var(--ally); animation: pulse 2.4s infinite; }
.live-dot.err { background: var(--enemy); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(95,194,142,.6); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(95,194,142,0); }
}
.banner {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-m);
  background: rgba(239,111,97,.1); border: 1px solid rgba(239,111,97,.4); color: #f6b3aa; font-size: 15px;
}

/* Tag patch */
.tag {
  --c: var(--neutral);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 2px 7px; border-radius: var(--radius-s);
  font: 700 15px/1.2 var(--cond); letter-spacing: .06em; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.tag-xl { font-size: 64px; line-height: 1; padding: 10px 20px 8px; border-width: 2px; border-radius: var(--radius-m); min-width: 120px; }
.tag-l { font-size: 24px; padding: 3px 12px; min-width: 64px; }
.tag-none { --c: var(--faint); border-style: dashed; }

.rel { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.rel::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.rel-feind { color: var(--enemy); }
.rel-feind::before { transform: rotate(45deg); }
.rel-neutral { color: var(--neutral); }
.rel-neutral::before { border-radius: 50%; }
.rel-verbuendet { color: var(--ally); }

.on { color: var(--ally); font-size: 14px; font-weight: 600; }
.off { color: var(--faint); font-size: 14px; }
.linkish { background: none; border: 0; padding: 0; text-align: left; font-weight: 600; }
.linkish:hover { color: var(--accent); }

/* Lookup */
.lookup { padding: 40px 0 32px; }
.lookup label { display: block; font: 600 20px/1 var(--cond); color: var(--muted); margin-bottom: 14px; }
.search-wrap { position: relative; }
.search {
  width: 100%; padding: 20px 64px 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-l);
  font: 500 30px/1.1 var(--cond); letter-spacing: .01em;
}
.search::placeholder { color: var(--faint); }
.search:focus { outline: none; border-color: var(--accent); background: var(--raised); }
.kbd {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 2px 9px; color: var(--faint); font-size: 14px;
}
.result { margin-top: 18px; }
.hit-main {
  display: flex; align-items: center; gap: 28px; padding: 26px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  border-left: 4px solid var(--c, var(--line));
}
.hit-main .who { min-width: 0; }
.hit-main .name { font: 600 38px/1.05 var(--cond); overflow-wrap: anywhere; }
.hit-main .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--muted); font-size: 15px; }
.hit-main .actions { margin-left: auto; display: flex; gap: 8px; }
.hit-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.hit-row {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 16px; align-items: center;
  padding: 10px 14px; border-radius: var(--radius-m); background: none; border: 0; text-align: left; width: 100%;
}
.hit-row:hover { background: var(--surface); }
.hit-row .n { font-weight: 600; }
.empty-hit {
  padding: 22px 26px; border: 1px dashed var(--line); border-radius: var(--radius-l);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.empty-hit p { margin: 0; color: var(--muted); }
.empty-hit b { color: var(--text); }

/* Section heads */
.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.section-head h2 { font: 700 30px/1 var(--cond); margin: 0; }
.section-head .sub { color: var(--muted); font-size: 15px; }
.section-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Overview: clan ranking + server panel */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.counts { display: flex; gap: 28px; margin: 0 0 18px; flex-wrap: wrap; }
.count { display: flex; align-items: baseline; gap: 8px; }
.count strong { font: 700 34px/1 var(--cond); }
.count span { color: var(--muted); font-size: 15px; }
.count.feind strong { color: var(--enemy); }
.count.verbuendet strong { color: var(--ally); }
.count-link { border: 0; background: none; padding: 0; color: inherit; text-align: left; }
.count-link em { font: 600 13px var(--body); font-style: normal; color: var(--accent); }
.count-link:hover span { color: var(--text); }
.count-link:hover em { text-decoration: underline; }
/* Board: one tile per gang online */
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; grid-auto-flow: dense; }
.tile {
  --c: var(--neutral);
  grid-column: span 2; display: flex; flex-direction: column; gap: 6px; min-height: 140px; min-width: 0;
  padding: 14px 16px 12px; text-align: left; color: var(--text); border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line));
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 22%, var(--surface)), var(--surface) 75%);
  scroll-margin-top: 20px; position: relative;
}
/* HUD corner brackets */
.tile::before, .tile::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--c); opacity: .8; pointer-events: none;
}
.tile::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-m); }
.tile::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-m); }
.tile-n { text-shadow: 0 0 28px color-mix(in srgb, var(--c) 55%, transparent); }
.tile.rel-feind-tile { box-shadow: 0 0 0 1px color-mix(in srgb, var(--enemy) 30%, transparent), 0 8px 30px -12px color-mix(in srgb, var(--enemy) 60%, transparent); }
.tile.xl { grid-column: span 3; }
button.tile:hover { border-color: var(--c); }
.tile.rel-feind-tile { border-color: color-mix(in srgb, var(--enemy) 65%, var(--line)); }
.tile.fraktion { border-style: dashed; background: color-mix(in srgb, var(--c) 7%, var(--surface)); min-height: 112px; }
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile-top .rel { margin-left: auto; font-size: 13px; }
.tile-top .muted { margin-left: auto; font-size: 13px; font-weight: 600; }
.tile-tag { font: 700 26px/1 var(--cond); letter-spacing: .05em; color: var(--c); }
.tile-mid { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.tile-n { font: 700 64px/.85 var(--cond); font-variant-numeric: tabular-nums; }
.tile.xl .tile-n { font-size: 84px; }
.tile.fraktion .tile-n { font-size: 44px; }
.pips { display: flex; flex-wrap: wrap; gap: 3px; padding-bottom: 4px; max-width: 220px; }
.pips i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.tile-names { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
.tile-extra { font-size: 12px; color: var(--muted); }
.tile-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.board-label { grid-column: 1 / -1; font: 600 18px/1 var(--cond); color: var(--muted); margin-top: 10px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.board-label span { font: 400 13px/1.3 var(--body); color: var(--faint); }
.rank-empty { color: var(--muted); padding: 12px 0; grid-column: 1 / -1; }
.fac {
  --c: var(--neutral); font: 700 12px/1 var(--cond); letter-spacing: .05em; padding: 2px 5px; border-radius: 3px;
  color: var(--c); border: 1px dashed color-mix(in srgb, var(--c) 70%, transparent); white-space: nowrap;
}
.kind { font-size: 13px; font-weight: 600; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px; }
.panel h3 { font: 600 18px/1.2 var(--cond); margin: 0 0 2px; color: var(--muted); }
.panel .big { font: 700 40px/1 var(--cond); }
.panel .big small { font-size: 20px; color: var(--muted); font-weight: 500; }
.panel .meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.spark { display: block; width: 100%; height: 70px; margin-top: 12px; }
.spark-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }

.members { list-style: none; margin: 0; padding: 4px 0 8px; }
.members li { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 15px; min-width: 0; }
.members li:hover { background: var(--raised); }
.members .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; }
.members .t { margin-left: auto; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.members .robbed { font-size: 12px; color: var(--accent); white-space: nowrap; }
.assign-btn {
  opacity: 0; border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--radius-s); font-size: 13px; padding: 1px 8px; color: var(--accent); white-space: nowrap;
}
.members li:hover .assign-btn, .assign-btn:focus-visible { opacity: 1; }
.members li:hover .t.hide-on-hover { display: none; }
.hint { font-size: 12px; color: var(--accent); background: rgba(227,179,94,.1); border-radius: 3px; padding: 0 6px; white-space: nowrap; cursor: help; }

/* Pages */
.page { padding-top: 36px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 600 15px/1 var(--cond); color: var(--muted); letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
tr:hover td { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.clan-select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 4px 6px; font-weight: 600; }
.empty { color: var(--muted); padding: 28px 0; }
.clan-rows { display: flex; flex-direction: column; gap: 10px; }
.clan-row {
  --c: var(--neutral); display: grid; grid-template-columns: 96px minmax(0, 1fr) 120px 110px 140px auto;
  align-items: center; gap: 20px; padding: 16px 20px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius-m);
}
.clan-row .cn { font-weight: 600; }
.clan-row .cnote { color: var(--muted); font-size: 14px; }
.clan-row .num strong { font: 700 24px/1 var(--cond); }
.clan-row .num span { color: var(--muted); font-size: 13px; display: block; }

/* Robberies */
.rob-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.rob-form .form-row:last-of-type { margin-bottom: 20px; }
.rob-list { display: flex; flex-direction: column; gap: 8px; }
.rob {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.rob .when { font: 600 17px/1.2 var(--cond); }
.rob .when small { display: block; color: var(--muted); font: 400 13px/1.3 var(--body); }
.rob .what { color: var(--muted); font-size: 14px; margin-top: 2px; }
.rob .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Dialogs */
dialog { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--text); padding: 0; width: min(480px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(6,12,16,.7); backdrop-filter: blur(2px); }
.modal-body { padding: 24px; }
.modal-body h3 { font: 700 28px/1.1 var(--cond); margin: 0 0 20px; }
.form-row { margin-bottom: 16px; }
.form-row > label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.form-row .field { width: 100%; }
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pick button { background: none; border: 0; padding: 0; border-radius: var(--radius-s); }
.tag-pick button[aria-pressed="true"] .tag { background: var(--c); color: #0c0b10; }
.tag-pick button[aria-pressed="false"] .tag { opacity: .75; }
.tag-pick button:hover .tag { opacity: 1; }
.tag-pick .tag-new { border: 1px dashed var(--faint); color: var(--muted); padding: 0 12px; font: 600 16px/1 var(--cond); min-height: 36px; }
.tag-pick .tag-new:hover { border-color: var(--accent); color: var(--accent); }
.tag-new-form { display: inline-flex; gap: 6px; align-items: center; }
.tag-new-form .field { width: 96px; text-transform: uppercase; padding: 6px 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); }
.modal-foot .left { margin-right: auto; }
.detect { font-size: 14px; color: var(--accent); margin-top: 8px; }

/* Screenshot import */
dialog.dlg-wide { width: min(720px, calc(100vw - 32px)); }
.shot-zone {
  border: 1.5px dashed var(--faint); border-radius: var(--radius-m); padding: 34px 24px; text-align: center;
  background: var(--bg); cursor: pointer;
}
.shot-zone:hover { border-color: var(--accent); }
.shot-zone p { margin: 0 0 8px; }
.shot-zone p:last-child { margin: 0; font-size: 14px; }
.shot-zone.busy { cursor: default; color: var(--muted); }
.shot-zone.busy p { font: 600 20px/1.2 var(--cond); margin: 0; }
.shot-zone.fail { cursor: default; text-align: left; border-style: solid; border-color: color-mix(in srgb, var(--enemy) 50%, var(--line)); }
.shot-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
kbd { font: 600 13px/1 var(--body); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; background: var(--surface); }
.accent { color: var(--accent); }
.shot-lead { margin: 0 0 14px; color: var(--muted); }
.shot-rows { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.shot-row { display: grid; grid-template-columns: 22px 78px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.shot-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.shot-row .field { padding: 6px 10px; min-width: 0; }
.shot-row .tag-in { text-transform: uppercase; font: 700 17px/1 var(--cond); letter-spacing: .03em; }
.shot-row .st { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; min-width: 0; }
.shot-row .st .hint { white-space: normal; }
.shot-rows { overflow-x: hidden; }
.shot-row.same { opacity: .55; }
.warn { color: var(--enemy); }
.shot-more { margin-top: 12px; font-size: 14px; }
.drop {
  position: fixed; inset: 12px; z-index: 50; border: 2px dashed var(--accent); border-radius: var(--radius-l);
  background: rgba(18,29,37,.88); display: grid; place-items: center; pointer-events: none;
}
.drop p { font: 700 34px/1 var(--cond); color: var(--accent); }
@media (max-width: 760px) {
  .shot-row { grid-template-columns: 22px 70px minmax(0, 1fr); }
  .shot-row .st { grid-column: 2 / -1; }
}

/* Player drawer */
dialog.drawer {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(560px, 100vw); max-width: 100vw;
  border-radius: 0; border-width: 0 0 0 1px; overflow-y: auto;
}
.drawer-head { display: flex; align-items: flex-start; gap: 18px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.drawer-head .name { font: 700 32px/1.05 var(--cond); overflow-wrap: anywhere; }
.drawer-head .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--muted); font-size: 14px; }
.drawer-head .x { margin-left: auto; }
.drawer-body { padding: 8px 24px 32px; }
.drawer-body h4 { font: 600 19px/1.2 var(--cond); margin: 26px 0 10px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--raised); border-radius: var(--radius-m); padding: 10px 12px; }
.stat strong { display: block; font: 700 22px/1.1 var(--cond); }
.stat span { font-size: 13px; color: var(--muted); }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 64px; }
.hours i { display: block; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.hours-axis { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 12px; color: var(--faint); margin-top: 4px; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 15px; }
.plain-list li .r { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-edit { display: flex; gap: 8px; }
.note-edit .field { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: var(--radius-m);
  font-weight: 600; transition: transform .25s ease; z-index: 10;
}
.toast.show { transform: translate(-50%, 0); }
.toast.err { background: var(--enemy); color: #fff; }

@media (max-width: 1000px) {
  .overview { grid-template-columns: 1fr; }
  .esp { opacity: .5; }
  .rob-layout { grid-template-columns: 1fr; }
  .clan-row { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .clan-row .hide-m { display: none; }
}
@media (max-width: 760px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: span 1; min-height: 120px; padding: 12px; }
  .tile.xl { grid-column: span 2; }
  .tile-n { font-size: 48px; }
  .tile.xl .tile-n { font-size: 64px; }
  .pips { display: none; }
  .esp { display: none; }
  .app { padding: 0 16px 60px; }
  .top { flex-wrap: wrap; gap: 12px; }
  .top-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .tabs { order: 3; width: 100%; }
  .tab { flex: 1; padding: 8px 4px; }
  .lookup { padding: 28px 0 24px; }
  .search { font-size: 22px; padding: 16px 18px; }
  .kbd { display: none; }
  .hit-main { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .hit-main .actions { margin-left: 0; }
  .tag-xl { font-size: 44px; }
  .hit-main .name { font-size: 30px; }
  .hit-row { grid-template-columns: 56px 1fr auto; }
  .hit-row .hide-m { display: none; }
  .counts { gap: 8px 20px; }
  .count strong { font-size: 28px; }
  .rank { grid-template-columns: 64px minmax(0, 1fr) 36px; }
  .rank .rel { display: none; }
  .assign-btn { opacity: 1; }
  .members li .t.hide-on-hover { display: none; }
  table thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  td { border: 0; padding: 0; }
  td.c-wide { grid-column: 1 / -1; font-size: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .rob { grid-template-columns: 1fr auto; }
  .rob .when { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.tag-pick .tag-none-pick { border: 1px solid var(--line); color: var(--muted); padding: 0 12px; font: 600 16px/1 var(--cond); min-height: 36px; }
.tag-pick .tag-none-pick[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--raised); }

/* ================= Motion & polish =================
   One intro when the board first appears; after that only changes move (a count goes up/down,
   a new gang comes online). Pointer effects only on devices with a mouse. */
:root { --mag: #ff3ff2; --blu: #8b5cff; --ease: cubic-bezier(.2,.8,.2,1); }

/* glass header that stays on top, with a magenta-to-blue hairline */
.top {
  position: sticky; top: 0; z-index: 6; margin: 0 -24px; padding: 14px 24px; border-bottom: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,63,242,.55) 30%, rgba(139,92,255,.55) 70%, transparent);
}
.tile { scroll-margin-top: 96px; }

/* tabs: one underline that slides to the active tab */
.tabs { position: relative; }
.tab { transition: color .2s; }
.tab[aria-selected="true"] { background: none; text-shadow: 0 0 14px rgba(255,63,242,.45); }
.tab-ink {
  position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--mag), var(--blu)); box-shadow: 0 0 12px rgba(255,63,242,.7);
  transition: transform .4s var(--ease), width .4s var(--ease);
}

/* backdrop: hexes light up around the cursor, a slow scan line passes now and then */
.grid-glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'42'%20height%3D'72.7'%3E%3Cpath%20d%3D'M21%200l21%2012.1v24.2L21%2048.5%200%2036.4V12.1zM21%2048.5v24.2'%20fill%3D'none'%20stroke%3D'rgba(255%2C63%2C242%2C0.95)'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E") 0 0 / 42px 72.7px;
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%);
  mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%);
}
.grid-bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background: linear-gradient(transparent, rgba(255,63,242,.035) 70%, rgba(255,63,242,.14) 99%, transparent);
  transform: translateY(-160px); animation: scan 11s linear infinite 2s;
}
@keyframes scan { 70%, 100% { transform: translateY(calc(100vh + 160px)); } }

/* tiles: spotlight under the cursor, lift on hover */
.tile {
  background:
    radial-gradient(280px circle at var(--lx, -400px) var(--ly, -400px), color-mix(in srgb, var(--c) 24%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--c) 22%, var(--surface)), var(--surface) 75%);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.tile.fraktion { background: radial-gradient(240px circle at var(--lx, -400px) var(--ly, -400px), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), color-mix(in srgb, var(--c) 7%, var(--surface)); }
button.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 18px 40px -20px var(--c);
}
.tile-n { display: inline-block; }

/* first appearance: tiles rise in one after another, then the pips fill up */
.board.intro .tile { animation: tile-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.board.intro .pips i { animation: pip-in .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms + var(--p, 0) * 28ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(5px); } }
@keyframes pip-in { from { opacity: 0; transform: scale(0); } }

/* live changes: new gang slides in, a count that moved pops and pulses */
.tile.enter { animation: tile-in .6s var(--ease) both; }
.tile.up, .tile.down { animation: ring 1.4s ease-out; }
.tile.down { --ring: var(--faint); }
.tile.up .tile-n, .tile.down .tile-n { animation: num-pop .9s var(--ease); }
@keyframes ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ring, var(--c)) 75%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@keyframes num-pop { 0% { transform: translateY(-6px) scale(1.2); color: #fff; text-shadow: 0 0 34px var(--c); } }
.delta {
  font: 700 18px/1 var(--cond); padding-bottom: 6px; color: var(--ally);
  animation: delta 3.2s var(--ease) forwards;
}
.delta.down { color: var(--muted); }
@keyframes delta { 0% { opacity: 0; transform: translateY(8px); } 12%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

.members li { transition: background-color .15s; }

/* primary buttons: a light sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* search: neon focus */
.search { transition: border-color .2s, box-shadow .3s, background-color .2s; }
.search:focus { border-color: var(--mag); box-shadow: 0 0 0 4px rgba(255,63,242,.14), 0 0 44px -12px rgba(255,63,242,.65); }

/* ESP figure: stays in the margin, breathes a little */
.esp-near { right: max(1vw, calc(50vw - 620px - 290px)); height: 54vh; bottom: 6vh; }
.esp-near .esp-bone { transform-box: view-box; transform-origin: 104px 300px; animation: sway 7s ease-in-out infinite; }
.esp-far .esp-bone { transform-box: view-box; transform-origin: 100px 300px; animation: sway 9s ease-in-out infinite reverse; }
@keyframes sway { 50% { transform: rotate(1.4deg) translateX(2px); } }
/* Kyle, a bit further back than Boba but just as present, mirrored in the left margin */
.esp-far { left: max(1vw, calc(50vw - 620px - 250px)); top: auto; bottom: 10vh; height: 44vh; opacity: .9; }
@media (max-width: 1760px) { .esp-near, .esp-far { opacity: .35; } }

@media (max-width: 760px) {
  .top { position: relative; margin: 0 -16px; padding: 12px 16px; }
  .top-right { flex-wrap: wrap; gap: 8px; }
  #srv-age { display: none; }
  #logout { position: absolute; top: 14px; right: 16px; }
  .tile { scroll-margin-top: 20px; }
  .tab-ink { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grid-glow { display: none; }
}

/* Lage: a tile opens its player list right under its row */
.tile.open { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 36px -10px var(--c); }
.tile.open .tile-n { color: var(--c); }
.tile-detail {
  --c: var(--neutral); grid-column: 1 / -1; position: relative; border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-top: 2px solid var(--c);
  background: radial-gradient(320px circle at var(--lx, -400px) var(--ly, -400px), color-mix(in srgb, var(--c) 9%, transparent), transparent 70%), var(--surface);
}
.tile-detail.fraktion { border-style: dashed; border-top-style: solid; }
.tile-detail.opening { animation: detail-in .35s var(--ease) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(-8px) scaleY(.96); transform-origin: top; } }
.detail-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 0 16px; min-height: 34px; font-size: 13px; color: var(--muted); }
.detail-close {
  margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: var(--radius-s); background: none;
  color: var(--muted); font-size: 20px; line-height: 1;
}
.detail-close:hover { background: var(--raised); color: var(--text); }
.tile-detail .members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); column-gap: 8px; }
@media (hover: none) { .tile-detail .assign-btn { opacity: 1; } }