/* Splendor — styles. The screen, lobby, chat, modal, tip and overlay chrome is
   the collection's shared shell; everything under "the gem merchants' table"
   below is this game's own. */

:root {
  --bg-1: #0f3b3a;
  --bg-2: #051a1b;
  --ink: #f3ead6;
  --dim: #a7bcb6;
  --panel: #0c2b2c;
  --panel-2: #123a3a;
  --line: rgba(255, 240, 210, 0.12);
  --accent: #e8c25a;
  --accent-dim: rgba(232, 194, 90, 0.16);
  --win: #8fe3b2;
  --warn: #ff9b8a;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  --radius: 14px;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-2);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* The backdrop is pinned to the screen. Painted on the body it would be one
   screen tall and start over below that, and the lobby and the table on a
   phone are longer than a screen. A jeweller's velvet, lit from above. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1000px 640px at 50% -10%, rgba(232, 194, 90, 0.12), transparent 62%),
    radial-gradient(900px 600px at 50% 118%, rgba(30, 120, 110, 0.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
}

a {
  color: var(--accent);
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- screens */

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#screen-home,
#screen-lobby {
  justify-content: center;
  padding: 24px;
  gap: 14px;
}

/* the long tagline fills a phone, so leave room for the fixed "← Collection"
   link above the logo and the version badge below the small print */
#screen-home {
  padding-block: 64px 44px;
}

.back-home {
  position: fixed;
  top: 14px;
  left: 16px;
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  z-index: 5;
}

.back-home:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- home */

.logo {
  margin: 0;
  font-size: clamp(34px, 8vw, 58px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

@keyframes sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg) translateY(-3px); }
}

.tagline {
  margin: 0 0 10px;
  color: var(--dim);
  text-align: center;
  max-width: 47em;
  line-height: 1.6;
}

.field {
  width: min(340px, 86vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 17px;
  padding: 13px 16px;
  outline: none;
}

.field:focus {
  border-color: rgba(255, 194, 51, 0.55);
}

.field::placeholder {
  color: #7f9d97;
}

.btn {
  border-radius: var(--radius);
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease;
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  filter: grayscale(0.55) brightness(0.65);
  cursor: default;
}

.btn.primary {
  background: linear-gradient(180deg, #ffd25e, #f0a91f);
  color: #2a1d00;
  width: min(340px, 86vw);
}

.btn.secondary {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--dim);
  font-weight: 600;
  padding: 9px 16px;
  font-size: 14px;
}

.join-row {
  display: flex;
  gap: 10px;
  width: min(340px, 86vw);
}

.join-row .field {
  flex: 1;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.divider {
  color: #7f9d97;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(340px, 86vw);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

#home-status {
  min-height: 22px;
  color: var(--dim);
  text-align: center;
  max-width: 36em;
}

#home-status.error {
  color: #ff9c9c;
}

.small-print {
  color: #7f9d97;
  font-size: 12.5px;
  text-align: center;
  max-width: 47em;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- lobby */

.lobby-panel {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 28px;
  width: min(430px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}

.lobby-label {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#lobby-code {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  color: var(--accent);
  text-shadow: 0 4px 18px rgba(255, 194, 51, 0.25);
  user-select: all;
}

.copy-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#lobby-players {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.seat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
}

.seat-row.empty {
  opacity: 0.4;
  border-style: dashed;
}

.seat-name {
  font-weight: 700;
}

.seat-name.dim {
  color: var(--dim);
  font-weight: 500;
}

.chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--dim);
}

.chip.you {
  background: var(--accent-dim);
  color: var(--accent);
}

.chip.bot {
  background: rgba(63, 159, 216, 0.22);
  color: #9fd2f0;
}

.kick {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex: none;
}

.kick:hover {
  background: rgba(229, 72, 77, 0.32);
  color: #ffb4b4;
}

/* Two lines reserved, not one. The hint rewrites itself as the table fills
   ("Share the code or link — or add a bot" becoming "4 aboard — ten rounds"),
   and the long one wraps: every button below it moved down the moment somebody
   joined. It is the only thing on this screen whose height depends on content. */
#lobby-hint {
  color: var(--dim);
  font-size: 14px;
  text-align: center;
  line-height: 1.5; min-height: 3em;
}

.side-pick {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.side-pick.on {
  background: var(--accent-dim);
  border-color: rgba(255, 194, 51, 0.6);
  color: var(--accent);
}

.side-pick:disabled {
  cursor: default;
}

.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex: none;
  color: #101418;
}

.av.empty {
  background: rgba(255, 255, 255, 0.07);
  color: var(--dim);
}

.av.bot {
  background: #17403f;
  color: #ffd25e;
  font-size: 17px;
}

.av.s0 { background: #8fd6a8; }
.av.s1 { background: #58b7ff; }
.av.s2 { background: #ffd166; }
.av.s3 { background: #ff5d8f; }
.av.s4 { background: #b98aff; }
.av.s5 { background: #63e0dc; }
.av.s6 { background: #ff9c5e; }
.av.s7 { background: #d3e15c; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
  min-height: 50px;
}

.topbar .spacer {
  flex: 1;
}

/* ---------------------------------------------------------------- action bar */

#action-bar {
  width: min(1080px, 100%);
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 66px;
}

.pick {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.pick:hover:not(:disabled) {
  border-color: rgba(255, 194, 51, 0.6);
}

.pick:disabled {
  opacity: 0.35;
  cursor: default;
}

.pick.go {
  background: linear-gradient(180deg, #ffd25e, #f0a91f);
  color: #2a1d00;
  border: 0;
}

.pick.warn {
  background: rgba(229, 72, 77, 0.12);
  border-color: rgba(229, 72, 77, 0.45);
}

/* ---------------------------------------------------------------- feed */

#feed {
  position: fixed;
  right: 12px;
  top: 58px;
  width: 300px;
  max-height: min(300px, 34dvh);
  overflow-y: auto;
  background: rgba(4, 20, 21, 0.62);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
  z-index: 6;
}

.feed-line {
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.feed-line:last-child {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- chat */

#chat {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 7;
}

#chat-panel {
  width: 300px;
  height: 340px;
  max-height: 46dvh;
  background: rgba(8, 28, 29, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.chat-head {
  padding: 9px 13px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}

#chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-msg {
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
}

.chat-time {
  color: #6f8d88;
  font-size: 11px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

.chat-name {
  font-weight: 800;
  margin-right: 6px;
}

.chat-name.s0 { color: #8fd6a8; }
.chat-name.s1 { color: #58b7ff; }
.chat-name.s2 { color: #ffd166; }
.chat-name.s3 { color: #ff5d8f; }
.chat-name.s4 { color: #b98aff; }
.chat-name.s5 { color: #63e0dc; }
.chat-name.s6 { color: #ff9c5e; }
.chat-name.s7 { color: #d3e15c; }

.chat-msg.mine .chat-text {
  color: #f3ead6;
}

#chat-form {
  display: flex;
  border-top: 1px solid var(--line);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 14px;
  padding: 11px 12px;
}

.chat-send {
  padding: 0 14px;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
}

#chat-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  position: relative;
}

#chat-unread {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

#chat-peek {
  max-width: 300px;
  background: rgba(8, 28, 29, 0.97);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
}

#chat-peek .chat-text {
  color: var(--dim);
}

.chat-bubble {
  position: absolute;
  top: -8px;
  left: 10px;
  transform: translateY(-100%);
  background: #fff;
  color: #10302e;
  border-radius: 12px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  max-width: 240px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 8;
  pointer-events: none;
  word-break: break-word;
}

.chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* ---------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 13, 0.76);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 18px;
}

.panel {
  background: linear-gradient(180deg, #15403e, #0a2324);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px;
  width: min(440px, 94vw);
  max-height: 88dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow);
  text-align: center;
}

.panel.wide {
  width: min(700px, 94vw);
  text-align: left;
  align-items: stretch;
}

.panel h2 {
  margin: 0;
  font-size: 24px;
}

.rules {
  margin: 0;
  padding-left: 20px;
  color: var(--dim);
  line-height: 1.6;
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rules b,
.rules i {
  color: var(--ink);
}

.credit {
  color: #7f9d97;
  font-size: 12.5px;
  line-height: 1.55;
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#go-table th,

#go-rank {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
}

.rank-row.me {
  border-color: rgba(255, 194, 51, 0.5);
}

.rank-pos {
  font-weight: 900;
  font-size: 16px;
  width: 22px;
  text-align: center;
  color: var(--dim);
}

.rank-name {
  font-weight: 700;
  flex: 1;
  text-align: left;
}

.rank-score {
  font-weight: 800;
  color: var(--accent);
}

#go-wait {
  color: var(--dim);
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- toasts, flash */

#toasts {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: rgba(8, 28, 29, 0.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.toast.gone {
  opacity: 0;
  transform: translateY(-8px);
}

.flash {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(24px, 5.4vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 14px 34px;
  border-radius: 18px;
  background: rgba(6, 26, 27, 0.95);
  border: 2px solid var(--accent);
  color: var(--accent);
  z-index: 25;
  animation: flashpop 1.7s ease forwards;
  text-align: center;
  pointer-events: none;
}

.flash.plain {
  border-color: var(--line);
  color: var(--ink);
}

@keyframes flashpop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  22% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 26;
  overflow: hidden;
}

#confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(105dvh) rotate(660deg); opacity: 0; }
}

/* ---------------------------------------------------------------- layout: desktop gutter */

@media (min-width: 1000px) {
  #screen-game {
    /* keep the docked log + chat column clear of the play area */
    padding-right: 320px;
  }
}

/* ---------------------------------------------------------------- narrow screens
   (keep this block at the END of the file: it must win the cascade) */

@media (max-width: 999px) {
  #feed {
    position: static;
    width: auto;
    margin: 8px 14px;
    max-height: 150px;
    order: 9;
  }

  #screen-game {
    padding-bottom: 90px;
  }

  #chat {
    bottom: 10px;
    right: 10px;
  }

  #chat-panel {
    width: min(300px, calc(100vw - 20px));
  }

  #board-wrap {
    align-self: center;
  }
}

/* Disconnect banner: the table stalls until the player returns or the host
   resolves it (neutral tones so it reads on any of our palettes) */
#dc-banner { display: none; }
#dc-banner.on { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 2px; max-width: 620px; padding: 0 10px; }
#dc-banner .dc-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: rgba(255, 92, 92, 0.14); border: 1px solid rgba(255, 92, 92, 0.55); border-radius: 10px; padding: 7px 12px; font-size: 13px; line-height: 1.35; }
#dc-banner .dc-row.covered { background: rgba(127, 127, 127, 0.12); border-color: rgba(127, 127, 127, 0.45); }
#dc-banner .dc-btn { border: 1px solid rgba(127, 127, 127, 0.55); background: rgba(127, 127, 127, 0.16); color: inherit; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
#dc-banner .dc-btn:hover { background: rgba(127, 127, 127, 0.28); }

/* Observers: watch chip, lobby note, and the shadow-a-player bar */
#watch-chip { display: none; }
#watch-chip.on { display: inline-block; margin-left: 8px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, 0.16); border: 1px solid rgba(127, 127, 127, 0.4); vertical-align: middle; }
#lobby-watch { display: none; }
#lobby-watch.on { display: block; margin: 6px auto 0; font-size: 12.5px; opacity: 0.85; text-align: center; }
#ob-bar { display: none; }
#ob-bar.on { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 2px; max-width: 620px; padding: 0 10px; }
#ob-bar .ob-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: rgba(120, 160, 255, 0.12); border: 1px solid rgba(120, 160, 255, 0.5); border-radius: 10px; padding: 7px 12px; font-size: 13px; line-height: 1.35; }
#ob-bar .ob-switch { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#ob-bar .ob-btn { border: 1px solid rgba(127, 127, 127, 0.55); background: rgba(127, 127, 127, 0.16); color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
#ob-bar .ob-btn:hover { background: rgba(127, 127, 127, 0.28); }
#ob-bar .ob-btn.on { background: rgba(120, 160, 255, 0.3); border-color: rgba(120, 160, 255, 0.75); cursor: default; }

/* Seat claiming / resigning */
#ob-bar .ob-btn.claim { background: rgba(120, 230, 160, 0.18); border-color: rgba(120, 230, 160, 0.6); }
#ob-bar .ob-btn.claim:hover { background: rgba(120, 230, 160, 0.3); }
#lobby-watch button { margin-left: 8px; border: 1px solid rgba(120, 230, 160, 0.6); background: rgba(120, 230, 160, 0.18); color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
#lobby-watch button:hover { background: rgba(120, 230, 160, 0.3); }

/* Announcements must survive any browser width: wrap instead of clipping */
.flash { max-width: min(92vw, 780px); width: max-content; white-space: normal; overflow-wrap: break-word; text-align: center; box-sizing: border-box; }


/* ---------------------------------------------------------------- tips and card texts */

.tb-tip {
  position: fixed;
  z-index: 40;
  max-width: min(300px, calc(100vw - 16px));
  pointer-events: none;
  background: #082021;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 9px 11px;
}

.tb-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.42;
  color: var(--ink);
  text-align: left;
}

.tb-card-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-left: 7px;
  border-left: 3px solid var(--set, var(--dim));
}


.tb-card-glyph { font-size: 18px; line-height: 1; align-self: center; }
.tb-card-name { font-size: 14.5px; }

.tb-card-str {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.tb-card-cry { color: var(--accent); opacity: 0.9; }
.tb-card-note { color: var(--dim); font-size: 12.5px; }
.tb-card-why { color: #ffb4a0; font-size: 12.5px; }

.tb-card-base {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}

/* a card's tip is edged in the colour of its border */
.tb-card-head.brown { border-left-color: #b98a52; }
.tb-card-head.blue { border-left-color: var(--blue-card); }


/* ================================================================ the gem merchants' table */

.logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.logo-pre {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 0.32em;
}
.logo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(56px, 13vw, 100px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff6d8 12%, #e8c25a 55%, #a87b25 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  text-shadow: none;
}
h2 { font-family: var(--serif); font-weight: 700; }

/* ---------------------------------------------------------------- the gems
   fill, edge and facet lines for the <use>d shapes; the chip colours for
   tokens, cost circles and bonuses */

.g-diamond, .t-diamond { --gf: #f4f8fb; --ge: #6f7f8c; --gl: #9fb4c4; --chip: #eef2f5; --chip-ink: #1f2a33; --chip-ring: #b9c5cf; }
.g-sapphire, .t-sapphire { --gf: #4386e6; --ge: #11316b; --gl: #b4d0ff; --chip: #2d66c8; --chip-ink: #fff; --chip-ring: #173c82; }
.g-emerald, .t-emerald { --gf: #32b872; --ge: #0a4d2d; --gl: #c2f5d6; --chip: #1f8f55; --chip-ink: #fff; --chip-ring: #0d5a34; }
.g-ruby, .t-ruby { --gf: #e44b42; --ge: #6a110f; --gl: #ffc6bf; --chip: #c8342d; --chip-ink: #fff; --chip-ring: #7a1814; }
.g-onyx, .t-onyx { --gf: #403835; --ge: #0b0909; --gl: #a69a93; --chip: #2e2927; --chip-ink: #fff; --chip-ring: #0e0c0b; }
.g-gold, .t-gold { --gf: #f6c83e; --ge: #84600f; --gl: #fff3c0; --chip: #e7b22c; --chip-ink: #3a2a00; --chip-ring: #946d10; }

svg.gem { width: 1em; height: 1em; display: block; overflow: visible; }

/* a token: a parchment disc with the gem, in a ring of its colour */
.tok {
  --ts: 42px;
  position: relative;
  flex: none;
  width: var(--ts);
  height: var(--ts);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: calc(var(--ts) * 0.5);
  background: radial-gradient(circle, #f3e9d0 0 50%, #cdbb93 52%, var(--chip) 55% 100%);
  border: 2px solid var(--chip-ring);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.45);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.tok-n {
  position: absolute;
  right: -7px;
  bottom: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #082021;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--ink);
  font: 800 12px/18px 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tok.none { opacity: 0.35; }
.tok.small { --ts: 28px; }
.tok.small .tok-n { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; line-height: 14px; right: -6px; bottom: -5px; }
button.tok { cursor: pointer; }
button.tok:hover { transform: translateY(-2px); }
button.tok:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tok.picked { box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(232, 194, 90, 0.55); }
.tok.marked { box-shadow: 0 0 0 3px var(--warn); }
.pick-n {
  position: absolute;
  top: -9px;
  left: -7px;
  font: 800 11px/1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  font-style: normal;
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #2b2100;
}
.tok.marked .pick-n { background: var(--warn); color: #3a0d06; }

/* ---------------------------------------------------------------- the cards
   as printed: a pale band across the top with the Prestige points and the
   bonus gem, the picture below in the card's colour, the cost circles down
   the left, the level's dots in the corner */

.card {
  --cw: 92px;
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.09);
  overflow: hidden;
  background: var(--art);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  color: #1d2328;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.card.b-diamond { --art: linear-gradient(160deg, #f2f6f9, #c3d0db 62%, #9fb0bf); }
.card.b-sapphire { --art: linear-gradient(160deg, #b5d1f6, #4f84d1 62%, #2a569c); }
.card.b-emerald { --art: linear-gradient(160deg, #b2e3c1, #3f9e62 62%, #216941); }
.card.b-ruby { --art: linear-gradient(160deg, #f6bdb3, #cf5a4c 62%, #9b3328); }
.card.b-onyx { --art: linear-gradient(160deg, #b1a69e, #5a4f4a 62%, #342d2a); }
/* a hint of each level's pictures: mines, caravans, city streets */
.card::before { content: ''; position: absolute; inset: 27% 0 0 0; pointer-events: none; }
.card.lv1::before { background: repeating-linear-gradient(140deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 10px); }
.card.lv2::before { background: repeating-radial-gradient(circle at 20% 120%, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 11px); }
.card.lv3::before { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 16px); }
.cd-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 27%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--cw) * 0.07);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.cd-pts {
  font: italic 700 calc(var(--cw) * 0.3) / 1 var(--serif);
  color: #fff;
  -webkit-text-stroke: 1.2px #3b3b3b;
  paint-order: stroke fill;
}
.cd-gem { font-size: calc(var(--cw) * 0.24); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.cd-cost {
  position: absolute;
  left: calc(var(--cw) * 0.06);
  bottom: calc(var(--cw) * 0.06);
  display: flex;
  flex-direction: column;
  gap: calc(var(--cw) * 0.025);
}
.cc {
  width: calc(var(--cw) * 0.21);
  height: calc(var(--cw) * 0.21);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: italic 800 calc(var(--cw) * 0.14) / 1 var(--serif);
  color: var(--chip-ink);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 55%), var(--chip);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.cd-lv {
  position: absolute;
  right: calc(var(--cw) * 0.07);
  bottom: calc(var(--cw) * 0.04);
  font-size: calc(var(--cw) * 0.09);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
button.card { cursor: pointer; padding: 0; font: inherit; }
button.card:hover { transform: translateY(-3px); }
button.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card.afford { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(232, 194, 90, 0.5); }
.card.selected { transform: translateY(-5px); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent), 0 10px 22px rgba(0, 0, 0, 0.5); }
.card.empty { background: transparent; border: 2px dashed rgba(255, 240, 210, 0.14); box-shadow: none; }
.card.empty::before { display: none; }
/* a card you reserved unseen: the others see only its back */
.card.blind { outline: 1.5px dashed rgba(255, 255, 255, 0.7); outline-offset: -4px; }

/* the backs: green, yellow and blue, one to three dots, as the decks print them */
.card.back { display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.35); }
.card.back::before { inset: 6%; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: calc(var(--cw) * 0.06); background: none; }
.card.back.lv1 { background: radial-gradient(circle at 50% 40%, #4fa463, #1f5e2f 75%); }
.card.back.lv2 { background: radial-gradient(circle at 50% 40%, #e2b64a, #8a6514 75%); }
.card.back.lv3 { background: radial-gradient(circle at 50% 40%, #5a8fdf, #1f417e 75%); }
.bk-lv { color: #fff; font-size: calc(var(--cw) * 0.17); letter-spacing: 0.12em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.bk-n { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font: 800 calc(var(--cw) * 0.13) / 1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; }
.card.back.gone { opacity: 0.25; }

.card.mini { --cw: 50px; }
.card.held { --cw: 80px; }
.card.inline { --cw: 34px; display: inline-block; vertical-align: middle; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.card.mini .cd-lv, .card.inline .cd-lv { display: none; }

/* ---------------------------------------------------------------- the Nobles */

.noble {
  --nw: 78px;
  position: relative;
  flex: none;
  width: var(--nw);
  height: var(--nw);
  border-radius: calc(var(--nw) * 0.1);
  background: radial-gradient(circle at 70% 35%, #8a3047, #3d1220 72%);
  border: 2px solid #d8b45a;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.45);
  color: #f6e2a8;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.nb-pts { position: absolute; left: 9%; top: 5%; font: italic 700 calc(var(--nw) * 0.3) / 1 var(--serif); }
.nb-req { position: absolute; left: 8%; bottom: 8%; display: flex; flex-direction: column; gap: calc(var(--nw) * 0.025); }
.nr {
  width: calc(var(--nw) * 0.2);
  height: calc(var(--nw) * 0.2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font: italic 800 calc(var(--nw) * 0.14) / 1 var(--serif);
  color: var(--chip-ink);
  background: var(--chip);
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.nb-crest { position: absolute; right: 9%; top: 50%; transform: translateY(-50%); font-size: calc(var(--nw) * 0.44); line-height: 1; color: #e8c25a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.noble.mini { --nw: 34px; border-width: 1.5px; }
.noble.mini .nb-req, .noble.mini .nb-crest { display: none; }
.noble.mini .nb-pts { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 17px; }
button.noble { cursor: pointer; padding: 0; font: inherit; }
button.noble:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.5); }
button.noble:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- the board */

.board { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 2px 0; }
.nobles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 40px; align-items: center; }
.nobles-gone { font-size: 13px; }
.mid { display: flex; gap: 18px; align-items: center; justify-content: center; }
.mrow { display: flex; gap: 9px; }
.mrow .deck { margin-right: 6px; }
.bank {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px 9px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.bank .tok { --ts: 46px; }

/* ---------------------------------------------------------------- the players */

.player {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.player.turn { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 194, 90, 0.3), var(--shadow); }
.player.won { background: linear-gradient(180deg, rgba(232, 194, 90, 0.14), var(--panel)); }
.player.gone { opacity: 0.6; }
.pl-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pl-head .av { width: 26px; height: 26px; font-size: 12.5px; }
.pl-name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.you-tag,
.first-tag,
.turn-tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}
.you-tag { color: var(--accent); }
.first-tag { color: var(--dim); border: 1px solid var(--line); cursor: help; }
.turn-tag { color: #2b2100; background: var(--accent); }
.pl-pts { margin-left: auto; font: italic 700 28px/1 var(--serif); color: var(--accent); cursor: help; font-variant-numeric: tabular-nums; }
.pl-gems { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; justify-items: center; }
.pg { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* bonuses as a little stack of cards of the colour, the count on top */
.pg-bonus {
  width: 30px;
  height: 38px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font: italic 800 16px/1 var(--serif);
  color: var(--chip-ink);
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.4), transparent 60%), var(--chip);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 2px 2px 0 -1px var(--chip-ring), 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: help;
}
.pg-bonus.none { opacity: 0.28; box-shadow: none; }
.pg-bonus.blank { visibility: hidden; }
.pl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.pl-held {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--dim);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.pl-held.full { color: var(--warn); border-color: rgba(255, 155, 138, 0.5); }
.pl-res { display: flex; gap: 6px; align-items: flex-end; }
.pl-none { font-size: 12px; }
.pl-nobles { display: flex; gap: 4px; margin-left: auto; }
.player.mine { padding: 10px 14px 12px; }
.player.mine .pl-gems .tok { --ts: 36px; }
.player.mine .pg-bonus { width: 36px; height: 46px; font-size: 19px; }
.player.mine .pl-name { font-size: 15px; }
.player.mine .pl-pts { font-size: 34px; }

/* ---------------------------------------------------------------- layout */

#screen-game .topbar #turn-chip,
#screen-game .topbar #last-chip {
  font-size: 12.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  white-space: nowrap;
}
#turn-chip.mine { color: #2b2100; background: var(--accent) !important; border-color: transparent !important; font-weight: 800; }
#last-chip { color: var(--warn); border-color: rgba(255, 155, 138, 0.5) !important; cursor: help; font-weight: 800; }

#table {
  width: min(1400px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-areas: 'stage opps' 'stage side';
  grid-template-rows: auto 1fr;
  gap: 12px 16px;
  padding: 6px 14px 16px;
  align-items: start;
}
#stage { grid-area: stage; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#opponents { grid-area: opps; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
#side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#mine { display: flex; justify-content: center; }
#mine .player { width: min(620px, 100%); }
.side-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 0; }
.dim { color: var(--dim); }
#feed { position: static; width: auto; max-height: 300px; z-index: auto; }

/* ---------------------------------------------------------------- the action panel */

#action {
  background: rgba(12, 43, 44, 0.86);
  border: 1px solid rgba(232, 194, 90, 0.28);
  border-radius: 14px;
  padding: 11px 14px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  min-height: 84px;
}
#action.mine { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 194, 90, 0.16); }
#action p { margin: 0; max-width: 64ch; }
.act-head { font-family: var(--serif); font-size: 17.5px; line-height: 1.35; text-wrap: balance; }
.act-head .card.inline { margin-right: 6px; }
.act-sub { color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.act-note { color: var(--warn); font-size: 12.5px; }
.act-warn { color: var(--warn); font-size: 13.5px; line-height: 1.45; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 2px; }
#action .btn { padding: 10px 16px; font-size: 15px; }
#action .btn.primary { width: auto; min-width: 150px; }
#action .btn.ghost { padding: 9px 14px; font-size: 14px; }
.pick-row { display: flex; gap: 10px; justify-content: center; }
.pick-row .tok { --ts: 34px; }
.card-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------------- what just happened */

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 24; overflow: hidden; }
.stamp {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 12px;
  background: rgba(6, 26, 27, 0.94);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font: 800 14px/1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  white-space: nowrap;
  animation: stamp 1.6s ease forwards;
}
.stamp .tok { --ts: 26px; }
.stamp .card.inline { --cw: 36px; }
.stamp.buy { border-color: var(--win); }
.stamp.buy b { color: var(--win); font: italic 800 20px/1 var(--serif); }
.stamp.return { border-color: var(--warn); }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  22% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -85%); }
}
.flash.noble { background: linear-gradient(180deg, #8a3047, #3d1220); color: #f6e2a8; border-color: #d8b45a; }

/* ---------------------------------------------------------------- lobby */

#cast-summary { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cast-head { color: var(--dim); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.cast-tokens { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 2px 6px 6px; }
.cast-note { color: var(--dim); font-size: 12.5px; max-width: 36ch; line-height: 1.5; }

/* ---------------------------------------------------------------- the expansions */

.top-row { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; align-items: center; }

/* the market: the base cards, then the Orient beside them (below, narrow) */
.market { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
.market .card { --cw: var(--mcw, 92px); }
/* the supply below the cards, when beside them would leave the cards too small */
.mid.below { flex-direction: column; gap: 12px; }
.mid.below .bank { flex-direction: row; gap: 10px; padding: 8px 12px; }
.mblock { display: flex; flex-direction: column; gap: 9px; }
.mblock-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #cdb4f2; text-align: center; }

/* Orient cards: a violet frame, and their powers in violet — the colour the
   rulebook gives the icons of an effect that acts once, when bought */
.card.orient::after { content: ''; position: absolute; inset: 0; border: 2px solid #9d74e6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.card.b-gold { --art: linear-gradient(160deg, #fff1c2, #e3b23c 62%, #a87818); }
.card.b-copy,
.card.b-copytake { --art: linear-gradient(160deg, #f1f1f4, #b8b3c9 40%, #8f86ab 70%, #6c6290); }
.cd-gems { display: flex; align-items: center; gap: calc(var(--cw) * 0.02); }
.cd-x2,
.cd-copy {
  font: 800 calc(var(--cw) * 0.15) / 1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #5b2ca8;
}
.cd-copy { font-size: calc(var(--cw) * 0.22); }
.cd-copy.small { font-size: calc(var(--cw) * 0.15); }
.cd-power {
  position: absolute;
  right: calc(var(--cw) * 0.06);
  top: 33%;
  padding: calc(var(--cw) * 0.02) calc(var(--cw) * 0.05);
  border-radius: 999px;
  background: #6b3fc0;
  color: #fff;
  font: 800 calc(var(--cw) * 0.12) / 1.1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* a sacrifice card's price: two cards of a colour, crossed out */
.cs {
  width: calc(var(--cw) * 0.21);
  height: calc(var(--cw) * 0.27);
  border-radius: calc(var(--cw) * 0.03);
  display: grid;
  place-items: center;
  font: 800 calc(var(--cw) * 0.14) / 1 'Avenir Next', Avenir, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--chip-ink);
  background: var(--chip);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.card.back.orient.lv1 { background: radial-gradient(circle at 50% 40%, #6fb27f, #4d2a7e 80%); }
.card.back.orient.lv2 { background: radial-gradient(circle at 50% 40%, #d9b04f, #4d2a7e 80%); }
.card.back.orient.lv3 { background: radial-gradient(circle at 50% 40%, #6b95dc, #4d2a7e 80%); }
.bk-mark { position: absolute; top: 9%; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: calc(var(--cw) * 0.16); line-height: 1; }

/* the Strongholds on a card, in their owners' colours */
.holds {
  position: absolute;
  left: 30%;
  right: 4%;
  top: 44%;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  cursor: help;
}
.hold {
  font-style: normal;
  font-size: calc(var(--cw) * 0.2);
  line-height: 1;
  padding: calc(var(--cw) * 0.03);
  border-radius: 50%;
  background: rgba(8, 20, 21, 0.78);
  box-shadow: 0 0 0 1.5px currentColor, 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hold.s0, .pl-holds.s0 { color: #8fd6a8; }
.hold.s1, .pl-holds.s1 { color: #58b7ff; }
.hold.s2, .pl-holds.s2 { color: #ffd166; }
.hold.s3, .pl-holds.s3 { color: #ff5d8f; }
.hold.s4, .pl-holds.s4 { color: #b98aff; }
.hold.s5, .pl-holds.s5 { color: #63e0dc; }
.hold.s6, .pl-holds.s6 { color: #ff9c5e; }
.hold.s7, .pl-holds.s7 { color: #d3e15c; }
.card.held-by-rival { filter: saturate(0.55) brightness(0.85); }
/* what a tap on the table does now: place a Stronghold, knock one off,
   move one from here, take a card for free */
.card.do-place { box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(232, 194, 90, 0.45); }
.card.do-knock { box-shadow: 0 0 0 3px var(--warn), 0 0 12px rgba(255, 155, 138, 0.5); }
.card.do-from { transform: translateY(-5px); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent); }
.card.do-pickfrom { box-shadow: 0 0 0 3px #fff, 0 0 12px rgba(255, 255, 255, 0.45); }
.card.do-take { box-shadow: 0 0 0 3px #b48cff, 0 0 14px rgba(180, 140, 255, 0.55); }
.card.picked { box-shadow: 0 0 0 3px var(--warn); transform: translateY(-3px); }
.pl-holds {
  display: inline-flex;
  gap: 1px;
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: help;
  text-shadow: 0 0 2px #000;
}
.pl-holds i { font-style: normal; }
.pl-holds i.out { opacity: 0.25; }

/* a City tile: its Prestige points and name, the cards it asks for, and who
   meets it now */
.city {
  --ct: 158px;
  position: relative;
  flex: none;
  width: var(--ct);
  min-height: calc(var(--ct) * 0.56);
  padding: 7px 9px 8px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(160deg, #d9c49a, #a88a55 60%, #7a6136);
  border: 2px solid #f0dca6;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.45);
  color: #2b2010;
  cursor: help;
}
.city.met { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 194, 90, 0.5), 0 3px 8px rgba(0, 0, 0, 0.45); }
.ct-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ct-pts { font: italic 700 26px/1 var(--serif); color: #fff; -webkit-text-stroke: 1.2px #3b2a12; paint-order: stroke fill; }
.ct-name { font: 700 13px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.req-row { display: flex; flex-wrap: wrap; gap: 3px; }
.cr,
.pr {
  min-width: 19px;
  height: 22px;
  padding: 0 3px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font: italic 800 13.5px/1 var(--serif);
  color: var(--chip-ink);
  background: var(--chip);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* that many cards of one colour, whichever: grey, with =, as printed */
.cr.any { color: #fff; background: #9ea3aa; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
.ct-none { font-size: 12px; font-style: italic; }
.ct-met { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; }
.ct-met .av,
.po-owners .av { width: 18px; height: 18px; font-size: 9.5px; border-width: 1px; }

/* a Trading Post: the cards it asks for, its power, and who has opened it */
.post {
  position: relative;
  flex: none;
  width: 92px;
  min-height: 62px;
  padding: 5px 6px 6px;
  border-radius: 9px;
  display: flex;
  gap: 6px;
  align-items: center;
  background: linear-gradient(160deg, #3d5e7a, #1d3550);
  border: 1.5px solid #a9c4dc;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  color: #eef4fa;
  text-align: left;
  cursor: help;
}
.post .req-row { flex-direction: column; flex-wrap: nowrap; }
.post .pr { min-width: 16px; height: 16px; font-size: 11px; }
.po-power { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-power b { font-size: 12.5px; line-height: 1.1; }
.po-power small { font-size: 10px; line-height: 1.15; color: #bcd0e2; }
.po-owners { position: absolute; right: -6px; top: -8px; display: flex; gap: 1px; }
.post.mini { width: auto; min-height: 0; padding: 3px 7px; border-radius: 6px; }
.po-mini { font-size: 11px; font-weight: 800; white-space: nowrap; }
button.post { cursor: pointer; font: inherit; }
button.post:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.5); }
button.post:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.posts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.pl-posts { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-bonus.goldcards { --chip: #e7b22c; --chip-ink: #3a2a00; --chip-ring: #946d10; }
.gem-choice { display: inline-flex; align-items: center; gap: 6px; }
.gem-choice svg.gem { font-size: 20px; }

/* the modules, in the lobby and the top bar */
#module-picker { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.mod-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.mod-box { width: 100%; text-align: center; font: italic 600 13px/1.2 var(--serif); color: var(--dim); }
.mod-pick {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.mod-pick.on { background: var(--accent-dim); border-color: rgba(232, 194, 90, 0.6); color: var(--accent); }
.mod-pick.on::before { content: '✓ '; }
.mod-pick:disabled { cursor: default; }
.mod-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#screen-game .topbar #mods-chip {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(180, 140, 255, 0.45);
  color: #cdb4f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 44ch;
  cursor: help;
}
.rules-h { margin: 8px 0 0; font: 700 18px/1.2 var(--serif); color: var(--accent); }
.rules-intro { margin: 0; color: var(--dim); font-size: 14px; }

/* ---------------------------------------------------------------- game over */

#go-title { color: var(--accent); }
#go-rank { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 5px; }
#go-rank .rank-row { border-left: 3px solid var(--line); }
#go-rank .rank-row.won { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(232, 194, 90, 0.14), var(--panel)); }
#go-rank .rank-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#go-rank .rank-name small { color: var(--dim); font-size: 12px; font-weight: 600; }
#go-rank .rank-score { font: italic 700 24px/1 var(--serif); }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 999px) {
  #table { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'opps' 'stage' 'side'; padding: 4px 10px 16px; }
  #opponents { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  #feed { max-height: 220px; }
}

@media (max-width: 640px) {
  .card { --cw: min(76px, calc((100vw - 64px) / 5)); }
  .mrow { gap: 6px; }
  .mblock { gap: 7px; }
  .market { flex-direction: column; align-items: center; gap: 12px; }
  .city { --ct: min(150px, calc((100vw - 44px) / 3)); padding: 6px 7px 7px; }
  .ct-pts { font-size: 22px; }
  .ct-name { font-size: 11.5px; }
  .cr { min-width: 16px; height: 19px; font-size: 12px; }
  .post { width: calc((100vw - 52px) / 5); min-width: 62px; padding: 4px; gap: 4px; flex-direction: column; align-items: flex-start; }
  .post .req-row { flex-direction: row; }
  .posts { gap: 6px; }
  #screen-game .topbar #mods-chip { display: none; }
  .mrow .deck { margin-right: 0; }
  .mid { flex-direction: column; gap: 12px; }
  .bank { flex-direction: row; gap: 10px; padding: 8px 12px; }
  .bank .tok { --ts: 40px; }
  .noble { --nw: 60px; }
  .nobles { gap: 7px; }
  .card.held { --cw: 70px; }
  .act-row .btn { flex: 1 1 40%; min-width: 0; }
  #action .btn.primary { min-width: 0; }
  #screen-game .topbar .btn.ghost { padding: 6px 12px; font-size: 13.5px; }
  .player.mine .pl-gems .tok { --ts: 30px; }
  .player.mine .pg-bonus { width: 30px; height: 40px; font-size: 16px; }
  /* the others, compact and two to a row, so the cards are not pushed off the screen */
  #opponents { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; }
  #opponents .player { padding: 6px 7px 7px; gap: 5px; }
  #opponents .pl-gems { gap: 2px; }
  #opponents .pl-gems .tok { --ts: 21px; }
  #opponents .pl-gems .tok .tok-n { min-width: 14px; height: 14px; font-size: 9.5px; line-height: 12px; right: -5px; bottom: -4px; padding: 0 3px; }
  #opponents .pg { gap: 3px; }
  #opponents .pg-bonus { width: 22px; height: 28px; font-size: 13px; }
  #opponents .pl-pts { font-size: 22px; }
  #opponents .pl-name { font-size: 13px; }
  #opponents .card.mini { --cw: 32px; }
  #opponents .noble.mini { --nw: 26px; }
  #opponents .noble.mini .nb-pts { font-size: 13px; }
  #opponents .pl-held { font-size: 10.5px; padding: 1px 5px; }
}

@media (min-width: 1000px) {
  #screen-game { padding-right: 0; }
  /* keep clear of the fixed ⚙ and log toggle in the corner */
  #screen-game .topbar { padding-right: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .tok,
  .noble { transition: none; }
  .stamp { animation-name: stamp-still; }
  @keyframes stamp-still {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
  }
}