/* =============================================================
   МОНОПОЛИЯ НА МОШЕННИЧЕСТВО // НАСТОЛЬНЫЙ СИНДИКАТ
   PREMIUM TABLETOP & DOSSIER STYLING (v2.0)
   ============================================================= */

:root {
  /* FONTS (SIL OPEN FONT LICENSE 1.1) */
  --font-title: 'Golos Text', sans-serif;
  --font-headline: 'Golos Text', sans-serif;
  --font-display: 'Oswald', sans-serif;
  --font-stamp: 'Russo One', sans-serif;
  --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Reference artwork: charcoal, aged ivory, oxblood and brass. */
  --bg-table: #080c0d;
  --bg-board-frame: #101516;
  --bg-board-felt: #0b1112;
  --bg-board-track: #151a19;
  --bg-tile: #111819;
  --bg-tile-hover: #222a28;
  --bg-card: #171d1d;
  --bg-card-dark: #0c1112;

  /* TILE TEXT & BORDERS */
  --text-tile-title: #e8e0ce;
  --text-tile-price: #c9b78f;
  --border-tile: #5b584b;

  /* BORDERS */
  --border-subtle: #303735;
  --border-bold: #57594c;
  --border-gold: #ad8b50;
  --border-brass: #78613d;

  /* INK & ACCENT COLORS */
  --color-gold: #d2b379;
  --color-amber: #b28746;
  --color-clean: #72b488;
  --color-dirty: #d8ad56;
  --color-crimson: #e0685b;
  --color-stamp-red: #c44d40;
  --color-data: #b283c6;
  --color-blue: #6d9fbe;

  /* TEXT */
  --text-primary: #eee6d5;
  --text-secondary: #c0bdaa;
  --text-muted: #a3a79d;
  --text-faint: #7e867f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden { display: none !important; }

/* Brass scrollbars on the same dark surface as the playing table. */
* { scrollbar-width: thin; scrollbar-color: #9c8355 #101716; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #101716; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #9c8355; border: 2px solid #101716; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d2b379; }
::-webkit-scrollbar-thumb:active { background: #ead1a0; }
::-webkit-scrollbar-corner { background: #101716; }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
}

body {
  background: var(--bg-table);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-image: 
    radial-gradient(ellipse at 15% 20%, #28352e66, transparent 55%),
    radial-gradient(ellipse at 90% 80%, #64302722, transparent 50%),
    linear-gradient(135deg, #080c0d, #111716 55%, #080c0d);
}

/* --- HEADER --- */
.app-header {
  background: var(--bg-board-frame);
  border-bottom: 2px solid var(--border-subtle);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-badge {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--border-gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.2);
}

.logo-emblem {
  font-size: 24px;
  color: var(--color-gold);
}

.logo-text h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #f8fafc;
  text-transform: uppercase;
}

.sub-logo {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--color-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
}

.header-right-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-tool-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  color: var(--text-secondary);
  font-family: var(--font-headline);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-tool-pill:hover {
  background: #2a3854;
  color: #fff;
  border-color: var(--border-gold);
}

.conn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 6px;
  background: #111827;
  border: 1px solid var(--border-subtle);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-clean);
  box-shadow: 0 0 6px var(--color-clean);
}

/* --- BUTTONS & STAMP CONTROLS --- */
.btn {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: #60a5fa;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #232d42;
  color: var(--text-primary);
  border-color: var(--border-bold);
}
.btn-secondary:hover {
  background: #2d3b55;
  border-color: #94a3b8;
}

.btn-gold {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-color: #fbbf24;
}
.btn-gold:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
}

.btn-warning {
  background: linear-gradient(135deg, #ca8a04, #a16207);
  color: #fff;
  border-color: #fde047;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  border-color: #f87171;
}

.btn-dark-leather {
  background: #182234;
  color: var(--color-gold);
  border: 1px solid #3b4b6b;
}
.btn-dark-leather:hover {
  background: #202d44;
  border-color: var(--color-gold);
}

.btn-stamp-glow {
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}
.btn-stamp-gold {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.btn-stamp-red {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(60%);
}

.btn-full-width {
  width: 100%;
}

/* --- RUBBER STAMP BADGES (AUTHENTIC ARCHIVAL INK IMPRESSIONS) --- */
.dossier-stamp-seal {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-stamp);
  font-size: 0.78rem;
  color: #ef4444;
  border: 2px solid #ef4444;
  outline: 1.5px dashed rgba(239, 68, 68, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
  padding: 3px 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(4.5deg);
  opacity: 0.92;
  mix-blend-mode: screen;
  filter: url(#stampGrunge);
  pointer-events: none;
  background: rgba(239, 68, 68, 0.06);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.obep-red-stamp {
  font-family: var(--font-stamp);
  font-size: 1.35rem;
  color: #f43f5e;
  border: 3.5px double #f43f5e;
  outline: 1px dashed rgba(244, 63, 94, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
  padding: 8px 20px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  transform: rotate(-3.5deg);
  box-shadow: inset 0 0 12px rgba(244, 63, 94, 0.25), 0 0 16px rgba(244, 63, 94, 0.3);
  margin-bottom: 14px;
  opacity: 0.94;
  filter: url(#stampGrunge);
  background: rgba(244, 63, 94, 0.08);
  user-select: none;
}

.stamp-kompromat {
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  color: #c084fc;
  border: 2px solid #a855f7;
  outline: 1px dashed rgba(168, 85, 247, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
  padding: 3px 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.92;
  filter: url(#stampGrunge);
  background: rgba(168, 85, 247, 0.08);
  display: inline-block;
}

.stamp-offshore {
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  color: #34d399;
  border: 2px solid #10b981;
  outline: 1px dashed rgba(16, 185, 129, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
  padding: 3px 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: rotate(3deg);
  opacity: 0.92;
  filter: url(#stampGrunge);
  background: rgba(16, 185, 129, 0.08);
  display: inline-block;
}

.stamp-evidence {
  font-family: var(--font-stamp);
  font-size: 0.8rem;
  color: #fbbf24;
  border: 2px solid #d97706;
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transform: rotate(2.5deg);
  opacity: 0.9;
  filter: url(#stampGrunge);
  background: rgba(245, 158, 11, 0.08);
  display: inline-block;
}

/* --- LOBBY SCREEN --- */
.screen-view {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.screen-view.hidden {
  display: none !important;
}

.lobby-container {
  max-width: 720px;
  margin: 36px auto;
  padding: 0 20px;
  width: 100%;
}

.tabletop-box {
  background: var(--bg-board-frame);
  border: 2px solid var(--border-bold);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
  position: relative;
}

.hero-card {
  text-align: center;
}

.hero-card h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: var(--color-gold);
}

.hero-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.lobby-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
}

.input-group {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--text-muted);
}

input[type="text"] {
  background: var(--bg-card-dark);
  border: 1.5px solid var(--border-bold);
  border-radius: 6px;
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
}

input[type="text"]:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.lobby-actions-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.join-box {
  display: flex;
  gap: 8px;
}

.join-box input {
  flex: 1;
  text-transform: uppercase;
  font-family: var(--font-headline);
  letter-spacing: 2px;
  font-size: 1.1rem;
}

/* ROOM WAITING BOX */
.room-waiting-box {
  margin-top: 24px;
}

.room-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.room-code-badge {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-gold);
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.lobby-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.lobby-player-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lobby-player-card.is-you {
  border-color: var(--border-gold);
  background: rgba(245, 158, 11, 0.08);
}

.lobby-player-avatar {
  width: 38px;
  height: 38px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-bold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.lobby-player-info {
  display: flex;
  flex-direction: column;
}

.lobby-player-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
}

.lobby-player-role {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.lobby-ctrls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* --- GAME TOP BAR & NEWSPAPER BANNER --- */
.game-top-bar {
  background: var(--bg-board-frame);
  border-bottom: 2px solid var(--border-subtle);
  padding: 8px 16px;
  display: grid;
  grid-template-columns: 180px 1fr 140px 220px;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
}

.round-tracker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.round-box {
  display: flex;
  flex-direction: column;
}

.round-val {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-gold);
}

.act-badge {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.act-1 { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid #3b82f6; }
.act-2 { background: rgba(245, 158, 11, 0.2); color: #fde047; border: 1px solid #eab308; }
.act-3 { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid #ef4444; }
.act-4 { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid #8b5cf6; }

/* NEWSPAPER CLIPPING (AUTHENTIC NEWSPRINT & PRESS CLIPPING) */
.news-newspaper-clipping {
  background-color: #f1f5f9;
  background-image: 
    radial-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  background-size: 6px 6px, 100% 100%;
  color: #0f172a;
  border: 1px solid #94a3b8;
  border-top: 3px double #334155;
  border-bottom: 3px double #334155;
  border-radius: 4px;
  padding: 5px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 10px rgba(148,163,184,0.25);
  position: relative;
}

.newspaper-header-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid #b91c1c;
  padding-bottom: 2px;
}

.news-press-title {
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: #991b1b;
  text-transform: uppercase;
}

.news-content-marquee {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

/* TURN TIMER WIDGET */
.turn-timer-widget {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 8px;
}

.timer-top-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-family: var(--font-headline);
}

.timer-seconds {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-gold);
}

.timer-bar-track {
  width: 100%;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
}

.timer-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--color-clean);
  transition: width 0.1s linear, background 0.3s;
}

.current-turn-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.turn-name {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.5px;
}

/* --- MOBILE TAB BAR (<= 1024px) --- */
.mobile-tab-bar {
  display: none;
  background: var(--bg-board-frame);
  border-top: 1px solid var(--border-subtle);
  padding: 6px 12px;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
}

.mobile-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-headline);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
}

.mobile-tab-btn.active {
  background: var(--bg-card);
  border-color: var(--border-gold);
  color: #fff;
}

.mobile-tab-badge {
  position: absolute;
  top: 2px;
  right: 14px;
  background: var(--color-gold);
  color: #000;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 999px;
}

/* --- GAME MAIN LAYOUT --- */
.game-layout {
  display: grid;
  grid-template-columns: 290px 1fr 350px;
  gap: 14px;
  padding: 12px;
  flex: 1;
  height: calc(100vh - 95px);
  overflow: hidden;
  position: relative;
}

.tabletop-card {
  background: var(--bg-board-frame);
  border: 1.5px solid var(--border-bold);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* LEFT HUD: PLAYERS DOSSIER */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.panel-header-dossier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.dossier-heading {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-gold);
  text-transform: uppercase;
}

.players-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-hud-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.player-hud-card.active-turn {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--bg-card));
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.hud-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.hud-player-ident {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  overflow: hidden;
  padding: 2px;
}

.hud-avatar svg, .hud-avatar .hud-emblem-svg {
  width: 100%;
  height: 100%;
}

.faction-heraldic-emblem {
  display: block;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.hud-name-box {
  display: flex;
  flex-direction: column;
}

.hud-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
}

.hud-faction {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.hud-obep-badge {
  font-family: var(--font-stamp);
  font-size: 0.65rem;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-clean);
  border: 1px solid var(--color-clean);
}

.hud-obep-badge.used {
  background: #1e293b;
  color: var(--text-faint);
  border-color: transparent;
}

.hud-resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.hud-res-item {
  display: flex;
  justify-content: space-between;
  background: var(--bg-card-dark);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.res-lbl { color: var(--text-muted); font-size: 0.7rem; font-family: var(--font-headline); }
.res-clean { color: #38bdf8; font-weight: 700; }
.res-dirty { color: var(--color-dirty); font-weight: 700; }
.res-data { color: var(--color-data); font-weight: 700; }

/* HEAT METER */
.hud-heat-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.heat-meter {
  display: flex;
  gap: 4px;
  flex: 1;
}

.heat-pip {
  height: 8px;
  flex: 1;
  background: #1a2233;
  border: 1px solid #334155;
  border-radius: 2px;
}

.heat-pip.filled.heat-1, .heat-pip.filled.heat-2 { background: var(--color-gold); border-color: #fde047; }
.heat-pip.filled.heat-3, .heat-pip.filled.heat-4 { background: #ea580c; border-color: #fb923c; }
.heat-pip.filled.heat-5 { background: var(--color-crimson); border-color: #f87171; box-shadow: 0 0 6px var(--color-crimson); }

/* --- CENTER: 36 TILE BOARD GRID --- */
.board-wrapper {
  background: var(--bg-board-frame);
  border: 3px solid var(--border-bold);
  border-radius: 12px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  max-width: 820px;
  max-height: 820px;
  aspect-ratio: 1 / 1;
  gap: 5px;
  position: relative;
}

/* TILE STYLING (CLASSIC DELUXE IVORY CARDSTOCK) */
.board-tile {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ea 100%);
  border: 1.5px solid #0f172a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 3px 0;
  font-size: 0.7rem;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.board-tile:hover {
  background: #ffffff;
  border-color: #d97706;
  transform: scale(1.05);
  z-index: 20;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.4);
}

.board-tile.is-corner {
  background: #f4f0e4;
  border: 2px solid #0f172a;
  padding: 4px;
}

.board-tile.is-start {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #15803d;
  padding: 4px;
}

.tile-color-bar {
  height: 20px;
  width: 100%;
  border-bottom: 1.5px solid #0f172a;
  box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.25);
  margin-bottom: 2px;
  flex-shrink: 0;
}

.tile-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.tile-id {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  color: #475569;
}

.tile-level-dots {
  display: flex;
  gap: 2px;
}

.tile-lvl-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #16a34a;
  border: 1px solid #0f172a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.tile-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1.15;
  color: #0f172a;
  text-align: center;
  padding: 2px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile-cost-tag {
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 1px 0;
}

.tile-owner-badge {
  font-size: 0.6rem;
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 2px;
  align-self: center;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.tile-toxic-marker {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.85rem;
}

/* PLAYER PAWNS ON TILE (TACTILE 3D WOOD & BRASS EMBLEMATIC TOKENS) */
.tile-players-tokens {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: flex;
  gap: 3px;
  z-index: 15;
}

.player-pawn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fbbf24;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.45) 0%, transparent 60%), var(--pawn-bg, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), inset 0 2px 3px rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease;
  overflow: hidden;
  cursor: pointer;
}

.player-pawn:hover {
  transform: scale(1.3);
  z-index: 25;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.95), 0 0 10px rgba(251, 191, 36, 0.6);
}

.player-pawn svg, .player-pawn .pawn-svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* PAWN ANIMATION LAYER & DYNAMIC MOVING PAWNS */
.pawn-anim-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 75;
  overflow: hidden;
}

.animated-moving-pawn {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid #fef08a;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5) 0%, transparent 60%), var(--pawn-bg, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.95), 0 0 16px rgba(245, 158, 11, 0.6);
  z-index: 80;
  transition: left 0.1s linear, top 0.1s linear;
  overflow: hidden;
}

.animated-moving-pawn svg, .animated-moving-pawn .moving-pawn-emblem {
  width: 20px;
  height: 20px;
}

.pawn-landing-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--color-gold);
  transform: translate(-50%, -50%);
  animation: rippleExpand 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 74;
}

@keyframes rippleExpand {
  0% { width: 12px; height: 12px; opacity: 1; border-color: var(--color-gold); }
  100% { width: 56px; height: 56px; opacity: 0; border-color: #38bdf8; }
}

/* BOARD CENTER HUB */
.board-center-hub {
  grid-column: 2 / 10;
  grid-row: 2 / 10;
  background: var(--bg-board-felt);
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}

.hub-wood-felt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.hub-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border: 3px solid #ffffff;
  border-radius: 6px;
  padding: 6px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
  margin-top: 4px;
}

.hub-brand:hover {
  transform: rotate(0deg) scale(1.03);
}

.hub-title {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: 3.5px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hub-subtitle {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  color: #fde047;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* TACTILE 3D PHYSICAL DICE */
.dice-box-tabletop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.physical-dice {
  width: 58px;
  height: 58px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #cbd5e1;
  box-shadow: 
    inset 0 -4px 0 #94a3b8,
    0 8px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.physical-dice:hover {
  transform: translateY(-2px);
}

.physical-dice.rolling {
  animation: diceRollAnim 0.45s ease-out;
}

.pip-grid {
  width: 42px;
  height: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

.dice-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

.dice-subtext {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.hub-alert-box {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-bold);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 92%;
  color: #f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* DIAGONAL CENTRAL DECKS (CHANCE & COMMUNITY CHEST TABLETOP SLOTS) */
.diagonal-decks-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  margin: 4px 0;
  gap: 16px;
}

.board-diagonal-deck {
  flex: 1;
  height: 48px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.board-diagonal-deck:hover {
  transform: translateY(-2px) scale(1.04);
}

.deck-news {
  transform: rotate(-7deg);
}

.deck-schemes {
  transform: rotate(7deg);
}

.deck-top-card {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.deck-news .deck-top-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #38bdf8;
  color: #f8fafc;
}

.deck-schemes .deck-top-card {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  border: 2px solid #fbbf24;
  color: #ffffff;
}

.deck-badge {
  font-family: var(--font-stamp);
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.deck-news .deck-badge {
  color: #7dd3fc;
}

.deck-schemes .deck-badge {
  color: #fef08a;
}

.deck-brand {
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hub-stats-ribbon {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  width: 100%;
  justify-content: center;
}

.hub-ribbon-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-ribbon-lbl { color: var(--text-muted); font-size: 0.7rem; font-family: var(--font-headline); }
.hub-ribbon-val { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; }
.text-crimson { color: var(--color-crimson); }
.text-gold { color: var(--color-gold); }
.text-green { color: var(--color-clean); }

/* --- RIGHT PANEL: ACTIONS, CARDS & CHRONICLE --- */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.console-header, .panel-header-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.console-title, .cards-deck-title {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-gold);
  text-transform: uppercase;
}

.actions-left-pill {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  color: #38bdf8;
}

.action-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* COLLECTIBLE SCHEME CARDS (PREMIUM PHYSICAL CARDSTOCK & EMBOSSED DOUBLE FRAME) */
.cards-hand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.cards-hand-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 260px;
  padding-right: 4px;
}

.scheme-card {
  background: radial-gradient(circle at 50% 0%, #25334e 0%, #131a28 100%);
  border: 2px solid #b45309;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 
    inset 0 0 0 1px rgba(251, 191, 36, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 0 -3px 8px rgba(0, 0, 0, 0.8),
    0 6px 18px rgba(0, 0, 0, 0.6);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.scheme-card:hover {
  border-color: #fbbf24;
  transform: translateY(-4px);
  box-shadow: 
    inset 0 0 0 1px rgba(251, 191, 36, 0.4),
    0 12px 28px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(245, 158, 11, 0.4);
}

.card-inner-frame {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  height: 100%;
}

.card-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.card-category-badge {
  font-family: var(--font-stamp);
  font-size: 0.62rem;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.cat-raid { background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fecaca; border: 1px solid #ef4444; }
.cat-steal { background: linear-gradient(135deg, #7c2d12, #9a3412); color: #fed7aa; border: 1px solid #f97316; }
.cat-defense { background: linear-gradient(135deg, #064e3b, #047857); color: #a7f3d0; border: 1px solid #10b981; }
.cat-heat { background: linear-gradient(135deg, #881337, #9f1239); color: #fecdd3; border: 1px solid #f43f5e; }
.cat-toxic { background: linear-gradient(135deg, #78350f, #92400e); color: #fef08a; border: 1px solid #eab308; }
.cat-launder { background: linear-gradient(135deg, #134e4a, #0f766e); color: #99f6e4; border: 1px solid #14b8a6; }
.cat-immunity { background: linear-gradient(135deg, #1e3a8a, #1e40af); color: #bfdbfe; border: 1px solid #3b82f6; }
.cat-data { background: linear-gradient(135deg, #4c1d95, #5b21b6); color: #ddd6fe; border: 1px solid #8b5cf6; }
.cat-dirty { background: linear-gradient(135deg, #713f12, #854d0e); color: #fde68a; border: 1px solid #ca8a04; }
.cat-buff { background: linear-gradient(135deg, #164e63, #155e75); color: #a5f3fc; border: 1px solid #06b6d4; }
.cat-scheme { background: linear-gradient(135deg, #334155, #1e293b); color: #cbd5e1; border: 1px solid #64748b; }

.card-title-row {
  display: flex;
  align-items: center;
}

.card-title {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.card-cost-tags {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.cost-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.cost-clean { background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(3, 105, 161, 0.5)); color: #7dd3fc; border: 1px solid #0284c7; }
.cost-dirty { background: linear-gradient(135deg, rgba(217, 119, 6, 0.3), rgba(180, 83, 9, 0.5)); color: #fde047; border: 1px solid #d97706; }
.cost-data { background: linear-gradient(135deg, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.5)); color: #d8b4fe; border: 1px solid #9333ea; }
.cost-heat { background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.5)); color: #fca5a5; border: 1px solid #dc2626; }

.card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  font-family: var(--font-body);
}

.card-action-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.btn-card-play {
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* CHRONICLE LOG */
.terminal-log-panel {
  display: flex;
  flex-direction: column;
  height: 160px;
}

.terminal-logs {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

.log-entry {
  color: var(--text-secondary);
}

.log-time {
  font-family: var(--font-mono);
  color: var(--text-faint);
  margin-right: 6px;
}

/* --- INTERACTIVE TOOLTIP --- */
.sector-tooltip {
  position: absolute;
  width: 280px;
  background: var(--bg-board-frame);
  border: 2px solid var(--border-gold);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.9);
  z-index: 50;
  pointer-events: none;
}

.sector-tooltip.hidden {
  display: none !important;
}

.tooltip-title {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}

.tooltip-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
}

.tt-subheading {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--color-gold);
  text-transform: uppercase;
}

.tt-rent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}

.tt-rent-tier {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle);
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.tt-rent-tier.active-tier {
  border-color: var(--color-gold);
  background: rgba(245, 158, 11, 0.1);
}

.tt-tier-name { font-weight: 700; font-size: 0.7rem; color: var(--text-muted); }
.tt-tier-val { font-family: var(--font-mono); font-weight: 700; color: #fff; font-size: 0.8rem; }
.tt-tier-cost { font-size: 0.65rem; color: var(--text-faint); }

/* --- MODALS --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-card {
  background: var(--bg-board-frame);
  border: 2px solid var(--border-bold);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.modal-obep-dossier {
  border-color: #f43f5e;
  position: relative;
  overflow: hidden;
}

/* SCREEN SHAKE EFFECT */
.screen-shake {
  animation: screenShakeAnim 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes screenShakeAnim {
  0% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-7px, 4px) rotate(-0.5deg); }
  30% { transform: translate(7px, -4px) rotate(0.5deg); }
  45% { transform: translate(-5px, 3px) rotate(-0.3deg); }
  60% { transform: translate(5px, -2px) rotate(0.3deg); }
  75% { transform: translate(-3px, 1px) rotate(-0.1deg); }
  90% { transform: translate(2px, -1px) rotate(0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* OBEP STAMP SLAM & INK EFFECT */
.obep-stamp-container {
  position: relative;
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-bottom: 8px;
}

.obep-rubber-stamp-slam {
  display: inline-flex;
  padding: 8px 18px;
  border: 4px dashed #ef4444;
  background: rgba(220, 38, 38, 0.14);
  color: #ef4444;
  border-radius: 6px;
  box-shadow: 
    0 0 0 3px rgba(239, 68, 68, 0.3),
    inset 0 0 16px rgba(239, 68, 68, 0.35);
  transform: rotate(-10deg);
  opacity: 1;
  user-select: none;
}

.obep-rubber-stamp-slam.slam-anim {
  animation: rubberStampImpact 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes rubberStampImpact {
  0% {
    transform: scale(3.8) rotate(-35deg);
    opacity: 0;
    filter: blur(4px);
  }
  55% {
    transform: scale(0.92) rotate(-8deg);
    opacity: 1;
    filter: blur(0);
  }
  75% {
    transform: scale(1.06) rotate(-11deg);
  }
  100% {
    transform: scale(1) rotate(-10deg);
    opacity: 1;
  }
}

.stamp-inner-border {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stamp-org {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fca5a5;
}

.stamp-main-word {
  font-family: var(--font-stamp);
  font-size: 1.85rem;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
  color: #ef4444;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

.stamp-sub-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f87171;
}

.ink-shockwave {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(239, 68, 68, 0.85);
  pointer-events: none;
  opacity: 0;
}

.ink-shockwave.active {
  animation: shockwaveExpand 0.6s ease-out forwards;
}

@keyframes shockwaveExpand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    width: 320px;
    height: 320px;
    opacity: 0;
    transform: scale(1.5);
  }
}

/* SAVED SESSION NOTICE IN LOBBY */
.saved-session-notice {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(15, 23, 42, 0.85));
  border: 2px solid var(--border-gold);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
  animation: glowPulse 2s infinite ease-in-out;
}

.saved-session-info {
  text-align: left;
}

.session-badge {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--color-gold);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

.session-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}

.session-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.saved-session-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-leave-header {
  border-color: #f43f5e;
  color: #fca5a5;
}
.btn-leave-header:hover {
  background: #7f1d1d;
  color: #fff;
  border-color: #ef4444;
}

/* 3D CARD INSPECTOR MODAL */
.modal-card-inspector {
  max-width: 440px;
  width: 95%;
  background: var(--bg-board-frame);
  border: 2px solid var(--border-gold);
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1.5px solid var(--border-subtle);
  padding-bottom: 10px;
}

.inspector-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.inspector-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.btn-close-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.btn-close-modal:hover {
  background: #2b3955;
  color: #fff;
  border-color: var(--color-gold);
}

/* 3D STAGE & CARD FLIP WRAPPER */
.card-inspector-stage {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.card-3d-wrapper {
  width: 290px;
  height: 400px;
  cursor: pointer;
  user-select: none;
}

.card-3d-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  border-radius: 14px;
}

.card-3d-wrapper.is-flipped .card-3d-inner {
  transform: rotateY(180deg);
}

.card-3d-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(37, 99, 235, 0.2);
  overflow: hidden;
}

/* FRONT FACE */
.card-3d-front {
  background: linear-gradient(155deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid var(--border-gold);
}

.card-holographic-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(245, 158, 11, 0.12) 50%,
    rgba(59, 130, 246, 0.12) 60%,
    transparent 80%
  );
  pointer-events: none;
  background-size: 200% 200%;
  animation: holoSheen 4s ease infinite;
}

@keyframes holoSheen {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.card-front-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.card-type-pill {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(37, 99, 235, 0.3);
  border: 1px solid #3b82f6;
  color: #93c5fd;
  padding: 3px 8px;
  border-radius: 4px;
}

.card-costs-row {
  display: flex;
  gap: 4px;
  z-index: 2;
}

.card-art-hero {
  height: 125px;
  width: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  margin: 6px 0;
  z-index: 2;
}

.card-art-hero svg {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
  transition: transform 0.3s ease;
}

.card-3d-wrapper:hover .card-art-hero svg {
  transform: scale(1.08);
}

.card-front-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  z-index: 2;
}

.card-front-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.card-front-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.card-flavor-quote {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-gold);
  font-style: italic;
  line-height: 1.3;
  border-left: 2px solid var(--color-gold);
  padding-left: 6px;
  margin-top: 2px;
}

.card-front-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  font-size: 0.65rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  z-index: 2;
}

.card-flip-prompt {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* BACK FACE */
.card-3d-back {
  background: linear-gradient(135deg, #090d16 0%, #131b2e 100%);
  border: 2px solid var(--border-gold);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}

.card-back-pattern {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 80%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);
  pointer-events: none;
}

.card-back-emblem {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.back-syndicate-logo {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-syndicate-logo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6));
}

.back-brand-title {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--color-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.back-brand-sub {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.card-back-security-stamp {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: #f43f5e;
  border: 1.5px dashed #f43f5e;
  padding: 4px 10px;
  border-radius: 4px;
  transform: rotate(-4deg);
  z-index: 2;
}

.inspector-controls-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* SYNDICATE EMBLEM SVG STYLES */
.syndicate-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}

.syndicate-svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hud-avatar .syndicate-svg-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}

.player-pawn .syndicate-svg-icon {
  width: 14px;
  height: 14px;
}

.animated-moving-pawn .syndicate-svg-icon {
  width: 18px;
  height: 18px;
}

.tile-owner-badge .syndicate-svg-icon {
  width: 10px;
  height: 10px;
  margin-right: 3px;
}

.scheme-card {
  cursor: pointer;
}

.card-inspect-btn {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-bold);
  color: var(--text-muted);
  padding: 5px 10px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.card-inspect-btn:hover {
  color: #fff;
  border-color: var(--color-gold);
}

.modal-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
}

.modal-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.obep-timer-bar {
  width: 100%;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}

.obep-timer-fill {
  height: 100%;
  width: 100%;
  background: #f43f5e;
  transition: width 0.1s linear;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.targets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.target-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  padding: 12px;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.target-btn:hover {
  background: #2b3955;
  border-color: var(--border-gold);
}

/* STATS & ARCHIVE MODAL */
.modal-stats-archive {
  max-width: 760px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
}

.stats-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1.5px solid var(--border-subtle);
  padding-bottom: 12px;
}

.stats-main-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gold);
  margin-top: 4px;
}

.btn-close-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-modal:hover {
  color: #fff;
  border-color: var(--color-crimson);
}

.stats-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.stats-tab-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 16px;
  color: var(--text-secondary);
  font-family: var(--font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.stats-tab-btn.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--color-gold);
  color: #fff;
}

.stats-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-tab-content.hidden {
  display: none !important;
}

.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stat-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-kpi-lbl {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stat-kpi-val {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.stats-table-wrapper {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.stats-factions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.stats-factions-table th, .stats-factions-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.stats-factions-table th {
  font-family: var(--font-headline);
  color: var(--text-muted);
  font-size: 0.8rem;
  background: #0f172a;
}

.winrate-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

.winrate-bar-track {
  flex: 1;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}

.winrate-bar-fill {
  height: 100%;
  background: var(--color-gold);
  border-radius: 3px;
}

/* HISTORY CARDS */
.history-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}

.history-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-room-title {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.history-meta-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.history-winner-tag {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-gold);
  font-weight: 700;
}

/* GAME OVER CELEBRATION */
.modal-game-over {
  max-width: 680px;
}

.victory-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
}

.crown-icon {
  font-size: 42px;
}

.victory-title {
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--color-gold);
}

.victory-subtitle {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 1.5px;
}

.winner-announcement {
  font-family: var(--font-body);
  font-size: 1.05rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(180, 83, 9, 0.25));
  border: 2px solid var(--border-gold);
  padding: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(245, 158, 11, 0.2);
}

.winner-crest-box {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
  flex-shrink: 0;
  padding: 3px;
}

.winner-crest-box svg {
  width: 100%;
  height: 100%;
}

.winner-info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.winner-crown-label {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--color-gold);
}

.winner-name-headline {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.winner-vp-score {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #fde047;
}

.table-faction-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.table-faction-cell svg, .table-faction-cell .table-emblem-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.leaderboard-table-wrapper {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}

.leaderboard-table th, .leaderboard-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.leaderboard-table th {
  font-family: var(--font-headline);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.leaderboard-table tr:first-child td {
  color: var(--color-gold);
  font-weight: 800;
}

.scoring-rules-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: left;
}

/* --- CLASSIC TITLE DEED CARD MODAL (#modalTileDetails) --- */
.modal-title-deed-wrap {
  max-width: 440px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.title-deed-physical-card {
  background: #fbf9f4;
  border: 2.5px solid #0f172a;
  border-radius: 8px;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  padding: 10px;
  display: flex;
  flex-direction: column;
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

.title-deed-header {
  background: #2563eb;
  border: 1.5px solid #0f172a;
  border-radius: 4px;
  padding: 12px 10px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}

.title-deed-doc-type {
  font-family: var(--font-stamp);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  color: #fde047;
  text-transform: uppercase;
}

.title-deed-name {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.title-deed-cluster-name {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.92;
}

.title-deed-body {
  border: 1.5px solid #0f172a;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title-deed-owner-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed #cbd5e1;
  font-size: 0.8rem;
}

.deed-owner-lbl {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 700;
}

.deed-owner-val {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.title-deed-rent-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deed-rent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  transition: background 0.15s;
}

.deed-rent-row.active-tier {
  background: #fef08a;
  border: 1px solid #ca8a04;
  font-weight: 700;
}

.deed-rent-tier-lbl {
  color: #1e293b;
}

.deed-rent-tier-val {
  font-family: var(--font-mono);
  font-weight: 800;
  color: #0f172a;
}

.title-deed-monopoly-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.monopoly-badge-star {
  font-family: var(--font-stamp);
  font-size: 0.7rem;
  color: #15803d;
  letter-spacing: 1px;
}

.monopoly-bonus-text {
  font-size: 0.75rem;
  color: #166534;
  line-height: 1.3;
}

.title-deed-financials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
}

.deed-fin-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.deed-fin-lbl {
  font-size: 0.68rem;
  font-family: var(--font-headline);
  color: #64748b;
}

.deed-fin-val {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.title-deed-upgrade-box {
  margin-top: 4px;
}

.title-deed-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

/* --- ANIMATIONS --- */
@keyframes diceRollAnim {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-15deg); }
  50% { transform: scale(0.9) rotate(15deg); }
  75% { transform: scale(1.08) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --- ART DIRECTION FROM THE ORIGINAL POSTER AND BOARD --- */
.app-header {
  background: #0b1010;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
  gap: 24px;
}
.logo-badge { background: #7d241e; border-color: #a36c51; border-radius: 2px; }
.logo-emblem { color: var(--text-primary); }
.logo-text h1 { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); }
.sub-logo { font-size: 0.62rem; color: var(--text-muted); margin-top: 4px; }
.btn-tool-pill { padding: 8px 10px; font-size: 0.72rem; border-radius: 3px; background: transparent; box-shadow: none; }
.btn-tool-pill:hover, .btn-close-modal:hover, .target-btn:hover { background: #29312d; }
.conn-status { background: transparent; border: 0; padding: 0; font-size: 0.62rem; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; box-shadow: none; }

.lobby-container {
  max-width: 1200px;
  margin: auto;
  padding: 64px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: center;
}
.edition-label { font: 500 0.68rem var(--font-mono); letter-spacing: 2px; color: var(--color-gold); }
.lobby-wordmark { margin: 30px 0 26px; display: flex; align-items: flex-start; flex-direction: column; gap: 16px; }
.lobby-wordmark > span {
  background: linear-gradient(160deg, #a13328, #651c18);
  border: 1px solid #bc9a77;
  outline: 1px solid #793c2e;
  outline-offset: 4px;
  padding: 2px 14px 9px;
  font: 700 clamp(2.3rem, 4.5vw, 4rem)/1.1 var(--font-display);
  letter-spacing: 1px;
  color: var(--text-primary);
  text-shadow: 2px 3px 0 #280e0c;
  box-shadow: inset 0 0 24px #1f080a66, 0 12px 30px #0006;
}
.lobby-wordmark small { font: 600 clamp(1.5rem, 2.65vw, 2.4rem)/1.15 var(--font-display); letter-spacing: 1px; }
.lobby-tagline { font-size: 1.18rem; line-height: 1.65; color: var(--text-secondary); }
.lobby-facts { display: flex; gap: 32px; margin: 34px 0; color: var(--text-muted); font-size: 0.78rem; }
.lobby-facts strong { display: block; font: 500 1.8rem var(--font-headline); color: var(--text-primary); margin-bottom: 4px; }
.lobby-spectrum { display: flex; gap: 5px; max-width: 360px; }
.lobby-spectrum i { flex: 1; height: 4px; background: #41815b; }
.lobby-spectrum i:nth-child(2) { background: #497fa4; }
.lobby-spectrum i:nth-child(3) { background: #8951a4; }
.lobby-spectrum i:nth-child(4) { background: #b47f30; }
.lobby-spectrum i:nth-child(5) { background: #369694; }
.lobby-spectrum i:nth-child(6) { background: #a73c42; }
.lobby-premise { margin-top: 22px; font: 400 0.82rem/1.8 var(--font-body); color: var(--text-muted); }
.tabletop-box { border: 1px solid var(--border-bold); border-radius: 4px; padding: 36px; background: linear-gradient(145deg, #1d2421, #101616); box-shadow: 0 24px 60px #0005; }
.hero-card { text-align: left; border-top: 3px solid var(--border-gold); }
.hero-card h2 { font: 600 1.4rem var(--font-headline); color: var(--text-primary); margin: 20px 0 14px; }
.hero-desc { font-size: 0.85rem; line-height: 1.75; margin-bottom: 28px; }
.dossier-stamp-seal { font-size: 0.6rem; top: 14px; right: 20px; color: #bd6656; border-color: #9f5346; outline: none; background: transparent; box-shadow: none; }
.lobby-form { max-width: none; gap: 16px; width: 100%; }
.input-group label { font-size: 0.72rem; }
input[type="text"], input[type="password"] { min-width: 0; width: 100%; border: 1px solid var(--border-bold); border-radius: 3px; background: #0b1111; color: var(--text-primary); padding: 12px; font: 500 0.9rem var(--font-body); }
input::placeholder { color: #858d83; opacity: 1; }
input:focus-visible, button:focus-visible, .board-tile:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.join-box { display: grid; grid-template-columns: minmax(0, 1fr) 62px auto; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 4px; }
.join-box input { font-size: 0.82rem; letter-spacing: 1px; }
.join-box #joinPinInput { text-align: center; padding-inline: 6px; }
.btn { border-radius: 3px; box-shadow: none; font-weight: 500; font-size: 0.88rem; }
.btn-primary, .btn-danger { background: linear-gradient(160deg, #9b352a, #75251f); border-color: #ba6751; color: #f4e7d3; }
.btn-primary:hover, .btn-danger:hover { background: #ab4031; }
.btn-secondary, .btn-dark-leather { background: #202924; border-color: var(--border-bold); color: var(--text-primary); }
.btn-secondary:hover, .btn-dark-leather:hover { background: #303b32; border-color: var(--border-gold); }
.btn-gold, .btn-warning { background: linear-gradient(135deg, #c7a568, #a68246); color: #101511; border-color: #d8bf91; }
.btn-gold:hover, .btn-warning:hover { background: #d3b57f; }
.btn-stamp-glow, .btn-stamp-gold, .btn-stamp-red { box-shadow: none; }
#btnLobbyStats { color: var(--text-muted); background: transparent; border-color: transparent; font-size: 0.75rem; padding-bottom: 0; }
.room-waiting-box { grid-column: 1 / -1; margin-top: 0; }
.saved-session-notice { flex-wrap: wrap; background: #252d22; padding: 12px; animation: none; border-width: 1px; }
.saved-session-actions { flex-wrap: wrap; }

.game-top-bar { grid-template-columns: 130px minmax(0, 1fr) 120px 170px; padding: 10px 20px; border-bottom-width: 1px; }
.news-newspaper-clipping { background: #ded3b9; border-color: #8f8369; box-shadow: none; border-radius: 2px; }
.news-content-marquee { color: #24271f; }
.game-layout { grid-template-columns: 240px minmax(0, 1fr) 290px; gap: 12px; padding: 16px; height: auto; min-height: 740px; overflow: visible; }
.left-panel, .right-panel { min-width: 0; max-height: 900px; }
.tabletop-card, .player-hud-card { border-radius: 4px; border-width: 1px; box-shadow: none; }
.hud-avatar, .lobby-player-avatar { background: #0e1414; border-color: var(--border-brass); border-radius: 3px; }
.player-hud-card.active-turn { background: #242b21; box-shadow: inset 3px 0 var(--color-gold); }
.hud-name { overflow-wrap: anywhere; }
.hud-card-top { flex-wrap: wrap; gap: 8px; }
.hud-player-ident { min-width: 0; }
.hud-avatar { flex-shrink: 0; }
.hud-obep-badge { font-size: 0.55rem; letter-spacing: 0.5px; }
.label-muted { color: var(--text-muted); font: 400 0.68rem var(--font-headline); letter-spacing: 0.7px; }
.limit-hint { color: var(--text-muted); font-size: 0.65rem; white-space: nowrap; }
.actions-left-pill { color: var(--text-secondary); white-space: nowrap; font-size: 0.75rem; }
.action-buttons-grid .btn { padding: 10px 8px; font-size: 0.78rem; letter-spacing: 0.5px; }
.board-wrapper { align-self: start; padding: 8px; border: 1px solid #847b61; border-radius: 3px; background: #0c1111; box-shadow: 0 16px 40px #0007, inset 0 0 0 3px #282a23; min-width: 0; }
.board-grid { height: auto; max-width: none; max-height: none; gap: 3px; }
.board-tile {
  background: linear-gradient(155deg, color-mix(in srgb, var(--sector-color, #7b7762) 16%, #111819), #0c1112);
  border: 1px solid color-mix(in srgb, var(--sector-color, #7b7762) 70%, #17201c);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #ffffff06;
  padding-bottom: 2px;
}
.board-tile:hover { background: #29312b; border-color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 6px 14px #0008; }
.board-tile.is-corner { background: linear-gradient(135deg, #291a18, #101515); border: 1px solid #895547; padding: 2px; }
.board-tile.is-start { background: #15291e; border: 1px solid #658665; padding: 2px; }
.tile-color-bar { height: 7px; border: 0; box-shadow: none; margin-bottom: 1px; }
.tile-name { color: var(--text-tile-title); font-family: var(--font-headline); font-size: clamp(0.49rem, 0.65vw, 0.72rem); font-weight: 500; line-height: 1.15; padding: 0 2px; -webkit-line-clamp: 3; }
.tile-id { color: var(--text-muted); font-size: 0.46rem; }
.tile-cost-tag { color: var(--text-tile-price); font-size: clamp(0.5rem, 0.7vw, 0.75rem); line-height: 1; }
.tile-top-row { padding: 0 3px; min-height: 8px; }
.tile-owner-badge { font-size: 0.45rem; max-width: 100%; white-space: nowrap; overflow: hidden; line-height: 1; }
.tile-players-tokens { bottom: 1px; right: 1px; gap: 1px; flex-wrap: wrap; max-width: 100%; }
.player-pawn { width: 16px; height: 16px; border-width: 1px; border-color: var(--text-primary); }
.special-tile-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.special-tile-svg { width: 100%; height: 100%; max-height: 100%; }
.board-center-hub {
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  background: radial-gradient(ellipse at 50% 45%, #26352c77, transparent 68%), repeating-linear-gradient(135deg, transparent 0 70px, #b29a6810 71px, transparent 72px 140px), #0b1112;
  overflow: hidden;
  container-type: inline-size;
}
.hub-wood-felt { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; position: relative; }
.hub-monopoly-red-box { grid-column: 1 / -1; grid-row: 1; padding: 10px 0 0; }
.hub-monopoly-title { display: inline-block; font: 600 clamp(1.4rem, 7cqi, 3.4rem)/1.1 var(--font-display); letter-spacing: 2px; background: linear-gradient(150deg, #a33327, #641d18); border: 2px solid #c8b89b; padding: 6px 18px 10px; color: #e9e0cb; text-shadow: 2px 3px #34100d; box-shadow: 0 0 0 3px #692c21, 0 10px 20px #0008; }
.hub-monopoly-subtitle { margin-top: 16px; font: 500 clamp(0.6rem, 2.4cqi, 1rem) var(--font-headline); letter-spacing: 1.5px; color: var(--text-primary); }
.hub-deck-slot { grid-row: 2; align-self: center; justify-self: center; width: 62%; max-width: 130px; aspect-ratio: 0.72; pointer-events: none; }
.deck-slot-schemes { grid-column: 1; transform: rotate(-12deg); }
.deck-slot-news { grid-column: 2; transform: rotate(12deg); }
.deck-cards-stack { position: relative; height: 100%; }
.stack-card-layer, .stack-card-top { position: absolute; inset: 0; border: 1px solid #93856d; border-radius: 5px; background: #111717; box-shadow: 0 6px 14px #0007; }
.stack-card-layer.layer-3 { transform: translate(-6px, 6px) rotate(-3deg); }
.stack-card-layer.layer-2 { transform: translate(-3px, 3px); }
.stack-card-top { padding: 5px; }
.deck-card-inner { height: 100%; border: 1px solid #9d896d66; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px; gap: 10px; }
.deck-category-tag { font: 500 clamp(0.45rem, 1.8cqi, 0.68rem) var(--font-headline); color: var(--color-gold); letter-spacing: 1px; }
.deck-brand-name { font: 500 clamp(0.5rem, 2.2cqi, 0.82rem) var(--font-headline); color: var(--text-primary); }
.deck-emboss-pattern { width: 28px; height: 3px; background: #94382c; transform: rotate(-7deg); }
.deck-newsprint-lines { width: 70%; height: 16px; background: repeating-linear-gradient(0deg, #8ca7a0 0 1px, transparent 1px 5px); opacity: 0.6; }
.dice-box-tabletop { grid-column: 1 / -1; grid-row: 3; gap: 6px; }
.physical-dice { width: 48px; height: 48px; background: #e3d7bc; border-color: #b6a789; box-shadow: inset 0 -4px #aa9d83, 0 8px 16px #0008; }
.pip-grid { width: 34px; height: 34px; }
.dice-pip { width: 7px; height: 7px; background: #24281f; }
.dice-subtext { font-size: 0.68rem; }
.hub-alert-box { grid-column: 1 / -1; grid-row: 4; max-width: 100%; font-size: 0.7rem; font-weight: 400; border-color: #65634e; color: var(--text-primary); border-radius: 2px; padding: 8px; box-shadow: none; }
.hub-stats-ribbon { display: none; }
.scheme-card { flex-shrink: 0; background: linear-gradient(145deg, #242b25, #101616); border: 1px solid var(--border-brass); border-radius: 4px; box-shadow: none; padding: 10px; }
.cards-hand-container { max-height: 450px; }
.card-header-line { align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.card-title { color: var(--text-primary); font-size: 0.92rem; font-weight: 500; }
.card-cost-tags { flex-wrap: wrap; }
.card-action-bar { gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cost-tag { box-shadow: none; border-radius: 2px; }
.cost-clean { background: #20383f; color: #b4d0d6; border-color: #527780; }
.cost-dirty { background: #41351e; color: #dbc294; border-color: #8b7446; }
.cost-data { background: #35263c; color: #d1b5dc; border-color: #785987; }
.cost-heat { background: #41221e; color: #e9b3a1; border-color: #925447; }
.res-clean { color: #91bcc4; }
.res-dirty { color: var(--color-dirty); }
.scheme-card:hover { border-color: var(--color-gold); box-shadow: 0 8px 16px #0006; transform: translateY(-2px); }
.card-3d-front, .card-3d-back { background: linear-gradient(145deg, #273028, #0c1313); border-color: var(--border-gold); }
.card-art-hero { background: radial-gradient(ellipse, #374137, #101717); }
.card-holographic-sheen { opacity: 0.25; animation: none; }
.title-deed-physical-card { background: #d8ccb2; color: #22271f; border-color: #6a624e; border-radius: 3px; }
.title-deed-body { background: #e6ddc8; border-color: #7c7460; }
.title-deed-financials { background: #d7ccb2; border-color: #b5a78a; }
.fin-lbl { font: 400 0.68rem var(--font-headline); color: #535b4c; }
.fin-val { font: 700 0.8rem var(--font-mono); }
.title-deed-header { border-color: #514d40; border-radius: 2px; }
.title-deed-doc-type { color: #fff2d6; }
.modal-card { max-height: 90dvh; overflow-y: auto; border-width: 1px; border-radius: 4px; }
.modal-title-deed-wrap { padding: 0; }
.mobile-drawer-close { display: none; }

/* Fit the desktop board to the available height as well as its column. */
@media (min-width: 1025px) {
  body:has(#gameScreen:not(.hidden)) { height: 100dvh; min-height: 0; overflow: hidden; }
  .app-header, .game-top-bar { flex-shrink: 0; }
  #gameScreen { min-height: 0; }
  .game-layout {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    container-type: size;
  }
  .board-wrapper {
    width: min(100%, 100cqh);
    aspect-ratio: 1;
    min-height: 0;
    align-self: center;
    justify-self: center;
  }
  .board-grid {
    grid-template-columns: minmax(84px, 1.4fr) repeat(8, minmax(0, 1fr)) minmax(84px, 1.4fr);
    grid-template-rows: minmax(84px, 1.4fr) repeat(8, minmax(0, 1fr)) minmax(84px, 1.4fr);
  }
  .left-panel, .right-panel { height: 100%; min-height: 0; max-height: none; }
  .players-cards-list, .action-console { flex-shrink: 0; }
  .cards-hand-panel { min-height: 0; }
  .cards-hand-container { min-height: 0; max-height: none; }
  .terminal-log-panel { flex: 0 0 clamp(100px, 22cqh, 160px); min-height: 0; }
  .hub-deck-slot { height: min(100%, 24cqh); width: auto; max-width: 130px; }
}

@media (min-width: 1025px) and (max-height: 800px) {
  body:has(#gameScreen:not(.hidden)) .app-header { padding-block: 10px; }
  .game-top-bar { padding-block: 6px; }
  .game-layout { padding-block: 8px; }
  .board-wrapper { padding: 5px; }
  .board-center-hub { padding: 10px; }
  .hub-wood-felt { gap: 6px; }
  .hub-monopoly-red-box { padding-top: 4px; }
  .hub-monopoly-subtitle { margin-top: 10px; }
  .hub-alert-box { padding: 5px; }
  .tile-color-bar { height: 4px; }
  .tile-name { -webkit-line-clamp: 2; }
}

@media (min-width: 1025px) and (max-width: 1250px) {
  .game-layout { grid-template-columns: 190px minmax(0, 1fr) 230px; padding: 10px; gap: 8px; }
  .header-right-tools { gap: 6px; }
  .conn-status { display: none; }
  .player-hud-card { padding: 8px; }
  .hud-resources-grid { font-size: 0.66rem; }
  .hub-deck-slot { max-width: 75px; }
  .board-center-hub { padding: 10px; }
  .hub-wood-felt { gap: 8px; }
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
  .game-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow-y: auto;
    padding-bottom: 70px;
  }

  .mobile-tab-bar {
    display: grid;
  }

  .left-panel, .cards-hand-panel, .terminal-log-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-board-frame);
    border-top: 3px solid var(--border-gold);
    border-radius: 16px 16px 0 0;
    padding: 16px;
    z-index: 90;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.9);
    transform: translateY(110%);
    transition: transform 0.25s ease-out;
    max-height: 75vh;
  }

  .left-panel.mobile-open, .cards-hand-panel.mobile-open, .terminal-log-panel.mobile-open {
    transform: translateY(0);
  }

  .mobile-drawer-close {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-bold);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 85;
  }

  .mobile-drawer-backdrop.hidden {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .logo-text h1 {
    font-size: 0.85rem;
  }
  .sub-logo {
    display: none;
  }
  .game-top-bar {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 1024px) {
  .app-header { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .header-right-tools { margin-left: auto; }
  .lobby-container { padding: 40px 24px; gap: 30px; }
  .tabletop-box { padding: 26px; }
  .game-top-bar { grid-template-columns: 110px minmax(0, 1fr) 110px; }
  .current-turn-indicator { grid-column: 1 / -1; flex-direction: row; gap: 12px; align-items: center; }
  .board-wrapper { width: 100%; overflow-x: auto; display: block; }
  .board-grid { min-width: 620px; }
  .tile-name { font-size: 0.65rem; }
  .tile-cost-tag { font-size: 0.7rem; }
  .game-layout { min-height: 0; gap: 14px; }
  .right-panel { overflow: visible; max-height: none; }
  .action-buttons-grid { flex-direction: row; }
  .action-buttons-grid .btn { flex: 1; }
  .left-panel, .cards-hand-panel, .terminal-log-panel { border-radius: 6px 6px 0 0; visibility: hidden; pointer-events: none; }
  .left-panel.mobile-open, .cards-hand-panel.mobile-open, .terminal-log-panel.mobile-open { visibility: visible; pointer-events: auto; }
  .mobile-tab-bar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  .lobby-container { grid-template-columns: minmax(0, 1fr); max-width: 520px; padding: 36px 20px; }
  .lobby-wordmark { margin: 22px 0 18px; }
  .lobby-wordmark > span { font-size: clamp(2.2rem, 9.8vw, 3.4rem); }
  .lobby-wordmark small { font-size: clamp(1.4rem, 6vw, 2.1rem); }
  .lobby-facts { margin: 22px 0; }
  .lobby-tagline { font-size: 1rem; }
  .lobby-premise { display: none; }
  .hero-card h2 { margin-top: 14px; }
  .room-header-bar { flex-wrap: wrap; gap: 12px; }
  .lobby-ctrls { flex-wrap: wrap; }
  .board-wrapper::before { content: 'ПОЛЕ МОЖНО ПРОКРУЧИВАТЬ ВЛЕВО И ВПРАВО ↔'; display: block; position: sticky; left: 0; width: fit-content; max-width: 100%; padding: 2px 2px 10px; color: var(--text-muted); font: 400 0.6rem var(--font-headline); letter-spacing: 1px; }
}

@media (max-width: 600px) {
  .app-header { padding: 12px 16px; }
  .logo-group { gap: 10px; }
  .logo-badge { width: 32px; height: 32px; flex-shrink: 0; }
  .logo-text h1 { font-size: 0.87rem; letter-spacing: 0.4px; }
  .header-right-tools { width: 100%; gap: 8px; margin: 0; }
  .btn-tool-pill { font-size: 0.65rem; padding: 6px 8px; }
  .conn-status { margin-left: auto; font-size: 0.53rem; }
  .btn-leave-header .tool-label { display: none; }
  .edition-label { font-size: 0.56rem; letter-spacing: 1.2px; }
  .tabletop-box { padding: 24px 20px; }
  .join-box { grid-template-columns: minmax(0, 1fr) 52px auto; gap: 6px; }
  .join-box .btn { padding-inline: 12px; }
  .game-top-bar { grid-template-columns: 1fr 100px; padding: 10px 16px; }
  .news-newspaper-clipping { grid-column: 1 / -1; grid-row: 2; }
  .turn-timer-widget { grid-column: 2; grid-row: 1; }
  .current-turn-indicator { grid-row: 3; }
  .game-layout { padding: 10px 10px 82px; }
  .action-buttons-grid { flex-direction: column; }
  .modal-card { padding: 18px; }
  .modal-title-deed-wrap { padding: 0; }
  .card-3d-wrapper { max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
}

/* Readable UI text; the condensed display face is reserved for the wordmark. */
.btn, .btn-tool-pill, .console-title, .cards-deck-title, .dossier-heading,
.input-group label, .label-muted, .tt-subheading { letter-spacing: 0.2px; }
.btn-tool-pill, .input-group label, .label-muted, .hud-faction,
.limit-hint, .dice-subtext { font-size: 0.75rem; }
.card-title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; text-shadow: none; }
.card-desc, .terminal-logs, .tooltip-body { font-size: 0.875rem; line-height: 1.5; }
.card-flavor { font-size: 0.8125rem !important; line-height: 1.45 !important; font-style: normal !important; }
.card-inspect-btn, .cost-tag, .actions-left-pill { font-size: 0.75rem; letter-spacing: 0; }
.cost-tag { white-space: nowrap; }
.hud-resources-grid { font-size: 0.75rem; }
.hud-res-item { padding-inline: 5px; gap: 5px; }
.hud-name { color: var(--text-primary) !important; }
.hud-obep-badge { font-size: 0.65rem; }
.news-content-marquee { font-size: 0.875rem; }
.news-press-title { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.3px; }
.hub-monopoly-subtitle { font-size: 0.75rem; letter-spacing: 0.3px; }
.hub-alert-box { font-size: 0.8125rem; line-height: 1.35; }
.deck-category-tag, .deck-brand-name { font-size: 0.6875rem; letter-spacing: 0; }
.tile-name { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; -webkit-line-clamp: 2; }
.board-tile[data-edge="horizontal"] .tile-name { -webkit-line-clamp: 4; }
.tile-cost-tag { font: 600 0.6875rem/1.2 var(--font-body); letter-spacing: 0; }
.tile-color-bar { height: 4px; }
.tile-id { display: none; }
.tile-top-row { min-height: 0; }
.tile-top-row:not(:has(.tile-lvl-dot)) { display: none; }
.tile-owner-badge { font: 500 0.625rem/1.1 var(--font-body); }
.special-tile-content { flex-direction: column; gap: 2px; }
.special-tile-content .special-tile-svg { width: 32px; height: 28px; flex-shrink: 1; min-height: 0; }
.special-tile-content .special-tile-svg text { display: none; }
.special-tile-label { font: 600 0.6875rem/1.15 var(--font-body); color: var(--text-primary); text-align: center; }
.players-cards-list, .cards-hand-container, .terminal-logs { scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}