:root {
  --bg: #070605;
  --bg-2: #15100b;
  --panel: #15100cdc;
  --line: #6d5127;
  --text: #f8ebcb;
  --muted: #cfbe93;
  --gold: #f4b841;
  --gold-2: #ffd373;
  --good: #34d399;
  --warn: #f59e0b;
  --bad: #ef4444;
  --felt-a: #2f2214;
  --felt-b: #1f170f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 12% 12%, #322412 0%, transparent 33%),
    radial-gradient(circle at 88% 90%, #2f210f 0%, transparent 30%),
    linear-gradient(150deg, var(--bg), var(--bg-2));
}

.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(circle, #ffffff 0.6px, transparent 0.6px);
  background-size: 4px 4px;
}

.layout {
  position: relative;
  z-index: 1;
  width: min(1240px, 95vw);
  margin: 16px auto 40px;
  display: grid;
  gap: 12px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px #23180f;
  backdrop-filter: blur(8px);
  padding: 12px;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid #8c6a30;
  background: #0f0a06;
}

.brand h1 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  letter-spacing: 0.03em;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 8px;
}

.btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 700;
  font-family: "Noto Sans SC", sans-serif;
  cursor: pointer;
}

.btn.gold {
  border-color: #b07f2c;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2b1b09;
}

.btn.subtle {
  border-color: #7b5e2f;
  background: linear-gradient(135deg, #2b2215, #1a130c);
  color: #f0ddb0;
}

.btn:hover {
  filter: brightness(1.08);
}

.guide-panel h2,
.ai-health-panel h2,
.betting-panel h2,
.action-panel h2 {
  margin: 0 0 8px;
  font-size: 1.04rem;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guide-grid article {
  border: 1px solid #6b5028;
  border-radius: 10px;
  padding: 10px;
  background: #120e09;
}

.guide-grid h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.guide-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

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

.status-grid span {
  display: block;
  font-size: 0.77rem;
  color: var(--muted);
}

.status-grid strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.05rem;
}

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

.ai-health-item {
  border: 1px solid #71552a;
  border-radius: 10px;
  background: #120e08;
  padding: 9px;
}

.ai-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.dot.offline {
  background: var(--bad);
}

.dot.connecting {
  background: var(--warn);
}

.dot.online {
  background: var(--good);
}

.ai-health-item .model {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--muted);
}

.ai-health-item .stack {
  margin-top: 4px;
  font-size: 0.76rem;
  color: #f4ca72;
}

.ai-health-item .status {
  margin-top: 4px;
  font-size: 0.76rem;
}

.muted {
  color: var(--muted);
  font-size: 0.87rem;
}

.wallet-row {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bank {
  color: #ffe4a8;
  font-family: "JetBrains Mono", monospace;
}

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

.bet-option {
  border: 1px solid #6f5228;
  border-radius: 10px;
  background: #130f09;
  color: #f5e2b7;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.bet-option .meta {
  margin-top: 2px;
  font-size: 0.76rem;
  color: #cfbc91;
}

.bet-option.active {
  border-color: #f2c465;
  box-shadow: 0 0 0 1px #f2c465;
}

.bet-actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(190px, 280px) 1fr;
  gap: 8px;
  align-items: end;
}

.bet-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bet-actions label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

input {
  border: 1px solid #6f5228;
  border-radius: 8px;
  background: #0f0b07;
  color: var(--text);
  padding: 8px;
  font-family: "JetBrains Mono", monospace;
}

.bet-slip {
  margin-top: 8px;
  min-height: 20px;
}

.table-board {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  border: 2px solid #7a5b2b;
  background:
    radial-gradient(circle at center, var(--felt-a), var(--felt-b)),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0 12px, rgba(0, 0, 0, 0.05) 12px 24px);
  box-shadow: inset 0 0 0 7px #251a11, 0 16px 32px #00000054;
}

.board-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.community {
  display: flex;
  gap: 8px;
  min-height: 64px;
}

.dealer-chip {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ffd27c;
  background: radial-gradient(circle at 30% 30%, #fff7dd, #e8b458);
  color: #321f07;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.seats {
  position: relative;
  min-height: 520px;
}

.seat {
  position: absolute;
  width: 228px;
  transform: translate(-50%, -50%);
  border: 1px solid #836233;
  border-radius: 12px;
  background: #110d09de;
  padding: 8px;
}

.seat.winner {
  box-shadow: 0 0 0 2px #f3c86b;
}

.seat-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.seat-bubble {
  margin-top: 7px;
  border: 1px solid #8e6b37;
  border-radius: 9px;
  background: #24180c;
  color: #f6e7c4;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 6px 7px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #ca9d4b;
  background: #20160d;
  object-fit: cover;
}

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

.seat-meta {
  font-size: 0.75rem;
  color: #d2bf97;
}

.hole-cards {
  margin-top: 7px;
  display: flex;
  gap: 6px;
}

.card {
  width: 38px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid #b68b42;
  background: #fff9ed;
  color: #20130a;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 4px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

.card.red {
  color: #a12820;
}

.card.back {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #6f4f25, #4a3418);
  border-color: #d5ad5d;
  color: #fcebc1;
}

.card .suit {
  text-align: right;
}

.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thought-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thought-tab {
  border: 1px solid #775a2e;
  border-radius: 999px;
  padding: 6px 10px;
  background: #181209;
  color: #e9d6ad;
  cursor: pointer;
  font-size: 0.82rem;
}

.thought-tab.active {
  border-color: #f1c365;
  box-shadow: 0 0 0 1px #f1c365;
}

.thought-stream {
  margin-top: 10px;
  border: 1px solid #6f5329;
  border-radius: 10px;
  background: #0a0705;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.thought-item {
  border: 1px solid #4f3a1d;
  border-radius: 10px;
  background: #151008;
  padding: 8px;
}

.thought-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: #d0bd94;
}

.thought-body {
  margin-top: 4px;
  color: #f2e1b9;
  font-size: 0.84rem;
  line-height: 1.4;
}

pre {
  margin: 8px 0 0;
  max-height: 240px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #6f5329;
  background: #0a0705;
  color: #f2ddb2;
  padding: 10px;
  white-space: pre-wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
}

@media (max-width: 1020px) {
  .guide-grid,
  .status-grid,
  .ai-health-list,
  .bet-options,
  .bet-actions {
    grid-template-columns: 1fr;
  }

  .table-board,
  .seats {
    min-height: 760px;
  }

  .seat {
    width: 190px;
  }
}