:root {
  --territory-ink: #14233b;
  --territory-muted: #64748b;
  --territory-line: #cfbea4;
  --territory-neutral: #f6f1e8;
  --territory-neutral-border: #baa888;
  --territory-paper: #fbfaf7;
  --territory-blue: #1769df;
  --territory-dark: #061425;
  --territory-dark-panel: #0b1d31;
  --territory-dark-line: #243b55;
}

body.quiz-room-active[data-quiz-mode="territory_war"] {
  color: #eef5ff;
  background: var(--territory-dark);
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-live-shell {
  width: min(1848px, calc(100% - 40px));
  padding: 16px 0 24px;
}

body.quiz-room-active[data-quiz-mode="territory_war"] > .quiz-live-shell > .quiz-live-header,
body.quiz-room-active[data-quiz-mode="territory_war"] > .quiz-live-shell > .quiz-live-guide,
body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-live-setup-card {
  display: none;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-live-room-card {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--territory-dark-line);
  border-radius: 14px;
  color: #eef5ff;
  background: #08182a;
  box-shadow: none;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-director-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--territory-dark-line);
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-director-head h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 38px);
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-director-head > div > p:last-child {
  display: none;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-summary div {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--territory-dark-line);
  border-radius: 8px;
  color: #fff;
  background: #0d2036;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-summary dt {
  color: #8ea5bd;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-room-summary dd {
  color: #fff;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-host-controls {
  display: flex;
  gap: 8px;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-host-controls .compact-button {
  min-width: 132px;
  min-height: 48px;
  margin: 0;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-admin-grid {
  grid-template-columns: 1fr;
  margin: 0 0 12px;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-admin-stage {
  display: none;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-admin-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr) minmax(220px, 0.5fr);
  gap: 8px;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-share-box,
body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-connection-card,
body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-admin-rail > .privacy-note {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--territory-dark-line);
  border-radius: 8px;
  color: #dbe8f5;
  background: #0d2036;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-share-box {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-share-box input {
  color: #dbe8f5;
  background: #061425;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-connection-card,
body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-classic-admin-rail > .privacy-note {
  padding: 11px 12px;
}

.quiz-territory-panel {
  min-width: 0;
}

.territory-setting-contract {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #2a4868;
  border-left: 4px solid #2a7fff;
  color: #dceafa;
  background: #0b1e33;
}

.territory-setting-contract span {
  color: #9fb4c9;
  font-size: 12px;
  line-height: 1.5;
}

body.quiz-room-active[data-quiz-mode="territory_war"] .quiz-territory-panel {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--territory-dark-line);
  border-radius: 12px;
  color: #edf5ff;
  background: #071628;
}

.quiz-territory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.quiz-territory-heading h3 {
  margin: 2px 0 0;
  font-size: clamp(22px, 2vw, 30px);
}

.territory-live-pill {
  margin: 0;
  padding: 7px 11px;
  border: 1px solid #31506f;
  border-radius: 999px;
  color: #b9d6f1;
  font-size: 13px;
  font-weight: 850;
  background: #0c2239;
}

.territory-live-pill::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #36d68d;
  content: "";
  box-shadow: 0 0 0 4px rgb(54 214 141 / 12%);
}

.quiz-territory-admin-stage {
  display: grid;
  grid-template-columns: minmax(600px, 1fr) minmax(300px, 360px);
  gap: 12px;
  min-height: 590px;
}

.quiz-territory-board-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--territory-dark-line);
  border-radius: 10px;
  background: #0a1b2e;
}

.territory-map-toolbar,
.territory-monitor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.territory-map-toolbar strong {
  color: inherit;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.territory-map-toolbar span,
.territory-monitor-heading span {
  color: #8ea5bd;
  font-size: 12px;
  font-weight: 750;
}

.quiz-territory-board {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.quiz-territory-board[data-territory-board-version="1"] {
  display: grid;
  grid-template-columns: repeat(var(--territory-size), minmax(0, 1fr));
  gap: 1px;
  aspect-ratio: 1;
}

.quiz-territory-board[data-territory-board-version="1"] .quiz-territory-cell {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transform: none;
}

.quiz-territory-board[data-territory-board-version="2"] {
  width: 100%;
  max-height: 590px;
  flex: 1;
  aspect-ratio: var(--territory-board-ratio);
  margin: auto;
}

.territory-graph-lines,
.territory-graph-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.territory-graph-lines line {
  stroke: #5c7490;
  stroke-width: 1.5;
  opacity: 0.58;
  vector-effect: non-scaling-stroke;
}

.territory-graph-lines line.is-owned {
  stroke: var(--territory-edge-color, #8ea5bd);
  stroke-width: 2.4;
  opacity: 0.95;
}

.quiz-territory-cell {
  --territory-node-size: 27px;
  position: absolute;
  top: var(--territory-node-y);
  left: var(--territory-node-x);
  display: grid;
  width: var(--territory-node-size);
  height: var(--territory-node-size);
  min-width: 0;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--territory-color, var(--territory-neutral-border)) 78%, #fff);
  border-radius: 0;
  color: #fff;
  background: color-mix(in srgb, var(--territory-color, var(--territory-neutral)) 82%, #fff);
  clip-path: polygon(29.29% 0, 70.71% 0, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0 70.71%, 0 29.29%);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 48%);
}

.quiz-territory-board.is-triad .quiz-territory-cell {
  --territory-node-size: 21px;
}

.quiz-territory-cell:not([data-owner-team-id]) {
  border-color: var(--territory-neutral-border);
  color: #6d5d45;
  background: var(--territory-neutral);
}

.quiz-territory-cell.is-castle {
  --territory-node-size: 38px;
  z-index: 3;
  border-width: 3px;
  font-size: 15px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--territory-color, #94a3b8) 22%, transparent), inset 0 0 0 2px rgb(255 255 255 / 55%);
}

.quiz-territory-board.is-triad .quiz-territory-cell.is-castle {
  --territory-node-size: 33px;
}

.quiz-territory-cell.can-claim {
  z-index: 5;
  border-color: #fff;
  cursor: pointer;
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
  background: #fffaf0;
  box-shadow: 0 0 0 7px rgb(245 158 11 / 18%);
  animation: territory-claim-pulse 1.2s ease-in-out infinite;
}

.quiz-territory-cell.can-claim::before {
  position: absolute;
  inset: -14px;
  content: "";
}

.quiz-territory-cell.can-claim:focus-visible {
  outline-width: 5px;
  outline-color: #155fd4;
}

.quiz-territory-cell.is-resolving {
  z-index: 6;
  outline: 4px solid #f59e0b;
  outline-offset: 3px;
  animation: territory-resolving 0.8s ease-in-out infinite alternate;
}

.territory-node-badge {
  position: absolute;
  top: -19px;
  left: 50%;
  min-width: 27px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  background: #d97706;
  transform: translateX(-50%);
  clip-path: none;
}

.territory-node-badge.is-terminal {
  color: #fff;
  background: #dc2626;
}

.territory-board-summary {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #2a7fff;
  color: #dceafa;
  background: #0d2239;
}

.territory-board-summary strong {
  color: inherit;
  font-size: 15px;
}

.territory-board-summary span {
  color: #9fb4c9;
  font-size: 12px;
  line-height: 1.45;
}

[data-board-tone="draw"] .territory-board-summary {
  border-left-color: #f2b84b;
}

[data-board-tone="terminal"] .territory-board-summary {
  border-left-color: #ef4444;
}

.quiz-territory-monitor-grid {
  display: grid;
  grid-template-rows: auto minmax(150px, 0.7fr) minmax(180px, 1fr);
  gap: 10px;
  min-width: 0;
}

.quiz-territory-monitor-grid > section {
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--territory-dark-line);
  border-radius: 10px;
  background: var(--territory-dark-panel);
}

.territory-monitor-heading {
  margin-bottom: 8px;
}

.territory-monitor-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}

.quiz-territory-teams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.quiz-territory-team {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--territory-color, #94a3b8) 58%, #253c56);
  border-left: 4px solid var(--territory-color, #94a3b8);
  border-radius: 7px;
  color: #edf5ff;
  background: color-mix(in srgb, var(--territory-color, #94a3b8) 13%, #0d2035);
}

.quiz-territory-team strong,
.quiz-territory-team b {
  color: inherit;
  font-size: 13px;
}

.quiz-territory-team b {
  text-align: right;
}

.quiz-territory-team > span,
.quiz-territory-team > small {
  grid-column: 1 / -1;
  color: #9fb4c9;
  font-size: 10px;
  font-style: normal;
}

.territory-team-gauge {
  position: relative;
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #31445a;
}

.territory-team-gauge::after {
  display: block;
  width: var(--territory-gauge, 0%);
  height: 100%;
  background: var(--territory-color, #2a7fff);
  content: "";
}

.quiz-territory-participants,
.quiz-territory-claims {
  max-height: calc(100% - 30px);
  margin: 0;
  padding: 0 0 0 20px;
  overflow: auto;
  color: #c9d8e7;
  font-size: 12px;
  line-height: 1.45;
}

.quiz-territory-participants li,
.quiz-territory-claims li {
  padding: 6px 0;
  border-bottom: 1px solid rgb(69 94 120 / 48%);
}