:root {
  --bg: #f1eadb;
  --panel: rgba(255, 252, 245, 0.82);
  --line: rgba(59, 41, 18, 0.14);
  --text: #2f2415;
  --muted: #6c5c47;
  --accent: #9a4f3a;
  --accent-strong: #7e3824;
  --shadow: 0 18px 42px rgba(66, 44, 21, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Vazirmatn, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(207, 170, 117, 0.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(132, 89, 65, 0.14), transparent 32%),
    var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, select {
  font: inherit;
}
button {
  border: 0;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  background: var(--accent);
  color: #fff8f2;
  cursor: pointer;
}
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.72rem 0.85rem;
  background: rgba(255,255,255,0.84);
}
form {
  display: grid;
  gap: 0.7rem;
}
.risk-home-shell, .risk-rules-shell, .risk-room-topbar, .risk-room-shell {
  width: min(1380px, calc(100vw - 2rem));
  margin: 0 auto;
}
.risk-home-body, .risk-rules-body, .risk-room-body {
  min-height: 100vh;
  padding: 1rem 0 2rem;
}
.risk-home-header, .risk-room-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.risk-back-link, .risk-help-link {
  color: var(--muted);
}
.risk-home-header h1, .risk-room-topbar h1 {
  margin: 0.35rem 0 0.45rem;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
}
.risk-home-header p, .risk-room-topbar p {
  margin: 0;
  color: var(--muted);
}
.risk-lobby-grid, .risk-rules-grid, .risk-actions-grid, .risk-owned-grid {
  display: grid;
  gap: 1rem;
}
.risk-lobby-grid, .risk-rules-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.risk-room-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(300px, 0.95fr);
  gap: 1rem;
}
.risk-main-column, .risk-side-column, .risk-player-list {
  display: grid;
  gap: 1rem;
}
.risk-actions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.risk-owned-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.risk-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1rem;
  backdrop-filter: blur(12px);
}
.risk-panel h2, .risk-panel h3 {
  margin: 0 0 0.75rem;
}
.risk-rules-notes ul,
.risk-rule-step ul {
  margin: 0;
  padding-inline-start: 1.4rem;
}
.risk-rules-notes li,
.risk-rule-step li {
  margin: 0.38rem 0;
}
.risk-rule-step {
  position: relative;
  overflow: hidden;
}
.risk-rule-number {
  position: absolute;
  inset-inline-end: 1rem;
  top: 0.9rem;
  display: inline-flex;
  width: 2.1rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(154, 79, 58, 0.13);
  color: var(--accent-strong);
  font-weight: 800;
}
.risk-rule-step h2 {
  padding-inline-end: 2.8rem;
}
.risk-rule-step p,
.risk-tactics-guide p,
.risk-rules-notes li {
  line-height: 1.85;
}
.risk-tactics-guide {
  margin-top: 1rem;
}
.risk-tactic-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.risk-tactic-guide-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.54);
}
.risk-tactic-guide-grid h3 {
  color: var(--accent-strong);
}
.risk-tactic-guide-grid p {
  margin: 0.45rem 0;
}
.risk-continent-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.risk-guide-card {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}
.risk-guide-card img {
  display: block;
  width: 100%;
  border-radius: 12px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(66,44,21,0.18));
}
.risk-guide-card h3 {
  margin: 0 0 0.35rem;
}
.continent-guide-card {
  border: 1px solid color-mix(in srgb, var(--continent-theme) 26%, rgba(59, 41, 18, 0.14));
  border-radius: 18px;
  padding: 0.65rem;
  background: color-mix(in srgb, var(--continent-theme) 8%, rgba(255, 255, 255, 0.54));
}
.tactic-guide-card {
  grid-template-columns: 5.2rem minmax(0, 1fr);
}
.tactic-guide-card img {
  border-radius: 10px;
}
.risk-rules-notes {
  margin-top: 1rem;
}
.risk-messages {
  width: min(1380px, calc(100vw - 2rem));
  margin: 0 auto 1rem;
}
.risk-message, .risk-live-error {
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: rgba(170, 73, 49, 0.12);
  color: #7e2d1f;
}
.risk-live-error {
  width: min(1380px, calc(100vw - 2rem));
  margin: 0 auto 1rem;
}
.risk-battle-summary, .risk-dice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.risk-battle-panel {
  overflow: hidden;
}
.risk-battle-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}
.risk-battle-side-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 0.55rem;
  min-height: 286px;
  border: 1px solid color-mix(in srgb, var(--continent-theme) 30%, rgba(59, 41, 18, 0.16));
  border-radius: 22px;
  padding: 0.85rem;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--continent-theme) 20%, transparent), transparent 9rem),
    linear-gradient(145deg, rgba(255,255,255,0.72), color-mix(in srgb, var(--continent-theme) 10%, rgba(255,255,255,0.58)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 18px 38px rgba(66, 44, 21, 0.12);
}
.risk-battle-side-card.attack {
  border-color: rgba(154, 79, 58, 0.24);
}
.risk-battle-side-card.defense {
  border-color: rgba(44, 104, 104, 0.22);
}
.risk-battle-side-card header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
.risk-battle-side-card header span {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 900;
}
.risk-battle-side-card header strong {
  font-size: 1.2rem;
}
.risk-battle-card-cluster {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-inline-start: 2.45rem;
}
.risk-battle-continent-card,
.risk-battle-troop-card {
  position: relative;
  flex: 0 0 auto;
}
.risk-battle-continent-card {
  width: min(100%, 11.5rem);
}
.risk-battle-troop-card {
  width: 6.15rem;
  margin-right: -2.55rem;
  margin-bottom: 0.28rem;
  transform: rotate(-5deg);
}
.risk-battle-continent-card img,
.risk-battle-troop-card img {
  display: block;
  width: 100%;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 18px 36px rgba(66, 44, 21, 0.22);
}
.risk-battle-troop-card img {
  border-radius: 8px;
}
.risk-battle-troop-card.is-empty img {
  filter: grayscale(1) saturate(0.2) brightness(0.75);
  opacity: 0.58;
}
.risk-battle-card-count,
.risk-battle-troop-count {
  position: absolute;
  z-index: 2;
  display: inline-grid;
  min-width: 2.1rem;
  min-height: 2.1rem;
  place-items: center;
  border: 2px solid #2f2415;
  border-radius: 999px;
  padding: 0.14rem 0.34rem;
  color: #2f2415;
  font-size: 0.78rem;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(47,36,21,0.28), 0 10px 18px rgba(66,44,21,0.16);
  white-space: nowrap;
}
.risk-battle-card-count {
  right: -0.4rem;
  top: -0.38rem;
  background: #fff8e8;
}
.risk-battle-troop-count {
  left: -0.32rem;
  bottom: -0.28rem;
  background: #d6efe5;
}
.risk-battle-side-card footer {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}
.risk-battle-contributors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.risk-battle-contributors b {
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  background: rgba(255,255,255,0.72);
  color: var(--text);
  font-size: 0.76rem;
}
.risk-battle-versus {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.45rem;
  color: var(--muted);
  text-align: center;
}
.risk-battle-versus b {
  display: grid;
  width: 3.7rem;
  height: 3.7rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(154, 79, 58, 0.12);
  color: var(--accent-strong);
  font-size: 1.22rem;
  box-shadow: inset 0 0 0 1px rgba(154, 79, 58, 0.16);
}
.risk-battle-versus span {
  font-size: 0.82rem;
}
.risk-player-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.85rem;
  background: rgba(255,255,255,0.6);
}
.risk-player-card.is-current {
  outline: 2px solid rgba(154, 79, 58, 0.25);
}
.risk-player-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}
.risk-card-strip, .risk-tactic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.risk-card-token, .risk-tactic-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.78);
}
.risk-card-token.continent, .risk-continent-stack {
  border-color: color-mix(in srgb, var(--continent-theme) 32%, #fff);
}
.risk-continent-stack {
  border: 1px solid color-mix(in srgb, var(--continent-theme) 25%, rgba(59, 41, 18, 0.1));
  border-radius: 18px;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--continent-theme) 9%, rgba(255,255,255,0.82));
}
.risk-continent-stack.compact {
  padding: 0.55rem;
}
.risk-spy-box {
  margin-top: 0.8rem;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  background: rgba(89, 117, 135, 0.12);
}
.risk-spy-box form {
  margin-top: 0.65rem;
}
.risk-inline-help {
  color: var(--muted);
  font-size: 0.92rem;
}
.risk-join-overlay {
  width: min(460px, calc(100vw - 2rem));
  margin: 0 auto 1rem;
}

@media (max-width: 980px) {
  .risk-room-shell,
  .risk-lobby-grid,
  .risk-rules-grid,
  .risk-tactic-guide-grid,
  .risk-continent-guide-grid,
  .risk-actions-grid,
  .risk-owned-grid,
  .risk-battle-summary,
  .risk-dice-grid,
  .risk-battle-visual {
    grid-template-columns: minmax(0, 1fr);
  }
  .risk-battle-side-card {
    min-height: 248px;
  }
  .risk-battle-versus {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: center;
  }
  .risk-home-shell, .risk-rules-shell, .risk-room-topbar, .risk-room-shell, .risk-messages, .risk-live-error {
    width: min(100vw - 1rem, 100%);
  }
  .risk-home-body, .risk-rules-body, .risk-room-body {
    padding: 0.5rem 0 1rem;
  }
  .risk-home-header, .risk-room-topbar {
    flex-direction: column;
  }
  .risk-guide-card,
  .tactic-guide-card {
    grid-template-columns: 5.3rem minmax(0, 1fr);
  }
}

.risk-design-gallery-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 12%, rgba(151, 77, 43, 0.18), transparent 26rem),
    radial-gradient(circle at 90% 18%, rgba(40, 73, 96, 0.14), transparent 24rem),
    #f0e6d3;
}
.risk-design-gallery-shell {
  width: min(1720px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1.2rem 0 2rem;
}
.risk-design-gallery-header {
  margin-bottom: 1rem;
}
.risk-design-gallery-header h1 {
  margin: 0.35rem 0;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
}
.risk-design-gallery-header p {
  margin: 0;
  color: var(--muted);
}
.risk-design-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.risk-design-gallery-card {
  min-width: 0;
  border: 1px solid rgba(67, 44, 22, 0.16);
  border-radius: 28px;
  padding: 1rem;
  background: rgba(255, 251, 241, 0.74);
  box-shadow: 0 24px 70px rgba(58, 37, 16, 0.14);
  backdrop-filter: blur(14px);
}
.risk-design-gallery-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}
.risk-design-gallery-card a {
  color: var(--accent-strong);
  font-weight: 800;
}
.risk-design-gallery-card h2 {
  margin: 0.6rem 0 0.25rem;
}
.risk-design-gallery-card p {
  min-height: 2.8rem;
  margin: 0 0 0.8rem;
  color: var(--muted);
}
.risk-design-gallery-card iframe {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 22px;
  background: #201812;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.gallery-concept-mini {
  position: relative;
  display: block;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.gallery-concept-mini * {
  position: absolute;
}
.gallery-concept-mini.mini-1 {
  background:
    radial-gradient(ellipse at center, #124432 0 42%, #6b371d 43% 60%, #2b160d 61%),
    #24150e;
}
.mini-table-surface {
  inset: 28% 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 234, 190, 0.2);
}
.mini-1 b {
  inset: 38% 33% auto;
  border-radius: 22px;
  padding: 2rem 1rem;
  background: #f5e7c4;
  color: #28180e;
  text-align: center;
  font-size: 1.5rem;
}
.mini-1 i {
  width: 78px;
  height: 108px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.24);
}
.mini-1 i:nth-of-type(1) { top: 28%; right: 17%; transform: rotate(8deg); }
.mini-1 i:nth-of-type(2) { bottom: 17%; left: 22%; transform: rotate(-10deg); }
.mini-1 i:nth-of-type(3) { top: 24%; left: 24%; transform: rotate(-5deg); }
.gallery-concept-mini.mini-2 {
  display: grid;
  grid-template-columns: 24% 1fr 28%;
  gap: 0.6rem;
  padding: 0.8rem;
  background:
    linear-gradient(90deg, rgba(88,255,221,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(88,255,221,0.08) 1px, transparent 1px),
    #061016;
  background-size: 24px 24px;
}
.mini-command-side,
.mini-command-center,
.mini-command-intel {
  position: static;
  border-radius: 20px;
  border: 1px solid rgba(88,255,221,0.22);
  background: rgba(88,255,221,0.07);
}
.mini-command-center:after {
  content: "DRAW 02";
  position: absolute;
  inset: 42% 30%;
  color: #58ffdd;
  font-weight: 900;
  font-size: 1.35rem;
}
.gallery-concept-mini.mini-3 {
  background:
    repeating-linear-gradient(0deg, rgba(67,42,18,0.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(67,42,18,0.06) 0 1px, transparent 1px 24px),
    #ead7aa;
}
.mini-3 svg {
  inset: 8% 5%;
  width: 90%;
  height: 68%;
}
.mini-3 path {
  fill: none;
  stroke: rgba(55,83,66,0.44);
  stroke-width: 13;
  stroke-linecap: round;
}
.mini-3 circle {
  fill: rgba(72,112,83,0.2);
  stroke: rgba(54,95,73,0.62);
  stroke-width: 4;
}
.mini-3 b {
  right: 8%;
  bottom: 9%;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  background: #365f49;
  color: #fff7e6;
}
.gallery-concept-mini.mini-4 {
  background:
    radial-gradient(circle at 24% 24%, rgba(255,90,95,0.46), transparent 12rem),
    radial-gradient(circle at 82% 18%, rgba(255,202,58,0.34), transparent 12rem),
    #110d17;
}
.mini-cinema-copy {
  right: 7%;
  top: 18%;
  width: 36%;
  height: 54%;
  border-radius: 26px;
  background: linear-gradient(transparent 0 18%, rgba(255,255,255,0.12) 18% 30%, transparent 30% 42%, rgba(255,255,255,0.18) 42% 70%, transparent 70%);
}
.mini-4 i {
  width: 110px;
  height: 160px;
  border-radius: 22px;
  box-shadow: 0 28px 60px rgba(0,0,0,0.34);
}
.mini-4 i:nth-of-type(1) { left: 23%; top: 15%; background: linear-gradient(145deg, #ffca3a, #ff795d); transform: rotate(7deg); }
.mini-4 i:nth-of-type(2) { left: 39%; top: 28%; background: linear-gradient(145deg, #8ad7ff, #5fffda); transform: rotate(-12deg); }
.mini-4 i:nth-of-type(3) { left: 7%; top: 34%; background: linear-gradient(145deg, #f8f0d6, #d696ff); transform: rotate(14deg); }

.risk-design-body {
  min-height: 100vh;
  overflow: hidden auto;
}
.risk-design-board {
  width: min(1440px, calc(100vw - 2rem));
  min-height: calc(100vh - 2rem);
  margin: 0 auto;
  padding: 1rem 0;
}
.risk-design-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.risk-design-top h1 {
  margin: 0.25rem 0 0.2rem;
  font-size: clamp(1.7rem, 3.8vw, 4rem);
  line-height: 1.05;
}
.risk-design-top p {
  margin: 0;
}
.risk-design-back {
  font-size: 0.9rem;
  opacity: 0.72;
}
.risk-design-turn-badge {
  display: grid;
  justify-items: center;
  min-width: 8.5rem;
  border-radius: 999px;
  padding: 0.7rem 1rem;
}
.risk-design-turn-badge span {
  font-size: 0.75rem;
}
.risk-design-turn-badge strong {
  font-size: 1.25rem;
}
.risk-design-stage {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 330px;
  gap: 1rem;
  align-items: stretch;
}
.risk-design-score,
.risk-design-action,
.risk-design-hand,
.risk-design-bottom article {
  position: relative;
  overflow: hidden;
}
.risk-design-score h2,
.risk-design-hand h2,
.risk-design-bottom h2,
.risk-design-action h2 {
  margin: 0 0 0.8rem;
}
.risk-design-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.65rem;
  padding: 0.75rem;
}
.risk-design-player div {
  display: grid;
  gap: 0.25rem;
}
.risk-design-player span {
  font-size: 0.82rem;
  opacity: 0.76;
}
.risk-design-player b {
  white-space: nowrap;
}
.risk-design-action {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(1rem, 4vw, 4rem);
}
.risk-design-action h2 {
  font-size: clamp(2.4rem, 5.4vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.risk-design-action p {
  max-width: 40rem;
  margin: 0 auto 1rem;
}
.risk-design-kicker {
  font-weight: 900;
}
.risk-design-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.risk-design-actions button {
  min-width: 9.5rem;
}
.risk-design-hand {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.risk-design-hand h3 {
  margin: 0 0 0.55rem;
}
.risk-design-continent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.risk-design-continent-grid article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 18px;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--continent-theme) 18%, rgba(255,255,255,0.7));
  border: 1px solid color-mix(in srgb, var(--continent-theme) 34%, rgba(255,255,255,0.3));
}
.risk-design-continent-grid strong {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
}
.risk-design-tactics,
.risk-design-surrendered {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.risk-design-tactics span,
.risk-design-surrendered span {
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
}
.risk-design-surrendered span {
  background: color-mix(in srgb, var(--continent-theme) 18%, rgba(255,255,255,0.72));
}
.risk-design-bottom {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1rem;
  margin-top: 1rem;
}

.risk-design-v1 {
  background:
    radial-gradient(circle at 50% 8%, rgba(236, 180, 93, 0.25), transparent 28rem),
    repeating-linear-gradient(35deg, rgba(69, 43, 23, 0.04) 0 2px, transparent 2px 22px),
    #2b1c12;
  color: #fff0d8;
}
.risk-design-v1 .risk-design-score,
.risk-design-v1 .risk-design-action,
.risk-design-v1 .risk-design-hand,
.risk-design-v1 .risk-design-bottom article {
  border: 1px solid rgba(255, 213, 146, 0.18);
  border-radius: 30px;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(94, 54, 27, 0.82), rgba(45, 28, 18, 0.88));
  box-shadow: 0 30px 90px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
}
.risk-design-v1 .risk-design-action {
  background:
    radial-gradient(circle at 50% 48%, rgba(229, 151, 54, 0.36), transparent 15rem),
    linear-gradient(145deg, rgba(120, 67, 33, 0.9), rgba(39, 25, 17, 0.94));
}
.risk-design-v1 .risk-design-action:before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px dashed rgba(255, 223, 166, 0.18);
  border-radius: 26px;
}
.risk-design-v1 .risk-design-player,
.risk-design-v1 .risk-design-tactics span {
  border-radius: 18px;
  background: rgba(255, 236, 197, 0.1);
}
.risk-design-v1 .risk-design-player.is-current {
  outline: 2px solid #f0b35b;
}
.risk-design-v1 button,
.risk-design-v1 .risk-design-turn-badge {
  background: linear-gradient(135deg, #c76d31, #f0b35b);
  color: #27170e;
  box-shadow: 0 16px 35px rgba(226, 134, 58, 0.28);
}

.risk-design-v2 {
  background:
    linear-gradient(90deg, rgba(65, 224, 191, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(65, 224, 191, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(36, 130, 168, 0.34), transparent 24rem),
    #071116;
  background-size: 34px 34px, 34px 34px, auto, auto;
  color: #d8fff8;
}
.risk-design-v2 .risk-design-score,
.risk-design-v2 .risk-design-action,
.risk-design-v2 .risk-design-hand,
.risk-design-v2 .risk-design-bottom article {
  border: 1px solid rgba(87, 255, 218, 0.18);
  border-radius: 22px;
  padding: 1rem;
  background: rgba(7, 20, 27, 0.78);
  box-shadow: 0 0 0 1px rgba(91, 254, 216, 0.04), 0 24px 80px rgba(0,0,0,0.34);
  backdrop-filter: blur(18px);
}
.risk-design-v2 .risk-design-action h2 {
  text-shadow: 0 0 30px rgba(75, 255, 216, 0.22);
}
.risk-design-v2 .risk-design-player,
.risk-design-v2 .risk-design-tactics span {
  border: 1px solid rgba(86, 255, 218, 0.12);
  border-radius: 14px;
  background: rgba(65, 224, 191, 0.07);
}
.risk-design-v2 .risk-design-player.is-current {
  background: rgba(65, 224, 191, 0.16);
}
.risk-design-v2 button,
.risk-design-v2 .risk-design-turn-badge {
  background: #55ffd8;
  color: #061215;
  box-shadow: 0 0 32px rgba(85, 255, 216, 0.28);
}

.risk-design-v3 {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 222, 139, 0.32), transparent 20rem),
    linear-gradient(135deg, rgba(49, 83, 63, 0.14), transparent 50%),
    #e8d6ab;
  color: #302213;
}
.risk-design-v3 .risk-design-score,
.risk-design-v3 .risk-design-action,
.risk-design-v3 .risk-design-hand,
.risk-design-v3 .risk-design-bottom article {
  border: 1px solid rgba(73, 48, 23, 0.18);
  border-radius: 12px 32px 12px 32px;
  padding: 1rem;
  background:
    linear-gradient(rgba(255,255,255,0.52), rgba(255,255,255,0.52)),
    repeating-linear-gradient(0deg, rgba(91, 60, 29, 0.08) 0 1px, transparent 1px 18px);
  box-shadow: 0 22px 55px rgba(71, 44, 19, 0.14);
}
.risk-design-v3 .risk-design-action {
  background:
    radial-gradient(circle at 30% 30%, rgba(90, 130, 87, 0.26), transparent 9rem),
    radial-gradient(circle at 70% 60%, rgba(176, 92, 65, 0.24), transparent 11rem),
    rgba(255, 246, 222, 0.78);
}
.risk-design-v3 .risk-design-action:after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid rgba(76, 51, 24, 0.14);
  transform: rotate(-12deg);
}
.risk-design-v3 .risk-design-player,
.risk-design-v3 .risk-design-tactics span {
  border-radius: 999px;
  background: rgba(77, 112, 72, 0.12);
}
.risk-design-v3 .risk-design-player.is-current {
  outline: 2px solid #a34d35;
}
.risk-design-v3 button,
.risk-design-v3 .risk-design-turn-badge {
  background: #3f6f56;
  color: #fff8e8;
}

.risk-design-v4 {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 89, 94, 0.34), transparent 24rem),
    radial-gradient(circle at 80% 18%, rgba(255, 202, 58, 0.24), transparent 20rem),
    radial-gradient(circle at 60% 85%, rgba(25, 130, 196, 0.25), transparent 22rem),
    #100d16;
  color: #fff8ef;
}
.risk-design-v4 .risk-design-stage {
  grid-template-columns: 250px minmax(0, 1fr) 280px;
}
.risk-design-v4 .risk-design-score,
.risk-design-v4 .risk-design-action,
.risk-design-v4 .risk-design-hand,
.risk-design-v4 .risk-design-bottom article {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 36px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 100px rgba(0,0,0,0.34);
  backdrop-filter: blur(24px);
}
.risk-design-v4 .risk-design-action {
  min-height: 560px;
  background:
    linear-gradient(145deg, rgba(255, 89, 94, 0.24), rgba(25, 130, 196, 0.2)),
    rgba(255,255,255,0.08);
}
.risk-design-v4 .risk-design-action h2 {
  font-size: clamp(3rem, 7vw, 7.5rem);
}
.risk-design-v4 .risk-design-player,
.risk-design-v4 .risk-design-tactics span {
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
}
.risk-design-v4 .risk-design-player.is-current {
  box-shadow: inset 0 0 0 2px rgba(255, 202, 58, 0.7);
}
.risk-design-v4 button,
.risk-design-v4 .risk-design-turn-badge {
  background: linear-gradient(135deg, #ffca3a, #ff595e);
  color: #180d11;
}

.risk-design-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}
.risk-design-orbit span {
  position: absolute;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.22;
}
.risk-design-orbit span:nth-child(1) {
  width: 19rem;
  height: 19rem;
  top: 10%;
  left: 12%;
}
.risk-design-orbit span:nth-child(2) {
  width: 11rem;
  height: 11rem;
  right: 10%;
  bottom: 16%;
}
.risk-design-orbit span:nth-child(3) {
  width: 6rem;
  height: 6rem;
  right: 22%;
  top: 18%;
}

@media (max-width: 1200px) {
  .risk-design-stage,
  .risk-design-v4 .risk-design-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .risk-design-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .risk-design-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.risk-concept-body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden auto;
}
.risk-concept-body button {
  transform: translateZ(0);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.risk-concept-body button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.concept-table {
  min-height: 100vh;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 34%, rgba(245, 174, 72, 0.24), transparent 28rem),
    linear-gradient(115deg, rgba(72, 39, 20, 0.25), transparent 45%),
    #24150e;
  color: #ffe9c7;
}
.concept-table-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(1280px, 100%);
  margin: 0 auto 0.8rem;
}
.concept-table-top div {
  text-align: center;
}
.concept-table-top h1 {
  margin: 0.15rem 0 0;
  font-size: clamp(2rem, 4vw, 4.4rem);
}
.concept-table-top a {
  opacity: 0.75;
}
.concept-table-top strong {
  justify-self: end;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 219, 159, 0.12);
}
.war-table {
  position: relative;
  width: min(1180px, 100%);
  height: min(68vh, 660px);
  min-height: 520px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(29, 86, 63, 0.94), rgba(18, 54, 42, 0.96) 58%, rgba(99, 53, 27, 0.98) 59%, rgba(54, 31, 19, 1) 76%);
  box-shadow: 0 42px 100px rgba(0,0,0,0.45), inset 0 0 0 18px rgba(255, 217, 151, 0.08);
}
.felt-ring {
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(255, 230, 184, 0.18);
  border-radius: 50%;
}
.deck-card {
  position: absolute;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  width: 170px;
  height: 230px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(150deg, rgba(255, 235, 198, 0.18), rgba(255, 235, 198, 0.06));
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
}
.deck-card strong {
  font-size: 1.65rem;
}
.deck-card button {
  background: #f1b15f;
  color: #29170d;
}
.deck-continent {
  top: 16%;
  right: 16%;
  transform: rotate(7deg);
}
.deck-tactic {
  bottom: 12%;
  left: 17%;
  transform: rotate(-9deg);
}
.deck-spoils {
  top: 17%;
  left: 18%;
  transform: rotate(-4deg);
  background: color-mix(in srgb, var(--continent-theme) 32%, rgba(255,235,198,0.12));
}
.table-mission-card {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(440px, 70%);
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 34px;
  padding: 2rem;
  background: rgba(255, 239, 206, 0.93);
  color: #2b190f;
  box-shadow: 0 26px 80px rgba(0,0,0,0.38);
}
.table-mission-card h2 {
  margin: 0.25rem 0 0.7rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}
.table-player-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  width: min(1280px, 100%);
  margin: 0.9rem auto 0;
}
.table-player-rail article {
  display: grid;
  gap: 0.25rem;
  border-radius: 22px;
  padding: 0.9rem 1rem;
  background: rgba(255, 231, 189, 0.1);
  border: 1px solid rgba(255,255,255,0.12);
}
.table-player-rail .is-current {
  background: rgba(241, 177, 95, 0.24);
  box-shadow: inset 0 0 0 2px #f1b15f;
}

.concept-command {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 320px;
  gap: 1rem;
  padding: 1rem;
  background:
    linear-gradient(90deg, rgba(69, 255, 210, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(69, 255, 210, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 55% 35%, rgba(51, 154, 190, 0.22), transparent 26rem),
    #061016;
  background-size: 36px 36px, 36px 36px, auto, auto;
  color: #dffdf8;
}
.command-roster,
.command-console,
.command-intel {
  border: 1px solid rgba(88, 255, 221, 0.18);
  border-radius: 28px;
  background: rgba(6, 20, 28, 0.78);
  box-shadow: 0 24px 90px rgba(0,0,0,0.33), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
}
.command-roster,
.command-intel {
  padding: 1rem;
}
.command-roster h1 {
  margin: 0.6rem 0 1rem;
  font-size: 2.1rem;
}
.command-roster article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.7rem;
  margin-top: 0.65rem;
  border-radius: 16px;
  padding: 0.75rem;
  background: rgba(88, 255, 221, 0.07);
}
.command-roster article small {
  grid-column: 1 / -1;
  color: rgba(223,253,248,0.68);
}
.command-roster .is-current {
  background: rgba(88, 255, 221, 0.18);
}
.command-console {
  position: relative;
  display: grid;
  align-content: center;
  min-height: calc(100vh - 2rem);
  overflow: hidden;
  padding: clamp(1rem, 5vw, 5rem);
}
.console-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(88, 255, 221, 0.12), transparent 18rem),
    linear-gradient(transparent 49%, rgba(88,255,221,0.09) 50%, transparent 51%);
  background-size: auto, 100% 54px;
  opacity: 0.7;
}
.console-kicker,
.command-console h2,
.console-action-grid {
  position: relative;
}
.console-kicker {
  color: #58ffdd;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.command-console h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: 0.92;
  text-shadow: 0 0 42px rgba(88,255,221,0.22);
}
.console-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.console-action-grid button {
  display: grid;
  gap: 0.5rem;
  min-height: 180px;
  text-align: right;
  border: 1px solid rgba(88,255,221,0.22);
  background: linear-gradient(145deg, rgba(88,255,221,0.16), rgba(255,255,255,0.04));
  color: #eafffb;
}
.console-action-grid strong {
  font-size: 1.65rem;
}
.intel-bars {
  display: grid;
  gap: 0.65rem;
}
.intel-bars div {
  display: flex;
  justify-content: space-between;
  border-radius: 14px;
  padding: 0.7rem;
  background: color-mix(in srgb, var(--continent-theme) 26%, rgba(88,255,221,0.05));
}
.intel-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  max-height: 260px;
  overflow: auto;
  padding: 0.1rem 0.2rem 0.2rem;
}
.intel-tags span {
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  background: rgba(88,255,221,0.1);
}
.tactic-real-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 340 / 545;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.34);
}
.tactic-real-card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.tactic-real-card b {
  position: absolute;
  top: -0.42rem;
  left: -0.42rem;
  z-index: 2;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 3px solid #050506;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #fff7d8 0 18%, #58ffdd 19% 100%);
  color: #050506;
  font-size: 1rem;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(0,0,0,0.55), 0 12px 24px rgba(0,0,0,0.34);
}

.command-cinema {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 90, 95, 0.24), transparent 27rem),
    radial-gradient(circle at 82% 12%, rgba(255, 202, 58, 0.2), transparent 23rem),
    radial-gradient(circle at 58% 82%, rgba(67, 255, 216, 0.22), transparent 30rem),
    linear-gradient(90deg, rgba(87, 255, 218, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(87, 255, 218, 0.07) 1px, transparent 1px),
    #071016;
  background-size: auto, auto, auto, 34px 34px, 34px 34px, auto;
  color: #eafffb;
}
.command-cinema-glow {
  position: absolute;
  inset: 8% 24% auto;
  height: 26rem;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(88,255,221,0.16), transparent 68%);
  filter: blur(18px);
}
.command-cinema-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.7rem;
}
.command-cinema-top div {
  text-align: center;
}
.command-cinema-top span {
  color: #58ffdd;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.command-cinema-top h1 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.9rem, 4.1vw, 4.6rem);
  line-height: 0.9;
  text-shadow: 0 0 42px rgba(88,255,221,0.16);
}
.command-cinema-top a {
  opacity: 0.74;
}
.command-cinema-top strong {
  justify-self: end;
  border: 1px solid rgba(255, 202, 58, 0.22);
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  background: linear-gradient(135deg, rgba(255,202,58,0.18), rgba(255,90,95,0.14));
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}
.command-cinema-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(540px, 1.7fr) minmax(280px, 0.88fr);
  gap: 0.75rem;
  align-items: stretch;
}
.public-roster,
.battle-theater,
.public-supply {
  border: 1px solid rgba(88, 255, 221, 0.16);
  border-radius: 30px;
  background: rgba(7, 20, 29, 0.76);
  box-shadow: 0 28px 100px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
}
.public-roster,
.public-supply {
  padding: 0.75rem;
  overflow: hidden auto;
  max-height: calc(100vh - 6.1rem);
}
.public-roster header span,
.public-supply header span {
  color: rgba(88,255,221,0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.public-roster h2,
.public-supply h2 {
  margin: 0.15rem 0 0.55rem;
  font-size: 1.3rem;
}
.public-player-card {
  margin-top: 0.38rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 0.5rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(88,255,221,0.04));
}
.public-player-card.is-current {
  border-color: rgba(255,202,58,0.42);
  box-shadow: inset 0 0 0 1px rgba(255,202,58,0.18), 0 18px 44px rgba(255,202,58,0.08);
}
.public-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.public-player-head strong {
  font-size: 0.98rem;
}
.public-player-head span {
  color: rgba(234,255,251,0.72);
  font-size: 0.82rem;
}
.domination-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.32rem 0;
}
.domination-coins:empty {
  display: none;
}
.domination-coins b,
.domination-coins em {
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
  background: linear-gradient(135deg, rgba(255,202,58,0.22), rgba(255,90,95,0.12));
  color: #fff0c5;
  font-size: 0.76rem;
  font-style: normal;
}
.domination-coins em {
  opacity: 0.52;
}
.public-continent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.continent-game-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 112px;
  overflow: hidden;
  border: 3px solid #050506;
  border-radius: 14px;
  padding: 0.32rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,0.65), transparent 2.3rem),
    repeating-linear-gradient(-18deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, color-mix(in srgb, var(--continent-theme) 78%, #ffffff), color-mix(in srgb, var(--continent-theme) 42%, #020203));
  color: #fff8e8;
  box-shadow: 0 16px 34px rgba(0,0,0,0.34), inset 0 0 0 2px color-mix(in srgb, var(--continent-theme) 72%, #ffffff);
}
.continent-game-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.22), transparent 0.35rem),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,0.13), transparent 0.28rem);
  background-size: 0.55rem 0.55rem;
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
}
.continent-card-art {
  position: relative;
  min-height: 58px;
  order: 2;
  margin: 0.12rem 0.08rem;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.78);
  border-radius: 9px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.55), transparent 2rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 8px),
    color-mix(in srgb, var(--continent-theme) 18%, #162028);
}
.continent-card-art:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 38%, rgba(0,0,0,0.34));
  opacity: 0.75;
}
.continent-card-art svg {
  position: absolute;
  inset: 7% 5%;
  width: 90%;
  height: 86%;
  overflow: visible;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
  color: var(--continent-theme);
  fill: currentColor;
}
.continent-card-art use,
.continent-card-art path {
  fill: color-mix(in srgb, currentColor 82%, #f8e090);
  stroke: #050506;
  stroke-width: 3.2;
  stroke-linejoin: round;
}
.continent-game-card footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.3rem;
  order: 1;
  min-height: 1.85rem;
  transform: skew(-8deg);
  border: 2px solid #050506;
  border-radius: 5px;
  padding: 0.2rem 0.42rem;
  background: color-mix(in srgb, var(--continent-theme) 80%, #f8dd4f);
  box-shadow: 0 3px 0 #050506;
  font-size: 0.74rem;
  font-weight: 1000;
  text-shadow: 1.4px 1.4px 0 #050506, -1px 1px 0 #050506;
}
.continent-game-card footer b {
  position: absolute;
  left: -0.3rem;
  bottom: -4.05rem;
  display: inline-grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  border-radius: 999px;
  border: 3px solid #050506;
  background:
    radial-gradient(circle, #fff8e8 0 35%, color-mix(in srgb, var(--continent-theme) 82%, #f6db3d) 36% 100%);
  color: #050506;
  text-shadow: none;
  transform: skew(8deg);
  font-size: 0.95rem;
  box-shadow: 0 4px 0 rgba(0,0,0,0.65);
}
.continent-game-card footer span {
  transform: skew(8deg);
  white-space: nowrap;
}
.continent-game-card:after {
  content: "کارت";
  position: relative;
  z-index: 1;
  order: 3;
  justify-self: end;
  margin-top: -0.05rem;
  border: 2px solid #050506;
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
  background: #fff8e8;
  color: #050506;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
}
.continent-game-card.real-card {
  display: block;
  min-height: 0;
  aspect-ratio: 1.02;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: 0 16px 34px rgba(0,0,0,0.36);
}
.continent-game-card.real-card:before,
.continent-game-card.real-card:after {
  content: none;
}
.continent-game-card.real-card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
}
.owned-count-badge {
  position: absolute;
  top: -0.52rem;
  left: -0.5rem;
  z-index: 2;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 3px solid #050506;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, #fff7d8 0 18%, color-mix(in srgb, var(--continent-theme) 78%, #f8d83f) 19% 100%);
  color: #050506;
  font-size: 1.05rem;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(0,0,0,0.55), 0 12px 24px rgba(0,0,0,0.34);
}
.battle-theater {
  position: relative;
  min-height: calc(100vh - 6.1rem);
  overflow: hidden;
  padding: 0.75rem;
}
.battle-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background:
    radial-gradient(circle at 50% 34%, rgba(88,255,221,0.12), transparent 22rem),
    linear-gradient(transparent 49%, rgba(88,255,221,0.08) 50%, transparent 51%);
  background-size: auto, 100% 42px;
}
.phase-strip,
.battle-command-card,
.battle-field-status {
  position: relative;
  z-index: 1;
}
.phase-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.phase-strip article {
  border: 1px solid rgba(88,255,221,0.13);
  border-radius: 18px;
  padding: 0.58rem;
  background: rgba(255,255,255,0.06);
}
.phase-strip span,
.battle-command-card small,
.lane-card span {
  color: rgba(88,255,221,0.76);
  font-size: 0.76rem;
  font-weight: 900;
}
.phase-strip strong {
  display: block;
  margin-top: 0.25rem;
}
.battle-command-card {
  width: min(690px, 100%);
  margin: 0.75rem auto;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 36px;
  padding: clamp(1rem, 3.2vw, 2.25rem);
  text-align: center;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,202,58,0.2), transparent 13rem),
    radial-gradient(circle at 82% 76%, rgba(255,90,95,0.2), transparent 15rem),
    rgba(255,255,255,0.08);
  box-shadow: 0 34px 110px rgba(0,0,0,0.38);
}
.battle-command-card h2 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(2.4rem, 5.9vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
}
.battle-command-card p {
  max-width: 46rem;
  margin: 0 auto 0.85rem;
  color: rgba(234,255,251,0.74);
  line-height: 1.9;
}
.battle-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.battle-action-buttons button {
  display: grid;
  align-content: end;
  gap: 0.35rem;
  min-height: 132px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, #ffca3a, #ff6b5e);
  color: #140c10;
  text-align: right;
}
.battle-action-buttons button:before {
  content: "";
  position: absolute;
  inset: 0.8rem;
  border: 1px dashed rgba(20,12,16,0.26);
  border-radius: 16px;
  pointer-events: none;
}
.battle-action-buttons button:after {
  content: "";
  position: absolute;
  width: 7rem;
  height: 7rem;
  left: -2rem;
  top: -2rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.battle-action-buttons button:nth-child(2) {
  background: linear-gradient(135deg, #58ffdd, #66a6ff);
}
.battle-action-buttons small,
.battle-action-buttons strong,
.battle-action-buttons span {
  position: relative;
  z-index: 1;
}
.battle-action-buttons strong {
  font-size: 1.25rem;
}
.battle-field-status {
  border: 1px solid rgba(88,255,221,0.12);
  border-radius: 26px;
  padding: 0.75rem;
  background: rgba(3, 12, 18, 0.48);
}
.battle-field-status h3 {
  margin: 0 0 0.8rem;
}
.battle-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}
.lane-card {
  border-radius: 24px;
  padding: 0.75rem;
  min-height: 104px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.lane-card strong {
  display: block;
  margin: 0.4rem 0;
  font-size: 1.45rem;
}
.lane-card.attacker {
  border: 1px solid rgba(255,90,95,0.32);
  background: linear-gradient(145deg, rgba(255,90,95,0.18), rgba(255,255,255,0.05));
}
.lane-card.defender {
  border: 1px solid rgba(88,255,221,0.26);
  background: linear-gradient(145deg, rgba(88,255,221,0.14), rgba(255,255,255,0.05));
}
.battle-vs {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  color: rgba(234,255,251,0.72);
}
.battle-vs b {
  display: grid;
  width: 4.2rem;
  height: 4.2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,202,58,0.18);
  color: #ffca3a;
  font-size: 1.45rem;
}
.participant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
  color: rgba(234,255,251,0.72);
}
.participant-row b,
.participant-row span {
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  background: rgba(255,255,255,0.08);
}
.surrendered-public {
  margin-top: 0;
}
.surrendered-public div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.surrendered-public button.real-card {
  min-height: 0;
  width: 100%;
  text-align: right;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.private-hint {
  margin-top: 0.75rem;
  border: 1px solid rgba(88,255,221,0.12);
  border-radius: 22px;
  padding: 0.72rem;
  background: rgba(255,255,255,0.06);
}
.private-hint h3 {
  margin: 0 0 0.5rem;
}
.private-hint p {
  margin: 0 0 0.7rem;
  color: rgba(234,255,251,0.66);
  line-height: 1.7;
}
.continent-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.concept-map {
  min-height: 100vh;
  padding: 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(129, 93, 48, 0.18), transparent 22rem),
    linear-gradient(135deg, rgba(60, 98, 77, 0.16), transparent 42%),
    #e7d2a6;
  color: #2d2115;
}
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1320px, 100%);
  margin: 0 auto 0.9rem;
}
.map-header h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 5.8rem);
}
.map-header p {
  margin: 0.25rem 0 0;
}
.map-header strong {
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  background: #365f49;
  color: #fff4dd;
}
.continent-map-stage {
  position: relative;
  width: min(1320px, 100%);
  min-height: 720px;
  margin: 0 auto;
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid rgba(70, 44, 20, 0.16);
  background:
    repeating-linear-gradient(0deg, rgba(67, 42, 18, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(67, 42, 18, 0.05) 0 1px, transparent 1px 28px),
    rgba(255, 244, 218, 0.72);
  box-shadow: 0 28px 80px rgba(77, 50, 20, 0.16);
}
.continent-map-stage svg {
  position: absolute;
  inset: 4% 4% 18%;
  width: 92%;
  height: 72%;
}
.continent-map-stage path {
  fill: none;
  stroke: rgba(55, 83, 66, 0.38);
  stroke-width: 14;
  stroke-linecap: round;
}
.continent-map-stage circle {
  fill: rgba(72, 112, 83, 0.16);
  stroke: rgba(54, 95, 73, 0.55);
  stroke-width: 4;
}
.map-decision-card {
  position: absolute;
  right: 6%;
  top: 13%;
  width: min(430px, 42%);
  border-radius: 30px;
  padding: 1.6rem;
  background: rgba(255, 249, 234, 0.9);
  box-shadow: 0 24px 70px rgba(62, 41, 17, 0.18);
}
.map-decision-card h2 {
  margin: 0.25rem 0 1rem;
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 1;
}
.map-decision-card div {
  display: grid;
  gap: 0.55rem;
}
.map-decision-card button {
  background: #365f49;
  color: #fff7e6;
}
.map-continent-bubbles {
  position: absolute;
  left: 5%;
  bottom: 7%;
  display: flex;
  flex-wrap: wrap;
  max-width: 68%;
  gap: 0.6rem;
}
.map-continent-bubbles span {
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--continent-theme) 32%, rgba(255,255,255,0.78));
  box-shadow: 0 12px 26px rgba(60, 38, 16, 0.1);
}

.concept-cinema {
  min-height: 100vh;
  padding: 1rem;
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 90, 95, 0.34), transparent 28rem),
    radial-gradient(circle at 82% 14%, rgba(255, 202, 58, 0.3), transparent 24rem),
    radial-gradient(circle at 65% 82%, rgba(25, 130, 196, 0.25), transparent 26rem),
    #110d17;
  color: #fff8ef;
}
.cinema-nav {
  display: flex;
  justify-content: space-between;
  width: min(1320px, 100%);
  margin: 0 auto 1rem;
  opacity: 0.8;
}
.cinema-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  gap: 2rem;
  align-items: center;
  width: min(1320px, 100%);
  min-height: 70vh;
  margin: 0 auto;
}
.cinema-copy span {
  color: #ffca3a;
  font-weight: 900;
}
.cinema-copy h1 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(3.2rem, 8vw, 8.2rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
}
.cinema-copy p {
  max-width: 34rem;
  font-size: 1.2rem;
  color: rgba(255,248,239,0.74);
}
.cinema-card-stack {
  position: relative;
  min-height: 560px;
}
.cinema-card {
  position: absolute;
  display: grid;
  align-content: end;
  gap: 0.6rem;
  width: 330px;
  height: 460px;
  text-align: right;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 34px;
  padding: 1.5rem;
  color: #140c10;
  box-shadow: 0 34px 100px rgba(0,0,0,0.42);
}
.cinema-card strong {
  font-size: 2.4rem;
  line-height: 1;
}
.cinema-card.primary {
  z-index: 3;
  right: 18%;
  top: 2%;
  background: linear-gradient(145deg, #ffca3a, #ff795d);
  transform: rotate(4deg);
}
.cinema-card.secondary {
  z-index: 2;
  right: 45%;
  top: 17%;
  background: linear-gradient(145deg, #8ad7ff, #5fffda);
  transform: rotate(-10deg);
}
.cinema-card.tertiary {
  z-index: 1;
  right: 2%;
  top: 24%;
  background: linear-gradient(145deg, #f8f0d6, #d696ff);
  transform: rotate(13deg);
}
.cinema-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  width: min(1320px, 100%);
  margin: 1rem auto 0;
}
.cinema-hud article {
  display: flex;
  justify-content: space-between;
  border-radius: 999px;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
}
.cinema-hud .is-current {
  background: rgba(255, 202, 58, 0.22);
}

@media (max-width: 980px) {
  .concept-command,
  .command-cinema-grid,
  .cinema-hero,
  .table-player-rail,
  .cinema-hud {
    grid-template-columns: minmax(0, 1fr);
  }
  .command-cinema {
    overflow: auto;
  }
  .command-cinema-top {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .command-cinema-top strong {
    justify-self: center;
  }
  .public-roster,
  .public-supply,
  .battle-theater {
    max-height: none;
    min-height: auto;
  }
  .phase-strip,
  .battle-action-buttons,
  .battle-lanes,
  .deck-zone {
    grid-template-columns: minmax(0, 1fr);
  }
  .console-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .war-table {
    border-radius: 32px;
    height: auto;
    min-height: 820px;
  }
  .deck-card,
  .table-mission-card {
    position: relative;
    inset: auto;
    transform: none;
    margin: 1rem auto;
  }
  .map-decision-card {
    width: auto;
    left: 1rem;
    right: 1rem;
  }
  .cinema-card {
    position: relative;
    inset: auto !important;
    width: min(360px, 100%);
    margin: 0 auto 1rem;
    transform: none !important;
  }
  .cinema-card-stack {
    min-height: 0;
  }
}

.continent-design-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 90, 95, 0.18), transparent 26rem),
    radial-gradient(circle at 86% 10%, rgba(88, 255, 221, 0.16), transparent 24rem),
    linear-gradient(90deg, rgba(87, 255, 218, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(87, 255, 218, 0.055) 1px, transparent 1px),
    #071016;
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  color: #eafffb;
}
.continent-design-shell {
  width: min(1760px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.continent-design-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.continent-design-header a {
  opacity: 0.72;
}
.continent-design-header div {
  text-align: center;
}
.continent-design-header span {
  color: #58ffdd;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.continent-design-header h1 {
  margin: 0.2rem 0 0.25rem;
  font-size: clamp(2.2rem, 5vw, 5.6rem);
  line-height: 0.95;
}
.continent-design-header p {
  margin: 0;
  color: rgba(234,255,251,0.68);
}
.continent-design-list {
  display: grid;
  gap: 1rem;
}
.continent-design-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1rem;
  border: 1px solid rgba(88,255,221,0.14);
  border-radius: 32px;
  padding: 1rem;
  background: rgba(7, 20, 29, 0.72);
  box-shadow: 0 30px 100px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.continent-design-row > header span {
  color: #58ffdd;
  font-weight: 900;
}
.continent-design-row > header h2 {
  margin: 0.35rem 0 0.45rem;
  font-size: 1.7rem;
}
.continent-design-row > header p {
  margin: 0;
  color: rgba(234,255,251,0.68);
  line-height: 1.8;
}
.continent-card-samples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: center;
}
.continent-card-prototype {
  --ratio: calc(var(--owned) / var(--needed) * 100%);
  position: relative;
  overflow: hidden;
  color: #24180d;
}
.continent-card-prototype svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--continent-theme);
  fill: currentColor;
}
.continent-card-prototype use,
.continent-card-prototype path {
  fill: currentColor;
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.prototype-stats b {
  font-variant-numeric: tabular-nums;
}
.prototype-progress i {
  display: block;
  width: clamp(0%, var(--ratio), 100%);
  height: 100%;
}

.card-design-1 .continent-card-prototype {
  display: grid;
  grid-template-rows: 1fr auto auto;
  height: 250px;
  border: 1px solid color-mix(in srgb, var(--continent-theme) 55%, #e7d8b8);
  border-radius: 24px;
  padding: 0.8rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--continent-theme) 14%, #f7ead0), #f8efd9);
  box-shadow: 0 22px 60px rgba(0,0,0,0.26), inset 0 0 0 5px rgba(255,255,255,0.35);
}
.card-design-1 .prototype-map {
  border-radius: 18px;
  padding: 0.6rem;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,0.8), transparent 3rem),
    repeating-linear-gradient(0deg, rgba(48,36,21,0.07) 0 1px, transparent 1px 12px),
    color-mix(in srgb, var(--continent-theme) 18%, #2b3630);
}
.card-design-1 .prototype-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.card-design-1 .prototype-text strong {
  font-size: 1.35rem;
}
.card-design-1 .prototype-text span {
  color: #67533a;
}
.card-design-1 .prototype-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.55rem;
}
.card-design-1 .prototype-stats b {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 999px;
  background: var(--continent-theme);
  color: #fff8e8;
}
.card-design-1 .prototype-progress {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(61,42,22,0.15);
  margin-top: 0.5rem;
}
.card-design-1 .prototype-progress i {
  border-radius: inherit;
  background: var(--continent-theme);
}

.card-design-2 .continent-card-prototype {
  display: grid;
  grid-template-columns: 1fr 92px;
  grid-template-rows: 1fr auto;
  min-height: 190px;
  border: 1px solid rgba(88,255,221,0.2);
  border-radius: 22px;
  padding: 0.85rem;
  background:
    linear-gradient(90deg, rgba(88,255,221,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(88,255,221,0.08) 1px, transparent 1px),
    rgba(5,17,25,0.92);
  background-size: 16px 16px;
  color: #eafffb;
}
.card-design-2 .prototype-map {
  grid-row: 1 / 3;
  padding: 0.3rem;
  opacity: 0.92;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--continent-theme) 50%, transparent));
}
.card-design-2 .prototype-text {
  align-self: start;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
}
.card-design-2 .prototype-text strong {
  color: #58ffdd;
  font-size: 1.25rem;
}
.card-design-2 .prototype-text span,
.card-design-2 .prototype-stats small {
  color: rgba(234,255,251,0.62);
}
.card-design-2 .prototype-stats {
  display: grid;
  justify-items: end;
  align-self: end;
}
.card-design-2 .prototype-stats b {
  font-size: 3.2rem;
  line-height: 0.9;
  color: var(--continent-theme);
}
.card-design-2 .prototype-progress {
  grid-column: 1 / -1;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(88,255,221,0.12);
  margin-top: 0.6rem;
}
.card-design-2 .prototype-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #58ffdd, var(--continent-theme));
}

.card-design-3 .continent-card-prototype {
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: 160px;
  border-radius: 18px 46px 18px 18px;
  background: color-mix(in srgb, var(--continent-theme) 18%, #f1e4c7);
  box-shadow: 0 22px 50px rgba(0,0,0,0.2);
}
.card-design-3 .prototype-map {
  padding: 0.6rem;
  background: var(--continent-theme);
}
.card-design-3 .prototype-map svg {
  color: rgba(255,255,255,0.86);
}
.card-design-3 .prototype-text,
.card-design-3 .prototype-stats {
  padding: 0.8rem;
}
.card-design-3 .prototype-text strong {
  display: block;
  font-size: 1.55rem;
}
.card-design-3 .prototype-text span {
  color: #715e43;
}
.card-design-3 .prototype-stats {
  align-self: end;
}
.card-design-3 .prototype-stats b {
  font-size: 2.7rem;
  color: var(--continent-theme);
}
.card-design-3 .prototype-progress {
  position: absolute;
  inset-inline: 44% 0.8rem;
  bottom: 0.75rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(50,35,18,0.14);
}
.card-design-3 .prototype-progress i {
  border-radius: inherit;
  background: var(--continent-theme);
}

.card-design-4 .continent-card-prototype {
  display: grid;
  place-items: center;
  min-height: 240px;
  border-radius: 50%;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 1rem;
  background:
    radial-gradient(circle, #fff3d4 0 37%, color-mix(in srgb, var(--continent-theme) 24%, #e7c982) 38% 58%, #2a1d12 59% 62%, #c59b45 63% 66%, #20150d 67%);
  color: #2a1d12;
  box-shadow: 0 26px 80px rgba(0,0,0,0.3);
}
.card-design-4 .prototype-map {
  width: 56%;
  height: 45%;
}
.card-design-4 .prototype-text {
  position: absolute;
  bottom: 27%;
  text-align: center;
}
.card-design-4 .prototype-text strong {
  display: block;
  font-size: 1.35rem;
}
.card-design-4 .prototype-text span {
  display: none;
}
.card-design-4 .prototype-stats {
  position: absolute;
  inset: auto 18% 12%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
}
.card-design-4 .prototype-stats b {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 999px;
  background: var(--continent-theme);
  color: #fff8e8;
  font-size: 1.6rem;
}
.card-design-4 .prototype-progress {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.22);
  transform: rotate(-28deg);
}
.card-design-4 .prototype-progress i {
  width: 45%;
  border-radius: 999px;
  background: var(--continent-theme);
}

.card-design-5 .continent-card-prototype {
  display: grid;
  grid-template-columns: 1fr 86px;
  min-height: 180px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 0.75rem;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.08) 50%, transparent 50%),
    color-mix(in srgb, var(--continent-theme) 16%, #c9b489);
  background-size: 18px 18px, auto;
  box-shadow: 0 20px 48px rgba(0,0,0,0.24);
}
.card-design-5 .prototype-map {
  grid-row: 1 / 3;
  border-radius: 10px;
  padding: 0.55rem;
  background: rgba(42,29,18,0.2);
}
.card-design-5 .prototype-text {
  border-right: 4px solid var(--continent-theme);
  padding-right: 0.55rem;
}
.card-design-5 .prototype-text strong {
  font-size: 1.35rem;
}
.card-design-5 .prototype-text span {
  display: block;
  color: #5d4b36;
}
.card-design-5 .prototype-stats {
  align-self: end;
  border-radius: 10px;
  padding: 0.5rem;
  background: rgba(255,255,255,0.34);
}
.card-design-5 .prototype-stats b {
  font-size: 2.4rem;
  color: var(--continent-theme);
}
.card-design-5 .prototype-progress {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.55rem;
  height: 0.28rem;
  background: rgba(34,22,12,0.18);
}
.card-design-5 .prototype-progress i {
  background: var(--continent-theme);
}

.card-design-6 .continent-card-prototype {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  min-height: 128px;
  border-radius: 999px;
  padding: 0.65rem 1rem 0.65rem 0.65rem;
  background: rgba(255,255,255,0.92);
  color: #1f2a2b;
  box-shadow: 0 22px 52px rgba(0,0,0,0.22);
}
.card-design-6 .prototype-map {
  width: 78px;
  height: 78px;
  border-radius: 999px;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--continent-theme) 18%, #eff8f5);
}
.card-design-6 .prototype-text strong {
  font-size: 1.45rem;
}
.card-design-6 .prototype-text span {
  display: block;
  color: #657273;
}
.card-design-6 .prototype-stats {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}
.card-design-6 .prototype-stats b {
  color: var(--continent-theme);
  font-size: 2.2rem;
}
.card-design-6 .prototype-progress {
  position: absolute;
  right: 104px;
  left: 1.2rem;
  bottom: 1.1rem;
  height: 0.36rem;
  border-radius: 999px;
  background: rgba(30,42,43,0.12);
}
.card-design-6 .prototype-progress i {
  border-radius: inherit;
  background: var(--continent-theme);
}

.card-design-7 .continent-card-prototype {
  display: grid;
  min-height: 240px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 28px;
  padding: 1rem;
  background:
    radial-gradient(circle at 22% 15%, rgba(255,255,255,0.28), transparent 4rem),
    linear-gradient(145deg, color-mix(in srgb, var(--continent-theme) 28%, rgba(88,255,221,0.14)), rgba(255,255,255,0.07));
  color: #eafffb;
  box-shadow: 0 28px 90px rgba(0,0,0,0.33), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
}
.card-design-7 .prototype-map {
  width: 78%;
  height: 55%;
  justify-self: center;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--continent-theme) 50%, transparent));
}
.card-design-7 .prototype-text {
  text-align: center;
}
.card-design-7 .prototype-text strong {
  display: block;
  font-size: 1.65rem;
}
.card-design-7 .prototype-text span,
.card-design-7 .prototype-stats small {
  color: rgba(234,255,251,0.68);
}
.card-design-7 .prototype-stats {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  align-items: center;
}
.card-design-7 .prototype-stats b {
  font-size: 2.4rem;
  color: var(--continent-theme);
}
.card-design-7 .prototype-progress {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.card-design-7 .prototype-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #58ffdd, var(--continent-theme), #ffca3a);
}

.card-design-8 .continent-card-prototype {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 230px;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.5), transparent 3rem),
    color-mix(in srgb, var(--continent-theme) 13%, #ead6aa);
  color: #3a2915;
  clip-path: polygon(4% 0, 8% 4%, 12% 0, 16% 4%, 20% 0, 24% 4%, 28% 0, 32% 4%, 36% 0, 40% 4%, 44% 0, 48% 4%, 52% 0, 56% 4%, 60% 0, 64% 4%, 68% 0, 72% 4%, 76% 0, 80% 4%, 84% 0, 88% 4%, 92% 0, 96% 4%, 100% 0, 96% 8%, 100% 12%, 96% 16%, 100% 20%, 96% 24%, 100% 28%, 96% 32%, 100% 36%, 96% 40%, 100% 44%, 96% 48%, 100% 52%, 96% 56%, 100% 60%, 96% 64%, 100% 68%, 96% 72%, 100% 76%, 96% 80%, 100% 84%, 96% 88%, 100% 92%, 96% 96%, 100% 100%, 96% 96%, 92% 100%, 88% 96%, 84% 100%, 80% 96%, 76% 100%, 72% 96%, 68% 100%, 64% 96%, 60% 100%, 56% 96%, 52% 100%, 48% 96%, 44% 100%, 40% 96%, 36% 100%, 32% 96%, 28% 100%, 24% 96%, 20% 100%, 16% 96%, 12% 100%, 8% 96%, 4% 100%, 0 96%, 4% 92%, 0 88%, 4% 84%, 0 80%, 4% 76%, 0 72%, 4% 68%, 0 64%, 4% 60%, 0 56%, 4% 52%, 0 48%, 4% 44%, 0 40%, 4% 36%, 0 32%, 4% 28%, 0 24%, 4% 20%, 0 16%, 4% 12%, 0 8%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.card-design-8 .prototype-map {
  padding: 0.9rem;
  border: 2px dashed rgba(58,41,21,0.18);
}
.card-design-8 .prototype-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(58,41,21,0.2);
  padding-top: 0.65rem;
}
.card-design-8 .prototype-text strong {
  font-size: 1.35rem;
}
.card-design-8 .prototype-text span {
  display: none;
}
.card-design-8 .prototype-stats {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  justify-items: center;
}
.card-design-8 .prototype-stats b {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 999px;
  background: var(--continent-theme);
  color: #fff8e8;
}
.card-design-8 .prototype-progress {
  position: absolute;
  right: 1rem;
  left: 4.4rem;
  bottom: 1.25rem;
  height: 0.32rem;
  background: rgba(58,41,21,0.16);
}
.card-design-8 .prototype-progress i {
  background: var(--continent-theme);
}

@media (max-width: 1200px) {
  .continent-design-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .continent-card-samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .continent-design-header {
    grid-template-columns: minmax(0, 1fr);
  }
  .continent-card-samples {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fit the command-room preview into a single desktop viewport. */
.command-cinema {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0.5rem 0.65rem;
}
.command-cinema-grid {
  height: calc(100svh - 1rem);
  grid-template-columns: minmax(250px, 0.95fr) minmax(440px, 1.56fr) minmax(280px, 1.08fr);
  gap: 0.5rem;
}
.public-roster,
.public-supply,
.battle-theater {
  max-height: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
}
.public-roster,
.public-supply,
.battle-theater {
  padding: 0.5rem;
}
.public-roster h2,
.public-supply h2 {
  margin: 0.08rem 0 0.35rem;
  font-size: 1.05rem;
}
.public-player-card {
  position: relative;
  margin-top: 0.18rem;
  padding: 0.28rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--player-glow, #58ffdd) 20%, transparent), transparent 6rem),
    linear-gradient(145deg, rgba(255,255,255,0.1), rgba(88,255,221,0.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 34px rgba(0,0,0,0.2);
}
.public-player-head {
  gap: 0.4rem;
  padding: 0 0.15rem 0.12rem;
}
.public-player-head strong {
  font-size: 0.86rem;
}
.public-player-head span {
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  background: rgba(255,255,255,0.08);
  font-size: 0.56rem;
}
.public-continent-list {
  grid-template-columns: repeat(auto-fit, minmax(5.55rem, 7.375rem));
  gap: 0.42rem;
  justify-content: center;
  justify-items: center;
}
.continent-game-card.real-card {
  border-radius: 8px;
  justify-self: center;
  width: min(100%, 7.375rem);
}
.continent-game-card.real-card img {
  border-radius: 8px;
}
.owned-count-badge {
  top: -0.2rem;
  left: -0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-width: 2px;
  font-size: 0.72rem;
}
.domination-card-badge {
  position: absolute;
  right: -0.22rem;
  top: -0.22rem;
  z-index: 3;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 2px solid #050506;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #fff7d8 0 18%, #ffca3a 19% 100%);
  color: #050506;
  font-size: 0.9rem;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(0,0,0,0.45), 0 12px 22px rgba(0,0,0,0.32);
}
.continent-game-card.real-card.is-inactive img {
  filter: grayscale(1) saturate(0.25) brightness(0.54);
  opacity: 0.58;
}
.continent-game-card.real-card.is-inactive {
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.phase-strip {
  gap: 0.35rem;
}
.phase-strip article {
  padding: 0.36rem;
  border-radius: 14px;
}
.phase-strip span,
.battle-command-card small,
.lane-card span {
  font-size: 0.62rem;
}
.phase-strip strong {
  margin-top: 0.12rem;
  font-size: 0.82rem;
}
.battle-command-card {
  width: min(640px, 100%);
  margin: 0.24rem auto;
  border-radius: 28px;
  padding: clamp(0.42rem, 1.2vw, 0.72rem);
}
.battle-command-card h2 {
  margin: 0.04rem 0 0.18rem;
  font-size: clamp(1.45rem, 3.1vw, 2.7rem);
}
.battle-command-card p {
  margin-bottom: 0.26rem;
  font-size: 0.76rem;
  line-height: 1.35;
}
.battle-action-buttons {
  gap: 0.45rem;
}
.battle-action-buttons button {
  min-height: 50px;
  border-radius: 14px;
}
.battle-action-buttons button:before {
  inset: 0.55rem;
  border-radius: 11px;
}
.battle-action-buttons strong {
  font-size: 0.95rem;
}
.draw-deck-actions {
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-items: center;
  gap: 1.05rem;
}
.draw-deck-actions.has-surrendered-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.draw-deck-actions .draw-deck-card-button {
  display: block;
  width: clamp(8.4rem, 12vw, 10.8rem);
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: 0 20px 42px rgba(0,0,0,0.34);
}
.draw-deck-actions .draw-deck-card-button:before,
.draw-deck-actions .draw-deck-card-button:after {
  content: none;
}
.draw-deck-card-button img {
  display: block;
  width: 100%;
  border-radius: 18px;
  object-fit: contain;
}
.draw-deck-actions .draw-deck-card-button .deck-count-badge {
  position: absolute;
  right: -0.45rem;
  top: -0.45rem;
  z-index: 2;
  display: grid;
  min-width: 2.7rem;
  min-height: 2.7rem;
  place-items: center;
  border: 3px solid #050506;
  border-radius: 999px;
  padding: 0.18rem 0.35rem;
  background: radial-gradient(circle at 32% 28%, #fff7d8 0 18%, #58ffdd 19% 100%);
  color: #050506;
  font-size: 0.76rem;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(0,0,0,0.55), 0 12px 24px rgba(0,0,0,0.34);
}
.draw-surrendered-picker {
  display: grid;
  align-self: stretch;
  align-content: start;
  justify-items: center;
  min-width: clamp(12rem, 22vw, 20rem);
  max-width: min(100%, 28rem);
  gap: 0.48rem;
  border: 1px solid rgba(88,255,221,0.16);
  border-radius: 22px;
  padding: 0.72rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,202,58,0.14), transparent 11rem),
    rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.2);
}
.draw-surrendered-picker h3 {
  margin: 0;
  color: rgba(234,255,251,0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}
.draw-surrendered-actions {
  width: 100%;
}
.draw-surrendered-card {
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}
.draw-surrendered-card:before,
.draw-surrendered-card:after {
  content: none;
}
.draw-surrendered-card:hover,
.draw-surrendered-card:focus-visible {
  transform: translateY(-4px) scale(1.035);
  filter: saturate(1.12) brightness(1.06);
  box-shadow: 0 22px 44px rgba(0,0,0,0.42), 0 0 0 2px rgba(88,255,221,0.32);
}
.battle-field-status {
  width: 100%;
  margin: 0.24rem auto;
  border: 0;
  border-radius: 0;
  padding: 0.18rem 0.25rem 0.3rem;
  background: transparent;
}
.battle-field-status h3 {
  margin-bottom: 0.28rem;
  font-size: 0.92rem;
}
.battle-phase-summary {
  width: min(640px, 100%);
  margin: 0 auto 0.38rem;
  text-align: center;
}
.battle-phase-summary h2 {
  margin: 0.04rem 0 0.14rem;
  font-size: clamp(1.45rem, 3.1vw, 2.7rem);
  line-height: 0.94;
}
.battle-phase-summary p {
  margin: 0;
  color: rgba(234,255,251,0.74);
  font-size: 0.76rem;
  line-height: 1.35;
}
.battle-lanes {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 0.24rem;
}
.lane-card {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: start;
  min-height: 166px;
  padding: 0.36rem;
  border-radius: 18px;
}
.lane-card header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.1rem;
  min-width: 0;
}
.lane-card strong {
  margin: 0;
  font-size: 0.96rem;
}
.battle-card-cluster {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 14.75rem;
  padding-inline-start: 2.6875rem;
}
.battle-continent-card,
.battle-troop-card {
  position: relative;
  flex: 0 0 auto;
}
.battle-continent-add-form {
  display: block;
  flex: 0 0 auto;
  width: min(100%, 11.4375rem);
  margin: 0;
}
.battle-continent-card {
  width: min(100%, 11.4375rem);
}
.battle-continent-add-form .battle-continent-card {
  width: 100%;
}
button.battle-continent-card {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.battle-troop-card {
  width: 6.1875rem;
  margin-right: -2.625rem;
  margin-bottom: 0.22rem;
  transform: rotate(-5deg);
}
.battle-continent-card img,
.battle-troop-card img {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 14px 30px rgba(0,0,0,0.32);
}
.battle-troop-card img {
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.38);
}
.battle-card-count,
.battle-troop-count {
  position: absolute;
  z-index: 2;
  border: 2px solid #050506;
  border-radius: 999px;
  padding: 0.1rem 0.32rem;
  color: #050506;
  font-size: 0.68rem;
  font-weight: 1000;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
  white-space: nowrap;
}
.battle-card-count {
  right: -0.24rem;
  top: -0.22rem;
  background: #fff8e8;
}
.battle-card-plus {
  position: absolute;
  right: -0.3rem;
  bottom: -0.24rem;
  z-index: 3;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 2px solid #050506;
  border-radius: 999px;
  background: #58ffdd;
  color: #050506;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(0,0,0,0.48), 0 12px 24px rgba(88,255,221,0.2);
}
.battle-continent-card.is-addable {
  cursor: pointer;
  filter: saturate(1.08) brightness(1.04);
  transition: transform 140ms ease, filter 140ms ease;
}
.battle-continent-card.is-addable:hover {
  transform: translateY(-3px) scale(1.018);
  filter: saturate(1.2) brightness(1.1);
}
.battle-continent-count-form {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: min(100%, 11.4375rem);
  margin: 0;
}
.battle-count-control {
  display: inline-grid;
  grid-template-columns: 1.9rem 2.3rem 1.9rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(88,255,221,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}
.battle-count-control button {
  border-radius: 0;
  padding: 0.38rem 0.15rem;
  background: rgba(88,255,221,0.12);
  color: #eafffb;
}
.battle-count-control strong {
  text-align: center;
  font-size: 0.78rem;
}
.battle-continent-count-form > button[type="submit"] {
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
}
.battle-troop-count {
  left: -0.18rem;
  bottom: -0.16rem;
  background: #58ffdd;
}
.battle-vs {
  gap: 0.22rem;
  font-size: 0.58rem;
}
.battle-vs b {
  width: 1.95rem;
  height: 1.95rem;
  font-size: 0.76rem;
}
.participant-row {
  gap: 0.3rem;
  margin-top: 0.26rem;
}
.participant-row b,
.participant-row span {
  padding: 0.22rem 0.42rem;
  font-size: 0.68rem;
}
.surrendered-public div {
  grid-template-columns: repeat(2, max-content);
  gap: 0.18rem;
  justify-content: end;
  justify-items: start;
}
.surrendered-public .continent-game-card.real-card {
  width: min(100%, 8rem);
}
.private-hint {
  margin-top: 0.35rem;
  padding: 0.42rem;
  border-radius: 16px;
}
.private-hint h3 {
  margin-bottom: 0.22rem;
  font-size: 0.9rem;
}
.private-hint p {
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.intel-tags {
  grid-template-columns: repeat(5, 7.375rem);
  gap: 0.14rem;
  justify-content: center;
  max-height: none;
  overflow: visible;
  padding: 0.05rem;
}
.tactic-real-card {
  border-radius: 8px;
  justify-self: center;
  width: min(100%, 7.375rem);
}
.tactic-real-card img {
  border-radius: 8px;
}
.tactic-real-card b {
  top: -0.18rem;
  left: -0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  border-width: 2px;
  font-size: 0.56rem;
}

/* Live game room mounted on the exact command-cinema concept skeleton. */
.risk-live-command-room .command-cinema {
  isolation: isolate;
}
.risk-live-command-room [hidden] {
  display: none !important;
}
.risk-live-command-room .risk-live-error {
  position: fixed;
  right: 1rem;
  left: 1rem;
  top: 0.75rem;
  z-index: 40;
}
.risk-live-command-room .live-command-messages {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 35;
  width: min(520px, calc(100vw - 2rem));
}
.risk-live-command-room .live-command-join {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  width: auto;
  margin: 0;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(3,12,18,0.58), transparent 24rem);
}
.risk-live-command-room .live-command-join .risk-panel {
  width: min(460px, calc(100vw - 2rem));
  border: 1px solid rgba(88,255,221,0.16);
  border-radius: 24px;
  background: rgba(7, 20, 29, 0.86);
  color: #eafffb;
  pointer-events: auto;
  box-shadow: 0 28px 100px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.risk-live-command-room input,
.risk-live-command-room select {
  border-color: rgba(88,255,221,0.16);
  background: rgba(255,255,255,0.08);
  color: #eafffb;
}
.risk-live-command-room option {
  color: #10161a;
}
.risk-live-command-room form {
  gap: 0.45rem;
}
.risk-live-command-room button {
  font-weight: 900;
}
.risk-live-command-room button:disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.68);
  opacity: 0.58;
}
.risk-live-command-room .battle-action-buttons form,
.risk-live-command-room .live-inline-actions form {
  display: block;
}
.risk-live-command-room .battle-action-buttons button {
  width: 100%;
}
.risk-live-command-room .draw-deck-actions form {
  display: block;
  width: clamp(8.4rem, 12vw, 10.8rem);
}
.risk-live-command-room .draw-deck-actions .draw-deck-card-button {
  width: 100%;
}
.risk-live-command-room .public-supply {
  overflow: hidden auto;
}
.risk-live-command-room .public-roster {
  overflow: hidden auto;
}
.risk-live-command-room .live-command-actions {
  display: grid;
  gap: 0.5rem;
}
.risk-live-command-room .live-join-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  text-align: right;
}
.risk-live-command-room .live-join-form label {
  grid-column: 1 / -1;
}
.risk-live-command-room .live-inline-actions,
.risk-live-command-room .live-surrendered-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.risk-live-command-room .draw-surrendered-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.38rem;
}
.risk-live-command-room .draw-surrendered-actions form {
  display: block;
  width: clamp(5.4rem, 7vw, 7.375rem);
}
.risk-live-command-room .draw-surrendered-actions .draw-surrendered-card {
  display: block;
  width: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: 0 16px 34px rgba(0,0,0,0.36);
}
.risk-live-command-room .live-inline-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.risk-live-command-room .live-attack-options {
  display: grid;
  max-height: 9rem;
  overflow: auto;
  gap: 0.5rem;
  padding-inline-end: 0.15rem;
}
.risk-live-command-room .risk-attack-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
.risk-live-command-room .risk-attack-form label,
.risk-live-command-room .risk-attack-form button {
  grid-column: 1 / -1;
}
.risk-live-command-room .battle-troop-card.is-empty img {
  filter: grayscale(1) saturate(0.2) brightness(0.7);
  opacity: 0.56;
}
.risk-live-command-room .participant-row:empty {
  display: none;
}
.risk-live-command-room .live-dice-grid {
  margin-top: 0.35rem;
}
.risk-live-command-room .live-dice-grid > div {
  border: 1px solid rgba(88,255,221,0.12);
  border-radius: 14px;
  padding: 0.35rem 0.55rem;
  background: rgba(255,255,255,0.055);
}
.risk-live-command-room .live-dice-grid p {
  margin: 0.18rem 0;
  color: rgba(234,255,251,0.72);
}
.risk-live-command-room .result-dice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.risk-live-command-room .result-dice-panel {
  display: grid;
  gap: 0.35rem;
  overflow: hidden;
}
.risk-live-command-room .result-dice-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.risk-live-command-room .result-dice-panel header strong {
  font-size: 0.8rem;
}
.risk-live-command-room .result-dice-panel header span {
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  background: rgba(255,255,255,0.08);
  color: rgba(234,255,251,0.72);
  font-size: 0.58rem;
  font-weight: 900;
}
.risk-live-command-room .result-dice-row {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  gap: 0.42rem;
  perspective: 720px;
}
.risk-result-die-wrap {
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  animation: risk-result-die-pop 420ms cubic-bezier(.2,.8,.22,1.15) both;
}
.risk-result-die-wrap:nth-child(2) {
  animation-delay: 70ms;
}
.risk-result-die-wrap:nth-child(3) {
  animation-delay: 140ms;
}
.risk-result-die-wrap:nth-child(4) {
  animation-delay: 210ms;
}
.risk-result-die-wrap small {
  min-width: 2.2rem;
  border-radius: 999px;
  padding: 0.08rem 0.3rem;
  background: rgba(255,255,255,0.08);
  color: rgba(234,255,251,0.74);
  font-size: 0.56rem;
  font-weight: 1000;
  text-align: center;
}
.risk-result-die-wrap.is-changed small {
  background: rgba(255,202,58,0.16);
  color: #ffecab;
}
.risk-result-die {
  --die-size: 2.65rem;
  --die-bg-a: #fff4de;
  --die-bg-b: #d93a31;
  --die-pip: #130607;
  --die-edge: rgba(5,5,6,0.96);
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  transform-style: preserve-3d;
  transition: transform 260ms ease;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.32));
}
.result-dice-defense .risk-result-die {
  --die-bg-a: #3a3d40;
  --die-bg-b: #050607;
  --die-pip: #f6f3df;
  --die-edge: rgba(255,255,255,0.16);
}
.risk-result-die .result-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--die-edge);
  border-radius: 10px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.85), transparent 1rem),
    linear-gradient(145deg, var(--die-bg-a), var(--die-bg-b) 74%);
  color: var(--die-pip);
  font-size: calc(var(--die-size) * 0.19);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: 0.14em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 10px 18px rgba(0,0,0,0.24);
  backface-visibility: hidden;
}
.risk-result-die .one {
  transform: translateZ(calc(var(--die-size) / 2));
}
.risk-result-die .two {
  transform: rotateY(90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-result-die .three {
  transform: rotateY(180deg) translateZ(calc(var(--die-size) / 2));
}
.risk-result-die .four {
  transform: rotateY(-90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-result-die .five {
  transform: rotateX(90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-result-die .six {
  transform: rotateX(-90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-result-die.show-1 {
  transform: rotateX(-12deg) rotateY(14deg);
}
.risk-result-die.show-2 {
  transform: rotateX(-12deg) rotateY(-76deg);
}
.risk-result-die.show-3 {
  transform: rotateX(-12deg) rotateY(-166deg);
}
.risk-result-die.show-4 {
  transform: rotateX(-12deg) rotateY(104deg);
}
.risk-result-die.show-5 {
  transform: rotateX(-102deg) rotateY(14deg);
}
.risk-result-die.show-6 {
  transform: rotateX(78deg) rotateY(14deg);
}
.risk-result-die:before,
.risk-result-die:after {
  content: "";
  position: absolute;
  border: 2px solid var(--die-edge);
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--die-bg-b) 72%, #000), color-mix(in srgb, var(--die-bg-a) 28%, #000));
  pointer-events: none;
}
.risk-result-die:before {
  top: 0.28rem;
  right: -0.52rem;
  width: 0.56rem;
  height: calc(100% - 0.08rem);
  transform: skewY(42deg);
  transform-origin: left top;
  filter: brightness(0.76);
}
.risk-result-die:after {
  top: -0.5rem;
  left: 0.28rem;
  width: calc(100% - 0.02rem);
  height: 0.56rem;
  transform: skewX(42deg);
  transform-origin: left bottom;
  filter: brightness(1.08);
}
.risk-result-die .result-face {
  opacity: 0;
  transform: translateZ(0.52rem);
}
.risk-result-die.show-1,
.risk-result-die.show-2,
.risk-result-die.show-3,
.risk-result-die.show-4,
.risk-result-die.show-5,
.risk-result-die.show-6 {
  transform: rotateX(0deg) rotateY(0deg);
}
.risk-result-die.show-1 .one,
.risk-result-die.show-2 .two,
.risk-result-die.show-3 .three,
.risk-result-die.show-4 .four,
.risk-result-die.show-5 .five,
.risk-result-die.show-6 .six {
  opacity: 1;
}
@keyframes risk-result-die-pop {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.72) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
.risk-live-command-room .battle-phase-actions {
  width: min(640px, 100%);
  margin: 0.25rem auto 0;
}
.act-flow {
  display: grid;
  gap: 0.7rem;
}
.act-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.act-choice-grid.is-collapsed {
  display: none;
}
.act-choice-card {
  display: grid;
  min-height: 9.5rem;
  align-content: center;
  gap: 0.42rem;
  border: 1px solid rgba(88,255,221,0.18);
  border-radius: 24px;
  padding: 1rem;
  background:
    radial-gradient(circle at 22% 8%, rgba(88,255,221,0.24), transparent 5rem),
    linear-gradient(145deg, rgba(88,255,221,0.16), rgba(255,255,255,0.055));
  color: #eafffb;
  text-align: right;
  box-shadow: 0 18px 44px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
}
.act-choice-card.attack-choice {
  background:
    radial-gradient(circle at 22% 8%, rgba(255,90,95,0.24), transparent 5rem),
    linear-gradient(145deg, rgba(255,90,95,0.16), rgba(255,255,255,0.055));
}
.act-choice-card:disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.72);
  opacity: 0.58;
}
.act-choice-card span,
.attack-planner-head button {
  color: #58ffdd;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
}
.act-choice-card strong {
  font-size: 1.2rem;
}
.act-choice-card small {
  color: rgba(234,255,251,0.72);
  line-height: 1.6;
}
.attack-planner-board {
  display: grid;
  gap: 0.65rem;
}
.attack-planner-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: right;
}
.attack-planner-head h3,
.attack-card-columns h4 {
  margin: 0 0 0.18rem;
}
.attack-planner-head p {
  margin: 0;
  color: rgba(234,255,251,0.68);
  font-size: 0.72rem;
  line-height: 1.55;
}
.attack-planner-head button {
  border: 1px solid rgba(88,255,221,0.2);
  background: rgba(88,255,221,0.08);
}
.attack-drop-row,
.troop-drop-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.attack-drop-zone,
.troop-drop-zone {
  display: grid;
  min-height: 4.6rem;
  place-items: center;
  border: 1px dashed rgba(88,255,221,0.42);
  border-radius: 20px;
  padding: 0.7rem;
  background: rgba(88,255,221,0.06);
  color: #eafffb;
  text-align: center;
}
.attack-drop-zone.is-over,
.troop-drop-zone.is-over,
.troop-drop-zone.is-selected {
  border-color: rgba(255,202,58,0.72);
  background: rgba(255,202,58,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,202,58,0.18), 0 16px 36px rgba(255,202,58,0.08);
}
.attack-drop-zone span,
.troop-drop-zone span {
  color: rgba(88,255,221,0.84);
  font-size: 0.7rem;
  font-weight: 1000;
}
.attack-drop-zone strong,
.troop-drop-zone strong {
  font-size: 0.88rem;
}
.attack-card-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0.65rem;
}
.attack-card-columns > section,
.attack-target-groups article {
  border: 1px solid rgba(88,255,221,0.12);
  border-radius: 20px;
  padding: 0.48rem;
  background: rgba(255,255,255,0.045);
}
.attack-target-groups {
  display: grid;
  gap: 0.45rem;
  max-height: 18rem;
  overflow: auto;
  padding-inline-end: 0.1rem;
}
.attack-target-groups article > strong {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(234,255,251,0.86);
}
.attack-card-list {
  display: grid;
  grid-template-columns: repeat(3, 5.3rem);
  gap: 0.38rem;
  justify-content: center;
}
.attack-plan-card.continent-game-card.real-card {
  width: 5.3rem;
  border: 0;
  padding: 0;
  background: transparent;
}
.attack-plan-card.is-disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.58);
  opacity: 0.5;
}
.attack-plan-card[aria-disabled="true"],
.troop-deploy-card[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.58);
  opacity: 0.5;
}
.attack-plan-card.is-selected {
  outline: 3px solid rgba(88,255,221,0.9);
  outline-offset: 3px;
  filter: saturate(1.25) brightness(1.08);
}
.attack-submit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.troop-deploy-planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.75fr) minmax(10rem, 0.8fr);
  align-items: center;
  gap: 0.45rem;
}
.troop-source-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.troop-source-row p {
  margin: 0;
  color: rgba(234,255,251,0.74);
  font-size: 0.68rem;
  line-height: 1.45;
}
.troop-deploy-card.tactic-real-card {
  width: 4.1rem;
  border: 0;
  padding: 0;
  background: transparent;
}
.troop-deploy-card.is-disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.58);
  opacity: 0.5;
}
.troop-submit-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
}
.troop-count-control {
  display: inline-grid;
  grid-template-columns: 2.4rem 2.8rem 2.4rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(88,255,221,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}
.troop-count-control button {
  border-radius: 0;
  padding: 0.55rem 0.2rem;
  background: rgba(88,255,221,0.12);
  color: #eafffb;
}
.troop-count-control strong {
  text-align: center;
}
.pending-tactic-notice {
  display: grid;
  gap: 0.32rem;
  border: 1px solid rgba(255,202,58,0.28);
  border-radius: 18px;
  padding: 0.7rem 0.85rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,202,58,0.16), transparent 7rem),
    rgba(255,202,58,0.07);
  color: #fff4cf;
  text-align: right;
}
.pending-tactic-notice span {
  color: #ffca3a;
  font-size: 0.7rem;
  font-weight: 1000;
}
.pending-tactic-notice strong {
  color: #fff6db;
}
.pending-tactic-notice p {
  margin: 0;
  color: rgba(234,255,251,0.76);
  font-size: 0.78rem;
  line-height: 1.6;
}
.risk-toast-root {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;
  display: grid;
  width: min(360px, calc(100vw - 2rem));
  gap: 0.55rem;
  pointer-events: none;
}
.risk-action-toast {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(88,255,221,0.2);
  border-radius: 18px;
  padding: 0.72rem 2.2rem 0.72rem 0.85rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(88,255,221,0.18), transparent 8rem),
    rgba(7,20,29,0.94);
  color: #eafffb;
  box-shadow: 0 22px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
  animation: risk-toast-enter 220ms ease both;
}
.risk-action-toast.is-leaving {
  animation: risk-toast-exit 180ms ease both;
}
.risk-action-toast button {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  background: rgba(255,255,255,0.09);
  color: #eafffb;
}
.risk-action-toast span {
  color: #58ffdd;
  font-size: 0.68rem;
  font-weight: 1000;
}
.risk-action-toast p {
  margin: 0.15rem 0 0;
  color: rgba(234,255,251,0.82);
  font-size: 0.82rem;
  line-height: 1.55;
}
@keyframes risk-toast-enter {
  from {
    opacity: 0;
    transform: translateX(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes risk-toast-exit {
  to {
    opacity: 0;
    transform: translateX(1.2rem);
  }
}
.risk-card-tooltip {
  position: fixed;
  z-index: 72;
  display: grid;
  grid-template-columns: minmax(8.4rem, 12rem) minmax(0, 18rem);
  gap: 0.9rem;
  width: min(31.5rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  overflow: hidden auto;
  direction: rtl;
  border: 1px solid rgba(88,255,221,0.24);
  border-radius: 24px;
  padding: 0.75rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(88,255,221,0.18), transparent 9rem),
    radial-gradient(circle at 86% 18%, rgba(255,202,58,0.15), transparent 8rem),
    rgba(5, 13, 20, 0.96);
  color: #eafffb;
  box-shadow: 0 28px 90px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.3rem) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
}
.risk-card-tooltip.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.risk-card-tooltip-art {
  display: block;
  width: 100%;
  align-self: start;
  object-fit: contain;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.38));
}
.risk-card-tooltip-art.continent-preview {
  border-radius: 14px;
}
.risk-card-tooltip-art.tactic-preview {
  border-radius: 12px;
}
.risk-card-tooltip-copy {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}
.risk-card-tooltip-copy span,
.risk-card-tooltip-copy small {
  color: #58ffdd;
  font-size: 0.72rem;
  font-weight: 1000;
}
.risk-card-tooltip-copy h3 {
  margin: 0;
  color: #fff6d8;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
}
.risk-card-tooltip-copy p {
  margin: 0;
  color: rgba(234,255,251,0.78);
  line-height: 1.8;
  font-size: 0.88rem;
}
.risk-card-tooltip-copy strong {
  color: #ffecab;
}
.risk-card-tooltip-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
  margin: 0;
}
.risk-card-tooltip-copy dl div {
  border: 1px solid rgba(88,255,221,0.16);
  border-radius: 14px;
  padding: 0.42rem;
  background: rgba(255,255,255,0.06);
}
.risk-card-tooltip-copy dt {
  color: rgba(234,255,251,0.62);
  font-size: 0.68rem;
  font-weight: 900;
}
.risk-card-tooltip-copy dd {
  margin: 0.1rem 0 0;
  color: #ffecab;
  font-size: 1.15rem;
  font-weight: 1000;
}
.risk-modal-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.risk-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(1, 8, 12, 0.62);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 140ms ease;
}
.risk-modal.is-open {
  opacity: 1;
}
.risk-modal-card {
  width: min(440px, 100%);
  border: 1px solid rgba(88,255,221,0.18);
  border-radius: 26px;
  padding: 1rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(88,255,221,0.18), transparent 9rem),
    rgba(7, 20, 29, 0.96);
  color: #eafffb;
  box-shadow: 0 30px 90px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.08);
}
.risk-modal-card h3 {
  margin: 0 0 0.55rem;
}
.risk-modal-card p {
  margin: 0 0 0.9rem;
  color: rgba(234,255,251,0.76);
  line-height: 1.75;
}
.risk-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.risk-modal-options {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}
.risk-modal-options button {
  text-align: right;
  background: rgba(88,255,221,0.1);
  color: #eafffb;
}
.risk-modal-actions button:first-child {
  background: rgba(255,255,255,0.08);
  color: #eafffb;
}
.risk-dice-roll-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,202,58,0.18), transparent 17rem),
    radial-gradient(circle at 46% 52%, rgba(88,255,221,0.16), transparent 21rem),
    rgba(1, 8, 12, 0.72);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease;
}
.risk-dice-roll-overlay.is-open {
  opacity: 1;
}
.risk-dice-roll-card {
  width: min(620px, 100%);
  border: 1px solid rgba(88,255,221,0.18);
  border-radius: 32px;
  padding: 1.15rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,90,95,0.24), transparent 10rem),
    radial-gradient(circle at 86% 12%, rgba(255,202,58,0.2), transparent 11rem),
    rgba(7, 20, 29, 0.95);
  color: #eafffb;
  box-shadow: 0 34px 110px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.08);
}
.risk-dice-roll-card h3 {
  margin: 0.28rem 0 0.9rem;
  font-size: clamp(1.7rem, 5vw, 3.2rem);
  line-height: 0.95;
}
.risk-dice-roll-card p {
  margin: 0.8rem 0 0.65rem;
  color: rgba(234,255,251,0.75);
}
.risk-dice-roller {
  direction: ltr;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 8.4rem;
  gap: clamp(0.45rem, 1.6vw, 0.9rem);
  perspective: 900px;
}
.risk-rolling-die {
  --die-size: clamp(3.1rem, 7vw, 4.8rem);
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  transform-style: preserve-3d;
  animation: risk-dice-tumble 760ms cubic-bezier(.36,.01,.28,1) infinite;
}
.risk-rolling-die.die-2 {
  animation-delay: -120ms;
}
.risk-rolling-die.die-3 {
  animation-delay: -260ms;
}
.risk-rolling-die.die-4 {
  animation-delay: -390ms;
}
.risk-rolling-die.die-5 {
  animation-delay: -520ms;
}
.risk-rolling-die .face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px solid rgba(5,5,6,0.92);
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.95), transparent 1.4rem),
    linear-gradient(145deg, #fff5df, #d53c32 72%);
  color: #090607;
  font-size: calc(var(--die-size) * 0.2);
  font-weight: 1000;
  line-height: 1.08;
  letter-spacing: 0.16em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 18px 36px rgba(0,0,0,0.28);
  backface-visibility: hidden;
}
.risk-rolling-die .one {
  transform: translateZ(calc(var(--die-size) / 2));
}
.risk-rolling-die .two {
  transform: rotateY(90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-rolling-die .three {
  transform: rotateY(180deg) translateZ(calc(var(--die-size) / 2));
}
.risk-rolling-die .four {
  transform: rotateY(-90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-rolling-die .five {
  transform: rotateX(90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-rolling-die .six {
  transform: rotateX(-90deg) translateZ(calc(var(--die-size) / 2));
}
.risk-dice-roll-overlay.is-resolving .risk-rolling-die {
  animation-duration: 280ms;
  filter: drop-shadow(0 0 18px rgba(88,255,221,0.42));
}
.risk-dice-roll-meter {
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.risk-dice-roll-meter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a5f, #ffca3a, #58ffdd);
  transform-origin: right center;
  animation: risk-dice-meter 1.7s ease-out forwards;
}
@keyframes risk-dice-tumble {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
  }
  24% {
    transform: rotateX(132deg) rotateY(64deg) rotateZ(18deg) translateY(-0.48rem);
  }
  52% {
    transform: rotateX(254deg) rotateY(173deg) rotateZ(91deg) translateY(0.24rem);
  }
  78% {
    transform: rotateX(378deg) rotateY(268deg) rotateZ(146deg) translateY(-0.26rem);
  }
  100% {
    transform: rotateX(520deg) rotateY(360deg) rotateZ(220deg) translateY(0);
  }
}
@keyframes risk-dice-meter {
  from {
    transform: scaleX(0.06);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .risk-rolling-die {
    animation: risk-dice-tumble 1800ms steps(4, end) infinite;
  }
  .risk-dice-roll-overlay,
  .risk-dice-roll-meter span {
    transition: none;
  }
}
.risk-live-command-room .live-private-card-groups {
  display: grid;
  gap: 0.5rem;
}
.risk-live-command-room .live-private-card-groups h4 {
  margin: 0 0 0.3rem;
  color: rgba(234,255,251,0.8);
}
.risk-live-command-room .live-private-continents {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0.34rem;
  justify-content: end;
}
.risk-live-command-room .live-private-continents .continent-game-card.real-card {
  width: 6.5rem;
}
.risk-live-command-room .live-surrendered-panel {
  margin-top: 0;
}
.risk-live-command-room .live-surrendered-panel .surrendered-public {
  margin-top: 0;
}
.risk-live-command-room .live-surrendered-panel div {
  display: grid;
  grid-template-columns: repeat(2, 8rem);
  gap: 0.22rem;
  justify-content: end;
}
.risk-live-command-room .live-surrendered-panel .continent-game-card.real-card {
  width: 8rem;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.risk-live-command-room .live-tactic-actions {
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 7.375rem));
  align-items: start;
  justify-content: center;
  max-height: none;
  overflow: visible;
  gap: 0.42rem;
}
.risk-live-command-room .live-tactic-action-form {
  display: block;
  width: min(100%, 7.375rem);
  min-width: 0;
}
.risk-live-command-room .live-tactic-action-form .tactic-real-card {
  justify-self: center;
  width: min(100%, 7.375rem);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.risk-live-command-room .live-tactic-actions > .tactic-real-card {
  justify-self: center;
  width: min(100%, 7.375rem);
}
.risk-live-command-room .tactic-real-card.is-playable {
  cursor: pointer;
  outline: 2px solid rgba(88,255,221,0.72);
  outline-offset: 2px;
  filter: saturate(1.18) brightness(1.08);
  transition: transform 140ms ease, filter 140ms ease;
}
.risk-live-command-room .tactic-real-card.is-playable:hover {
  transform: translateY(-3px) scale(1.025);
  filter: saturate(1.28) brightness(1.14);
}
.risk-live-command-room .tactic-real-card.is-disabled img {
  filter: grayscale(1) saturate(0.18) brightness(0.62);
  opacity: 0.58;
}
.risk-live-command-room .risk-inline-help {
  color: rgba(234,255,251,0.68);
}

@media (max-width: 980px) {
  .risk-live-command-room .live-inline-form,
  .risk-live-command-room .risk-attack-form,
  .risk-live-command-room .live-inline-actions,
  .risk-live-command-room .live-surrendered-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .risk-card-tooltip {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.65rem;
  }
  .risk-card-tooltip-copy p {
    font-size: 0.8rem;
    line-height: 1.6;
  }
}

/* Live Risk Strike room skin: mirror the selected command-room concept without touching previews. */
.risk-command-room {
  --bg: #061219;
  --panel: rgba(7, 18, 26, 0.78);
  --line: rgba(88,255,221,0.13);
  --text: #ecfffb;
  --muted: rgba(236,255,251,0.66);
  --accent: #ff8b4a;
  --accent-strong: #58ffdd;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 90, 95, 0.22), transparent 23rem),
    radial-gradient(circle at 78% 6%, rgba(88, 255, 221, 0.16), transparent 26rem),
    radial-gradient(circle at 50% 88%, rgba(255, 202, 58, 0.12), transparent 30rem),
    repeating-linear-gradient(0deg, rgba(88,255,221,0.035) 0 1px, transparent 1px 34px),
    #061219;
  color: var(--text);
}
.risk-command-room .risk-room-topbar {
  align-items: center;
  width: min(1680px, calc(100vw - 1.2rem));
  margin-bottom: 0.55rem;
  border: 1px solid rgba(88,255,221,0.13);
  border-radius: 24px;
  padding: 0.58rem 0.8rem;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 70px rgba(0,0,0,0.22);
  backdrop-filter: blur(14px);
}
.risk-command-room .risk-room-topbar h1 {
  margin: 0.12rem 0;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
}
.risk-command-room .risk-room-topbar p,
.risk-command-room .risk-back-link,
.risk-command-room .risk-help-link,
.risk-command-room .risk-inline-help {
  color: var(--muted);
}
.risk-command-room .risk-help-link {
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  background: rgba(88,255,221,0.1);
  color: #58ffdd;
  font-weight: 900;
}
.risk-command-room .risk-room-shell {
  width: min(1680px, calc(100vw - 1.2rem));
  grid-template-columns: minmax(540px, 1.58fr) minmax(300px, 0.66fr);
  gap: 0.65rem;
}
.risk-command-room .risk-main-column,
.risk-command-room .risk-side-column,
.risk-command-room .risk-player-list {
  gap: 0.65rem;
}
.risk-command-room .risk-panel {
  border-color: rgba(88,255,221,0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(88,255,221,0.09), transparent 10rem),
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(88,255,221,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.28);
}
.risk-command-room .risk-panel h2,
.risk-command-room .risk-panel h3 {
  color: #f4fffc;
}
.risk-command-room .risk-phase-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}
.risk-command-room .risk-phase-panel h2 {
  margin-bottom: 0.25rem;
}
.risk-command-room .risk-phase-panel p {
  margin: 0;
  color: var(--muted);
}
.risk-command-room button {
  background: linear-gradient(135deg, #ffca3a, #ff6b5e);
  color: #140c10;
  font-weight: 900;
}
.risk-command-room input,
.risk-command-room select {
  border-color: rgba(88,255,221,0.16);
  background: rgba(255,255,255,0.08);
  color: #ecfffb;
}
.risk-command-room option {
  color: #10161a;
}
.risk-command-room .risk-battle-panel {
  background:
    radial-gradient(circle at 50% 8%, rgba(88,255,221,0.12), transparent 18rem),
    rgba(3, 12, 18, 0.72);
}
.risk-command-room .risk-battle-side-card {
  min-height: 300px;
  border-color: color-mix(in srgb, var(--continent-theme) 38%, rgba(88,255,221,0.12));
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--continent-theme) 18%, transparent), transparent 11rem),
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 64px rgba(0,0,0,0.32);
}
.risk-command-room .risk-battle-side-card header span {
  color: #58ffdd;
}
.risk-command-room .risk-battle-side-card footer {
  color: var(--muted);
}
.risk-command-room .risk-battle-contributors b,
.risk-command-room .risk-card-token,
.risk-command-room .risk-tactic-chip {
  background: rgba(255,255,255,0.09);
  color: #ecfffb;
}
.risk-command-room .risk-battle-versus b {
  background: rgba(255,202,58,0.16);
  color: #ffca3a;
  box-shadow: inset 0 0 0 1px rgba(255,202,58,0.18), 0 12px 28px rgba(0,0,0,0.2);
}
.risk-command-room .risk-actions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.risk-command-room .risk-owned-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.risk-command-room .risk-hand-panel section:first-child {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-content: start;
  justify-content: start;
  gap: 0.48rem;
}
.risk-command-room .risk-hand-panel section:first-child h3,
.risk-command-room .risk-hand-panel section:last-child h3 {
  grid-column: 1 / -1;
}
.risk-command-room .risk-owned-continent-card.continent-game-card.real-card {
  width: 6.35rem;
}
.risk-command-room .risk-tactic-card-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}
.risk-command-room .risk-tactic-card-list .tactic-real-card {
  width: min(100%, 5.8rem);
}
.risk-command-room .risk-player-card {
  border-color: rgba(88,255,221,0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 0%, rgba(88,255,221,0.11), transparent 7rem),
    rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.risk-command-room .risk-player-card.is-current {
  outline: 1px solid rgba(255,202,58,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 3px rgba(255,202,58,0.08);
}
.risk-command-room .risk-player-card p {
  margin: 0.38rem 0;
  color: var(--muted);
}
.risk-command-room .risk-public-continent-list.public-continent-list {
  grid-template-columns: repeat(3, max-content);
  gap: 0.36rem;
  justify-content: end;
}
.risk-command-room .risk-public-continent-list .continent-game-card.real-card {
  width: 5.25rem;
}
.risk-command-room .risk-surrendered-card-list {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0.35rem;
  justify-content: end;
}
.risk-command-room .risk-surrendered-card-list .continent-game-card.real-card {
  width: 5.7rem;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.risk-command-room .risk-dice-grid {
  margin-top: 0.8rem;
}
.risk-command-room .risk-dice-grid > div,
.risk-command-room .risk-compare-list {
  border: 1px solid rgba(88,255,221,0.11);
  border-radius: 18px;
  padding: 0.75rem;
  background: rgba(255,255,255,0.055);
}

@media (max-width: 1100px) {
  .risk-command-room .risk-room-shell,
  .risk-command-room .risk-actions-grid,
  .risk-command-room .risk-owned-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .risk-command-room .risk-phase-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .risk-command-room .risk-hand-panel section:first-child {
    grid-template-columns: repeat(3, max-content);
  }
}

/* The live room should use the same three-zone command-room geometry as draw-designs/2. */
@media (min-width: 1101px) {
  .risk-command-room {
    height: 100svh;
    overflow: hidden;
    padding: 0.5rem 0;
  }
  .risk-command-room .risk-room-topbar {
    position: fixed;
    top: 0.62rem;
    right: 50%;
    z-index: 10;
    width: auto;
    min-width: 0;
    max-width: min(42rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    transform: translateX(50%);
    gap: 0.75rem;
  }
  .risk-command-room .risk-room-topbar h1,
  .risk-command-room .risk-room-topbar .risk-back-link {
    display: none;
  }
  .risk-command-room .risk-room-topbar p {
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .risk-command-room .risk-help-link {
    padding: 0.32rem 0.62rem;
    font-size: 0.82rem;
  }
  .risk-command-room .risk-room-shell {
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(520px, 1.55fr) minmax(320px, 0.95fr);
    grid-auto-rows: min-content;
    gap: 0.55rem;
    height: calc(100svh - 1rem);
    width: min(1680px, calc(100vw - 1rem));
    overflow: hidden;
  }
  .risk-command-room .risk-main-column,
  .risk-command-room .risk-side-column {
    display: contents;
  }
  .risk-command-room .risk-room-shell > *,
  .risk-command-room .risk-main-column > *,
  .risk-command-room .risk-side-column > * {
    direction: rtl;
    min-width: 0;
  }
  .risk-command-room .risk-phase-panel {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    padding-block: 0.68rem;
  }
  .risk-command-room .risk-battle-panel {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
  }
  .risk-command-room .risk-actions-grid {
    grid-column: 2;
    grid-row: 3 / span 5;
    min-height: 0;
    overflow: auto;
    padding-inline-end: 0.1rem;
  }
  .risk-command-room .risk-actions-grid .risk-panel {
    min-height: 0;
  }
  .risk-command-room .risk-hand-panel {
    grid-column: 1;
    grid-row: 2 / span 6;
    min-height: 0;
    overflow: auto;
  }
  .risk-command-room .risk-main-column > .risk-panel:not(.risk-phase-panel):not(.risk-battle-panel):not(.risk-hand-panel) {
    grid-column: 2;
    min-height: 0;
    overflow: auto;
  }
  .risk-command-room .risk-side-column > .risk-panel:nth-child(1) {
    grid-column: 3;
    grid-row: 1 / span 8;
    min-height: 0;
    overflow: auto;
  }
  .risk-command-room .risk-side-column > .risk-panel:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
  }
  .risk-command-room .risk-side-column > .risk-panel:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: auto;
  }
  .risk-command-room .risk-join-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    width: auto;
    margin: 0;
    place-items: center;
    pointer-events: none;
    background: radial-gradient(circle at 50% 38%, rgba(3,12,18,0.52), transparent 22rem);
  }
  .risk-command-room .risk-join-overlay .risk-panel {
    width: min(460px, calc(100vw - 2rem));
    pointer-events: auto;
  }
  .risk-command-room .risk-side-column > .risk-panel:nth-child(1),
  .risk-command-room .risk-side-column > .risk-panel:nth-child(2),
  .risk-command-room .risk-hand-panel,
  .risk-command-room .risk-battle-panel,
  .risk-command-room .risk-phase-panel {
    border-radius: 24px;
  }
}