@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");
:root {
  font-family: "DM Sans", system-ui, sans-serif;
  color: #eaf0f1;
  background: #101d29;
  color-scheme: dark;
  --muted: #9eafba;
  --gold: #e0ba72;
  --panel: #192936;
  --line: #30434f;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
  border-radius: 9px;
  background: var(--gold);
  color: #17232b;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
}
button:hover {
  filter: brightness(1.12);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button.quiet,
.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: #e5ecef;
}
.danger {
  background: #7a3036;
  color: #fff;
}
.small {
  padding: 7px 10px;
  font-size: 12px;
}
.top {
  height: 85px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid var(--line);
}
.top > :last-child {
  margin-left: auto;
}
.brand {
  font-size: 25px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand span {
  font-size: 15px;
  letter-spacing: 4px;
  font-weight: 700;
}
.muted {
  color: var(--muted);
  font-size: 14px;
}
.catalog {
  max-width: 1300px;
  margin: auto;
  padding: 64px 40px 0;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.2px;
  font-weight: 700;
  color: var(--gold);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
}
h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.1;
  font-weight: 500;
  margin: 18px 0 24px;
}
h2 {
  font-size: 30px;
  font-weight: 500;
}
.lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 60px;
}
.game-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #182834;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.game-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
}
.cover {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center, #557b70, transparent 65%),
    linear-gradient(140deg, #173b40, #172b30);
}
.risk .cover {
  background:
    radial-gradient(ellipse at center, #85663a, transparent 65%),
    linear-gradient(140deg, #353629, #212c30);
}
.teg .cover {
  background:
    radial-gradient(ellipse at center, #5b668b, transparent 65%),
    linear-gradient(140deg, #2b3b54, #25283d);
}
.cover:after,
.cover:before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid #ffffff14;
  transform: rotate(-15deg);
}
.cover:after {
  inset: 40px;
  transform: rotate(15deg);
}
.cover-orbit {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 1px solid #e5d6ab35;
  border-radius: 50%;
}
.cover-orbit:after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed #e5d6ab40;
  border-radius: 50%;
}
.game-icon {
  font-size: 110px;
  line-height: 1;
  color: #f2dbaf;
  text-shadow: 4px 12px 20px #0006;
  z-index: 1;
}
.cover-caption {
  position: absolute;
  bottom: 12px;
  left: 20px;
  font-size: 8px;
  letter-spacing: 3px;
  color: #ddd8b4;
}
.card-body {
  padding: 26px;
}
.card-body h2 {
  font-size: 36px;
  margin: 12px 0;
}
.card-body h2 span {
  float: right;
  font-family: system-ui;
  color: var(--gold);
  font-size: 25px;
}
.card-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  min-height: 72px;
}
.meta {
  font-size: 11px;
  color: #d6dce0;
  border-top: 1px solid var(--line);
  padding-top: 17px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.section-heading h2 {
  margin: 9px 0 20px;
}
.saved-row {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 20px 6px;
}
.saved-row:hover {
  background: #ffffff04;
}
.saved-icon {
  font-size: 32px;
  color: var(--gold);
  width: 42px;
}
.saved-row p {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
.saved-row > span:last-child {
  margin-left: auto;
  font-size: 13px;
  color: var(--gold);
}
small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.saved-status {
  margin-left: auto;
  font-size: 13px;
}
.saved-status small {
  display: block;
  margin-top: 5px;
}
.empty {
  padding: 40px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: #d1dce2;
  line-height: 2;
}
.empty span {
  font-size: 14px;
  color: var(--muted);
}
footer {
  padding: 36px 0;
  margin-top: 42px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
dialog {
  max-width: 460px;
  width: calc(100% - 24px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: #eaf0f1;
  padding: 30px;
}
dialog::backdrop {
  background: #07121bcc;
}
dialog p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0;
}
input,
select {
  display: block;
  width: 100%;
  padding: 12px;
  background: #10202c;
  color: #f2f5f6;
  border: 1px solid #3b505d;
  border-radius: 8px;
  margin-top: 7px;
}
input[type="checkbox"] {
  display: inline;
  width: auto;
}
input[type="range"] {
  padding: 0;
}
.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.button-row > * {
  flex: 1;
}
.error {
  color: #ffaba3;
}
#notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #f0d398;
  color: #18252d;
  padding: 16px 24px;
  max-width: 90vw;
  z-index: 100;
  border-radius: 10px;
  box-shadow: 0 10px 40px #0006;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #f7d88b;
  outline-offset: 4px;
}
.game-top {
  height: 70px;
  padding: 0 28px;
  gap: 18px;
}
.game-top .title {
  font-family: Georgia, serif;
  font-size: 24px;
}
.connection {
  font-size: 12px;
  color: #83cfb0;
}
.connection.offline {
  color: #e7ae86;
}
.intro {
  max-width: 1050px;
  margin: 65px auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 65px;
  padding: 0 30px;
}
.intro p {
  color: var(--muted);
  line-height: 1.8;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.panel h3 {
  font-size: 17px;
}
.intro h1 {
  font-size: 65px;
}
.tabs {
  display: flex;
  gap: 8px;
}
.tabs button {
  flex: 1;
}
.lobby {
  max-width: 1000px;
  margin: 45px auto;
  padding: 0 25px;
}
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.room-code {
  font:
    32px ui-monospace,
    monospace;
  letter-spacing: 4px;
  color: var(--gold);
  margin: 15px 0;
}
.player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.player .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--player);
  flex-shrink: 0;
}
.player .name {
  font-size: 14px;
  flex: 1;
}
.player .name small {
  display: block;
  margin-top: 4px;
}
.player.current .name {
  color: var(--gold);
}
.player.mine {
  background: #ffffff05;
}
.game-shell {
  padding: 20px 24px;
  max-width: 1900px;
  margin: auto;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.board-header h2 {
  font-size: 24px;
  margin: 0;
}
.round-pill {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 7px 13px;
  font-size: 11px;
  white-space: nowrap;
}
.map-wrap {
  overflow: auto;
  border: 1px solid #3b505c;
  border-radius: 14px;
  background: #142c39;
  position: relative;
}
.world-map {
  display: block;
  width: 100%;
  min-width: 760px;
}
.ocean-text {
  font-size: 11px;
  letter-spacing: 6px;
  fill: #7096a4;
  opacity: 0.45;
}
.land {
  fill: #263f48;
  stroke: #496369;
  stroke-width: 1.4;
}
.grid-line {
  stroke: #486776;
  stroke-width: 0.6;
  opacity: 0.2;
}
.route {
  stroke: #a5b0a4;
  stroke-width: 1;
  opacity: 0.24;
  fill: none;
}
.route.highlight {
  stroke: #f7d78b;
  stroke-width: 2;
  opacity: 0.95;
}
.country {
  cursor: pointer;
  outline: none;
}
.country circle {
  stroke: #102430;
  stroke-width: 3;
}
.country .territory-label {
  font-size: 11px;
  fill: #dae5e9;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #142c39;
  stroke-width: 3px;
  stroke-linejoin: round;
  font-weight: 500;
}
.country .army {
  fill: #0e1c28;
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.country.selected circle,
.country:focus-visible circle {
  stroke: #fff5d8;
  stroke-width: 4;
}
.country.target circle {
  stroke: #e7bf69;
  stroke-width: 4;
}
.country.possible circle {
  stroke: #e7bf69;
  stroke-width: 2;
}
.map-help {
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 20px;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.legend span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 10px;
  color: var(--muted);
}
.sidebar .panel {
  padding: 20px;
  margin-bottom: 14px;
}
.phase-label {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  margin-bottom: 10px;
}
.instructions {
  font-size: 13px;
  line-height: 1.7;
  color: #b5c5ce;
}
.selected-info {
  margin: 12px 0;
  padding: 12px;
  border-left: 2px solid var(--gold);
  background: #ffffff05;
  font-size: 13px;
  line-height: 1.8;
}
.selected-info strong {
  color: var(--gold);
}
.action-button {
  width: 100%;
  margin-top: 12px;
}
.action-panel h3 {
  margin: 0 0 10px;
}
.dice-line {
  display: flex;
  gap: 5px;
  margin: 8px 0;
  align-items: center;
}
.die {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: #e5d5b3;
  color: #15232d;
  border-radius: 5px;
  font-weight: 700;
}
.die.red {
  background: #d77065;
  color: #fff;
}
.dice-line small {
  margin-left: 5px;
}
.lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hand {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.hand label {
  padding: 12px;
  background: #243744;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dde6e9;
  font-size: 12px;
  margin: 0;
  cursor: pointer;
}
.hand label:has(input:checked) {
  border-color: var(--gold);
  background: #594c31;
}
.card-symbol {
  display: block;
  color: var(--gold);
  font-size: 23px;
  margin: 5px 0;
}
.journal {
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  padding-left: 20px;
}
.chat-messages {
  max-height: 190px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.6;
}
.chat-messages p {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.chat-messages strong {
  color: var(--gold);
}
details {
  margin: 15px 0;
}
summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--gold);
  padding: 8px 0;
}
details p,
details li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.banner {
  padding: 22px;
  margin-bottom: 20px;
  border: 1px solid #927d4f;
  background: #3d3729;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.banner h2 {
  margin-bottom: 8px;
}
.banner p {
  margin: 0;
  font-size: 14px;
}
.banner button {
  margin-left: auto;
}
.count-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
}
.pact {
  font-size: 12px;
  line-height: 1.7;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.pact button {
  margin: 4px;
}
.zoom {
  width: 125px;
  font-size: 11px;
  margin: 0;
}
.row-flex {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tutorial-step {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.tutorial-step b {
  color: var(--gold);
}
@media (max-width: 1000px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
  .game-shell {
    padding: 15px;
  }
  .game-grid {
    gap: 14px;
  }
  .card-body {
    padding: 20px;
  }
  .game-top .muted {
    display: none;
  }
  .lower-grid {
    grid-template-columns: 1fr;
  }
  .game-top {
    padding: 0 16px;
    gap: 12px;
  }
}
@media (max-width: 740px) {
  .top {
    height: 70px;
    padding: 0 20px;
  }
  .top > .muted {
    display: none;
  }
  .catalog {
    padding: 40px 20px 0;
  }
  .game-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .game-card {
    display: grid;
    grid-template-columns: 32% 1fr;
  }
  .cover {
    height: 100%;
    min-height: 215px;
  }
  .game-icon {
    font-size: 70px;
  }
  .cover-caption {
    display: none;
  }
  .card-body p {
    min-height: 0;
    font-size: 13px;
  }
  .card-body h2 {
    font-size: 29px;
  }
  .card-body .eyebrow {
    font-size: 8px;
  }
  .saved-row {
    gap: 10px;
    flex-wrap: wrap;
  }
  .saved-status {
    margin-left: 50px;
  }
  .saved-row > span:last-child {
    font-size: 11px;
  }
  footer {
    display: block;
    line-height: 2;
  }
  footer span {
    display: block;
  }
  .intro,
  .lobby-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .intro {
    margin: 35px auto;
  }
  .intro h1 {
    font-size: 50px;
  }
  .game-layout {
    display: flex;
    flex-direction: column;
  }
  .sidebar {
    display: contents;
  }
  .action-panel {
    order: -1;
  }
  .game-main {
    order: 0;
  }
  .sidebar > .panel {
    order: 1;
  }
  .game-top .brand span {
    display: none;
  }
  .game-top .title {
    font-size: 21px;
  }
  .game-top {
    gap: 10px;
  }
  .connection {
    font-size: 10px;
  }
  .board-header {
    flex-wrap: wrap;
  }
  .banner {
    flex-wrap: wrap;
  }
  .banner button {
    margin-left: 0;
  }
  .world-map {
    min-width: 840px;
  }
  .panel {
    padding: 18px;
  }
  .game-shell {
    padding: 12px;
  }
  .action-panel .button-row {
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.grid-line {
  fill: none;
}
.country .hit {
  stroke: none;
  fill: transparent;
}
.country.selected .hit,
.country.target .hit,
.country.possible .hit,
.country:focus-visible .hit {
  stroke: none;
}
@media (max-width: 740px) {
  .sidebar > .action-panel {
    order: -1;
  }
  .action-panel .instructions {
    margin-bottom: 8px;
  }
  .action-panel label {
    margin: 8px 0;
  }
  .action-panel .selected-info {
    margin: 8px 0;
  }
  .action-panel .count-hint {
    display: none;
  }
}

/* The two classic atlases use separate country geometry and continent palettes. */
.atlas {
  background: #ded2b5;
}
.atlas-country {
  cursor: pointer;
  outline: none;
}
.atlas-country polygon {
  stroke: #5c6151;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: filter 0.12s;
}
.atlas-country:hover polygon {
  filter: brightness(1.12);
  stroke-width: 2.8;
}
.atlas-country.possible polygon {
  stroke: #7b3d20;
  stroke-width: 2.6;
}
.atlas-country.selected polygon,
.atlas-country:focus-visible polygon {
  stroke: #fffdf1;
  stroke-width: 5;
  filter: brightness(1.2) drop-shadow(0 0 3px #403c23);
}
.atlas-country.target polygon {
  stroke: #932f29;
  stroke-width: 5;
  filter: brightness(1.15);
}
.atlas-decoration {
  pointer-events: none;
}
.atlas-route {
  fill: none;
  stroke: #625e48;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.65;
}
.atlas-route.active {
  stroke: #973b1e;
  stroke-width: 3;
  stroke-dasharray: 6 3;
  opacity: 1;
}
.atlas-piece circle {
  stroke: #343930;
  stroke-width: 1.7;
}
.atlas-piece.chosen circle {
  stroke: white;
  stroke-width: 3;
}
.atlas-army {
  fill: #13212b;
  font:
    700 14px system-ui,
    sans-serif;
  dominant-baseline: central;
  text-anchor: middle;
}
.atlas-label {
  fill: #242e29;
  font:
    600 13px Georgia,
    serif;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #ede8d3;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.atlas-teg .atlas-label {
  font-variant: small-caps;
  font-size: 13px;
}
.atlas-oceans {
  fill: #54645d;
  font:
    italic 15px Georgia,
    serif;
  letter-spacing: 2px;
  text-anchor: middle;
  opacity: 0.8;
}
.atlas-compass {
  stroke: #927a45;
  stroke-width: 1;
  fill: none;
}
.atlas-compass path:first-of-type {
  fill: #b9a06b;
}
.atlas-compass text {
  stroke: none;
  fill: #706445;
  font:
    12px Georgia,
    serif;
  text-anchor: middle;
}
.atlas-cartouche {
  fill: #736348;
  font:
    9px Georgia,
    serif;
  letter-spacing: 1px;
}
.atlas-cartouche .atlas-title {
  fill: #9b3a2e;
  font:
    700 45px Georgia,
    serif;
  letter-spacing: 3px;
}
.atlas-teg .atlas-cartouche .atlas-title {
  fill: #424e4a;
  font-size: 37px;
}
.atlas-cartouche path {
  stroke: #907b51;
}
.atlas-frame {
  fill: none;
  stroke: #8f7c54;
  stroke-width: 1.2;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Monitor-wide game table: decisions / board / shared activity. */
.wide-table {
  max-width: none;
  min-width: 1400px;
  padding: 20px 24px;
}
.wide-table .game-layout {
  display: grid;
  grid-template-columns: clamp(280px, 16vw, 340px) minmax(720px, 1fr) clamp(
      260px,
      15vw,
      320px
    );
  align-items: start;
  gap: 20px;
}
.wide-table .game-main {
  min-width: 0;
}
.wide-table .world-map {
  min-width: 0;
}
.game-rail {
  position: sticky;
  top: 20px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #52616a transparent;
  padding-right: 5px;
}
.game-rail .panel {
  padding: 18px;
  margin: 0 0 14px;
}
.game-rail .panel h3 {
  margin-top: 0;
}
.game-rail .section-heading {
  display: block;
  margin: 12px 0;
}
.game-rail .section-heading h3 {
  margin-bottom: 6px;
}
.game-rail .hand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.game-rail .hand > .instructions {
  grid-column: 1 / -1;
}
.game-rail .hand label {
  min-width: 0;
  padding: 12px 9px;
  overflow-wrap: anywhere;
}
.game-rail .button-row {
  flex-wrap: wrap;
}
.game-rail .button-row button {
  flex: 1 1 auto;
}
.game-rail .journal {
  max-height: 240px;
}
.game-rail .chat-messages {
  max-height: 180px;
}
.game-rail details {
  margin: 0 0 14px;
}
.hand-panel > .eyebrow {
  font-size: 9px;
}

.learning-box {
  border: 1px solid #485660;
  border-radius: 9px;
  padding: 4px 12px;
  background: #ffffff04;
}
.learning-box summary {
  font-size: 12px;
  font-weight: 600;
}
.learning-box p,
.learning-box li {
  color: #c4d0d6;
  font-size: 12px;
  line-height: 1.65;
}
.learning-box ol {
  padding-left: 18px;
}
.turn-lesson {
  margin-top: 14px !important;
}
.hand-card {
  min-width: 0;
  border: 1px solid #536371;
  border-radius: 10px;
  background: #1c303e;
  overflow: hidden;
}
.hand-card:has(input:checked) {
  border-color: var(--gold);
  background: #373726;
}
.hand-card:has(details[open]) {
  grid-column: 1 / -1;
}
.game-rail .card-detail {
  margin: 0;
}
.card-detail summary {
  padding: 12px;
  list-style-position: inside;
}
.card-name {
  font-size: 13px;
  font-weight: 700;
  color: #edf1e7;
}
.card-detail .card-symbol {
  font-size: 15px;
  margin: 10px 0;
}
.card-open-hint {
  display: block;
  color: #b8c7cf;
  font-size: 10px;
  line-height: 1.5;
}
.card-explanation {
  padding: 0 12px;
}
.card-explanation p {
  font-size: 12px;
  color: #d2dbe0;
}
.game-rail .hand .card-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 0;
  border-top: 1px solid #ffffff1c;
  border-radius: 0;
  background: #00000018;
  font-size: 11px;
}
.card-pick input {
  flex: 0 0 auto;
}
.trade-reason {
  font-size: 12px;
  line-height: 1.6;
  color: #d9c697;
}
.example-card {
  margin-top: 8px;
  padding: 14px;
  background: #273b49;
  border: 1px solid #d4b876;
  border-radius: 9px;
}
.example-card .card-symbol {
  font-size: 20px;
}
.example-card small {
  font-size: 9px;
  color: #b8c7cf;
}
.victory-progress {
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: #ffffff05;
  color: #d8c38f;
  font-size: 12px;
  line-height: 1.6;
}
.combat-tray {
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid #59616a;
  border-radius: 12px;
  background: #1b2e3a;
}
.combat-tray p {
  font-size: 12px;
  line-height: 1.6;
  color: #c8d3d9;
  margin: 8px 0 0;
}
.combat-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.combat-heading small {
  color: var(--muted);
  font-size: 10px;
}
.combat-sides {
  display: flex;
  gap: 50px;
  margin-top: 10px;
}
.combat-sides > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.combat-sides span:not(.combat-die) {
  font-size: 10px;
  letter-spacing: 1px;
}
.combat-sides b {
  font-size: 12px;
}
.combat-die {
  display: inline-flex;
  width: 43px;
  height: 43px;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  border-radius: 8px;
  background: #f1eadb;
  color: #192d39;
  font-size: 38px;
  line-height: 1;
}
.combat-die.attacker {
  color: #a4322c;
}
.combat-tray details {
  margin: 4px 0 0;
}
.combat-tray summary {
  font-size: 11px;
  padding-bottom: 0;
}
.new-roll .combat-die {
  animation: reveal-die 0.55s ease-out both;
  animation-delay: var(--delay);
}
@keyframes reveal-die {
  from {
    transform: translateY(-12px) rotate(-100deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .new-roll .combat-die {
    animation: none;
  }
}

/* Brief, non-interactive feedback over the actual server-authoritative board. */
.conquest-fx{pointer-events:none}.attack-trail{fill:none;stroke:#e86438;stroke-width:3;stroke-dasharray:9 7;opacity:.8}.attack-projectile{fill:#fff3ba;stroke:#df4c2c;stroke-width:3}.attack-impact,.place-flash,.conquer-flash{fill:none;transform-box:fill-box;transform-origin:center;animation:board-pulse 1s ease-out both}.attack-impact{stroke:#f25e39;stroke-width:5;animation-delay:.4s}.place-flash{stroke:#fff1b3;stroke-width:5}.conquer-flash{stroke:#f6d06b;stroke-width:7;animation-duration:1.7s}.conquer-label{fill:#fff6cc;stroke:#483224;stroke-width:3;paint-order:stroke;font:bold 15px sans-serif;text-anchor:middle;animation:fx-fade 2s both}.territory-loss{display:flex;gap:12px;align-items:center;background:#471f25;border:1px solid #e9696e;border-radius:12px;padding:14px;color:#ffb3b6;margin-bottom:12px;animation:loss-in .35s ease-out}.territory-loss>span{font-size:36px;font-weight:bold}.territory-loss small{display:block;margin-top:5px;color:#ebc4c6}.sound-panel label{margin-top:12px}.sound-panel input[type=range]{width:100%}.sound-panel select{width:100%;font-size:12px}@keyframes board-pulse{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}@keyframes fx-fade{0%,65%{opacity:1}100%{opacity:0}}@keyframes loss-in{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.conquest-fx{display:none}.territory-loss,.new-roll .combat-die{animation:none}}

.game-card.monopoly .cover{background:linear-gradient(145deg,#234a45,#79a387)}
.game-card.monopoly .game-icon{color:#f0dfb6;text-shadow:0 8px 22px #12352c66}

/* TEG hand stays within reach independently of the decisions rail. */
.hand-float {position:fixed;right:calc(clamp(260px,15vw,320px) + 44px);bottom:24px;z-index:25;display:flex;align-items:center;gap:14px;padding:15px 22px;border:1px solid #f3d796;border-radius:18px;background:linear-gradient(135deg,#e8ca87,#b88c42);color:#182a32;box-shadow:0 8px 30px #0008,0 3px 0 #806335;text-align:left;}
.hand-float:hover {transform:translateY(-2px);background:#f4d99b;}
.hand-float-icon {font-size:34px;line-height:1;transform:rotate(-9deg);}
.hand-float strong {display:block;font-size:16px;}
.hand-float strong b {display:inline-block;min-width:24px;padding:2px 6px;border-radius:20px;background:#233b40;color:#ffe5a9;text-align:center;margin-left:5px;}
.hand-float small {display:block;margin-top:5px;font-size:11px;}
.teg-hand-dialog {max-width:980px;width:calc(100vw - 80px);max-height:90dvh;padding:0;overflow:hidden;box-shadow:0 30px 100px #000b;border:1px solid #b49a64;}
.hand-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;border-bottom:1px solid #ffffff22;background:#1a303c;}
.hand-dialog-header h2 {margin:8px 0 0;font-size:30px;}
.hand-dialog-header button {flex-shrink:0;}
.hand-dialog-body {max-height:calc(90dvh - 112px);overflow:auto;padding:20px 28px 28px;overscroll-behavior:contain;}
.hand-intro {margin-top:0;padding:14px 18px;border-radius:10px;background:#ffffff08;}
.teg-hand-dialog .hand {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0;}
.teg-hand-dialog .card-name {font-size:20px;}
.teg-hand-dialog .card-symbol {font-size:24px;margin:16px 0;display:block;}
.teg-hand-dialog .card-open-hint {font-size:12px;}
.teg-hand-dialog .card-detail summary {padding:20px;cursor:pointer;}
.teg-hand-dialog .card-explanation {padding:0 20px;}
.teg-hand-dialog .card-explanation p {font-size:15px;line-height:1.65;}
.teg-hand-dialog .card-pick {display:flex;align-items:center;gap:10px;padding:14px 20px;margin:0;border-top:1px solid #ffffff22;font-size:14px;cursor:pointer;}
.teg-hand-dialog .card-pick input {width:20px;height:20px;margin:0;accent-color:#e0bd75;}
.teg-hand-dialog .trade-reason {font-size:15px;}
.teg-hand-dialog .learning-box {margin:14px 0;border:1px solid #ffffff20;border-radius:10px;padding:14px;}
.teg-hand-dialog .learning-box summary {cursor:pointer;color:#e8ca87;}
.teg-hand-dialog .button-row {position:sticky;bottom:-28px;background:#172936;padding:14px 0;box-shadow:0 -8px 15px #172936;}
.hand-after {font-size:12px!important;}
@media (prefers-reduced-motion:reduce) {.hand-float:hover {transform:none;}}

/* Dice thrown by the players: opening roll-off and waiting defence. */
.combat-die.waiting{background:#2a3b47;color:#9fb3c0;border:1px dashed #9fb3c0;font-size:22px;animation:die-wait 1.2s ease-in-out infinite}
@keyframes die-wait{50%{opacity:.45}}
.rolloff-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.rolloff-row small{flex-basis:100%;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.rolloff-die{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;padding:6px 8px;border-radius:10px;border:2px solid var(--player);background:#ffffff0d;font-size:11px}
.rolloff-die b{font-size:38px;line-height:1;color:#f1eadb}
.rolloff-die.winner{background:#f6d06b22;box-shadow:0 0 0 2px #f6d06b}
.check-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}
.check-row input{width:auto;margin-top:2px}
@media (prefers-reduced-motion: reduce){.combat-die.waiting{animation:none}}

/* TEG: the real two-oval board (open-teg geometry) on parchment. */
.teg-board{background:#3a2612}
.teg-country path{stroke:#3b2a18;stroke-width:.55;stroke-linejoin:round;transition:filter .12s}
.teg-country:hover path{filter:brightness(1.1);stroke-width:1}
.teg-country.possible path{stroke:#7b2d14;stroke-width:1.3}
.teg-country.selected path,.teg-country:focus-visible path{stroke:#fffdf1;stroke-width:2;filter:brightness(1.18) drop-shadow(0 0 1.5px #403c23)}
.teg-country.target path{stroke:#a3241c;stroke-width:2.2;filter:brightness(1.12)}
.teg-link{fill:none;stroke:#a3241c;stroke-width:1.4;stroke-dasharray:3 2}
.teg-piece circle:first-of-type{stroke:#241a10;stroke-width:.8}
.teg-piece.chosen circle:first-of-type{stroke:#fff;stroke-width:1.6}
.teg-piece .atlas-army{font:700 7.4px system-ui,sans-serif}
.teg-piece .atlas-label{font:600 4.6px Georgia,serif;letter-spacing:.25px;fill:#2a1d10;stroke:#f3e7c9;stroke-width:1.1}
.teg-title text{fill:#f3dfaa;font:700 8px Georgia,serif;letter-spacing:1.2px;text-anchor:middle}
.rolloff-die.winner::after{content:"★ gana";font-size:9px;letter-spacing:.06em;color:#f6d06b}

/* TEG cards: white card, black-ink engraving, country name in capitals (Yetem deck). */
.teg-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(100%,190px);aspect-ratio:5/7;margin:0 auto 10px;padding:12px 10px 10px;box-sizing:border-box;border-radius:9px;background:#fbf8ef;color:#1d1a16;border:1px solid #2b2620;box-shadow:inset 0 0 0 4px #fbf8ef,inset 0 0 0 5px #1d1a16,0 6px 14px #0006}
.teg-card-art{flex:1;display:grid;place-items:center;width:100%}
.teg-card-art svg{width:92%;height:auto;max-height:100%}
.teg-card.wild .teg-card-art svg{width:100%}
.teg-card-name{font:700 15px Georgia,serif;letter-spacing:1.2px;text-align:center;line-height:1.15;border-top:1px solid #1d1a16;padding-top:6px;width:100%}
.teg-card-kind{font:italic 11px Georgia,serif;color:#5b4f3f}
.teg-card.small{width:120px;padding:8px 6px}
.teg-card.small .teg-card-name{font-size:11px}
.teg-hand-card .card-detail summary{text-align:center}
.teg-hand-card.picked .teg-card{box-shadow:inset 0 0 0 4px #fbf8ef,inset 0 0 0 5px #1d1a16,0 0 0 3px var(--gold),0 6px 14px #0006;transform:translateY(-4px)}
.teg-example{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0}
.teg-example small{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.table-options{margin:16px 0;padding:14px;border:1px solid #ffffff22;border-radius:10px;background:#ffffff08}
.table-options label{display:grid;gap:6px;margin-top:10px;font-size:13px}
.table-options .count-hint{margin:4px 0 0}
.ask-card{margin-top:12px;padding:12px;border:1px solid var(--gold);border-radius:10px;background:#3a331f}
.ask-card p{margin:0 0 10px;font-size:13px;line-height:1.5}
.ask-card .quiet{margin-top:8px;width:100%}
.talk-mode{font-size:12px;line-height:1.5;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#ffffff0d}
.talk-mode.fair-play{background:#2a3f2f;border:1px solid #6fae7b}
/* The black army must stay visible on the dark table. */
.player .dot{box-shadow:0 0 0 1.5px #e9dcc0}
.game-card.dixit .cover{background:linear-gradient(180deg,#2b235033,#2b2350cc),url(/assets/dixit/deck/card-006.jpg) center 30%/cover}
.game-card.dixit .game-icon{color:#fff3d6;text-shadow:0 8px 24px #2b235099}
.game-card.catan-real .cover{background:radial-gradient(circle at 70% 25%,#f6d06b55,transparent 45%),linear-gradient(150deg,#7a2d14,#c2662b 50%,#e8b04b)}
.game-card.catan-real .game-icon{color:#fff1cf;text-shadow:0 8px 24px #4a1a0a99}
.game-card.rivals .cover{background:linear-gradient(135deg,#f3e1bb,#c98f4f)}
.game-card.rivals .game-icon{color:#5a3413;text-shadow:0 8px 24px #fff8}

/* Biblioteca: estantes por tipo de juego y filtro por cantidad de jugadores. */
.player-filter{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 8px}
.player-filter .chip{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:600 14px system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.player-filter .chip:hover{border-color:var(--gold);color:#f2e6c8}
.player-filter .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1b2630}
.shelf{margin-top:38px}
.shelf .game-grid{margin:18px 0 18px}
.shelf-heading h2{margin:8px 0 0;font-size:32px}
.shelf[hidden],.game-card[hidden]{display:none!important}
.shelf-empty{color:var(--muted);margin:30px 0 50px}
@media (max-width:740px){.player-filter{margin-top:24px}.player-filter .chip{padding:8px 14px;font-size:13px}.shelf{margin-top:28px}.shelf-heading h2{font-size:26px}}
/* Portadas de los juegos modernos */
.game-card.loveletter .cover{background:radial-gradient(circle at 70% 25%,#ffd6e055,transparent 45%),linear-gradient(150deg,#5a1f33,#a8435e 55%,#e59aa8)}
.game-card.sushigo .cover{background:radial-gradient(circle at 30% 25%,#fff3c455,transparent 40%),linear-gradient(150deg,#1f4e5a,#3f9a8f 55%,#f2c46b)}
.game-card.toma6 .cover{background:radial-gradient(circle at 70% 30%,#ffd9a055,transparent 40%),linear-gradient(150deg,#3a2a5e,#7a4fb0 55%,#f0a35e)}
.game-card.themind .cover{background:radial-gradient(circle at 50% 30%,#fff1dd66,transparent 45%),linear-gradient(160deg,#28345e,#6a6fb3 55%,#f3c6a0)}
.game-card.hanabi .cover{background:radial-gradient(circle at 28% 30%,#ffcf6b66,transparent 28%),radial-gradient(circle at 72% 58%,#ff7aa866,transparent 28%),linear-gradient(160deg,#121f3d,#2b3f7a)}
.game-card.carcassonne .cover{background:radial-gradient(circle at 70% 25%,#fff0b855,transparent 45%),linear-gradient(150deg,#3d5a2a,#7d9b4a 55%,#d9b36a)}
.game-card.azul .cover{background:radial-gradient(circle at 30% 25%,#e8f6ff66,transparent 40%),linear-gradient(150deg,#123d6b,#2f6fb3 55%,#9fd0f0)}
.game-card.splendor .cover{background:radial-gradient(circle at 65% 30%,#ffe9a066,transparent 40%),linear-gradient(150deg,#2a1d4f,#5b3fa0 50%,#d8b45a)}
.game-card.aventureros .cover{background:radial-gradient(circle at 70% 25%,#ffe2a855,transparent 45%),linear-gradient(150deg,#5a2a1a,#b0552b 55%,#e7c27a)}
.game-card.jaipur .cover{background:radial-gradient(circle at 30% 30%,#ffe0a066,transparent 40%),linear-gradient(150deg,#6b1f3a,#c0533a 55%,#f0b84a)}
.game-card.lostcities .cover{background:radial-gradient(circle at 70% 25%,#fff6d455,transparent 45%),linear-gradient(150deg,#1d4a52,#4b8f7a 55%,#e8d39a)}
.game-card.patchwork .cover{background:repeating-linear-gradient(45deg,#ffffff0d 0 10px,transparent 10px 20px),linear-gradient(150deg,#5a3a2a,#a8664a 55%,#e8c39a)}
.game-card.codenames .cover{background:radial-gradient(circle at 50% 30%,#ffffff22,transparent 45%),linear-gradient(120deg,#6e2424,#8c2f2f 45%,#2f5d8c 55%,#22466e)}
.game-card.wavelength .cover{background:radial-gradient(circle at 50% 110%,#ffd08a88,transparent 55%),linear-gradient(150deg,#1d3a5e,#3f8fb0 50%,#f08a5e)}
.game-card.skull .cover{background:radial-gradient(circle at 70% 30%,#ffc7d855,transparent 40%),linear-gradient(150deg,#2b2b33,#5a4a6b 55%,#e88aa8)}
.game-card.coup .cover{background:radial-gradient(circle at 50% 25%,#ffe7a055,transparent 45%),linear-gradient(150deg,#2a1f12,#6b4a1f 55%,#c9a24a)}
:is(.loveletter,.sushigo,.toma6,.themind,.hanabi,.carcassonne,.azul,.splendor,.aventureros,.jaipur,.lostcities,.patchwork,.codenames,.wavelength,.skull,.coup).game-card .game-icon{color:#fff6e6;text-shadow:0 8px 24px #0006}

/* Ludo, Buraco and Hold’em */
.game-card.ludo .cover{background:conic-gradient(from 45deg at 50% 50%,#d34e48 0 25%,#2b8b65 0 50%,#d99b25 0 75%,#416bc1 0);color:#fff8e7}.game-card.buraco .cover{background:radial-gradient(ellipse at top,#427b6c,#193f36);color:#f5dfaf}.game-card.poker .cover{background:radial-gradient(ellipse,#365c4d,#122c28);color:#e1bc72}

/* Murano · lagoon and colored glass. */
.game-card.murano .cover{background:radial-gradient(ellipse at 75% 70%,#e6c98366,transparent 35%),linear-gradient(145deg,#174e50,#3c8d79)}
.game-card.murano .game-icon{color:#f0d39d;text-shadow:14px 7px 0 #b9594e,-14px 7px 0 #7ab5a4;transform:rotate(-12deg)}
.game-card.murano .cover-orbit{border-color:#d7e4c866}

.game-card.uno-cover .cover { background: radial-gradient(ellipse at 70% 15%,#f79f50,transparent 65%),#dc3049; }
.game-card.uno-cover .game-icon { color:#fff6c7; font:950 italic 64px system-ui; letter-spacing:-5px; transform:rotate(-14deg); text-shadow:4px 5px #8b173c; }
.game-card.uno-flip-cover .cover { background:linear-gradient(125deg,#148c91 0 48%,#242134 49% 52%,#7949cb 53%); }
.game-card.uno-flip-cover .game-icon { color:white; font:900 100px system-ui; text-shadow:3px 5px #29223988; }