/* ==========================================================================
   MSTACKINGHERO - MODERN XP HERO / SUPERCENT GLASSY HUD & MOBILE CONTROLS
   Theme Variables, Glassmorphism, Responsive Breakpoints, Touch Controls
   ========================================================================== */

:root {
    /* Theme Colors */
    --hud-bg-solid: #0f172a;
    --hud-bg-glass: rgba(15, 23, 42, 0.76);
    --hud-bg-glass-card: rgba(30, 41, 59, 0.72);
    --hud-border: rgba(255, 255, 255, 0.15);
    --hud-border-active: rgba(56, 189, 248, 0.6);
    --hud-blur: 16px;
    --hud-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* Accents */
    --color-gold: #facc15;
    --color-gold-text: #fef08a;
    --color-gold-glow: rgba(250, 204, 21, 0.35);
    --color-gem: #c084fc;
    --color-gem-text: #f5d0fe;
    --color-emerald: #34d399;
    --color-emerald-text: #a7f3d0;
    --color-hp: #22c55e;
    --color-hp-bg: rgba(34, 197, 94, 0.2);
    --color-xp: #38bdf8;
    --color-xp-end: #818cf8;
    --color-text-main: #f8fafc;
    --color-text-sub: #94a3b8;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 9999px;

    /* Tap Targets */
    --tap-target-min: 44px;

    /* Safe Area Insets with Defaults */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0f172a;
    color: var(--color-text-main);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    touch-action: manipulation;
}

#canvas-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    touch-action: none;
}

/* ==========================================================================
   1. SLIM TOP STATUS BAR (#hud-top)
   ========================================================================== */
#hud-top {
    position: absolute;
    top: max(10px, var(--safe-top));
    left: max(12px, var(--safe-left));
    right: max(12px, var(--safe-right));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
    z-index: 20;
}

.hud-top-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    pointer-events: auto;
    max-width: calc(100% - 210px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.hud-top-left::-webkit-scrollbar {
    display: none;
}

.hud-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: auto;
    flex-shrink: 0;
}

/* Level Shield Badge with XP ring/bar */
.level-shield-badge {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.92));
    border: 1.5px solid var(--color-xp);
    border-radius: var(--radius-pill);
    height: 38px;
    padding: 0 10px 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--hud-shadow), 0 0 14px rgba(56, 189, 248, 0.25);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.level-xp-ring-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.level-xp-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.level-xp-ring-svg .xp-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3.5;
}
.level-xp-ring-svg .xp-ring-progress {
    fill: none;
    stroke: var(--color-xp);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.level-icon {
    font-size: 15px;
    line-height: 1;
    z-index: 1;
}

.level-num {
    font-weight: 900;
    font-size: 14px;
    color: var(--color-xp);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.level-xp-container {
    display: flex;
    flex-direction: column;
    width: 65px;
    gap: 2px;
}
.level-xp-fill {
    width: 0%;
    height: 5px;
    background: linear-gradient(90deg, var(--color-xp), var(--color-xp-end));
    border-radius: 3px;
    transition: width 0.25s ease;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}
.level-xp-label {
    font-size: 9px;
    color: var(--color-text-sub);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Glassy Currency Pills */
.currency-badge {
    background: var(--hud-bg-glass);
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-pill);
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--hud-shadow);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

.coin-badge {
    border-color: rgba(250, 204, 21, 0.45);
    color: var(--color-gold-text);
}
.gem-badge {
    border-color: rgba(192, 132, 252, 0.45);
    color: var(--color-gem-text);
}
.emerald-badge {
    border-color: rgba(52, 211, 153, 0.45);
    color: var(--color-emerald-text);
}
.hp-badge {
    border-color: rgba(239, 68, 68, 0.45);
    color: #86efac;
    background: linear-gradient(135deg, rgba(20, 28, 44, 0.8), rgba(40, 15, 20, 0.75));
}

.curr-icon {
    font-size: 15px;
    line-height: 1;
}
.curr-val {
    font-weight: 900;
}

/* ==========================================================================
   2. COMPACT QUEST TRACKER (#quest-card)
   ========================================================================== */
#quest-card {
    background: var(--hud-bg-glass);
    border: 1.5px solid rgba(250, 204, 21, 0.45);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    width: clamp(170px, 24vw, 230px);
    box-shadow: var(--hud-shadow), 0 0 16px rgba(250, 204, 21, 0.15);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: auto;
}

.quest-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quest-icon {
    font-size: 18px;
    line-height: 1;
    background: rgba(var(--msh-white-rgb), 0.08);
    border-radius: 8px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quest-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.quest-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-gold-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-bar-bg {
    width: 100%;
    height: 5px;
    background: rgba(var(--msh-white-rgb), 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.quest-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--msh-focus), var(--msh-warn));
    border-radius: 3px;
    transition: width 0.25s ease;
}

.quest-ratio {
    font-size: 11px;
    font-weight: 900;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Quick Actions (kept for desktop / prototype dev; hidden on clean mobile HUD) */
.quick-actions {
    display: none !important;
}

#quest-tracker {
    display: none !important;
}

/* ==========================================================================
   3. CARGO METER BOTTOM-LEFT PILL (#stack-meter-container)
   ========================================================================== */
#stack-meter-container {
    position: absolute;
    bottom: max(78px, calc(var(--safe-bottom) + 72px));
    right: max(12px, var(--safe-right));
    left: auto;
    background: var(--hud-bg-glass);
    border: 1.5px solid rgba(250, 204, 21, 0.4);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    width: clamp(130px, 18vw, 155px);
    height: 38px;
    box-shadow: var(--hud-shadow);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    z-index: 15;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#stack-meter-container > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

#stack-meter-container span:first-child {
    font-size: 13px;
}

/* lane 462: a long count such as "17 / 39 (9 blocks x2)" (stack above the display cap) must stay inside the 125-135px pill;
   before, the count wrapped and pushed past the pill, widening the page to 414px at 390 wide (wardrobe panel off centre) */
#stack-meter-container > div:first-child { min-width: 0; }
#stack-meter-container #cargo-stack-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#stack-meter-container #val-stack-count { flex: 0 0 auto; white-space: nowrap; }

#val-stack-count {
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    font-size: 12px;
}

.meter-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #facc15, #f97316);
    border-radius: 2px;
    transition: width 0.15s ease;
}

#stack-contents {
    display: none !important;
}

/* Deprecated floating pill from older layout kept hidden */
#cargo-floating-pill, #cargo-full-alert {
    display: none !important;
}

/* JUICE_API cargo treatment (the existing native cargo overlay). */
.jx-cargo {
    display: block !important;
    position: fixed;
    right: max(12px, var(--safe-right));
    left: auto;
    bottom: max(38px, env(safe-area-inset-bottom));
    transform: none;
    min-width: 132px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    background: rgba(15,23,42,.88);
    color: #fff;
    font: 800 11px/1.2 system-ui, sans-serif;
    text-align: center;
    pointer-events: none;
    z-index: 40;
}
.jx-cargo #cargo-pill-fill { background: linear-gradient(90deg,#4ade80,#22c55e); }
.jx-cargo.jx-full { border-color: #ef4444; color: #fecaca; }
.jx-cargo #cargo-pill-fill.jx-full { background: #ef4444; }

/* ==========================================================================
   4. NAV ICON COLUMN ON THE RIGHT (#bottom-nav-bar)
   ========================================================================== */
#bottom-nav-bar {
    position: fixed;
    right: max(12px, var(--safe-right));
    top: auto;
    bottom: max(12px, var(--safe-bottom));
    transform: none;
    left: auto;
    background: var(--hud-bg-glass);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    border-radius: 24px;
    padding: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: min(420px, calc(100vw - 24px));
    max-height: 112px;
    overflow: auto;
    align-items: center;
    gap: 8px;
    box-shadow: var(--hud-shadow);
    z-index: 20;
    pointer-events: auto;
}

.nav-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid var(--hud-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #cbd5e1;
    padding: 0;
}

.nav-btn:hover, .nav-btn:active {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--color-xp);
    color: #fff;
    transform: scale(1.08);
}

.nav-icon {
    font-size: 20px;
    line-height: 1;
}

.nav-label {
    display: none !important;
}

.nav-btn-center {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 14px;
    position: relative;
    background: linear-gradient(135deg, #78350f, #b45309);
    border: 1.5px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #fff;
    padding: 0;
    transform: none;
}

.nav-btn-center:hover, .nav-btn-center:active {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

.anvil-icon {
    font-size: 20px;
    line-height: 1;
}

.anvil-label {
    display: none !important;
}

.anvil-merge-tag {
    position: absolute;
    top: -6px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 6px;
    border: 1px solid #fecaca;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: pulseTag 1.4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes pulseTag {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

#bottom-nav-bar .nav-hidden, #weapon-hud.nav-hidden {
    display: none !important;
}
/* Weapon switching is available on the action bar and keyboard; retire the overlapping legacy loadout strip. */
#weapon-hud { display: none !important; }

/* ==========================================================================
   5. WEAPON HUD BOTTOM CENTRE (#weapon-hud)
   ========================================================================== */
#weapon-hud {
    position: absolute;
    bottom: max(130px, calc(var(--safe-bottom) + 120px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--hud-bg-glass);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-lg);
    padding: 6px 10px;
    display: flex;
    gap: 8px;
    box-shadow: var(--hud-shadow);
    z-index: 15;
    pointer-events: auto;
}

.weapon-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1.5px solid var(--hud-border);
    background: rgba(30, 41, 59, 0.6);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 800;
    font-size: 11px;
    min-width: 80px;
    min-height: 44px;
    position: relative;
}

.weapon-slot:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.weapon-slot.active {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 16px var(--slot-glow, rgba(56, 189, 248, 0.6));
    border-color: #38bdf8;
}

.weapon-slot.rarity-common {
    --slot-glow: rgba(148, 163, 184, 0.4);
    border-color: #94a3b8;
}
.weapon-slot.rarity-rare {
    --slot-glow: rgba(56, 189, 248, 0.7);
    border-color: #38bdf8;
}
.weapon-slot.rarity-epic {
    --slot-glow: rgba(168, 85, 247, 0.75);
    border-color: #a855f7;
}
.weapon-slot.rarity-legendary {
    --slot-glow: rgba(245, 158, 11, 0.85);
    border-color: #f59e0b;
}

.weapon-slot-header {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: space-between;
}
.weapon-key {
    font-size: 9px;
    background: rgba(255, 255, 255, 0.12);
    padding: 1px 4px;
    border-radius: 4px;
    color: #94a3b8;
}
.weapon-stars {
    font-size: 9px;
    color: var(--color-gold);
    letter-spacing: 0.5px;
}
.weapon-dmg-badge {
    font-size: 9px;
    color: var(--color-xp);
    font-weight: 700;
}

/* ==========================================================================
   6. TOUCH VIRTUAL JOYSTICK & MOBILE DROP BUTTON
   ========================================================================== */
#joystick-zone {
    position: absolute;
    bottom: calc(max(14px, var(--safe-bottom)) + 50px);
    left: max(16px, var(--safe-left));
    right: auto;
    width: 124px;
    height: 124px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(15, 23, 42, 0.55) 75%);
    border: 2px dashed rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    display: none;
    touch-action: none;
    z-index: 22;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 16px rgba(56, 189, 248, 0.12);
}

#joystick-knob {
    width: 52px;
    height: 52px;
    background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb 85%);
    border-radius: 50%;
    position: absolute;
    top: 36px;
    left: 36px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    pointer-events: none;
    will-change: transform;
}

@media (pointer: coarse) {
    #joystick-zone { display: block; }
}
body.touch-device #joystick-zone {
    display: block;
}

/* Mobile DROP circular action button (bottom-right) */
#btn-touch-drop {
    position: absolute;
    bottom: max(16px, var(--safe-bottom));
    right: max(16px, var(--safe-right));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.88), rgba(225, 29, 72, 0.98));
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 22;
    pointer-events: auto;
    color: #fff;
    font-size: 22px;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
}

#btn-touch-drop:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.6);
}

@media (pointer: coarse) {
    #btn-touch-drop { display: flex; }
}
body.touch-device #btn-touch-drop {
    display: flex;
}

/* ==========================================================================
   7. CONTROLS LEGEND, BOSS HUD, TOAST & ZOOM
   ========================================================================== */
#controls-legend {
    position: absolute;
    left: max(16px, var(--safe-left, 0px));
    top: 118px;
    background: var(--hud-bg-glass);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 11px;
    color: var(--color-text-sub);
    pointer-events: none;
    line-height: 1.6;
    box-shadow: var(--hud-shadow);
    transition: opacity 1.2s ease;
    z-index: 10;
}
#controls-legend b { color: #f1f5f9; }
#controls-legend.faded { opacity: 0; pointer-events: none; }

@media (pointer: coarse) {
    #controls-legend:not(.controls-help-enabled) { display: none !important; }
}
body.touch-device #controls-legend {
    display: none !important;
}
body.touch-device #controls-legend.controls-help-enabled:not([hidden]) {
    display: block !important;
}

/* Boss Health Bar Overlay */
#boss-hud {
    position: absolute;
    top: calc(max(10px, var(--safe-top)) + 48px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(30, 10, 20, 0.92) 0%, rgba(15, 7, 12, 0.96) 100%);
    border: 2px solid #ef4444;
    border-radius: var(--radius-md);
    padding: 8px 18px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: clamp(260px, 48vw, 420px);
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.2);
    z-index: 30;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: auto;
}
#boss-hud.active { display: flex; animation: bossPulse 2s infinite ease-in-out; }
@keyframes bossPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 45px rgba(239, 68, 68, 0.85); }
}
.boss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 11px;
    font-weight: 900;
    color: #fca5a5;
    letter-spacing: 0.5px;
}
.boss-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.boss-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f43f5e 0%, #dc2626 50%, #7f1d1d 100%);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
    transition: width 0.1s linear;
}

/* Compact accessible touch micro-menu. Buttons retain their full title and aria-label. */
#action-bar { gap: 3px !important; width: min(1160px, calc(100vw - 24px)); max-width: calc(100vw - 24px) !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; align-items: center; padding: 7px 10px; border: 2px solid #79613c; border-radius: 14px; background: linear-gradient(180deg, rgba(42,39,34,.94), rgba(13,17,22,.97)); box-shadow: 0 3px 14px #000c, inset 0 1px 0 #d1b56b66; }
#action-bar > button.action-slot { box-sizing: border-box; width: clamp(29px, 2.2vw, 42px); min-width: 0 !important; min-height: 32px; height: clamp(32px, 2.2vw, 42px); padding: 3px !important; font-size: 12px !important; border-radius: 5px !important; border-color: #9b8355 !important; background: linear-gradient(145deg,#45433b,#111519) !important; box-shadow: inset 0 0 0 1px #000a, 0 1px 3px #000a; }
#action-bar > button.action-utility { display: none !important; }
#hud-xpbar { position: fixed !important; z-index: 9000 !important; left: 50% !important; right: auto !important; bottom: max(68px, calc(env(safe-area-inset-bottom) + 66px)) !important; transform: translateX(-50%); width: min(940px, calc(100vw - 32px)) !important; height: 7px; border: 1px solid #a7894c; border-radius: 2px; background: #171a1d; box-shadow: 0 1px 5px #000; }
.msh-player-heading > span { display: none; }
#action-bar > button:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.actionbar-pages,.actionbar-system,.actionbar-bags { display:flex; align-items:center; gap:3px; }
.actionbar-page,.actionbar-system button,.actionbar-bags button { box-sizing:border-box; min-width:24px; height:28px; padding:2px 4px; border:1px solid #9c8350; border-radius:4px; color:#f4e4b1; background:linear-gradient(#38404a,#171b20); font:700 10px system-ui; }
.actionbar-system button { min-width:26px; }
.actionbar-bags button { min-width:23px; }
.actionbar-endcap { flex: 0 0 25px; display:flex; align-items:center; justify-content:center; color:#d6b76f; font: 28px/1 Georgia,serif; text-shadow:0 1px 3px #000,0 0 6px #a77b2c88; }
.actionbar-system button,.actionbar-bags button,.actionbar-page { border-radius:5px; box-shadow:inset 0 1px 0 #fff2,0 1px 3px #000a; }
.actionbar-page:focus-visible,.actionbar-system button:focus-visible,.actionbar-bags button:focus-visible { outline:2px solid #facc15; outline-offset:1px; }
@media (max-width: 700px) { #action-bar { left: 50% !important; right: auto !important; bottom: max(44px, calc(env(safe-area-inset-bottom) + 34px)) !important; } }

/* The weapon action bar is the primary row. The skill hotbar is the earned second row. */
#skill-bar { display: none !important; }
body.actionbar-secondary-unlocked #skill-bar { display: flex !important; left: 50% !important; right: auto !important; bottom: max(94px, calc(env(safe-area-inset-bottom) + 84px)) !important; width: min(96vw, 780px) !important; max-width: min(96vw, 780px) !important; flex-wrap: nowrap !important; justify-content: center !important; }
body.actionbar-secondary-unlocked #hud-castbar { bottom: max(154px, calc(env(safe-area-inset-bottom) + 144px)) !important; }

/* Event Toast */
#event-toast {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--hud-bg-glass);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-text);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--hud-shadow), 0 0 16px rgba(250, 204, 21, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 35;
    text-align: center;
    backdrop-filter: blur(var(--hud-blur));
    -webkit-backdrop-filter: blur(var(--hud-blur));
    max-width: min(90vw, 420px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#event-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Zoom Controls */
#zoom-controls {
    position: absolute;
    top: calc(max(10px, var(--safe-top)) + 52px);
    right: max(14px, var(--safe-right));
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 15;
    pointer-events: auto;
}
.btn-zoom {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--hud-bg-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--hud-border);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hud-shadow);
    transition: all 0.15s ease;
}
.btn-zoom:hover, .btn-zoom:active {
    background: rgba(51, 65, 85, 0.95);
    border-color: var(--color-xp);
    color: var(--color-xp);
    transform: scale(1.08);
}

/* Floating Currency +N numbers */
.hud-float-num {
    position: absolute;
    font-weight: 900;
    font-size: 13px;
    pointer-events: none;
    z-index: 40;
    transform: translate(-50%, 0);
    animation: floatUpFade 0.85s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-variant-numeric: tabular-nums;
}
@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -14px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -28px) scale(0.9); opacity: 0; }
}

.hud-badge-bump {
    animation: badgeBump 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgeBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   8. MODALS STYLING (EQUIPMENT, UPGRADES, DEFENSE, VICTORY)
   ========================================================================== */
.game-modal {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: auto;
    padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
.game-modal.active { display: flex; }

.modal-card {
    background: linear-gradient(180deg, rgba(var(--msh-info-bg-rgb), 0.96) 0%, rgba(var(--msh-info-bg-rgb), 0.98) 100%);
    border: 2px solid rgba(var(--msh-info-rgb), 0.5);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(var(--msh-black-rgb), 0.9), 0 0 32px rgba(var(--msh-info-rgb), 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(92vw, 440px);
    max-height: 88vh;
}

.modal-header {
    padding: 12px 18px;
    background: rgba(var(--msh-info-bg-rgb), 0.85);
    border-bottom: 1px solid var(--hud-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--msh-white);
    letter-spacing: 0.5px;
}
.modal-close-btn {
    background: rgba(var(--msh-white-rgb), 0.1);
    border: 1px solid rgba(var(--msh-white-rgb), 0.2);
    color: var(--msh-slate-lt);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.modal-close-btn:hover, .modal-close-btn:active {
    background: var(--msh-danger);
    color: var(--msh-white);
    border-color: var(--msh-danger);
}

/* Equipment Stage */
.equip-hero-stage {
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(circle, rgba(var(--msh-info-rgb), 0.12) 0%, rgba(var(--msh-info-bg-rgb), 0) 70%);
}
.hero-pedestal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}
.pedestal-glow {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, #38bdf8 0%, rgba(56, 189, 248, 0) 70%);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
}
.hero-avatar-display {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0284c7);
    border: 3px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.combat-power-badge {
    background: rgba(15, 23, 42, 0.95);
    border: 1.5px solid #f59e0b;
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 900;
    color: var(--color-gold-text);
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    z-index: 2;
}

.equip-sub-tabs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    z-index: 5;
}
.equip-tab {
    background: rgba(var(--msh-info-bg-rgb), 0.85);
    border: 1px solid rgba(var(--msh-white-rgb), 0.16);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    color: var(--msh-slate-lt);
    cursor: pointer;
    min-height: 36px;
    transition: all 0.15s ease;
}
.equip-tab.active {
    background: var(--msh-info-lo);
    border-color: var(--msh-info);
    color: var(--msh-white);
    box-shadow: 0 0 12px rgba(var(--msh-info-rgb), 0.5);
}

.orbit-slots-ring {
    position: absolute;
    width: 200px;
    height: 160px;
    pointer-events: none;
}
.orbit-slot-badge {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
.slot-1 { top: 6px; left: 8px; border-color: #38bdf8; }
.slot-2 { top: 58px; left: 0px; border-color: #38bdf8; }
.slot-3 { bottom: 6px; left: 8px; border-color: #facc15; }
.slot-4 { top: 6px; right: 8px; border-color: #a855f7; }
.slot-5 { top: 58px; right: 0px; border-color: #64748b; }
.slot-6 { bottom: 6px; right: 8px; border-color: #64748b; }

.equip-action-row {
    padding: 10px 18px;
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(var(--msh-white-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--msh-white-rgb), 0.08);
    background: rgba(var(--msh-info-bg-rgb), 0.6);
}
.btn-equip-action {
    flex: 1;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-equip-best {
    background: linear-gradient(135deg, var(--msh-info-lo), var(--msh-info-lo));
    color: var(--msh-white);
    box-shadow: 0 4px 14px rgba(var(--msh-info-lo-rgb), 0.4);
}
.btn-merge-all {
    background: linear-gradient(135deg, var(--msh-warn), var(--msh-warn));
    color: var(--msh-white);
    box-shadow: 0 4px 14px rgba(var(--msh-warn-rgb), 0.4);
}

.inventory-section {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 220px;
}
.inventory-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
}
.weapon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.inv-card {
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid #64748b;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    min-height: 44px;
}
.inv-card:hover, .inv-card:active { transform: translateY(-2px); }
.inv-card.equipped { border-color: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); }
.inv-card.rarity-common { border-color: #94a3b8; }
.inv-card.rarity-rare { border-color: #38bdf8; }
.inv-card.rarity-epic { border-color: #a855f7; }
.inv-card.rarity-legendary { border-color: #f59e0b; }
.inv-card.rarity-s { border-color: #f43f5e; box-shadow: 0 0 12px rgba(244, 63, 94, 0.6); }

.inv-card-badge {
    position: absolute;
    top: 3px; left: 3px;
    font-size: 8px;
    font-weight: 900;
    color: #f1f5f9;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 3px;
    border-radius: 4px;
}
.inv-card-icon { font-size: 20px; }
.inv-card-name { font-size: 9px; font-weight: 800; color: #f8fafc; text-align: center; }

/* Generic Modal Body & Clean Upgrades List */
.generic-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.upgrade-row-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-md);
    gap: 10px;
}
.upgrade-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.upgrade-name {
    font-size: 13px;
    font-weight: 900;
    color: #f8fafc;
}
.upgrade-level-pill {
    color: var(--color-xp);
    font-size: 11px;
}
.upgrade-effect {
    font-size: 11px;
    color: var(--color-text-sub);
    font-weight: 600;
}
.btn-buy-upgrade {
    min-height: 44px;
    min-width: 90px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.85);
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold-text);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.btn-buy-upgrade:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #64748b;
    color: #94a3b8;
}
.btn-buy-upgrade:not(:disabled):hover, .btn-buy-upgrade:not(:disabled):active {
    background: rgba(245, 158, 11, 0.2);
    transform: scale(1.04);
}

.modal-info-card {
    background: rgba(var(--msh-info-bg-rgb), 0.6);
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-md);
    padding: 14px;
}
.defense-item-list, .market-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.defense-item, .market-item {
    font-size: 12px;
    color: #cbd5e1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.defense-item span, .market-item span {
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 700;
}

/* Stage 1 Victory Modal */
#victory-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.98);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    box-shadow: 0 0 60px rgba(250, 204, 21, 0.5);
    z-index: 50;
    max-width: min(90vw, 420px);
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS (NO OVERLAP, NO HORIZONTAL SCROLL)
   360x640, 412x915, 768x1024, 1366x768, 1920x1080
   ========================================================================== */

/* Narrow Mobile Portrait (<= 480px) */
@media (max-width: 480px) {
    #hud-top {
        flex-wrap: wrap;
        gap: 6px;
    }
    .hud-top-left {
        width: 100%;
        max-width: 100%;
        gap: 5px;
    }
    .level-shield-badge {
        height: 34px;
        padding: 0 8px 0 4px;
    }
    .level-xp-container {
        width: 48px;
    }
    .currency-badge {
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }
    .hud-top-right {
        margin-left: auto;
    }
    #quest-card {
        width: clamp(160px, 48vw, 210px);
        padding: 5px 8px;
    }
    #stack-meter-container {
        width: 135px;
        height: 34px;
        padding: 3px 10px;
        bottom: max(78px, calc(var(--safe-bottom) + 72px));
        right: max(8px, var(--safe-right));
        left: auto;
    }
    #joystick-zone {
        width: 116px;
        height: 116px;
        bottom: calc(max(10px, var(--safe-bottom)) + 46px);
        left: max(12px, var(--safe-left));
    }
    #joystick-knob {
        width: 48px;
        height: 48px;
        top: 34px;
        left: 34px;
    }
    #btn-touch-drop {
        width: 52px;
        height: 52px;
        bottom: max(12px, var(--safe-bottom));
        right: max(12px, var(--safe-right));
    }
    #bottom-nav-bar {
        right: max(8px, var(--safe-right));
        gap: 6px;
        padding: 5px;
    }
    .jx-cargo { right: max(8px, var(--safe-right)); bottom: max(38px, var(--safe-bottom)); min-width: 135px; }
    .nav-btn, .nav-btn-center {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    #weapon-hud {
        padding: 4px 6px;
        gap: 4px;
    }
    .weapon-slot {
        min-width: 58px;
        padding: 4px 6px;
        font-size: 10px;
    }
    .weapon-slot #name-sword,
    .weapon-slot #name-spear,
    .weapon-slot #name-gun {
        display: none;
    }
}

/* Landscape Mobile (Short Height <= 480px) */
@media (max-height: 480px) and (orientation: landscape) {
    #hud-top {
        top: max(6px, var(--safe-top));
    }
    .level-shield-badge, .currency-badge {
        height: 30px;
        padding: 0 6px;
        font-size: 11px;
    }
    .level-xp-container {
        width: 42px;
    }
    #quest-card {
        padding: 4px 8px;
        width: 175px;
    }
    #bottom-nav-bar {
        gap: 4px;
        padding: 4px;
    }
    .nav-btn, .nav-btn-center {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    .nav-icon, .anvil-icon {
        font-size: 17px;
    }
    #stack-meter-container {
        bottom: max(6px, var(--safe-bottom));
        left: max(8px, var(--safe-left));
        height: 30px;
        width: 125px;
    }
    #joystick-zone {
        width: 100px;
        height: 100px;
        bottom: calc(max(6px, var(--safe-bottom)) + 40px);
        left: max(10px, var(--safe-left));
    }
    #joystick-knob {
        width: 42px;
        height: 42px;
        top: 29px;
        left: 29px;
    }
    #btn-touch-drop {
        width: 46px;
        height: 46px;
        bottom: max(8px, var(--safe-bottom));
        right: max(8px, var(--safe-right));
    }
    #weapon-hud {
        bottom: max(72px, calc(var(--safe-bottom) + 64px));
        padding: 3px 6px;
    }
    .weapon-slot {
        min-height: 38px;
        padding: 3px 6px;
    }
    #boss-hud {
        top: calc(max(6px, var(--safe-top)) + 38px);
        padding: 4px 12px;
    }
    #event-toast {
        top: calc(max(6px, var(--safe-top)) + 40px);
        padding: 5px 14px;
        font-size: 11px;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #quest-card {
        width: 210px;
    }
    .weapon-slot {
        min-width: 85px;
    }
}

/* Large Screens (1366px - 1920px) */
@media (min-width: 1366px) {
    #quest-card {
        width: 235px;
    }
    .weapon-slot {
        min-width: 95px;
    }
}

/* Boss warning edge cue */
@keyframes boss-warning-edge { 0%,100% { opacity:.72 } 50% { opacity:1 } }
.boss-warning-edge-pulse { animation:boss-warning-edge .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .boss-warning-edge-pulse { animation:none!important; } }

/* ==========================================================================
   10. REDUCED MOTION SUPPORT (prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hud-float-num {
        display: none !important;
    }
    .anvil-merge-tag {
        animation: none !important;
    }
    #boss-hud.active {
        animation: none !important;
    }
}

/* Overlay scale: HUD/status 20-1400; utility panels 1200-1300; dialogs 9500-10020; full-screen modal layers 10000+. Dialogs which can coexist use distinct values (vault 10016, bestiary 10015, quests 10017, build queue 10020). */
.prog-overlay { position: fixed; inset: 0; z-index: 10010; display: grid; place-items: center; padding: 16px; background: #071426de; overflow-y: auto; touch-action: manipulation; }
.prog-panel { width: min(760px, 100%); max-height: 95dvh; overflow-y: auto; padding: 24px; border: 2px solid var(--msh-accent-hi); border-radius: 24px; color: var(--msh-white); background: radial-gradient(ellipse at top, var(--msh-info-lo), var(--msh-info-bg) 75%); text-align: center; box-shadow: 0 0 80px rgba(var(--msh-accent-hi-rgb), 0.27); }
.prog-panel h1 { color: var(--msh-text-gold); font-size: clamp(32px, 8vw, 64px); margin: 0; letter-spacing: .08em; }
.prog-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.prog-ability { flex: 1 1 150px; display: grid; gap: 16px; min-height: 150px; border: 3px solid; border-radius: 16px; padding: 20px 12px; background: #15253d; color: white; cursor: pointer; font: inherit; }
.prog-ability strong { font-size: 20px; }
.prog-ability-icon { width: 34px; height: 34px; object-fit: contain; justify-self: center; }
.prog-weapon { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #142035; color: white; border: 2px solid; border-radius: 12px; min-width: 145px; }
.prog-compare { display:none; position:absolute; z-index:20; left:8px; right:8px; bottom:calc(100% + 6px); padding:9px 11px; border:1px solid #91b7d0; border-radius:8px; background:#10243b; color:#f4f8ff; line-height:1.45; box-shadow:0 4px 14px #000a; }
.prog-weapon { position:relative; }
.prog-weapon:hover .prog-compare,.prog-weapon:focus-within .prog-compare,.prog-weapon.compare-open .prog-compare { display:block; }
.color-safe { --rarity-common:#cbd5e1; --rarity-uncommon:#86efac; --rarity-rare:#7dd3fc; --rarity-epic:#d8b4fe; --rarity-legendary:#fcd34d; }
.color-safe .inv-card.rarity-common,.color-safe .prog-weapon.rarity-common { border-color:var(--rarity-common)!important; }
.color-safe .inv-card.rarity-uncommon,.color-safe .prog-weapon.rarity-uncommon { border-color:var(--rarity-uncommon)!important; }
.color-safe .inv-card.rarity-rare,.color-safe .prog-weapon.rarity-rare { border-color:var(--rarity-rare)!important; }
.color-safe .inv-card.rarity-epic,.color-safe .prog-weapon.rarity-epic { border-color:var(--rarity-epic)!important; }
.color-safe .inv-card.rarity-legendary,.color-safe .prog-weapon.rarity-legendary { border-color:var(--rarity-legendary)!important; }
.prog-action { min-height: 44px; padding: 8px 12px; margin: 3px; border: 1px solid #9eb7db; border-radius: 8px; background: #263f64; color: #fff; cursor: pointer; font: inherit; }
.prog-action:disabled { opacity: .45; cursor: default; }
.prog-action:focus-visible, .prog-ability:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.prog-gain { color: #72f2a3; }
.prog-loss { color: #ff8d9a; }
.prog-chest { color: #ffe08a; padding: 12px; border: 1px solid #ffe08a; border-radius: 10px; }
.prog-xp-flash { filter: brightness(2); box-shadow: 0 0 22px #ffe78a; }

.prog-tabs { display:flex; gap:8px; grid-column:1/-1; }
.prog-pips { color:#ffc653; display:block; font-size:12px; }
.prog-merge-preview { padding:12px; background:#172439; border:1px solid #ffc653; }
.prog-roll-high { color:#ffc653; }
.prog-roll-mid { color:#bf82ff; }
.prog-roll-low { color:#5ee890; }

.settle-menu { width: min(92vw, 540px); max-height: 80vh; overflow-y: auto; padding: 20px; border: 2px solid #87b79d; border-radius: 16px; background: #182923; color: #f5ecd7; font: 16px system-ui, sans-serif; }
.settle-menu::backdrop { background: #08130dbb; }
.settle-card { padding: 10px; margin: 10px 0 4px; border-radius: 8px; background: #ffffff0c; }
.settle-button { min-height: 44px; padding: 10px 14px; margin: 4px; border: 1px solid #9dcab0; border-radius: 8px; background: #315c48; color: white; cursor: pointer; font: inherit; touch-action: manipulation; }
.settle-button:disabled { opacity: .5; cursor: default; }
.settle-button:focus-visible { outline: 3px solid #ffd979; outline-offset: 3px; }
.settle-banner { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 10005; padding: 18px; border-radius: 12px; background: #254c38; color: #fff0bb; font: bold 22px system-ui, sans-serif; pointer-events: none; }

.helper-panel { color: #f8fafc; background: #172334; border: 2px solid #d6b78b; border-radius: 12px; max-width: 640px; width: calc(100% - 40px); max-height: 80vh; overflow: auto; padding: 20px; }
.helper-panel::backdrop { background: #0009; }
.helper-row { padding: 12px 0; border-bottom: 1px solid #64748b; }
.helper-button { min-height: 44px; margin: 4px; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.helper-button:disabled { opacity: .5; cursor: default; }

.hud-settle-chip { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); padding:6px 10px; border-radius:12px; background:#15221ee8; color:#f4e7bf; font-size:12px; z-index:30; pointer-events:none; }
.hud-settle-crafts { position:fixed; right:12px; top:40%; max-width:300px; max-height:40vh; overflow:auto; z-index:35; }
.hud-settle-crafts button { display:block; padding:10px; margin:4px; }
.hud-settle-chip[hidden], .hud-settle-crafts[hidden] { display:none; }
.sales-panel { color: var(--msh-white); background: var(--msh-info-bg); border: 2px solid var(--msh-warn); border-radius: 12px; max-width: 680px; max-height: 85vh; overflow: auto; padding: 20px; }
.sales-row { display: block; margin: 10px 0; }
.sales-button { min-height: 44px; margin: 4px; padding: 8px 12px; cursor: pointer; }
.sales-row input { width: 80px; min-height: 36px; }

.sales-panel { box-sizing: border-box; width: calc(100vw - 24px); max-width: 340px; max-height: 80vh; overflow-y: auto; overflow-x: hidden; padding: 12px; color: var(--msh-white); background: var(--msh-info-bg); border: 1px solid var(--msh-slate); border-radius: 12px; }
.sales-panel * { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
.sales-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.sales-row input { min-height: 40px; width: 100%; }
.sales-button { min-height: 40px; min-width: 40px; padding: 8px; margin: 4px 0; }
.sales-counter { border-top: 1px solid #64748b; padding: 8px 0; }
.sales-reason { display: block; font-size: 12px; }
.sales-toggle { position: fixed; bottom: 180px; left: 12px; z-index: 100; min-width: 40px; min-height: 40px; border-radius: 8px; background: #15202e; color: #fff; border: 1px solid #94a3b8; pointer-events: auto; }
.map-toggle { position:fixed;right:12px;top:110px;z-index:40;padding:8px 12px;border-radius:8px;background:#172b32;color:white;border:1px solid #aac4c8; }
.map-overlay { position:fixed;inset:0;z-index:200;background:rgba(5,12,20,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:white;padding:16px; }
.map-overlay[hidden], .map-vignette[hidden] { display:none; }
.map-canvas { width:min(360px,calc(100vw - 32px),calc(100dvh - 170px));height:auto;max-width:360px;max-height:360px;border:1px solid #98b4ba; }
.map-legend { max-width:360px;font-size:12px;line-height:1.5; }
.map-vignette { position:fixed;inset:0;pointer-events:none;z-index:30;box-shadow:inset 0 0 100px 30px rgba(10,3,24,.5);text-align:center;padding-top:70px;color:#ead9f6;font-size:14px; }

.lt-panel { position:fixed; z-index:1203; right:8px; top:60px; width:calc(100vw - 32px); max-width:340px; max-height:80vh; overflow:auto; box-sizing:border-box; padding:16px; background:var(--msh-info-bg); color:var(--msh-white); border:1px solid var(--msh-info-text); border-radius:12px; font:14px/1.5 sans-serif; }
.lt-panel button { display:block; min-height:44px; width:100%; margin:6px 0; padding:8px; color:var(--msh-white); background:var(--msh-info-lo); border:1px solid var(--msh-info-text); border-radius:6px; text-align:left; }
.lt-panel button:disabled { opacity:.55; }
.lt-panel button:focus-visible { outline:3px solid var(--msh-accent-hi); }
.pr-panel { position:fixed; z-index:1300; right:8px; top:50%; transform:translateY(-50%); width:calc(100vw - 24px); max-width:340px; max-height:88vh; overflow:auto; box-sizing:border-box; padding:16px; color:var(--msh-white); background:linear-gradient(155deg,var(--msh-info-bg),var(--msh-info-bg)); border:1px solid var(--msh-parchment-2); border-radius:16px; box-shadow:0 16px 48px #000b; font:15px/1.5 system-ui,sans-serif; }
.pr-panel h2 { margin:0 48px 12px 0; color:var(--msh-text-gold); }
.pr-panel p { margin:10px 0; }
.pr-panel button,.pr-nav-button { min-height:48px; width:100%; margin:7px 0; padding:10px 12px; color:var(--msh-white); background:var(--msh-info-lo); border:1px solid var(--msh-info-text); border-radius:9px; font:inherit; touch-action:manipulation; }
.pr-panel button:disabled { opacity:.52; }
.pr-panel button:focus-visible,.pr-nav-button:focus-visible { outline:3px solid var(--msh-accent-hi); outline-offset:2px; }
.pr-close { width:auto!important; position:absolute; top:10px; right:12px; padding:8px 12px!important; }
.pr-status { color:#c5d4e5; }
.pr-nav-button { position:relative; width:auto; min-height:38px; padding:6px 10px; font-size:11px; background:#5d4a24; border-color:#e5c36b; }
.pr-nav-button[hidden],.pr-badge[hidden] { display:none!important; }
.pr-badge { position:absolute; top:-8px; right:-8px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#1b1300; background:#ffdc6a; font-weight:900; animation:pr-pulse 1.2s infinite; }
.pr-toast { position:fixed; z-index:1400; left:50%; bottom:18%; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:12px 18px; color:#fff4ca; background:#172b41; border:1px solid #e7c775; border-radius:999px; }
.pr-toast.is-error { color:#fff; border-color:#ef8585; }
.pr-burst { position:fixed; z-index:1250; inset:18%; pointer-events:none; border:2px solid #ffe39a; border-radius:50%; animation:pr-burst .9s ease-out forwards; }
@keyframes pr-pulse { 50% { transform:scale(1.2); box-shadow:0 0 14px #ffd36b; } }
@keyframes pr-burst { from { opacity:.9; transform:scale(.2) rotate(0); } to { opacity:0; transform:scale(1.5) rotate(40deg); } }
@media (max-width:480px) { .pr-panel { right:12px; top:50%; width:calc(100vw - 24px); max-height:88vh; } .pr-nav-button { min-height:44px; } }
.audio-toggle{position:fixed;right:12px;bottom:70px;z-index:120;min-height:44px;min-width:88px;border-radius:12px;background:#182938;color:#fff;border:1px solid #6ca6b9;touch-action:manipulation}
.audio-panel{position:fixed;right:12px;bottom:122px;z-index:121;width:240px;padding:18px;background:#182938;color:#fff;border:1px solid #6ca6b9;border-radius:14px;box-shadow:0 8px 30px #0008}
.audio-panel[hidden]{display:none}.audio-panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;text-transform:capitalize}.audio-panel input[type=range]{width:140px}.audio-panel button{min-height:44px;min-width:70px}.audio-panel h2{margin:0 0 8px}

/* Central pallet storage panel */
.cp-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,92vw);max-height:80vh;overflow:auto;background:rgba(var(--msh-bg-1-rgb), 0.95);color:var(--msh-parchment);border:2px solid var(--msh-border-hi);border-radius:10px;padding:14px;z-index:60;display:none;font:14px sans-serif}
/* Lane 152: the keyboard focus ring and the window frame/title bar/close button now live in css/ui-kit.css. */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; } }
/* (window frame rules moved to css/ui-kit.css) */
.character-gear-grid{display:grid;grid-template-columns:repeat(4,minmax(86px,1fr));gap:6px;padding:8px;background:var(--msh-bg-0);border:1px solid var(--msh-border)}
.character-gear-slot{min-height:52px;padding:5px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:var(--msh-bg-3);border:1px solid var(--msh-border);border-radius:4px;font-size:11px}.character-gear-slot b{text-transform:uppercase;color:var(--msh-accent)}.character-gear-slot.empty{opacity:.58;background:var(--msh-bg-2)}.character-model-stage{margin:10px 0;padding:8px;display:flex;align-items:center;justify-content:space-between;background:radial-gradient(ellipse,var(--msh-border),var(--msh-bg-1) 70%);border:1px solid var(--msh-border)}.character-model-silhouette{font-size:60px;color:var(--msh-parchment-2);transition:transform .2s;transform-style:preserve-3d}
.character-sheet.msh-window.msh-flush{--msh-inset:0px}.character-sheet.msh-window{width:min(760px,96vw);padding:0!important}.character-sheet .msh-window-titlebar{height:48px}.character-sheet-body{padding:10px 14px 12px;background:radial-gradient(ellipse at 50% 32%,var(--msh-bg-3),var(--msh-bg-1) 72%)}.character-sheet-heading{height:46px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--msh-accent-hi)}.character-portrait{width:42px;height:42px;border:3px solid var(--msh-border-hi);border-radius:50%;display:grid;place-items:center;background:radial-gradient(var(--msh-text-dim),var(--msh-bg-1));font-size:25px;color:var(--msh-text-gold)}.character-identity{display:grid;text-align:center;gap:3px}.character-identity strong{font:20px Georgia,serif;color:var(--msh-text-hi)}.character-sheet-stage{display:grid;grid-template-columns:minmax(108px,1fr) minmax(190px,1.7fr) minmax(108px,1fr);gap:8px;min-height:340px}.character-gear-column{display:grid;grid-template-rows:repeat(8,minmax(38px,1fr));gap:5px}.character-gear-slot{min-width:0;min-height:0;padding:3px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:4px;border-radius:3px;background:linear-gradient(135deg,var(--msh-border-dim),var(--msh-bg-2));border:2px solid var(--msh-border);color:var(--msh-text)}.character-gear-slot.empty{opacity:.55}.character-slot-glyph{height:30px;display:grid;place-items:center;background:var(--msh-bg-1);border:1px solid var(--msh-bg-4);color:var(--msh-accent);font-size:16px}.character-slot-name{font-size:10px;overflow:hidden;text-overflow:ellipsis}.character-sheet-center{display:flex;flex-direction:column;justify-content:space-between}.character-sheet .character-model-stage{position:relative;flex:1;margin:0;min-height:286px;border:1px solid var(--msh-border);background:radial-gradient(ellipse,var(--msh-bg-4),var(--msh-bg-1) 72%)}.character-model-silhouette{margin:auto;font-size:120px;color:var(--msh-border-hi);text-shadow:0 4px 18px var(--msh-black);transform-style:preserve-3d}.character-model-controls{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between}.character-model-controls button{width:34px;height:30px;color:var(--msh-accent-hi);background:var(--msh-bg-1);border:1px solid var(--msh-border)}.character-resistances{display:flex;justify-content:center;gap:4px;margin-top:5px}.character-resistances span{padding:3px 4px;background:var(--msh-bg-2);border:1px solid var(--msh-bg-4);color:var(--msh-accent);font-size:9px}.character-weapon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:48%;margin:8px auto}.character-stats-block{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px;margin:5px auto 8px}.character-stat-column{padding:5px 8px;background:var(--msh-bg-1);border:1px solid var(--msh-bg-4)}.character-stat-row{display:flex;justify-content:space-between;gap:8px;color:var(--msh-accent-hi);font:14px Georgia,serif}.character-stat-row strong{color:var(--msh-ok)}.character-summary{display:none}.character-sheet-tabs{display:flex;justify-content:center;gap:5px}.character-sheet-tabs button{min-height:36px;padding:0 15px;background:linear-gradient(var(--msh-bg-3),var(--msh-bg-1));border:1px solid var(--msh-border);color:var(--msh-accent)}.character-sheet-tabs button[aria-pressed=true]{background:var(--msh-border-dim);color:var(--msh-text-gold)}.character-sheet [aria-label="Close Character"]{color:var(--msh-bg-3)}.character-sheet.msh-window{width:min(760px,96vw);height:min(620px,92vh);display:flex;flex-direction:column;border:3px ridge var(--msh-border)!important;border-radius:5px!important}.character-sheet .msh-window-titlebar{height:48px;min-height:48px;padding:0 9px 0 70px;background:linear-gradient(90deg,var(--msh-bg-3),var(--msh-bg-1) 18%,var(--msh-bg-3) 84%,var(--msh-bg-1));border:2px ridge var(--msh-text-dim);position:relative}.character-sheet .msh-window-title{font:22px Georgia,serif;letter-spacing:0;text-transform:none;color:var(--msh-text-hi)}.character-sheet .msh-window-emblem{display:none}.character-sheet .character-portrait{position:absolute;left:-12px;top:-12px;width:76px;height:76px;font-size:38px;border-width:4px;box-shadow:0 0 0 3px var(--msh-bg-2),0 3px 12px var(--msh-black)}.character-sheet .character-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 10px 0;background:radial-gradient(ellipse at 50% 37%,var(--msh-bg-3),var(--msh-bg-1) 70%)}.character-sheet-heading{height:78px;min-height:78px;margin-left:60px;justify-content:center}.character-identity strong{font:25px Georgia,serif;color:var(--msh-accent-hi)}.character-identity span{color:var(--msh-accent-hi);font:19px Georgia,serif}.character-sheet-stage{flex:1;min-height:245px;grid-template-columns:minmax(94px,.76fr) minmax(200px,2.35fr) minmax(94px,.76fr);gap:7px}.character-gear-column{grid-template-rows:repeat(8,minmax(34px,1fr));gap:4px}.character-gear-slot{grid-template-columns:32px minmax(0,1fr);padding:2px;background:linear-gradient(135deg,var(--msh-bg-3),var(--msh-bg-1));border:2px ridge var(--msh-bg-4);box-shadow:inset 0 0 0 1px var(--msh-bg-1)}.character-gear-slot.equipped{border-color:var(--msh-border-hi)}.character-gear-slot.empty{opacity:.58}.character-slot-glyph{height:100%;min-height:27px;width:30px;color:var(--msh-border-hi);background:linear-gradient(145deg,var(--msh-bg-2),var(--msh-bg-1));border:1px solid var(--msh-bg-4)}.character-slot-name{font:10px Georgia,serif;color:var(--msh-text)}.character-sheet-center{min-width:0}.character-sheet .character-model-stage{min-height:200px;background:radial-gradient(ellipse,var(--msh-bg-4),var(--msh-bg-1) 72%);border:3px ridge var(--msh-bg-4)}.character-model-silhouette{font-size:clamp(86px,12vw,150px);color:var(--msh-accent);text-shadow:0 7px 14px var(--msh-black)}.character-model-controls{left:8px;right:8px}.character-resistances{flex-direction:column;position:absolute;right:4px;top:8px;bottom:8px;margin:0}.character-resistances span{min-width:36px;padding:4px 2px;text-align:center;background:var(--msh-bg-1);border:2px ridge var(--msh-bg-4);color:var(--msh-text);font-size:11px}.character-weapon-row{width:48%;max-width:210px;margin:5px auto;gap:4px}.character-weapon-row .character-gear-slot{min-height:46px;grid-template-columns:1fr;justify-items:center}.character-weapon-row .character-slot-name{font-size:9px}.character-stats-block{width:min(100%,530px);max-width:none;margin:4px auto 6px;gap:6px}.character-stat-column{padding:3px 7px;background:linear-gradient(120deg,var(--msh-bg-2),var(--msh-bg-1));border:2px ridge var(--msh-bg-4)}.character-stat-row{font:16px Georgia,serif;color:var(--msh-accent-hi);line-height:1.25}.character-stat-row strong{color:var(--msh-ok);font-weight:400}.character-sheet-tabs{margin:0 -1px -1px;justify-content:flex-start;gap:4px}.character-sheet-tabs button{min-height:38px;padding:0 16px;border-radius:5px 5px 0 0;font:16px Georgia,serif}.character-sheet .character-gear-slot[title]{cursor:help}@media(max-width:700px){.character-sheet-stage{grid-template-columns:68px minmax(100px,1fr) 68px;gap:3px}.character-gear-column{gap:2px}.character-gear-slot{grid-template-columns:1fr;justify-items:center}.character-slot-glyph{width:28px}.character-slot-name{display:none}.character-sheet .character-model-stage{min-height:170px}.character-resistances{right:2px}.character-resistances span{min-width:31px;font-size:9px}.character-stat-row{font-size:11px}.character-sheet-tabs button{padding:0 8px;font-size:13px}}@media(max-width:600px){.character-sheet-stage{grid-template-columns:76px minmax(110px,1fr) 76px;gap:4px;min-height:290px}.character-gear-column{grid-template-rows:repeat(8,minmax(32px,1fr));gap:3px}.character-gear-slot{grid-template-columns:1fr;place-items:center}.character-slot-glyph{width:26px;height:23px}.character-slot-name{display:none}.character-sheet .character-model-stage{min-height:235px}.character-model-silhouette{font-size:80px}.character-weapon-row{width:70%}.character-stat-row{font-size:11px}.character-sheet-tabs button{padding:0 8px}}
.cp-panel .cp-grid{display:grid;grid-template-columns:repeat(5,minmax(42px,1fr));gap:5px;padding:8px;background:var(--msh-bg-1);border:1px solid var(--msh-accent-lo)}.cp-panel .cp-cell{aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--msh-bg-3);border:1px solid var(--msh-border);border-radius:4px;font-size:11px}.cp-panel .cp-cell.empty{opacity:.45}.cp-panel .cp-bags{display:flex;gap:5px;margin:8px 0;padding:8px;background:var(--msh-bg-2);border:1px solid var(--msh-accent-lo)}.cp-panel .cp-money{border-top:1px solid var(--msh-border);padding-top:8px;color:var(--msh-text-gold)}
.cp-panel h3{margin:0 0 6px}.cp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(var(--msh-white-rgb), 0.1)}
.cp-row button,.cp-panel>button{min-height:40px;padding:0 12px;border-radius:6px;border:0;background:var(--msh-border-hi);color:var(--msh-bg-2);font-weight:700}
.cp-row button:disabled{background:var(--msh-bg-4);color:var(--msh-parchment-2)}.cp-next{opacity:.8;font-size:12px}

/* XP Hero upgrade panel and zone strip */
.up-panel { position: fixed; z-index: 1204; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(520px, calc(100vw - 32px)); max-height: min(82vh, 760px); overflow: auto; padding: 20px; color: #f8fafc; background: rgba(15,23,42,.97); border: 1px solid rgba(148,163,184,.5); border-radius: 18px; box-shadow: 0 24px 80px #020617aa; }
.up-panel h2 { margin: 0 0 14px; }
.up-row { display: grid; grid-template-columns: minmax(110px,1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--msh-bg-4); }
.up-row strong { grid-column: 1; }
.up-row span { grid-column: 2; }
.up-row small { grid-column: 1 / 3; color: var(--msh-info-text); }
.up-row button,.up-panel > button { min-height: 40px; padding: 8px 12px; color: var(--msh-white); background: var(--msh-info-lo); border: 0; border-radius: 9px; font-weight: 700; cursor: pointer; }
.up-row button { grid-column: 3; grid-row: 1 / 3; }
.up-row button:disabled { color: var(--msh-info-text); background: var(--msh-bg-4); cursor: not-allowed; }
.up-panel > button { margin-top: 14px; background: #475569; }
.zs-strip { position: fixed; z-index: 900; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 9px 14px; color: #f8fafc; background: rgba(15,23,42,.88); border: 1px solid #64748b; border-radius: 999px; font: 700 13px/1.3 system-ui,sans-serif; box-shadow: 0 8px 24px #02061766; }
.zs-claim { padding: 7px 10px; color: #422006; background: #fbbf24; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; }
@media (max-width: 420px) { .up-panel { width: min(340px, calc(100vw - 24px)); padding: 15px; } .up-row { grid-template-columns: 1fr auto; } .up-row span { grid-column: 1; } .up-row small { grid-column: 1; } .up-row button { grid-column: 2; grid-row: 1 / 4; } .zs-strip { top: 6px; gap: 5px; padding: 7px 9px; font-size: 10px; } }

/* Unlock pads */
.pd-root{position:absolute;pointer-events:none;z-index:2}.pd-tile{border-radius:18px;background:#f4c95d}.pd-tag{border-radius:12px;background:#172338;color:#fff}.pd-fill{background:#22c55e}.pd-footprint{border:2px dashed #f8e7a1;border-radius:50%}


/* Cash tower demand bubble */
.ct-demand{min-width:34px;padding:5px 9px;border-radius:999px;background:#173b28;color:#b8ffc8;border:2px solid #39c66b;font:800 16px/1.2 system-ui,sans-serif;text-align:center;box-shadow:0 3px 10px #04140b88}

/* Boss spawn lane visuals */
.bs-chip{position:fixed;z-index:30;left:50%;top:12%;transform:translateX(-50%);min-width:220px;padding:8px 14px;border:1px solid #e84a5f;border-radius:12px;background:linear-gradient(90deg,#20182beF var(--bs-hp,100%),#20182b 0);color:#fff;font:700 14px/1.3 system-ui,sans-serif;text-align:center;box-shadow:0 3px 14px #0008;pointer-events:none}
/* Biome region entry toast. Appended by the biome presentation lane. */
.bm-banner{position:fixed;z-index:1205;top:calc(84px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-12px);max-width:min(92vw,520px);padding:12px 20px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(24,43,63,.94);color:#fff;font:700 15px/1.35 system-ui,sans-serif;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.bm-banner.bm-banner-in{opacity:1;transform:translate(-50%,0)}
.bm-banner.bm-banner-out{opacity:0;transform:translate(-50%,-10px)}
@media(prefers-reduced-motion:reduce){.bm-banner{transition:none}}

/* Kill streak feedback. */
.kf-streak{position:fixed;z-index:1201;top:calc(132px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%) scale(1);padding:7px 14px;border-radius:999px;background:#17324beF;color:#ffe45e;font:800 15px/1.2 system-ui,sans-serif;box-shadow:0 4px 16px #0006;pointer-events:none;opacity:1;transition:opacity .35s ease,transform .18s ease}
.kf-streak[hidden],.kf-toast[hidden],.kf-sparkle[hidden]{display:none}
.kf-streak-pop{animation:kf-pop .24s ease-out}
.kf-streak-fade{opacity:0}
.kf-toast{position:fixed;z-index:1202;top:calc(100px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-8px);padding:9px 16px;border-radius:12px;background:#182b3f;color:#fff;font:800 18px/1.2 system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.kf-toast-in{opacity:1;transform:translate(-50%,0)}
.kf-toast-out{opacity:0}
.kf-sparkle{position:fixed;z-index:1200;left:50%;top:22%;width:6px;height:6px;border-radius:50%;background:#ffe45e;box-shadow:0 0 8px 3px #ffd84d99;pointer-events:none;opacity:0}
.kf-sparkle-on{animation:kf-spark .5s ease-out forwards}
@keyframes kf-pop{50%{transform:translateX(-50%) scale(1.18)}}
@keyframes kf-spark{to{opacity:0;transform:translate(18px,-28px) scale(.35)}}
@media(prefers-reduced-motion:reduce){.kf-streak,.kf-toast{transition:none}.kf-streak-pop,.kf-sparkle-on{animation:none}}
/* Bottom-bar count badge. */
#bottom-nav-bar .nav-btn{position:relative}
.nav-badge{position:absolute;top:2px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font:800 11px/18px system-ui,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.nav-badge[hidden]{display:none}
/* Treasure chest shop */
.cs-panel{position:fixed;z-index:1206;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));max-height:min(86vh,760px);overflow:auto;box-sizing:border-box;padding:20px;border:2px solid #527596;border-radius:18px;background:linear-gradient(160deg,#18334b,#102335);color:#f4f7fb;box-shadow:0 18px 60px #0009;font-family:system-ui,sans-serif}
.cs-panel h2{margin:0 110px 16px 0;font-size:1.5rem}.cs-close{position:absolute;right:18px;top:16px}.cs-card{display:grid;grid-template-columns:minmax(120px,1fr) minmax(130px,auto);gap:6px 14px;align-items:center;margin:10px 0;padding:13px;border:1px solid var(--msh-slate);border-radius:13px;background:var(--msh-info-bg)}.cs-card[hidden]{display:none}.cs-card h3,.cs-card p{margin:0}.cs-card h3{font-size:1.05rem}.cs-card small{grid-column:1/-1;color:var(--msh-slate-lt);line-height:1.5}.cs-card button{grid-column:2;grid-row:1/3;min-height:42px}.cs-panel button{border:0;border-radius:9px;padding:10px 14px;background:#f4bc55;color:#2c2418;font-weight:700;cursor:pointer}.cs-panel button:disabled{opacity:.55;cursor:not-allowed}.cs-gate{padding:12px;border-radius:10px;background:#4a3340}.cs-result{margin-top:14px;padding:15px;border:2px solid var(--cs-rarity,#d8e1e8);border-radius:12px;text-align:center;font-size:1.2rem;font-weight:800;color:var(--cs-rarity,#fff);background:#142331}.cs-pop{animation:cs-pop .6s cubic-bezier(.18,.8,.28,1.2)}.cs-no-motion{animation:none}@keyframes cs-pop{0%{transform:scale(.72);opacity:.25}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}@media(max-width:520px){.cs-panel{padding:16px}.cs-card{grid-template-columns:1fr;gap:8px}.cs-card small,.cs-card button{grid-column:1;grid-row:auto}.cs-panel h2{font-size:1.25rem}.cs-card button{width:100%}}@media(prefers-reduced-motion:reduce){.cs-pop{animation:none}}
.bq-plots>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-weight:700;padding:.2rem .4rem;background:#203653;border-radius:.7rem}.bq-plots[open]>summary{margin-bottom:.4rem}.bq-workroles{margin:.5rem 0;padding:.4rem;background:#1b2d47;border-radius:.7rem;overflow-x:auto}.bq-panel{position:fixed;z-index:10020;inset:auto 2vw 2vh;max-height:82vh;overflow:auto;padding:1rem;background:#14243b;color:#f5f7fb;border:1px solid #6d8bae;border-radius:1rem;box-shadow:0 1rem 3rem #0009}.bq-panel h2,.bq-panel h3{margin:.35rem 0 .7rem}.bq-plot,.bq-job{padding:.65rem;margin:.5rem 0;background:#203653;border-radius:.7rem}.bq-requires{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding-left:1.2rem}.bq-requires li{font-size:.9rem}.bq-panel button{min-height:2.75rem;margin:.2rem;padding:.45rem .7rem}.bq-job{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center}.bq-job progress{width:100%;height:.8rem;accent-color:#79d59a}.bq-queue{border-top:1px solid #6d8bae;margin-top:.8rem;padding-top:.4rem}@media(max-width:600px){.bq-panel{inset:auto 0 0;max-height:88vh;border-radius:1rem 1rem 0 0;padding:.75rem}.bq-requires{display:block}.bq-job{grid-template-columns:1fr}.bq-job button{width:100%}}@media(prefers-reduced-motion:reduce){.bq-panel *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Compact mobile controls retain a 44px touch hit area without changing desktop sizing. */
@media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) {
  #open-loadout, .btn-zoom, .quest-step, .quest-tracker-row,
  .quest-log button, .map-toggle, .sales-toggle, .audio-toggle,
  #onboarding-checklist button, #controls-legend > button {
    box-sizing: border-box;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .btn-zoom { width: 44px; height: 44px; flex: 0 0 44px; }
  #open-loadout { padding: 10px 12px; }
  .quest-step, .quest-tracker-row { padding: 8px; }
  .quest-tracker-row { text-align: left; }
  .quest-tracker { pointer-events: none; }
  .quest-tracker-row, .quest-tracker > button { pointer-events: auto; }
}

/* HUD consolidation (playtest review 2026-10-24): Map / Sales / Audio utility chips share one row under the quest tracker, left of the zoom
   controls, so they no longer overlap the action bar, the zoom buttons or the skill bar. Phones move the zone strip below the top bars. */
.map-toggle, .sales-toggle, .audio-toggle { position: fixed !important; top: 62px !important; bottom: auto !important; left: auto !important; z-index: 120; min-height: 44px !important; min-width: 44px !important; padding: 8px 10px !important; font-size: 12px; line-height: 1.2; border-radius: 10px; }
.map-toggle { right: 56px !important; }
.sales-toggle { right: calc(56px + 76px) !important; }
.audio-toggle { right: calc(56px + 76px + 84px) !important; }
body.mmo-launch-hud #action-bar { display: flex !important; } /* the 12-slot bar is the only skill bar; utility buttons stay hidden */
#skill-bar { left: 50% !important; right: auto !important; bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px)) !important; width: min(96vw, 780px) !important; max-width: min(96vw, 780px) !important; flex-wrap: wrap !important; overflow: visible !important; justify-content: center !important; scrollbar-width: thin; }
#skill-bar > button:not(#skill-auto) { flex: 0 0 54px; }
#skill-auto { display: none !important; }
.mmo-mini-tools { display:flex; align-items:center; gap:4px; }
.mmo-mini-zoom { position:static !important; display:flex; flex-direction:row !important; gap:3px !important; }
.mmo-mini-zoom .btn-zoom { width:30px; height:30px; flex:0 0 30px; }
#micro-menu { position: fixed; z-index: 9100; right: max(12px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); display:flex; gap:4px; padding:5px; border:1px solid #7890a8; border-radius:12px; background:rgba(10,19,31,.9); }
#micro-menu button, #micro-menu-more button { min-width:40px; min-height:40px; color:#f5f7fb; background:#263d57; border:1px solid #7890a8; border-radius:8px; font:700 18px system-ui; touch-action:manipulation; }
#micro-menu button:focus-visible, #micro-menu-more button:focus-visible { outline:3px solid #facc15; outline-offset:2px; }
#micro-menu-more { position:fixed; z-index:9101; right:max(12px,env(safe-area-inset-right)); bottom:calc(max(12px,env(safe-area-inset-bottom)) + 54px); display:flex; flex-direction:column; gap:4px; padding:6px; background:#101e30; border:1px solid #7890a8; border-radius:10px; }
#micro-menu-more[hidden] { display:none; }
#tutorial-hint { z-index:9050; width:min(300px,calc(100vw - 32px)); padding:10px 12px; color:#fff7dd; background:rgba(20,35,52,.96); border:1px solid #d9bd70; border-radius:10px; box-shadow:0 5px 18px #0008; pointer-events:none; }
@media(max-width:600px) { #micro-menu { left:auto; right:max(8px,env(safe-area-inset-right)); bottom:max(82px,calc(env(safe-area-inset-bottom) + 76px)); transform:none; max-width:calc(100vw - 16px); } #micro-menu button { min-width:36px; min-height:40px; } #micro-menu-more { bottom:calc(max(82px,env(safe-area-inset-bottom) + 76px) + 54px); } }
@media (max-width: 600px) {
  .map-toggle, .sales-toggle, .audio-toggle { top: 98px !important; }
  .zs-strip { top: 144px !important; left: 8px !important; transform: none !important; max-width: min(240px, calc(100vw - 80px)) !important; border-radius: 12px !important; font-size: 10px !important; padding: 6px 9px !important; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .sales-toggle { right: calc(56px + 72px) !important; } .audio-toggle { right: calc(56px + 72px + 80px) !important; }
  #skill-bar { left: 50% !important; bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px)) !important; gap: 3px !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; }
  #skill-bar > button:not(#skill-auto) { flex-basis: 44px; width: 44px !important; min-width: 44px !important; min-height: 48px !important; }
}

/* Action bar XP track with a gold rested reserve segment. */
#hud-xpbar { position:fixed; z-index:8999; right:max(12px,env(safe-area-inset-right)); bottom:max(126px,calc(env(safe-area-inset-bottom) + 116px)); width:min(250px,calc(100vw - 20px)); height:5px; overflow:hidden; border-radius:4px; background:#111827; box-shadow:0 1px 4px #0009; }
#hud-xpbar #exp-fill { position:absolute; inset:0 auto 0 0; height:100%; background:linear-gradient(90deg,#38bdf8,#818cf8); }
#hud-xpbar #rested-exp-fill { position:absolute; top:0; bottom:0; background:repeating-linear-gradient(135deg,#e5bd45 0 3px,#a87920 3px 6px); opacity:.9; }

/* Lane 2: keep cargo attached to its bag control and give primary chat a safe dock. */
#micro-menu .micro-menu-bag { display:flex; flex-direction:column; align-items:center; gap:2px; }
#micro-menu #cargo-floating-pill { display:block !important; position:static !important; width:52px; min-width:52px; box-sizing:border-box; padding:2px 3px; font-size:8px; line-height:1.1; border-radius:5px; }
#micro-menu #cargo-floating-pill .cargo-pill-bar { height:3px; margin-top:2px; }
/* Chat dock placement is supplied by UI_METRICS and the chat component skin. */
#hud-xpbar #val-exp-text,#hud-xpbar #val-rested-xp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:700px) { #hud-xpbar { right:8px; bottom:max(126px,calc(env(safe-area-inset-bottom) + 116px)); } }

/* Compact player unit frame (wave 236). */
.msh-player-frame { display:flex; align-items:center; gap:10px; width:290px; padding:9px 11px; border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#f8fafc; background:rgba(15,23,42,.88); box-shadow:0 6px 20px #0006; }
.msh-player-portrait { display:grid; place-items:center; flex:0 0 48px; height:48px; border:2px solid #c8a85c; border-radius:9px; background:linear-gradient(145deg,#475569,#172033); font-size:25px; }
/* Classic readable unit plates: circular player portrait, flat bars, mirrored hostile target. */
.msh-player-frame{border-radius:4px;border:1px solid #a88c52;background:linear-gradient(145deg,rgba(25,31,38,.96),rgba(10,14,19,.94));gap:9px}.msh-player-portrait{border-radius:50%;border:3px solid #c8a85c;box-shadow:0 0 0 1px #171717,0 2px 8px #0009}.msh-player-info{min-width:0;flex:1}.msh-player-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.msh-player-frame .msh-status-bar{height:15px;border-radius:2px;overflow:hidden}.msh-player-frame .msh-health-bar{background:#173322}.msh-player-frame .msh-health-bar span{display:block;background:linear-gradient(90deg,#24733c,#42a85d);height:100%;text-align:center;font-size:10px;line-height:15px}.msh-player-frame .msh-resource-bar{border-radius:2px}.msh-player-frame .msh-player-xp{height:3px;background:#302a1a}.msh-player-frame .level-xp-fill{height:100%;background:#c8a85c}#target-frame{border-radius:4px!important;background:linear-gradient(145deg,rgba(35,23,24,.97),rgba(12,13,16,.96))!important;border:1px solid #9d4a41!important}#target-frame [style*='height:12px']{border-radius:2px!important}
.msh-player-info { flex:1; min-width:0; }
.msh-player-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:12px; }
.msh-player-heading strong { overflow:hidden; text-overflow:ellipsis; }
.msh-status-bar { position:relative; height:12px; margin:3px 0; overflow:hidden; border-radius:5px; background:#253043; }
.msh-status-bar span { display:block; padding-left:5px; color:white; font-size:9px; line-height:12px; text-shadow:0 1px 2px #000; }
.msh-health-bar { background:linear-gradient(90deg,#168044,#14532d); }
.msh-resource-bar { height:5px; background:linear-gradient(90deg,#1674b8,#123854); }
.msh-player-xp { position:relative; height:5px; margin-top:5px; overflow:hidden; border-radius:4px; background:#111827; }
.msh-player-xp .level-xp-fill { height:100%; background:#e5bd45; }
.msh-player-xp #val-exp-text,.msh-player-xp #val-rested-xp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.msh-currency-strip { position:fixed; right:14px; bottom:14px; z-index:42; display:flex; gap:5px; }
.msh-currency-strip .currency-badge { display:flex; gap:5px; align-items:center; padding:5px 8px; border-radius:8px; color:#fff; background:rgba(15,23,42,.85); font-size:12px; }
@media(max-width:600px) { .msh-player-frame { width:min(265px,68vw); padding:7px; gap:7px; } .msh-player-portrait { flex-basis:39px; height:39px; } .msh-currency-strip { right:8px; bottom:8px; gap:3px; } .msh-currency-strip .currency-badge { padding:4px 5px; font-size:10px; } }
/* Wave 259: compact MMO unit plates and corner system/bag rows. */
#micro-menu{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));gap:3px;padding:3px;border-radius:6px;background:rgba(13,16,20,.78);border-color:#a88c52}
#micro-menu button,#micro-menu-more button{min-width:28px;min-height:28px;width:28px;height:28px;padding:0;border-radius:4px;background:linear-gradient(#34404a,#171d22);border-color:#8f7847;font-size:14px}
#micro-menu .micro-menu-bags{display:flex;gap:2px;align-items:end;margin-left:3px}
#micro-menu .micro-bag-button{width:25px;height:25px;min-width:25px;min-height:25px}
#micro-menu .micro-bag-button:first-child{width:34px;height:34px;min-width:34px;min-height:34px;font-size:17px}
#micro-menu-more{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 40px)}
.msh-player-frame{width:min(310px,32vw);min-height:66px;padding:4px 6px 4px 48px;position:relative;gap:6px;background:linear-gradient(145deg,rgba(25,31,38,.88),rgba(10,14,19,.84))}
.msh-player-portrait{position:absolute;left:-3px;top:5px;width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:25px}
.msh-player-frame .msh-status-bar{height:12px}
.msh-player-frame .msh-health-bar span{font-size:9px;line-height:12px}
#target-frame{width:min(310px,32vw)!important;min-height:64px!important;padding:6px 52px 6px 8px!important}
@media(max-width:600px){#micro-menu{max-width:calc(100vw - 16px);gap:2px}#micro-menu .micro-menu-button{width:25px;height:25px;min-width:25px;min-height:25px}#micro-menu .micro-bag-button:first-child{width:29px;height:29px;min-width:29px;min-height:29px}.msh-player-frame{width:min(265px,68vw);padding-left:46px}.msh-player-portrait{width:40px;height:40px}#target-frame{width:min(265px,68vw)!important}}

/* Wave 289: keep the extra ability row beside the dock and clear the minimap. */
#action-bar>button.action-utility{display:none!important}
#action-bar{box-sizing:border-box!important;bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px))!important;gap:3px!important;left:max(0px,calc((100vw - min(940px,calc(100vw - var(--actionbar-right-reserve,360px))) - var(--actionbar-right-reserve,360px))/2))!important;width:min(940px,calc(100vw - var(--actionbar-right-reserve,360px)))!important;max-width:calc(100vw - var(--actionbar-right-reserve,360px))!important;overflow:hidden;justify-content:center!important}
#hud-xpbar{left:50%!important;right:auto!important;bottom:max(68px,calc(env(safe-area-inset-bottom) + 64px))!important;transform:translateX(-50%);width:min(940px,calc(100vw - 32px))!important;height:7px;border:1px solid #a7894c;border-radius:2px}
.actionbar-side{position:fixed;z-index:8998;left:50%;right:auto;top:auto;bottom:max(76px,calc(env(safe-area-inset-bottom) + 70px));transform:translateX(-50%);display:flex;flex-direction:row;gap:3px;padding:5px;border:1px solid #79613c;border-radius:7px;background:linear-gradient(180deg,rgba(42,39,34,.78),rgba(13,17,22,.86));box-shadow:0 3px 12px #0009;max-width:calc(100vw - 16px);overflow:auto}
.actionbar-side[hidden]{display:none!important}
.actionbar-side-slot{position:relative;box-sizing:border-box;width:38px;height:38px;padding:3px;border:1px solid #9b8355;border-radius:5px;background:linear-gradient(145deg,#45433b,#111519);color:#fff;overflow:hidden}
.actionbar-side-slot .action-slot-icon{display:grid;place-items:center;width:100%;height:100%;font-weight:700}
.actionbar-side-slot img{width:25px;height:25px;object-fit:contain}
.actionbar-side-slot .action-slot-key{position:absolute;left:2px;top:0;font:700 9px/12px system-ui;text-shadow:0 1px 2px #000}
@media(max-width:900px){.actionbar-side{left:50%;right:auto;top:auto;bottom:max(76px,calc(env(safe-area-inset-bottom) + 70px));transform:translateX(-50%);flex-direction:row;max-width:calc(100vw - 16px);overflow:auto}.actionbar-side-slot{flex:0 0 34px;width:34px;height:34px}}

/* Responsive twelve-slot dock; menus and bags stay in their own right-side strip. */
#action-bar>.action-slot{box-sizing:border-box!important;width:var(--actionbar-slot-size,40px)!important;height:var(--actionbar-slot-size,40px)!important;min-width:var(--actionbar-slot-size,40px)!important;padding:2px!important}
#action-bar>.action-slot .action-slot-icon img{width:calc(var(--actionbar-slot-size,40px)*.62)!important;height:calc(var(--actionbar-slot-size,40px)*.62)!important}
#actionbar-system-strip,#actionbar-bag-strip{position:fixed;z-index:9003;right:8px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #8f754a;border-radius:6px;background:rgba(14,18,24,.88);max-width:calc(100vw - 16px)}
#actionbar-system-strip button,#actionbar-bag-strip button{box-sizing:border-box;min-width:26px;width:30px;height:30px;border:1px solid #9c8350;border-radius:4px;background:linear-gradient(#38404a,#171b20);color:#f4e4b1!important;font:700 10px system-ui!important}
@media(max-width:700px){#action-bar{left:8px!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}#actionbar-system-strip,#actionbar-bag-strip{bottom:max(66px,calc(env(safe-area-inset-bottom) + 62px));right:4px;gap:1px;padding:2px}#actionbar-system-strip button,#actionbar-bag-strip button{width:22px;min-width:22px;height:24px;font-size:8px!important}}

/* Phone HUD: six reachable actions, a clear map corner, and navigation kept in the menu. */
@media(max-width:700px){
  /* The compact micro menu is the phone's single system control. Keep its backpack/cargo
     affordance beside the More button, and suppress the oversized duplicate touch toolbar. */
  #actionbar-touch-menu{display:none!important}
  #micro-menu .micro-menu-button{display:none!important}
  #micro-menu .micro-menu-bag .micro-bag-button{display:block!important;box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px}
  #micro-menu .micro-menu-bag{display:flex!important}
  #micro-menu #cargo-floating-pill{display:block!important}
  #micro-menu .micro-menu-bags{display:none!important}
  #micro-menu>button:last-child{display:block!important;box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px}
  #micro-menu-more{max-width:calc(100vw - 16px);max-height:50vh;overflow:auto}
  #mmo-minimap .mmo-mini-buffs,#mmo-minimap .mmo-mini-debuffs,#mmo-minimap .mmo-mini-clock,#mmo-minimap .mmo-mini-coords{display:none!important}
  #action-bar{left:50%!important;right:auto!important;top:auto!important;bottom:max(124px,calc(env(safe-area-inset-bottom) + 116px))!important;transform:translateX(-50%)!important;width:min(358px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;height:60px;padding:5px 8px;overflow:hidden;gap:4px!important;justify-content:center!important}
  #action-bar>.action-slot:nth-of-type(n+7){display:none!important}
  #action-bar>.action-slot{flex:0 0 48px;width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important}
  #action-bar>.actionbar-pages,#action-bar>.actionbar-endcap{display:none!important}
  #actionbar-system-strip,#actionbar-bag-strip{display:none!important}
  #micro-menu{right:8px!important;left:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;top:auto!important;transform:none!important;max-width:calc(100vw - 16px);padding:3px;gap:2px;}
  #micro-menu .micro-menu-bags{display:none!important}
  #micro-menu>button:last-child{box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px}
  #mmo-minimap{top:max(8px,env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important;width:104px!important;gap:2px!important}
  #mmo-zone-name{font-size:10px!important;line-height:12px!important;max-width:104px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mmo-mini-tools{display:none!important}
  #mmo-minimap .mmo-mini-canvas{box-sizing:border-box;width:104px!important;height:104px!important;max-width:104px!important}
  .quest-tracker{top:calc(max(8px,env(safe-area-inset-top)) + 122px)!important;right:8px!important;width:min(188px,calc(100vw - 16px))!important;max-width:min(188px,calc(100vw - 16px))!important;max-height:38px!important;overflow:hidden!important;padding:2px 4px!important}
  .quest-tracker .quest-card{max-height:20px!important;overflow:hidden!important}
  .quest-tracker-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px!important;font-size:10px!important}
  .quest-tracker-head strong{font-size:11px}
  .quest-tracker-head button{min-width:40px!important;min-height:32px!important}
  #chat-panel{left:8px!important;right:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;overflow:hidden!important;border-radius:50%!important;pointer-events:auto!important}
  #chat-panel:before{content:'Chat';display:grid;place-items:center;width:40px;height:40px;color:#fff;font:700 10px system-ui}
  #chat-panel:not(.open) .chat-lines,#chat-panel:not(.open) .chat-tools,#chat-panel:not(.open) .chat-tabs{display:none!important}
  #chat-panel.open{width:min(340px,calc(100vw - 16px))!important;height:min(27vh,220px)!important;max-height:min(27vh,220px)!important;border-radius:8px!important;background:rgba(8,15,28,.92)}
  #chat-panel.open:before{display:none}
}

/* Wave 347: keep the quest chip below the full minimap stack and preserve touch targets. */
@media(max-width:700px){
  .quest-tracker{top:calc(max(8px,env(safe-area-inset-top)) + 132px)!important}
  .quest-tracker-head button{box-sizing:border-box!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  #micro-menu{box-sizing:border-box;max-width:calc(100vw - 16px)}
  #micro-menu .micro-menu-bag{min-width:40px;min-height:40px}
  #micro-menu #cargo-floating-pill{max-width:52px;overflow:hidden}
  #micro-menu button,#micro-menu-more button{box-sizing:border-box!important;min-width:40px!important;min-height:40px!important;width:40px!important;height:40px!important}
}

/* Mobile controls need a full touch area, including nested controls. */
@media (max-width:700px), (pointer:coarse) and (max-width:1024px) {
  #controls-legend button, .quest-tracker-head button, #player-emotes-launch,
  #onboarding-checklist button {
    box-sizing:border-box !important;
    min-width:44px !important;
    min-height:44px !important;
    height:auto !important;
  }
  .quest-tracker { max-height:36vh !important; }
  #controls-legend button[aria-expanded] { right:48px !important; }
}

/* Lane 47: settings panel keyboard focus and marker colours (palette overrides come from js/a11y.js) */
:root { --marker-enemy:#ef4444; --marker-friendly:#22c55e; --marker-quest:#facc15; }
.st-panel button:focus-visible,.st-panel input:focus-visible,.st-panel select:focus-visible,.st-panel [tabindex]:focus-visible,.settings-toggle:focus-visible { outline:3px solid #ffd54a; outline-offset:2px; box-shadow:0 0 0 5px rgba(0,0,0,.65); }
.st-tabs button[aria-selected="true"] { text-decoration:underline; text-underline-offset:4px; }
.st-panel h3 { margin-top:1em; }

/* ---- Lane 19 UI polish ---- */
/* Trading Post / vendor window: same ridge frame, parchment-gold palette and red buttons as the other windows. */
/* Lane 152: vendor and transmog windows: layout only; frame, title bar, tabs and buttons come from css/ui-kit.css (.msh-window, .msh-titlebar, .msh-tab, .msh-wbtn). */
.msh-vendor-window { width: min(94vw, 420px); }
.msh-vendor-window h2 { margin-top: 0; }
.msh-vendor-window button { display: block; width: 100%; margin: 5px 0; text-align: left; }
.msh-vendor-window button:disabled { opacity: .6; }
.msh-vendor-window .msh-tab { display: inline-block; width: calc(33.3% - 6px); margin: 0 3px 8px; text-align: center; border-radius: var(--msh-radius-sm); border-bottom-width: 1px; }
.msh-vendor-window .msh-wbtn[aria-pressed="true"] { background: linear-gradient(var(--msh-info-lo), var(--msh-bg-3)); border-color: var(--msh-info); color: var(--msh-text-hi); }
.msh-vendor-window .msh-wbtn[data-msh-close] { text-align: center; margin-top: var(--msh-space-3); }
.msh-vendor-window [role="status"] { min-height: 1.2em; margin: 4px 0 8px; color: var(--msh-ok); font-size: var(--msh-font-sm); }
/* Auto skills toggle: obviously on/off. */
[data-auto="off"] { opacity: .75; }
[data-auto="on"] { box-shadow: 0 0 0 2px #4ade80; }
/* Phone (390x844): keep the tracker, frames and modals from overlapping. */
@media (max-width: 430px) {
  .quest-tracker { max-width: min(44vw, 190px); }
  .quest-tracker .quest-card { max-height: 22vh; }
  .prog-overlay { padding: 8px; }
  .prog-panel { max-width: 94vw; box-sizing: border-box; }
  .settle-menu { width: 94vw; max-height: 86vh; padding: 12px; box-sizing: border-box; font-size: 14px; }
  /* Lane 106: phone-width layout of the settlement/upgrade panel: full-width wrapping buttons (the upgrade label is a long cost line), close stays reachable, cards wrap. */
  .settle-menu h2 { font-size: 17px; margin: 0 0 6px; overflow-wrap: anywhere; }
  .settle-menu h3 { font-size: 15px; margin: 12px 0 4px; }
  .settle-menu .settle-button { display: block; width: 100%; box-sizing: border-box; margin: 4px 0; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; font-size: 14px; }
  .settle-menu .settle-button:first-of-type { position: sticky; top: 0; z-index: 1; text-align: center; }
  .settle-menu .settle-card { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
  .upgrade-row-card { flex-wrap: wrap; }
  .btn-buy-upgrade { min-height: 44px; }
}