/* Colonel Blotto — game-specific styles (all classes prefixed bl-).
   The campaign map is a tabletop material: parchment in both themes (a real map
   doesn't change colour), only dimmed slightly in dark mode. */

.bl-root {
  /* map materials (fixed) */
  --bl-paper-1: #f4ecd9;
  --bl-paper-2: #e2d2ae;
  --bl-ink: #5b4630;
  --bl-ink-2: rgba(91, 70, 48, .62);
  --bl-ink-soft: rgba(91, 70, 48, .22);
  --bl-water: #9dbccb;
  /* team colours on the map */
  --bl-you-m: #2d5d8e;
  --bl-jev-m: #b3263e;
  /* team colours in the page chrome (theme-aware below) */
  --bl-you: #2d5d8e;
  --bl-jev: #c0263f;
  --bl-tok: 15px;
  display: flex; flex-direction: column; gap: 16px;
}
[data-theme='dark'] .bl-root {
  --bl-you: #6fa6dc;
  --bl-jev: #f0617a;
}

.bl-sb-you { color: var(--bl-you); }
.bl-sb-jev { color: var(--bl-jev); }
.bl-prompt { text-align: center; margin-top: -4px; }

/* ---------- round pips ---------- */
.bl-pips { display: flex; justify-content: center; gap: 8px; margin-top: -4px; }
.bl-pip {
  width: 26px; height: 6px; border-radius: 99px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border); transition: background .3s;
}
.bl-pip.cur { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 80%, transparent); }
.bl-pip.you { background: var(--bl-you); box-shadow: none; }
.bl-pip.jev { background: var(--bl-jev); box-shadow: none; }
.bl-pip.tie { background: color-mix(in srgb, var(--muted) 55%, transparent); box-shadow: none; }

/* ---------- the map ---------- */
.bl-map {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 14px; padding: 12px 12px 14px;
  color: var(--bl-ink);
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(120, 86, 40, .22) 100%),
    radial-gradient(60% 50% at 18% 20%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(170deg, var(--bl-paper-1), var(--bl-paper-2));
  box-shadow:
    inset 0 0 0 6px color-mix(in srgb, var(--bl-paper-1) 70%, transparent),
    inset 0 0 0 7px var(--bl-ink-soft),
    inset 0 0 0 9px transparent,
    inset 0 0 0 10px rgba(91, 70, 48, .12),
    0 1px 0 rgba(255, 255, 255, .4),
    var(--shadow);
  border: 1px solid rgba(91, 70, 48, .35);
}
.bl-map::before { /* paper grain */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--noise); opacity: .35; mix-blend-mode: multiply;
}
[data-theme='dark'] .bl-map { filter: brightness(.9) saturate(.92); border-color: rgba(0, 0, 0, .6); }

.bl-terrain-wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bl-terrain { width: 100%; height: 100%; display: block; }
.bl-terrain path { vector-effect: non-scaling-stroke; fill: none; }
.bl-t-grid path { stroke: var(--bl-ink-soft); stroke-width: .7; stroke-dasharray: 2 5; opacity: .7; }
.bl-t-contour path { stroke: var(--bl-ink-soft); stroke-width: 1; }
.bl-t-river { stroke: var(--bl-water); stroke-width: 16; stroke-linecap: round; opacity: .85; }
.bl-t-bank { stroke: rgba(60, 90, 110, .35); stroke-width: 1; stroke-dasharray: 1 3; }
.bl-t-road { stroke: var(--bl-ink-2); stroke-width: 1.3; stroke-dasharray: 6 4; opacity: .55; }

.bl-map-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 4px 8px 8px; font-family: var(--font-display);
}
.bl-map-title {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--bl-ink-2);
}
.bl-map-title i { font-style: normal; opacity: .6; }
.bl-legend { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--bl-ink-2); }
.bl-key { display: inline-flex; align-items: center; gap: 6px; }
.bl-key::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.bl-key-you::before { background: var(--bl-you-m); }
.bl-key-jev::before { background: var(--bl-jev-m); }
.bl-compass-wrap { display: inline-flex; }
.bl-compass { width: 30px; height: 30px; }
.bl-c-ring { fill: none; stroke: var(--bl-ink-soft); }
.bl-c-ns { fill: var(--bl-paper-1); stroke: var(--bl-ink-2); stroke-width: .8; }
.bl-c-n { fill: var(--gold); }
.bl-c-ew { fill: var(--bl-ink-soft); }

.bl-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-field {
  position: relative; display: grid; grid-template-rows: auto auto auto; gap: 10px;
  padding: 8px 6px 4px; justify-items: center;
  transition: background .5s var(--ease);
}
.bl-field + .bl-field::before {
  content: ''; position: absolute; left: 0; top: 6%; bottom: 6%;
  border-left: 1px dashed var(--bl-ink-soft);
}
.bl-field[data-win]::after { /* claimed-territory glow */
  content: ''; position: absolute; inset: 2% 4%; z-index: -1; border-radius: 45%;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.bl-fresh[data-win]::after { animation: bl-fade .6s .15s var(--ease) backwards; }
.bl-field[data-win='you'] { --glow: rgba(45, 93, 142, .24); }
.bl-field[data-win='jev'] { --glow: rgba(179, 38, 62, .22); }
.bl-field[data-win='tie'] { --glow: rgba(91, 70, 48, .10); }
.bl-field[data-win='you'] .bl-tokens-jev .bl-tok.on,
.bl-field[data-win='jev'] .bl-tokens-you .bl-tok.on { opacity: .38; filter: grayscale(.5); }
.bl-field[data-win='tie'] .bl-tok.on { opacity: .7; }

.bl-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

/* soldier tokens: lacquered discs, 5 per row */
.bl-tokens {
  display: grid; grid-template-columns: repeat(5, var(--bl-tok)); gap: 5px;
  justify-content: center;
}
.bl-tok {
  width: var(--bl-tok); height: var(--bl-tok); border-radius: 50%;
  visibility: hidden;
}
.bl-tok.on {
  visibility: visible;
  --c: var(--bl-you-m);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .55), transparent 38%),
    radial-gradient(circle at 50% 55%, var(--c) 58%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 1px 1.5px rgba(40, 25, 10, .35);
  transition: opacity .4s, filter .4s;
}
.bl-tokens-jev .bl-tok.on { --c: var(--bl-jev-m); }
.bl-fresh .bl-tokens-jev .bl-tok.on { animation: bl-drop .42s var(--ease) backwards; animation-delay: var(--d, 0ms); }

/* Jev's sealed orders / revealed count */
.bl-count {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.bl-count b { font-size: 24px; font-weight: 700; line-height: 1; }
.bl-count-jev { color: var(--bl-jev-m); }
.bl-fresh .bl-count-jev { animation: bl-pop .45s var(--ease) backwards; }
.bl-seal {
  color: rgba(255, 240, 230, .92); font-size: 16px; font-weight: 700;
  background: radial-gradient(circle at 38% 32%, #d24a5d, #8e1d31 72%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12), inset 0 0 0 5px rgba(255, 255, 255, .12), 0 2px 4px rgba(60, 20, 20, .3);
  clip-path: polygon(50% 0, 62% 6%, 76% 4%, 83% 16%, 96% 22%, 94% 36%, 100% 50%, 94% 64%, 96% 78%, 83% 84%, 76% 96%, 62% 94%, 50% 100%, 38% 94%, 24% 96%, 17% 84%, 4% 78%, 6% 64%, 0 50%, 6% 36%, 4% 22%, 17% 16%, 24% 4%, 38% 6%);
}
.bl-waiting .bl-seal { animation: bl-breathe 1.4s ease-in-out infinite; }

/* the site illustration + name cartouche */
.bl-site { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.bl-emblem { width: min(100%, 150px); aspect-ratio: 140 / 72; }
.bl-emblem svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bl-e-fill { fill: color-mix(in srgb, var(--bl-paper-1) 80%, #fff); }
.bl-e-line { fill: none; stroke: var(--bl-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
polygon.bl-e-line { fill: color-mix(in srgb, var(--bl-paper-1) 85%, #fff); }
.bl-e-hatch { fill: none; stroke: var(--bl-ink-2); stroke-width: 1; stroke-linecap: round; }
.bl-e-soft { fill: none; stroke: var(--bl-ink-soft); stroke-width: 1; }
.bl-e-flag { fill: var(--gold); stroke: var(--bl-ink); stroke-width: 1; stroke-linejoin: round; }
.bl-e-water { fill: var(--bl-water); }
.bl-e-ripple { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.1; stroke-linecap: round; }
.bl-e-road { fill: none; stroke: var(--bl-ink); stroke-width: 1.4; stroke-dasharray: 5 3; }
.bl-e-stone ellipse { fill: #cbbd9f; stroke: var(--bl-ink); stroke-width: 1; }
.bl-e-ditch { fill: none; stroke: var(--bl-ink-2); stroke-width: 1; stroke-dasharray: 3 2.5; }
.bl-e-keep { fill: var(--bl-paper-2); stroke: var(--bl-ink); stroke-width: 1.2; }

.bl-name {
  margin-top: 2px; padding: 3px 14px; position: relative;
  font-family: var(--font-display); font-size: 14px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bl-ink);
  background: linear-gradient(var(--bl-paper-1), color-mix(in srgb, var(--bl-paper-1) 80%, var(--bl-paper-2)));
  border: 1px solid color-mix(in srgb, var(--gold) 75%, var(--bl-ink));
  box-shadow: 0 0 0 2px var(--bl-paper-1), 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent), 0 2px 6px rgba(60, 40, 20, .15);
  border-radius: 3px;
  transition: color .4s, border-color .4s;
}
:lang(zh) .bl-name, .bl-name:lang(zh) { letter-spacing: .3em; }
.bl-field[data-win='you'] .bl-name { color: var(--bl-you-m); border-color: var(--bl-you-m); }
.bl-field[data-win='jev'] .bl-name { color: var(--bl-jev-m); border-color: var(--bl-jev-m); }
.bl-ribbon {
  position: absolute; top: -2px; right: 4%;
  padding: 2px 9px; border-radius: 3px; transform: rotate(4deg);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  box-shadow: 0 2px 6px rgba(40, 20, 10, .25);
}
.bl-ribbon-you { background: var(--bl-you-m); }
.bl-ribbon-jev { background: var(--bl-jev-m); }
.bl-ribbon-tie { background: var(--bl-ink-2); }
.bl-fresh .bl-ribbon { animation: bl-stamp .5s .25s var(--ease) backwards; }
.bl-fresh .bl-name { animation: bl-glow .9s .2s var(--ease) backwards; }

/* stepper under each field */
.bl-stepper {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(255, 252, 244, .72);
  border: 1px solid var(--bl-ink-soft); box-shadow: 0 1px 2px rgba(60, 40, 20, .12);
}
.bl-step {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 18px; font-weight: 600; line-height: 1;
  color: var(--bl-ink); background: transparent; transition: background .15s, transform .12s;
}
.bl-step:hover:not(:disabled) { background: rgba(91, 70, 48, .1); }
.bl-step:active:not(:disabled) { transform: scale(.92); }
.bl-step:disabled { opacity: .3; cursor: default; }
.bl-step:focus-visible { outline: 2px solid var(--bl-you-m); outline-offset: 1px; }
.bl-num {
  min-width: 30px; text-align: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--bl-you-m);
  font-variant-numeric: tabular-nums;
}
.bl-locked { background: transparent; border-color: transparent; box-shadow: none; }
.bl-locked .bl-step { visibility: hidden; }

.bl-thinking {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px;
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--bl-ink);
  background: rgba(250, 245, 232, .94); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 8px 24px -8px rgba(60, 40, 20, .35);
  animation: rise .3s var(--ease);
}
.bl-quill { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-jev-m); animation: bl-breathe 1.1s ease-in-out infinite; }

/* ---------- reserve + controls ---------- */
.bl-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bl-reserve {
  width: min(100%, 460px); padding: 12px 16px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.bl-reserve-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 13px; }
.bl-reserve-label { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: var(--muted); }
.bl-left { font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-empty .bl-left { color: color-mix(in srgb, var(--good) 75%, var(--text)); }
.bl-tokens-reserve { grid-template-columns: repeat(10, var(--bl-tok)); gap: 7px; min-height: var(--bl-tok); }
.bl-tokens-reserve .bl-tok { visibility: visible; box-shadow: inset 0 0 0 1px var(--border); }
.bl-tokens-reserve .bl-tok.on { --c: var(--bl-you); }
.bl-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bl-preset { padding: 7px 14px; font-size: 13px; }
.bl-deploy { min-width: 190px; letter-spacing: .02em; }
.bl-deploy:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bl-you) 88%, #fff), var(--bl-you));
  color: #fff; box-shadow: 0 6px 18px -8px var(--bl-you);
}
[data-theme='dark'] .bl-deploy:not(:disabled) { color: #0b1420; }
.bl-keys { margin: -4px 0 0; font-size: 12px; text-align: center; }

/* ---------- verdict ---------- */
.bl-verdict {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 6px 0; animation: rise .4s var(--ease);
}
.bl-verdict h3 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 650; }
.bl-verdict p { margin: 0; }
.bl-v-you h3 { color: var(--bl-you); }
.bl-v-jev h3 { color: var(--bl-jev); }
.bl-pending { min-height: 112px; animation: none; }
.bl-result h2 { font-family: var(--font-display); font-weight: 650; }
.bl-r-you h2 { color: var(--bl-you); }
.bl-r-jev h2 { color: var(--bl-jev); }

/* ---------- tendencies ---------- */
.bl-notes { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bl-notes small { color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.bl-note-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bl-note {
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

/* ---------- battle log ---------- */
.bl-log { border-top: 1px solid var(--border); padding-top: 14px; }
.bl-log-head { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; text-align: center; }
.bl-log-scroll { overflow-x: auto; }
.bl-log table { width: 100%; max-width: 520px; margin: 0 auto; border-collapse: collapse; font-size: 13.5px; }
.bl-log th {
  font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.bl-log th small { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
.bl-th-you { color: var(--bl-you); }
.bl-th-jev { color: var(--bl-jev); }
.bl-log td { text-align: center; padding: 6px; border-bottom: 1px dashed var(--border); }
.bl-log tr:last-child td { border-bottom: 0; }
.bl-rd { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.bl-split { display: inline-flex; gap: 4px; font-family: var(--mono); }
.bl-split b {
  min-width: 22px; padding: 1px 0; border-radius: 5px; font-weight: 600; font-size: 12.5px;
  background: var(--surface-2);
}
.bl-split b.w { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.bl-split-you { --c: var(--bl-you); }
.bl-split-jev { --c: var(--bl-jev); }
.bl-split b.l { color: var(--muted); }
.bl-res { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.bl-res.you { background: color-mix(in srgb, var(--bl-you) 16%, transparent); color: var(--bl-you); }
.bl-res.jev { background: color-mix(in srgb, var(--bl-jev) 14%, transparent); color: var(--bl-jev); }
.bl-res.tie { background: var(--surface-2); color: var(--muted); }

/* ---------- motion ---------- */
@keyframes bl-drop { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bl-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes bl-stamp { from { opacity: 0; transform: rotate(4deg) scale(1.8); } to { opacity: 1; transform: rotate(4deg) scale(1); } }
@keyframes bl-glow { 0% { box-shadow: 0 0 0 2px var(--bl-paper-1), 0 0 0 3px var(--gold), 0 0 22px 6px color-mix(in srgb, var(--gold) 60%, transparent); } }
@keyframes bl-fade { from { opacity: 0; transform: scale(.8); } }
@keyframes bl-breathe { 50% { opacity: .55; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .bl-root *, .bl-root *::before { animation: none !important; transition: none !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .bl-root { --bl-tok: 11px; gap: 14px; }
  .bl-map { padding: 8px 4px 10px; }
  .bl-map-head { padding: 2px 6px 4px; }
  .bl-map-title { font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; }
  .bl-map-round { display: none; }
  .bl-compass-wrap { display: none; }
  .bl-tokens { gap: 3px; }
  .bl-field { padding: 6px 2px 2px; gap: 8px; }
  .bl-name { font-size: 11.5px; padding: 2px 8px; letter-spacing: .08em; }
  .bl-ribbon { font-size: 9.5px; padding: 1px 6px; right: auto; left: 50%; top: -10px; transform: translateX(-50%) rotate(-3deg); }
  @keyframes bl-stamp { from { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(1.8); } }
  .bl-step { width: 28px; height: 28px; font-size: 16px; }
  .bl-num { min-width: 22px; font-size: 19px; }
  .bl-count { width: 32px; height: 32px; }
  .bl-count b { font-size: 20px; }
  .bl-tokens-reserve { gap: 5px; }
  .bl-thinking { font-size: 13px; padding: 7px 14px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .bl-step { width: 26px; height: 26px; }
  .bl-num { min-width: 18px; }
  .bl-stepper { gap: 0; padding: 2px; }
}