/* ───────────────────────────────────────────────────────────────
   arena.css — lobby + online game extras (on top of game.css)
   ─────────────────────────────────────────────────────────────── */
.arena-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-right: 150px; }
.logo-sub { font-size: .9rem; color: var(--pencil); font-family: var(--font-hand); font-style: italic; margin-left: 4px; }
.wallet-box { display: flex; align-items: center; gap: 14px; position: relative; z-index: 3; }
.balance { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; color: var(--green); white-space: nowrap; }

/* views/panels toggle with the hidden attribute — beat display:grid/flex */
.arena-page [hidden] { display: none !important; }

.sketch-btn[disabled] { opacity: .45; pointer-events: none; }
.fine { font-size: 1rem; opacity: .8; margin: .3rem 0; }
.fine a { color: var(--ink-dark); }

/* ---------- lobby ---------- */
.lobby {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  justify-content: center;
  gap: 40px 48px;
  padding: 36px 24px 60px;
}
.bet-note { transform: rotate(-1deg); }
.tables-note { transform: rotate(1.2deg); }
.live-note { transform: rotate(.6deg); }
.rules-note { transform: rotate(-.8deg); }

.bet-form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: .6rem; }
.stake { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-title); font-size: 1.15rem; font-weight: 700; }
.stake input {
  width: 7.5em;
  font: inherit;
  color: var(--ink-dark);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--ink);
  padding: 0 4px;
  outline: none;
}
.stake input:focus { border-bottom-color: var(--orange); }
.msg { min-height: 1.4em; margin: .6rem 0 0; color: var(--danger); }

.table-list { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.table-list:empty::before { content: attr(data-empty); opacity: .55; }
.table-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 2px dashed rgba(220, 224, 232, .12);
}
.table-list li.mine .who { color: var(--red); font-weight: 700; }
.table-list .who { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-list .who i { opacity: .6; }
.table-list .amt { white-space: nowrap; }
.table-list .amt b { font-family: var(--font-title); font-size: 1.1rem; }

.rules { margin: .3rem 0 0; padding-left: 1.2em; font-size: 1.05rem; }
.rules li { margin: .2rem 0; }

/* ---------- game ---------- */
.clock {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0 .5em;
  border-radius: var(--radius-sketch);
  opacity: .55;
}
.clock.running { opacity: 1; background: rgba(220, 224, 232, .14); }
.clock.low.running { color: #fff; background: var(--danger); }

.pot-note .pot { margin: .2rem 0; font-family: var(--font-title); font-size: 1.1rem; }
.pot-note .pot b { font-size: 1.8rem; color: var(--green); }
.draw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.draw-bar p { margin: 0; width: 100%; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  transform: translateX(-50%) rotate(-1deg);
  padding: .5rem 1.2rem;
  background: var(--sticky);
  box-shadow: var(--shadow);
  font-size: 1.15rem;
  max-width: calc(100vw - 32px);
}
.toast[hidden] { display: none; }

@media (max-width: 980px) {
  .lobby { grid-template-columns: minmax(0, 560px); gap: 32px; padding: 20px 16px 48px; }
  .arena-top { padding-right: 16px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .arena-top .logo { margin-left: 60px; }
  .wallet-box { width: 100%; justify-content: flex-end; }
  .table-list li { grid-template-columns: 1fr auto; }
  .table-list li .sketch-btn { grid-column: 1 / -1; justify-self: start; }
}