@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-border: var(--border);
  --color-input: var(--border);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-ring: var(--primary);
  --color-secondary: var(--muted);
  --color-secondary-foreground: var(--foreground);
  --color-accent: var(--muted);
  --color-accent-foreground: var(--foreground);
  --font-sans: Arial, Helvetica, sans-serif;
}
:root {
  --background: #101311;
  --foreground: #eeeae0;
  --primary: #ddbc77;
  --primary-foreground: #181b15;
  --border: #34372e;
  --muted: #23281f;
  --muted-foreground: #a1a59a;
  --radius: 0.25rem;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
button,
a,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.table-shell {
  max-width: 1720px;
  margin: auto;
  padding: 0 44px;
}
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 108px;
  border-bottom: 1px solid var(--border);
}
.wordmark {
  font-size: 43px;
  letter-spacing: 10px;
  font-weight: 500;
  line-height: 1;
}
.wordmark span {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: #b7b7a7;
  margin-top: 12px;
}
.masthead-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #c6c6b9;
}
.build-revision {
  color: var(--muted-foreground);
  font-size: 12px;
  white-space: nowrap;
}
.masthead-right a {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: 28px;
}
.table-sounds { position: relative; max-width: 100%; font-size: 14px; }
.table-sounds summary { display: flex; align-items: center; gap: 8px; }
.table-sounds summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.table-sounds-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  display: grid; gap: 12px; width: min(280px, calc(100vw - 48px));
  padding: 16px; border: 1px solid var(--border); border-radius: 8px;
  background: #141814; color: #f5ecda; box-shadow: 0 8px 28px #0008;
  font-size: 14px; line-height: 1.5;
}
.table-sounds-panel p { margin: 0; }
.live-table .masthead { flex-wrap: wrap; gap: 12px; }
.live-table .masthead-right { flex-wrap: wrap; }
@media (max-width: 950px) {
  .live-table .masthead-right { position: relative; }
  .table-sounds { position: static; }
  .table-sounds-panel { left: 0; right: auto; }
}
.status-dot {
  width: 6px;
  height: 6px;
  background: #9ab895;
  border-radius: 50%;
}
.lobby-grid {
  display: grid;
  grid-template-columns: 285px minmax(380px, 1fr) 300px;
  min-height: 730px;
}
.faction-sidebar {
  padding: 36px 28px 32px 0;
  border-right: 1px solid var(--border);
}
.eyebrow {
  font-size: 11px;
  color: #a5a795;
  letter-spacing: 2px;
  font-weight: 600;
}
h1 {
  font-size: 33px;
  line-height: 1.2;
  font-family: Georgia, serif;
  font-weight: 400;
  margin: 22px 0 28px;
}
h2 {
  font-size: 28px;
  font-family: Georgia, serif;
  font-weight: 400;
  margin: 20px 0 12px;
}
.faction-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faction-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  width: 100%;
  color: var(--foreground);
  padding: 12px 9px;
  text-align: left;
}
.faction-choice:hover {
  background: #1d231b;
}
.faction-choice.selected {
  background: #222b22;
  border-color: #485343;
}
.faction-choice > span:nth-child(2) {
  flex: 1;
}
.faction-choice strong {
  font-size: 15px;
  display: block;
  font-weight: 500;
}
.faction-choice small {
  font-size: 11px;
  color: #a8afa1;
  display: block;
  margin-top: 5px;
}
.faction-choice svg {
  color: #6c7764;
}
.sigil {
  display: grid;
  place-items: center;
  flex: 0 0 33px;
  height: 36px;
  border: 1px solid var(--faction-color);
  color: var(--faction-color);
  font-family: Georgia, serif;
  font-size: 22px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.planet-stage {
  position: relative;
  padding: 28px 30px 20px;
  background: radial-gradient(ellipse at 50% 38%, #33332466, transparent 65%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage-top,
.stage-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 10px;
  letter-spacing: 2px;
  color: #919581;
}
.stage-top span:first-child {
  color: #d0c09b;
}
.stage-bottom {
  margin-top: auto;
  padding-top: 30px;
}
.planet-preview {
  position: relative;
  flex-shrink: 0;
  width: min(100%, 490px);
  aspect-ratio: 1;
  margin-top: 30px;
  border-radius: 50%;
  border: 1px solid #666144;
  background:
    repeating-conic-gradient(
      from 0deg,
      #82724900 0deg 19.8deg,
      #88764d66 19.8deg 20deg
    ),
    radial-gradient(
      circle,
      #292b23 0 14%,
      #53503a 14.1% 14.4%,
      #373727 14.5% 34%,
      #605538 34.1% 34.4%,
      #343526 34.5% 57%,
      #58543b 57.1% 57.4%,
      #292f22 57.5%
    );
  box-shadow:
    0 0 0 14px #1a1f1780,
    0 0 0 15px #343a2b;
}
.orbital-ring {
  position: absolute;
  border: 1px dashed #99937142;
  border-radius: 50%;
}
.ring-one {
  inset: 8%;
}
.ring-two {
  inset: 22%;
}
.planet-core {
  position: absolute;
  inset: 36%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #c5bc9c;
  background: #293127;
  border: 1px solid #86805b;
  border-radius: 50%;
}
.planet-core span {
  font-size: 8px;
  letter-spacing: 1px;
}
.map-point {
  position: absolute;
  text-align: center;
  color: #e4c48a;
  font-size: 10px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-direction: column;
  text-shadow: 0 2px 5px #000;
}
.point-0 {
  left: 56%;
  top: 13%;
}
.point-1 {
  left: 76%;
  top: 34%;
}
.point-2 {
  left: 59%;
  top: 77%;
}
.point-3 {
  left: 12%;
  top: 62%;
}
.point-4 {
  left: 12%;
  top: 28%;
}
.north-label {
  position: absolute;
  top: -23px;
  left: 49%;
  font-size: 9px;
  color: #ccc3a1;
}
.storm-line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 280deg,
    transparent 0deg,
    #b99a4055 1deg 19deg,
    transparent 20deg
  );
}
.faction-feature {
  width: 100%;
  max-width: 440px;
  margin-top: 32px;
  border-left: 2px solid var(--faction-color);
  padding-left: 22px;
}
.faction-feature h2 {
  font-size: 32px;
  color: var(--faction-color);
  margin: 10px 0;
}
.faction-feature p {
  font-size: 14px;
  color: #bdc0b0;
  line-height: 1.6;
  margin: 0;
}
.feature-stats {
  display: flex;
  gap: 36px;
  margin-top: 18px;
}
.feature-stats span {
  font-size: 11px;
  color: #a3aa97;
}
.feature-stats b {
  display: block;
  font-size: 23px;
  font-weight: 400;
  color: #e3dfd0;
  margin-bottom: 5px;
}
.setup-panel {
  padding: 36px 0 28px 28px;
  border-left: 1px solid var(--border);
}
.setup-panel h2 {
  margin-top: 24px;
}
.muted {
  color: #b6bbac;
  font-size: 14px;
  line-height: 1.6;
}
.setup-panel > label {
  display: block;
  font-size: 13px;
  margin: 24px 0 10px;
}
input[data-slot='input'] {
  height: 44px;
  background: #171c15;
  border-radius: 3px;
  font-size: 14px;
  border-color: #454a3a;
}
.setting-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-top: 28px;
}
.pill {
  font-size: 10px;
  letter-spacing: 1px;
  background: #303626;
  border: 1px solid #555d41;
  color: #c5d19b;
  padding: 4px 8px;
  border-radius: 3px;
}
.fine {
  font-size: 11px;
  color: #989f8d;
  line-height: 1.6;
}
.expansion-list {
  display: grid;
  gap: 15px;
  margin: 20px 0 30px;
}
.expansion {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #c5c9bc;
  cursor: pointer;
}
.expansion input {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
}
.primary-action {
  width: 100%;
  min-height: 46px;
  border-radius: 3px;
  gap: 12px;
  font-size: 14px;
}
.primary-action svg:last-child {
  margin-left: auto;
}
.join-divider {
  font-size: 10px;
  text-align: center;
  letter-spacing: 1.4px;
  margin: 26px 0;
  color: #949b85;
}
.join-row {
  display: flex;
  gap: 8px;
}
.join-row button {
  height: 44px;
  width: 48px;
  border-radius: 3px;
}
.table-note {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.8;
  color: #a8af9c;
}
.development-note.advanced-preview-note {
  font-size: 0.875rem;
  line-height: 1.5;
}
.development-note {
  font-size: 11px;
  line-height: 1.6;
  color: #b5a477;
  margin-top: 24px;
}
.notice {
  padding: 12px;
  border: 1px solid #807145;
  font-size: 13px;
  line-height: 1.6;
  color: #efd597;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 23px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: #919986;
  letter-spacing: 0.4px;
}
@media (min-width: 1450px) {
  .lobby-grid {
    grid-template-columns: 300px minmax(460px, 1fr) 340px;
    min-height: 800px;
  }
  .planet-preview {
    width: 490px;
  }
}
@media (max-width: 1150px) {
  .table-shell {
    padding: 0 24px;
  }
  .lobby-grid {
    grid-template-columns: 240px minmax(310px, 1fr) 270px;
  }
  .planet-stage {
    padding: 28px 20px;
  }
  .faction-sidebar {
    padding-right: 16px;
  }
  .setup-panel {
    padding-left: 20px;
  }
  .faction-choice small {
    font-size: 10px;
  }
  .planet-core svg {
    width: 55px;
  }
  .stage-top span:last-child {
    display: none;
  }
}
@media (max-width: 950px) {
  .lobby-grid {
    grid-template-columns: 1fr 1fr;
  }
  .planet-stage {
    grid-column: 1/-1;
    grid-row: 1;
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .stage-top,
  .stage-bottom {
    grid-column: 1/-1;
  }
  .planet-preview {
    margin: 15px 0;
  }
  .faction-feature {
    margin: 0;
  }
  .faction-sidebar {
    border-top: 1px solid var(--border);
  }
  .setup-panel {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-left: 28px;
  }
  .faction-choice {
    max-width: 330px;
  }
}
@media (max-width: 600px) {
  .table-shell {
    padding: 0 18px;
  }
  .masthead {
    min-height: 88px;
  }
  .wordmark {
    font-size: 32px;
  }
  .wordmark span {
    font-size: 8px;
  }
  .masthead-right {
    font-size: 0;
    gap: 0;
  }
  .masthead-right a {
    font-size: 12px;
    margin: 0;
  }
  .status-dot {
    display: none;
  }
  .planet-stage {
    display: flex;
    padding: 24px 12px;
    gap: 12px;
    min-height: 0;
  }
  .planet-preview {
    width: 78%;
    margin: 22px 0;
  }
  .faction-feature {
    margin-top: 20px;
  }
  .faction-feature h2 {
    font-size: 26px;
  }
  .stage-bottom {
    display: none;
  }
  .lobby-grid {
    display: flex;
    flex-direction: column;
  }
  .faction-sidebar {
    order: 1;
    border-right: 0;
    padding: 25px 0;
  }
  .faction-sidebar h1 {
    font-size: 28px;
    margin: 12px 0 22px;
  }
  .faction-sidebar h1 br {
    display: none;
  }
  .faction-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .faction-choice {
    padding: 10px 6px;
    gap: 9px;
  }
  .faction-choice strong {
    font-size: 13px;
  }
  .faction-choice small,
  .faction-choice svg {
    display: none;
  }
  .setup-panel {
    order: 2;
    padding: 26px 0;
  }
  .planet-stage {
    order: 0;
  }
  .feature-stats {
    gap: 28px;
  }
  footer {
    font-size: 10px;
    flex-direction: column;
  }
}
/* Shared play surface */
.wordmark-button {
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
}
.game-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-size: 14px;
}
.phase-track {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding-bottom: 20px;
}
.phase-track > span {
  flex: 1;
  display: flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  color: #7e8a77;
  border-bottom: 2px solid #303c2b;
  padding: 8px 5px 12px;
}
.phase-track b {
  font-weight: 400;
}
.phase-track .current {
  color: #f0cf86;
  border-color: #d7b16c;
}
.phase-track .done {
  color: #b8c5a8;
}
.play-grid {
  display: grid;
  grid-template-columns: 210px minmax(450px, 1fr) 280px;
  gap: 24px;
}
.players-panel {
  border-right: 1px solid var(--border);
  padding-right: 22px;
}
.player-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.player-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.player-heading strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--faction-color);
}
.player-heading small {
  font-size: 12px;
  display: block;
  color: #a4ac99;
  margin-top: 4px;
}
.player-heading span:nth-child(2) {
  flex: 1;
}
.player-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #9faa91;
  margin-top: 14px;
}
.active-player {
  background: linear-gradient(90deg, #d1b26313, transparent);
  border-left: 2px solid var(--faction-color);
  padding-left: 10px;
}
.resource-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e0bf78;
  margin: 26px 0 14px;
}
.resource-readout strong {
  font-size: 30px;
  font-weight: 400;
}
.resource-readout span {
  font-size: 12px;
  color: #adb39e;
}
.board-column {
  min-width: 0;
}
.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #b3baa5;
}
.board-toolbar > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-viewport {
  overflow: auto;
  aspect-ratio: 1;
  scrollbar-width: thin;
  border-radius: 50%;
  background: #272d2050;
  box-shadow: 0 0 45px #0006;
}
.game-board {
  display: block;
  min-width: 100%;
  height: auto;
}
.territory {
  cursor: pointer;
  outline: none;
}
.territory polygon {
  fill: #575f3530;
  stroke: #ac9f6777;
  stroke-width: 1.5;
  transition:
    fill 0.2s,
    stroke 0.2s;
}
.territory.rock polygon {
  fill: #272f26b0;
  stroke: #b6a879;
}
.territory.stronghold polygon {
  fill: #756638c0;
  stroke: #ebcd84;
  stroke-width: 3;
}
.territory.polar polygon {
  fill: #a4a58280;
}
.territory.selected polygon,
.territory:hover polygon,
.territory:focus polygon {
  fill: #c8ad5b80;
  stroke: #ffdfa1;
  stroke-width: 3;
}
.territory text {
  fill: #eee4c5;
  font:
    13px Arial,
    sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: #242c21;
  stroke-width: 2px;
  stroke-linejoin: round;
}
.sector-label {
  font:
    14px Arial,
    sans-serif;
  fill: #dbcc9a;
  text-anchor: middle;
  pointer-events: none;
}
.force-token circle {
  stroke: #111910;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px #0006);
}
.force-token text,
.spice-amount {
  font:
    bold 13px Arial,
    sans-serif;
  fill: #161c13;
}
.storm-overlay {
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.territory-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.territory-detail h3 {
  font:
    24px Georgia,
    serif;
  margin: 8px 0;
}
.territory-units {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  min-height: 24px;
  margin-top: 12px;
}
.action-panel {
  border-left: 1px solid var(--border);
  padding-left: 24px;
  padding-bottom: 24px;
}
.action-panel h2 {
  font-size: 26px;
}
.action-panel label {
  font-size: 13px;
  display: block;
  margin: 16px 0 8px;
}
.action-panel label input,
.action-panel select,
.action-panel textarea {
  margin-top: 8px;
}
.action-panel select,
.action-panel textarea {
  width: 100%;
  background: #1b2118;
  color: #e5e4d3;
  border: 1px solid #49513e;
  border-radius: 3px;
  padding: 10px 8px;
  font-size: 13px;
  min-height: 42px;
}
.game-action {
  width: 100%;
  min-height: 40px;
  height: auto;
  white-space: normal;
  margin: 7px 0;
  border-radius: 3px;
  font-size: 13px;
  padding: 10px 12px;
  justify-content: space-between;
  gap: 8px;
}
.game-action + .game-action {
  background: #283121;
  color: #d4dabe;
  border: 1px solid #485139;
}
.auction-card {
  padding: 20px;
  border: 1px solid #6d6847;
  background: #393b2333;
  margin: 20px 0;
}
.auction-card h3 {
  font:
    24px Georgia,
    serif;
  margin: 20px 0;
}
.auction-card strong {
  font-size: 34px;
  color: #d6b973;
  font-weight: 400;
}
.auction-card small {
  font-size: 13px;
  color: #b2baa1;
}
.battle-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #e0ba75;
}
.revealed-plans { min-width: 0; padding: 20px; scroll-margin-top: 16px; }
.revealed-plan-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.battle-display-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.5; text-decoration: underline; margin: 4px 0; }
#table-decisions { scroll-margin-top: 16px; }
.revealed-plans-help { font-size: 16px !important; line-height: 1.6; }
.revealed-plans-help a { text-decoration: underline; }
.revealed-plan {
  min-width: 0;
  border: 1px solid #70633f;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  background: #181f19;
}
.revealed-plan > h4 { margin: 0 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.revealed-plan-detail { display: block; font-size: 16px; line-height: 1.6; color: #d0d5c7; margin: 8px 0; }
.revealed-plan-pieces { display: grid; gap: 14px; margin: 16px 0; min-width: 0; }
.revealed-plan-leader { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; min-width: 0; }
.revealed-dial {
  flex: 0 0 116px; align-self: center; width: 116px; height: 116px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 5px double #c5a66d; border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #394331, #11170f);
  box-shadow: inset 0 0 0 5px #222b1d;
}
.revealed-dial dt { font-size: 14px; color: #e1d2b3; }
.revealed-dial dd { margin: 0; font: 36px/1.2 Georgia, serif; color: #fff0c9; }
.revealed-plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.revealed-piece {
  min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 1px solid #a18b62; border-radius: 12px; background: linear-gradient(145deg, #35352a, #151b16);
}
.revealed-piece-weapon { background: linear-gradient(145deg, #512f28, #211b19); }
.revealed-piece-defense { background: linear-gradient(145deg, #284544, #18231f); }
.revealed-piece-leader { background: linear-gradient(145deg, #4b3c23, #221e15); }
.revealed-piece-utility { background: linear-gradient(145deg, #38344b, #1d1d26); }
.revealed-piece-empty { border-style: dashed; background: #171c17; }
.revealed-plan-leader > .revealed-piece { flex: 1 1 210px; }
.revealed-piece .revealed-piece-label { margin: 0; font-size: 14px !important; line-height: 1.5; color: #ebd4a4; }
.revealed-piece h4 { margin: 0; font: 22px/1.25 Georgia, serif; color: #fff1d3; overflow-wrap: anywhere; }
.revealed-piece .revealed-piece-rules { margin: 0; font-size: 16px !important; line-height: 1.6; color: #eee5d2; }
.revealed-piece > button { margin-top: auto; align-self: stretch; min-height: 44px; }
.revealed-leader { display: flex; flex-flow: row wrap; align-items: center; }
.revealed-leader > div { flex: 1 1 120px; min-width: 0; }
.revealed-leader > button { flex: 1 0 100%; }
.prescience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prescience button {
  font-size: 11px;
}
.player-console {
  margin-top: 28px;
  border-top: 1px solid var(--border);
}
.draw-piles {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.draw-piles dl { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.draw-piles dt { font-size: 0.875rem; }
.draw-piles dd { margin: 2px 0 0; font-size: 1rem; }
.draw-piles strong { color: #e0c384; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.draw-piles p { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; }
.draw-piles a { text-decoration: underline; text-underline-offset: 3px; }
.console-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
}
.console-tabs button {
  background: none;
  border: 0;
  color: #9ca68d;
  font-size: 14px;
  padding: 18px 0;
  border-bottom: 2px solid transparent;
}
.console-tabs button.selected {
  color: #e0c384;
  border-color: #e0c384;
}
.hand-grid {
  display: flex;
  gap: 16px;
  overflow: auto;
  padding: 24px 0;
}
.hand-browse { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-top: 16px; }
.hand-browse label { display: grid; gap: 6px; flex: 1 1 180px; min-width: 0; font-size: 0.875rem; }
.hand-browse input, .hand-browse select { width: 100%; min-height: 44px; font-size: 1rem; }
.hand-browse-results { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex: 1 1 100%; font-size: 1rem; }
.hand-browse-results button { min-height: 44px; font-size: 1rem; }
.hand-browse-results a { text-decoration: underline; text-underline-offset: 3px; }
.hand-browse-empty { font-size: 1rem; line-height: 1.5; }
.hand-grid:focus-visible { outline: 2px solid #e0c384; outline-offset: 3px; }
.treachery-card {
  flex: 0 0 240px;
  min-height: 210px;
  background: linear-gradient(145deg, #343a2b, #171e15);
  border: 1px solid #626243;
  border-radius: 6px;
  padding: 18px 14px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.treachery-card:hover {
  transform: translateY(-5px);
  border-color: #dbc57e;
}
.treachery-card h3 {
  font:
    21px/1.2 Georgia,
    serif;
  margin: 16px 0;
  color: #e7d6a7;
}
.card-mark {
  display: block;
  font:
    50px Georgia,
    serif;
  text-align: center;
  color: #bca264;
  margin: 8px 0;
}
.treachery-card button {
  font-size: 12px;
  width: 100%;
  margin-top: 10px;
}
.traitor-list {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #d7b58b;
  padding: 8px 0 24px;
}
.game-log {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  max-height: 380px;
  overflow: auto;
}
.game-log li {
  padding: 12px 0;
  border-bottom: 1px solid #293323;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  gap: 24px;
}
.game-log li > span {
  font: 12px monospace;
  color: #83916e;
}
.coverage-copy {
  max-width: 800px;
  padding: 16px 0 28px;
  font-size: 15px;
  line-height: 1.7;
  color: #bbc3ac;
}
.coverage-copy h3 {
  font:
    24px Georgia,
    serif;
  color: #e4d5ad;
}
.coverage-copy a {
  color: #e4c782;
  display: flex;
  align-items: center;
  gap: 8px;
}
.floating-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 16px 20px;
  background: #3a3424;
  border: 1px solid #baa469;
  box-shadow: 0 12px 50px #0008;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  gap: 24px;
  z-index: 30;
  line-height: 1.6;
}
.floating-notice button {
  background: none;
  border: 0;
  color: inherit;
  font-size: 22px;
}
.rule-page {
  max-width: 1000px;
  margin: auto;
  padding: 40px 24px;
  line-height: 1.7;
}
.rule-page a {
  color: #e1c37b;
}
.rule-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rule-page th,
.rule-page td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
@media (max-width: 1150px) {
  .play-grid {
    grid-template-columns: 170px minmax(330px, 1fr) 245px;
    gap: 16px;
  }
  .action-panel {
    padding-left: 16px;
  }
  .players-panel {
    padding-right: 12px;
  }
  .phase-track {
    gap: 5px;
  }
  .phase-track > span {
    font-size: 10px;
  }
  .player-heading {
    gap: 8px;
  }
  .player-heading strong {
    font-size: 12px;
  }
}
@media (max-width: 950px) {
  .play-grid {
    grid-template-columns: 1fr 260px;
  }
  .players-panel {
    grid-column: 1/-1;
    display: flex;
    overflow: auto;
    gap: 16px;
    border: 0;
    padding: 0;
  }
  .players-panel > .eyebrow,
  .players-panel > .fine {
    display: none;
  }
  .player-card {
    min-width: 150px;
    border: 1px solid var(--border);
    padding: 14px;
  }
  .player-card:has(.lobby-bot-configuration[open]) {
    flex: 0 0 min(20rem, calc(100vw - 3rem));
  }
  .resource-readout {
    margin: 0;
    min-width: 120px;
  }
  .phase-track > span {
    min-width: 110px;
  }
  .board-viewport {
    margin-top: 12px;
  }
}
@media (max-width: 600px) {
  .play-grid {
    display: flex;
    flex-direction: column;
  }
  .board-column {
    order: 1;
  }
  .players-panel {
    order: 0;
  }
  .action-panel {
    order: 2;
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .live-table .masthead {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
  }
  .live-table .masthead-right {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0;
  }
  .live-table .masthead-right .status-dot {
    display: none;
  }
  .live-table .masthead-right button {
    font-size: 12px;
  }
  .game-banner {
    font-size: 12px;
    align-items: start;
  }
  .game-banner .eyebrow {
    font-size: 10px;
  }
  .phase-track > span {
    min-width: 95px;
    font-size: 10px;
  }
  .player-card {
    min-width: 140px;
  }
  .player-console {
    margin-top: 10px;
  }
  .console-tabs {
    gap: 20px;
  }
  .console-tabs button {
    font-size: 12px;
  }
  .treachery-card {
    flex-basis: min(78vw, 240px);
  }
  .rule-page table {
    font-size: 12px;
  }
  .rule-page th,
  .rule-page td {
    padding: 10px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Original environmental artwork; motion stays out of the decision controls. */
.table-shell:not(.live-table) .planet-stage {
  background-image:
    linear-gradient(180deg, #101811a8, #101811c2 55%, #101311 95%),
    url('/art/arrakis-dusk.png');
  background-size: cover;
  background-position: 48% 50%;
}
.planet-preview {
  background-color: #242e21;
  background-image:
    repeating-conic-gradient(
      from 0deg,
      #82724900 0deg 19.8deg,
      #cab47655 19.8deg 20deg
    ),
    linear-gradient(#334029aa, #1c271bcc), url('/art/arrakis-terrain.png');
  background-size: cover;
}
.lobby-grid,
.play-grid {
  animation: table-enter 0.55s ease-out both;
}
.force-token {
  animation: force-arrive 0.35s ease-out;
}
.treachery-card {
  animation: card-arrive 0.35s ease-out both;
}
.status-dot {
  box-shadow: 0 0 8px #9ab89577;
}
.current b {
  color: #ffda86;
}
.planet-stage .faction-feature {
  background: linear-gradient(90deg, #101811a8, transparent);
  padding-top: 10px;
  padding-bottom: 10px;
}
.planet-stage .faction-feature .eyebrow {
  color: #b9c1a8;
}
@keyframes table-enter {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes force-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes card-arrive {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-grid,
  .play-grid,
  .force-token,
  .treachery-card {
    animation: none;
  }
}

.action-panel .decision-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.8rem 0;
  line-height: 1.5;
}
.action-panel .decision-checkbox input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: var(--primary);
  margin: 0;
}
.alliance-funding {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem;
}
.alliance-funding summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 0.8rem;
  line-height: 1.5;
}
.alliance-funding[open] summary {
  margin-bottom: 0.8rem;
}

.help-tip {
  display: inline-flex;
  vertical-align: middle;
  color: var(--primary);
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: help;
}
.help-tip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.game-help-tooltip {
  background: #23281f;
  color: #eeeae0;
  border: 1px solid #6b634b;
  max-width: min(290px, calc(100vw - 24px));
  padding: 12px 14px;
  line-height: 1.6;
}
.phase-guidance {
  margin: 0 0 18px;
  font-size: 12px;
  color: #b6bfa9;
}
.phase-guidance summary {
  cursor: pointer;
  color: var(--primary);
}
.phase-guidance p {
  margin: 10px 0;
  line-height: 1.6;
}
.reference-page {
  max-width: 1280px;
  margin: auto;
  padding: 48px 5vw 90px;
}
.reference-header {
  max-width: 830px;
  padding-bottom: 38px;
}
.reference-header > a {
  font-size: 12px;
  color: #b6bfa9;
}
.reference-header .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 42px;
}
.reference-header h1 {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.08;
  margin: 20px 0;
}
.reference-header h1 em {
  color: var(--primary);
  font-weight: normal;
}
.reference-header p {
  max-width: 650px;
  line-height: 1.7;
  color: #b6bfa9;
}
.reference-header .reference-status {
  font-size: 12px;
}
.reference-status a {
  color: var(--primary);
  display: inline;
}
.reference-status svg {
  display: inline;
}
.reference-layout {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.reference-nav,
.reference-results {
  min-width: 0;
}
.reference-nav {
  position: sticky;
  top: 24px;
}
.reference-nav label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 10px;
}
.reference-nav nav {
  display: grid;
  gap: 4px;
  margin-top: 20px;
}
.reference-nav nav button {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b6bfa9;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}
.reference-nav nav button[aria-pressed='true'] {
  border-color: #5d644a;
  background: #283022;
  color: #ead9ae;
}
.reference-nav nav button span {
  opacity: 0.6;
}
.source-links {
  margin-top: 28px;
  font-size: 12px;
}
.source-links summary {
  cursor: pointer;
  color: var(--primary);
}
.source-links a {
  display: block;
  padding-top: 12px;
  color: #b6bfa9;
}
.rule-topic {
  scroll-margin-top: 28px;
  border-top: 1px solid var(--border);
  padding: 22px 0;
}
.rule-topic:target {
  border-color: var(--primary);
  background: #c9a86908;
}
.rule-topic summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 85px;
}
.rule-topic summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 1px;
  color: var(--primary);
  font-size: 20px;
}
.rule-topic details[open] > summary::after {
  content: '−';
}
.rule-topic h2 {
  font-size: 23px;
  line-height: 1.3;
  margin: 9px 0;
}
.rule-topic summary p {
  color: #b6bfa9;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}
.coverage-label {
  display: inline-block;
  font-family: sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid #4e5546;
  color: #b6bfa9;
  border-radius: 4px;
  padding: 3px 6px;
}
.coverage-implemented {
  color: #89c69e;
  border-color: #436650;
}
.coverage-partial {
  color: #d7b97b;
  border-color: #766239;
}
.rule-topic-content {
  color: #c5cab9;
  font-size: 14px;
  line-height: 1.8;
  padding-top: 16px;
}
.rule-topic-content ol {
  padding-left: 22px;
}
.rule-topic-content li {
  padding: 5px 0 5px 5px;
}
.rule-example {
  padding: 15px 20px;
  background: #c9a8690b;
  border-left: 2px solid var(--primary);
  margin: 22px 0;
}
.rule-example strong {
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rule-example p {
  margin: 6px 0 0;
}
.related-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.related-rules a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  padding: 4px 9px;
  border-radius: 4px;
  color: var(--primary);
  font-size: 11px;
}
.rule-permalink {
  display: inline-block;
  margin-top: 18px;
  font-size: 10px;
  color: #a1ab95;
}
@media (max-width: 800px) {
  .reference-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .reference-nav {
    position: static;
  }
  .reference-nav nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .reference-nav nav button {
    white-space: nowrap;
    gap: 14px;
  }
  .rule-topic summary {
    padding-right: 25px;
  }
  .reference-header .eyebrow {
    margin-top: 28px;
  }
}

.bot-controls {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line, #50432d);
  border-radius: 8px;
}
.bot-controls h3 {
  font-size: 15px;
  margin-bottom: 12px;
}
.bot-controls label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  font-size: 12px;
}
.bot-controls select {
  width: 100%;
  background: #18201d;
  color: #eee4ce;
  border: 1px solid #50432d;
  border-radius: 5px;
  padding: 8px;
}
.lobby-bot-configuration select {
  background: #18201d;
  color: #eee4ce;
  border: 1px solid #50432d;
  border-radius: 5px;
  padding: 8px;
}

.private-battle-plan {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--gold, #d8b66a);
  border-radius: 12px;
  background: rgba(188, 151, 76, 0.08);
}
.private-battle-plan h3 {
  margin: 0.5rem 0 1rem;
}
.private-battle-plan dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
}
.private-battle-plan dt {
  opacity: 0.65;
  font-size: 0.75rem;
}
.private-battle-plan dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.truthtrance-panel fieldset {
  min-width: 0;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.truthtrance-panel textarea {
  resize: vertical;
  line-height: 1.6;
}
.truthtrance-panel blockquote {
  margin: 18px 0;
  padding: 2px 14px;
  border-left: 2px solid var(--primary);
}
.truthtrance-panel,
.truthtrance-history {
  overflow-wrap: anywhere;
}
.truthtrance-panel :is(textarea, select):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.room-entry-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 46rem;
  margin: 1.5rem auto;
  padding: clamp(1rem, 4vw, 2rem);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.room-entry-panel > :is(h1, p, output) {
  margin: 0;
}
.room-entry-panel button {
  min-height: 44px;
  white-space: normal;
  text-align: left;
}
.room-entry-panel > label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.room-entry-panel input[type='checkbox'] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
}
.room-entry-panel > details {
  width: 100%;
  min-width: 0;
}

.traitor-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.traitor-identity > span {
  overflow-wrap: anywhere;
}
.leader-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.leader-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: linear-gradient(145deg, #293326, #141914);
  text-align: center;
  overflow-wrap: anywhere;
}
.leader-identity :is(h3, p) {
  margin: 0;
}
.leader-identity button {
  margin-top: auto;
  min-height: 44px;
}
.leader-strength-disc {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 2px solid #b69a62;
  border-radius: 50%;
  outline: 1px solid #685b3f;
  outline-offset: -7px;
  background: radial-gradient(circle at 35% 30%, #4a5037, #151c15);
  color: #f5dfb0;
  font-family: Georgia, serif;
  font-size: 2rem;
}

/* Authorized component faces, separate from the action that commits them. */
.setup-traitor-choices,
.visible-component-list {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0;
  list-style: none;
}
.traitor-choice,
.visible-component-list > div,
.visible-component-list > li {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow-wrap: anywhere;
}
.traitor-choice .game-action {
  margin: 0;
}
.battle-component-inspection {
  margin-top: 0.75rem;
  min-width: 0;
}
.battle-component-inspection > summary {
  display: list-item;
  cursor: pointer;
  min-height: 44px;
  padding: 0.75rem 0;
  color: var(--primary);
}
.battle-component-inspection > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.player-circle-choice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
.player-circle-choice select {
  min-height: 44px;
}
.board-player-circle {
  pointer-events: none;
}

.card-unavailable {
  margin: 0.7rem 0;
  padding: 0.7rem;
  border-left: 2px solid #bda369;
  background: #151912;
  color: #d4c7a5;
  font-size: 0.875rem;
  line-height: 1.5;
}
.private-spice-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: #262b20;
}
.private-spice-preview > div {
  flex: 1 1 16rem;
}
.private-spice-preview h3 {
  margin: 0.4rem 0;
  font-family: Georgia, serif;
}
.private-spice-preview > button {
  flex: 0 1 17rem;
}
.spice-card-table {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.spice-card-table > h3 {
  margin: 0 0 0.8rem;
  font-family: Georgia, serif;
  font-weight: 400;
}
.spice-card-fronts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.8rem;
}
.spice-card-front {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #71613f;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, #393524, #1b2019);
  overflow-wrap: anywhere;
}
.spice-card-front > strong {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
}
.spice-card-front > button {
  margin-top: auto;
}

/* Table discussion uses the same dark surfaces and readable controls as the table. */
.table-talk { margin-block: 1.5rem; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
.table-talk h2 { margin: 0; font-size: 1.125rem; }
.table-talk h2 button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 1rem; text-align: left; }
.table-talk-content { padding: 0 1rem 1rem; }
.table-talk-content label { display: block; margin-block: 0.75rem 0.375rem; font-size: 1rem; }
.table-talk-content select, .table-talk-content textarea { width: 100%; min-height: 44px; font-size: 1rem; }
.table-talk-content textarea { resize: vertical; }
.table-talk-content button { min-height: 44px; }
.table-talk-messages { list-style: none; margin: 1rem 0; padding: 0; max-height: 24rem; overflow-y: auto; overflow-wrap: anywhere; }
.table-talk-messages li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.table-talk-messages p { white-space: pre-wrap; unicode-bidi: plaintext; margin: 0.5rem 0 0; font-size: 1rem; }
.table-talk-author { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.table-talk-author time { font-size: 0.875rem; }
.bribe-panel { font-size: 1rem; }
.bribe-panel > summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-weight: 600; }
.bribe-panel p, .bribe-status { display: block; margin-block: .7rem; }
.bribe-fields { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.bribe-fields label { display: grid; gap: .35rem; flex: 1 1 12rem; min-width: 0; }
.bribe-fields select, .bribe-fields input { min-height: 44px; width: 100%; min-width: 0; font-size: 1rem; }
.bribe-fields button { font-size: 1rem; min-height: 44px; max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; }

.nexus-offer .notice, .nexus-offer .game-action { font-size: 1rem; }
.nexus-offer .game-action { min-height: 44px; height: auto; max-width: 100%; white-space: normal; }

.force-inspect-trigger { min-height: 44px; max-width: 100%; white-space: normal; font-size: 1rem; margin-top: .65rem; }
.force-dialog { position: fixed; top: 50%; left: 50%; z-index: 50; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: calc(100% - 1rem); max-width: 46rem; max-height: calc(100dvh - 1rem); overflow: hidden; border: 1px solid #8e7952; border-radius: 1rem; background: #141814; color: #eeeae0; box-shadow: 0 24px 80px #000b; outline: none; }
.force-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #414536; font-size: 1rem; }
.force-dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; }
.force-dialog-scroll:focus-visible { outline: 2px solid #ddbc77; outline-offset: -3px; }
.force-dialog-scroll h2 { margin: 0 0 .75rem; font: 1.6rem/1.3 Georgia, serif; overflow-wrap: anywhere; }
.force-dialog-scroll h3 { margin: 0; font-size: 1.15rem; }
.force-dialog-scroll p, .force-reference p { font-size: 1rem; line-height: 1.65; }
.force-details { display: grid; gap: 1rem; min-width: 0; font-size: 1rem; line-height: 1.6; }
.force-details p { margin: 0; }
.force-details a { color: #edca83; text-decoration: underline; text-underline-offset: .2em; }
.force-examples { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin: 1.25rem 0; }
.force-example { margin: 0; width: 10rem; max-width: 100%; text-align: center; }
.force-disc { width: 10rem; max-width: 100%; aspect-ratio: 1; border-radius: 50%; border: .4rem double var(--counter-color); background: #222a25; color: var(--counter-color); display: flex; position: relative; align-items: center; justify-content: center; box-shadow: inset 0 0 0 .35rem #131713, 0 .4rem 0 #070a07; }
.force-disc > span:first-child { font: bold 4rem/1 Georgia, serif; }
.force-disc-special > span:first-child { transform: translateY(-.6rem); }
.force-disc .force-star { position: absolute; bottom: .7rem; width: 1.7rem; height: 1.7rem; fill: currentColor; }
.force-disc-advisor { border-style: dashed; background: #111811; }
.force-disc-advisor > span:first-child { transform: translateY(-.7rem); }
.force-disc .force-stance { position: absolute; bottom: 1rem; font-size: 1rem; }
.force-example figcaption { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
.force-example figcaption strong { display: block; }
.force-notice { padding: .8rem 1rem; border: 1px solid #6b714d; border-radius: .5rem; background: #252b20; }
.force-pools { display: grid; gap: 0; margin: 0; }
.force-pools > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 0; border-bottom: 1px solid #424638; }
.force-pools dt { font-weight: 600; overflow-wrap: anywhere; }
.force-pools dd { margin: 0; }
.force-pools dd span { display: block; color: #d8d4c5; }
.force-marker { display: flex; align-items: start; gap: 1rem; padding: 1rem; border: 1px dashed #bbaa7e; border-radius: .5rem; }
.force-marker-back { display: grid; place-items: center; flex: 0 0 2.5rem; height: 3rem; font: 2rem/1 Georgia, serif; border: 2px dashed #bbaa7e; border-radius: .3rem; }
.force-reference { padding: 1rem; border: 1px solid #807352; border-radius: .75rem; font-size: 1rem; }
.force-reference label { display: grid; gap: .5rem; }
.force-reference select { min-height: 44px; width: 100%; font-size: 1rem; }
.faction-sheet { min-width: 0; margin-top: 1rem; overflow: hidden; border: 1px solid #807352; border-top-width: 4px; border-radius: .75rem; background: #20271f; color: #f2e8d3; }
.faction-sheet header, .faction-sheet section, .faction-sheet footer { padding: 1rem; }
.faction-sheet section + section, .faction-sheet footer { border-top: 1px solid #807352; }
.faction-sheet .faction-sheet-label { font-size: .875rem; color: #edcc8c; }
.faction-sheet p, .faction-sheet li { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.faction-sheet h3 { font: 1.8rem/1.3 Georgia, serif; }
.faction-sheet h4 { margin: 0 0 .75rem; font-size: 1.2rem; }
.faction-sheet ol { display: grid; gap: .9rem; margin: 0; padding-left: 1.4rem; }
.faction-sheet-art { display: block; width: 100%; max-height: 10rem; object-fit: cover; }
.faction-sheet footer a, .faction-sheet-help { display: block; padding-block: .65rem; font-size: 1rem; line-height: 1.5; text-decoration: underline; }
.faction-sheet-reader .faction-sheet-toggle { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin-block: .75rem; font-size: 1rem; }
.faction-sheet-toggle input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }