/* ─────────────────────────────────────────────────────────────
   QUEST POPUP · event details as a game dialog box
   ───────────────────────────────────────────────────────────── */
.qmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(10,5,24,.78); backdrop-filter: blur(6px); }
.qmodal[data-vertical="flagship"]   { --c1: #f3c35f; --c3: #fff3c4; }
.qmodal[data-vertical="management"] { --c1: #5fd8ff; --c3: #d6f6ff; }
.qmodal[data-vertical="cultural"]   { --c1: #ff6fb5; --c3: #ffe0f0; }
.qmodal[data-vertical="sports"]     { --c1: #b48bff; --c3: #f1e6ff; }
.qmodal__box { position: relative; width: min(540px, 100%); padding: 32px 30px 28px; border: 1px solid color-mix(in srgb, var(--c1) 60%, transparent);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 60%), linear-gradient(180deg, #2a1658, #140a33);
  box-shadow: 0 0 0 4px rgba(17,9,38,.8), 0 0 40px color-mix(in srgb, var(--c1) 35%, transparent), 0 30px 80px rgba(0,0,0,.6); animation: qmIn .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes qmIn { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.qmodal__box .hud-corner { border-color: var(--c3); }
.qmodal__x { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 1.7rem; cursor: pointer; color: var(--c3); }
.qmodal__head { display: flex; align-items: center; gap: 10px; }
.qmodal__icon { width: 26px; height: 26px; color: var(--c1); filter: drop-shadow(0 0 8px var(--c1)); }
.qmodal__icon svg { width: 100%; height: 100%; }
.qmodal__type { font: italic 800 .74rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--c1); }
.qmodal__rank { margin-left: auto; margin-right: 28px; font: 400 .62rem/1 var(--f-display); text-transform: uppercase; color: #160b33; padding: 5px 9px 4px; background: linear-gradient(180deg, var(--c3), var(--c1)); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.qmodal__title { margin: 16px 0 10px; font: 400 clamp(1.4rem, 4vw, 1.9rem)/1.15 var(--f-display); color: #fff; text-shadow: 0 2px 0 #1c0838, 0 0 18px var(--c1); }
.qmodal__text { color: var(--ivory); font-size: 1rem; margin: 0; }
.qmodal__note { color: var(--muted); font-size: .84rem; margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed rgba(233,189,103,.3); }
.qmodal__actions { margin-top: 22px; display: flex; justify-content: flex-end; }