/* Responsive breakpoints + mobile layout */
/* ---------- Responsive ---------- */

@media (max-width:860px){
  header{padding:0 12px}
  .session{display:none}
  .logo small{display:none}
  main{margin:16px auto}
  .game{flex-direction:column-reverse;min-height:0}
  .sidebar{width:100%}
  .stage{padding:16px}
  .board{gap:8px}
  .stats{right:8px;left:8px;width:auto;bottom:8px}
}
@media (max-width:420px){
  .wallet .amt{min-width:0;padding:0 10px}
  .wallet button{padding:12px 10px}
  .logo{font-size:18px}
}

/* ---------- Mobile (kept last so it wins over the wider breakpoints) ---------- */
button{touch-action:manipulation}
@media (hover:none){
  .board.live .tile:not(.revealed):hover,.board.pick .tile:not(.revealed):hover{background:var(--tile);transform:none;box-shadow:0 5px 0 var(--tile-shadow)}
  .board.pick .tile.selected:hover{background:var(--purple);box-shadow:0 5px 0 var(--purple-shadow)}
  .rcell:hover,.pickbtn:hover,.chip:hover{filter:none;transform:none}
}
@media (max-width:600px){
  /* header: [logo · ranking · wallet] on top, the five game tabs full width below */
  header{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .hleft{display:contents}
  .logo{display:flex;font-size:16px;order:0}
  .logo small{display:none}
  .rankbtn{order:1;margin-left:auto;padding:8px 10px}
  .rankbtn span{display:none}
  .walletwrap{order:2}
  .nav{order:3;flex-basis:100%;overflow:visible}
  .nav button{flex:1;padding:8px 2px;font-size:12px}
  .wallet .amt{min-width:0;padding:0 10px}
  .wallet .rl{display:none}
  .wallet .rs{display:inline;font-size:18px;line-height:1}
  .wallet button{padding:10px 12px}
  .refill-menu{left:auto;right:0;transform:none}

  main{margin:12px auto;padding:0 10px}
  .stage{padding:12px}
  .pl-stage{padding:8px}
  .sidebar{padding:10px}
  .coin-scene{width:170px;height:170px}
  .wheel-wrap{--wheel:210px}

  .popup{padding:10px 16px;min-width:120px;border-width:3px}
  .popup .mult{font-size:22px}
  .popup hr{margin:6px auto}
  .bc-stage{padding:12px;gap:14px}
  .bc-hand{padding:10px;gap:10px}
  .bc-cards{gap:4px;min-height:74px}
  .pcard{width:44px;height:64px}
  .pcard-face.front{padding:4px 5px}
  .pcard-face.front .r{font-size:14px}
  .pcard-face.front .s{font-size:20px}
  .bc-spot{padding:14px 4px;min-height:80px}
  .bc-spot b{font-size:14px}
  .bc-spot small{font-size:11px}
  .bc-spot .rchip{width:26px;height:26px;right:4px;top:4px;font-size:9px}
  .nav button{font-size:11px}

  /* iOS zooms into inputs under 16px */
  .inp input,.inp select,#joinName{font-size:16px}

  /* stats panel: compact so the controls stay usable */
  .stats{max-height:55vh;overflow-y:auto}
  .stats .body{padding:10px;gap:8px}
  canvas#chart{height:90px}

  /* roulette table goes vertical: 0 on top, 12 rows of 3, dozens and outside bets on the left */
  .rtable{grid-template-columns:.95fr .95fr 1fr 1fr 1fr;grid-template-rows:repeat(14,34px);min-width:0;max-width:none}
  .rcell{grid-column:var(--mc) / span var(--mcs);grid-row:var(--mr) / span var(--mrs);font-size:12px}
  .rcell.out{font-size:11px}
  .table-scroll{overflow-x:visible}
}