/* =============================================================
 v25.0.2 Result UI Bind (211-220)
 211〜220をリザルト画面へ実装。
 ============================================================= */
:root{
  --ui211:url('./assets/ui_211_220/211_result_screen_background.webp');
  --ui212:url('./assets/ui_211_220/212_result_clear_banner.webp');
  --ui213:url('./assets/ui_211_220/213_result_score_card.webp');
  --ui214:url('./assets/ui_211_220/214_result_star_rating_panel.webp');
  --ui215:url('./assets/ui_211_220/215_item_drop_panel.webp');
  --ui216:url('./assets/ui_211_220/216_drop_item_slot_normal.webp');
  --ui217:url('./assets/ui_211_220/217_drop_item_slot_rare.webp');
  --ui218:url('./assets/ui_211_220/218_reward_get_popup_frame.webp');
  --ui219:url('./assets/ui_211_220/219_new_record_banner.webp');
  --ui220:url('./assets/ui_211_220/220_result_action_button_bg.webp');
}
#resultScreen .pad{
  position:relative;
  gap:10px!important;
  min-height:100%;
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--ui211)!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  border-radius:26px!important;
  overflow:hidden!important;
}
#resultScreen .topbar{
  position:relative;
  z-index:1;
}
#resultScreen .resultHero{
  position:relative;
  z-index:1;
  text-align:center;
  border:0!important;
  border-radius:26px!important;
  padding:12px!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  backdrop-filter: blur(2px);
}
#resultScreen .v2502StatusBanner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:86px!important;
  padding:10px 18px!important;
  background-image:var(--ui212)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#resultScreen .resultStatus{
  color:#6d3603!important;
  font-size:34px!important;
  font-weight:1000!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
}
#resultScreen .v2502ScoreCard{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:140px!important;
  margin-top:6px!important;
  padding:14px 12px 16px!important;
  background-image:var(--ui213)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#resultScreen .resultScore{
  font-size:32px!important;
  font-weight:1000!important;
  color:#2b1a54!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
}
#resultScreen #resultText,
#resultScreen #rewardText,
#resultScreen #playerExpResult,
#resultScreen #resultHighScore,
#resultScreen #resultRankingMessage{
  color:#49386c!important;
  text-shadow:none!important;
}
#resultScreen .v2502StarPanel{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:78px!important;
  padding:8px 14px!important;
  margin-top:6px!important;
  background-image:var(--ui214)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#resultScreen .resultStars{
  margin:0!important;
  font-size:34px!important;
  letter-spacing:4px;
}
#resultScreen .v2502RewardFrame{
  margin-top:8px!important;
  padding:14px 16px 18px!important;
  background-image:var(--ui218)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#resultScreen .v2502RewardFrame .helper,
#resultScreen .v2502RewardFrame .playerExpResult,
#resultScreen .v2502RewardFrame .resultHighScoreBox,
#resultScreen .v2502RewardFrame .resultRankingMessage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  margin-top:6px!important;
}
#resultScreen .resultDropBox{
  display:none;
  margin-top:8px!important;
  padding:12px!important;
  border-radius:24px!important;
  border:0!important;
  box-shadow:none!important;
  background-image:var(--ui215)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#resultScreen .resultDropBox.show{display:block!important;}
#resultScreen .dropFxBox,
#resultScreen .dropFxPanel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#resultScreen .dropFxBanner,
#resultScreen .dropFxChestWrap,
#resultScreen .dropFxFooter{
  display:none!important;
}
#resultScreen .dropFxTitle{
  color:#3e2965!important;
  font-size:18px!important;
  font-weight:1000!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85)!important;
  margin-bottom:8px!important;
}
#resultScreen .dropFxGrid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
#resultScreen .dropFxCard{
  position:relative;
  min-height:84px!important;
  display:grid!important;
  grid-template-columns:56px 1fr auto!important;
  gap:8px!important;
  align-items:center!important;
  padding:10px 10px 8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#resultScreen .dropFxCard::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--ui216);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  z-index:0;
}
#resultScreen .dropFxCard.rarity-r,
#resultScreen .dropFxCard.rarity-sr,
#resultScreen .dropFxCard.rarity-ur{ }
#resultScreen .dropFxCard.rarity-r::before,
#resultScreen .dropFxCard.rarity-sr::before,
#resultScreen .dropFxCard.rarity-ur::before{
  background-image:var(--ui217);
}
#resultScreen .dropFxCard > *{position:relative;z-index:1;}
#resultScreen .dropFrame{display:none!important;}
#resultScreen .dropItemIcon{
  width:50px!important;height:50px!important;object-fit:contain!important;
}
#resultScreen .dropItemName{
  grid-column:2/3;
  color:#2c1b53!important;
  font-size:14px!important;
  font-weight:1000!important;
  text-align:left!important;
}
#resultScreen .dropItemAmount{
  grid-column:3/4;
  color:#6c2b6b!important;
  font-size:18px!important;
  font-weight:1000!important;
}
#resultScreen .dropItemRarity{
  grid-column:2/4;
  color:#5a4a7a!important;
  font-size:11px!important;
  font-weight:900!important;
  text-align:left!important;
}
#resultScreen #newRecordBox{
  margin-top:6px!important;
}
#resultScreen #newRecordBox img{
  content:var(--ui219);
  width:100%!important;
  max-width:560px!important;
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
#resultScreen #newRecordText{
  color:#4d2f64!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85)!important;
}
#resultScreen .resultActions{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:2px!important;
}
#resultScreen .resultActions .wide{grid-column:1/-1!important;}
#resultScreen .resultActions .btn,
#resultScreen .resultActions #retryBtn,
#resultScreen .resultActions #resultEndlessSubmitBtn,
#resultScreen .resultActions #resultHighScoreBtn,
#resultScreen .resultActions #resultPrep{
  min-height:58px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:var(--ui220)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  box-shadow:none!important;
  color:#2c1b53!important;
  text-shadow:0 1px 0 rgba(255,255,255,.82)!important;
  font-weight:1000!important;
}
@media (max-width:430px){
  #resultScreen .resultHero{padding:10px!important;}
  #resultScreen .v2502StatusBanner{min-height:76px!important;}
  #resultScreen .resultStatus{font-size:28px!important;}
  #resultScreen .v2502ScoreCard{min-height:126px!important;padding:12px 10px 14px!important;}
  #resultScreen .resultScore{font-size:28px!important;}
  #resultScreen .dropFxGrid{grid-template-columns:1fr!important;}
  #resultScreen .resultActions{grid-template-columns:1fr!important;}
  #resultScreen .resultActions .wide{grid-column:auto!important;}
}