/* The Seven Trials: the HUD of a fight. */
.khan-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: var(--sans, 'Vazirmatn', system-ui, sans-serif); color: #f4ead5; }
.khan-hud > * { pointer-events: none; }
.khan-hud .k-bar { height: 8px; background: rgba(10, 6, 4, 0.6); border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(231, 201, 138, 0.35); }
.khan-hud .k-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c0304a, #e8682a); transition: width 0.15s; }

.k-top { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); width: min(560px, 92vw); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.k-stage { font: 600 15px/1.3 var(--serif); letter-spacing: 0.08em; color: #e7c98a; text-transform: uppercase; }
.k-goal { font-size: 13.5px; margin-top: 2px; color: #f4ead5; }
.k-boss { margin-top: 10px; }
.k-boss-name { font: 600 14px var(--serif); letter-spacing: 0.06em; color: #ffd27a; margin-bottom: 4px; }
.k-boss-bar { height: 12px; background: rgba(10, 6, 4, 0.7); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.6), 0 0 18px rgba(192, 48, 74, 0.35); }
.k-boss-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a0f1f, #c0304a 60%, #e8682a); transition: width 0.15s; }

.k-say { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); width: min(620px, 92vw); background: rgba(18, 12, 30, 0.72); border: 1px solid rgba(231, 201, 138, 0.5); border-radius: 12px; padding: 10px 16px; text-align: center; font-size: 14.5px; line-height: 1.5; animation: k-fade 0.5s; }
.k-say p { margin: 0; }
.k-say .fa { color: #e7c98a; font-size: 14px; margin-top: 4px; }
@keyframes k-fade { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

.k-party { position: absolute; left: 16px; top: 120px; display: grid; gap: 6px; width: 190px; }
.k-mate { background: rgba(14, 10, 24, 0.66); border-radius: 10px; padding: 6px 10px; border: 1px solid rgba(231, 201, 138, 0.25); }
.k-mate b { font-size: 13px; display: block; }
.k-mate small { font-size: 11px; opacity: 0.8; }
.k-mate.me { border-color: rgba(231, 201, 138, 0.7); }
.k-mate.down { opacity: 0.6; }
.k-mate.down .k-bar i { background: #555; }

.k-thirst { position: absolute; left: 16px; top: 300px; width: 190px; background: rgba(14, 10, 24, 0.66); border-radius: 10px; padding: 6px 10px; font-size: 12px; }
.k-thirst .k-bar i { background: linear-gradient(90deg, #2a8a9a, #7fd8ff); }
.k-thirst.low { box-shadow: 0 0 0 2px #e8682a; animation: k-blink 0.8s infinite alternate; }
@keyframes k-blink { to { box-shadow: 0 0 0 2px transparent; } }

.k-progress { position: absolute; left: 50%; bottom: 190px; transform: translateX(-50%); width: 260px; text-align: center; font-size: 13px; text-shadow: 0 1px 4px #000; }
.k-progress .k-bar i { background: linear-gradient(90deg, #e7c98a, #ffd27a); transition: none; }

.k-center { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 600 30px/1.2 var(--serif); letter-spacing: 0.1em; text-align: center; color: #ffe6a8; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9); max-width: 90vw; }
.k-storm { position: absolute; left: 50%; top: 210px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: rgba(120, 60, 20, 0.75); border: 1px solid #e8a84a; font-weight: 700; font-size: 14px; animation: k-blink 0.9s infinite alternate; }
.k-storm.safe { background: rgba(20, 70, 60, 0.75); border-color: #6fd3cf; animation: none; }
.k-warn { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); font: 700 26px var(--serif); color: #ff9a6a; text-shadow: 0 0 12px #c0304a, 0 2px 6px #000; }
.k-warn.pulse { animation: k-pulse 0.4s ease-out; }
@keyframes k-pulse { from { transform: translateX(-50%) scale(1.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.k-abilities { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.k-ab { position: relative; width: 62px; height: 62px; border-radius: 14px; border: 1px solid rgba(231, 201, 138, 0.55); background: radial-gradient(circle at 50% 30%, #2b2f6b, #121638); color: #f4ead5; display: grid; place-items: center; cursor: pointer; overflow: hidden; pointer-events: auto; touch-action: none; padding: 0; }
.k-ab svg { width: 26px; height: 26px; margin-top: -8px; }
.k-ab .k-key { position: absolute; top: 3px; inset-inline-start: 5px; font-size: 9.5px; color: #e7c98a; letter-spacing: 0.04em; }
.k-ab .k-name { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9.5px; opacity: 0.85; }
.k-ab .k-cd { position: absolute; inset: 0; background: conic-gradient(rgba(6, 4, 12, 0.72) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.k-ab.ready { box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.35), 0 0 14px rgba(255, 210, 122, 0.15); }
.k-ab:active { transform: scale(0.95); }

.k-leave { position: absolute; right: 16px; top: 232px; pointer-events: auto; }
.k-nums { position: absolute; inset: 0; overflow: hidden; }
.k-num { position: absolute; left: 0; top: 0; font: 700 18px var(--serif); text-shadow: 0 2px 4px #000, 0 0 2px #000; white-space: nowrap; will-change: transform; }
.k-num.hit { color: #fff1c8; }
.k-num.crit { color: #ffcf3a; font-size: 24px; }
.k-num.hurt { color: #ff5a4a; font-size: 20px; }
.k-num.ally { color: #ff9a8a; font-size: 15px; }
.k-num.heal { color: #8affb0; }
.k-num.sol { color: #cfe6ff; font-size: 14px; }
.k-num.guard { color: #e7c98a; font-size: 13px; }

@media (max-width: 700px) {
  .k-top { top: 64px; }
  .k-party { top: auto; bottom: 200px; width: 150px; }
  .k-thirst { top: auto; bottom: 170px; width: 150px; }
  .k-abilities { left: auto; right: 12px; transform: none; bottom: 110px; display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
  .k-ab { width: 56px; height: 56px; }
  .k-leave { top: 64px; right: 10px; }
  .k-say { top: 120px; font-size: 13px; }
}