/* Only resolved mobile Boxes use the compact layout; the live gauge is untouched. */
.skillBoxSummaryExtras,.skillBoxExperienceActions [data-skill-summary-back],.skillBoxExperienceActions [data-skill-summary-more] { display:none; }
.skillBoxSummaryMobileCopy { display:none; }
.skillBoxSummaryDetails { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:22px; overflow:auto; border:1px solid #8054c7; border-radius:22px; background:linear-gradient(150deg,#321163,#170a31); color:#fff; box-shadow:0 20px 80px #0009; }
.skillBoxSummaryDetails::backdrop { background:#0a0417c9; backdrop-filter:blur(5px); }
.skillBoxSummaryDetails h2 { margin:0 36px 18px 0; font:900 25px/1.1 "Baloo 2",sans-serif; }
.skillBoxSummaryDetails h3 { font-size:14px; color:#e0c4ff; }
.skillBoxSummaryDetailsClose { position:absolute; right:12px; top:12px; width:34px; height:34px; border:1px solid #ffffff30; border-radius:50%; background:#ffffff10; color:#fff; font-size:24px; cursor:pointer; }
.skillBoxSummaryDetails .skillBoxSummaryTier { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid #ffffff12; border-radius:12px; background:#ffffff08; }
.skillBoxSummaryDetails .skillBoxSummaryTier>span { display:grid; gap:5px; }
.skillBoxSummaryDetails .skillBoxSummaryTier strong { font-size:15px; color:#fff1ad; }
.skillBoxSummaryDetails .skillBoxGiftOverview { margin-top:14px; }
@media(max-width:760px) {
  .skillBoxExperience:has(.is-box-summary) { place-items:start center; padding:0 0 var(--skill-summary-nav-space,0px); }
  .skillBoxExperiencePanel.is-box-summary { display:flex; flex-direction:column; gap:4px; width:100%; height:calc(100dvh - var(--skill-summary-nav-space,0px)); min-height:0; max-height:calc(100dvh - var(--skill-summary-nav-space,0px)); padding:8px 12px max(8px,env(safe-area-inset-bottom)); overflow:hidden; }
  .is-box-summary .skillBoxSummaryDesktopCopy { display:none; }
  .is-box-summary .skillBoxSummaryMobileCopy { display:inline; }
  .is-box-summary .skillBoxExperienceHead { flex:0 0 auto; min-height:32px; gap:9px; padding-right:34px; }
  .is-box-summary .skillBoxExperienceIcon { flex:0 0 30px; width:30px; height:30px; border-radius:9px; font-size:19px; box-shadow:0 2px 0 #b85c00; }
  .is-box-summary .skillBoxExperienceHead h2 { margin:0; font-size:21px; line-height:1.05; }
  .is-box-summary .skillBoxExperienceHead small,.is-box-summary .skillBoxExperienceHead p { display:none; }
  .is-box-summary .skillBoxExperienceClose { top:8px; right:10px; width:30px; height:30px; font-size:24px; box-shadow:none; }
  .is-box-summary .skillBoxPreflight,.is-box-summary .skillBoxGiftOverview { display:none; }
  .is-box-summary .skillBoxExperienceBody { display:grid; grid-template-columns:1fr; flex:0 0 auto; min-height:0; gap:6px; margin:0; }
  .is-box-summary .skillBoxExperienceContent { min-height:0; border-radius:16px; }
  .is-box-summary .skillBoxResult.is-level-result { padding:8px 10px; border-radius:16px; }
  .is-box-summary .skillBoxSummaryArtwork { height:clamp(0px,calc(100dvh - 720px),76px); margin:0; }
  .is-box-summary .skillBoxSummaryArtwork:empty { display:none; }
  .is-box-summary .skillBoxResult.is-level-result>strong { margin:0; font-size:28px; line-height:1.05; letter-spacing:-.4px; text-shadow:0 2px 0 #ff9c11,0 4px 0 #52104f; }
  .is-box-summary .skillBoxSummaryStatus { margin:4px 0 0; font-size:10px; line-height:1.1; }
  .is-box-summary .skillBoxResult .skillBoxLevelEndHint { margin:4px auto 5px; font-size:10px; line-height:1.2; }
  .is-box-summary .skillBoxLevelSteps { grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; margin:7px 0; }
  .is-box-summary .skillBoxLevelSteps li { height:25px; font-size:10px; border-radius:5px; box-shadow:none; }
  .is-box-summary .skillBoxLevelSteps li.is-complete { padding-bottom:8px; }
  .is-box-summary .skillBoxLevelSteps li.is-complete:after { font-size:10px; line-height:11px; }
  .is-box-summary .skillBoxResult.is-level-result>.skillBoxResultGain { min-height:46px; padding:7px; margin:6px 0; border-radius:12px; gap:7px; }
  .is-box-summary .skillBoxSummaryCoins { flex-basis:48px; height:34px; }
  .is-box-summary .skillBoxSummaryCoins .skillBoxRewardCoin { width:20px; height:20px; }
  .is-box-summary .skillBoxSummaryCoins .skillBoxRewardCoin:last-child { left:9px; bottom:2px; width:32px; height:32px; }
  .is-box-summary .skillBoxSummaryRewardCopy { font-size:23px; }
  .is-box-summary .skillBoxSummaryRewardCopy>small { margin-bottom:2px; font-size:8px; }
  .is-box-summary .skillBoxResultStats { gap:6px; margin-top:6px; }
  .is-box-summary .skillBoxResultStats>span { min-height:40px; padding:6px 5px 6px 28px; border-radius:10px; }
  .is-box-summary .skillBoxResultStats>span:before { left:7px; top:10px; width:18px; font-size:17px; }
  .is-box-summary .skillBoxResultStats .skillBoxVaultCoin { left:4px; top:10px; width:23px; height:23px; }
  .is-box-summary .skillBoxResultStats small { font-size:8px; }
  .is-box-summary .skillBoxResultStats strong { margin-top:2px; font-size:13px; }
  .is-box-summary .skillBoxResultVault { margin-top:5px; font-size:8px; line-height:1.2; }
  .is-box-summary .skillBoxResultVault:before { width:11px; height:11px; font-size:8px; }
  .is-box-summary .skillBoxPremiumEquivalent { margin-top:5px; padding:5px 7px; border-radius:8px; font-size:9px; line-height:1.2; }
  .is-box-summary .skillBoxTiers { padding:7px 9px; border-radius:13px; }
  .is-box-summary .skillBoxTiers>[data-skill-tiers-eyebrow] { gap:5px; font-size:10px; }
  .is-box-summary .skillBoxTiers>[data-skill-tiers-eyebrow]:before { font-size:13px; }
  .is-box-summary .skillBoxTiers>p { margin:4px 0 0; font-size:9px; }
  .is-box-summary .skillBoxTiers [data-skill-tiers] { grid-template-columns:1fr 1fr; margin-top:5px; gap:6px; }
  .is-box-summary .skillBoxTiers .skillBoxSummaryTier:nth-child(n+3) { display:none; }
  .is-box-summary .skillBoxTiers .skillBoxSummaryTier { min-height:35px; padding:5px 6px; gap:6px; border-radius:9px; }
  .is-box-summary .skillBoxSummaryTier .skillBoxRewardCoin { width:23px; height:23px; }
  .is-box-summary .skillBoxSummaryTier>span { gap:2px; }
  .is-box-summary .skillBoxSummaryTier small { font-size:9px; }
  .is-box-summary .skillBoxSummaryTier strong { font-size:11px; }
  .is-box-summary .skillBoxSummaryExtras:not([hidden]) { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:8px; min-height:16px; font-size:10px; color:#eadbff; }
  .is-box-summary .skillBoxSummaryExtras [data-skill-summary-more] { margin-left:auto; padding:4px 10px; border:1px solid #ffffff30; border-radius:9px; background:#ffffff0c; color:#fff0b0; font:800 10px/1.3 inherit; cursor:pointer; }
  .is-box-summary .skillBoxSummaryExtras:has([data-skill-summary-gift-progress][hidden]) { display:none; }
  .is-box-summary .skillBoxExperienceActions { display:flex; align-items:stretch; gap:6px; position:static; flex:0 0 auto; margin:auto 0 0; padding:0; background:none; }
  .is-box-summary .skillBoxExperienceActions .btn3d { flex:1; width:auto; min-width:0; min-height:44px; padding:8px 6px; border-radius:15px!important; font-size:0!important; line-height:1.15; white-space:normal; }
  .is-box-summary .skillBoxExperienceActions .btn3d:after { content:attr(data-summary-action-label); font-size:14px; }
  .is-box-summary .skillBoxExperienceActions .btn3d:before { font-size:20px; }
  .is-box-summary .skillBoxExperienceActions [data-skill-summary-back]:not([hidden]) { display:block; min-width:0; min-height:44px; padding:7px 10px; border:1px solid #ffffff30; border-radius:13px; background:#ffffff0d; color:#fff; font-size:11px; font-weight:800; }
  .is-box-summary .skillBoxExperienceActions [data-skill-summary-more]:not([hidden]) { display:block; min-width:0; min-height:44px; padding:7px 10px; border:1px solid #ffffff30; border-radius:13px; color:#fff1ad; font-size:11px; }
}
@media(max-width:380px) {
  .is-box-summary .skillBoxLevelSteps { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .is-box-summary .skillBoxLevelSteps li { height:20px; }
  .is-box-summary .skillBoxSummaryRewardCopy { font-size:21px; }
}