/* Dartava Light Balance V1
   Cross-surface visual layer for public web, PC app, phone browser and installed app.
   Product/navigation surfaces are lightened; match, camera and live-media stages stay dark. */

:root{
  --dv-light-bg:#f3f8f9;
  --dv-light-bg-2:#eaf3f5;
  --dv-light-panel:#ffffff;
  --dv-light-soft:#eef8f7;
  --dv-light-ink:#102a32;
  --dv-light-muted:#637a82;
  --dv-light-line:#d6e5e7;
  --dv-light-line-strong:#bfd6d9;
  --dv-light-teal:#0aa7a6;
  --dv-light-teal-2:#18c7bf;
  --dv-light-teal-soft:#dff6f4;
  --dv-light-coral:#e65362;
  --dv-light-shadow:0 16px 42px rgba(24,69,77,.09);
}

/* ===== OPTION 4 PUBLIC / PHONE-BROWSER SURFACE ===== */
html:has(#app.app-shell){background:var(--dv-light-bg)!important;color-scheme:light!important}
body:has(#app.app-shell){
  color:var(--dv-light-ink)!important;
  background:
    radial-gradient(circle at 86% 0%,rgba(10,167,166,.11),transparent 30rem),
    linear-gradient(180deg,#fbfefe 0%,var(--dv-light-bg) 56%,#eef5f6 100%)!important;
}
#app.app-shell{color:var(--dv-light-ink)!important}

#app .topbar{
  background:rgba(18,48,55,.97)!important;
  border-bottom-color:rgba(90,219,210,.26)!important;
  box-shadow:0 8px 28px rgba(19,49,56,.13)!important;
}
#app .desktop-nav button,
#app .profile-button,
#app .icon-btn,
#app .menu-button{color:#ecf7f7!important}
#app .desktop-nav button:hover,
#app .desktop-nav button[data-active="1"]{background:rgba(70,226,215,.10)!important;color:#7cf0e7!important}
#app .icon-btn,#app .menu-button{background:#173941!important;border-color:#2a5058!important}
#app .icon-btn:hover,#app .menu-button:hover{background:#1d454d!important;border-color:#4b777f!important}
#app .profile-button:hover{background:#183a42!important}
#app .profile-button small{color:#bdd0d3!important}
#app .avatar{background:linear-gradient(145deg,#1cc5bd,#0b8f91)!important;border-color:#6de8df!important;color:#fff!important}

#app .page{color:var(--dv-light-ink)!important}
#app :is(.page-title,.section-title,.card h1,.card h2,.card h3,.card h4,.empty strong){color:var(--dv-light-ink)!important}
#app :is(.lede,.section-sub,.muted,.card p,.choice small,.option small,.game-tile span,.player-chip small,.fixture-row small,.person-row small,.ladder-row small,.event-row small){color:var(--dv-light-muted)!important}
#app .eyebrow,#app .text-link,#app .badge{color:#078c8d!important}

#app .hero{
  min-height:430px!important;
  border-color:#cce1e3!important;
  background:#fff!important;
  box-shadow:0 22px 58px rgba(22,72,80,.11)!important;
}
#app .hero-bg{
  background-color:#fff!important;
  background-image:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 31%,rgba(246,252,252,.86) 47%,rgba(240,250,249,.20) 70%,rgba(240,250,249,.04) 100%),
    url('/r3/site/assets/home-hero-v3.webp?v=1')!important;
  background-size:cover,auto 100%!important;
  background-position:center,right center!important;
  background-repeat:no-repeat,no-repeat!important;
}
#app .hero-bg::after{
  background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,transparent 70%,rgba(244,250,250,.25) 100%)!important;
}
#app .hero::after{background:linear-gradient(180deg,transparent 72%,rgba(235,245,246,.65))!important}
#app .hero-content{color:var(--dv-light-ink)!important}
#app .hero h1{color:#102a32!important;text-shadow:none!important}
#app .hero h1 span{color:#078d91!important;text-shadow:none!important}
#app .hero p{color:#536e77!important;text-shadow:none!important}
#app .hero-rail span{
  color:#17333c!important;
  background:rgba(255,255,255,.92)!important;
  border-color:#bfd9dc!important;
  box-shadow:0 7px 22px rgba(19,68,76,.10)!important;
}

#app .card,
#app .strip-card,
#app .feature-card,
#app .side-panel,
#app .training-tool,
#app .price-card,
#app .form-card,
#app .help-card,
#app .team-member,
#app .trophy,
#app .search-box,
#app .setup-panel,
#app .night-main{
  color:var(--dv-light-ink)!important;
  background:#fff!important;
  border-color:var(--dv-light-line)!important;
  box-shadow:var(--dv-light-shadow)!important;
}
#app .card:hover{border-color:#a9d4d5!important}
#app .choice,#app .option,#app .game-tile,#app .player-chip,#app .post-actions button,#app .round{
  color:var(--dv-light-ink)!important;
  background:#f8fbfc!important;
  border-color:var(--dv-light-line)!important;
}
#app .choice:hover,#app .choice[data-selected="1"],
#app .option:hover,#app .option[data-selected="1"],
#app .game-tile:hover,#app .game-tile[data-selected="1"]{
  background:#eaf8f7!important;border-color:#7dcfcb!important;
}
#app .progress{background:#dfeaec!important}
#app .empty,#app .notice{
  color:var(--dv-light-muted)!important;
  background:#f7fbfb!important;
  border-color:#cbdfe2!important;
}

#app .btn{
  color:#17343c!important;
  background:#fff!important;
  border-color:#c6dadd!important;
  box-shadow:0 5px 16px rgba(19,66,73,.06)!important;
}
#app .btn:hover{background:#eef8f7!important;border-color:#8dcfcd!important}
#app .btn.primary{
  color:#fff!important;
  background:linear-gradient(135deg,#18c7bf,#079c9e)!important;
  border-color:#079c9e!important;
  box-shadow:0 10px 24px rgba(10,167,166,.20)!important;
}
#app .btn.red{color:#fff!important;background:linear-gradient(135deg,#ef6571,#d94857)!important;border-color:#d94857!important}
#app .btn.gold{color:#4d3500!important;background:linear-gradient(135deg,#f3d67d,#e5b94b)!important;border-color:#ddb03e!important}
#app .btn.ghost{background:rgba(255,255,255,.88)!important}

#app :is(.field input,.field select,.field textarea,.composer textarea,.search-box input){
  color:#17343c!important;background:#fff!important;border-color:#cbdde0!important;
}
#app :is(.field input,.field textarea,.composer textarea,.search-box input)::placeholder{color:#8aa0a6!important}

/* Keep strong sports/media moments dark rather than flattening the whole brand. */
#app :is(.mode-card,.match-preview,.camera-card,.challenge-main,.rating-card,.club-scoreboard,.train-main,.passport-card){
  color:#f4fbfb!important;
  border-color:#24545d!important;
}
#app :is(.mode-card,.match-preview,.camera-card,.challenge-main,.rating-card,.club-scoreboard,.train-main,.passport-card) :is(h1,h2,h3,h4,strong,b){color:#f4fbfb!important}
#app :is(.mode-card,.match-preview,.camera-card,.challenge-main,.rating-card,.club-scoreboard,.train-main,.passport-card) :is(p,small,span){color:#c5d6d9}
#app .match-preview{background:#07171c!important}
#app .score-zone{color:#f5fbfb!important}
#app .camera-card{background:#020708!important}

#app .mobile-menu{
  color:var(--dv-light-ink)!important;
  background:rgba(255,255,255,.985)!important;
  border-color:#cbdfe2!important;
  box-shadow:0 18px 50px rgba(18,59,66,.17)!important;
}
#app .mobile-menu button{
  color:#17333c!important;
  background:#f6fafb!important;
  border-color:#d4e4e6!important;
}
#app .mobile-menu button:hover{background:#e9f7f6!important;border-color:#86cfcc!important}
#app .mobile-bottom{
  background:rgba(255,255,255,.985)!important;
  border-top:1px solid #d3e3e5!important;
  box-shadow:0 -10px 32px rgba(21,64,71,.08)!important;
  color:#506a72!important;
}
#app .mobile-bottom button{background:transparent!important;color:#60767e!important}
#app .mobile-bottom button[data-active="1"]{color:#078d91!important}

#app .footer{
  color:#637981!important;
  background:#e9f1f3!important;
  border-top-color:#d3e1e4!important;
}
#app .footer-links button{color:#526c74!important}
#app .footer-links button:hover{color:#078d91!important}

/* ===== WORLD V4 PC / APP SURFACE ===== */
html:has(#dv4-app){background:#f3f8f9!important;color-scheme:light!important}
body:has(#dv4-app){
  color:#102a32!important;
  background:linear-gradient(180deg,#fbfefe 0%,#f1f7f8 58%,#edf4f5 100%)!important;
}
#dv4-app{background:transparent!important;color:#102a32!important}
#dv4-app .d5-shell,#dv4-app .d5-main{background:transparent!important;color:#102a32!important}

#dv4-app :is(.d5-home-hero,.d5-pulse-item,.d5-feature-live,.d5-mini-live,.d5-card,.d5-panel,.d5-sheet,.d5-page-card,.d5-play-card,.d5-game-card,.d5-club-card,.d5-feed,.d5-post,.d5-composer,.d5-oche-status,.d5-oche-people,.d5-rail-block,.d7-panel,.d7-card){
  background:#fff!important;
  color:#102a32!important;
  border-color:#d5e5e7!important;
  box-shadow:0 14px 38px rgba(20,67,74,.075)!important;
}
#dv4-app .d5-home-hero{
  background:
    linear-gradient(90deg,#fff 0%,#fff 50%,rgba(246,252,252,.48) 62%,rgba(236,249,248,.08) 100%),
    url('/world/assets/dartava-approved-hero-v3.webp') right center/50% 100% no-repeat!important;
}
#dv4-app :is(.d5-page-title,.d5-section-head h2,.d5-display,.d5-feature-caption h3,.d5-mini-live-copy strong,.d5-pulse-item strong,.d5-hero-copy h1){color:#102a32!important;text-shadow:none!important}
#dv4-app :is(.d5-page-intro,.d5-section-head p,.d5-hero-copy p,.d5-feature-caption p,.d5-mini-live-copy p,.d5-pulse-item p){color:#647b83!important}
#dv4-app .d5-kicker{color:#078d91!important}
#dv4-app .d5-btn:not(.primary):not(.live){
  background:#fff!important;color:#17343c!important;border-color:#cadde0!important;
}
#dv4-app .d5-btn.primary{background:linear-gradient(135deg,#18c7bf,#079c9e)!important;color:#fff!important;border-color:#079c9e!important}
#dv4-app .d5-btn.live{background:#fff2f4!important;color:#ad3442!important;border-color:#e8b9bf!important}

/* Match, board, camera and broadcast canvases remain dark. */
#dv4-app :is(.d5-feature-media,.d5-live-media,.d5-match-control,.d5-match-stage,.d5-score-stage,.v3m-camera-stage,.v3om-camera-stage,[data-dvmo-main-video],[data-dvvision-video-wrap],#dvvision-layer video,#dvvision-layer canvas){
  background:#071217!important;color:#f5fbfb!important;
}
#dv4-app :is(.d5-match-control,.d5-match-stage,.d5-score-stage) :is(h1,h2,h3,h4,strong,b,span){color:#f5fbfb}

/* Phone app/browser: make the surrounding shell visibly bright and calm. */
@media(max-width:760px){
  body:has(#dv4-app){background:#f4fbfb!important}
  html[data-dartava-native-mobile-v7="1"] body #dv4-app .d5-main,
  html[data-dartava-native-mobile-v7="1"] body #dv4-app .d5-shell{background:#f4fbfb!important;color:#10282a!important}
  html[data-dartava-native-mobile-v7="1"] body :is(.dv7-card,.dv7-action-row,.dv7-stat,.dv7-play-choice,.dv7-deepbar){
    background:#fff!important;color:#10282a!important;border-color:#d7e9ea!important;box-shadow:0 9px 24px rgba(16,73,76,.055)!important;
  }
  html[data-dartava-native-mobile-v7="1"] body .dv7-topbar{background:rgba(244,251,251,.985)!important}
  html[data-dartava-native-mobile-v7="1"] body .dv7-nav{background:rgba(255,255,255,.99)!important;border-top-color:#d7e8e9!important}
  html[data-dartava-native-mobile-v7="1"] body :is(.dv7-title,.dv7-action-row strong,.dv7-stat strong,.dv7-topbar__copy strong){color:#10282a!important}
  html[data-dartava-native-mobile-v7="1"] body :is(.dv7-copy,.dv7-action-row em,.dv7-section-head span,.dv7-topbar__copy small){color:#6a8185!important}
}

/* Public hero needs a different crop on small phones so it is brighter without hiding the dart player. */
@media(max-width:980px){
  #app .hero-bg{
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.58) 42%,rgba(247,252,252,.96) 74%,#f4f9fa 100%),
      url('/r3/site/assets/home-hero-v3.webp?v=1')!important;
    background-size:cover,auto 100%!important;
    background-position:center,66% center!important;
  }
  #app .hero::after{background:linear-gradient(180deg,transparent 72%,rgba(244,249,250,.80))!important}
}
@media(max-width:620px){
  #app .hero{min-height:510px!important}
  #app .hero-bg{background-position:center,63% center!important}
  #app .hero-content{padding-top:36px!important}
  #app .hero h1{color:#0f2931!important}
  #app .hero p{color:#4f6972!important}
}