/* HTB Team Bingo — scoreboard styles (no external fonts / CDNs).
   Colour is never the only signal: USER = dashed border + striped half fill + "$ USER" badge,
   ROOT = solid border + full fill + "# ROOT" badge. */

/* ===== Tokens ===== */
:root {
  color-scheme: dark;
  --bg: #0b121d;
  --bg-dot: rgba(159, 239, 0, 0.045);
  --surface: #0f1724;
  --panel: #151f2e;
  --panel-2: #1b2638;
  --panel-hi: #23324a;
  --border: #26354c;
  --border-strong: #3a4c69;
  --text: #e9eff8;
  --text-2: #b7c3d6;
  --muted: #7f8fa9;

  --root: #9fef00;
  --root-ink: #0c1600;
  --root-text: #b5ff3a;
  --root-fill-a: rgba(159, 239, 0, 0.26);
  --root-fill-b: rgba(159, 239, 0, 0.07);
  --root-glow: rgba(159, 239, 0, 0.45);

  --user: #4a7bab;
  --user-ink: #eaf2fa;
  --user-text: #7fa3c4;
  --user-fill: rgba(74, 123, 171, 0.07);
  --user-stripe: rgba(74, 123, 171, 0.2);

  --danger: #ff6170;
  --danger-fill: rgba(255, 97, 112, 0.13);
  --warn: #ffb547;
  --warn-text: #ffb547; /* --warn as a text colour (the light theme needs a darker shade) */
  --warn-ink: #1d1200;
  --warn-fill: rgba(255, 181, 71, 0.13);

  /* Special cells: bonus (pre-completed, gold ★), hidden (operator-judged "???"), Insane accent */
  --bonus: #ffd23f;
  --bonus-ink: #241700;
  --bonus-text: #ffdc6e;
  --bonus-fill-a: rgba(255, 210, 63, 0.32);
  --bonus-fill-b: rgba(255, 170, 20, 0.1);
  --bonus-ray: rgba(255, 210, 63, 0.09);
  --insane: #d08cff;
  --insane-ink: #1c0530;
  --hidden-bg: #080d15;
  --hidden-line: #34445e;

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  --mini-line: #ffffff;
  --mini-line-under: #0b121d;
  --radius: 16px;
  --radius-sm: 10px;
  --gap: 20px;
  --pad: 24px;
  --strip-h: calc(2.48rem + 30px); /* = one member card (it scales with the root font size) */
  --side-min: 300px;

  --font: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Light variant: OS preference (unless ?theme=dark) or explicit ?theme=light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #edf1f6;
    --bg-dot: rgba(15, 23, 36, 0.06);
    --surface: #f8fafc;
    --panel: #ffffff;
    --panel-2: #f1f4f9;
    --panel-hi: #e3eaf4;
    --border: #d4dce8;
    --border-strong: #aebbd0;
    --text: #0f1724;
    --text-2: #33425b;
    --muted: #64738c;
    --root: #86d600;
    --root-ink: #0c1600;
    --root-text: #3b7000;
    --root-fill-a: rgba(134, 214, 0, 0.34);
    --root-fill-b: rgba(134, 214, 0, 0.12);
    --root-glow: rgba(110, 190, 0, 0.45);
    --user: #5b84ad;
    --user-ink: #ffffff;
    --user-text: #3f6a93;
    --user-fill: rgba(91, 132, 173, 0.06);
    --user-stripe: rgba(91, 132, 173, 0.18);
    --danger: #d42a42;
    --danger-fill: rgba(212, 42, 66, 0.09);
    --warn: #d98a00;
    --warn-text: #8a5300;
    --warn-ink: #1d1200;
    --warn-fill: rgba(217, 138, 0, 0.12);
    --bonus: #e9ac00;
    --bonus-ink: #241700;
    --bonus-text: #7a5200;
    --bonus-fill-a: rgba(240, 180, 0, 0.36);
    --bonus-fill-b: rgba(240, 180, 0, 0.12);
    --bonus-ray: rgba(200, 140, 0, 0.1);
    --insane: #8a2fd0;
    --insane-ink: #ffffff;
    --hidden-bg: #dfe5ee;
    --hidden-line: #a9b6ca;
    --shadow: 0 10px 28px rgba(15, 23, 36, 0.12);
    --mini-line: #0f1724;
    --mini-line-under: #ffffff;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f6;
  --bg-dot: rgba(15, 23, 36, 0.06);
  --surface: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f4f9;
  --panel-hi: #e3eaf4;
  --border: #d4dce8;
  --border-strong: #aebbd0;
  --text: #0f1724;
  --text-2: #33425b;
  --muted: #64738c;
  --root: #86d600;
  --root-ink: #0c1600;
  --root-text: #3b7000;
  --root-fill-a: rgba(134, 214, 0, 0.34);
  --root-fill-b: rgba(134, 214, 0, 0.12);
  --root-glow: rgba(110, 190, 0, 0.45);
  --user: #5b84ad;
  --user-ink: #ffffff;
  --user-text: #3f6a93;
  --user-fill: rgba(91, 132, 173, 0.06);
  --user-stripe: rgba(91, 132, 173, 0.18);
  --danger: #d42a42;
  --danger-fill: rgba(212, 42, 66, 0.09);
  --warn: #d98a00;
  --warn-text: #8a5300;
  --warn-ink: #1d1200;
  --warn-fill: rgba(217, 138, 0, 0.12);
  --bonus: #e9ac00;
  --bonus-ink: #241700;
  --bonus-text: #7a5200;
  --bonus-fill-a: rgba(240, 180, 0, 0.36);
  --bonus-fill-b: rgba(240, 180, 0, 0.12);
  --bonus-ray: rgba(200, 140, 0, 0.1);
  --insane: #8a2fd0;
  --insane-ink: #ffffff;
  --hidden-bg: #dfe5ee;
  --hidden-line: #a9b6ca;
  --shadow: 0 10px 28px rgba(15, 23, 36, 0.12);
  --mini-line: #0f1724;
  --mini-line-under: #ffffff;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2400px) { html { font-size: 21px; } }

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--user); outline-offset: 2px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Shared tags: "$ USER" / "# ROOT" */
.tag {
  display: inline-flex; align-items: center; gap: 0.3em;
  font: 800 0.72rem/1 var(--mono); letter-spacing: 0.04em;
  padding: 0.32em 0.5em; border-radius: 0.4em; white-space: nowrap;
}
.tag-root { background: var(--root); color: var(--root-ink); }
.tag-user { background: var(--user); color: var(--user-ink); }
.tag-line { background: transparent; color: var(--root-text); box-shadow: inset 0 0 0 1.5px var(--root); }
.tag-warn { background: var(--warn-fill); color: var(--warn-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.tag-muted { background: var(--panel-2); color: var(--muted); }
/* Team account (App Token): neutral so it never reads as a USER/ROOT state */
.tag-account { background: var(--panel-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tag-pending { background: var(--panel-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tag-danger { background: var(--danger-fill); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); }
/* Special cells: bonus = gold fill; hidden = dark "???" (unsolved) / lime outline (solved) */
.tag-bonus { background: var(--bonus); color: var(--bonus-ink); }
.tag-hidden { background: var(--hidden-bg); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hidden-line); }
.tag-hidden-done { background: transparent; color: var(--root-text); box-shadow: inset 0 0 0 1.5px var(--root); }
/* Machine replacement: NEW = neutral high-contrast (never a state colour); 교체 대기 = amber */
.tag-new { background: var(--text); color: var(--bg); }
.tag-wait { background: var(--warn); color: var(--warn-ink); }
.tag .tag-pts { margin-left: 0.2em; opacity: 0.8; }

/* Points value chip ("+9"): outlined until earned, lime when earned (legend, tooltip) */
.pts-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em;
  padding: 0.3em 0.42em; border-radius: 0.45em; white-space: nowrap;
  font: 800 0.74rem/1 var(--mono); font-variant-numeric: tabular-nums;
  background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.pts-chip.earned { background: var(--root); color: var(--root-ink); box-shadow: none; }

/* Inline SVG icons (lock / unlock / star) */
.icon { display: block; fill: currentColor; }
.icon .ic-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ===== App shell ===== */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto auto;
  grid-template-areas: "brand event views sync";
  align-items: center; gap: 10px 24px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.bm-off { fill: var(--panel-hi); }
.bm-half { fill: var(--user); opacity: 0.85; }
.bm-on { fill: var(--root); }
.brand-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-mock {
  flex: none; font: 800 0.7rem/1 var(--mono); letter-spacing: 0.1em;
  padding: 5px 7px; border-radius: 6px; background: var(--warn); color: var(--warn-ink);
}

.event { grid-area: event; justify-self: center; display: flex; align-items: center; gap: 12px; min-width: 0; }
.event-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-weight: 800; font-size: 0.85rem;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-2);
}
.event-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.event-pill[data-status="running"] {
  color: var(--root-text); border-color: color-mix(in srgb, var(--root) 50%, transparent);
  background: color-mix(in srgb, var(--root) 10%, var(--panel));
}
.event-pill[data-status="running"]::before { background: var(--root); animation: pulse 1.8s ease-out 3; }
.event-pill[data-status="upcoming"] { color: var(--user-text); border-color: color-mix(in srgb, var(--user) 50%, transparent); }
.event-pill[data-status="upcoming"]::before { background: var(--user); }
.event-pill[data-status="ended"]::before { background: var(--danger); border-radius: 2px; }
.event-countdown { font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.event-countdown small { font: 600 0.78rem var(--font); color: var(--muted); margin-right: 6px; }

.views {
  grid-area: views; display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
}
.view-link {
  padding: 6px 12px; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: 0.85rem; color: var(--muted); white-space: nowrap;
}
.view-link:hover { color: var(--text); }
.view-link[aria-current="page"] { background: var(--panel-hi); color: var(--text); }

.sync { grid-area: sync; justify-self: end; display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--muted); min-width: 0; }
.sync-updated { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sync-updated.cycling::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 6px; vertical-align: -0.1em;
  border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite;
}
.sync-chip {
  white-space: nowrap; font-weight: 700; font-size: 0.78rem;
  padding: 4px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--text-2);
}
.sync-chip.warn { color: var(--warn-text); background: var(--warn-fill); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.sync-chip.danger { color: var(--danger); background: var(--danger-fill); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* Adaptive-backoff chip: the full sentence on wide bars, a short form otherwise (full text in title + sr-only) */
.rate-chip .rate-short { display: none; }
@media (max-width: 1365.98px) {
  .rate-chip .rate-long { display: none; }
  .rate-chip .rate-short { display: inline; }
}
.conn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.conn[data-state="connecting"] .conn-dot { animation: blink 1s ease-in-out infinite; }
/* No infinite animation here: the board runs for many hours. The dot pulses once per received update. */
.conn[data-state="live"] .conn-dot { background: var(--root); }
.conn[data-state="live"].beat .conn-dot { animation: pulse 2s ease-out 1; }
.conn[data-state="polling"] .conn-dot { background: var(--warn); border-radius: 2px; }
.conn[data-state="offline"] .conn-dot { background: var(--danger); border-radius: 2px; transform: rotate(45deg); }
.conn[data-state="offline"] { color: var(--danger); }

.rotate-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; }
.rotate-bar span { display: block; height: 100%; background: var(--root); transform-origin: left center; transform: scaleX(0); }
.rotate-bar.run span { animation: rotate-progress var(--rotate-ms, 15000ms) linear forwards; }
.rotate-bar.paused span { background: var(--muted); transform: scaleX(1); opacity: 0.35; }

.notice {
  display: flex; align-items: center; gap: 12px;
  margin: 12px var(--pad) 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--danger-fill); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  font-size: 0.9rem; font-weight: 600;
}
.notice-icon {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--danger); color: #fff; font: 900 0.85rem/1 var(--mono);
}

/* Operator warnings (config typos, token problems) — compact, dismissible */
.warnings {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px var(--pad) 0; padding: 7px 8px 7px 12px; border-radius: var(--radius-sm);
  background: var(--warn-fill); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  font-size: 0.86rem; color: var(--text);
}
.warnings-icon {
  flex: none; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center;
  border-radius: 50%; background: var(--warn); color: var(--warn-ink); font: 900 0.8rem/1 var(--mono);
}
.warnings-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding-top: 3px; }
.warnings-title { flex: none; color: var(--warn-text); font-weight: 800; }
.warnings-first { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-weight: 600; }
.warnings.open .warnings-body { flex-direction: column; gap: 4px; }
.warnings-list { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; color: var(--text-2); font-weight: 600; }
.warnings-list li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.warnings-list li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.warnings-btn {
  flex: none; cursor: pointer; border-radius: 7px; padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: transparent;
  color: var(--warn-text); font-weight: 700; font-size: 0.8rem; white-space: nowrap;
}
.warnings-btn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.warnings-close { width: 28px; padding: 3px 0; font: 700 1.05rem/1 var(--font); }

/* ===== Main layout ===== */
.layout {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: clamp(300px, 26vw, 29rem) minmax(0, 1fr); /* rem cap: grows with the 4K font size */
  gap: var(--gap);
  padding: var(--pad);
  align-items: start;
}
.app[data-view="overview"] .layout,
.app[data-view="rules"] .layout { grid-template-columns: minmax(0, 1fr); }
.app[data-view="overview"] .ranking,
.app[data-view="overview"] .team-view,
.app[data-view="team"] .overview,
.app[data-view="rules"] .ranking,
.app[data-view="rules"] .team-view,
.app[data-view="rules"] .overview,
.app[data-view="rules"] .screen,
.app:not([data-view="rules"]) .rules-view { display: none; }
.app:not([data-status="ready"]) .ranking,
.app:not([data-status="ready"]) .team-view,
.app:not([data-status="ready"]) .overview { display: none; }
.app[data-status="ready"] .screen { display: none; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel-title { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.panel-meta { font-size: 0.8rem; color: var(--muted); }

/* ===== Competition rules ===== */
.rules-view {
  grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 1040px;
  min-width: 0; display: flex; flex-direction: column; gap: var(--gap);
  padding-block: 12px 28px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere;
}
.rules-head { padding: 0 2px 4px; }
.rules-eyebrow { color: var(--root-text); font: 800 0.75rem/1.4 var(--mono); letter-spacing: 0.15em; }
.rules-title { margin-top: 8px; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.3; font-weight: 850; letter-spacing: -0.025em; }
.rules-intro { margin-top: 10px; color: var(--text-2); }
.rules-card { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.rules-card-title { margin-bottom: 16px; font-size: 1.05rem; line-height: 1.5; font-weight: 800; }
.rules-card-title > span { margin-right: 4px; }
.rules-card > p { color: var(--text-2); }
.rules-card > p + p { margin-top: 14px; }
.rules-list { display: flex; flex-direction: column; gap: 9px; color: var(--text-2); }
.rules-list li { position: relative; padding-left: 18px; }
.rules-list li::before { content: ""; position: absolute; top: 0.7em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--root); }
.rules-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: var(--gap); }
.rules-agent { border-color: color-mix(in srgb, var(--warn) 38%, var(--border)); }
.rules-agent .rules-card-title { color: var(--warn-text); }
.rules-agent .rules-prohibition { color: var(--text); }
.rules-exception { margin-top: 22px; padding: 16px; border-radius: var(--radius-sm); background: var(--panel-2); }
.rules-exception h4 { margin: 0 0 8px; font-size: 0.88rem; font-weight: 800; color: var(--text); }
.rules-exception p { font-size: 0.92rem; color: var(--text-2); }
.rules-score-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.rules-score-table th, .rules-score-table td { padding: 10px 2px; text-align: left; border-bottom: 1px solid var(--border); }
.rules-score-table thead th { padding-top: 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.rules-score-table tbody th { font-size: 0.92rem; font-weight: 600; }
.rules-score-table th:last-child, .rules-score-table td { text-align: right; white-space: nowrap; }
.rules-score-table td { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--root-text); }
.rules-score-table tbody tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
.rules-score-bonus th { color: var(--text-2); }
@media (max-width: 740px) {
  .rules-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .app .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand sync" "event event" "views views"; }
  .views { justify-self: start; max-width: 100%; }
  .event { flex-wrap: wrap; gap: 8px; }
  .rules-view { padding-block: 4px 16px; }
  .rules-card { padding: 18px; }
}

/* ===== Status screens ===== */
.screen {
  grid-column: 1 / -1; justify-self: center; align-self: center;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  max-width: 520px; padding: 48px 16px;
}
.screen-skeleton { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 150px; margin-bottom: 12px; }
.screen-skeleton span { aspect-ratio: 1; border-radius: 5px; background: var(--panel-hi); animation: skeleton 1.6s ease-in-out infinite; }
.screen-skeleton span:nth-child(6n + 1) { animation-delay: 0.1s; }
.screen-skeleton span:nth-child(4n + 2) { animation-delay: 0.35s; }
.screen-skeleton span:nth-child(3n) { animation-delay: 0.6s; }
.app[data-status="error"] .screen-skeleton span { animation: none; background: var(--danger-fill); }
.app[data-status="error"] .screen-skeleton span:nth-child(1),
.app[data-status="error"] .screen-skeleton span:nth-child(7),
.app[data-status="error"] .screen-skeleton span:nth-child(13),
.app[data-status="error"] .screen-skeleton span:nth-child(19),
.app[data-status="error"] .screen-skeleton span:nth-child(25),
.app[data-status="error"] .screen-skeleton span:nth-child(5),
.app[data-status="error"] .screen-skeleton span:nth-child(9),
.app[data-status="error"] .screen-skeleton span:nth-child(17),
.app[data-status="error"] .screen-skeleton span:nth-child(21) { background: var(--danger); }
.app[data-status="empty"] .screen-skeleton span { animation: none; opacity: 0.6; }
.screen-title { font-size: 1.35rem; font-weight: 800; }
.screen-desc { color: var(--text-2); }
.screen-desc code { font-family: var(--mono); background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.btn {
  margin-top: 6px; padding: 9px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel-hi); font-weight: 700;
}
.btn:hover { border-color: var(--root); }

/* ===== Ranking ===== */
.ranking { padding: 16px; display: flex; flex-direction: column; gap: 8px; container: ranking / inline-size; }
.rank-scroll { margin: 0 -6px; padding: 0 6px; }
.rank-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; }
.rank-table th {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted);
  padding: 0 8px 2px; text-align: right;
}
.rank-table th.c-rank { width: 3rem; text-align: left; }
.rank-table th.c-team { text-align: left; }
.rank-table th.c-num { width: 3.1rem; }
.rank-row { cursor: pointer; }
.rank-row td { background: var(--panel-2); padding: 10px 8px; vertical-align: middle; transition: background-color 0.2s; }
.rank-row td:first-child { border-radius: 12px 0 0 12px; }
.rank-row td:last-child { border-radius: 0 12px 12px 0; }
.rank-row:hover td { background: var(--panel-hi); }
.rank-row.selected td { background: var(--panel-hi); }
.rank-row.selected td:first-child { box-shadow: inset 4px 0 0 var(--root); }
.rank-num {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px;
  font: 800 1.05rem/1 var(--mono); background: var(--panel); color: var(--text-2);
  border: 1px solid var(--border);
}
.rank-row[data-rank="1"] .rank-num { background: var(--root); color: var(--root-ink); border-color: transparent; }
.rank-row[data-rank="2"] .rank-num,
.rank-row[data-rank="3"] .rank-num { color: var(--text); border-color: var(--border-strong); }
.rank-team-btn {
  all: unset; display: block; width: 100%; cursor: pointer; border-radius: 6px;
  font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-team-btn:focus-visible { outline: 3px solid var(--user); outline-offset: 3px; }
.rank-bar { display: flex; height: 5px; margin-top: 7px; border-radius: 3px; overflow: hidden; background: var(--border); }
.rank-bar .r { background: var(--root); }
.rank-bar .u { background: repeating-linear-gradient(-45deg, var(--user) 0 3px, color-mix(in srgb, var(--user) 45%, transparent) 3px 6px); }
.rank-row td.n { text-align: right; font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
/* Total score = the ranking key: the big number. Bingo stays lime but at normal size. */
.rank-table th.c-num.c-total { width: 3.9rem; }
.rank-row td.n-total { font-size: 1.55rem; font-weight: 850; letter-spacing: -0.02em; color: var(--root-text); }
.rank-row td.n-total.zero { color: var(--muted); }
.rank-row td.n-bingo { font-weight: 800; color: var(--root-text); }
.rank-row td.n-bingo.zero { color: var(--muted); }
.rank-table th.c-num.c-hidden { width: 2.7rem; text-align: center; }
.rank-row td.n-hidden { text-align: center; font-size: 0.9rem; color: var(--muted); }
.rank-row td.n-hidden.solved > span[aria-hidden] {
  display: inline-grid; place-items: center; min-width: 1.55rem; height: 1.55rem; padding: 0 0.3em; border-radius: 999px;
  background: var(--root); color: var(--root-ink); font-size: 0.85rem;
}
.rank-row.bump td { animation: row-bump 1.4s ease-out; }

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-2);
}
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend .tag { font-size: 0.66rem; }
.lg-swatch {
  position: relative; width: 18px; height: 18px; border-radius: 5px; flex: none; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--border-strong);
}
.lg-swatch[data-state="user"] { border: 1.5px dashed var(--user); }
.lg-swatch[data-state="user"]::after {
  content: ""; position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(-45deg, var(--user-stripe) 0 2px, transparent 2px 4px), var(--user-fill);
}
.lg-swatch[data-state="root"] { border: 1.5px solid var(--root); background: linear-gradient(155deg, var(--root-fill-a), var(--root-fill-b)); }
.lg-swatch[data-kind] { display: grid; place-items: center; font: 800 11px/1 var(--mono); }
.lg-swatch[data-kind="bonus"] { border: 3px double var(--bonus); background: linear-gradient(155deg, var(--bonus-fill-a), var(--bonus-fill-b)); color: var(--bonus); }
.lg-swatch[data-kind="hidden"] { border: 1px solid var(--hidden-line); background: var(--hidden-bg); color: var(--muted); }
.lg-swatch[data-kind="wait"] {
  border: 1.5px dashed var(--border-strong);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--muted) 30%, transparent) 0 2px, transparent 2px 4px), var(--panel-2);
}

/* Point table (state.scoring) */
.points-legend { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pl-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.pl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pl-item {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 8px 5px 5px; border-radius: 9px;
  background: var(--panel-2); font-size: 0.8rem; font-weight: 700; color: var(--text-2);
}
.pl-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-insane .pts-chip { color: var(--insane); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--insane) 65%, transparent); }
.pl-hidden .pts-chip { background: var(--hidden-bg); box-shadow: inset 0 0 0 1px var(--hidden-line); }
.pl-line .pts-chip { color: var(--root-text); box-shadow: inset 0 0 0 1.5px var(--root); }
.pl-note { font-size: 0.76rem; color: var(--muted); word-break: keep-all; }
.lg-swatch.lg-line { border: 0; background: none; }
.lg-swatch.lg-line::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 3px; margin-top: -1.5px;
  background: var(--root); border-radius: 2px; transform: rotate(-35deg); box-shadow: 0 0 6px var(--root-glow);
}
/* Operator footer: Discord notifier status + admin page link — tiny, muted, never on the ?rotate projector (app.js) */
.ops { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: -2px; font-size: 0.74rem; color: var(--muted); }
.ops-discord { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ops-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted); }
.ops-discord[data-state="on"] .ops-dot { background: var(--root); }
.ops-discord[data-state="off"] .ops-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.ops-discord[data-state="warn"] { color: var(--warn-text); }
.ops-discord[data-state="warn"] .ops-dot { background: var(--warn); border-radius: 2px; }
.ops-discord[data-state="error"] { color: var(--danger); font-weight: 700; }
.ops-discord[data-state="error"] .ops-dot { background: var(--danger); border-radius: 2px; transform: rotate(45deg); }
.admin-link { margin-left: auto; font-size: 0.74rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.admin-link:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Team view ===== */
.team-view { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.team-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.team-rank {
  flex: none; display: flex; align-items: baseline; justify-content: center; gap: 1px;
  min-width: 3.6rem; height: 3.6rem; padding: 0 10px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border-strong);
  font: 800 1.9rem/3.5rem var(--mono); color: var(--text);
}
.team-rank small { font: 800 0.95rem var(--font); color: var(--muted); }
.team-rank[data-rank="1"] { background: var(--root); border-color: transparent; color: var(--root-ink); box-shadow: 0 0 28px var(--root-glow); }
.team-rank[data-rank="1"] small { color: color-mix(in srgb, var(--root-ink) 70%, transparent); }
.team-title { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-name {
  font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 850; letter-spacing: -0.02em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.88rem; color: var(--muted); }
.team-sub b { color: var(--text-2); font-weight: 700; }
.team-account { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.team-account .team-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-account-label, .team-account .tag { flex: none; white-space: nowrap; }
.team-account .tag { font-size: 0.68rem; }
.team-account-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--danger); font-weight: 600; }
.team-account.is-pending .team-account-msg { color: var(--warn-text); }
/* Per-member tokens: "팀원 김도현 · 이성우 [확인 중]" */
.team-people { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; max-width: 100%; }
.team-people-label { flex: none; }
.team-person { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 16em; }
.team-person > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-person + .team-person::before { content: "·"; margin-right: 1px; color: var(--muted); }
.team-person .tag { flex: none; font-size: 0.66rem; }
.team-person.is-pending > b { color: var(--muted); }
.team-people-more { font-weight: 700; color: var(--text-2); }
.team-switch { margin-left: auto; display: flex; gap: 6px; flex: none; }
.icon-btn {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text-2);
  font: 800 1.1rem/1 var(--mono);
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }

.team-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board" "members" "side";
}
.board-area { grid-area: board; min-width: 0; display: flex; justify-content: center; }
.team-side { grid-area: side; min-width: 0; }
.members { grid-area: members; min-width: 0; }

/* ----- Board ----- */
/* Stacking: .board is the stacking context. Cells deliberately do NOT create one, so the SVG overlay
   (z-index 1) paints above cell backgrounds/fills but below avatars, names and badges (z-index 2). */
.board { position: relative; width: 100%; aspect-ratio: 1; container: board / inline-size; isolation: isolate; }
.board-grid {
  /* gap is a % of board width (cqw); app.js mirrors it as BOARD_GAP for the SVG line overlay */
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 1.4cqw;
}
.board-row { display: contents; }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }

.cell {
  --flash: var(--root);
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5cqw;
  padding: 2.6cqw 1cqw 1.1cqw;
  border-radius: clamp(6px, 1.5cqw, 18px);
  background: var(--panel); border: 1px solid var(--border);
  overflow: hidden; cursor: default; user-select: none;
  transition: border-color 0.35s, background-color 0.35s, box-shadow 0.35s;
}
.cell:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.cell:hover { border-color: var(--border-strong); }
.cell-fill { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.cell-art, .cell-name, .cell-who { position: relative; z-index: 2; }
.cell-name, .cell-who { text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); }
.cell-art { width: 44%; aspect-ratio: 1; flex: none; display: grid; place-items: center; transition: filter 0.35s, opacity 0.35s; }
.cell-badge { z-index: 2; }
.cell-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.35)); }
.cell-glyph {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: var(--panel-2); border: 1.5px dashed var(--border-strong); color: var(--muted);
  font: 800 clamp(9px, 2.4cqw, 28px)/1 var(--mono);
}
.cell-name {
  max-width: 100%; padding: 0 0.6cqw;
  font-weight: 800; font-size: clamp(9px, 2.15cqw, 23px); letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-who {
  max-width: 100%; padding: 0 0.6cqw; min-height: 1.2em;
  font-size: clamp(8px, 1.65cqw, 17px); line-height: 1.2; color: var(--text-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Easy · Linux" from the token-resolved machine profile */
.cell-meta {
  position: relative; z-index: 2; max-width: 100%; padding: 0 0.6cqw; margin-top: -0.2cqw;
  font-size: clamp(8px, 1.45cqw, 15px); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg);
}
.cell[data-state="none"] .cell-meta { color: var(--muted); }
.board:not(.solo-account) .cell.has-meta .cell-art { width: 38%; } /* room for name + meta + owner line */
.cell-badge {
  position: absolute; top: 0.8cqw; left: 0.8cqw;
  display: inline-flex; align-items: center; gap: 0.25em;
  font: 800 clamp(8px, 1.45cqw, 15px)/1 var(--mono); letter-spacing: 0.04em;
  padding: 0.35em 0.5em; border-radius: 0.45em;
}
/* Top-right corner: 🩸 + points badge ("+9" — dim until this team earns it at ROOT) */
.cell-corner { position: absolute; z-index: 2; top: 0.8cqw; right: 0.8cqw; display: flex; align-items: center; gap: 0.5cqw; }
.cell-blood { font-size: clamp(9px, 1.7cqw, 20px); line-height: 1; }
.cell-pts {
  font: 800 clamp(8px, 1.45cqw, 15px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  padding: 0.35em 0.42em; border-radius: 0.45em;
  color: var(--muted); background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.cell-pts.earned { color: var(--root-ink); background: var(--root); box-shadow: 0 0 1.2cqw var(--root-glow); }
.cell.is-insane .cell-pts:not(.earned) { color: var(--insane); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--insane) 65%, transparent); }
.cell[data-kind="hidden"] .cell-pts:not(.earned) { color: var(--text-2); }

.cell[data-state="none"] .cell-art { opacity: 0.4; filter: grayscale(1); }
.cell[data-state="none"] .cell-name { color: var(--muted); font-weight: 700; }
.cell[data-state="none"] .cell-badge { display: none; }

.cell[data-state="user"] { --flash: var(--user); border: 2px dashed color-mix(in srgb, var(--user) 75%, transparent); }
.cell[data-state="user"] .cell-fill {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(-45deg, var(--user-stripe) 0 0.55cqw, transparent 0.55cqw 1.1cqw), var(--user-fill);
}
.cell[data-state="user"] .cell-badge { background: var(--user); color: var(--user-ink); }
.cell[data-state="user"] .cell-who { color: var(--user-text); }

.cell[data-state="root"] { border: 2px solid var(--root); }
.cell[data-state="root"] .cell-fill { background: linear-gradient(155deg, var(--root-fill-a), var(--root-fill-b)); }
.cell[data-state="root"] .cell-badge { background: var(--root); color: var(--root-ink); }
.cell[data-state="root"] .cell-who { color: var(--root-text); }

/* Board name that HTB doesn't know (token lookup returned 404): it can never fill — make the typo obvious. */
.cell.is-unknown .cell-name { color: var(--warn-text); }
.cell.is-unknown[data-state="none"] {
  border: 2px dashed var(--warn);
  background: repeating-linear-gradient(-45deg, var(--warn-fill) 0 1.2cqw, transparent 1.2cqw 2.4cqw), var(--panel);
}
.cell.is-unknown[data-state="none"] .cell-art { opacity: 1; filter: none; }
.cell.is-unknown .cell-glyph { border-color: var(--warn); color: var(--warn-text); background: var(--warn-fill); }
.cell.is-unknown[data-state="none"] .cell-badge { display: inline-flex; background: var(--warn); color: var(--warn-ink); }

/* ----- Special cells (kind: bonus | hidden) ----- */
.cell-icon { width: 100%; height: 100%; display: grid; place-items: center; }
.cell-icon .icon { width: 100%; height: 100%; }
.cell[data-kind="bonus"] .cell-art { width: 40%; }
.cell[data-kind="hidden"] .cell-art { width: 44%; }
.cell[data-kind="hidden"] .cell-icon .icon { transform: scale(1.25); } /* the lock glyph only fills ~60% of its box */
.cell[data-kind="bonus"] .cell-name, .cell[data-kind="hidden"] .cell-name { font-family: var(--mono); letter-spacing: 0.14em; }

/* Bonus: complete for every team from the start. Never colour alone — ★ + "BONUS" + a double border and a
   sunburst texture (ROOT = solid border + flat fill, USER = dashed border + stripes). */
.cell[data-kind="bonus"] { --flash: var(--bonus); border: 0.65cqw double var(--bonus); }
.cell[data-kind="bonus"] .cell-fill {
  background:
    repeating-conic-gradient(from 0deg at 50% 36%, var(--bonus-ray) 0 9deg, transparent 9deg 18deg),
    radial-gradient(circle at 50% 36%, var(--bonus-fill-a), transparent 70%),
    linear-gradient(155deg, var(--bonus-fill-a), var(--bonus-fill-b));
}
.cell[data-kind="bonus"] .cell-icon { color: var(--bonus); filter: drop-shadow(0 0 1cqw color-mix(in srgb, var(--bonus) 55%, transparent)); }
.cell[data-kind="bonus"] .cell-name { color: var(--bonus-text); font-weight: 850; }
.cell[data-kind="bonus"] .cell-meta { color: var(--bonus-text); }
.cell[data-kind="bonus"] .cell-badge { display: none; }

/* Hidden: unsolved = quiet dark card with a lock and "???"; solved = the normal complete (ROOT) look
   with an open lock and a "HIDDEN ✓" badge. The problem's name is never rendered. */
.cell[data-kind="hidden"][data-state="none"] {
  border: 1px solid var(--hidden-line);
  background: radial-gradient(color-mix(in srgb, var(--hidden-line) 45%, transparent) 0.12cqw, transparent 0.16cqw) 0 0 / 1.6cqw 1.6cqw, var(--hidden-bg);
}
.cell[data-kind="hidden"][data-state="none"] .cell-art { opacity: 0.8; filter: none; }
.cell[data-kind="hidden"] .cell-icon { color: var(--muted); }
.cell[data-kind="hidden"][data-state="none"] .cell-name { color: var(--text-2); }
.cell[data-kind="hidden"][data-state="root"] .cell-icon { color: var(--root); }
.cell[data-kind="hidden"][data-state="root"] .cell-name { color: var(--root-text); }
.cell[data-kind="hidden"][data-state="root"] .cell-meta { color: var(--root-text); }

/* Insane machines: a small violet tab on top + an "INSANE" pill in the meta line */
.cell.is-insane::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 30%; right: 30%; height: 0.55cqw;
  border-radius: 0 0 0.6cqw 0.6cqw; background: var(--insane);
}
.cell-diff {
  display: inline-block; padding: 0.12em 0.42em; border-radius: 0.4em;
  font: 800 0.92em/1.05 var(--mono); letter-spacing: 0.06em; text-shadow: none;
  background: var(--insane); color: var(--insane-ink);
}

/* Replaced slot: a neutral "NEW" pill leads the meta line (history in the tooltip). Waiting for a
   successor (retired, none released yet): amber "교체 대기" pill + dashed border + grey hatch. */
.cell-flag {
  display: inline-block; margin-right: 0.4em; padding: 0.12em 0.42em; border-radius: 0.4em;
  font: 800 0.92em/1.05 var(--mono); letter-spacing: 0.04em; text-shadow: none; white-space: nowrap;
}
.cell-new { background: var(--text); color: var(--bg); }
.cell-wait { background: var(--warn); color: var(--warn-ink); }
.cell.is-awaiting[data-state="none"] { border: 2px dashed var(--border-strong); }
.cell.is-awaiting[data-state="none"] .cell-fill {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--muted) 14%, transparent) 0 0.9cqw, transparent 0.9cqw 1.8cqw);
}

/* The glow breathes a few times when a line completes, then stays static: an infinite box-shadow
   animation would repaint these cells every frame for the whole event. */
.cell.in-line { box-shadow: 0 0 0 1px var(--root), 0 0 2.2cqw var(--root-glow); animation: line-glow 3s ease-in-out 3; }

/* Flash when a cell changes: pop + ring + light sweep */
.cell.flash { animation: cell-pop 1s cubic-bezier(0.2, 0.9, 0.3, 1.25); z-index: 2; }
.cell.flash.in-line { animation: cell-pop 1s cubic-bezier(0.2, 0.9, 0.3, 1.25), line-glow 3s ease-in-out 3; }
.cell.flash::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
  transform: translateX(-130%); animation: sheen 1.1s ease-out 0.15s;
}

/* SVG bingo-line overlay (viewBox 0..100) */
.bl path { fill: none; stroke-linecap: round; }
.bl .bl-glow { stroke: var(--root); stroke-width: 3.2; opacity: 0.2; }
.bl .bl-under { stroke: var(--bg); stroke-width: 1.9; opacity: 0.5; }
.bl .bl-main { stroke: var(--root); stroke-width: 1.05; }
.bl.draw path, .bl.draw-new path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.bl.draw path { animation: line-draw 0.7s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.bl.draw-new path { animation: line-draw 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.35s forwards; }
.bl.draw-new .bl-glow { animation: line-draw 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.35s forwards, glow-flare 2.2s ease-out 1.2s; }

/* ----- Side panel (stats, lines, feed) ----- */
.team-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; container: side / inline-size; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat {
  position: relative; overflow: hidden;
  padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-label { font: 800 0.7rem/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat-value { font: 850 2.3rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.stat-value small { font-size: 0.42em; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.stat-bingo .stat-value { color: var(--root-text); }
/* 총점: full-width hero tile — big total + breakdown (머신 · 히든 · 빙고 n줄×5) */
.stat-total {
  grid-column: 1 / -1; overflow: visible;
  border-color: color-mix(in srgb, var(--root) 55%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--root) 14%, var(--panel)), var(--panel));
}
.stat-total .stat-value { position: relative; font-size: 3rem; color: var(--root-text); }
.stat-total.zero .stat-value { color: var(--text-2); }
.stat-total .stat-value.up { animation: total-bump 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.3); transform-origin: left bottom; }
.total-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.total-break { display: flex; flex-wrap: wrap; gap: 3px 0; padding-bottom: 0.3em; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.total-break li { white-space: nowrap; }
.total-break li + li::before { content: "·"; margin: 0 0.5em; color: var(--border-strong); }
.total-break span { margin-right: 0.3em; }
.total-break b { font: 800 0.98rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); margin-right: 1px; }
/* "+8" / "−9" next to a total that just changed (fades out by itself) */
.total-delta {
  position: absolute; left: 100%; top: -0.1em; margin-left: 0.3em; white-space: nowrap; pointer-events: none;
  font: 800 0.9rem/1 var(--mono); letter-spacing: 0; padding: 0.28em 0.5em; border-radius: 999px;
  background: var(--root); color: var(--root-ink); box-shadow: 0 0 14px var(--root-glow);
  animation: delta-pop 2.6s ease-out forwards;
}
.total-delta.down { background: var(--warn); color: var(--warn-ink); box-shadow: none; }
.stat-meter { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.stat-meter i { display: block; height: 100%; border-radius: inherit; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.stat-root .stat-meter i, .stat-bingo .stat-meter i { background: var(--root); }
.stat-user .stat-meter i { background: repeating-linear-gradient(-45deg, var(--user) 0 3px, color-mix(in srgb, var(--user) 45%, transparent) 3px 6px); }

/* Hidden problem status + bonus count under the stat tiles */
.specials { display: flex; gap: 10px; min-width: 0; }
.sp-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border);
  font-size: 0.88rem; white-space: nowrap;
}
.sp-hidden { flex: 1 1 auto; }
.sp-bonus { flex: none; }
.sp-icon { width: 1.2rem; height: 1.2rem; flex: none; }
.sp-label { color: var(--muted); font-weight: 700; }
.sp-state { font-weight: 800; color: var(--text-2); }
.sp-who { flex: 0 1 auto; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.sp-time { margin-left: auto; padding-left: 4px; font: 600 0.8rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.sp-hidden .sp-icon { color: var(--muted); }
.sp-hidden:not(.solved) { background: var(--hidden-bg); border-color: var(--hidden-line); }
.sp-hidden.solved { border-color: color-mix(in srgb, var(--root) 55%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--root) 12%, var(--panel)), var(--panel)); }
.sp-hidden.solved .sp-icon, .sp-hidden.solved .sp-state { color: var(--root-text); }
.sp-bonus .sp-icon { color: var(--bonus); }
.sp-bonus .sp-state { color: var(--bonus-text); }

.side-card { padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); min-width: 0; }
.side-title { font: 800 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.side-title .side-pts { color: var(--root-text); letter-spacing: 0.04em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .tag { font-size: 0.78rem; padding: 0.45em 0.7em; }
.side-empty { color: var(--muted); font-size: 0.88rem; }

.event-card { text-align: center; padding: 18px 16px; }
.event-card .ec-label { font-weight: 700; color: var(--text-2); }
.event-card .ec-time { font: 850 2.2rem/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--user-text); margin-top: 4px; }
.event-card.ended .ec-time { color: var(--text); font-size: 1.4rem; }

.feed-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.feed {
  /* bottom padding = fade height, so the last row is never faded once scrolled to the end */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 0 28px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.feed li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px; font-size: 0.92rem;
}
.feed-pts { font: 800 0.82rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--root-text); }
.feed li.is-line .feed-text { color: var(--root-text); }
.feed li.is-swap .feed-text b { color: var(--text-2); }
.feed li.new { animation: feed-in 0.8s ease-out; background: color-mix(in srgb, var(--root) 8%, transparent); }
.feed-time { font: 600 0.82rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed .tag { font-size: 0.66rem; min-width: 4.6em; justify-content: center; }
.feed-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.feed-text b { color: var(--text); font-weight: 700; }
.feed li.is-hidden .feed-text { color: var(--root-text); }

/* ----- Members strip ----- */
.members-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.member {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); min-width: 0;
}
.member.has-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: linear-gradient(0deg, var(--danger-fill), var(--danger-fill)), var(--panel); }
.member-avatar {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--panel-2); border: 2px solid var(--border-strong);
}
.member-initial { display: grid; place-items: center; font: 800 1.05rem/1 var(--font); color: #fff; border-color: transparent; }
.member-name { min-width: 0; font-weight: 800; font-size: 1rem; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.member-name > a, .member-name > span:not(.tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.member-name .tag-private, .member-name .member-state { flex: none; font-size: 0.66rem; }
.tag-private { background: var(--warn-fill); color: var(--warn-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }
.member.is-private { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: linear-gradient(0deg, var(--warn-fill), var(--warn-fill)), var(--panel); }
.member-error.is-private { color: var(--warn-text); }
.member-error.is-retry { color: var(--warn-text); }
.member-sub .tag { font-size: 0.6rem; padding: 0.25em 0.45em; margin-right: 6px; vertical-align: 0.1em; display: inline-flex; }
.member.is-account:not(.has-error):not(.is-private) { border-color: var(--border-strong); }
.member.is-pending { border-style: dashed; }
.member.is-pending .member-avatar { opacity: 0.6; }
.member.is-pending .member-name { color: var(--text-2); }
.member-name a { text-decoration: none; }
.member-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.member-name .ext { font-size: 0.75em; color: var(--muted); margin-left: 4px; }
.member-sub { grid-column: 2; min-width: 0; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-counts { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.member-counts .tag { justify-content: space-between; gap: 0.7em; font-size: 0.7rem; min-width: 5.6em; }
.member-counts .tag.zero { opacity: 0.45; }
.member-error { color: var(--danger); font-weight: 700; }
.members-list > li { container: member / inline-size; min-width: 0; }
.cnt-sym { display: none; }
@container member (max-width: 270px) {
  .cnt-word { display: none; }
  .cnt-sym { display: inline; }
  .member-counts .tag { min-width: 3.4em; }
}
.members { position: relative; }
/* Cards that don't fit the projector strip are hidden (counted by the chip); keyboard focus reveals them. */
.members-list .member.clipped { opacity: 0; pointer-events: none; }
.members-list .member.clipped:focus-within { opacity: 1; }
.members-more {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  font: 800 0.8rem/1 var(--mono); padding: 6px 10px; border-radius: 999px;
  background: var(--panel-hi); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.members-more.attention { background: var(--warn-fill); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }

/* ===== Overview ===== */
.overview { min-width: 0; }
.ov-grid {
  display: grid; gap: var(--gap); justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 400px));
}
.ov-card {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: inherit; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ov-card:hover, .ov-card:focus-visible { border-color: var(--root); transform: translateY(-3px); box-shadow: var(--shadow); outline: none; }
.ov-card[data-rank="1"] { border-color: color-mix(in srgb, var(--root) 50%, var(--border)); }
.ov-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ov-head .rank-num { flex: none; }
.ov-card[data-rank="1"] .rank-num { background: var(--root); color: var(--root-ink); border-color: transparent; }
.ov-name { flex: 1; min-width: 0; font-weight: 850; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-total { position: relative; display: flex; align-items: baseline; gap: 3px; flex: none; }
.ov-total b { font: 850 2.2rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--root-text); }
.ov-total.zero b { color: var(--muted); }
.ov-total small { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.ov-total .total-delta { left: auto; right: 0; top: auto; bottom: 100%; margin: 0 0 4px; }
.ov-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.ov-foot .tag-line.zero { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Shrinks with "…" instead of wrapping, so every card has the same height (fitOverview measures one) */
.ov-foot .grow { flex: 1 1 0; min-width: 6em; margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-foot .ov-acct-error { color: var(--danger); font-weight: 700; }
.ov-foot .ov-acct-private { color: var(--warn-text); font-weight: 700; }
/* Per-member token names get their own line under the tags (two names rarely fit beside them). */
.ov-foot .ov-people { flex: 1 1 100%; margin-left: 0; text-align: left; color: var(--text-2); }
.ov-person + .ov-person::before { content: " · "; color: var(--muted); }
.ov-person.is-pending { color: var(--muted); }
.ov-person.is-pending small { font-size: 0.9em; }
.ov-person.is-error { color: var(--danger); font-weight: 700; }
.ov-person.is-private { color: var(--warn-text); font-weight: 700; }

.mini { position: relative; width: 100%; aspect-ratio: 1; container: mini / inline-size; }
.mini-grid {
  /* gap mirrored as MINI_GAP in app.js */
  position: absolute; inset: 0; display: grid; gap: 3cqw;
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr));
}
.mini-cell {
  position: relative; overflow: hidden; display: grid; place-items: center;
  border-radius: 2.2cqw; background: var(--panel-2); border: 1px solid var(--border);
  font: 800 5cqw/1 var(--mono);
}
.mini-cell[data-state="user"] { border: 1.5px dashed var(--user); color: var(--user-text); }
.mini-cell[data-state="user"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(-45deg, var(--user-stripe) 0 1cqw, transparent 1cqw 2cqw), var(--user-fill);
}
.mini-cell[data-state="root"] { background: var(--root); border-color: var(--root); color: var(--root-ink); }
.mini-cell.is-unknown[data-state="none"] { border: 1.5px dashed var(--warn); background: var(--warn-fill); color: var(--warn-text); }
.mini-cell[data-kind="bonus"] {
  border: 0.9cqw double var(--bonus); color: var(--bonus-ink);
  background: linear-gradient(155deg, var(--bonus), color-mix(in srgb, var(--bonus) 72%, #ff8a00));
}
.mini-cell[data-kind="hidden"][data-state="none"] { background: var(--hidden-bg); border-color: var(--hidden-line); color: var(--muted); }
/* Replaced slot: small corner fold; waiting for a successor: dashed + grey hatch */
.mini-cell.is-replaced::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 2;
  border-style: solid; border-width: 0 3.6cqw 3.6cqw 0; border-color: transparent var(--text) transparent transparent;
}
.mini-cell.is-awaiting[data-state="none"] {
  border: 1.5px dashed var(--border-strong);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--muted) 24%, transparent) 0 1.2cqw, transparent 1.2cqw 2.4cqw), var(--panel-2);
}
.mini-cell[data-kind="bonus"] span { font-size: 9cqw; }
.mini-cell[data-kind="hidden"] span { font-size: 6.5cqw; }
.mini-cell span { position: relative; z-index: 1; }
.mini-cell.in-line { box-shadow: 0 0 2.5cqw var(--root-glow); }
.mini-cell.flash { animation: cell-pop 1s cubic-bezier(0.2, 0.9, 0.3, 1.25); }
.mini .board-lines { z-index: 1; }
.mini .bl .bl-main { stroke: var(--mini-line); stroke-width: 1.7; }
.mini .bl .bl-under { stroke: var(--mini-line-under); stroke-width: 3.6; opacity: 0.55; }
.mini .bl .bl-glow { stroke-width: 6; opacity: 0.25; }

/* ===== Tooltip ===== */
.tip {
  position: fixed; z-index: 40; top: 0; left: 0;
  width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 12px 14px; border-radius: 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 0.88rem; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
}
.tip.show { opacity: 1; transform: none; }
.tip-title { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 1.02rem; }
.tip-sub { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.tip-meta { color: var(--text-2); font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.tip-warn { margin-top: 8px; color: var(--warn-text); font-weight: 700; font-size: 0.82rem; max-width: 30em; }
.tip-sec { margin-top: 10px; }
.tip-sec .tag { margin-bottom: 6px; }
.tip-row { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.tip-who small { margin-left: 6px; font-size: 0.78em; color: var(--muted); }
.tip-row .t { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tip-empty { margin-top: 8px; color: var(--muted); }
.tip-note { margin-top: 8px; color: var(--muted); font-size: 0.8rem; max-width: 24em; word-break: keep-all; }
.tip .tip-row { margin-top: 8px; }
.tip-title .cell-flag { margin: 0; font-size: 0.7rem; padding: 0.3em 0.45em; }
.tip-pts { margin-top: 6px; font-size: 0.84rem; font-weight: 700; color: var(--text-2); }
.tip-pts.earned { color: var(--root-text); }

/* ===== BINGO banner ===== */
.banner {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(8, 14, 24, 0.74), rgba(8, 14, 24, 0.93) 70%);
  backdrop-filter: blur(3px);
  animation: fade-in 0.3s ease-out;
}
.banner.leaving { animation: fade-out 0.38s ease-in forwards; }
.banner-card { position: relative; text-align: center; padding: 24px; animation: banner-in 0.7s cubic-bezier(0.2, 1.3, 0.4, 1); }
.banner-kicker { font: 800 clamp(1rem, 1.7vw, 1.4rem)/1 var(--font); letter-spacing: 0.08em; color: #c9d4e5; }
.banner-word {
  margin: 0.12em 0 0.08em; white-space: nowrap;
  font: 900 clamp(3.4rem, 13vw, 12rem)/1 var(--font); letter-spacing: 0.02em; color: #9fef00;
  text-shadow: 0 0 0.25em rgba(159, 239, 0, 0.55), 0 0 0.04em rgba(159, 239, 0, 0.9);
}
.banner-word span { display: inline-block; animation: letter-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
.banner-team { font-size: clamp(1.4rem, 3.6vw, 3.2rem); font-weight: 850; color: #fff; letter-spacing: -0.01em; }
.banner-lines { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.banner-lines .tag { font-size: clamp(0.8rem, 1.2vw, 1.05rem); background: rgba(159, 239, 0, 0.12); color: #c8ff6a; box-shadow: inset 0 0 0 1.5px #9fef00; }
.banner-hint { margin-top: 18px; font-size: 0.85rem; color: #8494ad; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 3px;
  background: #9fef00; opacity: 0;
  animation: burst 1.3s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; animation-delay: var(--delay, 0s);
}
.burst i:nth-child(3n) { background: #4db3ff; }
.burst i:nth-child(4n) { background: #ffffff; width: 9px; height: 9px; }

/* ===== Animations ===== */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--root-glow); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes skeleton { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; background: color-mix(in srgb, var(--root) 30%, var(--panel-hi)); } }
@keyframes rotate-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes line-glow { /* starts and ends at the static .in-line glow, so stopping causes no jump */
  0%, 100% { box-shadow: 0 0 0 1px var(--root), 0 0 2.2cqw var(--root-glow); }
  50% { box-shadow: 0 0 0 1px var(--root), 0 0 3.4cqw var(--root-glow); }
}
@keyframes cell-pop {
  0% { transform: scale(0.9); outline: 0.4cqw solid var(--flash); outline-offset: 0; }
  40% { transform: scale(1.07); outline: 0.6cqw solid var(--flash); outline-offset: 0.6cqw; }
  100% { transform: scale(1); outline: 0.2cqw solid transparent; outline-offset: 1.6cqw; }
}
@keyframes sheen { to { transform: translateX(130%); } }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes glow-flare { 0% { opacity: 0.2; } 25% { opacity: 0.7; } 100% { opacity: 0.2; } }
@keyframes row-bump { 0% { background: color-mix(in srgb, var(--root) 28%, var(--panel-2)); } }
@keyframes feed-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes total-bump { 35% { transform: scale(1.12); } }
@keyframes delta-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  12%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes banner-in { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes letter-pop { 0% { opacity: 0; transform: translateY(0.4em) scale(0.4); } 100% { opacity: 1; transform: none; } }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(200deg) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
  }
  .burst { display: none; }
}

/* ===== Desktop / projector: single-screen team view ===== */
@media (min-width: 1024px) and (min-height: 560px) {
  .app[data-view="team"][data-status="ready"] { height: 100vh; height: 100dvh; overflow: hidden; }
  .app[data-view="team"] .layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .app[data-view="team"] .ranking { min-height: 0; }
  .app[data-view="team"] .rank-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .team-view { min-height: 0; }
  .team-main { flex: 1 1 auto; min-height: 0; container-type: size; }
  /* Board = largest square that leaves room for the members strip (below) and side panel (right). */
  .team-grid {
    --board: min(100cqh - var(--strip-h) - var(--gap), 100cqw - var(--side-min) - var(--gap));
    height: 100%;
    grid-template-columns: var(--board) minmax(0, 1fr);
    /* The strip gets every pixel under the board: one row when the board is height-bound, more when
       it is width-bound (4:3). Cards that still don't fit are counted by the "+N명" chip. */
    grid-template-rows: var(--board) minmax(var(--strip-h), 1fr);
    grid-template-areas: "board side" "members members";
    align-content: start;
  }
  .members { min-height: 0; }
  .team-side { overflow: hidden; } /* on short screens the feed shrinks first; nothing spills over the members */
  .members-list {
    height: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
    overflow: hidden auto; scrollbar-width: thin;
  }
  .members-list .member { flex: 1 0 236px; max-width: 360px; }
}
/* Wide but short screens (720p/768p/800p projectors): the board is limited by height, so it gets the
   strip's height back and the members are listed in the side column instead. */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 820px) and (min-aspect-ratio: 3/2) {
  .team-grid {
    --board: min(100cqh, 100cqw - var(--side-min) - var(--gap));
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "board side" "board members";
  }
  .members-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 8px;
    height: auto; max-height: 42cqh;
  }
  .members-list .member { max-width: none; padding: 7px 10px; }
  .members-list .member-avatar { width: 36px; height: 36px; }
}
/* Short desktop screens (720p/768p/800p projectors, XGA): the ranking keeps room for all 5 teams — the
   static help under it gives up a little instead (tighter rows and legend). */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 820px) {
  .app[data-view="team"] .rank-table { border-spacing: 0 4px; }
  .app[data-view="team"] .rank-row td { padding-block: 7px; }
  .app[data-view="team"] .legend { gap: 5px 12px; padding-top: 10px; }
}
/* Narrow desktop / XGA projectors (1024–1279 px): slimmer ranking and side columns leave room for the board. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root { --side-min: 250px; }
  .layout { grid-template-columns: clamp(250px, 24vw, 29rem) minmax(0, 1fr); }
  .members-list .member { flex-basis: 200px; }
}
/* XGA height (1024×768): the point-table note (also in the README) wraps to two lines in the slim ranking
   column — it gives its room to the 5th team row. */
@media (min-width: 1024px) and (max-width: 1279.98px) and (min-height: 560px) and (max-height: 820px) {
  .app[data-view="team"] .pl-note { display: none; }
  .app[data-view="team"] .rank-row td { padding-block: 6px; }
  .app[data-view="team"] .legend { gap: 4px 10px; }
}
/* 4:3 XGA (1024×768): the board is limited by width, so two rows of member cards cost almost nothing. */
@media (min-width: 1024px) and (max-width: 1279.98px) and (min-height: 740px) and (max-aspect-ratio: 3/2) {
  :root { --strip-h: calc(4.96rem + 70px); }
}
@media (min-width: 1800px) {
  :root { --pad: 28px; --gap: 24px; --side-min: 360px; }
}

/* ===== Tablet & phone ===== */
@media (max-width: 1023.98px), (max-height: 559.98px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .board-area .board { max-width: 720px; }
  .feed { max-height: 360px; }
}
@media (max-width: 860px) {
  :root { --pad: 16px; --gap: 16px; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand brand sync" "event views views";
    padding: 10px var(--pad); gap: 8px 12px;
  }
  .event { justify-self: start; }
  .sync-updated, .sync-chip { display: none; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-title { font-size: 1.1rem; }
}
@media (max-width: 600px) {
  .ranking { padding: 12px; }
  .rank-table th.c-num { width: 2.6rem; }
  .rank-table th.c-rank { width: 2.6rem; }
  .rank-row td { padding: 8px 6px; }
  .rank-row td.n-total { font-size: 1.3rem; }
  .rank-num { width: 1.8rem; height: 1.8rem; font-size: 0.95rem; }
  .team-head { gap: 12px; }
  .team-rank { min-width: 3rem; height: 3rem; font-size: 1.5rem; line-height: 2.9rem; border-radius: 12px; }
  .team-switch { display: none; }
  .stat { padding: 10px; }
  .stat-value { font-size: 1.7rem; }
  .members-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .member-counts { flex-direction: row; }
  .member-avatar { width: 40px; height: 40px; }
  .event-countdown { font-size: 0.92rem; }
  .event-countdown small { display: none; }
  .view-link { padding: 5px 9px; font-size: 0.8rem; }
  .notice, .warnings { margin: 10px var(--pad) 0; }
  .team-account { flex-wrap: wrap; }
  .team-account-msg { white-space: normal; flex-basis: 100%; } /* no hover on phones: show the whole reason */
  .warnings { flex-wrap: wrap; }
  .warnings-body { flex-basis: calc(100% - 70px); }
  .warnings:not(.open) .warnings-body { flex-direction: column; gap: 2px; }
  .warnings-first { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
/* Narrow ranking column: tighter number columns, team names may wrap to two lines instead of "Team …". */
@container ranking (max-width: 320px) {
  .rank-table th { padding: 0 4px 2px; font-size: 0.64rem; }
  .rank-table th.c-rank { width: 2.4rem; }
  .rank-table th.c-num { width: 2.5rem; }
  .rank-table th.c-num.c-total { width: 3.3rem; }
  .rank-row td { padding: 8px 5px; }
  .rank-row td.n { font-size: 0.95rem; }
  .rank-row td.n-total { font-size: 1.25rem; }
  .rank-num { width: 1.8rem; height: 1.8rem; font-size: 0.95rem; }
  .rank-team-btn {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.2; font-size: 0.95rem;
  }
}
/* Very narrow ranking column (XGA projectors): the ROOT count gives way so team names stay readable
   (it is still on the board, the stat tiles and the overview). */
@container ranking (max-width: 260px) {
  .rank-table .c-root, .rank-row .n-root { display: none; }
  .rank-table th.c-rank { width: 2.3rem; }
  .rank-table th.c-num.c-total { width: 2.9rem; }
  .rank-table th.c-num { width: 2.2rem; }
  .rank-table th.c-num.c-hidden { width: 2.2rem; }
  .rank-row td { padding: 8px 4px; }
  .rank-row td.n-total { font-size: 1.15rem; }
  .rank-num { width: 1.6rem; height: 1.6rem; font-size: 0.88rem; }
  .rank-row td.n-hidden.solved > span[aria-hidden] { min-width: 1.35rem; height: 1.35rem; }
  .pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow side column: smaller stat tiles so "12/12" never clips. */
@container side (max-width: 340px) {
  .stats { gap: 6px; }
  .stat { padding: 9px 10px; gap: 5px; }
  .stat-label { font-size: 0.64rem; }
  .stat-value { font-size: 1.6rem; }
  .stat-total .stat-value { font-size: 2.4rem; }
  /* Breakdown stacked to the right of the total: one row instead of two (short projector screens) */
  .total-row { flex-wrap: nowrap; align-items: center; }
  .total-break { flex-direction: column; align-items: flex-end; gap: 1px; padding: 0; font-size: 0.74rem; }
  .total-break li + li::before { content: none; }
  .total-break b { font-size: 0.86rem; }
  /* Narrow side column: the hidden solver's name wins over the solve time (time stays in the title) */
  .sp-who + .sp-time { display: none; }
  .sp-who { margin-right: auto; }
}
@container board (max-width: 400px) {
  .cell-who, .cell-meta { display: none; }
  .cell { gap: 1cqw; padding-top: 3.4cqw; }
  .cell-art, .board:not(.solo-account) .cell.has-meta .cell-art { width: 50%; }
  /* Small cells: badges shrink to their symbol ("#", "$", "✓"); a NEW / 교체 대기 flag stays visible alone */
  .b-word { display: none; }
  .cell.has-flag .cell-meta { display: block; }
  .cell.has-flag .cell-meta > :not(.cell-flag) { display: none; }
  .cell.has-flag .cell-meta .cell-flag { margin: 0; }
  .cell.has-flag .cell-art, .board:not(.solo-account) .cell.has-flag.has-meta .cell-art { width: 40%; }
}

/* ===== Operator page (/admin): hidden-problem marks ===== */
.topbar.adm-top { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand views sync"; }
.adm-titles { display: flex; flex-direction: column; min-width: 0; }
.adm-event { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-main { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--pad); display: flex; flex-direction: column; gap: 18px; }
.adm-intro {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); word-break: keep-all;
}
.adm-intro b { color: var(--text); }
.adm code { font-family: var(--mono); background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.adm-muted { color: var(--muted); font-size: 0.88rem; }
.adm-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.adm-chip { padding: 4px 11px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 0.82rem; color: var(--text-2); }
.adm-chip b { margin-left: 3px; color: var(--text); font-family: var(--mono); }
.adm-chip.on { border-color: color-mix(in srgb, var(--root) 55%, var(--border)); }
.adm-chip.on b { color: var(--root-text); }

.adm[data-status="ready"] .adm-screen { display: none; }
.adm:not([data-status="ready"]) .adm-board { display: none; }
.adm-screen { padding: 40px 16px; word-break: keep-all; }
.adm-screen-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted); font: 900 1.5rem/1 var(--mono);
}
.adm-screen-icon[data-kind="none"] { display: none; }
.adm[data-status="loading"] .adm-screen-icon { display: grid; }
.adm[data-status="loading"] .adm-screen-icon::after {
  content: ""; width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--border-strong); border-top-color: var(--root); animation: spin 0.9s linear infinite;
}
.adm-screen-icon .icon { width: 30px; height: 30px; }
.adm[data-status="auth"] .adm-screen-icon, .adm[data-status="throttled"] .adm-screen-icon { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); background: var(--warn-fill); }
.adm[data-status="error"] .adm-screen-icon, .adm[data-status="disabled"] .adm-screen-icon { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); background: var(--danger-fill); }
.adm-screen .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.adm-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.adm-board-title { margin-right: auto; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.adm-filter input {
  width: 220px; max-width: 100%; height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 0.9rem;
}
.adm-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--panel-hi); color: var(--text); font-weight: 700; font-size: 0.9rem;
}
.adm-btn:hover { border-color: var(--text-2); }
.adm-btn-primary { background: var(--root); color: var(--root-ink); border-color: transparent; }
.adm-btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.adm-btn-primary:hover, .adm-btn-danger:hover { border-color: var(--text); }

.adm-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.adm-team {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
}
.adm-team[data-solved="all"] { border-color: color-mix(in srgb, var(--root) 50%, var(--border)); }
.adm-team-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-team-head .rank-num { flex: none; width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
.adm-team-name { min-width: 0; font-size: 1.08rem; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-team-score { flex: none; margin-left: auto; font: 600 0.78rem/1 var(--mono); color: var(--muted); }
.adm-hidden-list { display: flex; flex-direction: column; gap: 8px; }
.adm-hrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon label switch" "icon status switch" "icon who switch";
  align-items: center; gap: 2px 12px; padding: 10px 10px 10px 12px; border-radius: 12px;
  background: var(--hidden-bg); border: 1px solid var(--hidden-line);
}
.adm-hrow.on { background: linear-gradient(160deg, color-mix(in srgb, var(--root) 12%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--root) 55%, var(--border)); }
.adm-hicon { grid-area: icon; width: 26px; height: 26px; color: var(--muted); }
.adm-hrow.on .adm-hicon { color: var(--root-text); }
.adm-hlabel { grid-area: label; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-weight: 700; color: var(--text-2); }
.adm-hlabel > span { white-space: nowrap; }
.adm .adm-hid { padding: 0; background: none; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.adm-status { grid-area: status; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 0.86rem; color: var(--muted); }
.adm-status b { color: var(--text-2); }
.adm-status.on b { color: var(--root-text); }
.adm-status time { font: 600 0.8rem/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.adm-switch {
  grid-area: switch; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px;
  padding: 4px; border: 0; border-radius: 10px; background: none; cursor: pointer;
}
.adm-switch-track {
  position: relative; display: block; width: 52px; height: 30px; border-radius: 999px;
  background: var(--panel-hi); border: 1px solid var(--border-strong); transition: background-color 0.2s, border-color 0.2s;
}
.adm-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-2); transition: transform 0.2s, background-color 0.2s;
}
.adm-switch[aria-checked="true"] .adm-switch-track { background: var(--root); border-color: transparent; }
.adm-switch[aria-checked="true"] .adm-switch-thumb { transform: translateX(22px); background: var(--root-ink); }
.adm-switch-text { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.adm-switch[aria-checked="true"] .adm-switch-text { color: var(--root-text); }
.adm-switch:hover .adm-switch-track { border-color: var(--text-2); }
.adm-switch:disabled { cursor: progress; }
.adm-switch.busy .adm-switch-thumb::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid var(--panel); border-top-color: transparent; animation: spin 0.8s linear infinite;
}
.adm-empty { padding: 12px 2px; color: var(--muted); }
.adm-ignored {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px; font-size: 0.88rem; word-break: keep-all;
  background: var(--warn-fill); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.adm-ignored summary { cursor: pointer; font-weight: 800; color: var(--warn-text); }
.adm-ignored > p { margin-top: 8px; }
.adm-ignored-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--text-2); }

.adm-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border-radius: 16px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
.adm-dialog::backdrop { background: rgba(5, 9, 15, 0.66); backdrop-filter: blur(2px); }
.adm-dialog-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.adm-dialog-title { font-size: 1.12rem; font-weight: 850; overflow-wrap: anywhere; }
.adm-dialog-desc { color: var(--text-2); font-size: 0.92rem; word-break: keep-all; }
.adm-when { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--border); border-radius: 12px; }
.adm-when legend { padding: 0 6px; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.adm-radio { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.adm-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--root); }
#adm-when-input {
  height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--text); font: 600 0.9rem var(--mono);
}
#adm-when-input:disabled { opacity: 0.45; }
.adm-field-error { color: var(--danger); font-size: 0.82rem; font-weight: 700; }
/* "푼 사람 (선택)": team member quick buttons + free text */
.adm-who { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--border); border-radius: 12px; }
.adm-who legend { padding: 0 6px; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.adm-who-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-who-btn {
  max-width: 100%; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 0.88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-who-btn:hover { border-color: var(--text-2); }
.adm-who-btn[aria-pressed="true"] { background: var(--root); color: var(--root-ink); border-color: transparent; }
.adm-who-btn[aria-pressed="true"]::before { content: "✓ "; }
#adm-who-input {
  height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 0.9rem;
}
.adm-dialog-preview {
  padding: 9px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border);
  font-size: 0.86rem; color: var(--text-2); word-break: keep-all; overflow-wrap: anywhere;
}
.adm-preview-label { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
.adm-dialog-preview b { color: var(--text); }
.adm-dialog-preview .adm-preview-who { color: var(--root-text); }
.adm-who-name { font-weight: 800; color: var(--text); }
/* "푼 사람 입력/수정" on a solved hidden row: sets only the solver, the solve time stays */
.adm-who-edit {
  grid-area: who; justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
  font: 700 0.78rem/1.4 inherit; color: var(--text-2); background: transparent;
  border: 1px solid var(--border); cursor: pointer;
}
.adm-who-edit:hover:not(:disabled) { border-color: var(--text-2); color: var(--text); }
.adm-who-edit.missing { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 60%, transparent); border-style: dashed; }
.adm-who-edit:disabled { opacity: 0.5; cursor: default; }
/* Discord notifier chip in the admin summary */
.adm-discord { display: inline-flex; align-items: center; gap: 6px; }
.adm-discord-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.adm-discord.is-on .adm-discord-dot { background: var(--root); }
.adm-discord.is-off .adm-discord-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.adm-discord.is-warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.adm-discord.is-warn .adm-discord-dot { background: var(--warn); border-radius: 2px; }
.adm-discord.is-warn b { color: var(--warn-text); }
.adm-discord.is-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.adm-discord.is-error .adm-discord-dot { background: var(--danger); border-radius: 2px; transform: rotate(45deg); }
.adm-discord.is-error b { color: var(--danger); }
.adm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.adm-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; word-break: keep-all;
  background: var(--panel-hi); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-weight: 700; font-size: 0.9rem;
}
.adm-toast[data-kind="ok"] { border-color: color-mix(in srgb, var(--root) 60%, transparent); }
.adm-toast[data-kind="ok"]::before { content: "✓ "; color: var(--root-text); }
.adm-toast[data-kind="error"] { border-color: var(--danger); color: var(--danger); background: linear-gradient(0deg, var(--danger-fill), var(--danger-fill)), var(--panel); }
.adm-toast.show { animation: fade-in 0.25s ease-out; }

@media (max-width: 860px) {
  .topbar.adm-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand sync" "views views"; }
  .adm-top .views { justify-self: start; }
}
@media (max-width: 600px) {
  .adm-main { gap: 14px; }
  .adm-toolbar .adm-filter { flex: 1 1 auto; }
  .adm-filter input { width: 100%; }
  .adm-team { padding: 12px; }
  .adm-dialog-form { padding: 18px 16px; }
}