/* =============================================================
 v24.8.4 Mobile UI Rebuild
 - iPhone縦画面基準
 - 下部ナビ被り防止
 - 151〜190 UI画像の背景・ナビ紐づけ
 - SAVE_KEY / セーブ処理には触れない
 ============================================================= */
:root{
  --v2484-nav-h:76px;
  --v2484-bottom-reserve:calc(var(--v2484-nav-h) + env(safe-area-inset-bottom) + 24px);
  --v2484-ink:#24183f;
  --v2484-soft-ink:#4b3f6d;
  --v2484-panel:rgba(255,255,255,.86);
  --v2484-panel-strong:rgba(255,255,255,.94);
}

html,body{
  width:100%;
  min-height:100%;
  overflow:hidden!important;
  background:linear-gradient(160deg,#edf9c7 0%,#fff1bd 48%,#ffd9e9 100%)!important;
  color:var(--v2484-ink)!important;
}

body{
  padding:calc(6px + env(safe-area-inset-top)) 0 calc(4px + env(safe-area-inset-bottom))!important;
  display:block!important;
}

.app{
  width:min(100vw,480px)!important;
  max-width:480px!important;
  height:calc(100dvh - env(safe-area-inset-top) - 6px)!important;
  margin:0 auto!important;
  overflow:hidden!important;
}

.screen{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(75,62,110,.25)!important;
  box-shadow:0 12px 36px rgba(70,40,60,.16)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.48))!important;
  color:var(--v2484-ink)!important;
  backdrop-filter:blur(10px);
}

.screen.active{
  display:flex!important;
  flex-direction:column!important;
}

.screen>.pad,
.screen>.stageMapPage{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding:12px 12px var(--v2484-bottom-reserve)!important;
  color:var(--v2484-ink)!important;
}

#titleScreen>.pad{
  overflow:hidden!important;
  padding:14px 14px 22px!important;
}

#gameScreen>.pad{
  padding-bottom:14px!important;
}

/* text contrast rules */
.screen:not(#gameScreen) .topbar,
.screen:not(#gameScreen) .homeTopbar,
.screen:not(#gameScreen) .section,
.screen:not(#gameScreen) .cur,
.screen:not(#gameScreen) .playerRankPanel,
.screen:not(#gameScreen) .prepStageSummary,
.screen:not(#gameScreen) .bossArea,
.screen:not(#gameScreen) .stat,
.screen:not(#gameScreen) .card,
.screen:not(#gameScreen) .leader-card,
.screen:not(#gameScreen) .stage-card,
.screen:not(#gameScreen) .difficultyBtn,
.screen:not(#gameScreen) .bossSupportCard,
.screen:not(#gameScreen) .missionCard,
.screen:not(#gameScreen) .presentCard,
.screen:not(#gameScreen) .itemCard{
  background:var(--v2484-panel)!important;
  color:var(--v2484-ink)!important;
  text-shadow:none!important;
  border-color:rgba(80,65,110,.20)!important;
}

.screen:not(#gameScreen) .helper,
.screen:not(#gameScreen) .meta,
.screen:not(#gameScreen) small,
.screen:not(#gameScreen) .sub{
  color:var(--v2484-soft-ink)!important;
  opacity:1!important;
  text-shadow:none!important;
}

.screen:not(#gameScreen) h1,
.screen:not(#gameScreen) h2,
.screen:not(#gameScreen) h3,
.screen:not(#gameScreen) b,
.screen:not(#gameScreen) .name,
.screen:not(#gameScreen) .bossName,
.screen:not(#gameScreen) .prepStageName{
  color:var(--v2484-ink)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.70)!important;
}

#gameScreen{
  background:rgba(17,24,20,.92)!important;
  color:#fff!important;
}
#gameScreen .helper,#gameScreen .meta,#gameScreen small{
  color:rgba(255,255,255,.86)!important;
  text-shadow:0 2px 6px rgba(0,0,0,.45)!important;
}

/* title */
#titleScreen{
  background:linear-gradient(180deg,#17311f,#11241a)!important;
}
#titleScreen .titleBox{
  height:min(58dvh,430px)!important;
  margin:0 0 14px!important;
  border-radius:24px!important;
  background:#17311f!important;
}
#titleScreen .titleBox img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
#titleScreen .textStartBtn{
  margin-top:auto!important;
  min-height:70px!important;
  font-size:clamp(20px,6vw,30px)!important;
}

/* home */
#homeScreen .homePad{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding-bottom:var(--v2484-bottom-reserve)!important;
}
#homeScreen .homeTopbar{
  flex:0 0 auto!important;
  min-height:44px!important;
  padding:8px!important;
}
#homeScreen .homeCurrency{
  flex:0 0 auto!important;
  gap:8px!important;
}
#homeScreen .cur{
  min-height:58px!important;
  padding:8px 10px!important;
}
#homeScreen .playerRankPanel{
  max-height:54px!important;
  overflow:hidden!important;
  padding:6px 10px!important;
}
#homeScreen .homeGuestEventBanner{
  min-height:50px!important;
  max-height:56px!important;
  overflow:hidden!important;
  margin:0!important;
}
#homeScreen .homeGuestEventBanner img{
  width:52px!important;
  height:52px!important;
  object-fit:cover!important;
}
#homeScreen .homeMain{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
#homeScreen .homeMain .cta,
#homeScreen .homeMain .btn{
  min-height:50px!important;
  font-size:clamp(17px,4.8vw,24px)!important;
  padding:8px!important;
}
#homeScreen .homeGrid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  overflow:visible!important;
  padding:0!important;
}
#homeScreen .homeGrid .btn{
  min-height:44px!important;
  padding:7px 8px!important;
  font-size:clamp(13px,3.8vw,16px)!important;
}
#homeScreen .soundSettingsPanel{
  display:none!important;
}
#homeScreen .saveGuardPanelV24{
  margin-top:4px!important;
  padding:8px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.82)!important;
}
#homeScreen .saveGuardPanelV24 h3{
  font-size:13px!important;
  margin:0 0 4px!important;
}
#homeScreen .saveGuardStatus{
  padding:8px!important;
  font-size:11px!important;
}
#homeScreen .saveGuardStatus b{
  font-size:13px!important;
}
#homeScreen .saveGuardStatus small{
  display:block!important;
  font-size:10px!important;
}
#homeScreen .saveGuardBtns{
  display:none!important;
}

/* sortie / prep */
#prepScreen .sortiePad{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
#prepScreen .topbar{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  margin:0!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(10px)!important;
}
#prepScreen .prepStageSummary{
  flex:0 0 auto!important;
  max-height:168px!important;
  overflow:hidden!important;
}
#prepScreen .section{
  margin:0!important;
}
#prepScreen #startGame{
  position:sticky!important;
  bottom:calc(var(--v2484-nav-h) + env(safe-area-inset-bottom) + 8px)!important;
  z-index:9!important;
  margin-top:8px!important;
}
#prepScreen .grid4,
#prepScreen .bossSupportGrid,
#itemScreen #itemList,
#missionScreen #missionList{
  padding-bottom:24px!important;
}

/* gacha / mission / item / profile / ranking */
#gachaScreen .gachaStage{
  max-height:34dvh!important;
  margin:8px 0!important;
}
#gachaScreen #gachaResult{
  max-height:32dvh!important;
  overflow:auto!important;
  padding-bottom:20px!important;
}
#missionScreen .tabs{
  position:sticky!important;
  top:0!important;
  z-index:7!important;
  background:rgba(255,255,255,.80)!important;
  backdrop-filter:blur(10px)!important;
  padding:6px!important;
  border-radius:16px!important;
}
#missionScreen .assetSheetRow,
#itemScreen .assetSheetSingle,
#highScoreScreen .highscoreHeroImg{
  max-height:140px!important;
  overflow:hidden!important;
}
#missionScreen .assetSheetRow img,
#itemScreen .assetSheetSingle img,
#highScoreScreen .highscoreHeroImg img{
  object-fit:cover!important;
  width:100%!important;
}
#profileScreen .section,
#highScoreScreen .section,
#itemScreen .section,
#missionScreen .section{
  margin-top:10px!important;
}

/* screen image bindings */
.v2484CollectionBg,
.v2484ProfileBg,
.v2484EventBg,
.v2484AwakenBg{
  background-size:cover!important;
  background-position:center!important;
}
.v2484CollectionBg{
  background-image:linear-gradient(rgba(255,255,255,.64),rgba(255,255,255,.76)),url("assets/ui_151_190/171_キャラ図鑑背景.webp")!important;
}
.v2484ProfileBg{
  background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.78)),url("assets/ui_151_190/178_プロフィール背景.webp")!important;
}
.v2484EventBg{
  background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.76)),url("assets/ui_151_190/161_イベント一覧背景.webp")!important;
}
.v2484AwakenBg{
  background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.76)),url("assets/ui_151_190/160_覚醒画面背景.webp")!important;
}

/* bottom nav image implementation */
.v246BottomNav.v2484ImageNav{
  position:fixed!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  width:min(472px,calc(100vw - 10px))!important;
  height:var(--v2484-nav-h)!important;
  max-height:var(--v2484-nav-h)!important;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  gap:5px!important;
  padding:6px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.62)!important;
  border:1px solid rgba(80,65,110,.20)!important;
  backdrop-filter:blur(12px)!important;
  z-index:9999!important;
  box-shadow:0 4px 16px rgba(0,0,0,.16)!important;
}
.v246BottomNav.v2484ImageNav button{
  height:64px!important;
  min-height:64px!important;
  padding:4px 2px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  background:rgba(255,255,255,.64)!important;
  border:1px solid rgba(70,60,90,.18)!important;
  color:var(--v2484-ink)!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:1000!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
}
.v246BottomNav.v2484ImageNav button.active{
  background:linear-gradient(180deg,#fff4a8,#ffe067)!important;
  box-shadow:0 0 0 2px rgba(255,207,64,.55) inset!important;
}
.v2484NavIcon{
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
  display:block!important;
  pointer-events:none!important;
}
.v2484NavLabel{
  display:block!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

/* more panel */
#v246MorePanel{
  bottom:calc(var(--v2484-nav-h) + env(safe-area-inset-bottom) + 16px)!important;
  max-height:42dvh!important;
  overflow-y:auto!important;
  color:var(--v2484-ink)!important;
}
#v246MorePanel button{
  color:var(--v2484-ink)!important;
  background:rgba(255,255,255,.92)!important;
  text-shadow:none!important;
}

/* compact phones */
@media(max-width:430px){
  :root{--v2484-nav-h:72px;}
  body{padding-top:calc(4px + env(safe-area-inset-top))!important;}
  .screen{border-radius:18px!important;}
  .screen>.pad,.screen>.stageMapPage{padding:9px 8px var(--v2484-bottom-reserve)!important;}
  #titleScreen>.pad{padding:12px 12px 18px!important;}
  #titleScreen .titleBox{height:min(57dvh,390px)!important;border-radius:22px!important;}
  #homeScreen .homePad{gap:7px!important;}
  #homeScreen .homeGrid{gap:7px!important;}
  #homeScreen .homeGrid .btn{min-height:41px!important;}
  #homeScreen .saveGuardPanelV24{display:none!important;}
  .v246BottomNav.v2484ImageNav{width:calc(100vw - 8px)!important;height:72px!important;gap:4px!important;padding:5px!important;border-radius:18px!important;}
  .v246BottomNav.v2484ImageNav button{height:60px!important;min-height:60px!important;border-radius:14px!important;font-size:10px!important;}
  .v2484NavIcon{width:28px!important;height:28px!important;}
}
@media(max-height:720px){
  #homeScreen .playerRankPanel,
  #homeScreen .homeGuestEventBanner:nth-of-type(1){
    display:none!important;
  }
  #homeScreen .homeMain .cta,#homeScreen .homeMain .btn{min-height:46px!important;}
  #homeScreen .homeGrid .btn{min-height:38px!important;}
}