/* ── Risk ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.board-wrapper:has(.rk-wrap) { padding: 0; align-items: stretch; overflow: hidden; }
.rk-wrap { --rk-bg: #070b16; --rk-surface: #0f1526; --rk-line: rgba(148, 163, 205, .16); position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--rk-bg); color: var(--text, #e8ecf7); direction: ltr; }
.rk-hud { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px; border-bottom: 1px solid var(--rk-line); background: var(--rk-surface); }
.rk-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rk-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.rk-armies { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(91, 141, 238, .18); color: #cfe0ff; font-size: 13px; }
.rk-armies b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rk-steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rk-step { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #7f8aa8; border: 1px solid transparent; }
.rk-step.on { color: #fff; background: linear-gradient(135deg, #5b8dee, #7c6cf0); box-shadow: 0 4px 14px -4px rgba(91, 141, 238, .7); }
.rk-players { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px; border-bottom: 1px solid var(--rk-line); scrollbar-width: none; }
.rk-player { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; border-radius: 10px; background: var(--rk-surface); border: 1px solid var(--rk-line); border-inline-start: 4px solid var(--pc); font-size: 12px; }
.rk-player.turn { box-shadow: 0 0 0 2px var(--pc); }
.rk-player.out { opacity: .4; text-decoration: line-through; }
.rk-pmeta { display: inline-flex; align-items: center; gap: 4px; color: #aab4cf; font-variant-numeric: tabular-nums; }
.rk-pmeta span { margin-inline-end: 6px; }
.rk-viewport { position: relative; flex: 1 1 0; min-height: 180px; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(1200px 600px at 30% 20%, #12203d 0%, #0a1226 55%, #070b16 100%); }
.rk-viewport:active { cursor: grabbing; }
.rk-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; display: flex; align-items: center; justify-content: center; }
.rk-svg { width: 100%; height: 100%; display: block; }
.rk-svg path { stroke: #0a1226; stroke-width: 1.1; stroke-linejoin: round; cursor: pointer; transition: fill .2s, opacity .2s, stroke .15s, filter .15s; }
.rk-svg path.rk-decor { fill: none !important; stroke: rgba(255, 255, 255, .18); stroke-width: .8; stroke-dasharray: 3 3; pointer-events: none; cursor: default; }
@media (hover: hover) { .rk-svg path:not(.rk-decor):hover { filter: brightness(1.22); stroke: #fff; stroke-width: 1.8; } }
.rk-svg path.rk-mine { stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.rk-svg path.rk-dim { opacity: .38; }
.rk-svg path.rk-from { stroke: #ffe66d; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(255, 230, 109, .9)); }
.rk-svg path.rk-target { stroke: #ff6b6b; stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(255, 107, 107, .9)); animation: rk-pulse 1s ease-in-out infinite; }
.rk-svg path.rk-reach { stroke: #5ee0a0; stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(94, 224, 160, .9)); }
@keyframes rk-pulse { 50% { stroke-width: 3.4; } }
.rk-badge { fill: #0b1020; stroke: #fff; stroke-width: 1.4; }
.rk-badge-mine { stroke: #ffe66d; }
.rk-badge-n { fill: #fff; font: 700 10px system-ui, sans-serif; paint-order: stroke; }
.rk-loading { color: #8d98b8; font-style: italic; align-self: center; }
.rk-zoom { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.rk-tip { position: absolute; inset-inline: 10px; bottom: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(8, 11, 20, .92); border: 1px solid var(--rk-line); font-size: 13px; text-align: center; z-index: 3; pointer-events: none; }
.rk-roll { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(8, 11, 20, .88); border: 1px solid var(--rk-line); font-size: 12px; z-index: 3; backdrop-filter: blur(8px); max-width: 60%; }
.rk-roll-names { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; color: #cdd5ea; }
.rk-roll-dice { display: flex; align-items: center; gap: 8px; }
.rk-dice { display: inline-flex; gap: 3px; }
.rk-dice.att svg { --die-bg: #ffd9d9; }
.rk-dice.def svg { --die-bg: #dbe8ff; }
.rk-vs { color: #7f8aa8; font-size: 11px; }
.rk-roll-loss { display: flex; gap: 12px; margin-top: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-roll-loss .att { color: #ff8e8e; } .rk-roll-loss .def { color: #8eb6ff; }
.rk-roll-pop { animation: rk-pop .35s cubic-bezier(.23, 1, .32, 1); }
@keyframes rk-pop { from { transform: scale(.9); opacity: .4; } }
.rk-dock { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + var(--safe-b, 0px)); border-top: 1px solid var(--rk-line); background: var(--rk-surface); position: relative; }
.rk-msg { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 14px; color: #cdd5ea; }
.rk-warn { font-size: 12.5px; color: #f5b544; }
.rk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rk-actions { justify-content: flex-end; }
.rk-actions .rk-btn { flex: 1 1 140px; }
.rk-label { font-size: 12px; color: #8d98b8; }
.rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--rk-line); background: #182036; color: #e8ecf7; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .12s, filter .12s, opacity .12s; }
.rk-btn:active { transform: scale(.97); }
.rk-btn:disabled { opacity: .4; cursor: not-allowed; }
.rk-primary { background: linear-gradient(135deg, #5b8dee, #7c6cf0); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -8px rgba(91, 141, 238, .8); }
.rk-icon { min-width: 40px; min-height: 40px; padding: 0; border-radius: 10px; background: rgba(8, 11, 20, .85); }
.rk-seg { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--rk-line); }
.rk-seg-b { min-width: 44px; min-height: 40px; padding: 0 12px; border: 0; background: #12192c; color: #aab4cf; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rk-seg-b + .rk-seg-b { border-inline-start: 1px solid var(--rk-line); }
.rk-seg-b.on { background: #2b4ea8; color: #fff; }
.rk-range { flex: 1 1 140px; min-width: 120px; accent-color: #7c6cf0; }
.rk-num { min-width: 28px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.rk-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(4, 7, 14, .72); padding: 14px; }
.rk-modal-card { width: min(560px, 100%); max-height: 86dvh; overflow: auto; padding: 16px; border-radius: 18px; background: #0f1526; border: 1px solid var(--rk-line); box-shadow: 0 28px 70px -14px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 10px; }
.rk-modal-card h4 { margin: 0; font-size: 17px; }
.rk-sub { margin: 0; font-size: 12.5px; color: #8d98b8; line-height: 1.6; }
.rk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.rk-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--rk-line); background: #141b30; color: #e8ecf7; font: inherit; cursor: pointer; min-height: 96px; }
.rk-card span { font-size: 11px; color: #8d98b8; text-align: center; }
.rk-card.own { border-color: rgba(94, 224, 160, .5); }
.rk-card.on { border-color: #7c6cf0; background: #1d2850; transform: translateY(-3px); }
@media (max-width: 760px) {
  /* the phone's fixed tab bar sits on top of the bottom ~62px of the page: keep the controls above it */
  .board-wrapper:has(.rk-wrap) { padding: 0 0 calc(60px + var(--safe-b, 0px)); }
  .rk-viewport { min-height: 240px; }
  .rk-hud { padding: 6px 10px; }
  .rk-step span { display: none; }
  .rk-step.on span { display: inline; }
  .rk-roll { max-width: 78%; }
}
@media (prefers-reduced-motion: reduce) { .rk-svg path.rk-target { animation: none; } .rk-roll-pop { animation: none; } }

/* extra maps: continent halos, muted neighbouring land, sea lanes */
.rk-svg path.rk-halo { fill: none !important; stroke-width: 6; opacity: .8; pointer-events: none; cursor: default; filter: none; }
.rk-svg path.rk-foreign { fill: rgba(255, 255, 255, .06) !important; stroke: rgba(255, 255, 255, .1); stroke-width: .8; pointer-events: none; cursor: default; }
.rk-svg path.rk-lane { fill: none !important; stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; pointer-events: none; cursor: default; animation: rk-lane 1.6s linear infinite; }
@keyframes rk-lane { to { stroke-dashoffset: -18; } }
.rk-svg path.rk-flash { animation: rk-flash .9s ease-out; }
@keyframes rk-flash { 0% { filter: brightness(2.2) drop-shadow(0 0 8px #fff); } 100% { filter: none; } }
.rk-badge-pop { animation: rk-pop .4s cubic-bezier(.23, 1, .32, 1); }
@keyframes rk-pop { 0% { opacity: .4; } 40% { opacity: 1; } }
.rk-badge-pop circle { animation: rk-pop-c .4s cubic-bezier(.23, 1, .32, 1); transform-box: fill-box; transform-origin: center; }
@keyframes rk-pop-c { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rk-svg path.rk-lane, .rk-svg path.rk-flash, .rk-badge-pop circle { animation: none; } }