/* Lucky Diamond Royal V52 — exact mobile reference homepage + compact payment rows. */
:root{
  --v52-gold:#fff34a;
  --v52-panel:#210d29;
  --v52-page:#030106;
  --v52-edge:#43204d;
}

body[data-page="home"]{
  min-width:320px!important;
  color:#fff!important;
  background:var(--v52-page)!important;
}
body[data-page="home"] #app{
  width:100%!important;
  min-height:100vh!important;
  padding:0 0 calc(76px + env(safe-area-inset-bottom))!important;
  background:
    radial-gradient(ellipse 80% 34% at 50% 19%,rgba(83,12,91,.28),transparent 72%),
    #030106!important;
}

/* Reference banner: one compact image-backed header with centered identity. */
body[data-page="home"] .v51-hero{
  position:relative!important;
  width:calc(100% - 16px)!important;
  height:27.4vw!important;
  min-height:88px!important;
  max-height:256px!important;
  margin:10px 8px 0!important;
  overflow:hidden!important;
  border:1px solid rgba(87,43,97,.28)!important;
  border-radius:20px 20px 0 0!important;
  background:
    linear-gradient(180deg,rgba(5,0,10,.12),rgba(5,0,10,.16) 66%,rgba(4,0,8,.85)),
    url('../assets/promo-treasure-v1.png') center 50%/cover no-repeat!important;
}
body[data-page="home"] .v51-hero::before{
  background:linear-gradient(90deg,rgba(3,0,7,.5),transparent 28%,transparent 72%,rgba(3,0,7,.5))!important;
}
body[data-page="home"] .v51-brand{
  top:44%!important;
  width:80%!important;
  gap:10px!important;
  padding:0!important;
}
body[data-page="home"] .v51-logo-shell{
  flex:0 0 12.3vw!important;
  width:12.3vw!important;
  height:12.3vw!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:112px!important;
  max-height:112px!important;
  padding:4px!important;
  border:0!important;
  border-radius:4px!important;
  background:rgba(31,5,51,.72)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.48)!important;
}
body[data-page="home"] .v51-brand-copy h1{
  font-size:clamp(18px,4.4vw,43px)!important;
  letter-spacing:.025em!important;
  line-height:.94!important;
  text-shadow:0 1px 0 #914c00,0 3px 7px #000!important;
}
body[data-page="home"] .v51-brand-subtitle{
  margin-top:7px!important;
  padding-left:.25em!important;
  font-size:clamp(7px,1.7vw,17px)!important;
  letter-spacing:.36em!important;
}

/* Search and filter match the supplied bar while retaining live filtering. */
body[data-page="home"] .home-search-slot{
  width:calc(100% - 16px)!important;
  margin:14px 8px 0!important;
}
body[data-page="home"] .v51-search-wrap{position:relative!important}
body[data-page="home"] .v51-search{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 34px 54px!important;
  align-items:center!important;
  height:42px!important;
  min-height:42px!important;
  overflow:hidden!important;
  border:1px solid #3f2147!important;
  border-radius:13px!important;
  background:#28112f!important;
  box-shadow:0 5px 11px rgba(0,0,0,.45)!important;
}
body[data-page="home"] .v52-search-icon{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
}
body[data-page="home"] .v52-search-icon svg{
  width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;
}
body[data-page="home"] .v51-search #game-search-input{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:clamp(14px,3.8vw,34px)!important;
  font-weight:500!important;
}
body[data-page="home"] .v51-search #game-search-input::placeholder{
  color:#b9aebc!important;-webkit-text-fill-color:#b9aebc!important;
}
body[data-page="home"] .v51-search #game-search-input:focus{box-shadow:none!important}
body[data-page="home"] #game-search-clear{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:20px!important;
  box-shadow:none!important;
}
body[data-page="home"] #game-search-clear[hidden]{visibility:hidden!important;pointer-events:none!important}
body[data-page="home"] #app-search-filter{
  display:grid!important;
  place-items:center!important;
  align-self:stretch!important;
  width:54px!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid #542063!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#6b1c86,#6d1688)!important;
  box-shadow:none!important;
  color:var(--v52-gold)!important;
}
body[data-page="home"] #app-search-filter svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linejoin:round}
body[data-page="home"] .game-search-results{top:48px!important;z-index:5100!important}

/* Catalog heading and four-across reference cards. */
body[data-page="home"] #games-section{
  width:100%!important;
  margin:0!important;
  padding:24px 8px 118px!important;
}
body[data-page="home"] .games-sec-head{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  height:24px!important;
  margin:0 3px 12px!important;
}
body[data-page="home"] .games-sec-head::before{display:none!important;content:none!important}
body[data-page="home"] .v52-gamepad{display:grid!important;place-items:center!important;color:var(--v52-gold)!important}
body[data-page="home"] .v52-gamepad svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-page="home"] #games-section .sec-title{
  flex:1!important;
  margin:0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:900 clamp(14px,4vw,35px)/1 Arial,sans-serif!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 3px #000!important;
}
body[data-page="home"] .view-all-games{
  display:block!important;
  flex:none!important;
  padding:4px 0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:clamp(13px,3.4vw,30px)!important;
  box-shadow:none!important;
}
body[data-page="home"] .view-all-games::after{content:"  ❯"!important}
body[data-page="home"] .games-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px 7px!important;
  align-items:start!important;
}
body[data-page="home"] #games-section .game-card{
  display:block!important;
  min-width:0!important;
  padding:5px 5px 8px!important;
  overflow:hidden!important;
  border:1px solid #45234e!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#24102b,#1c0b22)!important;
  box-shadow:inset 0 2px rgba(255,255,255,.05),0 5px 0 #09030c,0 8px 13px rgba(0,0,0,.4)!important;
}
body[data-page="home"] #games-section .game-card-main{
  display:block!important;width:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
body[data-page="home"] #games-section .game-image-frame{
  width:100%!important;
  aspect-ratio:1!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:8px!important;
  background:#16071d!important;
  box-shadow:none!important;
}
body[data-page="home"] #games-section .game-image-frame img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:8px!important}
body[data-page="home"] #games-section .game-name{
  display:block!important;
  min-height:0!important;
  margin:6px 0 0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:900 clamp(8px,2.4vw,20px)/1.05 Arial,sans-serif!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  text-align:center!important;
}
body[data-page="home"] #games-section .game-name::after{display:none!important;content:none!important}
body[data-page="home"] #games-section .game-online-status{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
  margin-top:6px!important;
  color:#38ee6e!important;
  font-size:clamp(8px,2.2vw,18px)!important;
  font-weight:500!important;
}
body[data-page="home"] #games-section .game-online-status span{width:7px!important;height:7px!important;background:#39ef70!important;box-shadow:0 0 8px #39ef70!important}
body[data-page="home"] #about-section,
body[data-page="home"] .site-purpose-notice,
body[data-page="home"] footer,
body[data-page="home"] #customer-account-button{display:none!important}

/* Five-button fixed dashboard with the raised profile control. */
body[data-page="home"] .royal-bottom-nav{
  position:fixed!important;
  z-index:5000!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:100%!important;
  height:66px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:end!important;
  gap:4px!important;
  padding:4px 4px calc(4px + env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
  border:1px solid #44204d!important;
  border-bottom:0!important;
  border-radius:15px 15px 0 0!important;
  background:linear-gradient(180deg,#24102b,#130619)!important;
  box-shadow:0 -5px 17px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06)!important;
}
body[data-page="home"] .royal-bottom-item{
  width:100%!important;
  height:57px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  padding:3px 1px!important;
  border:1px solid rgba(94,42,106,.65)!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,#3d164b,#2b0b37)!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 3px 0 #09030c!important;
}
body[data-page="home"] .royal-bottom-item:nth-child(2){background:linear-gradient(145deg,#71198d,#48105b)!important}
body[data-page="home"] .royal-bottom-item:nth-child(4){background:linear-gradient(145deg,#1769b4,#0d3f7d)!important}
body[data-page="home"] .royal-bottom-item:nth-child(5){background:linear-gradient(145deg,#a66b08,#704202)!important}
body[data-page="home"] .royal-bottom-item .nav-icon{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;color:#fff!important;background:none!important;border:0!important;box-shadow:none!important}
body[data-page="home"] .royal-bottom-item .nav-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-page="home"] .royal-bottom-item b{font-size:9px!important;font-weight:700!important;white-space:nowrap!important}
body[data-page="home"] .royal-bottom-item.active{color:var(--v52-gold)!important}
body[data-page="home"] .royal-bottom-item[data-bottom-action="account"]{
  height:58px!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-page="home"] .royal-bottom-item[data-bottom-action="account"] .nav-icon{
  width:54px!important;
  height:54px!important;
  margin-top:-30px!important;
  border:3px solid #692079!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#9d20ce,#6c0c99)!important;
  color:var(--v52-gold)!important;
  box-shadow:inset 0 2px rgba(255,255,255,.13),0 5px 0 #31063f,0 7px 15px rgba(0,0,0,.45)!important;
}
body[data-page="home"] .royal-bottom-item[data-bottom-action="account"] .nav-icon svg{width:31px;height:31px}
body[data-page="home"] .royal-bottom-item[data-bottom-action="account"] b{margin-top:-1px!important;font-size:10px!important}

/* Add Score: compact, readable full-width payment list without feature changes. */
#add-score-modal{padding:6px!important;align-items:start!important;overflow:auto!important}
#add-score-modal .add-score-recharge-card{
  width:min(960px,calc(100vw - 12px))!important;
  max-height:calc(100dvh - 12px)!important;
  margin:0 auto!important;
  padding:46px 12px 14px!important;
  overflow:auto!important;
  border-radius:15px!important;
}
#add-score-modal .add-score-recharge-card>h2{position:absolute!important;top:12px!important;left:48px!important;right:48px!important;margin:0!important}
#add-score-modal .add-score-layout{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr)!important;gap:14px!important;align-items:start!important}
#add-score-modal .add-score-payment-side,
#add-score-modal .add-score-amount-side{min-width:0!important;padding:14px!important;border-radius:15px!important}
#add-score-modal .add-score-payment-side h3{margin:0 0 5px!important;font-size:21px!important}
#add-score-modal .add-score-payment-side>p{margin:0 0 10px!important;font-size:12px!important;line-height:1.45!important}
#add-score-modal .score-payment-options{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  width:100%!important;
  max-height:min(48dvh,430px)!important;
  padding:3px 6px 7px 1px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
#add-score-modal .score-payment-option{
  width:100%!important;
  min-width:0!important;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr) 22px!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px!important;
  overflow:hidden!important;
  border-radius:12px!important;
}
#add-score-modal .score-payment-image-button{
  grid-column:1!important;
  grid-row:1!important;
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  margin:0!important;
}
#add-score-modal .score-payment-info{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  display:grid!important;
  gap:6px!important;
}
#add-score-modal .score-payment-info>strong{
  display:block!important;
  min-width:0!important;
  color:#0b3547!important;
  font-size:15px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#add-score-modal .score-payment-note{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
  padding:6px!important;
}
#add-score-modal .score-payment-note span{
  min-width:0!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  font-size:11px!important;
  line-height:1.25!important;
}
#add-score-modal .score-copy-payment{
  width:auto!important;
  min-width:76px!important;
  min-height:32px!important;
  padding:0 8px!important;
  font-size:10px!important;
}
#add-score-modal .score-payment-check{grid-column:3!important;grid-row:1!important;width:22px!important}

@media(max-width:760px){
  body[data-page="home"] .v51-hero{min-height:88px!important;height:27.4vw!important}
  body[data-page="home"] .v51-brand{top:44%!important;width:80%!important;gap:10px!important;padding:0!important}
  body[data-page="home"] .v51-logo-shell{flex-basis:12.3vw!important;width:12.3vw!important;height:12.3vw!important;min-width:42px!important;min-height:42px!important;padding:4px!important;border-radius:4px!important}
  body[data-page="home"] .v51-brand-copy h1{font-size:clamp(18px,4.4vw,34px)!important;letter-spacing:.025em!important;white-space:nowrap!important}
  body[data-page="home"] .v51-brand-subtitle{margin-top:7px!important;font-size:clamp(7px,1.7vw,13px)!important;letter-spacing:.36em!important}
  body[data-page="home"] .home-search-slot{width:calc(100% - 16px)!important;margin-top:14px!important}
  body[data-page="home"] .v51-search #game-search-input{height:100%!important;font-size:clamp(14px,3.8vw,24px)!important;padding:0 4px!important}
  body[data-page="home"] #games-section{width:100%!important;padding-top:24px!important}
  body[data-page="home"] .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 7px!important}
  body[data-page="home"] #games-section .game-card{padding:5px 5px 8px!important;border-radius:10px!important}
  body[data-page="home"] .game-name{font-size:clamp(8px,2.4vw,14px)!important;overflow-wrap:normal!important}
  body[data-page="home"] .game-online-status{font-size:clamp(8px,2.2vw,13px)!important}
  #add-score-modal .add-score-layout{grid-template-columns:1fr!important}
  #add-score-modal .add-score-payment-side,#add-score-modal .add-score-amount-side{padding:12px!important}
  #add-score-modal .score-payment-options{max-height:none!important;overflow:visible!important;padding-right:1px!important}
  #add-score-modal .score-payment-option{grid-template-columns:60px minmax(0,1fr) 18px!important;min-height:76px!important;gap:8px!important;padding:7px!important}
  #add-score-modal .score-payment-image-button{width:60px!important;height:60px!important;min-width:60px!important}
  #add-score-modal .score-copy-payment{min-width:68px!important;padding:0 6px!important;font-size:9px!important}
  #add-score-modal .score-payment-check{display:grid!important}
}

@media(min-width:761px){
  body[data-page="home"] .home-search-slot,
  body[data-page="home"] #games-section{max-width:923px!important}
  body[data-page="home"] .v51-hero{max-width:887px!important;margin-left:auto!important;margin-right:auto!important}
  body[data-page="home"] .royal-bottom-nav{max-width:923px!important}
}