/* The close control belongs to the modal, outside every scrolling surface. */
.q-dialog.q-play-dialog{max-height:calc(100dvh - 144px);overflow:visible}
.q-dialog.q-play-dialog>.q-close{position:absolute;top:-52px;right:8px;z-index:10;float:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #e8a740;border-radius:50%;background:#fff9ef;color:#71350b;font-size:25px;line-height:1;box-shadow:0 4px 16px #38231740;cursor:pointer}
.q-dialog.q-play-dialog>.q-close[hidden]{display:none}
.q-dialog.q-play-dialog>.q-close:hover{background:#ffe7a1}
.q-dialog.q-play-dialog>.q-close:focus-visible{outline:3px solid #ffba24;outline-offset:3px}
.q-play-dialog>.q-content,.q-play-dialog>.q-quest-content,.q-play-dialog>.seasonal-dialog-content{max-height:calc(100dvh - 208px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e5b271 transparent}
.q-dialog.q-play-dialog.q-character-dialog{--character-height:clamp(120px,30dvh,260px);--character-overlap:24px;max-height:calc(100dvh - 144px);overflow:visible}
.q-play-dialog.q-character-dialog>.q-content,.q-play-dialog.q-character-dialog>.q-quest-content{max-height:none;overflow:visible}
.q-play-dialog.q-character-dialog .character-scene,.q-play-dialog.q-character-dialog .quiz-intro{max-height:calc(100dvh - 156px)}
.q-play-dialog.q-character-dialog .character-stage,.q-play-dialog.q-character-dialog .npc-stage{flex:0 0 auto;height:var(--character-height);min-height:0}
.q-play-dialog.q-character-dialog[data-character-compact=true]{--character-height:clamp(100px,23dvh,180px)}
.q-play-dialog.q-character-dialog :is(.character-stage,.npc-stage) .character-media{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:490px;object-fit:contain;object-position:center bottom}
.q-play-dialog.q-character-dialog :is(.character-panel,.npc-dialogue){flex-shrink:1;min-height:min(200px,40dvh)}
.q-play-dialog button:disabled{cursor:not-allowed}
.demo-required-note{font-size:13px;color:#895122;text-align:center}
.music-styles button:disabled{opacity:.4;filter:grayscale(.5);box-shadow:none}
@media(max-width:520px){.q-play-dialog>.q-content,.q-play-dialog>.q-quest-content,.q-play-dialog>.seasonal-dialog-content{max-height:calc(100dvh - 188px)}.q-dialog.q-play-dialog{padding:18px}.q-dialog.q-play-dialog.q-character-dialog{padding:4px}}
@media(max-height:500px){.q-play-dialog.q-character-dialog .character-stage,.q-play-dialog.q-character-dialog .npc-stage{display:none}.q-play-dialog.q-character-dialog :is(.character-panel,.npc-dialogue){margin-top:0;min-height:0}}

.q-dialog.q-play-dialog.q-character-dialog>.q-close{top:calc(6px + var(--character-height) - var(--character-overlap) - 52px);right:14px}
@media(max-width:520px){.q-dialog.q-play-dialog.q-character-dialog{--character-overlap:20px}.q-dialog.q-play-dialog.q-character-dialog>.q-close{top:calc(4px + var(--character-height) - var(--character-overlap) - 52px);right:12px}}
@media(max-height:500px){.q-dialog.q-play-dialog.q-character-dialog>.q-close{top:-52px}}

/* On touch screens the close button stays inside a reserved modal header. */
@media(max-width:760px), (any-pointer:coarse){
 .q-dialog,.q-dialog.q-play-dialog,.q-dialog.student-profile-dialog{--mobile-modal-action-top:12px;max-height:calc(100dvh - 28px);padding:68px 18px 18px;overflow:visible}
 .q-dialog>.q-close,.q-dialog.q-play-dialog>.q-close,.q-dialog.student-profile-dialog>.q-close,.q-dialog.q-play-dialog.q-character-dialog>.q-close{position:absolute;top:var(--mobile-modal-action-top);right:12px;z-index:40;float:none;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #e8a740;border-radius:50%;background:#fff4dc;color:#71350b;box-shadow:none;font-size:25px;line-height:1;touch-action:manipulation}
 .q-dialog>:is(.q-content,.q-quest-content,.seasonal-dialog-content,#island-dialog-content),.q-dialog.student-profile-dialog>:is(.q-content,#island-dialog-content){max-height:calc(100dvh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e5b271 transparent}
 .q-dialog>.seasonal-dialog-content{padding:0 4px 4px}
 body dialog.q-dialog>.game-music-control{position:absolute;top:var(--mobile-modal-action-top);right:64px;bottom:auto;left:auto;z-index:39}
 body dialog.q-dialog>.game-music-control summary{width:44px;height:44px;min-height:44px;border-radius:50%;padding:8px;font-size:22px}
 body dialog.q-dialog>.game-music-control .game-music-popover{top:52px;bottom:auto;right:-52px;left:auto;max-width:calc(100vw - 64px)}
 .q-dialog.q-play-dialog.q-character-dialog{--mobile-modal-action-top:calc(6px + var(--character-height) - var(--character-overlap) + 12px);max-height:calc(100dvh - 28px);padding:6px}
 .q-dialog.q-character-dialog>:is(.q-content,.q-quest-content){max-height:none;overflow:visible}
 .q-play-dialog.q-character-dialog :is(.character-scene,.quiz-intro){max-height:calc(100dvh - 40px)}
 .q-play-dialog.q-character-dialog :is(.character-panel,.npc-dialogue){padding-top:68px}
}
@media(max-width:520px){.q-dialog.q-play-dialog.q-character-dialog{padding:4px;--mobile-modal-action-top:calc(4px + var(--character-height) - var(--character-overlap) + 12px)}}
@media(max-height:500px) and (any-pointer:coarse), (max-height:500px) and (max-width:760px){.q-dialog.q-play-dialog.q-character-dialog{--mobile-modal-action-top:18px}}
.quest-reward .quest-chest video{width:100%;height:100%;max-width:220px;object-fit:contain}