/* base.css */
:root {
  --bg: #0d1024; --bg2: #11152f; --panel: #171c3c; --panel2: #20264d; --panel3: #2a3160;
  --line: rgba(255, 255, 255, .07);
  --text: #eef0ff; --muted: #9097c4; --dim: #676e9e;
  --blue: #8ec5ff; --purple: #c3a6ff; --green: #9ff2c4; --pink: #ffb3d9; --red: #ff8fa3; --yellow: #ffe08a;
  --ink: #14173a;
  --grad: linear-gradient(135deg, var(--blue), var(--purple) 50%, var(--green));
  --radius: 16px; --side: 256px;
  --font: 'Outfit', system-ui, 'Hiragino Sans', 'Yu Gothic', sans-serif; --slab: 'Zilla Slab', Georgia, 'Hiragino Mincho ProN', serif; --display: 'Anton', 'Impact', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
html { color-scheme: dark; accent-color: var(--purple); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Form baseline at zero specificity: any component rule (.inp, .admin, .live-form, .otp ...) overrides it, but a bare
   control never falls back to the browser's white box. */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea) {
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; min-width: 0; max-width: 100%;
  transition: border-color .2s, box-shadow .2s; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea):where(:not(.inp *, .search *)):focus-visible {
  outline: 0; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .15); }
:where(input, select, textarea):where(:user-invalid):where(:not(.inp *)) { border-color: var(--red); }
.inp:has(:user-invalid) { border-color: var(--red); }
:where(input, select, textarea):disabled { cursor: not-allowed; opacity: .6; }
.inp:has(:disabled) { opacity: .6; }
textarea { resize: vertical; line-height: 1.5; }
::placeholder { color: var(--dim); opacity: 1; }
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239097c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 8px; }
select option { background: var(--panel); color: var(--text); }
:is(input[type=checkbox], input[type=radio]):not(.switch) { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: none; margin: 0; padding: 0;
  cursor: pointer; background: var(--bg) center / 12px 12px no-repeat; border: 1.5px solid var(--panel3); border-radius: 5px; transition: background-color .15s, border-color .15s; }
input[type=radio]:not(.switch) { border-radius: 50%; }
:is(input[type=checkbox], input[type=radio]):not(.switch):hover { border-color: var(--check, var(--purple)); }
:is(input[type=checkbox], input[type=radio]):not(.switch):checked { background-color: var(--check, var(--purple)); border-color: var(--check, var(--purple));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%2314173a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type=radio]:not(.switch):checked { background-image: radial-gradient(circle, var(--ink) 3px, transparent 3.5px); background-size: auto; }
:is(input[type=checkbox], input[type=radio]):not(.switch):focus-visible { outline: 2px solid var(--check, var(--purple)); outline-offset: 2px; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { font-family: var(--slab); font-weight: 700; letter-spacing: -.01em; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 8px; }

@keyframes fa-float-kf {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(var(--fa-float-squash-x, 1.03), var(--fa-float-squash-y, .97)); }
  50% { transform: translate(var(--fa-float-drift, .06em), calc(var(--fa-float-height, .22em) * -1)) rotate(var(--fa-float-tilt, 5deg)) scale(var(--fa-float-stretch-x, .98), var(--fa-float-stretch-y, 1.03)); }
}
.fa-float { display: inline-block; animation: fa-float-kf var(--fa-animation-duration, 3s) ease-in-out var(--fa-animation-delay, 0s) infinite; }
img.fa-float { display: block; --fa-float-height: 8px; --fa-float-drift: 2px; --fa-float-tilt: 3deg; }

.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs span { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(120px); opacity: .16; animation: drift 24s ease-in-out infinite alternate; }
.bg-blobs span:nth-child(1) { background: var(--purple); top: -180px; left: 12%; }
.bg-blobs span:nth-child(2) { background: var(--blue); right: -140px; top: 30%; animation-duration: 30s; animation-delay: -8s; }
.bg-blobs span:nth-child(3) { background: var(--green); bottom: -220px; left: 40%; animation-duration: 34s; animation-delay: -14s; }
@keyframes drift { to { transform: translate(140px, 90px) scale(1.25); } }

.splash { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .6s, visibility .6s; }
.splash.done { opacity: 0; visibility: hidden; }
.splash img { width: 86px; animation: splashPop .9s var(--spring) both, spinY 1.6s .9s ease-in-out infinite; filter: drop-shadow(0 18px 40px rgba(195, 166, 255, .5)); }
.splash-name { font-family: var(--slab); font-size: 2rem; font-weight: 700; animation: splashPop .9s .15s var(--spring) both; }
.splash-name b, .brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.splash .bar { width: 170px; height: 4px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.splash .bar i { display: block; height: 100%; background: var(--grad); animation: load 1.1s var(--ease) forwards; }
@keyframes splashPop { from { opacity: 0; transform: scale(.5) translateY(20px); } }
@keyframes spinY { 50% { transform: rotateY(180deg); } }
@keyframes load { from { width: 0; } to { width: 100%; } }

/* layout.css */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--side); background: rgba(17, 21, 47, .9); backdrop-filter: blur(16px); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; padding: 14px; z-index: 40; transition: width .3s var(--ease), transform .3s var(--ease); overflow-y: auto; }
.side-top { display: flex; align-items: center; gap: 10px; }
.side-tabs { display: flex; flex: 1; background: var(--bg); border-radius: 12px; padding: 4px; }
.side-tab { flex: 1; text-align: center; padding: 8px; border-radius: 9px; font-weight: 700; color: var(--muted); font-size: .88rem; transition: .2s; }
.side-tab.active { background: var(--grad); color: var(--ink); }
.raffle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 224, 138, .16), rgba(195, 166, 255, .12)); border: 1px solid rgba(255, 224, 138, .2); transition: transform .3s var(--ease); }
.raffle:hover { transform: translateY(-2px); }
.raffle img { width: 40px; height: 40px; }
.raffle div { flex: 1; min-width: 0; }
.raffle b { display: block; font-family: var(--display); font-size: 1.2rem; letter-spacing: .02em; font-weight: 400; }
.raffle span { font-size: .72rem; color: var(--yellow); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.raffle em { font-style: normal; font-size: .72rem; font-weight: 800; border: 1px solid var(--yellow); color: var(--yellow); padding: 2px 7px; border-radius: 6px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border-radius: var(--radius); padding: 6px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; transition: .2s; position: relative; white-space: nowrap; font-size: .94rem; }
.side-nav a i { width: 20px; text-align: center; transition: transform .35s var(--spring); }
.side-nav a:hover { background: var(--panel2); color: var(--text); }
.side-nav a:hover i { transform: scale(1.25) rotate(-10deg); }
.side-nav a.active { background: var(--panel2); color: var(--text); }
.side-nav a.active i { color: var(--purple); }
.side-nav a.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--grad); }
.flag { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.side-card { margin-top: auto; background: linear-gradient(160deg, rgba(195, 166, 255, .18), rgba(159, 242, 196, .1)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; color: var(--muted); font-size: .85rem; }
.side-card i { font-size: 2rem; color: var(--purple); margin-bottom: 8px; --fa-float-height: .35em; }
body.side-collapsed { --side: 82px; }
body.side-collapsed .side-tabs, body.side-collapsed .side-nav span, body.side-collapsed .side-card, body.side-collapsed .raffle div, body.side-collapsed .raffle em { display: none; }
body.side-collapsed .side-nav a, body.side-collapsed .side-top, body.side-collapsed .raffle { justify-content: center; }
.scrim { position: fixed; inset: 0; background: rgba(8, 10, 25, .6); z-index: 35; opacity: 0; pointer-events: none; transition: .3s; }

.shell { min-width: 0; margin-left: var(--side); transition: margin .3s var(--ease); min-height: 100vh; display: flex; flex-direction: column; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: rgba(13, 16, 36, .78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--slab); font-size: 1.55rem; font-weight: 700; }
.brand img { width: 38px; height: 38px; transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-14deg) scale(1.12); }
.brand small { font-family: var(--font); font-size: .72rem; color: var(--dim); font-weight: 700; margin-left: -8px; align-self: flex-end; margin-bottom: 7px; }
.wallet { margin: 0 auto; display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 4px; gap: 4px; }
.balance { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 9px; transition: background .2s; }
.balance:hover { background: var(--panel); }
.balance .caret { font-size: .7rem; color: var(--dim); }
.balance.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.1); color: var(--pink); } }
.top-actions { display: flex; align-items: center; gap: 10px; }
@media (min-width: 601px) { .top-actions { min-width: 0; } .topbar > .brand { flex-shrink: 0; } } /* the search box gives way first, never the logo */
.search { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; color: var(--muted); transition: .2s; min-width: 0; }
.search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .15); }
.search input { background: none; border: 0; outline: 0; width: 190px; }
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--panel); color: var(--muted); position: relative; transition: .2s; }
.icon-btn:hover { color: var(--text); background: var(--panel2); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }
.lang-btn .flag { width: 22px; height: 22px; }
.chat-fab .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); border: 2px solid var(--bg); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 179, 217, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 179, 217, 0); } }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: var(--ink); display: grid; place-items: center; transition: transform .3s var(--spring); flex-shrink: 0; }
.avatar:hover { transform: scale(1.08) rotate(8deg); }
.avatar.sm { width: 36px; height: 36px; }
.mobile-only { display: none; }

.pop { position: fixed; inset: 70px 22px auto auto; margin: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 18px; padding: 10px; width: 330px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.pop:popover-open { animation: modalIn .3s var(--ease); }
.pop h4 { padding: 8px 10px 10px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.pop h4 img { width: 24px; height: 24px; }
.pop-sm { width: 240px; }
.um-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-head span:not(.avatar) { display: block; font-size: .78rem; color: var(--purple); }
.pop-sm a, .lang-opt { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--muted); font-weight: 500; transition: .2s; width: 100%; text-align: left; }
.pop-sm a:hover, .lang-opt:hover { background: var(--panel2); color: var(--text); }
.pop-sm a i { width: 18px; text-align: center; }
.lang-opt .flag { width: 24px; height: 24px; }
.lang-opt small { margin-left: auto; color: var(--dim); font-weight: 700; font-size: .75rem; }
.lang-opt.active { color: var(--text); background: rgba(195, 166, 255, .12); }

/* components.css */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px; font-weight: 700; transition: transform .15s, box-shadow .25s, filter .2s, background .2s; position: relative; overflow: hidden; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--grad); background-size: 200% 200%; color: var(--ink); animation: gradmove 6s ease infinite; box-shadow: 0 8px 24px -8px rgba(195, 166, 255, .7); }
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 10px 30px -6px rgba(159, 242, 196, .65); }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.6s infinite; }
@keyframes shine { 55%, 100% { transform: translateX(100%); } }
@keyframes gradmove { 50% { background-position: 100% 50%; } }
.btn-ghost { background: var(--panel2); color: var(--text); }
.btn-ghost:hover { background: var(--panel3); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 10px 24px -10px var(--ink); }
.btn-dark i { transition: transform .3s; }
.btn-dark:hover i { transform: translateX(4px); }
.btn-block { width: 100%; padding: 14px; font-size: 1rem; }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; border-radius: 14px; }
.btn.sm { padding: 7px 12px; font-size: .82rem; }
.btn small { font-weight: 600; opacity: .7; }
.btn:disabled { opacity: .55; cursor: not-allowed; animation: none; transform: none; }
.btn:disabled::after { display: none; }

main { min-width: 0; padding: 28px; max-width: 1360px; width: 100%; margin: 0 auto; flex: 1; }
.view { display: none; }
.view.active { display: block; animation: viewIn .55s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.tag { display: inline-block; background: rgba(20, 23, 58, .85); color: #fff; font-size: .7rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; letter-spacing: .07em; text-transform: uppercase; }
.tag.light { background: rgba(195, 166, 255, .18); color: var(--purple); }

/* lobby.css */
.hero > *, .sports-layout > *, .game-wrap > * { min-width: 0; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 30px; }
.hero-left { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 10px 10px 10px 0; animation: rise .7s var(--ease) both; }
.hero-left h1 { font-family: var(--font); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
.hero-left p { color: var(--muted); }
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-cta .or { color: var(--dim); font-size: .9rem; }
.hero-card { position: relative; overflow: hidden; border-radius: 22px; min-height: 270px; background: linear-gradient(150deg, var(--a), var(--b)); display: flex; flex-direction: column; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s; animation: rise .7s .1s var(--ease) both; }
.hero-card:nth-child(3) { animation-delay: .18s; }
.hero-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -26px var(--a); }
.hero-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .4), transparent 55%); z-index: -1; }
.hc-art { flex: 1; position: relative; }
.hc-art img { position: absolute; width: 44%; filter: drop-shadow(0 16px 20px rgba(20, 23, 58, .35)); }
.hc-art img:nth-child(1) { left: 6%; top: 10%; }
.hc-art img:nth-child(2) { right: 4%; top: 4%; width: 40%; --fa-animation-delay: -1s; }
.hc-art img:nth-child(3) { left: 32%; bottom: -4%; width: 36%; --fa-animation-delay: -2s; }
.hc-art.icons i { position: absolute; color: #fff; filter: drop-shadow(0 14px 18px rgba(20, 23, 58, .3)); }
.hc-art.icons i:nth-child(1) { font-size: 5.5rem; left: 12%; top: 14%; }
.hc-art.icons i:nth-child(2) { font-size: 4.2rem; right: 12%; top: 8%; --fa-animation-delay: -1.2s; color: #ffe8cc; }
.hc-art.icons i:nth-child(3) { font-size: 3.6rem; left: 44%; bottom: 8%; --fa-animation-delay: -2.2s; color: #fff3bf; }
.hc-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(20, 23, 58, .55); backdrop-filter: blur(8px); font-weight: 800; font-size: 1.15rem; }
.hc-foot i:last-child { margin-left: auto; transition: transform .3s; }
.hero-card:hover .hc-foot i:last-child { transform: translateX(5px); }

.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(159, 242, 196, .6); animation: livePing 1.6s infinite; }
@keyframes livePing { 70%, 100% { box-shadow: 0 0 0 10px rgba(159, 242, 196, 0); } }
.live-wins { display: flex; gap: 10px; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); padding-bottom: 4px; }
.lw { flex: 0 0 92px; min-width: 0; text-align: center; animation: lwIn .6s var(--spring); }
@keyframes lwIn { from { opacity: 0; transform: translateX(-30px) scale(.8); } }
.lw .mini { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--a, #c3a6ff), var(--b, #6741d9)); display: grid; place-items: center; position: relative; transition: transform .3s var(--ease); }
.lw .mini:hover { transform: translateY(-4px); }
.lw .mini img { width: 70%; }
.lw .mini.art img { width: 100%; height: 100%; object-fit: cover; }
.lw .mini b { position: absolute; left: 4px; right: 4px; bottom: 6px; font-family: var(--display); font-weight: 400; font-size: .72rem; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.lw span { display: block; font-size: .72rem; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw em { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px; padding: 3px 7px 3px 4px; border-radius: 99px; font-style: normal; font-size: .74rem; font-weight: 800; background: rgba(76, 217, 123, .12); color: #4cd97b; border: 1px solid rgba(76, 217, 123, .28); }
.lw em i { min-width: 0; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lw .lw-cur { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; }
.lw img.lw-cur { object-fit: cover; }
.lw.loss em { background: rgba(255, 92, 112, .12); color: #ff5c70; border-color: rgba(255, 92, 112, .28); }
.lw.win .mini { box-shadow: 0 0 0 1px rgba(76, 217, 123, .35), 0 10px 22px -14px #4cd97b; }
.lw.loss .mini { box-shadow: 0 0 0 1px rgba(255, 92, 112, .3); }
.lw .mini { transition: transform .3s var(--ease), box-shadow .3s; }

.promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.promo { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; min-height: 220px; background: linear-gradient(135deg, var(--a), var(--b)); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s; animation: rise .7s var(--ease) both; }
.promo:nth-child(2) { animation-delay: .08s; } .promo:nth-child(3) { animation-delay: .16s; }
.promo:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px var(--a); }
.promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .55), transparent 55%); z-index: -1; }
.promo h2 { font-size: 1.65rem; line-height: 1.05; margin: 12px 0 6px; max-width: 60%; }
.promo p { font-size: .88rem; max-width: 56%; opacity: .78; font-weight: 500; }
.promo .btn { align-self: flex-start; margin-top: 16px; }
.promo-art { position: absolute; right: 0; bottom: 0; width: 46%; height: 100%; z-index: -1; }
.promo-art img { position: absolute; width: 150px; right: 10px; bottom: 18px; filter: drop-shadow(0 14px 18px rgba(20, 23, 58, .3)); }
.promo-art i { position: absolute; color: #fff; filter: drop-shadow(0 8px 10px rgba(20, 23, 58, .25)); }
.promo-art i:nth-of-type(1) { font-size: 1.8rem; right: 160px; top: 26px; --fa-animation-delay: -1s; --fa-animation-duration: 2.6s; }
.promo-art i:nth-of-type(2) { font-size: 1.4rem; right: 20px; top: 20px; --fa-animation-delay: -2s; --fa-animation-duration: 3.4s; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 6px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 14px; align-items: center; animation: rise .7s var(--ease) both; animation-delay: .2s; transition: transform .3s var(--ease), border-color .3s; }
.stat:hover { transform: translateY(-3px); border-color: rgba(195, 166, 255, .3); }
.stat > img { width: 50px; height: 50px; flex-shrink: 0; transition: transform .4s var(--spring); }
.stat:hover > img { transform: rotate(-8deg) scale(1.1); }
.stat b { display: block; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--muted); }

.row-sec { margin-top: 34px; scroll-margin-top: 84px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-head.first { margin-top: 0; }
.sec-head h2 { font-family: var(--font); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.sec-ico { width: 30px; height: 30px; }
.row-nav { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.row-nav button { width: 44px; height: 36px; color: var(--muted); transition: .2s; }
.row-nav button:hover { background: var(--panel2); color: var(--text); }
.row-nav button + button { border-left: 1px solid var(--line); }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 12px) / 8); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 0 10px; }
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }
.search-empty { text-align: center; color: var(--muted); padding: 40px 0 10px; }

.tile-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(165deg, var(--a), var(--b)); display: flex; flex-direction: column; align-items: center; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s; animation: rise .6s var(--ease) both; }
.tile-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .45), transparent 60%), repeating-conic-gradient(from 0deg at 50% 32%, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg); z-index: -1; transition: transform 6s linear; }
.tile-card:hover::before { transform: rotate(40deg) scale(1.3); }
.tile-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px var(--a); }
.tc-icon { width: 68%; margin-top: 12%; filter: drop-shadow(0 12px 14px rgba(20, 23, 58, .35)); transition: transform .5s var(--spring); }
.tile-card:hover .tc-icon { transform: scale(1.1) rotate(-6deg); }
.tc-title { margin-top: auto; padding: 0 6px; text-align: center; line-height: .95; text-shadow: 0 3px 0 rgba(20, 23, 58, .35), 0 6px 14px rgba(0, 0, 0, .35); }
.tc-title b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(.95rem, 1.35vw, 1.3rem); text-transform: uppercase; letter-spacing: .01em; }
.tc-title em { display: block; font-style: normal; font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 1.7rem); color: #fff3bf; }
.tc-title small { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.tc-prov { font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; padding: 6px 0 10px; }
.tile-card .badge, .art-card .badge { position: absolute; top: 8px; left: 8px; font-size: .6rem; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: #fff; letter-spacing: .06em; z-index: 2; }
.badge.hot { background: #ff6b6b; } .badge.new { background: var(--green); color: var(--ink); } .badge.live { background: #fa5252; display: flex; align-items: center; gap: 4px; } .badge.soon { background: rgba(20, 23, 58, .8); color: var(--muted); }
.tile-card .play, .art-card .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: .3s; background: rgba(13, 16, 36, .35); z-index: 3; }
.tile-card .play i, .art-card .play i { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; transform: scale(.5); transition: transform .4s var(--spring); }
.tile-card:hover .play, .art-card:hover .play { opacity: 1; }
.tile-card:hover .play i, .art-card:hover .play i { transform: scale(1); }
.art-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; display: block; transition: transform .35s var(--ease), box-shadow .35s; animation: rise .6s var(--ease) both; }
.art-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.art-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px var(--purple); }
.art-card:hover img { transform: scale(1.08); }
.art-card .label { position: absolute; inset: auto 0 0 0; padding: 36px 10px 10px; text-align: center; background: linear-gradient(transparent, rgba(13, 16, 36, .92)); }
.art-card .label b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.art-card .label span { font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.tile-card.hide, .art-card.hide, .sport-card.hide { display: none; }

.sport-card { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 4; background: linear-gradient(165deg, var(--a), var(--b)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 14px; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s; }
.sport-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px var(--a); }
.sport-card i { position: absolute; top: 14%; font-size: 4.6rem; color: rgba(255, 255, 255, .92); filter: drop-shadow(0 12px 16px rgba(20, 23, 58, .35)); transition: transform .5s var(--spring); }
.sport-card:hover i { transform: scale(1.12) rotate(-12deg); }
.sport-card::after { content: ''; position: absolute; width: 140%; height: 60%; bottom: -30%; background: radial-gradient(rgba(20, 23, 58, .45), transparent 70%); z-index: -1; }
.sport-card b { font-family: var(--display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.4rem); text-transform: uppercase; text-shadow: 0 3px 0 rgba(20, 23, 58, .35); text-align: center; padding: 0 6px; }

.providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.prov { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px; text-align: center; transition: .25s var(--ease); }
.prov:hover { border-color: rgba(195, 166, 255, .4); transform: translateY(-3px); }
.prov b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.prov span { font-size: .72rem; color: var(--dim); }
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.partner { position: relative; overflow: hidden; background: linear-gradient(120deg, #2a2257, var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; transition: transform .35s var(--ease); }
.partner:hover { transform: translateY(-4px); }
.partner small { color: var(--purple); font-size: .82rem; }
.partner b { font-size: 1.45rem; font-weight: 800; }
.partner span { color: var(--muted); font-size: .85rem; }
.partner img { position: absolute; right: 14px; bottom: -10px; width: 120px; opacity: .95; transition: transform .5s var(--spring); }
.partner:hover img { transform: rotate(-8deg) scale(1.08); }

.tabs { display: inline-flex; background: var(--bg); border-radius: 12px; padding: 4px; gap: 4px; }
.tabs.full { display: flex; }
.tabs.full button { flex: 1; }
.tabs button { padding: 8px 16px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: .9rem; transition: .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tabs button img { width: 22px; height: 22px; }
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--panel2); color: var(--text); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }

.bets-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.bets-card table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bets-card th { color: var(--dim); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; text-align: left; padding: 14px 18px; }
.bets-card td { padding: 13px 18px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bets-card th:nth-child(n+4), .bets-card td:nth-child(n+4) { text-align: right; }
.bets-card tbody tr { animation: rowIn .6s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-14px); background: rgba(195, 166, 255, .14); } }
.bets-card td .g { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.bets-card td .g img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.bets-card td.user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .bets-card td .g { white-space: normal; line-height: 1.2; } }
.user i { color: var(--dim); margin-right: 4px; }
.pos { color: var(--green); font-weight: 700; }
.neg { color: var(--red); font-weight: 600; }
.bets-card tr.me td { background: rgba(255, 143, 163, .07); }
.bets-card tr.me .user { color: var(--pink); font-weight: 700; }

/* games.css */
.game-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.game-head h1 { font-size: 1.9rem; line-height: 1; }
.game-head p { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.gh-icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: var(--c); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px -14px var(--c); }
.gh-icon.img { background: linear-gradient(160deg, var(--a, #c3a6ff), var(--b, #6741d9)); }
.gh-icon.img img { width: 40px; }
.live-pill { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.live-pill i { color: var(--green); font-size: .55rem; }
.game-wrap { display: grid; grid-template-columns: 320px 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; min-height: 540px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8); }
.controls { background: var(--bg2); padding: 20px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
.field label, .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.field label span + span { color: var(--dim); font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inp { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 4px; transition: .2s; }
.inp:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .12); }
.inp input, .inp select { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 8px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inp select option { background: var(--panel); }
.inp .cur { color: var(--yellow); padding-left: 8px; font-size: .9rem; font-weight: 800; white-space: nowrap; }
.inp .suffix { color: var(--dim); padding: 0 10px; font-weight: 700; }
.inp button { padding: 7px 12px; border-radius: 8px; background: var(--panel2); font-weight: 700; font-size: .8rem; color: var(--muted); transition: .2s; margin-left: 4px; }
.inp button:hover { color: var(--text); background: var(--panel3); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ctrl-note { margin-top: auto; font-size: .78rem; color: var(--dim); line-height: 1.5; }
.ctrl-note i { color: var(--blue); margin-right: 4px; }
.stage { position: relative; padding: 24px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(195, 166, 255, .07), transparent 60%); }
.game-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 6px; color: var(--dim); font-size: .82rem; }
.game-foot i { margin-right: 6px; color: var(--green); }

.crash-history, .dice-history { display: flex; gap: 6px; justify-content: flex-end; position: absolute; top: 18px; right: 22px; left: 22px; overflow: hidden; }
.crash-history span, .dice-history span { padding: 5px 10px; border-radius: 8px; font-size: .78rem; font-weight: 700; background: var(--panel2); animation: popIn .45s var(--spring); flex-shrink: 0; }
.dice-history span { color: var(--red); }
.crash-history .lo { color: var(--red); } .crash-history .mid { color: var(--blue); } .crash-history .hi { color: var(--green); }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } }
.crash-graph { position: relative; height: 400px; margin-top: 34px; border-radius: 16px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 60px 60px; }
.crash-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#crashLine { fill: none; stroke: url(#crashGrad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(195, 166, 255, .6)); }
.rocket { position: absolute; left: 3%; top: 93%; font-size: 2.1rem; color: #fff; transform: translate(-50%, -50%) rotate(var(--r, 35deg)); filter: drop-shadow(0 0 14px var(--purple)); }
.crash-graph.waiting .rocket { opacity: 0; }
.crash-graph.crashed .rocket { color: var(--red); filter: drop-shadow(0 0 18px var(--red)); animation: boom .5s var(--spring); --r: 0deg; }
@keyframes boom { from { transform: translate(-50%, -50%) scale(.3); } 50% { transform: translate(-50%, -50%) scale(1.6); } }
.crash-mult { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--slab); font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 700; pointer-events: none; text-shadow: 0 6px 34px rgba(195, 166, 255, .45); font-variant-numeric: tabular-nums; }
.crash-graph.waiting .crash-mult { font-size: 1.5rem; color: var(--muted); text-shadow: none; }
.crash-graph.crashed .crash-mult { color: var(--red); animation: shake .5s; text-shadow: 0 6px 34px rgba(255, 143, 163, .5); }
.crash-graph.crashed #crashLine { stroke: var(--red); filter: drop-shadow(0 0 8px rgba(255, 143, 163, .6)); }
.crash-graph.crashed #crashFill { opacity: .3; }
.wait-bar { position: absolute; left: 50%; top: calc(50% + 34px); width: 220px; height: 6px; border-radius: 6px; background: var(--panel2); transform: translateX(-50%); overflow: hidden; display: none; }
.waiting .wait-bar { display: block; }
.wait-bar i { display: block; height: 100%; background: var(--grad); width: var(--p, 0%); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.dice-board { padding: 40px 10px 10px; }
.dice-result { position: relative; height: 66px; margin: 0 18px 14px; }
.dice-bubble { position: absolute; bottom: 0; left: clamp(38px, var(--x, 50%), calc(100% - 38px)); transform: translateX(-50%); transition: left .7s var(--ease); background: var(--panel2); padding: 10px 16px; border-radius: 12px; font-family: var(--slab); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.dice-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--panel2); }
.dice-bubble.lose { color: var(--red); }
.dice-bubble.bump { animation: bubblePop .5s var(--spring); }
@keyframes bubblePop { 40% { transform: translateX(-50%) scale(1.2); } }
.dice-track { padding: 20px 18px; background: var(--bg2); border-radius: 999px; border: 1px solid var(--line); box-shadow: inset 0 4px 12px rgba(0, 0, 0, .3); }
.dice-labels { display: flex; justify-content: space-between; color: var(--dim); font-size: .8rem; font-weight: 700; padding: 10px 18px 0; }
#diceTarget { width: 100%; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--red) var(--t, 50%), var(--green) var(--t, 50%)); outline: 0; cursor: pointer; display: block; }
#diceTarget::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); border: 3px solid #fff; box-shadow: 0 6px 18px -4px rgba(195, 166, 255, .8); transition: transform .2s var(--spring); }
#diceTarget::-webkit-slider-thumb:hover { transform: scale(1.12); }
#diceTarget::-moz-range-thumb { width: 28px; height: 28px; border-radius: 10px; background: var(--purple); border: 3px solid #fff; }
.dice-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }

.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 470px; width: 100%; margin: 0 auto; perspective: 800px; }
.tile { aspect-ratio: 1; border-radius: 14px; background: var(--panel2); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25); transition: transform .2s var(--ease), background .2s; display: grid; place-items: center; font-size: 1.9rem; }
.tile:not(:disabled):hover { transform: translateY(-4px); background: var(--panel3); }
.tile:disabled { cursor: default; }
.mines-grid.idle .tile { opacity: .65; }
.tile.bomb { background: #3a2040; color: var(--red); animation: flipIn .45s var(--ease); box-shadow: none; }
.tile.bomb.hit { background: var(--red); color: var(--ink); animation: flipIn .45s var(--ease), shake .5s .45s; }
@keyframes flipIn { from { transform: rotateY(90deg) scale(.7); } }

.slot-machine, .ps-machine { max-width: 560px; margin: 0 auto; width: 100%; background: linear-gradient(160deg, #2c2360, #1a1e44); border-radius: 30px; padding: 22px; border: 1px solid rgba(195, 166, 255, .25); box-shadow: 0 40px 70px -35px rgba(195, 166, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .1); }
.jackpot { text-align: center; background: var(--ink); border-radius: 14px; padding: 10px; margin-bottom: 16px; border: 1px solid var(--line); }
.jackpot small { display: block; font-size: .7rem; letter-spacing: .25em; color: var(--muted); font-weight: 800; }
.jackpot b { font-family: var(--slab); font-size: 1.6rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; --h: 130px; }
.reel { height: var(--h); overflow: hidden; border-radius: 18px; background: linear-gradient(#fff, #ece8ff 50%, #fff); position: relative; transition: box-shadow .3s; }
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 16px 18px -8px rgba(20, 23, 58, .35), inset 0 -16px 18px -8px rgba(20, 23, 58, .35); border-radius: inherit; }
.strip { display: flex; flex-direction: column; }
.reel.spinning .strip { filter: blur(1.4px); }
.reel.land { animation: land .4s var(--spring); }
@keyframes land { 40% { transform: translateY(6px); } }
.reel.tease { box-shadow: 0 0 0 3px var(--green), 0 0 34px var(--green); }
.sym { height: var(--h); flex-shrink: 0; display: grid; place-items: center; font-size: 3.3rem; }
.sym.gem { color: #6aa8f0; } .sym.crown { color: #9a7ff0; } .sym.star { color: #f2c94c; } .sym.lemon { color: #e6c200; } .sym.bell { color: #f0a050; } .sym.heart { color: #ff7a95; }
.seven { font-family: var(--slab); font-size: 4.6rem; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #ff8fa3, #9a7ff0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seven.sm { font-size: 1.1rem; }
.slot-msg { text-align: center; margin-top: 18px; font-family: var(--slab); font-size: 1.4rem; min-height: 1.6em; }
.slot-msg.lose { color: var(--red); animation: shake .5s; }
.paytable { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border-radius: 12px; padding: 10px; border: 1px solid var(--line); }
.paytable div { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; font-size: .9rem; }
.paytable span { display: flex; gap: 6px; color: var(--muted); }
.paytable em { font-style: normal; font-weight: 800; color: var(--green); }
.paytable div:last-child em { color: var(--red); }

.ps-machine { max-width: 640px; background: linear-gradient(165deg, var(--a, #6741d9), #14173a 70%); }
.ps-banner { text-align: center; margin-bottom: 14px; }
.ps-banner b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 0 30px var(--a, #c3a6ff); line-height: 1; }
.ps-banner small { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: rgba(13, 16, 36, .6); border-radius: 18px; padding: 10px; border: 1px solid var(--line); }
.ps-col { display: grid; gap: 8px; border-radius: 12px; transition: box-shadow .3s; }
.ps-col.tease { box-shadow: 0 0 0 2px var(--green), 0 0 26px var(--green); }
.ps-cell { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); display: grid; place-items: center; }
.ps-cell img { width: 74%; transition: transform .2s; }
.ps-col.spinning .ps-cell img { filter: blur(1.5px); transform: translateY(4px); }
.ps-cell.scatter { background: radial-gradient(circle, rgba(255, 224, 138, .45), rgba(255, 255, 255, .05)); animation: scatterPop .6s var(--spring); }
@keyframes scatterPop { 50% { transform: scale(1.15); } }


.plinko { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / .92; margin: 0 auto; }
.pegs { position: absolute; inset: 0 0 46px 0; }
.peg { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #eef0ff; box-shadow: 0 0 6px rgba(255, 255, 255, .5); transition: transform .15s, background .15s; }
.bins { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; display: flex; gap: 3px; padding: 0 var(--pad, 0); }
.bin { flex: 1; min-width: 0; display: grid; place-items: center; border-radius: 7px; font-size: clamp(.55rem, 1.2vw, .78rem); font-weight: 800; color: var(--ink); background: var(--c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); overflow: hidden; }
.bin.hit { animation: binHit .45s var(--spring); }
@keyframes binHit { 40% { transform: translateY(8px); filter: brightness(1.3); } }
.ball { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--pink) 45%, #e64980); box-shadow: 0 0 14px var(--pink); z-index: 2; left: 0; top: 0; }

.keno-top { display: flex; justify-content: space-between; color: var(--muted); font-weight: 700; font-size: .9rem; margin-bottom: 12px; }
.keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.kn { aspect-ratio: 1; border-radius: 12px; background: var(--panel2); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); font-weight: 800; font-size: clamp(.8rem, 1.6vw, 1.05rem); transition: transform .2s var(--ease), background .2s; }
.kn:hover:not(:disabled) { transform: translateY(-3px); background: var(--panel3); }
.kn.sel { background: var(--grad); color: var(--ink); }
.kn.drawn { box-shadow: inset 0 0 0 3px var(--red); color: var(--red); animation: popIn .35s var(--spring); }
.kn.sel.drawn { box-shadow: inset 0 0 0 3px var(--green); color: var(--ink); }
.keno-pay { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.keno-pay span { flex: 1 0 auto; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: .75rem; color: var(--muted); }
.keno-pay b { display: block; color: var(--text); font-size: .85rem; }

.limbo-face { position: relative; width: min(340px, 80%); aspect-ratio: 1; margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.limbo-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--blue), var(--purple), var(--green), var(--blue)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); opacity: .5; }
.limbo-ring.spin { animation: spin 0.6s linear infinite; opacity: 1; }
.limbo-face.lose .limbo-ring { background: var(--red); opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.limbo-face b { font-family: var(--slab); font-size: clamp(2.6rem, 6vw, 4.4rem); font-variant-numeric: tabular-nums; }
.limbo-face.lose b { color: var(--red); animation: shake .5s; }
.limbo-face span { color: var(--muted); font-weight: 700; }

.bj-table { background: radial-gradient(ellipse at 50% 45%, #1e6b52, #124537 70%); gap: 18px; justify-content: space-between; }
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bj-label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.bj-label b { min-width: 40px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; text-align: center; }
.bj-felt { text-align: center; font-family: var(--display); letter-spacing: .2em; color: rgba(255, 255, 255, .25); font-size: clamp(.7rem, 1.4vw, 1rem); }
.hand { display: flex; justify-content: center; min-height: 130px; }
.bj-label.bust b { background: var(--red); color: var(--ink); }
.bj-label.win b { background: var(--green); color: var(--ink); }

@media (max-width: 600px) {
  .keno-grid { grid-template-columns: repeat(5, 1fr); }
  .hand { min-height: 96px; }
}

/* Wins (the games can actually pay out now) */
.dice-bubble.win { color: var(--green); }
.dice-history span.w, .crash-history span.w { color: var(--green); }
.tile.gem { background: #1b3a36; color: var(--green); animation: flipIn .45s var(--ease); box-shadow: none; }
.tile.gem.hit { background: var(--green); color: var(--ink); }
.tile.dim { opacity: .45; animation: none; }
.slot-msg.win { color: var(--green); animation: bubblePop .5s var(--spring); }
.limbo-face.win .limbo-ring { background: var(--green); opacity: .7; }
.limbo-face.win b { color: var(--green); }
.keno-pay span.on { background: var(--green); color: var(--ink); }
.keno-pay span.on b { color: var(--ink); }
.paytable small { font-size: .72rem; color: var(--muted); }

/* Footer: provably fair link + RTP */
.fair-link { display: inline-flex; align-items: center; color: inherit; font: inherit; }
.fair-link:hover { color: var(--text); }

/* pages.css */
.sport-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; scrollbar-width: none; }
.sport-tabs button { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 600; white-space: nowrap; transition: .2s; }
.sport-tabs button:hover { color: var(--text); }
.sport-tabs button.active { background: var(--grad); color: var(--ink); border-color: transparent; }
.sports-layout { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.matches { display: flex; flex-direction: column; gap: 10px; }
.match { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; animation: rise .5s var(--ease) both; }
.match-meta { font-size: .72rem; color: var(--dim); font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.match-meta .lv { color: #ff6b6b; display: flex; align-items: center; gap: 5px; }
.match-teams b { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: .95rem; padding: 2px 0; }
.match-teams em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.odds { display: flex; gap: 6px; }
.odd { min-width: 72px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); text-align: center; transition: .2s; }
.odd small { display: block; font-size: .65rem; color: var(--dim); font-weight: 700; }
.odd b { font-variant-numeric: tabular-nums; }
.odd:hover { border-color: var(--purple); }
.odd.sel { background: var(--grad); color: var(--ink); border-color: transparent; }
.odd.sel small { color: var(--ink); }
.odd.up b { color: var(--green); } .odd.down b { color: var(--red); }
.slip { position: sticky; top: 84px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.slip-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.slip-head h3 { font-family: var(--font); font-weight: 800; font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.count { background: var(--purple); color: var(--ink); font-weight: 800; font-size: .78rem; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; padding: 0 6px; }
.slip-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.slip-empty { color: var(--dim); font-size: .85rem; text-align: center; padding: 20px 10px; }
.slip-item { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; animation: popIn .35s var(--spring); }
.slip-item b { display: block; font-size: .88rem; }
.slip-item span { font-size: .75rem; color: var(--muted); }
.slip-item em { font-style: normal; font-weight: 800; color: var(--green); }
.slip-item button { color: var(--dim); }
.slip-item button:hover { color: var(--red); }
.slip-foot { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.slip-row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); }
.slip-row b { color: var(--green); font-variant-numeric: tabular-nums; }

.vip-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(142, 197, 255, .18), rgba(195, 166, 255, .24), rgba(159, 242, 196, .14)); border: 1px solid var(--line); border-radius: 26px; padding: 34px; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.vip-hero h1 { font-size: 2.2rem; margin: 10px 0 6px; }
.vip-badge { width: 140px; height: 140px; border-radius: 34px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 24px 50px -16px var(--purple); }
.vip-badge img { width: 100px; }
.progress { height: 14px; border-radius: 14px; background: var(--bg); overflow: hidden; margin: 18px 0 8px; }
.progress i { display: block; height: 100%; width: var(--p); background: var(--grad); background-size: 200% 100%; animation: gradmove 3s infinite, grow 1.4s var(--ease); border-radius: inherit; position: relative; overflow: hidden; transition: width .6s var(--ease); }
.progress i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px); animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 28px 0; } }
@keyframes grow { from { width: 0; } }
.progress-meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); font-weight: 600; gap: 10px; }
.progress-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.tier { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 14px; text-align: center; transition: transform .3s var(--ease); }
.tier:hover { transform: translateY(-4px); }
.tier img { width: 64px; height: 64px; margin: 0 auto 10px; }
.tier b { display: block; font-family: var(--slab); font-size: 1.1rem; }
.tier span { font-size: .78rem; color: var(--muted); }
.tier.done { opacity: .55; }
.tier.current { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 18px 40px -20px var(--blue); }
.tier.locked { border-style: dashed; }
.tier.locked img { filter: grayscale(.6) brightness(.8); }
.perks, .promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.perk { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: transform .3s var(--ease), border-color .3s; }
.perk:hover { transform: translateY(-4px); border-color: rgba(195, 166, 255, .35); }
.perk img { width: 60px; height: 60px; margin-bottom: 12px; }
.perk b { display: block; font-family: var(--slab); font-size: 1.15rem; margin-bottom: 4px; }
.perk p { color: var(--muted); font-size: .9rem; }

.pcard { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; transition: transform .4s var(--ease), box-shadow .4s; animation: rise .6s var(--ease) both; }
.pcard:nth-child(2) { animation-delay: .06s; } .pcard:nth-child(3) { animation-delay: .12s; } .pcard:nth-child(4) { animation-delay: .18s; } .pcard:nth-child(5) { animation-delay: .24s; } .pcard:nth-child(6) { animation-delay: .3s; }
.pcard::before { content: ''; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: var(--c); opacity: .14; filter: blur(30px); transition: opacity .4s; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -26px var(--c); }
.pcard:hover::before { opacity: .3; }
.pc-img { width: 72px; height: 72px; }
.pcard .tag { background: var(--panel2); color: var(--c); }
.pcard h3 { font-size: 1.35rem; }
.pcard p { color: var(--muted); font-size: .9rem; flex: 1; }
.pcard .btn { margin-top: 6px; }

footer { border-top: 1px solid var(--line); background: var(--bg2); padding: 48px 28px 26px; margin-top: 56px; }
footer > div { max-width: 1240px; margin-left: auto; margin-right: auto; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.foot-brand p { margin: 14px 0; font-size: .9rem; max-width: 380px; line-height: 1.55; }
.mail { display: flex !important; align-items: center; gap: 8px; color: var(--text); font-size: .9rem; padding: 4px 0; font-weight: 600; }
.mail i { color: var(--purple); }
.foot-grid h4 { font-family: var(--font); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.foot-grid > div > a:not(.brand):not(.mail) { display: block; color: var(--muted); padding: 5px 0; font-size: .9rem; transition: color .2s, transform .2s; }
.foot-grid > div > a:not(.brand):not(.mail):hover { color: var(--text); transform: translateX(4px); }
.foot-pay { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foot-pay img { width: 42px; height: 42px; transition: transform .3s var(--spring); }
.foot-pay i { font-size: 2.2rem; color: var(--muted); transition: transform .3s var(--spring), color .2s; }
.foot-pay img:hover, .foot-pay i:hover { transform: translateY(-4px) scale(1.08); color: var(--text); }
.age { font-size: .8rem; font-weight: 800; border: 2px solid var(--text); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--dim); }
.lang-btn-foot { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: .85rem; }
.lang-btn-foot i { font-size: .7rem; color: var(--dim); }

/* modals.css */
dialog.modal { margin: auto; border: 1px solid var(--line); padding: 0; background: var(--panel); color: var(--text); border-radius: 24px; width: min(470px, calc(100% - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
dialog.modal.wide { width: min(600px, calc(100% - 32px)); }
dialog.modal[open] { animation: modalIn .4s var(--ease); }
dialog::backdrop { background: rgba(8, 10, 25, .6); backdrop-filter: blur(6px); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.modal-head h3 { display: flex; gap: 10px; align-items: center; font-size: 1.25rem; margin-right: auto; }
.mh-ico { width: 30px; height: 30px; }
.secure { font-size: .75rem; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow-wrap: break-word; } /* long emails/addresses/hashes wrap inside the dialog */
.modal-body.center, .step.center { text-align: center; align-items: center; }
.modal-body.center { padding: 30px 24px 24px; }
.big-img { width: 110px; height: 110px; margin: 4px auto; }
.pane, .step { display: flex; flex-direction: column; gap: 12px; }
.step { animation: viewIn .4s var(--ease); }
button.back { align-self: flex-start; color: var(--muted); font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 6px; padding: 4px 0; transition: color .2s; }
.step.center button.back { align-self: center; }
button.back:hover { color: var(--text); }
.methods { display: flex; flex-direction: column; gap: 10px; }
.method { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); text-align: left; transition: .25s var(--ease); }
.method:hover { border-color: var(--purple); transform: translateX(4px); }
.method > img { width: 46px; height: 46px; }
.method div { flex: 1; min-width: 0; }
.method b { display: block; }
.method span:not(.stack) { font-size: .8rem; color: var(--muted); }
.method > i { color: var(--dim); transition: transform .25s; }
.method:hover > i { transform: translateX(4px); color: var(--text); }
.stack { display: flex; }
.stack img { width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--bg); border-radius: 50%; }
.coins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.coin { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; transition: .2s; }
.coin img { width: 34px; height: 34px; transition: transform .3s var(--spring); }
.coin:hover img { transform: translateY(-3px) rotate(-8deg); }
.coin.active { border-color: var(--purple); background: rgba(195, 166, 255, .12); }
.coins.sm .coin { padding: 8px 4px; }
.coins.sm .coin img { width: 28px; height: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: .85rem; display: flex; gap: 6px; align-items: center; color: var(--muted); transition: .2s; }
.opt-chip:hover { color: var(--text); }
.opt-chip.active { border-color: var(--purple); background: rgba(195, 166, 255, .12); color: var(--text); }
.addr { display: flex; gap: 8px; align-items: center; background: var(--panel); border-radius: 10px; padding: 8px 8px 8px 12px; }
.addr code { flex: 1; min-width: 0; font-size: .78rem; word-break: break-all; color: var(--text); font-family: ui-monospace, Consolas, monospace; }
.warn-note { font-size: .76rem; color: var(--yellow); line-height: 1.45; }
.co-rows { display: flex; flex-direction: column; gap: 6px; }
.co-rows div { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--muted); }
.co-rows b { color: var(--text); font-variant-numeric: tabular-nums; }
.co-status { display: flex; align-items: center; gap: 10px; background: rgba(142, 197, 255, .1); border: 1px solid rgba(142, 197, 255, .25); color: var(--blue); padding: 12px 14px; border-radius: 12px; font-size: .88rem; font-weight: 600; }
.co-status.bad { background: rgba(255, 143, 163, .1); border-color: rgba(255, 143, 163, .3); color: var(--red); }
.co-status.good { background: rgba(159, 242, 196, .1); border-color: rgba(159, 242, 196, .3); color: var(--green); }
.otp { display: flex; gap: 8px; justify-content: center; }
.otp input { width: 46px; height: 56px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); text-align: center; font-size: 1.4rem; font-weight: 800; outline: 0; transition: .2s; }
.otp input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .15); }
.otp.err input { border-color: var(--red); animation: shake .4s; }
.fine { font-size: .8rem; color: var(--dim); text-align: center; min-height: 1.2em; }
.fine.bad { color: var(--red); font-weight: 600; }
.fine.good { color: var(--green); font-weight: 600; }
.info-body { color: var(--muted); line-height: 1.6; }
.wd-top { display: flex; gap: 14px; align-items: center; background: var(--bg); border-radius: 14px; padding: 14px; }
.wd-top img { width: 52px; height: 52px; }
.wd-top b { display: block; }
.wd-top span { font-size: .85rem; color: var(--muted); }
.steps { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.steps li { display: flex; gap: 10px; align-items: center; color: var(--dim); font-size: .9rem; }
.steps li.ok { color: var(--green); }
.steps li.run { color: var(--text); }
.steps li.run i { color: var(--purple); }
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lang-grid .lang-opt { background: var(--bg); border: 1px solid var(--line); }
.lang-grid .lang-opt.active { border-color: var(--purple); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--bg); border-radius: 14px; cursor: pointer; }
.set-row > div > b { display: block; font-size: .92rem; }
.set-row > div > span { font-size: .78rem; color: var(--muted); }
.switch { -webkit-appearance: none; appearance: none; width: 46px; height: 26px; border-radius: 13px; background: var(--panel3); position: relative; cursor: pointer; transition: background .25s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s var(--spring); }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.tx-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.tx { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.tx > i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel2); color: var(--purple); }
.tx b { display: block; font-size: .9rem; }
.tx span { font-size: .75rem; color: var(--dim); }
.tx-amt { text-align: right; }
.tx-amt b { font-variant-numeric: tabular-nums; }
.tx-amt span { display: block; }

/* Provably fair dialog */
.fair-body { display: flex; flex-direction: column; gap: 14px; }
.fair-body #fairSeeds, .fair-body #fairPrev { display: flex; flex-direction: column; gap: 12px; }
.fair-body #fairSeeds[hidden], .fair-body #fairPrev[hidden] { display: none; }
.fair-body .inp input { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; font-weight: 600; }
.fair-rtp { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fair-rtp > div > div, .fair-rtp-head { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; padding: 8px 14px; font-size: .88rem; }
.fair-rtp-head { color: var(--dim); font-size: .75rem; text-transform: uppercase; font-weight: 700; background: var(--bg2); }
.fair-rtp > div > div:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.fair-rtp b { color: var(--green); text-align: right; }
.fair-rtp small { color: var(--muted); text-align: right; font-size: .85rem; }

/* widgets.css */
.chat-fab { position: fixed; right: 22px; bottom: 22px; width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: var(--ink); font-size: 1.45rem; display: grid; place-items: center; box-shadow: 0 16px 34px -10px var(--purple); z-index: 50; transition: transform .35s var(--spring); }
.chat-fab:hover { transform: scale(1.1) rotate(-10deg); }
.chat-fab .dot { top: 4px; right: 4px; }
.chat { position: fixed; right: 22px; bottom: 94px; width: min(370px, calc(100% - 32px)); height: 500px; max-height: calc(100vh - 120px); background: var(--panel); border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; z-index: 50; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); transform-origin: bottom right; transform: scale(.6) translateY(20px); opacity: 0; pointer-events: none; transition: .35s var(--ease); }
.chat.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { padding: 14px 14px 14px 16px; display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(142, 197, 255, .2), rgba(195, 166, 255, .22)); border-radius: 24px 24px 0 0; }
.chat-head > div { flex: 1; }
.chat-head b { display: block; }
.chat-head span:not(.av) { font-size: .78rem; color: var(--green); }
.av { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; position: relative; flex-shrink: 0; }
.av img { width: 34px; height: 34px; }
.av::after { content: ''; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--panel); }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: .9rem; line-height: 1.45; animation: popIn .35s var(--spring); }
.msg.bot { background: var(--panel2); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg.me { background: var(--grad); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 5px; font-weight: 500; }
.typing { display: flex; gap: 4px; padding: 14px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 30% { transform: translateY(-5px); opacity: .5; } }
.msg.bot:not(.typing) { white-space: pre-line; }
.chat-acts, .chat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; margin-top: -4px; animation: popIn .35s var(--spring); }
.chat-acts > * { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--grad); color: var(--ink); font-size: .8rem; font-weight: 700; text-decoration: none; transition: filter .2s, transform .15s; }
.chat-acts > *:hover { filter: brightness(1.08); }
.chat-chips button { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(195, 166, 255, .35); background: transparent; color: var(--purple); font-size: .78rem; font-weight: 600; transition: background .2s, color .2s, transform .15s; }
.chat-chips button:hover { background: rgba(195, 166, 255, .14); color: var(--text); }
.chat-acts > *:active, .chat-chips button:active { transform: scale(.96); }
.chat-acts > *:focus-visible, .chat-chips button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .msg, .chat-acts, .chat-chips, .typing span { animation: none; } .chat { transition: none; } }
#chatForm { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
#chatInput { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: 0; transition: .2s; }
#chatInput:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .15); }

.cookie { position: fixed; left: calc(var(--side) + 22px); bottom: 22px; z-index: 45; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); animation: toastIn .6s 1.6s var(--spring) both; transition: opacity .4s, transform .4s; }
.cookie.gone { opacity: 0; transform: translateY(30px); pointer-events: none; }
.cookie > i { font-size: 2rem; color: var(--yellow); }
.cookie p { font-size: .85rem; color: var(--muted); margin: 2px 0 10px; }
.cookie-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie .btn { padding: 8px 14px; font-size: .85rem; }

#toasts { position: fixed; top: 80px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 400; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--blue)); padding: 13px 16px; border-radius: 13px; max-width: 360px; font-size: .9rem; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6); animation: toastIn .45s var(--spring); transition: opacity .4s, transform .4s; }
.toast i { color: var(--c, var(--blue)); font-size: 1.1rem; }
.toast.lose { --c: var(--red); } .toast.win { --c: var(--green); } .toast.warn { --c: var(--yellow); } .toast.info { --c: var(--blue); }
.toast.out { opacity: 0; transform: translateX(40px); }
.toast-n { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c, var(--blue)) 22%, transparent); color: var(--c, var(--blue)); font-size: .78rem; font-weight: 700; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } }

.confetti { position: fixed; top: -14px; width: 10px; height: 14px; z-index: 450; pointer-events: none; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

/* auth.css */
body.authed [data-auth="guest"], body:not(.authed) [data-auth="user"] { display: none !important; }
.top-actions .auth-login, .top-actions .auth-register { padding: 9px 16px; white-space: nowrap; }

.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 240px); padding: 12px 0 40px; }
.auth-card { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); animation: rise .6s var(--ease) both; }
.auth-ico { width: 76px; height: 76px; align-self: center; filter: drop-shadow(0 16px 22px rgba(195, 166, 255, .3)); }
.auth-card h1 { text-align: center; font-size: 1.7rem; }
.auth-sub { text-align: center; color: var(--muted); font-size: .9rem; margin-top: -8px; }
.auth-card .inp input { font-weight: 600; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); cursor: pointer; line-height: 1.4; }
.auth-check input { accent-color: var(--purple); width: 18px; height: 18px; margin-top: 1px; flex: none; }
.auth-err { background: rgba(255, 143, 163, .12); color: var(--red); border-radius: 10px; padding: 10px 12px; font-size: .85rem; }
.auth-alt { text-align: center; color: var(--muted); font-size: .88rem; }
.auth-alt a { color: var(--purple); font-weight: 700; }

@media (max-width: 900px) { .top-actions .auth-login { display: none; } }
@media (max-width: 600px) {
  .auth-card { padding: 20px; }
  .auth-card .field-row { grid-template-columns: 1fr; }
  .top-actions .auth-register { padding: 8px 12px; font-size: .85rem; }
}

/* autobet.css */
/* Auto-bet panel (core/autobet.js) */
.auto-panel { display: flex; flex-direction: column; gap: 14px; }
.auto-panel[hidden], .auto-custom[hidden] { display: none; }
.auto-panel .inp select { min-width: 0; }
.auto-panel .inp select + input { max-width: 70px; text-align: right; }
.auto-turbo { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); cursor: pointer; }
.auto-turbo input { accent-color: var(--purple); width: 16px; height: 16px; }
.auto-status { font-size: .82rem; color: var(--muted); text-align: center; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.controls [hidden] { display: none !important; }

/* Fullscreen / theater mode (core/theater.js) */
.game-head .gh-full { margin-left: auto; }
.game-head .live-pill + .gh-full { margin-left: 8px; }
.game-wrap:fullscreen { background: var(--bg); padding: 24px; overflow: auto; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; align-content: center; }
.view.theater .game-wrap { position: fixed; inset: 0; z-index: 60; border-radius: 0; background: var(--bg); overflow: auto; }
@media (max-width: 900px) { .game-wrap:fullscreen { grid-template-columns: 1fr; } }
/* Narrow control columns: let long labels and option names wrap instead of being cut off. */
.auto-panel .field label { white-space: normal; overflow: visible; }
.auto-panel .field label span + span { font-weight: 500; }

/* cards.css */
/* Card tables (blackjack, baccarat, hi-lo), the video poker cabinet and the cards themselves (core/cards.js).
   Felt = layered light + vignette + a fine feTurbulence grain (data: SVG, allowed by img-src) over an indigo base. */
:root {
  --felt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cb-ink: #171a45;
}

/* ---------- Cards ---------- */
.playing-card { --cw: 88px; width: var(--cw); height: calc(var(--cw) * 1.4); flex-shrink: 0; display: block; }
.pc { --cw: 92px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); flex-shrink: 0; perspective: 900px; }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--ease); }
.pc.down .pc-in { transform: rotateY(180deg); }
.pc-f, .pc-b { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: calc(var(--cw) * .08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 10px 18px -6px rgba(0, 0, 0, .55); transition: box-shadow .3s, filter .3s; }
.pc-b { transform: rotateY(180deg); }
.pc .playing-card { width: 100%; height: 100%; }
.pc-ghost { position: fixed; z-index: 60; pointer-events: none; margin: 0 !important; rotate: none !important; }

/* Brand card back: white border, indigo field, purple/blue lattice, gradient frame, H medallion. */
.card-back { position: relative; width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; overflow: hidden;
  border: calc(var(--cw, 92px) * .045) solid #f4f2ff;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--cw, 92px) * .2), rgba(195, 166, 255, .65) calc(var(--cw, 92px) * .2 + .5px) calc(var(--cw, 92px) * .215), transparent calc(var(--cw, 92px) * .215 + .5px)),
    repeating-linear-gradient(45deg, rgba(195, 166, 255, .26) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(142, 197, 255, .22) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 30% 20%, #4b3aa8, transparent 60%),
    linear-gradient(150deg, #3a2c94, #1e2066 55%, #12395a);
  box-shadow: inset 0 0 0 calc(var(--cw, 92px) * .03) #1d1f5c, inset 0 0 0 calc(var(--cw, 92px) * .045) rgba(142, 197, 255, .55); }
.card-back b { width: calc(var(--cw, 92px) * .38); height: calc(var(--cw, 92px) * .38); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2a2f7a, var(--cb-ink)); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 4px 10px rgba(0, 0, 0, .4);
  font-family: var(--slab); font-weight: 700; font-size: calc(var(--cw, 92px) * .24); line-height: 1;
  color: var(--purple); }

/* Hands: overlapped, each card resting at a slight angle. */
.hand { display: flex; justify-content: center; align-items: flex-start; min-height: calc(var(--cw, 92px) * 1.4); }
.hand .pc + .pc { margin-left: calc(var(--cw) * -.42); }
.hand .pc:nth-child(odd) { rotate: -2deg; } .hand .pc:nth-child(even) { rotate: 2.5deg; } .hand .pc:nth-child(3n) { rotate: -.5deg; }
.hand.win .pc-f, .vp-hand.win .vp-slot.held .pc-f, .hilo-spot.win .pc-f { box-shadow: 0 0 0 2px var(--green), 0 0 26px -2px rgba(159, 242, 196, .75), 0 10px 18px -6px rgba(0, 0, 0, .55); }
.hand.lose .pc-f, .hilo-spot.lose .pc-f { filter: brightness(.86) saturate(.85); }
.hilo-spot.lose .pc-f { box-shadow: 0 0 0 2px var(--red), 0 0 24px -2px rgba(255, 143, 163, .7); filter: none; }

/* ---------- Table ---------- */
.ct-stage { padding: 20px; background: none; }
.ctable { --felt1: #2b3192; --felt2: #121650; --rail1: #2d3372; --rail2: #0a0c26; --ink-mark: rgba(255, 224, 138, .82);
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 540px; padding: 26px 22px 30px; border: 14px solid transparent; border-radius: 34px;
  background:
    radial-gradient(ellipse 65% 50% at 50% 26%, rgba(255, 255, 255, .11), transparent 70%) padding-box,
    radial-gradient(ellipse 110% 95% at 50% 40%, transparent 52%, rgba(3, 4, 20, .55)) padding-box,
    var(--felt-grain) padding-box,
    radial-gradient(ellipse at 50% 35%, var(--felt1), var(--felt2) 78%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 18%) border-box,
    linear-gradient(180deg, var(--rail1), var(--rail2)) border-box;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 35%, rgba(255, 255, 255, .12)), 0 30px 60px -28px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 12px 30px -10px rgba(0, 0, 0, .6); }
/* Gradient trim inlaid in the felt, just inside the rail. */
.ctable::before { content: ''; position: absolute; inset: 7px; border-radius: inherit; padding: 1.5px; background: var(--grad); opacity: .5; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ctable > * { position: relative; z-index: 1; }
.ct-bj { border-radius: 30px 30px 50% 50% / 30px 30px 26% 26%; padding-bottom: 46px; }
.ct-bac { --felt1: #1d3f93; --felt2: #0b1a4b; --rail1: #263a78; --rail2: #080d28; }
.ct-hilo { --felt1: #3a2a92; --felt2: #160f4a; --rail1: #352a78; --rail2: #0c0826; border-radius: 40px; }

/* Printed markings */
.ct-marks { display: block; width: 100%; max-width: 620px; height: auto; overflow: visible; pointer-events: none; }
.ct-marks text { font-family: var(--slab); font-weight: 700; letter-spacing: .14em; }
.ct-big { font-size: 25px; fill: var(--ink-mark); }
.ct-small { font-size: 14px; fill: rgba(255, 255, 255, .62); letter-spacing: .2em; }
.ct-tiny { font-family: var(--font) !important; font-size: 11px; fill: rgba(255, 255, 255, .38); letter-spacing: .3em !important; }
.ct-line { fill: none; stroke: rgba(255, 224, 138, .35); stroke-width: 1.5; }
.ct-note { font-size: .74rem; letter-spacing: .12em; color: rgba(255, 255, 255, .45); text-align: center; text-transform: uppercase; font-weight: 600; }
.ctable .bj-label { gap: 8px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.ctable .bj-label b { min-width: 42px; padding: 4px 12px; font-size: .95rem; letter-spacing: 0; background: rgba(6, 8, 30, .55); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: .3s; }
.ctable .bj-label.win b { background: var(--green); color: var(--ink); border-color: transparent; box-shadow: 0 0 18px rgba(159, 242, 196, .6); }
.ctable .bj-label.bust b { background: var(--red); color: var(--ink); border-color: transparent; }

/* Shoe (dealer's right): a dark dealing shoe seen from above at an angle, a stack of backs inside, the red cut card,
   and the next card peeking out of the mouth. Discard tray (dealer's left), deck stacks. */
.shoe, .tray { position: absolute !important; top: 18px; z-index: 2 !important; }
.shoe { right: 22px; width: 104px; height: 74px; border-radius: 10px 22px 10px 10px; transform: perspective(300px) rotateX(18deg) rotate(-8deg);
  background: linear-gradient(160deg, #474fa6, #232870 40%, #0d0f33); border: 1px solid rgba(195, 166, 255, .45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -10px 16px rgba(0, 0, 0, .5), 0 16px 24px -8px rgba(0, 0, 0, .75); }
.shoe .shoe-cards { position: absolute; left: 12px; right: 12px; top: 9px; height: 30px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #f4f2ff 0 1.5px, #b9b5e3 1.5px 3px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55), 0 0 0 2px #10123a; }
.shoe .shoe-cut { position: absolute; top: 6px; left: 58%; width: 3px; height: 36px; border-radius: 1px; background: #ff5d7a; box-shadow: 0 0 6px rgba(255, 93, 122, .6); }
.shoe i { position: absolute; left: -14px; bottom: 6px; width: 54px; height: 32px; border-radius: 4px; z-index: 1; rotate: -4deg;
  background: repeating-linear-gradient(45deg, rgba(195, 166, 255, .3) 0 1px, transparent 1px 6px), linear-gradient(150deg, #3a2c94, #1e2066); border: 2px solid #f4f2ff; box-shadow: 0 5px 10px rgba(0, 0, 0, .55); }
.tray { left: 18px; width: 64px; height: 76px; rotate: 8deg; border-radius: 9px; background: linear-gradient(170deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .03), 0 10px 18px -8px rgba(0, 0, 0, .6); }
.tray::after { content: ''; position: absolute; inset: 7px 9px; border-radius: 5px; opacity: 0; transition: opacity .4s .3s;
  background: repeating-linear-gradient(45deg, rgba(195, 166, 255, .3) 0 1px, transparent 1px 6px), linear-gradient(150deg, #3a2c94, #1e2066); border: 2px solid #f4f2ff;
  box-shadow: 1px 1px 0 #d8d5f2, 2px 2px 0 #f4f2ff, 3px 3px 0 #d8d5f2, 4px 4px 0 #f4f2ff, 5px 6px 10px rgba(0, 0, 0, .5); }
.tray.has::after { opacity: 1; }
.deck-stack { --cw: 92px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .08); flex-shrink: 0;
  border: calc(var(--cw) * .045) solid #f4f2ff;
  background: repeating-linear-gradient(45deg, rgba(195, 166, 255, .26) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, rgba(142, 197, 255, .22) 0 1px, transparent 1px 7px), linear-gradient(150deg, #3a2c94, #1e2066 55%, #12395a);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #1d1f5c, 1px 1px 0 #cfcbee, 2px 2px 0 #f4f2ff, 3px 3px 0 #cfcbee, 4px 4px 0 #f4f2ff, 5px 5px 0 #cfcbee, 6px 6px 0 #f4f2ff, 7px 7px 0 #cfcbee, 8px 9px 16px rgba(0, 0, 0, .55); }
.deck-stack::after { content: 'H'; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--cw) * .38); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2a2f7a, var(--cb-ink)); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); color: var(--purple); font: 700 calc(var(--cw) * .24) var(--slab); }

/* Bet circle + chips */
.bet-spot { position: relative; width: 74px; height: 74px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255, 224, 138, .55); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .12), inset 0 0 0 6px rgba(255, 224, 138, .25); }
/* Table chips (.tchip; core/cards.js chipBet). One colour per denomination, edge stripes, inner ring, value. */
.tchip { --c: #7f5af0; --e: #fff; position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 0; padding: 0;
  background: radial-gradient(circle, var(--c) 0 47%, var(--e) 48% 50%, var(--c) 51% 62%, transparent 63%), repeating-conic-gradient(var(--e) 0 15deg, var(--c) 15deg 45deg);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .35), inset 0 -3px 4px rgba(0, 0, 0, .3), 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 8px 14px rgba(0, 0, 0, .45); }
.tchip b { font-size: .8rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); letter-spacing: -.02em; }
.tchip.c5 { --c: #e5486a; } .tchip.c10 { --c: #3b7bf0; } .tchip.c15 { --c: #12a3a0; } .tchip.c25 { --c: #1f9d5c; }
.tchip.c50 { --c: #7c4ddb; } .tchip.c100 { --c: #23233f; --e: #f2c94c; } .tchip.c100 b { color: #f2c94c; }
.tchip-fly { position: fixed; z-index: 70; pointer-events: none; margin: 0; }
.tstacks { display: flex; gap: 10px; align-items: flex-end; }
.tstack { position: relative; display: grid; }
.tstack .tchip { grid-area: 1 / 1; translate: 0 calc(var(--i, 0) * -5px); animation: chipIn .35s var(--spring) both; }
@keyframes chipIn { from { transform: translateY(30px) scale(.6); opacity: 0; } }
.bet-spot.win { border-color: var(--green); box-shadow: 0 0 22px rgba(159, 242, 196, .55), inset 0 0 0 6px rgba(159, 242, 196, .2); }
.bet-spot.lose .tchip { opacity: .35; transition: opacity .6s .3s; }
.bet-spot.empty { visibility: hidden; }

/* Rack + action bar under the table */
.chip-rack { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-top: 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .15)); border: 1px solid var(--line); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35); }
.chip-rack .tchip { cursor: pointer; transition: transform .18s var(--spring), filter .2s; }
.chip-rack .tchip:hover { transform: translateY(-5px) scale(1.06); }
.chip-rack .tchip:active { transform: translateY(1px) scale(.96); }
.chip-rack .tchip:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.chip-rack.locked .tchip { filter: grayscale(.7) brightness(.7); cursor: not-allowed; transform: none; }
.rack-note { flex-basis: 100%; text-align: center; color: var(--dim); font-size: .74rem; margin-top: -4px; }
.ct-actions { margin-top: 14px; }
.ct-bet-btns, .ct-play-btns { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr; gap: 10px; align-items: stretch; }
.ct-play-btns { display: none; }
.ct-actions.playing .ct-bet-btns { display: none; }
.ct-actions.playing .ct-play-btns { display: grid; }
.ct-actions .btn { height: 50px; padding: 0 10px; gap: 8px; white-space: nowrap; }
.ct-actions .ct-main { height: 58px; margin-top: -4px; font-size: 1.08rem; }
.ct-actions .ct-wide { grid-column: span 2; }
.ct-total { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 600; }
.ct-total b { margin-left: 6px; color: #fff; letter-spacing: 0; font-size: .95rem; }
.ct-foot { margin-top: 12px; text-align: center; color: var(--dim); font-size: .8rem; }
.game-wrap.solo { grid-template-columns: 1fr; }
.game-wrap.solo:fullscreen { grid-template-columns: 1fr; }
.game-wrap.solo .ct-stage { display: flex; flex-direction: column; }

/* Blackjack */
.ct-bj .bj-side { gap: 10px; }
.bj-hands { display: flex; justify-content: center; gap: 34px; min-height: calc(var(--cw, 92px) * 1.4 + 40px); }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; border: 1.5px solid transparent; transition: .3s; }
.bj-hands.split .bj-hand { border-color: rgba(255, 255, 255, .08); }
.bj-hand.active { border-color: rgba(255, 224, 138, .7) !important; background: rgba(255, 224, 138, .05); box-shadow: 0 0 26px -6px rgba(255, 224, 138, .45); }
.bj-stake:empty { display: none; }
.bj-stake .tchip { width: 38px; height: 38px; } .bj-stake .tchip b { font-size: .62rem; }
.ct-dealer { margin-top: 8px; }
.ct-bj .ct-marks { margin: -4px 0; }

/* Baccarat */
.bac-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 640px; margin-top: 64px; }
.bac-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px 16px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .16); background: rgba(4, 8, 32, .18); transition: .35s; }
.bac-box.player { border-color: rgba(142, 197, 255, .4); } .bac-box.banker { border-color: rgba(255, 143, 163, .4); }
.bac-box.player .bj-label span { color: var(--blue); } .bac-box.banker .bj-label span { color: var(--red); }
.bac-box.win { background: rgba(159, 242, 196, .08); border-color: var(--green); box-shadow: 0 0 30px -6px rgba(159, 242, 196, .45); }
.bac-box.win .bj-label b { background: var(--green); color: var(--ink); }
.bac-box.lose .pc-f { filter: brightness(.86) saturate(.85); }
.bac-box .hand .pc + .pc { margin-left: calc(var(--cw) * -.3); }
.pc.third { rotate: 90deg !important; margin: 0 calc(var(--cw) * .1) 0 calc(var(--cw) * -.05) !important; top: calc(var(--cw) * .2); }
.bac-zones { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 10px; width: 100%; max-width: 640px; }
.bac-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 10px 6px; border-radius: 16px;
  border: 1.5px solid rgba(255, 224, 138, .4); background: rgba(255, 255, 255, .02); transition: .25s; }
.bac-zone b { font-family: var(--slab); font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; }
.bac-zone small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 224, 138, .8); text-transform: uppercase; text-align: center; }
.bac-zone.player b { color: var(--blue); } .bac-zone.banker b { color: var(--red); } .bac-zone.tie b { color: var(--green); }
.bac-zone.tie { border-radius: 50% / 40%; }
.bac-zone:hover { background: rgba(255, 255, 255, .05); }
.bac-zone.active { border-color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 22px rgba(255, 255, 255, .06); }
.bac-zone.win { border-color: var(--green); box-shadow: 0 0 28px -4px rgba(159, 242, 196, .55); }
.bac-chip { position: absolute; top: -14px; right: -6px; display: grid; }
.bac-chip .tchip { width: 40px; height: 40px; }
.bac-chip .tchip b { font-size: .6rem; }

/* Baccarat: variant switch, felt plaque, chip buttons, scoreboard (counts, bead plate, big road) */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.seg button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border-radius: 10px; font-weight: 700; color: var(--muted); transition: .2s; }
.seg button small { font-size: .7rem; color: var(--dim); font-weight: 600; text-align: center; }
.seg button.active { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--purple); }
.seg button.active small { color: var(--yellow); }
.chip-btns { display: grid; grid-template-columns: 1fr 1fr .7fr .7fr; gap: 6px; }
.chip-btns .btn { height: 40px; padding: 0 6px; gap: 6px; font-size: .84rem; }
.bac-plaque { position: absolute !important; top: 22px; left: 50%; translate: -50% 0; padding: 6px 18px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 224, 138, .45); background: rgba(4, 6, 26, .35); box-shadow: inset 0 0 12px rgba(255, 224, 138, .08); }
.bac-plaque b { font-family: var(--slab); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mark); }
.ct-bac.nc { --felt1: #1c4a8a; --felt2: #0a2146; }
.ct-bac .bac-zone .bac-chip .tstacks { gap: 4px; }
.ct-bac .bac-chip .tchip { width: 40px; height: 40px; }
.ct-bac .bac-chip .tchip b { font-size: .6rem; }
.bac-board { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #0d1034, #080a24); border: 1px solid var(--line); box-shadow: inset 0 2px 14px rgba(0, 0, 0, .5); }
.bac-counts { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; font-weight: 700; }
.bac-counts span { display: flex; align-items: center; gap: 7px; }
.bac-counts i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; color: var(--ink); }
.bac-counts .p i { background: var(--blue); } .bac-counts .b i { background: var(--red); } .bac-counts .t i { background: var(--green); }
.bac-counts small { margin-left: auto; color: var(--dim); font-weight: 600; font-size: .78rem; }
.bac-grids { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.bac-grids > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bac-grids small { color: var(--dim); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.bead, .bigroad { --cell: 22px; display: grid; grid-template-rows: repeat(6, var(--cell)); grid-auto-columns: var(--cell); grid-auto-flow: column; gap: 2px; padding: 4px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(var(--cell) + 2px)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(var(--cell) + 2px)), #f4f2ff08;
  min-height: calc(6 * var(--cell) + 18px); overflow-x: auto; scrollbar-width: thin; }
.bead i { border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; color: var(--ink); }
.bead .p { background: var(--blue); } .bead .b { background: var(--red); } .bead .t { background: var(--green); }
.bead i.new, .bigroad i:last-child { animation: popIn .4s var(--spring); }
.bigroad { grid-auto-flow: unset; }
.bigroad i { position: relative; border-radius: 50%; border: 3px solid; }
.bigroad .p { border-color: var(--blue); } .bigroad .b { border-color: var(--red); }
.bigroad em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .58rem; font-weight: 800; color: var(--green); }
.bigroad em::before { content: ''; position: absolute; width: 140%; height: 2.5px; background: var(--green); rotate: -45deg; border-radius: 2px; }

/* Hi-Lo */
.ct-hilo { justify-content: center; gap: 4px; }
.hilo-arc { max-width: 520px; }
.hilo-board { display: flex; align-items: center; justify-content: center; gap: 40px; }
.hilo-spot { --cw: 130px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .08); outline: 2px dashed rgba(255, 224, 138, .35); outline-offset: 8px; }
.hilo-spot .pc { --cw: 130px; }
.hilo-deck { --cw: 100px; }
.hilo-mult { margin: 6px 0 2px; padding: 4px 18px; border-radius: 999px; background: rgba(4, 6, 26, .45); border: 1px solid rgba(255, 224, 138, .3);
  font-family: var(--slab); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; transition: .3s; }
.hilo-mult.lose { color: var(--red); border-color: var(--red); }
.hilo-mult.win { color: var(--ink); background: var(--green); border-color: transparent; box-shadow: 0 0 24px rgba(159, 242, 196, .55); }
.hilo-hist { display: flex; gap: 6px; overflow-x: auto; width: 100%; padding: 18px 4px 4px; min-height: 96px; align-items: flex-end; justify-content: safe center; }
.hilo-hist .h { position: relative; flex-shrink: 0; animation: popIn .35s var(--spring); }
.hilo-hist .playing-card { --cw: 50px; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, .4); }
.hilo-hist .h i { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: .72rem; color: rgba(255, 224, 138, .8); }
.hilo-hist .h.bad .playing-card { outline: 3px solid var(--red); }
.hilo-guess { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hilo-guess .btn { flex-direction: column; gap: 2px; height: auto; padding: 10px 6px; }
.hilo-guess .btn small { font-size: .72rem; font-weight: 600; opacity: .8; }

/* ---------- Video poker cabinet ---------- */
.vp-cab { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 26px;
  background: linear-gradient(180deg, #262c5e, #12153a 40%, #0c0e28); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px #090b20, 0 0 0 5px color-mix(in srgb, var(--tint) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -20px 40px rgba(0, 0, 0, .4), 0 30px 60px -26px rgba(0, 0, 0, .9); }
.vp-marquee { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 12px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(90deg, #1c2a6e, #3b2a8a 50%, #134a5e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -10px 20px rgba(0, 0, 0, .3); }
.vp-marquee b { font-family: var(--slab); font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .06em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(195, 166, 255, .45)); }
.vp-marquee small { font-family: var(--display); font-size: 1rem; letter-spacing: .1em; color: var(--yellow); }
.vp-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #0b1440, #070b28); border: 1px solid rgba(142, 197, 255, .2); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .6); font-size: .84rem; }
.vp-pays div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: 6px; transition: .25s; }
.vp-pays span { color: #c9cff6; font-weight: 600; text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; }
.vp-pays b { color: var(--yellow); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255, 224, 138, .35); }
.vp-pays .hit { background: var(--yellow); box-shadow: 0 0 16px rgba(255, 224, 138, .5); }
.vp-pays .hit span, .vp-pays .hit b { color: var(--ink); text-shadow: none; }
.vp-screen { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 30px 16px 16px; border-radius: 16px; min-height: 290px;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255, 255, 255, .09), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .5)), var(--felt-grain), radial-gradient(ellipse at 50% 35%, #1b3b8a, #0a1640 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 6px 24px rgba(0, 0, 0, .6); }
.vp-deck { position: absolute !important; --cw: 46px; top: 12px; left: 14px; }
.vp-hand { display: flex; justify-content: center; gap: 12px; }
.vp-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vp-slot .pc { --cw: 96px; transition: translate .2s var(--ease); }
.vp-slot.can { cursor: pointer; }
.vp-slot.can:hover .pc { translate: 0 -4px; }
.vp-slot .tag { font-size: .68rem; font-weight: 800; letter-spacing: .14em; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--dim); visibility: hidden; }
.vp-slot.held .tag { visibility: visible; background: var(--yellow); color: var(--ink); box-shadow: 0 0 12px rgba(255, 224, 138, .5); }
.vp-slot.held .pc { translate: 0 -10px; }
.vp-slot.held .pc-f { box-shadow: 0 0 0 2px var(--yellow), 0 10px 18px -6px rgba(0, 0, 0, .55); }
.vp-hand.lose .pc-f { filter: brightness(.9) saturate(.9); }
.vp-msg { align-self: center; text-align: center; font-family: var(--slab); font-size: 1.25rem; font-weight: 700; min-height: 1.7em; padding: 2px 18px; border-radius: 999px; }
.vp-msg.win { color: var(--ink); background: var(--green); box-shadow: 0 0 24px rgba(159, 242, 196, .5); }
.vp-msg.lose { color: rgba(255, 255, 255, .55); }

@media (max-width: 900px) {
  .ctable { min-height: 480px; }
}
@media (max-width: 600px) {
  .ct-stage { padding: 10px; }
  .ctable { min-height: 0; padding: 16px 10px 22px; border-width: 9px; border-radius: 24px; gap: 8px; }
  .ct-bj { border-radius: 24px 24px 50% 50% / 24px 24px 18% 18%; padding-bottom: 30px; }
  .ctable::before { inset: 4px; }
  .pc { --cw: 62px; }
  .hand { min-height: calc(62px * 1.4); }
  .tray { transform: scale(.66); transform-origin: top left; top: 8px; left: 8px; }
  .ct-dealer { margin-top: 30px; }
  .ct-big { font-size: 28px; } .ct-small { font-size: 18px; } .ct-tiny { font-size: 15px; }
  .bet-spot { width: 60px; height: 60px; } .bet-spot .tchip { width: 44px; height: 44px; }
  .chip-rack { gap: 5px; padding: 10px 6px; border-radius: 22px; flex-wrap: nowrap; } .chip-rack .tchip { width: 42px; height: 42px; } .chip-rack .tchip b { font-size: .66rem; }
  .rack-note { display: none; }
  .game-wrap.solo { min-height: 0; }
  .ct-bj { min-height: 430px; }
  .ct-bj .ct-dealer { margin-top: 58px; }
  .ct-bet-btns, .ct-play-btns { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ct-actions .ct-main { grid-column: 1 / -1; order: -1; margin: 0; }
  .ct-actions .btn { height: 44px; font-size: .86rem; }
  .bj-hands { gap: 8px; } .bj-hand { padding: 4px; }
  .shoe { transform: perspective(300px) rotateX(18deg) rotate(-8deg) scale(.66); transform-origin: top right; }
  .bac-hands { margin-top: 44px; gap: 8px; }
  .bac-box { padding: 8px 4px 12px; }
  .bac-box .pc { --cw: 50px; }
  .bac-zones { gap: 6px; }
  .bac-zone { min-height: 72px; padding: 8px 4px; }
  .bac-zone b { font-size: .86rem; letter-spacing: .06em; }
  .bac-zone small { font-size: .6rem; }
  .bac-chip { top: auto; bottom: -8px; right: -6px; }
  .bac-chip .tchip { width: 26px; height: 26px; }
  .bac-chip .tchip b { display: none; }
  .bac-plaque { position: static !important; translate: none; order: 9; margin: -2px auto 0; padding: 4px 12px; } .bac-plaque b { font-size: .64rem; letter-spacing: .1em; }
  .bac-hands { margin-top: 52px; }
  .bac-grids { grid-template-columns: 1fr; }
  .bac-grids > div:first-child { display: none; }
  .bead, .bigroad { --cell: 15px; min-height: 0; }
  .chip-btns { grid-template-columns: repeat(4, 1fr); }
  .hilo-board { gap: 22px; }
  .hilo-spot, .hilo-spot .pc { --cw: 100px; }
  .hilo-deck { --cw: 70px; }
  .hilo-mult { font-size: 1.4rem; }
  .vp-cab { padding: 10px; gap: 10px; border-radius: 18px; }
  .vp-pays { padding: 8px; gap: 1px 8px; font-size: .74rem; }
  .vp-pays div { padding: 2px 4px; }
  .vp-pays span { font-size: .64rem; letter-spacing: 0; }
  .vp-screen { padding: 62px 6px 12px; min-height: 0; }
  .vp-hand { gap: 5px; }
  .vp-slot .pc { --cw: min(56px, calc((100vw - 92px) / 5)); }
  .vp-deck { --cw: 30px; top: 8px; left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-in, .tchip, .tstack .tchip, .hilo-hist .h, .bead i, .bigroad i { transition: none; animation: none; }
}

/* arcade.css */
/* Arcade auto-bet: game settings (risk, difficulty, auto cashout, …) stay above the auto panel, the note last. */
:is(#view-dice, #view-limbo, #view-plinko, #view-keno, #view-crash, #view-play, #view-chicken) .controls > .auto-panel { order: 1; }
:is(#view-dice, #view-limbo, #view-plinko, #view-keno, #view-crash, #view-play, #view-chicken) .controls > .ctrl-note { order: 2; }

/* machines.css */
/* Mines and Hassik Slots (games/mines.js, games/slots.js). Loaded after games.css and overrides it. */

/* ===== Mines ===== */
#view-mines .stage { gap: 16px; align-items: center; background: radial-gradient(ellipse at 50% 35%, rgba(159, 242, 196, .08), transparent 62%), radial-gradient(circle at 50% 110%, rgba(195, 166, 255, .1), transparent 60%); }
.mines-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.mines-hud > div { background: rgba(13, 16, 36, .7); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.mines-hud small { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mines-hud b { display: block; margin-top: 2px; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mines-hud .mh-mult { border-color: rgba(159, 242, 196, .25); }
.mines-hud .mh-mult b { color: var(--green); text-shadow: 0 0 18px rgba(159, 242, 196, .45); }
.mines-hud .mh-profit b { color: var(--yellow); }

.mines-board { position: relative; width: 100%; max-width: 520px; padding: 14px; border-radius: 24px; background: linear-gradient(180deg, #161b3d, #0e1230); border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .85); }
#view-mines .mines-grid { max-width: none; gap: 10px; perspective: 900px; }
#view-mines .mines-grid.lost { animation: shake .45s .15s; }

#view-mines .tile { position: relative; border-radius: 12px; font-size: 0; background: linear-gradient(180deg, #333c7a, #262d62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 5px 0 #161a3e, 0 9px 14px -6px rgba(0, 0, 0, .7); transition: transform .14s var(--ease), box-shadow .14s, background .2s, opacity .3s; transform-style: preserve-3d; }
#view-mines .tile::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(195, 166, 255, .14), transparent 70%); pointer-events: none; }
#view-mines .tile:not(:disabled):hover { transform: translateY(-3px); background: linear-gradient(180deg, #414b93, #2f3772); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 0 #161a3e, 0 0 0 2px rgba(195, 166, 255, .35), 0 16px 26px -10px rgba(195, 166, 255, .55); }
#view-mines .tile:not(:disabled):active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #161a3e; transition-duration: .05s; }
#view-mines .tile:disabled:not(.gem):not(.bomb):not(.sel) { opacity: .75; }
#view-mines .tile.wait { animation: tileWait .5s ease-in-out infinite alternate; }
@keyframes tileWait { to { background: linear-gradient(180deg, #4a54a6, #353e82); transform: scale(.94); } }
#view-mines .tile img { width: 66%; pointer-events: none; }

/* Auto: tiles picked for the next rounds */
#view-mines .tile.sel:not(.gem):not(.bomb) { background: linear-gradient(180deg, #7b5cf0, #5a3fd0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 5px 0 #34237f, 0 0 22px -4px rgba(195, 166, 255, .8); opacity: 1; }
#view-mines .tile.sel:not(.gem):not(.bomb)::before { inset: 34%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, .25) 32%, transparent 70%); }

/* Revealed */
#view-mines .tile.gem, #view-mines .tile.bomb { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); animation: tileFlip .45s var(--ease) both; }
#view-mines .tile.gem::before, #view-mines .tile.bomb::before { display: none; }
#view-mines .tile.gem { background: radial-gradient(circle at 50% 45%, rgba(159, 242, 196, .28), transparent 68%), #0f2a2c; }
#view-mines .tile.gem.hit { box-shadow: inset 0 0 0 2px rgba(159, 242, 196, .55), 0 0 26px -6px rgba(159, 242, 196, .7); }
#view-mines .tile.gem img { filter: drop-shadow(0 0 10px rgba(159, 242, 196, .55)); animation: gemPop .5s .12s var(--spring) both; }
#view-mines .tile.bomb { background: #24152e; }
#view-mines .tile.bomb.hit { background: radial-gradient(circle, #ffb3c1, #ff5d7d 45%, #7a1f3a); box-shadow: 0 0 0 2px #ff8fa3, 0 0 34px rgba(255, 93, 125, .7); animation: tileFlip .45s var(--ease) both, bombHit .5s .35s; z-index: 1; }
#view-mines .tile.bomb.hit::after { content: ''; position: absolute; inset: -10%; border-radius: 50%; border: 3px solid #ffe08a; animation: blast .6s .3s ease-out both; pointer-events: none; }
#view-mines .tile.bomb img { animation: gemPop .45s .12s var(--spring) both; }
#view-mines .tile.dim { opacity: .4; animation: tileFlip .4s var(--ease) both; animation-delay: var(--d, 0s); }
#view-mines .tile.dim img { width: 52%; animation: none; filter: saturate(.7); }
#view-mines .mines-grid.won .tile.dim { opacity: .5; }
@keyframes tileFlip { from { transform: rotateY(90deg) scale(.8); opacity: .3; } }
@keyframes gemPop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
@keyframes bombHit { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }
@keyframes blast { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.mines-result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; min-width: 150px; padding: 16px 26px; text-align: center; border-radius: 18px; background: rgba(13, 16, 36, .92); border: 2px solid var(--green); box-shadow: 0 0 0 6px rgba(159, 242, 196, .1), 0 0 50px -6px rgba(159, 242, 196, .6), 0 20px 40px rgba(0, 0, 0, .6); backdrop-filter: blur(4px); animation: resultIn .45s var(--spring) both; pointer-events: none; }
.mines-result b { display: block; font-family: var(--slab); font-size: 2rem; color: var(--green); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mines-result span { display: block; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes resultIn { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

#minesBtn.cashout { background: linear-gradient(135deg, #b8ffd8, var(--green)); animation: none; box-shadow: 0 8px 26px -8px rgba(159, 242, 196, .9); }
.mines-hint { font-size: .82rem; color: var(--purple); background: rgba(195, 166, 255, .08); border: 1px dashed rgba(195, 166, 255, .35); border-radius: 11px; padding: 10px 12px; line-height: 1.4; }
.mines-hint i { margin-right: 4px; }

/* ===== Hassik Slots ===== */
#view-slots .stage { align-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(255, 179, 217, .1), transparent 60%), radial-gradient(circle at 50% 100%, rgba(195, 166, 255, .1), transparent 60%); }
#view-slots .slot-machine { position: relative; max-width: 580px; padding: 14px 18px; border-radius: 34px; border: 2px solid transparent; background: linear-gradient(170deg, #3a2a7a, #1c1847 55%, #141238) padding-box, linear-gradient(160deg, #ffe08a, #c3a6ff 35%, #6741d9 60%, #ffb3d9) border-box; box-shadow: 0 0 0 6px #0d0f26, 0 0 0 7px rgba(195, 166, 255, .25), 0 40px 80px -30px rgba(195, 166, 255, .6), inset 0 2px 0 rgba(255, 255, 255, .15); }
.slot-machine.spinning, .slot-machine.win { --chase: .5s; }

.slot-bulbs { display: flex; justify-content: space-between; padding: 0 10px; }
.slot-bulbs i { width: 9px; height: 9px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px #ffe08a, 0 0 2px #fff inset; animation: bulb var(--chase, 1.4s) calc(var(--i) * -.1s) infinite; }
.slot-bulbs i:nth-child(3n + 1) { background: #ffb3d9; box-shadow: 0 0 8px #ffb3d9; }
.slot-bulbs i:nth-child(3n + 2) { background: #9ff2c4; box-shadow: 0 0 8px #9ff2c4; }
@keyframes bulb { 50% { opacity: .25; transform: scale(.75); } }
.slot-machine.win .slot-bulbs i { animation: bulbWin .35s infinite alternate; }
@keyframes bulbWin { to { opacity: .2; } }

.slot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 12px; }
.slot-title { font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 2rem); text-transform: uppercase; line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 3px 0 #6741d9, 0 0 22px rgba(195, 166, 255, .8); white-space: nowrap; }
.slot-title b { font-weight: 400; margin-left: .25em; color: #ffe08a; text-shadow: 0 3px 0 #b8601a, 0 0 22px rgba(255, 224, 138, .7); }
#view-slots .jackpot { margin: 0; padding: 6px 14px; border-radius: 12px; background: #07081a; border: 1px solid rgba(255, 224, 138, .3); box-shadow: inset 0 0 18px rgba(255, 224, 138, .08); text-align: right; min-width: 0; }
#view-slots .jackpot small { font-size: .6rem; color: #ffe08a; opacity: .75; }
#view-slots .jackpot b { font-size: 1.25rem; background: linear-gradient(180deg, #fff6c8, #ffc93c); -webkit-background-clip: text; background-clip: text; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.slot-window { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, #0a0b1f, #13153a); box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .35), inset 0 6px 18px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .1); }
#view-slots .reels { --h: 92px; gap: 8px; }
#view-slots .reel { height: calc(var(--h) * 3); border-radius: 14px; background: linear-gradient(90deg, #171a44, #252a66 50%, #171a44); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#view-slots .reel::after { box-shadow: none; background: linear-gradient(180deg, rgba(7, 8, 26, .92), rgba(7, 8, 26, .15) 30%, transparent 40% 60%, rgba(7, 8, 26, .15) 70%, rgba(7, 8, 26, .92)); }
#view-slots .reel.spinning .strip { filter: blur(2px) brightness(1.1); }
#view-slots .reel.tease { box-shadow: 0 0 0 2px #ffe08a, 0 0 30px rgba(255, 224, 138, .6); animation: tease .3s infinite alternate; }
@keyframes tease { to { box-shadow: 0 0 0 2px #ffe08a, 0 0 46px rgba(255, 224, 138, .9); } }
#view-slots .reel.land { animation: reelLand .35s var(--spring); }
@keyframes reelLand { 40% { transform: translateY(5px); } }
#view-slots .sym { height: var(--h); font-size: 0; }
#view-slots .sym img { height: calc(var(--h) * .74); width: auto; max-width: 90%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
#view-slots .sym.win img { animation: symWin .8s var(--spring) infinite alternate; filter: drop-shadow(0 0 14px rgba(255, 224, 138, .9)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
#view-slots .sym.win { background: radial-gradient(circle, rgba(255, 224, 138, .28), transparent 65%); }
@keyframes symWin { from { transform: scale(1); } to { transform: scale(1.14); } }

.payline { position: absolute; left: 2px; right: 2px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 143, 163, .55) 8% 92%, transparent); pointer-events: none; transition: .3s; }
.payline::before, .payline::after { content: ''; position: absolute; top: 50%; border: 9px solid transparent; transform: translateY(-50%); }
.payline::before { left: -10px; border-left-color: #ff8fa3; }
.payline::after { right: -10px; border-right-color: #ff8fa3; }
.slot-machine.win .payline { height: 4px; background: linear-gradient(90deg, transparent, #ffe08a 6% 94%, transparent); box-shadow: 0 0 16px #ffe08a, 0 0 4px #fff; animation: bulbWin .4s infinite alternate; }
.slot-machine.win .payline::before { border-left-color: #ffe08a; }
.slot-machine.win .payline::after { border-right-color: #ffe08a; }

#view-slots .slot-msg { margin: 12px 0 10px; padding: 9px 14px; border-radius: 12px; background: #07081a; border: 1px solid var(--line); box-shadow: inset 0 0 16px rgba(0, 0, 0, .6); font-size: 1.15rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-slots .slot-msg.win { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 224, 138, .7); animation: none; border-color: rgba(255, 224, 138, .35); }
#view-slots .slot-msg.lose { animation: none; color: var(--red); }

.slot-lever { position: absolute; right: -34px; top: 36%; width: 22px; height: 120px; }
.slot-lever::before { content: ''; position: absolute; left: 0; bottom: 0; width: 18px; height: 34px; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #6741d9, #2a2160); }
.slot-lever i { position: absolute; left: 6px; bottom: 26px; width: 7px; height: 82px; border-radius: 4px; background: linear-gradient(90deg, #d9d6f5, #8b86b8); transform-origin: 50% 100%; transition: transform .25s; }
.slot-lever i::after { content: ''; position: absolute; left: 50%; top: -12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc2d1, #ff3d6e 55%, #9c1036); box-shadow: 0 0 14px rgba(255, 61, 110, .6); }
.slot-lever:hover i { transform: rotate(-6deg); }
.slot-lever.pull i { animation: pull .7s var(--ease); }
@keyframes pull { 40% { transform: scaleY(-.35); } }

.slot-bigwin { position: absolute; inset: 0; z-index: 3; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: radial-gradient(circle, rgba(103, 65, 217, .7), rgba(13, 16, 36, .92) 70%); animation: bigIn .5s var(--spring) both; text-align: center; padding: 20px; }
.slot-bigwin small { font-family: var(--display); font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1; text-transform: uppercase; background: linear-gradient(180deg, #fff6c8, #ffc93c 55%, #e88a12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #8a4a08) drop-shadow(0 0 24px rgba(255, 201, 60, .6)); animation: bigPulse .6s ease-in-out infinite alternate; }
.slot-bigwin.mega small { background-image: linear-gradient(180deg, #fff, #ffb3d9 45%, #c3a6ff); filter: drop-shadow(0 4px 0 #6741d9) drop-shadow(0 0 30px rgba(255, 179, 217, .8)); }
.slot-bigwin b { font-family: var(--slab); font-size: clamp(1.5rem, 4.5vw, 2.4rem); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(255, 224, 138, .7); }
@keyframes bigIn { from { opacity: 0; transform: scale(.7); } }
@keyframes bigPulse { to { transform: scale(1.06); } }

/* Pay table */
#view-slots .paytable { gap: 2px; padding: 8px; background: rgba(13, 16, 36, .7); }
#view-slots .paytable div { padding: 5px 8px; border-radius: 9px; transition: background .3s, box-shadow .3s; }
#view-slots .paytable span { gap: 3px; align-items: center; }
#view-slots .paytable img { width: 22px; height: 22px; }
#view-slots .paytable em { font-variant-numeric: tabular-nums; }
#view-slots .paytable div:last-child em { color: var(--green); }
#view-slots .paytable .hit { background: rgba(255, 224, 138, .14); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .5); }
#view-slots .paytable .hit em { color: #ffe08a; }
.pt-any { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--panel2); font-style: normal; font-weight: 800; font-size: .8rem; color: var(--muted); }
#view-slots .paytable small { margin-left: 6px; }

/* ===== Narrow screens and fullscreen ===== */
@media (max-width: 760px) {
  .slot-lever { display: none; }
}
@media (max-width: 600px) {
  #view-mines .stage, #view-slots .stage { padding: 14px 10px; }
  .mines-board { padding: 9px; border-radius: 18px; }
  #view-mines .mines-grid { gap: 7px; }
  #view-mines .tile { border-radius: 10px; }
  .mines-hud { gap: 6px; }
  .mines-hud > div { padding: 8px 9px; border-radius: 11px; }
  .mines-hud small { font-size: .58rem; letter-spacing: .04em; }
  .mines-hud b { font-size: .95rem; }
  #view-slots .slot-machine { padding: 10px 10px; border-radius: 24px; }
  .slot-top { margin: 8px 0 10px; }
  .slot-title { font-size: 1.25rem; }
  #view-slots .jackpot b { font-size: 1rem; }
  .slot-window { padding: 7px; border-radius: 16px; }
  #view-slots .reels { --h: 68px; gap: 6px; }
  #view-slots .slot-msg { font-size: .95rem; }
}
#view-slots .game-wrap:fullscreen .reels, #view-slots.theater .reels { --h: min(120px, 17vh); }
#view-slots .game-wrap:fullscreen .slot-machine, #view-slots.theater .slot-machine { max-width: 680px; }
#view-mines .game-wrap:fullscreen :is(.mines-board, .mines-hud), #view-mines.theater :is(.mines-board, .mines-hud) { max-width: min(620px, 72vh); }

/* site.css */
/* Lobby, VIP and promotions after the mockup cleanup. */

/* No fake "N playing" counters in game headers. */
.game-head .live-pill { display: none; }
.game-head .live-pill + .gh-full { margin-left: auto; }

.promo-intro { max-width: 70ch; margin: -6px 0 18px; }
.vip-cta { margin-top: 16px; }
.vip-hero h1 { font-family: var(--slab); }
.tier.done { opacity: .7; }
#view-vip .tiers { margin-bottom: 30px; }

/* wallet.css */
/* Wallet + cashier mockup, reload bonus, cookie consent banner. */

.wl-balance { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; background: var(--bg); border-radius: var(--radius); text-align: center; }
.wl-balance > span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.wl-balance b { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.wl-refill { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.wl-refill p { margin: 0; font-size: .85rem; color: var(--muted); }

.wl-refill-head { display: flex; gap: 14px; align-items: flex-start; }
.wl-refill-head > i { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(159, 242, 196, .12); color: var(--green); }
.wl-refill-head b { display: block; margin-bottom: 4px; }

/* Cashier */
#wallet .modal-head .secure { margin-right: 4px; }
#wallet .modal-head h3 { margin-right: auto; }
#wlFlow[hidden], #wlBonus[hidden] { display: none; }
.pay-ico { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; }
.m-logos { display: flex; align-items: center; gap: 6px; min-width: 64px; color: var(--text); }
.method .m-logos .pay-ico { width: 24px; height: 24px; }
.pay-word { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.m-logos .pay-word.skrill { color: #b13a99; font-style: italic; font-size: .95rem; }
.m-logos .pay-word.neteller { color: #83ba3b; font-size: .7rem; letter-spacing: .04em; }
.coins { grid-template-columns: repeat(5, 1fr); }
.coin .pay-ico { width: 28px; height: 28px; transition: transform .3s var(--spring); }
.coin:hover .pay-ico { transform: translateY(-3px) rotate(-8deg); }
.pi-btc { color: #f7931a; } .pi-eth { color: #627eea; } .pi-usdt { color: #26a17b; } .pi-usdc { color: #2775ca; } .pi-bnb { color: #f0b90b; }
.pi-ltc { color: #a6a9aa; } .pi-sol { color: #14f195; fill: url(#pay-sol-grad); } .pi-trx { color: #ff060a; } .pi-doge { color: #c2a633; } .pi-xrp, .pi-visa, .pi-apple, .pi-gpay { color: #fff; } .pi-mc { width: 30px !important; }
.method .m-logos, .wd-top .m-logos { justify-content: center; width: 76px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.method .m-logos .pay-ico { width: 22px; height: 22px; }
.m-logos .pi-visa, .m-logos .pi-apple, .m-logos .pi-gpay { width: 34px !important; height: 34px !important; }
.coin { color: var(--text); }
.warn-note i { margin-right: 4px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.wl-spin { font-size: 2.4rem; color: var(--purple); margin: 6px 0 2px; }
.step.center .steps { align-self: stretch; max-width: 320px; margin: 4px auto 0; text-align: left; }
.wl-fail-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 143, 163, .12); color: var(--red); font-size: 1.8rem; margin: 6px 0 4px; animation: modalIn .4s var(--spring); }
.wl-fail p { max-width: 380px; line-height: 1.55; }
/* Live cashier (Binance Pay) */
.wl-ok-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: rgba(159, 242, 196, .12); color: var(--green); font-size: 1.8rem; margin: 6px 0 4px; animation: modalIn .4s var(--spring); }
.step.center > p.muted { max-width: 380px; line-height: 1.55; }
.pay-note { display: flex; align-items: center; gap: 8px; }
.pay-note .pay-ico, [data-submit] .pay-ico, .wl-actions .pay-ico { width: 18px; height: 18px; color: #f0b90b; }
.wl-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 520px) { #wallet .coins { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } #wallet .coin { font-size: .68rem; padding: 8px 2px; } #wallet .modal-head .secure span { display: none; } }

[data-claim]:disabled { opacity: .45; cursor: not-allowed; }
#brokeNote:empty { display: none; }

/* Cookie consent: replaces the old single-line banner, same corner. */
.cookie.consent { max-width: 420px; }
.cookie[hidden] { display: none; }
.cookie.consent p { line-height: 1.5; }
.cookie.consent p a { color: var(--blue); text-decoration: underline; }
.consent-cats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.consent-cats .set-row { padding: 10px 12px; }
.consent-cats .switch:disabled { opacity: .6; cursor: default; }

/* bg.css */
/* Background: floating playing cards + water shimmer (markup: app/views/partials/bg.php). */
.bg-sea { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Three nested layers so motions compose: .fc rises, its <i> sways, the <b> card bobs/tilts in 3D. */
.fc { position: absolute; top: 0; left: var(--x); perspective: 700px; animation: fcRise var(--t) linear var(--dl) infinite; will-change: transform; }
.fc > i { display: block; animation: fcSway var(--sw) ease-in-out var(--dl) infinite alternate; }
.fc b { display: block; position: relative; transform-style: preserve-3d; animation: fcBob var(--bb) ease-in-out var(--dl) infinite alternate; }

/* Depth: far = small, blurred, faint; near = bigger, sharp. */
.fc.d0 { --sz: 34px; opacity: .09; filter: blur(2.5px); }
.fc.d1 { --sz: 46px; opacity: .15; filter: blur(1px); }
.fc.d2 { --sz: 60px; opacity: .22; }

/* Card face */
.fc .c { width: var(--sz); height: calc(var(--sz) * 1.4); border-radius: calc(var(--sz) * .14); background: #fff; color: #1b1d36; display: grid; place-items: center; font-size: calc(var(--sz) * .52); line-height: 1; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.fc .c::before, .fc .c::after { content: attr(data-c); position: absolute; font-size: calc(var(--sz) * .2); font-weight: 800; line-height: 1; }
.fc .c::before { top: 7%; left: 9%; }
.fc .c::after { bottom: 7%; right: 9%; transform: rotate(180deg); }
/* Loose suit glyph */
.fc .g { font-size: calc(var(--sz) * 1.1); line-height: 1; color: #c9c3ff; }
.fc .red { color: #d6334f; }
.fc .g.red { color: #ff6b86; }

@keyframes fcRise { from { transform: translateY(calc(100vh + 40px)); } to { transform: translateY(-160px); } }
@keyframes fcSway { from { transform: translateX(-28px) rotate(-10deg); } to { transform: translateX(28px) rotate(12deg); } }
@keyframes fcBob {
  0%   { transform: translateY(0) rotateX(14deg) rotateY(-22deg); }
  50%  { transform: translateY(-10px) rotateX(-10deg) rotateY(8deg); }
  100% { transform: translateY(4px) rotateX(18deg) rotateY(26deg); }
}

/* Water surface shimmer along the bottom */
.bg-water { position: absolute; inset: auto 0 0 0; height: 26vh; opacity: .55; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.bg-water span { position: absolute; inset: 0 -50% 0 -50%; filter: blur(6px); animation: wave 18s ease-in-out infinite alternate; }
.bg-water span:first-child { background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(142, 197, 255, .07) 80px, transparent 110px 170px), linear-gradient(transparent, rgba(142, 197, 255, .05)); }
.bg-water span:last-child { background: repeating-linear-gradient(80deg, transparent 0 90px, rgba(159, 242, 196, .06) 115px, transparent 140px 210px); animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes wave { from { transform: translateX(-6%) scaleY(1); } to { transform: translateX(6%) scaleY(1.15); } }

@media (max-width: 760px) {
  .fc:nth-child(n + 8) { display: none; }
  .fc.d0 { --sz: 24px; } .fc.d1 { --sz: 32px; } .fc.d2 { --sz: 42px; }
}

/* Freeze where they are (negative delays keep them scattered). */
@media (prefers-reduced-motion: reduce) {
  .fc, .fc > i, .fc b, .bg-water span { animation-play-state: paused; will-change: auto; }
}

/* polish.css */
/* Polish: override layer (loaded after the feature styles, before responsive.css). */

/* Per-game accent tint */
.view { --tint: var(--purple); }
#view-crash { --tint: #ff7a59; }
#view-dice { --tint: #5aa9ff; }
#view-mines { --tint: #2dd4bf; }
#view-slots { --tint: #ffc83d; }
#view-chicken { --tint: #ff9f43; }
#view-plinko { --tint: #b07cff; }
#view-keno { --tint: #ffb020; }
#view-limbo { --tint: #5be39a; }
#view-coinflip { --tint: #f2c94c; }
#view-wheel { --tint: #a97bff; }
#view-blackjack { --tint: #2fbf7f; }
#view-videopoker { --tint: #33d1ff; }
#view-baccarat { --tint: #1f9d6b; }
#view-hilo { --tint: #7c83ff; }
#view-play { --tint: #ff4fd8; }
#view-sports { --tint: var(--blue); }

/* Game board: frosted, tinted glow + faint tinted wash behind the stage */
.view .game-wrap {
  background: radial-gradient(ellipse at 68% 35%, color-mix(in srgb, var(--tint) 10%, transparent), transparent 65%), rgba(23, 28, 60, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-color: color-mix(in srgb, var(--tint) 22%, rgba(255, 255, 255, .07));
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8), 0 0 70px -24px color-mix(in srgb, var(--tint) 45%, transparent);
}
.view .controls { background: rgba(17, 21, 47, .72); }
.view .stage:not(.bj-table) { background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tint) 9%, transparent), transparent 62%); }
.view .gh-icon { box-shadow: 0 12px 30px -14px var(--tint); }
.view .inp:focus-within { border-color: var(--tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 18%, transparent); }
.view .btn-primary:hover { box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--tint) 65%, transparent); }
.view .btn-primary:focus-visible { outline-color: var(--tint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tint) 25%, transparent); }

/* Frosted glass panels */
.match, .slip, .bets-card, .stat, .pcard, .perk, .tier, .prov, .pop, .chat, .cookie {
  background-color: rgba(23, 28, 60, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
dialog.modal { background: rgba(23, 28, 60, .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.modal-head { background: rgba(23, 28, 60, .92); }
.topbar { background: rgba(13, 16, 36, .7); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.sidebar { background: rgba(17, 21, 47, .82); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }

/* Sidebar: each link has its own soft accent (--ic, set inline in partials/sidebar.php) */
.side-nav a { --ic: var(--purple); }
.side-nav a i, .side-nav a .flag { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; font-size: .9rem; color: color-mix(in srgb, var(--ic) 85%, var(--muted)); background: color-mix(in srgb, var(--ic) 13%, transparent); transition: transform .35s var(--spring), background .25s, color .25s, box-shadow .25s; }
.side-nav a .flag { padding: 7px; object-fit: contain; }
.side-nav a:hover { background: color-mix(in srgb, var(--ic) 8%, var(--panel2)); }
.side-nav a:hover i { color: var(--ic); background: color-mix(in srgb, var(--ic) 22%, transparent); }
.side-nav a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--ic) 16%, var(--panel2)), color-mix(in srgb, var(--ic) 4%, var(--panel2))); }
.side-nav a.active i { color: var(--ic); background: color-mix(in srgb, var(--ic) 26%, transparent); box-shadow: 0 6px 16px -8px var(--ic); }
.side-nav a.active::before { background: var(--ic); }
.side-card { background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 16%, transparent), color-mix(in srgb, var(--pink) 10%, transparent)); }
.side-card i { color: var(--blue); }

/* Buttons: smooth lift + glow */
.btn { transition: transform .22s var(--ease), box-shadow .3s var(--ease), filter .2s, background .2s; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-ghost:not(:disabled):hover { box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* Game cards */
.tile-card, .art-card { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tile-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 40px -18px var(--a), 0 0 0 1px rgba(255, 255, 255, .08); }
.art-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 40px -18px var(--purple), 0 0 0 1px rgba(255, 255, 255, .08); }
/* The scroller clips overflow on both axes: pad it so the hover lift + glow fit, negative margin keeps the layout */
.row { padding: 14px 16px 46px; margin: -8px -16px -36px; scroll-padding-inline: 16px; }
.tile-card:focus-visible .play, .art-card:focus-visible .play { opacity: 1; }

/* Focus rings */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.btn:focus-visible, .tile-card:focus-visible, .art-card:focus-visible { outline-offset: 3px; }
.inp input:focus-visible, .inp select:focus-visible { outline: 0; } /* .inp:focus-within draws the ring */
.view :focus-visible { outline-color: var(--tint); }

/* Entrance: stagger the head and board after the view fades in */
.view.active .game-head { animation: polishIn .5s var(--ease) both; }
.view.active .game-wrap { animation: polishIn .6s .07s var(--ease) both; }
@keyframes polishIn { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .view.active .game-head, .view.active .game-wrap { animation: none; }
  .btn:not(:disabled):hover, .tile-card:hover, .art-card:hover { transform: none; }
}

/* Illustrated icon pass (agent H): SVG icons in nav chips, settings rows, empty states, toasts, provider placeholders */
.side-nav a .nav-ico { width: 30px; height: 30px; max-width: none; flex-shrink: 0; padding: 3px; border-radius: 9px; object-fit: contain; background: color-mix(in srgb, var(--ic) 13%, transparent); transition: transform .35s var(--spring), background .25s, box-shadow .25s; }
.side-nav a:hover .nav-ico { transform: scale(1.15) rotate(-8deg); background: color-mix(in srgb, var(--ic) 22%, transparent); }
.side-nav a.active .nav-ico { background: color-mix(in srgb, var(--ic) 26%, transparent); box-shadow: 0 6px 16px -8px var(--ic); }
.side-nav a .flag { max-width: none; }
.side-card-ico { width: 52px; height: 52px; margin: 0 auto 8px; display: block; --fa-float-height: .35em; }
.set-ico { width: 34px; height: 34px; flex-shrink: 0; }
.set-row .set-ico + div { flex: 1; min-width: 0; }
.empty-ico { display: block; width: 64px; height: 64px; margin: 0 auto 10px; opacity: .9; }
.empty-ico.sm { width: 40px; height: 40px; margin-bottom: 6px; }
.empty-state { text-align: center; padding: 18px 0 6px; }
.toast-img { width: 30px; height: 30px; flex-shrink: 0; }
.sport-card.pv-soon .pv-art { position: absolute; top: 15%; width: 46%; max-width: 92px; aspect-ratio: 1; filter: drop-shadow(0 12px 16px rgba(20, 23, 58, .35)); transition: transform .5s var(--spring); }
.sport-card.pv-soon:hover .pv-art { transform: translateY(-4px) scale(1.06); }

/* footer.css */
/* Footer. Loaded after pages.css and before responsive.css, so grid rules use `footer .x` to win over both. */
footer .foot-grid { grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
footer .foot-brand p { margin: 14px 0 12px; }
footer .foot-grid nav { display: flex; flex-direction: column; min-width: 0; }
footer .foot-grid nav a { color: var(--muted); padding: 5px 0; font-size: .9rem; overflow-wrap: anywhere; transition: color .2s, transform .2s; }
footer .foot-grid nav a:hover { color: var(--text); transform: translateX(4px); }
footer .mail span { overflow-wrap: anywhere; }

.foot-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 8px; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.tb { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px 8px 8px; border-radius: 14px; line-height: 1.2; background: var(--panel); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--text); transition: transform .25s var(--spring), border-color .25s; }
.tb img { width: 28px; height: 28px; flex-shrink: 0; transition: transform .35s var(--spring); }
.tb:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16); }
.tb:hover img { transform: scale(1.15) rotate(-8deg); }

.foot-social { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.foot-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--ic); transition: transform .25s var(--spring), background .25s, color .25s, border-color .25s; }
.foot-social a i { font-size: 1.05rem; }
/* Real brand marks: Instagram's gradient glyph, TikTok's cyan/red offset */
.foot-social .so-instagram i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-social .so-tiktok i { text-shadow: -1.5px -1px 0 #25f4ee, 1.5px 1px 0 #fe2c55; }
.foot-social a:hover { color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, var(--panel)); border-color: color-mix(in srgb, var(--ic) 35%, transparent); transform: translateY(-3px); }

/* Payment conveyor: the list is rendered twice and the track slides by exactly one copy, so the loop is seamless. */
.foot-pay { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-pay h4 { margin-bottom: 14px; }
.pay-belt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pay-track { display: flex; width: max-content; animation: payBelt 40s linear infinite; }
.pay-belt:hover .pay-track { animation-play-state: paused; }
.pay-row { display: flex; gap: 12px; padding: 4px 12px 4px 0; list-style: none; }
@keyframes payBelt { to { transform: translateX(-50%); } }
/* Real brand colours */
.pay { --c: #fff; height: 48px; min-width: 76px; padding: 0 16px; display: grid; place-items: center; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line)); color: var(--c); transition: background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.pay-btc { --c: #f7931a; } .pay-eth { --c: #627eea; } .pay-usdt { --c: #26a17b; } .pay-usdc { --c: #2775ca; } .pay-bnb { --c: #f0b90b; }
.pay-ltc { --c: #a6a9aa; } .pay-sol { --c: #14f195; } .pay-trx { --c: #ff060a; } .pay-doge { --c: #c2a633; } .pay-xrp { --c: #fff; }
.pay-visa { --c: #fff; } .pay-mc { --c: #f79e1b; } .pay-apple { --c: #fff; } .pay-gpay { --c: #fff; } .pay.skrill { --c: #b13a99; } .pay.neteller { --c: #83ba3b; }
.pay.pay-sol svg { fill: url(#pay-sol-grad); }
.pay svg { width: 24px; height: 24px; fill: currentColor; }
.pay-visa svg, .pay-apple svg, .pay-gpay svg { width: 42px; height: 42px; }
.pay-mc svg { width: 38px; }
.pay:hover { background: color-mix(in srgb, var(--c) 10%, var(--panel)); border-color: color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px -14px var(--c); }
.pay.pay-word { font-weight: 800; font-size: .95rem; }
.pay.skrill { font-style: italic; }
.pay.neteller { font-size: .74rem; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) {
  .pay-track { animation: none; width: auto; }
  .pay-row { flex-wrap: wrap; } .pay-row[aria-hidden] { display: none; }
  .pay-belt { -webkit-mask-image: none; mask-image: none; }
}
.foot-pay + .foot-notice { margin-top: 0; }

.foot-notice { display: flex; gap: 18px; align-items: flex-start; margin-top: 36px; padding: 22px 0; border-top: 1px solid var(--line); }
.foot-age { flex-shrink: 0; color: var(--text); }
.foot-age .age { width: 42px; height: 42px; font-size: .9rem; }
.foot-notice-text { display: flex; flex-direction: column; gap: 8px; font-size: .82rem; color: var(--dim); line-height: 1.6; max-width: 1000px; }
.foot-notice-text b { color: var(--text); font-weight: 700; }
.foot-notice-text a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot-notice-text a:hover { color: var(--text); }
/* BeGambleAware wordmark (text, so it stays inside img-src 'self'): white + their orange "Gamble" */
.gamble-aware { flex-shrink: 0; align-self: center; margin-left: auto; padding: 10px 16px; border-radius: 10px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.gamble-aware span { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: #1d1d1b; white-space: nowrap; }
.gamble-aware b { color: #f26722; font-weight: 800; }
.gamble-aware small { font-size: .75rem; font-weight: 700; color: #1d1d1b; }
.gamble-aware:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px #f26722; }

@media (max-width: 1150px) {
  footer .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  footer .foot-brand { grid-column: 1 / -1; }
  footer .foot-brand p { max-width: 640px; }
}
@media (max-width: 900px) {
  footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
}
@media (max-width: 600px) {
  footer { padding: 36px 16px 22px; }
  .foot-notice { flex-direction: column; gap: 12px; }
  .gamble-aware { margin-left: 0; align-self: flex-start; }
  .foot-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* legal.css */
/* Policy pages (legal/<doc>) and responsible gambling tools (responsible/<tab>). */
.doc-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.doc-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.doc-nav a { padding: 12px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--text); transition: background .2s, color .2s; }
.doc-nav a:hover { background: var(--panel2); }
.doc-nav a.active { background: linear-gradient(135deg, #3b8cff, #1f6fe0); color: #fff; box-shadow: 0 8px 20px -10px #3b8cff; }
.doc-main { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.doc-main > [hidden] { display: none; }

.doc { max-width: 860px; color: var(--muted); line-height: 1.7; font-size: .94rem; }
.doc h2 { color: var(--text); font-size: 1.45rem; margin-bottom: 6px; }
.doc h2.doc-sub { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc h3 { color: var(--text); font-size: 1.05rem; margin: 24px 0 8px; }
.doc p + p { margin-top: 10px; }
.doc ul, .doc ol { margin: 8px 0 8px 22px; display: flex; flex-direction: column; gap: 6px; }
.doc b { color: var(--text); }
.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.doc-date { font-size: .8rem; color: var(--dim); margin-bottom: 14px; }
.doc-tips { list-style: none; margin-left: 0 !important; }
.doc-tips li { padding: 12px 14px; background: var(--bg); border-radius: 12px; border-left: 3px solid var(--green); }

/* Tool card, as in the screenshots: illustration left, copy and controls right */
.rg-tool { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; background: linear-gradient(160deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; }
.rg-art { width: 150px; height: 150px; margin: 10px auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.rg-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rg-body h3 { font-size: 1.3rem; }
.rg-body > p { line-height: 1.6; font-size: .92rem; }
#rgExclude, #rgLoss { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#rgExclude .co-status, #rgLoss .rg-meter, #rgLoss .field { align-self: stretch; }
.btn-go { background: #3cbf5a; color: #fff; padding: 12px 24px; }
.btn-go:not(:disabled):hover { background: #34ad50; box-shadow: 0 10px 24px -10px #3cbf5a; }
.btn-go:disabled { opacity: .45; cursor: not-allowed; }
.rg-check { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--muted); cursor: pointer; }
.rg-check input { width: 18px; height: 18px; accent-color: #3cbf5a; --check: #3cbf5a; }
.rg-meter { padding: 14px; background: var(--bg); border-radius: 12px; border: 1px solid var(--line); }
.rg-meter-top { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; margin-bottom: 8px; }
.rg-meter .progress { margin: 0; height: 10px; }
.rg-meter.bad { border-color: rgba(255, 143, 163, .35); }
.rg-meter.bad .progress i { background: var(--red); }
.rg-meter .fine { text-align: left; margin-top: 8px; }
.rg-actions { justify-content: flex-start; margin: 0; }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .doc-nav a { white-space: nowrap; }
  .rg-tool { grid-template-columns: 1fr; padding: 20px; gap: 10px; }
  .rg-art { width: 110px; height: 110px; }
}
#rgLoss [data-window] { text-transform: capitalize; }

/* auth2.css */
/* Account security: forgot/reset password, two-factor, Security dialog, verify-email banner (features/auth.js). */
.a2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.a2-link { color: var(--purple); font-weight: 700; font-size: .85rem; background: none; padding: 0; }
.a2-link:hover { text-decoration: underline; }
.auth-card .inp select { font-weight: 600; color: var(--text); }
.auth-card .inp input[type="date"] { color-scheme: dark; }

.a2-modal { max-width: 440px; }
.a2-text { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.a2-ok { background: rgba(110, 231, 183, .12); color: var(--green); border-radius: 10px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; }
.a2-code { font-size: 1.25rem !important; letter-spacing: .3em; text-align: center; }
.a2-pane { display: flex; flex-direction: column; gap: 14px; }
.a2-pane[hidden] { display: none; }

.a2-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--bg); border-radius: 14px; }
.a2-status b { display: block; font-size: .92rem; }
.a2-status span:not(.a2-badge) { font-size: .78rem; color: var(--muted); word-break: break-all; }
.a2-badge { flex: none; font-size: .72rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255, 143, 163, .14); color: var(--red); text-transform: uppercase; letter-spacing: .05em; }
.a2-badge.on { background: rgba(110, 231, 183, .14); color: var(--green); }

.a2-secret { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; }
.a2-secret code { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; line-height: 1.5; }

.a2-banner { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 46; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--purple); border-radius: 16px; padding: 10px 10px 10px 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); animation: rise .5s var(--ease) both; }
.a2-banner[hidden] { display: none; }
.a2-banner > i { color: var(--purple); font-size: 1.2rem; }
.a2-banner p { flex: 1; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.a2-banner .btn { padding: 8px 12px; font-size: .82rem; white-space: nowrap; }
.a2-banner .icon-btn { width: 32px; height: 32px; }

@media (max-width: 600px) {
  .a2-banner { bottom: 90px; flex-wrap: wrap; }
  .a2-banner p { flex-basis: calc(100% - 80px); }
}

/* pam.css */
/* Account status, identity verification and sessions (features/pam.js, modals/account2.php). */
.mh-fa { font-size: 1.3rem; color: var(--purple); width: 30px; text-align: center; }
.pam-intro { font-size: .85rem; margin-bottom: 4px; }
.pam-acct { display: grid; gap: 10px; }
.pam-acct .btn { position: relative; }
.pam-status { padding: 10px 14px; border-radius: 12px; background: rgba(255, 143, 163, .12); color: var(--red); font-size: .85rem; font-weight: 600; }
.pam-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--panel2); color: var(--muted); vertical-align: middle; }
.pam-acct .pam-pill { margin-left: 8px; }
.pam-pill.k-verified { color: var(--green); background: rgba(159, 242, 196, .12); }
.pam-pill.k-pending { color: var(--yellow); background: rgba(255, 224, 138, .12); }
.pam-pill.k-rejected { color: var(--red); background: rgba(255, 143, 163, .12); }
.pam-state { display: grid; gap: 6px; padding: 12px 14px; background: var(--bg); border-radius: 14px; font-size: .88rem; }
.pam-state .pam-pill { justify-self: start; }
.pam-reason { color: var(--red); font-size: .82rem; }
.pam-slots, .pam-sessions { display: grid; gap: 8px; }
.pam-sessions { max-height: 50vh; overflow-y: auto; }
.pam-slot, .pam-sess { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border-radius: 14px; }
.pam-slot > i, .pam-sess > i { font-size: 1.2rem; color: var(--dim); width: 22px; text-align: center; flex: none; }
.pam-slot.done > i { color: var(--green); }
.pam-slot > div, .pam-sess > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pam-slot b, .pam-sess b { font-size: .9rem; }
.pam-slot b small { color: var(--dim); font-weight: 500; font-size: .72rem; margin-left: 4px; }
.pam-slot span, .pam-sess span { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.pam-slot label.btn { flex: none; cursor: pointer; }
.pam-sess.current { outline: 1px solid rgba(159, 242, 196, .35); }
.pam-sess.current > i { color: var(--green); }
#pamKycSubmit:disabled, #pamLogoutOthers:disabled { opacity: .5; cursor: not-allowed; }

/* currency.css */
/* Display currency picker: top bar button + #curMenu popover (features/currency.js). */
.cur-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-weight: 800; font-size: .85rem; color: var(--text); transition: background .2s; flex-shrink: 0; }
.cur-btn:hover, .cur-btn:focus-visible { background: var(--panel); }
.cur-btn .caret { font-size: .65rem; color: var(--dim); }
.cur-ico { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; }
svg.cur-ico { fill: currentColor; }
#balance { white-space: nowrap; }

#curMenu { inset: 70px auto auto 50%; translate: -50% 0; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
#curMenu h4 i { color: var(--yellow); }
#curMenu h5 { margin: 10px 10px 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cur-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); text-align: left; min-width: 0; transition: .2s; }
.cur-opt:hover { background: var(--panel2); color: var(--text); }
.cur-opt.active { color: var(--text); background: rgba(195, 166, 255, .12); box-shadow: inset 0 0 0 1px var(--purple); }
.cur-opt .cur-ico { width: 24px; height: 24px; }
.cur-opt span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cur-opt b { color: var(--text); font-size: .88rem; }
.cur-opt small, .cur-opt em { font-size: .7rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cur-opt em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; max-width: 50%; }
.cur-note { margin: 10px 10px 4px; font-size: .72rem; color: var(--dim); line-height: 1.4; }

/* Settings row (#setCurrency, settings modal) opens the picker. */
.cur-set { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.cur-set:hover { border-color: var(--purple); }
.cur-set small { color: var(--dim); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-set { min-width: 0; max-width: 55%; }
.cur-set > span { white-space: nowrap; }
.cur-set i { font-size: .65rem; color: var(--dim); }

@media (max-width: 600px) {
  #curMenu { inset: 64px 16px auto 16px; translate: none; width: auto; }
  .cur-btn { padding: 6px 4px 6px 6px; }
  .wallet .balance { font-size: .8rem; padding-inline: 6px; }
  .cur-btn .cur-code, .cur-btn .caret { display: none; }
  .cur-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #balance { white-space: normal; line-height: 1.15; text-align: center; } /* "0.01246099 BTC" wraps under the code */
  .wallet .balance { font-size: .74rem; padding-inline: 4px; }
  .cur-btn { padding-inline: 4px 2px; }
  .cur-btn .cur-ico { width: 18px; height: 18px; }
  .cur-set small { display: none; } /* code + flag only; the label next to it keeps whole words */
}

/* providers.css */
/* providers styles (agent G): aggregator game tiles, coming-soon cards, providers page, launch frame. */
.pv-head-r { display: flex; align-items: center; gap: 10px; }
.pv-all { padding: 8px 14px; font-size: .85rem; gap: 8px; }

/* Game tile = .art-card with a category gradient + icon under the (optional) aggregator thumbnail */
.pv-tile { background: linear-gradient(165deg, var(--a), var(--b)); }
.pv-tile .pv-ico { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); font-size: 2.8rem; color: rgba(255, 255, 255, .9); filter: drop-shadow(0 10px 14px rgba(20, 23, 58, .35)); }
.pv-tile img { position: absolute; inset: 0; }
.pv-tile .label b { font-size: 1.05rem; overflow-wrap: anywhere; }
.pv-rtp { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .58rem; font-weight: 800; padding: 3px 6px; border-radius: 6px; background: rgba(13, 16, 36, .7); color: #fff; }
.pv-tile .badge.live .live-dot { width: 6px; height: 6px; background: #fff; }

/* Coming-soon category card = .sport-card */
.pv-soon { padding: 0 10px 14px; text-align: center; }
.pv-soon .badge.soon { position: absolute; top: 8px; left: 8px; font-size: .6rem; font-weight: 800; padding: 3px 7px; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.sport-card.pv-soon i { top: 17%; font-size: 2.2rem; }
.sport-card.pv-soon b { line-height: 1.1; font-size: clamp(.85rem, 1.1vw, 1.1rem); }
.pv-soon small { font-size: .68rem; opacity: .85; margin-top: 4px; line-height: 1.3; }

/* Providers page */
.pv-intro { margin: -4px 0 16px; max-width: 70ch; }
.pv-cats:not(:empty), .pv-studios:not(:empty) { margin-bottom: 16px; }
.pv-cats .tabs { flex-wrap: wrap; }
.pv-studios .prov.active { border-color: var(--purple); background: var(--panel2); }
.pv-studios .providers { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pv-studios .prov { padding: 10px 8px; }
.pv-none { grid-column: 1 / -1; padding: 30px 0; text-align: center; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* Launch frame */
.pv-frame { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 120px); min-height: 420px; }
.pv-frame:fullscreen { height: 100vh; padding: 10px; background: var(--bg); }
.pv-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-back { padding: 8px 14px; gap: 8px; flex: none; }
.pv-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-name b, .pv-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-name small { color: var(--dim); font-size: .75rem; }
.pv-bal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; white-space: nowrap; flex: none; }
.pv-full { padding: 8px 12px; flex: none; }
.pv-stage { position: relative; flex: 1; border-radius: 14px; overflow: hidden; background: #0b0d1c; border: 1px solid var(--line); }
.pv-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); }

@media (max-width: 600px) {
  .pv-back span { display: none; }
  .pv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pv-frame { height: calc(100dvh - 96px); min-height: 360px; }
}

/* support.css */
/* Contact dialog and support tickets (modals/contact.php, features/support.js). */
.sup-modal .modal-body { display: grid; gap: 12px; }
.sup-form, .sup-reply, .sup-guest { display: grid; gap: 12px; }
.sup-intro { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.sup-as { font-size: .82rem; color: var(--muted); padding: 8px 12px; background: var(--bg); border-radius: 10px; overflow-wrap: anywhere; }
.sup-modal .inp textarea { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 8px 10px; font: inherit; color: var(--text); resize: vertical; min-height: 70px; }
.sup-modal .inp select { font-weight: 600; color: var(--text); }
.sup-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--bg); border-radius: 12px; }
.sup-tabs button { padding: 9px 10px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: .85rem; background: none; border: 0; cursor: pointer; }
.sup-tabs button.on { background: var(--panel2); color: var(--text); }
.sup-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 10px 0; }
.sup-done > i { font-size: 2.4rem; color: var(--green); }
.sup-list { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; }
.sup-item { display: grid; gap: 3px; text-align: left; padding: 12px 14px; background: var(--bg); border: 1px solid transparent; border-radius: 14px; color: var(--text); cursor: pointer; font: inherit; }
.sup-item:hover { border-color: var(--line); }
.sup-item b { font-size: .9rem; overflow-wrap: anywhere; }
.sup-item small, .sup-thead small { color: var(--muted); font-size: .76rem; }
.sup-st { justify-self: start; display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--panel2); color: var(--muted); margin-right: 4px; }
.sup-st.s-open { color: var(--yellow); }
.sup-st.s-pending { color: var(--green); }
.sup-empty { text-align: center; color: var(--dim); padding: 18px 0; font-size: .88rem; }
.sup-thread { display: grid; gap: 10px; }
.sup-thread #supBack { justify-self: start; }
.sup-thead { display: grid; gap: 4px; }
.sup-thead b { overflow-wrap: anywhere; }
.sup-msgs { display: grid; gap: 8px; max-height: 45vh; overflow-y: auto; }
.sup-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 90%; }
.sup-msg > div { padding: 10px 12px; border-radius: 12px; background: var(--bg); min-width: 0; }
.sup-msg.player { justify-self: end; }
.sup-msg.player > div { background: var(--panel2); }
.sup-msg img { width: 28px; height: 28px; flex: none; }
.sup-msg small { color: var(--dim); font-size: .72rem; }
.sup-msg p { margin-top: 3px; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* consent.css */
/* Cookie consent: floating card, bottom-centre, over a soft dim (the page stays readable and,
   outside the card, clickable). Playing-card suits bob around the border. Replaces the old
   corner banner in wallet.css (the section no longer has the .cookie class). */
.consent-layer { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; padding: 24px 16px 32px; background: radial-gradient(120% 70% at 50% 100%, rgba(6, 8, 22, .62), rgba(6, 8, 22, .28)); pointer-events: none; animation: consentFade .5s var(--ease) both; }
.consent-layer[hidden] { display: none; }
.consent-card { position: relative; pointer-events: auto; width: min(540px, 100%); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid rgba(195, 166, 255, .28); border-radius: 22px; padding: 26px 26px 22px; text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 60px -18px rgba(195, 166, 255, .45); animation: consentIn .6s .15s var(--spring) both; }
.consent-card::before { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(255, 255, 255, .08); border-radius: 16px; pointer-events: none; }
.consent-icon { width: 54px; height: 54px; margin: -54px auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid rgba(195, 166, 255, .35); font-size: 1.6rem; color: var(--yellow); box-shadow: 0 0 24px -4px rgba(255, 224, 138, .5); }
.consent-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.consent-card p { font-size: .9rem; color: var(--muted); line-height: 1.55; margin: 0 auto 16px; max-width: 46ch; }
.consent-card p a { color: var(--blue); text-decoration: underline; white-space: nowrap; }
.consent-card .consent-cats { text-align: left; }
.consent-card .cookie-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.consent-card .cookie-btns .btn { padding: 10px 16px; font-size: .9rem; }
.consent-card .cookie-btns .btn[hidden] { display: none; }
.consent-card .btn:focus-visible, .consent-card a:focus-visible, .consent-card .switch:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Suits around the border. Red suits #d6334f, dark suits silver. */
.consent-deco { position: absolute; inset: 0; pointer-events: none; }
.suit { position: absolute; font: 2.6rem/1 "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif; color: #d9deef; text-shadow: 0 0 10px rgba(217, 222, 239, .55), 0 0 2px rgba(255, 255, 255, .6); animation: suitBob 4.2s ease-in-out infinite; }
.suit.red { color: #d6334f; text-shadow: 0 0 12px rgba(214, 51, 79, .7), 0 0 2px rgba(255, 140, 160, .6); }
.s1 { top: -20px; left: 12%; animation-delay: -.4s; }
.s2 { top: -20px; right: 14%; font-size: 2.25rem; animation-delay: -1.6s; }
.s3 { top: 38%; left: -16px; font-size: 2.12rem; animation-delay: -2.4s; }
.s4 { top: 30%; right: -18px; animation-delay: -.9s; }
.s5 { bottom: -18px; left: 26%; font-size: 2.12rem; animation-delay: -3.1s; }
.s6 { bottom: -18px; right: 30%; font-size: 2.0rem; animation-delay: -2s; }
.s7 { bottom: 18%; left: -12px; font-size: 1.88rem; animation-delay: -1.2s; }
.s8 { bottom: 24%; right: -11px; font-size: 1.88rem; animation-delay: -3.6s; }
.ace { position: absolute; width: 34px; height: 46px; border-radius: 6px; background: linear-gradient(160deg, #f4f6ff, #c9cfe6); color: #1b1f3d; font: 700 .9rem/1 var(--slab); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7), 0 0 14px -4px rgba(217, 222, 239, .6); animation: aceBob 5s ease-in-out infinite; }
.ace i { font-style: normal; font-size: .95rem; }
.ace-tl { top: -20px; left: -16px; --r: -14deg; transform: rotate(var(--r)); }
.ace-br { bottom: -20px; right: -16px; --r: 12deg; transform: rotate(var(--r)); animation-delay: -2.5s; }
@keyframes suitBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(6deg); } }
@keyframes aceBob { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -.4)) translateY(-5px); } }
@keyframes consentIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes consentFade { from { opacity: 0; } }

@media (max-width: 600px) {
  .consent-layer { padding: 20px 16px 16px; }
  .consent-card { padding: 22px 16px 18px; border-radius: 18px; }
  .consent-card .cookie-btns .btn { flex: 1 1 100%; }
  .consent-deco .suit { font-size: 1.8rem; }
  .s3 { left: -6px; } .s4 { right: -6px; } .s7 { left: -6px; } .s8 { right: -6px; }
  .ace { width: 28px; height: 38px; font-size: .78rem; }
  .ace-tl { top: -14px; left: -8px; } .ace-br { bottom: -14px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-layer, .consent-card, .suit, .ace { animation: none; }
}

/* demo.css */
/* Demo mode: top-bar switch, DEMO pill on the balance, tinted balance. */
.demo-switch { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--panel); color: var(--muted); font-weight: 700; font-size: .85rem; transition: .2s; }
.demo-switch:hover { color: #fff; }
.demo-track { width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .14); position: relative; transition: background .2s; flex-shrink: 0; }
.demo-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.demo-switch[aria-checked="true"] { color: #ffc83d; }
.demo-switch[aria-checked="true"] .demo-track { background: #ffc83d; }
.demo-switch[aria-checked="true"] .demo-knob { transform: translateX(14px); background: #1a1530; }
.demo-pill { padding: 2px 7px; border-radius: 6px; background: #ffc83d; color: #1a1530; font-size: .66rem; font-weight: 800; letter-spacing: .06em; }
body.demo .balance { color: #ffc83d; background: rgba(255, 200, 61, .08); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, .35); }
.demo-reset { color: #ffc83d; }
@media (max-width: 700px) { .demo-switch > span:last-child { display: none; } }

/* security.css */
/* Two-factor: Protect dialog (modals/protect.php), recovery codes, Security dialog extras (features/security.js, features/auth.js). Owner: agent J.
   Builds on the a2-* look in auth2.css. */
.pr-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pr-label { font-size: .78rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.pr-method { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.pr-method:hover, .pr-method:focus-visible { border-color: rgba(195, 166, 255, .55); background: rgba(195, 166, 255, .06); transform: translateY(-1px); }
.pr-method:disabled { opacity: .6; cursor: progress; transform: none; }
.pr-method img { width: 40px; height: 40px; flex: none; }
.pr-method span { display: grid; gap: 3px; min-width: 0; flex: 1; padding-right: 70px; }
.pr-method b { font-size: .95rem; }
.pr-method small { font-size: .78rem; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.pr-tag { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: rgba(110, 231, 183, .14); color: var(--green); }
.pr-actions { display: flex; gap: 10px; }
.pr-actions .btn { flex: 1; justify-content: center; }
.pr-resend { justify-self: start; align-self: flex-start; }
.pr-check { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.pr-check input { width: 18px; height: 18px; accent-color: var(--purple); }
#prDone:disabled { opacity: .5; cursor: not-allowed; }

/* recovery codes (template #secCodesTpl) */
.sec-codes { display: grid; gap: 10px; }
.sec-codes:empty { display: none; }
.sec-codes-t { font-size: .95rem; }
.sec-codes-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; margin: 0; list-style: none;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; user-select: all; }
.sec-codes-list li { font: 700 .95rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; padding: 6px 4px; border-radius: 8px; background: var(--panel2); }
.sec-codes-btns { display: flex; gap: 10px; }
.sec-codes-btns .btn { flex: 1; justify-content: center; }

/* Security dialog + login step extras */
.sec-left { font-size: .85rem; color: var(--muted); padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.sec-left.low { color: var(--yellow); background: rgba(255, 224, 138, .1); }
.sec-send { align-self: flex-start; }
.sec-alt { justify-content: center; gap: 18px; }
.sec-alt .a2-link[hidden] { display: none; }
#a2TwofaCode { text-transform: uppercase; }

@media (max-width: 420px) {
  .sec-codes-list { grid-template-columns: 1fr; }
  .pr-method span { padding-right: 0; }
  .pr-method:has(.pr-tag) span { padding-top: 20px; } /* the tag stays top-right, above the title */
  .pr-actions, .sec-codes-btns { flex-direction: column; }
}

/* live.css */
/* Live chat with an agent inside the assistant window (features/live.js, partials/chat.php). */
#chatAv i { font-size: 1.15rem; color: var(--purple); }
.chat-head .icon-btn[hidden] { display: none; }
.msg.live-op small { display: block; font-size: .7rem; font-weight: 700; color: var(--purple); margin-bottom: 2px; }
.msg.bot.live-op { white-space: pre-line; }
.msg.me { white-space: pre-line; overflow-wrap: anywhere; }
.live-divider { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.live-divider::before, .live-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.live-sys { align-self: center; max-width: 90%; text-align: center; color: var(--muted); font-size: .76rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); }
.live-seen { align-self: flex-end; margin-top: -6px; color: var(--dim); font-size: .7rem; }
.live-banner { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; font-size: .84rem;
  background: linear-gradient(135deg, rgba(142, 197, 255, .14), rgba(195, 166, 255, .16)); border: 1px solid rgba(195, 166, 255, .25); }
.live-banner i { color: var(--yellow); animation: liveTurn 2.4s infinite ease-in-out; }
@keyframes liveTurn { 50% { transform: rotate(180deg); } }

.live-form, .live-end, .live-confirm { align-self: stretch; display: grid; gap: 9px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); font-size: .86rem; animation: popIn .35s var(--spring); }
.live-form label { display: grid; gap: 4px; color: var(--muted); font-size: .78rem; }
.live-form input, .live-form select, .live-form textarea, .live-tr input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); font: inherit; font-size: .86rem; min-width: 0; width: 100%; }
.live-form textarea { resize: vertical; }
.live-form :is(input, select, textarea):focus-visible, .live-tr input:focus-visible { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(195, 166, 255, .15); }
.live-form-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.live-form-acts .btn { padding: 8px 14px; font-size: .82rem; }
.live-err { color: var(--red); font-size: .8rem; }
.live-ok { color: var(--green); }
.live-stars { display: flex; gap: 4px; }
.live-stars button { background: none; border: 0; padding: 4px; font-size: 1.35rem; color: var(--line); cursor: pointer; transition: color .15s, transform .15s; }
.live-stars button.on { color: var(--yellow); }
.live-stars button:active { transform: scale(.9); }
.live-stars button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; border-radius: 6px; }
.live-tr { display: flex; gap: 8px; flex-wrap: wrap; }
.live-tr input { flex: 1; min-width: 150px; width: auto; }
.live-tr .btn { padding: 8px 12px; font-size: .82rem; }
.live-confirm { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .live-banner i, .live-form, .live-end, .live-confirm { animation: none; } }

/* bonus.css */
/* bonus: cash / bonus split in the wallet, wagering progress, active bonus card, promotions, bonus terms table */
.bn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bn-split[hidden] { display: none; }
.bn-split > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); min-width: 0; }
.bn-split span { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bn-split span i { color: var(--green); }
.bn-split > div + div span i { color: var(--purple); }
.bn-split b { font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.bn-wager { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.bn-wager-head { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.bn-wager-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.bn-bar { height: 8px; border-radius: 99px; background: var(--panel3); overflow: hidden; }
.bn-bar i { display: block; height: 100%; width: var(--p, 0%); min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--green)); transition: width .6s var(--ease); }
.bn-wager .fine { margin: 8px 0 0; }
.bn-withdrawable { margin: 10px 0 4px; font-size: .85rem; color: var(--muted); text-align: center; }
.bn-withdrawable span { color: var(--text); font-weight: 600; }
.bn-withdrawable a, .bn-terms-link, .bn-how a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.bn-card:empty { display: none; }
.bn-card { margin-bottom: 12px; }
.bn-active, .bn-none { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(195, 166, 255, .08), transparent 60%); }
.bn-none { flex-direction: row; align-items: flex-start; gap: 14px; background: none; }
.bn-active-head { display: flex; align-items: center; gap: 12px; }
.bn-active-head > i, .bn-none > i { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(195, 166, 255, .14); color: var(--purple); }
.bn-active-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bn-active-head span, .bn-none p { font-size: .82rem; color: var(--muted); margin: 0; }
.bn-left { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.bn-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.bn-rules li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.bn-rules li:last-child { border-bottom: 0; }
.bn-rules span { color: var(--muted); }
.bn-rules b { text-align: right; }
.bn-queued { margin: 0; font-size: .82rem; color: var(--yellow); }
.bn-forfeit { color: var(--muted); }
.bn-forfeit.armed { color: var(--red); border-color: var(--red); }

.bn-wd-cash { margin: 0 0 8px; font-weight: 600; }
.bn-wd-warn { margin: 0 0 12px; }
.bn-agree { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: .85rem; cursor: pointer; }
.bn-agree input { margin-top: 3px; accent-color: var(--purple); flex-shrink: 0; }

/* header: a small gift mark while bonus funds are part of the balance */
#balanceBtn.has-bonus::before { content: '\f06b'; font-family: 'Font Awesome 7 Free'; font-weight: 900; font-size: .7rem; color: var(--purple); margin-right: 6px; }

/* promotions */
.bn-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.bn-facts i { color: var(--green); margin-right: 8px; font-size: .75rem; }
.bn-pcta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; }
.bn-terms-link { font-size: .85rem; }
.bn-how { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.bn-how h3 { margin: 0 0 14px; }
.bn-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; counter-reset: bn; }
.bn-steps li { counter-increment: bn; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--bg2); font-size: .88rem; color: var(--muted); }
.bn-steps li::before { content: counter(bn); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel3); color: var(--text); font-weight: 700; font-size: .8rem; margin-bottom: 4px; }
.bn-steps b { color: var(--text); }
.bn-how .fine { margin: 14px 0 0; }

/* bonus terms: contribution table */
.doc .doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .9rem; }
.doc .doc-table th, .doc .doc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .doc-table th { color: var(--muted); font-weight: 600; }
.doc .doc-table td:last-child, .doc .doc-table th:last-child { text-align: right; white-space: nowrap; }

/* games2.css */
/* Coin Flip and Wheel. */

/* ---------- Coin Flip ---------- */
.coin-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden;
  background: radial-gradient(ellipse 60% 45% at 50% 55%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 70%), radial-gradient(ellipse at 50% 120%, rgba(195, 166, 255, .14), transparent 60%); }
.coin-arena { position: relative; width: 220px; height: 300px; display: grid; place-items: end center; perspective: 900px; }
.flipcoin { --s: 180px; position: relative; width: var(--s); height: var(--s); margin-bottom: 60px; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin-face.heads { background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c94c 35%, #c8961c 70%, #8a6410);
  box-shadow: inset 0 0 0 8px #e0aa2c, inset 0 0 0 11px #fff0b8, inset 0 0 0 14px #b4851b, inset 0 -10px 24px rgba(0, 0, 0, .35); }
.coin-face.tails { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #ffffff, #d7dcf3 35%, #9aa3cf 70%, #5c6494);
  box-shadow: inset 0 0 0 8px #b9c0e6, inset 0 0 0 11px #ffffff, inset 0 0 0 14px #8189bb, inset 0 -10px 24px rgba(0, 0, 0, .35); }
.coin-face span { font-family: var(--slab); font-weight: 700; font-size: 84px; color: #7a540a; text-shadow: 0 2px 0 #fff2b5, 0 -1px 0 rgba(0, 0, 0, .3); }
.coin-face i { font-size: 72px; color: #4c5488; text-shadow: 0 2px 0 #fff, 0 -1px 0 rgba(0, 0, 0, .25); }
.coin-edge { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(-1px); background: #a77a16; }
.coin-shadow { position: absolute; bottom: 36px; width: 150px; height: 22px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .65), transparent 70%); opacity: .55; }
.coin-result { min-height: 2.2rem; padding: 4px 22px; border-radius: 999px; font-family: var(--slab); font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; }
.coin-result.win { background: var(--green); color: var(--ink); box-shadow: 0 0 26px rgba(159, 242, 196, .5); }
.coin-result.lose { color: var(--red); }
.coin-streak { color: var(--dim); font-size: .85rem; font-weight: 600; }
.coin-streak b { color: var(--yellow); font-size: 1rem; margin-left: 4px; }
.coin-hist span { min-width: 30px; text-align: center; }
.coin-call button { flex-direction: row; gap: 8px; padding: 10px; }
.coin-mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem var(--slab); flex-shrink: 0; }
.coin-mini.heads { background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c94c 45%, #b4851b); color: #7a540a; }
.coin-mini.tails { background: radial-gradient(circle at 35% 30%, #fff, #c9cff0 45%, #7b84b6); color: #4c5488; font-size: .62rem; }

/* ---------- Wheel ---------- */
.wheel-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(124, 77, 219, .2), transparent 70%); }
.wheel-box { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin-top: 30px; }
.wheel { width: 100%; height: 100%; display: block; border-radius: 50%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
  background: radial-gradient(circle, transparent 60%, rgba(195, 166, 255, .25) 61%, transparent 62%); }
#wheelSpin { transform-box: view-box; transform-origin: 160px 160px; }
.wheel-box::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; padding: 12px; pointer-events: none;
  background: conic-gradient(from 0deg, #8ec5ff, #c3a6ff, #9ff2c4, #8ec5ff); opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.wheel-box.win::before { opacity: 1; background: conic-gradient(var(--green), #c3ffe0, var(--green)); }
.wheel-pointer { position: absolute; z-index: 2; top: -22px; left: 50%; translate: -50% 0; width: 34px; height: 44px;
  background: linear-gradient(180deg, #fff, #c3a6ff); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.wheel-hub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2d3170, #0d0f30); border: 3px solid rgba(195, 166, 255, .5); box-shadow: 0 0 0 6px #0b0d26, 0 10px 24px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .15); }
.wheel-hub b { font-family: var(--slab); font-size: clamp(1.1rem, 3.4vw, 1.7rem); font-variant-numeric: tabular-nums; }
.wheel-box.win .wheel-hub b { color: var(--green); } .wheel-box.lose .wheel-hub b { color: var(--dim); }
.wheel-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 560px; }
.wheel-legend span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; padding: 8px 10px; border-radius: 12px; background: var(--panel2);
  border-bottom: 4px solid var(--c); transition: .25s; }
.wheel-legend b { font-variant-numeric: tabular-nums; } .wheel-legend small { color: var(--dim); font-size: .7rem; }
.wheel-legend span.hit { background: color-mix(in srgb, var(--c) 30%, var(--panel2)); transform: translateY(-4px); box-shadow: 0 8px 20px -6px var(--c); }
.seg3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Chicken Cross: a street seen from above ---------- */
.chicken-stage { padding: 0; display: flex; }
/* Time of day by difficulty: a tint painted on every lane and pavement (vertical, so the lanes line up); rain on hardcore. */
.road { --sky: none; position: relative; flex: 1; display: flex; min-height: 440px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: thin; isolation: isolate; }
.road[data-diff="medium"] { --sky: linear-gradient(180deg, rgba(255, 140, 60, .18), rgba(120, 60, 160, .14)); }
.road[data-diff="hard"] { --sky: linear-gradient(180deg, rgba(4, 6, 24, .62), rgba(10, 14, 50, .45)); }
.road[data-diff="hardcore"] { --sky: repeating-linear-gradient(105deg, transparent 0 18px, rgba(190, 210, 255, .3) 18px 19px, transparent 19px 34px), linear-gradient(180deg, rgba(8, 10, 34, .66), rgba(40, 6, 36, .5)); }
.lane::after, .walk::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--sky); }
.road[data-diff="hardcore"] .lane::after, .road[data-diff="hardcore"] .walk::after { background-size: 120px 240px, auto; animation: rain .45s linear infinite; }
@keyframes rain { to { background-position: -40px 240px, 0 0; } }
.ch-defs { position: absolute; }
.walk { flex: 0 0 116px; position: relative; z-index: 1;
  background: linear-gradient(90deg, transparent 0 calc(100% - 14px), #8a8fa8 calc(100% - 14px) calc(100% - 10px), #b4b8cc calc(100% - 10px)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 46px),
    linear-gradient(90deg, #3f8f4f 0 22px, #5d6283 22px); }
.walk.end { flex-basis: 128px; display: grid; place-items: center;
  background: linear-gradient(90deg, #b4b8cc 0 10px, #8a8fa8 10px 14px, transparent 14px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 46px), linear-gradient(90deg, #5d6283 calc(100% - 22px), #3f8f4f calc(100% - 22px)); }
.nest { position: relative; z-index: 2; font-size: 2.4rem; padding: 14px 18px 8px; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse at 50% 70%, #8a5a2b 40%, #5b3a1b 72%, transparent 74%); filter: drop-shadow(0 0 14px rgba(255, 224, 138, .6)); animation: nestGlow 2s ease-in-out infinite; }
@keyframes nestGlow { 50% { filter: drop-shadow(0 0 26px rgba(255, 224, 138, .95)); } }
.lane { flex: 0 0 116px; position: relative; overflow: hidden; transition: filter .3s; background: var(--felt-grain), linear-gradient(90deg, #2c2f40, #34384c 50%, #2c2f40); }
.lane::before { content: ''; position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; z-index: 1; background: repeating-linear-gradient(180deg, #e9ecf8 0 26px, transparent 26px 50px); opacity: .7; }
.lane[data-lane="10"]::before { display: none; }
.veh { position: absolute; left: 50%; top: -140px; width: 44px; translate: -50% 0; z-index: 2; animation: drive var(--d, 3s) linear var(--dl, 0s) infinite; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .55)); }
.veh.truck { width: 48px; }
.veh-svg { display: block; width: 100%; height: auto; }
@keyframes drive { to { top: calc(100% + 20px); } }
.road[data-diff="hard"] .veh::after, .road[data-diff="hardcore"] .veh::after { content: ''; position: absolute; left: 50%; top: 92%; width: 70px; height: 110px; translate: -50% 0;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 247, 194, .55), transparent 70%); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.lane.passed .veh, .lane.blocked .veh:not(.hit) { animation: none; top: -64px; }
.lane.passed .veh + .veh, .lane.blocked .veh + .veh:not(.hit) { top: -150px; }
.lane .barrier { position: absolute; left: 8px; right: 8px; top: 64px; height: 12px; border-radius: 3px; z-index: 3; opacity: 0; translate: 0 -10px; transition: .35s var(--spring);
  background: repeating-linear-gradient(-45deg, #ff4d6d 0 10px, #fff 10px 20px); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.lane.passed .barrier, .lane.blocked .barrier { opacity: 1; translate: 0 0; }
.crosswalk { position: absolute; left: 10px; right: 10px; top: calc(50% - 60px); height: 120px; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .75) 0 12px, transparent 12px 24px); border-radius: 2px; }
.lane.next .crosswalk { opacity: .55; animation: zebra 1.4s ease-in-out infinite; }
.lane.passed .crosswalk { opacity: .3; }
@keyframes zebra { 50% { opacity: .9; } }
.lane.next { cursor: pointer; filter: brightness(1.12); }
.lane-mult { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 3; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: .82rem; white-space: nowrap; transition: .3s var(--spring);
  background: rgba(10, 12, 34, .82); border: 1.5px solid rgba(255, 224, 138, .45); color: #ffe08a; font-variant-numeric: tabular-nums; }
.lane.next .lane-mult { border-color: #fff; color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .25); }
.lane.passed .lane-mult { background: var(--green); color: var(--ink); border-color: transparent; scale: 1.08; }
.veh.hit { animation: carHit .38s cubic-bezier(.5, 0, 1, .6) forwards; z-index: 5; }
@keyframes carHit { from { top: -140px; } to { top: calc(50% - 50px); } }
.chick { position: absolute; top: calc(50% - 32px); left: 30px; width: 64px; height: 64px; z-index: 6; transition: left .4s var(--spring); filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45)); }
.chick-svg { width: 100%; height: 100%; display: block; animation: bob 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-2deg); } }
.chick-svg .legs path { transform-origin: 50% 0; transform-box: fill-box; }
.chick.hop .chick-svg { animation: chHop .4s ease-out; }
.chick.hop .l1 { animation: leg .2s linear 2 alternate; } .chick.hop .l2 { animation: leg .2s linear 2 alternate-reverse; }
@keyframes chHop { 50% { transform: translateY(-30px) scale(1.08) rotate(6deg); } }
@keyframes leg { to { transform: rotate(35deg); } }
.chick.dead .chick-svg { animation: none; transform: scaleY(.28) scaleX(1.25) translateY(60px); filter: grayscale(.4) brightness(.85); transition: transform .25s ease-in; }
.chick.won .chick-svg { animation: chWin .6s ease-in-out 3; }
@keyframes chWin { 50% { transform: translateY(-22px) rotate(-8deg) scale(1.1); } }
.feather { position: absolute; z-index: 7; width: 10px; height: 18px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: linear-gradient(#fff, #d9def2); pointer-events: none;
  animation: feather 1.3s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes feather { to { transform: translate(var(--fx), calc(var(--fy) + 60px)) rotate(var(--fr)); opacity: 0; } }

@media (max-width: 600px) {
  .road { min-height: 380px; }
  .walk, .lane { flex-basis: 96px; }
  .crosswalk { top: calc(50% - 52px); height: 104px; }
  .chick { top: calc(50% - 27px); width: 54px; height: 54px; }
  .coin-arena { width: 180px; height: 240px; } .flipcoin { --s: 140px; margin-bottom: 46px; }
  .coin-face span { font-size: 64px; } .coin-face i { font-size: 56px; }
  .wheel-box { margin-top: 26px; width: min(320px, 100%); }
  .wheel-legend span { min-width: 60px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) { .wheel-legend span { transition: none; } .veh, .lane::after, .walk::after, .chick-svg, .nest, .lane.next .crosswalk { animation: none; } }

/* themes.css */
/* Per-game look: each original gets its own scene and accent (its --tint from polish.css), instead of one generic stage.
   Presentation only; no game element changes size or position here except where noted. */

/* Controls pick up the game's accent: active tab, focus, primary button edge, header icon. */
.view[id^="view-"] .controls .tabs.full button.active { box-shadow: inset 0 -2px 0 var(--tint, var(--purple)); }
.view[id^="view-"] .controls .btn-primary { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--tint, var(--purple)) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.view[id^="view-"] .controls { background: linear-gradient(180deg, color-mix(in srgb, var(--tint, var(--purple)) 6%, transparent), transparent 40%); }
.view[id^="view-"] .game-head .gh-icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint, var(--purple)) 40%, transparent), 0 10px 26px -10px var(--tint, var(--purple)); }
.view[id^="view-"] .game-wrap { border-color: color-mix(in srgb, var(--tint, var(--purple)) 22%, var(--line)); }

/* ---------- Dice: a lit gaming table with a scored rail ---------- */
#view-dice .stage { background:
  radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 14px), linear-gradient(180deg, #121736, #0d1029); }
#view-dice .dice-track { background: linear-gradient(180deg, #0a0c22, #141838); border: 1px solid color-mix(in srgb, var(--tint) 30%, var(--line));
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .55), 0 0 30px -12px var(--tint); }
#view-dice .dice-labels span { position: relative; padding-top: 8px; }
#view-dice .dice-labels span::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 6px; background: rgba(255, 255, 255, .25); border-radius: 1px; }
#view-dice .dice-bubble { border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); background: linear-gradient(180deg, #232a5c, #171c44); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7), 0 0 24px -8px var(--tint); }
#view-dice .dice-bubble::after { border-top-color: #171c44; }
#view-dice .dice-bubble.win { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7), 0 0 30px -4px var(--green); }
#view-dice .dice-stats .inp { background: rgba(8, 10, 30, .65); }

/* ---------- Limbo: altitude gauge in a starfield ---------- */
#view-limbo .stage { background:
  radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 18%, #fff, transparent),
  radial-gradient(1px 1px at 82% 62%, #fff, transparent), radial-gradient(1px 1px at 45% 88%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 30%, #cfe3ff, transparent),
  radial-gradient(ellipse 50% 50% at 50% 52%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 70%), linear-gradient(180deg, #0a1030, #0b1c2c); }
#view-limbo .limbo-ring { box-shadow: 0 0 40px -6px color-mix(in srgb, var(--tint) 70%, transparent), inset 0 0 40px -10px color-mix(in srgb, var(--tint) 50%, transparent); }
#view-limbo .limbo-face b { text-shadow: 0 0 30px color-mix(in srgb, var(--tint) 60%, transparent); }
#view-limbo .limbo-face.win b { color: var(--green); } #view-limbo .limbo-face.lose b { color: var(--red); }

/* ---------- Crash: night sky, planet, radar grid ---------- */
#view-crash .stage { background:
  radial-gradient(circle at 9% 20%, #ffb86b 0 26px, rgba(255, 140, 80, .35) 27px 32px, transparent 33px),
  radial-gradient(1.5px 1.5px at 20% 18%, #fff, transparent), radial-gradient(1px 1px at 40% 40%, #fff, transparent), radial-gradient(1px 1px at 70% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 12%, #fff, transparent),
  radial-gradient(ellipse 80% 60% at 30% 100%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%), linear-gradient(180deg, #0b0f2e, #1c1236); }
#view-crash .crash-graph { background-image: linear-gradient(color-mix(in srgb, var(--tint) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tint) 16%, transparent) 1px, transparent 1px);
  border: 1px solid color-mix(in srgb, var(--tint) 18%, transparent); background-color: rgba(4, 6, 24, .25); }

/* ---------- Mines: armoured vault plates ---------- */
#view-mines .stage { background: radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%), linear-gradient(180deg, #0f1530, #0b1022); }
#view-mines .mines-board { padding: 12px; border-radius: 22px; background: repeating-linear-gradient(-45deg, #f2c94c33 0 12px, #0b0d26 12px 24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 50px -24px rgba(0, 0, 0, .9); }
#view-mines .mines-grid { padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #0d1130, #090c22); }
#view-mines .tile { position: relative; background: linear-gradient(160deg, #39407a, #262b5a 60%, #1e2249); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .35); }
#view-mines .tile::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 0 0, #8a91c9 0 2px, transparent 2.5px), radial-gradient(circle at 100% 0, #8a91c9 0 2px, transparent 2.5px), radial-gradient(circle at 0 100%, #8a91c9 0 2px, transparent 2.5px), radial-gradient(circle at 100% 100%, #8a91c9 0 2px, transparent 2.5px); opacity: .55; border-radius: 0; }
#view-mines .tile:not(:disabled):hover { background: linear-gradient(160deg, #4a52a0, #30367a 60%, #262b5e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 0 22px -6px var(--tint); }
#view-mines .tile.gem, #view-mines .tile.bomb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#view-mines .tile.gem::before, #view-mines .tile.bomb::before { display: none; }
#view-mines .tile.gem { background: radial-gradient(circle at 50% 45%, #1f5a50, #12302c); }
#view-mines .tile.gem.hit { background: radial-gradient(circle at 50% 45%, #b8ffdc, var(--green)); box-shadow: 0 0 26px -2px var(--green); }
#view-mines .tile.bomb.hit { box-shadow: 0 0 30px -2px var(--red); }
#view-mines .mines-hud > * { border-color: color-mix(in srgb, var(--tint) 22%, var(--line)); }

/* ---------- Plinko: neon pegboard ---------- */
#view-plinko .stage { background: radial-gradient(ellipse 55% 60% at 50% 40%, color-mix(in srgb, var(--tint) 24%, transparent), transparent 70%), linear-gradient(180deg, #120d33, #0b0a24); }
#view-plinko .peg { background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px color-mix(in srgb, var(--tint) 80%, transparent); }
#view-plinko .bin { border-radius: 8px 8px 10px 10px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 6px 14px -6px var(--c); }

/* ---------- Keno: lottery balls ---------- */
#view-keno .stage { background: radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, var(--tint) 14%, transparent), transparent 70%), linear-gradient(180deg, #151230, #0e0d24); }
#view-keno .kn { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5194, #262b5a 60%, #1a1e46); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .35); }
#view-keno .kn:hover:not(:disabled) { background: radial-gradient(circle at 35% 30%, #5a62b0, #30367a 60%, #20255a); }
#view-keno .kn.sel { background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 35%, #f2a93b 80%); color: #3a2400; }
#view-keno .kn.drawn { background: radial-gradient(circle at 35% 30%, #ff9db0, #c9304f 70%); color: #fff; box-shadow: 0 0 18px -4px var(--red); }
#view-keno .kn.sel.drawn { background: radial-gradient(circle at 35% 30%, #d6ffe9, var(--green) 55%, #1f9d5c); color: var(--ink); box-shadow: 0 0 22px -2px var(--green); }

@media (prefers-reduced-motion: reduce) { #view-mines .tile, #view-keno .kn { transition: none; } }

/* responsive.css */
@media (max-width: 1280px) {
  .row { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-left { grid-column: span 2; }
}
@media (max-width: 1150px) {
  .promos { grid-template-columns: 1fr 1fr; }
  .promos .promo:nth-child(3) { grid-column: span 2; }
  .stats { grid-template-columns: 1fr 1fr; }
  .search input { width: 120px; }
  .sports-layout { grid-template-columns: 1fr; }
  .slip { position: static; }
}
@media (max-width: 900px) {
  :root { --side: 0px; }
  .sidebar { width: 280px; transform: translateX(-100%); }
  body.side-open .sidebar { transform: none; }
  body.side-open .scrim { opacity: 1; pointer-events: auto; }
  body.side-collapsed { --side: 0px; }
  body.side-collapsed .side-tabs, body.side-collapsed .side-nav span, body.side-collapsed .side-card, body.side-collapsed .raffle div, body.side-collapsed .raffle em { display: revert; }
  .mobile-only { display: grid; }
  .search { display: none; }
  .row { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
  .game-wrap { grid-template-columns: 1fr; }
  .controls { order: 2; border-right: 0; border-top: 1px solid var(--line); }
  .ctrl-note { margin-top: 0; }
  .promos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .promos .promo:nth-child(3) { grid-column: auto; }
  .promo { scroll-snap-align: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
  .vip-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .vip-hero > div:last-child { width: 100%; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tiers .tier:last-child { grid-column: span 2; }
  .partners { grid-template-columns: 1fr; }
  .cookie { left: 16px; }
}
@media (max-width: 600px) {
  main { padding: 16px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 1.2rem; gap: 7px; }
  .brand img { width: 32px; height: 32px; }
  .topbar .brand small, .topbar .brand span { display: none; }
  .wallet .btn span, .balance .caret { display: none; }
  .wallet .btn { padding: 10px 12px; }
  .balance { padding: 8px 10px; font-size: .88rem; }
  .top-actions .icon-btn:not(.lang-btn) { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-left h1 { overflow-wrap: anywhere; }
  .hero-left { grid-column: auto; }
  .hero-card { min-height: 200px; }
  .row { grid-auto-columns: calc((100% - 2 * 12px) / 2.6); }
  .promo h2 { font-size: 1.35rem; }
  .stats { grid-template-columns: 1fr; }
  .bets-card :is(th, td):is(:nth-child(3), :nth-child(4)) { display: none; }
  .bets-card :is(th, td) { padding: 12px; }
  .crash-graph { height: 280px; }
  .reels { --h: 96px; }
  .sym { font-size: 2.4rem; }
  .seven { font-size: 3.4rem; }
  .dice-stats { grid-template-columns: 1fr; }
  .game-head .live-pill { display: none; }
  .match { grid-template-columns: 1fr; }
  .odd { flex: 1; min-width: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
  .coins { grid-template-columns: repeat(3, 1fr); }
  .otp input { width: 40px; height: 50px; }
  .lang-grid { grid-template-columns: 1fr; }
  .cookie { left: 16px; right: 16px; bottom: 90px; max-width: none; }
  .pop { inset: 64px 16px auto 16px; width: auto; }
  #toasts { left: 16px; right: 16px; top: 70px; }
  .toast { max-width: none; }
}

.field, .field-row > *, .dice-stats > * { min-width: 0; }
.inp input, .inp select { width: 100%; }
.side-nav a { min-width: 0; }
.side-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn-block, .field-row .btn { white-space: normal; text-align: center; line-height: 1.25; }
.field-row .btn { min-width: 0; padding: 10px 8px; }
.tabs button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field label > span, .field label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-head > div { min-width: 0; }
.game-head h1 { overflow-wrap: anywhere; }
.bets-card { overflow-x: auto; }
.match-teams b, .slip-item div, .partner b { min-width: 0; overflow-wrap: anywhere; }
.dice-board, .dice-track { overflow: visible; }
.dice-result { margin: 0 0 14px; }
.hc-foot span, .method b, .method span { overflow-wrap: anywhere; }
.emoji { font-size: 1.6rem; line-height: 1; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Small phones: guests get Log in from the account menu, so the top bar fits next to the Demo switch. */
@media (max-width: 520px) {
  .top-actions { gap: 6px; }
  .top-actions .auth-login { display: none; }
  .top-actions .btn { padding-inline: 12px; }
  .demo-switch { padding: 8px 6px; }
  .wallet { min-width: 0; }
  .wallet > .btn { display: none; } /* the balance button opens the wallet too */
}
@media (max-width: 420px) {
  body:not(.authed) .top-actions .lang-btn { display: none; } /* guest bar is full with Register; language stays in the sidebar */
}