/* D2M V42 — true premium mobile app layer, built on exact original app */

/* GLOBAL APP FINISH */
.appBody{
  background:
    radial-gradient(circle at 50% -18%,rgba(126,247,184,.16),transparent 34%),
    radial-gradient(circle at 100% 18%,rgba(112,221,255,.085),transparent 32%),
    linear-gradient(180deg,#05070c,#07110f 52%,#05070c)!important;
}

/* Serious boss emblem — no emoji / no cheap default circle */
.battleAvatar,.bossOrb{
  color:transparent!important;
  font-size:0!important;
  text-shadow:none!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(4,6,9,.98) 0 19%,rgba(255,107,132,.30) 20% 35%,transparent 36%),
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.24),transparent 18%),
    linear-gradient(145deg,rgba(255,107,132,.20),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,107,132,.34)!important;
  box-shadow:0 34px 90px rgba(255,107,132,.16), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.battleAvatar svg,.bossOrb svg{width:70%!important;height:70%!important;display:block!important}
.battleAvatar:before,.bossOrb:before{
  content:""!important;
  position:absolute!important;
  width:66%!important;
  height:66%!important;
  border-radius:38% 62% 42% 58%!important;
  background:conic-gradient(from 220deg,#78f7b2,#70ddff,#ffe08a,#ff6b84,#78f7b2)!important;
  mask:radial-gradient(circle,transparent 0 34%,#000 35% 48%,transparent 49%)!important;
  -webkit-mask:radial-gradient(circle,transparent 0 34%,#000 35% 48%,transparent 49%)!important;
  transform:rotate(-17deg)!important;
  filter:drop-shadow(0 0 18px rgba(255,107,132,.30))!important;
}
.battleAvatar:after,.bossOrb:after{
  content:""!important;
  position:absolute!important;
  width:27%!important;
  height:27%!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,0,0,.98),rgba(0,0,0,.58),transparent 70%)!important;
  box-shadow:0 0 28px rgba(0,0,0,.7),0 0 44px rgba(255,107,132,.20)!important;
}

/* DESKTOP — keep pro command center, hide mobile-native extras */
@media(min-width:761px){
  .v42MobileCockpit,.v42MobileRoute,.v42MobileDrawer,.v42BottomNav,.v42QuickDock{
    display:none!important;
  }
  .appShell{
    max-width:1560px!important;
    padding:18px!important;
    gap:18px!important;
  }
  .side{
    width:266px!important;
    flex:0 0 266px!important;
    border-radius:30px!important;
  }
  .dailyHero{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  }
  .heroPanel,.battleCard{
    min-height:560px!important;
  }
}

/* MOBILE — native expensive app feeling */
@media(max-width:760px){
  html,body{overflow-x:hidden!important;max-width:100%!important}
  .appBody{
    padding-bottom:112px!important;
    min-height:100svh!important;
  }
  .side,.menu,.topbar{display:none!important}
  .appShell{display:block!important;padding:0 10px!important}
  .main{padding:0!important;min-width:0!important}
  .tab{padding:10px 0 0!important}

  /* top header */
  .mobileTop{
    position:sticky!important;
    top:0!important;
    z-index:70!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:58px!important;
    padding:9px 12px!important;
    background:rgba(5,7,12,.92)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(22px)!important;
  }
  .mobileTop .brand{gap:9px!important;min-width:0!important}
  .mobileTop .brand .logo{
    width:40px!important;height:40px!important;flex:0 0 40px!important;
    border-radius:15px!important;font-size:13px!important;
  }
  .mobileTop .brand span:last-child{font-size:0!important}
  .mobileTop .brand span:last-child:after{
    content:"D2M Game";
    font-size:17px!important;
    font-weight:1000!important;
    letter-spacing:-.045em!important;
    color:#f7f1df!important;
  }
  .mobileTop .badge{
    max-width:42vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    padding:8px 10px!important;
    border-radius:999px!important;
    font-size:11px!important;
  }

  /* Mobile cockpit: brings desktop right-panel feeling into phone */
  .v42MobileCockpit{
    display:grid!important;
    gap:10px!important;
    margin:10px 0!important;
    padding:14px!important;
    border-radius:26px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:
      radial-gradient(circle at 18% 0%,rgba(126,247,184,.12),transparent 45%),
      linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.033))!important;
    box-shadow:0 26px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
  .v42CockpitTop{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  }
  .v42CockpitTop small{
    display:block;color:#8ffac4;font-size:10px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;
  }
  .v42CockpitTop b{
    display:block;color:#f7f1df;font-size:22px;line-height:1;letter-spacing:-.055em;margin-top:4px;
  }
  .v42CockpitPill{
    flex:0 0 auto;
    display:grid;place-items:center;
    min-width:72px;min-height:42px;
    padding:8px 10px;
    border-radius:16px;
    border:1px solid rgba(126,247,184,.20);
    background:rgba(126,247,184,.08);
    color:#ddfff0;
    font-weight:1000;
    font-size:12px;
  }
  .v42CockpitGrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
  }
  .v42CockpitGrid span{
    padding:9px 7px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    min-height:52px;
  }
  .v42CockpitGrid small{
    display:block;color:rgba(226,238,232,.64);font-size:8px;font-weight:1000;text-transform:uppercase;
  }
  .v42CockpitGrid b{
    display:block;color:#f7f1df;font-size:17px;line-height:1;margin-top:4px;letter-spacing:-.04em;
  }
  .v42Progress{
    height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);
  }
  .v42Progress i{
    display:block;height:100%;width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,#78f7b2,#70ddff,#a989ff);
    box-shadow:0 0 18px rgba(112,221,255,.22);
  }

  /* First screen reshaped */
  .dailyHero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .heroPanel{
    padding:15px!important;
    border-radius:26px!important;
    min-height:auto!important;
  }
  .heroPanel > .kicker{
    font-size:10px!important;
    letter-spacing:.08em!important;
  }
  .heroPanel h2{
    font-size:30px!important;
    line-height:.94!important;
    letter-spacing:-.065em!important;
    margin:8px 0!important;
  }
  .heroPanel .sub{
    font-size:14px!important;
    line-height:1.34!important;
    margin:0 0 10px!important;
  }
  .cleanDashboard{
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
    margin:9px 0!important;
  }
  .cleanMetric{
    min-height:auto!important;
    padding:9px 6px!important;
    border-radius:14px!important;
  }
  .cleanMetric small{
    font-size:8px!important;
  }
  .cleanMetric b{
    font-size:18px!important;
  }

  /* Use one route and one quick dock */
  #v36NowStatus,#v38MobileCommand,#v38MobileQuick,#v40MobileCommand,.v36NowStatus:not(.v42MobileRoute){
    display:none!important;
  }
  .v42MobileRoute{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:7px!important;
    margin:10px 0!important;
  }
  .v42MobileRoute span{
    min-height:54px;
    padding:9px 6px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:#f7f1df;
    font-weight:1000;
    font-size:10px;
    line-height:1.08;
    display:grid;
    place-items:center;
    text-align:center;
  }
  .v42QuickDock{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:7px!important;
    margin:10px 0!important;
  }
  .v42QuickDock button{
    min-height:42px!important;
    border:0!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;
    color:#f7f1df!important;
    font-size:11px!important;
    font-weight:1000!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;
  }
  .v42QuickDock button:first-child{
    color:#07100f!important;
    background:linear-gradient(135deg,#eafff3,#7ef7b8)!important;
  }
  #v37MobileQuick,#v38MobileQuick,#home .ctas{
    display:none!important;
  }

  /* Quests compact but premium */
  .todayQuestMini{gap:7px!important;margin-top:9px!important}
  .miniQuest,.quest{
    display:grid!important;
    grid-template-columns:32px 1fr auto!important;
    gap:9px!important;
    align-items:center!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .miniQuest small,.quest small{
    width:30px!important;height:30px!important;border-radius:11px!important;font-size:11px!important;
  }
  .miniQuest b,.quest b{
    font-size:13px!important;line-height:1.15!important;
  }
  .miniQuest span,.quest span{
    grid-column:2/4!important;
    font-size:10px!important;
    color:rgba(226,238,232,.65)!important;
  }

  /* Boss card compact and impressive */
  .battleCard{
    padding:15px!important;
    border-radius:26px!important;
    min-height:auto!important;
  }
  .battleCard h3{
    font-size:23px!important;
    line-height:1!important;
    margin:7px 0!important;
  }
  .battleCard p{
    font-size:13px!important;
    line-height:1.32!important;
  }
  .battleAvatar,.bossOrb{
    width:82px!important;
    height:82px!important;
    border-radius:26px!important;
    margin:2px 0 8px!important;
  }

  /* All inner sections more app-like */
  .panel,.card,.modeCard,.characterHeroCard,.battleCard,.statBlock,.noteCard,.empty{
    padding:15px!important;
    border-radius:26px!important;
  }
  .tab h2,.sectionTitle h2,.pageTitle h2{
    font-size:28px!important;
    line-height:.98!important;
    letter-spacing:-.058em!important;
  }
  .choiceGrid,.modeGrid,.statsGrid,.moneyGrid,.shopGrid,.achGrid,.reportGrid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .modeCard{
    min-height:116px!important;
  }
  #programMap{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:8px!important;
  }
  #programMap>*{
    min-height:50px!important;
    padding:8px!important;
    border-radius:16px!important;
    font-size:11px!important;
  }

  /* One polished bottom nav */
  .v36BottomNav,.v37BottomNav,.v38BottomNav,.v40BottomNav,.v41BottomNav{
    display:none!important;
  }
  .v42BottomNav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:100;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    padding:8px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(5,7,12,.94);
    backdrop-filter:blur(22px);
    box-shadow:0 20px 60px rgba(0,0,0,.46);
  }
  .v42BottomNav button{
    min-height:49px;
    border:0;
    border-radius:17px;
    background:rgba(255,255,255,.052);
    color:#dce8e3;
    font-size:10px;
    font-weight:1000;
    display:grid;
    place-items:center;
    gap:2px;
  }
  .v42BottomNav button i{
    font-style:normal;
    font-size:17px;
    line-height:1;
  }
  .v42BottomNav button.active{
    color:#061014;
    background:linear-gradient(135deg,#eafff3,#7ef7b8);
    box-shadow:0 12px 30px rgba(126,247,184,.18);
  }
}

@media(max-width:390px){
  .heroPanel h2{font-size:28px!important}
  .v42CockpitGrid{grid-template-columns:repeat(2,1fr)}
  .v42MobileRoute{grid-template-columns:repeat(2,1fr)!important}
}