:root{
--bg: #0b0f17;  --bg2: #121a28;  --panel: #16202f;  --panel2: #1c2a3d;  --border: #26364d;  --text: #e8eef7;  --muted: #8aa0bd;  --accent: #e0b04f;  --accent2: #2f9e6e;  --red: #d84b4b;  --black: #1b1b1f;  --green: #1f8a5b;  /* Домовый бордо rgb(122, 31, 31): свет зала, жар и проигрыш. Живёт как поверхность — на тёмном фоне читается глубже, чем --red, а текст поверх остаётся ярким. */  --wine: #7a1f1f;  --wine-soft: rgba(122, 31, 31, 0.22);  --wine-glow: rgba(122, 31, 31, 0.4);  --wine-line: rgba(122, 31, 31, 0.55);  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;}
*{
box-sizing: border-box;}
a, button, select, input, .card, .chip, .rt-cell, .keno button{
touch-action: manipulation;  -webkit-tap-highlight-color: transparent;}
button, .card, .chip, .rt-cell, .keno button{
user-select: none;  -webkit-user-select: none;}
canvas{
touch-action: none;}
html, body{
margin: 0;  min-height: 100vh;  background:    radial-gradient(1100px 460px at 74% -12%, var(--wine-glow), transparent 66%),    linear-gradient(rgba(10, 14, 22, 0.68), rgba(10, 14, 22, 0.86)),    url('/assets/bg.webp') center / cover no-repeat fixed;  color: var(--text);  font-family: var(--font-ui);  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
h1, h2, h3, h4, .balance, .stat .v, .card h3, .method-name, .brand, .chip, .chip-img, .vip-fill, .btn{
font-family: var(--font-display);  font-feature-settings: 'ss01';}
h1, h2, h3{
font-weight: 800; letter-spacing: -0.2px;}
.topbar{
display: flex;  align-items: center;  justify-content: space-between;  gap: 16px;  height: 64px;  padding: 0 20px;  overflow: visible;  background: rgba(10, 14, 22, 0.85);  border-bottom: 1px solid var(--border);  position: sticky;  top: 0;  z-index: 20;}
.brand{
position: relative;  display: block;  flex-shrink: 0;  width: 150px;  height: 64px;  text-decoration: none;}
.brand img{
position: absolute;  left: 0;  top: -2px;  height: 150px;  width: auto;  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));  transition: transform 0.2s ease;}
.brand:hover img{
transform: scale(1.03);}
.balance-wrap{
display: flex; align-items: center; gap: 10px;}
.balance-label{
color: var(--muted); font-size: 13px;}
.balance{
font-size: 22px; font-weight: 700; color: var(--accent2);}
.credits{
color: var(--muted); font-size: 13px;}
.nav-actions{
display: flex; align-items: center; gap: 8px;}
.burger{
display: none; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 0 10px; margin-left: 6px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.05); cursor: pointer;}
.burger span{
display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.22s ease, opacity 0.22s ease;}
.topbar.menu-open .burger span:nth-child(1){
transform: translateY(6px) rotate(45deg);}
.topbar.menu-open .burger span:nth-child(2){
opacity: 0;}
.topbar.menu-open .burger span:nth-child(3){
transform: translateY(-6px) rotate(-45deg);}
@media (max-width: 900px){
.burger{
display: inline-flex;}
.nav-actions{
position: absolute;    top: 60px;    left: 12px;    right: 12px;    flex-direction: column;    align-items: stretch;    gap: 8px;    padding: 14px;    border-radius: 18px;    background: rgba(16, 22, 33, 0.98);    border: 1px solid var(--border);    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    opacity: 0;    transform: translateY(-12px) scale(0.98);    transform-origin: top right;    pointer-events: none;    transition: opacity 0.2s ease, transform 0.2s ease;    z-index: 40;}
.nav-actions.open{
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}
.nav-actions .reset{
margin-left: 0; text-align: center;}
.nav-actions .lang-select{
width: 100%;}
.balance-label, .credits{
display: none;}
.brand{
width: 92px;}
.brand img{
height: 76px;}
.topbar{
height: 60px;}
}
.reset{
position: relative;  margin-left: 8px;  padding: 9px 18px;  border: 1px solid transparent;  border-radius: 999px;  color: var(--text);  font-size: 13px;  font-weight: 600;  letter-spacing: 0.3px;  cursor: pointer;  text-decoration: none;  white-space: nowrap;  background:    linear-gradient(var(--panel2), var(--panel2)) padding-box,    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(224, 176, 79, 0.45), rgba(255, 255, 255, 0.06)) border-box;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, color 0.18s, background 0.18s;}
.reset:hover{
color: #fff;  transform: translateY(-2px);  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(224, 176, 79, 0.12);  background:    linear-gradient(rgba(224, 176, 79, 0.18), rgba(224, 176, 79, 0.05)) padding-box,    linear-gradient(135deg, var(--accent), #f4d588, var(--accent2)) border-box;}
.reset:active{
transform: translateY(0) scale(0.97);}
.lang-select{
background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer;}
.lang-select:focus{
outline: none; border-color: var(--accent);}
.view{
max-width: 1160px;  margin: 18px auto 60px;  padding: 26px 24px 60px;  background: rgba(10, 14, 22, 0.945);  border: 1px solid rgba(224, 176, 79, 0.1);  border-radius: 22px;  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);}
/* Lobby */.lobby-head{
display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px;}
.lobby-head h1{
font-size: 26px; margin: 0;}
.lobby-head p{
color: var(--muted); margin: 4px 0 0;}
.category{
margin: 26px 0 12px; font-size: 14px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase;}
.grid{
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;}
.card{
background: linear-gradient(160deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  border-radius: 14px;  padding: 18px;  cursor: pointer;  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;}
.card:hover{
transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.4);}
.card .icon{
font-size: 30px; margin-bottom: 10px;}
.card-logo{
height: 56px; max-width: 100%; object-fit: contain; margin-bottom: 10px;}
.card h3{
margin: 0 0 6px; font-size: 17px;}
.card p{
margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4;}
.card .tag{
display: inline-block; margin-top: 12px; padding: 3px 9px; border-radius: 20px; background: rgba(224,176,79,.14); color: var(--accent); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;}
/* Game shell */.game{
display: flex; flex-direction: column; gap: 14px;}
.game-head{
display: flex; align-items: center; justify-content: space-between;}
.game-head .back{
background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer;}
.game-head .back:hover{
color: var(--text);}
.game-head h2{
margin: 0; font-size: 20px;}
.game-logo{
max-height: 56px; max-width: 360px; object-fit: contain;}
.game-body{
display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: stretch;}
@media (max-width: 860px){
.game-body{
grid-template-columns: 1fr;}
}
.stage{
background: var(--panel);  border: 1px solid var(--border);  border-radius: 14px;  padding: 16px;  min-height: 420px;  display: flex;  flex-direction: column;  align-items: stretch;  justify-content: flex-start;  gap: 16px;  overflow: hidden;}
.stage-canvas{
position: relative;  display: flex;  align-items: flex-start;  justify-content: center;  width: 100%;}
.stage canvas{
max-width: 100%;}
.sidebar{
display: flex; flex-direction: column; gap: 12px;}
.panel{
background: var(--panel);  border: 1px solid var(--border);  border-radius: 14px;  padding: 14px;}
.panel h4{
margin: 0 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px;}
.bet-row{
display: flex; flex-wrap: wrap; gap: 6px;}
.chip{
padding: 8px 0;  min-width: 44px;  text-align: center;  background: var(--panel2);  border: 1px solid var(--border);  border-radius: 10px;  color: var(--text);  cursor: pointer;  font-weight: 600;}
.chip.active{
background-color: var(--accent); border-color: var(--accent); color: #1b1200;}
.btn{
padding: 11px 14px;  border: none;  border-radius: 10px;  cursor: pointer;  font-weight: 700;  font-size: 14px;  letter-spacing: .3px;}
.btn-primary{
background: var(--accent); color: #1b1200;}
.btn-primary:disabled{
opacity: .45; cursor: not-allowed;}
.btn-ghost{
background: var(--panel2); color: var(--text); border: 1px solid var(--border);}
.btn-ghost:disabled{
opacity: .4; cursor: not-allowed;}
.btn-row{
display: flex; gap: 8px; flex-wrap: wrap;}
.spin-block{
display: flex;  flex-direction: column;  align-items: center;  gap: 10px;}
.spin-img-btn{
display: block;  width: 100%;  aspect-ratio: 1 / 1;  border: none;  padding: 0;  cursor: pointer;  background-color: transparent;  background-image: var(--spin-normal);  background-repeat: no-repeat;  background-size: 100% 100%;  background-position: center;}
.spin-img-btn:hover:not(:disabled){
background-image: var(--spin-hover);}
.spin-img-btn:active:not(:disabled){
background-image: var(--spin-pressed);}
.spin-img-btn:disabled{
background-image: var(--spin-disabled); cursor: not-allowed;}
/* Readout under a board: the progress of a scratched card, the stake placed in
   roulette, a mines multiplier, the outcome. The win/lose pill below is centred,
   so the neutral lines are centred with it — a left-aligned "Scratched 3 / 5"
   sitting next to a centred "Win: 25.00" read like a mistake. */.result-line{
font-size: 15px; min-height: 22px; color: var(--accent); text-align: center;}
.win{
color: var(--accent2);}
.lose{
color: var(--red);}
/* Roulette table */.rt-stage{
display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;}
.rt-scroll{
width: 100%; overflow-x: auto; padding-bottom: 2px;}
.rt-scroll::-webkit-scrollbar{
height: 8px;}
.rt-scroll::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.15); border-radius: 4px;}
.rt-table{
display: grid;  grid-template-columns: 46px repeat(12, minmax(0, 1fr)) 46px;  grid-template-rows: repeat(3, minmax(38px, 1fr)) 42px 42px;  gap: 3px;  width: 100%;  min-width: 680px;  padding: 8px;  border-radius: 12px;  background: linear-gradient(180deg, #0e5535, #0a3f27);  border: 1px solid rgba(224, 176, 79, .35);  box-shadow: inset 0 0 60px rgba(0, 0, 0, .45);}
.rt-cell{
position: relative;  display: flex; align-items: center; justify-content: center;  border-radius: 5px; cursor: pointer;  font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .2px;  color: #fff; user-select: none;  border: 1px solid rgba(0, 0, 0, .35);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);  transition: filter .12s, transform .08s;}
.rt-cell:hover{
filter: brightness(1.18);}
.rt-cell:active{
transform: scale(.96);}
.rt-cell.red{
background: linear-gradient(180deg, #c0392b, #99271b);}
.rt-cell.black{
background: linear-gradient(180deg, #26262c, #131317);}
.rt-cell.green{
background: linear-gradient(180deg, #1f8a5b, #12603d);}
.rt-cell.rt-win{
outline: 2px solid #e0b04f; outline-offset: -2px; z-index: 2;  box-shadow: 0 0 16px rgba(224, 176, 79, .8), inset 0 1px 0 rgba(255, 255, 255, .12);}
.rt-cell .chipmark{
position: absolute;}
/* ===== European Roulette: the betting layout is artwork =====
   The frame keeps the art's aspect and the cell grid is placed exactly inside
   its border, so every button lands on a drawn square. */
.rt-frame{
position: relative; width: 100%; aspect-ratio: 2.1978; background-image: var(--rt-table); background-size: 100% 100%; background-repeat: no-repeat;}
.rt-table{
position: absolute; inset: 3.38% 0.93% 1.69% 1.14%; display: grid; grid-template-columns: 6.39fr repeat(12, 7.096fr) 6.39fr; grid-template-rows: repeat(3, 20.18fr) 17.47fr 16.91fr; gap: 0; width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;}
.rt-cell{
position: relative; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: transparent; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease;}
/* the artwork supplies the red / black / green colours */
.rt-cell.red, .rt-cell.black, .rt-cell.green{
background: transparent; border-color: transparent;}
.rt-cell:hover{
background: rgba(255, 255, 255, 0.16);}
.rt-cell.rt-win{
background: rgba(224, 176, 79, 0.3); box-shadow: inset 0 0 0 2px #e0b04f; z-index: 2;}
.rt-lbl{
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.rt-mark{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 26px; padding: 3px 6px; border-radius: 999px; background: rgba(10, 14, 22, 0.84); border: 1px solid rgba(224, 176, 79, 0.85); color: #ffd97a; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease;}
.rt-mark.on{
opacity: 1;}

/* Keno board */.keno{
display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: 100%;}
.keno button{
aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--border);  background: var(--panel2); color: var(--text); cursor: pointer; font-weight: 600;}
.keno button.picked{
background: var(--accent); color: #1b1200; border-color: var(--accent);}
.keno button.hit{
background: var(--accent2);}
.keno button.miss{
opacity: .35;}
/* Video poker */.vp-cards{
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;}
/* Toast */.toast{
position: fixed; left: 50%; bottom: calc(26px + var(--dock-h, 0px)); transform: translateX(-50%) translateY(20px);  background: var(--panel2); border: 1px solid var(--accent); color: var(--text);  padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none;  transition: opacity .2s ease, transform .2s ease; z-index: 50;  max-width: min(92vw, 420px); text-align: center;}
.toast.show{
opacity: 1; transform: translateX(-50%) translateY(0);}
.ledger{
font-size: 12px; color: var(--muted);}
.ledger div{
display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--border);}
.ledger .pos{
color: var(--accent2);}
.ledger .neg{
color: var(--red);}
.user{
color: var(--accent); font-weight: 600;}
.auth-card{
max-width: 360px; margin: 60px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px;}
.auth-card h2{
margin: 0;}
.auth-hint{
color: var(--muted); font-size: 13px; margin: 0 0 8px;}
.auth-input{
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 14px;}
.auth-input:focus{
outline: none; border-color: var(--accent);}
.admin-head{
display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;}
.admin-table{
width: 100%; border-collapse: collapse; font-size: 13px;}
.admin-table th, .admin-table td{
padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);}
.admin-table th{
color: var(--muted); font-weight: 600;}
.admin-table .neg{
color: var(--red);}
.admin-table .pos{
color: var(--accent2);}
.badge{
display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px;}
.badge.admin{
background: rgba(224,176,79,.16); color: var(--accent);}
.badge.player{
background: rgba(47,158,110,.16); color: var(--accent2);}
.badge.blocked{
background: var(--wine-soft); color: var(--red);}
.stat-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;}
.stat{
background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 14px;}
.stat .v{
font-size: 22px; font-weight: 700;}
.stat .l{
color: var(--muted); font-size: 12px;}
.paytable{
width: 100%; border-collapse: collapse; font-size: 12px;}
.paytable td, .paytable th{
padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left;}
.paytable th{
color: var(--muted);}
/* ============ Modern design system ============ */.back{
display: inline-block;  margin-bottom: 16px;  color: var(--muted);  text-decoration: none;  font-size: 14px;  cursor: pointer;  transition: color 0.15s;}
.back:hover{
color: var(--accent);}
/* Scrollbar */::-webkit-scrollbar{
width: 10px; height: 10px;}
::-webkit-scrollbar-track{
background: var(--bg);}
::-webkit-scrollbar-thumb{
background: #2a3a52; border-radius: 6px;}
::-webkit-scrollbar-thumb:hover{
background: #384b68;}
/* Header */.topbar{
background: rgba(10, 14, 22, 0.7);  backdrop-filter: blur(14px);  -webkit-backdrop-filter: blur(14px);  box-shadow: 0 1px 0 rgba(224, 176, 79, 0.08), 0 8px 30px rgba(0, 0, 0, 0.35);}
.brand{
font-weight: 800; letter-spacing: 0.6px;}
.balance{
font-size: 22px;  font-weight: 700;  background: linear-gradient(180deg, #45d49b, var(--accent2));  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
/* .reset buttons: glass pill with gradient border (styled in base section above) *//* Lobby */.lobby-head{
margin-bottom: 26px;}
.lobby-head h1{
font-size: 30px;  font-weight: 800;  letter-spacing: 0.3px;  background: linear-gradient(90deg, var(--text), var(--accent));  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
/* staff-only game count next to the heading */
.lobby-count{
margin-left: 8px; font-size: 0.6em; font-weight: 700; letter-spacing: 0; opacity: 0.7; white-space: nowrap;}
.lobby-head p{
max-width: 640px; line-height: 1.55;}
.category{
position: relative;  padding-left: 14px;  font-weight: 700;  font-size: 13px;  letter-spacing: 1.2px;}
.category::before{
content: '';  position: absolute;  left: 0;  top: 50%;  transform: translateY(-50%);  width: 4px;  height: 16px;  border-radius: 2px;  background: linear-gradient(180deg, var(--wine), var(--accent));}
/* Game cards */.card{
position: relative;  display: block;  text-decoration: none;  color: inherit;  background: linear-gradient(165deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  border-radius: 18px;  padding: 20px;  cursor: pointer;  overflow: hidden;  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;}
.card::before{
content: '';  position: absolute;  inset: 0;  background: radial-gradient(420px 220px at 50% -20%, rgba(224, 176, 79, 0.14), transparent 60%);  opacity: 0;  transition: opacity 0.2s ease;}
.card:hover{
transform: translateY(-5px);  border-color: rgba(224, 176, 79, 0.55);  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(224, 176, 79, 0.12);}
.card:hover::before{
opacity: 1;}
.card .icon{
font-size: 32px; margin-bottom: 12px;}
.card-logo{
height: 58px; max-width: 100%; object-fit: contain; margin-bottom: 12px;}
.card h3{
font-size: 17px; font-weight: 700;}
.card .tag{
display: inline-block;  margin-top: 14px;  padding: 4px 10px;  border-radius: 20px;  background: rgba(224, 176, 79, 0.13);  border: 1px solid rgba(224, 176, 79, 0.2);  color: var(--accent);  font-size: 10px;  letter-spacing: 0.6px;  text-transform: uppercase;}
/* Auth */.auth-card{
max-width: 380px;  margin: 70px auto;  background: linear-gradient(165deg, var(--panel2), var(--panel));  border: 1px solid rgba(224, 176, 79, 0.25);  border-radius: 20px;  padding: 32px;  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);}
.auth-card h2{
font-size: 26px;  font-weight: 800;  letter-spacing: 0.4px;  background: linear-gradient(90deg, var(--accent), #f4d588);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
.auth-input{
padding: 12px 14px;  border-radius: 12px;  border: 1px solid var(--border);  background: var(--panel2);  color: var(--text);  font-size: 14px;  transition: border-color 0.15s, box-shadow 0.15s;}
.auth-input:focus{
border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15); outline: none;}
/* Game stage */.stage{
background: linear-gradient(180deg, #0e1522, #0a0f18);  border: 1px solid var(--border);  border-radius: 18px;  padding: 18px;  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);}
/* Buttons */.btn{
border-radius: 12px;  font-weight: 700;  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;}
.btn-primary{
background: linear-gradient(135deg, #e8b954, #cf9b2e);  color: #1b1200;  box-shadow: 0 6px 20px rgba(224, 176, 79, 0.25);}
.btn-primary:hover:not(:disabled){
filter: brightness(1.06); transform: translateY(-1px);}
.btn-ghost:hover:not(:disabled){
border-color: var(--accent); color: var(--text);}
.btn:disabled{
opacity: 0.45; cursor: not-allowed;}
/* Panels */.panel{
background: linear-gradient(165deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  border-radius: 16px;  padding: 16px;}
.panel h4{
margin: 0 0 12px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px;}
/* Chips */.chip{
border-radius: 10px;  font-weight: 800;  font-family: var(--font-display);  letter-spacing: 0.4px;  transition: border-color 0.12s, background 0.12s, transform 0.1s;}
.chip:hover{
border-color: var(--accent);}
.chip.active{
background-image: linear-gradient(135deg, #e8b954, #cf9b2e); background-color: #cf9b2e; border-color: transparent; color: #1b1200;}
.chip-img{
width: 100%;  height: auto;  aspect-ratio: 2 / 1;  padding: 0 8px;  border: none;  background-color: transparent;  background-image: var(--chip-normal);  background-repeat: no-repeat;  background-size: 100% 100%;  background-position: center;  color: #fff;  font-size: 18px;  font-weight: 900;  font-family: var(--font-display);  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);}
.chip-img:hover:not(:disabled){
background-image: var(--chip-hover);}
.chip-img:active:not(:disabled){
background-image: var(--chip-pressed);}
.chip-img.active{
background-image: var(--chip-active); background-color: transparent; color: #ffd700;}
.chip-img:disabled{
background-image: var(--chip-disabled);}
.bet-row-stack{
display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;}
/* WIN fly-over animation (slots) */.stage{
position: relative;}
.win-overlay{
position: absolute;  inset: 0;  overflow: hidden;  pointer-events: none;  background: rgba(0, 0, 0, 0.45);  opacity: 0;  z-index: 7;}
.win-fly{
position: absolute;  left: 50%;  top: 50%;  width: 72%;  max-width: 440px;  transform: translate(-50%, -50%);  pointer-events: none;  will-change: transform, opacity;  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));}
@keyframes win-shake{
0%, 100%{
transform: translate(0, 0) rotate(0);}
20%{
transform: translate(-4px, 2px) rotate(-0.5deg);}
40%{
transform: translate(4px, -2px) rotate(0.5deg);}
60%{
transform: translate(-3px, 1px) rotate(-0.4deg);}
80%{
transform: translate(3px, -1px) rotate(0.4deg);}
}
.stage.win-shake{
animation: win-shake 0.4s ease-in-out infinite;}
/* Graphic win counter (slots) */.win-digits{
display: flex;  gap: 4px;  justify-content: center;  align-items: center;  margin: 16px 0 4px;}
.win-digit{
height: 62px;  width: auto;  display: block;  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));}
/* Paytable (full-width below stage + sidebar) */.paytable{
width: 100%;  display: flex;  flex-wrap: wrap;  gap: 10px;  justify-content: center;}
.paytable-title{
width: 100%;  text-align: center;  font-size: 11px;  text-transform: uppercase;  letter-spacing: 1px;  color: var(--muted);}
.paytable-card{
display: flex;  flex-direction: column;  align-items: center;  gap: 3px;  min-width: 92px;  padding: 10px 12px;  background: var(--panel);  border: 1px solid var(--border);  border-radius: 12px;  transition: border-color 0.15s, transform 0.15s;}
.paytable-card:hover{
border-color: rgba(224, 176, 79, 0.4); transform: translateY(-2px);}
.paytable-icon{
width: 46px; height: 46px; object-fit: contain;}
.paytable-icon-text{
font-size: 22px; font-weight: 800;}
.paytable-amt{
font-size: 11.5px; font-weight: 400; letter-spacing: 0.2px; color: var(--muted);}
.paytable-amt b{
color: var(--accent); font-weight: 500;}
.paytable-rule{
font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6;}
.paytable-rule b{
color: var(--accent);}
/* ===== Admin layout ===== */
/* The panel menu is a tab strip across the top: the tables need the full width */
.admin-layout{
display: block;}
.admin-sidebar{
display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(28, 42, 61, 0.7), rgba(11, 15, 23, 0.88));}
.admin-brand{
display: flex; align-items: center; gap: 9px; flex: none; padding: 0 14px 0 4px; margin: 0; border-right: 1px solid var(--border); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); white-space: nowrap;}
.admin-brand::before{
content: ''; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), #f0c976); box-shadow: 0 0 10px rgba(224, 176, 79, 0.5);}
.admin-nav{
display: flex; flex-direction: row; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin;}
.admin-nav-item{
position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap; width: auto; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.08s ease;}
.admin-nav-item::before{
content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.16s ease;}
.admin-nav-item svg{
flex-shrink: 0; opacity: 0.85;}
.admin-nav-item:hover{
background: rgba(255, 255, 255, 0.045); color: var(--text);}
.admin-nav-item:active{
transform: translateY(1px);}
.admin-nav-item.active{
background: linear-gradient(135deg, rgba(224, 176, 79, 0.18), rgba(224, 176, 79, 0.05)); border-color: rgba(224, 176, 79, 0.32); color: var(--accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);}
.admin-nav-item.active::before{
transform: scaleX(1);}
.admin-main{
flex: 1; min-width: 0;}
.admin-header{
display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);}
.admin-header h2{
margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.2px;}
.admin-sub{
margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.admin-loading{
color: var(--muted); font-size: 13px; padding: 14px 0;}
.admin-layout .back{
display: inline-flex; margin-bottom: 14px; color: var(--muted); font-size: 13px; text-decoration: none;}
.admin-layout .back:hover{
color: var(--text);}
/* House balance — the headline number of the whole panel */
.house{
position: relative; overflow: hidden; padding: 20px 22px 18px; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(620px 210px at 12% -40%, rgba(224, 176, 79, 0.16), transparent 70%), linear-gradient(165deg, var(--panel2), var(--panel));}
.house.down{
background: radial-gradient(620px 210px at 12% -40%, var(--wine-glow), transparent 70%), linear-gradient(165deg, var(--panel2), var(--panel));}
.house::after{
content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent2), var(--accent));}
.house.down::after{
background: linear-gradient(90deg, var(--wine), var(--accent));}
.house-head{
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.house-label{
display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);}
.house-value{
margin-top: 6px; font-size: 40px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.05; color: var(--accent2);}
.house.down .house-value{
color: var(--red);}
.house-hint{
margin-top: 4px; font-size: 12.5px; color: var(--muted);}
.house-badge{
flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(47, 158, 110, 0.35); background: rgba(47, 158, 110, 0.14); color: var(--accent2); font-size: 12.5px; font-weight: 700;}
.house.down .house-badge{
border-color: var(--wine-line); background: var(--wine-soft); color: #f0a3a3;}
.house-rows{
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 18px; margin-top: 16px;}
.house-row{
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(38, 54, 77, 0.75); font-size: 13px; color: var(--muted);}
.house-row b{
color: var(--text); font-size: 14px;}
.house-bar{
display: flex; height: 8px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, 0.35);}
.house-bar i{
display: block; height: 100%;}
.house-bar .pays{
background: linear-gradient(90deg, #2f9e6e, #45d49b);}
.house-bar .edge{
background: linear-gradient(90deg, var(--accent), #f0c976);}
.house.down .house-bar .edge{
background: linear-gradient(90deg, var(--wine), #b0413f);}
.house-caption{
margin-top: 8px; font-size: 11.5px; color: var(--muted); opacity: 0.85;}
/* Stat KPI cards */
.stat-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 16px;}
.stat{
position: relative; background: linear-gradient(165deg, var(--panel2), var(--panel)); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px 15px; overflow: hidden; transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;}
.stat:hover{
transform: translateY(-2px); border-color: rgba(224, 176, 79, 0.35); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);}
.stat::after{
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2));}
.stat-ico{
display: inline-flex; margin-bottom: 10px; color: var(--accent); opacity: 0.9;}
.stat .v{
font-size: 26px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.1;}
.stat .l{
color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; margin-top: 7px;}
.stat .h{
margin-top: 4px; font-size: 11.5px; color: var(--muted); opacity: 0.85;}
/* Tables */
.admin-table{
width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: rgba(11, 15, 23, 0.6); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;}
.admin-table thead th{
color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; text-align: left; padding: 12px 14px; background: var(--panel2); border-bottom: 1px solid var(--border);}
.admin-table th.n, .admin-table td.n{
text-align: right; white-space: nowrap;}
.admin-table .share-col{
width: 140px;}
.admin-table td{
padding: 11px 14px; border-bottom: 1px solid rgba(38, 54, 77, 0.55); vertical-align: middle;}
.admin-table tbody tr:last-child td{
border-bottom: none;}
.admin-table tbody tr:nth-child(odd){
background: rgba(255, 255, 255, 0.015);}
.admin-table tbody tr{
transition: background 0.12s ease;}
.admin-table tbody tr:hover{
background: rgba(224, 176, 79, 0.06);}
.admin-table .game-cell{
font-weight: 600;}
.admin-table .neg{
color: var(--red);}
.admin-table .pos{
color: var(--accent2);}
.share{
display: block; height: 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden;}
.share i{
display: block; height: 100%; border-radius: 999px; transition: width 0.3s ease;}
.share.pos i{
background: linear-gradient(90deg, #2f9e6e, #45d49b);}
.share.neg i{
background: linear-gradient(90deg, var(--wine), #b0413f);}
/* Badges */.badge{
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;}
.badge.superadmin{
background: linear-gradient(135deg, rgba(224, 176, 79, 0.22), rgba(224, 176, 79, 0.1)); color: var(--accent);}
.badge.admin{
background: rgba(224, 176, 79, 0.16); color: var(--accent);}
.badge.cashier{
background: rgba(90, 140, 230, 0.16); color: #8fb1f5;}
.badge.player{
background: rgba(47, 158, 110, 0.16); color: var(--accent2);}
.badge.blocked{
background: var(--wine-soft); color: var(--red);}
.badge.tester{
background: rgba(155, 89, 182, 0.16); color: #c39bd3;}
.badge.partner{
background: rgba(230, 126, 34, 0.16); color: #f0a05a;}
.badge.streamer{
background: rgba(231, 76, 60, 0.16); color: #ec7063;}
.badge.meta{
background: rgba(138, 160, 189, 0.16); color: var(--muted);}
.badge.empty{
opacity: 0.6;}
/* Users */.user-cell{
display: flex; align-items: center; gap: 10px;}
.user-sub{
color: var(--muted); font-size: 12px;}
.user-avatar{
display: flex; align-items: center; justify-content: center;  width: 40px; height: 40px; border-radius: 50%;  overflow: hidden; flex-shrink: 0;  background: linear-gradient(135deg, rgba(224, 176, 79, 0.25), rgba(47, 158, 110, 0.2));  border: 1px solid var(--border);  color: var(--accent);  font-weight: 800;  font-size: 16px;}
.user-avatar img{
width: 100%; height: 100%; object-fit: cover;}
.user-detail-head{
display: flex; align-items: center; gap: 18px; margin: 14px 0 20px;}
.user-detail-head h2{
font-size: 22px;}
.user-form{
display: flex; flex-direction: column; gap: 8px;}
.perm-box{
display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0;}
.perm-item{
display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); cursor: pointer;}
/* Fatal banner: the page says what broke and how to get rid of the notice. The
   element itself carries its colours inline (see index.html); only the layout of
   the message plus its dismiss button lives here. */
#fatal{
align-items: flex-start; gap: 12px;}
.fatal-msg{
flex: 1; min-width: 0;}
.fatal-x{
flex-shrink: 0; padding: 2px 4px; border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.75;}
.fatal-x:hover{
opacity: 1;}
/* ===== Cashier =====
   The page is built from the admin panel's blocks (.admin-layout, .admin-header,
   .house, .stat-grid, .admin-table), so the two screens share one language and a
   change to the panel styling lands in both. Only the pieces that exist nowhere
   else — the amount field, the quick amounts, the method picker — live here. */
.cashier-hint{
margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5;}
.cashier-amount{
width: 100%;  font-size: 30px;  font-weight: 800;  padding: 14px 16px;  border-radius: 14px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.03);  color: var(--text);  text-align: center;  transition: border-color 0.15s ease, box-shadow 0.15s ease;}
.cashier-amount:focus{
outline: none; border-color: var(--accent);  box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15);}
/* quick amounts: pills in the panel's own language, not roulette chips */
.cashier-quick{
display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px;}
.amount-chip{
padding: 8px 14px;  border-radius: 10px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.04);  color: var(--text);  font-family: var(--font-display);  font-size: 13px;  font-weight: 700;  cursor: pointer;  transition: border-color 0.15s ease, background 0.15s ease;}
.amount-chip:hover{
border-color: rgba(224, 176, 79, 0.5);  background: rgba(224, 176, 79, 0.1);}
/* The method picker. The provider offers 42 methods across seven countries, so
   the list is grouped by country, scrolls inside its own box, and is narrowed
   by the search field — a grid of cards would have run several screens long. */
.cashier-search{
width: 100%;  padding: 10px 14px;  margin-bottom: 10px;  border-radius: 12px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.04);  color: var(--text);  font-size: 14px;}
.cashier-search:focus{
outline: none; border-color: var(--accent);}
.method-picker{
margin: 8px 0 14px;}
.method-list{
display: flex; flex-direction: column; gap: 5px; max-height: 272px; overflow-y: auto; padding-right: 4px;}
/* the country label stays put while its methods scroll under it */
.method-group-title{
position: sticky; top: 0; z-index: 1;  padding: 7px 4px 6px;  background: var(--panel);  color: var(--muted);  font-size: 11.5px;  font-weight: 700;  letter-spacing: 0.04em;  text-transform: uppercase;}
.method-item{
display: flex; align-items: center; justify-content: space-between; gap: 12px;  width: 100%;  text-align: left;  padding: 10px 14px;  border-radius: 12px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.03);  color: var(--text);  cursor: pointer;  transition: border-color 0.15s, background 0.15s;}
.method-item:hover{
border-color: rgba(224, 176, 79, 0.4); background: rgba(224, 176, 79, 0.06);}
.method-item.active{
border-color: var(--accent); background: rgba(224, 176, 79, 0.12);}
.method-item.method-auto{
margin-bottom: 8px; border-style: dashed;}
.method-left{
display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.method-cur{
flex-shrink: 0; color: var(--accent); font-size: 12px; font-weight: 700;}
/* the withdraw details share one row when there is room for it */
.cashier-form{
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;}
/* The tab panel drops its blocks straight into the page — the game sidebar
   spaces panels with flex `gap` instead — so a panel needs its own top offset
   or it sits flush against the .stat-grid above it. */
.cashier-content > .panel{
margin-top: 16px;}
.method-name{
font-weight: 700; font-size: 15px;}
.method-sub{
color: var(--muted); font-size: 12px;}
.cashier-submit{
width: 100%; padding: 14px; margin-top: 6px; font-size: 16px;}
/* Cashier + admin table details. `.num` was already used by the panel but never
   declared, so figures sat on proportional digits. */
.num{
font-variant-numeric: tabular-nums;}
.method-cell{
font-size: 12px;}
.method-cell div{
margin-top: 2px; color: var(--muted);}
/* the currency table in the admin settings keeps its inputs on one line */
.admin-mini{
width: 118px; padding: 8px 10px; font-size: 13px;}
/* Modal */.modal-backdrop{
position: fixed;  inset: 0;  z-index: 100;  display: flex;  align-items: center;  justify-content: center;  background: rgba(4, 7, 12, 0.72);  backdrop-filter: blur(6px);  -webkit-backdrop-filter: blur(6px);  animation: fade-in 0.18s ease;  padding: 16px;}
@keyframes fade-in{
from{
opacity: 0;}
to{
opacity: 1;}
}
.modal{
position: relative;  width: min(420px, 92vw);  max-height: 92vh;  overflow-y: auto;  background: linear-gradient(170deg, #16202f, #0e1522);  border: 1px solid rgba(224, 176, 79, 0.3);  border-radius: 22px;  padding: 26px;  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);  text-align: center;  animation: pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);}
@keyframes pop{
from{
transform: translateY(14px) scale(0.97); opacity: 0;}
to{
transform: none; opacity: 1;}
}
.modal h3{
margin: 0 0 4px; font-size: 18px;}
.modal-x{
position: absolute;  top: 14px;  right: 14px;  width: 32px;  height: 32px;  border-radius: 50%;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.05);  color: var(--muted);  cursor: pointer;  font-size: 14px;}
.modal-x:hover{
color: var(--text); border-color: var(--accent);}
.pay-amount{
font-size: 28px; font-weight: 800; color: var(--accent); margin: 6px 0 14px;}
.pay-status{
margin-top: 16px;  padding: 12px;  border-radius: 12px;  font-size: 14px;  font-weight: 600;  background: rgba(255, 255, 255, 0.05);  color: var(--muted);}
.pay-status.pending{
background: rgba(224, 176, 79, 0.12); color: var(--accent);}
.pay-status.ok{
background: rgba(47, 158, 110, 0.16); color: var(--accent2);}
/* Lobby tools */.lobby-tools{
display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;}
.lobby-search{
flex: 1;  min-width: 200px;  padding: 11px 16px;  border-radius: 12px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.04);  color: var(--text);  font-size: 14px;}
.lobby-search:focus{
outline: none; border-color: var(--accent);}
.lobby-cats{
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;}
.lobby-cat{
padding: 8px 16px;  border-radius: 999px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.04);  color: var(--muted);  font-size: 13px;  font-weight: 600;  cursor: pointer;  transition: color 0.15s, border-color 0.15s, background 0.15s;}
.lobby-cat:hover{
color: var(--text); border-color: rgba(224, 176, 79, 0.4);}
.lobby-cat.active{
background: linear-gradient(180deg, rgba(224, 176, 79, 0.2), rgba(224, 176, 79, 0.06));  border-color: rgba(224, 176, 79, 0.5);  color: var(--accent);}
.card-fav{
position: absolute;  top: 10px;  right: 10px;  width: 32px;  height: 32px;  border-radius: 50%;  border: 1px solid var(--border);  background: rgba(10, 14, 22, 0.7);  color: var(--muted);  cursor: pointer;  font-size: 15px;  z-index: 2;}
.card-fav:hover{
color: var(--accent); border-color: var(--accent);}
.card-fav.on{
color: var(--accent); border-color: rgba(224, 176, 79, 0.6); background: rgba(224, 176, 79, 0.15);}
/* VIP progress */.vip-bar{
height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden;}
.vip-fill{
height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.4s ease;}
/* Slots spin history */.spin-history{
display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px;}
.hist-pill{
padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.05); color: var(--muted);}
.hist-pill.win{
background: rgba(47, 158, 110, 0.18); color: var(--accent2);}
.hist-pill.lose{
background: var(--wine-soft); color: var(--red);}
a.user-chip{
text-decoration: none;}
/* ===== Chips: flat deck keys ===== */.chip{
position: relative; padding: 11px 14px; min-width: 0; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.22)); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--muted); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2px; cursor: pointer; box-shadow: none; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;}
.chip:hover:not(:disabled):not(.img-chip){
color: var(--text); border-color: rgba(224, 176, 79, 0.5); transform: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);}
.chip:active:not(:disabled):not(.img-chip){
transform: translateY(1px);}
.chip.active:not(.img-chip){
color: #1b1200; border-color: rgba(224, 176, 79, 0.9); background: linear-gradient(135deg, #e8b954, #cf9b2e); box-shadow: 0 6px 18px rgba(224, 176, 79, 0.28);}
.chip:disabled{
opacity: 0.45; cursor: not-allowed;}
/* bet grid: 3 per row (slots) */.bet-row-stack{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.bet-row-stack .chip{
min-width: 0; width: 100%;}
/* same glass surface for other option buttons */.lobby-cat{
border: 1px solid rgba(255, 255, 255, 0.14);  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));  backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px rgba(0, 0, 0, 0.28);  transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.15s ease;}
.lobby-cat:hover{
transform: translateY(-2px);  border-color: rgba(224, 176, 79, 0.5);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(224, 176, 79, 0.1);}
.lobby-cat.active{
border-color: rgba(224, 176, 79, 0.8);  background: linear-gradient(135deg, rgba(224, 176, 79, 0.4), rgba(224, 176, 79, 0.1));  color: #fff;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 0 3px rgba(224, 176, 79, 0.16), 0 8px 22px rgba(224, 176, 79, 0.2);}
/* Scratch card. The grid shape comes from the theme's config (`layout`), so a
   landscape board can ship the same client: the variables fall back to the
   portrait 3x3 of the original themes. */.scratch-grid{
display: grid; grid-template-columns: repeat(var(--scratch-cols, 3), 1fr); gap: 10px; width: 100%; max-width: var(--scratch-max, 420px); margin: auto;}
.scratch-card{
position: relative; aspect-ratio: var(--scratch-aspect, 2 / 3); padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, var(--panel2), var(--panel)); cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;}
.scratch-card:hover:not(.opened){
transform: translateY(-2px); border-color: rgba(224, 176, 79, 0.5);}
.scratch-symbol{
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 9vw, 44px); color: var(--muted);}
.scratch-face{
width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;}
.scratch-foil{
position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; transition: opacity 0.28s ease;}
.scratch-card.opened{
cursor: default;}
.scratch-card.opened .scratch-foil{
opacity: 0; pointer-events: none;}
.scratch-card.win{
 border-color: var(--accent); box-shadow: 0 0 0 2px rgba(224, 176, 79, 0.4), 0 0 22px rgba(224, 176, 79, 0.35);}
.scratch-grid.done .scratch-card{
 pointer-events: none;}
/* Cards the round never picked, turned over once it ends: readable, but held
 behind a grey mask so they cannot be taken for the player's own picks. */.scratch-card.peek{
 cursor: default; border-color: var(--border); box-shadow: none;}
.scratch-card.peek .scratch-foil{
 opacity: 0; pointer-events: none;}
.scratch-card.peek .scratch-symbol{
 filter: grayscale(0.65) brightness(0.72);}
.scratch-card.peek::after{
 content: ''; position: absolute; inset: 0; background: rgba(126, 138, 156, 0.42); border-radius: inherit; pointer-events: none;}
/* Mines */.mines-grid{
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 350px;}
.mine-cell{
aspect-ratio: 1;  border-radius: 10px;  border: 1px solid var(--border);  background: linear-gradient(160deg, var(--panel2), var(--panel));  color: var(--text);  font-size: 20px;  cursor: pointer;  transition: transform 0.1s, border-color 0.15s;}
.mine-cell:hover{
border-color: var(--accent); transform: translateY(-2px);}
.mine-cell.safe{
background: rgba(47, 158, 110, 0.18); border-color: var(--accent2); color: var(--accent2);}
.mine-cell.mine{
background: var(--wine-soft); border-color: var(--wine-line); color: var(--red);}
/* ===== Topbar redesign ===== */.topbar{
display: flex;  align-items: center;  justify-content: space-between;  gap: 18px;  height: 66px;  padding: 0 22px;  overflow: visible;  background: linear-gradient(180deg, rgba(13, 18, 28, 0.94), rgba(10, 14, 22, 0.8));  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);  border-bottom: 1px solid rgba(224, 176, 79, 0.16);  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);  position: sticky;  top: 0;  z-index: 20;}
.balance-wrap{
display: flex; align-items: center; gap: 10px;}
.wallet-pill{
display: flex;  align-items: center;  gap: 8px;  padding: 8px 16px;  border-radius: 999px;  background: linear-gradient(180deg, rgba(224, 176, 79, 0.13), rgba(224, 176, 79, 0.03));  border: 1px solid rgba(224, 176, 79, 0.3);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25);}
.wallet-ic{
color: var(--accent); font-size: 14px;}
.balance{
font-size: 19px;  font-weight: 800;  background: linear-gradient(180deg, #f4d588, var(--accent));  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
.credits{
color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;}
.user-chip{
display: flex;  align-items: center;  gap: 8px;  padding: 5px 14px 5px 5px;  border-radius: 999px;  background: rgba(255, 255, 255, 0.04);  border: 1px solid var(--border);}
.user-av{
display: flex;  align-items: center;  justify-content: center;  width: 30px;  height: 30px;  border-radius: 50%;  overflow: hidden;  flex-shrink: 0;  background: linear-gradient(135deg, rgba(224, 176, 79, 0.32), rgba(47, 158, 110, 0.26));  color: var(--accent);  font-weight: 800;  font-size: 13px;}
.user-av img{
width: 100%; height: 100%; object-fit: cover;}
.user{
color: var(--text); font-weight: 600; font-size: 13px;}
.nav-actions{
display: flex; align-items: center; gap: 8px;}
.reset{
position: relative;  margin: 0;  padding: 9px 16px 9px 34px;  border: 1px solid var(--border);  border-radius: 12px;  background: rgba(255, 255, 255, 0.045);  color: var(--text);  font-size: 13px;  font-weight: 600;  letter-spacing: 0.2px;  cursor: pointer;  text-decoration: none;  white-space: nowrap;  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;}
.reset::before{
position: absolute;  left: 13px;  top: 50%;  transform: translateY(-50%);  font-size: 13px;  opacity: 0.9;}
.reset:hover{
transform: translateY(-2px);  border-color: rgba(224, 176, 79, 0.5);  background: rgba(224, 176, 79, 0.1);  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(224, 176, 79, 0.08);}
.reset:active{
transform: translateY(0);}
.lang-select{
background: rgba(255, 255, 255, 0.045);  color: var(--text);  border: 1px solid var(--border);  border-radius: 12px;  padding: 9px 10px;  font-size: 13px;  cursor: pointer;}
.lang-select:focus{
outline: none; border-color: var(--accent);}
@media (max-width: 900px){
.topbar{
height: 60px; padding: 0 14px; gap: 10px;}
.burger{
display: inline-flex;}
.nav-actions{
position: absolute;    top: 58px;    left: 12px;    right: 12px;    flex-direction: column;    align-items: stretch;    gap: 8px;    padding: 14px;    border-radius: 18px;    background: rgba(16, 22, 33, 0.98);    border: 1px solid var(--border);    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    opacity: 0;    transform: translateY(-12px) scale(0.98);    transform-origin: top right;    pointer-events: none;    transition: opacity 0.2s ease, transform 0.2s ease;    z-index: 40;}
.nav-actions.open{
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}
.nav-actions .reset{
text-align: left; padding: 12px 16px 12px 42px;}
.nav-actions .lang-select{
width: 100%;}
.credits{
display: none;}
.user{
display: none;}
.user-chip{
padding: 4px;}
.brand{
width: 92px;}
.brand img{
height: 74px;}
}
/* ---- Game card / header meta ---- */.card-meta{
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;}
.card-meta .tag{
margin-top: 0;}
/* category and series read as different kinds of label */
.card-meta .tag.cat{
background: rgba(224, 176, 79, 0.13); border-color: rgba(224, 176, 79, 0.25); color: var(--accent);}
.card-meta .tag.series{
background: rgba(90, 140, 230, 0.14); border-color: rgba(90, 140, 230, 0.32); color: #8fb1f5;}
.game-meta{
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px;}
.game-meta .tag{
padding: 3px 9px; border-radius: 20px; background: rgba(224, 176, 79, 0.13);  border: 1px solid rgba(224, 176, 79, 0.2); color: var(--accent);  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;}
.game-head-main{
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;}
.tag-link{
text-decoration: none;}
.tag-link:hover{
background: rgba(224, 176, 79, 0.25);}
/* ---- Blocking notice (reality check, limits) ---- */.notice-overlay{
position: fixed; inset: 0; z-index: 200;  display: flex; align-items: center; justify-content: center;  background: rgba(4, 7, 12, 0.72); backdrop-filter: blur(3px);  padding: 20px;}
.notice-box{
max-width: 400px; width: 100%;  background: linear-gradient(165deg, var(--panel2), var(--panel));  border: 1px solid rgba(224, 176, 79, 0.3);  border-radius: 18px; padding: 24px;  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);}
.notice-box h3{
margin: 0 0 10px; font-size: 18px;}
.notice-box p{
margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5;}
.notice-box .btn{
width: 100%; justify-content: center;}
.prof-field{ display: flex;  flex-direction: column;  gap: 5px;  font-size: 12px;  color: var(--muted);}
/* ---- Roulette marquee + trends + small buttons ---- */.rt-marquee{
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;  width: 100%; padding: 8px 10px; border-radius: 10px;  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border);  min-height: 38px;}
.rt-pill{
display: inline-flex; align-items: center; justify-content: center;  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 50%;  font-size: 11px; font-weight: 700; color: #fff;  border: 1px solid rgba(255, 255, 255, 0.14);}
.rt-pill.red{
background: linear-gradient(180deg, #c0392b, #99271b);}
.rt-pill.black{
background: linear-gradient(180deg, #2b2b32, #141418);}
.rt-pill.green{
background: linear-gradient(180deg, #1f8a5b, #12603d);}
.rt-pill.hot{
box-shadow: 0 0 0 2px var(--wine-line), 0 0 12px var(--wine-glow);}
.rt-pill.cold{
box-shadow: 0 0 0 2px rgba(90, 150, 255, 0.6); opacity: 0.85;}
.rt-hotcold{
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;}
.rt-hc-label{
font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-right: 2px;}
.rt-empty{
color: var(--muted); font-size: 12px;}
.rt-keys{
color: var(--muted); font-size: 11px; margin: 10px 0 0; line-height: 1.5;}
.btn-sm{
padding: 6px 10px; font-size: 12px;}

/* Game control rendered from artwork (chicken road cross / cash out) */
.art-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 132px;
  padding: 0;
  border: none;
  /* the artwork carries its own shape — strip the gold gradient, tint and glow
     that .btn-primary would otherwise paint around it */
  background: none;
  background-image: var(--art);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  transition: transform .08s, filter .15s;
}
.art-btn:hover:not(:disabled) { filter: brightness(1.08); }
.art-btn:active:not(:disabled) { transform: scale(.97); }
.art-btn:disabled { filter: grayscale(.75) brightness(.62); cursor: not-allowed; }

/* Chip-sized control painted from artwork (universal STOP / FAST buttons).
   The artwork spells its own label, so the text stays in the DOM for assistive
   tech but is collapsed visually here. */
.img-chip {
  min-width: 0;
  height: 52px;
  aspect-ratio: 1.75;            /* the universal button art is 1792x1024 */
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: var(--chip-art);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition: transform .08s, filter .15s;
}
/* Rows holding the STOP / FAST art chips: keep the pills on one centred line. */
.img-chip:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: none;
  filter: brightness(1.1);
}
.img-chip:active { transform: scale(.97); }
.img-chip.active {
  border: none;
  background-color: transparent;
  /* a toggle may ship separate "pressed" art; fall back to the base art */
  background-image: var(--chip-art-active, var(--chip-art));
  /* .chip.active paints its gradient through the `background` shorthand, which
     resets these to auto/repeat/0% 0% at higher specificity — restate them */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: none;
  color: transparent;
}
.img-chip:disabled { filter: grayscale(.75) brightness(.6); cursor: not-allowed; }

/* Full-page game backdrop: let the artwork show behind the sticky header too */
body.has-backdrop .topbar {
  background: rgba(10, 14, 22, 0.42);
  backdrop-filter: blur(3px);
}

/* Admin: per-game page backdrop upload */
.bg-preview {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

/* ===== Lobby hero carousel ===== */
.hero{
position: relative; margin: 0 0 22px; height: 340px; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0, 0, 0, .45);}
.hero-slide{
position: absolute; inset: 0; display: block; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .85s ease;}
.hero-slide.active{
opacity: 1; pointer-events: auto;}
.hero-art{
position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06);}
.hero-slide.active .hero-art{
animation: hero-zoom 9s ease-out both;}
@keyframes hero-zoom{ from{ transform: scale(1.12); } to{ transform: scale(1); } }
.hero-scrim{
position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 20, .1) 0%, rgba(8, 12, 20, .5) 55%, rgba(8, 12, 20, .92) 100%), radial-gradient(125% 95% at 50% 28%, rgba(8, 12, 20, 0) 32%, rgba(8, 12, 20, .6) 100%);}
.hero-content{
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 22px 22px 48px; text-align: center;}
.hero-logo{
max-height: 84px; max-width: min(320px, 70%); object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .65));}
.hero-slide.active .hero-logo{
animation: hero-float 6s ease-in-out infinite;}
@keyframes hero-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.hero-name{
font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; letter-spacing: .2px; text-shadow: 0 2px 16px rgba(0, 0, 0, .7);}
.hero-desc{
max-width: 560px; color: #d9e2ee; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 10px rgba(0, 0, 0, .7);}
.hero-cta{
position: relative; overflow: hidden; margin-top: 7px; padding: 10px 24px; border-radius: 999px; background: linear-gradient(135deg, #e8b954, #cf9b2e); color: #1b1200; font-family: var(--font-display); font-weight: 800; letter-spacing: .4px; box-shadow: 0 10px 26px rgba(224, 176, 79, .32);}
.hero-cta::after{
content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); transition: left .55s ease;}
.hero-slide:hover .hero-cta::after{
left: 130%;}
.hero-tags{
display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 3px;}
.hero-tag{
padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #eaf1fb; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; backdrop-filter: blur(6px);}
.hero-nav{
position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 14, 22, .45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; transform: translateY(-50%); transition: opacity .2s ease, background .2s ease, transform .12s ease;}
.hero:hover .hero-nav, .hero:focus-within .hero-nav{
opacity: 1;}
.hero-nav:hover{
background: rgba(224, 176, 79, .88); color: #1b1200;}
.hero-nav:active{
transform: translateY(-50%) scale(.94);}
.hero-nav.prev{ left: 12px; }
.hero-nav.next{ right: 12px; }
.hero-dots{
position: absolute; left: 0; right: 0; bottom: 15px; z-index: 3; display: flex; gap: 7px; justify-content: center;}
.hero-dot{
width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, .42); cursor: pointer; transition: width .3s ease, background .3s ease;}
.hero-dot.active{
width: 26px; background: var(--accent);}
.hero-bar{
position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(255, 255, 255, .12);}
.hero-bar i{
display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e8b954, #cf9b2e);}
.hero:not(.paused) .hero-bar i{
animation: hero-fill var(--hero-rotate, 7s) linear forwards;}
.hero.paused .hero-bar i{
animation-play-state: paused;}
@keyframes hero-fill{ from{ width: 0; } to{ width: 100%; } }
@media (max-width: 620px){
/* Phones keep the hero deliberately lean. The blurb is the only block here that
   is not a link target, and leaving it in made the content taller than the hero
   itself — which pushed the Play button down into the dots. */
.hero{ height: 236px; }
.hero-content{ gap: 5px; padding: 16px 16px 42px; }
.hero-logo{ max-height: 54px; }
.hero-name{ font-size: 19px; }
.hero-desc{ display: none; }
.hero-cta{ padding: 9px 20px; font-size: 14px; }
.hero-tag{ font-size: 10px; padding: 3px 9px; }
.hero-nav{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.hero-slide, .hero-slide.active .hero-art, .hero-slide.active .hero-logo, .hero-bar i{ animation: none; transition: none; }
.hero-slide.active .hero-art{ transform: none; }
}

/* ===== Site footer ===== */
.site-footer{
max-width: 1160px; margin: 0 auto 44px; padding: 24px 24px 26px; border: 1px solid rgba(224, 176, 79, 0.08); border-radius: 22px; background: rgba(10, 14, 22, 0.72); backdrop-filter: blur(6px); color: var(--muted); font-size: 12.5px; line-height: 1.6;}
.footer-inner{
display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
.footer-top{
display: flex; align-items: center; gap: 12px;}
.footer-age{
display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid var(--red); border-radius: 50%; background: rgba(216, 75, 75, 0.12); color: #ff9a9a; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.3px;}
.footer-resp{
font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.2px;}
.footer-warn{
max-width: 620px; margin: 0;}
.footer-links{
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 4px 0 2px;}
.footer-link{
padding: 0 0 2px; border: none; border-bottom: 1px solid transparent; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;}
.footer-link:hover{
color: #ffd97a; border-bottom-color: currentColor;}
.footer-legal{
max-width: 780px; margin: 2px 0 0; color: #6f819c; font-size: 11.5px;}
@media (max-width: 620px){
.site-footer{ margin: 0 12px 30px; padding: 20px 16px 22px; }
.footer-top{ flex-direction: column; gap: 8px; }
}

/* ===== Game control deck ===== */
.bet-body{
display: flex; flex-direction: column; gap: 12px;}
.stepper{
display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px;}
.step-btn{
height: 54px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); color: var(--text); font-size: 20px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;}
.step-btn:hover:not(:disabled){
background: rgba(255, 255, 255, 0.06); border-color: rgba(224, 176, 79, 0.45);}
.step-btn:disabled{
opacity: 0.35; cursor: not-allowed;}
.stake-value{
height: 54px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; padding: 0 8px;}
.stake-num{
font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;}
.ladder{
-webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;}
.ladder::-webkit-slider-runnable-track{
height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--border) var(--fill, 0%));}
.ladder::-webkit-slider-thumb{
-webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);}
.ladder::-moz-range-track{
height: 6px; border-radius: 999px; background: var(--border);}
.ladder::-moz-range-progress{
height: 6px; border-radius: 999px; background: var(--accent);}
.ladder::-moz-range-thumb{
width: 18px; height: 18px; border: 0; border-radius: 999px; background: #fff;}
.ladder-ticks{
display: flex; justify-content: space-between; padding: 0 2px; margin-top: 2px;}
.ladder-ticks i{
width: 2px; height: 5px; border-radius: 1px; background: var(--border);}
.ladder-ticks i.on{
background: rgba(224, 176, 79, 0.6);}
.bet-body .bet-row{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
/* ===== Autoplay panel (shared by every game) ===== */
/* The header is a control surface: the whole row opens the panel, the chevron
   says so, and while folded a small summary shows the current setup. */
.auto-head{
cursor: pointer; margin: -6px -8px 13px; padding: 6px 8px; border-radius: 10px; transition: background 0.15s ease;}
.auto-head:hover{
background: rgba(255, 255, 255, 0.045);}
.auto-head:active{
transform: translateY(1px);}
.auto-sum{
margin-left: auto; margin-right: 9px; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;}
.auto-panel .auto-sum[hidden]{
display: none;}
.mod-caret{
width: 7px; height: 7px; margin-top: -3px; margin-left: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform 0.18s ease, border-color 0.15s ease;}
.auto-head:hover .mod-caret{
border-color: var(--text);}
.auto-panel.is-open .mod-caret{
transform: rotate(-135deg);}
.auto-panel .auto-run[hidden], .auto-panel .auto-body[hidden]{
display: none;}
.auto-run{
margin-bottom: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.25);}
.auto-run-top{
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 12.5px; color: var(--muted);}
.auto-run-cnt b{
color: var(--text); font-weight: 700;}
.bar{
height: 6px; border-radius: 999px; background: var(--border); overflow: hidden;}
.bar i{
display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #f0c976); transition: width 0.25s ease;}
.auto-field + .auto-field{
margin-top: 14px;}
.auto-field-label{
display: block; margin-bottom: 7px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.auto-counts{
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;}
.auto-counts.locked, .auto-seg.locked{
opacity: 0.55; pointer-events: none;}
.auto-opt{
position: relative; display: block;}
.auto-opt input{
position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;}
.auto-opt span{
display: grid; place-items: center; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: var(--muted); font-size: 13px; font-weight: 700; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;}
.auto-opt:hover span{
color: var(--text); border-color: rgba(224, 176, 79, 0.45);}
.auto-opt.on span{
color: #1b1200; background: linear-gradient(135deg, var(--accent), #cf9b2e); border-color: transparent;}
.auto-opt input:focus-visible + span{
outline: 2px solid var(--accent); outline-offset: 2px;}
.auto-seg{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.25);}
.auto-seg-btn{
padding: 9px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;}
.auto-seg-btn:hover{
color: var(--text);}
.auto-seg-btn.on{
color: var(--text); background: rgba(224, 176, 79, 0.16); box-shadow: inset 0 0 0 1px rgba(224, 176, 79, 0.4);}
.auto-seg-btn:disabled{
cursor: not-allowed;}
.auto-cond{
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px;}
.auto-cond-row{
display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted);}
.auto-cond-row > span{
line-height: 1.35;}
.sw{
position: relative; display: block; width: 40px; height: 23px; flex: none; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); transition: background 0.15s ease, border-color 0.15s ease;}
.sw input{
position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;}
.sw i{
position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 999px; background: var(--muted); transition: transform 0.15s ease, background 0.15s ease;}
.sw input:checked ~ i{
transform: translateX(17px); background: var(--accent);}
.sw:has(input:checked){
border-color: rgba(224, 176, 79, 0.5); background: rgba(224, 176, 79, 0.14);}
.sw input:disabled ~ i{
opacity: 0.5;}
.auto-amt{
display: inline-flex; align-items: center; gap: 6px; flex: none;}
.auto-amt span{
font-size: 12px; line-height: 1; color: var(--text); opacity: 0.7; white-space: nowrap;}
.auto-amt input{
width: 78px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(0, 0, 0, 0.3); color: var(--text); font-size: 13px; text-align: right;}
.auto-amt input:focus{
outline: 2px solid rgba(224, 176, 79, 0.35); border-color: var(--accent);}
.auto-amt input:disabled{
opacity: 0.55;}
.auto-note{
margin: 0; font-size: 11.5px; color: var(--muted); opacity: 0.85;}
.auto-start{
margin-top: 14px;}
.btn-block{
width: 100%; justify-content: center; text-align: center;}
.mod-head{
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px;}
.mod-head .mod-title{
margin: 0;}
.mod-toggle{
padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease;}
.mod-toggle:hover{
color: var(--text); background: rgba(255, 255, 255, 0.05);}
.mod-toggle[aria-expanded="true"]{
color: var(--text);}
.mod-title{
margin: 0 0 13px; font-size: 17px; font-weight: 700;}
.panel.mod > .result-line{
margin-top: 10px;}

/* ===== Game page: board (left) + deck (right rail) ===== */
.game-crumb{
display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted);}
.game-crumb a{
color: var(--muted); text-decoration: none;}
.game-crumb a:hover{
color: var(--text);}
.game-crumb .sep{
opacity: 0.45;}
.game-crumb .cur{
color: var(--text);}
.game-body{
display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start;}
.sidebar.deck{
position: sticky; top: 84px; align-self: start;}
.board-head{
display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;}
.board-tools{
display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none;}
.board-fav{
width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;}
.board-fav:hover{
color: var(--accent); border-color: var(--accent);}
.board-fav.on{
color: var(--accent); border-color: rgba(224, 176, 79, 0.6); background: rgba(224, 176, 79, 0.15);}

/* ===== Game art editor (board header, superadmin) ===== */
.game-editor{
width: min(560px, 92vw); max-height: 86vh; overflow: auto;}
.game-editor h3{
margin: 0 0 6px;}
.editor-block{
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);}
.editor-block h4{
margin: 0 0 10px; font-size: 14px;}
.art-preview{
display: block; width: 100%; max-height: 160px; object-fit: contain; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.32);}
.art-note{
margin: 0 0 10px; color: var(--muted); font-size: 12px; word-break: break-all;}
.board-brand{
display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 0;}
.board-brand .game-logo{
max-height: 64px; max-width: 220px; object-fit: contain; margin: 0; flex: none;}
.board-brand-txt{
min-width: 0;}
.board-badge{
display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);}
.board-title{
margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 29px); font-weight: 800; letter-spacing: -0.02em;}
/* The title and its "i". The description used to sit under the name and cost a
   line of screen on a phone, so it moved into a popover that the stylesheet only
   reveals on hover when the device really has a pointer — otherwise a tap would
   leave it stuck open. Tapping the button toggles it everywhere. */
.board-name-row{
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.info-tip{
position: relative; display: inline-flex; flex: none;}
.info-btn{
display: inline-flex; align-items: center; justify-content: center;  width: 22px; height: 22px; padding: 0;  border-radius: 50%;  border: 1px solid rgba(224, 176, 79, 0.5);  background: rgba(224, 176, 79, 0.12);  color: var(--accent);  font-family: var(--font-display);  font-size: 13px; font-weight: 800; line-height: 1;  cursor: pointer;}
.info-btn:hover{
background: rgba(224, 176, 79, 0.28);}
.info-pop{
position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;  display: none;  width: max-content;  max-width: min(340px, calc(100vw - 40px));  padding: 10px 12px;  border-radius: 12px;  border: 1px solid var(--border);  background: var(--panel2);  color: #d9e2ee;  font-size: 12.5px;  font-weight: 400;  letter-spacing: 0;  line-height: 1.5;  text-align: left;  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);}
.info-tip.open .info-pop{
display: block;}
@media (hover: hover) and (pointer: fine){
  .info-tip:hover .info-pop{ display: block;}
}
@media (max-width: 1080px){
.game-body{ grid-template-columns: 1fr; gap: 16px; }
.sidebar.deck{ position: static; }
}
@media (max-width: 620px){
.board-brand .game-logo{ max-height: 46px; max-width: 150px; }
.board-title{ font-size: 20px; }
}

/* Mobile action dock (see public/js/mobileDock.js): the controls that start and
   decide a round move into a glass bar fixed to the bottom edge, because on a
   phone the deck sits under the board and they end up a screenful away from it.
   The page takes --dock-h of extra room so nothing hides behind the bar, and the
   toast reads the same variable so it never lands underneath. */
.mobile-dock{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;  display: flex; flex-direction: column; gap: 8px;  width: 100%; max-width: 720px; margin: 0 auto;  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));  border-radius: 18px 18px 0 0;  border-top: 1px solid rgba(224, 176, 79, 0.32);  background: linear-gradient(180deg, rgba(17, 24, 36, 0.74), rgba(10, 14, 22, 0.95));  backdrop-filter: blur(18px) saturate(1.25);  -webkit-backdrop-filter: blur(18px) saturate(1.25);  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.5);  animation: dock-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);}
@keyframes dock-in{
from{ transform: translateY(102%);}  to{ transform: translateY(0);}}
.mobile-dock > *{
width: 100%; margin: 0;}
.mobile-dock .btn, .mobile-dock .spin-img-btn{
width: 100%;}
.mobile-dock .btn-row, .mobile-dock .keno-actions, .mobile-dock .mines-actions{
display: flex; flex-wrap: wrap; gap: 6px;}
.mobile-dock .btn-row > .btn, .mobile-dock .keno-actions > .btn, .mobile-dock .mines-actions > .btn{
flex: 1 1 92px; min-width: 0; padding: 12px 10px;}
/* the slots win counter rides along above its button, just tighter */
.mobile-dock .spin-block{
gap: 4px;}
/* How the last round went. On a phone the deck's own result line is off-screen, so
   the dock repeats the outcome where the thumb already is — above the controls,
   because a bar that grew downwards would push the action button out of reach. It
   keeps its space only while it has something to say. */
.dock-outcome{
display: none;  padding: 7px 10px;  border-radius: 12px;  text-align: center;  font-family: var(--font-display);  font-size: 14px;  font-weight: 800;  letter-spacing: 0.03em;}
.dock-outcome.show{
display: block;}
.dock-outcome.win{
color: #d9ffef;  border: 1px solid rgba(47, 158, 110, 0.6);  background: linear-gradient(135deg, rgba(47, 158, 110, 0.34), rgba(47, 158, 110, 0.10));  animation: result-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);}
.dock-outcome.lose{
color: #ffe2e2;  border: 1px solid rgba(216, 75, 75, 0.6);  background: linear-gradient(135deg, rgba(216, 75, 75, 0.32), rgba(216, 75, 75, 0.10));  animation: result-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);}
/* Decisions that cannot be taken right now (hit/stand before the deal, raise/fold
   before the cards) only eat space in a bar this small, so they stand down until
   they mean something. The primary action always stays, even while it is busy —
   its disabled state is the player's feedback that a round is running. */
.mobile-dock .btn-action:disabled{
display: none;}
body.mobile-dock-on{
padding-bottom: var(--dock-h, 0px);}
@media (prefers-reduced-motion: reduce){
  .mobile-dock{ animation: none;}
  .dock-outcome.win, .dock-outcome.lose{ animation: none;}
}

/* A themed button image is beautiful on a desktop and a waste of a phone screen:
   it is tall, its lettering is decorative, and it pushes the board off the view.
   On mobile the art steps aside for a glass button that says what it does — the
   label was already there for screen readers, so no client had to change. */
@media (max-width: 900px){
  .spin-img-btn{
    display: flex; align-items: center; justify-content: center;  height: 52px;  aspect-ratio: auto !important;  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) !important;  border: 1px solid rgba(224, 176, 79, 0.45);  border-radius: 14px;  color: var(--accent);  font-family: var(--font-display);  font-size: 17px;  font-weight: 800;  letter-spacing: 0.04em;  text-transform: uppercase;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.32);  backdrop-filter: blur(14px) saturate(1.2);  -webkit-backdrop-filter: blur(14px) saturate(1.2);}
  .spin-img-btn::after{
    content: attr(aria-label);}
  .spin-img-btn:hover:not(:disabled), .spin-img-btn:active:not(:disabled){
    background: linear-gradient(180deg, rgba(224, 176, 79, 0.26), rgba(224, 176, 79, 0.08)) !important;}
  .spin-img-btn:disabled{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;  color: var(--muted);  border-color: var(--border);}
}

/* Mines: artwork inside a revealed tile */
.mine-cell{
display: flex; align-items: center; justify-content: center;}
.mine-bomb, .mine-smile{
width: 64%; height: 64%; object-fit: contain; pointer-events: none;}
/* the START / CASH OUT artwork stacks, each button full width */
.mines-actions{
display: grid; gap: 10px;}

/* ===== Topbar: brand, centred nav, wallet, player menu ===== */
/* Three tracks with equal flexible sides: the middle one is centred in the bar
   itself, so the nav sits on the screen axis no matter how wide the logo or the
   wallet get. Columns are explicit because the nav leaves the flow on narrow
   screens — auto-placement would then drop the wallet into the middle track. */
.topbar{
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; height: 68px; padding: 0 22px; overflow: visible; position: sticky; top: 0; z-index: 20;}
.brand{
grid-column: 1; justify-self: start;}
.mainnav{
grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 26px;}
#nav-actions{
grid-column: 3; justify-self: end;}
.mainnav-link{
position: relative; padding: 6px 2px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 0.15s ease;}
.mainnav-link:hover{
color: var(--text);}
.mainnav-link[aria-current="page"]{
color: var(--text);}
.mainnav-link[aria-current="page"]::after{
content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent);}
.topnav-actions{
display: flex; align-items: center; gap: 10px;}
.wallet{
display: flex; align-items: center; gap: 14px; padding: 5px 5px 5px 16px; border: 1px solid var(--border); border-radius: 999px; background: rgba(0, 0, 0, 0.28);}
.wallet-txt{
display: flex; flex-direction: column; line-height: 1.15;}
.wallet .wl{
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);}
.wallet .wv{
font-size: 15px; font-weight: 700; color: var(--text);}
.wallet .credits{
font-size: 11px; font-weight: 500; color: var(--muted);}
.dep-btn{
display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(224, 176, 79, 0.9); background: linear-gradient(135deg, #e8b954, #cf9b2e); color: #1b1200; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-decoration: none; transition: filter 0.15s ease, transform 0.06s ease;}
.dep-btn:hover{
filter: brightness(1.06);}
.dep-btn:active{
transform: translateY(1px);}
.avatar{
display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); color: var(--text); cursor: pointer; overflow: hidden; transition: border-color 0.15s ease;}
.avatar:hover{
border-color: rgba(224, 176, 79, 0.6);}
.avatar img{
width: 100%; height: 100%; object-fit: cover;}
.user-av{
font-family: var(--font-display); font-weight: 800; font-size: 15px;}
.menu{
position: relative;}
.menu-panel{
position: absolute; right: 0; top: calc(100% + 10px); width: 248px; padding: 6px; display: none; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6); z-index: 40;}
.menu-panel.is-open{
display: block;}
.menu-head{
padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);}
.menu-head .mn{
font-size: 14px; font-weight: 700; color: var(--text);}
.menu-head .me{
font-family: var(--font-display); font-size: 11.5px; color: var(--muted);}
.menu-item{
display: flex; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font-family: var(--font-ui); font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease;}
.menu-item:hover{
background: rgba(255, 255, 255, 0.06);}
.menu-item.danger{
color: #f0a6b6;}
.menu-sep{
height: 1px; margin: 6px 4px; background: var(--border);}
.lang-select{
height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); color: var(--text); font-family: var(--font-ui); font-size: 12.5px; cursor: pointer;}
.lang-select:focus{
outline: none; border-color: var(--accent);}
@media (max-width: 900px){
.mainnav{
position: absolute; top: 62px; left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 12px; border-radius: 16px; background: rgba(16, 22, 33, 0.98); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); z-index: 40;}
.topbar.menu-open .mainnav{
display: flex;}
.mainnav-link{
padding: 11px 14px; border-radius: 10px;}
.mainnav-link[aria-current="page"]{
background: rgba(255, 255, 255, 0.06);}
.mainnav-link[aria-current="page"]::after{
display: none;}
#nav-actions{
position: static; inset: auto; flex-direction: row; align-items: center; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto;}
.wallet{
padding: 4px 4px 4px 10px; gap: 8px;}
.wallet .wl{
display: none;}
.wallet .wv{
font-size: 13.5px;}
.wallet .credits{
display: none;}
.dep-btn{
padding: 7px 12px; font-size: 12.5px;}
#nav-actions .lang-select{
width: auto;}
}

/* ===== Header: flags, menu icons, lighter type ===== */
.icon-sprite{
position: absolute; width: 0; height: 0; overflow: hidden;}
.ic{
fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; width: 16px; height: 16px; flex: none;}
.menu-item{
gap: 10px; font-weight: 500;}
.menu-item .ic{
color: var(--muted);}
.menu-item:hover .ic{
color: var(--text);}
.menu-item.on{
background: rgba(255, 255, 255, 0.06);}
.flag{
width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; flex: none;}
.lang-btn{
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); color: var(--text); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease;}
.lang-btn:hover{
border-color: rgba(224, 176, 79, 0.6);}
.lang-code{
letter-spacing: 0.06em;}
.lang-panel{
 width: 196px;}
/* speaker toggle: same pill as the language button, but icon-only */
.sound-btn{
 width: 40px; padding: 0; justify-content: center;}
.sound-btn.off{
 color: var(--muted);}
/* lighter type in the header */
.mainnav-link{
font-weight: 500;}
.wallet .wv{
font-weight: 600;}
.dep-btn{
font-weight: 700;}
.user-av{
font-weight: 700;}

/* ===== Keno Royale: the board artwork is the grid ===== */
.keno{
grid-template-columns: repeat(8, 1fr); gap: 0; width: 100%; max-width: 520px; margin: 0 auto; border-radius: 12px; background-image: var(--keno-field); background-size: 100% 100%; background-repeat: no-repeat;}
.keno button{
aspect-ratio: 1.25; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: transparent; font-size: 0; cursor: pointer; transition: background 0.12s ease;}
/* Flat fills, no outline: the tiles on the artwork are hand-placed and drift a
   few pixels, and a thin ring against them reads as crooked. */
.keno button:hover{
background: rgba(224, 176, 79, 0.18);}
.keno button.picked{
background: rgba(224, 176, 79, 0.42);}
.keno button.hit{
background: rgba(47, 158, 110, 0.55);}
/* drawn numbers the player did not pick: a grey veil, not a black-out, so the
   whole draw stays readable after the round. opacity is reset because the older
   rule dimmed the whole cell to 35% as well. */
.keno button.miss{
opacity: 1; background: rgba(150, 160, 176, 0.5);}
.keno-picks{
margin: 0 0 10px; color: var(--muted); font-size: 12px; text-align: center;}
/* Play / Clear artwork: the two buttons split the panel, each full width */
.keno-actions{
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.keno-actions .spin-img-btn:disabled{
filter: grayscale(0.5) brightness(0.75);}

/* ===== Crown & Anchor: the six symbols as picking tiles ===== */
.ca-grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.ca-sym{
width: 100%; aspect-ratio: 1; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;}
.ca-sym img{
width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;}
.ca-sym:hover{
transform: translateY(-2px); border-color: rgba(224, 176, 79, 0.6); background: rgba(255, 255, 255, 0.05); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);}
.ca-sym:active{
transform: translateY(0) scale(0.97);}

/* ===== Sic Bo: bet buttons and value tiles from their own art ===== */
/* The wide bet art spells its own label (SMALL / BIG / ANY TRIPLE …) and the
   value art is square; the art ships no pressed variant, so the selected one is
   lit up instead of swapping the image. */
.sicbo-kinds{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.sicbo-kinds .img-chip{
width: 100%; height: auto; aspect-ratio: 384 / 161;}
.sicbo-values{
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;}
.sicbo-values .img-chip{
width: 100%; height: auto; aspect-ratio: 192 / 188;}
.sicbo-kinds .img-chip.active, .sicbo-values .img-chip.active{
filter: brightness(1.22) drop-shadow(0 0 6px rgba(224, 176, 79, 0.9)); transform: translateY(-1px);}

/* ===== Admin: settings sub-tabs, create-user form, danger zone ===== */
.admin-subtabs{
display: flex; gap: 6px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.25); width: fit-content;}
.admin-subtab{
padding: 8px 16px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;}
.admin-subtab:hover{
color: var(--text);}
.admin-subtab.active{
color: var(--text); background: linear-gradient(135deg, rgba(224, 176, 79, 0.18), rgba(224, 176, 79, 0.05)); box-shadow: inset 0 0 0 1px rgba(224, 176, 79, 0.35);}
.admin-note{
margin: 0 0 14px; font-size: 12.5px; color: var(--muted); max-width: 72ch;}
.adm-form-head{
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.adm-form-head h4{
margin-top: 0;}
.adm-avatar{
flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(160deg, var(--panel2), var(--panel)); color: var(--accent); font-weight: 800; font-size: 24px;}
.adm-avatar img{
width: 100%; height: 100%; object-fit: cover;}
.adm-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin: 4px 0 16px;}
.adm-field{
display: flex; flex-direction: column; gap: 6px;}
.adm-field > span{
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.adm-field > i{
font-style: normal; font-size: 11px; color: var(--muted); opacity: 0.75;}
.adm-row{
margin-bottom: 14px;}
.adm-legend{
display: block; margin-bottom: 7px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.adm-chips{
display: flex; flex-wrap: wrap; gap: 7px;}
.adm-chip{
padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.06s ease;}
.adm-chip:hover{
color: var(--text); border-color: rgba(224, 176, 79, 0.4);}
.adm-chip:active{
transform: translateY(1px);}
.adm-chip.on{
color: #1b1200; background: linear-gradient(135deg, var(--accent), #cf9b2e); border-color: transparent;}
.adm-form-foot{
display: flex; align-items: center; gap: 14px; padding-top: 4px;}
.adm-hint{
font-size: 12px; color: var(--muted);}
.adm-hint.bad{
color: var(--red);}
.danger-card{
border-color: var(--wine-line); background: linear-gradient(165deg, rgba(122, 31, 31, 0.18), rgba(11, 15, 23, 0.6));}
.danger-note{
margin: 0 0 14px; font-size: 12.5px; color: var(--muted); max-width: 76ch;}
.btn-danger{
background: linear-gradient(135deg, var(--wine), #a83636); border-color: var(--wine-line); color: #ffe9e9;}
.btn-danger:hover:not(:disabled){
background: linear-gradient(135deg, #8f2626, #bd4141);}
.btn-danger.is-armed{
background: linear-gradient(135deg, #a83636, #d05a5a); box-shadow: 0 0 0 3px rgba(122, 31, 31, 0.35);}
.btn-danger:disabled{
opacity: 0.5; cursor: not-allowed;}

/* ===== Admin: visits report ===== */
.an-filters{
display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;}
.an-field{
display: flex; flex-direction: column; gap: 5px;}
.an-field > span{
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.an-date{
width: 152px;}
.an-presets{
display: flex; gap: 6px; flex-wrap: wrap;}
.an-preset{
padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); color: var(--muted); font-size: 12.5px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;}
.an-preset:hover{
color: var(--text); border-color: rgba(224, 176, 79, 0.45);}
.an-actions{
margin-left: auto; display: flex; gap: 8px;}
.an-report{
margin-top: 14px;}
.an-chart-card{
margin-top: 14px;}
.an-chart canvas{
width: 100%; height: auto; display: block;}
.an-tip{
margin-top: 6px; font-size: 11.5px; color: var(--muted);}
.an-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px;}
.an-list{
border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: rgba(11, 15, 23, 0.55);}
.an-list h5{
margin: 0 0 10px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);}
.an-list ul{
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px;}
.an-list li{
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px;}
.an-list li b{
color: var(--accent); font-weight: 700;}
.an-path{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch;}
.an-empty{
margin: 0; font-size: 12.5px; color: var(--muted);}
.an-table td{
font-size: 12.5px;}

/* ===== Skyfall Run: crash history + cash-out button ===== */
.sf-hist{
display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px;}
.sf-pill{
padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--muted);}
.sf-pill.low{
background: rgba(216, 75, 75, 0.16); color: #e5686a;}
.sf-pill.mid{
background: rgba(47, 158, 110, 0.18); color: var(--accent2);}
.sf-pill.high{
background: linear-gradient(135deg, #e0b04f, #cf9b2e); color: #1b1200;}
.sf-empty{
font-size: 12px; color: var(--muted);}
.sf-cash{
background: linear-gradient(135deg, #2f9e8e, #45d49b); border-color: rgba(69, 212, 155, 0.5); color: #04231a;}

/* storage mode chip in the admin header */
.admin-store{
margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent;}
.admin-store.ok{
color: var(--accent2); background: rgba(47, 158, 110, 0.14); border-color: rgba(47, 158, 110, 0.35);}
.admin-store.warn{
color: #f0a3a3; background: var(--wine-soft); border-color: var(--wine-line);}

/* game editor: auto-upload status, admin-style stats, room to scroll */
.game-editor{
max-height: 88vh; overflow: auto;}
.editor-sub{
margin: 18px 0 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);}
.art-status{
margin: 6px 0 0; font-size: 12px; color: var(--muted);}
.art-status.ok{
color: var(--accent2);}
.art-status.bad{
color: var(--red);}
.editor-stats .stat-grid{
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 0;}
.editor-stats .stat{
padding: 12px 14px;}
.editor-stats .stat .v{
font-size: 20px;}
.editor-stats .stat .l{
font-size: 10px;}
/* lobby sections that fold away (Favourites / Recently played) */
.category.spoiler{
cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none;}
.category.spoiler:hover{
color: var(--text);}
.category.spoiler .chev{
font-size: 11px; color: var(--muted); transition: transform 0.15s ease;}
.category.spoiler.collapsed .chev{
transform: rotate(-90deg);}
/* Admin: categories and series editor */
.tax-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px;}
.tax-head{
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.tax-head h4{
margin: 0;}
.tax-count{
font-size: 11px; color: var(--muted); background: rgba(138, 160, 189, 0.14); border-radius: 20px; padding: 1px 8px;}
.tax-list{
display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;}
.tax-item{
display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.18); cursor: grab;}
.tax-item.dragging{
opacity: 0.45; cursor: grabbing;}
.tax-grip{
flex: none; color: var(--muted); font-size: 13px; letter-spacing: -1px; user-select: none;}
.tax-name{
flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tax-actions{
display: flex; gap: 4px; flex: none;}
.tax-btn{
width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;}
.tax-btn:hover{
color: var(--accent); border-color: var(--accent);}
.tax-btn.danger:hover{
color: var(--red); border-color: var(--red);}
.tax-btn.ok:hover{
color: var(--accent2); border-color: var(--accent2);}
.tax-input{
flex: 1; margin: 0; padding: 4px 8px; font-size: 13px;}
.tax-add{
display: flex; gap: 8px;}
.tax-add .auth-input{
flex: 1; margin: 0;}
.tax-empty{
font-size: 12px; color: var(--muted); padding: 2px 0 8px;}
/* Admin: promo / bonus editor */
.promo-grid{
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;}
.promo-field{
display: flex; flex-direction: column; gap: 5px;}
.promo-field .auth-input{
margin: 0;}
.promo-field span{
font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;}
.promo-code{
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: 0.06em; color: var(--accent);}
/* Bonus page (player) */
.bonus-head{
display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px;}
.bonus-head h1{
margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em;}
.bonus-lead{
margin: 0; max-width: 640px; color: var(--muted); font-size: 13.5px;}
.bonus-promo{
display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; padding: 20px; border-radius: 18px; border: 1px solid rgba(224, 176, 79, 0.25);
background: linear-gradient(135deg, rgba(224, 176, 79, 0.12), rgba(224, 176, 79, 0.03) 45%, transparent), linear-gradient(165deg, var(--panel2), var(--panel));}
.bonus-promo-ico{
flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--accent); background: rgba(224, 176, 79, 0.12); border: 1px solid rgba(224, 176, 79, 0.25);}
.bonus-promo-ico svg{
width: 24px; height: 24px;}
.bonus-promo-body{
flex: 1; min-width: 0;}
.bonus-promo-body h3{
margin: 0 0 4px; font-size: 16px;}
.bonus-hint{
margin: 0 0 12px; color: var(--muted); font-size: 12.5px;}
.bonus-claim{
display: flex; gap: 8px; max-width: 460px;}
.bonus-code{
flex: 1; margin: 0; text-transform: uppercase; letter-spacing: 0.08em;}
.bonus-section-title{
margin: 0 0 12px; font-size: 14px;}
.bonus-list{
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;}
.bonus-card{
padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(165deg, var(--panel2), var(--panel)); transition: transform 0.12s ease, border-color 0.15s ease;}
.bonus-card:hover{
transform: translateY(-2px); border-color: rgba(224, 176, 79, 0.3);}
.bonus-card.done{
border-color: rgba(47, 158, 110, 0.35);}
.bonus-card-top{
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px;}
.bonus-amt{
font-size: 22px; font-weight: 800;}
.bonus-bar{
height: 8px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border);}
.bonus-bar i{
display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #f0c878); transition: width 0.3s ease;}
.bonus-card.done .bonus-bar i{
background: linear-gradient(90deg, var(--accent2), #4fd39a);}
.bonus-note{
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px;}
.bonus-empty{
margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 13px; text-align: center;}
/* ===== Game action button ("Deal") — frosted glass with a gold cast ===== */
.btn-deal{
position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 15px 20px; border-radius: 15px; cursor: pointer; overflow: hidden;
color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.16);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.30), transparent 62%),
linear-gradient(135deg, rgba(224, 176, 79, 0.36), rgba(224, 176, 79, 0.10) 52%, rgba(120, 160, 220, 0.13));
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.42),
0 1px 0 rgba(255, 255, 255, 0.30) inset,
0 -10px 22px rgba(0, 0, 0, 0.26) inset;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;}
.btn-deal::before{
content: ''; position: absolute; inset: 0 0 52% 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0));}
.btn-deal::after{
content: ''; position: absolute; top: -20%; left: -70%; width: 45%; height: 140%; pointer-events: none;
transform: skewX(-20deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);}
.btn-deal:hover{
transform: translateY(-2px); border-color: rgba(224, 176, 79, 0.6); filter: brightness(1.08);
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.5),
0 0 30px rgba(224, 176, 79, 0.30),
0 1px 0 rgba(255, 255, 255, 0.38) inset,
0 -10px 22px rgba(0, 0, 0, 0.28) inset;}
.btn-deal:hover::after{
animation: deal-sheen 0.75s ease;}
.btn-deal:active{
transform: translateY(0) scale(0.985); filter: brightness(0.97);}
.btn-deal:focus-visible{
outline: 2px solid rgba(224, 176, 79, 0.7); outline-offset: 2px;}
.btn-deal:disabled{
opacity: 0.4; cursor: not-allowed; transform: none; filter: grayscale(0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);}
.btn-deal:disabled::after{
display: none;}
/* in a row of buttons it shares the line instead of taking the whole width */
.btn-row .btn-deal{
width: auto; flex: 1 1 auto;}
@keyframes deal-sheen{
from{ left: -70%; } to{ left: 130%; }}
/* ===== Secondary game actions (hit / stand / double / split / surrender) — cool glass ===== */
.btn-action{
position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 14px; border-radius: 12px; cursor: pointer; overflow: hidden;
color: #dfe8f5; font-weight: 600; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.20), transparent 62%),
linear-gradient(135deg, rgba(120, 160, 220, 0.26), rgba(120, 160, 220, 0.07) 55%, rgba(224, 176, 79, 0.08));
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.35),
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 -8px 18px rgba(0, 0, 0, 0.22) inset;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: transform 0.14s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease;}
.btn-action::before{
content: ''; position: absolute; inset: 0 0 52% 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));}
.btn-action:hover{
transform: translateY(-2px); border-color: rgba(150, 185, 240, 0.55); filter: brightness(1.08);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.42),
0 0 22px rgba(120, 160, 220, 0.28),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -8px 18px rgba(0, 0, 0, 0.24) inset;}
.btn-action:active{
transform: translateY(0) scale(0.985); filter: brightness(0.97);}
.btn-action:focus-visible{
outline: 2px solid rgba(150, 185, 240, 0.7); outline-offset: 2px;}
.btn-action:disabled{
opacity: 0.38; cursor: not-allowed; transform: none; filter: grayscale(0.35); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);}
/* the action row centres itself and wraps instead of overflowing the panel */
.btn-row.actions{
flex-wrap: wrap; justify-content: center;}
.btn-row.actions .btn-action{
flex: 1 1 auto; min-width: 84px;}
/* Two-way game choices (Andar / Bahar and friends): the picked side fills with
   gold and glows, the other keeps the quiet glass look and dims back — a hint of
   hue was not enough to read as "selected". */
.btn-pick.on{
color: #22190a; font-weight: 800; border-color: rgba(255, 227, 160, 0.9);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.52), transparent 60%),
linear-gradient(135deg, rgba(240, 201, 118, 0.96), rgba(207, 155, 46, 0.92));
box-shadow:
0 12px 26px rgba(0, 0, 0, 0.42),
0 0 26px rgba(224, 176, 79, 0.5),
0 0 0 1px rgba(255, 236, 190, 0.6) inset,
0 1px 0 rgba(255, 255, 255, 0.5) inset;
text-shadow: none;}
.btn-pick:not(.on){
opacity: 0.62; border-color: rgba(255, 255, 255, 0.08);}
.btn-pick:not(.on):hover{
opacity: 0.9;}
.btn-pick.on:hover{
transform: translateY(-2px);}
/* Sidebar chips (the dice bet kinds and values, and anything else using them) wear
   the same glass as the buttons: cool glass when idle, gold when picked. */
.chip{
color: #dfe8f5; border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.20), transparent 62%),
linear-gradient(135deg, rgba(120, 160, 220, 0.26), rgba(120, 160, 220, 0.07) 55%, rgba(224, 176, 79, 0.08));
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.32),
0 1px 0 rgba(255, 255, 255, 0.20) inset;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: transform 0.14s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease;}
.chip:hover{
transform: translateY(-1px); border-color: rgba(150, 185, 240, 0.5); filter: brightness(1.08);}
.chip.active{
color: #22190a; font-weight: 800; border-color: rgba(255, 227, 160, 0.9);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.52), transparent 60%),
linear-gradient(135deg, rgba(240, 201, 118, 0.96), rgba(207, 155, 46, 0.92));
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.4),
0 0 22px rgba(224, 176, 79, 0.45),
0 0 0 1px rgba(255, 236, 190, 0.55) inset;
text-shadow: none;}
/* ===== Win / Lose headline: a pill tinted by the outcome ===== */
.result-line.win, .result-line.lose{
display: block; width: 100%; margin-top: 12px; padding: 11px 16px; border-radius: 12px;
text-align: center; font-weight: 800; font-size: 15px; letter-spacing: 0.03em;
border: 1px solid;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
animation: result-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);}
.result-line.win{
color: #d9ffef; border-color: rgba(47, 158, 110, 0.6);
background: linear-gradient(135deg, rgba(47, 158, 110, 0.34), rgba(47, 158, 110, 0.10));
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.35),
0 0 22px rgba(47, 158, 110, 0.26),
0 1px 0 rgba(255, 255, 255, 0.20) inset;
text-shadow: 0 1px 8px rgba(47, 158, 110, 0.5);}
.result-line.lose{
color: #ffe2e2; border-color: rgba(216, 75, 75, 0.6);
background: linear-gradient(135deg, rgba(216, 75, 75, 0.32), rgba(216, 75, 75, 0.10));
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.35),
0 0 22px rgba(216, 75, 75, 0.24),
0 1px 0 rgba(255, 255, 255, 0.16) inset;
text-shadow: 0 1px 8px rgba(216, 75, 75, 0.45);}
@keyframes result-pop{
from{ transform: scale(0.96); opacity: 0.35; } to{ transform: scale(1); opacity: 1; }}
/* The tag shape itself lives on `.card .tag`, which never reaches the game page
   header: repeat it for any meta row so category and series look like pills there
   too, not like bare text. */
.card-meta .tag{
display: inline-block; padding: 4px 10px; border-radius: 20px;
font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
border-width: 1px; border-style: solid;}
/* Panel chips — the Plinko risk row, the dice bet kinds — have to read as glass as
   well. The earlier .chip rules live higher up and some use :not() chains, so the
   treatment is repeated here with a heavier selector: order and specificity both win. */
.panel .btn-row .chip{
color: #dfe8f5; border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.20), transparent 62%),
linear-gradient(135deg, rgba(120, 160, 220, 0.26), rgba(120, 160, 220, 0.07) 55%, rgba(224, 176, 79, 0.08));
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.32),
0 1px 0 rgba(255, 255, 255, 0.20) inset;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
.panel .btn-row .chip.active{
color: #22190a; font-weight: 800; border-color: rgba(255, 227, 160, 0.9);
background:
radial-gradient(120% 150% at 50% -25%, rgba(255, 255, 255, 0.52), transparent 60%),
linear-gradient(135deg, rgba(240, 201, 118, 0.96), rgba(207, 155, 46, 0.92));
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.4),
0 0 22px rgba(224, 176, 79, 0.45),
0 0 0 1px rgba(255, 236, 190, 0.55) inset;
text-shadow: none;}
/* Art buttons — the chicken controls, keno Clear, the roulette rebet/undo/clear —
   carry their whole look in the picture: `.art-btn` sets `background: none` and then
   `background-image: var(--art)`. The glass rules above use the `background`
   shorthand, which also resets background-image, so those buttons came up empty.
   Re-asserting the art here, with a heavier selector, puts it back for good. */
.btn.art-btn, .btn-deal.art-btn, .btn-action.art-btn{
background: none;
background-image: var(--art);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
box-shadow: none;
text-shadow: none;}

/* ===== Narrow screens =====================================================
   Everything below only kicks in on tablets and phones and is appended last on
   purpose: the same selectors appear earlier in the file, so the newest rule
   has to be the one that lands. */

/* --- Tablets and down ----------------------------------------------------- */
@media (max-width: 900px){
  /* A fixed backdrop makes the browser repaint the whole viewport on every
     scroll frame; on touch devices that is the classic source of jank. */
  html, body{
    background-attachment: scroll;}

  /* Wide tables used to push the entire page sideways, because nothing between
     the table and the body can scroll. `display: block` keeps the table layout
     intact inside an anonymous box and lets the wrapper scroll instead, so one
     rule covers every admin, cashier and profile table at once. */
  .admin-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;}

  /* iOS Safari zooms the whole page whenever a field below 16px takes focus,
     and pinch-zoom is deliberately left on for accessibility. The named fields
     are the ones the app builds; `:where` covers the rest (autoplay stop
     amounts and similar) without gaining specificity, so the 30px cashier
     amount keeps its size. */
  .auth-input,
  .lobby-search,
  .lang-select{
    font-size: 16px;}
  :where(input, select, textarea){
    font-size: 16px;}
}

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 620px){
  /* The bar was a three-track grid built for desktop. On a phone the wallet
     (balance + Deposit), the sound and language pills, the avatar and the
     burger cannot share one 360px row, so the nav track is dropped — the nav is
     already a dropdown at this width — and the action row is allowed to wrap
     instead of widening the page. */
  .topbar{
    height: auto;
    min-height: 58px;
    padding: 8px 12px;
    gap: 8px 10px;
    grid-template-columns: auto minmax(0, 1fr);}
  /* the dropdown hangs off the bar's bottom edge, which is no longer a fixed
     height once the actions wrap */
  .mainnav{
    top: calc(100% + 8px);}
  .brand{
    width: 76px;}
  .brand img{
    height: 62px;}
  #nav-actions{
    grid-column: 2;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;}
  .topnav-actions{
    gap: 6px;}
  .wallet{
    padding: 3px 3px 3px 8px;
    gap: 6px;}
  .dep-btn{
    padding: 6px 10px;
    font-size: 12px;}
  .lang-btn{
    height: 36px;
    padding: 0 10px;}
  .sound-btn{
    width: 36px;
    padding: 0;}
  .avatar{
    width: 36px; height: 36px;}
  .burger{
    width: 38px; height: 36px; margin-left: 0; padding: 0 9px;}
  .flag{
    width: 20px; height: 20px;}
  /* the flag already tells the player which language is on */
  .lang-code{
    display: none;}
  .lang-panel{
    width: 176px;}

  /* give the content the width back */
  .view{
    margin: 10px auto 40px;
    padding: 16px 14px 40px;
    border-radius: 16px;}
  .site-footer{
    border-radius: 16px;}
  .stage{
    min-height: 300px;
    padding: 12px;}
  /* two game cards per row instead of one tall column */
  .grid{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;}
  .card{
    padding: 14px;}
  .card-logo{
    height: 44px;}
  .card h3{
    font-size: 15px;}
  .game-head h2, .board-title{
    font-size: 19px;}
  /* the breadcrumb is the way back to the lobby; give it a real tap target */
  .game-crumb{
    font-size: 13px;}
  .game-crumb a{
    padding: 6px 2px;}

  .admin-header{
    flex-wrap: wrap;
    gap: 10px;}
  .admin-header h2{
    font-size: 21px;}
  .admin-sidebar{
    flex-wrap: wrap;
    gap: 10px;}
  .admin-brand{
    padding-right: 0;
    border-right: 0;}

  /* A landscape scratch board cannot keep three columns on a phone: the cards
     would be ~110px wide, far too small to rub. One card per row instead. */
  .scratch-grid.layout-landscape{
    grid-template-columns: 1fr;}
}