:root {
  --ink: #102a2a;
  --night: #091d1d;
  --emerald: #0a6b55;
  --emerald-light: #128768;
  --mint: #e7f3ed;
  --gold: #d7a84b;
  --gold-soft: #fff1c7;
  --paper: #f8f2e7;
  --surface: #fffdf8;
  --line: rgba(16, 42, 42, .13);
  --shadow: 0 18px 45px rgba(9, 29, 29, .13);
  --white: #f1efe8;
  --blue: #2878b5;
  --green: #24936e;
  --red: #c94949;
  --black: #263238;
  --wild: #d7a84b;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.white { --gem-color: var(--white); --cost-color: var(--white); --bonus-color: var(--white); }
.blue { --gem-color: var(--blue); --cost-color: var(--blue); --bonus-color: var(--blue); }
.green { --gem-color: var(--green); --cost-color: var(--green); --bonus-color: var(--green); }
.red { --gem-color: var(--red); --cost-color: var(--red); --bonus-color: var(--red); }
.black { --gem-color: var(--black); --cost-color: var(--black); --bonus-color: var(--black); }
.gold { --gem-color: var(--wild); --cost-color: var(--wild); --bonus-color: var(--wild); }

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(215, 168, 75, .18), transparent 28rem),
    var(--paper);
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

.hidden { display: none !important; }

.topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px clamp(14px, 3vw, 36px);
  color: white;
  background: rgba(9, 29, 29, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  color: white;
  text-decoration: none;
}

.brand-gem {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--ink);
  font-size: 23px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 24px rgba(215, 168, 75, .35);
}

.brand strong { display: block; font-size: 18px; letter-spacing: .16em; }
.brand small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .67); }

.top-actions { display: flex; align-items: center; gap: 10px; }
.music-controls { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.055); }
.music-toggle { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 4px 8px; color: white; border: 0; border-radius: 9px; background: rgba(215,168,75,.18); }
.music-toggle.muted { color: rgba(255,255,255,.58); background: transparent; }
.music-icon { width: 17px; color: #f0c66f; font-size: 19px; line-height: 1; }
.music-label { font-size: 12px; font-weight: 800; }
.music-volume { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.7); font-size: 11px; }
.music-volume input { width: 82px; height: 4px; accent-color: var(--gold); cursor: pointer; }
.music-volume output { width: 31px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; text-align: right; }
.connection { display: inline-flex; gap: 7px; align-items: center; color: rgba(255,255,255,.74); font-size: 13px; }
.connection i { width: 9px; height: 9px; border-radius: 50%; background: #79d9b5; box-shadow: 0 0 10px #79d9b5; }
.connection.offline i { background: #ff6d6d; box-shadow: 0 0 10px #ff6d6d; }
.connection.offline span { color: #ffb1b1; }

.icon-button {
  width: 40px;
  height: 40px;
  color: white;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
}
.turn-alert-toggle { padding: 0; font-size: 17px; filter: grayscale(.75); }
.turn-alert-toggle.enabled { border-color: rgba(215,168,75,.58); background: rgba(215,168,75,.17); filter: none; }

.app-shell { width: min(1180px, 100%); margin: 0 auto; padding: clamp(16px, 3vw, 34px); }
.loading-screen { display: grid; min-height: 60vh; place-content: center; justify-items: center; color: #53706b; }
.spinner { width: 36px; height: 36px; border: 4px solid rgba(10,107,85,.18); border-top-color: var(--emerald); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero {
  overflow: hidden;
  position: relative;
  padding: clamp(28px, 6vw, 70px);
  color: white;
  text-align: center;
  border-radius: 32px;
  background: linear-gradient(145deg, var(--night), #16483f);
  box-shadow: var(--shadow);
}

.hero::after {
  content: "◆";
  position: absolute;
  right: -25px;
  bottom: -80px;
  color: rgba(215,168,75,.10);
  font-size: 240px;
  line-height: 1;
  transform: rotate(10deg);
}

.hero-kicker { color: #efd08e; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { position: relative; z-index: 1; max-width: 820px; margin: 10px auto; font-size: clamp(34px, 6vw, 68px); line-height: .98; }
.hero p { position: relative; z-index: 1; max-width: 680px; margin: 16px auto 0; color: rgba(255,255,255,.77); font-size: clamp(16px, 2vw, 20px); }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.panel, .status-card, .bank-panel, .player-card, .result-card {
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(9,29,29,.06);
}
.panel { padding: clamp(20px, 4vw, 30px); }
.panel h2, .section-title h2 { margin: 0; font-size: 23px; }
.panel > p { margin: 7px 0 20px; color: #5d706d; }
.field { display: grid; gap: 7px; margin: 12px 0; text-align: left; }
.field label { font-size: 13px; font-weight: 800; }
.field input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  outline: none;
  border-radius: 14px;
  background: white;
}
.field input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(10,107,85,.12); }
.form-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }

.primary, .secondary, .ghost, .danger {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 850;
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.primary:hover:not(:disabled), .secondary:hover:not(:disabled) { transform: translateY(-1px); }
.primary { color: white; border: 1px solid var(--emerald); background: var(--emerald); box-shadow: 0 7px 18px rgba(10,107,85,.2); }
.primary:hover:not(:disabled) { background: var(--emerald-light); }
.secondary { color: var(--emerald); border: 1px solid rgba(10,107,85,.4); background: white; }
.ghost { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.topbar .ghost { color: white; border-color: rgba(255,255,255,.2); }
.small { min-height: 38px; padding: 7px 12px; border-radius: 11px; font-size: 13px; }
.wide { width: 100%; margin-top: 10px; }
.danger { color: #a72f2f; border: 1px solid rgba(201,73,73,.3); background: #fff4f4; }

.network-note, .info-banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(215,168,75,.4);
  border-radius: 16px;
  background: #fff5dc;
}
.network-note { grid-column: 1 / -1; }
.note-icon { color: #9a6d13; font-size: 21px; }

.lobby { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 18px; }
.lobby-card { padding: clamp(22px, 4vw, 38px); }
.room-code { display: inline-block; margin: 10px 0; padding: 8px 14px; color: var(--emerald); font-size: 30px; font-weight: 950; letter-spacing: .16em; border-radius: 14px; background: var(--mint); }
.share-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 18px 0; }
.share-box input { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.player-list { display: grid; gap: 9px; }
.lobby-player { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.avatar { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; color: white; font-weight: 900; border-radius: 50%; background: var(--ink); }
.lobby-player strong { display: block; }
.lobby-player small { color: #6c7d7a; }
.host-pill { margin-left: auto; padding: 4px 8px; color: #7f5a10; font-size: 11px; font-weight: 850; border-radius: 99px; background: var(--gold-soft); }

.status-card { display: flex; gap: 15px; align-items: center; padding: 18px 20px; color: white; border: 0; background: linear-gradient(135deg, var(--ink), #31504c); }
.status-card.mine { background: linear-gradient(135deg, var(--emerald), #0d8a6b); }
.status-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--ink); font-size: 22px; border-radius: 50%; background: var(--gold); }
.status-card h1 { margin: 0; font-size: 23px; }
.status-card p { margin: 4px 0 0; color: rgba(255,255,255,.73); }

.section-title { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 28px 2px 11px; }
.section-title span { color: #657774; font-size: 13px; }
.bank-panel { padding: 18px; }
.gem-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gem-stack { display: grid; gap: 5px; justify-items: center; color: #5d706d; font-size: 11px; }
.gem {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: visible;
  color: white;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.gem img, .mini-gem img { width: 100%; height: 100%; object-fit: contain; }
.gem strong, .mini-gem strong {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  padding: 0 4px;
  color: white;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(8,12,14,.88);
  text-shadow: 0 1px 2px #000;
}
.action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; margin: 17px auto 0; }

.horizontal-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 3px 2px 10px; scroll-snap-type: x proximity; }
.game-card {
  --card-banner-a: #f7f3e8;
  --card-banner-b: #cfd3d1;
  --card-banner-c: #909b99;
  --card-ribbon: rgba(255,255,255,.52);
  --card-ink: #182323;
  --card-line: rgba(56,67,66,.48);
  --card-ring: #a56c43;
  --card-text-shadow: 0 1px 0 white;
  position: relative;
  container-type: inline-size;
  display: flex;
  flex: 0 0 158px;
  aspect-ratio: 5 / 7;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-align: left;
  color: white;
  border: 0;
  border-radius: 19px;
  background: #171317;
  box-shadow: inset 0 0 0 2px rgba(245,225,182,.74), 0 9px 22px rgba(0,0,0,.24);
  scroll-snap-align: start;
}
.game-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 28%, rgba(5,8,9,.05) 42%, rgba(5,8,9,.42) 75%, rgba(5,8,9,.72) 100%);
}
button.game-card { appearance: none; }
.game-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--emerald), 0 11px 25px rgba(0,0,0,.28); }
.game-card.affordable { box-shadow: inset 0 0 0 3px var(--emerald), 0 9px 22px rgba(0,0,0,.24); }
.game-card.hidden-card { align-items: center; justify-content: center; color: white; text-align: center; background: linear-gradient(145deg, var(--ink), var(--emerald)); }
.game-card.hidden-card::after { display: none; }
.card-top {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: block;
  height: 29%;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}
.card-top::before {
  display: none;
}
.card-top > * { position: relative; z-index: 1; }
.card-header-frame { position: absolute; z-index: 0; inset: 0 0 auto; display: block; width: 100%; height: auto; pointer-events: none; }
.points {
  position: absolute;
  top: 5%;
  left: 3%;
  display: grid;
  width: 20%;
  height: 30%;
  place-items: center;
  padding: 0;
  color: var(--card-ink);
  font-family: Georgia, serif;
  font-size: clamp(18px, 15cqw, 31px);
  font-weight: 950;
  line-height: 1;
  border: 0;
  background: transparent;
  clip-path: none;
  filter: none;
  text-shadow: var(--card-text-shadow);
}
.points.zero { color: transparent; }
.game-card.white { --card-banner-a: #fffdf5; --card-banner-b: #dce2e0; --card-banner-c: #98a4a2; --card-ribbon: #f7f6ef; --card-ink: #172322; --card-line: rgba(65,78,76,.58); --card-ring: #a66a3e; }
.game-card.blue { --card-banner-a: #4098dc; --card-banner-b: #1c5aa4; --card-banner-c: #0b285f; --card-ribbon: #287bc0; --card-ink: #fff; --card-line: rgba(222,239,255,.72); --card-ring: #68b8f1; --card-text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.game-card.green { --card-banner-a: #35a87a; --card-banner-b: #16724f; --card-banner-c: #073d2c; --card-ribbon: #269366; --card-ink: #fff; --card-line: rgba(222,255,235,.72); --card-ring: #67c99d; --card-text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.game-card.red { --card-banner-a: #db5b5d; --card-banner-b: #a52d3b; --card-banner-c: #5a1420; --card-ribbon: #c94750; --card-ink: #fff; --card-line: rgba(255,228,224,.74); --card-ring: #ef8a73; --card-text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.game-card.black { --card-banner-a: #4c5961; --card-banner-b: #252d33; --card-banner-c: #0b0e11; --card-ribbon: #3b474f; --card-ink: #fff; --card-line: rgba(230,237,240,.64); --card-ring: #89959b; --card-text-shadow: 0 1px 2px #000; }
.card-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-bottom { position: absolute; z-index: 2; top: 35%; bottom: 9px; left: 9px; display: flex; align-items: flex-end; padding: 0; }
.card-level { display: none; }
.costs { display: flex; flex-wrap: wrap; gap: 4px; }
.cost { position: relative; display: grid; width: 31px; height: 31px; place-items: center; overflow: hidden; color: white; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: #151316; box-shadow: 0 2px 5px rgba(0,0,0,.38); }
.cost img { width: 100%; height: 100%; object-fit: contain; }
.cost strong { position: absolute; right: 1px; bottom: 0; display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 3px; color: white; font-size: 10px; font-weight: 950; border-radius: 50%; background: rgba(5,8,9,.9); text-shadow: 0 1px 2px #000; }
.game-card .costs { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.game-card .cost { width: 31px; height: 31px; flex: 0 0 31px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.game-card .cost .cost-frame { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.56)); }
.game-card .cost strong { z-index: 2; top: 50%; right: auto; bottom: auto; left: 40.5%; min-width: 0; height: auto; padding: 0; font-family: Georgia, serif; font-size: 12px; border-radius: 0; background: transparent; text-shadow: 0 1px 2px #000, 0 0 4px #000; transform: translate(-50%, -50%); }
.game-card .cost.white strong { color: #16201f; text-shadow: 0 1px 2px #fff, 0 0 4px #fff; }

.noble-card { position: relative; display: flex; flex: 0 0 158px; min-height: 215px; isolation: isolate; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 12px; color: #fff8e6; border: 1px solid rgba(215,168,75,.65); border-radius: 18px; background: #171317; }
.noble-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 30%, rgba(8,9,10,.12) 48%, rgba(8,9,10,.9) 100%); }
button.noble-card { color: #fff8e6; text-align: left; }
.noble-card.selectable { border: 3px solid var(--gold); box-shadow: 0 0 0 3px rgba(215,168,75,.18); }
.noble-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: inherit; background-position: center 24%; background-size: cover; }
.noble-card.portrait-1 .noble-art { background-image: url("assets/cards/noble-1.webp"); }
.noble-card.portrait-2 .noble-art { background-image: url("assets/cards/noble-2.webp"); }
.noble-card.portrait-3 .noble-art { background-image: url("assets/cards/noble-3.webp"); }
.noble-card.portrait-4 .noble-art { background-image: url("assets/cards/noble-4.webp"); }
.noble-title { position: relative; z-index: 2; margin: 8px 6px 7px; color: #fff4d2; font-size: 20px; font-weight: 950; text-shadow: 0 2px 4px #000; }
.noble-card .costs { position: relative; z-index: 2; margin: 0 6px 5px; }

.players-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.player-card { padding: 15px; }
.player-card.current { border: 2px solid var(--emerald); background: var(--mint); }
.player-head { display: flex; gap: 10px; align-items: center; }
.player-portrait { width: 70px; height: 82px; overflow: hidden; border: 2px solid rgba(215,168,75,.64); border-radius: 12px; background: #171317; }
.player-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.player-head .meta { flex: 1; min-width: 0; }
.player-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-head small { color: #637572; }
.turn-dot { color: var(--emerald); font-size: 22px; }
.inventory { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.inventory-pill { display: inline-flex; gap: 3px; align-items: center; padding: 2px 5px 2px 2px; color: white; font-size: 10px; font-weight: 900; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(5,8,9,.62); }
.inventory-pill img { width: 23px; height: 23px; object-fit: contain; border-radius: 0; }
.last-action { margin: 22px auto 0; color: #61736f; text-align: center; }

.winner-hero { padding: 35px; text-align: center; }
.trophy { font-size: 68px; }
.winner-hero h1 { margin: 4px 0; font-size: 38px; }
.winner-name { color: var(--emerald); font-size: 24px; font-weight: 950; }
.results { display: grid; gap: 9px; }
.result-card { display: flex; gap: 12px; align-items: center; padding: 15px; }
.result-card.winner { border: 2px solid var(--gold); background: var(--gold-soft); }
.rank { display: grid; width: 38px; height: 38px; place-items: center; color: white; font-weight: 900; border-radius: 50%; background: var(--ink); }
.result-card.winner .rank { color: var(--ink); background: var(--gold); }
.result-name { flex: 1; font-weight: 900; }
.result-score { text-align: right; }

.modal {
  width: min(620px, calc(100% - 28px));
  max-height: min(88vh, 820px);
  padding: 28px;
  color: var(--ink);
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.modal::backdrop { background: rgba(4,16,16,.72); backdrop-filter: blur(5px); }
.modal-close { position: absolute; top: 9px; right: 12px; width: 38px; height: 38px; color: #5c6d6a; font-size: 28px; border: 0; background: transparent; }
.modal h2 { margin: 0 35px 8px 0; font-size: 25px; }
.modal-subtitle { margin: 0 0 18px; color: #61736f; }
.modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.gem-choice { display: grid; gap: 5px; justify-items: center; padding: 10px; border: 2px solid transparent; border-radius: 16px; background: transparent; }
.gem-choice.selected { border-color: var(--gold); background: var(--gold-soft); }
.selection-wallet { padding: 11px; border: 1px solid rgba(16,42,42,.13); border-radius: 16px; background: linear-gradient(135deg, #f7f0df, #fffdf8); }
.selection-wallet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.selection-wallet-head > strong { font-size: 13px; }
.selection-wallet-head > span { color: #6b5a35; font-size: 12px; }
.selection-wallet-head b { color: var(--ink); font-size: 17px; }
.selection-wallet-gems { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.wallet-gem { display: flex; min-width: 0; align-items: center; gap: 4px; padding: 4px; border: 1px solid color-mix(in srgb, var(--gem-color) 45%, #bba878); border-radius: 10px; background: rgba(255,255,255,.72); }
.wallet-gem > img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.wallet-gem > span { display: grid; min-width: 0; }
.wallet-gem strong { color: var(--ink); font-size: 14px; line-height: 1; white-space: nowrap; }
.wallet-gem strong b { font: inherit; }
.wallet-gem strong em { color: #0a7c5f; font-size: 11px; font-style: normal; }
.wallet-gem small { overflow: hidden; margin-top: 2px; color: #7a6b50; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.return-list { display: grid; gap: 8px; margin-top: 14px; }
.return-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 13px; }
.mini-gem { position: relative; display: grid; width: 34px; height: 34px; place-items: center; overflow: visible; color: white; border: 0; border-radius: 0; background: transparent; }
.mini-gem strong { min-width: 16px; height: 16px; font-size: 9px; }
.stepper { display: flex; align-items: center; gap: 7px; }
.stepper button { width: 32px; height: 32px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: white; }
.stepper strong { min-width: 16px; text-align: center; }
.modal-card { display: flex; justify-content: center; margin: 14px 0; }
.modal-card .game-card { flex-basis: 210px; }
.rules-list { display: grid; gap: 12px; max-height: 65vh; overflow-y: auto; padding-right: 5px; }
.rule { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.rule-number { display: grid; width: 34px; height: 34px; place-items: center; color: white; font-weight: 900; border-radius: 50%; background: var(--emerald); }
.rule h3 { margin: 1px 0 4px; font-size: 16px; }
.rule p { margin: 0; color: #5f716e; line-height: 1.45; }

.social-launch {
  position: fixed;
  z-index: 48;
  right: 22px;
  bottom: 22px;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: #fff7df;
  border: 1px solid #d7a84b;
  border-radius: 16px;
  background: linear-gradient(135deg, #24171d, #47303a);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
.social-launch.open { color: #182320; background: #e1b95e; }
.social-unread { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; color: white; font-size: 11px; border-radius: 11px; background: #cf3d46; }
.game-mode .social-launch { bottom: 178px; }
.social-panel {
  position: fixed;
  z-index: 47;
  top: 86px;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(390px, calc(100vw - 28px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  color: #fff8e8;
  border: 1px solid rgba(215,168,75,.54);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(25,17,21,.99), rgba(49,31,40,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  transition: transform .22s ease, opacity .22s ease;
}
.social-panel.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.social-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 11px; border-bottom: 1px solid rgba(255,255,255,.09); }
.social-head strong, .social-head small { display: block; }
.social-head strong { color: #ffe7ad; font-family: Georgia, serif; font-size: 17px; }
.social-head small { margin-top: 2px; color: rgba(255,248,232,.57); font-size: 10px; }
.social-close { width: 34px; height: 34px; color: rgba(255,255,255,.72); font-size: 25px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(255,255,255,.05); }
.social-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.09); }
.social-tabs button { min-height: 38px; color: rgba(255,248,232,.62); font-weight: 850; border: 0; border-radius: 10px; background: transparent; }
.social-tabs button.active { color: #fff2c8; background: rgba(215,168,75,.2); }
.social-pane { display: grid; min-height: 0; grid-template-rows: minmax(0,1fr) auto; }
.social-pane[hidden] { display: none; }
.social-feed { display: flex; min-height: 0; flex-direction: column; gap: 9px; overflow-y: auto; padding: 13px; overscroll-behavior: contain; }
.social-empty { display: grid; margin: auto; justify-items: center; color: rgba(255,248,232,.48); text-align: center; }
.social-empty > span { margin-bottom: 6px; font-size: 28px; }
.social-empty strong { color: rgba(255,248,232,.7); }
.social-empty small { margin-top: 3px; }
.chat-message { width: fit-content; max-width: 86%; padding: 9px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px 13px 13px 4px; background: rgba(255,255,255,.07); }
.chat-message.mine { align-self: flex-end; border-color: rgba(87,216,170,.3); border-radius: 13px 13px 4px 13px; background: rgba(10,116,87,.34); }
.chat-message header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chat-message header strong { overflow: hidden; color: #f0cc7b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message time, .game-log-entry time { color: rgba(255,248,232,.42); font-size: 9px; }
.chat-message p { margin: 4px 0 0; color: #fffaf0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 7px; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.chat-form input { min-width: 0; min-height: 44px; padding: 9px 12px; color: white; border: 1px solid rgba(255,255,255,.14); outline: none; border-radius: 12px; background: rgba(0,0,0,.25); }
.chat-form input:focus { border-color: #d7a84b; box-shadow: 0 0 0 3px rgba(215,168,75,.1); }
.chat-form .primary { min-height: 44px; padding: 0; border-radius: 12px; }
.game-log-feed { gap: 0; }
.game-log-entry { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.075); }
.log-marker { color: #d7a84b; font-size: 9px; line-height: 18px; }
.game-log-entry p { margin: 0 0 3px; color: rgba(255,248,232,.85); font-size: 12px; line-height: 1.35; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: min(520px, calc(100% - 28px)); padding: 13px 18px; color: white; border-radius: 13px; background: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.busy::after { content: ""; position: fixed; z-index: 90; top: 72px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: progress 1.1s linear infinite; }
@keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (max-width: 760px) {
  .connection span { display: none; }
  .brand small { display: none; }
  .music-label { display: none; }
  .music-volume input { width: 62px; }
  .home-grid, .lobby, .players-grid { grid-template-columns: 1fr; }
  .network-note { grid-column: auto; }
  .lobby > .panel:first-child { order: 1; }
  .lobby > .panel:last-child { order: 0; }
  .hero { border-radius: 24px; }
  .app-shell { padding: 14px; }
  .selection-wallet-gems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social-panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(76vh, 640px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; transform: translateY(calc(100% + 24px)); }
  .social-panel.open { transform: translateY(0); }
  .social-launch, .game-mode .social-launch { right: 12px; bottom: 12px; }
}

@media (max-width: 460px) {
  .topbar { min-height: 62px; padding: 8px 11px; }
  .top-actions { gap: 5px; }
  .brand-gem { width: 36px; height: 36px; }
  .brand strong { font-size: 15px; }
  .music-controls { gap: 3px; padding-right: 5px; }
  .music-toggle { padding: 4px 5px; }
  .music-volume { gap: 2px; }
  .music-volume > span { display: none; }
  .music-volume input { width: 52px; }
  .music-volume output { width: 28px; font-size: 10px; }
  .topbar .ghost { display: none; }
  .form-row { grid-template-columns: 1fr 90px; }
  .action-row { grid-template-columns: 1fr; }
  .section-title { align-items: flex-end; }
  .modal { padding: 24px 18px; }
  .turn-alert-toggle, .icon-button { width: 36px; height: 36px; }
  .social-launch strong { display: none; }
  .social-launch { min-width: 48px; justify-content: center; padding: 8px 10px; }
}

@media (max-width: 360px) {
  .connection { display: none; }
  .music-controls { padding-right: 3px; }
  .music-volume input { width: 42px; }
  .music-volume output { width: 24px; }
}

/* Игровой стол: компоновка в духе классической настольной партии. */
body.game-mode {
  color: #fff8e8;
  background:
    radial-gradient(circle at 52% 42%, rgba(122, 67, 91, .52), transparent 46rem),
    repeating-linear-gradient(118deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    #281923;
}
.game-mode .topbar { background: rgba(20, 13, 18, .96); border-bottom-color: rgba(215,168,75,.28); }
.game-mode .app-shell { width: min(1800px, 100%); padding: 14px clamp(12px, 2vw, 28px) 24px; }

.tabletop-shell {
  display: grid;
  grid-template-columns: minmax(190px, 238px) minmax(680px, 1fr) minmax(390px, 430px);
  grid-template-areas:
    "status status status"
    "notices notices notices"
    "players market side"
    "me me me"
    "footer footer footer";
  gap: 13px;
  align-items: start;
}
.tabletop-shell > .status-card { grid-area: status; min-height: 68px; padding: 11px 16px; border: 1px solid rgba(215,168,75,.34); background: linear-gradient(135deg, rgba(25,18,22,.98), rgba(65,38,50,.98)); }
.tabletop-shell > .status-card.mine { background: linear-gradient(135deg, #075846, #0d8065); }
.tabletop-shell > .status-card.turn-arrival { animation: turn-arrival 1.1s ease-out; }
@keyframes turn-arrival {
  0% { transform: scale(.985); box-shadow: 0 0 0 0 rgba(87,216,170,.75); }
  45% { transform: scale(1); box-shadow: 0 0 0 8px rgba(87,216,170,.16), 0 0 34px rgba(87,216,170,.45); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tabletop-shell .status-icon { width: 42px; height: 42px; }
.table-notices { display: grid; grid-area: notices; gap: 8px; }
.table-notices:empty { display: none; }
.game-mode .info-banner { color: #3d2b12; }

.table-panel {
  border: 1px solid rgba(215,168,75,.25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(30,21,27,.91), rgba(55,34,44,.86));
  box-shadow: 0 14px 35px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
}
.table-panel-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.table-panel-heading h2 { margin: 0; color: #f7dfab; font-size: 17px; letter-spacing: .03em; }
.table-panel-heading span { color: rgba(255,248,232,.63); font-size: 12px; }

.table-players { grid-area: players; min-width: 0; overflow: hidden; padding: 12px; }
.table-players .players-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.table-players .player-card { min-width: 0; overflow: hidden; color: #fff8e8; border-color: rgba(255,255,255,.11); border-radius: 15px; background: rgba(9,12,13,.42); box-shadow: none; }
.table-players .player-card.current { border-color: #52d6a8; background: rgba(14,107,83,.42); box-shadow: 0 0 18px rgba(73,216,167,.12); }
.table-players .player-head small { color: rgba(255,248,232,.63); }

.my-player-hud {
  position: sticky;
  z-index: 24;
  bottom: 8px;
  display: grid;
  grid-area: me;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  min-height: 142px;
  padding: 10px 16px 10px 10px;
  overflow: hidden;
  border: 2px solid rgba(215,168,75,.72);
  border-radius: 25px 25px 15px 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(115deg, rgba(15,19,21,.98), rgba(55,35,43,.98) 52%, rgba(18,22,23,.98));
  box-shadow: 0 -7px 24px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.035);
}
.my-player-hud.current { border-color: #57d8aa; box-shadow: 0 0 24px rgba(65,218,166,.2), inset 0 0 0 2px rgba(87,216,170,.08); }
.my-player-hud::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: linear-gradient(90deg, transparent, #d7a84b 18%, #f2d892 50%, #d7a84b 82%, transparent); }
.hud-portrait-shell { position: relative; min-height: 120px; }
.hud-portrait-shell .player-portrait { display: block; width: 106px; height: 120px; border: 3px solid #c79337; border-radius: 17px 17px 46px 17px; box-shadow: inset 0 0 0 2px rgba(255,245,207,.35), 5px 5px 15px rgba(0,0,0,.42); }
.hud-score { position: absolute; top: -7px; right: -7px; display: grid; width: 51px; height: 51px; place-content: center; color: #fff3b5; text-align: center; border: 3px solid #d59d32; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #795119, #17100a 68%); box-shadow: 0 3px 11px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,227,139,.24); }
.hud-score strong { font-family: Georgia, serif; font-size: 24px; line-height: .8; }
.hud-score small { margin-top: 3px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.hud-body { display: grid; grid-template-columns: minmax(165px, .55fr) minmax(310px, 1fr); grid-template-areas: "heading counters" "resources resources"; gap: 8px 18px; min-width: 0; align-content: center; }
.hud-heading { display: flex; grid-area: heading; gap: 12px; align-items: center; justify-content: space-between; min-width: 0; }
.hud-heading > div { min-width: 0; }
.hud-kicker { display: block; margin-bottom: 2px; color: #d7a84b; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hud-name { display: block; overflow: hidden; color: #fff8e8; font-family: Georgia, serif; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.hud-turn { flex: 0 0 auto; padding: 5px 9px; color: rgba(255,248,232,.58); font-size: 10px; font-weight: 900; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(0,0,0,.18); }
.hud-turn.active { color: #b8ffe5; border-color: rgba(87,216,170,.55); background: rgba(12,114,83,.4); }
.hud-counters { display: grid; grid-area: counters; grid-template-columns: repeat(4, minmax(54px, 1fr)); gap: 6px; }
.hud-counter { display: flex; min-height: 43px; align-items: baseline; justify-content: center; gap: 3px; padding: 5px 7px; color: #fff; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(0,0,0,.22); }
.hud-counter strong { color: #fff2c9; font-family: Georgia, serif; font-size: 22px; }
.hud-counter small { color: rgba(255,248,232,.68); font-size: 10px; }
.hud-counter em { margin-left: 2px; color: rgba(255,248,232,.55); font-size: 9px; font-style: normal; }
.hud-counter.token-limit { border-color: rgba(215,168,75,.36); }
.hud-resources { display: grid; grid-area: resources; grid-template-columns: repeat(6, minmax(72px, 1fr)); gap: 6px; }
.hud-resource { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 5px 8px 5px 5px; color: white; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(0,0,0,.34)); box-shadow: inset 0 0 14px color-mix(in srgb, var(--gem-color) 18%, transparent); }
.hud-resource > img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; border: 0; border-radius: 0; }
.hud-resource > span { display: grid; min-width: 0; }
.hud-resource strong { color: #fff; font-family: Georgia, serif; font-size: 21px; line-height: 1; }
.hud-resource small { overflow: hidden; margin-top: 2px; color: rgba(255,248,232,.65); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.table-market { display: grid; grid-area: market; min-width: 0; gap: 12px; padding: 12px; }
.market-level { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 11px; align-items: stretch; }
.market-cards { display: grid; grid-template-columns: repeat(4, minmax(126px, 210px)); gap: 10px; min-width: 0; justify-content: space-between; }
.market-cards .game-card { width: 100%; min-height: 0; }
.deck-card {
  position: relative;
  display: grid;
  min-height: 0;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 10px;
  color: #fff4d8;
  border: 3px solid #c99835;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 38%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    #214f6e;
  box-shadow: 7px 5px 0 rgba(7,12,14,.42), 9px 7px 0 rgba(201,152,53,.44);
}
.market-level.level-2 .deck-card { background-color: #9a731f; }
.market-level.level-1 .deck-card { background-color: #276c50; }
.deck-card::before { content: "◆"; color: rgba(255,255,255,.18); font-size: 42px; }
.deck-card span { margin-top: 5px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.deck-card strong { color: #fff; font-size: 29px; }
.deck-card small { color: rgba(255,255,255,.72); }
.deck-card:disabled { opacity: .72; }
.reserved-area { padding-top: 2px; border-top: 1px solid rgba(255,255,255,.1); }
.reserved-area .table-panel-heading { margin: 8px 2px; }

.table-side { display: grid; grid-area: side; grid-template-columns: minmax(155px, .82fr) minmax(205px, 1.18fr); gap: 13px; align-items: start; }
.table-bank, .table-nobles { padding: 12px; }
.table-bank .gem-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.table-bank .gem-stack { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: center; justify-items: start; color: rgba(255,248,232,.78); }
.table-bank .gem { width: 48px; height: 48px; border: 0; box-shadow: none; }
.table-bank .action-row { grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
.table-bank .primary, .table-bank .secondary { min-height: 42px; padding: 8px 10px; font-size: 13px; }
.table-bank .secondary { color: #e9d29c; border-color: rgba(215,168,75,.5); background: rgba(255,255,255,.04); }
.nobles-grid { display: grid; gap: 8px; }
.table-nobles .noble-card { width: 100%; min-height: 142px; flex-basis: auto; padding: 9px; border-color: rgba(215,168,75,.72); border-radius: 13px; }
.table-nobles .noble-art { height: 100%; background-position: center 21%; }
.table-nobles .noble-title { margin: 5px 5px 3px; font-size: 16px; }
.table-nobles .cost { width: 27px; height: 27px; }
.table-nobles .noble-card .costs { margin: 0 5px 3px; }
.table-footer { grid-area: footer; min-height: 34px; padding: 8px 16px; color: #efd9a7; text-align: center; border: 1px solid rgba(215,168,75,.22); border-radius: 13px; background: rgba(16,10,14,.52); }

@media (max-width: 1360px) {
  .tabletop-shell {
    grid-template-columns: minmax(170px, 218px) minmax(620px, 1fr);
    grid-template-areas:
      "status status"
      "notices notices"
      "players market"
      "side side"
      "me me"
      "footer footer";
  }
  .table-side { grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); }
  .table-nobles .nobles-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
}

@media (max-width: 900px) {
  .tabletop-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "status" "notices" "side" "market" "players" "me" "footer";
  }
  .table-side { grid-template-columns: minmax(0, 1fr); }
  .table-bank .gem-row { grid-template-columns: minmax(0, 1fr); }
  .table-bank .action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-nobles .nobles-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  .market-level { grid-template-columns: 82px minmax(0, 1fr); }
  .market-cards { display: flex; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
  .market-cards .game-card { flex: 0 0 150px; }
  .deck-card { min-height: 0; }
  .table-players .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-player-hud { position: relative; bottom: auto; }
}

@media (max-width: 620px) {
  .game-mode .app-shell { padding: 9px; }
  .tabletop-shell { gap: 9px; }
  .tabletop-shell > .status-card { padding: 10px 12px; }
  .tabletop-shell .status-card h1 { font-size: 19px; }
  .table-bank .gem-row { grid-template-columns: minmax(0, 1fr); }
  .table-nobles .nobles-grid { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .table-nobles .noble-card { flex: 0 0 150px; }
  .market-level { grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
  .deck-card { min-height: 0; padding: 6px; }
  .deck-card span { font-size: 9px; }
  .market-cards .game-card { flex-basis: 144px; min-height: 0; }
  .market-cards .cost { width: 29px; height: 29px; flex-basis: 29px; }
  .market-cards .cost strong { min-width: 0; height: auto; font-size: 11px; }
  .market-cards .points { width: 20%; height: 30%; }
  .table-players .players-grid { grid-template-columns: 1fr; }
  .my-player-hud { grid-template-columns: 80px minmax(0, 1fr); gap: 9px; padding: 8px; border-radius: 18px; }
  .hud-portrait-shell { min-height: 96px; }
  .hud-portrait-shell .player-portrait { width: 78px; height: 96px; border-radius: 13px 13px 32px 13px; }
  .hud-score { top: -5px; right: -5px; width: 39px; height: 39px; border-width: 2px; }
  .hud-score strong { font-size: 18px; }
  .hud-score small { display: none; }
  .hud-body { display: grid; grid-template-columns: 1fr; grid-template-areas: "heading" "counters" "resources"; gap: 7px; }
  .hud-name { font-size: 18px; }
  .hud-turn { padding: 4px 6px; font-size: 8px; }
  .hud-counters { gap: 3px; }
  .hud-counter { min-height: 34px; padding: 3px; }
  .hud-counter strong { font-size: 17px; }
  .hud-counter em { display: none; }
  .hud-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .hud-resource { gap: 4px; padding: 3px 5px 3px 3px; }
  .hud-resource > img { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
  .hud-resource strong { font-size: 16px; }
  .hud-resource small { font-size: 8px; }
}