:root {
  --bg: #14161c;
  --bg2: #1c1f27;
  --panel: #232733;
  --panel2: #2b303d;
  --line: #363c4b;
  --text: #e7e9ee;
  --dim: #949aab;
  --accent: #c9a227;
  --accent2: #e0b53a;
  --ok: #4ea86a;
  --bad: #d05555;

  --gem-white: #efeadb;
  --gem-blue: #3d7fd6;
  --gem-green: #46a35b;
  --gem-red: #d24a4a;
  --gem-black: #3a3f4b;
  --gem-gold: #e0b53a;

  --radius: 10px;
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;

  /* Per-gem chip / pip colours: light, mid, dark. */
  --white-1: #ffffff; --white-2: #e6e1d3; --white-3: #a9a293;
  --blue-1:  #8cc0ff; --blue-2:  #3f7fd6; --blue-3:  #1d4688;
  --green-1: #8fdca2; --green-2: #3d9e57; --green-3: #1d5c30;
  --red-1:   #ff9a97; --red-2:   #d8413f; --red-3:   #87202a;
  --black-1: #7d838f; --black-2: #3d424d; --black-3: #17191e;
  --gold-1:  #fff0a8; --gold-2:  #e9bb3a; --gold-3:  #94680f;

  /* Card artwork silhouettes: countryside, towns, palaces (one per level). */
  --art-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 40V27Q10 21 20 25T42 22Q50 20 58 24T80 23Q92 19 104 24T120 26V40ZM14 26l4-11 4 11zM19 25l3-8 3 8zM70 24l4-12 4 12zM96 23l3-9 3 9zM101 24l2.5-7 2.5 7z%22/%3E%3C/svg%3E");
  --art-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 40V30h7v-6l5-5 5 5v6h5V20l3-7 3 7v10h7v-8h9v8h6v-5l5-5 5 5v5h9V19h2v-4h5v4h2v11h9v-6l5-4 5 4v6h6V22l4-6 4 6v8h4V40Z%22/%3E%3C/svg%3E");
  --art-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 40V29h8V19h1.5v-3h3v3H14v10h7v-5a9 9 0 0 1 18 0v5h5V13l3-6 3 6v16h7v-7a7 7 0 0 1 14 0v7h8V20h2v-4h4v4h2v9h7v-4a5 5 0 0 1 10 0v4h11V40Z%22/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* The inline sprite has to stay renderable (not display:none) for gradients to resolve. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gi { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; vertical-align: middle;
      filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: radial-gradient(1200px 700px at 50% -10%, #232838 0%, var(--bg) 60%);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit; color: inherit; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px;
  transition: background .12s, border-color .12s, transform .08s;
}
button:hover:not(:disabled) { background: #343a49; border-color: #4a5164; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent2); color: #1a1608; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent2); }
button.ghost { background: transparent; }
button#soundToggle { display: inline-flex; align-items: center; gap: 6px; }
button#soundToggle.off { color: var(--dim); }

/* Bell glyph, drawn in CSS so there's no icon font or image to load. */
.bell {
  width: 12px; height: 12px; position: relative; display: inline-block;
  border: 2px solid currentColor; border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.bell::before {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px;
  height: 2px; background: currentColor; border-radius: 1px;
}
.bell::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 4px; height: 3px; margin-left: -2px;
  background: currentColor; border-radius: 0 0 2px 2px;
}
button#soundToggle.off .bell::before { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
button.small { padding: 5px 10px; font-size: 13px; }
button.link { background: none; border: none; color: var(--dim); text-decoration: underline; padding: 4px; }
button.link:hover { color: var(--text); background: none; }

input {
  font: inherit; width: 100%; margin-top: 5px;
  background: #171a21; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
input:focus { outline: none; border-color: var(--accent); }

.hidden { display: none !important; }
.screen { min-height: 100%; }

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

#home, #lobby { display: flex; align-items: center; justify-content: center; padding: 24px; }

.home-card {
  width: 100%; max-width: 340px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  background-image: linear-gradient(180deg, rgba(201,162,39,.07), transparent 120px);
  border-top-color: rgba(201,162,39,.35);
}
.home-card h1 {
  margin: 0; font: 700 36px/1.1 var(--serif); letter-spacing: 1px; text-align: center;
  background: linear-gradient(180deg, #fff1b0 0%, #e9bb3a 55%, #b0821a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.home-card h1 + .sub { text-align: center; }
.hero-gems { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: -4px 0 10px; font-size: 30px; }
.hero-gems .gi.big { font-size: 46px; }
.hero-gems .gi:nth-child(1), .hero-gems .gi:nth-child(5) { transform: translateY(-4px) rotate(-8deg); }
.hero-gems .gi:nth-child(5) { transform: translateY(-4px) rotate(8deg); }
.home-card h2 { margin: 0 0 4px; font-size: 21px; }
.home-card .sub { color: var(--dim); margin: 4px 0 18px; font-size: 13px; }
.home-card label { display: block; margin-bottom: 12px; color: var(--dim); font-size: 12.5px; }
.home-card button { width: 100%; margin-bottom: 8px; }
.home-card button.link { width: auto; }

.or { display: flex; align-items: center; gap: 10px; color: var(--dim); margin: 14px 0; font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 3px; color: var(--accent2); font-weight: 700;
}
#codeInput { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-size: 20px; }

.error { color: var(--bad); font-size: 13px; min-height: 18px; margin: 6px 0 0; }
.resume { text-align: center; margin-top: 10px; }

.lobby-players { list-style: none; padding: 0; margin: 0 0 18px; }
.lobby-players li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--panel2);
  border: 1px solid var(--line); border-left: 4px solid var(--pc);
  border-radius: 8px; margin-bottom: 6px;
}
.lobby-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lobby-players .tag { font-size: 11px; color: var(--accent2); text-transform: uppercase; letter-spacing: 1px; }

/* ------------------------------------------------------------ connection */

.conn {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--dim);
  background: rgba(20,22,28,.85); padding: 4px 9px; border-radius: 20px;
  border: 1px solid var(--line); white-space: nowrap;
}
/* Only the home and lobby screens need the floating copy; in game it lives in the bar. */
.conn-float { position: fixed; top: 8px; right: 10px; z-index: 60; }
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.conn.live .dot { background: var(--ok); }
.conn.lost .dot { background: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ------------------------------------------------------------ game shell */

#game { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--bg2); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  /* Above the side panels, so its buttons stay clickable while one is open. */
  position: relative; z-index: 56;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand { color: var(--accent2); font: 700 17px var(--serif); letter-spacing: .8px; display: inline-flex; align-items: center; gap: 6px; }
.brand .gi { font-size: 18px; }
.turn-banner {
  font-size: 14px; color: var(--text); flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.turn-banner b { color: var(--text); }
.turn-banner.you { color: var(--pc, var(--accent2)); font-weight: 700; }
.turn-banner .final { color: var(--bad); font-weight: 600; margin-left: 4px; }

/* ------------------------------------------------------------ identity */

.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pc); color: #16180f;
  font-weight: 800; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.avatar.lg { width: 34px; height: 34px; font-size: 17px; }

.badge-you {
  background: var(--pc, var(--accent2)); color: #16180f;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  padding: 1px 5px; border-radius: 4px; vertical-align: middle;
}
.pill-turn {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  padding: 1px 6px; border-radius: 10px;
  border: 1px solid var(--pc); color: var(--pc);
  animation: turnpulse 1.6s ease-in-out infinite;
}
@keyframes turnpulse { 50% { opacity: .45; } }

/* ------------------------------------------------------------ the table
   Players sit around a central felt: you are always at the bottom, and the
   others are placed clockwise from you — left, top, then right. */

.layout {
  flex: 1 1 auto; min-height: 0; padding: 10px 14px;
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 210px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    ".    top     ."
    "left felt right";
}
.seat-top   { grid-area: top; justify-self: center; max-width: 640px; }
.seat-left  { grid-area: left; align-self: center; }
.seat-right { grid-area: right; align-self: center; }
.felt       { grid-area: felt; min-width: 0; min-height: 0; overflow: auto; }

/* Collapse whichever side columns nobody is sitting in. */
.layout { grid-template-columns: 0 minmax(0, 1fr) 0; }
.layout.has-left  { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 0; }
.layout.has-right { grid-template-columns: 0 minmax(0, 1fr) minmax(0, 210px); }
.layout.has-left.has-right { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 210px); }

.felt {
  border-radius: 22px; padding: 14px;
  background:
    var(--noise) 0 0 / 160px 160px,
    radial-gradient(ellipse at 50% 40%, #21403a 0%, #172c24 55%, #0f1c17 100%);
  background-blend-mode: soft-light, normal;
  border: 2px solid #4a4130;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.6),
    inset 0 0 0 5px #15241d,
    inset 0 0 0 6px rgba(224,181,58,.35),
    0 14px 50px rgba(0,0,0,.5);
}
.felt-inner {
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; min-width: max-content; margin: 0 auto;
}

/* ------------------------------------------------------------ nobles
   A parchment tile: points top-left, a portrait, and the cards it wants
   down the left edge — the same layout as the physical tiles. */

.nobles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.noble {
  --tint: #e8dcc0; --ns: 80px;
  width: 80px; height: 80px; border-radius: 7px; padding: 5px;
  position: relative; overflow: hidden; flex: 0 0 auto;
  background:
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--tint) 60%, #6b5530));
  border: 1px solid #3b2f17;
  box-shadow: inset 0 0 0 2px rgba(255,236,180,.55), inset 0 0 0 3px #8a6d2f, 0 4px 10px rgba(0,0,0,.45);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.noble[style*="--nv:1"] { --tint: #d9c3c0; }
.noble[style*="--nv:2"] { --tint: #c9d3c0; }
.noble[style*="--nv:3"] { --tint: #c4cbd8; }
.noble[style*="--nv:4"] { --tint: #dccfa8; }
.noble .bust {
  position: absolute; right: -3px; bottom: -2px; width: 54px; height: 64px;
  color: #4a3a22; opacity: .62; filter: none;
}
.noble .np {
  position: absolute; top: 4px; right: 7px; z-index: 1;
  font: 700 21px/1 var(--serif); color: #fff;
  -webkit-text-stroke: 3px #3b2a10; paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.noble .nreq { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; position: relative; }
.nchip {
  width: 15px; height: 19px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font: 700 11.5px/1 var(--serif); color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2) 55%, var(--c3));
  border: 1px solid rgba(0,0,0,.55); box-shadow: 0 1px 2px rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.nchip.white { color: #2a2620; text-shadow: none; }
.noble.eligible { box-shadow: inset 0 0 0 2px rgba(255,236,180,.55), inset 0 0 0 3px #8a6d2f, 0 0 0 2px var(--ok), 0 0 16px rgba(78,168,106,.55); }

/* ------------------------------------------------------------ gem colour sets */

.white, .g-white { --c1: var(--white-1); --c2: var(--white-2); --c3: var(--white-3); }
.blue,  .g-blue  { --c1: var(--blue-1);  --c2: var(--blue-2);  --c3: var(--blue-3); }
.green, .g-green { --c1: var(--green-1); --c2: var(--green-2); --c3: var(--green-3); }
.red,   .g-red   { --c1: var(--red-1);   --c2: var(--red-2);   --c3: var(--red-3); }
.black, .g-black { --c1: var(--black-1); --c2: var(--black-2); --c3: var(--black-3); }
.gold,  .g-gold  { --c1: var(--gold-1);  --c2: var(--gold-2);  --c3: var(--gold-3); }

/* ------------------------------------------------------------ card rows */

.rows { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; }

.card {
  width: 84px; height: 118px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.6); background: var(--panel);
  position: relative; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.55); }
.card.slot-empty {
  background: rgba(0,0,0,.12); border: 1px dashed rgba(224,181,58,.25);
  box-shadow: none; cursor: default;
}
.card.slot-empty:hover { transform: none; box-shadow: none; }
.card.selected { box-shadow: 0 0 0 2px var(--accent2); }

/* ---- face-up development cards ---- */

.card.face {
  --sky1: var(--c1); --sky2: var(--c2); --land: var(--c3);
  background:
    radial-gradient(circle at var(--sun) 46%, rgba(255,255,255,.38) 0, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--sky1) 70%, #fff) 0%, var(--sky2) 62%, var(--land) 100%);
}
.card.face.g-white { --sky1: #fffaf0; --sky2: #ddd5c2; --land: #8f8673; }
.card.face.g-black { --sky1: #9aa1ad; --sky2: #4a505c; --land: #121418; }
/* Inner frame, like the white border printed on the real cards. */
.card.face::before {
  content: ""; position: absolute; inset: 0; border-radius: 7px; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), inset 0 0 14px rgba(0,0,0,.25);
}
/* Two layers of landscape silhouette — far and near — for a little depth. */
.card.face::after, .card.face .cbody::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.card.face::after {
  height: 52%; z-index: 0;
  background: color-mix(in srgb, var(--land) 75%, #000);
  opacity: .5;
  -webkit-mask-image: var(--art-1); mask-image: var(--art-1);
  -webkit-mask-size: 150px 100%; mask-size: 150px 100%;
  -webkit-mask-position: calc(var(--v) * 1.7) 0; mask-position: calc(var(--v) * 1.7) 0;
}
.card.face .cbody::before {
  height: 34%; z-index: 0;
  background: color-mix(in srgb, var(--land) 55%, #000);
  opacity: .8;
  -webkit-mask-image: var(--art-1); mask-image: var(--art-1);
  -webkit-mask-size: 110px 100%; mask-size: 110px 100%;
  -webkit-mask-position: var(--v) 0; mask-position: var(--v) 0;
}
.card.face.lvl-2::after, .card.face.lvl-2 .cbody::before { -webkit-mask-image: var(--art-2); mask-image: var(--art-2); }
.card.face.lvl-3::after, .card.face.lvl-3 .cbody::before { -webkit-mask-image: var(--art-3); mask-image: var(--art-3); }

.card .chead {
  position: relative; z-index: 1;
  height: 31px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 5px 0 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.card .pts {
  font: 700 23px/1 var(--serif); color: #fff;
  -webkit-text-stroke: 2.4px #1b1f2a; paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.card .gi.bonus { font-size: 23px; }
.card .cbody {
  flex: 1; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 5px; min-height: 0; position: relative;
}
.card .costs { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.card .costs.dense { gap: 2px; }
.card .costs.dense .pip { width: 17px; height: 17px; font-size: 10.5px; }
.card .lvl-dots {
  position: relative; z-index: 1; color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: 1px;
  line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.card.affordable { box-shadow: 0 0 0 2px var(--ok), 0 0 14px rgba(78,168,106,.5), 0 3px 8px rgba(0,0,0,.45); }
.card.affordable:hover { box-shadow: 0 0 0 2px var(--ok), 0 0 18px rgba(78,168,106,.6), 0 10px 22px rgba(0,0,0,.55); }

/* ---- card backs: decks and blind reserves (green, gold, blue like the real game) ---- */

.card.back {
  --b1: #3d8a59; --b2: #1c4a2e;
  align-items: center; justify-content: center; gap: 4px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.16) 0 19px, transparent 20px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 9px),
    radial-gradient(ellipse at 50% 30%, var(--b1), var(--b2));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,226,150,.45), 0 3px 8px rgba(0,0,0,.45);
}
.card.back.lvl-2 { --b1: #c39a35; --b2: #6a4a10; }
.card.back.lvl-3 { --b1: #3f6fc0; --b2: #172f63; }
.card.back .back-mark {
  font: 700 26px/1 var(--serif); color: #fff3cf;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 12px rgba(255,220,140,.45);
  letter-spacing: 1px;
}
.card.back .cnt {
  font-size: 10.5px; color: rgba(255,248,225,.9); background: rgba(0,0,0,.35);
  padding: 1px 7px; border-radius: 9px; white-space: nowrap;
}
.deck:hover { box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 4px var(--accent2), 0 10px 22px rgba(0,0,0,.55); }
.deck.empty { opacity: .25; cursor: default; filter: grayscale(.6); }
.deck.empty:hover { transform: none; }
.card.face-down { cursor: default; }
.card.face-down:hover { transform: none; }
.card.face-down .back-mark { font-size: 20px; }

/* ---- cost pips ---- */

.pip {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--serif); color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2) 55%, var(--c3));
  border: 1px solid rgba(0,0,0,.6); box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.18);
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 1px rgba(0,0,0,.8);
}
.pip.sm { width: 15px; height: 15px; font-size: 10px; }
.pip.white { color: #24211b; text-shadow: 0 0 2px rgba(255,255,255,.8); }
.pip.gold { color: #2a2205; text-shadow: none; }
/* Cost markings: struck through means you can pay it, a red ring means you can't. */
.pip.paid { opacity: .35; text-decoration: line-through; }
.pip.covered { opacity: .7; text-decoration: line-through; }
.pip.short { box-shadow: 0 0 0 2px var(--bad), 0 1px 2px rgba(0,0,0,.4); }

/* ------------------------------------------------------------ bank */

.bank-wrap {
  background: linear-gradient(180deg, rgba(35,39,51,.92), rgba(28,31,40,.92));
  border: 1px solid rgba(224,181,58,.22); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.bank-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--dim); margin-bottom: 8px; }
.bank { display: flex; gap: 12px; flex-wrap: wrap; padding: 2px 2px 8px; }

.token {
  --s: 52px;
  width: var(--s); height: var(--s); border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative; user-select: none; cursor: pointer;
  font-size: calc(var(--s) * .44);
  background: radial-gradient(circle at 38% 30%, var(--c1), var(--c2) 52%, var(--c3) 100%);
  border: 1px solid rgba(0,0,0,.55);
  box-shadow:
    inset 0 0 0 calc(var(--s) * .14) rgba(0,0,0,.06),
    inset 0 -3px 6px rgba(0,0,0,.35),
    0 3px 0 color-mix(in srgb, var(--c3) 70%, #000),
    0 5px 10px rgba(0,0,0,.45);
  transition: transform .1s;
}
/* Poker-chip edge inlays. */
.token::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgba(255,255,255,.8) 0 14deg, transparent 14deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 69%, #000 70%);
          mask: radial-gradient(circle, transparent 0 69%, #000 70%);
}
/* Inner ring around the gem. */
.token::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.45);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), rgba(0,0,0,.12));
}
.token.white::before { background: repeating-conic-gradient(from 8deg, rgba(60,50,30,.35) 0 14deg, transparent 14deg 45deg); }
.token.white::after { border-color: rgba(60,50,30,.3); }
.token .gi { position: relative; z-index: 1; }
.token .cnt {
  position: absolute; z-index: 2; bottom: -7px; left: 50%; transform: translateX(-50%);
  min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: #11141a; border: 1px solid #4a5164; color: var(--text);
  font: 700 12px/1.25 "Segoe UI", system-ui, sans-serif; text-align: center;
}
.token:hover:not(.dead) { transform: translateY(-3px); }
.token.dead { cursor: default; }
/* Bank chips you can't take right now sit back a little; your own chips never dim. */
.bank .token.dead:not(.gold) { filter: saturate(.75) brightness(.88); }
.token.gone { opacity: .28; }

.token .badge {
  position: absolute; z-index: 3; top: -5px; right: -6px;
  background: var(--accent2); color: #201a04;
  border-radius: 10px; font-size: 11px; padding: 0 5px; font-weight: 800;
  border: 1px solid #7d6417; box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

.selection {
  margin-top: 10px; display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px;
}
#selectionText { flex: 1; color: var(--dim); }

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

/* ------------------------------------------------------------ seats */

.seat { min-width: 0; }
.seat .pcard { height: 100%; }
.seat-top .pcard { display: flex; flex-direction: column; }
.seat-top .seat-body { flex-direction: row; align-items: flex-start; gap: 16px; }

.seat-body { display: flex; flex-direction: column; gap: 8px; }
.seat-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* A player's purchased cards, stacked by colour the way they'd sit on a table. */
.gemchips { display: flex; gap: 5px; flex-wrap: wrap; }
.gemchip {
  position: relative; width: 31px; height: 44px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4px 0 2px; font-size: 16px;
  background: linear-gradient(170deg, var(--c1) -20%, var(--c2) 45%, var(--c3));
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.4);
}
.gemchip .chip-n {
  font: 700 15px/1 var(--serif); color: #fff;
  -webkit-text-stroke: 2.5px rgba(0,0,0,.75); paint-order: stroke fill;
}
/* Fake the depth of several cards stacked on top of each other. */
.gemchip.many { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 2px -2px 0 -1px color-mix(in srgb, var(--c2) 70%, #000), 4px -4px 0 -2px color-mix(in srgb, var(--c2) 45%, #000), 0 2px 4px rgba(0,0,0,.4); }
.gemchip .chip-pts {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent2); color: #201a04;
  font: 800 10px/1.3 system-ui, sans-serif; border-radius: 9px;
  padding: 0 4px; border: 1px solid #7d6417;
}
.gemchip.zero { opacity: .14; box-shadow: none; filter: grayscale(.4); }

.seat-tokens { display: flex; gap: 4px; flex-wrap: wrap; }
.seat-nobles { display: flex; gap: 4px; flex-wrap: wrap; }
.seat-nobles .noble { --ns: 44px; width: 44px; height: 44px; padding: 3px; }
.seat-nobles .noble .np { font-size: 15px; top: 2px; left: 4px; right: auto; }
.seat-nobles .noble .nreq { display: none; }
.seat-nobles .noble .bust { width: 32px; height: 38px; }

.pcard {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--pc);
  border-radius: var(--radius); padding: 9px 11px;
  transition: box-shadow .15s, background .15s;
}
.pcard.active {
  background: var(--panel2);
  background: color-mix(in srgb, var(--pc) 9%, var(--panel));
  box-shadow: 0 0 0 2px var(--pc), 0 6px 20px rgba(0,0,0,.35);
}
.pcard.self { background: color-mix(in srgb, var(--pc) 5%, var(--panel)); }
.pcard.self.active { background: color-mix(in srgb, var(--pc) 13%, var(--panel)); }
.phead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pname { font-weight: 700; font-size: 13.5px; }
.ppts { color: var(--accent2); font-weight: 800; font-size: 17px; margin-left: auto; }
.prow { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; align-items: center; }
.plabel { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; width: 100%; }

.stack {
  display: flex; align-items: center; gap: 4px; font-size: 15px;
  background: #1a1d25; border-radius: 6px; padding: 2px 5px; border: 1px solid var(--line);
}
.stack .n { font-size: 11.5px; color: var(--dim); }
.stack .n b { color: var(--text); }

/* ------------------------------------------------------------ you bar */

.you-bar {
  flex: 0 0 auto; background: var(--bg2); border-top: 2px solid var(--line);
  padding: 10px 16px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  box-shadow: 0 -8px 30px rgba(0,0,0,.4);
}
.you-group { display: flex; flex-direction: column; gap: 5px; }
.you-bar .you-group > .gemchips,
.you-bar .you-group > .you-tokens,
.you-bar .you-group > .reserved-cards { align-items: center; }

.you-id {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px; border-radius: 10px;
  background: var(--panel);
  background: color-mix(in srgb, var(--pc) 12%, var(--panel));
  border: 1px solid var(--pc);
}
.you-id-text { display: flex; flex-direction: column; line-height: 1.25; }
.you-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.you-status { font-size: 11.5px; color: var(--dim); }
.you-status.now { color: var(--pc); font-weight: 700; }
.you-id.active { box-shadow: 0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 35%, transparent); }
.you-score { font-size: 20px; font-weight: 800; color: var(--accent2); margin-left: 4px; }
.you-score small { font-size: 10px; color: var(--dim); font-weight: 600; margin-left: 2px; }

.plabel.warn { color: var(--accent2); }

/* ------------------------------------------------------------ alert bar */

.alert-bar {
  flex: 0 0 auto; text-align: center; padding: 13px 16px;
  font-size: 14.5px; font-weight: 600; color: #221a04;
  background: linear-gradient(180deg, #f5cd57, #e0b53a);
  border-top: 2px solid #fbe08b;
  box-shadow: 0 -6px 26px rgba(224,181,58,.35);
  animation: alertglow 1.5s ease-in-out infinite;
}
.alert-bar b { font-weight: 800; }
.alert-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #221a04; color: #f5cd57; font-weight: 800; font-size: 13px;
  margin-right: 6px; vertical-align: -4px;
}
@keyframes alertglow { 50% { box-shadow: 0 -6px 26px rgba(224,181,58,.08); } }

/* While an alert is up, the board is out of play — make that visible. */
#game.locked .layout { opacity: .4; filter: grayscale(.5); pointer-events: none; }
.you-group > .plabel { width: auto; }
.you-tokens { display: flex; gap: 9px; padding-bottom: 6px; }
.you-tokens .token { --s: 40px; }
.reserved-cards { display: flex; gap: 6px; }
.reserved-cards .card { width: 76px; height: 108px; }
.reserved-cards .card .chead { height: 27px; }
.reserved-cards .card .pts { font-size: 18px; }
.reserved-cards .card .gi.bonus { font-size: 19px; }
.reserved-cards .card .cbody { padding: 4px; }
.empty-note { color: var(--dim); font-size: 12px; font-style: italic; }

/* ------------------------------------------------------------ panels */

.log-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 320px; z-index: 50;
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.panel-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 10px 11px 14px; background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.panel-body { flex: 1 1 auto; overflow: auto; padding: 12px 14px; }
.panel-close {
  background: none; border: none; color: var(--dim);
  font-size: 22px; line-height: 1; padding: 0 8px; border-radius: 6px;
}
.panel-close:hover { background: var(--line); color: var(--text); }
.log-panel h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--dim); }
.log-line { padding: 5px 0; border-bottom: 1px solid #2b303d; font-size: 12.5px; color: #c3c8d4; }
.log-line .lt { color: var(--dim); font-size: 11px; margin-right: 5px; }
.rules-body { font-size: 12.5px; color: #c3c8d4; }
.rules-body h5 { margin: 14px 0 4px; color: var(--accent2); font-size: 12.5px; }
.rules-body ul { padding-left: 17px; margin: 4px 0; }
.rules-body li { margin-bottom: 4px; }

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

button#callToggle { display: inline-flex; align-items: center; gap: 6px; }
button#callToggle.off { color: var(--dim); }
button.danger { color: #ff9b9b; border-color: #6b3a3a; }
button.danger:hover:not(:disabled) { background: #3a2020; }

/* Camera glyph, drawn in CSS. */
.cam {
  width: 15px; height: 10px; display: inline-block; position: relative;
  border: 2px solid currentColor; border-radius: 3px;
}
.cam::after {
  content: ""; position: absolute; right: -7px; top: 0;
  border-left: 5px solid currentColor;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}

.call-panel {
  position: fixed; right: 12px; bottom: 12px; z-index: 55; width: 208px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6); overflow: hidden;
}
.call-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 12px; background: var(--panel2);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--dim);
}
.call-head button { padding: 1px 8px; line-height: 1.1; }
.call-grid { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.call-panel.collapsed .call-grid,
.call-panel.collapsed .call-controls { display: none; }

.call-tile {
  position: relative; border-radius: 8px; overflow: hidden;
  background: #0d0f14; border: 2px solid var(--pc); aspect-ratio: 4 / 3;
}
.call-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-tile.no-video video { opacity: 0; }
.call-tile.no-video::after {
  content: "camera off"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 11px;
}
.call-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  color: #fff; font-size: 11px; font-weight: 600; padding: 10px 6px 3px;
}
.call-controls {
  display: flex; gap: 4px; padding: 0 8px 8px; flex-wrap: wrap;
}
.call-controls button { flex: 1 1 auto; font-size: 11.5px; padding: 5px 6px; }
.call-controls button.off { color: var(--bad); border-color: #6b3a3a; }

@media (max-width: 620px) {
  .call-panel { width: 132px; right: 6px; bottom: 6px; }
}

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

.modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8,9,12,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; max-width: 460px; width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.modal-box h3 { margin: 0 0 12px; font-size: 18px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.modal-note { color: var(--dim); font-size: 12.5px; margin: 8px 0 0; }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.choice-row .noble { cursor: pointer; }
.choice-row .noble:hover { box-shadow: 0 0 0 2px var(--accent2); }
.winner-list { list-style: none; padding: 0; margin: 0; }
.winner-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.winner-list li.win { color: var(--accent2); font-weight: 700; }

.toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: #3a2020; border: 1px solid var(--bad); color: #ffd8d8;
  padding: 10px 16px; border-radius: 9px; z-index: 80; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 90vw;
}

/* Bigger pieces wherever the table has the room. */
@media (min-width: 1200px) and (min-height: 960px) {
  .card { width: 96px; height: 134px; }
  .card .chead { height: 35px; }
  .card .pts { font-size: 26px; }
  .card .gi.bonus { font-size: 26px; }
  .pip { width: 22px; height: 22px; font-size: 13px; }
  .card .costs.dense .pip { width: 19px; height: 19px; font-size: 11.5px; }
  .card.back .back-mark { font-size: 30px; }
  .noble { --ns: 90px; width: 90px; height: 90px; }
  .noble .bust { width: 62px; height: 72px; }
  .nchip { width: 17px; height: 21px; font-size: 12.5px; }
  .token { --s: 56px; }
  .rows { gap: 12px; }
  .row { gap: 10px; }
}
.card.big { width: 120px; height: 168px; cursor: default; }
.card.big:hover { transform: none; }
.card.big .chead { height: 42px; }
.card.big .pts { font-size: 32px; }
.card.big .gi.bonus { font-size: 32px; }
.card.big .pip, .card.big .costs.dense .pip { width: 25px; height: 25px; font-size: 14px; }
.card.big .costs { gap: 4px; }

/* ------------------------------------------------------------ responsive */

/* Not enough width to seat people around the table — stack them above it. */
@media (max-width: 1080px) {
  .layout { display: flex; flex-direction: column; overflow: auto; }
  .seat-top, .seat-left, .seat-right {
    max-width: none; align-self: stretch; justify-self: stretch;
  }
  .seat-top .seat-body, .seat-left .seat-body, .seat-right .seat-body {
    flex-direction: row; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  }
  .felt { overflow: visible; flex: 0 0 auto; }
  .log-panel { width: 100%; }
}
@media (max-width: 620px) {
  /* Compact top bar: controls on one line, whose turn it is on the next. */
  .topbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .topbar-right { gap: 4px; flex-wrap: wrap; }
  .topbar-right button { padding: 5px 8px; font-size: 12.5px; }
  .turn-wrap { order: 3; flex: 1 0 100%; }
  .last-move { font-size: 11.5px; }
  .round-info { display: none; }
  .conn .conn-text { display: none; }

  .layout { padding: 6px; gap: 6px; }
  .felt { padding: 8px; border-radius: 14px; }
  .felt-inner { gap: 10px; }

  .card { width: 60px; height: 86px; }
  .card .chead { height: 23px; padding: 0 3px 0 5px; }
  .card .pts { font-size: 17px; -webkit-text-stroke-width: 1.8px; }
  .card .gi.bonus { font-size: 17px; }
  .card .cbody { padding: 3px; }
  .card .lvl-dots { display: none; }
  .pip { width: 16px; height: 16px; font-size: 10px; }
  .card .costs { gap: 2px; }
  .card .costs.dense .pip { width: 13px; height: 13px; font-size: 8.5px; }
  .card.back .back-mark { font-size: 19px; }
  .card.back .cnt { font-size: 9px; padding: 1px 5px; }
  .row { gap: 6px; }
  .rows { gap: 8px; }

  .nobles { gap: 6px; }
  .noble { --ns: 60px; width: 60px; height: 60px; padding: 3px; }
  .noble .bust { width: 40px; height: 48px; }
  .noble .np { font-size: 17px; right: 4px; top: 3px; }
  .nchip { width: 12px; height: 14px; font-size: 9px; }
  .noble .nreq { gap: 1px; }

  .bank { gap: 8px; justify-content: center; }
  .token { --s: 44px; }
  .bank-wrap { padding: 8px; }

  .you-bar { padding: 8px 10px; gap: 12px; }
  .you-tokens .token { --s: 36px; }
  .reserved-cards .card { width: 60px; height: 86px; }
  .reserved-cards .card .chead { height: 23px; }
  .reserved-cards .card .pts { font-size: 17px; }
  .reserved-cards .card .gi.bonus { font-size: 17px; }
  .rows { overflow-x: auto; }
  .row { min-width: max-content; }
}

/* ============================================================ art styles
   Each player picks a style (Classic / Historic / Anime / Digital) from the top
   bar; it only changes what that player sees. body[data-style] switches the
   frames and lettering, and pictures come from public/art/<style>/ (made by
   art/import_art.py). A card without a picture keeps its classic landscape. */

@font-face { font-family: "Splendor Anime"; src: url(/fonts/anime-900.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Splendor Garamond"; src: url(/fonts/garamond-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Splendor Orbitron"; src: url(/fonts/orbitron-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

.style-pick select {
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
}
.style-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Neon colour per gem, used by the digital style. */
.white, .g-white { --n: #eaf6ff; } .blue, .g-blue { --n: #38e1ff; } .green, .g-green { --n: #3dff8f; }
.red, .g-red { --n: #ff3b5c; } .black, .g-black { --n: #a970ff; } .gold, .g-gold { --n: #ffd23a; }

/* ---- pictures */
.card.face.has-art { background: var(--art) center / cover no-repeat, var(--panel); }
.card.face.has-art::after, .card.face.has-art .cbody::before { display: none; }
/* A soft shadow behind the cost column keeps the numbers readable on any picture. */
.card.face.has-art .cbody { background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 48%); }
.noble.has-art { background: var(--art) center / cover no-repeat, #2a2a2a; }
.noble.has-art .bust { display: none; }

/* ---- historic: hand-tinted engraving */
body[data-style="historic"] .card.face { border: 1px solid #2a1a0c; border-radius: 4px; }
body[data-style="historic"] .card.face::before { border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(242,228,193,.85), inset 0 0 0 3px rgba(42,26,12,.75), inset 0 0 16px rgba(80,50,15,.35); }
body[data-style="historic"] .card .chead {
  background: linear-gradient(180deg, rgba(247,237,212,.96), rgba(234,216,173,.94));
  border-bottom: 3px double #2a1a0c; box-shadow: none; }
body[data-style="historic"] .card .pts { font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums;
  color: #8a2412; -webkit-text-stroke: 0; text-shadow: none; }
body[data-style="historic"] .pip, body[data-style="historic"] .nchip {
  font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums; color: #fbf3df; text-shadow: none;
  border: 1px solid #2a1a0c; box-shadow: inset 0 0 0 1.5px rgba(246,236,210,.8), 0 1px 2px rgba(0,0,0,.45); }
body[data-style="historic"] .pip.white, body[data-style="historic"] .nchip.white { background: radial-gradient(circle at 40% 35%, #fbf5e4, #e2d1a6); color: #2a1a0c; }
body[data-style="historic"] .pip.blue,  body[data-style="historic"] .nchip.blue  { background: radial-gradient(circle at 40% 35%, #8fb0dc, #45699f); }
body[data-style="historic"] .pip.green, body[data-style="historic"] .nchip.green { background: radial-gradient(circle at 40% 35%, #9cbf8f, #4c7a45); }
body[data-style="historic"] .pip.red,   body[data-style="historic"] .nchip.red   { background: radial-gradient(circle at 40% 35%, #d9826a, #9c3622); }
body[data-style="historic"] .pip.black, body[data-style="historic"] .nchip.black { background: radial-gradient(circle at 40% 35%, #6b5640, #2e2116); }
body[data-style="historic"] .pip.gold { background: radial-gradient(circle at 40% 35%, #f1d98c, #b38a2c); color: #2a1a0c; }
body[data-style="historic"] .noble { border: 1px solid #2a1a0c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(242,228,193,.85), inset 0 0 0 3px rgba(42,26,12,.75), 0 4px 10px rgba(0,0,0,.45); }
body[data-style="historic"] .noble .np { font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums;
  color: #8a2412; -webkit-text-stroke: 0; text-shadow: none; background: rgba(244,232,202,.94); border: 1px solid #2a1a0c;
  border-radius: 50%; width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; }

/* ---- anime: bright, clean, outlined */
body[data-style="anime"] .card.face { border: 2px solid #fff; border-radius: 9px; box-shadow: 0 0 0 1px #1b1630, 0 3px 8px rgba(0,0,0,.45); }
body[data-style="anime"] .card.face::before { box-shadow: none; }
body[data-style="anime"] .card .chead { background: rgba(255,255,255,.93); border-bottom: 2px solid var(--c2); box-shadow: 0 1px 0 #1b1630; }
body[data-style="anime"] .card .pts { font-family: "Splendor Anime", "Arial Rounded MT Bold", sans-serif; font-weight: 900;
  -webkit-text-stroke-color: color-mix(in srgb, var(--c3) 80%, #000); }
body[data-style="anime"] .card.g-white .pts { -webkit-text-stroke-color: #1b1630; }
body[data-style="anime"] .pip, body[data-style="anime"] .nchip {
  font-family: "Splendor Anime", sans-serif; font-weight: 900; color: #fff; text-shadow: none;
  -webkit-text-stroke: 2px #1b1630; paint-order: stroke fill;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px #1b1630, 0 1px 2px rgba(0,0,0,.4); }
body[data-style="anime"] .nchip { border-radius: 4px; }
body[data-style="anime"] .noble { border: 2px solid #fff; border-radius: 9px; box-shadow: 0 0 0 1px #1b1630, 0 4px 10px rgba(0,0,0,.45); }
body[data-style="anime"] .noble .np { font-family: "Splendor Anime", sans-serif; font-weight: 900; -webkit-text-stroke: 3px #7a4d0e; paint-order: stroke fill;
  color: #fff; text-shadow: none; background: radial-gradient(circle at 38% 32%, #fff6c4, #f5c842 50%, #c48a17);
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px #1b1630; border-radius: 50%;
  width: 1.35em; height: 1.35em; display: flex; align-items: center; justify-content: center; }

/* ---- digital: neon */
body[data-style="digital"] .card.face { border: 1px solid var(--n); border-radius: 3px; background-color: #05071a;
  box-shadow: 0 0 8px color-mix(in srgb, var(--n) 55%, transparent), 0 3px 8px rgba(0,0,0,.5); }
body[data-style="digital"] .card.face::before { box-shadow: none; }
body[data-style="digital"] .card .chead { background: linear-gradient(180deg, rgba(3,5,24,.92), rgba(14,10,46,.86));
  border-bottom: 1px solid var(--n); box-shadow: 0 0 6px var(--n); }
body[data-style="digital"] .card .pts { font-family: "Splendor Orbitron", Consolas, monospace; font-weight: 800; color: #fff;
  -webkit-text-stroke: 0; text-shadow: 0 0 3px var(--n), 0 0 8px var(--n); }
body[data-style="digital"] .card .lvl-dots { color: var(--n); text-shadow: 0 0 4px var(--n); }
body[data-style="digital"] .pip, body[data-style="digital"] .nchip {
  font-family: "Splendor Orbitron", monospace; font-weight: 800; font-size: 10px; color: #fff;
  background: #070b26; border: 1px solid var(--n); border-radius: 4px;
  text-shadow: 0 0 3px var(--n), 0 0 1px var(--n); box-shadow: 0 0 5px color-mix(in srgb, var(--n) 70%, transparent); }
body[data-style="digital"] .noble { border: 1px solid #38e1ff; border-radius: 3px; background-color: #05071a;
  box-shadow: 0 0 8px rgba(56,225,255,.55), 0 4px 10px rgba(0,0,0,.5); }
body[data-style="digital"] .noble .np { font-family: "Splendor Orbitron", monospace; font-weight: 800; color: #fff;
  -webkit-text-stroke: 0; text-shadow: 0 0 3px #38e1ff, 0 0 8px #38e1ff; background: rgba(3,5,24,.9);
  border: 1px solid #38e1ff; border-radius: 3px; padding: 1px 4px; }

/* ---- states that every style keeps */
body:not([data-style="classic"]) .card.face.affordable { box-shadow: 0 0 0 2px var(--ok), 0 0 14px rgba(78,168,106,.55), 0 3px 8px rgba(0,0,0,.45); }
body:not([data-style="classic"]) .noble.eligible { box-shadow: 0 0 0 2px var(--ok), 0 0 16px rgba(78,168,106,.6); }
body:not([data-style="classic"]) .pip.short { box-shadow: 0 0 0 2px var(--bad), 0 1px 2px rgba(0,0,0,.4); }
@media (max-width: 620px) { .style-pick select { padding: 5px 6px; font-size: 12.5px; } }


/* ============================================================ status, presence and flow */

/* ---- top bar: turn banner with a second line for the last move */
.turn-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.turn-wrap .turn-banner { flex: 0 0 auto; flex-wrap: wrap; row-gap: 2px; }
.last-move {
  font-size: 12px; color: var(--dim); text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em;
}
.last-move b { font-weight: 600; }
.last-move .wait-note { color: #e8b76a; }
.last-move button.link { font-size: 12px; padding: 0 4px; color: var(--accent2); }
.last-move button.link:disabled { color: var(--dim); text-decoration: none; }
.turn-banner .final { color: #ff9b8f; font-weight: 600; font-size: 12px; border: 1px solid rgba(255,120,110,.45);
  border-radius: 10px; padding: 0 7px; margin-left: 2px; }
.turn-banner #resultsBtn { padding: 3px 10px; font-size: 12px; margin-left: 4px; }
.round-info { font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.round-info.final { color: #ff9b8f; border-color: rgba(255,120,110,.45); }

/* ---- the Menu dropdown */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px;
}
.menu-item {
  background: none; border: 0; border-radius: 6px; text-align: left; padding: 8px 10px; width: 100%;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
.menu-item:hover:not(:disabled) { background: var(--panel2); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px;
  color: var(--dim); font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-row select { font: inherit; font-size: 13px; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 8px; cursor: pointer; }
.menu .danger-text { color: #ff9b9b; }
button#soundToggle.off { color: var(--dim); }

/* ---- presence: a dot on every avatar, words where there's room */
.avatar { position: relative; }
.avatar.pr-online::after, .avatar.pr-away::after, .avatar.pr-offline::after {
  content: ""; position: absolute; right: -4px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid var(--bg2); box-sizing: content-box;
}
.avatar.pr-online::after { background: var(--ok); }
.avatar.pr-away::after { background: #e0b53a; }
.avatar.pr-offline::after { background: #6b7184; }
.avatar.pr-offline { filter: grayscale(.7); opacity: .75; }
.pr-text { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; border-radius: 9px; padding: 0 6px; white-space: nowrap; }
.pr-text.online { color: var(--ok); }
.pr-text.away { color: #e0b53a; border: 1px solid rgba(224,181,58,.4); }
.pr-text.offline { color: #9aa0b0; border: 1px solid #4a5164; }
.pr-badge { font-size: 11.5px; font-weight: 600; border-radius: 10px; padding: 0 8px; white-space: nowrap; }
.pr-badge.away { color: #e0b53a; border: 1px solid rgba(224,181,58,.45); }
.pr-badge.offline { color: #b9bfcc; border: 1px solid #4a5164; background: rgba(255,255,255,.04); }
.pcard.is-offline { opacity: .72; }
.pcard.is-offline .pname { color: var(--dim); }

/* ---- score race: how close each player is to 15 */
.race { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin: -3px 0 8px; }
.race i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--pc, var(--accent2)), var(--accent2)); transition: width .5s; }
.you-id .race { position: absolute; left: 10px; right: 10px; bottom: 4px; margin: 0; height: 3px; }
.you-id { position: relative; }

/* ---- what just changed */
.card.fresh { animation: dealt 1.6s ease-out; }
@keyframes dealt {
  0% { transform: translateY(-14px) scale(.96); box-shadow: 0 0 0 3px var(--accent2), 0 0 26px rgba(224,181,58,.8); }
  60% { box-shadow: 0 0 0 2px var(--accent2), 0 0 18px rgba(224,181,58,.5); }
  100% { transform: none; }
}
.token .delta {
  position: absolute; z-index: 4; top: -10px; left: 50%; transform: translateX(-50%);
  font: 800 12px/1 system-ui, sans-serif; padding: 2px 5px; border-radius: 8px; pointer-events: none;
  animation: delta 2.4s ease-out forwards;
}
.token .delta.up { background: #1f3a2a; color: #7ee2a0; border: 1px solid #3d8a59; }
.token .delta.down { background: #3a2020; color: #ff9b9b; border: 1px solid #6b3a3a; }
@keyframes delta { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.pcard.just-moved { animation: moved 2.2s ease-out; }
@keyframes moved { 0% { box-shadow: 0 0 0 2px var(--pc), 0 0 30px color-mix(in srgb, var(--pc) 60%, transparent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .card.fresh, .token .delta, .pcard.just-moved, .announce.show { animation: none; } }

/* ---- big centred announcement ("Mei goes first") */
.announce {
  position: fixed; left: 50%; top: 38%; z-index: 85; transform: translate(-50%, -50%); pointer-events: none;
  font: 700 30px/1.2 var(--serif); color: #fff3cf; text-align: center; padding: 18px 34px; border-radius: 16px;
  background: rgba(16,18,24,.88); border: 1px solid rgba(224,181,58,.5); box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.announce.show { animation: pop 2.6s ease forwards; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.92); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- connection lost */
.net-banner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 95; text-align: center;
  padding: 8px 16px calc(8px + 0px); padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #5a2626; color: #ffe0e0; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* ---- toasts: errors red, notices calm */
.toast.info { background: #1f2a3a; border-color: #3e5d86; color: #dbe8ff; }

/* ---- home and lobby: invites */
.invite { margin: -6px 0 16px; padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: rgba(224,181,58,.1); border: 1px solid rgba(224,181,58,.35); color: var(--text); }
.invite-box { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 6px 6px 10px;
  background: #171a21; border: 1px solid var(--line); border-radius: 8px; }
.invite-link { flex: 1; min-width: 0; font: 12.5px ui-monospace, Consolas, monospace; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card .invite-box button { width: auto; margin: 0; flex: 0 0 auto; }
.lobby-side { display: flex; align-items: center; gap: 6px; }
.lobby-side button.link { width: auto; margin: 0; font-size: 12px; padding: 2px 4px; }
.lobby-name .pr-text { margin-left: 2px; }
.lobby-players li.lobby-empty { border-left-color: var(--line); border-style: dashed; color: var(--dim); font-style: italic; }
.lobby-players li.lobby-empty .lobby-name { font-weight: 400; }
.link-box { margin-top: 12px; padding: 10px; background: #171a21; border: 1px solid var(--line); border-radius: 8px;
  font: 12px ui-monospace, Consolas, monospace; color: var(--dim); word-break: break-all; user-select: all; }

/* ---- results */
.winner-list li { align-items: center; gap: 10px; }
.wl-name { display: flex; align-items: center; gap: 8px; }
.wl-rank { width: 18px; color: var(--dim); font-variant-numeric: tabular-nums; }
.wl-stats { color: var(--dim); font-size: 13px; white-space: nowrap; }
.wl-stats b { color: var(--text); font-size: 15px; }
.winner-list li.win .wl-stats b { color: var(--accent2); }

/* ---- table layout: on wide screens the bank sits beside the cards, so a
   laptop-height window shows the whole table without scrolling */
@media (min-width: 1100px) {
  .felt-inner { display: grid; grid-template-columns: auto auto; grid-template-areas: "nobles nobles" "rows bank";
    align-items: center; justify-content: center; column-gap: 18px; row-gap: 12px; }
  .felt-inner > .nobles { grid-area: nobles; justify-self: center; }
  .felt-inner > .rows { grid-area: rows; }
  .felt-inner > .bank-wrap { grid-area: bank; width: 150px; padding: 10px; }
  .bank-wrap .bank { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 16px 14px; }
  .bank-wrap .bank-title { text-align: center; }
  .bank-wrap .selection { flex-wrap: wrap; justify-content: center; text-align: center; }
  .bank-wrap #selectionText { flex: 1 0 100%; }
}

@media (max-width: 620px) {
  .turn-wrap { order: 3; flex: 1 0 100%; }
  .menu { right: -4px; min-width: 210px; }
}

/* Opponents' reserved cards are for reference, so keep them compact and the table visible. */
.seat .reserved-cards .card { width: 60px; height: 86px; }
.seat .reserved-cards .card .chead { height: 23px; padding: 0 3px 0 5px; }
.seat .reserved-cards .card .pts { font-size: 16px; -webkit-text-stroke-width: 1.8px; }
.seat .reserved-cards .card .gi.bonus { font-size: 16px; }
.seat .reserved-cards .card .cbody { padding: 3px; }
.seat .reserved-cards .card .pip { width: 15px; height: 15px; font-size: 9.5px; }
.seat .reserved-cards .card .costs { gap: 2px; }
.seat .reserved-cards .card .lvl-dots { display: none; }
.seat .reserved-cards .card.back .back-mark { font-size: 18px; }
.seat .reserved-cards .card.back .cnt { font-size: 9px; padding: 1px 5px; }

/* Laptop-height windows: slightly smaller pieces so the whole table fits without scrolling. */
@media (min-width: 621px) and (max-height: 740px) {
  .card { width: 72px; height: 101px; }
  .card .chead { height: 26px; }
  .card .pts { font-size: 19px; }
  .card .gi.bonus { font-size: 19px; }
  .pip { width: 17px; height: 17px; font-size: 10.5px; }
  .card .costs { gap: 2px; }
  .card .costs.dense .pip { width: 15px; height: 15px; font-size: 9.5px; }
  .card.back .back-mark { font-size: 22px; }
  .noble { --ns: 64px; width: 64px; height: 64px; }
  .noble .bust { width: 42px; height: 50px; }
  .noble .np { font-size: 17px; }
  .nchip { width: 13px; height: 16px; font-size: 10px; }
  .token { --s: 44px; }
  .rows { gap: 8px; }
  .row { gap: 7px; }
  .felt { padding: 10px; }
  .felt-inner { gap: 10px; row-gap: 10px; }
  .layout { padding-block: 8px; gap: 8px; }
  .reserved-cards .card { width: 60px; height: 86px; }
  .reserved-cards .card .chead { height: 23px; }
  .reserved-cards .card .pts { font-size: 16px; }
  .reserved-cards .card .gi.bonus { font-size: 16px; }
  .reserved-cards .card .pip { width: 15px; height: 15px; font-size: 9.5px; }
  .you-bar { padding-block: 8px; }
  .you-tokens .token { --s: 36px; }
  .gemchip { height: 40px; }
}

/* Centre the table vertically when there's spare room; auto margins fall back to
   the top (instead of clipping) when the content is taller than the felt. */
.felt { display: flex; flex-direction: column; }
.felt-inner { margin: auto; }
@media (max-width: 1080px) { .felt { display: block; } .felt-inner { margin: 0 auto; } }

/* ============================================================ theme pickers */

.theme-block { margin: 2px 0 14px; }
.theme-label { display: block; color: var(--dim); font-size: 12.5px; margin-bottom: 6px; }
.theme-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-card .theme-tile, .theme-tile {
  width: auto; margin: 0; padding: 4px 4px 5px; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  background: var(--panel2); border: 2px solid var(--line); color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.theme-tile:hover { transform: translateY(-1px); }
.theme-tile[aria-checked="true"] { border-color: var(--accent2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent2) 35%, transparent), 0 4px 14px rgba(0,0,0,.25); }
.tt-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 84 / 100; border-radius: 6px;
  background: center 30% / cover no-repeat, linear-gradient(170deg, #8cc0ff, #2d63bd 60%, #183c7f); font-size: 22px; }
.tt-name { font-size: 11.5px; font-weight: 600; text-align: center; }
.theme-pick.readonly { display: block; }
.theme-note { margin: 0; font-size: 13px; color: var(--dim); }
.theme-note b { color: var(--text); }
#home.invited .theme-block { display: none; }

/* ============================================================ UI THEMES
   Each theme restyles the whole interface to sit with its pictures. Most of
   it is the colour tokens; the rest is surfaces (page, panels, table, bars). */

@font-face { font-family: "Splendor Fell"; src: url(/fonts/fell.woff2) format("woff2"); font-display: swap; }

/* ------------------------------------------------ HISTORIC: a Renaissance study
   Walnut desk, parchment panels with ruled borders, ink text, oxblood seals,
   gold-tooled green leather for the table. */
body[data-style="historic"] {
  --bg: #24180f; --bg2: #f1e4c4; --panel: #f1e4c4; --panel2: #e7d6af; --line: #b39566;
  --text: #2a1a0c; --dim: #6e5636; --accent: #8a2412; --accent2: #a87a22; --ok: #3f7a35; --bad: #a3321f;
  --serif: "Splendor Garamond", Georgia, "Palatino Linotype", serif;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
}
html:has(body[data-style="historic"]), body[data-style="historic"] {
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.07) 0 2px, transparent 2px 11px),
    radial-gradient(1300px 800px at 50% -10%, #4e3522, #2a1b10 60%, #1b110a);
}
body[data-style="historic"] .home-card,
body[data-style="historic"] .pcard,
body[data-style="historic"] .bank-wrap,
body[data-style="historic"] .modal-box,
body[data-style="historic"] .menu,
body[data-style="historic"] .log-panel,
body[data-style="historic"] .call-panel {
  background: radial-gradient(ellipse at 30% 20%, #f7edd3, #ecdcb5 70%, #e2cd9f);
  border: 1px solid #8f6f3f;
  box-shadow: inset 0 0 0 3px rgba(241,228,196,.9), inset 0 0 0 4px rgba(120,85,40,.5), 0 14px 40px rgba(0,0,0,.5);
  color: var(--text);
}
body[data-style="historic"] .pcard { border-left: 4px solid var(--pc); }
body[data-style="historic"] .pcard.active { box-shadow: inset 0 0 0 3px rgba(241,228,196,.9), inset 0 0 0 4px rgba(120,85,40,.5), 0 0 0 2px var(--pc), 0 8px 24px rgba(0,0,0,.45); }
body[data-style="historic"] .home-card h1 { font-family: "Splendor Fell", Georgia, serif; font-weight: 400; font-size: 42px;
  background: none; color: #7a1f12; -webkit-text-fill-color: #7a1f12; filter: none; letter-spacing: .5px; }
body[data-style="historic"] .home-card h2, body[data-style="historic"] .modal-box h3,
body[data-style="historic"] .group-title, body[data-style="historic"] .panel-head h4 { font-family: "Splendor Fell", Georgia, serif; font-weight: 400; }
body[data-style="historic"] .panel-head h4 { font-size: 15px; letter-spacing: .5px; text-transform: none; color: var(--text); }
body[data-style="historic"] .home-card h2 { font-size: 26px; }
body[data-style="historic"] .code { color: #7a1f12; font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums; }
body[data-style="historic"] button { background: #e7d6af; border-color: #9c7b4a; color: var(--text); font-family: inherit; }
body[data-style="historic"] button:hover:not(:disabled) { background: #dcc897; border-color: #7a5b2e; }
body[data-style="historic"] button.primary {
  background: linear-gradient(180deg, #9e3019, #6e1a0c); border-color: #4a1006; color: #f6ead0;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.3), 0 2px 4px rgba(0,0,0,.35); font-weight: 700; letter-spacing: .3px;
}
body[data-style="historic"] button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #b23a20, #7d2010); }
body[data-style="historic"] button.ghost { background: transparent; }
body[data-style="historic"] button.link { background: none; color: var(--dim); }
body[data-style="historic"] input { background: #fbf4e2; border-color: #a88a5a; color: var(--text); }
body[data-style="historic"] input:focus { border-color: #7a1f12; }
body[data-style="historic"] .or::before, body[data-style="historic"] .or::after { background: #b39566; }
body[data-style="historic"] .lobby-players li { background: #e9d9b3; border-color: #b39566; }
body[data-style="historic"] .invite, body[data-style="historic"] .invite-box, body[data-style="historic"] .link-box { background: #fbf4e2; border-color: #b39566; }
body[data-style="historic"] .invite-link, body[data-style="historic"] .link-box { color: var(--dim); }
/* top bar: tooled leather with gold lettering */
body[data-style="historic"] .topbar {
  --text: #f1e4c4; --dim: #cbb38a; --line: #6e5032; --panel2: #4a3220;
  background: linear-gradient(180deg, #4a3220, #33221a); border-bottom: 2px solid #a8823c;
  box-shadow: inset 0 -4px 0 #33221a, inset 0 -5px 0 rgba(214,178,94,.45), 0 4px 16px rgba(0,0,0,.4);
}
body[data-style="historic"] .topbar button { background: rgba(241,228,196,.08); border-color: #8a6a3a; color: #f1e4c4; }
body[data-style="historic"] .topbar button:hover:not(:disabled) { background: rgba(241,228,196,.16); }
body[data-style="historic"] .topbar .menu { --text: #2a1a0c; --dim: #6e5636; --line: #b39566; --panel2: #e7d6af; }
body[data-style="historic"] .topbar .menu button, body[data-style="historic"] .menu-item { background: none; border: 0; color: var(--text); }
body[data-style="historic"] .menu-item:hover:not(:disabled) { background: rgba(120,85,40,.12); }
body[data-style="historic"] .brand { color: #e8c877; font-family: "Splendor Fell", Georgia, serif; font-weight: 400; font-size: 20px; }
body[data-style="historic"] .topbar .code { color: #e8c877; }
body[data-style="historic"] .turn-banner { font-family: "Splendor Fell", Georgia, serif; font-size: 17px; }
body[data-style="historic"] .conn { background: rgba(0,0,0,.25); border-color: #6e5032; }
/* the table: green leather with gold tooling */
body[data-style="historic"] .felt {
  --dim: #d8c79f;
  background: radial-gradient(ellipse at 50% 40%, #345240, #22382b 60%, #182a20);
  border: 2px solid #a8823c; border-radius: 10px;
  box-shadow: inset 0 0 0 6px #22382b, inset 0 0 0 7px rgba(214,178,94,.6), inset 0 0 70px rgba(0,0,0,.55), 0 14px 50px rgba(0,0,0,.5);
}
body[data-style="historic"] .bank-title { font-family: "Splendor Fell", Georgia, serif; letter-spacing: 1px; font-size: 13px; color: var(--dim); text-transform: none; }
body[data-style="historic"] .card.slot-empty { border-color: rgba(214,178,94,.35); }
/* the bottom bar: a parchment strip */
body[data-style="historic"] .you-bar { background: linear-gradient(180deg, #efe1bf, #e3cfa3); border-top: 2px solid #a8823c; box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
body[data-style="historic"] .you-id { background: rgba(255,255,255,.35); }
body[data-style="historic"] .you-score, body[data-style="historic"] .ppts { color: #7a1f12; font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums; }
body[data-style="historic"] .pname, body[data-style="historic"] .you-name { font-family: "Splendor Fell", Georgia, serif; font-weight: 400; font-size: 15px; }
body[data-style="historic"] .plabel { color: var(--dim); }
body[data-style="historic"] .stack { background: rgba(255,255,255,.4); border-color: #c4a676; }
body[data-style="historic"] .stack .n b { color: var(--text); }
body[data-style="historic"] .race { background: rgba(80,55,20,.15); }
body[data-style="historic"] .gemchip.zero { opacity: .22; }
/* tokens become coins with milled edges */
body[data-style="historic"] .token { filter: sepia(.2) saturate(.85);
  box-shadow: inset 0 0 0 3px rgba(80,55,20,.55), inset 0 -3px 6px rgba(0,0,0,.35), 0 3px 0 #4a3418, 0 5px 10px rgba(0,0,0,.45); }
body[data-style="historic"] .token::before { background: repeating-conic-gradient(rgba(60,40,15,.5) 0 2.5deg, transparent 2.5deg 8deg); }
body[data-style="historic"] .token .cnt { background: #f6ead0; color: #2a1a0c; border-color: #8f6f3f; font-family: "Splendor Garamond", Georgia, serif; font-variant-numeric: lining-nums; }
/* deck backs: leather-bound volumes */
body[data-style="historic"] .card.back { --b1: #4f6d48; --b2: #22331f;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 5px), radial-gradient(ellipse at 50% 35%, var(--b1), var(--b2));
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.25), inset 0 0 0 5px rgba(214,178,94,.7), inset 0 0 0 8px rgba(0,0,0,.18), inset 0 0 0 9px rgba(214,178,94,.45), 0 3px 8px rgba(0,0,0,.5);
  border-color: #2a1a0c; border-radius: 5px; }
body[data-style="historic"] .card.back.lvl-2 { --b1: #8a3424; --b2: #3e120a; }
body[data-style="historic"] .card.back.lvl-3 { --b1: #34497a; --b2: #141f3a; }
body[data-style="historic"] .card.back .back-mark { font-family: "Splendor Fell", Georgia, serif; font-weight: 400; color: #e8c877; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
body[data-style="historic"] .card.back .cnt { background: rgba(0,0,0,.4); color: #f1e4c4; }
/* panels and overlays */
body[data-style="historic"] .modal { background: rgba(20,12,6,.72); }
body[data-style="historic"] .panel-head { background: rgba(120,85,40,.12); border-bottom-color: #b39566; }
body[data-style="historic"] .log-line { color: var(--text); border-bottom-color: rgba(120,85,40,.25); }
body[data-style="historic"] .rules-body { color: var(--text); }
body[data-style="historic"] .rules-body h5 { color: #7a1f12; }
body[data-style="historic"] .menu-row { border-bottom-color: #b39566; }
body[data-style="historic"] .menu-row select, body[data-style="historic"] select { background: #fbf4e2; color: var(--text); border-color: #a88a5a; }
body[data-style="historic"] .toast.info { background: #f1e4c4; border-color: #8f6f3f; color: #2a1a0c; }
body[data-style="historic"] .announce { background: #f1e4c4; color: #7a1f12; border-color: #8f6f3f; font-family: "Splendor Fell", Georgia, serif; font-weight: 400; }
body[data-style="historic"] .theme-tile { background: #fbf4e2; }
body[data-style="historic"] .winner-list li { border-bottom-color: rgba(120,85,40,.3); }
body[data-style="historic"] .pr-text.offline, body[data-style="historic"] .pr-badge.offline { color: #6e5636; border-color: #b39566; }
body[data-style="historic"] .last-move .wait-note { color: #e8c877; }
body[data-style="historic"] .avatar.pr-online::after, body[data-style="historic"] .avatar.pr-away::after, body[data-style="historic"] .avatar.pr-offline::after { border-color: #f1e4c4; }
body[data-style="historic"] .topbar .avatar::after { border-color: #3a2618 !important; }

/* ------------------------------------------------ ANIME: a bright sky
   Light and airy: sky gradient with clouds, white glass panels, rounded
   lettering, a royal-blue velvet table so the bright cards stand out. */
body[data-style="anime"] {
  --bg: #cfe8ff; --bg2: rgba(255,255,255,.82); --panel: rgba(255,255,255,.88); --panel2: #eef5ff; --line: #c3d6f2;
  --text: #1f2b4d; --dim: #5d6c92; --accent: #3d7bff; --accent2: #f2a51a; --ok: #19a463; --bad: #f0436a;
  --serif: "Splendor Anime", "Arial Rounded MT Bold", system-ui, sans-serif;
}
html:has(body[data-style="anime"]), body[data-style="anime"] {
  background:
    radial-gradient(260px 120px at 12% 18%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(340px 140px at 86% 10%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(300px 120px at 70% 85%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(180deg, #6ab8ff 0%, #a9dbff 45%, #fde8f3 100%);
  background-attachment: fixed;
}
body[data-style="anime"] .home-card,
body[data-style="anime"] .pcard,
body[data-style="anime"] .bank-wrap,
body[data-style="anime"] .modal-box,
body[data-style="anime"] .menu,
body[data-style="anime"] .log-panel,
body[data-style="anime"] .call-panel {
  background: rgba(255,255,255,.86); border: 2px solid #fff; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(40,90,180,.22), inset 0 0 0 1px rgba(120,170,240,.25);
  backdrop-filter: blur(8px); color: var(--text);
}
body[data-style="anime"] .log-panel { border-radius: 18px 0 0 18px; }
body[data-style="anime"] .pcard { border-left: 5px solid var(--pc); }
body[data-style="anime"] .pcard.active { background: #fff; box-shadow: 0 0 0 3px var(--pc), 0 10px 30px rgba(40,90,180,.25); }
body[data-style="anime"] .home-card h1 { font-family: "Splendor Anime", sans-serif; font-weight: 900; font-size: 40px;
  background: linear-gradient(180deg, #ffd95e, #f29a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 6px rgba(40,90,180,.35)); }
body[data-style="anime"] .home-card h2, body[data-style="anime"] .modal-box h3, body[data-style="anime"] .panel-head h4,
body[data-style="anime"] .brand, body[data-style="anime"] .turn-banner, body[data-style="anime"] .pname, body[data-style="anime"] .you-name {
  font-family: "Splendor Anime", sans-serif; font-weight: 900; }
body[data-style="anime"] .code { color: #3d7bff; }
body[data-style="anime"] button { background: #fff; border: 2px solid #cfe0f7; border-radius: 999px; color: #2b4a8a; font-weight: 600; }
body[data-style="anime"] button:hover:not(:disabled) { background: #f2f8ff; border-color: #9ec3f5; }
body[data-style="anime"] button.primary {
  background: linear-gradient(180deg, #6db0ff, #3373f0); border-color: #fff; color: #fff;
  box-shadow: 0 0 0 1px #2a5fc8, 0 4px 12px rgba(51,115,240,.4), inset 0 1px 0 rgba(255,255,255,.6); font-weight: 800;
}
body[data-style="anime"] button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #82bcff, #4583f5); }
body[data-style="anime"] button.ghost { background: rgba(255,255,255,.6); }
body[data-style="anime"] button.link { background: none; border: 0; color: var(--dim); }
body[data-style="anime"] input { background: #fff; border: 2px solid #cfe0f7; border-radius: 12px; color: var(--text); }
body[data-style="anime"] input:focus { border-color: #3d7bff; }
body[data-style="anime"] .lobby-players li { background: #f5f9ff; border-color: #d6e4f7; border-radius: 12px; }
body[data-style="anime"] .invite, body[data-style="anime"] .invite-box, body[data-style="anime"] .link-box { background: #f5f9ff; border-color: #cfe0f7; }
body[data-style="anime"] .topbar { background: rgba(255,255,255,.8); border-bottom: 2px solid #fff; box-shadow: 0 4px 20px rgba(40,90,180,.18); backdrop-filter: blur(8px); }
body[data-style="anime"] .brand { color: #f29a1a; font-size: 19px; }
body[data-style="anime"] .conn { background: #fff; border-color: #d6e4f7; }
body[data-style="anime"] .menu-item { background: none; border: 0; border-radius: 10px; }
body[data-style="anime"] .menu-item:hover:not(:disabled) { background: #eef5ff; }
body[data-style="anime"] select { background: #fff; color: var(--text); border-color: #cfe0f7; }
/* the table: royal-blue velvet with a white rim and a scatter of sparkles */
body[data-style="anime"] .felt {
  --dim: #d6e6ff;
  background:
    radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 40% 82%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 76%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(ellipse at 50% 35%, #4a7fe6, #2a52b4 55%, #1c3a88);
  border: 3px solid #fff; border-radius: 26px;
  box-shadow: 0 0 0 2px #2a5fc8, inset 0 0 50px rgba(10,30,90,.45), 0 16px 40px rgba(40,90,180,.35);
}
body[data-style="anime"] .bank-title { color: var(--dim); font-family: "Splendor Anime", sans-serif; font-weight: 900; }
body[data-style="anime"] .card.slot-empty { border-color: rgba(255,255,255,.4); }
body[data-style="anime"] .you-bar { background: rgba(255,255,255,.85); border-top: 2px solid #fff; box-shadow: 0 -6px 24px rgba(40,90,180,.2); backdrop-filter: blur(8px); }
body[data-style="anime"] .you-id { background: #fff; }
body[data-style="anime"] .you-score, body[data-style="anime"] .ppts { color: #f29a1a; font-family: "Splendor Anime", sans-serif; font-weight: 900;
  -webkit-text-stroke: 1px rgba(160,90,0,.35); }
body[data-style="anime"] .stack { background: #fff; border-color: #d6e4f7; }
body[data-style="anime"] .race { background: #e1ecfb; }
body[data-style="anime"] .race i { background: linear-gradient(90deg, #ff8fb8, #ffd25e); }
body[data-style="anime"] .token { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(30,60,140,.5), inset 0 -3px 6px rgba(0,0,0,.25), 0 6px 12px rgba(20,50,140,.35); }
body[data-style="anime"] .token .cnt { background: #fff; color: #1f2b4d; border-color: #b9cfee; font-family: "Splendor Anime", sans-serif; font-weight: 900; }
body[data-style="anime"] .card.back { --b1: #6fe0b4; --b2: #22a37c; border: 2px solid #fff; border-radius: 10px;
  background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.35) 0 18px, transparent 19px),
    radial-gradient(1.5px 1.5px at 30% 25%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 70% 70%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 75% 20%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 22% 78%, #fff, transparent 70%),
    linear-gradient(160deg, var(--b1), var(--b2));
  box-shadow: 0 0 0 1px rgba(20,40,100,.5), 0 4px 10px rgba(20,40,100,.35); }
body[data-style="anime"] .card.back.lvl-2 { --b1: #ffd76a; --b2: #f09a1c; }
body[data-style="anime"] .card.back.lvl-3 { --b1: #8ab8ff; --b2: #3c68dc; }
body[data-style="anime"] .card.back .back-mark { font-family: "Splendor Anime", sans-serif; font-weight: 900; color: #fff;
  -webkit-text-stroke: 3px rgba(20,40,100,.55); paint-order: stroke fill; text-shadow: none; }
body[data-style="anime"] .card.back .cnt { background: rgba(255,255,255,.9); color: #1f2b4d; }
body[data-style="anime"] .modal { background: rgba(60,100,180,.32); backdrop-filter: blur(4px); }
body[data-style="anime"] .panel-head { background: #eef5ff; border-bottom-color: #d6e4f7; }
body[data-style="anime"] .log-line { color: var(--text); border-bottom-color: #e1ecfb; }
body[data-style="anime"] .rules-body { color: var(--text); }
body[data-style="anime"] .rules-body h5 { color: #3d7bff; }
body[data-style="anime"] .menu-row { border-bottom-color: #d6e4f7; }
body[data-style="anime"] .toast.info { background: #fff; border-color: #9ec3f5; color: #1f2b4d; }
body[data-style="anime"] .toast { border-radius: 14px; }
body[data-style="anime"] .announce { background: #fff; color: #f29a1a; border: 3px solid #ffd25e; font-family: "Splendor Anime", sans-serif; font-weight: 900;
  box-shadow: 0 0 0 2px #fff, 0 16px 40px rgba(40,90,180,.35); }
body[data-style="anime"] .alert-bar { background: linear-gradient(180deg, #ff9ec2, #ff6fa1); color: #fff; border-top-color: #ffd1e2; }
body[data-style="anime"] .alert-icon { background: #fff; color: #ff4d8a; }
body[data-style="anime"] .theme-tile { background: #fff; }
body[data-style="anime"] .winner-list li { border-bottom-color: #e1ecfb; }
body[data-style="anime"] .pr-text.offline, body[data-style="anime"] .pr-badge.offline { color: #5d6c92; border-color: #c3d6f2; background: #fff; }
body[data-style="anime"] .last-move .wait-note { color: #d1477a; }
body[data-style="anime"] .avatar.pr-online::after, body[data-style="anime"] .avatar.pr-away::after, body[data-style="anime"] .avatar.pr-offline::after { border-color: #fff; }
body[data-style="anime"] .round-info { background: #fff; }
body[data-style="anime"] .net-banner { background: #f0436a; color: #fff; }

/* ------------------------------------------------ DIGITAL: a starship bridge
   Deep navy, dark glass panels edged in cyan light, silver and gold trim like
   the chrome machines in the pictures, a holographic grid table. */
body[data-style="digital"] {
  --bg: #050a18; --bg2: rgba(8,16,34,.92); --panel: rgba(11,22,44,.9); --panel2: rgba(22,40,72,.9); --line: #284870;
  --text: #e6f3ff; --dim: #8aa8c8; --accent: #3fd3ff; --accent2: #e9c46a; --ok: #3dffa0; --bad: #ff4d6d;
  --serif: "Splendor Orbitron", Consolas, monospace;
}
html:has(body[data-style="digital"]), body[data-style="digital"] {
  background:
    linear-gradient(rgba(63,211,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(63,211,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(1200px 700px at 50% -10%, #133466, #07122a 60%, #03060f);
  background-attachment: fixed;
}
body[data-style="digital"] .home-card,
body[data-style="digital"] .pcard,
body[data-style="digital"] .bank-wrap,
body[data-style="digital"] .modal-box,
body[data-style="digital"] .menu,
body[data-style="digital"] .log-panel,
body[data-style="digital"] .call-panel {
  background: linear-gradient(180deg, rgba(16,32,62,.92), rgba(8,18,38,.94));
  border: 1px solid rgba(140,210,255,.38); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.4), 0 0 24px rgba(63,211,255,.1), 0 16px 40px rgba(0,0,0,.55);
  color: var(--text);
}
body[data-style="digital"] .home-card { border-top: 2px solid #e9c46a; }
body[data-style="digital"] .pcard { border-left: 3px solid var(--pc); }
body[data-style="digital"] .pcard.active { box-shadow: 0 0 0 1px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.08); }
body[data-style="digital"] .home-card h1 { font-family: "Splendor Orbitron", monospace; font-weight: 800; font-size: 30px; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff, #b9e8ff 50%, #3fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(63,211,255,.45)); }
body[data-style="digital"] .home-card h2, body[data-style="digital"] .modal-box h3, body[data-style="digital"] .panel-head h4,
body[data-style="digital"] .brand, body[data-style="digital"] .turn-banner {
  font-family: "Splendor Orbitron", monospace; font-weight: 800; letter-spacing: 1px; }
body[data-style="digital"] .turn-banner { font-size: 13px; text-transform: uppercase; }
body[data-style="digital"] .brand { color: #e9c46a; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; }
body[data-style="digital"] .code { color: #3fd3ff; text-shadow: 0 0 8px rgba(63,211,255,.6); }
body[data-style="digital"] button { background: rgba(20,40,72,.85); border: 1px solid rgba(140,210,255,.4); border-radius: 4px; color: #d9efff; }
body[data-style="digital"] button:hover:not(:disabled) { background: rgba(32,62,104,.95); border-color: #3fd3ff; box-shadow: 0 0 10px rgba(63,211,255,.3); }
body[data-style="digital"] button.primary {
  background: linear-gradient(180deg, #6fe2ff, #18a0e0); border-color: #bff0ff; color: #021320;
  box-shadow: 0 0 16px rgba(63,211,255,.5), inset 0 1px 0 rgba(255,255,255,.6); font-family: "Splendor Orbitron", monospace; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 13px;
}
body[data-style="digital"] button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #8ae9ff, #2ab0ee); }
body[data-style="digital"] button.ghost { background: rgba(10,22,44,.6); }
body[data-style="digital"] button.link { background: none; border: 0; color: var(--dim); box-shadow: none; }
body[data-style="digital"] input { background: rgba(3,8,20,.8); border-color: rgba(140,210,255,.35); color: var(--text); border-radius: 4px; }
body[data-style="digital"] input:focus { border-color: #3fd3ff; box-shadow: 0 0 10px rgba(63,211,255,.35); }
body[data-style="digital"] .lobby-players li { background: rgba(20,40,72,.7); border-color: rgba(140,210,255,.25); border-radius: 4px; }
body[data-style="digital"] .invite, body[data-style="digital"] .invite-box, body[data-style="digital"] .link-box { background: rgba(3,8,20,.75); border-color: rgba(140,210,255,.3); }
body[data-style="digital"] .invite { color: var(--text); }
body[data-style="digital"] .topbar { background: linear-gradient(180deg, rgba(8,18,38,.96), rgba(5,12,28,.96)); border-bottom: 1px solid #3fd3ff;
  box-shadow: 0 0 18px rgba(63,211,255,.25), 0 6px 20px rgba(0,0,0,.5); }
body[data-style="digital"] .conn { background: rgba(3,8,20,.8); border-color: rgba(140,210,255,.3); }
body[data-style="digital"] .menu-item { background: none; border: 0; }
body[data-style="digital"] .menu-item:hover:not(:disabled) { background: rgba(63,211,255,.1); box-shadow: none; }
body[data-style="digital"] select { background: rgba(3,8,20,.85); color: var(--text); border-color: rgba(140,210,255,.35); }
/* the table: a holographic grid */
body[data-style="digital"] .felt {
  --dim: #8fc8e8;
  background:
    linear-gradient(rgba(63,211,255,.07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(63,211,255,.07) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at 50% 40%, #0f2b52, #071630 60%, #040b1c);
  border: 1px solid rgba(63,211,255,.7); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 30px rgba(63,211,255,.25), inset 0 0 0 4px rgba(4,11,28,.9), inset 0 0 0 5px rgba(233,196,106,.45), inset 0 0 80px rgba(0,0,0,.6);
}
body[data-style="digital"] .bank-title { color: #3fd3ff; font-family: "Splendor Orbitron", monospace; letter-spacing: 3px; }
body[data-style="digital"] .card.slot-empty { border-color: rgba(63,211,255,.3); border-radius: 4px; }
body[data-style="digital"] .you-bar { background: linear-gradient(180deg, rgba(8,18,38,.96), rgba(4,10,24,.98)); border-top: 1px solid #3fd3ff; box-shadow: 0 0 18px rgba(63,211,255,.2), 0 -8px 30px rgba(0,0,0,.5); }
body[data-style="digital"] .you-id { background: rgba(20,40,72,.7); }
body[data-style="digital"] .you-score, body[data-style="digital"] .ppts { color: #e9c46a; font-family: "Splendor Orbitron", monospace; font-weight: 800; text-shadow: 0 0 8px rgba(233,196,106,.5); }
body[data-style="digital"] .plabel { letter-spacing: 2px; }
body[data-style="digital"] .stack { background: rgba(3,8,20,.75); border-color: rgba(140,210,255,.25); }
body[data-style="digital"] .race { background: rgba(63,211,255,.12); }
body[data-style="digital"] .race i { background: linear-gradient(90deg, #3fd3ff, #e9c46a); box-shadow: 0 0 8px rgba(63,211,255,.6); }
body[data-style="digital"] .token { box-shadow: 0 0 0 2px #dbe9f5, 0 0 0 3px rgba(0,0,0,.6), 0 0 14px color-mix(in srgb, var(--n) 60%, transparent), inset 0 -3px 6px rgba(0,0,0,.35); }
body[data-style="digital"] .token .cnt { background: #04101f; color: #e6f3ff; border-color: #3fd3ff; font-family: "Splendor Orbitron", monospace; font-size: 11px; }
body[data-style="digital"] .card.back { --b1: #1a6f7a; --b2: #072a33; border-radius: 4px; border: 1px solid #cfe3f5;
  background:
    linear-gradient(90deg, transparent 47%, rgba(140,240,255,.35) 47% 53%, transparent 53%) 50% 0 / 100% 18% no-repeat,
    linear-gradient(transparent 47%, rgba(140,240,255,.25) 47% 53%, transparent 53%) 0 50% / 22% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 44%, rgba(140,240,255,.25) 0 18px, transparent 19px),
    linear-gradient(160deg, var(--b1), var(--b2));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.4), inset 0 0 0 4px rgba(233,196,106,.6), 0 0 12px rgba(63,211,255,.25), 0 3px 8px rgba(0,0,0,.5); }
body[data-style="digital"] .card.back.lvl-2 { --b1: #7a5a1a; --b2: #2a1c05; }
body[data-style="digital"] .card.back.lvl-3 { --b1: #1f4fa0; --b2: #081a3f; }
body[data-style="digital"] .card.back .back-mark { font-family: "Splendor Orbitron", monospace; font-weight: 800; color: #e6f7ff; text-shadow: 0 0 10px #3fd3ff, 0 0 2px #3fd3ff; }
body[data-style="digital"] .card.back .cnt { background: rgba(0,0,0,.55); color: #bfefff; font-family: "Splendor Orbitron", monospace; font-size: 9.5px; }
body[data-style="digital"] .modal { background: rgba(2,6,16,.75); backdrop-filter: blur(3px); }
body[data-style="digital"] .panel-head { background: rgba(63,211,255,.08); border-bottom-color: rgba(140,210,255,.3); }
body[data-style="digital"] .log-line { color: #cfe4f7; border-bottom-color: rgba(140,210,255,.15); }
body[data-style="digital"] .rules-body { color: #cfe4f7; }
body[data-style="digital"] .rules-body h5 { color: #3fd3ff; font-family: "Splendor Orbitron", monospace; letter-spacing: 1px; }
body[data-style="digital"] .menu-row { border-bottom-color: rgba(140,210,255,.25); }
body[data-style="digital"] .toast.info { background: #071a33; border-color: #3fd3ff; color: #dff4ff; box-shadow: 0 0 18px rgba(63,211,255,.3); }
body[data-style="digital"] .announce { background: rgba(5,12,28,.92); color: #e6f7ff; border-color: #3fd3ff; font-family: "Splendor Orbitron", monospace; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 22px;
  box-shadow: 0 0 30px rgba(63,211,255,.4); text-shadow: 0 0 10px rgba(63,211,255,.7); }
body[data-style="digital"] .alert-bar { background: linear-gradient(180deg, #e9c46a, #c9971f); }
body[data-style="digital"] .theme-tile { background: rgba(3,8,20,.75); border-radius: 6px; }
body[data-style="digital"] .winner-list li { border-bottom-color: rgba(140,210,255,.18); }
body[data-style="digital"] .avatar.pr-online::after, body[data-style="digital"] .avatar.pr-away::after, body[data-style="digital"] .avatar.pr-offline::after { border-color: #071630; }
/* cards: silver frames with cyan light, to match the chrome machines */
body[data-style="digital"] .card.face { border: 1px solid #d6e6f5; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(63,211,255,.35), 0 3px 8px rgba(0,0,0,.5); }
body[data-style="digital"] .noble { border: 1px solid #d6e6f5; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(233,196,106,.35), 0 4px 10px rgba(0,0,0,.5); }

/* every themed table keeps the "can afford" and "noble wants you" glow */
body:not([data-style="classic"]) .card.face.affordable { box-shadow: 0 0 0 2px var(--ok), 0 0 14px color-mix(in srgb, var(--ok) 60%, transparent), 0 3px 8px rgba(0,0,0,.45); }
body:not([data-style="classic"]) .noble.eligible { box-shadow: 0 0 0 2px var(--ok), 0 0 16px color-mix(in srgb, var(--ok) 60%, transparent); }

/* ---- theme polish ---- */
body[data-style="historic"] { font-variant-numeric: lining-nums; }
body[data-style="historic"] .bank-title { color: #6e5636; }
body[data-style="anime"] .bank-title { color: #4f6fae; }
body[data-style="anime"] .menu, body[data-style="anime"] .log-panel { background: rgba(255,255,255,.97); }
.menu-row { white-space: nowrap; }
.menu { min-width: 250px; }

/* Each theme tile wears its own theme, so the picker previews the whole look. */
body[data-style] .theme-tile.t-classic  { background: #1c2230; border-color: #3a4256; color: #e8eaf0; }
body[data-style] .theme-tile.t-historic { background: #f3e6c8; border-color: #a8875a; color: #2a1a0c; font-family: "Splendor Fell", Georgia, serif; }
body[data-style] .theme-tile.t-anime    { background: linear-gradient(#ffffff, #eaf3ff); border-color: #9cc3f5; color: #27427a; border-radius: 14px; }
body[data-style] .theme-tile.t-digital  { background: #050b18; border-color: #2d6f9a; color: #8fe9ff; border-radius: 4px; }
body[data-style] .theme-tile.t-historic .tt-name { font-weight: 400; font-size: 13px; }
body[data-style] .theme-tile.t-anime .tt-name { font-family: "Splendor Anime", sans-serif; font-weight: 900; }
body[data-style] .theme-tile.t-digital .tt-name { font-family: "Splendor Orbitron", monospace; font-weight: 800; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; }
body[data-style] .theme-tile.t-historic .tt-pic { border-radius: 3px; box-shadow: 0 0 0 1px #8f6f3f; }
body[data-style] .theme-tile.t-anime .tt-pic { border-radius: 10px; }
body[data-style] .theme-tile.t-digital .tt-pic { border-radius: 2px; box-shadow: 0 0 0 1px #3fd3ff, 0 0 8px rgba(63,211,255,.4); }
body[data-style] .theme-tile.t-classic .tt-pic { box-shadow: 0 0 0 1px rgba(224,181,58,.5); }
body[data-style] .tt-pic { background-position: center 18%; }
body[data-style] .theme-tile[aria-checked="true"] { border-color: var(--accent2); }

/* The card you're looking at in the buy dialog shows its picture large. */
@media (min-width: 621px) {
  .card.big { width: 168px; height: 236px; border-radius: 11px; }
  .card.big .chead { height: 50px; }
  .card.big .pts { font-size: 40px; }
  .card.big .gi.bonus { font-size: 38px; }
  .card.big .pip, .card.big .costs.dense .pip { width: 30px; height: 30px; font-size: 16px; }
  .card.big .costs { gap: 5px; }
}

/* Big monitors: let the pictures fill the table. */
@media (min-width: 1500px) and (min-height: 1000px) {
  .card { width: 114px; height: 160px; border-radius: 10px; }
  .card .chead { height: 41px; }
  .card .pts { font-size: 31px; }
  .card .gi.bonus { font-size: 30px; }
  .pip { width: 26px; height: 26px; font-size: 15px; }
  .card .costs { gap: 4px; }
  .card .costs.dense .pip { width: 22px; height: 22px; font-size: 13px; }
  .card.back .back-mark { font-size: 36px; }
  .noble { --ns: 108px; width: 108px; height: 108px; }
  .noble .bust { width: 74px; height: 86px; }
  .noble .np { font-size: 26px; }
  .nchip { width: 20px; height: 25px; font-size: 14px; }
  .token { --s: 62px; }
  .rows { gap: 14px; }
  .row { gap: 12px; }
  .felt-inner > .bank-wrap { width: 176px; }
  .felt-inner { column-gap: 26px; row-gap: 16px; }
}


/* ---- nobles with pictures: like the real tiles, a strip down the left edge holds the
   points and the cards wanted, so nothing sits on top of the portrait. */
body[data-style] .noble.has-art { --sw: calc(var(--ns) * .27); padding: 0; background: #11141c; }
.noble.has-art .nart { position: absolute; top: 0; bottom: 0; right: 0; left: var(--sw);
  background: var(--art) center 22% / cover no-repeat; box-shadow: -1px 0 0 rgba(0,0,0,.55); }
body[data-style] .noble.has-art .np {
  position: absolute; top: calc(var(--ns) * .045); left: 0; right: auto; width: var(--sw); height: auto;
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  display: block; text-align: center; font-size: calc(var(--ns) * .22); line-height: 1; }
body[data-style] .noble.has-art .nreq {
  position: absolute; left: 0; top: calc(var(--ns) * .3); width: var(--sw);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--ns) * .03); }
body[data-style] .noble.has-art .nchip { box-sizing: border-box;
  width: calc(var(--ns) * .18); height: calc(var(--ns) * .18); font-size: max(8.5px, calc(var(--ns) * .13)); }

body[data-style="historic"] .noble.has-art { background: linear-gradient(180deg, #f6ebcf, #e4cf9f); }
body[data-style="historic"] .noble.has-art .nart { box-shadow: -1px 0 0 #2a1a0c, -3px 0 0 #f6ebcf, -4px 0 0 #2a1a0c; }
body[data-style="historic"] .noble.has-art .nchip:not(.white) { text-shadow: 0 0 2px #2a1a0c, 0 0 1px #2a1a0c; }

body[data-style="anime"] .noble.has-art { background: linear-gradient(180deg, #ffffff, #e9f2ff); }
body[data-style="anime"] .noble.has-art .nart { box-shadow: -2px 0 0 #fff, -3px 0 0 #b9cdf0; }
body[data-style="anime"] .noble.has-art .np { color: #ffc533; }

body[data-style="digital"] .noble.has-art { background: linear-gradient(180deg, #0a1430, #04081a); }
body[data-style="digital"] .noble.has-art .nart { box-shadow: -1px 0 0 #38e1ff, -2px 0 8px rgba(56,225,255,.45); }

/* Nobles a player has won are just a reminder: whole portrait, points tucked in a corner. */
.seat-nobles .noble.has-art .nart { left: 0; box-shadow: none; }
body[data-style] .seat-nobles .noble.has-art .np {
  top: auto; bottom: 2px; left: 2px; width: auto; min-width: 13px; padding: 1px 3px; font-size: 10px;
  border-radius: 4px; background: rgba(10,12,20,.82); color: #fff; -webkit-text-stroke: 0; text-shadow: none; }
body[data-style="historic"] .seat-nobles .noble.has-art .np { background: rgba(246,235,207,.95); color: #8a2412; }
body[data-style="anime"] .seat-nobles .noble.has-art .np { background: rgba(255,255,255,.95); color: #e09a00; -webkit-text-stroke: 0; }
body[data-style] .seat-nobles .noble.has-art .nreq { display: none; }

/* Pieces that were just rebuilt take their hover lift instantly instead of animating
   it again (see setHTML in app.js). */
.settling, .settling * { transition: none !important; }