:root {
  --bg: #090a0e;
  --ink: #f7f3e8;
  --muted: #9aa7a6;
  --panel: #121821;
  --panel2: #0d1118;
  --line: rgba(255,255,255,.13);
  --red: #ff465d;
  --blue: #4dd9ff;
  --green: #70f0d4;
  --gold: #f6f05d;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .5; }
input { min-width: 0; }

.app {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(112,240,212,.13), transparent 26rem),
    radial-gradient(circle at 92% 0, rgba(255,70,93,.1), transparent 24rem),
    #090a0e;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  padding: .48rem .7rem;
  border-bottom: 1px solid var(--line);
  background: rgba(9,10,14,.94);
  backdrop-filter: blur(14px);
}

.brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
.brand img { width: 2rem; aspect-ratio: 1; border-radius: .35rem; object-fit: cover; }
.brand span { min-width: 0; }
.brand strong, .brand small, small { display: block; }
.brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
small, .brand small { color: var(--muted); }

.top-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; }
.wallet { display: flex; align-items: baseline; gap: .35rem; padding: .48rem .65rem; border: 1px solid rgba(246,240,93,.35); border-radius: 999px; background: rgba(246,240,93,.11); color: var(--gold); font-weight: 1000; }
.wallet small { color: #fff7a5; }
.reward-top { min-height: 2.25rem; padding: 0 .7rem; border-radius: .4rem; background: linear-gradient(135deg, var(--gold), var(--green)); color: #071012; font-weight: 1000; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: .5rem;
  padding-bottom: 3rem;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.game-tab {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .14rem;
  min-height: 3.75rem;
  padding: .48rem;
  border: 1px solid var(--line);
  border-radius: .42rem;
  background: rgba(18,24,33,.76);
  text-align: left;
  overflow: hidden;
}
.game-tab.active { outline: 2px solid rgba(112,240,212,.72); border-color: rgba(112,240,212,.45); }
.tab-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(1.1) contrast(1.08); }
.game-tab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,17,24,.95), rgba(13,17,24,.76) 48%, rgba(13,17,24,.62)); }
.tab-copy { position: relative; z-index: 1; display: grid; gap: .14rem; min-width: 0; }
.game-tab small { color: var(--green); font-size: .68rem; font-weight: 1000; text-transform: uppercase; }
.game-tab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; }
.game-tab .tab-copy span { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.arena,
.panel {
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: rgba(18,24,33,.94);
  overflow: hidden;
}

.arena { background: linear-gradient(180deg, #171c24, #0b0f15); }
.arena,
.arena-side,
.bet-slip,
.chat-panel,
.market-grid {
  min-width: 0;
}
.arena-head,
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .52rem .65rem;
  border-bottom: 1px solid var(--line);
}
.arena-head h2, .panel h2 { margin: .06rem 0 0; line-height: 1.04; }
.arena-head p { margin: .18rem 0 0; color: #d4ddda; font-size: .82rem; line-height: 1.25; }
.game-kicker, .panel small, .slip-head small { color: var(--green); font-size: .7rem; font-weight: 1000; text-transform: uppercase; }
.phase { flex: 0 0 auto; padding: .32rem .5rem; border-radius: 999px; background: rgba(112,240,212,.12); color: var(--green); font-size: .7rem; font-weight: 1000; text-transform: uppercase; }

.arena-body { display: grid; }
.game-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 12rem;
  background: #050609;
  border-bottom: 1px solid var(--line);
}
.game-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.arena-side {
  display: grid;
  align-content: start;
  gap: .48rem;
  padding: .55rem;
}

.bet-slip,
.prop-slip,
.chat-panel {
  display: grid;
  gap: .42rem;
  padding: .52rem;
  border: 1px solid rgba(246,240,93,.22);
  border-radius: .42rem;
  background: rgba(246,240,93,.05);
}
.chat-panel { border-color: rgba(112,240,212,.22); background: rgba(112,240,212,.045); }
.prop-slip { border-color: rgba(246,240,93,.18); background: rgba(246,240,93,.035); }

.amount-row { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem; gap: .34rem; }
.amount-row input,
.chat-form input,
.account-form input {
  border: 1px solid var(--line);
  border-radius: .38rem;
  background: #080b10;
  color: var(--ink);
  padding: .5rem;
}
.amount-row button,
.chat-form button,
.account-form button {
  min-height: 2.35rem;
  border-radius: .38rem;
  background: #202833;
  font-weight: 1000;
}

.bet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.bet-btn {
  display: grid;
  gap: .08rem;
  padding: .62rem;
  border-radius: .42rem;
  text-align: left;
}
.bet-btn.red { background: linear-gradient(145deg, var(--red), #661925); }
.bet-btn.blue { background: linear-gradient(145deg, var(--blue), #123746); }
.bet-btn.selected { outline: 2px solid rgba(246,240,93,.78); }
.bet-btn span { font-size: .72rem; text-transform: uppercase; font-weight: 1000; opacity: .82; }
.bet-btn strong { font-size: .98rem; }
.bet-btn small { color: rgba(255,255,255,.78); }
.bet-btn b { color: var(--gold); font-size: 1.06rem; }

.slip-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.slip-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .76rem; }
.long-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .34rem; }
.long-shots .slip-head { grid-column: 1 / -1; }
.prop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .38rem .48rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: .36rem;
  background: rgba(255,255,255,.045);
  text-align: left;
}
.prop-btn b { color: var(--gold); }
.prop-btn.selected { border-color: rgba(246,240,93,.55); background: rgba(246,240,93,.12); }
.ticket-note { margin: 0; color: #d7dfdc; font-size: .84rem; line-height: 1.32; }

.chat-feed { display: grid; gap: .28rem; max-height: 11rem; overflow: auto; }
.chat-feed p { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .35rem; margin: 0; padding: .34rem .4rem; border: 1px solid rgba(255,255,255,.09); border-radius: .34rem; background: rgba(5,6,9,.35); }
.chat-feed b { color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-feed span { color: #d9e0dc; overflow-wrap: anywhere; }
.tone-system b, .tone-host b { color: var(--gold); }
.tone-bot b { color: var(--blue); }
.tone-win b { color: var(--green); }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem; gap: .38rem; }
.chat-form button, .account-form button { background: linear-gradient(135deg, var(--gold), var(--green)); color: #071012; }

.arena-side > .stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-list { display: grid; gap: .34rem; align-content: start; }
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-width: 0;
  padding: .4rem .5rem;
  border: 1px solid var(--line);
  border-radius: .38rem;
  background: rgba(255,255,255,.04);
}
.stat b { color: var(--gold); text-align: right; overflow-wrap: anywhere; }

.prop-tickets { display: flex; flex-wrap: wrap; gap: .32rem; }
.prop-tickets span { padding: .28rem .42rem; border: 1px solid rgba(246,240,93,.22); border-radius: 999px; background: rgba(246,240,93,.08); color: #e8efea; font-size: .78rem; }
.prop-tickets b { color: var(--gold); }

.dashboard-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
.panel { padding: .68rem; }
.account-panel p { margin: .5rem 0 0; color: #d9e0dc; font-size: .86rem; line-height: 1.35; }
.account-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .42rem; margin-top: .55rem; }
.leaderboard, .history-list { display: grid; gap: .38rem; margin-top: .55rem; }
.leader-row, .history-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: .38rem;
  background: rgba(255,255,255,.04);
}
.history-row { display: grid; }
.history-row b { color: var(--gold); }
.empty-state { margin: .55rem 0 0; color: #d9e0dc; }

.reward-dialog {
  width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid rgba(112,240,212,.35);
  border-radius: .6rem;
  background: #101820;
  color: var(--ink);
  overflow: hidden;
}
.reward-dialog::backdrop { background: rgba(5,6,9,.78); backdrop-filter: blur(10px); }
.reward-dialog img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reward-dialog div { padding: .85rem; }
.reward-dialog h2 { margin: .3rem 0; font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.05; }
.reward-dialog p { margin: 0; color: #d9e0dc; line-height: 1.4; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.dialog-actions button { min-height: 2.45rem; border-radius: .4rem; font-weight: 1000; }
.dialog-actions button:first-child { background: linear-gradient(135deg, var(--gold), var(--green)); color: #071012; }
.dialog-actions button:last-child { background: #192027; border: 1px solid var(--line); }

@media (min-width: 860px) {
  .layout { align-items: start; }
  .dashboard-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arena-body { grid-template-columns: minmax(0, 1fr) minmax(25rem, 30rem); }
  .game-stage { border-right: 1px solid var(--line); border-bottom: 0; }
}

@media (min-width: 1180px) {
  .market-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .topbar { padding: .52rem; }
  .brand img { width: 2.15rem; }
  .reward-top { display: none; }
  .wallet { display: none; }
  .layout { padding: .55rem; }
  .arena-head { display: grid; }
  .phase { justify-self: start; }
  .market-grid {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding-bottom: .1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .market-grid::-webkit-scrollbar { display: none; }
  .amount-row { grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem; }
  .game-tab {
    flex: 0 0 11rem;
    scroll-snap-align: start;
  }
  .account-form { grid-template-columns: 1fr; }
  .arena-side > .stats-list { grid-template-columns: 1fr; }
  .long-shots { grid-template-columns: 1fr; }
  .chat-feed p { grid-template-columns: 1fr; }
}