/* Landscape controller: the board is the stage; controls float over it.
   Kept separate from risk.css so the waiting room and TV keep their layouts. */
body.rk-playing {
  height: 100dvh;
  overflow: hidden;
}

.rk-playing .rk-header { display: none; }
.rk-playing .rk-stage { height: 100dvh; isolation: isolate; }
.rk-playing .rk-pane--map { position: absolute; inset: 0; display: block; overflow: hidden; }
.rk-playing .rk-mapwrap {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 48% 35%, var(--p-color-risk-ocean-light), var(--p-color-risk-ocean));
}
.rk-playing .rk-map { position: absolute; inset: 0; }
.rk-playing .rk-mapwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px color-mix(in srgb, var(--p-color-risk-ink) 35%, transparent);
}
.rk-playing button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rk-playing .btn { min-height: var(--p-space-risk-touch); }
.rk-playing .btn--primary {
  background: linear-gradient(180deg, var(--p-color-risk-brass-light), var(--p-color-risk-brass));
  border-color: var(--p-color-risk-brass-light);
  color: var(--p-color-risk-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--p-color-bg-inverse) 35%, transparent), var(--p-shadow-100);
  font-weight: var(--p-font-weight-bold);
}
.rk-playing .btn--primary:hover { background: var(--p-color-risk-brass-light); }
.rk-playing .btn:focus-visible,
.rk-playing .rk-seat:focus-visible {
  outline: 3px solid var(--p-color-border-focus);
  outline-offset: 3px;
}
.rk-playing .muted { color: var(--p-color-risk-text-muted); }
.rk-playing .rk-pausebar {
  position: absolute;
  z-index: 18;
  top: max(var(--p-space-200), env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--p-color-risk-brass);
  border-radius: var(--p-border-radius-full);
  padding: var(--p-space-150) var(--p-space-400);
  background: var(--p-color-risk-panel-glass);
  box-shadow: var(--p-shadow-200);
  white-space: nowrap;
}

/* The tools and player crests deliberately leave the center of the map clear. */
.rk-map-tools {
  position: absolute;
  z-index: 14;
  top: max(var(--p-space-200), env(safe-area-inset-top));
  left: var(--p-space-risk-edge);
  display: flex;
  gap: var(--p-space-150);
}
.rk-map-tools .btn {
  position: relative;
  min-width: var(--p-space-risk-touch);
  width: var(--p-space-risk-touch);
  height: var(--p-space-risk-touch);
  padding: 0;
  border: 1px solid var(--p-color-risk-border);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-risk-panel-glass);
  backdrop-filter: blur(12px);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-200);
  font-size: var(--p-font-size-heading-lg);
}
.rk-map-tools .btn:hover,
.rk-map-tools .btn[aria-expanded="true"] { border-color: var(--p-color-risk-brass); background: var(--p-color-risk-panel-raised); }
.rk-map-tools .btn[aria-pressed="true"] { color: var(--p-color-risk-brass-light); }
.rk-map-tools .rk-icon { width: var(--p-space-600); height: var(--p-space-600); }
.rk-map-tools .rk-tab__badge { position: absolute; top: calc(-1 * var(--p-space-050)); right: calc(-1 * var(--p-space-050)); background: var(--p-color-risk-brass-light); color: var(--p-color-risk-ink); min-width: var(--p-space-500); line-height: var(--p-space-500); padding-inline: var(--p-space-100); }

.rk-player-rail {
  position: absolute;
  z-index: 13;
  top: 50%;
  right: var(--p-space-risk-right);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--p-space-200);
  width: var(--p-space-risk-rail);
  max-height: calc(100% - var(--p-space-1600));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--p-space-100);
  scrollbar-width: thin;
  scrollbar-color: var(--p-color-risk-border) transparent;
}
.rk-seat {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--p-space-150);
  width: 100%;
  min-height: 64px;
  padding: var(--p-space-150);
  color: var(--p-color-text);
  background: linear-gradient(110deg, color-mix(in srgb, var(--p-color-player, var(--c, var(--p-color-risk-border))) 24%, transparent), transparent), var(--p-color-risk-panel-glass);
  border: 1px solid color-mix(in srgb, var(--p-color-player, var(--c, var(--p-color-risk-border))) 75%, transparent);
  border-radius: var(--p-border-radius-300);
  box-shadow: var(--p-shadow-200);
  text-align: left;
  transition: border-color var(--p-motion-duration-150), background var(--p-motion-duration-150);
}
.rk-seat:hover { background: var(--p-color-risk-panel-raised); }
.rk-seat.is-current {
  border: 2px solid var(--p-color-risk-brass-light);
  padding: calc(var(--p-space-150) - 1px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-color-risk-brass) 25%, transparent), var(--p-shadow-200);
}
.rk-seat.is-current::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--p-space-100));
  top: 50%;
  transform: translateY(-50%);
  width: var(--p-space-100);
  height: var(--p-space-600);
  background: var(--p-color-risk-brass-light);
  border-radius: var(--p-border-radius-full);
}
.rk-seat.is-me .rk-seat__name { color: var(--p-color-risk-brass-light); }
.rk-seat.is-dead { opacity: .52; filter: saturate(.35); }
.rk-seat__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--p-space-1000);
  height: var(--p-space-1000);
  border-radius: var(--p-border-radius-full);
  background: color-mix(in srgb, var(--p-color-player, var(--c, var(--p-color-risk-border))) 38%, var(--p-color-risk-panel));
  border: 2px solid var(--p-color-player, var(--c, var(--p-color-risk-border)));
}
.rk-seat__avatar svg, .rk-seat__avatar img { width: 100%; height: 100%; object-fit: contain; }
.rk-seat__details, .rk-seat > div:not(.rk-seat__avatar) { min-width: 0; flex: 1; }
.rk-seat__name {
  display: block;
  font-size: var(--p-font-size-body-xs);
  font-weight: var(--p-font-weight-bold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-seat__stats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--p-space-050) var(--p-space-150);
  margin-top: var(--p-space-100);
  color: var(--p-color-risk-text-muted);
  font-size: var(--p-font-size-body-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.rk-seat__stats > span { display: inline-flex; align-items: center; gap: var(--p-space-050); }
.rk-seat__stats b { color: var(--p-color-text); font-weight: var(--p-font-weight-bold); }
.rk-seat__stats .rk-icon { width: 12px; height: 12px; }
.rk-seat__cards {
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--p-space-300));
  left: calc(-1 * var(--p-space-150));
  display: grid;
  place-items: center;
  width: var(--p-space-600);
  height: var(--p-space-800);
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-color-risk-ink);
  font-size: var(--p-font-size-body-md);
  line-height: 1;
  pointer-events: none;
  transform: rotate(-12deg);
}
.rk-seat__cards::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--p-color-bg-inverse);
  border-radius: var(--p-border-radius-100);
  background: color-mix(in srgb, var(--p-color-risk-brass-light) 36%, var(--p-color-bg-inverse));
  box-shadow: var(--p-shadow-100), inset 0 0 0 1px color-mix(in srgb, var(--p-color-risk-ink) 24%, transparent);
}
.rk-seat__avatar .rk-seat__cards .rk-icon { display: none; }
.rk-seat__cards > b { position: relative; z-index: 1; font-weight: 800; font-variant-numeric: tabular-nums; transform: rotate(12deg); }
.rk-seat__notice {
  position: absolute;
  top: calc(-1 * var(--p-space-100));
  right: calc(-1 * var(--p-space-050));
  display: grid;
  place-items: center;
  min-width: var(--p-space-500);
  height: var(--p-space-500);
  padding: 0 var(--p-space-100);
  border: 1px solid var(--p-color-risk-panel);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-risk-brass-light);
  color: var(--p-color-risk-ink);
  font-size: var(--p-font-size-body-xs);
  font-weight: var(--p-font-weight-bold);
}

/* A compact turn dock carries the one main action and the phase progression. */
.rk-dock {
  position: absolute;
  z-index: 15;
  left: calc((100% - var(--p-space-risk-rail) - var(--p-space-risk-right)) / 2);
  bottom: var(--p-space-risk-bottom);
  transform: translateX(-50%);
  width: min(540px, calc(100% - var(--p-space-risk-rail) - var(--p-space-risk-right) - var(--p-space-600)));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--p-space-100) var(--p-space-300);
  padding: var(--p-space-200) var(--p-space-300);
  border: 1px solid var(--p-color-risk-border);
  border-top-color: var(--p-color-risk-brass);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-risk-panel-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--p-shadow-300);
}
.rk-dock__status { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--p-space-200); min-width: 0; }
.rk-dock__phases, .rk-phase-steps { display: flex; align-items: center; gap: var(--p-space-100); }
.rk-phase-step {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-100);
  padding: var(--p-space-100) var(--p-space-150);
  border-radius: var(--p-border-radius-100);
  color: var(--p-color-risk-text-muted);
  font-size: var(--p-font-size-body-xs);
  font-weight: var(--p-font-weight-semibold);
  white-space: nowrap;
}
.rk-phase-step .rk-icon { width: var(--p-space-400); height: var(--p-space-400); }
.rk-phase-step.is-active { background: color-mix(in srgb, var(--p-color-risk-brass) 19%, transparent); color: var(--p-color-risk-brass-light); }
.rk-phase-step.is-done { color: var(--p-color-text-success); }
.rk-dock__turn { margin-left: auto; color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rk-dock__turn strong { color: var(--p-color-text); }
.rk-dock .rk-timer { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-body-sm); color: var(--p-color-risk-brass-light); }
.rk-dock .rk-timer.is-hot { color: var(--p-color-text-critical); }
.rk-dock__hint { align-self: center; min-width: 0; color: var(--p-color-text); font-size: var(--p-font-size-body-sm); line-height: 1.35; }
.rk-dock__action { align-self: center; min-width: 128px; max-width: 240px; }
.rk-dock:has(.rk-dock__reset:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto auto; }
.rk-dock__reset { align-self: center; padding-inline: var(--p-space-200); min-height: var(--p-space-risk-touch); color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); border-color: var(--p-color-risk-border); }
.rk-dock__action[hidden] + .rk-dock__hint { grid-column: 1 / -1; }

/* Territory menus are anchored above the dock and keep the board tappable. */
.rk-playing .rk-sheet {
  z-index: 20;
  left: var(--p-space-risk-edge);
  right: auto;
  bottom: calc(var(--p-space-risk-dock) + var(--p-space-risk-bottom));
  width: clamp(280px, 40vw, 420px);
  max-width: calc(100% - var(--p-space-risk-rail) - var(--p-space-1000));
  max-height: calc(100% - var(--p-space-risk-dock) - var(--p-space-risk-bottom) - var(--p-space-1600));
  padding: var(--p-space-300);
  gap: var(--p-space-200);
  border: 1px solid var(--p-color-risk-border);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-risk-panel-glass);
  box-shadow: var(--p-shadow-300);
  backdrop-filter: blur(14px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--p-color-risk-border) transparent;
  animation: rk-mobile-sheet-in var(--p-motion-duration-200) var(--p-motion-ease);
}
.rk-playing .rk-sheet > div { gap: var(--p-space-200); }
.rk-playing .rk-sheet__body > div { display: flex; flex-direction: column; gap: var(--p-space-200); }
.rk-playing .rk-sheet__title { padding-right: var(--p-space-1000); font-size: var(--p-font-size-heading-md); line-height: 1.35; min-height: var(--p-space-800); }
.rk-playing .rk-sheet__close {
  position: absolute;
  top: var(--p-space-100);
  right: var(--p-space-100);
  min-width: var(--p-space-risk-touch);
  width: var(--p-space-risk-touch);
  height: var(--p-space-risk-touch);
  padding: 0;
  border: 0;
  border-radius: var(--p-border-radius-200);
  background: transparent;
  color: var(--p-color-risk-text-muted);
  font-size: var(--p-font-size-heading-lg);
}
.rk-playing .rk-sheet__close:hover { background: var(--p-color-risk-panel-raised); color: var(--p-color-text); }
.rk-playing .rk-sheet .row { flex-wrap: wrap; gap: var(--p-space-200); }
.rk-playing .rk-sheet .rk-chip { max-width: 100%; }
.rk-playing .rk-sheet .rk-chip__name { max-width: 12em; }
.rk-playing .rk-sheet .rk-targets .btn { flex: 1 1 auto; }
.rk-playing .rk-sheet .rk-dicebtns { gap: var(--p-space-150); }
.rk-playing .rk-sheet .rk-dicebtn { padding-inline: var(--p-space-150); }
.rk-playing .rk-sheet .rk-slider { gap: var(--p-space-150); }
.rk-playing .rk-sheet .rk-slider input { margin: 0; }
.rk-playing .rk-sheet .rk-step { gap: var(--p-space-150); }
.rk-playing .rk-sheet .rk-step .btn { min-width: var(--p-space-risk-touch); padding-inline: var(--p-space-200); }
.rk-playing .rk-sheet .rk-odds { background: var(--p-color-risk-panel-raised); }
.rk-selection-help { padding: var(--p-space-200) var(--p-space-300); border-left: 3px solid var(--p-color-risk-brass); border-radius: var(--p-border-radius-100); background: color-mix(in srgb, var(--p-color-risk-brass) 10%, transparent); color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-sm); line-height: 1.4; }
.rk-transfer { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--p-space-200); padding: var(--p-space-200); border: 1px solid var(--p-color-risk-border); border-radius: var(--p-border-radius-200); background: var(--p-color-risk-panel-raised); }
.rk-transfer > div { display: flex; flex-direction: column; min-width: 0; gap: var(--p-space-100); }
.rk-transfer > div:last-child { text-align: right; }
.rk-transfer strong, .rk-transfer b { font-size: var(--p-font-size-body-sm); overflow-wrap: anywhere; }
.rk-transfer small, .rk-transfer > div > span { color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); }
.rk-transfer__loss, .rk-transfer .is-loss { color: var(--p-color-text-critical); }
.rk-transfer__gain, .rk-transfer .is-gain { color: var(--p-color-text-success); }
.rk-transfer__arrow, .rk-transfer > span { color: var(--p-color-risk-brass-light); font-size: var(--p-font-size-heading-lg); }
.rk-amount { display: flex; flex-direction: column; gap: var(--p-space-200); }
.rk-playing .rk-amount > .row { display: grid; grid-template-columns: var(--p-space-risk-touch) repeat(3, minmax(0, 1fr)) var(--p-space-risk-touch); gap: var(--p-space-100); }
.rk-playing .rk-amount > .row > .btn { min-width: 0; padding-inline: 0; font-size: var(--p-font-size-body-xs); }
.rk-amount__presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--p-space-150); }
.rk-amount__presets .btn { min-width: 0; padding-inline: var(--p-space-150); }
.rk-amount__presets .btn.is-selected,
.rk-amount__presets .btn[aria-pressed="true"] { color: var(--p-color-risk-brass-light); border-color: var(--p-color-risk-brass); background: color-mix(in srgb, var(--p-color-risk-brass) 14%, var(--p-color-risk-panel)); }
.rk-amount input[type="range"] { width: 100%; height: var(--p-space-risk-touch); accent-color: var(--p-color-risk-brass); cursor: pointer; }

/* Cards, rules and diplomacy open only when requested. */
.rk-panel-backdrop { position: absolute; z-index: 40; inset: 0; background: var(--p-color-risk-backdrop); backdrop-filter: blur(3px); }
.rk-panel {
  position: absolute;
  z-index: 41;
  top: 50%;
  right: var(--p-space-risk-right);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: min(430px, calc(100% - var(--p-space-600)));
  max-height: calc(100% - max(var(--p-space-600), env(safe-area-inset-top)) - var(--p-space-risk-bottom));
  border: 1px solid var(--p-color-risk-border);
  border-radius: var(--p-border-radius-400);
  background: var(--p-color-risk-panel);
  box-shadow: var(--p-shadow-300);
  overflow: hidden;
}
.rk-panel__head { display: flex; align-items: center; gap: var(--p-space-200); padding: var(--p-space-200) var(--p-space-300) var(--p-space-200) var(--p-space-400); border-bottom: 1px solid var(--p-color-risk-border); flex: 0 0 auto; }
.rk-panel__head h2, .rk-panel__head h3, .rk-panel__head > strong { margin: 0; font-family: var(--p-font-family-risk); color: var(--p-color-risk-brass-light); font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-heading-lg); }
.rk-panel__head > .btn { flex: 0 0 auto; margin-left: auto; min-width: var(--p-space-risk-touch); padding: var(--p-space-200); }
.rk-panel__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--p-space-400); scrollbar-width: thin; scrollbar-color: var(--p-color-risk-border) transparent; }
.rk-panel__body .rk-pane { padding: 0; overflow: visible; }
.rk-panel__body > .rk-pane__head { margin-top: 0; }
.rk-panel__body .rk-h2:first-child { margin-top: 0; }
.rk-panel__body .row { flex-wrap: wrap; }
.rk-panel__body .rk-tradebar { background: var(--p-color-risk-panel); }
.rk-panel__body .rk-player { margin-bottom: var(--p-space-300); }
.rk-panel__body .rk-player:last-child { margin-bottom: 0; }
.rk-duel { display: flex; flex-direction: column; gap: var(--p-space-300); }
.rk-duel > .rk-player__head h3, .rk-duel > h3 { margin: 0; }
.rk-duel > .rk-player__head .muted { font-size: var(--p-font-size-body-sm); }
.rk-duel > p { margin: 0; font-size: var(--p-font-size-body-sm); line-height: 1.4; }
.rk-duel__head { display: flex; align-items: center; gap: var(--p-space-300); }
.rk-duel__stats { display: flex; flex-wrap: wrap; gap: var(--p-space-200); }
.rk-duel__stats > span { display: inline-flex; align-items: center; gap: var(--p-space-150); padding: var(--p-space-150) var(--p-space-200); border-radius: var(--p-border-radius-200); background: var(--p-color-risk-panel-raised); font-size: var(--p-font-size-body-sm); }
.rk-duel__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-200); }
.rk-duel__actions > .btn { flex: 1; }
.rk-chat-history { display: flex; flex-direction: column; gap: var(--p-space-200); min-height: 72px; max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--p-space-100); border-radius: var(--p-border-radius-200); scrollbar-width: thin; }
.rk-chat-message { align-self: flex-start; max-width: 90%; margin: 0; padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-border-radius-200) var(--p-border-radius-200) var(--p-border-radius-200) var(--p-border-radius-100); background: var(--p-color-risk-panel-raised); font-size: var(--p-font-size-body-sm); line-height: 1.4; overflow-wrap: anywhere; }
.rk-chat-message.is-mine { align-self: flex-end; background: color-mix(in srgb, var(--p-color-risk-brass) 18%, var(--p-color-risk-panel)); border: 1px solid color-mix(in srgb, var(--p-color-risk-brass) 30%, transparent); border-radius: var(--p-border-radius-200) var(--p-border-radius-200) var(--p-border-radius-100) var(--p-border-radius-200); }
.rk-chat-message > small { display: block; margin-bottom: var(--p-space-100); color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); }
.rk-chat-message > strong { display: block; margin-bottom: var(--p-space-100); color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); }
.rk-chat-message > span { display: block; }
.rk-chat-form { display: flex; align-items: center; gap: var(--p-space-200); }
.rk-chat-form input { flex: 1; min-width: 0; min-height: var(--p-space-risk-touch); font-size: 16px; }
.rk-chat-form .btn { flex: 0 0 auto; min-width: var(--p-space-risk-touch); }

/* Announcements accompany a brief input lock when entering a new stage. */
.rk-turn-announcement {
  position: absolute;
  z-index: 28;
  left: calc((100% - var(--p-space-risk-rail)) / 2);
  top: 43%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-space-150);
  width: max-content;
  max-width: min(460px, calc(100% - var(--p-space-risk-rail) - var(--p-space-800)));
  padding: var(--p-space-400) var(--p-space-800);
  border: 1px solid var(--p-color-player, var(--c, var(--p-color-risk-brass)));
  border-radius: var(--p-border-radius-400);
  background: var(--p-color-risk-panel-glass);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-300), 0 0 40px color-mix(in srgb, var(--p-color-player, var(--c, var(--p-color-risk-brass))) 28%, transparent);
  backdrop-filter: blur(10px);
  text-align: center;
  pointer-events: none;
  animation: rk-mobile-turn var(--p-motion-risk-announcement) var(--p-motion-ease) both;
}
.rk-turn-announcement > svg, .rk-turn-announcement > img { width: 56px; height: 56px; }
.rk-turn-announcement strong, .rk-turn-announcement__title { font-family: var(--p-font-family-risk); font-weight: var(--p-font-weight-bold); font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.rk-turn-announcement small, .rk-turn-announcement > span, .rk-turn-announcement__subtitle { color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-sm); }
.rk-battle-announcement {
  position: absolute;
  z-index: 27;
  top: max(var(--p-space-200), env(safe-area-inset-top));
  left: calc((100% - var(--p-space-risk-rail)) / 2);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-200);
  max-width: calc(100% - var(--p-space-risk-rail) - var(--p-space-800));
  padding: var(--p-space-200) var(--p-space-400);
  border: 1px solid var(--p-color-risk-brass);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-risk-panel-glass);
  color: var(--p-color-text);
  box-shadow: var(--p-shadow-200);
  font-size: var(--p-font-size-body-sm);
  font-weight: var(--p-font-weight-bold);
  text-align: center;
  pointer-events: none;
}
.rk-battle-announcement .rk-icon { color: var(--p-color-risk-brass-light); flex: 0 0 auto; }
.rk-playing .rk-toast { bottom: calc(var(--p-space-risk-dock) + var(--p-space-risk-bottom)); background: var(--p-color-risk-panel); }
.rk-playing .rk-overlay { z-index: 45; background: var(--p-color-risk-backdrop); backdrop-filter: blur(8px); }

/* Deployment keeps one country and one decision in focus. The troop wheel
   previews a count; its check button sends the actual server intent. */
.rk-deploy-prompt {
  position: absolute;
  z-index: 17;
  top: max(var(--p-space-400), env(safe-area-inset-top));
  left: calc((100% - var(--p-space-risk-rail)) / 2);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-space-100);
  width: max-content;
  max-width: calc(100% - var(--p-space-risk-rail) - 160px);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 4px var(--p-color-risk-ink), 0 0 18px var(--p-color-risk-ink);
}
.rk-deploy-prompt strong { font-size: clamp(1.3rem, 3.4vw, 2.8rem); font-family: var(--p-font-family-risk); line-height: 1.1; color: var(--p-color-text); }
.rk-deploy-prompt > span { font-size: var(--p-font-size-body-sm); color: var(--p-color-text); }
.rk-reinforcement-count { font-size: var(--p-font-size-heading-xl); color: var(--c); }
.rk-deploy-bar {
  position: absolute;
  z-index: 21;
  left: var(--p-space-risk-edge);
  right: calc(var(--p-space-risk-rail) + var(--p-space-risk-right) + var(--p-space-300));
  bottom: var(--p-space-risk-bottom);
  display: grid;
  grid-template-columns: var(--p-space-1600) minmax(0, 1fr) var(--p-space-1600);
  align-items: center;
  gap: var(--p-space-600);
  padding: var(--p-space-300) var(--p-space-400);
  border: 1px solid var(--p-color-risk-border);
  border-top: 2px solid var(--c);
  border-radius: var(--p-border-radius-400);
  background: var(--p-color-risk-panel-glass);
  backdrop-filter: blur(14px);
  box-shadow: var(--p-shadow-300);
}
.rk-deploy-bar .btn { width: var(--p-space-1600); height: var(--p-space-1600); border-radius: var(--p-border-radius-full); padding: 0; font-size: 2.4rem; line-height: 1; border: 2px solid currentColor; }
.rk-deploy-bar__cancel { color: var(--p-color-text-critical); background: color-mix(in srgb, var(--p-color-bg-fill-critical) 14%, var(--p-color-risk-panel)); }
.rk-deploy-bar__confirm { color: var(--p-color-text-success); background: color-mix(in srgb, var(--p-color-bg-fill-success) 20%, var(--p-color-risk-panel)); }
.rk-deploy-bar__control { display: flex; flex-direction: column; gap: var(--p-space-050); min-width: 0; }
.rk-deploy-bar__destination { min-width: 0; font-size: var(--p-font-size-body-sm); overflow-wrap: anywhere; }

/* Attack and transfer share deployment's single, deliberate bottom command.
   The selected territories remain visible while the center holds the amount
   wheel or the dice mode; the outer circles cancel and commit the intent. */
.rk-command-prompt {
  position: absolute;
  z-index: 17;
  top: max(var(--p-space-400), env(safe-area-inset-top));
  left: calc((100% - var(--p-space-risk-rail)) / 2);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-space-100);
  width: max-content;
  max-width: calc(100% - var(--p-space-risk-rail) - 160px);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 4px var(--p-color-risk-ink), 0 0 18px var(--p-color-risk-ink);
}
.rk-command-prompt > strong { max-width: 100%; color: var(--p-color-text); font-family: var(--p-font-family-risk); font-size: clamp(1.3rem, 3.4vw, 2.8rem); line-height: 1.1; overflow-wrap: anywhere; }
.rk-command-prompt > span { max-width: 100%; color: var(--p-color-text); font-size: var(--p-font-size-body-sm); line-height: 1.25; }
.rk-command-bar {
  position: absolute;
  z-index: 21;
  left: var(--p-space-risk-edge);
  right: calc(var(--p-space-risk-rail) + var(--p-space-risk-right) + var(--p-space-300));
  bottom: var(--p-space-risk-bottom);
  display: grid;
  grid-template-columns: var(--p-space-1600) minmax(0, 1fr) var(--p-space-1600);
  align-items: center;
  gap: var(--p-space-500);
  padding: var(--p-space-300) var(--p-space-400);
  border: 1px solid var(--p-color-risk-border);
  border-top: 2px solid var(--c, var(--p-color-risk-brass));
  border-radius: var(--p-border-radius-400);
  background: var(--p-color-risk-panel-glass);
  backdrop-filter: blur(14px);
  box-shadow: var(--p-shadow-300);
}
.rk-playing:has(.rk-command-bar:not([hidden])) .rk-dock,
.rk-playing:has(.rk-command-bar:not([hidden])) .rk-sheet { display: none; }
.rk-command-bar__content { display: flex; flex-direction: column; gap: var(--p-space-100); min-width: 0; }
.rk-command-bar__route { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--p-space-100) var(--p-space-200); min-width: 0; color: var(--p-color-text); font-size: var(--p-font-size-body-sm); line-height: 1.3; font-weight: var(--p-font-weight-semibold); }
.rk-command-bar__route > span { min-width: 0; overflow-wrap: anywhere; }
.rk-command-bar__route > b { color: var(--c, var(--p-color-risk-brass-light)); font-variant-numeric: tabular-nums; }
.rk-command-bar__odds { color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); line-height: 1.3; }
.rk-command-bar__odds b { color: var(--p-color-text); font-variant-numeric: tabular-nums; }
.rk-command-bar__odds.is-good { color: var(--p-color-text-success); }
.rk-command-bar__odds.is-bad { color: var(--p-color-text-critical); }
.rk-command-dice { display: grid; grid-template-columns: repeat(3, minmax(var(--p-space-risk-touch), 1fr)) minmax(72px, 1.35fr); align-items: stretch; gap: var(--p-space-150); min-width: 0; }
.rk-playing .rk-command-dice > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-100);
  min-height: var(--p-space-risk-touch);
  min-width: 0;
  padding: var(--p-space-100) var(--p-space-150);
  border: 1px solid var(--p-color-risk-border);
  border-radius: var(--p-border-radius-200);
  background: var(--p-color-risk-panel-raised);
  color: var(--p-color-risk-text-muted);
  font-size: var(--p-font-size-body-sm);
  font-weight: var(--p-font-weight-bold);
  line-height: 1.1;
}
.rk-playing .rk-command-dice > button[aria-pressed="true"],
.rk-playing .rk-command-dice > button.is-active {
  border: 2px solid var(--p-color-risk-brass-light);
  background: color-mix(in srgb, var(--p-color-risk-brass) 24%, var(--p-color-risk-panel));
  color: var(--p-color-risk-brass-light);
  box-shadow: inset 0 -3px 0 var(--p-color-risk-brass);
}
.rk-command-dice > button .rk-icon { width: var(--p-space-500); height: var(--p-space-500); flex: 0 0 auto; }
.rk-command-dice > button small { font-size: var(--p-font-size-body-xs); }
.rk-command-bar .rk-command-bar__cancel,
.rk-command-bar .rk-command-bar__confirm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--p-space-050);
  width: var(--p-space-1600);
  height: var(--p-space-1600);
  min-width: var(--p-space-risk-touch);
  min-height: var(--p-space-risk-touch);
  padding: 0;
  border: 2px solid currentColor;
  border-radius: var(--p-border-radius-full);
  font-size: var(--p-font-size-heading-2xl);
  font-weight: var(--p-font-weight-bold);
  line-height: 1;
  box-shadow: none;
}
.rk-command-bar .rk-command-bar__cancel { color: var(--p-color-text-critical); background: color-mix(in srgb, var(--p-color-bg-fill-critical) 14%, var(--p-color-risk-panel)); }
.rk-command-bar .rk-command-bar__cancel.is-minimum { color: var(--p-color-risk-brass-light); background: color-mix(in srgb, var(--p-color-risk-brass) 12%, var(--p-color-risk-panel)); font-size: var(--p-font-size-body-xs); }
.rk-command-bar .rk-command-bar__confirm { color: var(--p-color-risk-brass-light); background: color-mix(in srgb, var(--p-color-risk-brass) 20%, var(--p-color-risk-panel)); }
.rk-command-bar--move .rk-command-bar__confirm { color: var(--p-color-text-success); background: color-mix(in srgb, var(--p-color-bg-fill-success) 20%, var(--p-color-risk-panel)); }
.rk-command-bar__cancel .rk-icon,
.rk-command-bar__confirm .rk-icon { width: var(--p-space-800); height: var(--p-space-800); }
.rk-command-bar__cancel > small,
.rk-command-bar__confirm > small { max-width: 100%; color: currentColor; font-family: var(--p-font-family-body); font-size: var(--p-font-size-body-xs); line-height: 1.1; white-space: normal; }
.rk-command-bar .rk-command-bar__cancel:disabled,
.rk-command-bar .rk-command-bar__confirm:disabled,
.rk-command-dice > button:disabled { opacity: .45; }
.rk-command-bar--move { --p-space-risk-wheel-size: 64px; --p-space-risk-wheel-height: 74px; }

/* Continent inspection shares the map: a summary above it, and one compact
   panel whose list scrolls independently from the board. */
.rk-continent-summary {
  position: absolute;
  z-index: 18;
  top: max(var(--p-space-200), env(safe-area-inset-top));
  left: calc(var(--p-space-risk-edge) + var(--p-space-risk-touch) + var(--p-space-400));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--p-space-100) var(--p-space-200);
  min-height: var(--p-space-risk-touch);
  width: 200px;
  max-width: calc(100% - var(--p-space-risk-rail) - 160px);
  padding: var(--p-space-200) var(--p-space-400);
  border: 1px solid var(--p-color-risk-brass);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-risk-panel-glass);
  color: var(--p-color-risk-text-muted);
  box-shadow: var(--p-shadow-200);
  backdrop-filter: blur(10px);
  font-size: var(--p-font-size-body-sm);
  line-height: 1.2;
  text-align: center;
}
.rk-continent-summary strong, .rk-continent-summary b { color: var(--p-color-risk-brass-light); font-weight: var(--p-font-weight-bold); }
.rk-continent-summary > .rk-icon { flex: 0 0 auto; color: var(--p-color-risk-brass-light); width: var(--p-space-500); height: var(--p-space-500); }
.rk-continent-summary[aria-expanded="true"] { background: var(--p-color-risk-panel-raised); }
.rk-continent-panel {
  position: absolute;
  z-index: 22;
  left: calc(var(--p-space-risk-edge) + var(--p-space-risk-touch) + var(--p-space-300));
  bottom: var(--p-space-risk-bottom);
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100% - var(--p-space-risk-rail) - 104px));
  max-height: min(340px, calc(100% - 100px));
  border: 1px solid var(--c, var(--p-color-risk-border));
  border-top: 2px solid var(--c, var(--p-color-risk-brass));
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-risk-panel-glass);
  color: var(--p-color-text);
  backdrop-filter: blur(14px);
  box-shadow: var(--p-shadow-300);
  overflow: hidden;
}
.rk-continent-panel__head { display: flex; align-items: center; gap: var(--p-space-200); flex: 0 0 auto; padding: var(--p-space-100) var(--p-space-100) var(--p-space-100) var(--p-space-300); border-bottom: 1px solid var(--p-color-risk-border); }
.rk-continent-panel__head > strong, .rk-continent-panel__head h2, .rk-continent-panel__head h3 { margin: 0; min-width: 0; color: var(--c, var(--p-color-risk-brass-light)); font-family: var(--p-font-family-risk); font-size: var(--p-font-size-heading-md); line-height: 1.25; }
.rk-continent-panel__close { flex: 0 0 auto; margin-left: auto; width: var(--p-space-risk-touch); height: var(--p-space-risk-touch); min-width: var(--p-space-risk-touch); padding: 0; color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-heading-lg); }
.rk-continent-panel__body { display: flex; flex-direction: column; gap: var(--p-space-200); min-height: 0; padding: var(--p-space-300); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--p-color-risk-border) transparent; }
.rk-continent-panel__body p { margin: 0; font-size: var(--p-font-size-body-sm); line-height: 1.4; }
.rk-continent-panel__body > strong { color: var(--p-color-risk-brass-light); font-size: var(--p-font-size-body-sm); line-height: 1.35; }
.rk-continent-panel__bonus { color: var(--p-color-risk-brass-light); font-weight: var(--p-font-weight-bold); }
.rk-continent-panel__progress { color: var(--p-color-risk-text-muted); font-variant-numeric: tabular-nums; }
.rk-continent-panel__territories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-space-150); padding: 0; margin: 0; list-style: none; }
.rk-continent-panel__territories > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--p-space-050) var(--p-space-150); min-width: 0; min-height: var(--p-space-800); padding: var(--p-space-150) var(--p-space-200); border-radius: var(--p-border-radius-100); background: var(--p-color-risk-panel-raised); color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); line-height: 1.25; overflow-wrap: anywhere; }
.rk-continent-panel__territories > li > span { min-width: 0; }
.rk-continent-panel__territories > li > .rk-small { grid-column: 2; font-size: .68rem; color: var(--p-color-risk-text-muted); }
.rk-continent-panel__territories > li.is-owned, .rk-continent-panel__territories > li[data-owned="true"] { background: color-mix(in srgb, var(--c, var(--p-color-bg-fill-success)) 18%, var(--p-color-risk-panel-raised)); color: var(--p-color-text); }
.rk-continent-panel__territories > li.is-owned > span:first-child { color: var(--p-color-text-success); }
.rk-continent-panel__territories > li > .rk-icon { flex: 0 0 auto; width: var(--p-space-400); height: var(--p-space-400); }
.rk-continent-panel__territories > li > button { width: 100%; min-width: 0; min-height: var(--p-space-risk-touch); padding: var(--p-space-100); text-align: left; font-size: inherit; }

@media (orientation: landscape) and (max-height: 500px) {
  .rk-command-bar { grid-template-columns: var(--p-space-1200) minmax(0, 1fr) var(--p-space-1200); gap: var(--p-space-300); padding: var(--p-space-200) var(--p-space-300); }
  .rk-command-bar .rk-command-bar__cancel, .rk-command-bar .rk-command-bar__confirm { width: var(--p-space-1200); height: var(--p-space-1200); font-size: var(--p-font-size-heading-xl); }
  .rk-command-bar .rk-command-bar__cancel.is-minimum { font-size: var(--p-font-size-body-xs); }
  .rk-command-bar__cancel .rk-icon, .rk-command-bar__confirm .rk-icon { width: var(--p-space-600); height: var(--p-space-600); }
  .rk-command-bar__cancel > small, .rk-command-bar__confirm > small { font-size: .65rem; }
  .rk-command-bar__route { font-size: var(--p-font-size-body-xs); }
  .rk-command-bar__content { gap: var(--p-space-050); }
  .rk-command-dice { gap: var(--p-space-100); }
  .rk-command-dice > button .rk-icon { width: var(--p-space-400); height: var(--p-space-400); }
  .rk-command-bar--move { --p-space-risk-wheel-size: 56px; --p-space-risk-wheel-height: 62px; --p-font-size-risk-wheel-selected: 1.7rem; }
  .rk-continent-summary { font-size: var(--p-font-size-body-xs); }
  .rk-continent-panel { max-height: calc(100% - 104px); }
  .rk-continent-panel__body { gap: var(--p-space-150); padding: var(--p-space-200) var(--p-space-300); }
  .rk-continent-panel__body p { font-size: var(--p-font-size-body-xs); }
}
@media (orientation: landscape) and (max-width: 740px) {
  .rk-command-dice { grid-template-columns: repeat(3, minmax(var(--p-space-risk-touch), 1fr)) minmax(60px, 1.2fr); }
  .rk-playing .rk-command-dice > button { font-size: var(--p-font-size-body-xs); }
  .rk-command-bar__odds { font-size: .7rem; }
  .rk-continent-panel { width: min(320px, calc(100% - var(--p-space-risk-rail) - 104px)); }
}
@media (orientation: portrait) {
  .rk-command-prompt { top: 76px; max-width: calc(100% - var(--p-space-risk-rail) - var(--p-space-600)); }
  .rk-command-bar { right: var(--p-space-risk-right); grid-template-columns: var(--p-space-1200) minmax(0, 1fr) var(--p-space-1200); gap: var(--p-space-200); padding: var(--p-space-300); }
  .rk-command-bar .rk-command-bar__cancel, .rk-command-bar .rk-command-bar__confirm { width: var(--p-space-1200); height: var(--p-space-1200); }
  .rk-command-bar__cancel .rk-icon, .rk-command-bar__confirm .rk-icon { width: var(--p-space-600); height: var(--p-space-600); }
  .rk-command-bar__route, .rk-command-bar__odds { font-size: var(--p-font-size-body-xs); }
  .rk-command-dice { grid-template-columns: repeat(3, minmax(var(--p-space-risk-touch), 1fr)); gap: var(--p-space-100); }
  .rk-command-dice > button:last-child { grid-column: 1 / -1; }
  .rk-playing .rk-command-dice > button { font-size: var(--p-font-size-body-xs); }
  .rk-command-bar--move { --p-space-risk-wheel-size: 56px; --p-space-risk-wheel-height: 66px; --p-font-size-risk-wheel-selected: 1.7rem; }
  .rk-continent-summary { top: 68px; left: var(--p-space-risk-edge); width: calc(100% - var(--p-space-risk-rail) - var(--p-space-600)); max-width: none; padding-inline: var(--p-space-300); border-radius: var(--p-border-radius-200); font-size: var(--p-font-size-body-xs); }
  .rk-continent-panel { left: var(--p-space-risk-edge); width: calc(100% - var(--p-space-600)); max-height: min(38dvh, 360px); }
}

/* A command menu with compact illustrated tiles fits a landscape phone.
   Extremely short windows can scroll inside it, never through to the board. */
.rk-playing .modal-backdrop { overscroll-behavior: contain; }
.rk-playing .modal-backdrop:has(.rk-game-menu) { padding: var(--p-space-300); overflow: hidden; touch-action: none; }
.rk-playing .rk-game-menu {
  width: min(960px, 100%);
  max-width: none;
  max-height: calc(100dvh - var(--p-space-600));
  padding: var(--p-space-400);
  display: flex;
  flex-direction: column;
  gap: var(--p-space-300);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  border-color: var(--p-color-risk-border);
  background: var(--p-color-risk-panel);
}
.rk-game-menu__head { display: flex; align-items: center; gap: var(--p-space-300); flex-shrink: 0; }
.rk-game-menu__head > div { flex: 1; min-width: 0; }
.rk-game-menu__head h2 { margin: 0 0 var(--p-space-050); font-family: var(--p-font-family-risk); color: var(--p-color-risk-brass-light); font-size: var(--p-font-size-heading-lg); }
.rk-game-menu__head span { font-size: var(--p-font-size-body-xs); color: var(--p-color-risk-text-muted); }
.rk-game-menu__head > .btn { width: var(--p-space-risk-touch); flex-shrink: 0; font-size: var(--p-font-size-heading-lg); padding: 0; }
.rk-game-menu__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--p-space-200); }
.rk-game-menu .rk-menu-tile { display: flex; justify-content: flex-start; align-items: center; gap: var(--p-space-300); min-width: 0; padding: var(--p-space-400) var(--p-space-300); min-height: 96px; text-align: left; border: 1px solid var(--p-color-risk-border); border-radius: var(--p-border-radius-200); background: var(--p-color-risk-panel-raised); color: var(--p-color-text); white-space: normal; }
.rk-game-menu .rk-menu-tile:hover { background: color-mix(in srgb, var(--p-color-risk-brass) 12%, var(--p-color-risk-panel-raised)); border-color: var(--p-color-risk-brass); }
.rk-game-menu a.rk-menu-tile { text-decoration: none; }
.rk-menu-tile > .rk-icon { flex: 0 0 auto; color: var(--p-color-risk-brass-light); }
.rk-menu-tile > span { display: flex; flex-direction: column; gap: var(--p-space-100); min-width: 0; }
.rk-menu-tile b { font-size: var(--p-font-size-body-sm); line-height: 1.25; }
.rk-menu-tile small { color: var(--p-color-risk-text-muted); font-size: var(--p-font-size-body-xs); font-weight: var(--p-font-weight-regular); line-height: 1.25; }
.rk-menu-tile--critical > .rk-icon { color: var(--p-color-text-critical); }
.rk-game-menu__rules { margin: 0; font-size: var(--p-font-size-body-xs); line-height: 1.4; color: var(--p-color-risk-text-muted); }
@media (max-width: 900px) {
  .rk-game-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-game-menu .rk-menu-tile { min-height: 70px; padding: var(--p-space-200); gap: var(--p-space-200); }
  .rk-menu-tile > .rk-icon { width: var(--p-space-800); height: var(--p-space-800); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .rk-playing .rk-game-menu { padding: var(--p-space-300); gap: var(--p-space-200); }
  .rk-game-menu__head > .team-emblem { width: var(--p-space-1000) !important; height: var(--p-space-1000) !important; }
  .rk-game-menu .rk-menu-tile { min-height: 64px; }
  .rk-menu-tile small { font-size: .68rem; }
  .rk-deploy-bar { --p-space-risk-wheel-size: 56px; --p-space-risk-wheel-height: 62px; --p-font-size-risk-wheel-selected: 1.7rem; grid-template-columns: var(--p-space-1200) minmax(0, 1fr) var(--p-space-1200); padding: var(--p-space-200) var(--p-space-300); gap: var(--p-space-400); }
  .rk-deploy-bar .btn { width: var(--p-space-1200); height: var(--p-space-1200); font-size: 2rem; }
  .rk-deploy-bar__destination { font-size: var(--p-font-size-body-xs); line-height: 1.3; }
}
@media (orientation: portrait) {
  .rk-deploy-prompt { top: 76px; max-width: calc(100% - var(--p-space-risk-rail) - var(--p-space-600)); }
  .rk-deploy-bar { right: var(--p-space-risk-right); grid-template-columns: var(--p-space-1200) minmax(0, 1fr) var(--p-space-1200); gap: var(--p-space-300); padding: var(--p-space-300); }
  .rk-deploy-bar .btn { width: var(--p-space-1200); height: var(--p-space-1200); }
  .rk-deploy-bar__destination { font-size: var(--p-font-size-body-xs); }
  .rk-game-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-game-menu .rk-menu-tile { flex-direction: column; align-items: flex-start; padding: var(--p-space-300); }
}

@keyframes rk-mobile-sheet-in { from { opacity: 0; transform: translateY(var(--p-space-200)); } to { opacity: 1; transform: translateY(0); } }
@keyframes rk-mobile-turn {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + var(--p-space-300))) scale(.95); }
  12%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--p-space-200))) scale(1); }
}

@media (orientation: landscape) and (max-height: 500px) {
  body.rk-playing { --p-space-risk-rail: 128px; --p-space-risk-dock: 96px; }
  .rk-player-rail { gap: var(--p-space-150); max-height: calc(100% - var(--p-space-400)); }
  .rk-seat { min-height: 54px; }
  .rk-seat__avatar { width: var(--p-space-800); height: var(--p-space-800); }
  .rk-dock { gap: var(--p-space-050) var(--p-space-200); padding: var(--p-space-150) var(--p-space-200); }
  .rk-phase-step { padding-block: var(--p-space-050); }
  .rk-dock__hint { font-size: var(--p-font-size-body-xs); }
  .rk-dock__action { min-width: 116px; padding-inline: var(--p-space-300); font-size: var(--p-font-size-body-sm); }
  .rk-playing .rk-sheet { padding: var(--p-space-200) var(--p-space-300); }
  .rk-playing .rk-sheet__title { font-size: var(--p-font-size-body-md); }
  .rk-playing .rk-sheet .rk-small { font-size: var(--p-font-size-body-xs); }
  .rk-playing .rk-sheet > div { gap: var(--p-space-150); }
  .rk-playing .rk-sheet__body > div { gap: var(--p-space-150); }
  .rk-playing .rk-sheet .rk-odds__big { font-size: var(--p-font-size-heading-lg); }
  .rk-playing .rk-amount { gap: var(--p-space-150); }
  .rk-playing .rk-amount > .btn--primary { display: none; }
  .rk-playing .rk-amount .rk-transfer { padding: var(--p-space-150) var(--p-space-200); }
  .rk-playing .rk-amount .rk-transfer > div > span { display: none; }
  .rk-playing .rk-amount .rk-transfer > div { gap: var(--p-space-050); }
  .rk-playing .rk-amount .rk-transfer b, .rk-playing .rk-amount .rk-transfer strong { font-size: var(--p-font-size-body-xs); line-height: 1.25; }
  .rk-playing .rk-amount > .btn--plain { padding-block: var(--p-space-100); }
  .rk-panel__body { padding: var(--p-space-300); }
  .rk-turn-announcement { padding: var(--p-space-300) var(--p-space-600); }
  .rk-turn-announcement > svg, .rk-turn-announcement > img { width: var(--p-space-1000); height: var(--p-space-1000); }
  .rk-battle-announcement { top: max(var(--p-space-200), env(safe-area-inset-top)); left: calc((100% + 232px - var(--p-space-risk-rail)) / 2); max-width: calc(100% - 272px - var(--p-space-risk-rail)); font-size: var(--p-font-size-body-xs); padding-inline: var(--p-space-300); }
}

@media (orientation: landscape) and (max-width: 740px) {
  body.rk-playing { --p-space-risk-rail: 114px; }
  .rk-seat { gap: var(--p-space-100); padding: var(--p-space-100); }
  .rk-seat.is-current { padding: calc(var(--p-space-100) - 1px); }
  .rk-seat__avatar { width: 28px; height: 28px; }
  .rk-seat__stats { gap: var(--p-space-050) var(--p-space-100); }
  .rk-dock__turn { max-width: 94px; }
  .rk-phase-step { gap: var(--p-space-050); padding-inline: var(--p-space-100); font-size: .68rem; }
  .rk-dock__action { min-width: 108px; }
}

/* Keep the top of North America tappable even on the widest phone screens. */
@media (orientation: landscape) {
  .rk-map-tools { flex-direction: column; }
  .rk-battle-announcement { left: 50%; max-width: calc(100% - 300px); }
  .rk-dock__reset { white-space: nowrap; }
  .rk-player-rail:has(.rk-seat:nth-child(5)) { max-height: calc(100% - var(--p-space-1600)); gap: var(--p-space-100); }
  .rk-player-rail:has(.rk-seat:nth-child(5)) .rk-seat { min-height: 44px; }
  .rk-player-rail:has(.rk-seat:nth-child(5)) .rk-seat__avatar { width: 28px; height: 28px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .rk-player-rail:has(.rk-seat:nth-child(5)) .rk-seat {
    height: 46px; min-height: 46px; gap: var(--p-space-100); padding: var(--p-space-100);
  }
  .rk-player-rail:has(.rk-seat:nth-child(5)) .rk-seat__avatar { width: 24px; height: 24px; }
  .rk-seat__avatar .team-emblem { width: 100% !important; height: 100% !important; min-width: 0 !important; }
  .rk-player-rail:has(.rk-seat:nth-child(5)) .rk-seat__stats {
    flex-wrap: nowrap; margin-top: var(--p-space-100); font-size: 10px;
  }
}

@media (orientation: portrait) {
  body.rk-playing { --p-space-risk-rail: 86px; --p-space-risk-dock: 128px; }
  .rk-map-tools { gap: var(--p-space-100); }
  .rk-player-rail { top: 50%; max-height: calc(100% - 240px); gap: var(--p-space-200); }
  .rk-seat { flex-direction: column; gap: var(--p-space-100); min-height: 88px; padding: var(--p-space-150) var(--p-space-100); text-align: center; }
  .rk-seat.is-current { padding: calc(var(--p-space-150) - 1px) calc(var(--p-space-100) - 1px); }
  .rk-seat__avatar { width: var(--p-space-800); height: var(--p-space-800); }
  .rk-seat__details, .rk-seat > div:not(.rk-seat__avatar) { width: 100%; }
  .rk-seat__stats { justify-content: center; margin-top: var(--p-space-050); gap: var(--p-space-050) var(--p-space-100); }
  .rk-seat__name { font-size: .7rem; }
  .rk-seat__stats { font-size: .7rem; }
  .rk-dock { left: 50%; width: calc(100% - var(--p-space-600)); gap: var(--p-space-150); }
  .rk-dock__status { flex-wrap: wrap; gap: var(--p-space-100); }
  .rk-dock__turn { flex: 1; text-align: right; }
  .rk-dock__hint { font-size: var(--p-font-size-body-xs); }
  .rk-dock__action { min-width: 112px; padding-inline: var(--p-space-300); font-size: var(--p-font-size-body-sm); }
  .rk-dock:has(.rk-dock__reset:not([hidden])) { grid-template-columns: auto minmax(0, 1fr); }
  .rk-dock:has(.rk-dock__reset:not([hidden])) .rk-dock__hint { grid-column: 1 / -1; }
  .rk-dock:has(.rk-dock__reset:not([hidden])) .rk-dock__action { max-width: none; }
  .rk-phase-step { padding-inline: var(--p-space-100); font-size: .68rem; }
  .rk-playing .rk-sheet { width: calc(100% - var(--p-space-risk-rail) - var(--p-space-1000)); min-width: 0; max-height: calc(100% - var(--p-space-risk-dock) - 100px); }
  .rk-playing .rk-sheet .rk-dicebtns { grid-template-columns: 1fr; }
  .rk-playing .rk-sheet .rk-dicebtn { flex-direction: row; justify-content: space-between; padding-inline: var(--p-space-300); }
  .rk-playing .rk-sheet .rk-dicebtn small { font-size: var(--p-font-size-body-xs); }
  .rk-playing .rk-sheet .rk-step { grid-template-columns: 1fr auto auto; }
  .rk-playing .rk-sheet .rk-step__name { grid-column: 1 / -1; }
  .rk-playing .rk-sheet .rk-sheet__title { font-size: var(--p-font-size-body-md); }
  .rk-playing .rk-sheet .rk-chip__name { max-width: 8em; }
  .rk-panel { right: var(--p-space-300); }
  .rk-battle-announcement { top: calc(max(var(--p-space-200), env(safe-area-inset-top)) + 52px); max-width: calc(100% - var(--p-space-risk-rail) - var(--p-space-600)); border-radius: var(--p-border-radius-200); }
  .rk-turn-announcement { padding: var(--p-space-400); }
  .rk-turn-announcement > svg, .rk-turn-announcement > img { width: var(--p-space-1000); height: var(--p-space-1000); }
  .rk-turn-announcement strong, .rk-turn-announcement__title { font-size: var(--p-font-size-heading-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .rk-turn-announcement { animation: none; }
  .rk-playing .rk-sheet { animation: none; }
}