/* Lucky Diamond Royal V84 — mobile-first casino presentation layer.
   Presentation only: no IDs, form flow, request state, or popup behavior is changed. */

@layer ldr-v83-wallet-strip{
  html body[data-page="home"]{
    --casino-ink:#100215;
    --casino-panel:#24072f;
    --casino-panel-deep:#16041e;
    --casino-purple:#7c1ba1;
    --casino-gold:#ffd966;
    --casino-gold-deep:#9a6507;
    --casino-emerald:#35e28a;
    --casino-blue:#64c9ff;
    --casino-line:rgba(255,218,102,.55);
    color-scheme:dark;
    background:#100215!important;
  }

  html body[data-page="home"] #app#app{
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding-inline:10px!important;
    background:#100215!important;
    color:#fff8df!important;
  }

  /* Compact marquee header. */
  html body[data-page="home"] #app#app .v51-hero{
    min-height:70px!important;
    margin-inline:-10px!important;
    padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left))!important;
    border:0!important;
    border-bottom:1px solid rgba(255,220,106,.72)!important;
    border-radius:0 0 15px 15px!important;
    background-color:#260830!important;
    box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -5px 10px rgba(0,0,0,.38),0 5px 16px rgba(0,0,0,.42),0 0 18px rgba(205,76,246,.25)!important;
  }
  html body[data-page="home"] #app#app .v51-logo-shell{
    border-color:rgba(255,221,105,.75)!important;
    background:radial-gradient(circle,#5f187b,#21052c 70%)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 11px rgba(255,207,74,.32)!important;
  }
  html body[data-page="home"] #app#app .v51-brand-copy h1{
    color:#fff4c1!important;
    font-family:Georgia,"Times New Roman",serif!important;
    letter-spacing:.055em!important;
    text-shadow:0 1px #4a2600,0 0 8px rgba(255,216,92,.3)!important;
  }
  html body[data-page="home"] #app#app .v51-brand-subtitle{color:#68eda7!important;letter-spacing:.18em!important}
  html body[data-page="home"] #app#app .homepage-menu-button{
    border-color:rgba(255,223,111,.74)!important;
    background:linear-gradient(180deg,#6a247f,#351043)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.23),0 3px 7px rgba(0,0,0,.35),0 0 9px rgba(255,210,79,.17)!important;
  }
  html body[data-page="home"] #app#app .homepage-menu-button span{background:#ffe06f!important;box-shadow:0 0 4px rgba(255,217,86,.55)!important}

  /* Hero reward table reads as a casino promotion card, not a plain banner. */
  html body[data-page="home"] #app#app .royal-promo{
    position:relative!important;
    margin:12px 0 8px!important;
    padding:13px 9px 42px!important;
    border:1px solid rgba(255,220,99,.72)!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#501365 0,#2b0a38 52%,#17041f 100%)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 -6px 12px rgba(0,0,0,.28),0 7px 18px rgba(0,0,0,.36),0 0 18px rgba(229,80,255,.22)!important;
    overflow:hidden!important;
  }
  html body[data-page="home"] #app#app .royal-promo::before{
    content:""!important;
    position:absolute!important;
    inset:4px!important;
    pointer-events:none!important;
    border:1px solid rgba(255,241,177,.14)!important;
    border-radius:11px!important;
  }
  html body[data-page="home"] #app#app .royal-promo .promo-column strong{
    color:#ffe069!important;
    font-family:Georgia,"Times New Roman",serif!important;
    text-shadow:0 1px #4b2600,0 0 9px rgba(255,208,64,.4)!important;
  }
  html body[data-page="home"] #app#app .royal-promo .promo-column b{color:#fff8d9!important;letter-spacing:.04em!important}
  html body[data-page="home"] #app#app .royal-promo .promo-column span{color:#d6c5dd!important}
  html body[data-page="home"] #app#app .royal-promo .promo-divider{background:linear-gradient(180deg,transparent,#ffd969,transparent)!important;box-shadow:0 0 5px rgba(255,214,83,.3)!important}
  html body[data-page="home"] #app#app :is(.promo-eligibility-button,.home-eligibility-button){
    border:1px solid #fff0a5!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#e3ad2f,#a76508)!important;
    color:#1b0c00!important;
    -webkit-text-fill-color:#1b0c00!important;
    box-shadow:inset 0 1px rgba(255,255,255,.48),inset 0 -3px 5px rgba(93,48,0,.28),0 3px 0 #6b3d05,0 6px 12px rgba(0,0,0,.34),0 0 12px rgba(255,204,58,.3)!important;
    font-weight:950!important;
    letter-spacing:.035em!important;
  }

  /* Distinct casino rooms for saved and available games. */
  html body[data-page="home"] #app#app #games-section{
    margin:12px 0 0!important;
    padding:10px 8px 12px!important;
    border:1px solid rgba(229,124,255,.48)!important;
    border-radius:15px!important;
    background:linear-gradient(180deg,rgba(66,18,84,.84),rgba(20,4,29,.94))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.1),0 7px 20px rgba(0,0,0,.3),0 0 16px rgba(190,57,231,.14)!important;
  }
  html body[data-page="home"] #app#app :is(#games-section>.games-sec-head,#all-games-section .all-games-sec-head,#about-section>.sec-head){
    min-height:38px!important;
    margin:0 0 8px!important;
    padding:7px 9px!important;
    border:1px solid rgba(255,218,94,.28)!important;
    border-left:3px solid #ffdb5f!important;
    border-radius:9px!important;
    background:linear-gradient(90deg,rgba(118,38,143,.68),rgba(40,9,52,.22))!important;
  }
  html body[data-page="home"] #app#app .sec-title{
    color:#fff2b8!important;
    font-family:Georgia,"Times New Roman",serif!important;
    letter-spacing:.025em!important;
    text-shadow:0 1px #3a1800,0 0 6px rgba(255,211,72,.22)!important;
  }
  html body[data-page="home"] #app#app :is(.v51-search,#all-games-search-input){
    border:1px solid rgba(102,238,173,.66)!important;
    border-radius:10px!important;
    background:#13051c!important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.48),0 0 9px rgba(62,226,143,.12)!important;
  }
  html body[data-page="home"] #app#app :is(.v51-search:focus-within,#all-games-search-input:focus){
    border-color:#71f1ad!important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 2px rgba(73,231,150,.14),0 0 12px rgba(73,231,150,.28)!important;
  }
  html body[data-page="home"] #app#app #all-games-section{
    margin:14px 0 0!important;
    padding:10px 8px 12px!important;
    border:1px solid rgba(83,222,151,.55)!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,rgba(12,89,53,.62),rgba(18,5,29,.94) 62%)!important;
    box-shadow:inset 0 1px rgba(220,255,237,.1),0 7px 18px rgba(0,0,0,.28),0 0 15px rgba(50,224,139,.13)!important;
  }
  html body[data-page="home"] #app#app #all-games-section .all-game-catalog-card{
    border:1px solid rgba(255,218,96,.48)!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#32103f,#180620)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -3px 5px rgba(0,0,0,.34),0 3px 7px rgba(0,0,0,.3),0 0 8px rgba(255,205,63,.12)!important;
  }
  html body[data-page="home"] #app#app #all-games-section .all-game-catalog-image{border-color:rgba(104,239,169,.64)!important;box-shadow:inset 0 0 8px rgba(63,226,142,.16),0 0 7px rgba(63,226,142,.2)!important}
  html body[data-page="home"] #app#app #all-games-section .all-game-create-label{color:#67eda7!important}

  /* Supporting information remains quieter but unmistakably part of the same casino. */
  html body[data-page="home"] #app#app :is(#about-section,.site-purpose-notice){
    border-radius:13px!important;
    background:linear-gradient(145deg,rgba(50,13,65,.88),rgba(16,3,23,.96))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.28)!important;
  }
  html body[data-page="home"] #app#app #about-section{border-color:rgba(203,99,241,.4)!important}
  html body[data-page="home"] #app#app .site-purpose-notice{border-color:rgba(255,205,79,.45)!important}
  html body[data-page="home"] #app#app>footer{color:#d6c6db!important;background:#0d0212!important}

  /* Wallet logo is a CSS-drawn icon so it remains sharp on every phone. */
  html body[data-page="home"] #app#app .customer-wallet-icon{position:relative!important;display:block!important;width:31px!important;height:28px!important}
  html body[data-page="home"] #app#app .customer-wallet-icon::before{
    content:""!important;
    position:absolute!important;
    left:1px!important;
    top:5px!important;
    width:26px!important;
    height:19px!important;
    box-sizing:border-box!important;
    border:2px solid #ffe36f!important;
    border-radius:6px!important;
    background:linear-gradient(145deg,#8b5c09,#4f2d03)!important;
    box-shadow:inset 0 1px rgba(255,248,193,.32),0 0 8px rgba(255,211,70,.38)!important;
  }
  html body[data-page="home"] #app#app .customer-wallet-icon::after{
    content:"•"!important;
    position:absolute!important;
    right:0!important;
    top:10px!important;
    display:grid!important;
    place-items:center!important;
    width:13px!important;
    height:10px!important;
    border:1px solid #fff0a8!important;
    border-radius:4px!important;
    background:#6b4205!important;
    color:#fff0a8!important;
    font:900 11px/1 Arial,sans-serif!important;
    box-shadow:0 0 5px rgba(255,218,87,.3)!important;
  }

  /* All customer request windows share one premium casino frame. Chat keeps its
     established Messenger layout because it is not one of these card types. */
  html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card){
    border-color:rgba(255,218,99,.62)!important;
    background:linear-gradient(150deg,#351044 0,#21082c 48%,#120318 100%)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 0 2px rgba(104,31,128,.22),0 10px 28px rgba(0,0,0,.55),0 0 18px rgba(214,75,255,.18)!important;
  }
  html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card) h2{color:#ffe27a!important;font-family:Georgia,"Times New Roman",serif!important;text-shadow:0 0 7px rgba(255,213,77,.2)!important}
  html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card) :is(input,select,textarea){
    border-color:rgba(177,109,207,.72)!important;
    background:#17051f!important;
    color:#fff!important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.42)!important;
  }
  html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card) :is(input,select,textarea):focus{
    border-color:#66e9a4!important;
    outline:0!important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.38),0 0 0 2px rgba(76,231,151,.14),0 0 10px rgba(76,231,151,.22)!important;
  }

  /* Guides live beside the action they explain instead of in the homepage menu. */
  html body[data-page="home"] .context-guide-button{
    display:flex!important;
    width:100%!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin:8px 0 10px!important;
    padding:10px 14px!important;
    border:1px solid #fff0a6!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#f0c143,#b6770c)!important;
    color:#1c1000!important;
    -webkit-text-fill-color:#1c1000!important;
    font:900 13px/1.1 Arial,sans-serif!important;
    letter-spacing:.035em!important;
    box-shadow:inset 0 1px rgba(255,255,255,.52),0 3px 0 #704205,0 6px 12px rgba(0,0,0,.3),0 0 11px rgba(255,207,62,.24)!important;
    cursor:pointer!important;
  }
  html body[data-page="home"] .context-guide-button:active{transform:translateY(2px)!important;box-shadow:inset 0 1px rgba(255,255,255,.45),0 1px 0 #704205,0 3px 7px rgba(0,0,0,.3)!important}
  html body[data-page="home"] .context-guide-button>span{font-size:18px!important;line-height:1!important}
  html body[data-page="home"] #customer-wallet-modal .customer-wallet-guide{margin-top:10px!important}
  html body[data-page="home"] #home-guide-button[hidden]{display:none!important}

  @media(max-width:600px){
    html body[data-page="home"] #app#app{max-width:100%!important;padding-inline:7px!important}
    html body[data-page="home"] #app#app .v51-hero{margin-inline:-7px!important;min-height:64px!important;padding-block:7px!important}
    html body[data-page="home"] #app#app .v51-brand-copy h1{font-size:clamp(13px,4.2vw,18px)!important;line-height:1.05!important}
    html body[data-page="home"] #app#app .v51-brand-subtitle{font-size:8px!important}
    html body[data-page="home"] #app#app .royal-promo{margin-top:9px!important;padding:10px 6px 39px!important;border-radius:13px!important}
    html body[data-page="home"] #app#app .royal-promo .promo-column{padding-inline:4px!important}
    html body[data-page="home"] #app#app .royal-promo .promo-column strong{font-size:clamp(20px,7vw,30px)!important;line-height:1!important}
    html body[data-page="home"] #app#app .royal-promo .promo-column b{font-size:8px!important;line-height:1.15!important}
    html body[data-page="home"] #app#app .royal-promo .promo-column span{font-size:7px!important;line-height:1.2!important}
    html body[data-page="home"] #app#app .home-eligibility-button{min-height:44px!important;margin:7px 0 0!important}
    html body[data-page="home"] #app#app #games-section{margin-inline:0!important;padding-inline:6px!important}
    html body[data-page="home"] #app#app #all-games-section{padding-inline:6px!important}
    html body[data-page="home"] #app#app #all-games-section .all-games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
    html body[data-page="home"] #app#app #all-games-section .all-game-catalog-card{min-width:0!important;padding:4px 3px 6px!important}
    html body[data-page="home"] #app#app #all-games-section .all-game-catalog-image{width:100%!important;aspect-ratio:1!important;height:auto!important}
    html body[data-page="home"] #app#app #all-games-section .all-game-catalog-card>strong{font-size:8px!important;line-height:1.15!important}
    html body[data-page="home"] #app#app #all-games-section .all-game-create-label{font-size:7px!important;line-height:1.1!important}
    html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card){border-radius:14px!important}
    html body[data-page="home"] :is(.add-score-card,.reference-modal-card,.create-account-request-card,.create-game-account-card,.phone-modal-card) :is(input,select,textarea){font-size:16px!important}
    html body[data-page="home"] #app#app #customer-utility-strip .casino-dashboard-arch .customer-utility-card{gap:7px!important;padding-inline:6px!important}
    html body[data-page="home"] #app#app .customer-wallet-card small{font-size:10px!important;letter-spacing:.04em!important}
  }
}

/* Signed-out customers keep the casino identity and full-screen phone flow. */
html body[data-page="home"][data-customer-auth="signed-out"] .signed-out-landing{background:#0d0112;color:#fff8df}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-header{
  background:linear-gradient(180deg,rgba(20,2,27,.92),rgba(20,2,27,0));
}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-brand span{color:#fff1b6;text-shadow:0 0 8px rgba(255,214,78,.24)}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-sign-up{
  border-color:#ffe078;background:linear-gradient(180deg,#7d239a,#47105d);box-shadow:inset 0 1px rgba(255,255,255,.22),0 3px 8px rgba(0,0,0,.34),0 0 10px rgba(255,209,62,.16)
}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-login-prompt{
  border-color:rgba(255,219,97,.72);background:linear-gradient(145deg,#361045,#190520 68%);
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.48),0 0 18px rgba(206,71,248,.18)
}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-login-prompt h2{color:#fff4c5;font-family:Georgia,"Times New Roman",serif}
html body[data-page="home"][data-customer-auth="signed-out"] .landing-disclaimer{border-top:1px solid rgba(255,215,88,.22);background:#0b010f;color:#d7c9da}

@media(max-width:600px){
  html body[data-page="home"][data-customer-auth="signed-out"] .landing-login-prompt{width:100%;margin:0 auto!important;padding:17px 14px!important;border-radius:16px}
}

@media(prefers-reduced-motion:reduce){
  html body[data-page="home"] *{scroll-behavior:auto!important}
}