/* Shared illustrated controls and roomier reward surfaces. */
.hskduel-ui .energy-bolts{display:flex;align-items:center;gap:5px}
.energy-bolts img{width:25px;height:34px;object-fit:contain;flex:none}
.energy-bolts .spent,.stage-stars .unearned{filter:grayscale(1);opacity:.24}
.energy-unlimited{font-size:24px;line-height:1}
.hskduel-ui #story-energy{position:relative;gap:10px;padding:7px 13px 11px;overflow:hidden}
.hskduel-ui #story-energy .energy-refill-track{position:absolute;bottom:3px;left:15px;right:15px;width:auto;height:3px;opacity:.6}
#story-menu img{display:block;object-fit:contain}
.hskduel-ui .world-landscape{height:8500px}
.hskduel-ui .world-chapter .stage-stars{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 10px;background:#101c28cc;border-radius:12px;min-height:34px;flex:none}
.hskduel-ui .stage-stars img{display:block;width:26px;height:26px;object-fit:contain}
.hskduel-ui .world-chapter .story-node:nth-child(n){gap:9px}
.hskduel-ui #modal:has(.energy-details){width:min(540px,calc(100vw - 32px));padding:32px;border-radius:28px}
.energy-details{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.energy-details h2,.energy-details p,.saved-energy h3{margin:0}
.energy-details h2{font-size:30px}
.energy-balance{display:flex;align-items:center;gap:14px;padding:6px 0}
.energy-balance .energy-bolts{gap:16px}
.energy-balance .energy-bolts img{width:43px;height:58px}
.energy-details #story-next-refill{font-size:16px;font-variant-numeric:tabular-nums;color:var(--muted)}
.energy-details #energy-subscribe{width:100%;min-height:54px;border-radius:14px;font-size:16px}
.saved-energy{align-self:stretch;display:grid;gap:18px;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.saved-energy h3{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:18px}
.saved-energy h3 span{min-width:36px;padding:6px 10px;border-radius:12px;background:var(--soft);font-variant-numeric:tabular-nums}
#use-energy{display:flex;align-items:center;justify-content:center;gap:14px;min-height:64px;border-radius:16px;font-size:17px}
#use-energy img{width:30px;height:38px;object-fit:contain;border-radius:0}
#energy-confirm:not(:empty){display:grid;gap:18px;padding-top:8px}
.energy-confirm-actions{display:flex;gap:12px}.energy-confirm-actions button{flex:1}
#modal:has(.energy-details)>#close-modal{display:block;width:100%;margin-top:24px;border-radius:14px}
.illustrated-meter{position:relative;isolation:isolate;width:100%;height:auto!important;aspect-ratio:5.5;overflow:visible;border:0;background:none;box-shadow:none;border-radius:0}
.illustrated-meter>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none}
.illustrated-meter>span{display:block;position:absolute;left:17%;right:17%;top:36%;height:28%;background:#1e2630;border-radius:12px;overflow:hidden;z-index:1;box-shadow:inset 0 2px 5px #000b}
.illustrated-meter>span>i{display:block;height:100%;width:var(--meter-fill,0%);background:linear-gradient(90deg,#216d66,#84e3c5);border-radius:inherit;box-shadow:inset 0 2px 3px #fff6;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.illustrated-meter.chest-meter{aspect-ratio:5.7}
.chest-meter>span{left:16%;right:15%;top:37%;height:28%}
.chest-meter>span>i{background:linear-gradient(90deg,#654fa9,#c9b1ff)}
.next-chest-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;margin-inline:auto}
.next-chest-progress>.illustrated-meter{flex:1;min-width:0}
.next-chest{display:block;flex:none;filter:grayscale(1);opacity:.4}
.next-chest .chest-art{width:88px!important;height:88px!important;max-width:none;aspect-ratio:1}
.round-rewards{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:8px 0}
.round-rewards h2{font-size:30px;margin:0}.round-rewards>strong{font-size:24px;font-variant-numeric:tabular-nums}
.round-rewards #reward-continue{width:100%;min-height:52px;border-radius:14px;margin-top:8px}
#modal:has(.round-rewards){width:min(650px,calc(100vw - 32px));padding:30px;border-radius:28px}
#modal:has(.round-rewards)>#close-modal{display:none}
/* Each sprite cell is square; flex must never flatten an opened chest. */
.hskduel-ui .chest-art{flex:none;aspect-ratio:1/1}
.hskduel-ui .treasure-reward>.chest-art{width:190px!important;height:190px!important;max-width:none;background-size:300% 200%}
.hskduel-ui .chest-reel-card>.chest-art{width:86px!important;height:86px!important;min-height:86px;max-width:none}
.mythic-currency-art,.bonus-chest-art{position:relative;display:block;width:116px;height:116px;flex:none}
.mythic-currency-art>img{width:100%;height:100%;object-fit:contain}
.bonus-chest-art>.chest-art{width:100%!important;height:100%!important}
.mythic-currency-art>b,.bonus-chest-art>b{position:absolute;right:-4px;bottom:0;min-width:36px;padding:5px 8px;border:1px solid #d7bdff77;border-radius:12px;background:#241837;color:#f5eaff;font-size:18px}
.chest-reel-card>.mythic-currency-art,.chest-reel-card>.bonus-chest-art{width:86px;height:86px}
.chest-progress{gap:16px;margin:20px 0}.chest-help-actions{justify-content:center;margin-top:20px}
.hskduel-ui .profile-icon>.astral-guardian-art{width:100%!important;height:100%!important;object-fit:contain!important;position:static;border-radius:0}
.hskduel-ui .profile-icon.has-frame>.astral-guardian-art{width:80%!important;height:80%!important;position:absolute;inset:10%}
.hskduel-ui .astral-frame>img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:100%;object-fit:contain!important;border-radius:0}
.hskduel-ui #modal:has(.mythic-shop){width:min(1000px,calc(100vw - 32px));max-width:1000px;max-height:calc(100dvh - 32px);padding:36px;border-radius:28px;overflow:auto}
.mythic-shop-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.mythic-shop h2{font-size:32px;margin:0}
.stone-balance{display:flex;align-items:center;gap:10px;font-size:25px;font-variant-numeric:tabular-nums}
.stone-balance img{width:48px;height:48px;object-fit:contain}.stone-balance span{font-size:13px;max-width:60px;line-height:1.4;color:var(--muted)}
.mythic-shop-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0}
.hskduel-ui .mythic-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;padding:24px 18px;border:1px solid #aa87dc44;border-radius:24px;background:radial-gradient(ellipse at 50% 28%,#ac82e824,transparent 63%),var(--soft);text-align:center;box-shadow:0 12px 26px #00000012}
.hskduel-ui .mythic-item:before,.hskduel-ui .mythic-item:after{display:none}
.mythic-art-stage{display:grid;place-items:center;width:100%;height:190px;margin-bottom:4px}
.mythic-shop-art{width:100%;height:100%;max-height:190px;object-fit:contain;filter:drop-shadow(0 8px 18px #bb9eff20)}
.mythic-title-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:5.5}
.mythic-title-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.mythic-title-art strong{position:relative;font-size:clamp(10px,1.05vw,15px);line-height:1.2;color:#fff0ce;max-width:70%;text-shadow:0 1px 3px #000}
.mythic-kind{text-transform:capitalize;font-size:12px;color:var(--muted)}
.mythic-item h3{font-size:20px;line-height:1.35;margin:0;min-height:54px;display:grid;place-items:center}
.hskduel-ui .mythic-item button{display:flex;align-items:center;justify-content:center;gap:10px;align-self:stretch;margin-top:auto;padding:10px 16px;min-height:54px;border-radius:14px;font-size:20px;font-weight:650;background:color-mix(in srgb,#b593e9 13%,var(--bg));border:1px solid #b593e966}
.mythic-item button img{width:32px;height:32px;object-fit:contain}
#modal:has(.mythic-shop)>#close-modal{margin-top:28px;min-width:120px;border-radius:14px}
.hskduel-ui .player-title[data-rarity=Mythic]{color:#cdb3ff;border-color:#cdb3ff66}
/* Compact title plaques sit under the player name rather than stretching across it. */
.hskduel-ui .duel-page[data-status] #duel-score .duel-player-head>strong{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;flex:1}
.hskduel-ui .duel-page[data-status] #duel-score .duel-player .player-title,.hskduel-ui .duel-open-person .player-title{display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:0;padding:6px 14px;min-height:28px;border-radius:9px;border:0;background:color-mix(in srgb,currentColor 9%,transparent);font-size:12px;font-weight:600;line-height:1.3;text-align:center;letter-spacing:.02em}
.hskduel-ui .duel-open-person{gap:16px;flex-wrap:wrap}
.hskduel-ui .duel-open-person .profile-icon{width:72px!important;height:72px!important}
.hskduel-ui .duel-open-person .profile-appearance{flex:none}
.hskduel-ui .hsk-wizard .wizard-pools:has(>button:only-child){grid-template-columns:minmax(0,1fr);width:100%;max-width:800px;margin-inline:auto}
.hskduel-ui .hsk-wizard #duel-order,.hskduel-ui .hsk-wizard #order{display:flex;align-items:center;justify-content:center;gap:18px}
.hsk-wizard #duel-order svg,.hsk-wizard #order svg{display:block!important;width:32px;height:32px;flex:none}
.hskduel-ui .wizard-review{max-width:900px;width:100%;margin:16px auto;gap:12px}
.hskduel-ui .wizard-review button{padding:22px 26px!important;min-height:80px;gap:24px;border-radius:18px!important}
.hskduel-ui .wizard-review button>span:first-child{font-size:17px}
.hskduel-ui .wizard-review button>strong{font-size:25px}
.hskduel-ui .duel-page[data-status=finished] #duel-stage{overflow:auto;justify-content:flex-start;padding:24px;gap:18px}
.hskduel-ui .duel-page[data-status=finished] .duel-result-seal{display:grid;place-items:center;flex:none;width:clamp(140px,24vh,240px);height:clamp(140px,24vh,240px);margin:0 auto;background:none;border:0;box-shadow:none;border-radius:0}
.hskduel-ui .duel-page[data-status=finished] .duel-result-seal img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;margin:0}
.hskduel-ui .duel-page[data-status=finished] #duel-stage>.duel-outcome{font-size:36px;margin:0;text-align:center}
.duel-review-button{display:flex;align-items:center;justify-content:center;gap:18px;width:min(100%,660px);align-self:center;padding:20px 24px;border-radius:18px;background:var(--soft);font-size:18px}
.duel-review-button>span{font-size:14px;color:var(--muted)}
.hskduel-ui #modal:has(.duel-answer-review){width:min(1000px,calc(100vw - 32px));max-width:1000px;max-height:calc(100dvh - 32px);padding:36px;border-radius:28px;overflow:auto}
.duel-answer-review h2{font-size:30px;margin-bottom:24px}
.duel-answer-review .duel-report{max-height:none;overflow:visible;padding:0;border:0}
.duel-answer-review .duel-report ol{list-style:none;padding:0;display:grid;gap:14px}
.duel-answer-review .duel-report li,.exam-review-answers article{display:flex;gap:20px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--soft);text-align:left;line-height:1.7}
.duel-answer-review .duel-report li>div{display:grid;gap:8px}
.duel-answer-review .duel-report strong[lang]{font-size:34px}
.duel-answer-review .duel-report li span{font-size:18px}
.duel-answer-review .answer-outcome{font-size:26px!important;color:#5daf8a}
.duel-answer-review .was-wrong .answer-outcome,.exam-review-answers .was-wrong>.answer-status{color:#df9299}
.exam-review-answers{display:grid;gap:18px;margin:24px 0}
.exam-review-answers article{display:grid;gap:14px}
.exam-review-answers article h3{font-size:12px;color:var(--muted);margin:0}
.exam-review-answers [lang]{font-size:28px;line-height:1.65}
.exam-review-answers ul{margin:0;font-size:16px}
.exam-review-answers article>.answer-status{font-size:18px;color:#5daf8a}
.duel-answer-review .exam-skill-grid{gap:14px}
.duel-answer-review .exam-skill-grid>div{padding:20px;border-radius:16px;background:var(--soft)}
.duel-answer-review .exam-skill-grid strong{font-size:28px}
.hskduel-ui .board-player-name{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Progress keeps the meaningful numbers and gives them a clearer hierarchy. */
.hskduel-ui .learner-progress{max-width:1120px;margin:0 auto}
.hskduel-ui .learner-progress h1{font-size:clamp(30px,4vw,44px);margin-bottom:32px}
.hskduel-ui .progress-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:28px}
.hskduel-ui .progress-highlights>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 20px;align-items:center;text-align:left;padding:28px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:24px;background:radial-gradient(ellipse at left top,#b5a66c13,transparent),var(--soft);box-shadow:0 10px 30px #0000000a}
.progress-highlights img{grid-row:span 2;width:76px;height:76px;object-fit:contain}
.hskduel-ui .progress-highlights strong{font-size:38px;line-height:1.2;font-weight:650;margin:0}
.hskduel-ui .progress-highlights span{font-size:12px;color:var(--muted);line-height:1.5}
.hskduel-ui .progress-grid{gap:24px}
.hskduel-ui .progress-card{padding:30px;border-radius:24px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--soft);box-shadow:0 10px 30px #00000008}
.hskduel-ui .progress-card h2{font-size:21px;font-weight:600;margin:0}
.hskduel-ui .coverage-number{font-size:48px;margin:28px 0 20px;line-height:1.25}
.hskduel-ui .coverage-number>span{font-size:15px;color:var(--muted)}
.hskduel-ui .progress-card progress{height:12px;border-radius:8px;overflow:hidden;accent-color:#8db5a7}
.hskduel-ui #progress-practise{margin-top:24px;min-height:50px;padding:12px 26px;border-radius:14px}
.hskduel-ui .activity-chart{height:205px;gap:12px;margin-top:26px}
.hskduel-ui .activity-column{border-radius:10px;background:color-mix(in srgb,var(--line) 45%,transparent)}
.hskduel-ui .activity-column i{border-radius:8px;background:linear-gradient(0deg,#547969,#98c8b5)}
.hskduel-ui .activity-day.is-today .activity-column i{background:linear-gradient(0deg,#9981b6,#c6b1eb)}
.hskduel-ui .activity-count{font-size:14px}
@media(min-width:900px){.hskduel-ui .duel-answer-feedback .answer-hanzi{font-size:42px}.hskduel-ui .duel-answer-feedback .answer-pinyin{font-size:24px}.hskduel-ui .exam-answer-review .answer-hanzi{font-size:48px}}
@media(max-width:720px){
 .hskduel-ui .world-landscape{height:8200px}.hskduel-ui .stage-stars img{width:23px;height:23px}
 .energy-bolts img{width:19px;height:27px}.energy-bolts{gap:2px}.hskduel-ui #story-energy{padding:5px 8px 9px}
 .hskduel-ui #modal:has(.mythic-shop){padding:24px}.mythic-shop-items{grid-template-columns:1fr;gap:18px}.mythic-shop-heading{gap:16px;margin-bottom:24px}.mythic-shop h2{font-size:26px}
 .hskduel-ui .mythic-item{display:grid;grid-template-columns:125px 1fr;gap:8px 20px;text-align:left;padding:22px}.mythic-art-stage{grid-row:1/4;width:125px;height:150px;margin:0}.mythic-kind{align-self:end}.mythic-item h3{font-size:18px;min-height:0;display:block}.mythic-item button{align-self:end}.mythic-title-art strong{font-size:8px}
 .hskduel-ui .wizard-review button{padding:18px!important;gap:12px}.hskduel-ui .wizard-review button>span:first-child{font-size:13px}.hskduel-ui .wizard-review button>strong{font-size:19px}
 .hskduel-ui .duel-page[data-status] #duel-score .duel-player-head>strong{gap:6px}.hskduel-ui .duel-page[data-status] #duel-score .duel-player .player-title{font-size:10px;padding:4px 7px;min-height:22px}
 .duel-review-button{flex-wrap:wrap;gap:8px 14px;padding:16px}.duel-review-button>strong{font-size:17px}.duel-review-button>span{font-size:12px}
 .hskduel-ui #modal:has(.duel-answer-review){padding:22px}.duel-answer-review .duel-report li,.exam-review-answers article{padding:18px;gap:12px}.duel-answer-review .duel-report strong[lang]{font-size:28px}.duel-answer-review .duel-report li span{font-size:15px}.exam-review-answers [lang]{font-size:23px}
 .hskduel-ui .progress-highlights{gap:10px}.hskduel-ui .progress-highlights>div{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 10px;text-align:center;border-radius:18px}.progress-highlights img{width:48px;height:48px}.hskduel-ui .progress-highlights strong{font-size:29px}.hskduel-ui .progress-highlights span{font-size:11px}.hskduel-ui .progress-card{padding:24px}.hskduel-ui .progress-card h2{font-size:19px}
}
@media(max-width:400px){.hskduel-ui .mythic-item{grid-template-columns:100px 1fr;padding:18px;gap:8px 14px}.mythic-art-stage{width:100px;height:130px}.mythic-item h3{font-size:16px}.energy-balance .energy-bolts{gap:10px}.energy-balance .energy-bolts img{width:36px;height:48px}}
@media(prefers-reduced-motion:reduce){.illustrated-meter>span>i{transition:none}}
#membership-checkout:disabled{display:flex;align-items:center;justify-content:center;gap:10px;opacity:.65;cursor:not-allowed}
#membership-checkout:disabled svg{width:20px;height:20px;flex:none}
/* Title artwork and its label must never split the title into stacked lines. */
.mythic-title-art strong{white-space:nowrap;max-width:none;font-size:clamp(10px,1.05vw,15px);text-align:center}
.mythic-item[data-kind=title] h3{white-space:nowrap;font-size:clamp(15px,1.55vw,20px)}
.hskduel-ui .player-title[data-rarity=Mythic]{white-space:nowrap;word-break:normal}
@media(max-width:720px){.mythic-title-art strong{font-size:7px}.mythic-item[data-kind=title] h3{font-size:15px}}
@media(max-width:400px){.mythic-title-art strong{font-size:6px}.mythic-item[data-kind=title] h3{font-size:13px}}
@media(max-width:720px){
 .hskduel-ui .mythic-item[data-kind=title]{display:flex;flex-direction:column;text-align:center}
 .mythic-item[data-kind=title] .mythic-art-stage{width:100%;height:70px;grid-row:auto}
 .mythic-item[data-kind=title] .mythic-title-art{max-width:330px}
 .mythic-item[data-kind=title] .mythic-title-art strong{font-size:12px}
 .mythic-item[data-kind=title] h3{font-size:18px}
 .mythic-item[data-kind=title] .mythic-kind{align-self:center}
}
.hskduel-ui .hsk-wizard .wizard-fields[data-field="4"]{overflow:auto;align-self:stretch;padding:4px!important}
.hskduel-ui .wizard-review{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px;gap:18px}
.hskduel-ui .wizard-review button{grid-template-columns:1fr 14px;gap:10px;text-align:left;min-height:110px}
.hskduel-ui .wizard-review button>span:first-child{grid-column:1;grid-row:1}
.hskduel-ui .wizard-review button>strong{grid-column:1;grid-row:2;text-align:left}
.hskduel-ui .wizard-review button>span:last-child{grid-column:2;grid-row:1/3}
@media(max-width:600px){.hskduel-ui .wizard-review{grid-template-columns:1fr;gap:10px;margin:0 auto}.hskduel-ui .wizard-review button{min-height:86px;padding:14px 18px!important}}
@media(max-height:600px) and (min-width:601px){.hskduel-ui .wizard-review button{min-height:82px;padding:14px 18px!important}}