@font-face {
  font-family:Manrope;
  src:url('../public/fonts/manrope-400.ttf');
}
@font-face {
  font-family:Manrope;
  src:url('../public/fonts/manrope-600.ttf');
  font-weight:600 900;
}
:root {
  --navy:#101e29;
  --navy2:#172a36;
  --ink:#172b35;
  --paper:#f3f0e5;
  --muted:#a9b8b8;
  --line:#ffffff1c;
  --coral:#ef7759;
  --mint:#a9d9cb;
  --yellow:#eacb6d;
  --blue:#6cb8ce;
  --brown:#c19a73;
  --gene:#9abc8a;
  --alien:#e6c56b;
  font-family:Manrope,Arial,sans-serif;
  color:var(--paper);
  background:var(--navy);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
button {
  color:inherit;
  cursor:pointer;
}
button:disabled {
  cursor:default;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  border:0;
}
a {
  color:inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--mint);
  outline-offset:3px;
}
button:disabled {
  opacity:.46;
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.eyebrow {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  line-height:1.5;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:0 0 12px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--paper);
  text-decoration:none;
  background:none;
  padding:0;
  text-align:left;
}
.brand span {
  font-size:12px;
  line-height:1.22;
  font-weight:800;
  letter-spacing:1.7px;
}
.brand-mark {
  height:40px;
  width:40px;
  color:var(--coral);
  flex-shrink:0;
}
.primary,.secondary {
  min-height:48px;
  padding:12px 22px;
  display:inline-flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  border-radius:3px;
  line-height:1.4;
}
.primary {
  background:var(--paper);
  color:var(--ink);
}
.primary:hover:not(:disabled) {
  background:var(--mint);
}
.secondary {
  background:transparent;
  border-color:#ffffff40;
  color:var(--paper);
}
.secondary:hover {
  background:#ffffff0c;
}
.nav-button {
  min-height:44px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  padding:10px 16px;
}
.nav-button:hover {
  color:var(--paper);
}
.icon-button {
  width:44px;
  height:44px;
  background:transparent;
  display:inline-grid;
  place-items:center;
  border-radius:3px;
}
.icon-button:hover {
  background:#ffffff10;
}
.text-button {
  background:transparent;
  min-height:44px;
  font-size:13px;
  color:var(--mint);
  padding:8px 0;
}
.small-button {
  min-height:44px;
  background:transparent;
  padding:6px 12px;
  font-size:13px;
}
.selected {
  border-color:var(--mint)!important;
  background:#a9d9cb18!important;
}
.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint);
  margin:0 8px 2px 0;
}
.error,.save-error {
  color:#ffd1b1;
  font-size:14px;
}
.save-error {
  padding:8px 20px;
  background:#7b3427;
}
.home {
  position:relative;
  min-height:100svh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:32px 5.2vw;
  overflow:hidden;
}
.home-backdrop {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#0b1825ef 0%,#0b1825dd 24%,#0b18254d 56%,#0b182515 80%),linear-gradient(0deg,#0b1825f5,transparent 28%),url('../public/art/hero.webp') center 49%/cover;
}
.home-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.home-header nav {
  display:flex;
  align-items:center;
}
.home-copy {
  margin:auto 0;
  padding:35px 0 55px;
  max-width:720px;
}
.home-copy .eyebrow {
  color:var(--mint);
}
.home h1 {
  font-size:clamp(60px,7.8vw,122px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-7px;
  margin:28px 0 22px;
}
.home h1 em {
  font-style:normal;
  color:var(--coral);
}
.home-tagline {
  font-size:24px;
  letter-spacing:-.6px;
  margin:0 0 26px;
}
.home-description {
  color:#bdc7c7;
  font-size:16px;
  line-height:1.8;
  margin:0 0 30px;
}
.home-actions {
  display:flex;
  gap:12px;
  align-items:center;
}
.home-actions .primary {
  min-width:230px;
  justify-content:space-between;
}
.home-coordinate {
  position:absolute;
  right:5.2vw;
  bottom:19%;
  text-align:right;
}
.home-coordinate span {
  display:block;
  font:10px ui-monospace,monospace;
  letter-spacing:2px;
  color:var(--mint);
  margin-bottom:12px;
}
.home-coordinate b {
  font-weight:400;
  font-size:18px;
  line-height:1.5;
}
.home-footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:10px/1.6 ui-monospace,monospace;
  letter-spacing:1px;
  color:#abb7ba;
}
.home-footer i {
  font-style:normal;
  padding:0 10px;
}
.home-footer>span:last-child {
  text-align:right;
  letter-spacing:.4px;
}
.game-shell {
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 26px;
  max-width:1850px;
  margin:0 auto;
  background:radial-gradient(ellipse at 60% 40%,#1c3441 0%,var(--navy) 70%);
}
.game-header {
  height:72px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.game-header .brand-mark {
  height:32px;
  width:32px;
}
.game-header .brand span {
  font-size:10px;
}
.game-header nav {
  display:flex;
  align-items:center;
  gap:2px;
}
.game-coordinates {
  display:flex;
  align-items:center;
  gap:26px;
  font:11px ui-monospace,monospace;
  letter-spacing:1px;
}
.game-coordinates b {
  font-size:16px;
  color:var(--paper);
  font-weight:400;
}
.vp-pool {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--yellow);
}
.vp-pool small {
  font-size:11px;
  color:var(--muted);
  letter-spacing:0;
}
.vp-pool .icon {
  width:18px;
  height:18px;
}
.roster {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  flex-shrink:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  gap:10px;
}
.empire-summary {
  position:relative;
  text-align:left;
  padding:13px 16px;
  background:transparent;
  border-left:2px solid transparent;
  min-height:73px;
}
.empire-summary.yours {
  border-left-color:var(--coral);
  background:#ffffff04;
}
.empire-summary:hover {
  background:#ffffff08;
}
.empire-name {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.empire-name i {
  height:5px;
  width:5px;
  border-radius:50%;
  background:#67818b;
}
.acting .empire-name i {
  background:var(--mint);
  box-shadow:0 0 0 3px #a9d9cb13;
}
.empire-name small {
  font:9px ui-monospace,monospace;
  color:var(--coral);
  margin-left:3px;
}
.empire-stats {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:7px;
  font:13px ui-monospace,monospace;
  color:#c4cfcc;
}
.empire-stats>span {
  display:inline-flex;
  align-items:center;
  gap:5px;
  position:relative;
  white-space:nowrap;
}
.empire-stats .icon {
  height:15px;
  width:15px;
}
.empire-stats b {
  font-weight:400;
  color:var(--paper);
}
.empire-stats small {
  font-size:9px;
  color:var(--muted);
}
.empire-stats .score-counter {
  color:var(--yellow);
}
.tableau-counter {
  margin-left:auto;
  color:#8da1a8;
}
.delta {
  font:11px Manrope,sans-serif;
  font-weight:700;
  position:absolute;
  z-index:2;
  top:18px;
  left:0;
  white-space:nowrap;
  background:var(--mint);
  color:var(--navy);
  padding:3px 6px;
  border-radius:2px;
  box-shadow:0 3px 10px #0004;
  animation:delta-in .3s ease-out;
}
.phase-rail {
  height:44px;
  flex-shrink:0;
  display:flex;
  gap:26px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.rail-phase {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#68828d;
  position:relative;
  height:100%;
}
.rail-phase b {
  font:10px ui-monospace,monospace;
}
.rail-phase.called {
  color:#c5cecd;
}
.rail-phase.current {
  color:var(--mint);
}
.rail-phase.current:after {
  content:'';
  height:2px;
  background:var(--mint);
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
}
.rail-phase i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}
.round-number {
  margin-left:auto;
  font:9px ui-monospace,monospace;
  letter-spacing:1px;
  color:#718b96;
}
.play-desk {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,29%);
  gap:34px;
  padding:23px 0 18px;
}
.decision-column {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.task-heading {
  flex-shrink:0;
  margin-bottom:20px;
}
.task-heading .eyebrow {
  font-size:10px;
  margin-bottom:7px;
}
.task-heading h1 {
  font-size:clamp(24px,2.2vw,35px);
  line-height:1.2;
  letter-spacing:-1px;
  font-weight:600;
  margin:0 0 9px;
}
.task-instruction {
  font-size:14px;
  line-height:1.5;
  color:#a9bfc4;
  margin:0;
  max-width:730px;
}
.decision-content {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.phase-choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start;
  flex:1;
  min-height:0;
}
.phase-choice {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  background:#ffffff04;
  border:1px solid #ffffff23;
  min-height:67px;
  text-align:left;
  padding:11px 14px;
  border-radius:3px;
}
.phase-choice:hover {
  background:#ffffff0a;
  border-color:#ffffff5a;
}
.phase-choice.selected {
  background:#a9d9cb14;
  border-color:var(--mint);
}
.phase-glyph {
  height:38px;
  width:38px;
  border:1px solid #a9d9cb32;
  display:grid;
  place-items:center;
  color:var(--mint);
  flex-shrink:0;
  border-radius:50%;
}
.phase-choice strong {
  font-size:15px;
  font-weight:600;
}
.phase-choice small {
  display:block;
  font-size:11px;
  color:#9eb5bd;
  margin-top:4px;
  line-height:1.35;
}
.phase-choice small i {
  font-style:normal;
  color:#67838b;
  padding:0 4px;
}
.phase-check {
  margin-left:auto;
  color:#637e89;
  font:11px ui-monospace,monospace;
}
.selected .phase-check {
  color:var(--mint);
}
.phase-check .icon {
  width:18px;
  height:18px;
}
.phase-choice:nth-child(1) .phase-glyph,.phase-choice:nth-child(2) .phase-glyph {
  color:#c5b8d7;
}
.phase-choice:nth-child(3) .phase-glyph {
  color:var(--mint);
}
.phase-choice:nth-child(4) .phase-glyph {
  color:var(--coral);
}
.phase-choice:nth-child(5) .phase-glyph,.phase-choice:nth-child(6) .phase-glyph {
  color:var(--yellow);
}
.mentor-note {
  display:flex;
  align-items:start;
  gap:10px;
  color:#8ea9b3;
  font-size:12px;
  line-height:1.6;
  margin:14px 0 0;
  flex-shrink:0;
}
.mentor-note .icon {
  height:16px;
  width:16px;
  margin-top:2px;
}
.action-dock {
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  margin-top:14px;
  border-top:1px solid var(--line);
}
.selection-count {
  color:#8ea9b3;
  font-size:12px;
}
.dock-buttons {
  display:flex;
  align-items:center;
  gap:8px;
}
.mobile-read {
  display:none;
}
.card-reader {
  border:1px solid #ffffff20;
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
  border-radius:3px;
  scrollbar-color:#879991 #e3e2d6;
  scrollbar-width:thin;
}
.reader-image {
  position:relative;
  aspect-ratio:4/3;
  max-height:42%;
  flex-shrink:0;
  overflow:hidden;
  background:#243846;
}
.reader-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.reader-image.colony img {
  object-position:50% 55%;
}
.reader-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#061a2caa,transparent 45%);
}
.reader-type {
  position:absolute;
  z-index:1;
  bottom:14px;
  left:18px;
  color:white;
  font:10px ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:1px;
}
.reader-cost {
  position:absolute;
  right:14px;
  top:14px;
  background:var(--paper);
  display:flex;
  align-items:center;
  gap:4px;
  padding:7px 10px;
  border-radius:30px;
  font-size:18px;
  font-weight:700;
}
.reader-cost.defense {
  color:#ad4933;
}
.reader-cost .icon {
  width:20px;
  height:20px;
}
.reader-body {
  padding:20px;
}
.reader-body .eyebrow {
  font-size:9px;
  color:#6c7d7c;
  letter-spacing:1px;
  margin-bottom:7px;
}
.reader-body h2 {
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.8px;
  margin:0 0 14px;
}
.printed-vp {
  color:#7a6847;
  font-size:12px;
  display:flex;
  gap:7px;
  align-items:center;
  margin:0 0 18px;
}
.printed-vp .icon {
  height:16px;
  width:16px;
}
.power-group {
  border-top:1px solid #18394823;
  padding-top:13px;
  margin-top:16px;
}
.power-phase {
  font:9px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#72867f;
}
.power-group p,.card-rule {
  font-size:14px;
  line-height:1.65;
  margin:8px 0 0;
  color:#334b50;
}
.reader-rest {
  padding:30px;
  display:grid;
  place-content:center;
  text-align:center;
  height:100%;
  background:#eceadd;
}
.reader-rest .brand-mark {
  margin:auto;
  color:#d06b4d;
  width:80px;
  height:80px;
}
.reader-rest p {
  font-size:22px;
  line-height:1.5;
  letter-spacing:-.5px;
}
.card-collection {
  display:grid;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:14px;
  flex:1;
  min-height:0;
  align-content:center;
}
.card-tile {
  position:relative;
  min-width:0;
  min-height:0;
  max-height:330px;
  align-self:center;
  display:flex;
  flex-direction:column;
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 8px 24px #0003;
  border:2px solid transparent;
  transition:border-color .14s,transform .14s;
}
.card-tile.chosen {
  border-color:var(--mint);
  box-shadow:0 0 0 2px var(--mint),0 8px 24px #0004;
  transform:translateY(-3px);
}
.card-pick {
  display:flex;
  flex-direction:column;
  padding:0;
  background:none;
  color:inherit;
  text-align:left;
  width:100%;
  border-radius:2px;
  overflow:hidden;
  flex:1;
  min-height:0;
}
.card-pick:disabled {
  opacity:.5;
}
.card-image {
  position:relative;
  display:block;
  aspect-ratio:1.15;
  overflow:hidden;
  min-height:0;
  width:100%;
  flex:1;
}
.card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}
.card-pick:hover .card-image img {
  transform:scale(1.035);
}
.colony .card-image img {
  object-position:50% 55%;
}
.card-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#00142560,transparent 50%);
  pointer-events:none;
}
.cost-badge {
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:3px;
  z-index:1;
  background:#f3f0e5f2;
  color:var(--ink);
  padding:4px 7px;
  border-radius:20px;
  font-size:13px;
}
.cost-badge .icon {
  width:14px;
  height:14px;
}
.cost-badge.defense {
  color:#ac4537;
}
.card-vp {
  position:absolute;
  bottom:8px;
  left:10px;
  color:white;
  font-size:16px;
  z-index:1;
  font-weight:700;
}
.card-vp small {
  font:9px ui-monospace,monospace;
  opacity:.8;
}
.selection-check {
  position:absolute;
  right:7px;
  top:7px;
  border-radius:50%;
  display:grid;
  place-items:center;
  height:25px;
  width:25px;
  background:var(--mint);
  color:var(--ink);
  z-index:2;
}
.selection-check .icon {
  height:17px;
  width:17px;
}
.card-caption {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px 12px 11px;
  min-height:83px;
  flex-shrink:0;
  width:100%;
  gap:10px;
}
.card-caption strong {
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  display:block;
  padding-right:5px;
}
.card-meta {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  line-height:1.4;
  color:#577073;
  padding-right:18px;
}
.card-meta .icon {
  height:12px;
  width:12px;
}
.card-inspect {
  position:absolute;
  bottom:5px;
  right:4px;
  width:32px;
  height:36px;
  display:grid;
  place-items:center;
  background:transparent;
  color:#4d6466;
}
.card-inspect .icon {
  width:17px;
  height:17px;
}
.good-dot {
  height:10px;
  width:10px;
  flex-shrink:0;
  display:inline-block;
  background:var(--blue);
  border:1px solid #28455340;
  border-radius:50%;
}
.good-dot.rare {
  background:var(--brown);
  border-radius:2px;
}
.good-dot.gene {
  background:var(--gene);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  width:12px;
  height:12px;
}
.good-dot.alien {
  background:var(--alien);
  border-radius:0;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  width:12px;
  height:11px;
}
.good-dot.none {
  background:#a9bab1;
}
.good-dot.windfall {
  box-shadow:inset 0 0 0 2px var(--paper);
}
.pagination {
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#9ab0b7;
  height:44px;
  font-size:12px;
}
.pagination .small-button {
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--paper);
}
.payment-summary {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 20px;
  font-size:13px;
  border-left:2px solid var(--mint);
  padding:5px 12px;
  flex-shrink:0;
  background:#ffffff04;
}
.payment-summary>span {
  color:var(--muted);
}
.payment-summary>b {
  font-weight:600;
  color:var(--mint);
}
.payment-summary>small {
  color:#c6b18e;
  font-size:12px;
}
.payment-summary .text-button {
  margin-left:auto;
  min-height:32px;
}
.free-build {
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}
.free-build>div:first-child {
  display:none;
}
.free-build h2 {
  font-size:20px;
  margin:0;
}
.free-build p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.free-build>.card-tile {
  width:140px;
  max-height:210px;
  margin-top:10px;
}
.free-build .card-image {
  max-height:130px;
}
.free-build .card-caption {
  min-height:65px;
  padding:9px;
}
.free-build .card-caption strong {
  font-size:12px;
}
.power-choices {
  flex:1;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#526e77 transparent;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:3px;
}
.power-choice {
  background:#ffffff05;
  border:1px solid var(--line);
  padding:14px 15px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  width:100%;
  min-height:65px;
  flex-shrink:0;
  border-radius:3px;
}
.power-choice:hover {
  background:#ffffff0c;
  border-color:#a9d9cb66;
}
.power-choice>span:not(.power-choice-icon) {
  flex:1;
}
.power-choice strong {
  display:block;
  font-size:14px;
  font-weight:600;
}
.power-choice small {
  display:block;
  font-size:13px;
  color:#a9bfc4;
  line-height:1.5;
  margin-top:5px;
}
.power-choice em {
  display:block;
  font-style:normal;
  font-size:12px;
  color:var(--mint);
  margin-top:5px;
}
.power-choice>.icon {
  width:18px;
  height:18px;
  color:#6f969e;
}
.power-choice-icon {
  display:grid;
  place-items:center;
  color:var(--mint);
  width:36px;
  height:36px;
  flex-shrink:0;
}
.lucky-choices {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin:auto 0;
}
.lucky-choices button {
  min-height:70px;
  font-size:24px;
  background:#ffffff08;
  border:1px solid var(--line);
  border-radius:3px;
}
.gentle-note {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}
.hand-band {
  height:66px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:16px;
  border-top:1px solid var(--line);
  min-width:0;
}
.hand-band button {
  min-height:44px;
  background:transparent;
}
.hand-band-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  white-space:nowrap;
  padding:0;
}
.hand-band-label>.icon:last-child {
  width:15px;
  height:15px;
  color:#6c9098;
}
.hand-band b {
  color:var(--mint);
  margin-left:4px;
}
.hand-titles {
  display:flex;
  min-width:0;
  overflow:hidden;
  gap:5px;
  flex:1;
  height:44px;
}
.hand-titles button {
  font-size:10px;
  color:#9fb4b8;
  padding:7px 11px;
  background:#ffffff04;
  white-space:nowrap;
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.empire-band-button {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  white-space:nowrap;
}
.empire-band-button .icon {
  width:17px;
  height:17px;
  color:#9fb4b8;
}
.recap {
  display:flex;
  gap:10px;
  align-items:start;
  background:#a9d9cb09;
  border:1px solid #a9d9cb20;
  border-radius:3px;
  text-align:left;
  padding:9px 11px;
  margin-top:12px;
  flex-shrink:0;
  max-height:100px;
  overflow:auto;
  color:#b7cbc9;
  font-size:11px;
  line-height:1.6;
}
.recap>span:last-child {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.recap strong {
  color:var(--mint);
  font-weight:600;
}
.recap-mark {
  color:var(--mint);
}
.recap .icon {
  width:16px;
  height:16px;
}
.privacy-curtain,.waiting-scene,.empty-state {
  margin:auto;
  text-align:center;
  padding:30px 20px;
  max-width:550px;
}
.privacy-curtain>.icon {
  width:55px;
  height:55px;
  color:var(--mint);
  margin:0 auto 24px;
}
.privacy-curtain h1,.waiting-scene h1 {
  font-size:35px;
  letter-spacing:-1px;
  line-height:1.2;
  margin:15px 0;
}
.privacy-curtain p,.waiting-scene p {
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}
.privacy-curtain .primary,.waiting-scene .primary {
  margin-top:15px;
}
.waiting-scene .brand-mark {
  width:65px;
  height:65px;
  margin-bottom:30px;
  animation:slow-spin 30s linear infinite;
}
.privacy-footer {
  height:50px;
  flex-shrink:0;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
  display:grid;
  place-items:center;
}
.empty-state {
  grid-column:1/-1;
}
.empty-state>.icon {
  height:44px;
  width:44px;
  color:var(--mint);
}
.empty-state h2 {
  font-size:22px;
}
.empty-state p {
  font-size:14px;
  color:var(--muted);
}
.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:10;
  background:#07121dc9;
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.modal {
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 56px);
  width:580px;
  max-width:100%;
  background:#172b36;
  border:1px solid #829b9b5c;
  border-radius:7px;
  box-shadow:0 30px 100px #0008;
  overflow:hidden;
  outline:none;
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.modal-header h2 {
  font-size:21px;
  letter-spacing:-.5px;
  line-height:1.3;
  font-weight:600;
  margin:0;
}
.modal-header .icon-button {
  flex-shrink:0;
}
.modal-body {
  padding:24px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#67818b transparent;
  min-height:0;
}
.modal-footer {
  padding:16px 24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  flex-shrink:0;
}
.dialog-lede {
  font-size:16px;
  line-height:1.65;
  margin:0 0 24px;
  color:#bacbc8;
}
.field-label {
  display:block;
  font:10px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:25px 0 10px;
}
.field-label span {
  font:12px Manrope,sans-serif;
  letter-spacing:0;
  margin-left:8px;
  color:#708b95;
}
.segmented {
  display:flex;
  gap:6px;
}
.segmented button {
  min-height:46px;
  border:1px solid #ffffff2a;
  background:#ffffff04;
  border-radius:3px;
  flex:1;
  font-size:13px;
  padding:9px;
}
.field-help {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:10px 0;
}
.check-field {
  display:flex;
  align-items:start;
  gap:12px;
  padding:14px 0;
  cursor:pointer;
}
.check-field input {
  width:20px;
  height:20px;
  accent-color:var(--mint);
  margin:2px 0 0;
  flex-shrink:0;
}
.check-field strong {
  display:block;
  font-size:14px;
}
.check-field small {
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-top:5px;
}
.seed-input,#atlas-search {
  width:100%;
  min-height:46px;
  background:#0d202b;
  color:var(--paper);
  border:1px solid #ffffff2a;
  border-radius:3px;
  padding:11px 13px;
  font-size:14px;
}
.card-modal {
  width:620px;
}
.card-modal .modal-body {
  padding:0;
}
.dialog-card {
  background:var(--paper);
  color:var(--ink);
}
.dialog-card .reader-image {
  height:250px;
  aspect-ratio:auto;
  max-height:none;
}
.dialog-card .reader-image img {
  object-position:center 40%;
}
.dialog-card .reader-body {
  padding:24px;
}
.dialog-card .reader-body h2 {
  font-size:31px;
}
.dialog-card .power-group p,.dialog-card .card-rule {
  font-size:16px;
}
.dialog-card .reader-body .eyebrow {
  font-size:11px;
}
.wide-modal {
  width:980px;
}
.modal-body>h3 {
  font-size:18px;
  letter-spacing:-.3px;
  margin:28px 0 12px;
}
.modal-body>p:not(.field-help),.modal-body>ol {
  font-size:15px;
  line-height:1.75;
  color:#b4c7c9;
}
.modal-body li {
  padding-left:5px;
  margin:7px 0;
}
.rule-intro {
  border-left:2px solid var(--mint);
  padding:12px 18px;
  background:#ffffff04;
}
.rule-intro b {
  font-size:16px;
}
.rule-intro p {
  font-size:15px;
  line-height:1.7;
  color:#b4c7c9;
  margin:7px 0;
}
.rules-phases section {
  display:flex;
  gap:14px;
  border-top:1px solid var(--line);
  padding:18px 0;
}
.rules-phases section>span {
  color:var(--mint);
  padding-top:3px;
}
.rules-phases h3 {
  font-size:15px;
  margin:0 0 7px;
}
.rules-phases p {
  font-size:14px;
  line-height:1.7;
  color:#b4c7c9;
  margin:0;
}
.source-note {
  font-size:12px!important;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.source-note a {
  color:var(--mint);
}
.chronicle>div {
  display:flex;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding:15px 0;
}
.chronicle>div>span {
  width:45px;
  flex-shrink:0;
  font:11px/1.6 ui-monospace,monospace;
  color:#809da4;
}
.chronicle p {
  font-size:14px;
  line-height:1.6;
  margin:0;
  color:#bfd0cf;
}
.chronicle strong {
  color:var(--mint);
}
.chronicle small {
  display:block;
  font-size:12px;
  color:#8faab2;
  margin-top:6px;
}
.modal-card-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.modal-card-grid .card-tile {
  height:230px;
  max-height:none;
  align-self:stretch;
}
.modal-card-grid .card-caption {
  min-height:80px;
}
.atlas-filter {
  position:sticky;
  top:-24px;
  background:#172b36;
  padding-bottom:20px;
  z-index:2;
}
.score-breakdown {
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
}
.score-breakdown>span:first-child {
  font-size:13px;
}
.score-breakdown b {
  font-size:35px;
  color:var(--yellow);
  padding-right:6px;
}
.score-breakdown>span:last-child {
  font-size:13px;
  color:var(--muted);
}
.scoring-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.scoring-row b {
  color:var(--yellow);
}
.scoring-row small {
  grid-column:1/-1;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}
.final-scores {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.final-scores section {
  border:1px solid var(--line);
  padding:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
}
.final-scores .winner {
  border-color:var(--yellow);
  background:#eacb6d09;
}
.final-scores section>div>span {
  font:9px ui-monospace,monospace;
  letter-spacing:1px;
  color:var(--muted);
}
.final-scores h3 {
  font-size:16px;
  margin:5px 0;
}
.final-scores section>b {
  font-size:35px;
  font-weight:400;
  color:var(--yellow);
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.2;
}
.final-scores section>b small {
  font:10px ui-monospace,monospace;
}
.final-scores dl {
  grid-column:1/-1;
  margin:0;
  font-size:12px;
  color:#9fb8be;
}
.final-scores dl>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  line-height:1.8;
}
.final-scores dd {
  margin:0;
  color:var(--paper);
}
@keyframes delta-in {
  from {
    opacity:0;
    transform:translateY(7px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes slow-spin {
  to {
    transform:rotate(360deg);
  }
}
@media(min-width:1300px) and (min-height:800px) {
  .play-desk {
    gap:45px;
    padding-top:30px;
  }
  .phase-choice {
    min-height:82px;
    padding:15px 19px;
  }
  .phase-glyph {
    height:42px;
    width:42px;
  }
  .phase-choice strong {
    font-size:17px;
  }
  .phase-choice small {
    font-size:12px;
  }
  .task-heading {
    margin-bottom:25px;
  }
  .reader-body {
    padding:24px;
  }
  .power-group p {
    font-size:15px;
  }
  .card-caption strong {
    font-size:15px;
  }
  .card-image {
    aspect-ratio:1.25;
  }
  .card-tile {
    max-height:260px;
  }
}
@media(max-height:780px) and (min-width:900px) {
  .game-header {
    height:60px;
  }
  .roster .empire-summary {
    min-height:65px;
    padding:9px 12px;
  }
  .phase-rail {
    height:35px;
  }
  .play-desk {
    padding:17px 0 12px;
    gap:25px;
  }
  .task-heading {
    margin-bottom:13px;
  }
  .task-heading h1 {
    font-size:27px;
    margin-bottom:7px;
  }
  .task-heading .eyebrow {
    font-size:9px;
    margin-bottom:5px;
  }
  .task-instruction {
    font-size:13px;
  }
  .phase-choices {
    gap:7px;
  }
  .phase-choice {
    min-height:55px;
    padding:8px 12px;
  }
  .phase-glyph {
    width:30px;
    height:30px;
  }
  .phase-glyph .icon {
    width:19px;
    height:19px;
  }
  .phase-choice small {
    font-size:10px;
  }
  .mentor-note {
    font-size:11px;
    line-height:1.5;
    margin-top:10px;
  }
  .action-dock {
    margin-top:10px;
    padding-top:10px;
  }
  .hand-band {
    height:55px;
  }
  .recap {
    margin-top:9px;
    max-height:72px;
    font-size:10px;
    padding:7px 10px;
  }
  .reader-body {
    padding:16px;
  }
  .reader-body h2 {
    font-size:24px;
  }
  .power-group {
    margin-top:11px;
    padding-top:10px;
  }
  .power-group p,.card-rule {
    font-size:13px;
    line-height:1.6;
  }
  .printed-vp {
    margin-bottom:12px;
  }
  .card-tile {
    max-height:260px;
  }
  .free-build>.card-tile {
    max-height:150px;
    width:105px;
  }
  .free-build .card-caption {
    min-height:50px;
  }
  .free-build .card-meta {
    display:none;
  }
  .free-build p {
    font-size:12px;
  }
  .free-build h2 {
    font-size:18px;
  }
}
@media(max-width:1100px) {
  .game-shell {
    padding:0 18px;
  }
  .empire-stats {
    gap:12px;
  }
  .phase-choice {
    gap:9px;
    padding:10px;
  }
  .phase-choice small {
    font-size:10px;
  }
  .game-header nav .nav-button {
    padding:8px 10px;
  }
  .play-desk {
    gap:22px;
    grid-template-columns:minmax(0,1fr) minmax(245px,31%);
  }
  .card-collection {
    gap:10px;
  }
  .card-caption {
    padding:10px 9px;
    min-height:88px;
  }
  .card-caption strong {
    font-size:13px;
  }
  .card-meta {
    font-size:9px;
  }
  .card-inspect {
    right:0;
  }
  .selection-count {
    font-size:11px;
  }
  .primary,.secondary {
    padding:11px 15px;
  }
  .modal-card-grid {
    gap:12px;
  }
}
@media(max-width:899px) {
  .game-shell {
    padding:0 16px;
  }
  .game-header {
    height:56px;
  }
  .game-header .brand span {
    font-size:9px;
  }
  .game-header .brand-mark {
    width:29px;
    height:29px;
  }
  .game-header .brand {
    gap:8px;
  }
  .game-header nav .nav-button {
    display:none;
  }
  .game-coordinates {
    gap:16px;
  }
  .roster {
    gap:6px;
  }
  .empire-summary {
    min-height:68px;
    padding:10px 10px;
  }
  .empire-stats {
    gap:10px;
  }
  .empire-name {
    font-size:12px;
  }
  .empire-stats .tableau-counter {
    display:none;
  }
  .phase-rail {
    height:33px;
    gap:20px;
  }
  .play-desk {
    display:flex;
    gap:0;
    padding:18px 0 12px;
  }
  .card-reader {
    display:none;
  }
  .decision-column {
    width:100%;
  }
  .mobile-read {
    display:inline-flex;
  }
  .task-heading h1 {
    font-size:27px;
  }
  .task-heading {
    margin-bottom:16px;
  }
  .phase-choice {
    min-height:66px;
  }
  .phase-choice small {
    font-size:11px;
  }
  .phase-glyph {
    width:35px;
    height:35px;
  }
  .phase-choice strong {
    font-size:15px;
  }
  .mentor-note {
    font-size:12px;
    margin-top:12px;
  }
  .card-caption strong {
    font-size:14px;
  }
  .card-tile {
    max-height:330px;
  }
  .card-collection {
    gap:14px;
  }
  .hand-band {
    height:55px;
  }
  .hand-titles {
    display:none;
  }
  .empire-band-button {
    margin-left:auto;
  }
  .recap {
    max-height:76px;
  }
  .modal-card-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .modal-card-grid .card-tile {
    height:250px;
  }
  .home-coordinate {
    display:none;
  }
  .home h1 {
    font-size:80px;
    letter-spacing:-5px;
  }
  .home-backdrop {
    background:linear-gradient(90deg,#0b1825ed 0%,#0b1825b0 45%,#0b18251a),linear-gradient(0deg,#0b1825f5,transparent 28%),url('../public/art/hero.webp') 60% center/cover;
  }
  .action-dock {
    margin-top:12px;
    padding-top:12px;
  }
}
@media(max-width:619px) {
  .home {
    padding:22px 23px;
  }
  .home-header .brand-mark {
    width:34px;
    height:34px;
  }
  .home-header .brand span {
    font-size:10px;
  }
  .home-header nav .nav-button {
    display:none;
  }
  .home-copy {
    padding:0 0 35px;
  }
  .home-copy .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .home h1 {
    font-size:clamp(48px,13.7vw,78px);
    letter-spacing:-3.8px;
    margin:24px 0 18px;
  }
  .home-tagline {
    font-size:19px;
    margin-bottom:22px;
  }
  .home-description {
    font-size:14px;
    line-height:1.8;
    margin-bottom:27px;
  }
  .home-actions {
    flex-direction:column;
    align-items:stretch;
    max-width:290px;
  }
  .home-actions .primary,.home-actions .secondary {
    justify-content:space-between;
    min-height:50px;
  }
  .home-footer {
    font-size:8px;
    gap:18px;
  }
  .home-footer>span:first-child {
    max-width:155px;
    line-height:1.9;
  }
  .home-footer i {
    padding:0 3px;
  }
  .home-footer>span:last-child {
    max-width:140px;
  }
  .home-backdrop {
    background:linear-gradient(90deg,#0b1825ec 0%,#0b1825a8 65%,#0b182540),linear-gradient(0deg,#0b1825f5,transparent 28%),url('../public/art/hero.webp') 64% center/cover;
  }
  .game-shell {
    padding:0 12px;
  }
  .game-header {
    height:51px;
    gap:8px;
  }
  .game-header .brand span {
    font-size:8px;
    letter-spacing:1px;
  }
  .game-header .brand-mark {
    width:25px;
    height:25px;
  }
  .game-header .brand {
    gap:6px;
  }
  .game-header .icon-button {
    width:38px;
    height:44px;
  }
  .game-coordinates {
    gap:10px;
    font-size:8px;
    letter-spacing:.5px;
  }
  .game-coordinates b {
    font-size:12px;
  }
  .vp-pool {
    gap:3px;
  }
  .vp-pool small {
    display:none;
  }
  .vp-pool .icon {
    width:14px;
    height:14px;
  }
  .game-header nav {
    gap:0;
  }
  .game-header .icon {
    width:18px;
    height:18px;
  }
  .empire-summary {
    padding:9px 5px 9px 8px;
    min-height:62px;
  }
  .roster {
    gap:3px;
  }
  .empire-name {
    font-size:11px;
    gap:4px;
    overflow:hidden;
    white-space:nowrap;
  }
  .empire-name i {
    width:4px;
    height:4px;
  }
  .empire-name small {
    font-size:7px;
    margin-left:0;
  }
  .empire-stats {
    font-size:11px;
    gap:9px;
    margin-top:7px;
  }
  .empire-stats .icon {
    width:12px;
    height:12px;
  }
  .empire-stats>span {
    gap:3px;
  }
  .empire-stats small {
    font-size:7px;
  }
  .delta {
    font-size:9px;
    top:15px;
    padding:2px 4px;
  }
  .roster:has(.player-2) .empire-name {
    font-size:9px;
    white-space:normal;
    line-height:1.25;
    min-height:24px;
  }
  .roster:has(.player-2) .empire-stats {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
    margin-top:5px;
  }
  .roster:has(.player-2) .empire-name small {
    display:none;
  }
  .roster:has(.player-2) .empire-summary {
    padding-left:5px;
  }
  .phase-rail {
    height:29px;
    gap:0;
    justify-content:space-between;
  }
  .rail-phase {
    font-size:9px;
    gap:4px;
  }
  .rail-phase b {
    font-size:8px;
  }
  .rail-phase i {
    display:none;
  }
  .round-number {
    display:none;
  }
  .play-desk {
    padding:14px 0 8px;
  }
  .task-heading {
    margin-bottom:13px;
  }
  .task-heading .eyebrow {
    font-size:8px;
    letter-spacing:1px;
    margin-bottom:5px;
  }
  .task-heading h1 {
    font-size:24px;
    letter-spacing:-.7px;
    line-height:1.15;
    margin-bottom:7px;
  }
  .task-instruction {
    font-size:12px;
    line-height:1.5;
  }
  .phase-choices {
    gap:7px;
  }
  .phase-choice {
    padding:9px 8px;
    min-height:67px;
    gap:8px;
  }
  .phase-glyph {
    height:27px;
    width:27px;
    border:0;
  }
  .phase-glyph .icon {
    height:22px;
    width:22px;
  }
  .phase-choice strong {
    font-size:14px;
  }
  .phase-choice small {
    font-size:9px;
    margin-top:3px;
    line-height:1.4;
  }
  .phase-choice small i {
    display:none;
  }
  .phase-choice small {
    max-width:105px;
  }
  .phase-check {
    font-size:9px;
  }
  .phase-check .icon {
    height:15px;
    width:15px;
  }
  .phase-choice>span:nth-child(2) {
    flex:1;
    min-width:0;
  }
  .mentor-note {
    font-size:10px;
    line-height:1.5;
    gap:6px;
    margin-top:10px;
  }
  .mentor-note .icon {
    height:13px;
    width:13px;
  }
  .action-dock {
    padding-top:10px;
    margin-top:10px;
    gap:7px;
    display:block;
  }
  .selection-count {
    font-size:10px;
    margin-bottom:7px;
  }
  .dock-buttons {
    gap:7px;
    justify-content:flex-end;
  }
  .dock-buttons .primary {
    flex:1;
  }
  .dock-buttons .primary,.dock-buttons .secondary {
    min-height:46px;
    padding:10px 12px;
    font-size:12px;
    gap:8px;
  }
  .dock-buttons .icon {
    height:17px;
    width:17px;
  }
  .card-collection {
    gap:12px;
  }
  .card-tile {
    max-height:285px;
  }
  .card-caption {
    padding:10px;
    min-height:84px;
    gap:9px;
  }
  .card-caption strong {
    font-size:14px;
    line-height:1.25;
  }
  .card-meta {
    font-size:10px;
    padding-right:20px;
  }
  .card-inspect {
    height:36px;
    width:32px;
    bottom:4px;
    right:3px;
  }
  .cost-badge {
    font-size:12px;
    padding:4px 6px;
    top:7px;
    left:7px;
  }
  .card-vp {
    font-size:15px;
  }
  .card-image {
    aspect-ratio:1.25;
  }
  .pagination {
    font-size:10px;
    height:44px;
  }
  .pagination .small-button {
    font-size:11px;
    padding:6px 8px;
  }
  .pagination .small-button span {
    display:none;
  }
  .payment-summary {
    font-size:11px;
    gap:5px 10px;
    padding:6px 10px;
  }
  .payment-summary .text-button {
    font-size:11px;
    min-height:30px;
  }
  .payment-summary small {
    font-size:10px;
  }
  .payment-summary>span {
    max-width:65%;
  }
  .power-choice {
    padding:11px 10px;
    gap:10px;
    min-height:66px;
  }
  .power-choice strong {
    font-size:13px;
  }
  .power-choice small {
    font-size:12px;
    line-height:1.5;
  }
  .power-choice em {
    font-size:11px;
  }
  .power-choice-icon {
    width:25px;
  }
  .power-choice>.icon {
    width:14px;
  }
  .hand-band {
    height:49px;
    gap:5px;
  }
  .hand-band-label,.empire-band-button {
    font-size:10px;
    gap:5px;
  }
  .hand-band-label .icon {
    height:16px;
    width:16px;
  }
  .hand-band-label>.icon:last-child {
    display:none;
  }
  .empire-band-button {
    padding-right:0;
  }
  .recap {
    max-height:68px;
    font-size:10px;
    padding:7px 8px;
    margin-top:8px;
    gap:6px;
  }
  .recap .icon {
    width:13px;
    height:13px;
  }
  .waiting-scene h1,.privacy-curtain h1 {
    font-size:28px;
  }
  .waiting-scene p,.privacy-curtain p {
    font-size:14px;
  }
  .waiting-scene .brand-mark {
    height:50px;
    width:50px;
    margin-bottom:22px;
  }
  .privacy-curtain,.waiting-scene {
    padding:10px;
  }
  .privacy-footer {
    font-size:10px;
    text-align:center;
    height:44px;
  }
  .free-build>.card-tile {
    max-height:200px;
    width:130px;
    margin-top:7px;
  }
  .free-build h2 {
    font-size:19px;
  }
  .free-build p {
    font-size:12px;
    line-height:1.5;
  }
  .free-build .card-caption {
    min-height:60px;
  }
  .free-build .card-meta {
    display:none;
  }
  .lucky-choices {
    gap:4px;
  }
  .lucky-choices button {
    font-size:22px;
    min-height:55px;
  }
  .gentle-note {
    font-size:13px;
  }
  .modal-backdrop {
    padding:12px;
  }
  .modal {
    max-height:calc(100dvh - 24px);
    border-radius:5px;
  }
  .modal-header {
    padding:12px 15px;
    gap:6px;
  }
  .modal-header h2 {
    font-size:19px;
    letter-spacing:-.5px;
  }
  .modal-header .icon-button {
    width:40px;
    height:44px;
  }
  .modal-body {
    padding:17px;
  }
  .modal-footer {
    padding:12px 17px;
  }
  .modal-footer .primary {
    width:100%;
  }
  .dialog-lede {
    font-size:14px;
    margin-bottom:20px;
  }
  .field-label {
    font-size:9px;
    margin-top:20px;
  }
  .segmented {
    gap:5px;
  }
  .segmented button {
    font-size:11px;
    padding:8px 5px;
    min-height:46px;
  }
  .check-field {
    padding:12px 0;
  }
  .check-field strong {
    font-size:13px;
  }
  .check-field small {
    font-size:11px;
  }
  .field-help {
    font-size:11px;
  }
  .modal-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .modal-card-grid .card-tile {
    height:225px;
  }
  .modal-card-grid .card-caption strong {
    font-size:12px;
  }
  .modal-card-grid .card-caption {
    min-height:75px;
  }
  .score-breakdown {
    display:block;
  }
  .score-breakdown>span:last-child {
    display:block;
    margin-top:8px;
  }
  .score-breakdown b {
    font-size:30px;
  }
  .dialog-card .reader-image {
    height:210px;
  }
  .dialog-card .reader-body {
    padding:20px;
  }
  .dialog-card .reader-body h2 {
    font-size:28px;
  }
  .atlas-filter {
    top:-17px;
  }
  .final-scores {
    grid-template-columns:1fr;
  }
  .final-scores section {
    padding:14px;
  }
  .final-scores section>b {
    font-size:32px;
  }
}
@media(max-height:680px) and (max-width:619px) {
  .game-header {
    height:43px;
  }
  .empire-summary {
    min-height:52px;
    padding-top:6px;
    padding-bottom:6px;
  }
  .roster:has(.player-2) .empire-summary {
    min-height:65px;
  }
  .empire-name {
    font-size:10px;
  }
  .empire-stats {
    margin-top:5px;
    font-size:10px;
  }
  .phase-rail {
    height:24px;
  }
  .rail-phase {
    font-size:8px;
  }
  .play-desk {
    padding-top:10px;
  }
  .task-heading {
    margin-bottom:9px;
  }
  .task-heading h1 {
    font-size:21px;
    margin-bottom:5px;
  }
  .task-instruction {
    font-size:11px;
    line-height:1.4;
  }
  .task-heading .eyebrow {
    font-size:7px;
    margin-bottom:4px;
  }
  .phase-choice {
    min-height:50px;
    padding:6px;
    gap:5px;
  }
  .phase-choice strong {
    font-size:12px;
  }
  .phase-choice small {
    font-size:8px;
    max-width:96px;
    margin-top:2px;
  }
  .phase-glyph {
    height:21px;
    width:21px;
  }
  .phase-glyph .icon {
    height:19px;
    width:19px;
  }
  .phase-choices {
    gap:5px;
  }
  .mentor-note {
    display:none;
  }
  .action-dock {
    padding-top:8px;
    margin-top:7px;
  }
  .selection-count {
    margin-bottom:4px;
    font-size:9px;
  }
  .dock-buttons .primary,.dock-buttons .secondary {
    font-size:11px;
    min-height:44px;
    padding:8px 10px;
  }
  .recap {
    max-height:45px;
    font-size:9px;
    margin-top:6px;
    padding:5px 7px;
  }
  .recap>span:last-child>span:not(:last-child) {
    display:none;
  }
  .hand-band {
    height:44px;
  }
  .card-tile {
    max-height:235px;
  }
  .card-caption {
    min-height:78px;
    padding:9px;
  }
  .card-caption strong {
    font-size:13px;
  }
  .card-meta {
    font-size:9px;
  }
  .pagination {
    height:40px;
  }
  .pagination .small-button {
    min-height:36px;
  }
  .payment-summary {
    font-size:10px;
    gap:3px 8px;
    padding-top:4px;
    padding-bottom:4px;
  }
  .payment-summary .text-button {
    min-height:26px;
    font-size:10px;
  }
  .free-build>.card-tile {
    max-height:130px;
    width:100px;
  }
  .free-build .card-image {
    max-height:75px;
  }
  .free-build .card-caption {
    min-height:45px;
    padding:7px;
  }
  .free-build .card-caption strong {
    font-size:10px;
  }
  .free-build h2 {
    font-size:16px;
  }
  .free-build p {
    font-size:10px;
  }
  .power-choice {
    padding:10px 8px;
  }
  .power-choice small {
    font-size:11px;
  }
  .waiting-scene .brand-mark {
    width:40px;
    height:40px;
    margin-bottom:12px;
  }
  .waiting-scene h1,.privacy-curtain h1 {
    font-size:24px;
  }
  .home-copy {
    padding-bottom:20px;
  }
  .home h1 {
    margin:18px 0 14px;
  }
  .home-description {
    margin-bottom:20px;
    font-size:13px;
  }
  .home-tagline {
    font-size:17px;
    margin-bottom:15px;
  }
  .home-copy .eyebrow {
    font-size:8px;
  }
  .home {
    padding:17px 20px;
  }
  .home-footer {
    font-size:7px;
  }
  .home-actions .primary,.home-actions .secondary {
    min-height:45px;
    font-size:12px;
  }
  .dialog-card .reader-image {
    height:155px;
  }
}
@media(max-height:520px) and (min-width:500px) {
  .home {
    padding-top:16px;
    padding-bottom:16px;
  }
  .home-header .brand-mark {
    width:30px;
    height:30px;
  }
  .home-copy {
    padding:10px 0;
    margin:auto 0;
  }
  .home h1 {
    font-size:59px;
    letter-spacing:-3px;
    margin:10px 0;
  }
  .home-copy .eyebrow {
    font-size:8px;
    margin-bottom:0;
  }
  .home-tagline {
    font-size:16px;
    margin-bottom:12px;
  }
  .home-description {
    display:none;
  }
  .home-actions .primary,.home-actions .secondary {
    min-height:44px;
    font-size:12px;
  }
  .home-footer {
    font-size:8px;
  }
  .game-shell {
    padding:0 14px;
  }
  .game-header {
    height:43px;
  }
  .game-header .brand-mark {
    width:24px;
    height:24px;
  }
  .game-header .brand span {
    font-size:8px;
  }
  .roster .empire-summary {
    min-height:46px;
    padding:5px 9px;
  }
  .empire-name {
    font-size:10px;
  }
  .empire-stats {
    font-size:10px;
    margin-top:4px;
    gap:12px;
  }
  .empire-stats .icon {
    height:12px;
    width:12px;
  }
  .phase-rail {
    height:23px;
  }
  .rail-phase {
    font-size:9px;
  }
  .play-desk {
    padding:9px 0 7px;
  }
  .task-heading {
    margin-bottom:6px;
  }
  .task-heading .eyebrow {
    font-size:7px;
    margin-bottom:2px;
  }
  .task-heading h1 {
    font-size:20px;
    margin-bottom:4px;
  }
  .task-instruction {
    font-size:10px;
  }
  .decision-column {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,33%);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:20px;
  }
  .task-heading {
    grid-column:1;
    grid-row:1;
  }
  .decision-content {
    grid-column:1;
    grid-row:2;
  }
  .action-dock {
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    border-top:0;
    border-left:1px solid var(--line);
    padding:12px 0 12px 18px;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .dock-buttons {
    display:flex;
    flex-wrap:wrap;
    justify-content:stretch;
  }
  .dock-buttons .primary {
    min-width:100%;
    order:3;
  }
  .dock-buttons .primary,.dock-buttons .secondary {
    min-height:44px;
    font-size:11px;
    padding:9px 12px;
  }
  .selection-count {
    font-size:11px;
  }
  .mentor-note {
    display:none;
  }
  .recap {
    display:none;
  }
  .hand-band {
    height:43px;
  }
  .phase-choices {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .phase-choice {
    min-height:43px;
    padding:5px;
    gap:4px;
  }
  .phase-choice strong {
    font-size:11px;
  }
  .phase-choice small {
    font-size:8px;
    line-height:1.3;
    margin-top:1px;
  }
  .phase-glyph {
    height:21px;
    width:21px;
    border:0;
  }
  .phase-glyph .icon {
    height:17px;
    width:17px;
  }
  .phase-check {
    display:none;
  }
  .card-collection {
    gap:8px;
  }
  .card-tile {
    max-height:170px;
  }
  .card-caption {
    min-height:61px;
    padding:6px 7px;
    gap:3px;
  }
  .card-caption strong {
    font-size:11px;
  }
  .card-meta {
    font-size:8px;
    padding-right:14px;
  }
  .card-inspect {
    width:27px;
    height:29px;
    right:0;
    bottom:2px;
  }
  .card-inspect .icon {
    width:14px;
    height:14px;
  }
  .cost-badge {
    font-size:10px;
    top:4px;
    left:4px;
    padding:3px 5px;
  }
  .cost-badge .icon {
    width:10px;
    height:10px;
  }
  .card-vp {
    font-size:12px;
    bottom:5px;
    left:7px;
  }
  .pagination {
    height:33px;
    font-size:10px;
  }
  .pagination .small-button {
    min-height:30px;
    padding:3px 8px;
  }
  .payment-summary {
    font-size:10px;
    padding:3px 8px;
    gap:3px 10px;
  }
  .payment-summary .text-button {
    min-height:24px;
    font-size:10px;
  }
  .payment-summary small {
    font-size:9px;
  }
  .free-build {
    display:grid;
    grid-template-columns:1fr 105px;
    grid-template-rows:1fr 1fr;
    gap:3px 10px;
    text-align:left;
  }
  .free-build h2 {
    font-size:16px;
    align-self:end;
  }
  .free-build p {
    font-size:10px;
    align-self:start;
  }
  .free-build>.card-tile {
    grid-column:2;
    grid-row:1/3;
    width:100%;
    max-height:125px;
    margin:0;
  }
  .free-build .card-caption {
    min-height:40px;
  }
  .free-build .card-caption strong {
    font-size:10px;
  }
  .free-build .card-meta {
    display:none;
  }
  .power-choice {
    min-height:56px;
    padding:8px 10px;
    gap:8px;
  }
  .power-choice strong {
    font-size:12px;
  }
  .power-choice small {
    font-size:10px;
    margin-top:3px;
  }
  .power-choice em {
    font-size:10px;
  }
  .power-choice-icon {
    width:20px;
    height:20px;
  }
  .power-choice>.icon {
    width:15px;
    height:15px;
  }
  .privacy-curtain,.waiting-scene {
    grid-column:1/-1;
    grid-row:1/-1;
    max-width:600px;
    padding:5px;
  }
  .waiting-scene .brand-mark,.privacy-curtain>.icon {
    display:none;
  }
  .waiting-scene h1,.privacy-curtain h1 {
    font-size:24px;
    margin:7px 0;
  }
  .waiting-scene p,.privacy-curtain p {
    font-size:12px;
    margin:5px 0;
  }
  .waiting-scene .primary,.privacy-curtain .primary {
    min-height:44px;
    margin-top:8px;
  }
  .privacy-footer {
    height:36px;
  }
  .modal-backdrop {
    padding:10px;
  }
  .modal {
    max-height:calc(100dvh - 20px);
  }
  .modal-header {
    padding:8px 18px;
  }
  .modal-header h2 {
    font-size:18px;
  }
  .modal-body {
    padding:16px 20px;
  }
  .modal-footer {
    padding:10px 20px;
  }
  .modal-footer .primary {
    min-height:44px;
  }
  .dialog-card .reader-image {
    height:130px;
  }
  .modal-card-grid .card-tile {
    height:200px;
  }
  .lucky-choices button {
    min-height:45px;
    font-size:20px;
  }
  .gentle-note {
    font-size:11px;
    margin:6px 0;
  }
  .reader-image {
    max-height:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .card-tile.chosen {
    transform:none;
  }
}
.large-text {
  font-size:18px;
}
.large-text .game-shell {
  height:auto;
  min-height:100dvh;
}
.large-text .play-desk {
  min-height:620px;
}
.large-text .decision-content {
  min-height:350px;
}
.large-text .task-instruction,.large-text .power-choice small,.large-text .reader-body p {
  font-size:18px;
}
.large-text .card-caption strong {
  font-size:17px;
}
.large-text .modal-body {
  font-size:18px;
}
.large-text .card-reader {
  max-height:800px;
}
.large-text .home {
  min-height:700px;
  height:auto;
}
.large-text .mentor-note {
  font-size:15px;
  display:flex;
}
.empire-size {
  font:11px ui-monospace,monospace;
  color:var(--mint);
  margin-left:auto;
  font-style:normal;
}
.engine-scan {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#7f9fa9;
  margin-top:7px;
  min-height:12px;
}
.engine-scan>span {
  display:flex;
  align-items:center;
  gap:4px;
}
.engine-scan .good-dot {
  height:7px;
  width:7px;
}
.engine-scan .consume-capacity {
  margin-left:auto;
}
.received-card {
  position:absolute;
  z-index:4;
  left:10px;
  right:10px;
  top:calc(100% + 4px);
  background:var(--paper);
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:0 7px 22px #0006;
  padding:5px;
  border-radius:3px;
  pointer-events:none;
  animation:arrival .45s ease-out;
  font-size:12px;
}
.received-card img {
  width:42px;
  height:40px;
  object-fit:cover;
  border-radius:2px;
}
.received-card small {
  display:block;
  font-size:9px;
  margin-top:3px;
  color:#5f7979;
}
.action-flight {
  position:fixed;
  width:68px;
  height:85px;
  object-fit:cover;
  z-index:8;
  pointer-events:none;
  border:2px solid var(--paper);
  border-radius:3px;
  box-shadow:0 8px 25px #0005;
}
.home-header nav {
  background:#09182770;
  border-radius:3px;
}
.home-header .nav-button {
  color:#d4ddda;
}
.card-inspect {
  width:44px;
  height:44px;
  bottom:0;
  right:0;
}
.card-meta {
  padding-right:27px;
}
.card-collection>.card-tile {
  height:100%;
  align-self:center;
}
.card-collection>.card-tile .card-image {
  aspect-ratio:auto;
}
.card-collection>.card-tile .card-pick {
  height:100%;
}
.empire-summary {
  min-width:0;
}
.empire-name {
  min-width:0;
}
.empire-stats {
  gap:clamp(8px,1.3vw,20px);
}
.tableau-counter {
  font-size:10px;
}
.engine-scan {
  min-width:0;
}
.engine-scan .consume-capacity {
  white-space:nowrap;
}
@media(min-width:900px) and (max-width:1200px) {
  .roster:has(.player-2) .tableau-counter {
    display:none;
  }
  .roster:has(.player-2) .engine-scan {
    font-size:8px;
  }
  .roster:has(.player-2) .empire-name {
    font-size:11px;
  }
  .roster:has(.player-2) .empire-stats {
    gap:10px;
  }
}
.received-card {
  top:auto;
  bottom:2px;
  height:21px;
  box-shadow:none;
  left:10px;
  right:10px;
  background:var(--mint);
  font-size:10px;
  padding:2px 4px;
  gap:6px;
}
.received-card img {
  width:24px;
  height:17px;
}
.received-card small {
  display:none;
}
.empire-summary:has(.received-card) .engine-scan {
  visibility:hidden;
}
.empire-summary:has(.received-card) {
  background:#a9d9cb0d;
}
@media(max-width:619px) {
  .received-card {
    height:15px;
    font-size:7px;
    left:4px;
    right:4px;
    gap:4px;
    bottom:0;
  }
  .received-card img {
    height:12px;
    width:16px;
  }
  .roster:has(.player-2) .received-card {
    display:none;
  }
}
.card-inspect {
  top:0;
  bottom:auto;
  width:44px;
  height:44px;
  background:#f3f0e5df;
  border-radius:0 0 0 5px;
  z-index:3;
}
.card-meta {
  padding-right:0;
}
.selection-check {
  top:auto;
  bottom:7px;
  right:7px;
}
@keyframes arrival {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media(max-width:899px) {
  .empire-stats .tableau-counter {
    display:none;
  }
  .engine-scan {
    font-size:9px;
    gap:6px;
  }
  .empire-size {
    font-size:10px;
  }
}
@media(max-width:619px) {
  .engine-scan {
    font-size:8px;
    gap:5px;
    margin-top:5px;
  }
  .engine-scan .consume-capacity {
    font-size:7px;
  }
  .engine-scan .good-dot {
    height:6px;
    width:6px;
  }
  .empire-size {
    font-size:9px;
  }
  .roster:has(.player-2) .engine-scan {
    display:none;
  }
  .roster:has(.player-2) .empire-size {
    font-size:8px;
  }
  .received-card {
    left:0;
    right:0;
    font-size:10px;
    gap:5px;
    padding:4px;
  }
  .received-card img {
    width:28px;
    height:32px;
  }
  .received-card small {
    font-size:7px;
  }
  .card-inspect {
    width:44px;
    height:44px;
  }
}
@media(max-height:680px) and (max-width:619px) {
  .engine-scan {
    margin-top:4px;
    font-size:7px;
    min-height:10px;
  }
  .engine-scan .consume-capacity {
    font-size:6px;
  }
}
@media(max-height:520px) and (min-width:500px) {
  .engine-scan {
    display:none;
  }
  .empire-size {
    font-size:10px;
  }
  .card-inspect {
    width:44px;
    height:44px;
  }
}
@media(max-width:619px) {
  .phase-choices.advanced {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .advanced .phase-glyph {
    display:none;
  }
  .advanced .phase-choice {
    min-height:63px;
  }
  .advanced .phase-choice strong {
    font-size:12px;
  }
  .advanced .phase-choice small {
    font-size:8px;
  }
  .advanced .phase-check {
    display:none;
  }
  .game-header {
    gap:5px;
  }
  .game-coordinates {
    gap:7px;
    font-size:7px;
  }
  .game-header .brand {
    gap:4px;
  }
  .game-header .brand span {
    letter-spacing:.7px;
  }
  .game-header .icon-button {
    width:34px;
  }
}
.phase-choices.advanced {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-height:680px) {
  .mentor-note {
    display:none;
  }
}
@media(max-width:899px) {
  .roster:has(.player-2) .engine-scan {
    display:none;
  }
}
@media(min-width:620px) and (max-width:899px) and (min-height:521px) {
  .roster:has(.player-2) .empire-stats {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }
  .roster:has(.player-2) .empire-summary {
    padding:8px;
  }
  .roster:has(.player-2) .empire-name {
    font-size:11px;
  }
  .roster:has(.player-2) .empire-name small {
    display:none;
  }
}
@media(max-height:350px) and (min-width:500px) {
  .game-header {
    height:44px;
  }
  .roster .empire-summary {
    min-height:39px;
    padding:4px 7px;
  }
  .phase-rail {
    height:20px;
  }
  .hand-band {
    height:44px;
  }
  .play-desk {
    padding:5px 0;
  }
  .task-heading h1 {
    font-size:14px;
    margin-bottom:3px;
  }
  .task-heading .eyebrow {
    display:none;
  }
  .task-instruction {
    font-size:9px;
    line-height:1.35;
  }
  .task-heading {
    margin-bottom:5px;
    grid-column:2;
    grid-row:1;
  }
  .phase-choice {
    min-height:44px;
  }
  .phase-choices.advanced .phase-choice {
    min-height:44px;
  }
  .phase-choices.advanced .phase-choice strong {
    font-size:10px;
  }
  .phase-choices.advanced .phase-choice small {
    font-size:7px;
  }
  .pagination {
    height:30px;
  }
  .decision-content {
    gap:5px;
    grid-column:1;
    grid-row:1/3;
  }
  .action-dock {
    grid-column:2;
    grid-row:2;
    align-self:start;
    padding:6px 0 6px 12px;
  }
  .selection-count {
    display:none;
  }
  .phase-choices {
    align-content:stretch;
  }
  .roster:has(.player-2) .empire-stats {
    display:flex;
  }
  .roster:has(.player-2) .empire-name {
    min-height:0;
    white-space:nowrap;
  }
  .roster:has(.player-2) .empire-summary {
    min-height:43px;
  }
  .power-choice {
    padding:7px;
  }
  .power-choice small {
    font-size:9px;
  }
  .power-choice strong {
    font-size:11px;
  }
}

/* Contextual reference: one hoverable surface, independent of game layout. */
[data-help] { cursor:help; }
button[data-help] { cursor:pointer; }
.cost-badge[data-help], .card-vp[data-help], .card-meta[data-help] { cursor:help; }
[data-help][role="button"]:focus-visible { outline:2px solid #4e9d96;outline-offset:3px; }
.reader-type[data-help], .reader-body>.eyebrow[data-help], .printed-vp>[data-help] {
  text-decoration:underline dotted #6e8d8260;
  text-underline-offset:4px;
}
.printed-vp { flex-wrap:wrap; }
.printed-vp>span { display:inline-flex;align-items:center;gap:6px; }
.power-group>[data-help]:hover { background:#18394808;border-radius:2px; }
.reader-image:after { pointer-events:none; }
.reader-cost { z-index:1; }
.help-tooltip {
  position:fixed;
  z-index:100;
  padding:17px 19px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #fff9;
  border-radius:5px;
  box-shadow:0 14px 55px #0008,0 2px 8px #0003;
  font:15px/1.55 Manrope,Arial,sans-serif;
  text-align:left;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#8eaaa1 transparent;
}
.help-heading { display:flex;align-items:center;gap:13px; }
.help-heading strong { display:block;font-size:17px;line-height:1.25;letter-spacing:-.3px; }
.help-heading small { display:block;font-size:11px;color:#657e7c;margin-top:6px;line-height:1.5; }
.help-art { width:65px;height:65px;object-fit:cover;border-radius:3px;flex-shrink:0; }
.help-tooltip p { margin:11px 0 0; }
.help-power { display:grid;grid-template-columns:64px minmax(0,1fr);gap:9px;border-top:1px solid #18394820;padding-top:10px;margin-top:11px; }
.help-power b { color:#5f7c76;font:9px/1.8 ui-monospace,monospace;letter-spacing:.6px;text-transform:uppercase; }
.help-power span { font-size:14px;line-height:1.55; }
.help-scroll-hint { display:none;font-size:10px;color:#6f837d;margin-top:14px; }
.help-tooltip.scrollable .help-scroll-hint { display:block; }

/* Public commitments have a shared reveal before the next decision. */
.modal.reveal-dialog { width:1120px; }
.reveal-dialog .modal-header { padding:23px 27px; }
.reveal-dialog .modal-header h2 { font-size:31px;letter-spacing:-1px; }
.reveal-dialog .modal-body { padding:22px 27px 26px; }
.reveal-review-hint { display:none;color:#aac1c5;font-size:11px;align-self:center;margin-right:auto; }
.reveal-dialog.has-overflow .reveal-review-hint { display:block; }
.reveal-intro { margin:0 0 23px;color:#adc4c7;font-size:14px;line-height:1.6;max-width:760px; }
.orders-reveal,.builds-reveal { display:grid;grid-template-columns:repeat(var(--empires),minmax(0,1fr));gap:22px; }
.reveal-empire { min-width:0; }
.reveal-empire h3 { display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px;line-height:1.4; }
.reveal-empire h3 i { display:block;width:6px;height:6px;background:var(--mint);border-radius:50%;flex-shrink:0; }
.reveal-empire.player-0 h3 i { background:var(--coral); }
.reveal-empire.player-2 h3 i { background:var(--yellow); }
.reveal-empire.player-3 h3 i { background:#bab1d5; }
.revealed-orders { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.revealed-orders:has(>.revealed-order:only-child) { grid-template-columns:1fr; }
.revealed-order {
  min-height:218px;padding:19px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:var(--paper);color:var(--ink);border-radius:4px;
  border-top:4px solid var(--phase-color,var(--mint));
  animation:order-reveal .36s cubic-bezier(.2,.7,.2,1) both;
}
.order-numeral { font:9px ui-monospace,monospace;letter-spacing:1px;color:#6b827e; }
.revealed-order>.icon { width:45px;height:45px;margin:17px 0;color:#347d7c; }
.revealed-order strong { font-size:24px;letter-spacing:-.7px;line-height:1.2; }
.revealed-order>span:not(.order-numeral) { font-size:13px;margin-top:7px; }
.revealed-order small { font-size:11px;line-height:1.5;color:#6b827e;margin-top:7px; }
.reveal-card { perspective:1100px;max-width:300px;margin:0 auto; }
.reveal-card .card-tile { height:296px;max-height:none;animation:card-reveal .46s cubic-bezier(.18,.65,.2,1) both;animation-delay:calc(var(--reveal-order)*45ms);transform-origin:50% 60%; }
.reveal-card .card-image { aspect-ratio:auto; }
.reveal-card .card-caption { min-height:87px; }
.reveal-outcome { padding-top:15px; }
.reveal-outcome>strong { color:var(--mint);font:10px ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase; }
.reveal-outcome p { color:#b3c7c8;font-size:13px;line-height:1.6;margin:7px 0; }
.reveal-net { display:inline-flex;align-items:center;gap:7px;color:var(--paper);font:11px ui-monospace,monospace;line-height:1.6;padding-top:3px; }
.reveal-net .icon { width:15px;height:15px; }
.reveal-net>span { display:inline-flex;align-items:center;gap:6px;margin-left:6px;color:var(--mint); }
.reveal-pass { height:296px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed #8ba5a747;border-radius:4px;color:#92afb6; }
.reveal-pass>.icon { height:44px;width:44px;margin-bottom:20px;opacity:.6; }
.reveal-pass strong { font-size:20px; }
.reveal-pass p { font-size:13px;margin-top:10px; }
@keyframes card-reveal { from { opacity:0;transform:rotateY(-65deg) translateY(14px); } to { opacity:1;transform:rotateY(0) translateY(0); } }
@keyframes order-reveal { from { opacity:0;transform:translateY(12px) scale(.97); } to { opacity:1;transform:translateY(0) scale(1); } }

/* Short segues use the language of each phase, not an engine transition. */
.phase-1 { --phase-color:#c5b8d7; }
.phase-2 { --phase-color:var(--mint); }
.phase-3 { --phase-color:var(--coral); }
.phase-4 { --phase-color:var(--yellow); }
.phase-5 { --phase-color:#8fc6ce; }
.phase-segue-backdrop { position:fixed;inset:0;z-index:15;background:#0a1927ef;backdrop-filter:blur(6px);display:grid;place-items:center;padding:22px; }
.phase-segue { width:540px;max-width:100%;padding:24px 26px;text-align:center;color:var(--phase-color);animation:segue-in .18s ease-out both; }
.segue-track { display:flex;gap:6px;margin:0 auto 28px;max-width:210px; }
.segue-track i { flex:1;height:2px;background:#ffffff1c; }
.phase-1 .segue-track i:nth-child(1),.phase-2 .segue-track i:nth-child(2),.phase-3 .segue-track i:nth-child(3),.phase-4 .segue-track i:nth-child(4),.phase-5 .segue-track i:nth-child(5) { background:var(--phase-color); }
.phase-segue .eyebrow { color:#93aab2;font-size:10px;margin-bottom:12px; }
.phase-motif { width:124px;height:124px;display:block;margin:0 auto 16px; }
.phase-segue h2 { color:var(--paper);font-size:52px;letter-spacing:-2px;line-height:1.1;margin:0 0 12px; }
.segue-callers { color:#a7bec4;font-size:14px;line-height:1.6;margin:0 auto; }
.segue-continue { background:transparent;color:var(--phase-color);min-height:44px;margin-top:20px;padding:10px 15px;font-size:12px;display:inline-flex;align-items:center;gap:12px;border:1px solid #ffffff25;border-radius:3px; }
.segue-continue .icon { width:16px;height:16px; }
.scan-sweep { fill:currentColor;fill-opacity:.17;stroke:none;transform-origin:60px 60px;animation:scan-sweep .64s linear both; }
.scan-stars { animation:scan-stars .6s ease-out both; }
.assembly-piece { fill:currentColor;fill-opacity:.1;animation:assemble .48s cubic-bezier(.2,.7,.2,1) both; }
.piece-1 { --dx:0px;--dy:-24px; }
.piece-2 { --dx:24px;--dy:0px;animation-delay:50ms; }
.piece-3 { --dx:0px;--dy:24px;animation-delay:100ms; }
.piece-4 { --dx:-24px;--dy:0px;animation-delay:150ms; }
.arrival-world { fill:currentColor;fill-opacity:.08;transform-origin:60px 60px;animation:world-arrive .5s ease-out both; }
.arrival-orbit { stroke-dasharray:260;animation:orbit-arrive .6s ease-out both; }
.arrival-ship { fill:currentColor;transform-origin:60px 60px;animation:ship-arrive .6s ease-out both; }
.exchange-top { animation:exchange-top .45s ease-out both; }
.exchange-bottom { animation:exchange-bottom .45s ease-out both; }
.prosper-star { fill:currentColor;fill-opacity:.16;transform-origin:60px 60px;animation:world-arrive .38s .16s ease-out both; }
.cargo-outline { stroke-dasharray:400;animation:orbit-arrive .5s ease-out both; }
.cargo-fill { fill:currentColor;stroke:none;animation:cargo-fill .35s ease-out both; }
.fill-left { animation-delay:100ms; }.fill-right { animation-delay:180ms; }.fill-top { animation-delay:260ms; }
.reading-help .phase-segue * { animation-play-state:paused; }
@keyframes segue-in { from { opacity:0; } to { opacity:1; } }
@keyframes scan-sweep { from { transform:rotate(-70deg); } to { transform:rotate(260deg); } }
@keyframes scan-stars { from { opacity:0; } to { opacity:1; } }
@keyframes assemble { from { opacity:0;transform:translate(var(--dx),var(--dy)); } to { opacity:1;transform:translate(0,0); } }
@keyframes world-arrive { from { opacity:0;transform:scale(.6); } to { opacity:1;transform:scale(1); } }
@keyframes orbit-arrive { from { stroke-dashoffset:300;opacity:0; } to { stroke-dashoffset:0;opacity:1; } }
@keyframes ship-arrive { from { transform:rotate(-140deg); } to { transform:rotate(0); } }
@keyframes exchange-top { from { opacity:0;transform:translateX(-22px); } to { opacity:1;transform:translateX(0); } }
@keyframes exchange-bottom { from { opacity:0;transform:translateX(22px); } to { opacity:1;transform:translateX(0); } }
@keyframes cargo-fill { from { opacity:0;transform:translateY(10px); } to { opacity:.28;transform:translateY(0); } }
@media(max-width:850px) {
  .builds-reveal { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px; }
  .orders-reveal { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px; }
  .revealed-orders { grid-template-columns:1fr; }
}
@media(max-width:619px) {
  .help-tooltip { padding:15px;font-size:14px; }
  .help-heading strong { font-size:16px; }.help-power span { font-size:13px; }
  .help-power { grid-template-columns:56px minmax(0,1fr);gap:7px; }
  .reveal-dialog .modal-header { padding:12px 15px; }
  .reveal-dialog .modal-header h2 { font-size:23px;letter-spacing:-.7px; }
  .reveal-dialog .modal-body { padding:17px; }
  .reveal-dialog .modal-footer { flex-wrap:wrap;gap:8px; }
  .reveal-intro { font-size:12px;margin-bottom:19px; }
  .reveal-empire h3 { font-size:12px;margin-bottom:10px; }
  .reveal-card .card-tile,.reveal-pass { height:220px; }
  .reveal-card .card-caption { min-height:83px; }
  .reveal-card .card-caption strong { font-size:12px; }
  .reveal-outcome { padding-top:11px; }.reveal-outcome p { font-size:11px; }
  .reveal-net { font-size:9px;gap:4px;flex-wrap:wrap; }
  .reveal-net>span { margin-left:0;gap:4px; }
  .revealed-order { min-height:163px;padding:15px 10px; }
  .revealed-order>.icon { height:35px;width:35px;margin:13px 0; }
  .revealed-order strong { font-size:21px; }.revealed-order>span:not(.order-numeral) { font-size:12px; }
  .revealed-order small { font-size:10px; }
  .phase-segue { padding:20px 12px; }.phase-segue h2 { font-size:45px; }
  .phase-motif { height:104px;width:104px; }.segue-callers { font-size:13px; }
}
@media(max-height:520px) and (min-width:500px) {
  .phase-segue { display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 24px;text-align:left;padding:10px 20px; }
  .segue-track { grid-column:1/-1;width:170px;margin:0 auto 8px; }
  .phase-segue .eyebrow { grid-column:2;grid-row:2;margin:0;font-size:9px; }
  .phase-motif { grid-column:1;grid-row:2/6;width:110px;height:110px;margin:auto 0; }
  .phase-segue h2 { grid-column:2;grid-row:3;font-size:39px;margin:0; }
  .segue-callers { grid-column:2;grid-row:4;font-size:12px;margin:0; }
  .segue-continue { grid-column:2;grid-row:5;justify-self:start;margin-top:6px; }
  .reveal-dialog .modal-header { padding:8px 18px; }.reveal-dialog .modal-header h2 { font-size:24px; }
  .reveal-card .card-tile,.reveal-pass { height:220px; }.reveal-dialog .modal-body { padding:16px 20px; }
}