/* HUD: always-on overlay above the 3D view. */
.hud-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-t) + 6px) 8px 14px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, rgba(5, 6, 14, .85), rgba(5, 6, 14, .45) 70%, transparent); pointer-events: none !important; }
.hud-top > * { pointer-events: auto; }
.hud-player { display: flex; align-items: center; gap: 8px; }
.hud-player .who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; cursor: pointer; }
.hud-player .name { font-weight: 800; font-size: 13.5px; max-width: 120px; }
.hud-player .pow { display: flex; align-items: center; gap: 3px; font-weight: 900; font-size: 14px; color: #ffe9b8; }
.hud-player .pow .ic { width: 15px; height: 15px; }
.hud-vip { margin-left: 2px; padding: 2px 8px 2px 4px; border-radius: 9px; font-weight: 900; font-size: 12px; display: flex; align-items: center; gap: 3px; color: #3b2203; background: linear-gradient(#ffe08a, #e09a2a); box-shadow: 0 0 0 1.5px #5e4012, 0 2px 4px rgba(0, 0, 0, .5); cursor: pointer; }
.hud-buffs { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.hud-buff { display: flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 9px; background: rgba(8, 10, 22, .75); box-shadow: inset 0 0 0 1px rgba(63, 224, 197, .5); font-size: 11px; font-weight: 800; color: #b9fff2; }
.hud-res { display: flex; gap: 4px; }
.hud-res .pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 6px 0 3px; border-radius: 13px; background: linear-gradient(180deg, rgba(20, 24, 48, .92), rgba(10, 12, 26, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .45); font-weight: 800; font-size: 12px; cursor: pointer; }
.hud-res .pill .ic { width: 20px; height: 20px; }
.hud-res .pill span { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.hud-res .pill.prisms { flex: 1.15; box-shadow: inset 0 0 0 1px rgba(127, 232, 255, .55), 0 2px 5px rgba(0, 0, 0, .45); }
.hud-res .pill.prisms::after { content: "+"; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(#86e6a4, #3db56a); color: #06311a; font-weight: 900; font-size: 13px; line-height: 16px; text-align: center; flex: none; margin-right: -3px; }
.hud-res .pill.bump { animation: bump .3s; } @keyframes bump { 50% { transform: scale(1.12); filter: brightness(1.5); } }

.hud-left { position: absolute; left: 6px; top: calc(var(--safe-t) + 84px); display: flex; flex-direction: column; gap: 6px; width: 96px; }
.q { position: relative; display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 7px 0 3px; border-radius: 10px; background: linear-gradient(180deg, rgba(26, 32, 64, .93), rgba(13, 16, 34, .93)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 2px 6px rgba(0, 0, 0, .5); cursor: pointer; overflow: hidden; }
.q .ic { width: 24px; height: 24px; }
.q .txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1; }
.q .a { font-size: 9.5px; font-weight: 800; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; }
.q .b { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.q.idle { box-shadow: inset 0 0 0 1.5px var(--green), 0 2px 6px rgba(0, 0, 0, .5); } .q.idle .b { color: var(--green); }
.q.free { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 10px rgba(255, 196, 107, .5); } .q.free .b { color: var(--gold); }
.q > i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #f29a1f, #ffe08a); border-radius: 2px; }

/* side buttons: one column on the right edge; when they do not fit above the chat line the rest wrap into a second column to its left */
.hud-right { position: absolute; right: 6px; top: calc(var(--safe-t) + 84px); display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; gap: 8px 4px; align-items: flex-end;
  max-height: calc(100% - var(--safe-t) - var(--safe-b) - 84px - 128px); }
.side-b { position: relative; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; cursor: pointer; padding: 0; }
.side-b .disc { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #3a4686, #20284f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1.5px rgba(233, 189, 98, .65), 0 3px 8px rgba(0, 0, 0, .55); }
.side-b .disc .ic { width: 30px; height: 30px; }
.side-b .lab { margin-top: -6px; padding: 0 5px; border-radius: 6px; background: rgba(6, 8, 18, .85); font-size: 9.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; z-index: 1; }
.side-b .sub { font-size: 9.5px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.side-b:active .disc { transform: translateY(2px); filter: brightness(.9); }
.side-b.hot .disc { background: linear-gradient(180deg, #ffb347, #c8571b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1.5px #ffe08a, 0 0 14px rgba(255, 150, 60, .7); }
.side-b .dotn { top: -4px; right: -1px; }

.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; pointer-events: none !important; }
.hud-bottom > * { pointer-events: auto; }
.hud-tracker { align-self: flex-start; margin: 0 0 6px 6px; max-width: 72%; }
.tracker { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(34, 42, 84, .95), rgba(14, 17, 36, .95)); box-shadow: inset 0 0 0 1.5px rgba(233, 189, 98, .7), 0 3px 10px rgba(0, 0, 0, .55); cursor: pointer; }
.tracker .ic { width: 28px; height: 28px; }
.tracker .tt { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--gold); }
.tracker .td { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.tracker.done { box-shadow: inset 0 0 0 2px var(--green), 0 0 14px rgba(95, 211, 138, .6); }
.hud-chat { margin: 0 6px 6px; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; border-radius: 9px; background: rgba(6, 8, 18, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); font-size: 12px; cursor: pointer; }
.hud-chat .ic { width: 18px; height: 18px; flex: none; }
.hud-chat .msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.hud-chat .msg b { color: var(--gold); }
.hud-nav { display: flex; align-items: flex-end; gap: 2px; padding: 6px 4px calc(var(--safe-b) + 6px); background: linear-gradient(180deg, #2a3366, #151a36); box-shadow: 0 -2px 0 var(--gold2), 0 -3px 0 #4a3210, 0 -10px 24px rgba(0, 0, 0, .5); }
.nav-b { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; color: var(--ink2); font-weight: 800; font-size: 10.5px; letter-spacing: .3px; cursor: pointer; padding: 2px 0; }
.nav-b .ic { width: 32px; height: 32px; transition: transform .1s; }
.nav-b:active .ic { transform: scale(.88); }
.nav-b.main { flex: 1.25; margin-top: -22px; color: #ffe9b8; }
.nav-b.main .orb { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ffe9a8, #f0a02e 55%, #a3600f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 0 3px #1b2146, 0 0 0 4.5px var(--gold), 0 6px 14px rgba(0, 0, 0, .6); }
.nav-b.main .orb .ic { width: 42px; height: 42px; }
.nav-b .dotn { top: 0; right: 16%; }
.nav-b.locked { filter: grayscale(1) brightness(.6); }

/* world-space labels drawn over the 3D view */
.wl { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none; will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wl .name { padding: 1px 7px; border-radius: 7px; background: rgba(6, 8, 18, .72); font-size: 10.5px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.wl .name .lv { color: var(--gold); }
.wl .name { transition: opacity .18s; } .wl.under .name { opacity: 0; }
.wl .bub { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #fff, #e9eefc 60%, #aab4d8); box-shadow: 0 0 0 2px #1b2146, 0 4px 8px rgba(0, 0, 0, .5); cursor: pointer; animation: bob 1.6s ease-in-out infinite; }
.wl .bub .ic { width: 27px; height: 27px; }
.wl .bub.gold { background: radial-gradient(circle at 50% 30%, #fff6d0, #ffd77a 60%, #e09a2a); }
.wl .bub.green { background: radial-gradient(circle at 50% 30%, #eafff1, #9af0b5 60%, #3db56a); }
.wl .bub.teal { background: radial-gradient(circle at 50% 30%, #eafffb, #8ff5e4 60%, #1fa890); }
.wl .bub.red { background: radial-gradient(circle at 50% 30%, #fff0f0, #ff9a9a 60%, #d43d47); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wl .jbar { width: 74px; }
.wl .jbar .bar { height: 12px; } .wl .jbar .bar > span { font-size: 9.5px; }
.wl.plot .name { background: rgba(6, 8, 18, .55); color: var(--ink2); }
.wl .tagline { font-size: 10px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000; }

/* floating widgets above the quest tracker (the Vigil chest) */
.hud-float { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; margin: 0 0 8px 8px; }
.hud-float:empty { display: none; }
.vg-chest { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: 66px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vg-chest.hidden { display: none; }
.vg-ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffd36b calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); box-shadow: 0 4px 12px rgba(0, 0, 0, .65); transition: transform .12s; }
.vg-disc { width: 51px; height: 51px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a4488, #151a3a 72%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.vg-disc .ic { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.vg-lab { margin-top: -9px; min-width: 46px; padding: 1px 7px 2px; border-radius: 9px; background: rgba(8, 10, 24, .92); box-shadow: inset 0 0 0 1.5px rgba(255, 211, 107, .55); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; z-index: 1; }
.vg-chest:active .vg-ring { transform: scale(.93); }
.vg-chest.ripe .vg-disc .ic { animation: vg-nod 2.4s ease-in-out infinite; }
.vg-chest.full .vg-ring { box-shadow: 0 0 0 2px rgba(255, 211, 107, .9), 0 0 18px rgba(255, 190, 70, .85); animation: vg-bob 1.3s ease-in-out infinite; }
.vg-chest.full .vg-lab { background: linear-gradient(180deg, #ffd36b, #f0a030); color: #2a1a00; box-shadow: none; }
@keyframes vg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes vg-nod { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .vg-chest.full .vg-ring, .vg-chest.ripe .vg-disc .ic { animation: none; } }

/* Beacon level-up card (panels/levelup.js) */
.lu-hero { position: relative; height: 168px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 46%, #4a2f7a, #161a40 68%); box-shadow: inset 0 0 0 1.5px rgba(255, 211, 107, .35); }
.lu-rays { position: absolute; left: 50%; top: 46%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 211, 107, .26) 0 7deg, rgba(255, 211, 107, 0) 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 64%); mask: radial-gradient(circle, #000 18%, transparent 64%); animation: lu-spin 22s linear infinite; }
.lu-glow { position: absolute; left: 50%; top: 46%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 120, .75), rgba(255, 170, 60, 0) 68%); animation: lu-pulse 2.2s ease-in-out infinite; }
.lu-badge { position: relative; top: -12px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 28%, #fff3c4, #ffc54a 48%, #e58a1c 100%); box-shadow: 0 0 0 4px #7a4a10, 0 0 0 6px rgba(255, 233, 168, .55), 0 6px 22px rgba(0, 0, 0, .55); animation: lu-pop .55s cubic-bezier(.2, 1.7, .4, 1) both; }
.lu-badge span { font-size: 44px; font-weight: 900; color: #3a2200; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lu-cap { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; text-shadow: 0 1px 3px #000; }
.lu-cap .ic { width: 14px; height: 14px; opacity: .8; }
.lu-cap b { color: var(--gold); font-weight: 900; letter-spacing: .3px; }
.lu-old { opacity: .6; font-weight: 800; }
.lu-plots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.lu-plot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(60, 72, 140, .75), rgba(24, 28, 62, .9)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); color: #fff; font: inherit; cursor: pointer; animation: lu-rise .4s ease-out both; }
.lu-plot:nth-child(2) { animation-delay: .07s; } .lu-plot:nth-child(3) { animation-delay: .14s; } .lu-plot:nth-child(4) { animation-delay: .21s; }
.lu-plot .nm { font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.15; }
.lu-plot .go { font-size: 10px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .5px; }
.lu-plot:active { transform: scale(.96); }
.lu-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; }
.lu-line .ic { flex: none; }
@keyframes lu-spin { to { transform: rotate(360deg); } }
@keyframes lu-pulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lu-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lu-rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lu-rays, .lu-glow, .lu-badge, .lu-plot { animation: none; } }