1 files changed, 120 insertions, 68 deletions

diff --git a/web/play/style.css b/web/play/style.css
index e05f551..a0e4cca 100644
--- a/web/play/style.css
+++ b/web/play/style.css
@@ -78,9 +78,21 @@ button:disabled { cursor: not-allowed; opacity: 0.45; }
   letter-spacing: 0.12em;
 }
 .spacer { flex: 1; }
-.session { display: flex; align-items: center; gap: 12px; }
-.session .who { color: var(--dim); font-family: var(--mono); font-size: 12px; }
-.session .who strong { color: var(--text); font-weight: 600; }
+.pill {
+  padding: 3px 7px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+}
+.session { display: flex; align-items: center; gap: 18px; }
+.session .who, .balance-block { display: grid; gap: 1px; justify-items: end; }
+.session .who .label, .balance-block .label { font-size: 9px; }
+.session .who strong { color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; }
+.balance-block .balance { font-size: 16px; }
 .balance {
   color: var(--win);
   font-family: var(--mono);
@@ -92,7 +104,7 @@ button:disabled { cursor: not-allowed; opacity: 0.45; }
   white-space: nowrap;
 }
 
-main { width: min(1240px, 100%); margin: 0 auto; padding: 28px 24px 64px; flex: 1; }
+main { width: 100%; margin: 0 auto; padding: 28px 24px 48px; flex: none; }
 
 h1, h2, h3 { margin: 0; font-weight: 600; }
 h1 { font-size: 26px; letter-spacing: -0.01em; }
@@ -175,87 +187,108 @@ h2 { font-size: 18px; }
 .auth-foot { margin-top: 16px; font-size: 12px; color: var(--faint); }
 
 /* Lobby */
-.lobby-head { display: flex; align-items: end; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
+.lobby-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
 .lobby-head .spacer { flex: 1; }
-.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+.lobby-head h1 { display: flex; align-items: baseline; gap: 12px; }
+.count { color: var(--faint); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }
+.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
 .game-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
-  padding: 18px;
+  padding: 22px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  min-height: 178px;
+  gap: 10px;
+  min-height: 150px;
   position: relative;
   overflow: hidden;
 }
-.game-card::before {
-  content: "";
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 3px;
-  background: var(--accent);
-  opacity: 0.7;
-}
-.game-card.crash::before { background: var(--gold); }
-.game-card.roulette::before { background: var(--felt-line); }
-.game-card.blackjack::before { background: var(--loss); }
-.game-card h3 { font-size: 17px; }
-.game-card p { margin: 0; color: var(--dim); font-size: 13px; flex: 1; }
-.game-card .row { justify-content: space-between; }
+.game-card h3 { font-size: 22px; font-weight: 500; }
+.game-card p { margin: 0 0 10px; color: var(--dim); font-size: 13px; flex: 1; }
+.game-card .btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; padding: 9px 12px; }
 .bet-input { width: 92px; }
 
 /* Game shell */
-.game-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
-.game-head .spacer { flex: 1; }
+#game-screen { min-height: calc(100vh - 64px - 72px); }
 .game-body {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 16px;
-  align-items: start;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  min-height: calc(100vh - 64px - 72px);
+  align-items: stretch;
 }
 .board {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  padding: 18px;
-  min-height: 560px;
+  background: var(--bg);
+  border: 0;
+  border-radius: 0;
+  padding: 24px 26px;
+  min-height: 0;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 .sidebar {
   background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  padding: 18px;
+  border-left: 1px solid var(--line);
+  border-radius: 0;
+  padding: 24px 26px;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 12px;
+  min-height: 0;
+  overflow-y: auto;
+}
+.sidebar h2 { font-size: 22px; font-weight: 500; margin: 0 0 2px; }
+.sidebar .actions {
+  margin-top: auto;
+  display: grid;
+  gap: 8px;
+  padding-top: 16px;
   position: sticky;
-  top: 84px;
+  bottom: 0;
+  background: var(--surface);
 }
-.sidebar .actions { margin-top: auto; display: grid; gap: 8px; }
 .sidebar .stat { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
 .sidebar .stat strong { font-family: var(--mono); font-weight: 600; }
 .note { color: var(--dim); font-size: 12px; }
-.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
 .chip-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 11px;
+  font-weight: 700;
   border-radius: 999px;
-  border: 1px solid var(--line);
+  border: 3px solid var(--line);
   background: var(--raised);
-  padding: 5px 10px;
+  color: var(--text);
 }
-.chip-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(224, 182, 74, 0.1); }
+.chip-btn[data-chip="10"] { border-color: #e8edf2; }
+.chip-btn[data-chip="25"] { border-color: #4fb8c9; }
+.chip-btn[data-chip="50"] { border-color: #e05a5a; }
+.chip-btn[data-chip="100"] { border-color: #4ec27b; }
+.chip-btn.active { box-shadow: 0 0 0 2px var(--gold); }
+.board-foot {
+  margin-top: auto;
+  padding-top: 16px;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  color: var(--dim);
+  font-size: 12px;
+}
+.board-foot.tight { margin-top: 14px; }
+.board-foot .label { color: var(--faint); }
 
 /* Slots */
 .reels {
   display: grid;
   grid-template-columns: repeat(5, minmax(60px, 1fr));
-  gap: 10px;
-  max-width: 760px;
-  margin: 24px auto 0;
+  gap: 12px;
+  width: 100%;
+  max-width: 1060px;
+  margin: 90px auto 0;
 }
 .reel { display: grid; gap: 8px; }
 .tile {
@@ -271,23 +304,28 @@ h2 { font-size: 18px; }
   color: var(--dim);
   transition: color 90ms ease, border-color 90ms ease, background 90ms ease;
 }
-.tile.sym-C { color: #c8d1da; }
-.tile.sym-L { color: #7cc4d4; }
-.tile.sym-O { color: #d8c27a; }
-.tile.sym-G { color: #83d09a; }
-.tile.sym-D { color: #d48d8d; }
-.tile.sym-S { color: #e0b64a; }
-.tile.win { border-color: var(--win); background: rgba(78, 194, 123, 0.12); color: var(--win); }
-.tile.spinning { color: var(--faint); }
+.tile.sym-C { color: #e05a5a; }
+.tile.sym-L { color: #e0b64a; }
+.tile.sym-O { color: #e08a3c; }
+.tile.sym-G { color: #b57edc; }
+.tile.sym-D { color: #4fb8c9; }
+.tile.sym-S { color: #4ec27b; }
+.tile.win { border-color: var(--gold); background: rgba(224, 182, 74, 0.14); }
+.tile.spinning { opacity: 0.35; }
 .win-lines { text-align: center; margin-top: 18px; color: var(--dim); font-size: 12px; min-height: 18px; }
 
 /* Cards */
-.hand { margin: 16px 0; }
-.hand .label { margin-bottom: 8px; }
-.cards { display: flex; gap: 8px; flex-wrap: wrap; min-height: 116px; }
+.bj-table { flex: 0 0 500px; display: flex; flex-direction: column; justify-content: space-around; min-height: 400px; max-height: 500px; }
+.bj-divider { height: 1px; background: var(--line); margin: 10px 0; }
+.hand { margin: 8px 0; }
+.hand-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
+.hand-head .label { color: var(--dim); }
+.hand-head .total { color: var(--text); font-size: 14px; }
+.empty-table { flex: 1; display: grid; place-items: center; color: var(--dim); font-size: 14px; }
+.cards { display: flex; gap: 10px; flex-wrap: wrap; min-height: 116px; justify-content: center; }
 .card {
-  width: 76px;
-  height: 108px;
+  width: 88px;
+  height: 128px;
   border-radius: 9px;
   background: #f2f5f7;
   color: #121820;
@@ -310,7 +348,8 @@ h2 { font-size: 18px; }
 .outcome { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
 
 /* Crash */
-.crash-wrap { position: relative; }
+.crash-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding-top: 40px; }
+.crash-wrap > .label { margin-top: 2px; color: var(--dim); }
 .crash-number {
   font-family: var(--mono);
   font-size: clamp(44px, 9vw, 86px);
@@ -328,8 +367,19 @@ h2 { font-size: 18px; }
 /* Roulette */
 .roulette-wrap { position: relative; }
 canvas { display: block; width: 100%; }
-.roulette-canvas { height: 540px; }
-.crash-canvas { height: 360px; }
+.roulette-canvas { height: 500px; margin: 80px 0 0; }
+.crash-canvas {
+  height: 500px;
+  margin-top: 14px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+.wheel-canvas {
+  display: block;
+  margin: 6px auto 2px;
+  flex: 0 0 auto;
+}
 .wheel-result {
   position: absolute;
   top: 16px;
@@ -357,7 +407,7 @@ td.neg { color: var(--loss); }
 
 /* Toasts and overlays */
 .site-foot {
-  width: min(1240px, 100%);
+  width: 100%;
   margin: 0 auto;
   padding: 0 24px 28px;
   color: var(--faint);
@@ -366,7 +416,7 @@ td.neg { color: var(--loss); }
 }
 .site-foot a { color: var(--dim); }
 
-#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 50; width: min(380px, calc(100vw - 36px)); }
+#toasts { position: fixed; left: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 50; width: min(340px, calc(100vw - 36px)); }
 .toast {
   background: var(--surface);
   border: 1px solid var(--line);
@@ -400,9 +450,11 @@ td.neg { color: var(--loss); }
 .modal p { color: var(--dim); }
 
 @media (max-width: 900px) {
-  .game-body { grid-template-columns: 1fr; }
-  .sidebar { position: static; }
+  .game-body { grid-template-columns: 1fr; min-height: 0; }
+  .sidebar { border-left: 0; border-top: 1px solid var(--line); position: static; }
+  .board { padding: 18px 14px; }
   .tagline { display: none; }
+  .game-grid { grid-template-columns: 1fr; }
 }
 @media (max-width: 620px) {
   main { padding: 18px 14px 54px; }
@@ -413,5 +465,5 @@ td.neg { color: var(--loss); }
   .tile { font-size: clamp(18px, 7vw, 34px); }
   .card { width: 58px; height: 84px; }
   .crash-canvas { height: 260px; }
-  .roulette-canvas { height: 400px; }
+  .roulette-canvas { height: 400px; margin-top: 30px; }
 }