/* Isolated pre-opening layout: the live gauge and results keep their styles. */
.skillBoxGiftOverview[hidden],.skillBoxTiers[hidden] { display:none!important; }
.skillBoxGiftOverview { min-width:0; padding:20px; border:1px solid #6036a4; border-radius:22px; background:linear-gradient(160deg,#2c1053,#180932); color:#fff; }
.skillBoxGiftOverview>span { color:#dfbaff; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.skillBoxGiftOverview h3 { margin:12px 0 8px; font:900 24px/1.1 "Baloo 2",sans-serif; overflow-wrap:anywhere; }
.skillBoxGiftOverview p { font-size:12px; line-height:1.5; color:#e5d8f6; }
.skillBoxGiftOverview p:empty { display:none; }
.skillBoxGiftOverview dl { display:grid; gap:10px; margin:18px 0; }
.skillBoxGiftOverview dl>div { padding:11px 12px; border:1px solid #ffffff16; border-radius:12px; background:#ffffff08; }
.skillBoxGiftOverview dt { font-size:10px; color:#c9b2e8; }
.skillBoxGiftOverview dd { margin:4px 0 0; font-size:14px; font-weight:900; color:#fff1a6; }
.skillBoxExperiencePanel.is-box-preview { width:min(1040px,100%); max-height:calc(100dvh - 32px); padding:24px; border:2px solid #7942c9; border-radius:30px; background:radial-gradient(ellipse at 10% 0%,#51209e 0%,transparent 55%),linear-gradient(145deg,#2c105e,#190b38); box-shadow:0 24px 80px #09021a99,inset 0 0 0 4px #ffffff04; }
.is-box-preview .skillBoxExperienceHead { margin-bottom:18px; gap:16px; }
.is-box-preview .skillBoxExperienceHead h2 { font-size:36px; overflow-wrap:anywhere; }
.is-box-preview .skillBoxExperienceIcon { flex:0 0 62px; width:62px; height:62px; border-radius:17px; }
.is-box-preview .skillBoxExperienceClose { display:block; border:0; background:#ffffff14; }
.is-box-preview .skillBoxMobileBack { display:none; }
.is-box-preview .skillBoxPreflight { margin:0 0 14px; padding:14px; border:1px solid #ffffff14; border-radius:22px; background:#17072f60; }
.is-box-preview .skillBoxPreflight:has(>[data-skill-gift-panel][hidden]):has(>[data-skill-preview-selector][hidden]) { display:none; }
.is-box-preview .skillBoxGiftPanel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; margin:0 0 12px; padding:4px 10px 10px; border:0; border-radius:0; background:none; }
.is-box-preview .skillBoxGiftTitle { grid-column:1; margin:0; font:900 23px/1.15 "Baloo 2",sans-serif; }
.is-box-preview .skillBoxGiftCount { grid-column:1; margin:0; font-size:14px; }
.is-box-preview .skillBoxGiftStock { grid-column:2; grid-row:1/3; align-self:start; margin:0; padding:12px 15px; border:1px solid #ffffff0d; border-radius:14px; background:#ffffff08; font-size:12px; font-weight:800; }
.is-box-preview .skillBoxGiftPanel progress { grid-column:1/-1; width:100%; height:10px; margin:3px 0; overflow:hidden; border:2px solid #8661c4; border-radius:999px; appearance:none; background:#1b103d; accent-color:#ffe35b; }
.is-box-preview progress::-webkit-progress-bar { background:#1b103d; }
.is-box-preview progress::-webkit-progress-value { border-radius:999px; background:linear-gradient(90deg,#ffe77b,#ffb725); }
.is-box-preview progress::-moz-progress-bar { border-radius:999px; background:#ffcc41; }
.is-box-preview .skillBoxGiftDisclaimer { grid-column:1/-1; margin:0; font-size:11px; color:#e9ddfa; }
.is-box-preview .skillBoxGiftPanel button { grid-column:1/-1; margin:3px 0 0; min-height:46px; }
.is-box-preview .skillBoxGiftPanel .btn3d,.is-box-preview .skillBoxExperienceActions .btn3d { border:1px solid #fff29c!important; border-radius:20px!important; background:linear-gradient(#ffe86a,#ffba26)!important; box-shadow:0 4px 0 #b86c11,0 6px 18px #ffc21c20!important; color:#3c260e!important; font-weight:900; }
.is-box-preview .skillBoxGiftArt { display:none; }
.is-box-preview .skillBoxPreviewSelector { margin:0; }
.is-box-preview .skillBoxPreviewSelector>div { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.is-box-preview .skillBoxPreviewSelector button { display:flex; align-items:center; justify-content:center; gap:14px; min-width:0; min-height:66px; padding:12px; border:1px solid #ffffff20!important; border-radius:16px!important; background:linear-gradient(130deg,#61417f,#3a255f)!important; color:#fff!important; text-align:left; }
.is-box-preview .skillBoxPreviewSelector button[data-skill-box-type=premium] { background:linear-gradient(140deg,#5363ff,#145be3)!important; }
.is-box-preview .skillBoxPreviewSelector button[aria-pressed=true] { outline:2px solid #d8dcff; outline-offset:1px; box-shadow:0 0 14px #8278ff75; }
.is-box-preview .skillBoxPreviewSelector button:disabled { opacity:.55; cursor:not-allowed; }
.is-box-preview .skillBoxChoiceIcon { display:block; flex:0 0 34px; width:34px; height:32px; }
.is-box-preview .skillBoxChoiceCrate { position:relative; border:2px solid #d6baff; border-radius:8px; background:linear-gradient(135deg,#bf9cff,#6747b9); box-shadow:3px 3px 0 #26123b; }
.is-box-preview .skillBoxChoiceCrate:after { position:absolute; top:7px; left:13px; width:8px; height:12px; border-radius:3px; background:#ffe36b; content:''; }
.is-box-preview .skillBoxChoiceCrown svg { width:34px; height:32px; filter:brightness(1.6); }
.is-box-preview .skillBoxChoiceCrown svg path { fill:#ffda52; stroke:#fff092; }
.is-box-preview .skillBoxChoiceCopy { min-width:0; }
.is-box-preview .skillBoxChoiceCopy strong { font-size:16px; line-height:1.1; }
.is-box-preview .skillBoxChoiceCopy small { font-size:10px; line-height:1.35; }
.is-box-preview .skillBoxPreviewSelector>small { display:block; margin-top:10px; color:#c5b0de; font-size:9px; line-height:1.4; }
.is-box-preview .skillBoxExperienceBody { grid-template-columns:minmax(0,1fr) 260px; align-items:stretch; gap:14px; margin-top:0; }
.is-box-preview .skillBoxExperienceContent { min-width:0; min-height:300px; padding:18px; border:1px solid #7551ac55; border-radius:22px; overflow:hidden; background:radial-gradient(ellipse at 50% 75%,#712acf70,transparent 65%),repeating-conic-gradient(from -10deg at 50% 80%,#8453f011 0deg 12deg,transparent 12deg 26deg),#190b3b; }
.is-box-preview .skillBoxClosed { width:160px; height:140px; transform:rotate(-5deg); border-radius:24px; }
.is-box-preview .skillBoxClosed.has-preview-artwork { width:100%; height:260px; border:0; background:none; box-shadow:none; transform:none; }
.is-box-preview .skillBoxClosed.has-preview-artwork:before { content:none; }
.is-box-preview .skillBoxClosed.has-preview-artwork [data-skill-box-icon] { display:block; width:100%; height:100%; }
.is-box-preview .skillBoxClosed img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 16px #08031477); }
.is-box-preview .skillBoxClosed small { display:none; }
.is-box-preview .skillBoxTiers { min-width:0; padding:20px 16px; border:1px solid #6036a4; border-radius:22px; background:linear-gradient(160deg,#2c1053,#180932); }
.is-box-preview .skillBoxTiers h3 { margin:6px 0 10px; font-size:23px; }
.is-box-preview .skillBoxTierList { max-height:230px; overflow:auto; padding-right:4px; }
.is-box-preview .skillBoxTierList>span { border:0; border-radius:12px; padding:10px; }
.is-box-preview .skillBoxExperienceActions { margin-top:14px; padding:0 0 6px; }
.is-box-preview .skillBoxExperienceActions .btn3d { min-width:min(390px,100%); min-height:50px; padding:12px 24px; font-size:19px; }
@media(max-width:760px) {
  .skillBoxExperiencePanel.is-box-preview { min-height:100dvh; max-height:100dvh; padding:18px 14px calc(24px + env(safe-area-inset-bottom)); border:0; border-radius:0; }
  .is-box-preview .skillBoxExperienceHead h2 { font-size:28px; }
  .is-box-preview .skillBoxExperienceIcon { flex-basis:48px; width:48px; height:48px; font-size:24px; border-radius:13px; }
  .is-box-preview .skillBoxPreflight { padding:10px; }
  .is-box-preview .skillBoxGiftPanel { padding:4px 2px 8px; gap:8px; }
  .is-box-preview .skillBoxGiftTitle { font-size:20px; }
  .is-box-preview .skillBoxGiftStock { grid-column:1/-1; grid-row:auto; padding:6px 9px; width:fit-content; font-size:10px; }
  .is-box-preview .skillBoxPreviewSelector>div { gap:8px; }
  .is-box-preview .skillBoxPreviewSelector button { gap:8px; padding:10px 8px; }
  .is-box-preview .skillBoxChoiceIcon { flex-basis:25px; width:25px; height:25px; }
  .is-box-preview .skillBoxChoiceCrate:after { left:8px; top:5px; }
  .is-box-preview .skillBoxChoiceCrown svg { width:25px; height:25px; }
  .is-box-preview .skillBoxChoiceCopy strong { font-size:13px; }
  .is-box-preview .skillBoxChoiceCopy small { font-size:9px; }
  .is-box-preview .skillBoxExperienceBody { grid-template-columns:1fr; gap:12px; }
  .is-box-preview .skillBoxExperienceContent { min-height:220px; padding:14px; }
  .is-box-preview .skillBoxClosed.has-preview-artwork { height:200px; }
  .is-box-preview .skillBoxTiers,.is-box-preview .skillBoxGiftOverview { order:1; padding:16px; }
  .is-box-preview .skillBoxGiftOverview dl { grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
  .is-box-preview .skillBoxGiftOverview dl>div { min-width:0; padding:9px; }
  .is-box-preview .skillBoxGiftOverview dd { font-size:12px; }
  .is-box-preview .skillBoxExperienceActions { position:sticky; bottom:0; z-index:4; padding:12px 0 8px; background:linear-gradient(transparent,#190b38 25%); }
  .is-box-preview .skillBoxExperienceActions .btn3d { width:100%; min-width:0; }
}