/* Lucky Diamond Royal V51 - isolated final homepage header/search and list layouts. */
:root{
  --v51-content:min(1760px,calc(100% - clamp(18px,4vw,72px)));
  --v51-gold:#ffd867;
}

/* Isolated hero classes prevent older phone-layout CSS from moving the brand. */
body[data-page="home"] .v51-hero{
  position:relative;
  z-index:4;
  box-sizing:border-box;
  width:100%;
  height:clamp(230px,28vw,350px);
  min-height:230px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  background:
    linear-gradient(180deg,rgba(12,1,22,.08),rgba(13,2,24,.03) 62%,rgba(7,1,12,.9)),
    url('../assets/promo-treasure-v1.png') center 48%/cover no-repeat;
  box-shadow:none;
}
body[data-page="home"] .v51-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 36%,rgba(121,30,164,.15),transparent 43%),
    linear-gradient(90deg,rgba(5,0,10,.48),transparent 24%,transparent 76%,rgba(5,0,10,.48));
}
body[data-page="home"] .v51-brand{
  position:absolute;
  z-index:2;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
  width:min(94%,980px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2.2vw,28px);
  padding:0 clamp(8px,2vw,24px);
  text-align:center;
}
body[data-page="home"] .v51-logo-shell{
  display:grid;
  place-items:center;
  flex:0 0 clamp(78px,10vw,130px);
  width:clamp(78px,10vw,130px);
  height:clamp(78px,10vw,130px);
  box-sizing:border-box;
  padding:8px;
  overflow:hidden;
  border:1px solid rgba(255,221,105,.52);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(52,8,78,.94),rgba(19,3,31,.94));
  box-shadow:inset 0 2px rgba(255,255,255,.14),0 7px 0 rgba(12,2,19,.82),0 15px 34px rgba(0,0,0,.48);
}
body[data-page="home"] .v51-logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
}
body[data-page="home"] .v51-brand-copy{
  min-width:0;
  margin:0;
  padding:0;
  text-align:center;
}
body[data-page="home"] .v51-brand-copy h1{
  display:block!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:#ffe26c!important;
  -webkit-text-fill-color:#ffe26c!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:clamp(28px,5.2vw,72px)!important;
  font-weight:900!important;
  line-height:.96!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 2px 0 #8a4c00,0 5px 12px rgba(0,0,0,.78),0 0 18px rgba(255,205,56,.20)!important;
}
body[data-page="home"] .v51-brand-subtitle{
  display:block!important;
  width:auto!important;
  margin:11px 0 0!important;
  padding:0 0 0 .34em!important;
  color:#f8eaff!important;
  -webkit-text-fill-color:#f8eaff!important;
  font-size:clamp(10px,1.55vw,21px)!important;
  font-weight:800!important;
  line-height:1.1!important;
  letter-spacing:.42em!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 3px 9px #000!important;
}
/* The isolated hero includes the promotion artwork, so remove the overlapping legacy hero. */
body[data-page="home"] .royal-promo{display:none!important}
body[data-page="home"] .dashboard-stack{display:none!important}

/* Text-only search. JavaScript filtering and keyboard behavior stay untouched. */
body[data-page="home"] .home-search-slot{
  position:relative!important;
  z-index:8!important;
  box-sizing:border-box!important;
  width:var(--v51-content)!important;
  max-width:none!important;
  min-height:auto!important;
  margin:clamp(16px,2.5vw,30px) auto 0!important;
  padding:0!important;
  border:0!important;
}
body[data-page="home"] .v51-search-wrap{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
body[data-page="home"] .v51-search{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-page="home"] .v51-search #game-search-input{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:clamp(58px,6vw,76px)!important;
  min-height:58px!important;
  margin:0!important;
  padding:0 clamp(18px,2.5vw,30px)!important;
  border:2px solid rgba(188,93,231,.78)!important;
  border-radius:18px!important;
  outline:0!important;
  background:linear-gradient(180deg,rgba(34,8,48,.98),rgba(17,3,25,.99))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:clamp(16px,2vw,23px)!important;
  font-weight:700!important;
  line-height:1!important;
  text-align:left!important;
  box-shadow:inset 0 2px rgba(255,255,255,.08),inset 0 -4px rgba(0,0,0,.24),0 6px 0 #08010d,0 12px 26px rgba(0,0,0,.38)!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
body[data-page="home"] .v51-search #game-search-input::placeholder{
  color:rgba(255,255,255,.82)!important;
  -webkit-text-fill-color:rgba(255,255,255,.82)!important;
  opacity:1!important;
}
body[data-page="home"] .v51-search #game-search-input:focus{
  border-color:var(--v51-gold)!important;
  box-shadow:inset 0 2px rgba(255,255,255,.09),inset 0 -4px rgba(0,0,0,.22),0 6px 0 #08010d,0 0 0 4px rgba(255,216,103,.18),0 12px 26px rgba(0,0,0,.38)!important;
}
body[data-page="home"] .v51-search #game-search-input::-webkit-search-decoration,
body[data-page="home"] .v51-search #game-search-input::-webkit-search-cancel-button,
body[data-page="home"] .v51-search #game-search-input::-webkit-search-results-button,
body[data-page="home"] .v51-search #game-search-input::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none!important}
body[data-page="home"] .game-search-icon,
body[data-page="home"] #game-search-clear,
body[data-page="home"] .game-search-status,
body[data-page="home"] #app-search-filter,
body[data-page="home"] .v51-search>span{display:none!important}

/* App catalog remains the only card grid and stays four across. */
body[data-page="home"] #games-section{
  width:var(--v51-content)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:clamp(34px,4vw,58px) 0 48px!important;
}
body[data-page="home"] .games-sec-head{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 clamp(16px,2vw,28px)!important}
body[data-page="home"] .games-sec-head .sec-rule{display:none!important}
body[data-page="home"] .games-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(8px,1.6vw,22px)!important;
  align-items:stretch!important;
}
body[data-page="home"] #v-games .game-card[hidden]{display:none!important}

/* List-first controls everywhere outside the app catalog. */
.game-hub-actions.final-game-actions,
.service-popup-list,
.passwordless-auth-options,
.customer-linked-methods,
.create-game-account-list,
.contact-message-options,
.qr-message-options,
.score-payment-options,
.score-destination-options,
.score-profile-rows,
.score-split-options,
.request-confirm-actions,
.withdrawal-rule-grid{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:1fr!important;
  align-items:stretch!important;
  gap:10px!important;
}
.game-hub-actions.final-game-actions > *,
.service-popup-list > *,
.passwordless-auth-options > *,
.customer-linked-methods > *,
.create-game-account-list > *,
.contact-message-options > *,
.qr-message-options > *,
.score-payment-options > *,
.score-destination-options > *,
.score-profile-rows > *,
.score-split-options > *,
.request-confirm-actions > *,
.withdrawal-rule-grid > *{
  width:100%!important;
  max-width:none!important;
  grid-column:1!important;
}
.game-hub-actions.final-game-actions .action-wide{grid-column:1!important}

@media(max-width:760px){
  body[data-page="home"] .v51-hero{height:clamp(205px,55vw,270px);min-height:205px}
  body[data-page="home"] .v51-brand{top:40%;width:96%;gap:10px;padding:0 8px}
  body[data-page="home"] .v51-logo-shell{flex-basis:clamp(62px,18vw,92px);width:clamp(62px,18vw,92px);height:clamp(62px,18vw,92px);padding:6px;border-radius:15px}
  body[data-page="home"] .v51-brand-copy h1{font-size:clamp(23px,7.1vw,42px)!important;letter-spacing:.018em!important}
  body[data-page="home"] .v51-brand-subtitle{margin-top:7px!important;font-size:clamp(7px,2.25vw,12px)!important;letter-spacing:.28em!important}
  body[data-page="home"] .home-search-slot{width:calc(100% - 20px)!important;margin-top:14px!important}
  body[data-page="home"] .v51-search #game-search-input{height:58px!important;border-radius:14px!important;padding:0 16px!important;font-size:16px!important}
  body[data-page="home"] #games-section{width:calc(100% - 20px)!important;padding-top:34px!important}
  body[data-page="home"] .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
  body[data-page="home"] #games-section .game-card{min-width:0!important;padding:5px 5px 8px!important;border-radius:12px!important}
  body[data-page="home"] .game-name{min-height:26px!important;margin:6px 1px 2px!important;font-size:clamp(8px,2.45vw,11px)!important;overflow-wrap:anywhere!important}
  body[data-page="home"] .game-online-status{gap:3px!important;font-size:clamp(7px,2vw,9px)!important}
  body[data-page="home"] .game-online-status span{width:6px!important;height:6px!important}
}
@media(max-width:390px){
  body[data-page="home"] .v51-brand-copy h1{font-size:clamp(21px,6.8vw,30px)!important}
  body[data-page="home"] .v51-logo-shell{flex-basis:58px;width:58px;height:58px}
}
