.topbar {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px 0 14px;
  border-radius: 18px;
  background: #140f1e;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.04em; flex: 0 0 auto; }
.wordmark { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.04em; }
.wordmark span { color: #ff7a14; }
.nav-links a, .btn, .icon-btn, .side-btn, .quick-row button {
  min-height: 36px;
  border-radius: 999px;
  border: 0;
}
.nav-links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  gap: 6px;
  color: #c8bdd8;
  font-weight: 650;
  background: transparent;
}
.nav-links a:hover, .nav-links a.is-on { color: #f7f4fb; background: rgba(255,255,255,0.07); }
.nav-links a svg { width: 16px; height: 16px; }
.user-menu { position: relative; }
.user-pop[hidden] { display: none; }
.user-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 210px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: 16px; background: #1c1628; box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}
.user-pop a, .user-pop button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: #f4f1f8; font-weight: 650; text-align: left;
}
.user-pop a:hover, .user-pop button:hover { background: rgba(255,255,255,0.06); }
.user-pop form { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.user-pop form button { color: #ffb4be; }
.user-chip svg { width: 16px; height: 16px; color: #c8bdd8; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shell {
  --chat-width: 340px;
  --chat-gap: 16px;
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: 78px 0 12px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.stage {
  margin-left: calc(var(--chat-width) + var(--chat-gap));
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sidebar {
  position: fixed;
  z-index: 20;
  top: 78px;
  left: 12px;
  width: var(--chat-width);
  height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: #120c1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sidebar-head, .panel-head, .modal-head, .notice-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-close, .chat-fab, .nav-toggle { display: none; }
.main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: #1b1428;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero, .page-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; }
.hero-actions, .quick-row, .row-actions, .top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: min(100%, 420px); }
.stat-grid-tight { min-width: 0; }
.jackpot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: 16px; }
.site-foot {
  margin: 10px 0 0;
  padding: 0 8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
}
.site-foot p { margin: 0; }
.announce {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(90deg, #3a215f, #2a1848);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.announce p:first-child { font-weight: 700; }
.announce p:last-child { color: var(--text-muted); margin-top: 4px; }
.lobby-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lobby-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.last100, .tool-actions { display: flex; align-items: center; gap: 8px; }
.last100 b { font-size: 1rem; }
.coin-badge.is-heads {
  --ring-hi: #ff7a14; --ring-lo: #e8620a; --rim-hi: #5a2600; --rim-lo: #2e1300;
  --face-hi: #e0701c; --face-mid: #c25c13; --face-lo: #9c470c;
}
.coin-badge.is-tails {
  --ring-hi: #b38bff; --ring-lo: #8b5cf6; --rim-hi: #2e1065; --rim-lo: #170735;
  --face-hi: #7c4dea; --face-mid: #6534d0; --face-lo: #4c22a6;
}
.coin-badge { display: block; }
.flip-player { position: relative; width: 64px; height: 64px; }
.side-badge { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #1b1428; }
.side-badge .coin-badge { width: 26px; height: 26px; }
.ring-heads { box-shadow: 0 0 0 3px #ff7a14; }
.ring-tails { box-shadow: 0 0 0 3px #8b5cf6; }
.dot { background: #ff7a14; box-shadow: 0 0 8px #ff7a14; }