/* ==========================================================================
   STATE WARS — map.css
   The U.S. map itself: state fills by status, labels, callout lines, plus the
   small standalone shapes used by quizzes and briefings.
   ========================================================================== */

/* ---------- 1. The map ---------------------------------------------------- */

.usmap {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.usmap__state {
  fill: #3a1b24;
  stroke: #6d3038;
  stroke-width: 1;
  stroke-linejoin: round;
  transition:
    fill   var(--t-mid) var(--ease-out),
    stroke var(--t-mid) var(--ease-out),
    filter var(--t-mid) var(--ease-out);
}

.usmap--live .usmap__state { cursor: default; }

/* 1a. Yours */
.usmap__state--player {
  fill: #2470b8;
  stroke: #a5e3ff;
  stroke-width: 1.1;
  filter: drop-shadow(0 0 calc(6px * var(--fx)) rgba(127, 216, 255, .55));
}

/* 1b. Enemy, and reachable — the only ones you can click */
.usmap__state--attackable {
  fill: #b83f36;
  stroke: #ffb9a3;
  stroke-width: 1.3;
  cursor: pointer;
  animation: state-beckon 2.6s var(--ease-soft) infinite;
}

@keyframes state-beckon {
  0%, 100% { filter: drop-shadow(0 0 calc(4px * var(--fx))  rgba(255, 140, 110, .55)); }
  50%      { filter: drop-shadow(0 0 calc(13px * var(--fx)) rgba(255, 175, 130, .95)); }
}

.reduce-motion .usmap__state--attackable {
  animation: none;
  filter: drop-shadow(0 0 calc(8px * var(--fx)) rgba(255, 160, 120, .8));
}

.usmap--live .usmap__state--attackable:hover {
  fill: #e35a44;
  stroke: #fff;
  filter: drop-shadow(0 0 calc(18px * var(--fx)) rgba(255, 180, 130, 1));
}

/* 1b-ii. Bordering you, but shut — you missed the question on it.
   Deliberately NOT the same as out-of-reach: this is a state you could take
   right now if you had known where it was, and it should look like a door that
   is closed rather than a wall. */
.usmap__state--shut {
  fill: #6b5a2a;
  stroke: #d9c37f;
  stroke-width: 1.2;
  cursor: not-allowed;
  opacity: .85;
}

.usmap--live .usmap__state--shut:hover { fill: #7d6a33; }

/* 1c. Enemy, out of reach */
.usmap__state--locked {
  fill: #2e1620;
  stroke: #55262f;
}

.usmap--live .usmap__state--locked:hover { fill: #3b1d29; }
.usmap--live .usmap__state--player:hover { fill: #2e86d6; }

/* 1d. Quiz map — no ownership shown at all */
.usmap__state--blank {
  fill: #16273e;
  stroke: #33587f;
  stroke-width: 1;
  cursor: pointer;
}

.usmap--live .usmap__state--blank:hover {
  fill: #24466d;
  stroke: #7fd8ff;
}

/* 1e. The answer, revealed */
.usmap__state--reveal {
  fill: #ffc25c;
  stroke: #fff3d6;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 calc(18px * var(--fx)) rgba(255, 194, 92, .95));
  animation: reveal-pop 500ms var(--ease-out);
}

/* 1e-i. The state a question is ASKING about.
   On a map with no names on it, this is the only thing telling the player
   which state they are being asked to identify, so it is the loudest thing on
   screen — and deliberately not gold, which this codebase already uses for
   "here is the answer". */
.usmap__state--ask {
  fill: #7fd8ff;
  stroke: #ffffff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 calc(20px * var(--fx)) rgba(127, 216, 255, .95));
  animation: ask-pulse 1.8s var(--ease-soft) infinite;
}

@keyframes ask-pulse {
  0%, 100% { fill: #7fd8ff; filter: drop-shadow(0 0 calc(14px * var(--fx)) rgba(127, 216, 255, .75)); }
  50%      { fill: #b9ecff; filter: drop-shadow(0 0 calc(26px * var(--fx)) rgba(127, 216, 255, 1)); }
}

.reduce-motion .usmap__state--ask { animation: none; }

/* 1e-ii. Name check: how you scored yourself, state by state */
.usmap__state--named {
  fill: #1c7551;
  stroke: #7bf0b8;
  stroke-width: 1.2;
  cursor: pointer;
  filter: drop-shadow(0 0 calc(6px * var(--fx)) rgba(123, 240, 184, .45));
}

.usmap__state--missed {
  fill: #79242f;
  stroke: #ff9aa6;
  stroke-width: 1.2;
  cursor: pointer;
}

.usmap--live .usmap__state--named:hover  { fill: #248f64; }
.usmap--live .usmap__state--missed:hover { fill: #932c3a; }

.usmap__state--reveal-alt {
  fill: #4d7fb5;
  stroke: #b9e2ff;
  stroke-width: 1.3;
}

@keyframes reveal-pop {
  0%   { opacity: .2; }
  60%  { opacity: 1; }
}

/* 1f. District of Columbia — drawn so the map has no hole, never playable */
.usmap__dc {
  fill: #4a3050;
  stroke: #6d5077;
  stroke-width: .6;
  pointer-events: none;
}

/* 1g. Conquest animations */
.usmap__state.is-taken {
  animation: state-taken 1100ms var(--ease-out);
}

@keyframes state-taken {
  0%   { fill: #ffd27a; filter: drop-shadow(0 0 34px rgba(255, 210, 122, 1)); }
  40%  { fill: #ffffff; filter: drop-shadow(0 0 40px rgba(255, 255, 255, 1)); }
  100% { fill: #2470b8; filter: drop-shadow(0 0 6px rgba(127, 216, 255, .55)); }
}

.usmap__state.is-opened {
  animation: state-opened 900ms var(--ease-out);
}

@keyframes state-opened {
  0%   { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 26px rgba(255, 175, 130, 1)); }
  100% { stroke: #ffb9a3; stroke-width: 1.3; }
}

/* ---------- 2. Labels ----------------------------------------------------- */

.usmap__label {
  fill: rgba(233, 241, 252, .82);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(4, 7, 14, .75);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.usmap__label--callout {
  text-anchor: start;
  font-size: 16px;
}

.usmap__leader {
  fill: none;
  stroke: rgba(127, 216, 255, .38);
  stroke-width: 1;
  pointer-events: none;
}

/* ---------- 3. Standalone state outline ----------------------------------- */

.stateshape {
  display: block;
  width: 100%;
  height: 100%;
}

.stateshape path {
  fill: rgba(127, 216, 255, .16);
  stroke: #7fd8ff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.stateshape--quiz path {
  fill: rgba(255, 194, 92, .14);
  stroke: #ffd27a;
  stroke-width: 3;
  filter: drop-shadow(0 0 calc(14px * var(--fx)) rgba(255, 194, 92, .5));
}

.stateshape--choice path {
  fill: rgba(200, 228, 255, .12);
  stroke: #cfe6ff;
  stroke-width: 3;
}

.stateshape--card path {
  fill: rgba(127, 216, 255, .12);
  stroke: rgba(127, 216, 255, .75);
  stroke-width: 2;
}

/* ---------- 4. Mini map (attack briefing) --------------------------------- */

.minimap {
  display: block;
  width: 100%;
  height: 100%;
}

.minimap path { stroke-width: .8; stroke-linejoin: round; }

.minimap__other  { fill: #241a26; stroke: #3d2a35; }
.minimap__mine   { fill: #2470b8; stroke: #7fd8ff; }

.minimap__target {
  fill: #ff6a4d;
  stroke: #fff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 calc(10px * var(--fx)) rgba(255, 120, 90, 1));
  animation: target-pulse 1.8s var(--ease-soft) infinite;
}

@keyframes target-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

.reduce-motion .minimap__target { animation: none; }