/* ============================================================
   VISUAL POLISH v2 — additive enhancement pass.
   Layered last for cascade priority. Themed via CSS variables
   so both dark and light modes benefit. No game logic touched.
============================================================ */
/* fonts: --disp and --body come from base.css (the Truehouse brand) */

html{scroll-behavior:smooth}
body{text-rendering:optimizeLegibility}
::selection{background:rgba(217,180,90,.35);color:var(--txt)}

/* themeable, slimmer scrollbar */
*{scrollbar-width:thin;scrollbar-color:#304e40 transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#375a4a,#21372d);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#45725d,#2a4639);background-clip:padding-box}

/* keyboard-accessible focus rings (don't fire on mouse clicks) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}

/* ---- ambient animated background ---- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .aurora{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.bgfx .a1{width:70vw;height:50vw;left:-10vw;top:-26vw;opacity:.5;
  background:radial-gradient(circle,rgba(31,91,69,.55),transparent 70%)}
.bgfx .a2{display:none}
.bgfx .a3{display:none}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vw) scale(1.14)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-4vw) scale(1.1)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,4vw) scale(1.18)}}
.bgfx .grid{position:absolute;inset:0;opacity:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%)}
body[data-theme="light"] .bgfx .a1{opacity:.22}
body[data-theme="light"] .bgfx .a2{opacity:.16}
body[data-theme="light"] .bgfx .a3{opacity:.14}
body[data-theme="light"] .bgfx .grid{background-image:linear-gradient(rgba(16,31,24,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,31,24,.045) 1px,transparent 1px)}

/* ---- buttons: subtle gradient + press + sheen ---- */
.btn{letter-spacing:.2px}
.btn.primary{background:var(--btc)}
.btn.primary:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.97)!important}
.iconbtn:active{transform:scale(.92)!important}
.bigbet{position:relative;overflow:hidden;letter-spacing:.3px}
.bigbet::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);
  transform:translateX(-140%);transition:transform .6s ease}
.bigbet:hover::after{transform:translateX(140%)}
.bigbet:active{transform:scale(.985)}

/* ---- inputs: focus glow ---- */
.inp:focus,.gamesearch:focus{box-shadow:0 0 0 3px rgba(198,155,47,.18)}

/* ---- game cards: light sweep on hover + crisper label ---- */
.gcard .meta{z-index:4}
.gcard::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s ease}
.gcard:hover::after{transform:translateX(130%)}
.rtp-pill{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--win) 22%,transparent)}

/* ---- topbar: stronger glass ---- */
.topbar{backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);background:rgba(12,17,15,.55)}
body[data-theme="light"] .topbar{background:rgba(255,255,255,.6)}
.bal .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.bal .chip .btc-i{text-shadow:0 0 12px rgba(247,147,26,.55)}
.av{box-shadow:0 0 0 2px rgba(255,255,255,.10),0 4px 12px rgba(224,195,122,.35)}

/* ---- panels: hairline top highlight + soft depth ---- */
.panel{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -22px rgba(0,0,0,.7)}

/* ---- jackpot: the amount in solid gold (brand: no shimmer) ---- */
.jb-amount{color:var(--gold)}

/* ---- category tabs: glow on active ---- */
.cat.on{box-shadow:none}

/* ---- nav active: brighter rail ---- */
.nav button.on .ic{box-shadow:none}

/* ---- KPI cards: accent top edge ---- */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--btc),#dbb963)}

/* ---- modal entrance refinement ---- */
.modal{box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset}

/* ---- splash: gentle logo pulse ---- */
.splash-logo{animation:splashpulse 2.6s ease-in-out infinite}
@keyframes splashpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---- lobby cards: staggered entrance ---- */
.cards .gcard{animation:cardIn .45s cubic-bezier(.2,.8,.2,1) backwards}
.cards .gcard:nth-child(1){animation-delay:.03s}
.cards .gcard:nth-child(2){animation-delay:.06s}
.cards .gcard:nth-child(3){animation-delay:.09s}
.cards .gcard:nth-child(4){animation-delay:.12s}
.cards .gcard:nth-child(5){animation-delay:.15s}
.cards .gcard:nth-child(6){animation-delay:.18s}
.cards .gcard:nth-child(7){animation-delay:.21s}
.cards .gcard:nth-child(8){animation-delay:.24s}
.cards .gcard:nth-child(n+9){animation-delay:.27s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}


/* ---- toast: accent bar + scale-in ---- */
.toast{box-shadow:0 14px 36px rgba(0,0,0,.55);border-left-width:3px}
.toast.win{border-left-color:var(--win)}
.toast.lose{border-left-color:var(--lose)}

/* ---- live feed / history rows: smoother hover ---- */
.tbl tr{transition:background .12s}

/* ---- hero arrows: always faintly visible, full on hover ---- */
.hero-arrow{opacity:.35}
.hero:hover .hero-arrow{opacity:1}

/* ---- win ticker items: subtle hover ---- */
.wt-item{transition:transform .15s,border-color .15s}
.wt-item:hover{transform:translateY(-2px);border-color:var(--line2)}

/* ---- hero slides: depth overlay + sheen ---- */
.hero-slide::before{content:'';position:absolute;inset:0;pointer-events:none;
  display:none}
.hero{box-shadow:0 18px 44px -26px rgba(0,0,0,.8)}
.hero-slide .h-btn{box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* ---- page titles: accent underline ---- */
h2.title{display:inline-block;position:relative;margin-bottom:14px}
h2.title::after{content:'';position:absolute;left:0;bottom:-7px;height:3px;width:48px;border-radius:3px;
  background:linear-gradient(90deg,var(--btc),#dbb963)}

/* ---- demo pill: gentle attention pulse ---- */
.demo-pill{animation:demopulse 3.4s ease-in-out infinite}
@keyframes demopulse{0%,100%{border-color:rgba(217,180,90,.28)}50%{border-color:rgba(217,180,90,.55)}}

/* ---- win ticker label glow ---- */
.wt-label{text-shadow:none}

/* ---- jackpot trophy bob ---- */
.jb-trophy{animation:trophybob 3s ease-in-out infinite}
@keyframes trophybob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}

/* ---- respect reduced-motion preferences ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Player operations pages: inbox, support, rewards, security and staff tools. */
.skip-link{position:fixed;left:12px;top:-60px;z-index:10000;padding:12px 16px;background:var(--btc);color:var(--on-btc);border-radius:6px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:700px){.bigbet,.btn,.iconbtn,.mobile-tabs button{min-height:44px}.content{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.gameshell{grid-template-columns:minmax(0,1fr)!important}}
.helpgrid,.reward-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:16px 0}
.helpgrid .panel,.helpform,.account-security{padding:18px}
.helpgrid p,.policy-copy p{color:var(--mut);margin-top:8px}
.plnote a{color:var(--btc2);text-decoration:underline;text-underline-offset:2px}
.plnote a:hover{color:var(--btc);text-decoration-thickness:2px}
.helpform{display:grid;gap:12px;margin-top:16px}
.helpform .field{display:grid;gap:6px}
.helpform textarea{font:inherit;resize:vertical}
.reward-kpis>div{display:grid;gap:5px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.reward-kpis small,.device-row small,.ticket-row small{color:var(--mut);display:block}
.reward-kpis strong{font:600 19px var(--mono);overflow-wrap:anywhere}
.tier-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:18px}
.tier-list>div,.device-row,.ticket-row,.notification{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tier-list span,.notification small{color:var(--mut)}
.notification{align-items:flex-start}
.notification.unread{border-left:3px solid var(--btc);background:color-mix(in srgb,var(--panel) 88%,var(--btc))}
.notification p{color:var(--mut);margin:4px 0}
.notification-actions{display:flex;gap:6px;margin-left:auto}
.empty-state,.error-state{padding:28px;text-align:center;color:var(--mut)}
.empty-state p{margin-top:6px}
.device-row{display:grid;grid-template-columns:1fr auto;margin-top:8px}
.device-row small{grid-column:1/-1;overflow-wrap:anywhere}
.account-security{margin-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.policy-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.policy-directory{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.policy-directory h3{margin-bottom:4px}
.policy-copy{max-height:65vh;overflow:auto;padding:8px 0}
.policy-copy h3{margin:20px 0 4px}
.policy-copy section:first-child h3{margin-top:4px}
.policy-copy section p{margin:8px 0;line-height:1.65;white-space:pre-line}
.ticket-row{justify-content:flex-start}
.ticket-message{padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:var(--radius);overflow-wrap:anywhere}
.ticket-message small{display:block;color:var(--mut)}
.ticket-message p{white-space:pre-wrap;margin-top:8px}
.ticket-row span,.ticket-row small{margin-left:auto}
.player-result{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:12px;text-align:left;border-bottom:1px solid var(--line);background:var(--panel)}
.player-result:hover{background:var(--panel2)}
.player-result small{color:var(--mut);overflow-wrap:anywhere}
.textbtn{color:var(--btc2);text-decoration:underline;padding:8px 4px;min-height:44px}
#admTools{margin:14px 0;padding:18px}
#admTools h3{margin:18px 0 8px}
#admTools>.row{display:grid;grid-template-columns:minmax(0,1fr) auto}
#inboxBtn{position:relative;min-width:44px;min-height:44px}
#inboxCount{position:absolute;right:0;top:0}
button,input,select,textarea{scroll-margin-bottom:30vh}
@media(max-width:600px){
  .helpgrid{grid-template-columns:1fr}
  .notification{display:grid;grid-template-columns:1fr}
  .notification-actions{margin-left:0}
  .reward-kpis{grid-template-columns:1fr 1fr}
  .ticket-row{align-items:flex-start;flex-direction:column}
  .ticket-row span,.ticket-row small{margin-left:0}
  #admTools>.row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.notification,.page{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ==== PHONE GAME LAYOUT (2026-11-06): the bet button right under the board, like Duel/Stake ====
   Below 900px the board comes first (base.css); inside the controls the main button (and the actions that
   belong to it: Blackjack's hit/stand, Mines/Chicken's random pick or cash-out row) move to the top, so a
   player can keep betting without scrolling past the options. */
@media(max-width:900px){
  .page:not(#page-fair) .gameshell>.panel{display:flex;flex-direction:column}
  .page:not(#page-fair) .gameshell>.panel>.bigbet{order:-3;margin:0 0 12px}
  .page:not(#page-fair) .gameshell>.panel>h3,.page:not(#page-fair) .gameshell>.panel>h4{order:-4}
  .page:not(#page-fair) .gameshell>.panel>.bigbet+.btn.ghost,
  .page:not(#page-fair) .gameshell>.panel>.bjacts{order:-2}
}

/* ==== PHONE TOP BAR (2026-11-06): it must never be wider than the screen (it widened the whole page, which
   pushed the bottom tabs off the edge). Sound and theme live in the menu on phones. ==== */
.mob-only{display:none!important}
@media(max-width:600px){
  .mob-only{display:flex!important}
  .side nav .lbl.mob-only{display:block!important}
  #muteBtn,#themeBtn{display:none!important}
  .topbar{gap:8px}
  .topbar>div{gap:8px!important;min-width:0}
  .topbar .bal{min-width:0}
}

/* ==== HERO CAROUSEL (2026-11-06): text never under the arrows; on phones swipe + dots, no arrows ==== */
.hero-slide{padding:0 64px}
@media(max-width:600px){
  .hero-arrow{display:none!important}
  .hero{height:206px}
  .hero-slide{padding:14px 18px 18px}
  .hero-dots{left:auto;right:16px;transform:none;bottom:16px}
  .hero-slide .h-copy{max-width:100%;padding-bottom:4px}
}

/* ==== TABLES ON PHONES (2026-11-06): a wide table scrolls inside its own box instead of widening the page ==== */
@media(max-width:700px){
  table.tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{white-space:nowrap}
}

/* ==== COMPACT GAME HEADER ON PHONES (2026-11-06): the board and its bet button start near the top ==== */
@media(max-width:600px){
  .ghead{gap:8px;margin-bottom:12px;align-items:stretch}
  .ghead .ghl{width:100%}
  .ghead .title{font-size:24px;margin-bottom:0}
  .ghead .title::after{display:none}
  .ghead .sub{display:none}
  .ghr{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;margin:0 -2px;padding:0 2px 2px}
  .ghr::-webkit-scrollbar{display:none}
  .gchip{flex:0 0 auto}
  .bigbet .kbd{display:none}
}
@media(hover:none){.bigbet .kbd{display:none}}

/* ==== LOBBY STRIPS ON PHONES (2026-11-06): one line each ==== */
@media(max-width:600px){
  .jb-amount{white-space:nowrap;font-size:19px}
  .bpstrip{gap:8px}
  .bpstrip>*{white-space:nowrap}
  .bpstrip>span:not(:first-child){font-size:12px}
}

#lobbyGamesTitle{scroll-margin-top:84px}