: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;}
@media (max-width: 900px){
.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{
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{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;  padding: 11px 14px;  border: none;  border-radius: 10px;  cursor: pointer;  font-weight: 700;  font-size: 14px;  letter-spacing: .3px;  text-decoration: none;}
.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;}

/* A variant with no felt artwork (American roulette): the grid *is* the field, so it
   sizes the frame instead of sitting absolutely inside a picture that is not there,
   and its numbers and colours have to be drawn by the cells rather than by the art. */
.rt-nofelt{
aspect-ratio: auto;}
.rt-nofelt .rt-table{
position: static; inset: auto;  width: 100%; min-width: 720px;  padding: 8px; gap: 3px;  grid-template-rows: repeat(3, minmax(38px, 1fr)) 42px 42px;  border: 1px solid rgba(224, 176, 79, 0.35); border-radius: 12px;  background: linear-gradient(180deg, #0e5535, #0a3f27);  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);}
.rt-nofelt .rt-cell{
border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 5px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);}
.rt-nofelt .rt-cell.red{
background: linear-gradient(180deg, #c0392b, #99271b);}
.rt-nofelt .rt-cell.black{
background: linear-gradient(180deg, #26262c, #131317);}
.rt-nofelt .rt-cell.green{
background: linear-gradient(180deg, #1f8a5b, #12603d);}
/* the artwork used to carry the numbers, so they were hidden from sight */
.rt-nofelt .rt-lbl{
position: static; width: auto; height: auto; overflow: visible; clip: auto;  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.2px;}

/* 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);}
/* a totals row under a report: it must read as a summary, not one more record */
.admin-table tfoot td{
font-weight: 700;  background: rgba(224, 176, 79, 0.06);  border-top: 1px solid var(--border);  border-bottom: none;}
.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-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). It is reference material, so it sits
   in a spoiler: on a phone the row of cards used to push the board off the screen. */
.paytable-spoiler{
width: 100%;  border: 1px solid var(--border);  border-radius: 14px;  background: var(--panel);  overflow: hidden;}
.paytable-spoiler[open]{
padding-bottom: 12px;}
.paytable-sum{
display: flex; align-items: center; justify-content: center; gap: 8px;  padding: 11px 14px;  cursor: pointer;  list-style: none;  font-size: 11px;  letter-spacing: 1px;  text-transform: uppercase;  color: var(--muted);  user-select: none;  transition: color 0.15s;}
.paytable-sum::-webkit-details-marker{
display: none;}
.paytable-sum:hover{
color: var(--text);}
.paytable-sum::after{
content: '\25be';  font-size: 12px;  transition: transform 0.2s ease;}
.paytable-spoiler[open] .paytable-sum::after{
transform: rotate(180deg);}
/* the summary already names the section, so the clients' inner title would repeat it */
.paytable-spoiler .paytable-title{
display: none;}
.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);}
/* Rules and Payouts at the foot of a game page: one column under the board and
   the deck, both behind spoilers so the reference material never crowds the field.
   The rules summary mirrors the paytable spoiler so the two read as one block. */
.game-info{
display: flex; flex-direction: column; gap: 12px; margin-top: 26px;}
.rules-spoiler{
width: 100%; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden;}
.rules-sum{
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); user-select: none; transition: color 0.15s;}
.rules-sum::-webkit-details-marker{
display: none;}
.rules-sum:hover{
color: var(--text);}
.rules-sum::after{
content: '\25be'; font-size: 12px; transition: transform 0.2s ease;}
.rules-spoiler[open] .rules-sum::after{
transform: rotate(180deg);}
.rules-body{
padding: 4px 18px 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6;}
.rules-h{
margin: 18px 0 8px; font-size: 14px; color: var(--text); letter-spacing: 0.02em;}
.rules-body > .rules-h:first-child{
margin-top: 8px;}
.rules-body p{
margin: 0 0 10px;}
.rules-list{
margin: 0 0 10px; padding-left: 20px;}
.rules-list li{
margin: 4px 0;}
/* the round history, moved here from the deck (showGame in app.js): a third spoiler of the same look,
   folded by default, between the payouts and the rules */
.history-spoiler{
width: 100%; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden;}
.history-sum{
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); user-select: none; transition: color 0.15s;}
.history-sum::-webkit-details-marker{
display: none;}
.history-sum:hover{
color: var(--text);}
.history-sum::after{
content: '\25be'; font-size: 12px; transition: transform 0.2s ease;}
.history-spoiler[open] .history-sum::after{
transform: rotate(180deg);}
.history-body{
padding: 4px 18px 16px; display: flex; justify-content: center;}
@media (max-width: 900px){
.rules-body{ padding: 4px 14px 16px; }
.history-body{ padding: 4px 14px 14px; }
}
/* ===== 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;}
/* the field carries the unit: a $ prefix sits with the number the player types */
.cashier-amount-field{
display: flex; align-items: center; gap: 10px;  padding: 0 16px;  border-radius: 14px;  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.03);  transition: border-color 0.15s ease, box-shadow 0.15s ease;}
.cashier-amount-field:focus-within{
border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15);}
.cashier-amount-cur{
font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--accent);}
.cashier-amount{
flex: 1 1 auto;  min-width: 0;  width: 100%;  font-size: 30px;  font-weight: 800;  padding: 14px 0;  border: none;  background: none;  color: var(--text);  text-align: left;}
.cashier-amount:focus{
outline: none;}
/* 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. Inside a country the methods are small tiles rather than
   full-width rows, so the picker stays compact instead of running several screens. */
.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: 10px; max-height: 300px; 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;}
/* A country is a grid of small tiles, not a column of full-width rows: 42
   methods stay scannable and the picker no longer runs a screen and a half.
   The grid is a child of the group so the sticky country title still belongs to
   the whole group, not to a single grid row. */
.method-grid{
display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 7px;}
.method-item{
display: flex; align-items: center; gap: 9px;  min-width: 0;  width: 100%;  text-align: left;  padding: 8px 10px;  border-radius: 11px;  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);}
/* the "any method" row spans the full width of the list */
.method-item.method-auto{
border-style: dashed;}
/* the badge stands in for the brand logo the provider does not publish */
.method-badge{
flex-shrink: 0;  width: 30px; height: 30px;  display: flex; align-items: center; justify-content: center;  border-radius: 9px;  color: #fff;  font-family: var(--font-display);  font-size: 11px;  font-weight: 800;  letter-spacing: 0.02em;  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);}
/* the real brand mark, fetched by scripts/fetch-pay-logos.mjs */
.method-logo{
flex-shrink: 0;  width: 30px; height: 30px;  object-fit: contain;  border-radius: 9px;  background: rgba(255, 255, 255, 0.06);  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);}
.method-left{
flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.method-cur{
flex-shrink: 0;  padding: 2px 6px;  border-radius: 6px;  background: rgba(224, 176, 79, 0.1);  color: var(--accent);  font-size: 10.5px;  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: 13px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.method-sub{
color: var(--muted);  font-size: 11px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.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;}
/* the modal's call to action: full width and clearly separated from the hints
   above and below, which used to collapse under the inline link */
.pay-actions{
margin: 16px 0 12px;}
.pay-actions .btn{
width: 100%;}
.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;}
.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;
}

/* Boot screen (markup in index.html, taken away by bootHide in app.js): the logo
   floats inside a turning ring over the dark table, covering the beat where a fresh
   page has been built but its art has not arrived yet. */
.boot{
position: fixed; inset: 0; z-index: 2000;  display: grid; place-items: center;  background: radial-gradient(120% 90% at 50% 38%, #121a28, #070a11 72%);  opacity: 1;  transition: opacity 0.3s ease;}
.boot.done{
opacity: 0;  pointer-events: none;}
.boot-inner{
position: relative;  display: grid; place-items: center;  width: 146px; height: 146px;}
.boot-logo{
width: 100%; height: 100%;  object-fit: contain;  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.65));  animation: boot-float 2.4s ease-in-out infinite;}
@keyframes boot-float{
0%, 100%{ transform: translateY(0); }  50%{ transform: translateY(-9px); }}
.boot-ring{
position: absolute; inset: -30px;  border-radius: 50%;  border: 2px solid rgba(224, 176, 79, 0.16);  border-top-color: var(--accent);  animation: boot-spin 1.1s linear infinite;}
@keyframes boot-spin{
to{ transform: rotate(360deg); }}
@media (prefers-reduced-motion: reduce){
  .boot-logo, .boot-ring{ animation: none; }
}

/* ===== 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%; } }
/* Promo slides: the art carries the mood, so the scrim only has to hold the text. */
.promo-welcome .hero-art, .promo-prizes .hero-art{ background-position: center; }
.promo-welcome .hero-scrim, .promo-prizes .hero-scrim{
background: radial-gradient(55% 62% at 50% 50%, rgba(6, 8, 18, .62), rgba(6, 8, 18, 0) 100%), linear-gradient(180deg, rgba(8, 12, 20, 0) 55%, rgba(8, 12, 20, .55) 100%);}
.promo-welcome .hero-name, .promo-prizes .hero-name{
font-size: 42px; line-height: 1.1; letter-spacing: .6px; max-width: 760px; background: linear-gradient(180deg, #fff6c9, #f2bf47 70%, #c98a1a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));}
.promo-welcome .hero-desc, .promo-prizes .hero-desc{
font-size: 17px; font-weight: 600; color: #f1ecff;}
@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: auto; }
.hero-content{ gap: 5px; padding: 16px 16px 42px; }
.hero-logo{ max-height: 54px; }
.hero-name{ font-size: 19px; }
.hero-desc{ display: none; }
.promo-welcome .hero-name, .promo-prizes .hero-name{ font-size: 25px; max-width: 92%; }
.promo-welcome .hero-desc, .promo-prizes .hero-desc{ display: block; font-size: 13px; }
.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;}
/* The pills share the tools row with the star and the editor button, so they sit as
   one line: the header is a single thin strip (see .board-head in app.js). */
.board-tools > .card-meta{
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.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);}
/* From here down the deck sits under the board, so the game takes its phone shape at once: the round's
   controls go to the fixed dock (mobileDock.js uses the same 1080px), the themed SPIN art becomes a glass
   button, and the board paints the theme's backdrop itself. */
@media (max-width: 1080px){
.game-body{ grid-template-columns: 1fr; gap: 16px; }
.sidebar.deck{ position: static; }
  /* The dock repeats the round's verdict under the canvas, so the copy the game writes
     into its deck panel — the card games' GAME block, and its equivalent elsewhere — is
     the same WIN/LOSE a second time and has no place on a phone. The line is hidden
     outright (not only while a result is on screen: hiding it conditionally made the
     old text flash back for the length of a round), and a panel it was the only content
     of goes with it. Live lines — Chicken's lane, Mines's multiplier, Scratch's
     progress, Roulette's bet total — carry no data-verdict, so they and their panels
     stay. The marker is an attribute, not a class, because the games rewrite
     `resultEl.className` every round; mobileDock echoes a remembered round's line under
     the canvas so a reload does not lose it. */
  #game-sidebar [data-verdict]{
    display: none;}
  #game-sidebar .panel:has(> [data-verdict]):not(:has(> :not(h4):not([data-verdict]):not(:empty))){
    display: none;}
  /* A game theme ships a full-page backdrop; a phone hides it under the near-opaque
     view, so the board paints it itself and the field sits in the theme instead of a
     flat plate. The dark wash keeps the symbols and art readable over it. app.js puts
     the URL in --board-bg for every game that has a backdrop, so slots and the felt
     tables are dressed the same; a game without one keeps the panel colour. */
  .stage.board.board-bg{
    background-image: linear-gradient(180deg, rgba(10, 14, 22, 0.34), rgba(10, 14, 22, 0.68)), var(--board-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;}
}
@media (max-width: 620px){
.board-brand .game-logo{ max-height: 46px; max-width: 150px; }
}

/* 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. */
/* No backdrop blur and no translucency to speak of: the bar is fixed over the game
   canvas, and a blurred backdrop above a board that repaints 60 times a second makes
   the phone re-blur that whole strip every frame — the jank in Chicken Road, whose
   road scrolls non-stop. The gradient is opaque enough that its look barely differs. */
.mobile-dock{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;  display: flex; flex-direction: column; gap: 8px;  width: 100%; max-width: 550px; 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(19, 26, 39, 0.94), rgba(10, 14, 22, 0.985));  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%;}
/* The clients stack some rows vertically for the narrow column (baccarat and
   dragon tiger pick a side from three buttons). In a bar that is wide and short
   the same row has to lie down, or three buttons of ~92px height fill half the
   screen. */
.mobile-dock .btn-row, .mobile-dock .keno-actions, .mobile-dock .mines-actions{
display: flex; flex-direction: row !important; 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;}
/* buttons that shared a row in the column share one here too */
.mobile-dock .mobile-dock-row{
display: flex; gap: 6px; width: 100%;}
.mobile-dock .mobile-dock-row > .btn{
flex: 1 1 0; min-width: 0; padding: 12px 10px;}
/* the slots win counter rides along above its button, just tighter */
.mobile-dock .spin-block{
gap: 4px;}
/* A wrapper a game marks `.dock-extra` (Limbo's target multiplier) rides in the bar
above its buttons. It is a whole `.panel` in the deck, so inside the glass the card
looks wrong: the panel drops its own frame, its label tightens up and the field goes
full width like the buttons under it. */
.mobile-dock .panel{
padding: 0; border: 0; border-radius: 0; background: none;}
.mobile-dock .panel h4{
margin: 0 0 6px;}
.mobile-dock .panel .auth-input{
width: 100%;}
/* The stake panel rides in the bar too, and there it has to be a strip, not a card:
   the label goes (the bar names itself), the slider goes (a drag target under a
   thumb that is aiming at SPIN, and the stepper already walks the ladder), and the
   stepper and the quick chips share one compact row, wrapping only on a very narrow
   phone. This is the difference between a quarter of the screen and a small band. */
.mobile-dock .panel:has(.bet-body) > h4{
display: none;}
/* Let It Ride's stake panel carries a one-line explanation under the module; in the
   bar it would be the tallest thing there, and it is read once. */
.mobile-dock .panel:has(.bet-body) > p{
display: none;}
.mobile-dock .bet-body{
flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;}
.mobile-dock .stepper{
flex: 1 1 148px; grid-template-columns: 38px minmax(44px, 1fr) 38px; gap: 4px;}
.mobile-dock .step-btn,
.mobile-dock .stake-value{
height: 38px; border-radius: 10px;}
.mobile-dock .step-btn{
font-size: 17px;}
.mobile-dock .stake-num{
font-size: 17px;}
.mobile-dock .ladder-wrap{
display: none;}
.mobile-dock .bet-body .bet-row,
.mobile-dock .bet-body .bet-row-stack{
flex: 1 1 158px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;}
.mobile-dock .bet-body .chip{
min-width: 0; width: 100%; padding: 7px 4px; border-radius: 9px; font-size: 12px;}
/* Crown & Anchor's six symbols come along in the bar: one row of six keeps the
   thumb zone from growing two rows tall, and the symbols stay square. */
.mobile-dock .ca-grid{
grid-template-columns: repeat(6, 1fr); gap: 6px;}
.mobile-dock .ca-sym{
padding: 5px; border-radius: 10px;}
/* How the last round went. On a phone the deck's own result line is off-screen, so
   the verdict is repeated right under the game canvas (app.js hands mobileDock the
   canvas box as its anchor) — where the eye already is when the reels stop, and
   where the paytable block used to sit. It keeps no space until 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;}
/* Slots show the win on the board itself (counter, lines, banners); the strip under the canvas only
   made the board taller every round, so it stays hidden there (data-game from showGame in app.js). */
.game[data-game^="slot-"] .dock-outcome{
display: none !important;}
.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);}
/* A round still in flight reporting its running figure (Mines): the same strip the
outcome uses, but neutral and without the pop. Nothing is won yet, so it must not
read as a result — the real outcome replaces it. */
.dock-outcome.live{
color: var(--text);  border: 1px solid var(--border);  background: rgba(255, 255, 255, 0.06);}
/* 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. Chicken Road
   is the exception: its two art buttons are a pair (Cross / Cash out), so both stay
   put and the disabled one simply dims — a row that re-lays out under the thumb is
   worse than a dimmed button. */
.mobile-dock .btn-action:disabled:not(.art-btn){
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: 1080px){
  .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);}
}

/* Tower: toy bricks on a summer sky, drawn like the logo — fat glossy blocks in blue, red and
   yellow with a dark-blue outline. One brick is one level; its doors are pale windows in it. Only the
   level the climber stands on is live (it bobs), the ones above wait a little washed out. */
.stage.board.board-tower, .stage.board.board-bg.board-tower{
  background:
    radial-gradient(120px 60px at 12% 88%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(160px 70px at 88% 94%, rgba(255, 244, 214, 0.95), rgba(255, 244, 214, 0) 70%),
    radial-gradient(140px 56px at 82% 18%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(100px 50px at 14% 30%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #1f7bff 0%, #4aa6ff 52%, #ffe39a 100%);
  border-color: #0b2a8f;
}
.tower{
  --navy: #0b2a8f; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto; padding: 4px 6px 14px;}
.tower.shake{ animation: tw-shake 0.6s ease; }
.tower-roof{ width: 48px; height: 30px; position: relative; margin-bottom: -2px; }
.tower-roof i{
  position: absolute; inset: 0; background: linear-gradient(180deg, #fff3a8, #ffc928); border: 3px solid var(--navy);
  clip-path: polygon(0 100%, 6% 22%, 28% 62%, 50% 0, 72% 62%, 94% 22%, 100% 100%); filter: drop-shadow(0 3px 0 var(--navy));}
.tower-row{
  --lt: #6fb4ff; --bs: #1f7bff; --dk: #1456d6;
  position: relative; display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 8px; width: var(--w, 100%);
  padding: 8px 12px 10px 10px; border-radius: 18px; border: 3px solid var(--navy);
  background: linear-gradient(180deg, var(--lt) 0%, var(--bs) 46%, var(--dk) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 6px 0 var(--navy), 0 12px 14px rgba(5, 20, 80, 0.3);
  transition: filter 0.2s, transform 0.2s;}
.tower-row.c-red{ --lt: #ff8a80; --bs: #ff4d4d; --dk: #d92b3a; }
.tower-row.c-yellow{ --lt: #fff08a; --bs: #ffc928; --dk: #f29a12; }
.tower-row.pending{ filter: saturate(0.62) brightness(0.95); }
.tower-row.cleared{ filter: brightness(0.9); }
.tower-row.current{ transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(255, 244, 150, 0.9)); }
.tower-mult{
  font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: 0; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums;
  color: #fff3a8; -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; text-shadow: 0 2px 0 var(--navy);}
.tower-row.c-yellow .tower-mult{ color: #fff; }
.tower-doors{ display: flex; gap: 8px; }
.tower-cell{
  position: relative; flex: 1 1 0; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px;
  border: 3px solid var(--navy); color: var(--navy); cursor: pointer;
  background: radial-gradient(120% 110% at 30% 18%, #ffffff 0%, #e9f2ff 55%, #bcd4ff 100%);
  box-shadow: inset 0 -4px 0 rgba(20, 80, 200, 0.18), 0 3px 0 rgba(5, 20, 80, 0.45);
  transition: transform 0.1s, background 0.15s;}
.tower-cell[hidden]{ display: none; }
.tower-cell::before{
  content: '?'; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--navy); opacity: 0.55;}
.tower-cell.safe::before, .tower-cell.bomb::before{ content: none; }
.tower-cell svg{ width: 78%; height: 78%; overflow: visible; pointer-events: none; }
.tower-row.current .tower-cell:not(:disabled){ animation: tw-bob 1.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.14s); }
.tower-row.current .tower-cell:hover:not(:disabled){
  animation: none; transform: translateY(-4px) scale(1.04); background: radial-gradient(120% 110% at 30% 18%, #fffbe0 0%, #fff08a 60%, #ffd84a 100%);}
.tower-cell:disabled{ cursor: default; }
.tower-row:not(.current) .tower-cell:not(.safe):not(.bomb){ opacity: 0.78; }
.tower-cell.safe{ background: radial-gradient(120% 110% at 30% 18%, #e8ffd0 0%, #9be85a 60%, #52c23a 100%); animation: tw-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tower-cell.here{ background: radial-gradient(120% 110% at 30% 18%, #fffbe0 0%, #ffe45c 62%, #ffbf1f 100%); }
.tower-cell.here svg{ width: 94%; height: 94%; animation: tw-hero 1.5s ease-in-out infinite; }
.tower-cell.bomb{ background: radial-gradient(120% 110% at 30% 18%, #ffe3d0 0%, #ff8a5a 60%, #e8412d 100%); animation: tw-boom 0.5s ease; }
.tower-cell.bomb svg{ width: 96%; height: 96%; }
@keyframes tw-bob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes tw-pop{ 0%{ transform: scale(0.6); } 60%{ transform: scale(1.14); } 100%{ transform: scale(1); } }
@keyframes tw-boom{ 0%{ transform: scale(0.5) rotate(-12deg); } 55%{ transform: scale(1.22) rotate(6deg); } 100%{ transform: scale(1) rotate(0); } }
@keyframes tw-hero{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
@keyframes tw-shake{ 0%, 100%{ transform: translateX(0); } 15%{ transform: translateX(-7px) rotate(-0.6deg); } 35%{ transform: translateX(6px) rotate(0.5deg); } 55%{ transform: translateX(-4px); } 75%{ transform: translateX(3px); } }
/* candy buttons for the climb, in the logo's yellow and blue */
.tw-start.btn{ background: linear-gradient(180deg, #fff08a, #ffc928); color: var(--navy, #0b2a8f); border: 3px solid #0b2a8f; box-shadow: 0 4px 0 #0b2a8f; font-weight: 900; text-shadow: none; }
.tw-start.btn:hover:not(:disabled){ filter: brightness(1.06); transform: translateY(-1px); }
.tw-start.btn:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 #0b2a8f; }
.tw-cash.btn{ background: linear-gradient(180deg, #6fb4ff, #1f7bff); color: #fff; border: 3px solid #0b2a8f; box-shadow: 0 4px 0 #0b2a8f; font-weight: 900; }
.tw-cash.btn:disabled{ filter: grayscale(0.5) brightness(0.9); }
@media (max-width: 520px){
  .tower-row{ grid-template-columns: 62px 1fr; gap: 6px; padding: 6px 8px 8px 6px; }
  .tower-mult{ font-size: 12.5px; -webkit-text-stroke-width: 3.5px; }
  .tower-cell{ height: 44px; }
  .tower-doors{ gap: 6px; }
}
@media (prefers-reduced-motion: reduce){
  .tower.shake, .tower-row.current .tower-cell, .tower-cell.safe, .tower-cell.bomb, .tower-cell.here svg{ animation: none; }
}

/* 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;}
/* The nav's extras slot: on a phone the sound toggle and the language pill move in
here, so the whole nav — links plus controls — can travel into the player menu as one
node (see placeNavExtras in app.js). On a wide screen the slot is empty — the controls
are back in the action row — and it must not add a gap to the nav track. */
.mainnav-extras{
display: none;}
#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){
/* The nav is no longer a dropdown hanging off the bar: app.js moves it into the
player menu, where it reads as that menu's first section — the two section links,
then the labelled sound and language rows. Rows are spaced like .menu-item so the
whole panel looks like one list. */
.mainnav{
position: static; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;}
.mainnav-link{
display: flex; align-items: center; padding: 10px 12px; border-radius: 9px;}
.mainnav-link[aria-current="page"]{
background: rgba(255, 255, 255, 0.06);}
.mainnav-link[aria-current="page"]::after{
display: none;}
/* labelled sound / language rows close the nav section, one tap each */
.mainnav-extras{
display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border);}
.mainnav-extra{
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px;}
.mainnav-extra-label{
color: var(--text); font-size: 13.5px; font-weight: 500;}
.mainnav-extra-ctl{
display: flex; align-items: center;}
/* the slot only has content on a phone; it separates the nav section from the
account rows that follow it */
.menu-nav-slot:not(:empty){
padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border);}
#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;}
.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-values{
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;}
/* Plain text chips: the artwork used to spell these labels and hid the text, so an
   image that did not arrive left the button empty. */
.sicbo-kinds .chip{
padding: 10px 6px; font-size: 12px; line-height: 1.2; white-space: normal;}
.sicbo-values .chip{
padding: 9px 4px; font-size: 13px;}
.sicbo-kinds .chip.active, .sicbo-values .chip.active{
filter: drop-shadow(0 0 6px rgba(224, 176, 79, 0.7));}

/* ===== 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;}
/* The spread + the feed refresh sit above the currency table: one number for both
   directions, so they get one row of their own rather than a column each. */
.pay-rate-bar{
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;  margin: 0 0 14px; padding: 10px 12px;  border: 1px solid var(--border); border-radius: 12px;  background: var(--panel2);  font-size: 13px;}
.pay-rate-bar label{
color: var(--muted);}
.pay-rate-bar input{
max-width: 110px;}
.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;}
/* On a phone the promo code field and the claim button cannot share one row of the
card, so the button drops under the field and both take the full width. */
@media (max-width: 620px){
.bonus-claim{
flex-direction: column;}}
/* ===== 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);}
/* A headline with nothing to say has to stay invisible: the padding, border and
tint above still draw a coloured strip on their own — that was the unexplained red
bar on the bonus page, whose error line sits empty until a claim fails, and the same
green one a game leaves behind after the board resets. */
.result-line:empty{
display: none;}
@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;}
/* ...and it must not keep the glass that belongs to the pill buttons: the top
highlight (`::before`) and the sheen (`::after`) still painted over the artwork,
which is the pale box that showed through Chicken Road's Cross / Cash out — the only
game shipping plain art buttons (`.art-btn`). */
.btn.art-btn::before, .btn.art-btn::after{
display: none;}
/* In the deck an art button is a tall 132px box with the picture floating inside it.
   In the dock that box is exactly the glass the player sees under the button, so the
   button takes the artwork's own shape instead (`--art-aspect` is set from the loaded
   image in chicken.js; 2:1 is only a stand-in until it lands). The row padding goes
   too: background is painted over the padding box, so a padded box of the right ratio
   still left a bare band beside the picture. */
.mobile-dock .art-btn, .mobile-dock .btn-row > .art-btn{
height: auto; padding: 0; aspect-ratio: var(--art-aspect, 2 / 1);}
/* ...and the pair sits smaller than a full half each: 35% of the bar per button is
   the 30% smaller Cross / Cash out, with the row centred because a wrapped row
   would otherwise leave them hanging on the left. */
.mobile-dock .chicken-actions{
justify-content: center;}
.mobile-dock .chicken-actions > .art-btn{
flex: 0 0 35%;}

/* ===== 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 it is one compact
     row — the logo, the wallet, the "+" and the avatar — while the nav, the sound and
     the language controls live in the player menu (app.js moves them there), so the
     action row never has to widen the page. */
  .topbar{
    height: auto;
    min-height: 56px;
    padding: 7px 12px;
    gap: 8px 10px;
    grid-template-columns: auto minmax(0, 1fr);}
  .brand{
    width: 54px;
    height: 42px;}
  .brand img{
    height: 42px;
    top: 0;}
  #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;}
  /* Deposit folds into a "+" on a phone: the gold pill stops spelling the word out,
     but the label is still in the markup, so screen readers keep hearing it. */
  .dep-btn{
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
    font-size: 0;}
  .dep-btn::after{
    content: '+';
    font-size: 20px;
    line-height: 1;
    font-weight: 800;}
  .lang-btn{
    height: 36px;
    padding: 0 10px;}
  .sound-btn{
    width: 36px;
    padding: 0;}
  .avatar{
    width: 36px; height: 36px;}
  .flag{
    width: 20px; height: 20px;}
  /* the flag already tells the player which language is on */
  .lang-code{
    display: none;}
  .lang-panel{
    width: 176px;}
  /* The player menu now carries the nav and both controls, so on a short screen it
     gets a ceiling of its own and scrolls instead of running off the bottom. */
  #usermenu.menu-panel{
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;}

  /* 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;}
  /* The board header — logo, category and series pills, favourite and editor tools —
     is read-once chrome: on a phone the game's name already stands in the breadcrumb
     just above it, and the row only pushed the field down. Dropping it hands the board
     that height back, which is the whole point of the compact bar. */
  .board-head{
    display: none;}
  /* 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{
    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 scratch board that runs from edge to edge leaves the thumb nowhere to start a
   scroll: the rub begins on pointerdown, so a swipe meant for the page lands on a
   card and erases it. On a phone the grid keeps a gutter of its own on both sides —
   the theme's cap still applies, this only narrows it further — so the page can be
   scrolled with a finger. */
.scratch-grid{
max-width: min(var(--scratch-max, 420px), calc(100% - 88px));}
/* 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;}

/* The method tiles keep two per row even on a 360px phone — a single column of
   full-width buttons is what the compact grid was meant to get away from. */
.method-grid{
grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
gap: 6px;}
.method-item{
padding: 7px 9px;
gap: 8px;}
.method-badge{
width: 26px; height: 26px;
font-size: 10px;}
.method-logo{
width: 26px; height: 26px;}
}

/* ── METRO Jackpot ─────────────────────────────────────────────── */
.jp{
  margin: 0 0 22px; padding: 16px 18px 14px; border-radius: 18px;
  border: 1px solid rgba(224, 176, 79, 0.35);
  background: radial-gradient(900px 260px at 18% -30%, rgba(224, 176, 79, 0.16), transparent 70%), linear-gradient(180deg, rgba(22, 32, 47, 0.92), rgba(12, 18, 28, 0.94));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.jp[hidden]{ display: none; }
.jp-head{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.jp-head h2{ margin: 0; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.jp-head span{ color: var(--muted); font-size: 13px; }
.jp-grid{ display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 12px; }
.jp-tile{
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto auto;
  column-gap: 10px; padding: 12px 14px; border-radius: 14px; min-width: 0;
  background: linear-gradient(160deg, rgba(34, 48, 70, 0.95), rgba(18, 26, 40, 0.95));
  border: 1px solid var(--border);
}
.jp-suit{ grid-row: 1 / 3; align-self: center; font-size: 34px; line-height: 1; color: #e8eef7; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.jp-tile.red .jp-suit, .jp-win-suit.red{ color: #e65a5a; }
.jp-rank{ font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.jp-name{ font-size: 12px; color: var(--muted); }
.jp-sum{ grid-column: 1 / -1; display: flex; align-items: baseline; gap: 3px; margin-top: 8px; font-family: var(--font-display); }
.jp-sum em{ font-style: normal; color: var(--accent); font-size: 15px; }
.jp-amount{ font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; white-space: nowrap; }
.jp-heat{ grid-column: 1 / -1; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jp-heat i{ display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2f9e6e, #e0b04f 60%, #e05a3a); transition: width 0.8s ease; }
.jp-cap{ grid-column: 1 / -1; margin-top: 5px; font-size: 11px; color: var(--muted); }
.jp-hot{
  display: none; position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, #c0392b, #e0603a);
}
.jp-tile.hot{ border-color: rgba(224, 96, 58, 0.7); animation: jp-glow 1.8s ease-in-out infinite; }
.jp-tile.hot .jp-hot{ display: block; }
.jp-tile.spades{
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(40, 34, 18, 0.96), rgba(18, 18, 26, 0.96)) padding-box, linear-gradient(120deg, #f6d57a, #b98a2c 45%, #f6d57a) border-box;
}
.jp-tile.spades .jp-suit{ font-size: 46px; color: #f6d57a; }
.jp-tile.spades .jp-amount{ font-size: 32px; color: #f9e3a0; text-shadow: 0 0 18px rgba(246, 213, 122, 0.35); }
.jp-tile.spades::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.09) 50%, transparent 65%);
  transform: translateX(-120%); animation: jp-shine 6s ease-in-out infinite;
}
.jp-foot{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.jp-winners h3{ margin: 0 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.jp-none{ margin: 0; color: var(--muted); font-size: 13px; }
.jp-win{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; font-size: 13px; }
.jp-win-suit{ font-size: 16px; }
.jp-win b{ color: var(--accent); font-variant-numeric: tabular-nums; }
.jp-win-who{ color: var(--muted); }
.jp-proof{ margin-left: auto; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.jp-proof:hover{ color: var(--text); border-color: var(--accent); }
.jp-proof-out{ flex-basis: 100%; font-size: 11px; color: var(--accent2); word-break: break-all; }
.jp-proof-out:empty{ display: none; }
.jp-fair summary{ cursor: pointer; font-size: 13px; color: var(--muted); }
.jp-fair p{ margin: 8px 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.jp-commit-row span{ display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.jp-commit{ display: block; font-size: 11px; word-break: break-all; color: var(--accent); }
@keyframes jp-glow{ 0%, 100%{ box-shadow: 0 0 0 rgba(224, 96, 58, 0); } 50%{ box-shadow: 0 0 22px rgba(224, 96, 58, 0.45); } }
@keyframes jp-shine{ 0%, 55%{ transform: translateX(-120%); } 85%, 100%{ transform: translateX(120%); } }
@media (max-width: 900px){
  .jp{ padding: 12px; border-radius: 14px; }
  .jp-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .jp-tile.spades{ grid-column: 1 / -1; }
  .jp-tile{ grid-template-columns: 1fr; padding: 10px; }
  .jp-tile.spades{ grid-template-columns: auto 1fr; padding: 12px 14px; }
  .jp-tile:not(.spades) .jp-suit{ grid-row: auto; font-size: 22px; }
  .jp-tile:not(.spades) .jp-amount{ font-size: 16px; }
  .jp-tile:not(.spades) .jp-cap{ display: none; }
  .jp-foot{ grid-template-columns: 1fr; }
}
/* the celebration: a small card in the bottom-right corner, gone after a few seconds */
.jp-stack{
  position: fixed; right: 16px; bottom: calc(16px + var(--dock-h, 0px)); z-index: 200; display: flex; flex-direction: column; gap: 10px;
  width: min(340px, calc(100vw - 32px)); pointer-events: none;
}
.jp-pop{
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px 40px 16px 16px; overflow: hidden;
  border-radius: 16px; pointer-events: auto; cursor: pointer;
  background: linear-gradient(160deg, rgba(44, 36, 18, 0.98), rgba(16, 18, 28, 0.98));
  border: 1.5px solid #e0b04f; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 26px rgba(224, 176, 79, 0.35);
  animation: jp-pop-in 0.45s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.jp-pop.out{ animation: jp-pop-out 0.3s ease forwards; }
.jp-pop-suit{ font-size: 40px; line-height: 1; color: #f6d57a; }
.jp-pop.red .jp-pop-suit{ color: #ee6a6a; }
.jp-pop-body{ display: grid; gap: 1px; min-width: 0; }
.jp-pop-title{ font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; color: #f9e3a0; text-transform: uppercase; }
.jp-pop-line{ font-size: 12px; color: var(--muted); }
.jp-pop-amount{ font-family: var(--font-display); font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.jp-pop-game{ font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-pop-x{
  position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.jp-pop-x:hover{ color: #fff; background: rgba(255, 255, 255, 0.1); }
.jp-pop-bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.jp-pop-bar i{ display: block; height: 100%; background: linear-gradient(90deg, #e8b954, #cf9b2e); transform-origin: left; animation: jp-life linear forwards; }
.jp-pop.hold .jp-pop-bar i{ animation-play-state: paused; }
.jp-pop.drop{ border-color: #6fe0a8; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 26px rgba(111, 224, 168, 0.35); }
.jp-pop.drop .jp-pop-suit{ color: #6fe0a8; }
.jp-pop.drop .jp-pop-bar i{ background: linear-gradient(90deg, #2f9e6e, #6fe0a8); }
[dir="rtl"] .jp-stack{ right: auto; left: 16px; }
[dir="rtl"] .jp-pop{ padding: 14px 16px 16px 40px; }
[dir="rtl"] .jp-pop-x{ right: auto; left: 8px; }
@keyframes jp-life{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
@keyframes jp-pop-in{ from{ transform: translateY(24px) scale(0.9); opacity: 0; } }
@keyframes jp-pop-out{ to{ transform: translateY(12px) scale(0.95); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .jp-tile.hot, .jp-tile.spades::after, .jp-pop, .jp-pop-bar i{ animation: none; }
  .jp-heat i{ transition: none; }
}
/* hourly Drop */
.jp-drop{
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 16px; row-gap: 6px;
  margin-top: 12px; padding: 12px 16px 10px; border-radius: 14px;
  border: 1px solid rgba(47, 158, 110, 0.45);
  background: linear-gradient(120deg, rgba(20, 52, 44, 0.85), rgba(16, 26, 38, 0.9));
}
.jp-drop[hidden]{ display: none; }
.jp-drop-ico{ font-size: 30px; color: #6fe0a8; text-shadow: 0 0 14px rgba(111, 224, 168, 0.5); }
.jp-drop-main{ display: grid; min-width: 0; }
.jp-drop-title{ font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #8be8b9; }
.jp-drop-hint{ font-size: 12px; color: var(--muted); }
.jp-drop-prize{ display: flex; align-items: baseline; gap: 3px; font-family: var(--font-display); }
.jp-drop-prize em{ font-style: normal; color: var(--accent); }
.jp-drop-prize .jp-amount{ font-size: 24px; }
.jp-drop-time{ display: grid; justify-items: end; }
.jp-drop-time span{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
.jp-drop-clock{ font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; color: #fff; }
.jp-drop.soon .jp-drop-clock{ color: #ffb454; animation: jp-pulse 1s ease-in-out infinite; }
.jp-drop-bar{ grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jp-drop-bar i{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f9e6e, #6fe0a8); transition: width 1s linear; }
.jp-drop-meta{ grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@keyframes jp-pulse{ 50%{ opacity: 0.55; } }
@media (max-width: 900px){
  .jp-drop{ grid-template-columns: auto 1fr auto; padding: 10px 12px 8px; column-gap: 10px; }
  .jp-drop-ico{ font-size: 24px; }
  .jp-drop-hint{ display: none; }
  .jp-drop-prize{ grid-column: 3; grid-row: 1; }
  .jp-drop-time{ grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; align-items: baseline; }
  .jp-drop-prize .jp-amount, .jp-drop-clock{ font-size: 20px; }
}
@media (prefers-reduced-motion: reduce){
  .jp-drop.soon .jp-drop-clock{ animation: none; }
  .jp-drop-bar i{ transition: none; }
}

/* ===== Phone: the player menu as one tidy list =====
   The nav, the sound/language rows and the account rows share one left edge and one
   rhythm: an icon column, the label, and (for the two settings) a control on the right
   with the same width. The language list opens inline, pushing the rows below it down,
   instead of floating over them. */
@media (max-width: 900px){
  #usermenu.menu-panel{
    width: min(296px, calc(100vw - 20px)); padding: 8px;}
  .menu-head{
    display: grid; gap: 2px; padding: 8px 12px 12px; margin-bottom: 6px;}
  .menu-head .mn{
    font-size: 15px;}
  /* the nav fills the panel (a block parent used to shrink-wrap and centre it) */
  .menu-nav-slot .mainnav{
    justify-self: stretch; width: 100%;}
  .menu-item, .mainnav-link{
    min-height: 44px; gap: 10px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--text);}
  .menu-item .ic{
    width: 18px; height: 18px;}
  .mainnav-link::before{
    content: ''; flex: none; width: 18px; height: 18px; background: var(--muted);
    -webkit-mask: var(--nav-ic) center / contain no-repeat; mask: var(--nav-ic) center / contain no-repeat;}
  #nav-lobby{
    --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");}
  #nav-bonus{
    --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8c0 0-1.5-5-4-5a2.5 2.5 0 0 0 0 5h4zM12 8c0 0 1.5-5 4-5a2.5 2.5 0 0 1 0 5h-4z'/%3E%3C/svg%3E");}
  .mainnav-link[aria-current="page"]{
    color: var(--accent); background: rgba(224, 176, 79, 0.1);}
  .mainnav-link[aria-current="page"]::before{
    background: var(--accent);}
  /* Bonus is already in the nav section above */
  #usermenu #bonus.menu-item{
    display: none;}
  /* sound + language: label left, same-size control right */
  .mainnav-extras{
    margin-top: 6px; padding-top: 6px;}
  .mainnav-extra{
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 48px; padding: 6px 12px;}
  .mainnav-extra-label{
    flex: 1; color: var(--text); font-size: 14px; font-weight: 500;}
  /* let the button and the language list join the row directly */
  .mainnav-extra-ctl, .mainnav-extra-ctl .menu{
    display: contents;}
  .mainnav-extra .sound-btn{
    width: 92px; height: 36px; padding: 0; justify-content: center; gap: 8px;}
  .menu-nav-slot:not(:empty){
    padding-bottom: 8px; margin-bottom: 8px;}
  #usermenu .menu-sep{
    margin: 6px 0;}
}

/* ===== Visitor without an account: Sign in / Sign up instead of the wallet ===== */
.auth-cta{
  display: none; align-items: center; gap: 8px;}
body.is-guest .auth-cta{
  display: flex;}
body.is-guest .wallet, body.is-guest .menu-user, body.is-guest #deposit-cta{
  display: none;}
.cta-login{
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.28); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color 0.15s ease;}
.cta-login:hover{
  border-color: rgba(224, 176, 79, 0.6);}
.cta-register{
  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; cursor: pointer; transition: filter 0.15s ease;}
.cta-register:hover{
  filter: brightness(1.06);}
.auth-switch{
  margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 13px;}
.auth-switch a{
  color: var(--accent); font-weight: 600; text-decoration: none;}
.auth-switch a:hover{
  text-decoration: underline;}
@media (max-width: 900px){
  .cta-login, .cta-register{
    padding: 7px 12px; font-size: 12.5px; white-space: nowrap;}
  .auth-cta{
    gap: 6px;}
}
.cta-login, .cta-register{
  flex: none; white-space: nowrap;}

/* sound toggle: the last row of the phone menu, below Log out */
.menu-sound-row{
  display: none;}
@media (max-width: 900px){
  .menu-sound-row{
    display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px; padding: 8px 12px 2px; border-top: 1px solid var(--border);}
  .menu-sound-row .sound-btn{
    width: 92px; height: 36px; padding: 0; justify-content: center;}
  .menu-sound-row .mainnav-extra-label{
    flex: 1; color: var(--text); font-size: 14px; font-weight: 500;}
  .menu-sound-row .mainnav-extra-ctl, .menu-sound-row .mainnav-extra-ctl .menu{
    display: contents;}
}

/* ===== Right-to-left (Arabic) =====
   dir="rtl" on <html> (public/js/i18n.js) mirrors flex rows and text alignment by itself.
   What is left to do: panels that hang off the bar anchor to the other side (otherwise they
   run off the screen to the left and the page scrolls to reveal them), and the game boards
   keep their universal left-to-right layout — a keno grid that counts 1..80 from the right,
   or a roulette cloth that is mirrored, would be wrong. Their text still reads right to left. */
[dir="rtl"] .menu-panel{
  right: auto; left: 0;}
[dir="rtl"] .stage{
  direction: ltr;}
[dir="rtl"] .stage :is(p, h4, .result-line, .rt-marquee, .paytable-title, .paytable-rule){
  unicode-bidi: plaintext;}
[dir="rtl"] .hero-slide, [dir="rtl"] .hero-bar{
  direction: ltr;}

/* ===== Lobby category tabs: an underlined strip with an icon per category ===== */
.lobby-cats{
  display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; margin-bottom: 18px; padding: 0;
  border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.lobby-cats::-webkit-scrollbar{
  display: none;}
.lobby-cat{
  flex: none; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 12px 16px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;}
.lobby-cat:hover{
  transform: none; box-shadow: none; border-color: transparent; border-bottom-color: rgba(224, 176, 79, 0.45);
  background: rgba(255, 255, 255, 0.04); color: var(--text);}
.lobby-cat.active{
  background: linear-gradient(180deg, transparent, rgba(224, 176, 79, 0.1)); box-shadow: none;
  border-color: transparent; border-bottom-color: var(--accent); color: var(--accent);}
.tab-ic{
  display: inline-flex; width: 20px; height: 20px; flex: none;}
.tab-ic svg{
  width: 100%; height: 100%;}
@media (max-width: 900px){
  .lobby-cat{
    padding: 11px 13px; font-size: 13px;}
}

/* ===== TOP WINS: a podium and a ladder of the biggest payouts of the day ===== */
.tw{
  --gold: #f0c85a; --silver: #cfd8e6; --bronze: #d58a52;
  margin: 0 0 22px; padding: 18px 18px 14px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: radial-gradient(900px 260px at 50% -30%, rgba(240, 200, 90, 0.12), transparent 70%), linear-gradient(180deg, rgba(20, 28, 42, 0.94), rgba(11, 16, 26, 0.96));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);}
.tw[hidden]{ display: none; }
.tw-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px; }
.tw-title{ display: flex; align-items: center; gap: 12px; }
.tw-title h2{ margin: 0; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.tw-sub{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.tw-trophy{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #1b1200; background: linear-gradient(135deg, #f6d57a, #cf9b2e); box-shadow: 0 6px 18px rgba(240, 200, 90, 0.3); }
.tw-trophy svg{ width: 24px; height: 24px; }
.tw-tools{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-badge{ padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #6fe0a8; border: 1px solid rgba(111, 224, 168, 0.4); background: rgba(47, 158, 110, 0.12); }
.tw-seg{ display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.3); }
.tw-seg-btn{ padding: 7px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.tw-seg-btn:hover{ color: var(--text); }
.tw-seg-btn.active{ color: #1b1200; background: linear-gradient(135deg, #f6d57a, #cf9b2e); }

.tw-podium{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.tw-card{
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 14px 14px; border-radius: 16px; text-align: center; text-decoration: none; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.55), rgba(10, 14, 22, 0.92)), var(--tw-art, linear-gradient(160deg, #1c2a3d, #121a28)) center / cover;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: tw-rise 0.55s both; animation-delay: calc(var(--i, 0) * 90ms);}
.tw-card:hover{ transform: translateY(-4px); }
.tw-card.p1{ order: 2; padding-top: 38px; padding-bottom: 20px; border-color: rgba(240, 200, 90, 0.6); box-shadow: 0 0 0 1px rgba(240, 200, 90, 0.2), 0 12px 34px rgba(240, 200, 90, 0.18); }
.tw-card.p2{ order: 1; border-color: rgba(207, 216, 230, 0.4); }
.tw-card.p3{ order: 3; border-color: rgba(213, 138, 82, 0.45); }
.tw-card.p1::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.1) 50%, transparent 65%); transform: translateX(-120%); animation: jp-shine 5.5s ease-in-out infinite; }
.tw-medal{
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  font-family: var(--font-display); font-size: 13px; font-weight: 800; color: #1b1200; background: linear-gradient(135deg, var(--silver), #8fa0b8);}
.tw-card.p1 .tw-medal{ background: linear-gradient(135deg, #f9e08e, #cf9b2e); }
.tw-card.p3 .tw-medal{ background: linear-gradient(135deg, #e9a874, #b5662f); }
.tw-crown{ display: inline-block; width: 15px; height: 10px; margin-right: 5px; }
.tw-crown svg{ width: 100%; height: 100%; display: block; }
.tw-logo{ width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.tw-card.p1 .tw-logo{ width: 78px; height: 78px; }
.tw-suit{ display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: #e8eef7; }
.tw-suit.hearts, .tw-suit.diamonds{ color: #e65a5a; }
.tw-suit.spades{ color: #f6d57a; }
.tw-card .tw-suit{ width: 62px; height: 62px; font-size: 42px; }
.tw-amount{ display: flex; align-items: baseline; gap: 2px; margin-top: 4px; font-family: var(--font-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-amount em{ font-style: normal; font-size: 0.65em; color: var(--accent); }
.tw-card.p1 .tw-amount{ font-size: 32px; color: #f9e3a0; text-shadow: 0 0 20px rgba(246, 213, 122, 0.4); }
.tw-game{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.tw-meta{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tw-mult{ padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #6fe0a8; background: rgba(47, 158, 110, 0.16); border: 1px solid rgba(111, 224, 168, 0.35); }
.tw-mult.jp{ color: #f6d57a; background: rgba(240, 200, 90, 0.14); border-color: rgba(240, 200, 90, 0.45); }
.tw-when{ font-size: 11px; color: var(--muted); opacity: 0.8; }
.tw-card.ghost{ align-items: center; justify-content: center; min-height: 118px; background: rgba(255, 255, 255, 0.025); border: 1px dashed rgba(255, 255, 255, 0.14); animation: none; }
.tw-card.ghost.p1{ min-height: 146px; box-shadow: none; }
.tw-card.ghost .tw-amount{ font-size: 30px; color: var(--muted); opacity: 0.5; text-shadow: none; }

.tw-list{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.tw-list li{ animation: tw-rise 0.5s both; animation-delay: calc(var(--i, 0) * 60ms); }
.tw-row{
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px 118px 82px; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px;
  text-decoration: none; color: var(--text); font-size: 13.5px; background: rgba(255, 255, 255, 0.035); border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease;}
.tw-row:hover{ background: rgba(255, 255, 255, 0.07); border-color: rgba(240, 200, 90, 0.3); }
.tw-rank{ font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.tw-rowgame{ display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.tw-rowgame span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-row .tw-logo{ width: 30px; height: 30px; }
.tw-row .tw-suit{ width: 30px; height: 30px; font-size: 22px; }
.tw-row .tw-mult{ justify-self: start; }
.tw-rowamount{ justify-self: end; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: #f9e3a0; }
.tw-row .tw-when{ justify-self: end; }
.tw-empty{ padding: 6px 4px 2px; text-align: center; color: var(--muted); font-size: 13.5px; }
@keyframes tw-rise{ from{ opacity: 0; transform: translateY(14px); } }
@media (max-width: 900px){
  .tw{ padding: 14px 12px 10px; border-radius: 14px; }
  .tw-title h2{ font-size: 17px; }
  .tw-badge{ display: none; }
  .tw-seg{ width: 100%; }
  .tw-seg-btn{ flex: 1; padding: 8px 6px; }
  .tw-tools{ width: 100%; }
  .tw-podium{ grid-template-columns: 1fr; gap: 10px; }
  .tw-card, .tw-card.p1, .tw-card.p2, .tw-card.p3{ order: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'logo game amount' 'logo meta when'; align-items: center; justify-items: start; text-align: left; gap: 0 12px; padding: 12px 12px 12px 46px; }
  .tw-card.p1{ padding-top: 14px; padding-bottom: 14px; }
  .tw-medal{ top: 50%; left: 10px; transform: translateY(-50%); }
  .tw-card .tw-logo, .tw-card.p1 .tw-logo, .tw-card .tw-suit{ grid-area: logo; width: 46px; height: 46px; font-size: 32px; }
  .tw-game{ grid-area: game; }
  .tw-amount, .tw-card.p1 .tw-amount{ grid-area: amount; margin: 0; font-size: 19px; justify-self: end; }
  .tw-meta{ grid-area: meta; justify-content: flex-start; }
  .tw-card > .tw-when{ grid-area: when; justify-self: end; }
  .tw-card.ghost{ min-height: 56px; justify-items: center; padding: 12px; display: flex; }
  .tw-row{ grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; padding: 9px 10px; }
  .tw-row .tw-when{ display: none; }
}
[dir="rtl"] .tw-card{ direction: ltr; }
@media (prefers-reduced-motion: reduce){
  .tw-card, .tw-list li{ animation: none; }
  .tw-card.p1::after{ animation: none; }
}
@media (max-width: 900px){
  .tw-crown{ display: none; }
}

/* ===== Feature slots: the free-spin HUD, the bonus overlays, the re-spin banner ===== */
.stage .fs-hud{
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  padding: 7px 16px; border-radius: 999px; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
  background: rgba(8, 12, 20, 0.88); border: 1px solid rgba(255, 211, 107, 0.6); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); pointer-events: none;}
.stage .fs-hud[hidden]{ display: none; }
.fs-hud-spins{ color: #ffd36b; text-transform: uppercase; }
.fs-hud-win{ color: #fff; font-variant-numeric: tabular-nums; }
.stage .slot-banner{
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0.6); z-index: 8; padding: 12px 30px; border-radius: 16px; pointer-events: none;
  font-family: var(--font-display); font-size: 30px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #1b1200; white-space: nowrap;
  background: linear-gradient(135deg, #fff1b0, #f0b83a); border: 3px solid #fff; box-shadow: 0 0 34px rgba(255, 211, 107, 0.75), 0 12px 30px rgba(0, 0, 0, 0.55); opacity: 0;}
.stage .slot-banner.art{ padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
.stage .slot-banner.art img{ display: block; width: min(64vw, 380px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6)); }
.stage .slot-banner[hidden]{ display: none; }
.stage .slot-banner.show{ animation: slot-banner 1.3s ease both; }
@keyframes slot-banner{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18%{ opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30%{ transform: translate(-50%, -50%) scale(1); }
  80%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, -62%) scale(1); }}
.fs-overlay{
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(255, 211, 107, 0.22), transparent 55%), rgba(6, 8, 14, 0.88); animation: fs-in 0.35s ease both;}
.fs-overlay.out{ animation: fs-out 0.26s ease both; }
@keyframes fs-in{ from{ opacity: 0; } }
@keyframes fs-out{ to{ opacity: 0; } }
.fs-title{
  font-family: var(--font-display); font-size: clamp(26px, 6vw, 46px); font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #ffe29a;
  text-shadow: 0 0 26px rgba(255, 211, 107, 0.7), 0 4px 0 #6a3a05; animation: fs-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;}
.fs-count{ font-family: var(--font-display); font-size: clamp(18px, 4vw, 28px); font-weight: 800; color: #fff; animation: fs-pop 0.7s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fs-pick{ display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.fs-sym{
  display: grid; place-items: center; width: clamp(96px, 22vw, 150px); height: clamp(96px, 22vw, 150px); border-radius: 22px;
  background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 211, 107, 0.5); box-shadow: 0 0 30px rgba(255, 211, 107, 0.25);}
.fs-sym-img{ width: 88%; height: 88%; object-fit: contain; }
.fs-overlay.picked .fs-sym{ border-color: #ffd36b; box-shadow: 0 0 44px rgba(255, 211, 107, 0.8); animation: fs-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fs-total{
  font-family: var(--font-display); font-size: clamp(38px, 10vw, 72px); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(255, 211, 107, 0.75); animation: fs-pop 0.8s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) both;}
@keyframes fs-pop{ from{ opacity: 0; transform: scale(0.5); } }
.paytable-note{ max-width: 180px; font-size: 11px; line-height: 1.35; color: var(--muted); }
@media (prefers-reduced-motion: reduce){
  .stage .slot-banner.show, .fs-overlay, .fs-title, .fs-count, .fs-total{ animation: none; }
  .stage .slot-banner.show{ opacity: 1; }
}

/* sticky-wild multiplier in the free-spin HUD, and the genie's lamps */
.fs-hud-mult{ font-family: var(--font-display); font-size: 17px; font-weight: 900; color: #fff3a8; padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, #e0173f, #9a0f2a); border: 2px solid #ffd36b; }
.fs-hud-mult.pop{ animation: mult-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes mult-pop{ from{ transform: scale(0.5); } 60%{ transform: scale(1.35); } }
.fs-note{ max-width: 460px; font-size: 15px; color: #f1ecff; line-height: 1.4; }
.lamp-row{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lamp-btn{
  display: grid; justify-items: center; gap: 6px; width: 120px; padding: 12px 8px; border-radius: 16px; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, rgba(122, 77, 255, 0.35), rgba(13, 8, 40, 0.9)); border: 2px solid rgba(255, 211, 107, 0.6);
  transition: transform 0.15s, filter 0.2s;}
.lamp-btn img{ width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.lamp-btn:hover:not(:disabled){ transform: translateY(-4px) scale(1.05); }
.lamp-btn .lamp-wish{ font-family: var(--font-display); font-weight: 800; font-size: 13px; min-height: 18px; }
.lamp-btn.chosen{ border-color: #4ee08a; box-shadow: 0 0 26px rgba(78, 224, 138, 0.55); transform: scale(1.08); }
.lamp-btn.lost{ filter: grayscale(0.6) brightness(0.7); }
@media (prefers-reduced-motion: reduce){ .fs-hud-mult.pop{ animation: none; } }

/* Games list in the admin: grouped by category, rows drag to reorder inside their group */
.games-table .grp-head td{ background: rgba(255,255,255,0.05); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; }
.games-table .game-row{ cursor: grab; }
.games-table .game-row.dragging{ opacity: .45; background: rgba(255,200,80,0.12); }
.games-table .game-grip{ width: 22px; color: var(--muted); user-select: none; text-align: center; font-size: 16px; }
.games-table .game-row:hover .game-grip{ color: var(--text, #fff); }

/* Candy Bonanza: the pay-anywhere board — the tag with what a tumble paid, and the ante / bonus-buy panel */
.stage .sweet-tag{
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 8; max-width: 94%; text-align: center;
  padding: 7px 16px; border-radius: 999px; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: #fff;
  background: rgba(26, 10, 51, 0.92); border: 2px solid #ff7ad0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); pointer-events: none; white-space: normal;}
.stage .sweet-tag[hidden]{ display: none; }
.sweet-modes{ display: grid; gap: 10px; }
.sweet-ante{ display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; cursor: pointer; }
.sweet-ante input{ width: 18px; height: 18px; accent-color: #ff7ad0; flex: none; }
.sweet-stake{ font-size: 12px; color: var(--muted); }
.sweet-stake[hidden]{ display: none; }
.sweet-buy{ width: 100%; font-weight: 800; border-color: #ffd36b; color: #ffd36b; }
.sweet-buy:disabled{ opacity: 0.45; }

/* the lobby's jackpot footer holds only the fairness details now */
.jp-foot{ grid-template-columns: 1fr; }

/* The hero is a 16:9 banner: the art is drawn at that ratio, and the welcome slide leaves its left half
   empty for the words, so they sit there instead of in the middle */
/* 30% lower than a full 16:9 strip: the picture is cropped and slides inside it (parallax, see hero.js) */
.hero{ height: auto; aspect-ratio: 16 / 6.3; }
.promo-welcome .hero-content, .promo-prizes .hero-content{
  inset: 0 auto 0 0; width: 52%; align-items: flex-start; text-align: left; padding: 22px 22px 48px 6%;}
.promo-welcome .hero-scrim, .promo-prizes .hero-scrim{
  background: linear-gradient(90deg, rgba(6, 8, 18, .55), rgba(6, 8, 18, 0) 62%), linear-gradient(180deg, rgba(8, 12, 20, 0) 60%, rgba(8, 12, 20, .5) 100%);}
.promo-welcome .hero-name, .promo-prizes .hero-name{ font-size: clamp(24px, 4vw, 52px); }
.promo-welcome .hero-desc, .promo-prizes .hero-desc{ font-size: clamp(13px, 1.5vw, 20px); }
@media (max-width: 620px){
  .hero{ height: auto; aspect-ratio: 16 / 10.1; /* 7.6 + 33% */ }
  .promo-welcome .hero-content, .promo-prizes .hero-content{ width: 58%; padding: 10px 10px 30px 5%; }
  .promo-welcome .hero-name, .promo-prizes .hero-name{ font-size: 20px; max-width: none; }
  .promo-welcome .hero-desc, .promo-prizes .hero-desc{ display: none; }
}
[dir="rtl"] .promo-welcome .hero-content, [dir="rtl"] .promo-prizes .hero-content{ inset: 0 auto 0 0; text-align: left; align-items: flex-start; }
/* the prizes headline is longer than the welcome one: a step smaller so it stays on the empty half */
.promo-prizes .hero-name{ font-size: clamp(22px, 3.2vw, 44px); }
@media (max-width: 620px){ .promo-prizes .hero-name{ font-size: 17px; } }

/* The logo sits inside the bar instead of hanging out of it: a small badge, as tall as the bar leaves room for */
.brand{ width: 56px; height: 54px; display: flex; align-items: center; justify-content: flex-start; }
.brand img{ position: static; height: 54px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
@media (max-width: 900px){
  .brand{ width: 46px; height: 44px; }
  .brand img{ height: 44px; }
}
@media (max-width: 620px){
  .brand{ width: 42px; height: 40px; }
  .brand img{ height: 40px; top: auto; }
}

/* Game page: the logo and the tools (category, star, editor) sit at the right end of the breadcrumb row */
.game-top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.game-top .game-crumb{ margin: 0; min-width: 0; flex: 1 1 auto; }
.game-top .board-head{ flex: none; flex-wrap: nowrap; gap: 12px; justify-content: flex-end; }
.game-top .board-brand{ flex: none; }
.game-top .board-brand .game-logo{ max-height: 44px; max-width: 150px; }
.game-top .board-fav{ width: 36px; height: 36px; }
@media (max-width: 620px){
  /* the phone keeps its crumb alone, as before: the head was already hidden there */
  .game-top .board-head{ display: none; }
}

/* The cascade multiplier plaque (Gonzo's Quest sits it under the board; Neon Gems keeps it in the deck) */
.slot-mult{ display: flex; align-items: center; justify-content: center; gap: 8px; }
.slot-mult[hidden]{ display: none; }
.slot-mult-img{ display: block; height: 58px; width: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
.slot-mult.below{ margin: 10px 0 0; }
.slot-mult.below .slot-mult-img{ height: clamp(44px, 9vw, 64px); }
.slot-mult.pop .slot-mult-img{ animation: mult-plaque 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes mult-plaque{ from{ transform: scale(0.7); } 60%{ transform: scale(1.12); } to{ transform: scale(1); } }

/* ── the character beside a slot's board (1001 Genie Fortunes) ───────────────
   Two poses stacked in one box and crossfaded: idle, and turned to the board when he grants a wish.
   He floats gently; on a narrow screen there is no room left of the reels, so he is hidden there. */
.stage-canvas.has-host{ align-items: center; gap: 12px; }
.slot-host{ position: relative; flex: 0 0 auto; width: clamp(130px, 25%, 260px); aspect-ratio: 2 / 3; pointer-events: none; animation: host-float 4.5s ease-in-out infinite; }
.slot-host img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
.slot-host .slot-host-wish{ opacity: 0; transform: scale(0.96); }
.slot-host.wish .slot-host-idle{ opacity: 0; }
.slot-host.wish .slot-host-wish{ opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 22px rgba(78, 224, 200, 0.75)) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
@keyframes host-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (max-width: 700px){ .slot-host{ display: none; } }
@media (prefers-reduced-motion: reduce){ .slot-host{ animation: none; } }

/* ===== Slot console (wide screens only, .game.slot-wide set by showGame for category Slots) =====
   The board takes the whole content width and the deck becomes a console under it: the stake on the
   left (with Candy's ante / buy, or a multiplier badge, under it), SPIN and the win counter in the
   middle, autoplay on the right. The console is sticky to the bottom edge of the window, so SPIN
   stays under the thumb however tall the board is, and scrolls away with the page once the payouts
   come up. Autoplay's settings open upward over the board as a card instead of stretching the console.
   Up to 1080px nothing here applies: the mobile dock takes over (mobileDock.js).
   Rollback: drop the 'slot-wide' class in showGame (app.js), or restore data/backup/2026-10-08-before-slot-wide. */
@media (min-width: 1081px){
  .game.slot-wide .game-body{
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;}
  .game.slot-wide .stage{
    min-height: 0;}
  .game.slot-wide .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid;
    /* equal side columns keep SPIN on the page's centre line */
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 22px; row-gap: 8px;
    align-items: center;
    padding: 18px 18px 12px;
    border-radius: 20px;
    /* a soft floor under the console: dark where it sits, fading out at the top so the board shows through */
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game.slot-wide .sidebar.deck > *{
    margin-bottom: 0;}
  /* left: the stake, and whatever extra the game has under it */
  .game.slot-wide .sidebar.deck > .panel:has(.bet-body){
    grid-column: 1; grid-row: 1;}
  /* with nothing under it, the stake spans both rows, so the three columns stand level */
  .game.slot-wide .sidebar.deck:not(:has(> .slot-mult:not([hidden]))) > .panel:has(.bet-body){
    grid-row: 1 / span 2;}
  .game.slot-wide .sidebar.deck > .slot-mult{
    grid-column: 1; grid-row: 2;}
  /* Candy's Ante and Buy: a full-width strip UNDER the console, outside it (slots.js placeSweet moves the panel there)
     — the sticky console is one row, and the board gains all that height */
  .game.slot-wide > .sweet-modes{
    grid-column: 1 / -1; grid-row: 3;
    display: flex; flex-direction: row; align-items: center; gap: 18px;
    padding-top: 12px; padding-bottom: 12px;}
  .game.slot-wide > .sweet-modes .sweet-ante{ flex: 1 1 auto; min-width: 0; }
  .game.slot-wide > .sweet-modes .sweet-stake{ flex: 0 0 auto; white-space: nowrap; }
  .game.slot-wide > .sweet-modes .sweet-buy{ flex: 0 0 auto; width: min(100%, 340px); }
  /* centre: SPIN, big, with the counter under it */
  .game.slot-wide .sidebar.deck > .spin-block{
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    gap: 8px;}
  .game.slot-wide .sidebar.deck > .spin-block > :is(.spin-img-btn, .btn){
    width: 100%;}
  .game.slot-wide .sidebar.deck > .spin-block > .btn{
    min-height: 92px; font-size: 26px; letter-spacing: 0.08em;}
  /* right: autoplay, its settings a card that opens upward */
  .game.slot-wide .sidebar.deck > .auto-panel{
    grid-column: 3; grid-row: 1 / span 2; align-self: start;
    position: relative;
    justify-self: end; width: min(100%, 360px);}
  .game.slot-wide .sidebar.deck > .auto-panel .auto-body{
    position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 2;
    width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);}
  /* the bet panel lies flatter: stepper and shortcuts side by side, the ladder under them */
  /* the console stays low: stepper and the four shortcuts in one row, no ladder (as in the mobile dock) */
  .game.slot-wide .sidebar.deck .bet-body{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px; align-items: center;}
  .game.slot-wide .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game.slot-wide .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* !important: the page themes set their own chip fonts, some of them wide (the western slab) */
  .game.slot-wide .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px !important; letter-spacing: 0 !important; overflow: hidden; white-space: nowrap; }
  .game.slot-wide .sidebar.deck > .panel:has(.bet-body) > h4{ margin-bottom: 8px; }
  /* SPIN keeps a sane height: the art is wide, so it is the width that is capped */
  .game.slot-wide .sidebar.deck > .spin-block > .spin-img-btn{ width: min(100%, 250px); }
  /* the win counter lives in the right column, above autoplay (default), so SPIN stands alone in the middle and
     the console loses its height: the board gains it. .spin-block dissolves into the grid for that. */
  .game.slot-wide .sidebar.deck > .spin-block{ display: contents; }
  .game.slot-wide .sidebar.deck > .spin-block > :is(.spin-img-btn, .btn){
    grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center;}
  .game.slot-wide .sidebar.deck > .spin-block > .win-digits{
    grid-column: 3; grid-row: 1; justify-self: end; align-self: end;
    width: min(100%, 360px); margin: 0 0 2px; gap: 3px;}
  .game.slot-wide .sidebar.deck .win-digit{ height: 48px; }
  /* a game whose counter stands on the board (Crazy Monkey's palm) leaves the column to autoplay alone */
  .game.slot-wide .sidebar.deck.counter-on-board > .auto-panel{ grid-row: 1 / span 2; align-self: center; }
  /* the win digits are gone from the console: autoplay stands level with the stake (Neon Gems keeps its stake in row 1) */
  .game.slot-wide .sidebar.deck:has(> .slot-mult:not([hidden])) > .auto-panel{ grid-row: 1; }
  .game.slot-wide .sidebar.deck .stepper{
    grid-template-columns: 42px minmax(52px, 72px) 42px;}
  .game.slot-wide .sidebar.deck :is(.step-btn, .stake-value){
    height: 42px;}
  .game.slot-wide .sidebar.deck .step-btn{
    width: 42px;}
  .game.slot-wide .sidebar.deck .stake-num{
    font-size: 22px;}
}
/* below ~1280px the three columns get tight: the shortcuts go under the stepper */
@media (min-width: 1081px) and (max-width: 1279px){
  .game.slot-wide .sidebar.deck .bet-body{
    grid-template-columns: 1fr;}
}

/* ===== Slot heroes (cfg.heroes, slots.js placeHeroes): characters in the free space beside the reels =====
   Absolutely placed inside .stage-canvas so the board keeps its size; only in the wide slot layout. The
   figure breathes at rest, and on a paying round the win pose fades in with a small hop. */
.slot-hero{
  position: absolute; bottom: 0; z-index: 1; pointer-events: none;
  transform-origin: 50% 100%;
  animation: hero-breathe 5.5s ease-in-out infinite;}
.slot-hero[hidden]{ display: none; }
.slot-hero img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  transition: opacity 0.35s ease;}
.slot-hero .slot-hero-win{ opacity: 0; }
.slot-hero.won .slot-hero-idle{ opacity: 0; }
.slot-hero.won .slot-hero-win{ opacity: 1; }
.slot-hero.won{ animation: hero-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1, hero-breathe 5.5s ease-in-out 0.6s infinite; }
@keyframes hero-breathe{ 0%, 100%{ transform: scale(1, 1); } 50%{ transform: scale(1.006, 1.012); } }
@keyframes hero-hop{ 0%{ transform: translateY(0) scale(1); } 35%{ transform: translateY(-14px) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }
/* scenery (a palm): sways from its base instead of breathing */
.slot-hero.float{ animation: hero-drift 9s ease-in-out infinite; }
@keyframes hero-drift{ 0%, 100%{ transform: translate(0, 0) rotate(-1.5deg); } 33%{ transform: translate(5px, -16px) rotate(1deg); } 66%{ transform: translate(-4px, -7px) rotate(2deg); } }
.slot-hero.prop{ animation: hero-sway 7s ease-in-out infinite; }
@keyframes hero-sway{ 0%, 100%{ transform: rotate(-1.2deg); } 50%{ transform: rotate(1.2deg); } }
@media (max-width: 1080px){ .slot-hero{ display: none !important; } }
@media (prefers-reduced-motion: reduce){ .slot-hero, .slot-hero.won, .slot-hero.prop, .slot-hero.float, .slot-hero.jelly, .slot-hero.cheer{ animation: none; } }

/* the win counter standing on the board: a vertical column, one digit per row, at the right edge of the strip right
   of the reels (slotCounter.js sets --cd-h from the board's height) */
.slot-hero-counter{ position: absolute; top: 4px; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.slot-hero-counter[hidden]{ display: none; }
.slot-hero-counter .win-digits{ flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; margin: 0; }
.slot-hero-counter .win-digit{ height: var(--cd-h, 48px); width: auto; max-width: 100%; object-fit: contain; }

/* a jelly figure (cfg.heroes.<side>.jelly, the Candy bear): wobbles like gelatine, squashing and stretching from its
   base; on a win it jumps (.cheer) and carries on wobbling */
.slot-hero.jelly{ animation: hero-jelly 2.6s ease-in-out infinite; }
.slot-hero.cheer{ animation: hero-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1, hero-jelly 2.6s ease-in-out 0.6s infinite; }
@keyframes hero-jelly{
  0%, 100%{ transform: scale(1, 1); }
  25%{ transform: scale(1.025, 0.975); }
  50%{ transform: scale(0.985, 1.02); }
  75%{ transform: scale(1.015, 0.99); }
}
@media (prefers-reduced-motion: reduce){ .slot-hero.jelly, .slot-hero.cheer{ animation: none; } }

/* sprinkles thrown over the board on a win (slots.js celebrate) */
.cf{ position: absolute; top: -14px; z-index: 6; width: 8px; height: 15px; border-radius: 3px; pointer-events: none;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 255, 255, 0.5);
  animation: cf-fall var(--t, 1.5s) cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes cf-fall{ 0%{ transform: translate(0, 0) rotate(0); opacity: 1; } 80%{ opacity: 1; } 100%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cf{ display: none; } }

/* Gonzo's multiplier plaque in the strip left of the reels (slots.js placeMult): a tall stone tablet filling its box */
.slot-mult.side{ position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0; pointer-events: none; }
.slot-mult.side .slot-mult-img{ height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Dead or Alive 2: the bonus the player picks (slots.js chooseBonus) — three cards on the free-spin overlay */
.fs-overlay.fr-pick{ gap: 10px; cursor: default; }
.fr-modes{ display: flex; gap: 14px; justify-content: center; align-items: stretch; flex-wrap: wrap; width: 100%; max-width: 760px; }
.fr-mode{
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 190px; max-width: 240px; padding: 12px 12px 14px;
  border-radius: 14px; border: 2px solid rgba(255, 211, 107, 0.55); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), rgba(20, 8, 4, 0.7);
  color: #fff3d6; text-align: center; cursor: pointer; font: inherit; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;}
.fr-mode:hover, .fr-mode:focus-visible{ transform: translateY(-4px); border-color: #ffd36b; box-shadow: 0 8px 26px rgba(255, 179, 71, 0.45); outline: none; }
.fr-ico{ display: block; width: 86px; height: 86px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 211, 107, 0.6); }
.fr-name{ font-family: var(--font-display); font-size: 17px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: #ffe29a; }
.fr-text{ font-size: 12.5px; line-height: 1.4; color: #f1e3c8; flex: 1; }
.fr-risk{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #2a1000; background: #8fd36a; }
.fr-risk-2{ background: #ffb347; }
.fr-risk-3{ background: #ff6a5a; }
.fr-go{ margin-top: 2px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 #000; }
@media (max-width: 700px){ .fr-modes{ gap: 8px; } .fr-mode{ flex-basis: 100%; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 8px; } .fr-ico{ width: 52px; height: 52px; } .fr-text{ flex-basis: 100%; font-size: 11.5px; } }

/* ---- Lobby game cards, podium style (09.10.2026) ----
   Built like the top-wins podium (.tw-card): the game's backdrop under a dark veil, the logo centred up front,
   the name and pills below; no description. On hover the art slowly zooms, a gold rim lights up, a light sweep
   crosses the tile and a "Play" chip rises from the bottom. */
.grid{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card{
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 236px; padding: 26px 14px 16px; border-radius: 18px; text-align: center; text-decoration: none; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(165deg, #1b2738, #0f1622);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  animation: tw-rise 0.5s both;}
.card::before{ display: none; }
.card-art{
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--card-art, radial-gradient(120% 90% at 50% 0%, #26364d, #0f1622)) center / cover no-repeat;
  transform: scale(1.04); transition: transform 0.8s cubic-bezier(.2, .8, .2, 1), filter 0.4s ease; filter: saturate(0.9);}
/* the veil: the art reads at the top and fades into near-black under the name */
.card-glow{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.35) 0%, rgba(10, 14, 22, 0.62) 45%, rgba(8, 11, 18, 0.95) 100%);}
.card-glow::before{
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(70% 45% at 50% 34%, rgba(246, 213, 122, 0.24), rgba(246, 213, 122, 0) 70%);}
.card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.13) 50%, transparent 65%);
  transform: translateX(-120%);}
.card:hover, .card:focus-visible{
  transform: translateY(-6px); border-color: rgba(240, 200, 90, 0.6); outline: none;
  box-shadow: 0 0 0 1px rgba(240, 200, 90, 0.22), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 34px rgba(240, 200, 90, 0.16);}
.card:hover .card-art{ transform: scale(1.14); filter: saturate(1.15); }
.card:hover .card-glow::before{ opacity: 1; }
.card:hover::after{ transition: transform 0.9s ease; transform: translateX(120%); }
/* the logo stands on a soft shadow, like the winner on the podium */
.card-stage{
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 112px; margin-bottom: 4px;}
.card-stage::before{
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 62%; height: 18px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); transition: width 0.3s ease, opacity 0.3s ease;}
.card .card-logo{
  position: relative; height: 104px; width: auto; max-width: 92%; margin: 0; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);}
.card:hover .card-logo{ transform: translateY(-6px) scale(1.07); }
.card:hover .card-stage::before{ width: 48%; opacity: 0.7; }
.card .icon{
  position: relative; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0;
  border-radius: 50%; font-size: 40px; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, rgba(246, 213, 122, 0.25), rgba(224, 176, 79, 0.06) 70%);
  border: 1px solid rgba(224, 176, 79, 0.3); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);}
.card h3{
  margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: 0.2px; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);}
.card .card-meta{ justify-content: center; margin-top: 2px; gap: 5px; }
.card .card-meta .tag{ margin: 0; padding: 3px 9px; font-size: 9.5px; background-color: rgba(10, 14, 22, 0.55); }
.card .card-meta:empty{ display: none; }
.card h3, .card .card-meta{ transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
/* the play chip waits below the edge and rises in on hover, lifting the name above it */
.card-play{
  position: absolute; left: 50%; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #1b1200;
  background: linear-gradient(135deg, #f9e08e, #e0b04f 55%, #cf9b2e); box-shadow: 0 8px 22px rgba(224, 176, 79, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1);}
.card-play i{ font-style: normal; font-size: 10px; }
.card:hover .card-play, .card:focus-visible .card-play{ opacity: 1; transform: translate(-50%, 0); }
.card:hover h3, .card:hover .card-meta, .card:focus-visible h3, .card:focus-visible .card-meta{ transform: translateY(-36px); }
.card .card-fav{ z-index: 3; }
@media (hover: none){
  /* touch screens have no hover: no chip, no lift; the tile itself is the button */
  .card-play{ display: none; }
  .card:hover h3, .card:hover .card-meta{ transform: none; }}
@media (max-width: 700px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
  .card{ min-height: 186px; padding: 20px 10px 12px; border-radius: 14px; }
  .card-stage{ height: 84px; }
  .card .card-logo{ height: 78px; }
  .card .icon{ width: 64px; height: 64px; font-size: 30px; }
  .card h3{ font-size: 14px; }
  .card .card-meta .tag.series{ display: none; }}
@media (prefers-reduced-motion: reduce){
  .card, .card-art, .card-logo, .card-play, .card h3, .card .card-meta{ animation: none; transition: none; }
  .card:hover::after{ transition: none; transform: translateX(-120%); }}

/* ---- Popular games carousel (09.10.2026) ---- */
.pop{ margin: 0 0 22px; }
.pop-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pop-head h2{ line-height: 1; }
.pop-head h2{ margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: 0.3px; }
.pop-flame{
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #2a1000;
  background: linear-gradient(135deg, #ffd36b, #ff8a3d); box-shadow: 0 6px 18px rgba(255, 138, 61, 0.35);}
.pop-flame svg{ width: 22px; height: 22px; }
.pop-arrows{ display: flex; gap: 8px; margin-left: auto; }
.pop-arrow{
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;}
.pop-arrow svg{ width: 18px; height: 18px; }
.pop-arrow:hover{ background: rgba(224, 176, 79, 0.18); border-color: rgba(224, 176, 79, 0.6); color: var(--accent); transform: scale(1.06); }
.pop.no-scroll .pop-arrows{ display: none; }
.pop-wrap{ position: relative; margin: 0 -6px; }
/* the row fades out at an edge where there is more to scroll to */
.pop-wrap::before, .pop-wrap::after{ content: ''; position: absolute; top: 0; bottom: 0; width: 38px; z-index: 4; pointer-events: none; transition: opacity 0.25s ease; }
.pop-wrap::before{ left: 0; background: linear-gradient(90deg, var(--bg, #0b0f17), transparent); }
.pop-wrap::after{ right: 0; background: linear-gradient(270deg, var(--bg, #0b0f17), transparent); }
.pop.at-start .pop-wrap::before, .pop.at-end .pop-wrap::after{ opacity: 0; }
.pop-track{
  display: flex; gap: 18px; padding: 10px 6px 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 6px; scrollbar-width: none; outline: none; overscroll-behavior-x: contain;}
.pop-track::-webkit-scrollbar{ display: none; }
.pop-track .card{ flex: 0 0 218px; scroll-snap-align: start; }
/* a rank medal on the tile's corner, gold / silver / bronze for the first three */
.pop-rank{
  position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 9px;
  border-radius: 999px; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: #e9eef7;
  background: rgba(10, 14, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);}
.pop-rank.r1{ color: #1b1200; background: linear-gradient(135deg, #f9e08e, #cf9b2e); border-color: transparent; }
.pop-rank.r2{ color: #1b1200; background: linear-gradient(135deg, var(--silver, #cfd8e6), #8fa0b8); border-color: transparent; }
.pop-rank.r3{ color: #1b1200; background: linear-gradient(135deg, #e9a874, #b5662f); border-color: transparent; }
@media (max-width: 700px){
  .pop-head h2{ font-size: 19px; }
  .pop-flame{ width: 34px; height: 34px; }
  .pop-arrows{ display: none; }
  .pop-track{ gap: 12px; }
  .pop-track .card{ flex-basis: 156px; }
  /* Popular on a phone: two rows, two and a half tiles across, the whole block swipes sideways */
  .pop.two-rows .pop-track{ display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2.5); gap: 12px; }
  .pop.two-rows .pop-track .card{ flex: none; width: auto; min-width: 0; }
  .pop-wrap::before, .pop-wrap::after{ width: 22px; }}
@media (prefers-reduced-motion: reduce){ .pop-track{ scroll-behavior: auto; } }

/* ---- Random game button (09.10.2026): fixed in the bottom-right corner of the lobby and the game pages ---- */
.random-fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 150; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 8px;
  border: 0; border-radius: 999px; cursor: pointer; color: #1b1200; font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  background: linear-gradient(135deg, #ffe08a 0%, #f0b73f 48%, #d98a1c 100%);
  box-shadow: 0 10px 28px rgba(224, 150, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(150, 80, 0, 0.25);
  animation: rf-bob 3.2s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;}
.random-fab[hidden]{ display: none; }
.random-fab::before{ /* a light sweep that crosses the button every few seconds */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0;
  animation: rf-sweep 4.5s ease-in-out infinite;}
.rf-ring{ /* a soft ring that breathes outwards */
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 2px solid rgba(255, 214, 120, 0.8); animation: rf-ping 2.6s ease-out infinite;}
.rf-dice{
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; color: #fff6dc;
  background: radial-gradient(circle at 35% 30%, #5b3b00, #2a1a00); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: rf-wiggle 3.2s ease-in-out infinite;}
.rf-dice svg{ width: 24px; height: 24px; }
.random-fab:hover{ transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 36px rgba(224, 150, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65); animation-play-state: paused; }
.random-fab:active{ transform: scale(0.97); }
.random-fab.rolling .rf-dice{ animation: rf-roll 0.52s cubic-bezier(.3, .1, .3, 1); }
.random-fab.rolling{ animation: none; transform: scale(1.06); }
@keyframes rf-bob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }
@keyframes rf-wiggle{ 0%, 70%, 100%{ transform: rotate(0); } 78%{ transform: rotate(-16deg); } 86%{ transform: rotate(14deg); } 94%{ transform: rotate(-6deg); } }
@keyframes rf-sweep{ 0%, 55%{ background-position: 160% 0; } 90%, 100%{ background-position: -60% 0; } }
@keyframes rf-ping{ 0%{ transform: scale(1); opacity: 0.8; } 70%, 100%{ transform: scale(1.28, 1.5); opacity: 0; } }
@keyframes rf-roll{ 0%{ transform: rotate(0) scale(1); } 60%{ transform: rotate(540deg) scale(1.25); } 100%{ transform: rotate(720deg) scale(1); } }
/* below the game pages' bet console (it sits centred, so the corner is free only on a wide window) */
@media (max-width: 1360px){ .random-fab[data-page="game"]{ display: none; } }
@media (max-width: 700px){
  .random-fab{ right: 14px; bottom: calc(14px + var(--dock-h, 0px)); height: 50px; padding: 0 8px; }
  .rf-label{ display: none; }
  .random-fab[data-page="lobby"]{ bottom: 14px; }
}
[dir="rtl"] .random-fab{ right: auto; left: 22px; }
@media (prefers-reduced-motion: reduce){ .random-fab, .random-fab::before, .rf-ring, .rf-dice{ animation: none; } .rf-ring{ display: none; } }

/* ===== Mines: the forge vault (09.10.2026, public/js/games/mines.js) =====
   The field is an arena: the payout ladder on the left, the 5x5 grid of riveted iron plates in the middle, the gauge
   (multiplier, cash-out value, safe tiles found, mines in play) on the right. On a wide screen the deck is a console
   under it — stake, one big START that turns into CASH OUT while a round runs, the mine count with a random-tile pick. */
.mn-arena{
  display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(190px, 240px); gap: 22px; align-items: center;
  width: 100%; padding: 6px 4px;}
.mn-cap{ font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffb347; margin-bottom: 10px; text-shadow: 0 0 10px rgba(255, 122, 26, 0.4); }
/* the board: a riveted iron frame with a molten seam inside */
.mn-board{
  position: relative; justify-self: center; width: min(100%, calc(100vh - 420px), 560px); min-width: 300px; aspect-ratio: 1; padding: 14px; border-radius: 20px;
  background:
    radial-gradient(circle at 12px 12px, #8a8f99 0 3px, #1a1d23 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #8a8f99 0 3px, #1a1d23 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at 12px calc(100% - 12px), #8a8f99 0 3px, #1a1d23 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8a8f99 0 3px, #1a1d23 3.5px 4.5px, transparent 5px),
    linear-gradient(160deg, #3a404b, #1d2129 60%, #121519);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 0 7px rgba(0, 0, 0, 0.35), inset 0 0 26px rgba(255, 122, 26, 0.22), 0 0 0 1px #0a0c10, 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 122, 26, 0.16);
  transition: box-shadow 0.4s ease;}
.mn-arena.won .mn-board{ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 0 7px rgba(0, 0, 0, 0.35), inset 0 0 40px rgba(255, 210, 90, 0.4), 0 0 0 1px #0a0c10, 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 200, 80, 0.45); }
.mn-arena.lost .mn-board{ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 0 7px rgba(0, 0, 0, 0.35), inset 0 0 40px rgba(255, 60, 30, 0.45), 0 0 0 1px #0a0c10, 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 60, 30, 0.35); }
.mn-board .mines-grid{ width: 100%; height: 100%; max-width: none; gap: 9px; grid-template-rows: repeat(5, 1fr); }
/* a plate: brushed iron with a bevel and four rivets; hover lifts it and lights the seam */
.mines-grid .mine-cell{
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: auto; width: 100%; height: 100%; padding: 0; overflow: visible;
  border: 0; border-radius: 12px; cursor: pointer; color: #fff; font-size: 22px;
  background: linear-gradient(155deg, #4b525e 0%, #333943 45%, #22262e 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 4px 0 #0d0f13, 0 6px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;}
.mn-plate{
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at 9px 9px, #9aa0aa 0 2px, #14161b 2.5px 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #9aa0aa 0 2px, #14161b 2.5px 3px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #9aa0aa 0 2px, #14161b 2.5px 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #9aa0aa 0 2px, #14161b 2.5px 3px, transparent 3.5px),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 6px);}
.mn-plate::after{ /* the centre boss: a dark disc that glows like an ember under the pointer */
  content: ''; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b414b, #15181d 70%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;}
.mn-live .mines-grid .mine-cell:not(.safe):not(.mine):hover{
  transform: translateY(-4px) scale(1.03); filter: brightness(1.15);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 140, 40, 0.85), 0 8px 0 #0d0f13, 0 10px 22px rgba(255, 122, 26, 0.45);}
.mn-live .mines-grid .mine-cell:not(.safe):not(.mine):hover .mn-plate::after{ background: radial-gradient(circle at 40% 35%, #ffb347, #ff6a1a 55%, #7a2a00); box-shadow: 0 0 14px rgba(255, 122, 26, 0.9); }
.game[data-game="mines"]:not(.mn-live) .mines-grid .mine-cell:not(.safe):not(.mine):not(.ghost){ cursor: default; filter: saturate(0.7) brightness(0.85); }
/* START lights the plates row by row */
.mines-grid.armed .mine-cell{ animation: mn-arm 0.6s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes mn-arm{ 0%{ box-shadow: inset 0 0 0 2px rgba(255, 160, 60, 0.95), 0 0 22px rgba(255, 122, 26, 0.8); filter: brightness(1.6); } 100%{} }
/* safe: the plate is lifted off, dug ground with the shovel underneath */
.mines-grid .mine-cell.safe{
  cursor: default;
  background: radial-gradient(circle at 50% 45%, #6a4a24, #3a2612 60%, #1e130a);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(255, 200, 90, 0.55), 0 0 18px rgba(255, 190, 80, 0.35);}
.mines-grid .mine-cell.safe .mn-plate, .mines-grid .mine-cell.mine .mn-plate, .mines-grid .mine-cell.ghost .mn-plate{ display: none; }
.mines-grid .mine-cell .mine-smile, .mines-grid .mine-cell .mine-bomb{ position: relative; width: 70%; height: 70%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.mines-grid .mine-cell.fresh .mine-smile{ animation: mn-dig 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes mn-dig{ 0%{ transform: translateY(30%) scale(0.3) rotate(-30deg); opacity: 0; } 100%{ transform: none; opacity: 1; } }
.mn-gain{
  position: absolute; left: 50%; top: 4px; z-index: 3; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #ffe08a; text-shadow: 0 0 8px rgba(255, 170, 40, 0.9), 0 2px 0 #000;
  animation: mn-rise 1.1s ease-out both;}
@keyframes mn-rise{ 0%{ opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 20%{ opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100%{ opacity: 0; transform: translate(-50%, -26px) scale(1); } }
/* the mine that went off: a red-hot hole and a shock ring */
.mines-grid .mine-cell.mine{
  cursor: default;
  background: radial-gradient(circle at 50% 50%, #ff8a3a, #c02a10 45%, #3a0a04 80%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 80, 30, 0.75);}
.mines-grid .mine-cell.mine.fresh .mine-bomb{ animation: mn-boom 0.5s ease-out both; }
@keyframes mn-boom{ 0%{ transform: scale(1.6); filter: brightness(3); } 100%{ transform: none; } }
.mn-blast{ position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; border: 4px solid rgba(255, 170, 60, 0.9); animation: mn-ring 0.7s ease-out both; }
@keyframes mn-ring{ 0%{ transform: scale(0.3); opacity: 1; } 100%{ transform: scale(1.4); opacity: 0; } }
/* the mines the round did not touch */
.mines-grid .mine-cell.ghost{ cursor: default; background: linear-gradient(155deg, #2a2e36, #16191e); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); filter: none; }
.mines-grid .mine-cell.ghost .mine-bomb{ width: 58%; height: 58%; opacity: 0.55; filter: grayscale(0.5); }
.mn-arena.shake{ animation: mn-shake 0.5s ease both; }
@keyframes mn-shake{ 0%, 100%{ transform: none; } 15%{ transform: translate(-8px, 3px) rotate(-0.6deg); } 30%{ transform: translate(7px, -4px) rotate(0.5deg); } 45%{ transform: translate(-5px, 2px); } 60%{ transform: translate(4px, -2px); } 80%{ transform: translate(-2px, 1px); } }

/* the payout ladder: steps up the left side, the next one lit like a fuse */
.mn-ladder, .mn-gauge{
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 16px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 22, 10, 0.86), rgba(16, 10, 6, 0.92));
  border: 1px solid rgba(233, 182, 76, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 122, 26, 0.08), 0 10px 26px rgba(0, 0, 0, 0.45);}
.mn-ladder-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mn-ladder-list li{
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: #cdb8a4; font-size: 13px;
  transition: background 0.25s ease, transform 0.25s ease;}
.mn-ladder-list li span{ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, 0.45); color: #a89480; }
.mn-ladder-list li b{ font-family: var(--font-display); font-weight: 800; color: #f2dcb8; }
.mn-ladder-list li.done{ opacity: 0.55; }
.mn-ladder-list li.done span{ background: #3f8a52; color: #fff; }
.mn-ladder-list li.next{
  transform: scale(1.04); color: #1a0e00; border-color: transparent;
  background: linear-gradient(90deg, #ffcf6b, #ff8a2a); box-shadow: 0 0 18px rgba(255, 140, 40, 0.55);}
.mn-ladder-list li.next span{ background: rgba(0, 0, 0, 0.35); color: #fff; }
.mn-ladder-list li.next b{ color: #1a0e00; }
.mn-live .mn-ladder-list li.next{ animation: mn-fuse 1.4s ease-in-out infinite; }
@keyframes mn-fuse{ 0%, 100%{ box-shadow: 0 0 12px rgba(255, 140, 40, 0.45); } 50%{ box-shadow: 0 0 26px rgba(255, 170, 60, 0.9); } }

/* the gauge: the multiplier in molten digits and the round's figures */
.mn-mult{
  font-family: var(--font-display); font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; margin-bottom: 12px;
  background: linear-gradient(180deg, #fff1c2, #ffb347 45%, #ff6a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1000) drop-shadow(0 0 14px rgba(255, 122, 26, 0.45));}
.mn-stat{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(233, 182, 76, 0.18); font-size: 12.5px; color: #c8b29c; }
.mn-stat b{ font-family: var(--font-display); font-size: 15px; color: #fbe6c0; }
.mn-bar{ height: 8px; margin: 12px 0 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); overflow: hidden; }
.mn-bar i{ display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffcf6b, #ff6a1a); box-shadow: 0 0 10px rgba(255, 122, 26, 0.7); transition: width 0.4s ease; }
.mn-bombs{ display: flex; flex-wrap: wrap; gap: 4px; min-height: 12px; }
.mn-bomb-dot{ width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a6f78, #111 70%); box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.5); }
.mn-verdict{ margin-top: 10px; min-height: 22px; text-align: center; }

/* the mine count and the random pick (part of the deck) */
.mn-setup .mn-mine-row{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mn-setup .mn-random{ width: 100%; margin-top: 10px; }

@media (min-width: 1081px){
  /* the arena takes the content width; the deck is a console under it, sticky to the bottom edge */
  .game[data-game="mines"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="mines"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(0, 1fr); column-gap: 22px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="mines"] .sidebar.deck > *{ margin-bottom: 0; align-self: stretch; }
  .game[data-game="mines"] .sidebar.deck > .mn-bet{ grid-column: 1; }
  .game[data-game="mines"] .sidebar.deck > .mn-go{ grid-column: 2; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="mines"] .sidebar.deck > .mn-setup{ grid-column: 3; }
  /* the console stays low, so the board keeps its height */
  .game[data-game="mines"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="mines"] .sidebar.deck > .mn-go > h4{ display: none; }
  .game[data-game="mines"] .sidebar.deck > .mn-go .mines-actions > *{ max-width: 250px; }
  .game[data-game="mines"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="mines"] .mn-setup .mn-random{ margin-top: 8px; padding-top: 7px; padding-bottom: 7px; }
  /* the stake lies flat: stepper and shortcuts in one row */
  .game[data-game="mines"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="mines"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="mines"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="mines"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="mines"] .sidebar.deck .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="mines"] .sidebar.deck :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="mines"] .sidebar.deck .step-btn{ width: 42px; }
  /* START and CASH OUT are one button: the one that fits the moment */
  .game[data-game="mines"] .mines-actions{ display: flex; justify-content: center; }
  .game[data-game="mines"] .mines-actions > *{ width: 100%; max-width: 280px; }
  .game[data-game="mines"]:not(.mn-live) .mines-actions > .mn-cash,
  .game[data-game="mines"].mn-live .mines-actions > .mn-start{ display: none; }
  .game[data-game="mines"].mn-live .mines-actions > .mn-cash{ animation: mn-cashpulse 1.6s ease-in-out infinite; }
}
@keyframes mn-cashpulse{ 0%, 100%{ filter: drop-shadow(0 0 6px rgba(255, 140, 40, 0.4)); } 50%{ filter: drop-shadow(0 0 20px rgba(255, 170, 60, 0.95)); } }
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="mines"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
  .mn-arena{ grid-template-columns: minmax(130px, 160px) minmax(0, 1fr) minmax(170px, 200px); gap: 14px; }
}
@media (max-width: 1080px){
  /* phone and tablet: the gauge becomes a strip over the board, the ladder steps aside */
  .mn-arena{ grid-template-columns: 1fr; gap: 12px; }
  .mn-ladder{ display: none; }
  .mn-gauge{ order: -1; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px 10px; padding: 10px 12px; }
  .mn-gauge .mn-stat{ flex-direction: column; align-items: flex-start; gap: 1px; font-size: 10.5px; line-height: 1.2; }
  .mn-gauge .mn-stat b{ font-size: 14px; white-space: nowrap; }
  .mn-gauge .mn-cap, .mn-gauge .mn-bombs, .mn-gauge .mn-bar{ display: none; }
  .mn-gauge .mn-mult{ margin: 0; font-size: 30px; }
  .mn-gauge .mn-stat{ padding: 2px 0; border: 0; }
  .mn-gauge .mn-verdict{ grid-column: 1 / -1; margin: 0; }
  .mn-board{ width: min(100%, 520px); padding: 10px; }
  .mn-board .mines-grid{ gap: 6px; }
}
@media (prefers-reduced-motion: reduce){
  .mines-grid.armed .mine-cell, .mn-gain, .mn-blast, .mn-arena.shake, .mn-live .mn-ladder-list li.next, .mines-grid .mine-cell.fresh .mine-smile, .mines-grid .mine-cell.mine.fresh .mine-bomb, .mn-live .mines-actions > .mn-cash{ animation: none; }
}

/* ===== Limbo: the neon launch (09.10.2026, public/js/games/limbo.js) =====
   A night-sky screen with a log-scale axis and the dashed lime target; the big number climbs over it during the
   flight. Recent results run above the screen. On a wide screen the deck is a console under it: stake (with autoplay
   under it), a big PLAY in the middle, the target (stepper, quick chips, win chance and payout, chance slider). */
.lb-arena{ display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.lb-hist{ display: flex; gap: 6px; width: 100%; max-width: calc((100vh - 500px) * 960 / 420); min-height: 28px; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.lb-pill{
  flex: none; padding: 4px 11px; border-radius: 999px; font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #b9a8d4;
  animation: lb-pop 0.35s cubic-bezier(.2, 1.4, .4, 1) both;}
.lb-pill.win{ color: #10170a; background: linear-gradient(180deg, #e2ff7a, #a6e01a); border-color: transparent; box-shadow: 0 0 12px rgba(198, 255, 46, 0.35); }
.lb-pill:not(:first-child){ animation: none; }
@keyframes lb-pop{ 0%{ transform: scale(0.4); opacity: 0; } 100%{ transform: none; opacity: 1; } }
.lb-empty{ color: #9a88b8; font-size: 13px; padding: 4px 2px; }
.lb-screen{
  position: relative; width: 100%; max-width: calc((100vh - 500px) * 960 / 420); min-width: 300px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(198, 255, 46, 0.35);
  box-shadow: 0 0 0 1px #05030a, 0 0 30px rgba(150, 70, 220, 0.25), 0 18px 40px rgba(0, 0, 0, 0.55);}
.lb-canvas{ display: block; width: 100% !important; height: auto; }
.lb-screen.flash::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(198, 255, 46, 0.35), transparent 70%); animation: lb-flash 0.6s ease-out both; }
@keyframes lb-flash{ 0%{ opacity: 1; } 100%{ opacity: 0; } }
.lb-hud{ position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.lb-tag{
  position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 14px; border-radius: 12px;
  background: rgba(10, 6, 18, 0.72); border: 1px dashed rgba(198, 255, 46, 0.6);}
.lb-tag span{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b9a8d4; }
.lb-tag b{ font-family: var(--font-display); font-size: 20px; font-weight: 900; color: #c6ff2e; }
.lb-num{
  font-family: var(--font-display); font-weight: 900; font-size: clamp(46px, 8vw, 104px); letter-spacing: -1px; line-height: 1; color: #f4eeff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(150, 70, 220, 0.55); font-variant-numeric: tabular-nums;
  transition: color 0.15s ease, transform 0.2s ease;}
.lb-num.flying{ color: #fff; }
.lb-num.over, .lb-num.win{ color: #c6ff2e; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 34px rgba(198, 255, 46, 0.65); }
.lb-num.win{ animation: lb-land 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.lb-num.lose{ color: #ff5a6a; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 60, 80, 0.5); animation: lb-drop 0.45s ease both; }
@keyframes lb-land{ 0%{ transform: scale(1.25); } 100%{ transform: none; } }
@keyframes lb-drop{ 0%{ transform: translateY(-6px); } 40%{ transform: translateY(6px); } 100%{ transform: none; } }

/* the target panel */
.lb-target .lb-stepper{ display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; }
.lb-target .lb-input{ height: 42px; margin: 0; text-align: center; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.lb-target .lb-quick{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.lb-target .lb-quick .chip{ min-width: 0; padding-left: 0; padding-right: 0; font-size: 11.5px; }
.lb-odds{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lb-odds > div{ display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.lb-odds span{ font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.lb-odds b{ font-family: var(--font-display); font-size: 16px; color: #c6ff2e; }
.lb-chance-range{ width: 100%; margin-top: 10px; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #c6ff2e var(--fill, 50%), rgba(255, 255, 255, 0.12) var(--fill, 50%)); }
.lb-chance-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c6ff2e 55%, #5a7a00); box-shadow: 0 0 12px rgba(198, 255, 46, 0.7); }
.lb-chance-range::-moz-range-thumb{ width: 22px; height: 22px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c6ff2e 55%, #5a7a00); }
/* PLAY: a neon launch button */
.game[data-game="limbo"] .lb-play{
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; font-size: 22px !important;
  color: #10170a !important; background: linear-gradient(180deg, #ecff9a, #c6ff2e 45%, #7fb800) !important; border-color: #eaff9a !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 0 #2a3a00, 0 0 28px rgba(198, 255, 46, 0.45) !important; text-shadow: none !important;}
.game[data-game="limbo"] .lb-play-ico{ font-size: 24px; transition: transform 0.25s ease; }
.game[data-game="limbo"] .lb-play:hover:not(:disabled) .lb-play-ico{ transform: translate(3px, -3px); }
.game[data-game="limbo"] .lb-play:not(:disabled){ animation: lb-ready 2.4s ease-in-out infinite; }
@keyframes lb-ready{ 0%, 100%{ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 0 #2a3a00, 0 0 18px rgba(198, 255, 46, 0.35); } 50%{ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 0 #2a3a00, 0 0 36px rgba(198, 255, 46, 0.75); } }

@media (min-width: 1081px){
  .game[data-game="limbo"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="limbo"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 8px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="limbo"] .sidebar.deck > *{ margin-bottom: 0; }
  .game[data-game="limbo"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="limbo"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="limbo"] .sidebar.deck > .lb-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="limbo"] .sidebar.deck > .auto-panel{ grid-column: 1; grid-row: 2; position: relative; }
  .game[data-game="limbo"] .sidebar.deck > .auto-panel .auto-body{
    position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 2; width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);}
  .game[data-game="limbo"] .sidebar.deck > .lb-go{ grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="limbo"] .sidebar.deck > .lb-go > h4{ display: none; }
  .game[data-game="limbo"] .sidebar.deck > .lb-target{ grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .game[data-game="limbo"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="limbo"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="limbo"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="limbo"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="limbo"] .sidebar.deck .bet-body .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="limbo"] .sidebar.deck .bet-body :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="limbo"] .sidebar.deck .bet-body .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="limbo"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}
@media (max-width: 1080px){
  .lb-hist, .lb-screen{ max-width: none; }
  .lb-tag{ top: 8px; right: 8px; padding: 5px 9px; }
  .lb-tag b{ font-size: 15px; }
}
@media (prefers-reduced-motion: reduce){
  .lb-pill, .lb-num.win, .lb-num.lose, .lb-screen.flash::after, .game[data-game="limbo"] .lb-play:not(:disabled){ animation: none; }
}

/* ===== Skyfall Run: the sunset sortie (09.10.2026, public/js/games/skyfallrun.js) =====
   A sunset sky with parallax clouds and peaks, the jet's contrail, the auto cash-out as a gold dashed line; the big
   multiplier and the live payout over the sky; the crash strip above it. On a wide screen the deck is a console under
   it: stake (+ autoplay), LAUNCH / CASH OUT, auto cash-out. */
.sf-arena{ display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.sf-hist{ display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; max-width: calc((100vh - 500px) * 960 / 440); min-height: 28px; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sf-hist .sf-pill{ flex: none; padding: 4px 11px; border-radius: 999px; font-family: var(--font-display); font-size: 12.5px; font-weight: 800; border: 1px solid transparent; }
.sf-hist .sf-pill.low{ background: rgba(255, 90, 70, 0.14); color: #ff9a86; border-color: rgba(255, 90, 70, 0.3); }
.sf-hist .sf-pill.mid{ background: rgba(90, 170, 255, 0.16); color: #a8d0ff; border-color: rgba(90, 170, 255, 0.35); }
.sf-hist .sf-pill.high{ background: linear-gradient(180deg, #ffe08a, #f0a83a); color: #2a1400; box-shadow: 0 0 12px rgba(255, 190, 80, 0.45); }
.sf-hist .sf-pill:first-child{ animation: lb-pop 0.35s cubic-bezier(.2, 1.4, .4, 1) both; }
.sf-hist .sf-empty{ color: #c9b2a8; font-size: 13px; padding: 4px 2px; }
.sf-screen{
  position: relative; width: 100%; max-width: calc((100vh - 500px) * 960 / 440); min-width: 300px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 190, 110, 0.45);
  box-shadow: 0 0 0 1px #07040a, 0 0 34px rgba(240, 120, 60, 0.25), 0 18px 40px rgba(0, 0, 0, 0.55);}
.sf-canvas{ display: block; width: 100% !important; height: auto; }
.sf-screen.shake{ animation: mn-shake 0.5s ease both; }
.sf-hud{ position: absolute; left: 0; right: 0; top: 7%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.sf-num{
  font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 7.4vw, 96px); line-height: 1; letter-spacing: -1px; color: #fff6e6;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 140, 60, 0.45); font-variant-numeric: tabular-nums;}
.sf-num.hot{ color: #ffe08a; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 36px rgba(255, 190, 80, 0.7); }
.sf-num.win{ color: #ffe08a; animation: lb-land 0.5s cubic-bezier(.2, 1.6, .4, 1) both; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 210, 90, 0.85); }
.sf-num.lose{ color: #ff5a4a; animation: lb-drop 0.45s ease both; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 60, 40, 0.6); }
.sf-sub{ font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 1.8vw, 22px); color: #ffe7c4; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); min-height: 1.2em; }
.sf-banner{ margin-top: 6px; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; animation: lb-pop 0.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.sf-banner.win{ background: linear-gradient(180deg, #ffe08a, #f0a83a); color: #2a1400; box-shadow: 0 0 18px rgba(255, 190, 80, 0.6); }
.sf-banner.lose{ background: rgba(120, 10, 10, 0.75); color: #ffd0c8; border: 1px solid rgba(255, 90, 70, 0.6); }
.sf-tag{
  position: absolute; top: 14px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 14px; border-radius: 12px;
  background: rgba(14, 8, 24, 0.7); border: 1px dashed rgba(255, 210, 90, 0.7);}
.sf-tag span{ font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #e6c9b8; }
.sf-tag b{ font-family: var(--font-display); font-size: 19px; font-weight: 900; color: #ffd25a; }
.sf-tag.off{ border-style: solid; border-color: rgba(255, 255, 255, 0.15); }
.sf-tag.off b{ color: #9a8a90; }

/* the deck */
.sf-autopanel .sf-auto-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sf-autopanel .sf-auto-head h4{ margin: 0; }
.sf-autopanel .sf-stepper{ display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; }
.sf-autopanel .sf-auto{ height: 42px; margin: 0; text-align: center; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.sf-autopanel .sf-quick{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.sf-autopanel .sf-quick .chip{ min-width: 0; padding-left: 0; padding-right: 0; font-size: 11.5px; }
.sf-autopay{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.sf-autopay span{ font-size: 10.5px; line-height: 1.3; color: var(--muted); }
.sf-autopay b{ font-family: var(--font-display); font-size: 16px; color: #ffd25a; white-space: nowrap; }
.sf-autopanel:has(input[type="checkbox"]:not(:checked)) :is(.sf-stepper, .sf-quick, .sf-autopay){ opacity: 0.45; }


@media (min-width: 1081px){
  .game[data-game="skyfallrun"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="skyfallrun"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 8px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="skyfallrun"] .sidebar.deck > *{ margin-bottom: 0; }
  .game[data-game="skyfallrun"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="skyfallrun"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="skyfallrun"] .sidebar.deck > .sf-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="skyfallrun"] .sidebar.deck > .auto-panel{ grid-column: 1; grid-row: 2; position: relative; }
  .game[data-game="skyfallrun"] .sidebar.deck > .auto-panel .auto-body{
    position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 2; width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);}
  .game[data-game="skyfallrun"] .sidebar.deck > .sf-go{ grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="skyfallrun"] .sidebar.deck > .sf-go > h4{ display: none; }
  .game[data-game="skyfallrun"] .sidebar.deck > .sf-autopanel{ grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="skyfallrun"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}
@media (max-width: 1080px){
  .sf-hist, .sf-screen{ max-width: none; }
  .sf-tag{ top: 8px; right: 8px; padding: 5px 9px; }
  .sf-tag b{ font-size: 14px; }
  .sf-autopay span{ display: none; }
}
/* on a phone the auto mark is in the dock right under the screen, and the tag would sit on the big number */
@media (max-width: 700px){ .sf-tag{ display: none; } .sf-hud{ top: 5%; } }
@media (prefers-reduced-motion: reduce){
  .sf-num.win, .sf-num.lose, .sf-banner, .sf-screen.shake, .sf-hist .sf-pill:first-child{ animation: none; }
}

/* Skyfall Run: LAUNCH and CASH OUT (09.10.2026, second pass). One button with an icon disc and two lines of text:
   LAUNCH is a jet-blue plate in a gold rim (the bet under the word), CASH OUT a molten-gold plate with the live sum
   and multiplier, a ring breathing round it. A light sweep crosses both now and then. Same look in the phone dock. */
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 10px 18px 10px 12px !important;
  border: 2px solid #ffd25a !important; border-radius: 18px !important;
  color: #fff !important; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35) !important; font-family: var(--font-display) !important; letter-spacing: 0 !important;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(180deg, #4fb4ff 0%, #2470e0 45%, #12398f 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -6px 14px rgba(5, 20, 60, 0.55), 0 5px 0 #0a1d4a, 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 26px rgba(80, 160, 255, 0.35) !important;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.2s ease !important;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;}
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play::before{ display: none !important; }
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play::after{
  content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%) !important; background-size: 260% 100% !important;
  background-position: 160% 0; animation: sf-sweep 3.6s ease-in-out infinite;}
@keyframes sf-sweep{ 0%, 55%{ background-position: 160% 0; } 90%, 100%{ background-position: -60% 0; } }
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play:hover:not(:disabled){ transform: translateY(-2px); filter: brightness(1.08); }
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play:active:not(:disabled){
  transform: translateY(4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -3px 10px rgba(5, 20, 60, 0.55), 0 1px 0 #0a1d4a, 0 4px 12px rgba(0, 0, 0, 0.45) !important;}
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play:disabled{ filter: grayscale(0.55) brightness(0.75); cursor: default; }
/* the icon disc */
.sf-btn-ico{
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  font-size: 24px; line-height: 1; color: #fff;
  background: radial-gradient(circle at 35% 30%, #2b5fc8, #0b2160 75%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px #ffd25a, 0 3px 8px rgba(0, 0, 0, 0.45);
  transform: rotate(-30deg); transition: transform 0.3s ease;}
.sf-play:hover:not(:disabled) .sf-btn-ico{ transform: rotate(-45deg) translate(2px, -2px); }
.sf-btn-text{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sf-btn-top{ font-size: 23px !important; font-weight: 900; letter-spacing: 0.12em !important; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.sf-play.sf-cash .sf-btn-top{ font-size: 21px !important; letter-spacing: 0.06em !important; }
.sf-btn-sub{ font-size: 13px !important; font-weight: 700; letter-spacing: 0.02em !important; opacity: 0.9; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* CASH OUT: molten gold with a breathing ring and the live sum */
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play.sf-cash{
  color: #2a1400 !important; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.6) !important; border-color: #fff1b8 !important;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.6), transparent 55%),
    linear-gradient(180deg, #fff0a8 0%, #ffc23a 45%, #e07a10 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -6px 14px rgba(120, 50, 0, 0.45), 0 5px 0 #6a3200, 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 34px rgba(255, 190, 70, 0.6) !important;
  animation: sf-ring 1.1s ease-in-out infinite !important;}
:is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play.sf-cash::after{ animation-duration: 1.6s; }
.sf-play.sf-cash .sf-btn-ico{ background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 60%, #c87a10); color: #2a1400; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.6), 0 0 0 2px #6a3200, 0 3px 8px rgba(0, 0, 0, 0.35); transform: none; }
.sf-play.sf-cash .sf-btn-sub{ font-size: 16px !important; font-weight: 900; opacity: 1; }
@keyframes sf-ring{
  0%, 100%{ outline: 0 solid rgba(255, 200, 80, 0.55); outline-offset: 0; }
  50%{ outline: 6px solid rgba(255, 200, 80, 0); outline-offset: 6px; }}
.mobile-dock[data-game="skyfallrun"] .sf-play{ min-height: 64px; }
.mobile-dock[data-game="skyfallrun"] .sf-btn-ico{ width: 42px; height: 42px; font-size: 20px; }
.mobile-dock[data-game="skyfallrun"] .sf-btn-top{ font-size: 19px !important; }
@media (prefers-reduced-motion: reduce){
  :is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play::after,
  :is(.game[data-game="skyfallrun"], .mobile-dock[data-game="skyfallrun"]) .sf-play.sf-cash{ animation: none !important; }
}

/* ===== Cashier checkout (cx-*) =====
   A player-facing payment page: balance hero, tabs, numbered step cards on the
   left and a summary card on the right (below the steps on a phone). */
.cx{ max-width: 1080px; margin: 0 auto; }
.cx-hero{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; padding: 20px 22px;
  border-radius: 20px; border: 1px solid rgba(224, 176, 79, 0.28);
  background: radial-gradient(700px 220px at 0% -40%, rgba(224, 176, 79, 0.2), transparent 70%), linear-gradient(165deg, var(--panel2), var(--panel));
}
.cx-hero-label{ display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cx-balance{ font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1.15; color: var(--text); }
.cx-mode{ padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(224, 176, 79, 0.15); color: var(--accent); }
.cx-tabs{ display: flex; gap: 6px; padding: 5px; margin-bottom: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); overflow-x: auto; }
.cx-tab{
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.cx-tab:hover{ color: var(--text); }
.cx-tab.active{ background: linear-gradient(180deg, #e9bd5c, #c99a38); color: #1a1405; }
.cx-tab-ico{ display: inline-flex; }
.cx-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cx-main{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx-side{ display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.cx-card{ padding: 20px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(165deg, var(--panel2), var(--panel)); }
.cx-step{ margin: 0 0 14px; font-size: 16px; font-weight: 800; }
/* method picker */
.cx-picker{ display: flex; flex-direction: column; gap: 12px; }
.cx-countries{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cx-country{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cx-country-cur{ min-width: 26px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(224, 176, 79, 0.16); color: var(--accent); font-size: 12px; font-weight: 800; }
.cx-country.active{ border-color: var(--accent); background: rgba(224, 176, 79, 0.12); }
.cx-methods{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cx-method{
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; text-align: left; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cx-method:hover{ border-color: rgba(224, 176, 79, 0.5); transform: translateY(-1px); }
.cx-method.active{ border-color: var(--accent); background: rgba(224, 176, 79, 0.13); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.12); }
.cx-method .method-badge, .cx-method .method-logo{ width: 38px; height: 38px; font-size: 13px; }
.cx-method-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-method-name{ font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-method-sub{ font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-any{ border-style: dashed; }
.cx-any .cx-method-sub{ white-space: normal; }
.cx-any-ico{ flex: 0 0 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(47, 158, 110, 0.18); color: var(--accent2); }
/* amount */
.cx-field{
  display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.22); cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cx-field:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15); }
.cx-field-cur{ font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--accent); }
.cx-amount{ flex: 1; min-width: 0; width: 100%; padding: 16px 0; border: 0; background: none; color: var(--text); font-family: var(--font-display); font-size: 38px; font-weight: 800; }
.cx-amount:focus{ outline: none; }
.cx-amount.bad{ color: var(--red); }
.cx-quick{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-chip{
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.cx-chip:hover{ border-color: rgba(224, 176, 79, 0.55); }
.cx-chip.active{ border-color: var(--accent); background: rgba(224, 176, 79, 0.16); color: var(--accent); }
.cx-range{ margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.cx-error{ min-height: 18px; margin-top: 6px; color: var(--red); font-size: 13px; font-weight: 600; }
.cx-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cx-input{ width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.22); color: var(--text); font: inherit; font-size: 15px; }
.cx-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15); }
/* summary */
.cx-summary{ padding: 20px; border-radius: 18px; border: 1px solid rgba(224, 176, 79, 0.3); background: linear-gradient(165deg, #1b2a3f, var(--panel)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.cx-summary-title{ margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cx-rows{ margin: 0 0 16px; }
.cx-row{ display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.09); font-size: 14px; }
.cx-row dt{ color: var(--muted); }
.cx-row dd{ margin: 0; font-weight: 700; text-align: right; }
.cx-row.strong{ border-bottom: 0; padding-top: 14px; font-size: 17px; }
.cx-row.strong dd{ font-family: var(--font-display); font-size: 22px; color: var(--accent); }
.cx-cta{ width: 100%; padding: 15px; font-size: 16px; font-weight: 800; border-radius: 14px; text-align: center; }
.cx-cta:disabled{ opacity: 0.45; cursor: not-allowed; }
.cx-note{ margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cx-how{ padding: 18px 20px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.025); }
.cx-how h3{ margin: 0 0 12px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cx-how ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-how li{ display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.cx-how li b{ flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(224, 176, 79, 0.18); color: var(--accent); font-size: 12px; }
.cx-secure{ display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--accent2); font-size: 12.5px; font-weight: 600; }
.cx-secure span:first-child{ display: inline-flex; }
/* history */
.cx-txs{ list-style: none; margin: 0; padding: 6px 20px; }
.cx-tx{ display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cx-tx:last-child{ border-bottom: 0; }
.cx-tx-ico{ flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cx-tx-ico.in{ background: rgba(47, 158, 110, 0.18); color: var(--accent2); }
.cx-tx-ico.out{ background: rgba(224, 176, 79, 0.16); color: var(--accent); }
.cx-tx-main{ flex: 1; min-width: 0; }
.cx-tx-title{ font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-tx-date{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.cx-tx-right{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cx-tx-amt{ font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.cx-tx-amt.in{ color: var(--accent2); }
.cx-empty{ display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 20px; text-align: center; color: var(--muted); }
.cx-empty p{ margin: 0; }
.cx-empty-ico{ display: inline-flex; padding: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
/* payment modal */
.cx-modal{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cx-pay-ico{ width: 64px; height: 64px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(224, 176, 79, 0.12); font-size: 26px; font-weight: 800; }
.cx-pay-ico.ok{ background: rgba(47, 158, 110, 0.2); color: var(--accent2); animation: pop 0.3s ease; }
.cx-pay-ico.bad{ background: var(--wine-soft); color: var(--red); }
.cx-spin{ width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(224, 176, 79, 0.25); border-top-color: var(--accent); animation: cx-rot 0.9s linear infinite; }
@keyframes cx-rot{ to{ transform: rotate(360deg); } }
.cx-modal .pay-actions{ width: 100%; margin-top: 8px; }
@media (max-width: 860px){
  .cx-grid{ grid-template-columns: 1fr; }
  .cx-side{ position: static; }
  .cx-balance{ font-size: 32px; }
  .cx-amount{ font-size: 32px; }
  .cx-methods{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .cx-hero{ padding: 16px; }
  .cx-card{ padding: 16px; }
  .cx-methods{ grid-template-columns: 1fr; }
  .cx-tab{ padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce){ .cx-spin{ animation: none; } .cx-method:hover{ transform: none; } }

/* ===== Sign in / sign up (au-*), guest ribbon, e-mail strip ===== */
.au-wrap{ display: flex; justify-content: center; padding: 28px 0 40px; }
.au-card{
  width: 100%; max-width: 440px; padding: 28px; border-radius: 22px; border: 1px solid rgba(224, 176, 79, 0.28);
  background: radial-gradient(520px 200px at 50% -30%, rgba(224, 176, 79, 0.16), transparent 70%), linear-gradient(165deg, var(--panel2), var(--panel));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.au-tabs{ display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); }
.au-tab{ flex: 1; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.au-tab:hover{ color: var(--text); }
.au-tab.active{ background: linear-gradient(180deg, #e9bd5c, #c99a38); color: #1a1405; }
.au-card h2{ margin: 0 0 6px; font-size: 24px; font-weight: 800; background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
.au-sub{ margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.au-field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.au-label{ font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.au-hint{ font-size: 11.5px; color: var(--muted); }
.au-pass-hint{ display: block; margin: -8px 0 14px; }
.au-input{
  width: 100%; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); color: var(--text); font: inherit; font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.au-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 176, 79, 0.15); }
.au-pass{ position: relative; display: block; }
.au-pass .au-input{ padding-right: 46px; }
.au-eye{ position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; padding: 7px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.au-eye:hover, .au-eye.on{ color: var(--accent); }
.au-captcha{ display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 13px; border: 1px dashed rgba(224, 176, 79, 0.45); background: rgba(224, 176, 79, 0.06); }
.au-q{ flex: 0 0 auto; min-width: 84px; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.au-a{ flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 700; }
.au-again{ flex: 0 0 auto; display: inline-flex; padding: 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--muted); cursor: pointer; }
.au-again:hover{ color: var(--accent); }
.au-error{ min-height: 20px; margin: 2px 0 10px; color: var(--red); font-size: 13.5px; font-weight: 600; }
.au-submit{ width: 100%; padding: 15px; font-size: 16px; font-weight: 800; border-radius: 14px; }
.au-switch{ margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.au-switch a{ color: var(--accent); font-weight: 700; text-decoration: none; }
.au-result{ text-align: center; display: flex; flex-direction: column; align-items: center; }
.au-result .au-sub{ margin-bottom: 22px; }
.au-bigicon{ width: 76px; height: 76px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(224, 176, 79, 0.14); color: var(--accent); }
.au-bigicon.ok{ background: rgba(47, 158, 110, 0.2); color: var(--accent2); }
.au-bigicon.bad{ background: var(--wine-soft); color: var(--red); }
.au-actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.au-actions .btn{ min-width: 150px; }
.au-modal{ display: flex; flex-direction: column; align-items: center; }
.au-modal h3{ margin: 0 0 8px; }
/* guest ribbon on game pages */
.guest-ribbon{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(224, 176, 79, 0.35); background: linear-gradient(90deg, rgba(224, 176, 79, 0.14), rgba(224, 176, 79, 0.04)); font-size: 14px; font-weight: 600;
}
.guest-ribbon-btns{ display: flex; gap: 8px; }
/* unconfirmed e-mail strip, under the header */
.mail-banner{
  display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 10px auto 0; padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(90, 140, 230, 0.4); background: rgba(90, 140, 230, 0.12); color: var(--text); font-size: 13.5px;
}
.mail-banner[hidden]{ display: none; }
.mail-banner-ico{ display: inline-flex; color: #8fb1f5; }
.mail-banner-txt{ flex: 1; min-width: 0; }
.mail-banner-btn{ padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(143, 177, 245, 0.6); background: transparent; color: #bcd0fa; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mail-banner-btn:disabled{ opacity: 0.5; cursor: default; }
.mail-banner-x{ border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
@media (max-width: 520px){
  .au-card{ padding: 20px; }
  .au-wrap{ padding-top: 12px; }
  .mail-banner{ margin: 8px 16px 0; flex-wrap: wrap; }
}

/* ===== Chicken Road: the road board (09.10.2026, public/js/games/chicken.js) =====
   Over the road a strip: the run's multiplier on a yellow road sign, the 24 lanes as a track with zebra stripes the
   chicken walks along toward the golden egg, and what a cash-out pays now. On a wide screen the deck is a console under
   the road: stake, CROSS + CASH OUT side by side in the middle, difficulty as four coloured road signs. */
.ck-arena{ display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.ck-arena > canvas{ border-radius: 14px; }
.ck-hud{ min-width: 0; display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) minmax(150px, 200px); gap: 12px; align-items: stretch; }
.ck-box{
  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #2a2f38, #15181e); border: 2px solid #3a4150;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.45);}
.ck-box span{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #aab4c4; }
/* the multiplier on a yellow diamond road sign */
.ck-box-mult{ align-items: center; text-align: center; background: linear-gradient(180deg, #ffd83a, #f2b200); border-color: #1a1a1a; box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 0 0 5px #ffe680, 0 6px 16px rgba(0, 0, 0, 0.45); }
.ck-box-mult span{ color: #3a2a00; }
.ck-mult{ font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1; color: #1a1200; font-variant-numeric: tabular-nums; }
.ck-mult.hot{ animation: ck-pulse 1.4s ease-in-out infinite; }
@keyframes ck-pulse{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
/* the track: 24 dashes on asphalt, walked in yellow; the chicken stands on its lane, the egg waits at the end */
.ck-box-track{ padding: 14px 54px 14px 18px; background: repeating-linear-gradient(90deg, #2c2f35 0 8px, #26292e 8px 16px); }
.ck-track{ position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 16px; align-items: center; }
.ck-track i{ height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); transition: background 0.25s ease, box-shadow 0.25s ease; }
.ck-track i.done{ background: linear-gradient(180deg, #ffe066, #f2b200); box-shadow: 0 0 6px rgba(255, 210, 60, 0.55); }
.ck-track i.next{ background: #fff; animation: ck-blink 0.9s ease-in-out infinite; }
@keyframes ck-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.35; } }
.ck-track.dead i.done{ background: #c43a2a; box-shadow: none; }
.ck-runner{ position: absolute; top: 50%; left: 0; width: 40px; height: 40px; object-fit: contain; transform: translate(-50%, -62%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); transition: left 0.3s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.ck-egg{ position: absolute; top: 50%; right: -46px; width: 38px; height: 38px; object-fit: contain; transform: translateY(-55%); filter: drop-shadow(0 0 8px rgba(255, 210, 60, 0.7)); animation: ck-egg 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes ck-egg{ 0%, 100%{ transform: translateY(-55%) rotate(-6deg); } 50%{ transform: translateY(-62%) rotate(6deg); } }
.ck-box-cash{ text-align: right; align-items: flex-end; border-color: #2f7a46; background: linear-gradient(180deg, #1f4a2c, #0f2416); }
.ck-box-cash span{ color: #9fe0b0; }
.ck-box-cash > b{ font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1.05; color: #d8ffe0; font-variant-numeric: tabular-nums; }
.ck-box-cash small{ font-size: 11.5px; color: #9fc8aa; }
.ck-box-cash small b{ color: #ffe066; font-weight: 800; }
.game[data-game="chicken"].ck-live .ck-box-cash{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(80, 220, 120, 0.4); }
/* difficulty: four road signs, green to red */
.ck-diff .btn-row{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ck-diff .chip{ min-width: 0; padding-left: 2px !important; padding-right: 2px !important; font-weight: 900 !important; }
:is(.ck-diff, .mobile-dock) .chip.ck-diff-easy{ background: linear-gradient(180deg, #7be08e, #2e9e4a) !important; color: #06200d !important; }
:is(.ck-diff, .mobile-dock) .chip.ck-diff-medium{ background: linear-gradient(180deg, #ffe066, #e0a800) !important; color: #2a1c00 !important; }
:is(.ck-diff, .mobile-dock) .chip.ck-diff-hard{ background: linear-gradient(180deg, #ffb066, #e0661a) !important; color: #2a1000 !important; }
:is(.ck-diff, .mobile-dock) .chip.ck-diff-mad{ background: linear-gradient(180deg, #ff7a7a, #c4202a) !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }
:is(.ck-diff, .mobile-dock) .chip[class*="ck-diff-"]:not(.active){ filter: saturate(0.45) brightness(0.7); }
:is(.ck-diff, .mobile-dock) .chip[class*="ck-diff-"].active{ transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255, 255, 255, 0.45) !important; filter: none; }

@media (min-width: 1081px){
  .game[data-game="chicken"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="chicken"] .ck-arena > canvas{ max-height: calc(100vh - 540px); width: auto !important; max-width: 100%; align-self: center; }
  .game[data-game="chicken"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr); column-gap: 18px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="chicken"] .sidebar.deck > *{ margin-bottom: 0; align-self: stretch; }
  .game[data-game="chicken"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="chicken"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="chicken"] .sidebar.deck > .ck-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="chicken"] .sidebar.deck > .ck-go{ grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="chicken"] .sidebar.deck > .ck-go > h4,
  .game[data-game="chicken"] .sidebar.deck > .ck-go > .result-line:not([data-verdict]){ display: none; }
  .game[data-game="chicken"] .sidebar.deck > .ck-diff{ grid-column: 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="chicken"] .sidebar.deck > .rt-keys{ grid-column: 1 / -1; grid-row: 2; text-align: center; margin: 4px 0 0; }
  .game[data-game="chicken"] .chicken-actions{ display: flex !important; flex-direction: row !important; justify-content: center; gap: 14px; }
  .game[data-game="chicken"] .chicken-actions > .btn{ flex: 1 1 0; max-width: 160px; min-height: 0; }
  .game[data-game="chicken"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="chicken"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="chicken"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="chicken"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="chicken"] .sidebar.deck .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="chicken"] .sidebar.deck :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="chicken"] .sidebar.deck .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="chicken"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .ck-hud{ grid-template-columns: auto minmax(0, 1fr); }
  .ck-box.ck-box-track{ grid-column: 1 / -1; grid-row: 2; padding: 12px 50px 12px 18px; }
  .ck-box{ padding: 8px 10px; }
  .ck-mult{ font-size: 24px; }
  .ck-box-cash > b{ font-size: 19px; }
  .ck-track{ gap: 2px; }
  .ck-runner{ width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce){ .ck-mult.hot, .ck-track i.next, .ck-egg{ animation: none; } }

/* ===== Confirm dialog (ui.js confirmModal), replaces window.confirm (09.10.2026) ===== */
.cf-backdrop{ z-index: 400; }
.cf-modal{ width: min(400px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 26px 24px; }
.cf-icon{ display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 6px; border-radius: 50%; font-size: 32px; background: radial-gradient(circle at 35% 30%, rgba(246, 213, 122, 0.3), rgba(224, 176, 79, 0.08) 70%); border: 1px solid rgba(224, 176, 79, 0.4); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); animation: cf-bob 2.4s ease-in-out infinite; }
@keyframes cf-bob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
.cf-modal h3{ margin: 0; font-family: var(--font-display); font-size: 21px; }
.cf-body{ margin: 2px 0 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cf-actions{ display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.cf-yes{ min-height: 48px; font-size: 16px; font-weight: 800; }
/* Candy Bonanza: a pink jelly card with a striped rim and a candy-cane yes button */
.cf-sweet{
  border: 4px solid #ffcf3f; border-radius: 26px; color: #fff;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 12px, rgba(255, 255, 255, 0) 12px 24px), linear-gradient(170deg, #e83d9a, #9a2a8e 60%, #5c1a78);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 0 3px #7a1d6a, 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 90, 180, 0.4); }
.cf-sweet h3{ color: #ffe45e; font-size: 24px; text-shadow: 0 3px 0 #8a1f6a, 0 0 14px rgba(255, 220, 80, 0.5); }
.cf-sweet .cf-body{ color: #ffe3f4; }
.cf-sweet .cf-icon{ background: radial-gradient(circle at 35% 30%, #fff, #ffd2ec 60%, #ff7ac0); border-color: #ffcf3f; font-size: 36px; }
.cf-sweet .modal-x{ color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cf-sweet .cf-yes{ color: #fff !important; border: 3px solid #ffcf3f !important; border-radius: 14px !important; text-shadow: 0 2px 0 rgba(120, 20, 70, 0.7) !important;
  background: repeating-linear-gradient(-45deg, #ff3f6c 0 14px, #ff6f8c 14px 28px) !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), 0 4px 0 #8a1040, 0 0 24px rgba(255, 90, 140, 0.55) !important; }
.cf-sweet .cf-no{ color: #ffe3f4 !important; background: rgba(0, 0, 0, 0.25) !important; border: 2px solid rgba(255, 255, 255, 0.4) !important; }
@media (prefers-reduced-motion: reduce){ .cf-icon{ animation: none; } }

/* ===== Admin: Security tab (two-factor, password, audit trail) ===== */
.sec-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.sec-row .auth-input{ flex: 1 1 180px; max-width: 260px; }
.sec-state{ margin: 4px 0 8px; font-weight: 700; }
.sec-state.ok{ color: #6fe39a; }
.sec-state.bad{ color: #ff9a9a; }
.sec-note{ color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0; }
.sec-msg{ min-height: 20px; margin-top: 8px; font-size: 13px; }
.sec-msg.bad{ color: #ff9a9a; }
.sec-msg.ok{ color: #6fe39a; }
.sec-steps{ margin: 8px 0 10px 18px; padding: 0; line-height: 1.7; }
.sec-secret{ display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(224, 176, 79, 0.4); color: #ffe08a; letter-spacing: 0.08em; user-select: all; }
.sec-link{ color: var(--accent); }
.sec-codes{ margin: 8px 0; padding: 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); border: 1px dashed rgba(224, 176, 79, 0.5); color: #ffe08a; font-size: 15px; letter-spacing: 0.06em; line-height: 1.8; user-select: all; }

/* ===== Dice: the high-roller table (09.10.2026, public/js/games/dice.js) =====
   A green felt with two dice that tumble in from the sides, the total on a plate, and a ruler of totals 2..12 under it
   (bar = how many of 36 rolls make it, price under the bar). On a wide screen the deck is a console under the table. */
.dc-arena{ display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 940px; margin: 0 auto; }
.dc-table{ position: relative; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 214, 120, 0.45); box-shadow: 0 0 0 5px #3a2412, 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.45); }
.dc-table canvas{ display: block; width: 100% !important; height: auto !important; max-width: 100%; }
.dc-prompt{ position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 14px; letter-spacing: 0.06em; color: rgba(255, 240, 200, 0.75); pointer-events: none; }
.dc-plate{ position: absolute; top: 14px; right: 14px; min-width: 112px; padding: 8px 14px 9px; border-radius: 14px; text-align: center; background: rgba(8, 14, 12, 0.72); border: 1px solid rgba(255, 214, 120, 0.4); opacity: 0.85; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.dc-plate small{ display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dc-plate b{ display: block; font-family: var(--font-display); font-size: 40px; line-height: 1.05; color: #fff3cf; }
.dc-plate span{ display: block; min-height: 16px; font-size: 12px; font-weight: 700; }
.dc-plate.show.win{ border-color: #6dff9c; box-shadow: 0 0 26px rgba(80, 255, 140, 0.55); transform: scale(1.06); }
.dc-plate.show.win span{ color: #6dff9c; }
.dc-plate.show.lose span{ color: #ff8d7a; }
.dc-table.flash::after{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 235, 150, 0.45), transparent 62%); animation: dc-flash 0.9s ease-out forwards; pointer-events: none; }
@keyframes dc-flash{ from{ opacity: 1; } to{ opacity: 0; } }
.dc-ruler{ display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55); }
.dc-tile{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; border: 1px solid rgba(255, 214, 120, 0.25); background: linear-gradient(180deg, #2a1c12, #170f09); color: var(--text); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.dc-tile:hover{ transform: translateY(-2px); border-color: rgba(255, 214, 120, 0.7); }
.dc-n{ font-family: var(--font-display); font-size: 20px; line-height: 1; color: #fff3cf; }
.dc-bar{ display: flex; align-items: flex-end; width: 100%; max-width: 22px; height: 38px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.dc-bar i{ display: block; width: 100%; background: linear-gradient(0deg, #1f9a5c, #9bff8a); }
.dc-x{ font-size: 11px; font-weight: 700; color: #f3c85a; white-space: nowrap; }
.dc-tile.active{ border-color: #ffd36b; background: linear-gradient(180deg, #7a4a12, #3d2308); box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.5), 0 0 18px rgba(255, 190, 70, 0.55); }
.dc-tile.dim{ opacity: 0.5; }
.dc-tile.hit{ border-color: #6dff9c; animation: dc-hit 0.9s ease-in-out 2; }
@keyframes dc-hit{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(109, 255, 156, 0); } 50%{ box-shadow: 0 0 22px 4px rgba(109, 255, 156, 0.8); } }
.dc-kinds{ flex-wrap: wrap; }
.dc-values{ margin-top: 8px; }
.dc-roll-ico{ display: inline-block; margin-right: 8px; font-size: 1.15em; transition: transform 0.25s; }
.game[data-game="dice"] .dc-roll:hover:not(:disabled) .dc-roll-ico{ transform: rotate(90deg); }
@media (min-width: 1081px){
  .game[data-game="dice"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="dice"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 8px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="dice"] .sidebar.deck > *{ margin-bottom: 0; }
  .game[data-game="dice"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="dice"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="dice"] .sidebar.deck > .dc-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="dice"] .sidebar.deck > .auto-panel{ grid-column: 1; grid-row: 2; position: relative; }
  .game[data-game="dice"] .sidebar.deck > .auto-panel .auto-body{
    position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 2; width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);}
  .game[data-game="dice"] .sidebar.deck > .dc-go{ grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="dice"] .sidebar.deck > .dc-go > h4{ display: none; }
  .game[data-game="dice"] .sidebar.deck > .dc-kind{ grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .game[data-game="dice"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="dice"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="dice"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="dice"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="dice"] .sidebar.deck .bet-body .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="dice"] .sidebar.deck .bet-body :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="dice"] .sidebar.deck .bet-body .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="dice"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}

@media (max-width: 1080px){
  .dc-ruler{ gap: 3px; padding: 6px; }
  .dc-n{ font-size: 15px; }
  .dc-x{ font-size: 9.5px; }
  .dc-bar{ height: 26px; }
  .dc-plate{ top: 8px; right: 8px; min-width: 84px; padding: 5px 10px; }
  .dc-plate b{ font-size: 28px; }
}
@media (prefers-reduced-motion: reduce){
  .dc-tile.hit, .dc-table.flash::after{ animation: none; }
}

/* ===== Sic Bo: the high-roller board (09.10.2026, public/js/games/sicbo.js) =====
   Same table and plate as Dice (.dc-*), burgundy felt with three dice; the betting layout under it is the real board:
   Small / Odd / Any triple / Even / Big, the six triples, totals 4..17 and the six single numbers. After a roll every
   spot the dice satisfied lights up. */
.sb-board{ display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55); }
.sb-cap{ margin-top: 4px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sb-row{ display: grid; gap: 6px; }
.sb-main{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sb-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sb-14{ grid-template-columns: repeat(14, minmax(0, 1fr)); }
.sb-tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 8px 2px; border-radius: 12px; border: 1px solid rgba(255, 214, 120, 0.25); background: linear-gradient(180deg, #2a1c12, #170f09); color: var(--text); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.sb-tile:hover{ transform: translateY(-2px); border-color: rgba(255, 214, 120, 0.7); }
.sb-n{ font-family: var(--font-display); font-size: 17px; line-height: 1.1; color: #fff3cf; white-space: nowrap; }
.sb-x{ font-size: 11px; font-weight: 700; color: #f3c85a; white-space: nowrap; }
.sb-wide{ padding: 14px 4px; }
.sb-wide .sb-n{ font-size: 20px; }
.sb-small{ background: linear-gradient(180deg, #1c3a5c, #0e2036); }
.sb-tile.sb-big{ background: linear-gradient(180deg, #5c1c24, #36090f); }
.sb-odd{ background: linear-gradient(180deg, #3b2a5c, #1e1236); }
.sb-even{ background: linear-gradient(180deg, #1f4d3a, #0e2a20); }
.sb-anytriple{ background: linear-gradient(180deg, #7a5a12, #3d2c06); }
.sb-tile.active{ border-color: #ffd36b; box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.55), 0 0 18px rgba(255, 190, 70, 0.55); }
.sb-tile.hit{ border-color: #6dff9c; animation: dc-hit 0.9s ease-in-out 2; }
.sb-pickname{ margin-bottom: 4px; font-family: var(--font-display); font-size: 20px; color: #fff3cf; }
@media (min-width: 1081px){
  .game[data-game="sicbo"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="sicbo"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 8px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="sicbo"] .sidebar.deck > *{ margin-bottom: 0; }
  .game[data-game="sicbo"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="sicbo"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="sicbo"] .sidebar.deck > .sb-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="sicbo"] .sidebar.deck > .auto-panel{ grid-column: 1; grid-row: 2; position: relative; }
  .game[data-game="sicbo"] .sidebar.deck > .auto-panel .auto-body{
    position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 2; width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);}
  .game[data-game="sicbo"] .sidebar.deck > .sb-go{ grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="sicbo"] .sidebar.deck > .sb-go > h4{ display: none; }
  .game[data-game="sicbo"] .sidebar.deck > .sb-pick{ grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="sicbo"] .sidebar.deck .bet-body .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="sicbo"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}


@media (max-width: 1080px){
  .sb-14{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sb-n{ font-size: 14px; }
  .sb-x{ font-size: 9.5px; }
  .sb-wide .sb-n{ font-size: 13px; }
  .sb-wide{ padding: 10px 2px; }
}
@media (prefers-reduced-motion: reduce){ .sb-tile.hit{ animation: none; } }

/* ===== Crown & Anchor: the sailor's board (09.10.2026, public/js/games/crownanchor.js) =====
   Navy cloth with three symbol dice (table and plate shared with Dice, .dc-*); the six symbols are the board under it:
   tap one to bet on it, ROLL in the console. Every die that shows it glows and pays; the tiles wear how many dice hit. */
.ca-board{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55); }
.ca-tile{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid rgba(255, 214, 120, 0.25); background: linear-gradient(180deg, #16314d, #0a1a2c); color: var(--text); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.ca-tile:hover{ transform: translateY(-2px); border-color: rgba(255, 214, 120, 0.7); }
.ca-tile img{ width: 64%; max-width: 78px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.ca-glyph{ font-size: 44px; line-height: 1.2; color: #ffd97a; }
.ca-name{ font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff3cf; }
.ca-tile.active{ border-color: #ffd36b; background: linear-gradient(180deg, #7a4a12, #3d2308); box-shadow: 0 0 0 2px rgba(255, 211, 107, 0.55), 0 0 20px rgba(255, 190, 70, 0.55); }
.ca-tile.hit{ border-color: #6dff9c; animation: dc-hit 0.9s ease-in-out 2; }
.ca-badge{ position: absolute; top: 4px; right: 6px; font-style: normal; font-weight: 800; font-size: 13px; color: #6dff9c; text-shadow: 0 1px 3px #000; }
@media (min-width: 1081px){
  .game[data-game="crownanchor"] .game-body{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .game[data-game="crownanchor"] .sidebar.deck{
    position: sticky; top: auto; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 8px; align-items: center;
    padding: 18px 18px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0, rgba(6, 8, 14, 0.78) 26px, rgba(6, 8, 14, 0.9) 100%);}
  .game[data-game="crownanchor"] .sidebar.deck > *{ margin-bottom: 0; }
  .game[data-game="crownanchor"] .sidebar.deck > .panel{ padding-top: 20px; padding-bottom: 14px; }
  .game[data-game="crownanchor"] .sidebar.deck > .panel > h4{ margin-bottom: 8px; }
  .game[data-game="crownanchor"] .sidebar.deck > .ca-bet{ grid-column: 1; grid-row: 1; }
  .game[data-game="crownanchor"] .sidebar.deck > .auto-panel{ grid-column: 1; grid-row: 2; position: relative; }
  .game[data-game="crownanchor"] .sidebar.deck > .auto-panel .auto-body{
    position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 2; width: 100%; max-width: 380px; max-height: min(64vh, 560px); overflow: auto; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);}
  .game[data-game="crownanchor"] .sidebar.deck > .ca-go{ grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="crownanchor"] .sidebar.deck > .ca-go > h4{ display: none; }
  .game[data-game="crownanchor"] .sidebar.deck > .ca-pick{ grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body > .ladder-wrap{ display: none; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body > .bet-row .chip{ min-width: 0; padding-left: 1px; padding-right: 1px; font-size: 11px; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body .stepper{ grid-template-columns: 42px minmax(52px, 72px) 42px; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body :is(.step-btn, .stake-value){ height: 42px; }
  .game[data-game="crownanchor"] .sidebar.deck .bet-body .step-btn{ width: 42px; }
}
@media (min-width: 1081px) and (max-width: 1279px){
  .game[data-game="crownanchor"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; }
}


@media (max-width: 1080px){
  .ca-board{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .ca-tile img{ width: 52%; }
}
@media (prefers-reduced-motion: reduce){ .ca-tile.hit{ animation: none; } }

/* ---- Lobby button (09.10.2026): the same pill as Random game, bottom-left, on every page but the lobby ---- */
.lobby-fab{ right: auto; left: 22px; padding-right: 22px; color: #e9f3ff; background: linear-gradient(135deg, #3f6fb0 0%, #24427a 55%, #172b52 100%); box-shadow: 0 10px 28px rgba(40, 90, 180, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 40, 0.3); animation-delay: -1.6s; }
.lobby-fab:hover{ box-shadow: 0 16px 36px rgba(60, 120, 220, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.lobby-fab .rf-ring{ display: none; }
.lobby-fab .rf-dice{ background: radial-gradient(circle at 35% 30%, #5d8fd8, #1a3466); animation: none; }
.lobby-fab .rf-dice svg{ width: 22px; height: 22px; }
@media (max-width: 700px){ .lobby-fab{ right: auto; left: 14px; padding: 0 8px; bottom: calc(14px + var(--dock-h, 0px)); } }
[dir="rtl"] .lobby-fab{ left: auto; right: 22px; }
@media (max-width: 700px){ [dir="rtl"] .lobby-fab{ right: 14px; } }

/* ===== Chicken Road: one aligned dashboard (09.10.2026, second pass) =====
   The first pass left the HUD wider than the road and three separate gold plates of unequal weight under it. Now the page is one
   column the width of the road (HUD, road and console share it), and the deck is ONE asphalt bar under a hazard stripe: stake | START
   and CASH OUT | difficulty, divided by lane dashes, every cell the same height. */
.game[data-game="chicken"] .game-top, .game[data-game="chicken"] .game-body, .game[data-game="chicken"] .game-info{ max-width: 900px; margin-left: auto; margin-right: auto; }
.game[data-game="chicken"] .stage{ padding: 14px; }
.game[data-game="chicken"] .ck-arena{ max-width: 100%; }
.game[data-game="chicken"] .ck-arena > canvas{ width: 100% !important; height: auto !important; max-height: none !important; }
@media (min-width: 1081px){
  .game[data-game="chicken"] .sidebar.deck{
    max-width: 100%; padding: 0; gap: 0; border-radius: 18px; overflow: hidden; border: 2px solid #3a4150;
    background: linear-gradient(180deg, #232830, #14171c); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); align-items: stretch;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .game[data-game="chicken"] .sidebar.deck::before{ content: ''; grid-column: 1 / -1; grid-row: 1; height: 8px; background: repeating-linear-gradient(-45deg, #ffd83a 0 12px, #1a1a1a 12px 24px); }
  .game[data-game="chicken"] .sidebar.deck > .panel{
    grid-row: 2; margin: 0; padding: 16px 18px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; justify-content: center; }
  .game[data-game="chicken"] .sidebar.deck > .panel::before, .game[data-game="chicken"] .sidebar.deck > .panel::after{ display: none; }
  .game[data-game="chicken"] .sidebar.deck > .ck-bet{ grid-column: 1; border-right: 2px dashed rgba(255, 255, 255, 0.16); }
  .game[data-game="chicken"] .sidebar.deck > .ck-go{ grid-column: 2; grid-row: 2; align-items: center; border-right: 2px dashed rgba(255, 255, 255, 0.16); }
  .game[data-game="chicken"] .sidebar.deck > .ck-diff{ grid-column: 3; grid-row: 2; }
  .game[data-game="chicken"] .sidebar.deck > .panel > h4{ margin: 0 0 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; color: #ffd83a; text-shadow: none; }
  .game[data-game="chicken"] .sidebar.deck > .rt-keys{ grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 7px 12px; text-align: center; font-size: 11px; color: #8f9aab; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .game[data-game="chicken"] .chicken-actions{ gap: 12px; }
  .game[data-game="chicken"] .chicken-actions > .btn{ max-width: 112px; }
  .game[data-game="chicken"] .sidebar.deck .bet-body{ grid-template-columns: 1fr; gap: 10px; justify-items: stretch; }
  .game[data-game="chicken"] .sidebar.deck .bet-body > .bet-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game[data-game="chicken"] .sidebar.deck .stepper{ grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .game[data-game="chicken"] .ck-diff .btn-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game[data-game="chicken"] .ck-diff .chip{ padding-top: 10px !important; padding-bottom: 10px !important; font-size: 13px; }
}
@media (max-width: 1080px){
  /* the dock carries START / CASH OUT, so the leftovers of the GAME plate and the keyboard hint are only noise */
  .game[data-game="chicken"] .ck-go, .game[data-game="chicken"] .rt-keys{ display: none; }
}
.game[data-game="chicken"] :is(.game-top, .game-body, .game-info){ width: 100%; }
@media (min-width: 1081px){
  .game[data-game="chicken"] .chicken-actions{ width: 100%; }
  .game[data-game="chicken"] .chicken-actions > .btn{ flex: 0 0 112px; width: 112px; max-width: none; }
}

/* The verdict line keeps one fixed height whatever it says (and while it says nothing), so nothing under or beside it jumps:
   one line, ellipsis if the text is too long. The invisible empty state still holds the room. */
.game .result-line[data-verdict]{ display: block; box-sizing: border-box; height: 46px; margin-top: 12px; padding: 10px 16px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game .result-line[data-verdict]:empty{ visibility: hidden; }

/* ===== Gamble (Book of Dead, public/js/games/slots.js): double a win on a colour (x2) or a suit (x4) ===== */
.stage .slot-gamble{ position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7; padding: 10px 20px; border-radius: 999px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 211, 107, 0.45); animation: gm-bob 1.6s ease-in-out infinite; }
.stage .slot-gamble[hidden]{ display: none; }
@keyframes gm-bob{ 0%, 100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-4px); } }
.fs-overlay.gm{ gap: 10px; cursor: default; }
.gm-card{ position: relative; width: 92px; height: 128px; perspective: 600px; }
.gm-card > div{ position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; transition: transform 0.55s cubic-bezier(.3, 1.2, .4, 1); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); }
.gm-card .gm-back{ background: repeating-linear-gradient(45deg, #7a1f2c 0 8px, #5a1520 8px 16px); border: 3px solid #f3e3b0; }
.gm-card .gm-face{ background: #fffaf0; border: 3px solid #d8c48a; font-size: 64px; line-height: 1; transform: rotateY(180deg); }
.gm-card.red .gm-face{ color: #d02a3a; }
.gm-card.black .gm-face{ color: #15151c; }
.gm-card.flip .gm-back{ transform: rotateY(180deg); }
.gm-card.flip .gm-face{ transform: rotateY(360deg); }
.gm-info{ font-size: 13px; color: #fff3cf; letter-spacing: 0.03em; }
.gm-picks{ display: grid; gap: 8px; width: min(100%, 420px); }
.gm-row{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.gm-pick{ padding: 10px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.35); font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; }
.gm-pick.red{ background: linear-gradient(180deg, #e0405a, #9a1730); }
.gm-pick.black{ background: linear-gradient(180deg, #3a3f4c, #14161c); }
.gm-pick:hover:not(:disabled){ transform: translateY(-2px); border-color: #ffd36b; }
.gm-pick:disabled, .gm-collect:disabled{ opacity: 0.5; cursor: default; }
.gm-msg{ min-height: 22px; font-weight: 800; }
.gm-msg.win{ color: #7dffaa; }
.gm-msg.lose{ color: #ff9a9a; }
@media (max-width: 1080px){
  .stage .slot-gamble{ position: static; transform: none; order: 3; margin: 8px auto 0; animation: none; }
  .gm-card{ width: 64px; height: 90px; }
  .gm-card .gm-face{ font-size: 44px; }
}
@media (prefers-reduced-motion: reduce){ .stage .slot-gamble{ animation: none; } .gm-card > div{ transition: none; } }

/* the Gamble offer has to be impossible to miss: a big gold pill with a card icon, a pulsing halo and a sweep of light */
.stage .slot-gamble{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; font-size: 18px; border: 3px solid #fff3c4; color: #2a1600; background: linear-gradient(180deg, #ffe98a, #f0b429 55%, #c97d0a); animation: gm-bob 1.6s ease-in-out infinite, gm-halo 1.6s ease-in-out infinite; overflow: hidden; }
.stage .slot-gamble[hidden]{ display: none; }
.stage .slot-gamble .gm-ico{ font-size: 24px; letter-spacing: -2px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.stage .slot-gamble .gm-lbl{ text-transform: uppercase; letter-spacing: 0.08em; }
.stage .slot-gamble small{ padding: 3px 9px; border-radius: 999px; background: #2a1600; color: #ffe98a; font-size: 13px; font-weight: 800; }
.stage .slot-gamble::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%); background-size: 260% 100%; animation: gm-sweep 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes gm-halo{ 0%, 100%{ box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(255, 211, 107, 0.75); } 50%{ box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 16px rgba(255, 211, 107, 0); } }
@keyframes gm-sweep{ 0%, 55%{ background-position: 160% 0; } 100%{ background-position: -60% 0; } }
@media (max-width: 1080px){ .stage .slot-gamble{ padding: 12px 20px; font-size: 16px; animation: gm-halo 1.6s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce){ .stage .slot-gamble, .stage .slot-gamble::after{ animation: none; } }

/* Gonzo's Quest: a tall plaque (6x, 9x, 15x of the Free Falls) under the board needs more height than the wide ones */
.slot-mult.below.tall .slot-mult-img{ height: clamp(76px, 17vw, 104px); }

/* ===== Dirty Badge: the raid (public/js/games/slots.js badgeRaid) ===== */
.fs-overlay.bd{ gap: 12px; cursor: default; background: radial-gradient(circle at 20% 20%, rgba(255, 59, 77, 0.28), transparent 50%), radial-gradient(circle at 80% 20%, rgba(70, 140, 255, 0.28), transparent 50%), rgba(5, 8, 18, 0.93); }
.bd-folders{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.bd-folder{ position: relative; width: clamp(84px, 17vw, 128px); aspect-ratio: 3 / 4; display: grid; place-items: center; border: 3px solid #6d4c1f; border-radius: 6px 14px 10px 10px; cursor: pointer;
  background: linear-gradient(180deg, #ecca80, #c79a42); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55); font-family: var(--font-display); color: #5a3a10; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; }
.bd-folder::before{ content: ''; position: absolute; top: -13px; left: 10px; width: 42%; height: 14px; border: 3px solid #6d4c1f; border-bottom: 0; border-radius: 6px 6px 0 0; background: #d8b060; }
.bd-folder::after{ content: ''; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 10px; border-radius: 3px; background: repeating-linear-gradient(45deg, #b0182c 0 8px, #fff4d8 8px 16px); opacity: 0.85; }
.bd-folder:hover:not(:disabled){ transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 211, 107, 0.6); }
.bd-q{ font-size: clamp(36px, 8vw, 58px); font-weight: 900; opacity: 0.75; }
.bd-n{ display: none; font-size: clamp(44px, 10vw, 72px); font-weight: 900; color: #b0182c; }
.bd-folder.open{ background: linear-gradient(180deg, #fff6dc, #f0dca4); }
.bd-folder.open .bd-q{ display: none; }
.bd-folder.open .bd-n{ display: block; }
.bd-folder.chosen{ transform: translateY(-8px) scale(1.07); box-shadow: 0 0 0 4px #ff3b4d, 0 0 32px rgba(255, 59, 77, 0.85); }
.bd-folder.dim{ opacity: 0.55; }
.bd-note.hot{ color: #ff8a97; font-size: clamp(22px, 5vw, 34px); text-shadow: 0 0 18px rgba(255, 59, 77, 0.8); }
canvas.bd-aim{ cursor: crosshair; touch-action: manipulation; }
.stage .slot-fire{ position: absolute; left: 2%; top: 50%; transform: translateY(-50%); z-index: 7; padding: 14px 24px; border: 3px solid #fff; border-radius: 999px; font-size: 20px; font-weight: 900; letter-spacing: 0.12em;
  color: #fff; background: linear-gradient(180deg, #ff5a6a, #c4182b); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 59, 77, 0.8); animation: gm-halo 1.2s ease-in-out infinite; }
.stage .slot-fire[hidden]{ display: none; }
/* on a wide screen FIRE stands in the empty strip left of the reels (the bottom row has to stay free to aim at); on a phone it sits under the field */
@media (max-width: 1080px){ .stage .slot-fire{ position: static; transform: none; order: 3; margin: 8px auto 0; } }
@media (prefers-reduced-motion: reduce){ .stage .slot-fire{ animation: none; } }

/* Exclusive badge on a lobby card (10.10.2026) */
.card-exclusive{ position: absolute; top: 10px; left: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2a1a00; background: linear-gradient(135deg, #ffe58a, #e0a526); box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 12px rgba(255,200,60,.35); }

/* The header (and its open menu, sound and language panels) sits above the game dock, the fabs and the toasts (10.10.2026) */
.topbar{ z-index: 400; }

/* Dirty Badge: the evidence folders are the drawn art (10.10.2026) */
.bd-folder{ width: clamp(84px, 17vw, 132px); aspect-ratio: 2 / 3; border: 0; border-radius: 0; background: url('/assets/games/dirty-badge/evidence-folder.webp') center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); color: #ffe9b0; }
.bd-folder::before, .bd-folder::after{ content: none; }
.bd-folder:hover:not(:disabled){ box-shadow: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 211, 107, 0.7)); }
.bd-q{ position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-size: clamp(30px, 6.5vw, 48px); color: #ffe9b0; opacity: 1; text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, 0.9); }
.bd-n{ position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); min-width: 1.5em; padding: 0.05em 0; text-align: center; border-radius: 50%; background: rgba(8, 6, 5, 0.86); border: 2px solid #c9a05a; font-size: clamp(30px, 6.5vw, 48px); color: #ff5566; text-shadow: 0 0 14px rgba(255, 59, 77, 0.8); }
.bd-folder.open{ background: url('/assets/games/dirty-badge/evidence-folder.webp') center / contain no-repeat; }
.bd-folder.chosen{ box-shadow: none; filter: drop-shadow(0 0 4px #ff3b4d) drop-shadow(0 0 18px rgba(255, 59, 77, 0.85)); transform: translateY(-8px) scale(1.07); }

/* a hero with a simulated fire: the glow is in the picture, so no drop shadow darkens it */
.slot-hero.fire img{ filter: none; }
/* stone does not sway: the pillar stands still, only the fire moves */
.slot-hero.fire, .slot-hero.fire.prop{ animation: none; }

/* ===== Support chat (public/js/support.js, and the staff inbox in dashboard.js) ===== */
/* the unread number on every chat button: the dock icon, the footer link */
[data-support-badge]{ position: relative; }
[data-support-badge]:not([data-support-badge=""])::after{
  content: attr(data-support-badge);
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  font: 800 11px/1 var(--font-display, inherit); color: #fff; background: #e5483c; box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.9);
}
.footer-link.support-link[data-support-badge]:not([data-support-badge=""])::after{ position: static; display: inline-grid; margin-left: 6px; vertical-align: middle; box-shadow: none; }

/* the player's panel: a card at the bottom-right on a desktop, a bottom sheet on a phone */
.sp-panel{
  position: fixed; z-index: 1200; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 24px)); height: min(540px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(224, 176, 79, 0.4); background: linear-gradient(180deg, rgba(19, 26, 39, 0.98), rgba(10, 14, 22, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: sp-in 0.2s ease-out;
}
@keyframes sp-in{ from{ opacity: 0; transform: translateY(14px); } }
.sp-head{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; }
.sp-head b{ flex: 1; font-family: var(--font-display); letter-spacing: 0.02em; }
.sp-dot{ width: 9px; height: 9px; border-radius: 50%; background: #3ddc6a; box-shadow: 0 0 8px #3ddc6a; }
.sp-close{ width: 32px; height: 32px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.sp-close:hover{ color: var(--text); background: rgba(255, 255, 255, 0.12); }
.sp-list{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-msg{ max-width: 84%; padding: 9px 12px 7px; border-radius: 14px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sp-msg.them{ align-self: flex-start; background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 4px; }
.sp-msg.me{ align-self: flex-end; color: #1a1200; background: linear-gradient(180deg, #ffe08a, #e0b04f); border-bottom-right-radius: 4px; }
.sp-who{ font-size: 11px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 2px; }
/* Metronic: his face beside his messages and in the header, his bubbles with a faint gold rim */
.sp-row{ display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.sp-row .sp-msg{ max-width: none; }
.sp-face{ flex: none; border-radius: 50%; object-fit: cover; background: #111; border: 1.5px solid rgba(224, 176, 79, 0.7); }
.sp-face.msg{ width: 34px; height: 34px; }
.sp-face.head{ width: 42px; height: 42px; }
.sp-msg.ai{ background: linear-gradient(180deg, rgba(224, 176, 79, 0.1), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(224, 176, 79, 0.25); }
.sp-head-face{ position: relative; flex: none; display: inline-flex; }
.sp-head-face .sp-dot{ position: absolute; right: 0; bottom: 1px; margin: 0; box-shadow: 0 0 0 2px var(--panel, #121826); }
.sp-head-text{ flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.sp-head-text small{ font-size: 11px; opacity: 0.7; }
.sp-body{ white-space: pre-wrap; }
.sp-time{ margin-top: 3px; font-size: 10.5px; text-align: right; opacity: 0.55; }
.sp-form{ display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.sp-input{
  flex: 1; min-height: 40px; max-height: 110px; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  color: var(--text); background: rgba(255, 255, 255, 0.05); font: inherit; font-size: 14px; line-height: 1.35;
}
.sp-input:focus{ outline: 2px solid rgba(224, 176, 79, 0.55); outline-offset: 0; }
.sp-send{ height: 40px; padding: 0 16px; border: 0; border-radius: 12px; font-weight: 800; color: #1a1200; background: linear-gradient(180deg, #ffe08a, #e0b04f); cursor: pointer; }
.sp-send:disabled{ opacity: 0.5; cursor: wait; }
@media (max-width: 700px){
  .sp-panel{ right: 0; left: 0; bottom: 0; width: 100%; height: min(82vh, 640px); border-radius: 18px 18px 0 0; }
}
@media (prefers-reduced-motion: reduce){ .sp-panel{ animation: none; } }

/* the staff inbox */
.admin-nav-badge{ margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #e5483c; }
.sup-admin{ display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; min-height: 520px; }
.sup-side, .sup-main{ border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.03); overflow: hidden; display: flex; flex-direction: column; }
.sup-side-h{ padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.sup-threads{ flex: 1; overflow-y: auto; max-height: 640px; }
.sup-thread{ position: relative; display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: none; color: var(--text); cursor: pointer; }
.sup-thread:hover{ background: rgba(255, 255, 255, 0.05); }
.sup-thread.active{ background: rgba(224, 176, 79, 0.14); }
.sup-t-top{ display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.sup-t-time{ font-size: 11px; color: var(--muted); white-space: nowrap; }
.sup-t-last{ margin-top: 3px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 26px; }
.sup-thread.unread .sup-t-last{ color: var(--text); font-weight: 600; }
.sup-badge{ position: absolute; right: 12px; bottom: 12px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: #e5483c; }
.sup-status{ display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sup-status.waiting{ color: #ffd8a8; background: rgba(229, 140, 60, 0.18); }
.sup-status.ai{ color: #b9f3c8; background: rgba(60, 190, 110, 0.16); }
.sup-status.agent{ color: var(--muted, #9aa3b2); background: rgba(255, 255, 255, 0.06); }
.sup-head{ padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); min-height: 46px; }
.sup-msgs{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 560px; }
.sup-msg{ max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 14px; overflow-wrap: anywhere; }
.sup-msg.user{ align-self: flex-start; background: rgba(255, 255, 255, 0.07); }
.sup-msg.staff{ align-self: flex-end; background: rgba(224, 176, 79, 0.2); }
.sup-who{ font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.sup-text{ white-space: pre-wrap; }
/* AI layer: the Russian under a player's message, the player's version under an answer, the language chip */
.sup-ru{ margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.18); font-size: 13px; color: #f3d98a; white-space: pre-wrap; }
.sup-msg.ai{ background: rgba(120, 140, 255, 0.16); }
.sup-ai-switch{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sup-ai-switch input{ width: 18px; height: 18px; accent-color: var(--accent); }
.sup-lang{ display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #1a1300; background: var(--accent); vertical-align: middle; }
.sup-form{ display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.sup-form[hidden]{ display: none; }
.sup-input{ flex: 1; resize: vertical; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; }
@media (max-width: 800px){ .sup-admin{ grid-template-columns: 1fr; } .sup-threads{ max-height: 240px; } }

/* the staff's chat bubble in the header: it is a link, so it needs the pill's shape without button defaults */
.support-bell{ position: relative; display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); }
.support-bell[hidden]{ display: none; }
.support-bell:hover{ color: var(--text); }
.support-bell.waiting{ color: #ffd24a; animation: bell-ring 2.4s ease-in-out infinite; }
.support-bell[data-count]:not([data-count=""])::after{
  content: attr(data-count); position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; font: 800 11px/1 var(--font-display, inherit); color: #fff; background: #e5483c; box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.9);
}
@keyframes bell-ring{ 0%, 88%, 100%{ transform: none; } 91%{ transform: rotate(-12deg); } 94%{ transform: rotate(10deg); } 97%{ transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce){ .support-bell.waiting{ animation: none; } }

/* ---- Invite a friend ---- */
.inv { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.inv-hero {
  position: relative; overflow: hidden; margin-top: 14px; padding: 34px 28px 30px; text-align: center;
  border: 1px solid rgba(224, 176, 79, 0.35); border-radius: 22px;
  background:
    radial-gradient(520px 260px at 50% -40px, rgba(224, 176, 79, 0.28), transparent 70%),
    radial-gradient(420px 220px at 100% 100%, rgba(47, 158, 110, 0.18), transparent 70%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.inv-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; font: 800 13px/1 var(--font-display); letter-spacing: 0.04em;
  color: #2a1c00; background: linear-gradient(180deg, #ffe08a, var(--accent)); box-shadow: 0 6px 18px rgba(224, 176, 79, 0.35);
}
.inv-hero h1 { margin: 14px 0 8px; font: 800 32px/1.15 var(--font-display); }
.inv-lead { max-width: 520px; margin: 0 auto 24px; color: var(--muted); line-height: 1.55; }
.inv-ticket {
  position: relative; display: grid; gap: 10px; justify-items: center; padding: 20px 18px 22px;
  border: 2px dashed rgba(224, 176, 79, 0.55); border-radius: 16px; background: rgba(8, 12, 20, 0.55);
}
.inv-ticket::before, .inv-ticket::after {
  content: ''; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--panel); border: 1px solid rgba(224, 176, 79, 0.35);
}
.inv-ticket::before { left: -12px; } .inv-ticket::after { right: -12px; }
.inv-ticket-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.inv-code {
  max-width: 100%; overflow-wrap: anywhere; user-select: all; font: 800 38px/1.1 var(--font-display); letter-spacing: 0.12em;
  color: var(--accent); text-shadow: 0 0 24px rgba(224, 176, 79, 0.4);
}
.inv-code.inv-link { font: 600 15px/1.35 var(--font-display); letter-spacing: 0.02em; }
.inv-copy { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.inv-copy svg { width: 18px; height: 18px; display: block; }
.inv-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inv-step {
  position: relative; padding: 22px 16px 18px; text-align: center; border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
}
.inv-step p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.inv-step-ico { width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: rgba(224, 176, 79, 0.12); }
.inv-step-ico svg { width: 24px; height: 24px; }
.inv-step-n {
  position: absolute; top: 10px; left: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 800 12px/1 var(--font-display); color: #2a1c00; background: var(--accent);
}
.inv-stats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inv-stat { padding: 16px; text-align: center; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.inv-stat b { display: block; font: 800 26px/1.2 var(--font-display); color: var(--accent2); }
.inv-stat span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
  .inv-hero { padding: 26px 16px 22px; }
  .inv-hero h1 { font-size: 26px; }
  .inv-code { font-size: 28px; letter-spacing: 0.08em; }
  .inv-code.inv-link { font-size: 13px; letter-spacing: 0.01em; }
  .inv-steps { grid-template-columns: 1fr; }
  .inv-step { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; text-align: left; padding: 14px 14px 14px 16px; }
  .inv-step p { margin: 0; }
  .inv-step-n { display: none; }
}

/* the jackpot shows the Grand figure alone: centred in the strip */
.jp-grid > .jp-tile:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 520px); text-align: center; }

/* ---- METRO Jackpot: the live showcase figure ---- */
.jp.jp-live {
  position: relative; overflow: hidden; margin-top: 40px; padding: 0; min-height: 300px; display: flex; align-items: center;
  border: 1px solid rgba(224, 176, 79, 0.45); border-radius: 20px;
  background: #07060a url('/assets/jackpot.webp') right center / cover no-repeat;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 220, 140, 0.06);
}
.jp.jp-live::before { /* the left stays dark for the figure; the vault on the right keeps its light */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 4, 8, 0.92) 0%, rgba(5, 4, 8, 0.78) 38%, rgba(5, 4, 8, 0.15) 62%, transparent 80%);
}
.jp.jp-live::after { /* a slow glint sweeping across the strip */
  content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 226, 150, 0.12), transparent);
  animation: jp-glint 7s ease-in-out infinite;
}
@keyframes jp-glint { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(520%); } }
.jp-live-body { position: relative; z-index: 1; padding: 34px 40px; display: grid; gap: 10px; }
.jp-live-kicker {
  display: inline-flex; align-items: center; gap: 10px; font: 800 15px/1 var(--font-display); letter-spacing: 3px;
  text-transform: uppercase; color: #f3cf74;
}
.jp-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); animation: jp-live 1.6s ease-out infinite; }
@keyframes jp-live { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } 100% { box-shadow: 0 0 0 12px rgba(255, 77, 77, 0); } }
.jp-live-rank { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 236, 190, 0.7); }

.jpo {
  display: inline-flex; align-items: flex-end; font: 800 clamp(38px, 6.4vw, 76px)/1 var(--font-display);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
  filter: drop-shadow(0 4px 18px rgba(255, 190, 60, 0.35));
}
.jpo-cur { margin-right: 6px; font-size: 0.62em; align-self: center; color: #f3cf74; }
.jpo-sep { width: 0.32em; text-align: center; color: #d9a740; }
.jpo-d {
  position: relative; display: inline-block; width: 0.66em; height: 1.08em; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%);
}
.jpo-strip { display: block; will-change: transform; }
.jpo-strip > span {
  display: block; height: 1.08em; line-height: 1.08em; text-align: center;
  background: linear-gradient(180deg, #fff3c4 0%, #f6cf5e 45%, #c9861c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 700px) {
  .jp.jp-live { min-height: 190px; background-position: 70% center; }
  .jp.jp-live::before { background: linear-gradient(90deg, rgba(5, 4, 8, 0.9) 0%, rgba(5, 4, 8, 0.6) 70%, rgba(5, 4, 8, 0.35) 100%); }
  .jp-live-body { padding: 22px 18px; }
  .jpo { font-size: clamp(28px, 8.6vw, 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .jp.jp-live::after, .jp-live-dot { animation: none; }
  .jpo-strip { transition: none !important; }
}

/* ---- Payment methods ribbon under the hero ---- */
.ps { margin: 0 0 6px; }
.ps-head { display: flex; align-items: center; gap: 12px; margin: 0 4px 8px; }
.ps-title { font: 700 12px/1 var(--font-display); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); }
.ps-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(224, 176, 79, 0.35), transparent); }
.ps-view {
  overflow: hidden; border-radius: 16px; padding: 10px 0;
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ps-lane { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: ps-slide 42s linear infinite; }
.ps-view:hover .ps-lane { animation-play-state: paused; }
@keyframes ps-slide { to { transform: translateX(-50%); } }
.ps-item { flex: none; padding: 0 22px; }
.ps-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; }
.ps-link:hover { transform: translateY(-2px); filter: brightness(1.15); }
.ps-tile {
  width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ps-tile img { width: 36px; height: 36px; object-fit: contain; display: block; }
.ps-tile.coin { background: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); border-radius: 50%; }
.ps-tile.coin svg { width: 52px; height: 52px; display: block; }
.ps-name { font: 600 14px/1.2 var(--font-ui); color: var(--text); white-space: nowrap; }
@media (max-width: 700px) {
  .ps-item { padding: 0 14px; gap: 8px; }
  .ps-tile, .ps-tile.coin svg { width: 44px; height: 44px; }
  .ps-tile img { width: 30px; height: 30px; }
  .ps-name { font-size: 13px; }
  .ps-lane { animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) { .ps-lane { animation: none; } .ps-view { overflow-x: auto; } }

/* The logo is now a wide wordmark: the brand box follows its width instead of being a square badge */
.brand{ width: auto; }
.brand img{ height: 30px; width: auto; }
/* phones: the "M" mark stands in for the wide wordmark (index.html <picture>), so it can be taller */
@media (max-width: 900px){ .brand{ width: auto; } .brand img{ height: 36px; width: 36px; object-fit: contain; } }
@media (max-width: 620px){ .brand{ width: auto; } .brand img{ height: 32px; width: 32px; } }
.boot-inner{ width: 220px; height: 220px; }
.boot-logo{ width: 100%; height: auto; max-height: 100%; }

/* 320-360px phones: the guest header (logo, Sign in, Sign up, language) must fit one row */
@media (max-width: 380px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .topnav-actions { gap: 6px; flex-wrap: nowrap; }
  .cta-login, .cta-register { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .lang-btn .lang-code { display: none; }
  .lang-btn { padding: 0 8px; min-width: 0; }
}

/* Phone lobby: the hero sits flush under the top bar, edge to edge, with no slider chrome. */
@media (max-width: 900px){
  .view:has(> .hero:first-child){ margin-top: 0; padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .view > .hero:first-child{ margin: 0 -15px 12px; border-radius: 0; border-width: 0 0 1px; }
  .hero-dots, .hero-bar{ display: none; }
}

/* Phone lobby: payment ribbon is static (as many logos as fit) and butts against the hero. */
@media (max-width: 900px){
  .view > .hero:first-child{ margin-bottom: 0; }
  .view > .hero:first-child + .ps{ margin: 0 -15px 10px; }
  .ps-view{ border-radius: 0; border-width: 0 0 1px; }
  .ps-lane{ animation: none; }
}

a.category{ color: inherit; text-decoration: none; display: block; }
a.category:hover{ color: var(--accent); }


/* ===== Random game reel (gameReel.js) ===== */
.gr{ margin: 40px 0 18px; }
.gr-view{ --gr-w: 255px; position: relative; overflow: hidden; padding: 22px 0; direction: ltr; } /* no box round the reel: the tiles and the gold marker are enough */
.gr-strip{ display: flex; gap: 12px; width: max-content; will-change: transform; }
.gr-tile{ flex: none; width: var(--gr-w); aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: var(--panel2) center / cover; opacity: .75; transition: opacity .3s, transform .3s; }
.gr-tile.has-art{ background-image: linear-gradient(rgba(8,12,20,.45), rgba(8,12,20,.45)), var(--gr-art); }
.gr-tile img{ max-width: 80%; max-height: 80%; object-fit: contain; }
.gr-tile.win{ opacity: 1; transform: scale(1.12); }
.gr-frame{ position: absolute; top: 14px; bottom: 14px; left: 50%; width: calc(var(--gr-w) + 12px); transform: translateX(-50%);
  border: 2px solid var(--accent); border-radius: 12px; pointer-events: none; box-shadow: 0 0 22px rgba(224,176,79,.35); }
.gr-mark{ position: absolute; left: 50%; width: 0; height: 0; border: 8px solid transparent; transform: translateX(-50%); }
.gr-mark.top{ top: 0; border-top-color: var(--accent); }
.gr-mark.bot{ bottom: 0; border-bottom-color: var(--accent); }
.gr-actions{ display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.gr-spin{ padding: 11px 30px; border-radius: 999px; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; }
/* SPIN wears the site's own gold button (the hero's Play now): same gradient, display type, glow and a sheen on hover */
.gr-spin{ position: relative; overflow: hidden; min-width: 160px; padding: 12px 38px; background: linear-gradient(135deg, #e8b954, #cf9b2e); color: #1b1200;
  font-family: var(--font-display); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; box-shadow: 0 10px 26px rgba(224, 176, 79, .32); transition: transform .15s ease, filter .15s ease; }
.gr-spin::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; }
.gr-spin:hover:not(:disabled){ filter: brightness(1.06); transform: translateY(-1px); }
.gr-spin:hover:not(:disabled)::after{ left: 120%; }
.gr-spin:active:not(:disabled){ transform: scale(.97); }
.gr-spin:disabled{ opacity: .6; cursor: default; }
@media (max-width: 620px){ .gr-view{ --gr-w: 177px; } .gr-strip{ gap: 8px; } }

/* Demo mode: play money for one game, shown loudly so nobody mistakes it for the real balance */
.demo-toggle{margin-right:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;color:#ffd24a;border:1px solid rgba(255,210,74,.55);background:rgba(255,210,74,.08)}
.demo-toggle:hover{background:rgba(255,210,74,.2)}
.demo-toggle.on{color:#fff;background:#2a7d3f;border-color:#2a7d3f}
.demo-banner{display:flex;align-items:center;justify-content:center;margin:0 0 6px;padding:3px 10px;border-radius:8px;font-size:12px;line-height:1.2;color:#fff;background:repeating-linear-gradient(135deg,#8a5a00 0 14px,#a06a00 14px 28px);border:2px solid #ffd24a}
.demo-banner b{flex:none;padding:0;background:none;color:#ffd24a;letter-spacing:.14em}
body.is-demo #balance,body.is-demo #credits-label{color:#ffd24a}
body.is-demo #balance::after{content:" DEMO";font-size:.6em;font-weight:800;letter-spacing:.08em;vertical-align:middle;padding:1px 6px;margin-left:4px;border-radius:4px;background:#ffd24a;color:#1a1200}

/* the RTP badge on every game tile: a green-glass pill with a ring that is part-filled, like a return gauge */
.card-meta .tag.rtp{ display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: 0.04em; color: #8dffb0; border: 1px solid rgba(80, 230, 130, 0.5);
  background: linear-gradient(135deg, rgba(60, 220, 110, 0.22), rgba(60, 220, 110, 0.06)); box-shadow: 0 0 10px rgba(60, 220, 110, 0.18); }
/* 98% and above: the generous games stand out in red */
.card-meta .tag.rtp.hot{ color: #ff9d9d; border-color: rgba(255, 90, 90, 0.65); background: linear-gradient(135deg, rgba(255, 70, 70, 0.28), rgba(255, 70, 70, 0.07)); box-shadow: 0 0 12px rgba(255, 70, 70, 0.3); }
.card-meta .tag.rtp.hot i{ border-color: #ff5d5d; border-right-color: transparent; }
.card-meta .tag.rtp i{ width: 9px; height: 9px; border-radius: 50%; border: 2px solid #4be08a; border-right-color: transparent; transform: rotate(-30deg); box-sizing: border-box; }
/* Popular carries no favourite star */
.pop.two-rows .card-fav{ display: none; }

/* ---- info window ("i" corner button on a phone) and the phone autoplay sheet ---- */
.gi-modal{ position: fixed; inset: 0; z-index: 450; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(4, 6, 12, 0.78); }
.gi-panel{ width: min(100%, 640px); max-height: 88vh; overflow-y: auto; padding: 14px 14px 18px; border-radius: 20px; background: #161c2e; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.gi-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-display); font-size: 17px; }
.gi-x, .auto-x{ width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer; }
.gi-x svg, .auto-x svg{ width: 18px; height: 18px; }
.auto-x{ display: none; }
@media (max-width: 1080px){
  /* the payouts / history / rules block lives in the info window on a phone */
  .game > .game-info{ display: none; }
  /* autoplay settings: a sheet that opens upward over the dock, folded by the cross */
  .auto-panel .auto-body{ position: fixed; left: 50%; bottom: calc(var(--dock-h, 0px) + 10px); transform: translateX(-50%); z-index: 330;
    width: min(calc(100% - 20px), 534px); max-height: 62vh; overflow-y: auto; padding: 14px; border-radius: 18px;
    border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6); }
  .auto-panel .auto-body[hidden]{ display: none; }
  .auto-panel .auto-body .auto-x{ display: grid; margin: 0 0 8px auto; }
  /* in the dock autoplay is the bottom strip: one thin row, no frame */
  .mobile-dock > .auto-panel{ order: 99; width: 78%; margin: -2px auto 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .mobile-dock > .auto-panel::before, .mobile-dock > .auto-panel::after{ display: none; }
  /* the head is a pill button: frame, label centred, a chevron pointing up to say "opens upward" */
  .mobile-dock > .auto-panel .auto-head{ min-height: 0; padding: 0 14px; height: 32px; gap: 8px; justify-content: center; align-items: center; border: 1px solid rgba(224, 176, 79, 0.5); border-radius: 999px; background: rgba(224, 176, 79, 0.1); cursor: pointer; }
  .mobile-dock > .auto-panel .auto-head:active{ background: rgba(224, 176, 79, 0.22); }
  .mobile-dock > .auto-panel .mod-title{ margin: 0; line-height: 1; font-size: 12px; letter-spacing: 0.8px; color: var(--accent); }
  .mobile-dock > .auto-panel .mod-toggle{ display: none; }
  .mobile-dock > .auto-panel .auto-sum{ margin: 0; line-height: 1; font-size: 11px; }
  .mobile-dock > .auto-panel .mod-caret{ margin: 3px 0 0 2px; border-color: var(--accent); transform: rotate(-135deg); }
  .mobile-dock > .auto-panel.is-open .mod-caret{ transform: rotate(45deg); }
  .mobile-dock > .auto-panel .auto-run{ padding: 4px 4px 0; }
  .mobile-dock:has(> .auto-panel){ padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- slot boards on a phone: edge to edge (the reels as big as the screen allows) ---- */
@media (max-width: 1080px){
  .game.slot-wide{ margin-left: -10px; margin-right: -10px; }
  .game.slot-wide .stage.board{ padding: 6px 2px; border-width: 2px; border-radius: 14px; }
}

.gi-game .game-info{ margin-top: 0; }

/* ---- phone game page: the view is a frame, not a card — drop its frame and padding so the board gets the width ---- */
@media (max-width: 1080px){
  .view:has(> .game){ margin: 4px 0 0; padding: 4px 6px 24px; border: 0; border-radius: 0; box-shadow: none; background: rgba(10, 14, 22, 0.97); }
  .view > .game{ gap: 8px; }
  .view > .game .stage{ min-height: 0; padding: 6px; gap: 8px; border-radius: 12px; }
  .game.slot-wide{ margin-left: -6px; margin-right: -6px; }
}

/* no frame line round the game board, in every game */
.stage.board, .game .stage.board{ border: 0 !important; }

/* phone: the canvas sits 10px in from each side and shares the board's corner radius */
@media (max-width: 1080px){
  .stage > .stage-canvas, .stage-canvas{ padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
  .stage canvas{ border-radius: 14px; }
}

/* ---- Poker: the machine cabinet (Video Poker) and the table with its plate (Three Card Poker) ---- */
.vp-cab{ display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(46, 83, 168, 0.35), transparent 60%), linear-gradient(180deg, #0d0f2c, #07081a);
  border: 1px solid rgba(224, 176, 79, 0.35); box-shadow: inset 0 0 0 3px rgba(5, 6, 20, 0.9), inset 0 0 0 4px rgba(224, 176, 79, 0.18), 0 14px 36px rgba(0, 0, 0, 0.5); }
.vp-cab canvas{ width: 100%; height: auto; border-radius: 12px; }
.vp-pay{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: rgba(4, 6, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.07); }
.vp-pay:empty{ display: none; }
.vp-row{ display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: #b9c3dc; transition: background .2s, color .2s, box-shadow .2s; }
.vp-row b{ color: #f0c85a; font-variant-numeric: tabular-nums; font-weight: 800; }
.vp-row.hit{ background: linear-gradient(90deg, rgba(224, 176, 79, 0.35), rgba(224, 176, 79, 0.12)); color: #fff; box-shadow: 0 0 0 1px #e0b04f, 0 0 18px rgba(224, 176, 79, 0.5); animation: vp-pulse 1.1s ease-in-out 3; }
@keyframes vp-pulse{ 50%{ box-shadow: 0 0 0 1px #ffe08a, 0 0 28px rgba(255, 211, 107, 0.85); } }
.vp-plate{ min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 999px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; color: #9fb0d0; background: rgba(4, 6, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); }
.vp-plate.live{ color: #f4d98a; border-color: rgba(224, 176, 79, 0.45); }
.vp-plate.win{ color: #1a1204; background: linear-gradient(180deg, #ffe98a, #f0b429 60%, #c97d0a); border-color: #fff3c4; box-shadow: 0 0 24px rgba(240, 180, 41, 0.45); font-size: 18px; }
.vp-plate.lose{ color: #f0a3a4; border-color: rgba(229, 104, 106, 0.4); }
@media (max-width: 620px){
  .vp-cab{ padding: 8px; gap: 8px; border-radius: 12px; }
  .vp-pay{ padding: 6px; gap: 2px 6px; }
  .vp-row{ font-size: 11px; padding: 3px 6px; }
  .vp-plate{ font-size: 14px; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce){ .vp-row.hit{ animation: none; } }
.tc-cab canvas{ border-radius: 14px; }
/* the plate under the cards already says how the hand ended, so the dock strip would repeat it */
.game:has(.vp-cab) .dock-outcome{ display: none !important; }

/* ---- Lobby tile with a banner (19.10.2026): the uploaded picture is the whole tile; the name and the pills sit on a veil at the foot ---- */
.card.has-banner{ justify-content: flex-end; padding: 0 12px 14px; min-height: 0; aspect-ratio: 1 / 1; }
.card .card-banner{
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transform: scale(1.01); transition: transform 0.8s cubic-bezier(.2, .8, .2, 1), filter 0.4s ease;}
.card.has-banner:hover .card-banner{ transform: scale(1.09); filter: saturate(1.12); }
/* the veil only darkens the lower part, the banner keeps its colours above it */
.card.has-banner .card-glow{ background: linear-gradient(180deg, rgba(8, 11, 18, 0) 48%, rgba(8, 11, 18, 0.55) 72%, rgba(6, 9, 15, 0.94) 100%); }
.card.has-banner .card-meta .tag{ background-color: rgba(10, 14, 22, 0.7); }
@media (max-width: 700px){
  .card.has-banner{ min-height: 0; padding: 0 8px 10px; }
}
/* the banner already carries the game's name in its art: the title stays for screen readers only */
.card.has-banner h3{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card.has-banner:hover .card-meta, .card.has-banner:focus-visible .card-meta{ transform: translateY(-36px); }

/* the balance must say its currency on a phone too */
.wallet #credits-label{ display: inline; color: var(--accent2); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; margin-right: 1px; }

/* ---- language picker inside the player menu (phone, game pages): a two-column list under its own label ---- */
.menu-lang-row{ display: none; }
@media (max-width: 900px){
  .menu-lang-row{ display: block; margin-top: 6px; padding: 8px 12px 4px; border-top: 1px solid var(--border); }
  .menu-lang-row .mainnav-extra-label{ display: block; margin-bottom: 6px; color: var(--text); font-size: 14px; font-weight: 500; }
  .menu-lang-row .mainnav-extra-ctl, .menu-lang-row .mainnav-extra-ctl .menu{ display: block; }
  .menu-lang-row .lang-btn{ width: 100%; justify-content: flex-start; height: 40px; }
  /* the dropdown opens in the flow, not over the page: the menu is itself a scrolling panel */
  .menu-lang-row .menu-panel{ position: static; width: 100%; margin-top: 6px; padding: 4px; box-shadow: none; background: rgba(255, 255, 255, 0.03); border-radius: 10px; }
  .menu-lang-row .menu-panel.is-open{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .menu-lang-row .menu-panel .menu-item{ padding: 8px 8px; font-size: 12.5px; }
}

/* ===== Admin: the player list and the player statistics screen ===== */
.admin-loading{ color: var(--muted); }
.pls-scroll{ overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 20, 31, 0.55); }
.pls-scroll .admin-table{ margin: 0; min-width: 720px; }
.pls-scroll .admin-table thead th{ position: sticky; top: 0; background: #131c2b; white-space: nowrap; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; z-index: 1; }
.pls-scroll .admin-table tbody tr:last-child td{ border-bottom: 0; }
.pls-scroll .admin-table tbody tr:hover td{ background: rgba(224, 176, 79, 0.04); }
.admin-table th.n, .admin-table td.num{ text-align: right; font-variant-numeric: tabular-nums; }
.pls-empty{ padding: 22px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--border); border-radius: 12px; }
td.ps-empty{ border: 0; }
.pls-mono{ font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 12px; }

/* list */
.pu-tiles{ margin-bottom: 14px; }
.pu-create{ margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 20, 31, 0.55); }
.pu-create > summary{ list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.pu-create > summary::before{ content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #1a1405; font-weight: 800; }
.pu-create[open] > summary::before{ content: '\2212'; }
.pu-create > summary::-webkit-details-marker{ display: none; }
.pu-create > .panel{ margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.pu-tools{ display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pu-search, .pls-search{ flex: 1; min-width: 0; max-width: 420px; }
.pu-count{ color: var(--muted); font-size: 12px; white-space: nowrap; }
.pls-filters{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pls-chipbtn{ padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.pls-chipbtn:hover{ color: var(--text); border-color: #3a5073; }
.pls-chipbtn.on{ color: #1a1405; background: var(--accent); border-color: var(--accent); }
.pu-table .user-cell{ gap: 10px; align-items: center; }
.pu-name{ font-weight: 700; }
.pu-mail.warn{ color: #d9a441; }
.pu-sort button{ all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.pu-sort.on button{ color: var(--accent); }
.pu-sort i{ font-style: normal; font-size: 9px; width: 9px; }
.pu-date{ color: var(--muted); white-space: nowrap; }
.pu-active{ color: var(--accent2); font-size: 12px; }
.pu-table tr.blocked td{ opacity: .6; }
.pu-actions{ display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.pu-stat{ padding: 6px 12px; font-size: 13px; white-space: nowrap; text-decoration: none; }
.pu-menu{ position: relative; }
.pu-menu > summary{ list-style: none; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 18px; line-height: 1; }
.pu-menu > summary::-webkit-details-marker{ display: none; }
.pu-menu > summary:hover, .pu-menu[open] > summary{ color: var(--text); border-color: var(--accent); }
.pu-menu-list{ position: fixed; z-index: 200; min-width: 190px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: #131c2b; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: grid; gap: 2px; }
.pu-menu-item{ text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.pu-menu-item:hover{ background: rgba(224, 176, 79, .1); }
.pu-menu-item.danger{ color: #ff8a8a; }

/* statistics screen */
.pls-head{ display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(28, 42, 61, .6), rgba(14, 20, 31, .8)); }
.pls-who{ display: flex; gap: 16px; align-items: center; min-width: 0; }
.pls-who h2{ margin: 0 0 6px; font-size: 22px; }
.pls-avatar{ width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--border); font-size: 26px; font-weight: 800; color: var(--accent); }
.pls-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.pls-chips{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pls-chip{ padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.pls-chip.ok{ color: var(--accent2); border-color: rgba(47, 158, 110, .45); }
.pls-chip.warn{ color: #e0b04f; border-color: rgba(224, 176, 79, .45); }
.pls-sub{ margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.pls-side{ display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.pls-balance, .pls-risk{ min-width: 120px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, .22); display: grid; gap: 2px; position: relative; overflow: hidden; }
.pls-balance span, .pls-risk span{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pls-balance b, .pls-risk b{ font-size: 22px; font-family: var(--font-display); }
.pls-risk i{ position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--accent2); }
.pls-risk.mid i{ background: #e0b04f; }
.pls-risk.mid b{ color: #e0b04f; }
.pls-risk.high i{ background: var(--red); }
.pls-risk.high b{ color: #ff8a8a; }
.pls-tabs{ display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.pls-tab{ padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pls-tab:hover{ color: var(--text); }
.pls-tab.on{ color: var(--accent); border-bottom-color: var(--accent); }
.pls-view{ display: grid; gap: 16px; }
.pls-block{ padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 20, 31, .55); min-width: 0; }
.pls-block-head{ margin-bottom: 12px; }
.pls-block-head h3{ margin: 0; font-size: 16px; }
.pls-block-head p{ margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 80ch; }
.pls-block .pls-scroll{ border: 0; background: none; }
.pls-two{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pls-h4{ margin: 16px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.pls-note{ margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.pls-kpis{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pls-kpi{ padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); min-width: 0; }
.pls-kpi-v{ font-size: 20px; font-weight: 700; font-family: var(--font-display); overflow-wrap: anywhere; }
.pls-kpi.pos .pls-kpi-v{ color: var(--accent2); }
.pls-kpi.neg .pls-kpi-v{ color: #ff8a8a; }
.pls-kpi-l{ margin-top: 2px; color: var(--text); font-size: 12.5px; }
.pls-kpi-h{ margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.pls-flags{ display: grid; gap: 6px; }
.pls-flag{ padding: 10px 14px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; background: rgba(0, 0, 0, .18); font-size: 13.5px; }
.pls-flag.high{ border-left-color: var(--red); }
.pls-flag.mid{ border-left-color: #e0b04f; }
.pls-flag.info{ border-left-color: #5b8bd6; }
.pls-flag.ok{ border-left-color: var(--accent2); color: var(--muted); }
.pls-chart svg{ width: 100%; height: auto; display: block; color: var(--accent); }
.pls-chart text{ fill: var(--muted); font-size: 11px; }
.pls-chart .g{ stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.pls-chart .z{ stroke: #4a6288; stroke-width: 1; }
.pls-chart .l{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pls-chart .up{ fill: var(--accent2); }
.pls-chart .dn{ fill: var(--red); }
.pls-chart .dep{ fill: var(--accent); }
.pls-heat{ display: grid; gap: 4px; }
.pls-heat.h24{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pls-heat.h7{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pls-heat-cell{ padding: 6px 2px; border-radius: 8px; text-align: center; font-size: 11px; color: var(--muted); background: rgba(224, 176, 79, calc(.05 + var(--k) * .55)); border: 1px solid rgba(224, 176, 79, .12); }
.pls-heat-cell b{ display: block; color: var(--text); font-size: 11px; min-height: 14px; }
.pls-bars{ display: grid; gap: 6px; }
.pls-bar{ display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.pls-bar-l{ color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-bar i{ height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--w), rgba(255, 255, 255, .06) var(--w)); }
.pls-dl{ margin: 0; display: grid; gap: 2px; }
.pls-dl > div{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(38, 54, 77, .6); font-size: 13px; }
.pls-dl dt{ color: var(--muted); }
.pls-dl dd{ margin: 0; font-weight: 700; }
.pls-games{ color: var(--muted); font-size: 12px; max-width: 320px; }
.pls-game-row{ cursor: pointer; }
.pls-game-row.open td{ background: rgba(224, 176, 79, .07); }
.pls-detail > td{ padding: 12px 14px !important; background: rgba(0, 0, 0, .22); }
.pls-detail .pls-scroll{ max-height: 420px; overflow: auto; margin-bottom: 8px; }
.pls-status{ padding: 2px 8px; border-radius: 8px; font-size: 11.5px; background: rgba(255, 255, 255, .06); }
.pls-status.credited, .pls-status.approved{ color: var(--accent2); background: rgba(47, 158, 110, .14); }
.pls-status.rejected, .pls-status.failed{ color: #ff8a8a; background: var(--wine-soft); }
.pls-status.pending{ color: #e0b04f; background: rgba(224, 176, 79, .12); }
.pls-feed-tools{ display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.pls-feed{ display: grid; border-top: 1px solid var(--border); }
.pls-feed-row{ display: grid; grid-template-columns: 130px 150px 1fr; gap: 12px; align-items: start; padding: 9px 4px; border-bottom: 1px solid rgba(38, 54, 77, .6); font-size: 13px; }
.pls-feed-row time{ color: var(--muted); font-size: 12px; }
.pls-feed-text{ min-width: 0; overflow-wrap: anywhere; }
.pls-kind{ justify-self: start; padding: 2px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .06); color: var(--muted); }
.pls-kind.in, .pls-kind.up{ color: var(--accent2); background: rgba(47, 158, 110, .14); }
.pls-kind.bad, .pls-kind.dn{ color: #ff8a8a; background: var(--wine-soft); }
.pls-kind.warn{ color: #e0b04f; background: rgba(224, 176, 79, .12); }
.pls-skel{ display: grid; gap: 12px; }
.pls-skel > i, .pls-skel div i{ display: block; height: 70px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: pls-shimmer 1.4s linear infinite; }
.pls-skel > div{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@keyframes pls-shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){ .pls-skel i{ animation: none !important; } }
@media (max-width: 760px){
  .pls-two{ grid-template-columns: 1fr; }
  .pls-heat.h24{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pls-feed-row{ grid-template-columns: 1fr; gap: 4px; }
  .pls-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pls-head{ padding: 14px; }
  .pls-skel > div{ grid-template-columns: repeat(2, 1fr); }
  .pu-tools{ flex-wrap: wrap; }
}

.pu-table{ min-width: 0 !important; }
.pu-table th, .pu-table td{ padding: 10px 8px; }
.pu-table td:last-child, .pu-table th:last-child{ position: sticky; right: 0; background: #101826; box-shadow: -8px 0 12px -8px rgba(0, 0, 0, .6); }
.pu-table thead th:last-child{ background: #131c2b; }
.pu-mail{ max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pls-view, .pls-body, .pls-two{ grid-template-columns: minmax(0, 1fr); }
.pls-two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .pls-two{ grid-template-columns: minmax(0, 1fr); } }
.pls-body{ display: block; min-width: 0; }
.pls-block, .pls-kpis, .pls-head{ max-width: 100%; }
/* each row's sticky action cell is its own stacking context, so a later row painted over an earlier row's open menu */
.pu-table td:last-child{ z-index: 2; }
.pu-table td:last-child:has(.pu-menu[open]){ z-index: 60; }

/* Deposit: one button per currency, the method is chosen on the provider's page */
.cx-currencies{ flex-wrap: wrap; overflow: visible; gap: 10px; }
.cx-currencies .cx-country{ padding: 12px 20px 12px 12px; font-size: 15px; min-width: 150px; }
.cx-currencies .cx-country-cur{ min-width: 34px; height: 34px; font-size: 15px; }
.cx-currencies .cx-country:disabled{ opacity: .5; cursor: not-allowed; }
.cx-soon{ margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 520px){ .cx-currencies .cx-country{ flex: 1 1 100%; } }

/* Withdraw method list: the browser draws the dropdown itself, so give it a dark scheme and explicit option colours */
.cx-method-select{ color-scheme: dark; cursor: pointer; }
.cx-method-select option{ background: #151a26; color: #f2f4f8; }

/* ---- Get the app (/app) ---- */
a.footer-link { text-decoration: none; }
.app-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.app-hero h1 { margin-top: 16px; }
.app-hero .inv-lead { margin-bottom: 0; }
.inv.app { max-width: 1000px; }
.app-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.app-card { padding: 20px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.app-card.you { border-color: rgba(224, 176, 79, 0.6); box-shadow: 0 0 0 1px rgba(224, 176, 79, 0.25), 0 14px 36px rgba(0, 0, 0, 0.3); }
.app-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.app-card-head h2 { margin: 0; font: 800 20px/1.2 var(--font-display); }
/* the supplied logos are a small glyph in a large dark glow: zoom in on the glyph so it reads at tile size */
.app-ico { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 16px; background: #05070b; }
.app-ico img { display: block; width: 100%; height: 100%; transform: translateY(14%) scale(2); }
.app-dl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; }
.app-dl-ico svg { width: 18px; height: 18px; display: block; }
.app-meta { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.app-steps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.app-sum { margin-top: 14px; font-size: 12px; color: var(--muted); }
.app-sum summary { cursor: pointer; }
.app-sum code { display: block; margin-top: 6px; overflow-wrap: anywhere; user-select: all; font-size: 11px; }

/* download links in the footer: one tile per platform, logo + name */
.footer-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.footer-app {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); color: var(--text); font-weight: 700; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease;
}
.footer-app:hover { border-color: rgba(224, 176, 79, 0.6); transform: translateY(-1px); }
.footer-app .app-ico { width: 36px; height: 36px; border-radius: 10px; }

/* ---- Admin panel menu: grouped sidebar on wide screens, wrapped buttons below (the cashier shares .admin-layout, so all of this
   is scoped to .admin-panel) ---- */
.view:has(.admin-layout.admin-panel) { max-width: 1440px; }
.admin-panel .admin-sidebar { flex-direction: column; align-items: stretch; gap: 8px; }
.admin-panel .admin-brand { padding: 2px 6px 0; border-right: 0; }
.admin-panel .admin-nav { flex-wrap: wrap; overflow: visible; }
.admin-panel .admin-nav-group { display: contents; }
.admin-panel .admin-nav-group h6 { display: none; }
@media (min-width: 1100px) {
  .admin-layout.admin-panel { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
  .admin-panel .admin-sidebar { position: sticky; top: 78px; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 12px; }
  .admin-panel .admin-brand { padding: 4px 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .admin-panel .admin-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .admin-panel .admin-nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
  .admin-panel .admin-nav-group:first-child { margin-top: 2px; }
  .admin-panel .admin-nav-group h6 { display: block; margin: 4px 12px 6px; font: 700 10.5px/1 var(--font-display, inherit); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
  .admin-panel .admin-nav-item { width: 100%; padding: 10px 12px; }
  /* the active mark is a bar on the left edge instead of the underline of the old strip */
  .admin-panel .admin-nav-item::before { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; transform: scaleY(0); transform-origin: center; }
  .admin-panel .admin-nav-item.active::before { transform: scaleY(1); }
}

/* Account menu, kept to what a player needs: the phone no longer repeats the site nav (lobby, favourites, bonus) or the cashier
   (the header has Deposit) in it, and the invite link is gone everywhere (referral links are handed out personally). */
#usermenu #invite { display: none !important; }
.menu-nav-slot { display: none !important; }
@media (max-width: 900px) { #usermenu #cashier { display: none !important; } }

/* ---- "A new version of the app is ready" (appUpdate.js) ---- */
.upd {
  position: fixed; z-index: 9000; left: 50%; bottom: calc(var(--dock-h, 0px) + 18px); transform: translateX(-50%); width: min(420px, calc(100vw - 28px));
  padding: 16px 18px; border: 1.5px solid #e0b04f; border-radius: 16px; background: linear-gradient(160deg, rgba(44, 36, 18, 0.98), rgba(16, 18, 28, 0.98));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); color: var(--text);
}
.upd-title { display: block; font: 800 16px/1.2 var(--font-display); color: var(--accent); }
.upd-text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.upd-bar { height: 8px; margin-top: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.upd-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffe08a, var(--accent)); transition: width 0.25s ease; }
.upd-actions { display: flex; gap: 10px; margin-top: 14px; }
.upd-actions .btn { flex: 1; }

/* Profile: the account desk. The balance is the one big thing; surfaces are
   separated by a step in tone, not by outlines; labels are sentence case. */
.pf{ display: flex; flex-direction: column; gap: 28px; padding: 4px 0 8px; }
.pf h1, .pf h2{ margin: 0; }
.pf h2{ font-size: 20px; }
.pf .num{ font-variant-numeric: tabular-nums; }
.pf .back{ align-self: flex-start; }
.pf-sub{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.pf-id{ display: flex; align-items: center; gap: 18px; }
.pf-avatar{ width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #1a1405; font: 800 28px var(--font-display); }
.pf-who h1{ font-size: clamp(26px, 4vw, 38px); line-height: 1.1; overflow-wrap: anywhere; }
.pf-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; color: var(--muted); font-size: 15px; }

.pf-top{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.pf-balance, .pf-vip, .pf-rounds, .pf-card{ background: var(--panel); border-radius: 20px; padding: clamp(20px, 3vw, 32px); }
.pf-balance{ display: flex; flex-direction: column; gap: 18px; background: var(--panel2); }
.pf-bal{ font: 800 clamp(44px, 7.4vw, 88px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--text); overflow-wrap: anywhere; }
.pf-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.pf-actions .btn{ min-width: 140px; text-align: center; text-decoration: none; }
.pf-net.pos b{ color: #46d39a; }
.pf-net.neg b{ color: #ff7a7a; }

.pf-vip{ display: flex; flex-direction: column; gap: 14px; }
.pf-tier{ font: 800 clamp(28px, 4vw, 40px)/1.1 var(--font-display); color: var(--accent); }
.pf-bar{ height: 14px; border-radius: 7px; background: var(--panel2); overflow: hidden; }
.pf-bar-fill{ height: 100%; min-width: 14px; border-radius: 7px; background: var(--accent); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.pf-cash{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: auto; padding: 18px; border-radius: 16px; background: var(--panel2); }
.pf-cash-sum{ font: 800 30px var(--font-display); }

.pf-rounds{ display: flex; flex-direction: column; gap: 18px; }
.pf-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-row{ display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; }
.pf-row:nth-child(odd){ background: var(--panel2); }
.pf-game{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-game b{ font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-game time{ color: var(--muted); font-size: 14px; }
.pf-amt{ display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pf-amt span{ display: none; color: var(--muted); font-size: 13px; }
.pf-amt b{ font-size: 16px; }

.pf-settings{ display: grid; grid-template-columns: 1fr; gap: 16px; }
.pf-card{ display: flex; flex-direction: column; gap: 18px; }
.pf-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-field{ display: flex; flex-direction: column; gap: 6px; }
.pf-field span{ color: var(--muted); font-size: 15px; }
.pf-field .auth-input{ width: 100%; margin: 0; background: var(--panel2); border-color: transparent; }
.pf-card > .btn{ align-self: flex-start; }
.pf-btns{ display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px){
  .pf-top{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .pf{ gap: 20px; }
  .pf-avatar{ width: 52px; height: 52px; font-size: 22px; }
  .pf-actions .btn{ flex: 1 1 0; min-width: 0; }
  .pf-form{ grid-template-columns: 1fr; }
  .pf-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .pf-game{ grid-column: 1 / -1; }
  .pf-amt{ text-align: left; }
  .pf-amt span{ display: block; }
}
@media (prefers-reduced-motion: reduce){ .pf-bar-fill{ transition: none; } }

.pf-head{ padding-top: 0; padding-bottom: 4px; color: var(--muted); font-size: 14px; background: none !important; }
.pf-head span:not(:first-child){ text-align: right; }
.pf-list .pf-row.extra{ display: none; }
.pf-list.open .pf-row.extra{ display: grid; }
.pf-more{ align-self: flex-start; }
.pf-field .auth-input{ font: inherit; font-size: 16px; }
@media (max-width: 620px){ .pf-head{ display: none; } }

/* admin: the player's referral link with its copy button */
.ref-link { margin: 4px 0 14px; }
.ref-link-row { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.ref-link-row .auth-input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .ref-link-row { flex-direction: column; } }
.ref-pct-row { align-items: center; }
.ref-pct-row .ref-pct { flex: 0 0 110px; }

/* Paying by bank transfer: exact amount first, one-tap copy on every field, three plain steps */
.cx-modal:has(.cx-bank){ max-width: 460px; width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; }
.cx-bank{ display: flex; flex-direction: column; gap: 12px; text-align: left; margin: 6px 0 4px; }
.cx-lead{ margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; }
.cx-sendamt, .cx-copyrow{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel2); }
.cx-sendamt{ padding: 16px; background: rgba(224, 176, 79, 0.14); }
.cx-copytext{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-copylabel{ color: var(--muted); font-size: 13px; }
.cx-copyval{ font-size: 17px; letter-spacing: .02em; overflow-wrap: anywhere; }
.cx-sendval{ font: 800 clamp(26px, 7vw, 34px)/1.1 var(--font-display); color: var(--accent); }
.cx-copybtn{ flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--accent); color: #1a1405; font: 700 14px var(--font-ui); cursor: pointer; transition: background .15s, transform .1s; }
.cx-copybtn:active{ transform: scale(.96); }
.cx-copybtn.done{ background: #46d39a; }
.cx-copyico{ display: inline-flex; }
.cx-copyall{ display: flex; }
.cx-copyall .cx-copybtn{ flex: 1; justify-content: center; background: var(--panel2); color: var(--text); }
.cx-copyall .cx-copybtn.done{ background: #46d39a; color: #0b1a12; }
.cx-steps{ margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 15px; line-height: 1.45; }
.cx-warn{ margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(216, 75, 75, 0.14); color: var(--text); font-size: 14px; line-height: 1.45; }
@media (max-width: 480px){ .cx-copybtn{ padding: 0 10px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce){ .cx-copybtn{ transition: none; } }
.modal-backdrop:has(.cx-bank){ z-index: 3000; }
.cx-copylabel::first-letter{ text-transform: uppercase; }

/* Admin: new-user password row — the password takes the width, the two actions are square icon buttons */
.adm-wide{ grid-column: 1 / -1; }
.adm-passrow{ display: flex; align-items: center; gap: 8px; }
.adm-pass{ flex: 1 1 auto; min-width: 0; margin: 0; font: 600 17px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .04em; }
.adm-iconbtn{ flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.adm-iconbtn:hover{ border-color: var(--accent); color: var(--accent); }
.adm-iconbtn:active{ transform: scale(.95); }
.adm-iconbtn.done{ background: #46d39a; border-color: #46d39a; color: #0b1a12; }