/* Quiet, readable character dialogue. The artwork remains the focal point. */
.character-line{position:relative;max-width:600px;min-width:0;margin:10px auto 0;padding:20px 60px 14px 24px;border:1px solid color-mix(in srgb,var(--accent,#ccb77d) 35%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--bg) 94%,var(--accent,#ccb77d));color:var(--fg);text-align:left;box-shadow:0 8px 30px #00000012;animation:character-line-in .3s ease both}
.character-line:before{content:'';position:absolute;top:-6px;left:32px;width:10px;height:10px;border-left:1px solid color-mix(in srgb,var(--accent,#ccb77d) 35%,var(--line));border-top:1px solid color-mix(in srgb,var(--accent,#ccb77d) 35%,var(--line));background:var(--bg);transform:rotate(45deg)}
.character-line-zh{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(24px,2.1vw,34px);line-height:1.7;letter-spacing:.06em;margin:0!important;overflow-wrap:anywhere}
.character-voice{position:absolute;right:12px;top:16px;width:38px;height:38px;min-height:38px;display:grid;place-items:center;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.character-voice svg{width:22px;height:22px}.character-voice[data-speaking]{background:var(--aura,#dac79520);color:var(--accent,var(--fg))}
.character-translation{font-size:12px;color:var(--muted);margin-top:6px}.character-translation summary{cursor:pointer;width:max-content;list-style:none;text-decoration:underline;text-underline-offset:4px;padding:4px 0}.character-translation p{font-size:14px;line-height:1.5;margin:8px 0 0}.voice-status{font-size:11px;color:var(--muted)}.voice-status:empty{display:none}
.story-duel-identity{flex-wrap:wrap}.story-duel-identity>.character-line{flex-basis:100%;width:min(100%,600px);margin:6px auto}.story-confirm>.character-line{margin:16px auto 24px}.character-line[data-voice=one]{border-color:#ae91c75c;background:color-mix(in srgb,var(--bg) 90%,#9370af);box-shadow:0 8px 32px #9d69b518}.character-line[data-voice=one] .character-line-zh{letter-spacing:.12em}
@keyframes character-line-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Keep the terrain wide while maintaining the portrait's aspect ratio. */
.hskduel-ui .story-page{width:100%;max-width:none;padding-inline:0}.hskduel-ui .story-map{width:100%;max-width:none}.hskduel-ui:has(.story-page) .hsk-learn-links{display:none}
@media(min-width:900px){.hskduel-ui[data-screen=story] #app{padding-inline:clamp(16px,2vw,40px)}.hskduel-ui .story-head{padding:20px 26px}.hskduel-ui .world-chapter{border-radius:26px}.hskduel-ui .world-chapter .encounter-portrait{width:clamp(100px,7vw,140px);height:clamp(100px,7vw,140px)}.hskduel-ui .world-chapter .encounter-portrait.is-boss{width:clamp(126px,8vw,158px);height:clamp(126px,8vw,158px)}}
.story-fullscreen{margin-left:auto}.hskduel-ui:fullscreen{overflow:auto;background:var(--bg)}
.hskduel-ui .stone-cell,.hskduel-ui .hskduel-gem>.stone-cell,.hskduel-ui .practice-level-chooser .stone-cell{mask-image:none!important;-webkit-mask-image:none!important;background:transparent;filter:none}
@media(max-width:720px){.character-line{padding:15px 48px 12px 17px;border-radius:17px}.character-line-zh{font-size:23px}.character-voice{right:7px;top:13px}.story-fullscreen{display:none}.story-duel-identity{gap:12px}.story-duel-identity>.character-line{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.character-line{animation:none}}

.hskduel-ui .energy-gems i.empty{padding:0}
.hskduel-ui .one-challenge-rule{color:var(--fg)}

@media(min-width:900px){.hskduel-ui .world-chapter .encounter-portrait.is-chapter-boss{width:clamp(146px,9vw,176px);height:clamp(146px,9vw,176px)}.hskduel-ui .world-chapter .encounter-portrait.is-the-one{width:clamp(176px,11vw,208px);height:clamp(176px,11vw,208px)}}

/* Native terrain tiles are 724px wide. Keep the route sharp on large monitors. */
html.hskduel-ui .story-page>.story-map{max-width:760px;width:100%;margin-inline:auto}
html.hskduel-ui[data-screen=story] #app{padding-inline:0}
html.hskduel-ui .story-page{background:radial-gradient(ellipse at top,#819b9720,transparent 60%),var(--bg)}
@media(max-width:720px){.hskduel-ui .story-tools>.story-fullscreen{display:none!important}}
/* Compact energy and current-stage controls. */
.hskduel-ui .story-energy{position:relative;overflow:hidden;padding-bottom:13px}
.energy-refill-track{position:absolute;left:12px;right:12px;bottom:5px;height:3px;background:color-mix(in srgb,var(--fg) 15%,transparent);border-radius:3px;overflow:hidden}
.energy-refill-track>i{display:block;height:100%;width:0;background:#c9aa65;transition:width .9s linear;border-radius:inherit}
.energy-details #story-refill-progress{display:block;width:100%;height:12px;margin:20px 0 8px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:var(--line);accent-color:#c9aa65}
#story-refill-progress::-webkit-progress-bar{background:var(--line);border-radius:8px}#story-refill-progress::-webkit-progress-value{background:#c9aa65;border-radius:8px;transition:width .9s linear}#story-refill-progress::-moz-progress-bar{background:#c9aa65;border-radius:8px}
.story-current-arrow{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));z-index:12;width:52px;height:52px;min-height:52px;padding:12px;border-radius:50%;background:var(--bg);color:var(--fg);border:1px solid #c9aa6580;box-shadow:0 4px 20px #0005;animation:story-current-pulse 2.4s ease-in-out infinite}
.story-current-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.story-current-arrow[data-direction=up] svg{transform:rotate(180deg)}
@keyframes story-current-pulse{50%{box-shadow:0 4px 20px #0005,0 0 0 5px #c9aa6525}}
@media(prefers-reduced-motion:reduce){.story-current-arrow{animation:none}.energy-refill-track>i,#story-refill-progress::-webkit-progress-value{transition:none}}