/* The character and the foreground dialogue share one composition. */
.q-dialog.q-character-dialog{width:min(720px,calc(100vw - 24px));max-width:720px;max-height:calc(100dvh - 24px);padding:6px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.q-character-dialog::backdrop{background:#382317b5;backdrop-filter:blur(5px)}
.character-scene,.q-character-dialog .quiz-intro{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;isolation:isolate}
.character-stage,.q-character-dialog .npc-stage{display:flex;justify-content:center;align-items:flex-end;width:100%;height:clamp(180px,43dvh,400px);min-height:0;flex:none;position:relative;z-index:0}
.character-stage .character-media,.q-character-dialog .npc-stage .character-media{display:block;width:100%;max-width:490px;height:100%;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent}
.character-stage:has([data-character-video]),.q-character-dialog .npc-stage:has([data-character-video]){overflow:hidden}
.character-stage [data-character-ready=false],.q-character-dialog .npc-stage [data-character-ready=false]{visibility:hidden;transform:translateY(105%)}
.character-stage [data-character-ready=true],.q-character-dialog .npc-stage [data-character-ready=true]{animation:character-rise 1.5s cubic-bezier(.16,1,.3,1) both}
@keyframes character-rise{0%{transform:translate3d(0,105%,0);opacity:0}25%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.character-stage [data-character-ready=true],.q-character-dialog .npc-stage [data-character-ready=true]{animation:none;transform:none}}
.character-panel,.q-character-dialog .npc-dialogue{box-sizing:border-box;position:relative;z-index:1;width:100%;align-self:auto;margin:-24px 0 0;padding:34px 32px 28px;border:1px solid #efd8b6;border-radius:22px;background:var(--brand-cream,#fff9ef);box-shadow:0 12px 40px #29170e2b;text-align:center;overflow-wrap:anywhere}
.character-panel>.q-kicker,.q-character-dialog .npc-name{display:block;padding:0 40px;margin:8px 0 18px;color:var(--brand-orange-dark,#b84c00)}
.character-panel h2{max-width:590px;margin:12px auto 18px;font-size:clamp(21px,3.4vw,27px);line-height:1.3}
.character-panel>.q-row{justify-content:center;margin-top:24px;gap:12px}
.character-panel>.q-row button{min-width:145px;min-height:48px}
.q-character-dialog .q-close{position:absolute;top:16px;right:16px;float:none;z-index:2;display:grid;place-items:center;width:42px;height:42px;padding:0}
.character-panel .q-loading{padding:20px}
.q-character-dialog .npc-speech{min-height:92px;margin:16px auto;font-size:18px!important;line-height:1.6!important;max-width:570px}
.q-character-dialog .npc-reward{justify-content:center;padding-top:14px}
.q-character-dialog .npc-actions{justify-content:center;flex-wrap:wrap;gap:14px;margin-top:18px}
.q-character-dialog .npc-page{flex-basis:100%;text-align:center}
.q-character-dialog .npc-next{min-width:170px}
.q-character-dialog .quest-song>span{float:none;font-size:30px;line-height:1}
.q-character-dialog .quest-song p{white-space:normal}
.q-character-dialog .character-scene,.q-character-dialog .quiz-intro{max-height:calc(100dvh - 40px)}
.q-character-dialog .character-panel,.q-character-dialog .npc-dialogue{flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e5b271 transparent;scrollbar-gutter:stable both-edges}
.q-character-dialog :is(.character-panel,.npc-dialogue)::-webkit-scrollbar{width:5px}
.q-character-dialog :is(.character-panel,.npc-dialogue)::-webkit-scrollbar-track{background:transparent;margin-block:22px}
.q-character-dialog :is(.character-panel,.npc-dialogue)::-webkit-scrollbar-thumb{background:#e5b271;border-radius:999px}
.q-character-dialog :is(.character-panel,.npc-dialogue)::-webkit-scrollbar-thumb:hover{background:#d68b36}
.q-character-dialog :is(.character-panel,.npc-dialogue):focus-visible{outline:2px solid #e5b271;outline-offset:-5px}
.q-dialog.q-character-dialog>.q-content,.q-dialog.q-character-dialog>.q-quest-content{overflow:visible;max-height:none;padding:0}
.q-character-dialog[data-character-compact=true] .character-stage{height:clamp(120px,25dvh,240px)}
.npc-media-preview .character-media{width:110px;height:140px;object-fit:contain;border:1px solid var(--q-line);border-radius:12px;background:#fff0d7}
.scene-media-preview .character-media{width:100%;height:100%;object-fit:contain}
@media(max-width:520px){.q-dialog.q-character-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:4px}.character-stage,.q-character-dialog .npc-stage{height:clamp(160px,38dvh,290px)}.character-panel,.q-character-dialog .npc-dialogue{padding:28px 18px 22px;border-radius:18px;margin-top:-20px}.character-panel>.q-kicker,.q-character-dialog .npc-name{padding:0 32px;font-size:10px}.q-character-dialog .q-close{width:34px;height:34px;top:12px;right:12px}.q-character-dialog .npc-speech{font-size:16px!important;min-height:100px}.character-panel>.q-row button{min-width:0;flex:1}.character-panel>.q-row{gap:8px}}
@media(max-height:500px){.character-stage,.q-character-dialog .npc-stage{height:140px}.character-panel,.q-character-dialog .npc-dialogue{padding-top:22px}.q-character-dialog .npc-speech{min-height:0}}

.quest-class-choice{max-width:480px;margin:20px auto;text-align:left}
.quest-music-choice h2{margin:12px auto 20px}.quest-music-choice form{max-width:520px;margin:auto;text-align:left}.quest-music-choice .q-row{justify-content:center;gap:12px;margin-top:24px}.quest-music-choice .q-row button{min-height:48px}.music-topic{display:grid;gap:6px;padding:14px;background:#fff0d7;border-radius:12px;text-align:center;overflow-wrap:anywhere}.music-topic small{color:#995014}.music-topic strong{font-size:16px;line-height:1.45}.music-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:480px;margin:20px auto}.music-styles button{display:grid;gap:4px;min-height:84px;text-align:center;border:2px solid #eed8b8;background:#fff9ef;color:#52311f}.music-styles strong{font-size:19px}.music-styles small{font-size:12px}.music-styles [aria-pressed=true]{border-color:#df6900;background:#ffe69e;box-shadow:0 0 0 2px #ffcf59}.music-styles button:focus-visible{outline:3px solid #b85200;outline-offset:3px}
@media(max-width:520px){.quest-music-choice .q-row button{flex:1}.music-styles{gap:8px}.music-styles button{padding:12px 8px}.quest-class-choice{width:100%}}

.q-character-dialog:has(.quest-music-choice) .character-stage{height:clamp(100px,20dvh,160px)}.q-character-dialog:has(.quest-music-choice) .character-panel{padding-top:24px;padding-bottom:22px}.q-character-dialog:has(.quest-music-choice) .character-panel>.q-kicker{margin:4px 0 10px}.quest-music-choice>.q-fine{margin:6px 0 12px}.quest-music-choice h2{margin:10px auto 16px}.quest-music-choice .music-styles{margin:16px auto}.quest-music-choice .music-styles button{min-height:76px}.quest-music-choice .q-row{margin-top:18px}
