/* ==========================================================================
   ASURA NEXUS — LIVE HUD WIDGET

   The in-game HUD: dino stats, the server-request queue cards, the teleport and
   prime-check panels, and the mobile sticky wrapper.

   base.html includes this widget on every page, so its styling shipped with
   every response already — it just shipped as markup instead of as a cached
   stylesheet. Linked after the chrome, which is the order it used to load in.
   ========================================================================== */

    /* =========================================
       --- KONSTRUKCE WIDGETU (PC i Mobil) ---
       ========================================= */
    #hudWidgetWrapper {
        position: fixed; bottom: 0; right: 0; left: 0; top: 0;
        pointer-events: none; z-index: 9900;
    }

    /* ---------------------------------------------------------------- DOCK
       Quests, Battlepass and the dino HUD are ONE card in the bottom right
       corner: a drawer that slides out of the top, a two-button bar, and the
       HUD under it. Nothing between them — no gap, no doubled border, radius
       only on the corners of the whole stack. `bottom` is written by
       layoutHudStacks(); the dino HUD is not always there to sit on. */
    #hudDock {
        position: fixed; bottom: 10px; right: 0; z-index: 9899;
        display: flex; flex-direction: column; align-items: stretch;
        /* Matches #dinoHud exactly, or the two read as two cards. */
        width: 330px; pointer-events: auto;
    }

    /* The drawer. Closed it is a zero-height sliver; open it pushes the rest of
       the card down the screen, which is what makes it read as sliding out of
       the bar rather than floating above it. */
    #hudPanels {
        display: flex; flex-direction: column;
        max-height: 0; overflow: hidden;
        transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #hudDock.panel-open #hudPanels { max-height: 70vh; overflow-y: auto; }
    .hud-panel[hidden] { display: none; }

    #hudQuestStack { display: flex; flex-direction: column-reverse; }

    /* The drawer's own skin: top corner rounded, bottom edge open so the tab bar
       continues it. Each panel's content sits inside without its own frame. */
    #hudPanels > .hud-panel > * {
        border-radius: 12px 0 0 0 !important;
        border-bottom: none !important;
    }

    #hudTabs {
        display: flex; flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.1); border-right: none;
        border-radius: 12px 0 0 12px;
        background: rgba(20, 22, 25, 0.9); backdrop-filter: blur(8px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    }
    /* Sitting on the dino HUD: square off the bottom and drop the border the HUD
       is about to draw, so the seam is one line rather than two. */
    #hudDock.has-hud #hudTabs { border-radius: 12px 0 0 0; border-bottom: none; box-shadow: none; }
    /* Drawer open: the tab bar is mid-card, so no rounding at all up top. */
    #hudDock.panel-open #hudTabs { border-radius: 0; border-top: none; }
    #hudDock.panel-open:not(.has-hud) #hudTabs { border-radius: 0 0 0 12px; }

    .hud-tab {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
        padding: 9px 10px; border: none; background: none; cursor: pointer;
        font-family: inherit; font-size: 0.62rem; font-weight: 800;
        letter-spacing: 0.4px; text-transform: uppercase; color: #9aa0a6;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .hud-tab[hidden] { display: none; }
    .hud-tab + .hud-tab { border-left: 1px solid rgba(255,255,255,0.08); }
    .hud-tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .hud-tab.is-open { background: rgba(35, 144, 193, 0.14); color: #fff; }
    .hud-tab-icon { font-size: 0.85rem; color: #6c7075; transition: color 0.2s ease; }
    .hud-tab:hover .hud-tab-icon,
    .hud-tab.is-open .hud-tab-icon { color: var(--nexus-blue, #2390c1); }
    .hud-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hud-tab-badge {
        margin-left: auto; flex-shrink: 0; padding: 1px 7px; border-radius: 50px;
        font-size: 0.58rem; font-weight: 900; color: #cfd3d7;
        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    }

    /* Something is waiting: a quest with every task ticked, or a battlepass
       reward nobody has taken. Gold plus a slow pulse, and only while the panel
       is closed — once it is open the player is already looking at it. */
    .hud-tab.needs-attention .hud-tab-icon {
        color: #f1c40f;
        animation: hudTabPulse 1.8s ease-in-out infinite;
    }
    .hud-tab.needs-attention .hud-tab-badge {
        color: #17181c; background: linear-gradient(135deg, #ffe082, #f1c40f);
        border-color: transparent;
    }
    @keyframes hudTabPulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(241,196,15,0)); }
        50%      { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(241,196,15,0.75)); }
    }
    /* The viewer's clan is under attack: the number turns red and pulses. */
    .hud-tab.is-alarm .hud-tab-icon { color: #ff3b3b; }
    .hud-tab.is-alarm .hud-tab-badge {
        color: #fff; background: #e0262b; border-color: transparent;
        animation: hudTabAlarm 1.2s ease-in-out infinite;
    }
    @keyframes hudTabAlarm {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,59,0.7); }
        50%      { transform: scale(1.15); box-shadow: 0 0 8px 2px rgba(255,59,59,0.6); }
    }
    @media (prefers-reduced-motion: reduce) {
        .hud-tab.needs-attention .hud-tab-icon { animation: none; }
        .hud-tab.is-alarm .hud-tab-badge { animation: none; }
        #hudPanels { transition: none; }
    }

    #hudQueueStack {
        position: fixed; bottom: 172px; right: 0px; z-index: 9901;
        display: flex; flex-direction: column-reverse; gap: 8px; width: 297px;
        pointer-events: none;
    }

    #dinoHud {
        position: fixed; bottom: 10px; right: 0px; z-index: 9900;
        background: rgba(20, 22, 25, 0.85); backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
        padding: 12px 15px; display: flex; gap: 20px;
        /* Same width as the dock above it: they are one card. */
        width: 330px; box-sizing: border-box;
        justify-content: space-between; box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: auto;
    }
    /* With the tab bar resting on it, the HUD is the bottom of the card: no top
       border to double the seam, and only the bottom corner rounded. */
    #dinoHud.docked { border-top: none; border-radius: 0 0 0 12px; }

    .hud-wrapper-hidden { display: none !important; }
    #hudHandle { display: none; }
    #dinoHud.offline { opacity: 0.5; filter: grayscale(1); }
    /* Akce (Slay) */
    /* 90px, not the 110px it used to be: the 20px went to the bars, which are
       the thing anybody actually reads mid-game. The labels still fit. */
    .hud-actions-col { display: flex; flex-direction: column; gap: 8px; justify-content: center; width: 90px; }
    /* The type is sized by the longest label in a 90px column — "Settings",
       since Prime Check became Prime. `nowrap` is what keeps a label that grows
       spilling visibly instead of quietly wrapping to a second line. */
    .hud-action-btn { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); border-radius: 6px; height: 24px; width: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; cursor: pointer; transition: all 0.2s ease; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; gap: 6px; }
    .hud-action-btn:hover:not(.disabled) { transform: translateX(3px); color: white; }

    /* A live count riding on an action button — same pill as the dock's tab
       badges, sized down to a 24px row. It sits after the label rather than
       pinned to the corner, so a two-digit number pushes nothing off the button. */
    .hud-btn-count {
        /* Without this the pill is a shrinkable flex item and a two-digit count
           is clipped inside a box sized for one. */
        flex-shrink: 0;
        min-width: 16px; padding: 0 4px; margin-left: 1px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        font-size: 0.6rem; font-weight: 900; line-height: 14px;
        text-align: center;
    }
    .hud-btn-count[hidden] { display: none; }

    /* The outline variant, which is what every button in this column wears: no
       fill, the colour carried by the frame and the icon, and the fill arriving
       only on hover. Four solid blocks of colour stacked beside the vitals was
       the loudest thing on screen for a strip of buttons you press a handful of
       times a session. Each button names its own three colours below. */
    .hud-action-btn.hud-action-outline {
        background: transparent;
        border-color: var(--hud-btn-border);
        color: rgba(255, 255, 255, 0.85);
    }
    .hud-action-btn.hud-action-outline i { color: var(--hud-btn-accent); }
    .hud-action-btn.hud-action-outline:hover:not(.disabled) {
        background: var(--hud-btn-hover);
        border-color: var(--hud-btn-accent);
        color: #fff;
    }
    .hud-action-btn.hud-action-outline:hover:not(.disabled) i { color: #fff; }

    #btnHudSlay {
        --hud-btn-accent: #e74c3c;
        --hud-btn-border: rgba(231, 76, 60, 0.55);
        --hud-btn-hover: rgba(231, 76, 60, 0.8);
    }
    #btnHudPrime {
        --hud-btn-accent: #9b59b6;
        --hud-btn-border: rgba(155, 89, 182, 0.5);
        --hud-btn-hover: rgba(142, 68, 173, 0.8);
    }
    #btnHudVoice {
        --hud-btn-accent: #1abc9c;
        --hud-btn-border: rgba(26, 188, 156, 0.5);
        --hud-btn-hover: rgba(22, 160, 133, 0.8);
    }
    #btnHudSettings {
        --hud-btn-accent: #5dade2;
        --hud-btn-border: rgba(93, 173, 226, 0.35);
        --hud-btn-hover: rgba(93, 173, 226, 0.65);
    }
    /* The timer sits on the first line of the title, not in the middle of a
       title that wrapped — so the row aligns to the top, not to the centre. */
    .queue-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 10px;
        width: 100% !important;
        margin-bottom: 2px;
    }

    /* -------------------------------------------------------- VITALS BARS
       Five tubes — health, thirst, hunger, stamina and growth — stretched to
       the full inner height of the HUD, so the strip and the button column
       beside it read as one block instead of a short row floating in it.

       Icon and percentage live INSIDE the tube: the icon standing on its floor,
       the number at the top, both above the fill and both always on. The bars
       used to be 70px with the icon underneath and the number revealed on
       hover, which meant a glance at the HUD answered nothing. */
    /* Growth leads the strip, then the four vitals. `space-between` rather than
       the gap alone: the columns are a fixed 31px and the strip is a few pixels
       wider than five of them, so the leftover has to be shared between all four
       gaps instead of piling up at one end. */
    .hud-stats-area { display: flex; flex: 1 1 auto; align-items: stretch; justify-content: space-between; gap: 7px; }
    .hud-col { display: flex; flex-direction: column; width: 31px; }
    /* 128px is the height the strip had when four action buttons set it. Moving
       Group out to the flap left only three, and without this the bars would
       have shrunk by a third as a side effect of a change to the buttons. */
    .hud-bar-bg {
        flex: 1 1 auto; width: 100%; min-height: 128px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 7px;
        position: relative; overflow: hidden;
    }
    .hud-bar-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; transition: height 0.5s ease; }
    /* The player's own alert level, from the HUD settings cookie — the line the
       thirst and hunger alerts fire below and the stamina one fires above. Its
       bottom edge sits at the threshold, so the fill's top edge meets it exactly
       when the alert trips.
       The default puts it below the floor, where `overflow: hidden` clips it, so
       a tube nobody sets a threshold for (health, growth) draws nothing and a
       tube whose value has not been written yet does not flash a line at zero.
       Written by HudBars.setThreshold(), which paints the PiP copy as well. */
    .hud-bar-bg::before {
        content: ""; position: absolute; z-index: 1;
        left: 0; right: 0; height: 1px;
        bottom: var(--hud-threshold, -5px);
        background: var(--hud-threshold-color, rgba(255, 255, 255, 0.45));
        pointer-events: none;
    }
    .hud-col-water .hud-bar-bg { --hud-threshold-color: rgba(150, 200, 235, 0.55); }
    .hud-col-food  .hud-bar-bg { --hud-threshold-color: rgba(240, 190, 140, 0.55); }
    .hud-col-stam  .hud-bar-bg { --hud-threshold-color: rgba(150, 220, 180, 0.55); }
    /* Stamina is the one bar with two alerts — low on the way down, full on the
       way back up — so it gets a second line from the ::after that only the
       growth bar was using. Same rule, same clipped default. */
    .hud-col-stam .hud-bar-bg::after {
        content: ""; position: absolute; z-index: 1;
        left: 0; right: 0; height: 1px;
        bottom: var(--hud-threshold-low, -5px);
        background: var(--hud-threshold-color, rgba(255, 255, 255, 0.45));
        pointer-events: none;
    }
    /* One step darker than the colours the HUD shipped with: at full height
       these are large blocks rather than thin strips, and the bright versions
       glowed against the glass. Hunger's orange already sat at that level. */
    .fill-health { background: #c0392b; }
    .fill-water  { background: #2980b9; }
    .fill-food   { background: #e67e22; }
    .fill-stam   { background: #27ae60; }
    .fill-size   { background: #8e44ad; }
    /* Growth is the one bar with meaningful marks on it: the game hands out a
       new mutation slot at 25, 50 and 75 percent, so the player wants to see the
       next one coming rather than read a number and do the arithmetic. The tint
       is a light lavender rather than the fill's own purple, which would vanish
       the moment the fill reached it. Sits above the fill but below the value
       and the icon, both of which are z-index 2. */
    .hud-col-size .hud-bar-bg::after {
        content: ""; position: absolute; inset: 0; z-index: 1;
        pointer-events: none;
        --growth-mark: rgba(202, 158, 230, 0.5);
        background: linear-gradient(
            to top,
            transparent calc(25% - 1px), var(--growth-mark) calc(25% - 1px),
            var(--growth-mark) 25%, transparent 25%,
            transparent calc(50% - 1px), var(--growth-mark) calc(50% - 1px),
            var(--growth-mark) 50%, transparent 50%,
            transparent calc(75% - 1px), var(--growth-mark) calc(75% - 1px),
            var(--growth-mark) 75%, transparent 75%
        );
    }
    /* Icon and value ride on top of the fill; the shadow is what keeps them
       readable both against an empty tube and against a full one.
       The icon is centred by a fixed box rather than by text-align: the glyphs
       have different advance widths and heights, so left/right + text-align
       left them sitting at five slightly different places. */
    .hud-bar-bg > i {
        position: absolute; bottom: 5px; left: 0; right: 0;
        /* Font Awesome 7 puts `width: var(--fa-width, 1.25em)` on every icon
           class. With left AND right AND width all set, the box is
           over-constrained and CSS resolves it by pinning the box to the left
           edge — which is what left the icons sitting off-centre. Do not drop
           this line. */
        width: auto;
        height: 16px; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; line-height: 1;
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
        pointer-events: none;
    }
    /* Asura iconpack vitals (thirst, hunger, stamina), inlined SVGs. Each is
       drawn into the same 24px square, so its longer side is 24px whatever its
       proportions, and all three share one centre line. text-shadow does not
       reach an SVG, so the same shadow comes from a filter. */
    .hud-bar-bg > i.hud-asura-icon { height: 24px; }
    .hud-bar-bg > i.hud-asura-icon svg {
        width: 24px;
        height: 24px;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
    }
    /* The same vitals icons beside the HUD Config alert labels: 16px square,
       longer side 16px, coloured by the label's text-* class. */
    .hud-config-icon { display: inline-block; width: 16px; height: 16px; }
    .hud-config-icon svg { display: block; width: 100%; height: 100%; }
    .hud-val {
        position: absolute; top: 5px; left: 0; right: 0;
        text-align: center; z-index: 2;
        font-size: 9px; font-weight: 900; letter-spacing: -0.2px;
        color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    }
    /* The PiP copy of the strip has no button column next to it to take its
       height from, so it states one. Keep it in step with PIP_STATS_HEIGHT in
       map.html, which reserves the room for it in the PiP window. */
    #pipStatsArea {
        height: 120px; padding: 10px 12px; gap: 10px;
        box-sizing: border-box; justify-content: center;
    }

    /* The teleport flap: ONE piece stuck on the LEFT edge of the dino HUD,
       holding the two teleports stacked. Its right side is square and sits
       flush against the HUD so the two read as one object; the left side is
       heavily rounded, which is what makes it look glued on rather than like a
       second card. The frame belongs to the flap and the buttons inside are
       bare, or two outlines would meet down the middle.
       Hidden by default — the widget shows it only for an in-game dino under
       the growth limit, and both teleports share that limit.
       Pinned near the top rather than centred: the space underneath stays free
       for whatever flap comes next. 15px is measured from the HUD's top border,
       because an absolutely positioned child is laid out against the padding
       box, whose top edge IS that border. */
    .hud-side-tabs {
        position: absolute; left: -34px; top: 15px;
        width: 34px;
        display: flex; flex-direction: column;
        background: rgba(20, 22, 25, 0.85); backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1); border-right: none;
        border-radius: 22px 0 0 22px;
        box-shadow: -4px 5px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
    .hud-side-tabs[hidden], .hud-side-tab[hidden] { display: none; }
    .hud-side-tab {
        height: 44px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        padding: 0; border: none; background: transparent;
        color: #5dade2; font-size: 1rem; cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }
    /* Hover stays put — the flap is glued to the HUD, so sliding it reads as it
       coming loose. The button lights up instead. */
    .hud-side-tab:hover { background: rgba(93, 173, 226, 0.18); color: #a9d8f5; }
    /* A hairline between the two, never above the first one. */
    .hud-side-tab + .hud-side-tab { border-top: 1px solid rgba(255, 255, 255, 0.1); }
    /* The label is the mobile affordance only — on desktop each tab is an icon
       with a tooltip, and a word would not fit in 34px. */
    .hud-side-tab-label { display: none; }
    /* The Clan Server link: a letter, not a glyph, in the hub's ember accent,
       so it reads as a place to go rather than one more teleport. */
    .hud-side-tab-clan { color: #ff6b35; text-decoration: none; }
    .hud-side-tab-clan:hover { background: rgba(255, 107, 53, 0.18); color: #ffa27a; }
    .hud-side-tab-letter { font-weight: 900; font-size: 1.15rem; line-height: 1; }


    /* ------------------------------------------------- SERVER-REQUEST QUEUE
       The queue is a stack of small HUD cards, so it wears the HUD's own skin:
       the same glass, the same hairline border, the same 12px radius as
       #dinoHud. The state is carried by --queue-accent — the progress bar, the
       status word and a faint wash across the card — instead of the 4px left
       rail, which was the loudest thing on screen.

       The height follows the content. It used to be a fixed 90px, so a title
       that wrapped to two lines pushed the progress bar out through the bottom
       edge; min-height keeps short cards the size they always were. */
    .queue-card {
        --queue-accent: #7a8189;
        position: relative;
        display: flex; flex-direction: column;
        box-sizing: border-box;
        width: 100%; min-height: 86px;
        padding: 10px 12px;
        background: rgba(20, 22, 25, 0.85); backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        pointer-events: auto;
    }
    /* The only colour on the frame: a wash of the accent off the top-left
       corner, faint enough to read as lighting rather than as a border. */
    .queue-card::before {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(135deg, var(--queue-accent) 0%, transparent 60%);
        opacity: 0.1; pointer-events: none;
    }
    /* The wash is a positioned pseudo-element, so the content has to be
       positioned too or it paints underneath it. */
    .queue-card > * { position: relative; }

    .queue-card-title {
        font-size: 0.78rem; font-weight: 700; line-height: 1.3;
        color: #e8eaed; letter-spacing: 0.2px;
        min-width: 0; overflow-wrap: anywhere;
    }
    .queue-timer-val {
        flex-shrink: 0;
        font-size: 0.78rem; font-weight: 800;
        color: var(--queue-accent);
        font-variant-numeric: tabular-nums;
    }
    .queue-card-meta {
        font-size: 9px; letter-spacing: 0.4px;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
    }
    /* The incoming-invite card's one line of prose; the auto margin below it is
       what pushes Accept/Decline to the bottom edge. */
    .queue-card-text {
        font-size: 10px; line-height: 1.4;
        color: rgba(255, 255, 255, 0.75);
        margin: 2px 0 auto;
    }
    /* Status word and the cancel button share the last text row, which is what
       keeps the button in the flow instead of floating over the card. */
    .queue-card-footer {
        margin-top: auto;
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; padding: 6px 0 5px;
        min-height: 20px;
    }
    .queue-card-state {
        font-size: 8px; font-weight: 800; letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--queue-accent);
    }

    .queue-bar-bg {
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .queue-bar-fill {
        height: 100%;
        width: 0%;
        background: var(--queue-accent);
        border-radius: 3px;
        transition: width 0.4s linear;
    }

    .state-queued, .state-in-queue { --queue-accent: #7a8189; }
    .state-warmup { --queue-accent: #e67e22; }
    .state-applying { --queue-accent: #ffc107; }
    .state-applied { --queue-accent: #2ecc71; }
    .state-cooldown { --queue-accent: #3498db; }
    .state-cancelled { --queue-accent: #e74c3c; background: rgba(38, 20, 20, 0.88); }
    .state-cancelled .queue-bar-fill { width: 100% !important; }

    .queue-cancel-btn {
        flex-shrink: 0;
        border: 1px solid rgba(231, 76, 60, 0.35);
        background: rgba(231, 76, 60, 0.08);
        color: #e74c3c;
        border-radius: 6px;
        font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
        line-height: 1.4; padding: 2px 8px;
        cursor: pointer; transition: all 0.15s ease;
    }
    .queue-cancel-btn:hover:not(:disabled) { background: rgba(231, 76, 60, 0.85); color: #fff; border-color: rgba(231, 76, 60, 0.8); }
    .queue-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* =========================================
       --- MOBILE STICKY WRAPPER ---
       ========================================= */
    @media (max-width: 999.98px) {
        #hudWidgetWrapper {
            top: auto; height: auto; pointer-events: auto;
            background: #0f1012; border-top: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px 20px 0 0; padding: 45px 20px 20px 20px;
            transform: translateY(calc(100% - 35px));
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
        }
        #hudWidgetWrapper.expanded { transform: translateY(0); }
        #hudHandle { display: flex !important; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; height: 35px; cursor: pointer; color: #888; }

        #hudQueueStack, #dinoHud {
            position: relative !important; bottom: auto !important; right: auto !important; width: 100% !important;
            min-width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
        }
        #hudQueueStack { margin-bottom: 20px; pointer-events: auto; }
        #dinoHud { flex-direction: column; gap: 20px; transform: none !important; opacity: 1 !important; }
        .hud-actions-col { width: 100% !important; }
        .hud-action-btn { height: 45px !important; font-size: 0.85rem !important; }
        /* Nothing sets the strip's height here — the HUD is a column on mobile,
           not a row — so the tubes say how tall they are, and they get the full
           width to spread over. */
        .hud-stats-area { width: 100%; gap: 8px; }
        .hud-col { flex: 1 1 0; width: auto; }
        .hud-bar-bg { min-height: 150px; }
        .hud-bar-bg > i { font-size: 14px; bottom: 9px; }
        .hud-val { font-size: 11px; top: 7px; }
        /* Nothing to stick to on mobile — the HUD is a full-width sheet — so the
           flap becomes two ordinary rows at the top of the stack, labelled,
           because there is room for words and no cursor to hover for a tooltip. */
        .hud-side-tabs {
            position: static; width: 100%;
            border-radius: 8px; border-right: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.05);
            box-shadow: none; order: -1;
        }
        .hud-side-tab {
            height: 45px; gap: 8px;
            font-size: 0.85rem; font-weight: 800; text-transform: uppercase;
        }
        .hud-side-tab-label { display: inline; }
    }

    /* The HUD's tooltip skin — same glass, border and radius as the widget it
       hangs off, so it reads as part of the HUD rather than as page chrome.
       Bootstrap's default z-index is 1080, which is far below the HUD's 9900:
       without this the tooltip would open behind the very thing it explains.
       It stays under the settings modal (11000) and its backdrop (10990). */
    .tooltip.hud-tooltip { z-index: 10050; }
    .hud-tooltip .tooltip-inner {
        max-width: 230px;
        padding: 6px 10px;
        background: rgba(20, 22, 25, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        color: #e8eaed;
        font-size: 0.7rem; font-weight: 700; line-height: 1.35;
        text-align: left;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    }
    /* One colour for all four arrow directions: only the side facing the
       element is ever drawn, so the other three cost nothing. */
    .hud-tooltip .tooltip-arrow::before {
        border-top-color: rgba(20, 22, 25, 0.95);
        border-bottom-color: rgba(20, 22, 25, 0.95);
        border-left-color: rgba(20, 22, 25, 0.95);
        border-right-color: rgba(20, 22, 25, 0.95);
    }

    #hudSettingsModal { z-index: 11000 !important; }
    .modal-backdrop { z-index: 10990 !important; }

    @keyframes stalePulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    #hudOfflineOverlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(20, 22, 25, 0.6); backdrop-filter: blur(3px);
        z-index: 50; display: flex; align-items: center; justify-content: center;
        text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s;
        border-radius: 12px;
    }

    #hudOfflineOverlay span {
        font-size: 0.65rem; font-weight: 800; color: #ddd; text-transform: uppercase;
        padding: 0 5px; line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,1);
    }

    #dinoHud.offline #hudOfflineOverlay { opacity: 1; pointer-events: auto; }

    /* Quest HUD card — single card carousel above dinoHud */
    /* Same frame as the battlepass panel: a thin tinted border rather than a
       heavy coloured spine, so the two drawers read as one family. The tint is
       what says which quest kind this is. */
    .quest-hud-card {
        background: rgba(20, 22, 25, 0.9); backdrop-filter: blur(8px);
        border: 1px solid rgba(35, 144, 193, 0.35);
        border-radius: 10px;
        padding: 11px 14px 12px 13px;
        display: flex; flex-direction: column; gap: 9px;
        pointer-events: auto;
    }
    /* Asura Prime — eternal system quest; gold frame, gold name, gold crown. */
    .quest-hud-card.is-prime { border-color: rgba(241, 196, 15, 0.4); }
    .quest-hud-card.is-prime.is-paused { border-color: rgba(231, 76, 60, 0.45); }
    .quest-hud-paused-banner {
        display: flex; align-items: center; gap: 8px;
        padding: 7px 10px; margin: 2px 0 6px;
        background: rgba(231, 76, 60, 0.12);
        border: 1px solid rgba(231, 76, 60, 0.35);
        border-radius: 6px;
        color: #f5b7b1; font-size: 0.72rem; line-height: 1.25;
    }
    .quest-hud-paused-banner i { color: #e74c3c; flex-shrink: 0; }
    .quest-hud-prime-elder {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px;
        background: rgba(241, 196, 15, 0.08);
        border: 1px solid rgba(241, 196, 15, 0.35);
        border-radius: 6px;
        color: #f1c40f; font-size: 0.78rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.5px;
    }
    .quest-hud-prime-elder i { font-size: 0.95rem; }
    .quest-hud-card.is-prime.is-prime-elder { border-color: rgba(241, 196, 15, 0.5); }
    .quest-hud-card.is-prime .quest-hud-name {
        color: #f1c40f;
    }
    .quest-hud-prime-badge {
        font-size: 0.55rem; font-weight: 900;
        text-transform: uppercase; letter-spacing: 1px;
        color: #17181c; background: linear-gradient(135deg, #ffe082, #f1c40f);
        border: 1px solid transparent;
        padding: 2px 8px; border-radius: 50px;
        flex-shrink: 0;
    }
    .quest-hud-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px;
    }
    .quest-hud-name {
        font-size: 0.78rem; font-weight: 800; color: #fff;
        text-transform: uppercase; letter-spacing: 0.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        flex-grow: 1;
    }
    .quest-hud-name i {
        font-size: 0.8rem !important;
    }
    .quest-hud-counter {
        font-size: 0.58rem; color: #cfd3d7; font-weight: 900;
        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
        padding: 2px 8px; border-radius: 50px;
        flex-shrink: 0;
    }
    .quest-hud-toggle {
        background: transparent; border: none; color: var(--text-muted);
        cursor: pointer; padding: 2px 6px; font-size: 0.75rem;
        border-radius: 4px; flex-shrink: 0;
        transition: color 0.15s, background 0.15s;
    }
    .quest-hud-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
    .quest-hud-toggle i { font-size: 0.8rem; }
    .quest-hud-server {
        font-size: 0.7rem; color: var(--text-muted); opacity: 0.8;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* How far along, in the battlepass panel's own bar. */
    .quest-hud-progress { display: flex; align-items: center; gap: 7px; }
    .quest-hud-bar {
        display: block; flex: 1; height: 6px; border-radius: 4px; overflow: hidden;
        background: rgba(255,255,255,.12);
    }
    .quest-hud-fill {
        display: block; height: 100%; width: 0%; border-radius: 4px;
        background: linear-gradient(90deg, var(--nexus-blue, #2390c1), #6dd5fa);
        transition: width .5s ease;
    }
    .quest-hud-fill.is-done { background: linear-gradient(90deg, #27ae60, #2ecc71); }
    .quest-hud-count {
        font-size: .65rem; font-weight: 800; color: #8e9297; min-width: 28px; text-align: right;
    }
    .quest-hud-count.is-done { color: #2ecc71; }

    /* Small uppercase heading, the same one the battlepass panel puts over its
       reward chips. */
    .quest-hud-section {
        display: block; font-size: .58rem; font-weight: 800; letter-spacing: .5px;
        text-transform: uppercase; color: #8e9297; margin-bottom: 4px;
    }

    .quest-hud-tasks {
        display: flex; flex-direction: column; gap: 6px;
        border-top: 1px solid rgba(255,255,255,0.07);
        padding-top: 9px;
    }
    .quest-hud-task {
        display: flex; align-items: flex-start; gap: 8px;
        font-size: 0.78rem; color: #b6bdc6;
        line-height: 1.35;
        word-break: break-word;
    }
    /* A ticked box for done, a hollow ring for pending: readable without
       learning what a colour means. The class name is unchanged because the
       live task updater toggles it by id. */
    .quest-hud-task .task-dot {
        font-size: 0.72rem; flex-shrink: 0; margin-top: 3px;
        color: #6c7075; transition: color 0.3s;
    }
    .quest-hud-task.done { color: #d5d8dc; }
    .quest-hud-task .task-dot.done { color: #2ecc71; }
    /* Sticky-completed but the live state condition is currently outside its
       range (e.g. growth past 75%). Player keeps the credit but cannot complete
       the quest until they bring the stat back in range. */
    .quest-hud-task .task-dot.invalidated { color: #e74c3c; }
    .quest-hud-task.invalidated { color: #f5b7b1; }
    .quest-hud-fails {
        display: flex; flex-direction: column; gap: 5px;
        margin-top: 2px; padding-top: 9px;
        border-top: 1px solid rgba(255,255,255,0.07);
    }
    .quest-hud-fail {
        display: flex; align-items: flex-start; gap: 8px;
        font-size: 0.72rem; color: #8e9297;
        line-height: 1.3;
    }
    .quest-hud-fail .fail-dot {
        font-size: 0.68rem; flex-shrink: 0; margin-top: 2px;
        color: #2ecc71; transition: color 0.3s;
    }
    .quest-hud-fail.is-violated .fail-dot { color: #e74c3c; }
    .quest-hud-fail.is-violated { color: #f5b7b1; }
    .quest-hud-footer {
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
        margin-top: 2px;
        border-top: 1px solid rgba(255,255,255,0.07);
        padding-top: 9px;
    }
    .quest-hud-btn {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.12);
        color: #cfd3d7;
        font-size: 0.62rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.5px;
        padding: 5px 11px; border-radius: 6px;
        cursor: pointer; transition: all 0.2s;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .quest-hud-btn:hover:not(:disabled) {
        border-color: var(--nexus-blue); color: #fff; background: rgba(35, 144, 193, 0.15);
    }
    .quest-hud-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .quest-hud-nav {
        display: flex; align-items: center; gap: 4px;
    }
    .quest-hud-nav-btn {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #ccc;
        width: 28px; height: 28px; border-radius: 5px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.78rem; cursor: pointer;
        transition: all 0.2s;
    }
    .quest-hud-nav-btn:hover:not(:disabled) {
        background: rgba(35, 144, 193, 0.2); border-color: var(--nexus-blue); color: #fff;
    }
    .quest-hud-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    .quest-hud-action-btn {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.12);
        color: #ccc;
        width: 27px; height: 27px; border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem; cursor: pointer;
        transition: all 0.15s;
    }
    .quest-hud-action-btn.start {
        color: #2ecc71;
        border-color: rgba(46, 204, 113, 0.4);
        background: rgba(46, 204, 113, 0.1);
    }
    .quest-hud-action-btn.start:hover:not(:disabled) {
        background: rgba(46, 204, 113, 0.25); color: #fff;
        box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
    }
    .quest-hud-action-btn.reroll {
        color: #3498db;
        border-color: rgba(52, 152, 219, 0.4);
        background: rgba(52, 152, 219, 0.1);
    }
    .quest-hud-action-btn.reroll:hover:not(:disabled) {
        background: rgba(52, 152, 219, 0.25); color: #fff;
        box-shadow: 0 0 6px rgba(52, 152, 219, 0.4);
    }
    /* While a quest start/reroll is in flight, every action button greys out and is
       unclickable so it's obvious the request is being processed. */
    .quest-hud-action-btn:disabled, .quest-hud-btn:disabled {
        opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7);
        color: #9aa0a6 !important; background: rgba(255,255,255,0.05) !important;
        border-color: rgba(255,255,255,0.12) !important; box-shadow: none !important;
    }
    .quest-hud-action-btn:disabled { opacity: 0.35; cursor: wait; }

    .quest-hud-empty {
        display: flex; align-items: center; gap: 8px;
        font-size: 0.8rem; color: var(--text-muted);
        font-style: italic; padding: 4px 0;
    }
    .quest-hud-empty i { color: var(--nexus-blue); opacity: 0.6; }

    /* Quest detail modal — matches /quests page styling */
    .qdm-tier-badge {
        font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.5px; padding: 4px 9px; border-radius: 4px;
        border: 1px solid transparent;
    }
    .qdm-tier-scavenger { background: rgba(142, 146, 151, 0.15); color: #8e9297; border-color: rgba(142, 146, 151, 0.3); }
    .qdm-tier-stalker   { background: rgba(108, 140, 160, 0.15); color: #8eb4c7; border-color: rgba(108, 140, 160, 0.3); }
    .qdm-tier-hunter    { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border-color: rgba(241, 196, 15, 0.3); }
    .qdm-tier-alpha     { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border-color: rgba(231, 76, 60, 0.3); }
    .qdm-tier-prime     { background: rgba(241, 196, 15, 0.18); color: #f1c40f; border-color: rgba(241, 196, 15, 0.45); }
    .qdm-objective {
        display: flex; flex-direction: column; gap: 6px;
        padding: 8px 10px;
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.04);
        border-left: 3px solid var(--task-color, #6c7075);
        border-radius: 6px;
        font-size: 0.78rem; color: #c8c9cb;
    }
    .qdm-obj-row { display: flex; align-items: center; gap: 10px; width: 100%; }
    .qdm-objective.completed {
        background: rgba(46, 204, 113, 0.07);
        border-left-color: #2ecc71;
        color: #d4f0dd;
    }
    .qdm-objective.completed .qdm-obj-text { text-decoration: line-through; opacity: 0.85; }
    .qdm-obj-icon {
        flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: rgba(0,0,0,0.35); color: var(--task-color, #c8c9cb);
        font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.05);
    }
    .qdm-objective.completed .qdm-obj-icon {
        background: rgba(46, 204, 113, 0.18); color: #2ecc71;
        box-shadow: 0 0 8px rgba(46, 204, 113, 0.25);
    }
    .qdm-obj-text { flex-grow: 1; line-height: 1.3; }
    .qdm-obj-state { font-size: 0.85rem; opacity: 0.8; }
    .qdm-objective.completed .qdm-obj-state { color: #2ecc71; opacity: 1; }
    .qdm-objective:not(.completed) .qdm-obj-state { color: rgba(255,255,255,0.18); }
    /* invalidated overrides the green completed look — task was ticked but the
       live state condition is currently out of range (e.g. growth past 75%). */
    .qdm-objective.invalidated {
        background: rgba(231, 76, 60, 0.08);
        border-left-color: #e74c3c;
        color: #f5b7b1;
    }
    .qdm-objective.invalidated .qdm-obj-text { text-decoration: none; opacity: 1; }
    .qdm-objective.invalidated .qdm-obj-icon {
        background: rgba(231, 76, 60, 0.18); color: #e74c3c;
        box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
    }
    .qdm-objective.invalidated .qdm-obj-state { color: #e74c3c; opacity: 1; }

    /* Quest detail modal — location minimap (matches /quests page) */
    @keyframes qdm-minimap-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(35, 144, 193, 0.7); }
        70%  { box-shadow: 0 0 0 8px rgba(35, 144, 193, 0); }
        100% { box-shadow: 0 0 0 0 rgba(35, 144, 193, 0); }
    }
    .qdm-minimap-wrapper {
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        padding: 6px 8px 4px;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.04);
        border-radius: 5px;
        width: 100%;
    }
    .qdm-minimap {
        position: relative; width: 100%; max-width: 220px; aspect-ratio: 1/1;
        border-radius: 6px; border: 1px solid rgba(35, 144, 193, 0.3);
        background: #1e5571; overflow: hidden;
        box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
    }
    .qdm-minimap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
    .qdm-minimap-marker {
        position: absolute; width: 9px; height: 9px;
        background: #fff; border: 2px solid var(--nexus-blue);
        border-radius: 50%; transform: translate(-50%, 50%);
        animation: qdm-minimap-pulse 1.5s infinite; z-index: 2;
    }
    .qdm-minimap-radius {
        position: absolute; border-radius: 50%;
        border: 2px solid rgba(35, 144, 193, 0.85);
        background: rgba(35, 144, 193, 0.18);
        transform: translate(-50%, 50%);
        pointer-events: none; z-index: 1;
        box-shadow: 0 0 10px rgba(35, 144, 193, 0.35);
    }
    .qdm-minimap-coords {
        font-size: 0.62rem; color: var(--nexus-blue); font-weight: 700;
        font-family: var(--bs-font-monospace, monospace); letter-spacing: 0.5px;
    }
    .qdm-rewards-box {
        padding: 12px;
        background: rgba(0,0,0,0.2);
        border-top: 1px solid rgba(255,255,255,0.05);
        border-radius: 6px;
    }
    #qdmTasks {
        max-height: 50vh;
        overflow-y: auto;
        padding-right: 6px;
    }
    #qdmTasks::-webkit-scrollbar { width: 6px; }
    #qdmTasks::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
    #qdmTasks::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
    #qdmTasks::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }
    .qdm-rules { display: flex; flex-direction: column; gap: 6px; }
    .qdm-rule {
        display: flex; align-items: center; gap: 10px;
        padding: 6px 10px;
        background: rgba(46, 204, 113, 0.08);
        border: 1px solid rgba(46, 204, 113, 0.22);
        border-left: 3px solid #2ecc71;
        border-radius: 6px;
        font-size: 0.78rem; color: #d4f0dd;
    }
    .qdm-rule-icon {
        flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: rgba(46, 204, 113, 0.18); color: #2ecc71;
        font-size: 0.8rem;
    }
    .qdm-rule-text { flex-grow: 1; line-height: 1.3; }
    .qdm-rule.is-violated {
        background: rgba(231, 76, 60, 0.1);
        border-color: rgba(231, 76, 60, 0.35);
        border-left-color: #e74c3c;
        color: #f5b7b1;
    }
    .qdm-rule.is-violated .qdm-rule-icon {
        background: rgba(231, 76, 60, 0.22); color: #e74c3c;
    }
    .qdm-paused-banner {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; margin-bottom: 12px;
        background: rgba(231, 76, 60, 0.12);
        border: 1px solid rgba(231, 76, 60, 0.4);
        border-radius: 6px;
        color: #f5b7b1; font-size: 0.78rem; line-height: 1.3;
    }
    .qdm-paused-banner i { color: #e74c3c; font-size: 1rem; }
    .qdm-prime-elder {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 18px;
        background: rgba(241, 196, 15, 0.1);
        border: 1px solid rgba(241, 196, 15, 0.4);
        border-radius: 8px;
        color: #f1c40f; font-size: 0.95rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.5px;
        margin-bottom: 12px;
    }
    .qdm-prime-elder i { font-size: 1.4rem; }
    .qdm-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
    .qdm-reward-chip {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 10px;
        background: rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 8px;
        font-size: 0.75rem; color: #ddd;
    }
    .qdm-reward-icon {
        width: 22px; height: 22px; border-radius: 5px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.8rem; color: #fff;
    }
    .qdm-reward-text { display: flex; flex-direction: column; line-height: 1.15; }
    .qdm-reward-type {
        font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.5px;
        color: #8e9297; font-weight: 700;
    }
    .qdm-reward-name {
        color: #fff; font-weight: 600; font-size: 0.78rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 160px;
    }
    .qdm-reward-points  { background: linear-gradient(135deg, #f1c40f, #c79b00); }
    .qdm-reward-skin    { background: linear-gradient(135deg, #9b59b6, #6c3483); }
    .qdm-reward-special { background: linear-gradient(135deg, #2390c1, #1e5571); }
    .qdm-reward-unknown { background: linear-gradient(135deg, #6c7075, #3d4045); }

    @media (max-width: 999.98px) {
        /* The dock spans the screen with the rest of the mobile HUD. */
        #hudDock { width: 100%; right: 0; left: 0; }
        #hudQuestStack { width: 100%; }

        /* Inside the slide-up sheet (layoutHudStacks moves it there once the
           dino HUD is shown): an ordinary block at the top of the sheet, framed
           on all four sides because it no longer hangs off the screen edge. */
        #hudWidgetWrapper #hudDock { position: relative; bottom: auto; z-index: auto; margin-bottom: 20px; }
        #hudWidgetWrapper #hudDock.panel-open #hudPanels { max-height: 50vh; }
        #hudWidgetWrapper #hudPanels > .hud-panel > * { border-radius: 8px 8px 0 0 !important; box-shadow: none; }
        #hudWidgetWrapper #bpHudCard { border-right: 1px solid rgba(35, 144, 193, 0.35); }
        #hudWidgetWrapper #hudTabs {
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px; box-shadow: none;
        }
        #hudWidgetWrapper #hudDock.panel-open #hudTabs { border-radius: 0 0 8px 8px; border-top: none; }
    }