.quest-preview-dialog { width: min(310px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 15px; border: 2px solid #9caad1; border-radius: 7px; background: #eef3ff; color: #303449; text-align: center; box-shadow: 0 5px 18px #0008; }
.quest-preview-dialog::backdrop { background: #14172d55; }
.quest-preview-dialog header { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 0 0 16px; border: 0; background: none; }
.quest-preview-dialog h2 { font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.25; margin: 0; }
.quest-preview-dialog header button { min-width: 36px; height: 36px; padding: 0; border: 1px solid #7f8cac; border-radius: 6px; background: #d8e0f3; color: #303449; font-size: 25px; }
.quest-preview-dialog > p { font-size: 13px; line-height: 1.5; margin: 18px 0 10px; }
.quest-preview-dialog > button { min-width: 140px; min-height: 42px; margin: 4px auto; }
.quest-reward-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 14px; width: 100%; }
.quest-reward-items figure { margin: 0; width: 78px; }
.quest-reward-items figure > div { position: relative; aspect-ratio: 1; border: 2px solid #c4d9eb; background: radial-gradient(ellipse at 45% 30%, #42596a, #0f1728 78%); box-shadow: 0 2px 2px #14182788; }
.quest-reward-items img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.quest-reward-items b { position: absolute; bottom: 0; right: 3px; color: #fff; font-size: 14px; text-shadow: 0 2px 2px #000, 1px 0 #000; }
.quest-reward-items figcaption { margin-top: 6px; font-size: 11px; font-weight: 700; }
.quest-reward-dialog { height: min(620px, 78dvh); }
.quest-reward-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px; text-align: center; background: linear-gradient(135deg, transparent 50%, #8987b111 50%), linear-gradient(225deg, #6972940c 50%, #353a571a 50%); }
.quest-reward-body > p:first-child { font-size: 15px; font-weight: 800; margin: 0 0 clamp(20px, 6dvh, 55px); text-shadow: 0 2px 2px #25283a; }
.quest-reward-body > small { margin-top: 25px; color: #d0d5ea; }
#quest-reward-status { font-size: 12px; min-height: 16px; color: #fff0b3; }
.quest-reward-dialog > footer { flex-shrink: 0; display: flex; justify-content: center; padding: 14px; background: #525774; border-top: 2px solid #3e4560; }
.quest-reward-dialog > footer button { width: 180px; min-height: 46px; font-size: 19px; }
.quest-preview-dialog [hidden] { display: none !important; }
.quest-preview-dialog :focus-visible { outline: 3px solid #2d609c; outline-offset: 3px; }
@media (max-width: 400px) { .quest-reward-items { gap: 12px; } .quest-reward-items figure { width: 70px; } }