* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #03070d;
}

:root {
    --privy-border-radius-sm: 4px;
    --privy-border-radius-md: 6px;
    --privy-border-radius-lg: 8px;
    --privy-border-radius-full: 999px;
    --privy-color-background: #03070d;
    --privy-color-background-2: #08111c;
    --privy-color-background-3: #102235;
    --privy-color-foreground: #f6f7fa;
    --privy-color-foreground-2: #d6dae0;
    --privy-color-foreground-3: #8a8e96;
    --privy-color-foreground-4: #555960;
    --privy-color-foreground-accent: #7dd3fc;
    --privy-color-accent: #7dd3fc;
    --privy-color-accent-light: #bae6fd;
    --privy-color-accent-lightest: #102b3b;
    --privy-color-accent-dark: #38bdf8;
    --privy-color-accent-darkest: #075985;
    --privy-color-success: #3ddc97;
    --privy-color-error: #ff5e7a;
    --privy-color-error-light: #3a1218;

    /* Minimap Theme Variables */
    --minimap-size: 200px;
    --minimap-border-color: rgba(0, 217, 255, 0.8);
    --minimap-border-width: 3px;
    --minimap-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    --minimap-player-color: #00d9ff;
    --minimap-player-outline: #004466;
    --minimap-fog-overlay: rgba(0, 0, 0, 0.8);
    --minimap-waypoint-color: #4a90e2;
    --minimap-ping-danger: #ff4444;
    --minimap-ping-objective: #ffaa00;
    --minimap-ping-rally: #44ff44;
    --minimap-quest-color: #ffd700;
    --minimap-mob-normal: #ff4444;
    --minimap-mob-elite: #ffaa00;
    --minimap-mob-boss: #a020f0;
    --minimap-npc-quest: #4a90e2;
    --minimap-npc-service: #ffd700;
    --minimap-player-party: #44ff44;
    --minimap-player-other: #ffffff;
    --minimap-player-pvp: #ff4444;
    --minimap-resource-tree: #2a9944;
    --minimap-resource-ore: #ff8833;
    --minimap-resource-fish: #4488cc;
    --minimap-resource-herb: #44cc88;
    --orbryn-hud-top-offset: max(16px, env(safe-area-inset-top, 0px));
    --orbryn-hud-control-top-offset: max(14px, env(safe-area-inset-top, 0px));
}

:root.wagus-shell-embedded {
    --orbryn-hud-top-offset: var(--wagus-shell-hud-top, 88px);
    --orbryn-hud-control-top-offset: var(--wagus-shell-hud-top, 88px);
}

body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #050510;
    font-family: 'Courier New', monospace;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

@supports (height: 100dvh) {
    html,
    body,
    #game-container,
    #hud,
    #startup-overlay {
        height: 100dvh;
    }
}

html.ios-standalone,
html.ios-standalone body {
    background: #03070d;
}

#privy-dialog-backdrop {
    background:
        radial-gradient(circle at 50% 18%, rgba(125, 211, 252, 0.12), transparent 32%),
        rgba(0, 0, 0, 0.86) !important;
    backdrop-filter: blur(20px) saturate(1.05);
}

#privy-dialog {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

#privy-dialog [id^="headlessui-dialog-panel"] {
    overflow: hidden !important;
    border: 1px solid rgba(125, 211, 252, 0.2) !important;
    border-radius: 8px !important;
    color: var(--privy-color-foreground) !important;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.12), transparent 34%),
        #03070d !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

#privy-dialog [id^="headlessui-dialog-panel"] :where(h1, h2, h3) {
    color: var(--privy-color-foreground) !important;
}

#privy-dialog [id^="headlessui-dialog-panel"] :where(p, span, label) {
    color: var(--privy-color-foreground-2) !important;
}

#privy-dialog button,
#privy-dialog input {
    border-radius: 8px !important;
}

#privy-dialog input {
    color: var(--privy-color-foreground) !important;
    border-color: rgba(125, 211, 252, 0.24) !important;
    background: rgba(0, 0, 0, 0.42) !important;
}

#privy-dialog input::placeholder {
    color: var(--privy-color-foreground-3) !important;
}

#privy-dialog button:not(:disabled) {
    color: var(--privy-color-foreground) !important;
}

#privy-dialog button:disabled {
    color: var(--privy-color-foreground-3) !important;
}

#privy-dialog a {
    color: var(--privy-color-accent) !important;
}

@media (max-width: 640px) {
    #privy-dialog {
        max-width: calc(100vw - 24px) !important;
    }

    #privy-dialog img {
        max-width: 84px !important;
        height: auto !important;
    }

    #privy-dialog button,
    #privy-dialog input {
        min-height: 44px;
    }
}

/* ================================================================
   STANDALONE ORBRYN ENTRY — frontier-first identity experience
   ================================================================ */

#auth-screen.active {
    justify-content: flex-start;
    padding: clamp(18px, 4.4vw, 72px);
    box-sizing: border-box;
    isolation: isolate;
    background: #02070b !important;
}

.orbryn-auth-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #02070b;
}

.orbryn-auth-scene-image {
    position: absolute;
    inset: -3%;
    background:
        linear-gradient(90deg, rgba(2, 7, 11, 0.92) 0%, rgba(2, 7, 11, 0.52) 38%, rgba(2, 7, 11, 0.06) 72%),
        url("../assets/orbryn-dome-frontier.jpg?v=20260711") 58% 50% / cover no-repeat;
    filter: saturate(0.9) contrast(1.12) brightness(0.78);
    transform: scale(1.035);
    animation: orbrynAuthSceneDrift 18s ease-in-out infinite alternate;
}

.orbryn-auth-scene-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 68% 44%, rgba(77, 225, 255, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(1, 4, 7, 0.12), rgba(1, 4, 7, 0.52)),
        linear-gradient(90deg, rgba(1, 4, 7, 0.2), transparent 65%);
    box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.72);
}

.orbryn-auth-scene-grid {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(125, 240, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 240, 255, 0.16) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(90deg, transparent 20%, black 72%);
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, black 72%);
}

.orbryn-auth-coordinate {
    position: absolute;
    right: clamp(18px, 3vw, 52px);
    z-index: 1;
    color: rgba(219, 249, 255, 0.58);
    font: 700 9px/1 var(--oa-mono, ui-monospace, monospace);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.orbryn-auth-coordinate::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    margin: 0 10px 3px 0;
    background: rgba(125, 240, 255, 0.56);
}

.orbryn-auth-coordinate-north { top: clamp(20px, 4vw, 56px); }
.orbryn-auth-coordinate-south { bottom: clamp(20px, 4vw, 56px); }

#auth-screen .screen-content.auth-content {
    z-index: 2;
    width: min(500px, calc(100vw - 36px));
    max-width: 500px;
    max-height: min(760px, calc(100dvh - 36px));
    margin: 0;
    padding: clamp(30px, 4vw, 52px);
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(150, 238, 255, 0.2);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(10, 20, 27, 0.93), rgba(3, 8, 13, 0.86)),
        rgba(3, 8, 13, 0.9);
    box-shadow:
        0 42px 100px rgba(0, 0, 0, 0.66),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

#auth-screen .screen-content.auth-content::after {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.035);
}

#auth-screen .auth-panel-flow {
    position: relative;
    z-index: 1;
}

#auth-screen .auth-eyebrow {
    margin: 0 0 20px;
    color: #b9f6ff;
    font: 800 10px/1 var(--oa-mono);
    letter-spacing: 0.28em;
}

#auth-screen .game-title {
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 0.9;
    letter-spacing: 0.18em;
    padding-left: 18px;
    margin-bottom: 18px;
}

#auth-screen .game-title::before {
    width: 3px;
    box-shadow: 0 0 22px rgba(0, 217, 255, 0.7);
}

#auth-screen .game-tagline {
    margin: 0 0 14px;
    color: #8eeeff;
    font-size: 10px;
    letter-spacing: 0.2em;
}

#auth-screen .auth-intro {
    max-width: 40ch;
    margin: 0 0 22px;
    color: rgba(235, 246, 250, 0.72);
    font: 400 14px/1.62 var(--oa-sans);
}

#auth-screen #auth-form {
    margin-top: 0;
}

#auth-screen #auth-form .btn-primary {
    position: relative;
    width: 100%;
    min-height: 52px;
    margin: 0 0 10px !important;
    overflow: hidden;
    background: linear-gradient(100deg, #18dff4, #8ef6ff) !important;
    border-color: #90f7ff !important;
    box-shadow: 0 12px 34px rgba(0, 217, 255, 0.18) !important;
}

#auth-screen #auth-form .btn-primary:hover,
#auth-screen #auth-form .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18), 0 16px 38px rgba(0, 217, 255, 0.28) !important;
}

#auth-screen .auth-hint {
    margin: 9px 0 0;
    color: rgba(225, 242, 248, 0.52);
    font: 500 11px/1.55 var(--oa-sans);
}

#auth-screen .auth-account-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    border: 1px solid rgba(141, 234, 255, 0.12);
    background: rgba(141, 234, 255, 0.12);
}

#auth-screen .auth-account-rail span {
    min-height: 58px;
    padding: 11px 10px;
    box-sizing: border-box;
    background: rgba(2, 9, 14, 0.86);
    color: rgba(224, 242, 248, 0.6);
    font: 650 9px/1.35 var(--oa-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#auth-screen .auth-account-rail strong {
    display: block;
    margin-bottom: 6px;
    color: #78eaff;
    font-size: 9px;
}

#auth-screen .auth-domain-mark {
    margin: 18px 0 0;
    color: rgba(211, 235, 242, 0.32);
    font: 700 9px/1 var(--oa-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@keyframes orbrynAuthSceneDrift {
    from { transform: scale(1.035) translate3d(-0.4%, -0.2%, 0); }
    to { transform: scale(1.06) translate3d(0.6%, 0.3%, 0); }
}

@media (max-width: 720px) {
    #auth-screen.active {
        align-items: flex-end;
        padding: 12px;
    }

    .orbryn-auth-scene-image {
        background-position: 66% 44%;
    }

    .orbryn-auth-coordinate { display: none; }

    #auth-screen .screen-content.auth-content {
        width: 100%;
        max-height: min(680px, calc(100dvh - 24px));
        padding: 28px 24px 24px;
        margin: 0;
        background: linear-gradient(180deg, rgba(5, 14, 21, 0.92), rgba(2, 7, 11, 0.97));
    }

    #auth-screen .game-title {
        font-size: clamp(2.3rem, 14vw, 4rem);
    }

    #auth-screen .auth-intro {
        font-size: 12px;
        line-height: 1.5;
    }

    #auth-screen .auth-account-rail span {
        min-height: 52px;
        padding: 9px 8px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbryn-auth-scene-image { animation: none; }
}

/* ORBryn-native store checkout. The payment app stays isolated in a trusted
   same-site frame while the player remains inside the game. */
.orbryn-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: grid;
    place-items: center;
    padding: clamp(10px, 2vw, 24px);
    box-sizing: border-box;
    background:
        radial-gradient(circle at 72% 18%, rgba(0, 216, 255, 0.14), transparent 32%),
        rgba(1, 5, 9, 0.9);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
    animation: orbrynCheckoutReveal 180ms ease-out both;
}

.orbryn-checkout-shell {
    width: min(1120px, 100%);
    height: min(820px, 100%);
    min-height: 520px;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(130, 235, 255, 0.22);
    background: #02070c;
    box-shadow:
        0 50px 140px rgba(0, 0, 0, 0.82),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.orbryn-checkout-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid rgba(130, 235, 255, 0.13);
    background: linear-gradient(90deg, rgba(4, 16, 24, 0.98), rgba(2, 7, 12, 0.98));
}

.orbryn-checkout-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ecfbff;
    font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.28em;
}

.orbryn-checkout-brand small {
    padding-left: 11px;
    border-left: 1px solid rgba(130, 235, 255, 0.2);
    color: rgba(191, 233, 241, 0.5);
    font-size: 8px;
    letter-spacing: 0.2em;
}

.orbryn-checkout-brand-mark {
    width: 3px;
    height: 22px;
    background: #24e5ff;
    box-shadow: 0 0 18px rgba(36, 229, 255, 0.7);
}

.orbryn-checkout-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(235, 250, 255, 0.74);
    font: 300 22px/1 sans-serif;
    cursor: pointer;
}

.orbryn-checkout-close:hover,
.orbryn-checkout-close:focus-visible {
    outline: none;
    border-color: rgba(95, 234, 255, 0.62);
    color: #8df3ff;
}

.orbryn-checkout-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #02070c;
}

@keyframes orbrynCheckoutReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640px) {
    .orbryn-checkout-overlay { padding: 0; }
    .orbryn-checkout-shell {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
    }
    .orbryn-checkout-brand small { display: none; }
}

#game-container {
    position: fixed;
    inset: 0;
    z-index: 0;
}

#game-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   HUD
   ============================================ */
#hud {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

#hud > * {
    pointer-events: auto;
}

.orbryn-character-preview-tool {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 10020;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    max-width: calc(100vw - 28px);
    padding: 6px 8px;
    border: 1px solid rgba(112, 231, 216, 0.42);
    border-radius: 8px;
    background: rgba(5, 10, 18, 0.84);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #eefcff;
    font-family: 'Courier New', monospace;
    pointer-events: auto;
}

.orbryn-character-preview-tool[hidden] {
    display: none !important;
}

.orbryn-character-preview-label {
    flex: 0 0 auto;
    color: rgba(203, 250, 244, 0.78);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.orbryn-character-preview-select {
    width: 176px;
    max-width: 48vw;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(12, 22, 34, 0.94);
    color: #f4fbff;
    font: 700 12px/1 'Courier New', monospace;
    outline: none;
}

.orbryn-character-preview-select:focus-visible {
    border-color: rgba(112, 231, 216, 0.78);
    box-shadow: 0 0 0 2px rgba(112, 231, 216, 0.18);
}

.orbryn-character-preview-select:disabled {
    cursor: wait;
    opacity: 0.68;
}

.orbryn-character-preview-status {
    flex: 0 1 auto;
    max-width: 86px;
    min-width: 0;
    overflow: hidden;
    color: rgba(238, 252, 255, 0.82);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbryn-character-preview-status[data-tone="ok"] {
    color: #8df0c8;
}

.orbryn-character-preview-status[data-tone="error"] {
    color: #ff9e9e;
}

@media (max-width: 760px) {
    .orbryn-character-preview-tool {
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(138px + env(safe-area-inset-bottom));
        padding: 5px 6px;
    }

    .orbryn-character-preview-label {
        display: none;
    }

    .orbryn-character-preview-select {
        width: 144px;
        max-width: 54vw;
        font-size: 11px;
    }
}

.orbryn-universal-close {
    position: fixed;
    top: var(--orbryn-hud-control-top-offset);
    right: max(14px, env(safe-area-inset-right));
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    color: #f7fbff;
    background:
        radial-gradient(circle at 30% 20%, rgba(125, 211, 252, 0.24), transparent 42%),
        linear-gradient(145deg, rgba(8, 16, 32, 0.96), rgba(4, 7, 16, 0.92));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(125, 211, 252, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.orbryn-universal-close[hidden] {
    display: none !important;
}

.orbryn-universal-close.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.orbryn-universal-close:hover,
.orbryn-universal-close:focus-visible {
    border-color: rgba(125, 211, 252, 0.62);
    background:
        radial-gradient(circle at 30% 20%, rgba(125, 211, 252, 0.34), transparent 46%),
        linear-gradient(145deg, rgba(11, 26, 45, 0.98), rgba(5, 10, 20, 0.96));
    outline: none;
}

.orbryn-universal-close:active {
    transform: translateY(1px) scale(0.98);
}

.orbryn-universal-close-x {
    font-size: 34px;
    line-height: 0.82;
    font-weight: 800;
    letter-spacing: 0;
}

.orbryn-universal-close-text {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- Vitals (top-left) --- */
#hud-vitals {
    position: absolute;
    top: var(--orbryn-hud-top-offset);
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#minimap-canvas {
    top: var(--orbryn-hud-top-offset) !important;
}

.orbryn-world-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(2, 5, 9, 0.88);
    pointer-events: auto;
}

.orbryn-world-map-overlay[hidden] {
    display: none !important;
}

.orbryn-world-map-panel {
    position: relative;
    width: min(96vw, calc(90vh * var(--world-map-aspect, 1.72)));
    max-width: 1280px;
}

.orbryn-world-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--world-map-aspect, 1.72);
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(175, 196, 180, 0.42);
    background: #07100c;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    cursor: grab;
    touch-action: none;
}

.orbryn-world-map-frame.is-dragging {
    cursor: grabbing;
}

.orbryn-world-map-layer {
    position: absolute;
    inset: 0;
    transform: translate(var(--world-map-pan-x, 0%), var(--world-map-pan-y, 0%)) scale(var(--world-map-zoom, 1));
    transform-origin: 0 0;
    will-change: transform;
}

.orbryn-world-map-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.orbryn-world-map-road-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.orbryn-world-map-road {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orbryn-world-map-road.is-shadow {
    stroke: rgba(54, 34, 18, 0.58);
}

.orbryn-world-map-road.is-core {
    stroke: rgba(197, 139, 72, 0.76);
}

.orbryn-world-map-road.is-highlight {
    stroke: rgba(235, 191, 112, 0.34);
}

.orbryn-world-map-road.is-bridge.is-shadow {
    stroke: rgba(56, 42, 28, 0.62);
}

.orbryn-world-map-road.is-bridge.is-core {
    stroke: rgba(196, 168, 120, 0.8);
}

.orbryn-world-map-road.is-bridge.is-highlight {
    stroke: rgba(244, 220, 164, 0.38);
}

.orbryn-world-map-boundary-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.orbryn-world-map-mob-cluster-layer,
.orbryn-world-map-region-labels-layer,
.orbryn-world-map-dungeon-marker-layer,
.orbryn-world-map-quest-npc-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.orbryn-world-map-mob-cluster-layer {
    z-index: 3;
}

.orbryn-world-map-region-labels-layer {
    z-index: 4;
}

.orbryn-world-map-dungeon-marker-layer {
    z-index: 5;
}

.orbryn-world-map-quest-npc-layer {
    z-index: 6;
}

.orbryn-world-map-screen-label-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 8;
}

.orbryn-world-map-terrain-label-layer,
.orbryn-world-map-combat-label-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.orbryn-world-map-terrain-label-layer {
    z-index: 1;
}

.orbryn-world-map-combat-label-layer {
    z-index: 2;
}

.orbryn-world-map-friends-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.orbryn-world-map-extraction-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translate(-50%, -50%) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(34, 255, 102, 0.72)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    z-index: 6;
}

.orbryn-world-map-extraction-marker[hidden] {
    display: none !important;
}

.orbryn-world-map-extraction-icon {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 18px solid #22ff66;
    transform: rotate(45deg);
    transform-origin: 50% 65%;
}

.orbryn-world-map-extraction-label {
    padding: 4px 7px;
    border-radius: 4px;
    background: rgba(5, 16, 9, 0.9);
    border: 1px solid rgba(34, 255, 102, 0.72);
    color: #dffff0;
    font: 900 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
}

.orbryn-world-map-extraction-marker.is-clamped .orbryn-world-map-extraction-label {
    border-color: rgba(255, 210, 120, 0.76);
    color: #fff1be;
}

.orbryn-world-map-boundary {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 210, 104, 0.82);
    background: rgba(255, 210, 104, 0.06);
    box-shadow: inset 0 0 18px rgba(255, 210, 104, 0.18), 0 0 10px rgba(0, 0, 0, 0.42);
}

.orbryn-world-map-boundary.is-circle {
    border-radius: 50%;
}

.orbryn-world-map-boundary.is-dome {
    border-color: rgba(92, 206, 255, 0.9);
    background: rgba(92, 206, 255, 0.07);
}

.orbryn-world-map-boundary.is-build-start {
    border-color: rgba(80, 255, 142, 0.78);
    border-style: dashed;
    background: transparent;
}

.orbryn-world-map-boundary.is-no-build {
    border-color: rgba(255, 70, 70, 0.78);
    border-style: dashed;
    background: rgba(255, 70, 70, 0.04);
}

.orbryn-world-map-boundary.is-rift-cave {
    border-color: rgba(255, 70, 70, 0.82);
    border-style: dashed;
    background: rgba(255, 70, 70, 0.05);
}

.orbryn-world-map-boundary.is-void-boss {
    border-color: rgba(255, 70, 70, 0.9);
    border-style: dashed;
    background: rgba(255, 70, 70, 0.06);
}

.orbryn-world-map-boundary-label {
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translate(-50%, -100%) scale(var(--world-map-marker-scale, 1));
    transform-origin: center bottom;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(6, 10, 14, 0.82);
    border: 1px solid currentColor;
    color: #ffeec2;
    font: 800 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.orbryn-world-map-boundary.is-dome .orbryn-world-map-boundary-label {
    color: #bdeeff;
}

.orbryn-world-map-boundary.is-build-start .orbryn-world-map-boundary-label {
    color: #baffd2;
}

.orbryn-world-map-boundary.is-no-build .orbryn-world-map-boundary-label {
    color: #ffd1d1;
}

.orbryn-world-map-boundary.is-rift-cave .orbryn-world-map-boundary-label {
    color: #ffd1d1;
}

.orbryn-world-map-boundary.is-void-boss .orbryn-world-map-boundary-label {
    color: #ffd1d1;
}

.orbryn-world-map-mob-cluster-label {
    position: absolute;
    min-width: 86px;
    max-width: 132px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    padding: 4px 7px 5px;
    border-radius: 4px;
    background: rgba(10, 9, 8, 0.78);
    border: 1px solid rgba(255, 194, 126, 0.5);
    color: #ffe8c6;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
}

.orbryn-world-map-mob-cluster-label::before {
    display: none;
    content: attr(data-compact-label);
    letter-spacing: 0;
    font: 900 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-mob-cluster-title,
.orbryn-world-map-mob-cluster-count {
    display: block;
    letter-spacing: 0;
}

.orbryn-world-map-mob-cluster-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 850 9px/1.08 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-mob-cluster-count {
    margin-top: 2px;
    color: #fff7d7;
    font: 900 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-mob-cluster-label.is-low {
    border-color: rgba(146, 238, 152, 0.52);
    color: #defcde;
}

.orbryn-world-map-mob-cluster-label.is-mid {
    border-color: rgba(255, 218, 114, 0.55);
    color: #fff0bc;
}

.orbryn-world-map-mob-cluster-label.is-high {
    border-color: rgba(255, 132, 132, 0.58);
    color: #ffd7d7;
}

.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-mob-cluster-label {
    min-width: 58px;
    max-width: 82px;
    padding: 3px 5px;
    background: rgba(10, 9, 8, 0.7);
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-mob-cluster-label {
    min-width: 58px;
    max-width: 78px;
    padding: 3px 5px;
    background: rgba(10, 9, 8, 0.68);
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-mob-cluster-label::before {
    display: block;
}

.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-mob-cluster-label::before {
    display: block;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-mob-cluster-title,
.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-mob-cluster-count,
.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-mob-cluster-title,
.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-mob-cluster-count {
    display: none;
}

.orbryn-world-map-region-pin {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(139, 222, 255, 0.66);
    background: rgba(139, 222, 255, 0.24);
    box-shadow: 0 0 9px rgba(139, 222, 255, 0.28), 0 2px 6px rgba(0, 0, 0, 0.38);
}

.orbryn-world-map-region-pin.is-subregion {
    width: 8px;
    height: 8px;
    border-color: rgba(218, 238, 214, 0.52);
    background: rgba(218, 238, 214, 0.16);
    box-shadow: 0 0 7px rgba(218, 238, 214, 0.18), 0 2px 5px rgba(0, 0, 0, 0.34);
}

.orbryn-world-map-region-pin.is-safe {
    border-color: rgba(118, 255, 196, 0.62);
    background: rgba(118, 255, 196, 0.24);
    box-shadow: 0 0 9px rgba(118, 255, 196, 0.28), 0 2px 6px rgba(0, 0, 0, 0.38);
}

.orbryn-world-map-terrain-label {
    position: absolute;
    min-width: 112px;
    max-width: 190px;
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    color: rgba(230, 255, 237, 0.86);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.92),
        0 0 8px rgba(0, 0, 0, 0.72),
        0 0 14px rgba(16, 44, 24, 0.58);
}

.orbryn-world-map-terrain-label.is-safe {
    color: rgba(214, 255, 238, 0.92);
}

.orbryn-world-map-terrain-label.is-subregion {
    min-width: 92px;
    max-width: 156px;
    color: rgba(228, 246, 216, 0.78);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.92),
        0 0 7px rgba(0, 0, 0, 0.68);
}

.orbryn-world-map-terrain-name,
.orbryn-world-map-terrain-level {
    display: block;
    letter-spacing: 0;
}

.orbryn-world-map-terrain-name {
    font: 950 13px/1.04 Georgia, "Times New Roman", serif;
}

.orbryn-world-map-terrain-level {
    margin-top: 2px;
    color: rgba(255, 244, 190, 0.9);
    font: 900 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-name {
    font: 900 10px/1.05 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-level {
    color: rgba(255, 240, 190, 0.76);
    font-size: 8px;
}

.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-terrain-label {
    opacity: 0.9;
}

.orbryn-world-map-screen-label-layer.is-labels-sparse .orbryn-world-map-terrain-label.is-subregion {
    opacity: 0;
    visibility: hidden;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-terrain-name {
    font-size: 15px;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-terrain-level {
    font-size: 10px;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-terrain-label.is-subregion {
    opacity: 0.56;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-name {
    font-size: 10px;
}

.orbryn-world-map-screen-label-layer.is-labels-medium .orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-level {
    display: none;
}

.orbryn-world-map-screen-label-layer.is-labels-full .orbryn-world-map-terrain-name {
    font-size: 17px;
}

.orbryn-world-map-screen-label-layer.is-labels-full .orbryn-world-map-terrain-level {
    font-size: 11px;
}

.orbryn-world-map-screen-label-layer.is-labels-full .orbryn-world-map-terrain-label.is-subregion {
    opacity: 0.88;
}

.orbryn-world-map-screen-label-layer.is-labels-full .orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-name {
    font-size: 12px;
}

.orbryn-world-map-screen-label-layer.is-labels-full .orbryn-world-map-terrain-label.is-subregion .orbryn-world-map-terrain-level {
    display: block;
    font-size: 8px;
}

.orbryn-world-map-dungeon-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(-50%, -50%) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
}

.orbryn-world-map-dungeon-dot {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #9ff0ff;
    border: 2px solid #07141a;
    box-shadow: 0 0 0 2px rgba(159, 240, 255, 0.32), 0 0 9px rgba(159, 240, 255, 0.42);
}

.orbryn-world-map-dungeon-marker.is-rift-training .orbryn-world-map-dungeon-dot {
    background: #b8f5ff;
    box-shadow: 0 0 0 2px rgba(184, 245, 255, 0.32), 0 0 10px rgba(184, 245, 255, 0.46);
}

.orbryn-world-map-dungeon-marker.is-rift-cave .orbryn-world-map-dungeon-dot,
.orbryn-world-map-dungeon-marker.is-void-cave .orbryn-world-map-dungeon-dot {
    background: #ff7c7c;
    box-shadow: 0 0 0 2px rgba(255, 124, 124, 0.34), 0 0 10px rgba(255, 124, 124, 0.46);
}

.orbryn-world-map-dungeon-label {
    display: grid;
    gap: 2px;
    min-width: 64px;
    max-width: 132px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(4, 16, 22, 0.84);
    border: 1px solid rgba(159, 240, 255, 0.5);
    color: #dcfbff;
    letter-spacing: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.orbryn-world-map-dungeon-marker.is-rift-cave .orbryn-world-map-dungeon-label,
.orbryn-world-map-dungeon-marker.is-void-cave .orbryn-world-map-dungeon-label {
    border-color: rgba(255, 124, 124, 0.58);
    color: #ffe0e0;
    background: rgba(24, 6, 8, 0.84);
}

.orbryn-world-map-dungeon-title,
.orbryn-world-map-dungeon-detail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbryn-world-map-dungeon-title {
    font: 900 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.orbryn-world-map-dungeon-detail {
    font: 800 8px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0.88;
}

.orbryn-world-map-dungeon-marker.is-clamped .orbryn-world-map-dungeon-label {
    border-color: rgba(255, 210, 120, 0.72);
    color: #fff1be;
}

.orbryn-world-map-quest-npc-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(calc(-50% + var(--npc-marker-offset-x, 0px)), calc(-50% + var(--npc-marker-offset-y, 0px))) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
}

.orbryn-world-map-quest-npc-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffd66e;
    border: 2px solid #241703;
    box-shadow: 0 0 0 2px rgba(255, 214, 110, 0.32);
}

.orbryn-world-map-quest-npc-label {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(20, 14, 4, 0.84);
    border: 1px solid rgba(255, 214, 110, 0.52);
    color: #fff2c6;
    font: 850 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
}

.orbryn-world-map-quest-npc-marker.is-clamped .orbryn-world-map-quest-npc-label {
    border-color: rgba(255, 210, 120, 0.72);
    color: #fff1be;
}

.orbryn-world-map-close {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(6, 10, 14, 0.92);
    color: #ffffff;
    font: 800 18px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    pointer-events: auto;
}

.orbryn-world-map-close:hover,
.orbryn-world-map-close:focus-visible {
    background: rgba(24, 34, 42, 0.96);
    border-color: rgba(255, 255, 255, 0.62);
    outline: none;
}

.orbryn-world-map-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translate(-50%, -50%) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
    z-index: 8;
}

.orbryn-world-map-marker-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #49ff87;
    border: 2px solid #07120b;
    box-shadow: 0 0 0 2px rgba(73, 255, 135, 0.42);
}

.orbryn-world-map-marker-label {
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(6, 12, 9, 0.82);
    border: 1px solid rgba(73, 255, 135, 0.48);
    color: #effff3;
    font: 800 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

.orbryn-world-map-marker.is-clamped .orbryn-world-map-marker-label {
    border-color: rgba(255, 210, 120, 0.7);
    color: #ffe5a8;
}

.orbryn-world-map-friend-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(-50%, -50%) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
}

.orbryn-world-map-friend-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #62d9ff;
    transform-origin: 50% 60%;
}

.orbryn-world-map-friend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #62d9ff;
    border: 2px solid #07120b;
    box-shadow: 0 0 0 2px rgba(98, 217, 255, 0.38);
}

.orbryn-world-map-friend-label {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(5, 14, 18, 0.86);
    border: 1px solid rgba(98, 217, 255, 0.5);
    color: #e9fbff;
    font: 800 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

.orbryn-world-map-friend-marker.is-clamped .orbryn-world-map-friend-label {
    border-color: rgba(255, 210, 120, 0.72);
    color: #fff1be;
}

.orbryn-world-map-coords {
    margin-top: 8px;
    color: rgba(238, 244, 232, 0.86);
    text-align: center;
    font: 700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
}

.vital-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vital-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

#health-bar-container,
#energy-bar-container,
#hunger-bar-container,
#thirst-bar-container {
    position: relative;
    width: 200px;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

#health-bar,
#energy-bar,
#hunger-bar,
#thirst-bar {
    height: 100%;
    width: 100%;
    transition: width 0.3s ease;
}

#health-bar { background: linear-gradient(90deg, #c03030, #e04040); }

/* Weapon attack-speed bar tucked under the health bar */
#attack-cooldown-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 21px; /* align with the vital bars (icon 16px + 5px gap) */
    margin-top: -2px;
}

#attack-cooldown-bar-container {
    position: relative;
    width: 168px;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

#attack-cooldown-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #b08820, #e8c040);
    transition: width 0.08s linear;
}

#attack-cooldown-row .attack-cooldown-ready #attack-cooldown-bar,
#attack-cooldown-bar.ready {
    background: linear-gradient(90deg, #3aa060, #52d080);
}

#attack-cooldown-duration {
    font-size: 9px;
    line-height: 1;
    min-width: 28px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#energy-bar { background: linear-gradient(90deg, #209040, #30c060); }
#hunger-bar { background: linear-gradient(90deg, #bb6622, #dd8833); }
#thirst-bar { background: linear-gradient(90deg, #2266bb, #3388dd); }

#health-text,
#energy-text,
#hunger-text,
#thirst-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

/* Sheltered indicator (dome safe zone — halved hunger/thirst drain) */
#sheltered-indicator {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(100, 220, 180, 0.85);
    text-shadow: 0 0 6px rgba(100, 220, 180, 0.3);
    padding: 2px 0;
    transition: opacity 0.4s ease;
}

/* Active buff pills (under energy bar) */
#buff-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 200px;
}

.buff-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #000;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid color-mix(in srgb, var(--buff-color, #88aacc) 50%, transparent);
    color: var(--buff-color, #88aacc);
    overflow: hidden;
    animation: buff-fadein 0.3s ease-out;
}

.buff-pill__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: color-mix(in srgb, var(--buff-color, #88aacc) 20%, transparent);
    transition: width 0.25s linear;
    pointer-events: none;
}

.buff-pill__label {
    position: relative;
    z-index: 1;
}

.buff-pill__timer {
    position: relative;
    z-index: 1;
    opacity: 0.8;
    font-size: 8px;
    font-variant-numeric: tabular-nums;
}

/* Flash when buff is about to expire (<10s) */
.buff-pill--low {
    animation: buff-pulse 0.8s ease-in-out infinite;
}

@keyframes buff-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes buff-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── RC Robot HUD ── */
#vehicle-hud {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(68, 170, 204, 0.3);
    border-radius: 4px;
    width: 200px;
}

#vehicle-hud-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hud-accent, #44aacc);
    margin-bottom: 4px;
}

#vehicle-hp-bar-container,
#vehicle-resource-bar-container {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

#vehicle-hp-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #c03030, #e04040);
    transition: width 0.3s ease;
}

#vehicle-resource-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #2080cc, #40aaee);
    transition: width 0.3s ease;
}

#vehicle-hp-text,
#vehicle-resource-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

#vehicle-resource-label {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 7px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

#vehicle-distance-bar-container {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

#vehicle-distance-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #44cc66, #ccaa22, #cc4040);
    transition: width 0.2s ease;
}

#vehicle-distance-label {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 7px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

#vehicle-distance-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

#vehicle-hud-actions {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.vehicle-hud-action {
    flex: 1;
    height: 22px;
    border: 1px solid rgba(68, 170, 204, 0.45);
    border-radius: 4px;
    background: rgba(12, 28, 38, 0.82);
    color: rgba(235, 250, 255, 0.94);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.vehicle-hud-action:hover,
.vehicle-hud-action:focus-visible {
    border-color: rgba(88, 210, 245, 0.9);
    background: rgba(24, 58, 74, 0.94);
    outline: none;
}

.vehicle-hud-action:disabled {
    cursor: default;
    opacity: 0.45;
}

#vehicle-hud-hint {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-top: 2px;
}

/* ── Mobile Vehicle Control Buttons ── */
#vehicle-mobile-controls {
    position: fixed;
    bottom: 100px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 120;
}

body.vehicle-control-active #mobile-controls {
    display: none !important;
    pointer-events: none !important;
}

.vehicle-mobile-btn {
    width: 64px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(68, 170, 204, 0.4);
    border-radius: 6px;
    color: var(--hud-accent, #44aacc);
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.vehicle-mobile-btn:active {
    background: rgba(68, 170, 204, 0.25);
    border-color: rgba(68, 170, 204, 0.7);
}

.vehicle-btn-exit {
    background: rgba(80, 20, 20, 0.6);
    border-color: rgba(204, 68, 68, 0.4);
    color: #cc4444;
    margin-top: 8px;
}

/* ── Hack Sequence Mini-Game ── */
#hack-sequence {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 12, 8, 0.92);
    border: 1px solid rgba(68, 204, 136, 0.5);
    border-radius: 6px;
    padding: 12px 18px;
    min-width: 220px;
    text-align: center;
    z-index: 500;
    box-shadow: 0 0 20px rgba(68, 204, 136, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.3);
    animation: hack-appear 0.2s ease-out;
}

@keyframes hack-appear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#hack-sequence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 1px;
}

#hack-sequence-label {
    color: #44cc88;
    font-weight: bold;
    text-transform: uppercase;
}

#hack-sequence-timer {
    color: #88ddaa;
    font-family: monospace;
    font-size: 12px;
}

#hack-sequence-keys {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
}

.hack-key {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid rgba(100, 120, 140, 0.4);
    background: rgba(20, 30, 40, 0.6);
    color: rgba(150, 170, 190, 0.6);
    transition: all 0.15s ease;
}

.hack-key--active {
    border-color: #44cc88;
    color: #44cc88;
    background: rgba(68, 204, 136, 0.1);
    box-shadow: 0 0 8px rgba(68, 204, 136, 0.3);
    animation: hack-key-pulse 0.8s ease-in-out infinite;
}

@keyframes hack-key-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(68, 204, 136, 0.3); }
    50% { box-shadow: 0 0 14px rgba(68, 204, 136, 0.5); }
}

.hack-key--correct {
    border-color: #44cc88;
    color: #44cc88;
    background: rgba(68, 204, 136, 0.25);
    box-shadow: 0 0 6px rgba(68, 204, 136, 0.4);
}

.hack-key--wrong {
    border-color: #ff4444;
    color: #ff4444;
    background: rgba(255, 68, 68, 0.2);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
    animation: hack-key-shake 0.3s ease;
}

@keyframes hack-key-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.hack-key--mutate {
    border-color: #ff8800;
    color: #ff8800;
    background: rgba(255, 136, 0, 0.25);
    box-shadow: 0 0 12px rgba(255, 136, 0, 0.5);
    transition: all 0.15s ease;
}

#hack-sequence-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 9px;
}

#hack-sequence-combo {
    color: #ffcc44;
    font-weight: bold;
    letter-spacing: 0.5px;
}

#hack-sequence-hint {
    color: rgba(150, 170, 190, 0.5);
    letter-spacing: 0.5px;
}

/* Timer bar under header */
#hack-sequence .hack-timer-bar {
    width: 100%;
    height: 3px;
    background: rgba(68, 204, 136, 0.15);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}

#hack-sequence .hack-timer-fill {
    height: 100%;
    background: #44cc88;
    border-radius: 2px;
    transition: width 0.1s linear;
}

#hack-sequence .hack-timer-fill.hack-timer-low {
    background: #ff6644;
}

.hack-bonus-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(68, 204, 136, 0.3);
    color: var(--accent, #44cc88);
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(68, 204, 136, 0.8);
    border-radius: 6px;
    animation: hack-bonus-flash-anim 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes hack-bonus-flash-anim {
    0%   { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1); }
}

/* Currency Wallet — hidden from HUD (WAGUS/LP removed from in-game view) */
#hud-wallet {
    display: none;
}

.wallet-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono, 'Courier New', monospace);
    letter-spacing: 0.5px;
}

.wallet-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    flex-shrink: 0;
}

.wallet-icon-wagus {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a0a00;
    text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
}

.wallet-icon-legacy {
    background: linear-gradient(135deg, #7b68ee, #4b0082);
    color: #e0d8ff;
    text-shadow: 0 0 2px rgba(123, 104, 238, 0.5);
}

.wallet-label {
    color: rgba(255, 255, 255, 0.6);
    min-width: 48px;
}

.wallet-amount {
    color: #e0e0e0;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#wallet-wagus .wallet-amount {
    color: #ffd700;
}

#wallet-legacy .wallet-amount {
    color: #b8a9ff;
}

/* Ammo display (under energy bar) */
#ammo-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ccddff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    padding-left: 2px;
}

#ammo-current {
    min-width: 14px;
    text-align: right;
}

#ammo-current.empty {
    color: #ff4444;
    text-shadow: 0 0 6px rgba(255, 60, 60, 0.5);
}

#ammo-current.reloading {
    color: #ffaa44;
    animation: ammo-pulse 0.6s infinite alternate;
}

@keyframes ammo-pulse {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

#ammo-separator {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
}

#ammo-total {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

#ammo-total.ammo-low {
    color: #ff8844;
    text-shadow: 0 0 6px rgba(255, 136, 68, 0.4);
}

/* Plasma Charge Bar */
#charge-bar {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 25;
    transition: opacity 0.15s ease;
}
#charge-bar.hidden {
    opacity: 0;
    pointer-events: none;
}
.charge-bar-track {
    width: 120px;
    height: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(80, 160, 255, 0.4);
    border-radius: 4px;
    overflow: hidden;
}
.charge-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #30a0ff, #80d0ff);
    box-shadow: 0 0 8px rgba(48, 160, 255, 0.6);
    border-radius: 4px;
    transition: width 0.1s ease;
}
.charge-bar-label {
    font-size: 14px;
    font-weight: bold;
    color: #80d0ff;
    text-shadow: 0 0 6px rgba(48, 160, 255, 0.5);
    font-family: 'Courier New', monospace;
    min-width: 16px;
    text-align: center;
}

/* ============================================
   SIDE PANEL (OSRS-style tabbed interface)
   ============================================ */
#side-panel {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    z-index: 20;
    font-family: 'Courier New', monospace;
    transition:
        left 180ms ease,
        top 180ms ease,
        right 180ms ease,
        bottom 180ms ease,
        width 180ms ease,
        height 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}

body:not(.game-playing) #side-panel {
    display: none !important;
}

/* ── Panel Drag Handle (Side Panel) ─────────────────────────── */
.sp-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 18px;
    cursor: grab;
    background: linear-gradient(180deg, rgba(14, 10, 32, 0.92), rgba(18, 15, 38, 0.88));
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sp-drag-handle:hover {
    background: linear-gradient(180deg, rgba(24, 18, 48, 0.95), rgba(30, 22, 60, 0.9));
    border-color: rgba(124, 58, 237, 0.32);
}
.sp-drag-grip {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(200, 195, 220, 0.28);
    pointer-events: none;
    transition: color 0.15s ease;
}
.sp-drag-handle:hover .sp-drag-grip {
    color: rgba(167, 139, 250, 0.75);
}

.sp-close-btn {
    position: absolute;
    right: 6px;
    top: 2px;
    width: 16px;
    height: 14px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: rgba(210, 220, 230, 0.55);
    font: 700 10px/1 var(--font-ui, monospace);
    cursor: pointer;
    padding: 0;
}
.sp-close-btn:hover,
.sp-close-btn:focus-visible {
    color: rgba(255, 255, 255, 0.9);
    outline: none;
}

/* ── Chat Drag Grip ─────────────────────────────────────────── */
.chat-drag-grip {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    cursor: grab;
    user-select: none;
    transition: color 0.15s ease;
}
.chat-header {
    cursor: grab;
}
.chat-header:hover .chat-drag-grip {
    color: rgba(255, 255, 255, 0.3);
}

/* ── Panel Dragging State (shared) ──────────────────────────── */
.panel-dragging {
    opacity: 0.92;
    cursor: grabbing !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(80, 140, 255, 0.3);
    transition: none !important;
    z-index: 100 !important;
}
.panel-dragging .sp-drag-handle,
.panel-dragging .chat-header {
    cursor: grabbing !important;
}

/* -- Side Panel Tab Row -------------------------------------------------
   Readable labels with a compact icon rail treatment. */
.sp-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 4px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.sp-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0;
    color: rgba(190, 184, 210, 0.72);
    background:
        linear-gradient(180deg, rgba(20, 18, 32, 0.96), rgba(11, 12, 20, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.08), transparent 58%);
    border: 1px solid rgba(90, 110, 140, 0.26);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    min-width: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}

/* Hover sweep — matches .btn-primary::after on the main menu */
.sp-tab::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(167, 139, 250, 0.1) 50%,
        transparent 100%
    );
    transition: left 500ms ease;
    pointer-events: none;
}

.sp-tab:hover::after,
.sp-tab:focus-visible::after {
    left: 100%;
}

.sp-tab-icon {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(0.58);
    opacity: 0.72;
    transition: filter 150ms ease, transform 150ms ease;
    pointer-events: none;
}

.sp-tab-label {
    max-width: 100%;
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.05;
    pointer-events: none;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sp-tab:hover,
.sp-tab:focus-visible {
    color: rgba(235, 244, 248, 0.95);
    background:
        linear-gradient(180deg, rgba(25, 34, 42, 0.98), rgba(14, 17, 26, 0.94)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.14), transparent 62%);
    border-color: rgba(0, 217, 255, 0.34);
}
.sp-tab:hover .sp-tab-icon,
.sp-tab:focus-visible .sp-tab-icon {
    filter: brightness(0) invert(0.84);
    opacity: 0.95;
    transform: translateY(-1px);
}

.sp-tab:active {
    transform: translateY(1px);
}

/* Active tab: brighter cyan edge so the current panel reads immediately. */
.sp-tab.active {
    color: rgba(244, 252, 255, 0.98);
    background:
        linear-gradient(180deg, rgba(18, 40, 48, 0.98), rgba(9, 17, 26, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.22), transparent 62%);
    border-color: rgba(0, 217, 255, 0.5);
    box-shadow:
        0 -4px 22px rgba(0, 217, 255, 0.14),
        inset 0 1px 0 rgba(155, 240, 255, 0.2);
}
.sp-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.95), transparent);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
}
.sp-tab.active .sp-tab-icon {
    filter: brightness(0) invert(0.9) sepia(1) hue-rotate(140deg) saturate(3);
    opacity: 1;
}

.sp-body {
    background: linear-gradient(180deg, rgba(18, 15, 38, 0.94), rgba(10, 8, 28, 0.96));
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 0 0 12px 12px;
    padding: 16px;
    min-height: 280px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* When side panel has explicit height (from resize), make body fill and scroll */
#side-panel[style*="height"] .sp-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
#side-panel[style*="height"] {
    display: flex;
    flex-direction: column;
}

/* ── Side Panel Resize Handle (desktop only) ─────────────── */
.sp-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    cursor: nwse-resize;
    user-select: none;
    line-height: 1;
    transition: color 0.15s;
    z-index: 2;
}
.sp-resize-handle:hover,
.sp-resize-handle.sp-resizing {
    color: rgba(167, 139, 250, 0.85);
}

/* ── Panel Hidden States (Y / C key toggles) ─────────────── */
#side-panel.sp-hidden {
    display: none !important;
}
#chat-panel.chat-hidden {
    display: none !important;
}

.sp-content {
    display: none;
}

.sp-content.active {
    display: block;
}

/* --- Skill Sections --- */
.skill-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-section {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(80, 120, 200, 0.06);
    border-radius: 6px;
    padding: 6px;
}

.skill-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 6px 6px;
    color: #8899bb;
    border-bottom: 1px solid rgba(80, 120, 200, 0.1);
    margin-bottom: 6px;
    user-select: none;
}

.skill-section-header--combat { color: #dd6655; }
.skill-section-header--trade  { color: #99aa66; }

.skill-section-icon {
    font-size: 13px;
    line-height: 1;
    opacity: 0.7;
}

/* --- Skill Grid --- */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.skill-grid--combat {
    grid-template-columns: repeat(3, 1fr);
}

.skill-grid--trade {
    grid-template-columns: repeat(4, 1fr);
}

.skill-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 4px;
    cursor: default;
    transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .skill-cell:hover {
        background: rgba(40, 60, 120, 0.35);
        border-color: rgba(80, 120, 200, 0.25);
    }
}

.skill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}

.skill-abbr {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.skill-level {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

.skill-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.sp-summary {
    text-align: center;
    margin-top: 8px;
    padding: 8px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #8ac;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid rgba(80, 120, 200, 0.1);
}

.sp-summary .sp-cmb-lv,
.sp-summary .sp-total-lv {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

/* --- Skill Guide Panel --- */
.sg-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 2px 8px;
    font-family: var(--orb-ui-mono, 'Courier New', monospace);
    cursor: default;
}

.sg-back {
    display: inline-block;
    align-self: flex-start;
    min-height: 34px;
    padding: 7px 11px;
    background: rgba(8, 13, 22, 0.72);
    border: 1px solid rgba(115, 155, 220, 0.24);
    border-radius: 4px;
    color: #aebfd8;
    font-family: var(--orb-ui-mono, 'Courier New', monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sg-back:hover {
    background: rgba(54, 94, 135, 0.22);
    border-color: rgba(92, 190, 255, 0.46);
    color: #eff8ff;
}

.sg-header {
    padding: 0;
    margin: 0;
    border-bottom: 0;
}

.sg-hero {
    --sg-skill-color: #7fc6ff;
    padding: 10px;
    border: 1px solid rgba(115, 155, 220, 0.22);
    border-left: 3px solid var(--sg-skill-color);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
        rgba(7, 11, 18, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.sg-hero-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sg-skill-abbr {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--sg-skill-color) 55%, transparent);
    border-radius: 6px;
    color: var(--sg-skill-color);
    background: color-mix(in srgb, var(--sg-skill-color) 13%, rgba(0, 0, 0, 0.6));
    font-size: 13px;
    font-weight: 900;
}

.sg-skill-name {
    color: #edf6ff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.15;
}

.sg-skill-level {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    font-size: 13px;
    color: #8ea4bd;
    letter-spacing: 0;
}

.sg-skill-level span {
    padding: 2px 6px;
    border: 1px solid rgba(115, 155, 220, 0.18);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
}

.sg-xp-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.sg-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sg-skill-color), #f2f8ff);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.sg-xp-card {
    margin-top: 9px;
}

.sg-xp-readout {
    margin-bottom: 4px;
    color: #a9bdd4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sg-next-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 9px;
    padding: 7px;
    border: 1px solid rgba(115, 155, 220, 0.18);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
}

.sg-next-label {
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #071018;
    background: var(--sg-skill-color);
    font-size: 10px;
    font-weight: 900;
}

.sg-next-body {
    min-width: 0;
}

.sg-next-body strong,
.sg-next-body span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-next-body strong {
    color: #edf6ff;
    font-size: 12px;
    line-height: 1.25;
}

.sg-next-body span {
    margin-top: 2px;
    color: #879cb7;
    font-size: 10px;
}

.sg-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.sg-stat-row span {
    padding: 3px 6px;
    border: 1px solid rgba(115, 155, 220, 0.18);
    border-radius: 4px;
    color: #b8c8dd;
    background: rgba(0, 0, 0, 0.18);
    font-size: 10px;
    font-weight: 800;
}

.sg-list {
    max-height: min(430px, calc(100vh - 220px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.sg-level-group {
    margin-bottom: 9px;
    padding: 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(115, 155, 220, 0.1);
}

.sg-level-group.current-level {
    border-color: rgba(92, 190, 255, 0.42);
    background: rgba(22, 42, 70, 0.34);
    box-shadow: 0 0 0 1px rgba(92, 190, 255, 0.08), 0 0 14px rgba(92, 190, 255, 0.08);
}

.sg-level-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(115, 155, 220, 0.12);
    font-size: 11px;
    color: #6f8098;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sg-level-label.unlocked {
    color: #a9bdd4;
}

.sg-level-label strong {
    color: #edf6ff;
    font-size: 14px;
    line-height: 1;
}

.sg-level-label em {
    color: #7d90aa;
    font-size: 10px;
    font-style: normal;
}

.sg-entry {
    --sg-item-glow: rgba(115, 155, 220, 0.35);
    --sg-item-bg: rgba(10, 18, 30, 0.76);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    min-height: 52px;
    border: 1px solid rgba(115, 155, 220, 0.12);
    border-left: 3px solid rgba(115, 155, 220, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.026);
    transition: background 0.15s, border-color 0.15s;
}

.sg-entry:hover {
    background: rgba(72, 111, 166, 0.12);
    border-color: rgba(115, 155, 220, 0.25);
}

.sg-entry + .sg-entry {
    margin-top: 6px;
}

.sg-entry.has-item-color {
    border-left-color: var(--sg-item-glow);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--sg-item-bg) 40%, transparent), transparent 70%),
        rgba(255, 255, 255, 0.026);
}

.sg-level-pill {
    display: grid;
    place-items: center;
    align-self: start;
    min-height: 40px;
    border: 1px solid rgba(115, 155, 220, 0.18);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
}

.sg-level-pill span {
    color: #7f91a8;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.sg-level-pill strong {
    color: #edf6ff;
    font-size: 16px;
    line-height: 1.05;
}

.sg-entry.unlocked .sg-level-pill {
    border-color: rgba(97, 220, 140, 0.3);
    background: rgba(24, 70, 44, 0.22);
}

.sg-entry.locked {
    opacity: 0.72;
}

.sg-entry-info {
    min-width: 0;
}

.sg-entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}

.sg-type,
.sg-status,
.sg-source,
.sg-req-chip {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 2px 6px;
    border: 1px solid rgba(115, 155, 220, 0.28);
    border-radius: 3px;
    color: #9fbce6;
    background: rgba(18, 28, 46, 0.72);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
}

.sg-entry.unlocked .sg-status {
    color: #9dffc1;
    border-color: rgba(76, 204, 136, 0.4);
    background: rgba(20, 64, 42, 0.45);
}

.sg-entry.locked .sg-status {
    color: #d7b07e;
    border-color: rgba(212, 154, 82, 0.28);
    background: rgba(70, 48, 22, 0.34);
}

.sg-source {
    color: #8ea4bd;
    border-color: rgba(115, 155, 220, 0.16);
    background: rgba(0, 0, 0, 0.18);
}

.sg-entry-name {
    color: #e4f0ff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.22;
}

.sg-entry.locked .sg-entry-name {
    color: #8d9aac;
}

.sg-entry.coming-soon .sg-entry-name {
    color: #7f8ea2;
    font-style: italic;
}

.sg-entry-desc {
    margin-top: 3px;
    color: #9aaabd;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.38;
}

.sg-entry.locked .sg-entry-desc {
    color: #657181;
}

.sg-entry.coming-soon .sg-entry-desc {
    color: #687587;
}

.sg-req-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sg-req-chip {
    color: #c8d7ea;
    border-color: rgba(154, 185, 226, 0.2);
    background: rgba(10, 18, 30, 0.62);
}

.sg-entry-req {
    font-size: 9px;
    color: #d7b07e;
    margin-top: 5px;
    letter-spacing: 0;
}

.sg-entry-soon {
    font-size: 9px;
    color: #8c8f76;
    margin-top: 5px;
    letter-spacing: 0;
}

/* --- Skill Tooltip (hover XP details) --- */
.skill-tooltip {
    position: fixed;
    z-index: 60;
    min-width: 160px;
    padding: 10px 12px;
    background: rgba(8, 12, 28, 0.95);
    border: 1px solid rgba(80, 140, 255, 0.3);
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ccc;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.skill-tip-title {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.skill-tip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.5);
}
.skill-tip-row span {
    color: #fff;
    font-weight: bold;
}
.skill-tip-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 6px 0 4px;
    overflow: hidden;
}
.skill-tip-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #60c0ff, #50e080);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.skill-tip-pct {
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

/* --- Section Titles & Info --- */
.sp-section-title {
    font-size: 15px;
    letter-spacing: 3px;
    color: #8ac;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.2);
}

.sp-info-text {
    font-size: 14px;
    color: #99a;
    margin-bottom: 8px;
    line-height: 1.6;
}

.sp-info-sub {
    font-size: 13px;
    color: #556;
}

/* --- Social Tab Badge (notification dot on SOC tab) ---
   Sits on top of the icon/label stack; purple-pink accent to stay on-brand. */
.sp-tab-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 0 3px;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.55);
    animation: social-badge-pulse 2s ease-in-out infinite;
}
@keyframes social-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Guild Tab --- */
.guild-side-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding: 9px 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 209, 102, 0.16);
    border-radius: 6px;
}

.guild-side-empty {
    color: #d8e2f0;
    font-size: 13px;
}

.guild-side-name {
    color: #ffe4a6;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.guild-side-meta,
.guild-side-role {
    color: #8fa8c8;
    font-size: 11px;
}

.guild-side-members {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.guild-side-member {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 4px;
}

.guild-side-member-offline {
    opacity: 0.58;
}

.guild-side-dot {
    color: #50e080;
    font-size: 9px;
    font-weight: 800;
}

.guild-side-member-offline .guild-side-dot {
    color: #667;
}

.guild-side-member-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dfe8f7;
    font-size: 12px;
}

.guild-side-member-role {
    color: #8ac;
    font-size: 10px;
    font-weight: 700;
}

.guild-side-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guild-side-btn {
    width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(80, 120, 200, 0.24);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.42);
    color: #9db7d8;
    font: 700 11px 'Courier New', monospace;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.guild-side-btn:hover,
.guild-side-btn:focus-visible {
    background: rgba(40, 60, 120, 0.4);
    border-color: rgba(80, 120, 200, 0.46);
}

.guild-side-btn-primary {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.34);
}

.guild-side-btn-primary:hover,
.guild-side-btn-primary:focus-visible {
    background: rgba(255, 209, 102, 0.12);
    border-color: rgba(255, 209, 102, 0.56);
}

.guild-side-btn-danger {
    color: #ff7777;
    border-color: rgba(255, 102, 102, 0.3);
}

.guild-side-btn-danger:hover,
.guild-side-btn-danger:focus-visible {
    background: rgba(255, 102, 102, 0.14);
    border-color: rgba(255, 102, 102, 0.52);
}

/* --- Social Tab --- */
.social-section { margin-bottom: 12px; }

.social-add-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.social-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(80, 120, 200, 0.2);
    border-radius: 4px;
    color: #e0e6f0;
    font-family: inherit;
    font-size: 12px;
    padding: 6px 8px;
    outline: none;
}
.social-input:focus {
    border-color: rgba(80, 120, 200, 0.5);
}
.social-input::placeholder {
    color: #556;
}

.social-btn {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 10px;
    border: 1px solid rgba(80, 120, 200, 0.2);
    border-radius: 4px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    color: #8ac;
    letter-spacing: 0.5px;
    transition: background 0.15s, border-color 0.15s;
}
.social-btn:hover {
    background: rgba(40, 60, 120, 0.4);
    border-color: rgba(80, 120, 200, 0.4);
}

.social-btn-add { color: #50e080; border-color: rgba(80, 224, 128, 0.3); }
.social-btn-add:hover { background: rgba(80, 224, 128, 0.15); }

.social-btn-block { color: #ff6666; border-color: rgba(255, 102, 102, 0.3); }
.social-btn-block:hover { background: rgba(255, 102, 102, 0.15); }

.social-btn-accept { color: #50e080; border-color: rgba(80, 224, 128, 0.3); font-size: 10px; }
.social-btn-accept:hover { background: rgba(80, 224, 128, 0.15); }

.social-btn-decline { color: #ff6666; border-color: rgba(255, 102, 102, 0.3); font-size: 10px; }
.social-btn-decline:hover { background: rgba(255, 102, 102, 0.15); }

.social-btn-msg { color: #ff66cc; border-color: rgba(255, 102, 204, 0.3); font-size: 10px; }
.social-btn-msg:hover { background: rgba(255, 102, 204, 0.15); }

.social-btn-remove { color: #ff6666; border-color: rgba(255, 102, 102, 0.2); font-size: 10px; padding: 2px 6px; }
.social-btn-remove:hover { background: rgba(255, 102, 102, 0.15); }

.social-btn-unblock { color: #8ac; font-size: 10px; }
.social-btn-unblock:hover { background: rgba(40, 60, 120, 0.4); }

.social-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.social-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 4px;
}
.social-entry:hover {
    background: rgba(40, 60, 120, 0.25);
    border-color: rgba(80, 120, 200, 0.2);
}

.social-request-entry {
    background: rgba(255, 200, 50, 0.08);
    border-color: rgba(255, 200, 50, 0.2);
}

.social-status-dot {
    font-size: 10px;
    line-height: 1;
}
.social-status-dot.online { color: #44ff44; }
.social-status-dot.offline { color: #556; }

.social-name {
    flex: 1;
    font-size: 12px;
    color: #e0e6f0;
    letter-spacing: 0.5px;
}
.social-name-blocked {
    color: #ff6666;
}

.social-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* --- Combat Styles --- */
.sp-combat-styles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-style {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #778;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.sp-style:hover {
    background: rgba(30, 50, 100, 0.4);
    color: #aac;
}

.sp-style.active {
    border-color: rgba(80, 160, 255, 0.45);
    background: rgba(25, 45, 90, 0.55);
    color: #cdf;
}

.sp-style-name {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 14px;
}

.sp-style-desc {
    color: #667;
    font-size: 12px;
    letter-spacing: 1px;
}

/* --- Equipment Grid --- */
.sp-equipment-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
}

.sp-equip-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.sp-equip-row {
    display: flex;
    gap: 8px;
}

.sp-psionics-rail {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-self: center;
    padding: 4px 0;
}

.sp-equip-slot.sp-psionics-slot {
    width: 56px;
    height: 56px;
    border-color: rgba(86, 246, 255, 0.28);
    background:
        linear-gradient(90deg, rgba(86, 246, 255, 0.14), rgba(8, 16, 32, 0.72)),
        rgba(0, 0, 0, 0.42);
    clip-path: polygon(0 0, 100% 0, 100% 36%, 88% 50%, 100% 64%, 100% 100%, 0 100%);
    border-radius: 6px 2px 2px 6px;
}

.sp-equip-slot.sp-psionics-slot .sp-eslot-label {
    color: rgba(170, 248, 255, 0.84);
}

.sp-equip-slot.sp-psionics-slot .sp-ghost-icon {
    color: rgba(86, 246, 255, 0.28);
}

.sp-equip-slot.sp-psionics-slot.equipped {
    border-color: rgba(86, 246, 255, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(86, 246, 255, 0.16),
        0 0 16px rgba(86, 246, 255, 0.14);
}

.sp-equip-slot {
    --slot-accent-rgb: 80, 120, 200;
    position: relative;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: 1px;
    color: #445;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(80, 120, 200, 0.12);
    border-radius: 8px;
    padding: 0;
    font-family: inherit;
    cursor: default;
    appearance: none;
}

@media (hover: hover) {
    .sp-equip-slot:hover {
        border-color: rgba(80, 120, 200, 0.35);
        background: rgba(20, 40, 80, 0.35);
    }
}

.sp-equip-slot.equipped {
    flex-direction: column;
    gap: 2px;
    border-color: rgba(80, 160, 255, 0.3);
    background: rgba(20, 50, 100, 0.4);
}

.sp-equip-slot.item-accent {
    border-color: rgba(var(--slot-accent-rgb), 0.5);
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.16), rgba(0, 0, 0, 0.18)),
        rgba(10, 18, 34, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(var(--slot-accent-rgb), 0.14),
        0 0 14px rgba(var(--slot-accent-rgb), 0.14);
}

.sp-equip-slot.equipped.item-accent {
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.2), rgba(0, 0, 0, 0.16)),
        rgba(14, 24, 46, 0.82);
}

.sp-eslot-label {
    font-size: 9px;
    color: #556;
    letter-spacing: 1px;
}

.sp-eslot-icon {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

.sp-eslot-name {
    font-size: 8px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}

/* --- Equipment Durability Bar --- */
.sp-dur-bar {
    position: absolute;
    bottom: 2px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1px;
    overflow: hidden;
}
.sp-dur-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* --- Equipment Slot: Ghost Icons --- */
.sp-equip-slot.empty {
    flex-direction: column;
    gap: 4px;
    border-style: dashed;
}

.sp-ghost-icon {
    font-size: 22px;
    color: rgba(80, 120, 200, 0.15);
    line-height: 1;
}

.sp-equip-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(48, 160, 255, 0.3));
}

/* --- Equipment Ammo Slot --- */
.sp-equip-slot[data-eslot="ammo"] .sp-ammo-count {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sp-ammo-loaded { color: #80ff80; }
.sp-ammo-low    { color: #ffcc44; }
.sp-ammo-empty  { color: #ff6060; }
.sp-ammo-energy { color: #44ddff; }
.sp-ammo-sep    { color: #556; font-size: 9px; }
.sp-ammo-reserve { color: #889; font-size: 9px; }

/* --- Equipment Stat Summary --- */
.sp-equip-summary {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-radius: 5px;
    text-align: center;
}

.sp-esum-label {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(136, 170, 204, 0.6);
    margin-bottom: 6px;
}

.sp-esum-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.sp-esum-stat {
    font-size: 12px;
    color: #556;
    letter-spacing: 1px;
}

.sp-esum-atk,
.sp-esum-def,
.sp-esum-hp {
    color: #cdf;
    font-weight: bold;
}

/* --- Combat Tab: Weapon Display --- */
.sp-weapon-display {
    margin-top: 4px;
}

.sp-weapon-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(80, 120, 200, 0.12);
    border-radius: 6px;
}

.sp-weapon-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.15);
    border-radius: 6px;
}

.sp-weapon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(48, 160, 255, 0.3));
}

.sp-weapon-abbr {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

.sp-weapon-info {
    flex: 1;
    min-width: 0;
}

.sp-weapon-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.sp-weapon-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.sp-weapon-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.sp-wstat-label {
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.sp-wstat-value {
    color: #cdf;
    font-weight: bold;
}

.sp-weapon-unarmed {
    border-style: dashed;
    border-color: rgba(80, 120, 200, 0.08);
}

.sp-weapon-unarmed-name {
    color: #556 !important;
}

/* --- Equipment Tooltip --- */
.sp-equip-tooltip {
    position: fixed;
    z-index: 60;
    min-width: 150px;
    padding: 10px 12px;
    background: rgba(8, 12, 28, 0.95);
    border: 1px solid rgba(80, 140, 255, 0.3);
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ccc;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.sp-etip-name {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.sp-etip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.5);
}

.sp-etip-row span {
    color: #fff;
    font-weight: bold;
}

.sp-etip-action {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(80, 120, 200, 0.2);
    font-size: 10px;
    color: rgba(80, 200, 160, 0.7);
    letter-spacing: 1px;
    text-align: center;
}

.sp-equip-picker {
    position: fixed;
    z-index: 95;
    width: 288px;
    max-width: calc(100vw - 24px);
    max-height: min(420px, calc(100dvh - 48px));
    transform: translate(-50%, -100%);
    display: grid;
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    background: rgba(6, 14, 30, 0.97);
    border: 1px solid rgba(80, 140, 255, 0.38);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    font-family: 'Courier New', monospace;
}

.sp-equip-picker-title {
    padding: 2px 2px 7px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.24);
    color: rgba(200, 225, 255, 0.84);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}

.sp-equip-picker-item,
.sp-equip-picker-unequip {
    min-height: 44px;
    display: grid;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-radius: 6px;
    font-family: inherit;
    cursor: pointer;
}

.sp-equip-picker-item {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 6px 8px;
    background: rgba(20, 46, 86, 0.72);
    border: 1px solid rgba(80, 140, 220, 0.32);
    color: rgba(212, 232, 255, 0.92);
    text-align: left;
}

.sp-equip-picker-item:hover,
.sp-equip-picker-item:focus-visible {
    background: rgba(36, 76, 140, 0.82);
    border-color: rgba(100, 180, 255, 0.62);
    outline: none;
}

.sp-equip-picker-img,
.sp-equip-picker-abbr {
    width: 34px;
    height: 34px;
    display: flex;
    align-self: start;
    align-items: center;
    justify-content: center;
}

.sp-equip-picker-img {
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(48, 160, 255, 0.28));
}

.sp-equip-picker-abbr {
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 6px currentColor;
}

.sp-equip-picker-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-equip-picker-label {
    min-width: 0;
    overflow: hidden;
    color: rgba(220, 235, 255, 0.95);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-equip-picker-meta {
    min-width: 0;
    overflow: hidden;
    color: rgba(144, 170, 205, 0.8);
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-equip-picker-item--psionic {
    min-height: 92px;
    align-items: start;
    padding: 8px;
    background:
        linear-gradient(90deg, rgba(52, 246, 255, 0.16), transparent 46%),
        rgba(9, 22, 42, 0.94);
    border-color: rgba(92, 219, 255, 0.42);
    box-shadow:
        inset 3px 0 0 var(--psi-accent, #56f6ff),
        inset 0 0 18px rgba(72, 156, 255, 0.12);
}

.sp-equip-picker-item--psionic:hover,
.sp-equip-picker-item--psionic:focus-visible {
    background:
        linear-gradient(90deg, rgba(92, 246, 255, 0.24), transparent 52%),
        rgba(18, 42, 76, 0.96);
    border-color: rgba(128, 238, 255, 0.68);
}

.sp-equip-picker-item--psionic .sp-equip-picker-img,
.sp-equip-picker-item--psionic .sp-equip-picker-abbr {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 7px var(--psi-accent, #56f6ff));
}

.sp-equip-picker-detail {
    min-width: 0;
    overflow: hidden;
    color: rgba(155, 232, 255, 0.92);
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.sp-equip-picker-desc {
    color: rgba(206, 220, 242, 0.86);
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.25;
    white-space: normal;
}

.sp-equip-picker-cost {
    color: rgba(255, 215, 123, 0.92);
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: normal;
}

.sp-equip-picker-empty {
    padding: 12px 8px;
    color: rgba(140, 160, 190, 0.8);
    font-size: 11px;
    letter-spacing: 0;
    text-align: center;
}

.sp-equip-picker-unequip {
    padding: 9px 10px;
    background: rgba(88, 30, 30, 0.58);
    border: 1px solid rgba(210, 80, 80, 0.34);
    color: rgba(255, 178, 178, 0.94);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

.sp-equip-picker-unequip:hover,
.sp-equip-picker-unequip:focus-visible {
    background: rgba(132, 42, 42, 0.78);
    border-color: rgba(255, 110, 110, 0.62);
    outline: none;
}

/* --- Item Tooltip (hotbar + inventory hover) --- */
.item-tooltip {
    position: fixed;
    z-index: 70;
    min-width: 140px;
    max-width: 220px;
    padding: 8px 10px;
    background: rgba(8, 12, 28, 0.95);
    border: 1px solid rgba(80, 140, 255, 0.3);
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ccc;
    pointer-events: none;
    transform: translate(-50%, -100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    white-space: normal;
    word-wrap: break-word;
}

.itip-name {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.itip-type {
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(160, 200, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.itip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.itip-row span {
    color: #fff;
    font-weight: bold;
}

.itip-effect {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(80, 120, 200, 0.15);
    color: rgba(80, 220, 160, 0.8);
    font-size: 10px;
}

.itip-sell {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(80, 120, 200, 0.15);
    color: rgba(255, 200, 80, 0.8);
    font-size: 10px;
    text-align: right;
}

/* Toggle button — hidden on desktop, shown on mobile */
.sp-toggle {
    display: none;
}

/* Smaller desktops */
@media (max-width: 1400px) and (pointer: fine) {
    #side-panel {
        width: 320px;
    }

    .sp-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3px;
    }

    .sp-tab {
        min-height: 42px;
        padding: 6px 3px;
        gap: 3px;
        border: 1px solid rgba(90, 110, 140, 0.26);
        border-radius: 8px;
    }
    .sp-tab-icon {
        width: 16px;
        height: 16px;
    }
    .sp-tab-label {
        font-size: 8px;
        letter-spacing: 0;
    }

    .sp-body {
        padding: 8px;
        min-height: 200px;
    }

    .skill-sections { gap: 8px; }
    .skill-section { padding: 5px; }
    .skill-section-header { font-size: 9px; padding: 3px 5px 5px; margin-bottom: 5px; }

    .skill-cell {
        padding: 5px 5px;
        gap: 2px;
    }

    .skill-abbr {
        font-size: 10px;
    }

    .skill-level {
        font-size: 12px;
    }

    .skill-bar {
        height: 3px;
    }

    .sp-equip-slot {
        width: 56px;
        height: 56px;
        font-size: 10px;
    }

    .sp-section-title {
        font-size: 12px;
    }

    .sp-summary {
        font-size: 11px;
        margin-top: 6px;
        padding: 6px;
    }

    .sp-summary .sp-cmb-lv,
    .sp-summary .sp-total-lv {
        font-size: 14px;
    }

    /* Weapon display responsive */
    .sp-weapon-card { gap: 10px; padding: 8px 10px; }
    .sp-weapon-icon { width: 36px; height: 36px; }
    .sp-weapon-img { width: 28px; height: 28px; }
    .sp-weapon-abbr { font-size: 14px; }
    .sp-weapon-name { font-size: 11px; margin-bottom: 4px; }
    .sp-weapon-stat { font-size: 10px; }
    .sp-ghost-icon { font-size: 18px; }
    .sp-equip-img { width: 34px; height: 34px; }
    .sp-esum-stat { font-size: 10px; }

    /* Codex responsive */
    .dex-subtab { font-size: 9px; padding: 5px 0; letter-spacing: 1px; }
    .dex-card-name { font-size: 11px; }
    .dex-card-desc { font-size: 10px; }
    .dex-stat-label { font-size: 8px; }
    .dex-stat-value { font-size: 10px; }
    .dex-section { max-height: 200px; }
}

/* --- Ability Bar (hidden — controls shown in pause menu) --- */
.ability-bar {
    display: none;
}

/* --- Hotbar (bottom-center) --- */
#hotbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

/* B10: Mobile swipe tooltip — positioned above hotbar, fades out */
.hotbar-swipe-hint {
    position: absolute;
    bottom: 126px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 15, 30, 0.8);
    color: rgba(200, 220, 255, 0.85);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(100, 140, 200, 0.3);
    white-space: nowrap;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 100;
}
.hotbar-swipe-hint--hidden {
    opacity: 0;
    pointer-events: none;
}

.hotbar-slot {
    --slot-accent-rgb: 100, 140, 200;
    width: 84px;
    height: 84px;
    background: rgba(10, 15, 30, 0.75);
    border: 1px solid rgba(100, 140, 200, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 24px;
    touch-action: none;
}

.hotbar-slot.item-accent {
    border-color: rgba(var(--slot-accent-rgb), 0.55);
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.18), rgba(4, 8, 20, 0.2)),
        rgba(8, 14, 28, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(var(--slot-accent-rgb), 0.12),
        0 0 12px rgba(var(--slot-accent-rgb), 0.12);
}


.hotbar-key {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

/* --- Hotbar Slot Content (items/currency) --- */
.slot-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.slot-orb-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(32, 128, 255, 0.5));
}

.slot-count {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(32, 128, 255, 0.4);
    line-height: 1;
}

.slot-resource-img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

.slot-label {
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor, 0 1px 3px #000;
    line-height: 1;
    letter-spacing: 0.08em;
}

/* --- Item Channel Cooldown Overlay (radial sweep) --- */
.slot-channel-overlay {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    pointer-events: none;
    z-index: 5;
    background: conic-gradient(
        rgba(0, 0, 0, 0.65) var(--channel-pct, 100%),
        transparent var(--channel-pct, 100%)
    );
    transition: opacity 0.15s;
}
.slot-channel-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 2px solid rgba(100, 200, 255, 0.5);
    animation: channelPulse 1s ease-in-out infinite;
}
@keyframes channelPulse {
    0%, 100% { border-color: rgba(100, 200, 255, 0.3); }
    50% { border-color: rgba(100, 200, 255, 0.7); }
}

/* --- Inventory Button (6th hotbar slot) --- */
.hotbar-inv-btn {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hotbar-inv-btn.inv-open {
    border-color: rgba(100, 200, 180, 0.6);
    box-shadow: 0 0 8px rgba(100, 200, 180, 0.3);
    background: rgba(15, 35, 50, 0.8);
}
@media (hover: hover) {
    .hotbar-inv-btn:hover {
        border-color: rgba(100, 200, 180, 0.6);
        box-shadow: 0 0 8px rgba(100, 200, 180, 0.3);
        background: rgba(15, 35, 50, 0.8);
    }
}
.hotbar-inv-icon {
    width: 48px;
    height: 48px;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(160, 120, 60, 0.4));
}

.hotbar-psionic-mode .hotbar-slot {
    background:
        radial-gradient(circle at 50% 40%, rgba(86, 246, 255, 0.12), transparent 62%),
        rgba(8, 14, 30, 0.86);
    border-color: rgba(120, 210, 255, 0.4);
    box-shadow: inset 0 0 0 1px rgba(120, 210, 255, 0.1);
}

.psionic-slot-content {
    border: 0;
    background: transparent;
    color: #d9fbff;
    font-family: 'Courier New', monospace;
    cursor: pointer;
}

.psionic-slot-content:disabled {
    cursor: default;
    opacity: 0.58;
}

.psi-slot-icon-wrap {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(var(--slot-accent-rgb, 86, 246, 255), 0.12);
    color: #d9fbff;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 0 8px currentColor;
}

.psi-slot-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(var(--slot-accent-rgb, 86, 246, 255), 0.55));
}

.psi-slot-meta {
    position: absolute;
    left: 6px;
    bottom: 5px;
    max-width: 48px;
    overflow: hidden;
    color: rgba(220, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psi-use-count {
    position: absolute;
    right: 5px;
    bottom: 4px;
    min-width: 20px;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(5, 10, 20, 0.88);
    border: 1px solid rgba(var(--slot-accent-rgb, 86, 246, 255), 0.52);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 8px rgba(var(--slot-accent-rgb, 86, 246, 255), 0.2);
}

.psi-use-count-passive {
    min-width: 26px;
    color: #b8ffcf;
}

.psi-cooldown-count {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-shadow: 0 1px 3px #000;
}

.psionic-slot-empty {
    color: rgba(180, 220, 255, 0.35);
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 800;
}

.hotbar-return-symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(130, 230, 255, 0.45);
    color: #d9fbff;
    font-family: 'Courier New', monospace;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 8px rgba(86, 246, 255, 0.65);
}

.hotbar-return-symbol[hidden] {
    display: none !important;
}

.hotbar-return-btn {
    border-color: rgba(130, 230, 255, 0.62);
    background: rgba(8, 24, 42, 0.9);
    box-shadow: 0 0 12px rgba(86, 246, 255, 0.18);
}

.hotbar-return-btn .hotbar-inv-icon {
    display: none !important;
    visibility: hidden;
}

.hotbar-return-btn .hotbar-return-symbol {
    display: grid !important;
}

/* --- Inventory Panel --- */
.inventory-panel {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 16px 16px;
    background: rgba(6, 14, 30, 0.94);
    border: 1px solid rgba(80, 120, 200, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    z-index: 28;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    min-width: 370px;
    min-height: 340px;
}
/* When inventory has explicit size from resize, make grid fill and overflow */
.inventory-panel[style*="height"] {
    display: flex;
    flex-direction: column;
}
.inventory-panel[style*="height"] .inv-grid {
    flex: 1;
    overflow-y: auto;
    align-content: start;
}
.inventory-panel .panel-title {
    text-align: center;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(160, 200, 255, 0.7);
    margin-bottom: 8px;
}
.inv-equipped-ammo-strip {
    --ammo-accent: #ccbb88;
    min-height: 34px;
    margin: -2px 0 8px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--ammo-accent) 45%, rgba(80, 120, 200, 0.25));
    border-radius: 6px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ammo-accent) 14%, transparent), rgba(0, 0, 0, 0.08)),
        rgba(4, 10, 22, 0.74);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.inv-equipped-ammo-strip[hidden] {
    display: none;
}
.inv-equipped-ammo-strip img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
    flex: 0 0 auto;
}
.inv-equipped-ammo-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(190, 215, 255, 0.55);
}
.inv-equipped-ammo-name {
    color: rgba(225, 235, 255, 0.86);
    font-size: 11px;
    text-transform: uppercase;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-equipped-ammo-count {
    color: var(--ammo-accent);
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}
.inv-reward-inbox {
    min-height: 48px;
    margin: -1px 0 9px;
    padding: 8px;
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(80px, 1.2fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(72, 219, 212, 0.48);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(19, 63, 70, 0.76), rgba(8, 13, 24, 0.86)),
        rgba(3, 8, 16, 0.86);
    box-shadow: inset 0 0 0 1px rgba(180, 255, 245, 0.04), 0 0 18px rgba(72, 219, 212, 0.1);
}
.inv-reward-inbox[hidden] {
    display: none;
}
.inv-reward-inbox-title {
    color: #72f4ea;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}
.inv-reward-inbox-detail {
    color: rgba(224, 238, 246, 0.76);
    font-size: 10px;
    line-height: 1.25;
    margin-top: 2px;
}
.inv-reward-inbox-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}
.inv-reward-inbox-chip {
    max-width: 112px;
    padding: 3px 5px;
    border: 1px solid rgba(128, 234, 224, 0.24);
    border-radius: 4px;
    color: rgba(229, 249, 246, 0.86);
    background: rgba(0, 0, 0, 0.26);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-reward-inbox-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.inv-reward-inbox-claim {
    min-width: 58px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(87, 235, 222, 0.72);
    border-radius: 4px;
    color: #031014;
    background: #79f4e6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(72, 219, 212, 0.24);
}
.inv-reward-inbox-claim:hover {
    background: #b2fff6;
}
.inv-reward-inbox-claim-bank {
    color: #dffefa;
    background: rgba(13, 38, 47, 0.88);
}
.inv-reward-inbox-claim-bank:hover {
    background: rgba(32, 76, 88, 0.94);
}
.inv-grid {
    display: grid;
    grid-template-columns: repeat(5, 64px);
    gap: 5px;
}
.inv-slot {
    --slot-accent-rgb: 80, 120, 200;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-radius: 6px;
    cursor: default;
}
.inv-slot.has-item {
    cursor: grab;
    border-color: rgba(80, 120, 200, 0.25);
    touch-action: none;
}

.inv-slot.item-accent {
    border-color: rgba(var(--slot-accent-rgb), 0.45);
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.14), rgba(0, 0, 0, 0.1)),
        rgba(8, 14, 28, 0.58);
    box-shadow: inset 0 0 0 1px rgba(var(--slot-accent-rgb), 0.1);
}

.inv-slot.hotbar-linked {
    cursor: default;
    border-style: dashed;
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.06), rgba(0, 0, 0, 0.03)),
        rgba(6, 10, 20, 0.42);
}

.inv-slot.hotbar-linked .inv-hotbar-reserve {
    position: absolute;
    right: 4px;
    bottom: 3px;
    min-width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(var(--slot-accent-rgb), 0.2);
    background: rgba(8, 14, 28, 0.72);
    color: rgba(220, 232, 255, 0.7);
    font-size: 8px;
    font-weight: 700;
    pointer-events: none;
}
@media (hover: hover) {
    .inv-slot.has-item:hover {
        border-color: rgba(120, 180, 255, 0.5);
        background: rgba(20, 40, 80, 0.4);
    }
}
/* Touch long-press highlight (applied via JS) */
.inv-slot.has-item.touch-tooltip-active {
    border-color: rgba(120, 180, 255, 0.5);
    background: rgba(20, 40, 80, 0.4);
}
/* Consume/use animation — brief flash + shrink on hotbar and inventory slots */
.hotbar-slot.slot-consumed,
.inv-slot.slot-consumed {
    animation: slotConsumed 0.35s ease-out;
}
@keyframes slotConsumed {
    0%   { transform: scale(1);   filter: brightness(1);   }
    30%  { transform: scale(0.8); filter: brightness(1.8);  }
    100% { transform: scale(1);   filter: brightness(1);    }
}
.inv-slot img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}
.inv-slot .inv-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    line-height: 1;
    pointer-events: none;
}
.inv-slot .inv-mod-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 8px;
    color: #ffcc44;
    text-shadow: 0 0 4px rgba(255, 204, 68, 0.6);
    pointer-events: none;
    line-height: 1;
}
.inv-slot .inv-label {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 7px;
    color: rgba(200, 220, 255, 0.6);
    text-transform: uppercase;
    pointer-events: none;
}

/* --- Inventory Drag Handle --- */
.inv-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    cursor: grab;
    background: rgba(10, 15, 30, 0.7);
    border: 1px solid rgba(80, 120, 200, 0.12);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    user-select: none;
    margin: -12px -16px 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.inv-drag-handle:hover {
    background: rgba(20, 30, 60, 0.85);
    border-color: rgba(80, 120, 200, 0.25);
}
.inv-drag-grip {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    transition: color 0.15s ease;
}
.inv-drag-handle:hover .inv-drag-grip {
    color: rgba(255, 255, 255, 0.35);
}

/* --- Inventory Resize Handle --- */
.inv-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    cursor: nwse-resize;
    user-select: none;
    line-height: 1;
    transition: color 0.15s;
    z-index: 2;
}
.inv-resize-handle:hover,
.inv-resize-handle.inv-resizing {
    color: rgba(100, 160, 255, 0.7);
}

/* --- Inventory Icon (no-image items) --- */
.inv-icon-text {
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 0 0 6px currentColor;
}

/* --- Item Context Menu --- */
.item-context-menu {
    position: fixed;
    z-index: 50;
    transform: translate(-50%, -110%);
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(80, 120, 200, 0.4);
    border-radius: 8px;
    padding: 6px;
    font-family: 'Courier New', monospace;
    backdrop-filter: blur(8px);
    min-width: 100px;
    pointer-events: auto;
}
.ctx-menu-title {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.2);
}
.ctx-menu-btn {
    display: block;
    width: 100%;
    padding: 6px 10px;
    margin: 2px 0;
    background: rgba(30, 60, 120, 0.5);
    border: 1px solid rgba(80, 140, 220, 0.3);
    border-radius: 4px;
    color: rgba(180, 210, 255, 0.9);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.ctx-menu-btn:hover {
    background: rgba(40, 80, 160, 0.7);
    border-color: rgba(100, 180, 255, 0.6);
}
.ctx-menu-btn-drop {
    background: rgba(100, 30, 30, 0.5);
    border-color: rgba(200, 80, 80, 0.3);
    color: rgba(255, 160, 160, 0.9);
}
.ctx-menu-btn-drop:hover {
    background: rgba(140, 40, 40, 0.7);
    border-color: rgba(255, 100, 100, 0.6);
}

/* --- Split Dialog --- */
.split-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
.split-dialog {
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(80, 120, 200, 0.4);
    border-radius: 10px;
    padding: 14px 18px;
    font-family: 'Courier New', monospace;
    backdrop-filter: blur(10px);
    min-width: 200px;
    max-width: 280px;
    text-align: center;
}
.split-dialog-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.2);
}
.split-dialog-count {
    font-size: 13px;
    color: rgba(180, 210, 255, 0.9);
    margin-bottom: 8px;
}
.split-dialog-slider {
    width: 100%;
    margin: 6px 0;
    accent-color: rgba(80, 140, 220, 0.8);
    cursor: pointer;
    height: 28px; /* larger touch target for mobile */
}
.split-dialog-input {
    width: 60px;
    padding: 4px 6px;
    margin: 4px auto 10px;
    display: block;
    background: rgba(20, 40, 80, 0.6);
    border: 1px solid rgba(80, 140, 220, 0.3);
    border-radius: 4px;
    color: rgba(200, 220, 255, 0.95);
    font-family: inherit;
    font-size: 13px;
    text-align: center;
}
.split-dialog-input:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.6);
}
.split-dialog-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.split-dialog-btns .ctx-menu-btn {
    flex: 1;
    min-width: 0;
}

/* --- Drag Ghost --- */
.drag-ghost {
    position: fixed;
    width: 56px;
    height: 56px;
    pointer-events: none;
    z-index: 100;
    opacity: 0.85;
    transform: translate(-50%, -50%);
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(100, 180, 255, 0.5);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drag-ghost img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* --- Wheel-Scroll Selected Highlight --- */
.hotbar-slot.hotbar-wheel-selected {
    border-color: rgba(100, 200, 255, 0.6);
    box-shadow: 0 0 10px rgba(100, 200, 255, 0.35);
}

/* --- Drag-Over Highlight --- */
.hotbar-slot.drag-over,
.inv-slot.drag-over,
.sp-equip-slot.drag-over {
    border-color: rgba(100, 255, 180, 0.7);
    box-shadow: 0 0 12px rgba(100, 255, 180, 0.4);
    background: rgba(20, 60, 50, 0.75);
    transition: border-color 0.1s, box-shadow 0.1s, background 0.1s;
}

/* Bank drag-over: highlight bank grid / inv-grid / panel when dragging items over */
.drag-over-bank {
    outline: 2px solid rgba(100, 255, 180, 0.5);
    outline-offset: -2px;
    box-shadow: inset 0 0 20px rgba(100, 255, 180, 0.08);
    border-radius: 4px;
    transition: outline 0.1s, box-shadow 0.1s;
}

/* --- Interaction Prompt (world-space, projected above player) --- */
.interact-prompt {
    display: none;
    position: absolute;
    transform: translate(-50%, -100%);
    padding: 8px 20px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #60e0ff;
    background: rgba(8, 20, 40, 0.85);
    border: 1px solid rgba(64, 200, 255, 0.4);
    border-radius: 6px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 22;
    text-shadow: 0 0 8px rgba(64, 200, 255, 0.5);
    white-space: nowrap;
}

/* --- Out-of-range dimmed state for interaction prompts --- */
.interact-prompt--out-of-range {
    opacity: 0.4;
    filter: grayscale(0.6);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.interact-prompt--key-only {
    cursor: default;
}

/* --- Trade Prompt (above nearby players) --- */
.trade-prompt {
    color: #ffd740;
    border-color: rgba(255, 215, 64, 0.4);
    text-shadow: 0 0 8px rgba(255, 215, 64, 0.5);
}

/* --- Gathering Status (OSRS-style auto-gather feedback) --- */
.gathering-status {
    display: none;
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #a0e0a0;
    background: rgba(8, 20, 40, 0.8);
    border: 1px solid rgba(100, 220, 100, 0.3);
    border-radius: 6px;
    pointer-events: none;
    z-index: 22;
    text-shadow: 0 0 8px rgba(100, 220, 100, 0.4);
    animation: gather-pulse 1.5s ease-in-out infinite;
}

@keyframes gather-pulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* --- Equip Requirement Callout (visible equip-failure feedback) --- */
.equip-blocked-callout {
    display: none;
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-align: center;
    color: var(--privy-color-error, #ff5e7a);
    background: rgba(24, 8, 13, 0.88);
    border: 1px solid var(--privy-color-error, #ff5e7a);
    border-radius: 6px;
    pointer-events: none;
    z-index: 23;
    max-width: min(86vw, 420px);
    text-shadow: 0 0 8px rgba(255, 94, 122, 0.35);
}
.equip-blocked-callout .ebc-title {
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.equip-blocked-callout .ebc-req {
    font-size: 12px;
    color: #ffd2da;
}
.equip-blocked-callout .ebc-have {
    color: var(--privy-color-foreground-3, #8a8e96);
}
.equip-blocked-callout.ebc-pop {
    animation: ebc-pop 0.18s ease-out;
}
@keyframes ebc-pop {
    from { transform: translateX(-50%) scale(0.92); opacity: 0.4; }
    to { transform: translateX(-50%) scale(1); opacity: 1; }
}
@media (max-width: 600px), (pointer: coarse) {
    .equip-blocked-callout {
        bottom: 178px;   /* clears the 160px-tall mobile joystick band */
        font-size: 12px;
        padding: 7px 14px;
    }
}

/* --- Lockpick Channel Bar --- */
.lockpick-channel-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 23;
    gap: 6px;
    width: min(320px, calc(100vw - 28px));
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(14, 17, 24, 0.92), rgba(8, 10, 16, 0.88));
    border: 1px solid rgba(224, 200, 96, 0.38);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lockpick-channel-label {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    color: var(--hud-text, #e0c860);
    text-shadow: 0 0 8px rgba(224, 200, 96, 0.5);
    text-transform: uppercase;
}
.lockpick-channel-detail {
    max-width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0;
    color: rgba(238, 231, 203, 0.82);
    text-align: center;
    overflow-wrap: anywhere;
}
.lockpick-channel-track {
    width: 100%;
    height: 9px;
    background: rgba(8, 20, 40, 0.85);
    border: 1px solid rgba(224, 200, 96, 0.3);
    border-radius: 999px;
    overflow: hidden;
}
.lockpick-channel-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #d99f35, #f6df7f, #76d9ff);
    border-radius: 999px;
    transition: width 0.1s linear;
}

/* --- Resting Overlay (fullscreen sleep state) --- */
.resting-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: rest-fade-in 0.6s ease-out;
}

.resting-close,
.resting-wake {
    pointer-events: auto;
    cursor: pointer;
    font: inherit;
}

.resting-close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 1px solid rgba(64, 200, 255, 0.55);
    border-radius: 6px;
    background: rgba(4, 10, 24, 0.78);
    color: #e0f0ff;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 8px rgba(64, 200, 255, 0.6);
    box-shadow: 0 0 18px rgba(64, 200, 255, 0.16);
}

.resting-close:hover,
.resting-close:focus-visible,
.resting-wake:hover,
.resting-wake:focus-visible {
    border-color: var(--hud-accent, #40c8ff);
    outline: none;
    box-shadow: 0 0 18px rgba(64, 200, 255, 0.35);
}

@keyframes rest-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.resting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.resting-zzz {
    font-family: 'Courier New', monospace;
    font-size: 48px;
    font-weight: bold;
    color: var(--hud-accent, #40c8ff);
    text-shadow: 0 0 20px rgba(64, 200, 255, 0.6);
    letter-spacing: 12px;
    animation: zzz-float 2.5s ease-in-out infinite;
}

@keyframes zzz-float {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-12px); opacity: 1; }
}

.resting-stats {
    display: flex;
    gap: 32px;
}

.resting-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.resting-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(200, 220, 240, 0.6);
}

.resting-value {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: #e0f0ff;
    text-shadow: 0 0 8px rgba(64, 200, 255, 0.4);
}

.resting-wake {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    animation: wake-pulse 2s ease-in-out infinite;
}

@keyframes wake-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.resting-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--hud-accent, #40c8ff);
    border-radius: 6px;
    background: rgba(64, 200, 255, 0.1);
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: var(--hud-accent, #40c8ff);
    text-shadow: 0 0 6px rgba(64, 200, 255, 0.5);
}

.resting-key-label {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(200, 220, 240, 0.7);
}

/* --- Bank Panel (full 100-slot) --- */
.bank-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(64, 200, 255, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
}

.bank-panel-full {
    width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 200, 255, 0.3) transparent;
}

.bank-panel-full::-webkit-scrollbar {
    width: 6px;
}
.bank-panel-full::-webkit-scrollbar-track {
    background: transparent;
}
.bank-panel-full::-webkit-scrollbar-thumb {
    background: rgba(64, 200, 255, 0.3);
    border-radius: 3px;
}

.bank-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #60e0ff;
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(64, 200, 255, 0.4);
}

.bank-orb-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.15);
}

.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid rgba(80, 120, 200, 0.1);
}

.bank-label {
    font-size: 11px;
    color: #88a;
    letter-spacing: 2px;
}

.bank-value {
    font-size: 16px;
    font-weight: bold;
    color: #60a0ff;
    letter-spacing: 1px;
}

.bank-value.bank-safe {
    color: #40e0a0;
}

.bank-value.bank-orbryn-value {
    color: #8ff0ff;
    max-width: 58%;
    overflow-wrap: anywhere;
    text-align: right;
}

.bank-orb-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.bank-amount-label {
    font-size: 11px;
    color: #8ac;
    letter-spacing: 1px;
    white-space: nowrap;
}

.bank-orb-input {
    width: 80px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(100, 180, 255, 0.3);
    border-radius: 4px;
    color: #e0e8ff;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.bank-orb-input::-webkit-outer-spin-button,
.bank-orb-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bank-orb-input:focus {
    border-color: rgba(100, 180, 255, 0.6);
    box-shadow: 0 0 6px rgba(100, 180, 255, 0.15);
}
.bank-orb-input::placeholder {
    color: #667;
    font-style: italic;
}

.bank-quick-amounts {
    display: flex;
    gap: 4px;
}

.btn-bank-quick {
    padding: 3px 8px;
    font-size: 10px;
    font-family: inherit;
    letter-spacing: 1px;
    background: rgba(100, 180, 255, 0.1);
    border: 1px solid rgba(100, 180, 255, 0.25);
    border-radius: 3px;
    color: #8ac;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-bank-quick:hover {
    background: rgba(100, 180, 255, 0.2);
    border-color: rgba(100, 180, 255, 0.4);
}
.btn-bank-quick.active {
    background: rgba(100, 180, 255, 0.25);
    border-color: rgba(100, 180, 255, 0.5);
    color: #cde;
}

.bank-orb-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.bank-section-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #8ac;
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.bank-hint {
    text-align: center;
    font-size: 10px;
    color: #556;
    letter-spacing: 1px;
    margin: 10px 0 12px;
}

/* Bank grid — 10 columns, scrollable */
.bank-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 200, 255, 0.2) transparent;
    padding: 2px;
}

.bank-grid::-webkit-scrollbar {
    width: 4px;
}
.bank-grid::-webkit-scrollbar-thumb {
    background: rgba(64, 200, 255, 0.25);
    border-radius: 2px;
}

.bank-slot {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 4px;
}

.bank-slot.empty {
    opacity: 0.4;
}

.bank-slot.filled {
    cursor: pointer;
    border-color: rgba(80, 120, 200, 0.2);
    transition: all 0.12s;
    touch-action: pan-y;
}

.bank-slot.filled:hover {
    border-color: rgba(64, 200, 255, 0.5);
    background: rgba(20, 40, 80, 0.5);
    box-shadow: 0 0 6px rgba(64, 200, 255, 0.2);
}

.bank-slot.filled.selected {
    border-color: rgba(64, 224, 255, 0.78);
    background: rgba(35, 80, 120, 0.42);
    box-shadow: 0 0 0 2px rgba(64, 224, 255, 0.18), 0 0 12px rgba(64, 224, 255, 0.24);
}

.bank-slot-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
}

.bank-slot-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.bank-slot-count {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, 0.8);
    line-height: 1;
}

/* Inventory section in bank */
.bank-inv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 48px;
}

.bank-inv-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    padding: 12px;
    text-align: center;
    width: 100%;
}

.btn-bank {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-bank-sm {
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 1px;
}

.btn-bank-xs {
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 1px;
    flex: 0;
}

.btn-deposit, .btn-deposit-all {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
}

.btn-deposit:hover, .btn-deposit-all:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(50, 200, 100, 0.3);
}

.btn-withdraw {
    background: linear-gradient(135deg, #3a5a8a, #2a4a7a);
    color: #cdf;
    border: 1px solid #5080c0;
}

.btn-withdraw:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(80, 128, 200, 0.3);
}

.btn-bank-close {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    color: #778;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-bank-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* --- Grave Loot Panel --- */
.grave-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(15, 8, 8, 0.96);
    border: 1px solid rgba(200, 60, 60, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 60, 60, 0.3) transparent;
}

.grave-panel::-webkit-scrollbar {
    width: 6px;
}
.grave-panel::-webkit-scrollbar-track {
    background: transparent;
}
.grave-panel::-webkit-scrollbar-thumb {
    background: rgba(200, 60, 60, 0.3);
    border-radius: 3px;
}

.grave-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #dd4040;
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(200, 40, 40, 0.4);
}

.grave-orb-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 60, 60, 0.15);
}

.grave-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid rgba(200, 60, 60, 0.1);
}

.grave-label {
    font-size: 11px;
    color: #886;
    letter-spacing: 2px;
}

.grave-value {
    font-size: 16px;
    font-weight: bold;
    color: #dd8844;
    letter-spacing: 1px;
}

.grave-value.grave-yours {
    color: #60a0ff;
}

.grave-section-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #c66;
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.grave-section-label.grave-inv-label {
    color: #8ac;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(200, 60, 60, 0.15);
}

.grave-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 48px;
}

.grave-inv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 48px;
}

.grave-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    padding: 12px;
    text-align: center;
    width: 100%;
}

.grave-hint {
    text-align: center;
    font-size: 10px;
    color: #664;
    letter-spacing: 1px;
    margin: 10px 0 12px;
}

.grave-btn-row {
    display: flex;
    gap: 8px;
}

.btn-grave {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-grave-take-all {
    background: linear-gradient(135deg, #5a2a1a, #8a3a2a);
    color: #fff;
    border: 1px solid #bb5a3a;
}

.btn-grave-take-all:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 80, 50, 0.3);
}

.btn-grave-close {
    background: rgba(255, 255, 255, 0.05);
    color: #778;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-grave-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* Grave items in grid use bank-slot styling (reused _createItemSlot) */
.grave-grid .bank-slot.filled:hover {
    border-color: rgba(200, 80, 60, 0.5);
    background: rgba(80, 20, 20, 0.5);
    box-shadow: 0 0 6px rgba(200, 60, 60, 0.2);
}

/* --- Shop Panel (two-panel layout) --- */
.shop-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-height: 85vh;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(64, 255, 128, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(64, 255, 128, 0.08);
}

.shop-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #40ff80;
    margin-bottom: 6px;
    text-shadow: 0 0 12px rgba(64, 255, 128, 0.4);
}

.shop-balance {
    text-align: center;
    font-size: 13px;
    color: #88a;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(80, 120, 200, 0.1);
}

.shop-orb-count {
    font-size: 20px;
    font-weight: bold;
    color: #60a0ff;
}

.psionic-charge-panel {
    border-color: rgba(86, 246, 255, 0.36);
    box-shadow: 0 0 42px rgba(86, 246, 255, 0.09);
}

.psionic-charge-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 390px;
    overflow-y: auto;
    padding-right: 6px;
}

.psionic-charge-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 64px 118px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(4, 12, 26, 0.72);
    border: 1px solid rgba(86, 246, 255, 0.12);
    border-radius: 7px;
}

.psionic-charge-row.equipped {
    border-color: rgba(120, 255, 190, 0.34);
    background: rgba(10, 28, 34, 0.82);
}

.psionic-charge-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(86, 246, 255, 0.45);
    border-radius: 50%;
    color: #d9fbff;
    font-size: 11px;
    font-weight: 900;
    text-shadow: 0 0 6px currentColor;
}

.psionic-charge-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.psionic-charge-main {
    min-width: 0;
}

.psionic-charge-title {
    overflow: hidden;
    color: #e8ffff;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psionic-charge-meta {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(180, 210, 230, 0.78);
    font-size: 10px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psionic-charge-uses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #ffffff;
    font-weight: 900;
}

.psionic-charge-uses span {
    font-size: 20px;
    line-height: 1;
}

.psionic-charge-uses small {
    color: rgba(180, 210, 230, 0.75);
    font-size: 9px;
    letter-spacing: 1px;
}

.psionic-charge-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 8px;
}

.psionic-charge-btn span {
    font-size: 11px;
}

.psionic-charge-btn strong {
    color: #8eeeff;
    font-size: 10px;
}

.psionic-charge-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.psionic-charge-empty {
    padding: 22px 14px;
    color: rgba(210, 230, 255, 0.7);
    text-align: center;
    border: 1px dashed rgba(120, 180, 255, 0.2);
    border-radius: 7px;
}

/* --- Shop Tabs --- */
.shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.shop-tab {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #556;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.15s;
}

.shop-tab:hover,
.shop-tab:focus-visible {
    color: #aac;
    background: rgba(20, 40, 70, 0.6);
}

.shop-tab.active {
    color: #cdf;
    background: rgba(20, 40, 80, 0.7);
    border-color: rgba(64, 255, 128, 0.35);
}

/* --- Shop Two-Panel Body --- */
.shop-body {
    display: flex;
    gap: 14px;
    min-height: 280px;
    margin-bottom: 14px;
}

/* Left panel: item list */
.shop-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 320px;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 255, 128, 0.2) transparent;
}

.shop-list-panel::-webkit-scrollbar {
    width: 4px;
}
.shop-list-panel::-webkit-scrollbar-thumb {
    background: rgba(64, 255, 128, 0.25);
    border-radius: 2px;
}

.shop-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.shop-item-row:hover {
    border-color: rgba(64, 255, 128, 0.3);
    background: rgba(20, 40, 70, 0.4);
}

.shop-item-row.selected {
    border-color: rgba(64, 255, 128, 0.5);
    background: rgba(20, 50, 40, 0.5);
    box-shadow: 0 0 8px rgba(64, 255, 128, 0.15);
}

.shop-item-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
    flex-shrink: 0;
}

.shop-item-icon-text {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.shop-item-info {
    flex: 1;
    min-width: 0;
}

.shop-item-name {
    font-size: 12px;
    color: #cdf;
    letter-spacing: 1px;
    font-weight: bold;
}

.shop-item-sub {
    font-size: 10px;
    color: #667;
    letter-spacing: 1px;
    margin-top: 2px;
}

.shop-item-qty {
    font-size: 12px;
    color: #88a;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.shop-item-owned {
    flex-shrink: 0;
    padding: 3px 6px;
    border: 1px solid rgba(112, 170, 255, 0.25);
    border-radius: 5px;
    background: rgba(64, 112, 180, 0.16);
    color: #9cc8ff;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.interact-prompt:focus-visible {
    outline: 2px solid rgba(96, 224, 255, 0.8);
    outline-offset: 3px;
}

/* Right panel: detail view */
.shop-detail-panel {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.12);
    border-radius: 8px;
}

.shop-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 12px;
    color: #445;
    letter-spacing: 2px;
    text-align: center;
}

.shop-detail-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(64, 255, 128, 0.3));
    margin-bottom: 14px;
}

.shop-detail-icon-text {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 14px;
}

.shop-detail-name {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #cdf;
    text-align: center;
    margin-bottom: 6px;
}

.shop-detail-desc {
    font-size: 11px;
    color: #88a;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.5;
}

.shop-detail-price {
    font-size: 16px;
    font-weight: bold;
    color: #60a0ff;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.shop-detail-cooldown {
    width: 100%;
    margin: 2px 0 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 210, 90, 0.28);
    border-radius: 6px;
    background: rgba(40, 28, 8, 0.48);
    color: rgba(255, 222, 138, 0.92);
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
}

.shop-detail-owned {
    font-size: 11px;
    color: #667;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.shop-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.bank-selection-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
    gap: 10px;
    align-items: center;
    margin: 8px 0 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(64, 200, 255, 0.18);
    border-radius: 6px;
}

.bank-selection-detail.empty {
    display: block;
    padding: 11px 12px;
}

.bank-selection-empty {
    color: #667;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
}

.bank-selection-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bank-selection-icon {
    width: 42px;
    height: 42px;
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 40, 0.58);
    border: 1px solid rgba(80, 120, 200, 0.18);
    border-radius: 6px;
}

.bank-selection-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
}

.bank-selection-icon span {
    font-size: 11px;
    font-weight: bold;
}

.bank-selection-copy {
    min-width: 0;
}

.bank-selection-name {
    color: #d8f4ff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-selection-meta {
    margin-top: 3px;
    color: #789;
    font-size: 10px;
    letter-spacing: 1px;
}

.bank-selection-controls {
    display: grid;
    grid-template-columns: minmax(68px, 0.9fr) repeat(3, minmax(48px, 0.7fr)) minmax(96px, 1.2fr);
    gap: 5px;
    align-items: stretch;
}

.bank-item-amount {
    min-width: 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(100, 180, 255, 0.3);
    border-radius: 4px;
    color: #e0e8ff;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.bank-item-amount::-webkit-outer-spin-button,
.bank-item-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bank-selected-action {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
}

.shop-qty-control {
    display: grid;
    grid-template-columns: minmax(48px, 0.7fr) minmax(74px, 1fr);
    gap: 6px;
    width: 100%;
}

.shop-qty-input {
    min-width: 0;
    padding: 8px 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    color: #e8f6ff;
    text-align: center;
    background: rgba(8, 20, 40, 0.92);
    border: 1px solid rgba(96, 224, 255, 0.45);
    border-radius: 6px;
}

.shop-empty {
    font-size: 12px;
    color: #556;
    letter-spacing: 1px;
    padding: 30px 20px;
    text-align: center;
}

/* Buy buttons */
.btn-shop {
    width: 100%;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-shop-buy {
    background: linear-gradient(135deg, #1a4a6a, #2a6a9a);
    color: #cdf;
    border: 1px solid #4090c0;
}

.btn-shop-buy:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(64, 160, 255, 0.3);
}

.btn-shop-buy:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.btn-shop-sell {
    background: linear-gradient(135deg, #5a4a1a, #8a7a2a);
    color: #fff;
    border: 1px solid #aa9a3a;
}

.btn-shop-sell:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 180, 60, 0.3);
}

.btn-shop-sell-all {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
}

.btn-shop-sell-all:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(50, 200, 100, 0.3);
}

/* --- Quest Dialog Panel (sequential) --- */
.dialog-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: min(78vh, 640px);
    overflow-y: auto;
    padding: 24px;
    background: rgba(6, 14, 30, 0.95);
    border: 1px solid rgba(255, 200, 64, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    z-index: 2147483000;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
}

.dialog-panel-root {
    display: block;
    visibility: visible;
    opacity: 1;
}

.dialog-title {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ffcc40;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(255, 200, 64, 0.4);
}

.dialog-body {
    min-height: 48px;
}

.dialog-line {
    font-size: 12px;
    color: #ccd;
    line-height: 1.7;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border-left: 2px solid rgba(255, 200, 64, 0.3);
}

/* Continue / Close button */
.dialog-continue {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px 0;
    background: rgba(255, 200, 64, 0.1);
    border: 1px solid rgba(255, 200, 64, 0.3);
    border-radius: 6px;
    color: #ffcc40;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dialog-continue:hover,
.dialog-continue:focus-visible {
    background: rgba(255, 200, 64, 0.2);
    border-color: rgba(255, 200, 64, 0.5);
}

.dialog-continue-hint {
    font-size: 10px;
    color: rgba(255, 200, 64, 0.4);
    font-weight: normal;
    letter-spacing: 1px;
}

/* TTS Opt-in Banner */
.dialog-tts-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--panel-bg, rgba(0, 0, 0, 0.7));
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
}

.tts-banner-text {
    flex: 1;
}

.tts-banner-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    border-radius: 4px;
    background: transparent;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 0.8rem;
}

.tts-banner-btn:hover {
    background: var(--hover-bg, rgba(255, 255, 255, 0.1));
}

.tts-enable-btn {
    border-color: var(--accent-color, #6c3fff);
    color: var(--accent-color, #6c3fff);
}

/* TTS Speaker Icon */
.dialog-tts-icon {
    margin-left: 8px;
    font-size: 0.9em;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.dialog-tts-icon.speaking {
    opacity: 1.0;
    animation: tts-pulse 1s ease-in-out infinite;
}

@keyframes tts-pulse {
    0%, 100% { opacity: 1.0; }
    50% { opacity: 0.5; }
}

/* Options grid */
.dialog-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* 1 option: full width */
.dialog-options.opts-1 .dialog-option-btn {
    width: 100%;
}

/* 2 options: side by side */
.dialog-options.opts-2 .dialog-option-btn {
    width: calc(50% - 4px);
}

/* 3 options: 2 top, 1 full bottom */
.dialog-options.opts-3 .dialog-option-btn {
    width: calc(50% - 4px);
}
.dialog-options.opts-3 .dialog-option-btn:last-child {
    width: 100%;
}

/* 4 options: 2x2 grid */
.dialog-options.opts-4 .dialog-option-btn {
    width: calc(50% - 4px);
}

.dialog-option-btn {
    padding: 10px 8px;
    background: rgba(100, 140, 200, 0.1);
    border: 1px solid rgba(100, 140, 200, 0.3);
    border-radius: 6px;
    color: #aaccff;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.dialog-option-glyph {
    flex: 0 0 auto;
    font-size: 10px;
    width: 18px;
    height: 18px;
    /* PC default: no controller, so hide Xbox button glyphs and show plain click choices.
       Revealed only while a gamepad is the active input source (see .input-gamepad below). */
    display: none !important;
}

.input-gamepad .dialog-option-glyph {
    display: inline-flex !important;
}

.dialog-option-label {
    min-width: 0;
}

.dialog-option-btn:hover,
.dialog-option-btn.dialog-option-focused {
    background: rgba(0, 217, 255, 0.16);
    border-color: rgba(230, 169, 87, 0.92);
    box-shadow: 0 0 0 2px rgba(230, 169, 87, 0.18), 0 0 18px rgba(0, 217, 255, 0.22);
    color: #f7edd3;
}

.dialog-gamepad-hint {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: rgba(210, 230, 245, 0.76);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.dialog-gamepad-hint[hidden] {
    display: none !important;
}

.dialog-gamepad-sep {
    color: rgba(100, 140, 170, 0.72);
}

/* --- Cooking Panel (two-column layout) --- */
.cooking-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(255, 153, 85, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(255, 153, 85, 0.08);
}

.cooking-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #ff9955;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(255, 153, 85, 0.4);
}

.cooking-body {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 120px;
}

.cooking-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-radius: 8px;
}

.cooking-col-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #8ac;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.15);
    text-align: center;
}

.cooking-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.cooking-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 6px;
}

.cooking-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
    flex-shrink: 0;
}

.cooking-item-name {
    font-size: 12px;
    color: #cdf;
    letter-spacing: 1px;
    flex: 1;
}

.cooking-item-count {
    font-size: 14px;
    font-weight: bold;
    color: #ff9955;
    letter-spacing: 1px;
}

.cooking-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px 8px;
}

/* Recipe row — clickable items in cooking/smelting recipe lists */
.cooking-recipe-row,
.smelting-recipe-row,
.refinery-recipe-row {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-direction: column;
    align-items: flex-start;
}

.cooking-recipe-row:hover,
.smelting-recipe-row:hover,
.refinery-recipe-row:hover {
    background: rgba(80, 120, 200, 0.15);
    border-color: rgba(80, 120, 200, 0.25);
}

/* Selected recipe highlight */
.recipe-selected {
    background: rgba(80, 160, 255, 0.2) !important;
    border-color: rgba(80, 160, 255, 0.5) !important;
    box-shadow: 0 0 8px rgba(80, 160, 255, 0.15);
}

/* Disabled recipe — not enough ingredients */
.recipe-disabled {
    opacity: 0.45;
}

.recipe-locked {
    opacity: 0.55;
}

.recipe-disabled:hover {
    background: rgba(80, 120, 200, 0.08);
}

/* Make recipe list scrollable */
.cooking-col-raw .cooking-items,
.smelting-col-ore .smelting-items,
.refinery-col-ore .refinery-items {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 120, 200, 0.3) transparent;
}

.cooking-col-raw .cooking-items::-webkit-scrollbar,
.smelting-col-ore .smelting-items::-webkit-scrollbar,
.refinery-col-ore .refinery-items::-webkit-scrollbar {
    width: 5px;
}

.cooking-col-raw .cooking-items::-webkit-scrollbar-thumb,
.smelting-col-ore .smelting-items::-webkit-scrollbar-thumb,
.refinery-col-ore .refinery-items::-webkit-scrollbar-thumb {
    background: rgba(80, 120, 200, 0.3);
    border-radius: 3px;
}

/* Center column — progress arrow + bar */
.cooking-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.cooking-arrow {
    font-size: 28px;
    color: #ff9955;
    text-shadow: 0 0 8px rgba(255, 153, 85, 0.4);
    animation: cook-arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes cook-arrow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.cooking-progress-wrap {
    width: 60px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 153, 85, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.cooking-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff9955, #ffcc55);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.cooking-status {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    text-align: center;
}

.cooking-skill-info {
    text-align: center;
    font-size: 11px;
    color: #ff9955;
    letter-spacing: 1px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid rgba(255, 153, 85, 0.1);
}

.cooking-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-cook {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cook-one {
    background: linear-gradient(135deg, #6a3a1a, #9a5a2a);
    color: #fff;
    border: 1px solid #bb7a3a;
}

.btn-cook-one:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 120, 50, 0.3);
}

.btn-cook-all {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
}

.btn-cook-all:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(50, 200, 100, 0.3);
}

.btn-cook-stop {
    background: linear-gradient(135deg, #6a1a1a, #9a2a2a);
    color: #fff;
    border: 1px solid #bb3a3a;
}

.btn-cook-stop:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

.btn-cook:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* --- Smelting / Furnace Panel --- */
.smelting-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(221, 119, 51, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(221, 119, 51, 0.08);
}

.smelting-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #dd7733;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(221, 119, 51, 0.4);
}

.smelting-body {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 120px;
}

.smelting-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(221, 119, 51, 0.1);
    border-radius: 8px;
}

.smelting-col-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #dd9955;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(221, 119, 51, 0.15);
    text-align: center;
}

.smelting-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.smelting-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(221, 119, 51, 0.08);
    border-radius: 6px;
}

.smelting-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
    flex-shrink: 0;
}

.smelting-item-icon {
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    text-shadow: 0 0 6px currentColor;
}

.smelting-item-name {
    font-size: 12px;
    color: #cdf;
    letter-spacing: 1px;
    flex: 1;
}

.smelting-item-count {
    font-size: 14px;
    font-weight: bold;
    color: #dd7733;
    letter-spacing: 1px;
}

.smelting-recipe-row {
    gap: 6px;
}

.smelting-recipe-name {
    width: 100%;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.smelting-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    width: 100%;
    min-width: 0;
    color: rgba(221, 119, 51, 0.82);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.smelting-recipe-lock {
    flex: 0 0 auto;
    padding: 2px 5px;
    color: #f0b071;
    background: rgba(221, 119, 51, 0.12);
    border: 1px solid rgba(221, 119, 51, 0.28);
    border-radius: 4px;
    white-space: nowrap;
}

.smelting-recipe-output {
    flex: 0 0 auto;
    padding: 2px 5px;
    color: #9ff0d0;
    background: rgba(56, 189, 148, 0.12);
    border: 1px solid rgba(56, 189, 148, 0.26);
    border-radius: 4px;
    white-space: nowrap;
}

.smelting-recipe-materials {
    flex: 1 1 120px;
    min-width: 0;
    color: rgba(221, 119, 51, 0.86);
    overflow-wrap: anywhere;
}

.smelting-item-note {
    display: block;
    color: rgba(205, 221, 255, 0.78);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.smelting-item-note-locked {
    color: #f0b071;
}

.smelting-item-note-materials {
    color: rgba(221, 119, 51, 0.92);
}

.smelting-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px 8px;
}

.smelting-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.smelting-arrow {
    font-size: 28px;
    color: #dd7733;
    text-shadow: 0 0 8px rgba(221, 119, 51, 0.4);
    animation: smelt-arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes smelt-arrow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.smelting-progress-wrap {
    width: 60px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(221, 119, 51, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.smelting-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #dd7733, #ffaa44);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.smelting-status {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    text-align: center;
}

.smelting-skill-info {
    text-align: center;
    font-size: 11px;
    color: #dd7733;
    letter-spacing: 1px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid rgba(221, 119, 51, 0.1);
}

.smelting-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-smelt {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-smelt-one {
    background: linear-gradient(135deg, #6a3a1a, #9a5a2a);
    color: #fff;
    border: 1px solid #bb7a3a;
}

.btn-smelt-one:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(221, 119, 51, 0.3);
}

.btn-smelt-all {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
}

.btn-smelt-all:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(50, 200, 100, 0.3);
}

.btn-smelt-stop {
    background: linear-gradient(135deg, #6a1a1a, #9a2a2a);
    color: #fff;
    border: 1px solid #bb3a3a;
}

.btn-smelt-stop:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

.btn-smelt:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* --- Oil Refinery Panel --- */
/* ── Hand Craft Panel (V key — no station required) ─────────────────── */

.handcraft-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(14, 10, 6, 0.96);
    border: 1px solid rgba(204, 136, 68, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(204, 136, 68, 0.08);
}

.handcraft-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #cc8844;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(204, 136, 68, 0.4);
}

.handcraft-body {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 120px;
}

.handcraft-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(204, 136, 68, 0.1);
    border-radius: 8px;
}

.handcraft-col-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #ddaa66;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(204, 136, 68, 0.15);
    text-align: center;
}

.handcraft-col-list {
    max-width: 180px;
}

.handcraft-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.handcraft-recipe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(204, 136, 68, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.handcraft-recipe-row:hover {
    background: rgba(204, 136, 68, 0.1);
}
.handcraft-recipe-row.recipe-selected {
    background: rgba(204, 136, 68, 0.18);
    border-color: rgba(204, 136, 68, 0.4);
}
.handcraft-recipe-row.recipe-locked {
    opacity: 0.4;
    pointer-events: none;
}
.handcraft-recipe-row.recipe-disabled {
    opacity: 0.55;
}

.handcraft-recipe-name {
    font-size: 12px;
    color: #eed8aa;
    letter-spacing: 1px;
}
.handcraft-recipe-level {
    font-size: 10px;
    color: #aa8855;
    letter-spacing: 1px;
}

.handcraft-col-detail {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.handcraft-detail-name {
    font-size: 15px;
    font-weight: bold;
    color: #cc8844;
    letter-spacing: 2px;
}
.handcraft-detail-desc {
    font-size: 11px;
    color: #998866;
    letter-spacing: 1px;
    line-height: 1.5;
}
.handcraft-detail-mats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.handcraft-mat {
    font-size: 11px;
    color: #bbaa88;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    text-transform: capitalize;
}
.handcraft-mat.mat-missing {
    color: #cc4444;
}
.handcraft-detail-xp {
    font-size: 11px;
    color: #44cc88;
    margin-top: 4px;
    letter-spacing: 1px;
}

.handcraft-progress-wrap {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(204, 136, 68, 0.2);
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}
.handcraft-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #cc8844, #ffaa44);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.handcraft-status {
    font-size: 11px;
    color: #aa8855;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.handcraft-skill-info {
    font-size: 11px;
    color: #887755;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.handcraft-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}

.btn-handcraft {
    padding: 8px 18px;
    border: 1px solid rgba(204, 136, 68, 0.3);
    border-radius: 6px;
    background: rgba(204, 136, 68, 0.1);
    color: #ddaa66;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.btn-handcraft:hover:not(:disabled) {
    background: rgba(204, 136, 68, 0.2);
    border-color: rgba(204, 136, 68, 0.5);
}
.btn-handcraft:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.btn-handcraft-stop {
    border-color: rgba(204, 68, 68, 0.4);
    color: #cc6644;
}

/* ── Oil Refinery Panel ─────────────────────────────────────────────── */

.refinery-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(68, 170, 204, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(68, 170, 204, 0.08);
}

.refinery-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #44aacc;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(68, 170, 204, 0.4);
}

.refinery-body {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 120px;
}

.refinery-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(68, 170, 204, 0.1);
    border-radius: 8px;
}

.refinery-col-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #66bbdd;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(68, 170, 204, 0.15);
    text-align: center;
}

.refinery-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.refinery-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(68, 170, 204, 0.08);
    border-radius: 6px;
}

.refinery-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
    flex-shrink: 0;
}

.refinery-item-name {
    font-size: 12px;
    color: #cdf;
    letter-spacing: 1px;
    flex: 1;
}

.refinery-item-count {
    font-size: 14px;
    font-weight: bold;
    color: #44aacc;
    letter-spacing: 1px;
}

.refinery-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px 8px;
}

.refinery-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.refinery-arrow {
    font-size: 28px;
    color: #44aacc;
    text-shadow: 0 0 8px rgba(68, 170, 204, 0.4);
    animation: refine-arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes refine-arrow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.refinery-progress-wrap {
    width: 60px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(68, 170, 204, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.refinery-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #44aacc, #66ddee);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.refinery-status {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    text-align: center;
}

.refinery-skill-info {
    text-align: center;
    font-size: 11px;
    color: #44aacc;
    letter-spacing: 1px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid rgba(68, 170, 204, 0.1);
}

.refinery-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-refine {
    flex: 1;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-refine-one {
    background: linear-gradient(135deg, #1a3a5a, #2a5a8a);
    color: #fff;
    border: 1px solid #3a7abb;
}

.btn-refine-one:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(68, 170, 204, 0.3);
}

.btn-refine-all {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
}

.btn-refine-all:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(50, 200, 100, 0.3);
}

.btn-refine-stop {
    background: linear-gradient(135deg, #6a1a1a, #9a2a2a);
    color: #fff;
    border: 1px solid #bb3a3a;
}

.btn-refine-stop:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

.btn-refine:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* --- Storage Crate Panel --- */
.storage-crate-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    max-width: 96vw;
    height: 540px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    background: linear-gradient(160deg, rgba(8, 18, 36, 0.97), rgba(4, 10, 22, 0.97));
    border: 1px solid rgba(100, 170, 200, 0.35);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 0 40px rgba(100, 170, 200, 0.12);
    overflow: hidden;
}

.modal-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #88ccdd;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(100, 150, 170, 0.5);
}

.sc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sc-title {
    flex: 1;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #88ccdd;
    text-shadow: 0 0 12px rgba(100, 170, 200, 0.5);
}

.sc-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    color: #aabbcc;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
}

.sc-close:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 110, 110, 0.5);
    color: #ff9a9a;
}

.sc-body {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.sc-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(100, 170, 200, 0.14);
    border-radius: 10px;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.sc-pane-inv { flex: 2; }
.sc-pane-crate { flex: 3; }

.sc-pane.sc-drop-target {
    border-color: #5adfa0;
    box-shadow: inset 0 0 18px rgba(90, 223, 160, 0.15);
}

.sc-pane-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 2px 0 6px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #7fb6c9;
}

.sc-cap {
    color: #88ccdd;
    letter-spacing: 1px;
}

.sc-capbar {
    height: 4px;
    margin-bottom: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}

.sc-capbar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3aaa7a, #5adfa0);
    transition: width 0.2s;
}

.sc-capbar-fill.sc-capbar-full {
    background: linear-gradient(90deg, #aa4a3a, #df6a5a);
}

.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    align-content: start;
}

.sc-grid-hotbar {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.sc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 170, 200, 0.35) transparent;
}

.sc-slot {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(100, 170, 200, 0.12);
    border-radius: 8px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.sc-slot-filled {
    background: rgba(60, 110, 140, 0.16);
    border-color: rgba(100, 170, 200, 0.3);
    cursor: grab;
    transition: transform 0.08s, border-color 0.12s, box-shadow 0.12s;
}

.sc-slot-filled:hover {
    border-color: #88ccdd;
    box-shadow: 0 0 10px rgba(100, 190, 220, 0.25);
    transform: translateY(-1px);
}

.sc-slot-dragging { opacity: 0.35; }

.sc-slot-vis {
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #9fc6d5;
}

.sc-slot-vis .slot-item-img {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

.sc-slot-count {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #eaf6fb;
    text-shadow: 0 1px 2px #000, 0 0 4px #000;
    letter-spacing: 0.5px;
    pointer-events: none;
}

.sc-drag-ghost {
    position: fixed;
    width: 48px;
    height: 48px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.9;
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.sc-grid-span { grid-column: 1 / -1; }

.sc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-shrink: 0;
}

.sc-btn {
    flex: 1;
    padding: 9px 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.12s, box-shadow 0.12s;
}

.sc-btn:hover { filter: brightness(1.2); }

.sc-key {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 9px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    opacity: 0.75;
}

.sc-btn-stack {
    background: linear-gradient(135deg, #3a3a6a, #5a5aaa);
    color: #c9c9ff;
    border-color: #7a7add;
}

.sc-btn-deposit {
    background: linear-gradient(135deg, #1a4a3a, #2a7a5a);
    color: #8fffa0;
    border-color: #3aaa7a;
}

.sc-btn-withdraw {
    background: linear-gradient(135deg, #3a4a6a, #5a7aaa);
    color: #88ccdd;
    border-color: #6aaadd;
}

.sc-btn-close {
    flex: 0 0 auto;
    padding-left: 14px;
    padding-right: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #aabbcc;
    border-color: rgba(255, 255, 255, 0.18);
}

.sc-hint {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #607a88;
    text-align: center;
    flex-shrink: 0;
}

.storage-crate-empty {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 20px;
    opacity: 0.6;
}

@media (max-width: 700px) {
    .storage-crate-panel {
        width: 96vw;
        height: 80vh;
        padding: 10px;
    }
    .sc-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .sc-pane-inv { flex: 1; }
    .sc-pane-crate { flex: 1.4; }
    .sc-actions { flex-wrap: wrap; }
    .sc-btn {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 8px 4px;
    }
}

/* --- Water Cooler Panel --- */
.water-cooler-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    padding: 16px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(100, 150, 170, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(100, 150, 170, 0.15);
    display: none;
    flex-direction: column;
    gap: 10px;
}
.wc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(100, 150, 170, 0.2);
    padding-bottom: 8px;
}
.wc-title {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #88ccdd;
    text-shadow: 0 0 12px rgba(100, 150, 170, 0.5);
}
.wc-close {
    cursor: pointer;
    color: #666;
    font-size: 16px;
    transition: color 0.15s;
}
.wc-close:hover { color: #fff; }
.wc-bar-container {
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(100, 150, 170, 0.2);
    border-radius: 4px;
    overflow: hidden;
}
.wc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a4a7a, #44aaff);
    transition: width 0.3s;
    border-radius: 3px;
}
.wc-bar-label {
    text-align: center;
    font-size: 11px;
    margin-top: 4px;
    color: #88aabb;
    letter-spacing: 0.5px;
}
.wc-info {
    font-size: 11px;
    color: #667788;
    text-align: center;
    letter-spacing: 0.5px;
}
.wc-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.wc-btn {
    padding: 7px 14px;
    border: 1px solid rgba(100, 150, 170, 0.3);
    border-radius: 6px;
    background: rgba(10, 20, 40, 0.8);
    color: #aabbcc;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}
.wc-btn:hover:not(:disabled) {
    background: rgba(20, 40, 70, 0.9);
    border-color: rgba(100, 170, 220, 0.5);
    color: #ccddee;
}
.wc-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wc-btn.deposit, .wc-btn.deposit-all {
    border-color: rgba(60, 170, 120, 0.4);
    color: #8fffa0;
}
.wc-btn.deposit:hover:not(:disabled), .wc-btn.deposit-all:hover:not(:disabled) {
    background: rgba(20, 60, 40, 0.8);
    border-color: rgba(60, 200, 120, 0.6);
}
.wc-btn.drink {
    border-color: rgba(68, 136, 204, 0.5);
    color: #88ccff;
}
.wc-btn.drink:hover:not(:disabled) {
    background: rgba(20, 50, 90, 0.8);
    border-color: rgba(68, 170, 255, 0.6);
}

/* --- Anvil / Forge Panel --- */
.anvil-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(221, 119, 51, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(221, 119, 51, 0.08);
    overflow-y: auto;
}

.anvil-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #dd7733;
    margin-bottom: 12px;
    text-shadow: 0 0 12px rgba(221, 119, 51, 0.4);
}

.anvil-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(221, 119, 51, 0.15);
    padding-bottom: 8px;
}

.anvil-tab {
    flex: 1;
    padding: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #88a;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(221, 119, 51, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.anvil-tab:hover {
    color: #cdf;
    background: rgba(221, 119, 51, 0.1);
}

.anvil-tab.active {
    color: #dd7733;
    background: rgba(221, 119, 51, 0.15);
    border-color: rgba(221, 119, 51, 0.35);
    text-shadow: 0 0 8px rgba(221, 119, 51, 0.3);
}

.anvil-body {
    display: flex;
    gap: 12px;
    min-height: 220px;
    margin-bottom: 12px;
}

.anvil-recipe-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 280px;
    padding-right: 4px;
}

.anvil-recipe-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(221, 119, 51, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.anvil-recipe-row:hover {
    background: rgba(221, 119, 51, 0.08);
    border-color: rgba(221, 119, 51, 0.2);
}

.anvil-recipe-row.selected {
    background: rgba(221, 119, 51, 0.12);
    border-color: rgba(221, 119, 51, 0.4);
}

.anvil-recipe-row.locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.anvil-recipe-row.missing-mats {
    opacity: 0.75;
}

.anvil-recipe-icon-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.anvil-recipe-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
}

.anvil-recipe-abbr {
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 6px currentColor;
}

.anvil-recipe-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.anvil-recipe-name {
    font-size: 11px;
    color: #cdf;
    letter-spacing: 0.5px;
}

.anvil-recipe-level {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    white-space: nowrap;
}

.anvil-recipe-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(221, 119, 51, 0.1);
    border-radius: 8px;
    min-width: 200px;
    overflow-y: auto;
}

.anvil-detail-empty {
    color: #556;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 40px 0;
}

.anvil-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.anvil-detail-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.anvil-detail-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

.anvil-detail-abbr {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

.anvil-detail-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.anvil-detail-stats {
    font-size: 12px;
    color: #40ff90;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.anvil-detail-slot {
    font-size: 10px;
    color: #88a;
    margin-bottom: 4px;
}

.anvil-detail-req {
    font-size: 10px;
    margin-bottom: 4px;
}

.anvil-detail-req.met { color: #40ff90; }
.anvil-detail-req.unmet { color: #ff4444; }

.anvil-detail-future {
    font-size: 9px;
    color: #cc8833;
    font-style: italic;
    margin-bottom: 6px;
}

.anvil-detail-mats-label {
    font-size: 10px;
    color: #dd9955;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 6px;
}

.anvil-detail-mats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.anvil-mat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.anvil-mat-row.has-enough .anvil-mat-count { color: #40ff90; }
.anvil-mat-row.not-enough .anvil-mat-count { color: #ff4444; }

.anvil-mat-name { color: #cdf; }
.anvil-mat-count { font-weight: bold; letter-spacing: 1px; }
.anvil-mat-copy,
.wb-mat-copy,
.ht-mat-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.station-mat-source {
    color: #8fa1ac;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0;
    margin-top: 1px;
    white-space: normal;
}

.anvil-detail-xp {
    font-size: 10px;
    color: #dd7733;
    margin-bottom: 10px;
}

.anvil-forge-area {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.anvil-qty-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.anvil-qty-btn {
    width: 26px;
    height: 26px;
    background: rgba(221, 119, 51, 0.15);
    border: 1px solid rgba(221, 119, 51, 0.3);
    border-radius: 4px;
    color: #dd7733;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.anvil-qty-btn:hover {
    background: rgba(221, 119, 51, 0.3);
    border-color: rgba(221, 119, 51, 0.5);
}

.anvil-qty-value {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #ffaa44;
    min-width: 30px;
    text-align: center;
}

.anvil-qty-presets {
    display: flex;
    gap: 3px;
    margin-left: auto;
}

.anvil-qty-preset {
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    background: rgba(221, 119, 51, 0.1);
    border: 1px solid rgba(221, 119, 51, 0.2);
    border-radius: 4px;
    color: #88776a;
    cursor: pointer;
    transition: all 0.12s;
}

.anvil-qty-preset:hover {
    background: rgba(221, 119, 51, 0.2);
    border-color: rgba(221, 119, 51, 0.4);
    color: #dd7733;
}

.anvil-qty-preset.active {
    background: rgba(221, 119, 51, 0.25);
    border-color: rgba(221, 119, 51, 0.5);
    color: #ffaa44;
}

/* Forging progress area — visible during active forging */
.anvil-forging-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: rgba(221, 119, 51, 0.06);
    border: 1px solid rgba(221, 119, 51, 0.15);
    border-radius: 6px;
}

.anvil-batch-counter {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    color: #ffaa44;
    text-align: center;
    letter-spacing: 1px;
}

.anvil-progress-wrap {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(221, 119, 51, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.anvil-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #dd7733, #ffaa44);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.btn-anvil-forge {
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: linear-gradient(135deg, #6a3a1a, #9a5a2a);
    color: #fff;
    border: 1px solid #bb7a3a;
}

.btn-anvil-forge:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(221, 119, 51, 0.3);
}

.btn-anvil-forge:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.btn-anvil-stop {
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: linear-gradient(135deg, #6a1a1a, #9a2a2a);
    color: #fff;
    border: 1px solid #bb3a3a;
}

.btn-anvil-stop:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

.anvil-skill-info {
    text-align: center;
    font-size: 11px;
    color: #dd7733;
    letter-spacing: 1px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: 1px solid rgba(221, 119, 51, 0.1);
}

/* --- Coming Soon Panel --- */
.coming-soon-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    padding: 30px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(80, 120, 200, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    text-align: center;
    box-shadow: 0 0 40px rgba(80, 120, 200, 0.08);
}

.coming-soon-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #8ac;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(80, 120, 200, 0.3);
}

.coming-soon-badge {
    display: inline-block;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ffcc40;
    background: rgba(255, 200, 64, 0.1);
    border: 1px solid rgba(255, 200, 64, 0.3);
    border-radius: 6px;
    margin-bottom: 16px;
    text-shadow: 0 0 8px rgba(255, 200, 64, 0.3);
}

.coming-soon-desc {
    font-size: 12px;
    color: #667;
    letter-spacing: 1px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* --- Workbench Panel --- */
.workbench-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(153, 153, 153, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(153, 153, 153, 0.08);
    overflow-y: auto;
}

.wb-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #999;
    margin-bottom: 12px;
    text-shadow: 0 0 12px rgba(153, 153, 153, 0.4);
}

.wb-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.15);
    padding-bottom: 8px;
}

.wb-tab {
    flex: 1;
    padding: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #88a;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(153, 153, 153, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.wb-tab:hover { color: #cdf; background: rgba(153, 153, 153, 0.1); }
.wb-tab.active {
    color: #999;
    background: rgba(153, 153, 153, 0.15);
    border-color: rgba(153, 153, 153, 0.35);
    text-shadow: 0 0 8px rgba(153, 153, 153, 0.3);
}

.wb-body {
    display: flex;
    gap: 12px;
    min-height: 220px;
    margin-bottom: 12px;
}

.wb-recipe-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 280px;
    padding-right: 4px;
}

/* Recipe rows — anvil-style with icon + info */
.wb-recipe-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(153, 153, 153, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.wb-recipe-row:hover {
    background: rgba(153, 153, 153, 0.08);
    border-color: rgba(153, 153, 153, 0.2);
}

.wb-recipe-row.selected {
    background: rgba(153, 153, 153, 0.12);
    border-color: rgba(153, 153, 153, 0.4);
}

.wb-recipe-row.locked {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.wb-recipe-row.locked:hover {
    opacity: 0.65;
    filter: grayscale(0.3);
}

.wb-recipe-row.missing-mats {
    opacity: 0.75;
}

.wb-recipe-icon-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wb-recipe-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
}

.wb-recipe-abbr {
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 6px currentColor;
}

.wb-recipe-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wb-recipe-name {
    font-size: 11px;
    letter-spacing: 0.5px;
}

.wb-recipe-level {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    white-space: nowrap;
}

.wb-recipe-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(153, 153, 153, 0.1);
    border-radius: 8px;
    min-width: 200px;
    overflow-y: auto;
}

.wb-detail-empty {
    color: #556;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 40px 0;
}

.wb-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wb-detail-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wb-detail-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

.wb-detail-abbr {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

.wb-detail-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

.wb-detail-desc {
    font-size: 11px;
    color: #8ac;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.wb-detail-req {
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.wb-detail-req.met { color: #40ff90; }
.wb-detail-req.unmet { color: #ff4444; }

.wb-detail-mats-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #667;
    margin-top: 4px;
    margin-bottom: 4px;
}

.wb-detail-mats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.wb-mat-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    font-size: 11px;
    color: #aab;
    letter-spacing: 1px;
}

.wb-mat-row.has-enough .wb-mat-count { color: #40ff90; }
.wb-mat-row.not-enough .wb-mat-count { color: #ff4444; }

.wb-mat-name { color: #cdf; }
.wb-mat-count { font-weight: bold; letter-spacing: 1px; }

.wb-detail-xp {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Craft area — quantity selector + buttons + progress */
.wb-craft-area {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wb-qty-row {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.wb-qty-btn {
    width: 28px;
    height: 28px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #cdf;
    background: rgba(153, 153, 153, 0.15);
    border: 1px solid rgba(153, 153, 153, 0.25);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.wb-qty-btn:hover {
    background: rgba(153, 153, 153, 0.25);
    border-color: rgba(153, 153, 153, 0.5);
}

.wb-qty-value {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    min-width: 28px;
    text-align: center;
    letter-spacing: 1px;
}

.wb-qty-presets {
    display: flex;
    gap: 3px;
    margin-left: 8px;
}

.wb-qty-preset {
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    color: #88a;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(153, 153, 153, 0.15);
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.1s;
}

.wb-qty-preset:hover {
    color: #cdf;
    border-color: rgba(153, 153, 153, 0.35);
    background: rgba(153, 153, 153, 0.1);
}

.wb-qty-preset.active {
    color: #fff;
    background: rgba(153, 153, 153, 0.25);
    border-color: rgba(153, 153, 153, 0.5);
    text-shadow: 0 0 4px rgba(153, 153, 153, 0.4);
}

/* Crafting progress area (shown during batch craft) */
.wb-crafting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(153, 153, 153, 0.06);
    border: 1px solid rgba(153, 153, 153, 0.15);
    border-radius: 6px;
}

.wb-batch-counter {
    font-size: 12px;
    font-weight: bold;
    color: #cdf;
    letter-spacing: 1px;
}

.wb-progress-wrap {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(153, 153, 153, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.wb-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #999, #ccc);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.btn-wb-stop {
    padding: 6px 18px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ff6644;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-wb-stop:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: rgba(255, 68, 68, 0.5);
}

.btn-wb-craft {
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #3a3a3a, #5a5a5a);
    color: #fff;
    border: 1px solid #888;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-wb-craft:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(153, 153, 153, 0.3);
}

.btn-wb-craft:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.wb-skill-info {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 1px solid rgba(153, 153, 153, 0.12);
}
.wb-skill-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-skill-icon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}
.wb-skill-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wb-skill-label {
    font-size: 9px;
    color: #aaa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}
.wb-skill-level {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.wb-skill-xp-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 1px;
    overflow: hidden;
}
.wb-skill-xp-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Apply Mod tab */
.wb-apply-body {
    min-height: 220px;
    margin-bottom: 12px;
}

.wb-apply-layout {
    padding: 8px 0;
}

.wb-apply-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wb-apply-weapon-label, .wb-apply-mods-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #667;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.15);
}

.wb-apply-weapon {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.wb-mod-badge {
    font-size: 10px;
    color: #8ac;
    font-weight: normal;
}

.wb-apply-empty {
    font-size: 11px;
    color: #556;
    letter-spacing: 1px;
    text-align: center;
    padding: 16px 8px;
}

.wb-apply-mod-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-apply-mod-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(153, 153, 153, 0.08);
    border-radius: 6px;
}

.wb-apply-mod-name {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.wb-apply-mod-effect {
    font-size: 10px;
    color: #8ac;
    flex: 1;
    letter-spacing: 1px;
}

.wb-apply-btn {
    padding: 5px 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    color: #fff;
    border: 1px solid #3aaa6a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.wb-apply-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(50, 200, 100, 0.3);
}

.wb-remove-mod-btn {
    padding: 5px 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #6a1a1a, #9a2a2a);
    color: #fff;
    border: 1px solid #bb3a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}

.wb-remove-mod-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(200, 50, 50, 0.3);
}

/* ── Hack Terminal Panel (cyan/teal hacker theme) ── */
.hack-terminal-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    max-height: 85vh;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(0, 255, 170, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(0, 255, 170, 0.08);
    overflow-y: auto;
}

.ht-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #0fa;
    margin-bottom: 12px;
    text-shadow: 0 0 12px rgba(0, 255, 170, 0.4);
}

.ht-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 255, 170, 0.15);
    padding-bottom: 8px;
}

.ht-tab {
    flex: 1;
    padding: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #88a;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 255, 170, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.ht-tab:hover {
    color: #cdf;
    background: rgba(0, 255, 170, 0.1);
}

.ht-tab.active {
    color: #0fa;
    background: rgba(0, 255, 170, 0.15);
    border-color: rgba(0, 255, 170, 0.35);
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.3);
}

.ht-body {
    display: flex;
    gap: 12px;
    min-height: 220px;
    margin-bottom: 12px;
}

.ht-recipe-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 280px;
    padding-right: 4px;
}

.ht-recipe-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 255, 170, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.ht-recipe-row:hover {
    background: rgba(0, 255, 170, 0.08);
    border-color: rgba(0, 255, 170, 0.2);
}

.ht-recipe-row.selected {
    background: rgba(0, 255, 170, 0.12);
    border-color: rgba(0, 255, 170, 0.4);
}

.ht-recipe-row.locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.ht-recipe-row.missing-mats {
    opacity: 0.75;
}

.ht-recipe-icon-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ht-recipe-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
}

.ht-recipe-abbr {
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 6px currentColor;
}

.ht-recipe-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ht-recipe-name {
    font-size: 11px;
    color: #cdf;
    letter-spacing: 0.5px;
}

.ht-recipe-level {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ht-recipe-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 170, 0.1);
    border-radius: 8px;
    min-width: 200px;
}

.ht-detail-empty {
    color: #556;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 40px 0;
}

.ht-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ht-detail-icon-wrap {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ht-detail-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(0, 255, 170, 0.3));
}

.ht-detail-abbr {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

.ht-detail-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.ht-detail-desc {
    font-size: 10px;
    color: #99b;
    margin-bottom: 8px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.ht-detail-req {
    font-size: 10px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    padding: 3px 6px;
    border-radius: 4px;
}

.ht-detail-req.met {
    color: #4a8;
    background: rgba(68, 170, 136, 0.1);
}

.ht-detail-req.unmet {
    color: #c55;
    background: rgba(200, 80, 80, 0.1);
}

.ht-detail-mats-label {
    font-size: 10px;
    color: #88a;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.ht-detail-mats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.ht-mat-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
}

.ht-mat-row.has-enough {
    color: #8cb4a0;
}

.ht-mat-row.not-enough {
    color: #c88;
    background: rgba(200, 80, 80, 0.06);
}

.ht-mat-name { flex: 1; }
.ht-mat-count { text-align: right; min-width: 50px; }

.ht-detail-xp {
    font-size: 10px;
    color: #0fa;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-shadow: 0 0 6px rgba(0, 255, 170, 0.2);
}

.ht-craft-area {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ht-qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ht-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 255, 170, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #cdf;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ht-qty-btn:hover {
    background: rgba(0, 255, 170, 0.15);
    border-color: rgba(0, 255, 170, 0.4);
}

.ht-qty-value {
    font-size: 14px;
    font-weight: bold;
    color: #eef;
    min-width: 28px;
    text-align: center;
}

.ht-qty-presets {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.ht-qty-preset {
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    color: #88a;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 170, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

.ht-qty-preset:hover {
    color: #cdf;
    background: rgba(0, 255, 170, 0.1);
}

.ht-qty-preset.active {
    color: #0fa;
    background: rgba(0, 255, 170, 0.12);
    border-color: rgba(0, 255, 170, 0.3);
}

.btn-ht-craft {
    width: 100%;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #eee;
    background: linear-gradient(180deg, rgba(0, 200, 140, 0.3), rgba(0, 120, 90, 0.25));
    border: 1px solid rgba(0, 255, 170, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-shadow: 0 0 6px rgba(0, 255, 170, 0.3);
}

.btn-ht-craft:hover:not(:disabled) {
    filter: brightness(1.2);
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.15);
}

.btn-ht-craft:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.ht-crafting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 255, 170, 0.04);
    border-radius: 6px;
}

.ht-batch-counter {
    font-size: 12px;
    color: #0fa;
    letter-spacing: 1px;
}

.ht-progress-wrap {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

.ht-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0c8, #0fa);
    border-radius: 4px;
    transition: width 0.1s linear;
}

.btn-ht-stop {
    padding: 6px 20px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #faa;
    background: rgba(200, 50, 50, 0.15);
    border: 1px solid rgba(200, 50, 50, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-ht-stop:hover {
    filter: brightness(1.2);
    background: rgba(200, 50, 50, 0.25);
}

.ht-skill-info {
    font-size: 11px;
    color: #88a;
    text-align: center;
    margin: 8px 0;
    letter-spacing: 1px;
}

/* Hack tab body */
.ht-hack-body {
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 12px;
}

.ht-hack-desc {
    color: #0cc;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.ht-hack-offline {
    color: #556;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.6;
}

.btn-ht-hack {
    padding: 12px 32px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #eee;
    background: linear-gradient(180deg, rgba(0, 200, 140, 0.35), rgba(0, 120, 90, 0.3));
    border: 1px solid rgba(0, 255, 170, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.4);
}

.btn-ht-hack:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 16px rgba(0, 255, 170, 0.2);
}

/* --- FPS (bottom-left) --- */
#fps-counter {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    pointer-events: none;
}

/* --- Quest Tab (Side Panel) --- */
.sp-quest-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,120,180,0.3) transparent;
}

/* ---- Difficulty Section Headers ---- */
.sq-section {
    margin-bottom: 6px;
}
.sq-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 6px;
    border-left: 3px solid #555;
    background: rgba(15, 18, 30, 0.85);
    margin-bottom: 2px;
}
.sq-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.sq-section-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sq-section-level {
    font-size: 10px;
    color: #667;
    letter-spacing: 0.5px;
}
.sq-section-count {
    font-size: 10px;
    color: #889;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ---- Quest Row ---- */
.sq {
    border-left: 4px solid #444;
    background: rgba(15, 18, 30, 0.6);
    transition: background 0.15s;
}
.sq-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 42px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sq-row:hover { background: rgba(255,255,255,0.04); }
.sq-row:active { background: rgba(255,255,255,0.07); }

/* Colored dot */
.sq-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Quest name */
.sq-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini progress counter in row */
.sq-prog {
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ---- Color Tiers ---- */
/* Red = not started */
.sq-red { border-left-color: #e04040; }
.sq-red .sq-dot { background: #e04040; box-shadow: 0 0 6px rgba(224,64,64,0.5); }
.sq-red .sq-name { color: #ff8888; }
.sq-red .sq-prog { color: #ff8888; }

/* Yellow = in progress */
.sq-yellow { border-left-color: #e0a820; }
.sq-yellow .sq-dot { background: #e0a820; box-shadow: 0 0 6px rgba(224,168,32,0.5); }
.sq-yellow .sq-name { color: #ffd060; }
.sq-yellow .sq-prog { color: #ffd060; }

/* Green = completed */
.sq-green { border-left-color: #30c060; }
.sq-green .sq-dot { background: #30c060; box-shadow: 0 0 6px rgba(48,192,96,0.5); }
.sq-green .sq-name { color: #70e898; }

/* Locked = dimmed, but still readable when expanded */
.sq-locked { border-left-color: #4a4f5e; opacity: 0.78; }
.sq-locked .sq-dot { background: #555; box-shadow: none; }
.sq-locked .sq-name { color: #8a91a3; }

/* ---- Expanded Detail ---- */
.sq-detail {
    padding: 4px 14px 14px 36px;
    animation: sq-open 0.12s ease-out;
}
@keyframes sq-open {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sq-text {
    font-size: 12px;
    color: #bbc;
    line-height: 1.5;
    margin: 0 0 6px;
}
.sq-lock {
    font-size: 11px;
    color: #e06060;
    padding: 6px 10px;
    background: rgba(224,64,64,0.08);
    border: 1px solid rgba(224,64,64,0.15);
    border-radius: 4px;
}
.sq-reward {
    font-size: 11px;
    color: #dda640;
    margin: 4px 0 0;
}
.sq-lore {
    font-size: 11px;
    color: #889;
    font-style: italic;
    line-height: 1.4;
    border-left: 2px solid rgba(100,100,140,0.25);
    padding-left: 8px;
    margin: 4px 0 6px;
}

/* ---- Quest Steps (inside detail) ---- */
.sp-quest-prompt {
    font-size: 12px;
    color: #99a;
    font-style: italic;
    padding: 4px 0;
}
.sp-quest-progress-summary {
    font-size: 11px;
    color: #aab;
    margin-bottom: 4px;
}
.sp-quest-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-quest-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}
.sp-quest-step.active {
    background: rgba(224,168,32,0.1);
    color: #fff;
}
.sp-quest-step.completed {
    color: rgba(80,224,128,0.45);
}
.sp-quest-step.completed .sp-quest-step-text {
    text-decoration: line-through;
    opacity: 0.5;
}
.sp-quest-step.pending { color: #556; }
.sp-quest-step.next-up { color: #889; opacity: 0.7; }
.sp-quest-check {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 13px;
}
.sp-quest-check.active { color: #e0a820; }
.sp-quest-check.pending { color: #445; }
.sp-quest-step.completed .sp-quest-check { color: #50e080; }
.sp-quest-step-text { flex: 1; }
.sp-quest-progress {
    color: #ffd060;
    font-weight: bold;
    margin-left: 4px;
}

/* ---- Mobile ---- */
@media (max-width: 600px), (pointer: coarse) {
    .sq-row {
        padding: 14px 12px;
        min-height: 48px;
    }
    .sq-name { font-size: 14px; }
    .sq-dot { width: 12px; height: 12px; }
    .sp-quest-step { padding: 8px 10px; font-size: 13px; }
    .sp-quest-content { max-height: 55vh; }
    .sq-section-header { padding: 10px 12px 8px; }
    .sq-section-label { font-size: 12px; }
}

/* ============================================
   DEX / Codex Panel
   ============================================ */

/* Sub-tab bar */
.dex-subtabs {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 2px;
}
.dex-subtab {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: #667;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 7px 0;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    text-align: center;
}
.dex-subtab:hover {
    color: #99b;
    background: rgba(40, 60, 120, 0.2);
}
.dex-subtab.active {
    color: #cdf;
    background: rgba(30, 55, 110, 0.5);
    border-color: rgba(80, 140, 255, 0.3);
}

/* Sections: only one visible at a time */
.dex-section {
    display: none;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 120, 200, 0.25) transparent;
}
.dex-section::-webkit-scrollbar {
    width: 4px;
}
.dex-section::-webkit-scrollbar-thumb {
    background: rgba(80, 120, 200, 0.3);
    border-radius: 2px;
}
.dex-section.active {
    display: block;
}

/* Card — collapsible entry */
.dex-card {
    margin-bottom: 6px;
    border: 1px solid rgba(80, 120, 200, 0.12);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(6, 12, 28, 0.5);
    transition: border-color 0.15s;
}
.dex-card:hover {
    border-color: rgba(80, 120, 200, 0.3);
}

/* Card header — clickable */
.dex-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    position: relative;
}
.dex-card-header::after {
    content: '\25B6';
    font-size: 8px;
    color: #556;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.dex-card-header.expanded::after {
    transform: rotate(90deg);
    color: #8ac;
}
.dex-card-header:hover {
    background: rgba(30, 50, 100, 0.3);
}

.dex-card-name {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}
.dex-card-level {
    font-size: 10px;
    color: #778;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: 12px;
}
.dex-card-badge {
    font-size: 9px;
    color: #889;
    letter-spacing: 1px;
    padding: 1px 5px;
    border: 1px solid rgba(80, 120, 200, 0.15);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
    margin-left: auto;
    margin-right: 12px;
}
.dex-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Collapsed body */
.dex-card-body {
    padding: 0 10px 10px 10px;
    transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.15s ease;
}
.dex-card-body.dex-collapsed {
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;
    opacity: 0;
}

/* Description text */
.dex-card-desc {
    font-size: 11px;
    color: #99a;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.1);
}

/* Stat grid (2x2 for mob stats) */
.dex-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 10px;
}
.dex-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    border: 1px solid rgba(80, 120, 200, 0.08);
}
.dex-stat-label {
    font-size: 9px;
    color: #667;
    letter-spacing: 2px;
    font-weight: bold;
}
.dex-stat-value {
    font-size: 11px;
    color: #cdf;
    font-weight: bold;
}

/* Detail rows */
.dex-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(80, 120, 200, 0.06);
}
.dex-detail-row:last-child {
    border-bottom: none;
}
.dex-detail-label {
    font-size: 9px;
    color: #556;
    letter-spacing: 2px;
    font-weight: bold;
}
.dex-detail-value {
    font-size: 11px;
    color: #99a;
}
.dex-detail-value.dex-effect {
    color: #50e080;
}

/* Danger pips */
.dex-danger {
    display: flex;
    gap: 3px;
}
.dex-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 80, 60, 0.3);
    background: transparent;
}
.dex-pip.filled {
    background: #ff4030;
    border-color: #ff6050;
    box-shadow: 0 0 4px rgba(255, 60, 40, 0.4);
}

/* Behavior box */
.dex-behavior {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(80, 120, 200, 0.06);
    border-radius: 3px;
    border-left: 2px solid rgba(80, 140, 255, 0.3);
}
.dex-behavior-label {
    display: block;
    font-size: 9px;
    color: #667;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 3px;
}
.dex-behavior-text {
    font-size: 10px;
    color: #889;
    line-height: 1.5;
}

/* Item category headers */
.dex-item-group {
    margin-bottom: 10px;
}
.dex-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.15);
}
.dex-cat-name {
    font-size: 10px;
    color: #8ac;
    letter-spacing: 3px;
    font-weight: bold;
}
.dex-cat-count {
    font-size: 9px;
    color: #556;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Price tags */
.dex-price-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.dex-price {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
}
.dex-price.buy {
    color: #ffcc40;
    background: rgba(255, 200, 40, 0.1);
    border: 1px solid rgba(255, 200, 40, 0.2);
}
.dex-price.sell {
    color: #50e080;
    background: rgba(50, 200, 80, 0.1);
    border: 1px solid rgba(50, 200, 80, 0.2);
}

/* World — biome mobs label */
.dex-biome-mobs {
    font-size: 9px;
    color: #778;
    margin-left: auto;
    margin-right: 12px;
    letter-spacing: 0.5px;
}

/* Features list */
.dex-features-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.dex-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #889;
    padding: 2px 0;
}
.dex-feature-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8ac;
    flex-shrink: 0;
}

/* --- Chat Panel --- */
#chat-panel {
    position: absolute;
    bottom: 80px;
    left: 16px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 25;
    transition: opacity 0.2s ease;
}

/* Header bar with minimize */
.chat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(80, 120, 200, 0.15);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.chat-minimize-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.chat-minimize-btn:hover,
.chat-minimize-btn:focus-visible {
    color: #fff;
    background: rgba(255, 80, 80, 0.3);
    border-color: rgba(255, 80, 80, 0.4);
}
.chat-header-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
}

/* Body: log + vertical tabs */
.chat-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

/* Message log */
#chat-log {
    flex: 1;
    min-height: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #ccc;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

/* Vertical tab strip (right side) */
.chat-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 3px;
    background: rgba(10, 15, 30, 0.7);
    border: 1px solid rgba(80, 120, 200, 0.1);
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.chat-tab {
    padding: 6px 4px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.chat-tab:hover,
.chat-tab:focus-visible {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}
.chat-tab.active {
    color: #cdf;
    background: rgba(80, 140, 255, 0.12);
    border-color: rgba(80, 140, 255, 0.3);
}

.chat-private-targets {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chat-private-target {
    flex: 0 0 auto;
    max-width: 118px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 102, 204, 0.28);
    border-radius: 4px;
    background: rgba(24, 8, 24, 0.72);
    color: rgba(255, 198, 232, 0.82);
    font: 700 10px 'Courier New', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.chat-private-target:hover,
.chat-private-target:focus-visible,
.chat-private-target.active {
    color: #ffd9f2;
    background: rgba(255, 102, 204, 0.16);
    border-color: rgba(255, 102, 204, 0.52);
}

/* Chat input */
#chat-input {
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(80, 160, 255, 0.4);
    border-radius: 4px;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
#chat-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#chat-input:focus {
    border-color: rgba(80, 160, 255, 0.7);
    box-shadow: 0 0 6px rgba(80, 160, 255, 0.2);
}

/* Inactive state — fully visible, interactive (scroll/tabs), input hidden */
#chat-panel.chat-inactive #chat-input {
    display: none;
}

/* Active state — input visible, subtle highlight on log */
#chat-panel.chat-active #chat-log {
    border-color: rgba(80, 120, 200, 0.3);
}

/* Minimized state — hide everything */
#chat-panel.chat-minimized .chat-body,
#chat-panel.chat-minimized .chat-header,
#chat-panel.chat-minimized .chat-private-targets,
#chat-panel.chat-minimized #chat-input {
    display: none;
}

#loot-toast-container {
    position: fixed;
    top: calc(var(--orbryn-hud-top-offset, 24px) + 16px);
    right: calc(var(--minimap-size, 200px) + 42px + env(safe-area-inset-right, 0px));
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: min(280px, max(180px, calc(100vw - var(--minimap-size, 200px) - 72px)));
    pointer-events: none;
    z-index: 18;
}

.loot-toast {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(98, 231, 255, 0.34);
    background:
        linear-gradient(90deg, rgba(40, 211, 255, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(7, 18, 27, 0.94), rgba(3, 8, 16, 0.94));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: rgba(232, 240, 255, 0.95);
    backdrop-filter: blur(10px);
    animation: loot-toast-in 170ms ease-out;
}

.loot-toast.lt-compact {
    max-height: 176px;
    max-height: min(176px, 42dvh);
    padding: 8px 10px;
    border-radius: 10px;
    overflow: hidden;
}

.loot-toast.lt-elite {
    border-color: rgba(255, 210, 98, 0.58);
    box-shadow: 0 12px 30px rgba(120, 88, 10, 0.28), inset 0 0 0 1px rgba(255, 232, 150, 0.08);
}

.lt-header {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(126, 234, 255, 0.98);
}

.loot-toast.lt-compact .lt-header {
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loot-toast.lt-elite .lt-header {
    color: rgba(255, 222, 144, 0.98);
}

.lt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.35;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.loot-toast.lt-compact .lt-row {
    gap: 8px;
    font-size: 11px;
    line-height: 1.25;
}

.lt-row + .lt-row {
    margin-top: 4px;
}

.loot-toast.lt-compact .lt-row + .lt-row {
    margin-top: 2px;
}

.lt-name {
    color: rgba(226, 238, 244, 0.95);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-count {
    color: rgba(152, 240, 178, 0.98);
    font-weight: 700;
    white-space: nowrap;
}

.lt-more .lt-name,
.lt-more .lt-count {
    color: rgba(168, 190, 220, 0.82);
}

.lt-orbs .lt-count {
    color: rgba(118, 214, 255, 0.98);
}

.loot-toast.lt-fade-out {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

@keyframes loot-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Channel message colors */
.chat-msg {
    margin-bottom: 1px;
}
.chat-msg-game .chat-channel-tag   { color: #60c0ff; }
.chat-msg-public .chat-channel-tag { color: #cc99ff; }
.chat-msg-group .chat-channel-tag  { color: #50e080; }
.chat-msg-guild .chat-channel-tag  { color: #ffd166; }
.chat-msg-guild .chat-msg-body     { color: #ffe4a6; }
.chat-msg-private .chat-channel-tag { color: #ff66cc; }
.chat-msg-private .chat-msg-body    { color: #ff99dd; }
.chat-private-row {
    cursor: pointer;
}
.chat-private-row:hover .chat-msg-body {
    color: #ffd9f2;
}
.chat-channel-tag {
    font-weight: bold;
    font-size: 11px;
}
.chat-msg-body {
    color: #ccc;
}

/* Timestamp */
.chat-msg-time {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
    margin-right: 2px;
    flex-shrink: 0;
}

/* Legacy type colors (error/success feedback) */
.chat-type-error .chat-msg-body  { color: #ff5555; }
.chat-type-success .chat-msg-body { color: #50e080; }

/* Base upkeep alert colors */
.chat-type-warning .chat-msg-body { color: #ffaa00; }
.chat-type-danger .chat-msg-body  { color: #ff4444; }

/* Player messages */
.chat-type-player .chat-msg-body { color: #fff; }

.chat-type-orbryn-claim-common .chat-msg-body,
.chat-type-orbryn-claim-uncommon .chat-msg-body {
    color: #e7f7c7;
}

.chat-type-orbryn-claim-rare .chat-msg-body {
    color: #8ff7d5;
}

.chat-type-orbryn-claim-epic .chat-msg-body {
    color: #ffdf82;
    text-shadow: 0 0 8px rgba(255, 205, 92, 0.34);
}

.chat-type-orbryn-claim-legendary .chat-msg-body {
    color: #ffaf77;
    text-shadow: 0 0 10px rgba(255, 112, 62, 0.42);
}

.chat-type-orbryn-claim-mythic .chat-msg-body {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 226, 128, 0.72), 0 0 16px rgba(250, 90, 96, 0.48);
}

/* ORBRYN launch vault panel */
.orbryn-launch-vault-panel {
    position: absolute;
    top: calc(var(--orbryn-hud-top-offset, 24px) + 224px);
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: auto;
    z-index: 18;
    width: clamp(258px, 22vw, 332px);
    padding: 11px 11px 12px;
    border: 1px solid rgba(110, 230, 207, 0.42);
    border-radius: 11px;
    background:
        radial-gradient(120% 82% at 12% -10%, rgba(110, 232, 200, 0.16), transparent 58%),
        linear-gradient(152deg, rgba(11, 38, 43, 0.95), rgba(7, 11, 17, 0.96) 66%),
        linear-gradient(90deg, rgba(226, 171, 61, 0.12), rgba(75, 211, 188, 0.07));
    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(120, 240, 214, 0.06);
    color: rgba(238, 248, 242, 0.96);
    font-family: 'Courier New', monospace;
    pointer-events: auto;
    container-type: inline-size;
    backdrop-filter: blur(11px);
}

.sp-wallet-vault-stack {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sp-launch-vault-mount,
.sp-nft-vault-mount,
.sp-staking-vault-mount {
    min-width: 0;
}

.sp-staking-vault-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(93, 244, 182, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(140deg, rgba(4, 24, 22, 0.94), rgba(8, 12, 18, 0.97) 58%, rgba(29, 23, 9, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sp-staking-vault-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.sp-staking-kicker {
    color: rgba(93, 244, 182, 0.78);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.sp-staking-title {
    margin-top: 3px;
    color: rgba(245, 250, 247, 0.95);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.sp-staking-chip {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(160, 180, 190, 0.26);
    border-radius: 6px;
    background: rgba(160, 180, 190, 0.1);
    color: rgba(218, 228, 232, 0.86);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.sp-staking-chip--active {
    border-color: rgba(155, 240, 184, 0.42);
    background: rgba(155, 240, 184, 0.14);
    color: #c8ffda;
}

.sp-staking-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.sp-staking-metric,
.sp-staking-line {
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}

.sp-staking-metric strong,
.sp-staking-line strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sp-staking-metric span,
.sp-staking-line span {
    display: block;
    margin-top: 3px;
    color: rgba(214, 230, 220, 0.66);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sp-staking-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-staking-line span,
.sp-staking-line strong {
    margin-top: 0;
}

.sp-staking-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 6px;
}

.sp-staking-btn {
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(93, 244, 182, 0.28);
    border-radius: 6px;
    background: rgba(93, 244, 182, 0.1);
    color: #d8ffe9;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.sp-staking-btn-primary {
    border-color: rgba(93, 213, 244, 0.36);
    background: rgba(93, 213, 244, 0.12);
    color: #d7f7ff;
}

.sp-staking-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.sp-launch-vault-mount .orbryn-launch-vault-panel {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--orb-ui-mono, 'Courier New', monospace);
}

@media (max-width: 1180px) {
    .orbryn-launch-vault-panel {
        top: calc(var(--orbryn-hud-top-offset, 24px) + 224px);
        left: calc(16px + env(safe-area-inset-left, 0px));
        right: auto;
    }
}

.olv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 7px;
}

.olv-title-block {
    min-width: 0;
}

.olv-kicker,
.olv-primary-label,
.olv-stat-label {
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(190, 226, 213, 0.68);
}

.olv-title {
    margin-top: 2px;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    color: #fff7d7;
}

.olv-scale {
    overflow: hidden;
    margin-top: 4px;
    color: rgba(132, 238, 207, 0.86);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.olv-status-group {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.olv-live-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(150, 170, 180, 0.55);
    box-shadow: 0 0 0 0 rgba(95, 235, 155, 0);
}

.orbryn-launch-vault-panel.is-live .olv-live-dot {
    background: #66f0b4;
    animation: olv-live-pulse 2200ms ease-out infinite;
}

.orbryn-launch-vault-panel.is-inactive {
    border-color: rgba(255, 165, 86, 0.38);
}

.orbryn-launch-vault-panel.is-inactive .olv-live-dot {
    background: #ff9f56;
    animation: none;
    box-shadow: 0 0 10px rgba(255, 159, 86, 0.38);
}

@keyframes olv-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(95, 235, 155, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(95, 235, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(95, 235, 155, 0); }
}

.olv-status {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 3px 8px;
    border: 1px solid rgba(142, 242, 198, 0.3);
    border-radius: 999px;
    background: rgba(31, 76, 64, 0.46);
    color: rgba(191, 255, 222, 0.96);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.orbryn-launch-vault-panel.is-inactive .olv-status {
    border-color: rgba(255, 165, 86, 0.42);
    background: rgba(92, 48, 18, 0.52);
    color: #ffe2c3;
}

.olv-toggle {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 3px 7px;
    border: 1px solid rgba(106, 211, 196, 0.28);
    border-radius: 6px;
    background: rgba(4, 20, 28, 0.72);
    color: rgba(226, 252, 244, 0.9);
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.olv-toggle:hover,
.olv-toggle:focus-visible {
    border-color: rgba(255, 224, 138, 0.54);
    color: #fff4c8;
    outline: none;
}

.olv-primary {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 5px;
    margin-bottom: 6px;
}

.olv-primary-stat {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 7px 8px 8px 10px;
    border: 1px solid rgba(130, 224, 211, 0.18);
    border-radius: 8px;
    background: linear-gradient(150deg, rgba(8, 25, 34, 0.82), rgba(3, 10, 15, 0.58));
}

.olv-primary-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: rgba(95, 230, 189, 0.75);
}

.olv-primary-playerClaimedTotal {
    border-color: rgba(255, 224, 138, 0.38);
    background: linear-gradient(150deg, rgba(83, 58, 12, 0.46), rgba(8, 25, 34, 0.68));
}

.olv-primary-playerClaimedTotal::before {
    background: rgba(255, 216, 120, 0.85);
}

.olv-primary-label {
    color: rgba(190, 226, 213, 0.7);
}

.olv-primary-value {
    overflow: hidden;
    margin-top: 3px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olv-primary-playerClaimedTotal .olv-primary-value {
    color: #ffe08a;
    text-shadow: 0 0 12px rgba(255, 224, 138, 0.2);
}

.olv-primary-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 5px;
}

.olv-primary-unit {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(120, 232, 208, 0.14);
    color: rgba(176, 244, 226, 0.92);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.olv-primary-playerClaimedTotal .olv-primary-unit {
    background: rgba(255, 216, 120, 0.16);
    color: #ffe6a6;
}

.olv-wallet-link {
    overflow: hidden;
    color: rgba(190, 226, 213, 0.82);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olv-wallet-link:hover:not(.is-empty),
.olv-wallet-link:focus-visible:not(.is-empty) {
    color: #ffe9a8;
    text-decoration: underline;
    outline: none;
}

.olv-wallet-link.is-empty {
    color: rgba(190, 226, 213, 0.42);
    cursor: default;
    pointer-events: none;
}

.olv-primary-note {
    overflow: hidden;
    color: rgba(190, 226, 213, 0.6);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.olv-progress-track {
    height: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(2, 6, 10, 0.72);
}

.olv-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #55e6bd, #ffe08a, #ff7b63);
    box-shadow: 0 0 14px rgba(110, 232, 192, 0.36);
    transition: width 220ms ease;
}

.olv-window-copy {
    margin-top: 6px;
    padding: 6px 7px;
    border: 1px solid rgba(103, 221, 202, 0.18);
    border-radius: 6px;
    background: rgba(5, 21, 29, 0.52);
    color: rgba(232, 247, 242, 0.86);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.32;
}

.olv-schedule {
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 218, 126, 0.24);
    border-radius: 6px;
    background: rgba(82, 56, 18, 0.28);
    color: rgba(255, 239, 184, 0.96);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

.olv-details[hidden] {
    display: none;
}

.olv-details {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(139, 211, 201, 0.16);
}

.olv-receipt-copy {
    color: rgba(232, 247, 242, 0.84);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

.olv-receipt-list {
    display: grid;
    gap: 5px;
    margin-top: 6px;
}

.olv-receipt {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(98, 220, 202, 0.24);
    border-radius: 6px;
    background: rgba(3, 15, 22, 0.44);
    color: rgba(232, 252, 247, 0.92);
    text-decoration: none;
}

.olv-receipt:hover,
.olv-receipt:focus-visible {
    border-color: rgba(255, 224, 138, 0.5);
    background: rgba(76, 50, 10, 0.36);
    outline: none;
}

.olv-receipt-amount {
    overflow: hidden;
    color: #ffe08a;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olv-receipt-meta {
    overflow: hidden;
    color: rgba(190, 226, 213, 0.72);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.olv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.olv-stat {
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(144, 226, 214, 0.14);
    border-radius: 6px;
    background: rgba(3, 15, 22, 0.32);
}

.olv-stat-value {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.96);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olv-stat:nth-child(5) {
    border-color: rgba(255, 224, 138, 0.34);
    background: linear-gradient(135deg, rgba(97, 65, 15, 0.36), rgba(3, 15, 22, 0.32));
}

.olv-stat:nth-child(5) .olv-stat-value {
    color: #ffe08a;
}

.olv-eligibility {
    position: relative;
    margin-top: 7px;
    padding: 7px 8px 7px 20px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
}

.olv-eligibility::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

.olv-eligibility.is-eligible {
    border: 1px solid rgba(95, 235, 155, 0.42);
    background: rgba(17, 93, 52, 0.34);
    color: #d9ffe5;
}

.olv-eligibility.is-ineligible {
    border: 1px solid rgba(255, 165, 86, 0.38);
    background: rgba(92, 48, 18, 0.42);
    color: #ffe2c3;
}

.olv-eligibility.is-inactive {
    border: 1px solid rgba(255, 165, 86, 0.42);
    background: rgba(92, 48, 18, 0.5);
    color: #ffe2c3;
}

.olv-eligibility.is-unknown {
    border: 1px solid rgba(158, 190, 210, 0.22);
    background: rgba(21, 34, 44, 0.44);
    color: rgba(224, 238, 244, 0.78);
}

.olv-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 6px;
}

.olv-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid rgba(98, 220, 202, 0.26);
    border-radius: 6px;
    background: rgba(5, 28, 39, 0.66);
    color: rgba(232, 252, 247, 0.9);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.olv-action:hover,
.olv-action:focus-visible {
    border-color: rgba(255, 224, 138, 0.5);
    background: rgba(76, 50, 10, 0.48);
    color: #fff3bf;
    outline: none;
}

.olv-action-primary {
    border-color: rgba(255, 216, 120, 0.5);
    background: linear-gradient(135deg, rgba(255, 214, 110, 0.2), rgba(255, 180, 70, 0.12));
    color: #fff0c2;
}

.olv-action-primary:hover,
.olv-action-primary:focus-visible {
    border-color: rgba(255, 232, 150, 0.82);
    background: linear-gradient(135deg, rgba(255, 220, 120, 0.3), rgba(255, 188, 78, 0.2));
    color: #fff7d8;
}

@container (max-width: 360px) {
    .olv-primary {
        grid-template-columns: 1fr;
    }

    .olv-actions {
        grid-template-columns: 1fr;
    }
}

.olv-primary-value.is-rolling,
.olv-stat-value.is-rolling,
.olr-amount.is-rolling {
    animation: olv-number-roll 420ms cubic-bezier(.16, 1, .3, 1);
}

.orbryn-launch-vault-panel[class*="claim-pulse-"] {
    animation: olv-claim-pulse 850ms ease-out;
}

@keyframes olv-number-roll {
    0% {
        opacity: 0.58;
        transform: translateY(4px) scale(0.98);
        filter: blur(1px);
    }
    44% {
        opacity: 1;
        transform: translateY(-1px) scale(1.015);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.orbryn-launch-vault-panel.claim-pulse-epic,
.orbryn-launch-vault-panel.claim-pulse-legendary,
.orbryn-launch-vault-panel.claim-pulse-mythic {
    border-color: rgba(255, 216, 112, 0.7);
}

@keyframes olv-claim-pulse {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 0 rgba(255, 224, 138, 0);
    }
    32% {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.46), 0 0 24px rgba(255, 224, 138, 0.42);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 0 rgba(255, 224, 138, 0);
    }
}

.orbryn-launch-announcement {
    position: absolute;
    left: 50%;
    top: 18%;
    z-index: 72;
    width: min(760px, calc(100vw - 32px));
    padding: 18px 20px;
    border: 1px solid rgba(255, 226, 143, 0.58);
    border-radius: 8px;
    background:
        linear-gradient(100deg, rgba(70, 26, 34, 0.92), rgba(8, 18, 26, 0.94) 48%, rgba(62, 50, 18, 0.9)),
        linear-gradient(90deg, rgba(255, 219, 117, 0.18), rgba(96, 232, 208, 0.1));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 36px rgba(255, 206, 104, 0.24);
    color: #fffaf0;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
    animation: ola-enter 520ms ease-out, ola-breathe 1800ms ease-in-out infinite 520ms;
}

.orbryn-launch-announcement.hidden {
    display: none;
}

.ola-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffdd83;
}

.ola-message {
    margin-top: 8px;
    font-size: clamp(18px, 2.3vw, 31px);
    line-height: 1.14;
    font-weight: 900;
}

.ola-amount {
    margin-top: 9px;
    color: #9ff3dc;
    font-size: clamp(17px, 2vw, 26px);
    font-weight: 900;
}

.orbryn-launch-announcement.olv-tier-mythic {
    border-color: rgba(255, 245, 202, 0.82);
    box-shadow: 0 34px 92px rgba(0, 0, 0, 0.6), 0 0 48px rgba(255, 91, 91, 0.34), 0 0 62px rgba(255, 226, 142, 0.34);
}

.orbryn-launch-reward-burst {
    position: absolute;
    left: 50%;
    top: 27%;
    z-index: 78;
    width: min(310px, calc(100vw - 24px));
    min-width: 0;
    padding: 8px 10px 9px 12px;
    border: 1px solid rgba(74, 255, 199, 0.26);
    border-left: 3px solid rgba(74, 255, 199, 0.9);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(3, 17, 20, 0.95), rgba(3, 8, 14, 0.96)),
        linear-gradient(90deg, rgba(74, 255, 199, 0.14), rgba(255, 214, 102, 0.08));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(36, 255, 188, 0.14);
    color: #f5fff9;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    pointer-events: none;
    text-align: left;
    transform: translateX(-50%);
    animation: olr-pop 360ms cubic-bezier(.2, 1.05, .25, 1), olr-float 2800ms ease-out forwards;
}

.orbryn-launch-reward-burst.hidden {
    display: none;
}

.orbryn-launch-reward-burst::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(74, 255, 199, 0.95), rgba(255, 226, 126, 0.85), transparent);
    opacity: 0.82;
}

.olr-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #62ffd0;
}

.olr-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.olr-amount {
    margin-top: 2px;
    color: #ffe38a;
    font-size: clamp(20px, 3vw, 31px);
    font-weight: 900;
    line-height: 0.98;
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(255, 224, 138, 0.36);
}

.olr-detail {
    margin-top: 4px;
    color: rgba(219, 252, 241, 0.76);
    font-size: 9px;
    font-weight: 800;
}

.orbryn-launch-reward-burst.olv-tier-rare,
.orbryn-launch-reward-burst.olv-tier-epic,
.orbryn-launch-reward-burst.olv-tier-legendary,
.orbryn-launch-reward-burst.olv-tier-mythic {
    border-color: rgba(255, 228, 126, 0.7);
    border-left-color: rgba(255, 228, 126, 0.95);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.62), 0 0 30px rgba(255, 217, 112, 0.22);
}

@keyframes olr-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes olr-float {
    0%, 78% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px) scale(0.98);
    }
}

@keyframes ola-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes ola-breathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

@media (max-width: 760px) {
    .orbryn-launch-vault-panel {
        top: calc(218px + env(safe-area-inset-top, 0px));
        left: calc(8px + env(safe-area-inset-left, 0px));
        right: auto;
        width: min(294px, calc(100vw - 18px));
        padding: 8px;
    }

    .olv-header {
        gap: 5px;
    }

    .olv-status,
    .olv-toggle {
        min-width: 50px;
        padding-inline: 5px;
        font-size: 9px;
    }

    .olv-primary {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .olv-primary-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 7px;
    }

    .olv-primary-value {
        margin-top: 0;
        font-size: 16px;
    }

    .olv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .olv-stat-value {
        font-size: 11px;
    }

    .olv-eligibility {
        font-size: 10px;
    }

    .olv-actions {
        gap: 5px;
    }

    .orbryn-launch-announcement {
        top: 14%;
        padding: 14px;
    }

    .orbryn-launch-reward-burst {
        top: 25%;
        width: min(290px, calc(100vw - 20px));
        padding: 8px 10px;
    }
}

/* NFT manifestation panel */
.orbryn-nft-manifestation-panel {
    position: absolute;
    top: calc(var(--orbryn-hud-top-offset, 24px) + 174px);
    right: 16px;
    z-index: 24;
    container-type: inline-size;
    width: clamp(300px, 28vw, 520px);
    padding: 14px;
    border: 1px solid rgba(0, 217, 255, 0.32);
    border-radius: 8px;
    background:
        radial-gradient(ellipse 84% 72% at 7% 0%, rgba(0, 217, 255, 0.12), transparent 66%),
        radial-gradient(ellipse 76% 68% at 100% 10%, rgba(90, 55, 178, 0.14), transparent 64%),
        linear-gradient(145deg, rgba(5, 20, 29, 0.96), rgba(5, 7, 13, 0.96) 64%);
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f0efec;
    font-family: var(--orb-ui-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    pointer-events: auto;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sp-nft-vault-mount .orbryn-nft-manifestation-panel {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    width: 100%;
    box-sizing: border-box;
}

.onm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.onm-kicker {
    color: rgba(0, 217, 255, 0.72);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.onm-title {
    margin-top: 5px;
    color: #ecfeff;
    font-size: clamp(24px, 6.2cqi, 40px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.onm-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-width: 74px;
    padding: 9px 12px;
    border: 1px solid rgba(0, 217, 255, 0.32);
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.11);
    color: #73f4d1;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.onm-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 14px currentColor;
}

.onm-event,
.onm-empty {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 220, 140, 0.28);
    border-radius: 6px;
    background: rgba(72, 46, 13, 0.34);
    color: #ffe6b4;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.onm-empty {
    margin-bottom: 0;
    border-color: rgba(158, 190, 210, 0.22);
    background: rgba(21, 34, 44, 0.44);
    color: rgba(224, 238, 244, 0.78);
}

.onm-body {
    display: grid;
    gap: 14px;
}

.onm-vault-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.onm-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 72px;
    padding: 11px;
    border: 1px solid rgba(0, 217, 255, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(3, 16, 24, 0.58);
}

.onm-stat-violet {
    border-color: rgba(159, 96, 255, 0.28);
    background:
        linear-gradient(135deg, rgba(159, 96, 255, 0.13), rgba(255, 255, 255, 0.025)),
        rgba(3, 16, 24, 0.58);
}

.onm-stat-gold {
    border-color: rgba(255, 188, 58, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 164, 26, 0.14), rgba(255, 255, 255, 0.025)),
        rgba(3, 16, 24, 0.58);
}

.onm-stat-green {
    border-color: rgba(76, 255, 144, 0.28);
    background:
        linear-gradient(135deg, rgba(45, 210, 111, 0.14), rgba(255, 255, 255, 0.025)),
        rgba(3, 16, 24, 0.58);
}

.onm-stat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 217, 255, 0.26);
    border-radius: 8px;
    background: rgba(0, 217, 255, 0.13);
    color: #6ff5ff;
    font: 900 11px/1 var(--orb-ui-mono, "Courier New", monospace);
}

.onm-stat-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.onm-stat-value {
    color: #f7fbff;
    font-size: clamp(18px, 4.8cqi, 28px);
    line-height: 1;
}

.onm-stat-label {
    overflow: hidden;
    color: rgba(240, 239, 236, 0.68);
    font: 800 10px/1.15 var(--orb-ui-mono, "Courier New", monospace);
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onm-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(0, 217, 255, 0.24);
    border-radius: 8px;
    background:
        radial-gradient(ellipse 76% 72% at 0% 0%, rgba(0, 217, 255, 0.08), transparent 70%),
        linear-gradient(145deg, rgba(7, 20, 30, 0.86), rgba(4, 10, 17, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.onm-card.is-active {
    border-color: rgba(255, 214, 99, 0.34);
    background:
        radial-gradient(ellipse 74% 70% at 0% 0%, rgba(0, 217, 255, 0.1), transparent 70%),
        radial-gradient(ellipse 62% 60% at 100% 0%, rgba(255, 188, 58, 0.1), transparent 68%),
        linear-gradient(145deg, rgba(7, 20, 30, 0.88), rgba(4, 10, 17, 0.84));
}

.onm-card.is-transferred {
    border-color: rgba(255, 181, 95, 0.36);
    background: rgba(46, 24, 8, 0.46);
}

.onm-relic-hero {
    display: grid;
    grid-template-columns: minmax(94px, 0.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.onm-relic-art {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid rgba(255, 205, 79, 0.52);
    border-radius: 8px;
    background:
        radial-gradient(circle at 48% 42%, rgba(0, 217, 255, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(9, 42, 54, 0.94), rgba(3, 8, 14, 0.96));
    overflow: hidden;
}

.onm-relic-art img {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.onm-relic-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.onm-card-title {
    overflow: hidden;
    color: #f7fbff;
    font-size: clamp(24px, 5.8cqi, 36px);
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

.onm-mint,
.onm-supply {
    overflow: hidden;
    color: rgba(183, 219, 226, 0.72);
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onm-supply {
    color: rgba(222, 247, 232, 0.82);
}

.onm-owner-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: rgba(240, 239, 236, 0.56);
    font-size: 13px;
    font-weight: 800;
}

.onm-owner-line strong {
    min-width: 0;
    overflow: hidden;
    color: #35d8e7;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onm-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.onm-info-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(146, 178, 205, 0.2);
    border-radius: 8px;
    background: rgba(9, 25, 36, 0.6);
}

.onm-info-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 217, 255, 0.24);
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.1);
    color: #8cf9ff;
    font: 900 10px/1 var(--orb-ui-mono, "Courier New", monospace);
}

.onm-info-tile strong,
.onm-info-tile span:not(.onm-info-icon) {
    display: block;
    min-width: 0;
}

.onm-info-tile strong {
    color: #f7fbff;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.onm-info-tile span:not(.onm-info-icon) {
    margin-top: 5px;
    color: rgba(240, 239, 236, 0.67);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.onm-manifestation-detail {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.onm-manifestation-detail.is-transferred {
    border-top-color: rgba(255, 181, 95, 0.26);
}

.onm-clone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.onm-clone-title {
    overflow: hidden;
    color: #fff1b8;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

.onm-clone-id {
    color: rgba(159, 232, 241, 0.82);
}

.onm-vault-note {
    color: rgba(195, 221, 224, 0.74);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.onm-row,
.onm-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.onm-row {
    justify-content: space-between;
}

.onm-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    flex-wrap: wrap;
}

.onm-chip,
.onm-timer {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.onm-chip {
    overflow: hidden;
    max-width: 100%;
    border: 1px solid rgba(103, 232, 249, 0.2);
    background: rgba(34, 70, 82, 0.72);
    color: #dcfbff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onm-entitlement-badges {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.onm-entitlement-badges .onm-chip {
    max-width: none;
}

.onm-chip-owned {
    background: rgba(21, 96, 68, 0.72);
    color: #d9ffe9;
}

.onm-chip-clock {
    border: 1px solid rgba(255, 226, 142, 0.26);
    background: rgba(70, 53, 13, 0.42);
    color: #fff1b8;
}

.onm-chip-listed,
.onm-chip-pending {
    border: 1px solid rgba(255, 226, 142, 0.3);
    background: rgba(82, 55, 13, 0.72);
    color: #fff1b8;
}

.onm-chip-collection {
    border: 1px solid rgba(103, 232, 249, 0.28);
    background: rgba(11, 72, 83, 0.72);
    color: #d7fbff;
}

.onm-timer {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 226, 142, 0.38);
    background: rgba(70, 53, 13, 0.54);
    color: #fff1b8;
    font-variant-numeric: tabular-nums;
}

.onm-clock-row {
    align-items: center;
    padding: 0 2px;
}

.onm-clock-label {
    color: #fff1b8;
    font: 900 13px/1.1 var(--orb-ui-mono, "Courier New", monospace);
    text-transform: uppercase;
}

.onm-day-counter {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255, 226, 142, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(70, 53, 13, 0.36), rgba(10, 17, 22, 0.62)),
        rgba(44, 32, 8, 0.26);
}

.onm-day-counter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 240, 196, 0.78);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.onm-day-counter-top strong {
    color: #fff1b8;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.onm-day-counter-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.onm-day-counter-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f8d06a, #67e8f9);
    box-shadow: 0 0 12px rgba(103, 232, 249, 0.28);
}

.onm-day-counter-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: rgba(240, 239, 236, 0.62);
    font-size: 12px;
    line-height: 1.35;
}

.onm-day-counter-foot strong {
    flex: 0 0 auto;
    color: rgba(240, 239, 236, 0.78);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.onm-manifestation-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 217, 255, 0.055);
}

.onm-meta-line {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.onm-risk {
    padding: 6px 7px;
    border: 1px solid rgba(255, 181, 95, 0.26);
    border-radius: 6px;
    background: rgba(52, 37, 19, 0.42);
    color: rgba(255, 230, 190, 0.92);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

.onm-action,
.onm-refresh {
    min-height: 44px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(103, 232, 249, 0.32);
    border-radius: 8px;
    background: rgba(9, 52, 66, 0.72);
    color: #eaffff;
    font: 900 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onm-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(104px, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.onm-action:hover,
.onm-action:focus-visible,
.onm-refresh:hover,
.onm-refresh:focus-visible {
    border-color: rgba(177, 250, 255, 0.7);
    outline: none;
}

.onm-action:disabled {
    cursor: default;
    opacity: 0.55;
}

.onm-claimed-action:disabled {
    border-color: rgba(170, 184, 190, 0.22);
    background: rgba(43, 51, 56, 0.78);
    color: rgba(220, 232, 236, 0.72);
}

.onm-primary {
    background: rgba(18, 97, 80, 0.78);
}

.onm-detail-action {
    background: rgba(12, 75, 89, 0.74);
}

.onm-market {
    border-color: rgba(255, 226, 142, 0.34);
    background: rgba(91, 61, 12, 0.72);
    color: #fff2bd;
}

.onm-external-market {
    border-color: rgba(255, 226, 142, 0.38);
    background: linear-gradient(135deg, rgba(91, 61, 12, 0.82), rgba(12, 75, 89, 0.72));
    color: #fff2bd;
}

.onm-danger {
    border-color: rgba(255, 130, 98, 0.42);
    background: rgba(92, 31, 21, 0.72);
}

.onm-refresh {
    width: 100%;
}

@container (max-width: 430px) {
    .orbryn-nft-manifestation-panel {
        padding: 12px;
    }

    .onm-header {
        align-items: flex-start;
    }

    .onm-vault-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onm-stat {
        min-height: 60px;
        padding: 9px;
        gap: 8px;
    }

    .onm-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 9px;
    }

    .onm-relic-hero {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 12px;
    }

    .onm-card-title {
        font-size: 24px;
    }

    .onm-info-grid {
        grid-template-columns: 1fr;
    }

    .onm-clone-head,
    .onm-clock-row,
    .onm-day-counter-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .onm-actions,
    .onm-footer-actions {
        grid-template-columns: 1fr;
    }
}

.orbryn-external-market-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 8, 12, 0.72);
    backdrop-filter: blur(5px);
}

.orbryn-external-market-modal {
    width: min(420px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(103, 232, 249, 0.36);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(13, 35, 42, 0.98), rgba(15, 13, 20, 0.98)),
        rgba(3, 7, 12, 0.98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
    color: #eefbff;
}

.orbryn-external-market-modal-kicker {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.orbryn-external-market-modal-title {
    margin-top: 6px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.12;
}

.orbryn-external-market-modal-copy {
    margin: 12px 0 0;
    color: rgba(232, 244, 248, 0.82);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.orbryn-external-market-modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 10px;
    margin-top: 18px;
}

.orbryn-external-market-modal-primary,
.orbryn-external-market-modal-secondary {
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid rgba(103, 232, 249, 0.32);
    border-radius: 6px;
    font: 900 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
}

.orbryn-external-market-modal-primary {
    border-color: rgba(255, 226, 142, 0.52);
    background: rgba(91, 61, 12, 0.82);
    color: #fff2bd;
}

.orbryn-external-market-modal-secondary {
    background: rgba(9, 52, 66, 0.72);
    color: #eaffff;
}

.orbryn-external-market-modal-primary:hover,
.orbryn-external-market-modal-primary:focus-visible,
.orbryn-external-market-modal-secondary:hover,
.orbryn-external-market-modal-secondary:focus-visible {
    outline: none;
    border-color: rgba(177, 250, 255, 0.74);
}

@media (max-width: 760px) {
    .orbryn-nft-manifestation-panel {
        top: calc(238px + env(safe-area-inset-top, 0px));
        right: calc(8px + env(safe-area-inset-right, 0px));
        width: min(260px, calc(100vw - 18px));
        padding: 8px;
    }

    .onm-footer-actions,
    .orbryn-external-market-modal-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keeper spectator panel */
.keeper-spectator-panel {
    position: absolute;
    top: calc(var(--orbryn-hud-top-offset, 24px) + 174px);
    left: 16px;
    z-index: 24;
    width: clamp(250px, 22vw, 330px);
    padding: 10px;
    border: 1px solid rgba(141, 200, 255, 0.32);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 25, 44, 0.91), rgba(6, 13, 20, 0.93));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: rgba(235, 247, 255, 0.95);
    font-family: 'Courier New', monospace;
    pointer-events: auto;
    backdrop-filter: blur(9px);
}

.keeper-spectator-panel.is-active {
    border-color: rgba(112, 245, 214, 0.46);
}

.ksp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ksp-kicker {
    color: rgba(184, 219, 240, 0.7);
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ksp-title {
    margin-top: 2px;
    color: #f0fbff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.ksp-viewers {
    min-width: 62px;
    padding: 4px 6px;
    border: 1px solid rgba(141, 200, 255, 0.3);
    border-radius: 6px;
    background: rgba(18, 47, 74, 0.54);
    color: #dff5ff;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.ksp-toggle,
.ksp-mode,
.ksp-reaction {
    min-height: 28px;
    padding: 6px 8px;
    border: 1px solid rgba(141, 200, 255, 0.32);
    border-radius: 6px;
    background: rgba(12, 46, 72, 0.72);
    color: #eefaff;
    font: 900 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
}

.ksp-toggle {
    width: 100%;
    margin-bottom: 8px;
}

.ksp-modes,
.ksp-reactions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 8px;
}

.ksp-mode.is-active {
    border-color: rgba(112, 245, 214, 0.58);
    background: rgba(17, 88, 77, 0.78);
}

.ksp-mode:disabled,
.ksp-reaction:disabled {
    cursor: default;
    opacity: 0.45;
}

.ksp-fields {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.ksp-fields input {
    min-height: 28px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(141, 200, 255, 0.24);
    border-radius: 6px;
    background: rgba(5, 14, 24, 0.68);
    color: #f0fbff;
    font: 800 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ksp-prediction {
    margin-bottom: 8px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 226, 142, 0.24);
    border-radius: 6px;
    background: rgba(66, 51, 18, 0.34);
    color: rgba(255, 238, 190, 0.92);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
}

.ksp-event {
    padding: 6px 7px;
    border: 1px solid rgba(112, 245, 214, 0.24);
    border-radius: 6px;
    background: rgba(13, 61, 55, 0.34);
    color: rgba(220, 255, 246, 0.95);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
}

@media (max-width: 760px) {
    .keeper-spectator-panel {
        top: calc(406px + env(safe-area-inset-top, 0px));
        left: calc(8px + env(safe-area-inset-left, 0px));
        width: min(260px, calc(100vw - 18px));
        padding: 8px;
    }

    .ksp-modes,
    .ksp-reactions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Resize handle — bottom-right corner of chat panel (desktop only) */
.chat-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    cursor: nwse-resize;
    user-select: none;
    line-height: 1;
    transition: color 0.15s;
}
.chat-resize-handle:hover,
.chat-resize-handle.chat-resizing {
    color: rgba(100, 160, 255, 0.7);
}

/* ============================================
   SCREENS — Sci-fi Premium UI
   ============================================ */
.screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 25% 15%, rgba(20, 12, 45, 0.7) 0%, transparent 50%),
                radial-gradient(ellipse at 75% 85%, rgba(10, 30, 50, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(6, 5, 14, 0.98) 0%, rgba(3, 2, 8, 1) 100%);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

/* Animated grid overlay on all screens */
.screen::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(120, 80, 200, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 100, 180, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridDrift 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Slow scanline sweep */
.screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(100, 70, 180, 0.012) 2px,
        rgba(100, 70, 180, 0.012) 4px
    );
    pointer-events: none;
    z-index: 0;
    animation: scanlineSweep 8s linear infinite;
}

@keyframes gridDrift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(30px, 60px) rotate(0.5deg); }
}

@keyframes scanlineSweep {
    0% { opacity: 0.4; }
    50% { opacity: 0.7; }
    100% { opacity: 0.4; }
}

.screen.active {
    display: flex;
    animation: screenFadeIn 0.5s ease-out;
}

@keyframes screenFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Loading Screen --- */
#loading-screen {
    z-index: 150;
}

#loading-screen.orbryn-loading-reveal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.36s ease;
}

.loading-title {
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary, #e0e6f0);
    margin-bottom: 1.5rem;
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.loading-bar-container {
    width: 260px;
    height: 4px;
    background: rgba(60, 120, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3c78ff, #60c0ff);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.loading-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #667);
    letter-spacing: 0.1em;
}

/* --- Starvation vignette overlay (hunger == 0) --- */
.starvation-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(120, 0, 0, 0.45) 100%);
}
.starvation-overlay.active {
    opacity: 1;
    animation: starvationPulse 2.5s ease-in-out infinite;
}
@keyframes starvationPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* --- Death Screen: blood vignette + styling --- */
#gameover-screen {
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(80, 0, 0, 0.6) 100%),
        rgba(3, 5, 15, 0.94);
    animation: deathFadeIn 1.5s ease-out;
}

#gameover-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-shadow:
        inset 0 0 80px 30px rgba(120, 0, 0, 0.5),
        inset 0 0 200px 60px rgba(60, 0, 0, 0.4);
    animation: bloodPulse 3s ease-in-out infinite;
    background: none;
}

#gameover-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(140, 10, 10, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(100, 0, 0, 0.3) 0%, transparent 45%),
        radial-gradient(ellipse at 5% 85%, rgba(120, 5, 5, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(110, 0, 0, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 0%, rgba(80, 0, 0, 0.25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(80, 0, 0, 0.25) 0%, transparent 40%);
    animation: none;
}

#gameover-screen h2 {
    font-size: 3em;
    letter-spacing: 12px;
    color: #cc2020;
    text-shadow: 0 0 30px rgba(200, 0, 0, 0.6), 0 0 60px rgba(150, 0, 0, 0.3);
    animation: deathTextPulse 2.5s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

#gameover-screen p {
    color: #994444;
    font-size: 1em;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

#gameover-screen .screen-content {
    position: relative;
    z-index: 1;
}

@keyframes deathFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bloodPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes deathTextPulse {
    0%, 100% { text-shadow: 0 0 30px rgba(200, 0, 0, 0.6), 0 0 60px rgba(150, 0, 0, 0.3); }
    50% { text-shadow: 0 0 40px rgba(220, 0, 0, 0.8), 0 0 80px rgba(180, 0, 0, 0.4); }
}

/* --- Screen Content Panel (glassmorphism card) --- */
.screen-content {
    text-align: center;
    max-width: 460px;
    padding: 48px 44px;
    position: relative;
    z-index: 2;
    background: linear-gradient(165deg, rgba(14, 10, 28, 0.75) 0%, rgba(8, 12, 24, 0.7) 100%);
    border: 1px solid rgba(100, 80, 180, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow:
        0 0 60px rgba(80, 50, 160, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(160, 140, 255, 0.08);
    animation: panelSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle glowing top-edge accent on panels */
.screen-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(180, 140, 255, 0.4), rgba(100, 200, 220, 0.35), transparent);
    border-radius: 1px;
    filter: blur(0.5px);
}

@keyframes panelSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Tighten screen panels on narrow portrait screens */
@media (max-width: 480px) {
    .screen-content {
        max-width: 100%;
        padding: 32px 20px;
        margin: 0 12px;
        border-radius: 12px;
    }
}

/* --- Game Title: holographic gradient with animated shimmer --- */
.game-title {
    font-size: 4em;
    letter-spacing: 14px;
    margin-bottom: 6px;
    font-weight: 900;
    background: linear-gradient(
        135deg,
        #d4a04a 0%,
        #f0d080 20%,
        #c898f0 50%,
        #80c8e0 75%,
        #d4a04a 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(200, 160, 60, 0.35))
            drop-shadow(0 0 60px rgba(160, 100, 220, 0.2));
    position: relative;
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.game-tagline {
    font-size: 0.85em;
    color: rgba(180, 160, 200, 0.55);
    letter-spacing: 6px;
    margin-bottom: 36px;
    text-transform: uppercase;
    position: relative;
}

/* --- Buttons: Premium sci-fi with glow + scanline --- */
.btn-primary,
.btn-secondary {
    display: block;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    padding: 15px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 12px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Shared hover sweep effect */
.btn-primary::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-primary:focus-visible::after,
.btn-secondary:focus-visible::after {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #6a4a1a, #8a5a10);
    color: #f0e0c0;
    border: 1px solid rgba(210, 170, 80, 0.35);
    box-shadow: 0 0 20px rgba(200, 160, 60, 0.12),
                inset 0 1px 0 rgba(255, 220, 140, 0.12);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(135deg, #805c1e, #a06e18);
    border-color: rgba(230, 190, 100, 0.55);
    box-shadow: 0 0 30px rgba(210, 170, 60, 0.25),
                0 0 60px rgba(200, 160, 60, 0.1),
                inset 0 1px 0 rgba(255, 230, 160, 0.18);
    transform: translateY(-1px);
    color: #fff8e8;
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(200, 160, 60, 0.2);
}

.btn-secondary {
    background: rgba(16, 14, 28, 0.6);
    color: rgba(180, 170, 200, 0.7);
    border: 1px solid rgba(120, 100, 180, 0.12);
    box-shadow: inset 0 1px 0 rgba(140, 120, 200, 0.05);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: rgba(24, 20, 44, 0.75);
    color: rgba(210, 200, 230, 0.9);
    border-color: rgba(140, 120, 200, 0.28);
    box-shadow: 0 0 20px rgba(100, 80, 180, 0.1),
                inset 0 1px 0 rgba(160, 140, 220, 0.08);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(1px);
}


/* ============================================
   SAVE SLOTS & CHARACTER CREATION
   ============================================ */
.start-wide {
    max-width: 560px;
}

.save-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.save-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(10, 8, 22, 0.7);
    border: 1px solid rgba(100, 80, 160, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Animated left-edge accent on slots */
.save-slot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 3px;
    background: linear-gradient(180deg, rgba(200, 160, 60, 0.1), rgba(200, 160, 60, 0.35), rgba(200, 160, 60, 0.1));
    border-radius: 0 2px 2px 0;
    transition: all 0.3s ease;
    opacity: 0;
}

.save-slot:hover,
.save-slot:focus-visible {
    border-color: rgba(180, 140, 80, 0.25);
    background: rgba(16, 12, 30, 0.85);
    box-shadow: 0 4px 20px rgba(140, 100, 40, 0.08);
    transform: translateX(2px);
}

.save-slot:hover::before,
.save-slot:focus-visible::before {
    opacity: 1;
}

.save-slot.occupied {
    border-color: rgba(180, 150, 80, 0.18);
}

.save-slot.occupied::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(200, 170, 60, 0.15), rgba(200, 170, 60, 0.45), rgba(200, 170, 60, 0.15));
}

.slot-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.slot-label {
    font-size: 0.65em;
    color: rgba(160, 140, 180, 0.45);
    letter-spacing: 4px;
    text-transform: uppercase;
}

.slot-detail {
    font-size: 0.85em;
    color: rgba(140, 130, 160, 0.45);
    letter-spacing: 1px;
}

.slot-detail.has-data {
    color: rgba(200, 190, 210, 0.7);
}

.slot-char-name {
    font-size: 1.05em;
    color: #e0d0b0;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 0 12px rgba(200, 170, 80, 0.2);
}

.slot-char-stats {
    font-size: 0.75em;
    color: rgba(150, 140, 170, 0.5);
    letter-spacing: 1px;
    margin-top: 2px;
}

.slot-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-slot {
    font-family: 'Courier New', monospace;
    font-size: 0.72em;
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.25s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-slot::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
}

.btn-slot:hover::after,
.btn-slot:focus-visible::after {
    left: 100%;
}

.btn-new-char {
    background: linear-gradient(135deg, #5a4218, #7a5210);
    color: #f0ddb8;
    border: 1px solid rgba(200, 160, 60, 0.3);
}

.btn-new-char:hover,
.btn-new-char:focus-visible {
    box-shadow: 0 0 16px rgba(200, 160, 60, 0.25);
    border-color: rgba(220, 180, 80, 0.5);
    transform: translateY(-1px);
}

.btn-play-slot {
    background: linear-gradient(135deg, #1a5a30, #0e4220);
    color: #c0e8c8;
    border: 1px solid rgba(60, 160, 90, 0.3);
}

.btn-play-slot:hover,
.btn-play-slot:focus-visible {
    box-shadow: 0 0 16px rgba(60, 180, 90, 0.25);
    border-color: rgba(70, 200, 100, 0.45);
    transform: translateY(-1px);
}

.btn-delete-slot {
    background: rgba(100, 24, 24, 0.2);
    color: rgba(200, 110, 110, 0.7);
    border: 1px solid rgba(160, 40, 40, 0.25);
}

.btn-delete-slot:hover,
.btn-delete-slot:focus-visible {
    background: rgba(150, 35, 35, 0.35);
    color: #f09090;
    box-shadow: 0 0 12px rgba(180, 50, 50, 0.18);
    transform: translateY(-1px);
}

/* Character Creation Form */
.create-title {
    font-size: 2em;
    letter-spacing: 8px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #d4a050, #c090e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(200, 160, 80, 0.25));
}

.create-subtitle {
    font-size: 0.85em;
    color: rgba(160, 140, 180, 0.45);
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.create-form {
    margin-bottom: 24px;
}

.create-label {
    display: block;
    font-size: 0.75em;
    color: rgba(170, 150, 190, 0.5);
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.create-input {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    color: #ddd0c0;
    letter-spacing: 2px;
    background: rgba(8, 6, 18, 0.8);
    border: 1px solid rgba(120, 100, 160, 0.18);
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.create-input:focus {
    border-color: rgba(200, 160, 80, 0.4);
    box-shadow: 0 0 20px rgba(200, 160, 60, 0.1),
                inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.create-input::placeholder {
    color: rgba(120, 110, 140, 0.35);
    letter-spacing: 2px;
}

.create-hint {
    font-size: 0.7em;
    color: rgba(80, 100, 140, 0.4);
    letter-spacing: 1px;
    margin-top: 8px;
}

.create-input.invalid {
    border-color: rgba(200, 60, 60, 0.5);
    box-shadow: 0 0 16px rgba(200, 60, 60, 0.12),
                inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================
   AUTH SCREEN
   ============================================ */
.auth-content {
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
}

/* Tighten auth card on narrow portrait screens */
@media (max-width: 480px) {
    .auth-content {
        max-width: 100%;
        padding: 32px 20px;
    }
}

.auth-input {
    margin-bottom: 10px;
}

.auth-terms {
    margin-top: 16px;
    font-size: 0.65em;
    color: rgba(120, 140, 180, 0.5);
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.auth-error {
    background: rgba(180, 40, 40, 0.1);
    border: 1px solid rgba(200, 60, 60, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.8em;
    color: #f88;
    letter-spacing: 1px;
    box-shadow: 0 0 16px rgba(200, 50, 50, 0.08);
}

/* ── Server Status (character select lobby) ── */
.server-status {
    text-align: center;
    font-size: 0.8em;
    letter-spacing: 1.5px;
    color: var(--text-secondary, #aaa);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.server-dot {
    font-size: 0.9em;
    margin-right: 4px;
}
.server-dot.online { color: #4f4; }
.server-dot.offline { color: #f44; }
.server-dot.full { color: #fa0; }

.session-error {
    background: rgba(180, 40, 40, 0.15);
    border: 1px solid rgba(200, 60, 60, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 0.85em;
    color: #f88;
    letter-spacing: 1px;
    text-align: center;
}

.session-error--info {
    background: rgba(36, 84, 180, 0.16);
    border-color: rgba(82, 140, 255, 0.42);
    color: #9fc5ff;
}

.idle-notice {
    display: grid;
    gap: 6px;
    background:
        linear-gradient(90deg, rgba(46, 204, 150, 0.14), rgba(255, 198, 84, 0.08) 62%, transparent),
        rgba(6, 10, 16, 0.9);
    border: 1px solid rgba(96, 222, 174, 0.42);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    color: rgba(220, 255, 238, 0.94);
    text-align: center;
    box-shadow: 0 0 20px rgba(46, 204, 150, 0.08);
}

.idle-notice[hidden] {
    display: none;
}

.idle-notice-kicker {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(127, 236, 194, 0.82);
}

.idle-notice-title {
    font-family: 'Courier New', monospace;
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(181, 255, 218, 0.96);
}

.idle-notice-message {
    max-width: 680px;
    margin: 0 auto;
    font-size: 0.86em;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(218, 235, 232, 0.82);
}

.idle-notice-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.idle-notice-btn {
    padding: 8px 24px;
    font-family: 'Courier New', monospace;
    font-size: 0.86em;
    font-weight: 800;
    letter-spacing: 0;
    color: #061018;
    background: linear-gradient(180deg, rgba(140, 255, 214, 0.95), rgba(46, 204, 176, 0.9));
    border: 1px solid rgba(156, 255, 218, 0.82);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.idle-notice-btn:hover,
.idle-notice-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(230, 255, 244, 0.95);
}

.idle-notice-secondary-btn {
    color: rgba(232, 238, 255, 0.88);
    background: rgba(110, 128, 170, 0.14);
    border-color: rgba(150, 168, 210, 0.38);
}

.idle-notice-secondary-btn:hover,
.idle-notice-secondary-btn:focus-visible {
    background: rgba(110, 128, 170, 0.26);
}

.mm-extraction-alert {
    display: grid;
    gap: 4px;
    background:
        linear-gradient(90deg, rgba(255, 196, 64, 0.14), transparent 68%),
        rgba(8, 7, 6, 0.88);
    border: 1px solid rgba(255, 196, 64, 0.38);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: rgba(255, 242, 204, 0.94);
    text-align: left;
}

.mm-extraction-alert[hidden] {
    display: none;
}

.mm-extraction-kicker {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(255, 202, 82, 0.86);
}

.mm-extraction-alert strong {
    font-size: 14px;
    line-height: 1.2;
}

.mm-extraction-alert span:last-child {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 242, 204, 0.72);
}

/* ── Server Update Notice (character select lobby) ── */
.update-notice {
    background: rgba(40, 32, 10, 0.85);
    border: 1px solid rgba(204, 170, 50, 0.5);
    border-radius: 8px;
    padding: 18px 24px;
    margin-bottom: 16px;
    text-align: center;
    animation: update-notice-fadein 0.4s ease-out;
}

@keyframes update-notice-fadein {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.update-notice-icon {
    font-size: 1.6em;
    color: #ffcc00;
    margin-bottom: 4px;
}

.update-notice-title {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.update-notice-message {
    font-size: 0.85em;
    color: rgba(255, 220, 120, 0.8);
    letter-spacing: 0;
    line-height: 1.5;
}

.update-notice-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.update-notice-btn {
    padding: 8px 28px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    background: rgba(80, 200, 120, 0.2);
    border: 1px solid rgba(80, 200, 120, 0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.update-notice-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.update-notice-btn:hover,
.update-notice-btn:focus-visible {
    background: rgba(80, 200, 120, 0.35);
    border-color: rgba(80, 200, 120, 0.9);
}

.update-notice-secondary-btn {
    color: rgba(232, 238, 255, 0.88);
    background: rgba(110, 128, 170, 0.14);
    border-color: rgba(150, 168, 210, 0.38);
}

.update-notice-secondary-btn:hover,
.update-notice-secondary-btn:focus-visible {
    background: rgba(110, 128, 170, 0.26);
    border-color: rgba(180, 198, 240, 0.62);
}

.update-notice.ready .update-notice-icon {
    color: #50e080;
}

.update-notice.ready .update-notice-title {
    color: #50e080;
}

.update-notice.ready .update-notice-message {
    color: rgba(160, 240, 180, 0.85);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 18px;
    color: rgba(80, 100, 140, 0.5);
    font-size: 0.75em;
    letter-spacing: 3px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(80, 120, 200, 0.2), transparent);
}

.btn-google {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(20, 30, 60, 0.5);
}

.btn-google:hover,
.btn-google:focus-visible {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(30, 45, 80, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Email verification screen */
.verify-info {
    background: rgba(40, 60, 120, 0.1);
    border: 1px solid rgba(80, 120, 200, 0.15);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 0.8em;
    color: rgba(160, 180, 220, 0.8);
    letter-spacing: 1px;
    line-height: 1.6;
    text-align: center;
}

.verify-email {
    color: rgba(100, 180, 255, 0.9);
    font-weight: bold;
    margin: 8px 0;
    word-break: break-all;
}

.verify-success {
    background: rgba(40, 120, 60, 0.15);
    border: 1px solid rgba(60, 200, 80, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.8em;
    color: rgba(100, 230, 120, 0.9);
    letter-spacing: 1px;
    text-align: center;
}

.auth-loading {
    color: rgba(120, 150, 200, 0.6);
    letter-spacing: 4px;
    font-size: 0.85em;
    animation: loadingPulse 1.5s ease-in-out infinite;
}

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

/* User bar on start screen */
#auth-user-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 0.72em;
    color: rgba(160, 150, 180, 0.45);
    letter-spacing: 1px;
    padding: 8px 16px;
    background: rgba(10, 8, 22, 0.4);
    border: 1px solid rgba(100, 80, 160, 0.08);
    border-radius: 8px;
}

#auth-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.btn-signout {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    padding: 5px 14px;
    background: rgba(140, 30, 30, 0.15);
    border: 1px solid rgba(200, 60, 60, 0.2);
    border-radius: 5px;
    color: rgba(200, 120, 120, 0.7);
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.25s ease;
}

.btn-signout:hover,
.btn-signout:focus-visible {
    border-color: rgba(200, 60, 60, 0.5);
    color: #f88;
    background: rgba(180, 40, 40, 0.25);
    box-shadow: 0 0 12px rgba(200, 50, 50, 0.1);
}

/* Delete Confirmation */
.delete-title {
    font-size: 2em;
    letter-spacing: 6px;
    color: #e04040;
    margin-bottom: 12px;
    text-shadow: 0 0 20px rgba(200, 40, 40, 0.3);
}

.delete-detail {
    font-size: 0.9em;
    color: rgba(160, 160, 180, 0.7);
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-danger {
    display: block;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 1.05em;
    padding: 15px 32px;
    border: 1px solid rgba(200, 50, 50, 0.4);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 12px;
    transition: all 0.25s ease;
    background: linear-gradient(135deg, #8a1a1a, #6a1515);
    color: #ffcccc;
    box-shadow: 0 0 20px rgba(200, 50, 50, 0.1),
                inset 0 1px 0 rgba(255, 120, 120, 0.1);
    position: relative;
    overflow: hidden;
}

.btn-danger::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 100, 100, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-danger:hover::after,
.btn-danger:focus-visible::after {
    left: 100%;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background: linear-gradient(135deg, #a02020, #802020);
    box-shadow: 0 0 30px rgba(200, 50, 50, 0.3),
                0 0 60px rgba(200, 50, 50, 0.1),
                inset 0 1px 0 rgba(255, 140, 140, 0.15);
    border-color: rgba(220, 60, 60, 0.6);
    transform: translateY(-1px);
    color: #fff;
}

.btn-danger:active {
    transform: translateY(1px);
}

/* --- Pause Screen --- */
#pause-screen h2 {
    font-size: 2.4em;
    letter-spacing: 10px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #60a0ff, #a070ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px rgba(80, 120, 255, 0.3));
}

.pause-account-info {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: rgba(180, 200, 255, 0.6);
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

/* --- Controls Screen --- */
#controls-screen {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 63, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#controls-screen::-webkit-scrollbar { width: 4px; }
#controls-screen::-webkit-scrollbar-track { background: transparent; }
#controls-screen::-webkit-scrollbar-thumb { background: rgba(108, 63, 255, 0.4); border-radius: 2px; }

#controls-screen > .screen-content {
    max-width: 600px;
    width: 92%;
    margin: 40px auto;
    padding: 24px 20px 40px;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
}

.controls-title {
    font-size: 1.6em;
    letter-spacing: 6px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(108, 63, 255, 0.4));
}

.controls-input-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    justify-content: center;
}

.controls-tab {
    padding: 8px 16px;
    border: 1px solid rgba(108, 63, 255, 0.25);
    border-radius: 8px;
    background: rgba(108, 63, 255, 0.06);
    color: rgba(200, 190, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.controls-tab:hover,
.controls-tab:focus-visible {
    background: rgba(108, 63, 255, 0.15);
    color: rgba(220, 210, 255, 0.9);
}

.controls-tab.active {
    background: rgba(108, 63, 255, 0.25);
    border-color: rgba(108, 63, 255, 0.5);
    color: #c4b5fd;
}

.controls-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-bottom: 20px;
    width: 100%;
}

.controls-section {
    background: rgba(108, 63, 255, 0.04);
    border: 1px solid rgba(108, 63, 255, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
}

.controls-section-title {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    color: rgba(168, 132, 255, 0.9);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.12);
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    gap: 8px;
}

.control-key {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #c4b5fd;
    background: rgba(108, 63, 255, 0.1);
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(108, 63, 255, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
}

.control-desc {
    font-size: 11px;
    color: rgba(180, 180, 210, 0.7);
    letter-spacing: 0.5px;
    text-align: right;
    flex: 1;
    min-width: 0;
}

/* --- Settings Screen --- */
#settings-screen {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 63, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
#settings-screen::-webkit-scrollbar { width: 4px; }
#settings-screen::-webkit-scrollbar-track { background: transparent; }
#settings-screen::-webkit-scrollbar-thumb { background: rgba(108, 63, 255, 0.4); border-radius: 2px; }

#settings-screen > .screen-content {
    max-width: 600px;
    width: 92%;
    margin: 40px auto;
    padding: 24px 20px 40px;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
}

.settings-title {
    font-size: 1.6em;
    letter-spacing: 6px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(108, 63, 255, 0.4));
}

.settings-screen-section {
    background: rgba(108, 63, 255, 0.04);
    border: 1px solid rgba(108, 63, 255, 0.12);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.settings-screen-heading {
    color: var(--accent, #6c3fff);
    margin: 0 0 12px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.settings-screen-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #ccc;
}

.settings-screen-toggle input[type="checkbox"] {
    accent-color: var(--accent, #6c3fff);
    width: 16px;
    height: 16px;
}

.settings-screen-slider {
    display: none; /* using native checkbox */
}

.settings-screen-label {
    flex: 1;
}

.settings-screen-hint {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-top: 4px;
    line-height: 1.4;
}

.settings-input-mode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.settings-input-mode-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.settings-input-mode-option:hover {
    background: rgba(108, 63, 255, 0.08);
}

.settings-input-mode-option input[type="radio"] {
    accent-color: var(--accent, #6c3fff);
    width: 16px;
    height: 16px;
    margin: 0;
}

.settings-input-mode-reload {
    margin-top: 10px;
}

.settings-input-mode-reload[hidden] {
    display: none;
}

.settings-screen-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #ccc;
}

.settings-screen-range span:first-child {
    min-width: 120px;
}

.settings-screen-range input[type="range"] {
    flex: 1;
    accent-color: var(--accent, #6c3fff);
}

.settings-screen-range span:last-child {
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Debug Menu --- */
.debug-screen-content {
    max-width: 720px;
    width: 100%;
}

.debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.debug-header h2 {
    margin: 0;
}

.debug-close-btn {
    background: none;
    border: 1px solid rgba(140, 60, 60, 0.3);
    color: rgba(200, 140, 140, 0.8);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.debug-close-btn:hover {
    background: rgba(140, 40, 40, 0.3);
    border-color: rgba(200, 80, 80, 0.5);
    color: #ff8888;
}

.debug-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 90, 140, 0.3) transparent;
}

.debug-options::-webkit-scrollbar {
    width: 4px;
}

.debug-options::-webkit-scrollbar-thumb {
    background: rgba(60, 90, 140, 0.3);
    border-radius: 2px;
}

.debug-section {
    border: 1px solid rgba(60, 90, 140, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(10, 15, 30, 0.5);
    transition: border-color 0.2s ease;
}

.debug-section:hover {
    border-color: rgba(60, 90, 140, 0.35);
}

.debug-section-sync {
    grid-column: span 2;
}

.debug-section-inventory-trace {
    grid-column: span 2;
}

.debug-section-title {
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(100, 140, 255, 0.5);
    margin-bottom: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.debug-search {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 7px 10px;
    background: rgba(15, 20, 40, 0.8);
    color: rgba(200, 210, 230, 0.95);
    border: 1px solid rgba(60, 90, 140, 0.3);
    border-radius: 5px;
    outline: none;
    margin-bottom: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.debug-search::placeholder {
    color: rgba(120, 140, 180, 0.4);
}

.debug-search:focus {
    border-color: rgba(100, 140, 255, 0.5);
    box-shadow: 0 0 8px rgba(100, 140, 255, 0.1);
}

.debug-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.debug-row:last-child {
    margin-bottom: 0;
}

.debug-select {
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 4px 6px;
    background: rgba(15, 20, 40, 0.8);
    color: rgba(180, 195, 220, 0.9);
    border: 1px solid rgba(60, 90, 140, 0.3);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    margin-bottom: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 90, 140, 0.3) transparent;
}

.debug-select::-webkit-scrollbar {
    width: 4px;
}

.debug-select::-webkit-scrollbar-thumb {
    background: rgba(60, 90, 140, 0.4);
    border-radius: 2px;
}

.debug-select::-webkit-scrollbar-track {
    background: transparent;
}

.debug-select option {
    padding: 3px 6px;
    background: rgba(15, 20, 40, 0.95);
}

.debug-select option:checked {
    background: rgba(60, 90, 180, 0.4);
}

.debug-select:focus {
    border-color: rgba(100, 140, 255, 0.5);
}

.debug-sync-pill-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.debug-sync-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(70, 110, 180, 0.25);
    border-radius: 6px;
    background: rgba(12, 18, 34, 0.7);
}

.debug-sync-pill-label {
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(120, 145, 200, 0.55);
}

.debug-sync-pill-value {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: rgba(225, 235, 255, 0.92);
}

.debug-sync-pill-value[data-state="connected"] {
    color: #8ff0b0;
}

.debug-sync-pill-value[data-state="reconnecting"],
.debug-sync-pill-value[data-state="connecting"] {
    color: #ffd27f;
}

.debug-sync-pill-value[data-state="disconnected"],
.debug-sync-pill-value[data-state="error"] {
    color: #ff9898;
}

.debug-sync-summary {
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(80, 120, 190, 0.18);
    border-radius: 6px;
    background: rgba(8, 12, 24, 0.78);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(186, 205, 236, 0.88);
}

.debug-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.debug-sync-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(60, 90, 140, 0.2);
    border-radius: 6px;
    background: rgba(15, 20, 40, 0.68);
}

.debug-sync-metric span {
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(125, 150, 205, 0.62);
    text-transform: uppercase;
}

.debug-sync-metric strong {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(225, 235, 255, 0.92);
    text-align: right;
}

.debug-sync-actions {
    justify-content: flex-end;
    margin-bottom: 8px;
}

.debug-sync-json {
    margin: 0;
    padding: 10px;
    max-height: 220px;
    overflow: auto;
    border: 1px solid rgba(60, 90, 140, 0.25);
    border-radius: 6px;
    background: rgba(6, 10, 22, 0.92);
    color: rgba(176, 203, 255, 0.9);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 90, 140, 0.45) transparent;
}

.debug-sync-json::-webkit-scrollbar {
    width: 4px;
}

.debug-sync-json::-webkit-scrollbar-thumb {
    background: rgba(60, 90, 140, 0.45);
    border-radius: 2px;
}

.debug-inventory-json {
    max-height: 280px;
}

#debug-inventory-live-overlay {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99998;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 120px);
    padding: 10px;
    border: 1px solid rgba(90, 190, 255, 0.48);
    border-radius: 8px;
    background: rgba(5, 10, 22, 0.9);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: rgba(205, 230, 255, 0.94);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.35;
    pointer-events: auto;
    user-select: text;
    overflow: hidden;
}

#debug-inventory-live-overlay[hidden] {
    display: none;
}

#debug-inventory-live-overlay[data-severity="warning"] {
    border-color: rgba(255, 198, 90, 0.72);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.44), 0 0 18px rgba(255, 185, 70, 0.16);
}

#debug-inventory-live-overlay[data-severity="danger"] {
    border-color: rgba(255, 90, 90, 0.7);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 70, 70, 0.2);
}

#debug-inventory-live-overlay .dit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

#debug-inventory-live-overlay .dit-title-block {
    flex: 1 1 auto;
    min-width: 0;
}

#debug-inventory-live-overlay .dit-title {
    display: block;
    color: #8eeaff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#debug-inventory-live-overlay .dit-summary {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: rgba(220, 238, 255, 0.86);
    overflow-wrap: anywhere;
    white-space: normal;
}

#debug-inventory-live-overlay .dit-status-row {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.2fr;
    gap: 6px;
    margin-bottom: 6px;
}

#debug-inventory-live-overlay .dit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}

#debug-inventory-live-overlay .dit-grid-quad {
    grid-template-columns: 1fr 1fr;
}

#debug-inventory-live-overlay .dit-card {
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(90, 150, 220, 0.2);
    border-radius: 6px;
    background: rgba(10, 16, 32, 0.72);
}

#debug-inventory-live-overlay .dit-card-compact {
    padding: 6px;
}

#debug-inventory-live-overlay .dit-label {
    display: block;
    margin-bottom: 3px;
    color: rgba(135, 180, 225, 0.64);
    font-size: 8px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

#debug-inventory-live-overlay .dit-card strong {
    display: block;
    color: rgba(235, 245, 255, 0.94);
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
    white-space: normal;
}

#debug-inventory-live-overlay .dit-details,
#debug-inventory-live-overlay .dit-actions {
    margin: 0 0 4px;
    overflow: hidden;
    color: rgba(178, 207, 244, 0.86);
    overflow-wrap: anywhere;
    white-space: normal;
}

#debug-server-hud-state[data-state="connected"] {
    color: #92f4b2;
}

#debug-server-hud-state[data-state="connecting"],
#debug-server-hud-state[data-state="reconnecting"] {
    color: #ffd37e;
}

#debug-server-hud-state[data-state="disconnected"],
#debug-server-hud-state[data-state="error"] {
    color: #ff9a9a;
}

#debug-inventory-live-overlay .dit-actions {
    max-height: 82px;
    padding: 6px 7px;
    border: 1px solid rgba(90, 150, 220, 0.16);
    border-radius: 6px;
    background: rgba(3, 8, 18, 0.72);
    font-family: 'Courier New', monospace;
    font-size: 9px;
    line-height: 1.4;
    overflow: auto;
    white-space: pre-wrap;
}

#debug-inventory-live-overlay .dit-actions-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

#debug-inventory-live-overlay .dit-head-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

#debug-inventory-live-overlay button {
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid rgba(95, 205, 255, 0.35);
    border-radius: 4px;
    background: rgba(0, 160, 210, 0.16);
    color: #9eeaff;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

#debug-inventory-live-overlay button:hover {
    background: rgba(0, 180, 230, 0.28);
}

#debug-inventory-live-overlay.dit-collapsed {
    width: min(380px, calc(100vw - 24px));
    max-height: none;
}

#debug-inventory-live-overlay.dit-collapsed .dit-status-row,
#debug-inventory-live-overlay.dit-collapsed .dit-grid,
#debug-inventory-live-overlay.dit-collapsed .dit-details,
#debug-inventory-live-overlay.dit-collapsed .dit-actions {
    display: none;
}

/* Quantity row with preset buttons */
.debug-qty-row {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 2px;
}

.debug-qty-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(140, 160, 200, 0.5);
    margin-right: 2px;
    flex-shrink: 0;
}

.debug-qty-btn,
.debug-mob-qty-btn {
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 0;
    width: 34px;
    text-align: center;
    background: rgba(25, 35, 60, 0.7);
    color: rgba(160, 175, 210, 0.7);
    border: 1px solid rgba(60, 90, 140, 0.25);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.debug-qty-btn:hover,
.debug-mob-qty-btn:hover {
    background: rgba(35, 50, 80, 0.8);
    color: #cde;
    border-color: rgba(80, 120, 200, 0.4);
}

.debug-qty-btn.active,
.debug-mob-qty-btn.active {
    background: linear-gradient(180deg, rgba(95, 150, 255, 0.55), rgba(50, 100, 220, 0.6));
    color: #ffffff;
    border-color: rgba(160, 200, 255, 0.95);
    box-shadow:
        inset 0 0 0 1px rgba(180, 215, 255, 0.55),
        0 0 12px rgba(120, 170, 255, 0.55);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

.debug-qty-btn.active::after,
.debug-mob-qty-btn.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #9ecaff;
    box-shadow: 0 0 6px rgba(160, 200, 255, 0.95);
}

.debug-qty-x {
    font-style: italic;
    letter-spacing: 0;
}

.debug-qty-input {
    width: 54px;
    flex-shrink: 0;
}

.debug-give-btn {
    margin-left: auto;
}

@media (max-width: 820px) {
    #debug-inventory-live-overlay {
        top: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-height: 46vh;
        font-size: 9px;
    }

    #debug-inventory-live-overlay .dit-status-row,
    #debug-inventory-live-overlay .dit-grid-quad,
    #debug-inventory-live-overlay .dit-grid {
        grid-template-columns: 1fr;
    }

    .debug-section-sync,
    .debug-section-inventory-trace {
        grid-column: span 1;
    }

    .debug-sync-pill-row,
    .debug-sync-grid {
        grid-template-columns: 1fr;
    }

    .debug-sync-metric {
        align-items: flex-start;
        flex-direction: column;
    }

    .debug-sync-actions {
        justify-content: stretch;
    }

    .debug-sync-actions .debug-btn {
        flex: 1;
    }
}

.debug-input {
    width: 60px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 6px 8px;
    background: rgba(15, 20, 40, 0.8);
    color: rgba(180, 195, 220, 0.9);
    border: 1px solid rgba(60, 90, 140, 0.3);
    border-radius: 4px;
    outline: none;
    text-align: center;
    transition: border-color 0.15s ease;
}

.debug-input:focus {
    border-color: rgba(100, 140, 255, 0.5);
    box-shadow: 0 0 6px rgba(100, 140, 255, 0.1);
}

.debug-input-coord {
    width: 70px;
    flex: 1;
}

.debug-btn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #2a6030, #306828);
    color: #c0e8c0;
    border: 1px solid rgba(80, 180, 100, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.debug-btn:hover {
    background: linear-gradient(135deg, #358038, #408830);
    border-color: rgba(100, 200, 120, 0.5);
    box-shadow: 0 0 10px rgba(80, 180, 100, 0.2);
}

.debug-btn:active {
    transform: translateY(1px);
}

.debug-presets {
    flex-wrap: wrap;
}

.debug-btn-sm {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 4px 10px;
    background: rgba(30, 45, 70, 0.6);
    color: rgba(160, 175, 210, 0.7);
    border: 1px solid rgba(60, 90, 140, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.debug-btn-sm:hover {
    background: rgba(40, 60, 90, 0.7);
    color: #cde;
    border-color: rgba(80, 140, 255, 0.3);
}

.debug-toggles {
    flex-wrap: wrap;
}

.debug-btn-toggle {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    background: rgba(30, 20, 20, 0.6);
    color: rgba(200, 140, 140, 0.8);
    border: 1px solid rgba(140, 60, 60, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
    text-align: center;
}

.debug-btn-toggle.active {
    background: linear-gradient(135deg, #2a6030, #306828);
    color: #a0ffa0;
    border-color: rgba(80, 200, 100, 0.4);
    box-shadow: 0 0 10px rgba(80, 180, 100, 0.15);
}

.debug-btn-toggle:hover {
    border-color: rgba(160, 80, 80, 0.5);
}

.debug-btn-toggle.active:hover {
    border-color: rgba(100, 220, 120, 0.5);
}

/* Quick action buttons */
.debug-quick-actions {
    flex-wrap: wrap;
}

.debug-btn-action {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 7px 14px;
    background: rgba(30, 45, 70, 0.6);
    color: rgba(180, 195, 220, 0.85);
    border: 1px solid rgba(60, 90, 140, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
    text-align: center;
}

.debug-btn-action:hover {
    background: rgba(40, 60, 100, 0.7);
    color: #dde4f0;
    border-color: rgba(80, 120, 200, 0.4);
    box-shadow: 0 0 8px rgba(80, 120, 200, 0.15);
}

.debug-btn-action:active {
    transform: translateY(1px);
}

.debug-btn-danger {
    background: rgba(60, 20, 20, 0.6);
    color: rgba(220, 140, 140, 0.85);
    border-color: rgba(140, 60, 60, 0.3);
}

.debug-btn-danger:hover {
    background: rgba(80, 25, 25, 0.7);
    color: #ffaaaa;
    border-color: rgba(200, 80, 80, 0.4);
    box-shadow: 0 0 8px rgba(200, 60, 60, 0.15);
}

/* --- Debug Loadout Grid --- */
.debug-loadout-section {
    grid-column: 1 / -1;
}

.debug-loadout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    justify-items: center;
    padding: 8px 0;
}

.debug-loadout-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

.debug-loadout-label {
    font-family: 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(120, 150, 200, 0.6);
    text-transform: uppercase;
}

.debug-loadout-select {
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 3px 2px;
    background: rgba(0, 0, 0, 0.5);
    color: #b0c4e0;
    border: 1px solid rgba(80, 120, 200, 0.2);
    border-radius: 3px;
    cursor: pointer;
    outline: none;
}

.debug-loadout-select:focus {
    border-color: rgba(80, 160, 255, 0.5);
}

.debug-loadout-select:disabled {
    opacity: 0.35;
    cursor: default;
}

.debug-loadout-spacer {
    width: 100%;
    min-height: 1px;
}

.debug-loadout-ammo-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Debug menu mobile: single column */
@media (pointer: coarse), (max-width: 600px) {
    .debug-screen-content {
        max-width: 95vw;
    }
    .debug-options {
        grid-template-columns: 1fr;
    }
}

/* Debug menu refresh: scoped presentation only */
#debug-screen {
    --debug-bg: #050507;
    --debug-panel: #090a0f;
    --debug-surface: #101219;
    --debug-surface-raised: #151822;
    --debug-line: rgba(255, 255, 255, 0.12);
    --debug-line-strong: rgba(255, 255, 255, 0.22);
    --debug-text: #f2f4f8;
    --debug-muted: #9ca6b8;
    --debug-dim: #6f7887;
    --debug-cyan: #62d7f2;
    --debug-green: #6ee7a8;
    --debug-amber: #d8ad61;
    --debug-red: #ff7d7d;
    align-items: center;
    background: rgba(5, 5, 7, 0.94);
    color: var(--debug-text);
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

#debug-screen.active {
    display: flex;
}

#debug-screen .debug-screen-content {
    width: min(1180px, 100%);
    max-width: none;
    max-height: min(900px, calc(100vh - 36px));
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--debug-line);
    border-radius: 8px;
    background: var(--debug-panel);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

#debug-screen .debug-header {
    margin: 0;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--debug-line);
    background: #050507;
}

#debug-screen .debug-title-block {
    min-width: 0;
}

#debug-screen .debug-kicker {
    margin: 0 0 4px;
    color: var(--debug-cyan);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

#debug-screen .debug-header h2 {
    margin: 0;
    color: var(--debug-text);
    font-family: var(--o-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 28px;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
}

#debug-screen .debug-close-btn {
    width: auto;
    min-width: 72px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--debug-line-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--debug-text);
    font-family: var(--o-sans, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
}

#debug-screen .debug-close-btn:hover,
#debug-screen .debug-close-btn:focus-visible {
    background: var(--debug-surface-raised);
    border-color: var(--debug-cyan);
    color: var(--debug-cyan);
    outline: none;
}

#debug-screen .debug-nav {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--debug-line);
    background: #07080d;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 215, 242, 0.45) transparent;
}

#debug-screen .debug-nav::-webkit-scrollbar,
#debug-screen .debug-options::-webkit-scrollbar,
#debug-screen .debug-select::-webkit-scrollbar,
#debug-screen .debug-sync-json::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#debug-screen .debug-nav::-webkit-scrollbar-thumb,
#debug-screen .debug-options::-webkit-scrollbar-thumb,
#debug-screen .debug-select::-webkit-scrollbar-thumb,
#debug-screen .debug-sync-json::-webkit-scrollbar-thumb {
    background: rgba(98, 215, 242, 0.42);
    border-radius: 6px;
}

#debug-screen .debug-nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    background: var(--debug-surface);
    color: var(--debug-muted);
    font-family: var(--o-sans, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

#debug-screen .debug-nav a:hover,
#debug-screen .debug-nav a:focus-visible {
    border-color: var(--debug-cyan);
    color: var(--debug-text);
    outline: none;
}

#debug-screen .debug-options {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 14px 18px 18px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 12px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 215, 242, 0.42) transparent;
    background: var(--debug-bg);
}

#debug-screen .debug-section {
    grid-column: span 4;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--debug-line);
    border-radius: 8px;
    background: var(--debug-surface);
    box-shadow: none;
    transition: border-color 0.16s ease, background-color 0.16s ease;
    scroll-margin-top: 14px;
}

#debug-screen .debug-section:hover {
    border-color: var(--debug-line-strong);
    background: var(--debug-surface-raised);
}

#debug-screen .debug-section-actions { order: 1; }
#debug-screen .debug-section-items { order: 2; }
#debug-screen .debug-section-loadout { order: 4; }
#debug-screen .debug-section-travel { order: 7; }
#debug-screen .debug-section-spawn { order: 8; }

#debug-screen .debug-section-items,
#debug-screen .debug-section-spawn,
#debug-screen .debug-loadout-section,
#debug-screen .debug-section-diagnostics {
    grid-column: span 6;
}

#debug-screen .debug-section-title,
#debug-screen .debug-loadout-label,
#debug-screen .debug-qty-label,
#debug-screen .debug-sync-pill-label,
#debug-screen .debug-sync-metric span {
    color: var(--debug-muted);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

#debug-screen .debug-section-title {
    margin: 0 0 10px;
}

#debug-screen .debug-section-summary {
    margin: -4px -2px 10px;
    padding: 4px 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

#debug-screen .debug-section-summary::-webkit-details-marker {
    display: none;
}

#debug-screen .debug-section-summary::after {
    content: "+";
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    color: var(--debug-cyan);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 16px;
    line-height: 1;
}

#debug-screen details[open] > .debug-section-summary::after {
    content: "-";
}

#debug-screen .debug-section-summary .debug-section-title {
    margin: 0;
}

#debug-screen .debug-section-tag {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid rgba(216, 173, 97, 0.35);
    border-radius: 6px;
    color: var(--debug-amber);
    font-family: var(--o-sans, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
}

#debug-screen .debug-row,
#debug-screen .debug-qty-row,
#debug-screen .debug-loadout-actions,
#debug-screen .debug-loadout-ammo-qty {
    gap: 8px;
}

/* Give qty-row enough bottom space for the LOCKED badge under the active button */
#debug-screen .debug-qty-row {
    padding-bottom: 14px;
    flex-wrap: wrap;
    row-gap: 14px;
}

/* Loadout presets row */
#debug-screen .debug-loadout-presets {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

#debug-screen .debug-loadout-presets .debug-btn {
    min-width: 44px;
    padding: 6px 10px;
    font-size: 12px;
}

#debug-screen .debug-loadout-presets .debug-preset-divider {
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(120, 150, 200, 0.25);
}

#debug-screen .debug-loadout-preset-save {
    border-color: rgba(240, 200, 110, 0.5) !important;
    color: #f6d28e !important;
}

#debug-screen .debug-loadout-preset-save:hover {
    background: rgba(240, 200, 110, 0.12) !important;
    border-color: rgba(240, 200, 110, 0.9) !important;
}

.debug-loadout-preset-status {
    min-height: 14px;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(160, 200, 255, 0.75);
}

.debug-loadout-preset-status[data-tone="success"] {
    color: #9bf0c0;
}

.debug-loadout-preset-status[data-tone="warn"] {
    color: #f4c66a;
}

/* Skill row inside Quick Actions */
#debug-screen .debug-skill-row {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#debug-screen .debug-skill-row .debug-select {
    flex: 1 1 140px;
    min-width: 140px;
}

#debug-screen .debug-row {
    align-items: stretch;
    margin-bottom: 8px;
}

#debug-screen .debug-row:last-child {
    margin-bottom: 0;
}

#debug-screen .debug-quick-actions,
#debug-screen .debug-toggles {
    flex-wrap: wrap;
}

#debug-screen .debug-danger-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 125, 125, 0.18);
}

#debug-screen .debug-quest-row {
    margin-top: 8px;
}

#debug-screen .debug-quest-row .debug-select {
    flex: 1 1 180px;
    min-height: 36px;
    margin-bottom: 0;
}

#debug-screen .debug-search,
#debug-screen .debug-select,
#debug-screen .debug-input,
#debug-screen .debug-loadout-select {
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    background: #080910;
    color: var(--debug-text);
    font-family: var(--o-sans, system-ui, sans-serif);
    font-size: 13px;
    letter-spacing: 0;
    outline: none;
}

#debug-screen .debug-search,
#debug-screen .debug-input {
    min-height: 36px;
    padding: 8px 10px;
}

#debug-screen .debug-select,
#debug-screen .debug-loadout-select {
    padding: 7px 9px;
}

#debug-screen .debug-search::placeholder {
    color: var(--debug-dim);
}

#debug-screen .debug-search:focus,
#debug-screen .debug-select:focus,
#debug-screen .debug-input:focus,
#debug-screen .debug-loadout-select:focus {
    border-color: var(--debug-cyan);
    box-shadow: 0 0 0 2px rgba(98, 215, 242, 0.12);
}

#debug-screen .debug-select option {
    background: #090a0f;
    color: var(--debug-text);
}

#debug-screen #debug-item-select {
    min-height: 188px;
}

#debug-screen #debug-mob-select {
    min-height: 132px;
}

#debug-screen .debug-input {
    width: 68px;
    text-align: center;
}

#debug-screen .debug-level-input,
#debug-screen .debug-ammo-input {
    width: 70px;
}

#debug-screen .debug-btn,
#debug-screen .debug-btn-sm,
#debug-screen .debug-btn-toggle,
#debug-screen .debug-btn-action,
#debug-screen .debug-qty-btn,
#debug-screen .debug-mob-qty-btn {
    position: relative;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    background: #151822;
    color: var(--debug-text);
    font-family: var(--o-sans, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 680;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: normal;
    cursor: pointer;
    box-shadow: none;
}

#debug-screen .debug-btn:hover,
#debug-screen .debug-btn-sm:hover,
#debug-screen .debug-btn-toggle:hover,
#debug-screen .debug-btn-action:hover,
#debug-screen .debug-qty-btn:hover,
#debug-screen .debug-mob-qty-btn:hover,
#debug-screen .debug-btn:focus-visible,
#debug-screen .debug-btn-sm:focus-visible,
#debug-screen .debug-btn-toggle:focus-visible,
#debug-screen .debug-btn-action:focus-visible,
#debug-screen .debug-qty-btn:focus-visible,
#debug-screen .debug-mob-qty-btn:focus-visible {
    border-color: var(--debug-cyan);
    background: #1b202c;
    color: var(--debug-text);
    outline: none;
}

#debug-screen .debug-btn:active,
#debug-screen .debug-btn-action:active,
#debug-screen .debug-btn-toggle:active {
    transform: translateY(1px);
}

#debug-screen .debug-give-btn,
#debug-screen .debug-btn-toggle.active {
    border-color: rgba(110, 231, 168, 0.48);
    background: rgba(110, 231, 168, 0.13);
    color: #c8ffdf;
}

#debug-screen .debug-qty-btn.active,
#debug-screen .debug-mob-qty-btn.active {
    border-color: rgba(140, 255, 200, 0.95);
    background: linear-gradient(180deg, rgba(110, 231, 168, 0.36), rgba(70, 180, 130, 0.42));
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(180, 255, 220, 0.65),
        0 0 14px rgba(110, 231, 168, 0.55);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

#debug-screen .debug-qty-btn.active::after,
#debug-screen .debug-mob-qty-btn.active::after {
    content: 'LOCKED';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b8ffd6;
    text-shadow: 0 0 6px rgba(110, 231, 168, 0.85);
    pointer-events: none;
    white-space: nowrap;
}

#debug-screen .debug-btn-danger {
    border-color: rgba(255, 125, 125, 0.42);
    background: rgba(255, 125, 125, 0.1);
    color: #ffc2c2;
}

#debug-screen .debug-btn-danger:hover,
#debug-screen .debug-btn-danger:focus-visible {
    border-color: rgba(255, 125, 125, 0.74);
    background: rgba(255, 125, 125, 0.16);
    color: #ffffff;
}

#debug-screen .debug-sync-pill-row,
#debug-screen .debug-sync-grid {
    gap: 8px;
}

#debug-screen .debug-sync-pill,
#debug-screen .debug-sync-metric,
#debug-screen .debug-sync-summary,
#debug-screen .debug-sync-json {
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    background: #080910;
}

#debug-screen .debug-sync-pill-value,
#debug-screen .debug-sync-metric strong,
#debug-screen .debug-sync-summary,
#debug-screen .debug-sync-json {
    color: var(--debug-text);
    font-family: var(--o-mono, 'Courier New', monospace);
    letter-spacing: 0;
}

#debug-screen .debug-sync-json {
    max-height: 260px;
}

#debug-screen .debug-sync-actions {
    justify-content: flex-start;
}

#debug-screen .debug-loadout-grid {
    gap: 8px;
    padding: 0;
}

#debug-screen .debug-loadout-slot {
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--debug-line);
    border-radius: 6px;
    background: #080910;
}

#debug-screen .debug-loadout-select {
    width: 100%;
    min-height: 34px;
}

#debug-screen .debug-loadout-actions {
    margin-top: 10px;
}

#debug-screen .debug-loadout-actions .debug-btn,
#debug-screen .debug-loadout-actions .debug-btn-action {
    flex: 1 1 0;
}

@media (max-width: 1060px) {
    #debug-screen .debug-section {
        grid-column: span 6;
    }

    #debug-screen .debug-section-diagnostics,
    #debug-screen .debug-loadout-section {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px), (pointer: coarse) {
    #debug-screen {
        align-items: stretch;
        padding: 10px;
    }

    #debug-screen .debug-screen-content {
        width: 100%;
        max-height: calc(100vh - 20px);
    }

    #debug-screen .debug-header {
        padding: 14px;
    }

    #debug-screen .debug-header h2 {
        font-size: 22px;
    }

    #debug-screen .debug-close-btn {
        min-width: 64px;
        height: 36px;
    }

    #debug-screen .debug-nav {
        padding: 10px 14px;
    }

    #debug-screen .debug-options {
        grid-template-columns: 1fr;
        padding: 12px 14px 16px;
    }

    #debug-screen .debug-section,
    #debug-screen .debug-section-items,
    #debug-screen .debug-section-spawn,
    #debug-screen .debug-loadout-section,
    #debug-screen .debug-section-diagnostics {
        grid-column: 1 / -1;
    }

    #debug-screen .debug-sync-pill-row,
    #debug-screen .debug-sync-grid,
    #debug-screen .debug-loadout-grid {
        grid-template-columns: 1fr;
    }

    #debug-screen .debug-row,
    #debug-screen .debug-qty-row {
        flex-wrap: wrap;
    }

    #debug-screen .debug-btn,
    #debug-screen .debug-btn-sm,
    #debug-screen .debug-btn-toggle,
    #debug-screen .debug-btn-action {
        flex: 1 1 132px;
    }
}

/* --- Mob HP Bars with Level Indicators (DOM-positioned) --- */
.mob-hp-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    pointer-events: none;
    z-index: 12;
    text-align: center;
    /* will-change removed */
}

.mob-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    white-space: nowrap;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.mob-level-text {
    font-weight: bold;
    color: #cccc44;
}

.mob-level-text[data-level-diff="green"] { color: #44dd44; }
.mob-level-text[data-level-diff="yellow"] { color: #cccc44; }
.mob-level-text[data-level-diff="orange"] { color: #ff8844; }
.mob-level-text[data-level-diff="red"] { color: #ff4444; }
.mob-level-text[data-level-diff="skull"]::before { content: "\2620 "; }
.mob-level-text[data-level-diff="skull"] { color: #ff2222; }

.mob-name-text {
    color: rgba(220, 220, 240, 0.8);
    font-size: 8px;
}

.mob-hp-track {
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
}

.mob-hp-bar--label-only .mob-label {
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.mob-hp-bar--label-only .mob-hp-track {
    display: none;
}

.mob-hp-fill {
    height: 100%;
    background: #e04040;
    border-radius: 2px;
    transition: width 0.15s ease;
}

/* --- Target Lock Info (top-center, below XP orb area) --- */
.target-info {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Courier New', monospace;
    z-index: 24;
    pointer-events: none;
    min-width: 120px;
    padding: 6px 14px;
    background: rgba(8, 12, 28, 0.85);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.target-name {
    font-size: 13px;
    font-weight: bold;
    color: #ff6644;
    letter-spacing: 1px;
}

.target-level {
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
    margin-left: 6px;
}

.target-hp-bar {
    margin-top: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.target-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #c03030, #e04040);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* --- Floating Damage Numbers --- */
.damage-number {
    position: absolute;
    min-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: var(--damage-color, #fff7e8);
    text-shadow:
        0 2px 0 rgba(40, 0, 0, 0.9),
        1px 0 0 rgba(40, 0, 0, 0.9),
        -1px 0 0 rgba(40, 0, 0, 0.9),
        0 0 8px rgba(255, 230, 170, 0.35);
    pointer-events: none;
    z-index: 20;
    transform: translateX(-50%) translateY(0) scale(0.96);
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.5));
    isolation: isolate;
    animation: dmg-float 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.damage-number::before {
    content: '';
    position: absolute;
    inset: -7px -9px;
    z-index: -1;
    background:
        radial-gradient(circle at 52% 45%, rgba(255, 92, 52, 0.98) 0 35%, rgba(189, 18, 14, 0.98) 58%, rgba(84, 4, 9, 0.95) 100%);
    border: 2px solid rgba(255, 224, 156, 0.9);
    clip-path: polygon(
        50% 0%, 58% 14%, 72% 5%, 75% 21%, 94% 18%, 86% 35%,
        100% 48%, 84% 58%, 94% 76%, 75% 73%, 71% 95%, 56% 82%,
        48% 100%, 40% 82%, 24% 94%, 23% 75%, 3% 76%, 15% 58%,
        0% 47%, 15% 36%, 5% 18%, 25% 22%, 29% 4%, 42% 15%
    );
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.18),
        inset 0 -8px 12px rgba(40, 0, 0, 0.34),
        0 0 12px rgba(255, 52, 31, 0.28);
}

.damage-number--miss {
    color: #8ff6ff;
    text-shadow:
        0 2px 0 rgba(10, 3, 55, 0.98),
        1px 0 0 rgba(10, 3, 55, 0.98),
        -1px 0 0 rgba(10, 3, 55, 0.98),
        0 0 11px rgba(110, 247, 255, 0.6);
}

.damage-number--miss::before {
    background:
        radial-gradient(circle at 52% 45%, rgba(96, 84, 255, 0.98) 0 34%, rgba(65, 28, 180, 0.98) 58%, rgba(17, 9, 72, 0.95) 100%);
    border-color: rgba(143, 246, 255, 0.96);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.2),
        inset 0 -8px 12px rgba(15, 0, 70, 0.4),
        0 0 13px rgba(109, 88, 255, 0.38);
}

.damage-number--heal::before {
    background:
        radial-gradient(circle at 52% 45%, rgba(94, 245, 132, 0.98) 0 34%, rgba(24, 146, 69, 0.98) 58%, rgba(8, 62, 36, 0.95) 100%);
    border-color: rgba(201, 255, 207, 0.9);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.16),
        inset 0 -8px 12px rgba(0, 50, 20, 0.34),
        0 0 12px rgba(84, 255, 120, 0.26);
}

.damage-number--immune::before {
    background:
        radial-gradient(circle at 52% 45%, rgba(132, 242, 255, 0.98) 0 34%, rgba(45, 132, 166, 0.98) 58%, rgba(14, 54, 78, 0.95) 100%);
    border-color: rgba(211, 251, 255, 0.92);
}

@keyframes dmg-float {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.65); }
    14% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.16); }
    28% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-54px) scale(0.78); }
}

/* --- Floating Messages (above player head) --- */
.floating-message {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 25;
    transform: translateX(-50%);
    max-width: 320px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    animation: msg-float 2.5s ease-out forwards;
}

.floating-message--error {
    color: #ff5555;
    border: 1px solid rgba(255, 60, 60, 0.4);
}

.floating-message--success {
    color: #55ff88;
    border: 1px solid rgba(60, 255, 100, 0.4);
}

.floating-message--warning {
    color: #ffbb44;
    border: 1px solid rgba(255, 187, 68, 0.4);
}

.floating-message--danger {
    color: #ff3333;
    border: 1px solid rgba(255, 50, 50, 0.5);
    text-shadow: 0 0 8px rgba(255, 50, 50, 0.6);
}

@keyframes msg-float {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

/* ============================================
   XP ORBS CONTAINER (RuneScape-style, top-center)
   Multiple skill orbs shown side-by-side.
   ============================================ */
#xp-orbs-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
    z-index: 25;
}

/* Individual orb wrapper (dynamically created per-skill) */
.xp-orb {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 80px;
    max-width: 80px;
}

.xp-orb.visible {
    display: flex;
}

.xp-orb-body {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    overflow: hidden;
}

.xp-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.xp-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 3.5;
}

.xp-ring-fill {
    fill: none;
    stroke: #ff8844;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 169.65;
    stroke-dashoffset: 169.65;
    transition: stroke-dashoffset 0.6s ease;
}

.xp-orb-face {
    position: absolute;
    inset: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: radial-gradient(circle, rgba(15, 25, 50, 0.92), rgba(5, 10, 25, 0.98));
    border-radius: 50%;
    border: 1px solid rgba(255, 136, 68, 0.12);
}

.xp-orb-icon {
    font-size: 11px;
    font-weight: bold;
    color: #ff8844;
    letter-spacing: 1px;
}

.xp-orb-level {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1px;
}

/* --- XP Drop Zone (below each orb) --- */
.xp-drop-zone {
    position: relative;
    width: 80px;
    height: 80px;
}

.xp-drop {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    animation: xp-rise 1.5s ease-out forwards;
}

@keyframes xp-rise {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    60% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-68px);
    }
}

/* --- Orb pulse on XP gain --- */
.xp-orb-body.pulse .xp-ring {
    animation: ring-pulse 0.3s ease-out;
}

@keyframes ring-pulse {
    0% { transform: rotate(-90deg) scale(1); }
    50% { transform: rotate(-90deg) scale(1.1); }
    100% { transform: rotate(-90deg) scale(1); }
}

/* --- Orb level-up flash --- */
.xp-orb-body.levelup .xp-orb-face {
    animation: orb-levelup 0.8s ease-out;
}

@keyframes orb-levelup {
    0% { box-shadow: 0 0 0 0 rgba(255, 200, 80, 0.9); }
    40% { box-shadow: 0 0 24px 10px rgba(255, 200, 80, 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(255, 200, 80, 0); }
}

/* --- System Update Banner (RuneScape-style) --- */
.system-update-banner {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "kicker timer"
        "detail detail";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-width: min(420px, calc(100vw - 28px));
    max-width: min(560px, calc(100vw - 28px));
    padding: 8px 16px;
    background: rgba(6, 10, 18, 0.92);
    border: 1px solid rgba(255, 200, 0, 0.5);
    border-radius: 6px;
    z-index: 100;
    pointer-events: auto;
    animation: sysupdate-fadein 0.4s ease-out;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 196, 64, 0.16);
}

.system-update-kicker {
    grid-area: kicker;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255, 226, 142, 0.88);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.system-update-text {
    grid-area: timer;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.5);
    white-space: nowrap;
    justify-self: end;
}

.system-update-detail {
    grid-area: detail;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(232, 238, 255, 0.74);
    letter-spacing: 0;
}

.system-update-reconnect-btn {
    margin-left: 12px;
    padding: 4px 14px;
    background: rgba(80, 224, 128, 0.2);
    border: 1px solid rgba(80, 224, 128, 0.6);
    border-radius: 3px;
    color: #50e080;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s, border-color 0.2s;
}

.system-update-reconnect-btn:hover {
    background: rgba(80, 224, 128, 0.35);
    border-color: rgba(80, 224, 128, 0.9);
}

@keyframes sysupdate-fadein {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 520px) {
    .system-update-banner {
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "timer"
            "detail";
        justify-items: center;
        text-align: center;
        padding: 8px 12px;
    }

    .system-update-text {
        justify-self: center;
        font-size: 16px;
    }
}

/* --- App Update Available Toast --- */
.orbryn-update-toast {
    position: fixed;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px));
    left: 50%;
    width: min(430px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: 4px 1fr;
    grid-template-areas:
        "rail copy"
        "rail actions";
    gap: 10px 14px;
    align-items: center;
    padding: 12px 14px 12px 10px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(7, 13, 24, 0.97), rgba(6, 16, 24, 0.94)),
        radial-gradient(circle at 92% 18%, rgba(45, 212, 191, 0.18), transparent 34%);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.58),
        0 0 28px rgba(45, 212, 191, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #eefcff;
    font-family: 'Courier New', monospace;
    pointer-events: auto;
    z-index: 99996;
    opacity: 0;
    transform: translate3d(-50%, -14px, 0) scale(0.98);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.orbryn-update-toast[hidden] {
    display: none !important;
}

.orbryn-update-toast-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
}

.orbryn-update-toast-exit {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0) scale(0.98);
}

.orbryn-update-toast-rail {
    grid-area: rail;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, #67e8f9, #2dd4bf 54%, #f6c35b);
    box-shadow: 0 0 18px rgba(103, 232, 249, 0.42);
}

.orbryn-update-toast-copy {
    grid-area: copy;
    min-width: 0;
}

.orbryn-update-toast-kicker {
    margin-bottom: 3px;
    color: rgba(125, 211, 252, 0.78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.orbryn-update-toast-title {
    display: block;
    color: #f8fdff;
    font-size: 15px;
    line-height: 1.16;
    letter-spacing: 0;
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.24);
}

.orbryn-update-toast-detail {
    margin: 4px 0 0;
    color: rgba(222, 244, 252, 0.76);
    font-size: 12px;
    line-height: 1.34;
    letter-spacing: 0;
}

.orbryn-update-toast-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.orbryn-update-toast-primary,
.orbryn-update-toast-secondary {
    min-width: 88px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 6px;
    font: 800 12px/1 'Courier New', monospace;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.orbryn-update-toast-primary {
    border: 1px solid rgba(103, 232, 249, 0.74);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.24), rgba(20, 184, 166, 0.18));
    color: #f7feff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(45, 212, 191, 0.16);
}

.orbryn-update-toast-secondary {
    border: 1px solid rgba(184, 199, 220, 0.28);
    background: rgba(8, 16, 28, 0.64);
    color: rgba(226, 240, 247, 0.82);
}

.orbryn-update-toast-primary:hover,
.orbryn-update-toast-primary:focus-visible,
.orbryn-update-toast-secondary:hover,
.orbryn-update-toast-secondary:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.orbryn-update-toast-primary:hover,
.orbryn-update-toast-primary:focus-visible {
    border-color: rgba(190, 252, 255, 0.95);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.34), rgba(20, 184, 166, 0.28));
}

.orbryn-update-toast-secondary:hover,
.orbryn-update-toast-secondary:focus-visible {
    border-color: rgba(226, 240, 247, 0.5);
    color: #f8fdff;
}

.orbryn-update-toast-primary:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

@media (max-width: 560px) {
    .orbryn-update-toast {
        top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
        width: min(420px, calc(100vw - 16px));
        grid-template-columns: 3px 1fr;
        gap: 9px 10px;
        padding: 10px 10px 10px 8px;
    }

    .orbryn-update-toast-title {
        font-size: 14px;
    }

    .orbryn-update-toast-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .orbryn-update-toast-primary,
    .orbryn-update-toast-secondary {
        min-width: 0;
        min-height: 42px;
        padding: 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbryn-update-toast,
    .orbryn-update-toast-primary,
    .orbryn-update-toast-secondary {
        transition: none;
    }
}

/* --- Level Up Banner --- */
.levelup-banner {
    position: fixed;
    top: max(58px, calc(env(safe-area-inset-top, 0px) + 14px));
    left: 50%;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: min(360px, calc(100vw - 32px));
    padding: 8px 14px;
    border: 1px solid rgba(132, 226, 255, 0.36);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 231, 255, 0.22), transparent 62%),
        linear-gradient(180deg, rgba(5, 18, 28, 0.86), rgba(3, 8, 16, 0.92));
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.30),
        0 0 20px rgba(80, 200, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    text-shadow:
        0 0 18px rgba(100, 224, 255, 0.84),
        0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 86;
    animation: levelup-pop 2.15s cubic-bezier(0.2, 0.8, 0.24, 1) forwards;
}

.levelup-banner .levelup-skill {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
    color: rgba(142, 220, 255, 0.98);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(80, 200, 255, 0.55);
}

.levelup-banner::after {
    content: '';
    width: 1px;
    height: 22px;
    order: -1;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(118, 232, 255, 0.9), transparent);
    opacity: 0.86;
}

@keyframes levelup-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.92);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.01);
    }
    30% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px) scale(0.97);
    }
}

@media (max-width: 768px) {
    .levelup-banner {
        top: max(42px, calc(env(safe-area-inset-top, 0px) + 8px));
        max-width: min(280px, calc(100vw - 32px));
        padding: 7px 11px;
        gap: 8px;
        font-size: 12px;
    }

    .levelup-banner .levelup-skill {
        font-size: 10px;
    }
}

/* --- Skill Level-Up Toast (sidepanel) --- */
.sp-levelup-toast {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px 12px;
    background: rgba(10, 14, 20, 0.92);
    border: 1px solid rgba(100, 200, 255, 0.3);
    border-left: 3px solid #80c0ff;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.2;
    color: #d0e8ff;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.sp-levelup-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sp-levelup-toast-exit {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.sp-levelup-toast-icon {
    font-size: 16px;
    font-weight: bold;
}
.sp-levelup-toast-text strong {
    color: #fff;
}

/* --- Screen Flash (damage feedback) --- */
.screen-flash {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* --- Heavy-hit damage vignette (red edge-glow on big blows) --- */
.damage-vignette {
    position: fixed;
    inset: 0;
    z-index: 51;
    pointer-events: none;
    opacity: 0;
    /* Glow at the screen edges, clear in the centre so it reads as
       "you're hurt" without blocking the view. */
    background: radial-gradient(120% 120% at 50% 50%,
        rgba(255, 30, 30, 0) 55%,
        rgba(255, 30, 30, 0.28) 82%,
        rgba(150, 0, 0, 0.5) 100%);
}
.damage-vignette.show {
    animation: damage-vignette-pulse 0.48s ease-out;
}
@keyframes damage-vignette-pulse {
    0%   { opacity: 0; }
    16%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Boss HP Bar (top-center, Dark Souls style) --- */
#boss-hp-bar {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, 70vw);
    z-index: 15;
    pointer-events: none;
    font-family: 'Courier New', monospace;
}

.boss-hp-name {
    text-align: center;
    font-size: 14px;
    letter-spacing: 3px;
    color: #e0c0ff;
    text-shadow: 0 0 8px rgba(128, 64, 255, 0.6);
    margin-bottom: 4px;
}

.boss-hp-track {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(128, 64, 255, 0.4);
    border-radius: 2px;
    overflow: hidden;
}

.boss-hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #6020a0, #a040ff, #c060ff);
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.boss-hp-phase-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.boss-hp-text {
    text-align: center;
    font-size: 10px;
    color: rgba(200, 180, 255, 0.8);
    margin-top: 2px;
    letter-spacing: 1px;
}

/* One-line raid warning under the boss bar (Anchor Rite, brands, collapse).
   Driven by BossManager._showMechanicCallout — opacity fades via JS. */
.boss-mechanic-callout {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 6px;
    color: #ffd24a;
    text-shadow: 0 0 10px rgba(255, 160, 40, 0.75), 0 0 2px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* --- Void Boss HP Bar (same layout, void color scheme) --- */
#void-boss-hp-bar {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, 70vw);
    z-index: 15;
    pointer-events: none;
    font-family: 'Courier New', monospace;
}

.void-boss-hp-name {
    text-align: center;
    font-size: 14px;
    letter-spacing: 3px;
    color: #e0a0ff;
    text-shadow: 0 0 8px rgba(160, 0, 200, 0.7), 0 0 16px rgba(80, 0, 120, 0.4);
    margin-bottom: 4px;
    animation: void-boss-name-glitch 3s infinite;
}

@keyframes void-boss-name-glitch {
    0%, 92%, 100% { opacity: 1; transform: translateX(0); }
    93% { opacity: 0.7; transform: translateX(-2px); }
    95% { opacity: 0.5; transform: translateX(3px); }
    97% { opacity: 0.8; transform: translateX(-1px); }
}

.void-boss-hp-track {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(10, 0, 20, 0.85);
    border: 1px solid rgba(160, 0, 200, 0.5);
    border-radius: 2px;
    overflow: hidden;
}

.void-boss-hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #3a0060, #8000cc, #aa20ff);
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 0 6px rgba(128, 0, 200, 0.5);
}

.void-boss-hp-phase-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 100, 200, 0.6);
    pointer-events: none;
}

.void-boss-hp-text {
    text-align: center;
    font-size: 10px;
    color: rgba(220, 160, 255, 0.8);
    margin-top: 2px;
    letter-spacing: 1px;
}

/* --- Void Zone PvP Warning Banner --- */
#void-pvp-warning {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 20px;
    background: rgba(80, 0, 0, 0.75);
    border: 1px solid rgba(255, 40, 40, 0.6);
    border-radius: 3px;
    color: #ff4040;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 14;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
    animation: void-warning-pulse 2s ease-in-out infinite;
}

@keyframes void-warning-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1.0; border-color: rgba(255, 80, 80, 0.9); }
}

/* --- Void Entry Warning Flash (shown briefly on first entry) --- */
#void-entry-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 32px;
    background: rgba(10, 0, 20, 0.9);
    border: 2px solid rgba(160, 0, 200, 0.7);
    border-radius: 4px;
    color: #cc60ff;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 3px;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    text-shadow: 0 0 12px rgba(160, 0, 200, 0.6);
    animation: void-entry-fade 4s ease-out forwards;
}

@keyframes void-entry-fade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* ============================================
   HAMBURGER MENU + CHAT TOGGLE (hidden on desktop)
   ============================================ */
#mobile-hamburger-btn,
.mhm-backdrop,
.mhm-panel,
.mobile-chat-toggle,
.chat-toast {
    display: none;
}

/* ============================================
   MOBILE CONTROLS
   ============================================ */
#mobile-controls {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15;
    pointer-events: none;
}

.joystick-zone {
    position: absolute;
    bottom: 30px;
    width: 130px;
    height: 130px;
    pointer-events: auto;
    touch-action: none;
}

#joystick-left {
    left: 24px;
}

#joystick-right {
    right: 24px;
    display: none;
    pointer-events: none;
}

.joystick-base {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(80, 120, 200, 0.12);
    border: 2px solid rgba(80, 120, 200, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.joystick-knob {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(80, 120, 200, 0.35);
    border: 2px solid rgba(120, 160, 255, 0.4);
    transition: transform 0.05s;
}

#mobile-buttons {
    position: absolute;
    right: 24px;
    bottom: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.mobile-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(100, 150, 255, 0.3);
    background: rgba(20, 40, 80, 0.6);
    color: #8ac;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    touch-action: none;
}

.mobile-btn:active {
    background: rgba(60, 100, 200, 0.4);
    border-color: rgba(120, 180, 255, 0.6);
}

#btn-mobile-psionics.active {
    color: #d9fbff;
    background: rgba(20, 90, 120, 0.72);
    border-color: rgba(86, 246, 255, 0.68);
    box-shadow: 0 0 16px rgba(86, 246, 255, 0.25);
}

/* --- Mobile Pause Button --- */
.mobile-pause-btn {
    display: none;
}

/* ============================================
   FORCE LANDSCAPE ON MOBILE (portrait fallback)
   ============================================
   When a touch device is held in portrait AND the game
   is playing, rotate the page 90° so it renders landscape.
   Menus stay portrait — only gameplay goes landscape.
   ============================================ */
@media (pointer: coarse) and (orientation: portrait) {
    body.game-playing {
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
        transform: translate(100vw, 0) rotate(90deg);
    }
    body.game-playing #mobile-controls {
        display: block;
    }

    body.game-playing #loot-toast-container {
        top: calc(16px + env(safe-area-inset-top, 0px));
        right: auto;
        bottom: auto;
        left: calc(12px + env(safe-area-inset-left, 0px));
        width: clamp(168px, 36vh, 232px);
        max-height: min(42vw, 168px);
        align-items: flex-start;
        gap: 6px;
        overflow: hidden;
    }

    body.game-playing #loot-toast-container .loot-toast {
        max-height: 100%;
    }
}

/* ============================================
   MOBILE LANDSCAPE (touch devices)
   ============================================ */
@media (pointer: coarse) and (orientation: landscape) {
    /* --- Immersive lock: prevent any page scroll/bounce (gameplay only) --- */
    body.game-playing,
    body.game-playing html {
        touch-action: none;
        -webkit-overflow-scrolling: auto;
    }

    /* Allow real UI panels to keep vertical panning inside immersive gameplay */
    body.game-playing .sp-body,
    body.game-playing #chat-log,
    body.game-playing .station-panel,
    body.game-playing .bank-grid,
    body.game-playing .bank-panel-full,
    body.game-playing .shop-list-panel,
    body.game-playing .shop-detail-panel,
    body.game-playing .inventory-panel,
    body.game-playing .grave-panel,
    body.game-playing .cooking-col,
    body.game-playing .smelting-col,
    body.game-playing .anvil-recipe-list,
    body.game-playing .anvil-recipe-detail,
    body.game-playing .wb-recipe-list,
    body.game-playing .wb-recipe-detail,
    body.game-playing .dialog-body,
    body.game-playing .dex-section,
    body.game-playing .sp-modal-body,
    body.game-playing .screen-content,
    body.game-playing .mobile-hamburger-list,
    body.game-playing .mhm-panel,
    body.game-playing #chat-panel,
    body.game-playing .chat-body,
    body.game-playing .chat-tabs,
    body.game-playing .handcraft-panel,
    body.game-playing .handcraft-items,
    body.game-playing .market-panel,
    body.game-playing .trade-window,
    body.game-playing .trade-overlay,
    body.game-playing .leaderboard-overlay,
    body.game-playing .leaderboard-panel,
    body.game-playing .lb-panel-body,
    body.game-playing .lb-table-wrap,
    body.game-playing .lore-page-scroll,
    body.game-playing .lore-toc-panel,
    body.game-playing #controls-screen,
    body.game-playing #settings-screen,
    body.game-playing .store-content,
    body.game-playing .debug-screen-content,
    body.game-playing .orb-modal-content,
    body.game-playing .sp-emotes-mount,
    body.game-playing .tp-list {
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Show mobile controls (gameplay only) --- */
    body.game-playing #mobile-controls {
        display: block;
    }

    /* --- Mobile Pause Button: hidden, use OS back for pause --- */
    body.game-playing .mobile-pause-btn {
        display: none !important;
    }

    /* --- Safe Area Insets (viewport-fit=cover) --- */
    #hud-vitals {
        padding-left: env(safe-area-inset-left, 0px);
    }
    #hotbar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #joystick-left {
        margin-left: env(safe-area-inset-left, 0px);
    }
    #mobile-buttons {
        margin-right: env(safe-area-inset-right, 0px);
    }
    #xp-orbs-container {
        padding-top: env(safe-area-inset-top, 0px);
    }
    #fps-counter {
        margin-left: env(safe-area-inset-left, 0px);
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* --- Vitals: compact, top-left --- */
    #hud-vitals {
        top: 8px;
        left: 8px;
        gap: 3px;
    }

    .vital-icon {
        width: 13px;
        height: 13px;
    }

    .vital-row {
        gap: 3px;
    }

    #health-bar-container,
    #energy-bar-container,
    #hunger-bar-container,
    #thirst-bar-container {
        width: 140px;
        height: 14px;
    }

    #buff-container {
        max-width: 140px;
    }

    .buff-pill {
        font-size: 8px;
        padding: 1px 4px;
        gap: 3px;
    }

    .buff-pill__timer {
        font-size: 7px;
    }

    #health-text, #energy-text {
        font-size: 8px;
    }

    /* --- FPS: tuck into corner --- */
    #fps-counter {
        bottom: 4px;
        left: 4px;
        font-size: 9px;
    }

    /* --- Hotbar: smaller, centered, avoid overlapping joystick/buttons --- */
    #hotbar {
        position: fixed;
        bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px));
        left: 50%;
        transform: translateX(-60%);
        gap: 3px;
        padding-bottom: 0;
        z-index: 80;
    }

    .hotbar-slot {
        width: 48px;
        height: 48px;
        font-size: 16px;
        border-radius: 6px;
    }

    .hotbar-key {
        font-size: 8px;
        top: 2px;
        left: 4px;
    }

    /* B10: Mobile swipe hint — adjust position for smaller hotbar */
    .hotbar-swipe-hint {
        bottom: max(82px, calc(env(safe-area-inset-bottom, 0px) + 76px));
        font-size: 10px;
        padding: 3px 10px;
    }

    .slot-orb-img { width: 38px; height: 38px; }
    .slot-resource-img { width: 38px; height: 38px; }
    .slot-count { font-size: 10px; bottom: 2px; right: 3px; }

    .hotbar-inv-icon { width: 30px; height: 30px; }

    body.game-playing #build-hotbar {
        bottom: calc(max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px)) + 62px);
        width: min(44vw, 430px);
        max-width: min(44vw, 430px);
    }

    body.game-playing #build-hotbar-slots {
        max-width: 100%;
    }

    body.game-playing #build-hotbar-info {
        display: none;
    }

    .inventory-panel {
        bottom: max(90px, calc(env(safe-area-inset-bottom, 0px) + 84px));
        padding: 8px 10px 10px;
        min-width: unset;
        min-height: unset;
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 120;
    }
    .inv-drag-handle { display: none; }
    .inv-resize-handle { display: none; }
    .inv-grid {
        grid-template-columns: repeat(5, 44px);
        gap: 3px;
    }
    .inv-slot { width: 44px; height: 44px; }
    .inv-slot img { width: 34px; height: 34px; }
    .inv-slot .inv-count { font-size: 9px; }
    .inv-slot .inv-label { font-size: 6px; }
    .drag-ghost { width: 44px; height: 44px; }
    .drag-ghost img { width: 34px; height: 34px; }

    /* --- Context Menu: larger touch targets on mobile --- */
    .item-context-menu {
        min-width: 150px;
        padding: 10px;
    }
    .ctx-menu-btn {
        padding: 12px 14px;
        font-size: 13px;
        margin: 4px 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(80, 140, 220, 0.3);
    }
    .ctx-menu-title {
        font-size: 12px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    /* --- Item Tooltip: ensure readable on mobile --- */
    .item-tooltip {
        max-width: 200px;
        font-size: 10px;
    }

    /* --- XP Orbs: smaller on mobile, top-center --- */
    #xp-orbs-container {
        top: 10px;
        gap: 4px;
    }

    .xp-orb {
        width: 60px;
        max-width: 60px;
    }

    .xp-orb-body {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    .xp-orb-icon { font-size: 9px; }
    .xp-orb-level { font-size: 7px; }

    .xp-drop-zone {
        width: 60px;
        height: 50px;
    }

    .xp-drop { font-size: 10px; }

    /* --- Joysticks: landscape layout --- */
    .joystick-zone {
        bottom: 16px;
        width: 110px;
        height: 110px;
    }

    #joystick-left {
        left: 16px;
    }

    #joystick-right {
        right: 16px;
        display: none; /* Hide right joystick — aim uses side panel area */
    }

    .joystick-knob {
        width: 40px;
        height: 40px;
    }

    /* --- Mobile Action Buttons: right side, 3-col x 2-row grid --- */
    #mobile-buttons {
        right: 16px;
        bottom: 16px;
        display: grid;
        grid-template-columns: 56px 56px 56px;
        gap: 8px;
    }

    .mobile-btn {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        font-size: 10px;
        transition: transform 0.08s ease, border-color 0.08s ease, background 0.08s ease;
    }

    .mobile-btn:active {
        transform: scale(0.92);
    }

    /* ATK button: larger since it doubles as aim drag zone */
#btn-mobile-attack {
    width: 56px;
    height: 56px;
    font-size: 11px;
    border-color: rgba(255, 136, 68, 0.35);
    background: rgba(40, 25, 10, 0.6);
    color: #fa4;
    position: relative;
    overflow: visible;
}

#btn-mobile-attack:active {
    background: rgba(200, 100, 40, 0.4);
    border-color: rgba(255, 160, 80, 0.7);
    box-shadow: 0 0 12px rgba(255, 136, 68, 0.3);
}

#btn-mobile-attack.attack-cooldown-active {
    color: #fa4;
}

#btn-mobile-attack.attack-cooldown-ready-flash {
    border-color: rgba(120, 255, 180, 0.74);
    box-shadow: 0 0 16px rgba(120, 255, 180, 0.36);
}

#btn-mobile-attack.attack-cooldown-has-special::after,
#btn-mobile-alt.attack-cooldown-has-special::after {
    content: 'SP';
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 17px;
    padding: 0 3px;
    border: 1px solid rgba(150, 246, 255, 0.8);
    border-radius: 9px;
    background: rgba(8, 23, 30, 0.88);
    color: #aaf8ff;
    font-size: 8px;
    font-weight: 900;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 0 6px rgba(75, 230, 255, 0.68);
    box-shadow: 0 0 9px rgba(75, 230, 255, 0.26);
    pointer-events: none;
}

#btn-mobile-attack .attack-cooldown-ring,
#btn-mobile-alt .attack-cooldown-ring {
    inset: auto;
    top: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

#btn-mobile-attack .attack-cooldown-ring-special,
#btn-mobile-alt .attack-cooldown-ring-special {
    top: -7px;
    left: -7px;
    width: 30px;
    height: 30px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

#btn-mobile-attack .attack-cooldown-time,
#btn-mobile-alt .attack-cooldown-time {
    top: -4px;
    left: -4px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    transform: none;
    font-size: 7px;
    line-height: 24px;
}

#btn-mobile-attack .attack-cooldown-time-special,
#btn-mobile-alt .attack-cooldown-time-special {
    top: -10px;
    right: auto;
    bottom: auto;
    left: 16px;
    width: auto;
    min-width: 22px;
    height: 14px;
    padding: 0 3px;
    border: 1px solid rgba(126, 241, 255, 0.48);
    border-radius: 7px;
    background: rgba(6, 20, 28, 0.88);
    font-size: 7px;
    line-height: 13px;
    color: var(--special-cooldown-text);
    box-shadow: 0 0 7px rgba(74, 226, 255, 0.22);
}

    /* ALT button: hidden by default, shown during ATK drag for right-click weapons */
    #btn-mobile-alt {
        display: none;
        border-color: rgba(200, 80, 255, 0.35);
        background: rgba(35, 10, 50, 0.6);
        color: #c8f;
        font-size: 9px;
        position: relative;
        overflow: visible;
    }

    #btn-mobile-alt.attack-cooldown-active {
        color: #c8f;
    }

    #btn-mobile-alt.alt-highlight {
        background: rgba(160, 60, 220, 0.5);
        border-color: rgba(220, 120, 255, 0.8);
        box-shadow: 0 0 16px rgba(200, 80, 255, 0.5);
        transform: scale(1.08);
    }

    /* Alt mode: hide other buttons, show ALT next to ATK */
    #mobile-buttons.alt-mode .mobile-btn {
        visibility: hidden;
        pointer-events: none;
    }

    #mobile-buttons.alt-mode #btn-mobile-attack {
        /* Already holding ATK — hide it but keep pointer-events for ongoing touch tracking */
        pointer-events: auto;
    }

    #mobile-buttons.alt-mode #btn-mobile-alt {
        display: block;
        visibility: visible;
        pointer-events: auto;
        /* Place directly below ATK (col 3 row 1) */
        grid-column: 3;
        grid-row: 2;
    }

    /* B11: Alt weapon mode tooltip — appears above ALT button */
    .mobile-alt-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        background: rgba(10, 15, 30, 0.85);
        color: rgba(200, 180, 255, 0.9);
        font-size: 10px;
        padding: 3px 10px;
        border-radius: 10px;
        border: 1px solid rgba(180, 100, 255, 0.35);
        white-space: nowrap;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.35s ease;
        z-index: 101;
    }
    .mobile-alt-tooltip--hidden {
        opacity: 0;
    }

    /* JUMP button: cyan accent */
    #btn-mobile-jump {
        border-color: rgba(80, 200, 255, 0.35);
        background: rgba(10, 30, 50, 0.6);
        color: #6cf;
    }

    #btn-mobile-jump:active {
        background: rgba(40, 100, 180, 0.4);
        border-color: rgba(100, 200, 255, 0.7);
        box-shadow: 0 0 12px rgba(80, 200, 255, 0.3);
    }

    /* JUMP button → GLD mode: green accent when glide is available */
    #btn-mobile-jump.glide-active {
        border-color: rgba(80, 255, 160, 0.5);
        background: rgba(10, 40, 30, 0.7);
        color: #6fc;
    }

    #btn-mobile-jump.glide-active:active {
        background: rgba(30, 80, 60, 0.5);
        border-color: rgba(100, 255, 180, 0.7);
        box-shadow: 0 0 12px rgba(80, 255, 160, 0.3);
    }

    /* ZOOM button: optics accent */
    #btn-mobile-zoom {
        border-color: rgba(100, 140, 255, 0.35);
        background: rgba(15, 20, 50, 0.6);
        color: #8af;
    }

    #btn-mobile-zoom:active {
        background: rgba(60, 80, 200, 0.4);
        border-color: rgba(120, 160, 255, 0.7);
        box-shadow: 0 0 12px rgba(100, 140, 255, 0.3);
    }

    /* --- Side Panel: compact, collapsible, bottom-right --- */
    #side-panel {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: auto;
        width: 260px;
        z-index: 20;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    /* SKL toggle hidden on mobile — replaced by hamburger menu */
    .sp-toggle {
        display: none !important;
    }

    /* Drag handles are desktop-only */
    .sp-drag-handle,
    .chat-drag-grip {
        display: none !important;
    }

    /* Collapsed: hide tabs + body, only show toggle */
    #side-panel.collapsed .sp-tabs,
    #side-panel.collapsed .sp-body {
        display: none;
    }

    #side-panel.collapsed {
        width: 48px;
    }

    /* Compact tab sizes — leave room for the X close button on the right */
    .sp-tabs {
        margin-right: 42px;
        gap: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sp-tabs::-webkit-scrollbar {
        display: none;
    }

    .sp-tab {
        padding: 6px 6px 7px;
        min-width: 44px;
        min-height: 40px;
        flex: 1 0 auto;
        gap: 2px;
    }
    .sp-tab-icon {
        width: 15px;
        height: 15px;
    }
    .sp-tab-label {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .sp-body {
        padding: 8px;
        min-height: auto;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Compact skill sections on mobile */
    .skill-sections { gap: 6px; }
    .skill-section { padding: 4px; border-radius: 5px; }
    .skill-section-header {
        font-size: 8px;
        letter-spacing: 1.5px;
        padding: 3px 4px 4px;
        margin-bottom: 4px;
    }
    .skill-section-icon { font-size: 11px; }

    /* Compact skill grid — 3 columns on mobile for readability */
    .skill-grid,
    .skill-grid--combat,
    .skill-grid--trade {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }

    .skill-cell {
        padding: 4px 5px;
        gap: 2px;
    }

    .skill-abbr {
        font-size: 9px;
        letter-spacing: 0;
    }

    .skill-level {
        font-size: 11px;
    }

    .skill-bar {
        height: 3px;
    }

    .sp-summary {
        margin-top: 5px;
        padding: 5px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .sp-summary .sp-cmb-lv,
    .sp-summary .sp-total-lv {
        font-size: 12px;
    }

    /* Compact skill guide on mobile */
    .sg-panel { gap: 6px; padding-bottom: 6px; }
    .sg-back { min-height: 36px; padding: 8px 10px; font-size: 10px; }
    .sg-hero { padding: 8px; }
    .sg-skill-abbr { flex-basis: 36px; width: 36px; height: 36px; font-size: 11px; }
    .sg-skill-name { font-size: 13px; }
    .sg-skill-level { gap: 4px; font-size: 10px; }
    .sg-next-card { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; padding: 6px; }
    .sg-next-body strong { font-size: 11px; }
    .sg-next-body span,
    .sg-stat-row span { font-size: 9px; }
    .sg-list { max-height: calc(100vh - 210px); }
    .sg-level-group { padding: 5px; margin-bottom: 7px; }
    .sg-level-label { min-height: 22px; font-size: 9px; }
    .sg-entry { grid-template-columns: 34px minmax(0, 1fr); padding: 6px; min-height: 48px; gap: 6px; }
    .sg-level-pill { min-height: 34px; }
    .sg-level-pill strong { font-size: 14px; }
    .sg-entry-name { font-size: 10px; }
    .sg-entry-desc { font-size: 9px; }
    .sg-type,
    .sg-status,
    .sg-source,
    .sg-req-chip { min-height: 15px; padding: 1px 5px; font-size: 8px; }

    /* Compact combat styles */
    .sp-combat-styles { gap: 4px; }
    .sp-style { padding: 8px 10px; font-size: 10px; }
    .sp-style-name { font-size: 10px; }
    .sp-style-desc { font-size: 8px; }
    .sp-section-title { font-size: 10px; margin-bottom: 8px; padding-bottom: 4px; }
    .sp-info-text { font-size: 10px; }
    .sp-info-sub { font-size: 9px; }

    /* Compact equipment */
    .sp-equip-grid { gap: 4px; padding: 6px 0; }
    .sp-equip-row { gap: 4px; }
    .sp-equip-slot { width: 44px; height: 44px; font-size: 9px; border-radius: 5px; }

    /* Compact codex on mobile */
    .dex-subtab { font-size: 8px; padding: 4px 0; letter-spacing: 1px; }
    .dex-subtabs { margin-bottom: 8px; }
    .dex-card-name { font-size: 10px; }
    .dex-card-header { padding: 6px 8px; gap: 5px; }
    .dex-card-body { padding: 0 8px 8px 8px; }
    .dex-card-desc { font-size: 9px; margin-bottom: 6px; padding-bottom: 5px; }
    .dex-stat { padding: 3px 6px; }
    .dex-stat-label { font-size: 8px; }
    .dex-stat-value { font-size: 9px; }
    .dex-detail-label { font-size: 8px; }
    .dex-detail-value { font-size: 9px; }
    .dex-behavior-text { font-size: 9px; }
    .dex-section { max-height: 160px; }
    .dex-card-level { font-size: 9px; }
    .dex-card-badge { font-size: 8px; }
    .dex-cat-name { font-size: 9px; letter-spacing: 2px; }
    .dex-feature { font-size: 9px; }

    /* --- Screen overlays: scrollable on mobile --- */
    .screen {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 0;
    }

    /* Main menu handles its own scrolling — override generic screen mobile rules */
    #start-screen[data-mm] {
        align-items: stretch;
        overflow-y: hidden;
        padding: 0;
    }

    /* Simplify grid animation on mobile for perf */
    .screen::before {
        background-size: 40px 40px;
        animation: none;
    }

    .screen-content {
        padding: 20px 16px;
        max-width: 90vw;
        max-height: none;
        overflow-y: visible;
        margin: auto;
        flex-shrink: 0;
        border-radius: 12px;
    }

    .start-wide {
        max-width: 92vw;
    }

    .save-slot {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 6px;
        border-radius: 8px;
    }

    .save-slot::before { display: none; }

    .slot-info { min-width: 0; flex: 1; }
    .slot-label { font-size: 0.6em; }
    .slot-detail { font-size: 0.7em; }
    .btn-slot { font-size: 0.6em; padding: 6px 10px; border-radius: 5px; }
    .slot-char-name { font-size: 0.8em; }
    .slot-char-stats { font-size: 0.6em; }
    .slot-actions { gap: 4px; }

    .game-title {
        font-size: 2em;
        letter-spacing: 6px;
        margin-bottom: 4px;
    }

    .game-tagline {
        font-size: 0.65em;
        margin-bottom: 16px;
        letter-spacing: 3px;
    }

    .btn-primary, .btn-secondary {
        padding: 11px 20px;
        font-size: 0.85em;
        margin-bottom: 8px;
        border-radius: 6px;
    }

    /* Character creation: compact */
    .create-title { font-size: 1.4em; letter-spacing: 4px; margin-bottom: 4px; }
    .create-subtitle { font-size: 0.75em; margin-bottom: 16px; }
    .create-input { padding: 10px 14px; font-size: 0.95em; border-radius: 6px; }
    .create-form { margin-bottom: 16px; }

    /* Delete confirmation: compact */
    .delete-title { font-size: 1.4em; letter-spacing: 3px; margin-bottom: 8px; }
    .delete-detail { font-size: 0.8em; margin-bottom: 16px; }

    /* Game over: compact */
    #gameover-screen h2 { font-size: 1.6em; }
    #gameover-screen p { font-size: 0.8em; }

    /* Pause: compact */
    #pause-screen h2 { font-size: 1.6em; }


    /* Damage numbers slightly smaller */
    .damage-number {
        min-width: 28px;
        height: 25px;
        padding: 0 6px;
        font-size: 15px;
    }

    /* Floating messages smaller on mobile */
    .floating-message {
        font-size: 10px;
        max-width: 240px;
    }

    /* Target info: smaller on mobile */
    .target-info {
        top: 100px;
        padding: 4px 10px;
        min-width: 100px;
    }
    .target-name { font-size: 11px; }
    .target-level { font-size: 9px; }

    /* Gathering status: compact on mobile, above hotbar */
    .gathering-status {
        bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 86px));
        font-size: 10px;
        padding: 4px 12px;
        letter-spacing: 2px;
    }

    /* Lockpick channel: compact on mobile */
    .lockpick-channel-wrap {
        bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 86px));
        width: min(280px, calc(100vw - 24px));
        padding: 8px 10px;
    }
    .lockpick-channel-label {
        font-size: 10px;
    }
    .lockpick-channel-detail {
        font-size: 9px;
    }
    .lockpick-channel-track {
        height: 6px;
    }

    /* Bank: compact on mobile */
    .bank-panel-full {
        width: 92vw;
        max-width: 420px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: manipulation;
    }
    .bank-grid {
        grid-template-columns: repeat(8, 1fr);
        max-height: none;       /* remove nested scroll — only outer panel scrolls */
        overflow-y: visible;
    }
    .bank-slot {
        width: 36px;
        height: 36px;
    }
    .bank-slot.filled {
        touch-action: pan-y;    /* allow vertical scroll through items, tap via JS */
    }
    .bank-inv-grid .bank-slot.filled {
        touch-action: pan-y;
    }
    .bank-slot-img { width: 22px; height: 22px; }
    .bank-slot-count { font-size: 8px; }
    .bank-title, .shop-title { font-size: 13px; letter-spacing: 4px; }
    .bank-orb-section { margin-bottom: 8px; padding-bottom: 8px; }
    .bank-row { padding: 6px 10px; }
    .bank-label { font-size: 10px; }
    .bank-value { font-size: 13px; }
    .btn-bank { padding: 8px 0; font-size: 10px; }
    .bank-section-label { font-size: 10px; }
    .bank-hint { font-size: 9px; margin: 6px 0 8px; }
    .bank-orb-amount { gap: 4px; }
    .bank-orb-input { width: 60px; padding: 6px 8px; font-size: 14px; }
    .btn-bank-quick { padding: 6px 10px; font-size: 11px; min-height: 32px; }

    /* Grave panel: compact on mobile */
    .grave-panel {
        width: 92vw;
        max-width: 400px;
        padding: 12px;
        top: calc(50% - 24px);
        max-height: calc(100vh - max(124px, calc(env(safe-area-inset-bottom, 0px) + 112px)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 120;
    }
    .grave-title { font-size: 13px; letter-spacing: 4px; }
    .grave-row { padding: 6px 10px; }
    .grave-label { font-size: 10px; }
    .grave-value { font-size: 13px; }
    .grave-section-label { font-size: 10px; }
    .grave-hint { font-size: 9px; margin: 6px 0 8px; }
    .grave-btn-row {
        position: sticky;
        bottom: -12px;
        margin: 0 -12px -12px;
        padding: 8px 12px 12px;
        background: linear-gradient(180deg, rgba(15, 8, 8, 0), rgba(15, 8, 8, 0.98) 22%);
        backdrop-filter: blur(6px);
    }
    .btn-grave { padding: 8px 0; font-size: 10px; }

    /* Shop: stacked vertically, fully scrollable on mobile */
    .shop-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .shop-balance { font-size: 11px; padding: 6px 10px; margin-bottom: 8px; }
    .shop-orb-count { font-size: 16px; }
    .shop-tabs { margin-bottom: 8px; }
    .shop-tab { padding: 7px 0; font-size: 11px; letter-spacing: 2px; }
    .shop-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        margin-bottom: 8px;
    }
    .shop-list-panel {
        max-height: 150px;
        overflow-y: auto;
    }
    .shop-item-row { padding: 6px 8px; gap: 6px; }
    .shop-item-icon { width: 26px; height: 26px; }
    .shop-item-name { font-size: 10px; }
    .shop-item-sub { font-size: 8px; }
    .shop-item-qty { font-size: 9px; }
    .shop-item-owned { font-size: 8px; padding: 3px 5px; }
    .psionic-charge-body { max-height: 52vh; }
    .psionic-charge-row {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        gap: 8px;
        padding: 8px;
    }
    .psionic-charge-icon {
        width: 34px;
        height: 34px;
        font-size: 9px;
    }
    .psionic-charge-icon img {
        width: 30px;
        height: 30px;
    }
    .psionic-charge-title { font-size: 11px; }
    .psionic-charge-meta { font-size: 8px; }
    .psionic-charge-uses span { font-size: 16px; }
    .psionic-charge-btn {
        grid-column: 1 / -1;
        min-height: 34px;
    }
    /* Detail panel: full width, horizontal layout when item selected */
    .shop-detail-panel {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 10px;
    }
    .shop-detail-empty { width: 100%; font-size: 11px; }
    .shop-detail-icon { width: 48px; height: 48px; margin-bottom: 0; }
    .shop-detail-icon-text { width: 48px; height: 48px; font-size: 18px; margin-bottom: 0; }
    .shop-detail-name { font-size: 11px; margin-bottom: 2px; }
    .shop-detail-desc { font-size: 9px; margin-bottom: 4px; }
    .shop-detail-price { font-size: 12px; margin-bottom: 2px; }
    .shop-detail-owned { font-size: 9px; margin-bottom: 6px; }
    .shop-detail-actions {
        flex-direction: row;
        gap: 6px;
        width: 100%;
    }
    .shop-qty-control {
        grid-template-columns: 52px minmax(70px, 1fr);
    }
    .btn-shop { padding: 8px 0; font-size: 10px; }

    /* Cooking panel: responsive on mobile */
    .cooking-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .cooking-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 10px; }
    .cooking-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        margin-bottom: 8px;
    }
    .cooking-col { padding: 8px; }
    .cooking-col-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; padding-bottom: 4px; }
    .cooking-item { padding: 6px 8px; gap: 6px; }
    .cooking-item-img { width: 24px; height: 24px; }
    .cooking-item-name { font-size: 10px; }
    .cooking-item-count { font-size: 11px; }
    .cooking-empty { font-size: 10px; padding: 12px 6px; }
    .cooking-center {
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }
    .cooking-arrow { font-size: 20px; }
    .cooking-progress-wrap { width: 100px; height: 6px; }
    .cooking-status { font-size: 9px; }
    .cooking-skill-info { font-size: 9px; padding: 6px 8px; margin-bottom: 8px; }
    .cooking-actions { gap: 6px; margin-bottom: 6px; }
    .btn-cook { padding: 8px 0; font-size: 10px; }

    /* Smelting panel: responsive on mobile */
    .smelting-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .smelting-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 10px; }
    .smelting-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        margin-bottom: 8px;
    }
    .smelting-col { padding: 8px; }
    .smelting-col-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; padding-bottom: 4px; }
    .smelting-item { padding: 6px 8px; gap: 6px; }
    .smelting-item-img { width: 24px; height: 24px; }
    .smelting-item-name { font-size: 10px; }
    .smelting-item-count { font-size: 11px; }
    .smelting-empty { font-size: 10px; padding: 12px 6px; }
    .smelting-center {
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }
    .smelting-arrow { font-size: 20px; }
    .smelting-progress-wrap { width: 100px; height: 6px; }
    .smelting-status { font-size: 9px; }
    .smelting-skill-info { font-size: 9px; padding: 6px 8px; margin-bottom: 8px; }
    .smelting-actions { gap: 6px; margin-bottom: 6px; }
    .btn-smelt { padding: 8px 0; font-size: 10px; }

    /* Oil Refinery panel: responsive on mobile */
    .handcraft-panel {
        width: 92vw;
        max-width: 400px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    .handcraft-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 10px; }
    .handcraft-body { flex-direction: column; gap: 8px; min-height: auto; margin-bottom: 8px; }
    .handcraft-col { padding: 8px; }
    .handcraft-col-list { max-width: 100%; }
    .handcraft-col-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; padding-bottom: 4px; }
    .handcraft-recipe-row { padding: 6px 8px; }
    .btn-handcraft { padding: 6px 14px; font-size: 11px; }

    .refinery-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .refinery-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 10px; }
    .refinery-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        margin-bottom: 8px;
    }
    .refinery-col { padding: 8px; }
    .refinery-col-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; padding-bottom: 4px; }
    .refinery-item { padding: 6px 8px; gap: 6px; }
    .refinery-item-img { width: 24px; height: 24px; }
    .refinery-item-name { font-size: 10px; }
    .refinery-item-count { font-size: 11px; }
    .refinery-empty { font-size: 10px; padding: 12px 6px; }
    .refinery-center {
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }
    .refinery-arrow { font-size: 20px; }
    .refinery-progress-wrap { width: 100px; height: 6px; }
    .refinery-status { font-size: 9px; }
    .refinery-skill-info { font-size: 9px; padding: 6px 8px; margin-bottom: 8px; }
    .refinery-actions { gap: 6px; margin-bottom: 6px; }
    .btn-refine { padding: 8px 0; font-size: 10px; }

    /* Anvil panel: responsive on mobile */
    .anvil-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .anvil-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 8px; }
    .anvil-tab { padding: 6px 0; font-size: 9px; letter-spacing: 1px; }
    .anvil-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
    }
    .anvil-recipe-list { max-height: 160px; }
    .anvil-recipe-row { padding: 6px 8px; gap: 6px; }
    .anvil-recipe-icon { width: 22px; height: 22px; }
    .anvil-recipe-name { font-size: 10px; }
    .anvil-recipe-level { font-size: 9px; }
    .anvil-recipe-detail { padding: 8px; min-width: auto; }
    .anvil-detail-title { font-size: 12px; }
    .anvil-detail-stats { font-size: 10px; }
    .anvil-detail-img { width: 32px; height: 32px; }
    .anvil-mat-row { font-size: 10px; }
    .anvil-skill-info { font-size: 9px; padding: 6px 8px; margin-bottom: 8px; }
    .btn-anvil-forge, .btn-anvil-stop { padding: 8px 0; font-size: 10px; }
    .anvil-qty-row { gap: 3px; }
    .anvil-qty-btn { width: 24px; height: 24px; font-size: 12px; }
    .anvil-qty-value { font-size: 12px; min-width: 24px; }
    .anvil-qty-preset { padding: 3px 6px; font-size: 9px; }
    .anvil-batch-counter { font-size: 11px; }
    .anvil-forging-area { padding: 6px; gap: 6px; }

    /* Workbench panel: responsive on mobile */
    .workbench-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .wb-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 8px; }
    .wb-tab { padding: 6px 0; font-size: 9px; letter-spacing: 1px; }
    .wb-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
    }
    .wb-recipe-list { max-height: 160px; }
    .wb-recipe-row { padding: 6px 8px; gap: 6px; }
    .wb-recipe-icon { width: 22px; height: 22px; }
    .wb-recipe-name { font-size: 10px; }
    .wb-recipe-level { font-size: 9px; }
    .wb-recipe-detail { padding: 8px; min-width: auto; }
    .wb-detail-title { font-size: 12px; }
    .wb-detail-desc { font-size: 10px; }
    .wb-detail-img { width: 32px; height: 32px; }
    .wb-mat-row { font-size: 10px; }
    .wb-skill-info { padding: 5px 6px; gap: 4px; margin-bottom: 8px; }
    .wb-skill-pill { padding: 3px 5px; gap: 4px; }
    .wb-skill-icon { font-size: 8px; }
    .wb-skill-label { font-size: 8px; }
    .wb-skill-level { font-size: 9px; }
    .btn-wb-craft, .btn-wb-stop { padding: 8px 0; font-size: 10px; }
    .wb-qty-row { gap: 3px; }
    .wb-qty-btn { width: 24px; height: 24px; font-size: 12px; }
    .wb-qty-value { font-size: 12px; min-width: 24px; }
    .wb-qty-preset { padding: 3px 6px; font-size: 9px; }
    .wb-batch-counter { font-size: 11px; }
    .wb-crafting-area { padding: 6px; gap: 6px; }
    .wb-apply-mod-item { padding: 6px 8px; }
    .wb-apply-mod-name { font-size: 10px; }
    .wb-apply-mod-effect { font-size: 9px; }

    /* Hack Terminal: responsive on mobile */
    .hack-terminal-panel {
        width: 92vw;
        max-width: 440px;
        padding: 12px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .ht-title { font-size: 13px; letter-spacing: 4px; margin-bottom: 8px; }
    .ht-tab { padding: 6px 0; font-size: 9px; letter-spacing: 1px; }
    .ht-body {
        flex-direction: column;
        gap: 8px;
        min-height: auto;
    }
    .ht-recipe-list { max-height: 160px; }
    .ht-recipe-row { padding: 6px 8px; gap: 6px; }
    .ht-recipe-icon { width: 22px; height: 22px; }
    .ht-recipe-name { font-size: 10px; }
    .ht-recipe-level { font-size: 9px; }
    .ht-recipe-detail { padding: 8px; min-width: auto; }
    .ht-detail-title { font-size: 12px; }
    .ht-detail-desc { font-size: 9px; }
    .ht-detail-mats-label { font-size: 9px; }
    .ht-mat-row { font-size: 10px; }
    .ht-detail-xp { font-size: 9px; }
    .btn-ht-craft, .btn-ht-stop { padding: 8px 0; font-size: 10px; }
    .ht-qty-row { gap: 3px; }
    .ht-qty-btn { width: 24px; height: 24px; font-size: 12px; }
    .ht-qty-value { font-size: 12px; min-width: 24px; }
    .ht-qty-preset { padding: 3px 6px; font-size: 9px; }
    .ht-batch-counter { font-size: 11px; }
    .ht-crafting-area { padding: 6px; gap: 6px; }
    .ht-hack-body { padding: 16px 12px; }
    .ht-hack-desc { font-size: 11px; }
    .btn-ht-hack { padding: 10px 24px; font-size: 11px; }

    /* Coming soon: responsive on mobile */
    .coming-soon-panel {
        width: 85vw;
        max-width: 300px;
        padding: 20px;
    }
    .coming-soon-title { font-size: 14px; letter-spacing: 4px; margin-bottom: 10px; }
    .coming-soon-badge { font-size: 11px; padding: 6px 16px; letter-spacing: 3px; margin-bottom: 10px; }
    .coming-soon-desc { font-size: 10px; margin-bottom: 14px; }

    /* Dialog panel: responsive on mobile */
    .dialog-panel {
        width: 90vw;
        max-width: 360px;
        padding: 16px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .dialog-title { font-size: 12px; letter-spacing: 3px; margin-bottom: 10px; }
    .dialog-line { font-size: 11px; padding: 8px 10px; line-height: 1.5; }
    .dialog-continue { padding: 8px 0; font-size: 11px; margin-top: 10px; }
    .dialog-option-btn { padding: 8px 6px; font-size: 10px; }
    .dialog-options { margin-top: 10px; gap: 6px; }

    /* Controls screen: mobile compact */
    #controls-screen > .screen-content {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 16px 12px 32px;
    }
    .controls-title { font-size: 1.1em; letter-spacing: 3px; margin-bottom: 10px; }
    .controls-grid { gap: 8px; }
    .controls-section { padding: 10px 12px; }
    .controls-section-title { font-size: 8px; letter-spacing: 2px; }
    .control-key { font-size: 9px; padding: 3px 7px; }
    .control-desc { font-size: 10px; }

    /* Settings screen: mobile compact */
    #settings-screen > .screen-content {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 16px 12px 32px;
    }
    .settings-title { font-size: 1.1em; letter-spacing: 3px; margin-bottom: 10px; }
    .settings-screen-section { padding: 12px 14px; }
    .settings-screen-range span:first-child { min-width: 90px; font-size: 11px; }

    /* ============================================
       HAMBURGER MENU (mobile only)
       ============================================ */
    #mobile-hamburger-btn {
        position: fixed;
        top: calc(8px + env(safe-area-inset-top, 0px));
        right: calc(8px + env(safe-area-inset-right, 0px));
        padding: 0;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        border: 1px solid rgba(80, 120, 200, 0.3);
        background: rgba(10, 15, 30, 0.9);
        color: #8ac;
        font-size: 22px;
        font-family: 'Courier New', monospace;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
        z-index: 1001;
        pointer-events: auto;
    }

    /* Move minimap left to avoid overlapping the hamburger button */
    #minimap-canvas {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        right: 60px !important;
    }

    .orbryn-universal-close {
        top: calc(8px + env(safe-area-inset-top, 0px));
        right: calc(8px + env(safe-area-inset-right, 0px));
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .orbryn-universal-close-x {
        font-size: 28px;
    }

    .orbryn-universal-close-text {
        font-size: 8px;
    }

    #mobile-hamburger-btn:active {
        background: rgba(60, 100, 200, 0.4);
        border-color: rgba(120, 180, 255, 0.6);
    }

    .mhm-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 58;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mhm-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mhm-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40%;
        min-width: 180px;
        max-width: 260px;
        background: rgba(8, 12, 25, 0.96);
        border-left: 1px solid rgba(80, 120, 200, 0.25);
        z-index: 59;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        display: flex;
        flex-direction: column;
        padding: 60px 0 20px;
        padding-right: env(safe-area-inset-right, 0px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mhm-panel.open {
        transform: translateX(0);
    }

    .mhm-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        color: #8ac;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: none;
        background: none;
        cursor: pointer;
        touch-action: pan-y; /* allow vertical scroll through items */
        border-bottom: 1px solid rgba(80, 120, 200, 0.08);
        transition: background 0.15s;
        text-align: left;
        width: 100%;
    }

    .mhm-item:active {
        background: rgba(60, 100, 200, 0.2);
    }

    .mhm-item-icon {
        font-size: 16px;
        width: 24px;
        text-align: center;
    }

    /* ============================================
       SIDE PANEL MOBILE MODAL (centered, no tabs)
       ============================================ */
    .sp-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 62;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sp-modal-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .sp-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.92);
        width: 88%;
        max-width: 420px;
        max-height: 80vh;
        max-height: 80dvh;
        background: rgba(8, 12, 25, 0.97);
        border: 1px solid rgba(80, 120, 200, 0.3);
        border-radius: 12px;
        z-index: 63;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
    }

    .sp-modal.open {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }

    .sp-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(80, 120, 200, 0.2);
        flex-shrink: 0;
    }

    .sp-modal-title {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 3px;
        color: rgba(160, 200, 255, 0.8);
    }

    .sp-modal-close {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(80, 120, 200, 0.3);
        background: none;
        color: #8ac;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    .sp-modal-close:active {
        background: rgba(255, 80, 80, 0.2);
    }

    .sp-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 10px;
    }

    /* Content inside modal: always visible, inherit mobile sizes */
    .sp-modal-body .sp-content {
        display: block !important;
        max-height: none;
    }

    /* Social panel mobile overrides — larger touch targets, relaxed list height */
    .sp-modal-body .social-list {
        max-height: none;
    }
    .sp-modal-body .social-entry {
        padding: 10px 12px;
        gap: 10px;
    }
    .sp-modal-body .social-btn {
        min-width: 44px;
        min-height: 36px;
        font-size: 12px;
        padding: 6px 12px;
    }
    .sp-modal-body .social-input {
        font-size: 14px;
        padding: 10px 12px;
        min-height: 40px;
    }
    .sp-modal-body .social-add-row {
        gap: 8px;
        margin-bottom: 14px;
    }
    .sp-modal-body .social-name {
        font-size: 14px;
    }
    .sp-modal-body .social-status-dot {
        font-size: 12px;
    }
    .sp-modal-body .social-section {
        margin-bottom: 16px;
    }

    /* ============================================
       CHAT TOGGLE BUTTON (mobile only)
       ============================================ */
    .mobile-chat-toggle {
        position: absolute;
        /* Default: right of the compact HP/vitals stack, away from joystick input. */
        left: calc(170px + env(safe-area-inset-left, 0px));
        top: calc(10px + env(safe-area-inset-top, 0px));
        bottom: auto;
        margin-left: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(80, 120, 200, 0.3);
        background: rgba(10, 15, 30, 0.85);
        color: #8ac;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: none;
        z-index: 20;
        pointer-events: auto;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .mobile-chat-toggle:active {
        background: rgba(60, 100, 200, 0.4);
        border-color: rgba(120, 180, 255, 0.6);
    }

    .mobile-chat-toggle.dragging {
        transform: scale(1.15);
        box-shadow: 0 0 16px rgba(80, 160, 255, 0.5);
        border-color: rgba(120, 180, 255, 0.7);
        opacity: 0.9;
    }

    /* ============================================
       CHAT BOTTOM SHEET (mobile only)
       ============================================ */
    #chat-panel.mobile-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 50vh;
        border-radius: 12px 12px 0 0;
        background: rgba(8, 12, 25, 0.96);
        border: 1px solid rgba(80, 120, 200, 0.2);
        border-bottom: none;
        z-index: 55;
        transform: translateY(100%);
        transition: transform 0.25s ease, height 0.25s ease, border-radius 0.25s ease;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Disable transitions while dragging for real-time tracking */
    #chat-panel.mobile-sheet.sheet-dragging {
        transition: none !important;
    }

    #chat-panel.mobile-sheet.sheet-open {
        transform: translateY(0);
    }

    /* Override chat-minimized to hide via transform instead */
    #chat-panel.mobile-sheet.chat-minimized {
        transform: translateY(100%);
    }

    #chat-panel.mobile-sheet #chat-log {
        flex: 1;
        min-height: 0;
    }

    /* Bottom sheet header: drag handle center, buttons right */
    .chat-sheet-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 14px 12px 8px;
        border-bottom: 1px solid rgba(80, 120, 200, 0.15);
        touch-action: none;
        cursor: grab;
        flex-shrink: 0;
    }

    .chat-sheet-header:active {
        cursor: grabbing;
    }

    .chat-sheet-handle {
        width: 40px;
        height: 4px;
        background: rgba(80, 120, 200, 0.3);
        border-radius: 2px;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .chat-sheet-close,
    .chat-sheet-expand {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(80, 120, 200, 0.3);
        background: none;
        color: #8ac;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        flex-shrink: 0;
    }

    .chat-sheet-expand {
        font-size: 13px;
    }

    .chat-sheet-close:active,
    .chat-sheet-expand:active {
        background: rgba(60, 100, 200, 0.3);
    }

    /* Horizontal channel tabs for bottom sheet */
    #chat-panel.mobile-sheet .chat-tabs {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-left: none;
        border-bottom: 1px solid rgba(80, 120, 200, 0.15);
        padding: 0;
        gap: 0;
    }

    #chat-panel.mobile-sheet .chat-tab {
        padding: 8px 12px;
        writing-mode: horizontal-tb;
        white-space: nowrap;
        font-size: 10px;
    }

    #chat-panel.mobile-sheet .chat-body {
        flex-direction: column-reverse;
    }

    /* chat-log height handled by flex on .mobile-sheet */

    #chat-panel.mobile-sheet #chat-input {
        border-radius: 0;
        border-top: 1px solid rgba(80, 120, 200, 0.2);
    }

    #loot-toast-container {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: auto;
        bottom: auto;
        left: calc(12px + env(safe-area-inset-left, 0px));
        /* Cap the right edge at ~208px so toasts stay clear of the group
           pill/panel column that starts at 212px + safe-left. */
        width: clamp(150px, 31dvw, 196px);
        max-height: 176px;
        max-height: min(42dvh, 176px);
        align-items: flex-start;
        gap: 6px;
        overflow: hidden;
    }

    #loot-toast-container .loot-toast {
        max-height: 100%;
    }

    /* Override existing chat-inactive behavior for mobile sheet */
    #chat-panel.mobile-sheet.chat-inactive #chat-input {
        display: block;
    }

    /* ============================================
       CHAT TOAST (mobile only)
       ============================================ */
    .chat-toast {
        position: fixed;
        left: 16px;
        bottom: 190px;
        margin-left: env(safe-area-inset-left, 0px);
        max-width: 50%;
        padding: 6px 12px;
        background: rgba(8, 12, 25, 0.9);
        border: 1px solid rgba(80, 120, 200, 0.2);
        border-radius: 6px;
        color: #ccc;
        font-family: 'Courier New', monospace;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 20;
        pointer-events: none;
        animation: chatToastFade 5s ease forwards;
    }

    @keyframes chatToastFade {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; }
    }

    /* ============================================
       CHAT MINI FEED (mobile only)
       Compact recent-message overlay shown while the
       chat sheet is minimized. Tap to open full chat.
       ============================================ */
    #chat-mini-feed {
        /* Anchored directly below the chat toggle button (portrait default:
           toggle sits at left 170px / top 10px beside the vitals stack). */
        position: fixed;
        left: calc(170px + env(safe-area-inset-left, 0px));
        top: calc(56px + env(safe-area-inset-top, 0px));
        width: min(52vw, 250px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3px;
        z-index: 20;
        pointer-events: auto;
        touch-action: manipulation;
    }

    #chat-mini-feed:empty {
        pointer-events: none;
    }

    .chat-mini-row {
        padding: 3px 8px;
        background: rgba(8, 12, 25, 0.72);
        border-left: 2px solid rgba(80, 120, 200, 0.5);
        border-radius: 4px;
        color: #ddd;
        font-family: 'Courier New', monospace;
        font-size: 11px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        opacity: 1;
        transition: opacity 0.6s ease;
        animation: chatMiniRowIn 0.18s ease;
    }

    .chat-mini-row.mini-fading {
        opacity: 0;
    }

    .chat-mini-tag {
        color: #8ac;
        font-weight: bold;
        font-size: 9px;
    }

    .chat-mini-row.chat-type-error .chat-mini-body { color: #ff8080; }
    .chat-mini-row.chat-type-pvp-kill .chat-mini-body { color: #ff6060; }

    @keyframes chatMiniRowIn {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Hide mobile controls when modal is open --- */
    #mobile-controls.modal-active {
        display: none !important;
    }

    /* Area transition: smaller on mobile */
    .area-transition { top: 20%; }
    .area-transition-name { font-size: 18px; letter-spacing: 4px; }
    .area-transition-subtitle { font-size: 10px; }

    /* Area indicator: compact on mobile */
    #area-indicator { font-size: 9px; padding: 3px 6px; letter-spacing: 1px; }
    #player-count { font-size: 8px; padding: 1px 6px; }
    #connection-status { font-size: 7px; padding: 0 6px; }
    .nametag-title { font-size: 7px; }
    .nametag-name { font-size: 9px; }
    .nametag-level { font-size: 7px; }
}

/* ============================================
   AREA TRANSITION OVERLAY
   ============================================ */
.area-transition {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 30;
    pointer-events: none !important;
    animation: areaFadeInOut 3.6s ease forwards;
}

.area-transition-name,
.area-transition-subtitle {
    pointer-events: none !important;
}

.area-transition-name {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #fff;
    margin-bottom: 6px;
}

.area-transition-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(180, 190, 210, 0.7);
    letter-spacing: 2px;
}

@keyframes areaFadeInOut {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Border tint flash on biome entry */
.area-border-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none !important;
    z-index: 29;
    animation: borderFlash 1.5s ease-out forwards;
}

@keyframes borderFlash {
    0%   { opacity: 0.8; }
    100% { opacity: 0; }
}

/* ============================================
   ENVIRONMENT HAZARD WARNING
   ============================================ */
.env-warning {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 31;
    pointer-events: none !important;
    animation: envWarningAnim 5s ease forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.env-warning-icon {
    font-size: 32px;
    color: var(--env-color, #ffaa44);
    filter: drop-shadow(0 0 12px var(--env-color, #ffaa44));
    animation: envWarningPulse 0.8s ease-in-out 3;
}

.env-warning-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px var(--env-color, #ffaa44), 0 0 20px var(--env-color, #ffaa44)80;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border: 1px solid var(--env-color, #ffaa44)60;
    border-radius: 4px;
}

@keyframes envWarningAnim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

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

/* ============================================
   PERSISTENT AREA INDICATOR (below vitals)
   ============================================ */
#area-indicator {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(180, 190, 210, 0.7);
    padding: 4px 8px;
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.area-indicator-name {
    text-transform: uppercase;
    font-weight: bold;
    color: rgba(220, 230, 250, 0.9);
}

.area-indicator-level {
    color: rgba(150, 165, 195, 0.7);
}

/* --- Player Count (Multiplayer HUD) --- */
#player-count {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(150, 200, 180, 0.7);
    padding: 2px 8px;
    margin-top: 2px;
}

/* --- Connection Status (Multiplayer HUD) --- */
#connection-status {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: rgba(150, 165, 195, 0.7);
    padding: 1px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.conn-dot {
    font-size: 8px;
    color: var(--conn-color, rgba(200, 80, 80, 0.8));
}

#connection-status.connected .conn-dot { --conn-color: rgba(80, 200, 120, 0.9); }
#connection-status.reconnecting .conn-dot { --conn-color: rgba(220, 180, 60, 0.9); }
#connection-status.disconnected .conn-dot { --conn-color: rgba(200, 80, 80, 0.8); }
#connection-status.solo .conn-dot { --conn-color: rgba(120, 140, 170, 0.6); }

/* --- Remote Player Name Tags --- */
.remote-player-nametag {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.nametag-name {
    font-size: 11px;
    font-weight: bold;
    color: rgba(220, 240, 255, 0.95);
    letter-spacing: 0.5px;
}

.nametag-title {
    border: 1px solid rgba(83, 220, 150, 0.34);
    background: rgba(3, 12, 10, 0.72);
    color: rgba(145, 255, 190, 0.94);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 1px 5px;
    text-transform: uppercase;
}

.nametag-level {
    font-size: 9px;
    color: rgba(160, 200, 180, 0.8);
}

.nametag-hp-bar {
    width: 48px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1.5px;
    overflow: hidden;
    margin-top: 1px;
}

.nametag-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #c03030, #e04040);
    border-radius: 1.5px;
    transition: width 0.2s ease;
}

.nametag-sleep {
    font-size: 9px;
    color: rgba(180, 180, 255, 0.7);
    font-style: italic;
    animation: sleep-pulse 2s ease-in-out infinite;
}

@keyframes sleep-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1.0; }
}

/* --- Sleep Loot Panel --- */
.sleep-loot-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(8, 12, 28, 0.96);
    border: 1px solid rgba(60, 140, 220, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 140, 220, 0.3) transparent;
}
.sleep-loot-panel::-webkit-scrollbar { width: 6px; }
.sleep-loot-panel::-webkit-scrollbar-track { background: transparent; }
.sleep-loot-panel::-webkit-scrollbar-thumb { background: rgba(60, 140, 220, 0.3); border-radius: 3px; }

.sleep-loot-title {
    color: #4af !important;
    text-shadow: 0 0 10px rgba(60, 140, 255, 0.4) !important;
}

.sleep-loot-equip-slot {
    position: relative;
    border-color: rgba(100, 180, 255, 0.4) !important;
}

.sleep-loot-slot-label {
    position: absolute;
    bottom: 1px;
    left: 2px;
    font-size: 7px;
    color: rgba(140, 200, 255, 0.7);
    letter-spacing: 1px;
    pointer-events: none;
}

.btn-sleep-loot-orbs {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(60, 140, 220, 0.15);
    border: 1px solid rgba(60, 140, 220, 0.3);
    border-radius: 4px;
    color: #4af;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: background 0.15s;
}
.btn-sleep-loot-orbs:hover {
    background: rgba(60, 140, 220, 0.3);
}

/* --- Local Player Speech Bubble --- */
.local-chat-bubble {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.chat-bubble-text {
    background: rgba(8, 12, 28, 0.92);
    border: 1px solid rgba(80, 140, 220, 0.45);
    border-radius: 8px;
    padding: 4px 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ddf;
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    text-shadow: 0 0 6px rgba(80, 140, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Downward triangle tail */
.chat-bubble-tail {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(8, 12, 28, 0.92);
    filter: drop-shadow(0 1px 1px rgba(80, 140, 220, 0.3));
}

/* --- Remote Player Speech Bubble --- */
.remote-chat-bubble {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 51;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* --- Day/Night Clock + PvP Status --- */
#day-night-hud {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1px;
}

#day-night-clock {
    color: rgba(200, 210, 230, 0.85);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

#day-night-clock.night {
    color: rgba(140, 160, 220, 0.85);
    border-color: rgba(100, 120, 180, 0.2);
}

#pvp-status {
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 9px;
    letter-spacing: 1.5px;
}

#pvp-status.pvp-safe {
    color: rgba(80, 200, 120, 0.85);
    background: rgba(40, 100, 60, 0.25);
    border: 1px solid rgba(80, 200, 120, 0.15);
}

#pvp-status.pvp-active {
    color: rgba(255, 80, 80, 0.95);
    background: rgba(120, 30, 30, 0.35);
    border: 1px solid rgba(255, 80, 80, 0.25);
    animation: pvpPulse 2s ease-in-out infinite;
}

@keyframes pvpPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1.0; }
}

/* Admin-forced PvP — distinct orange/yellow to stand out from night PvP */
#pvp-status.pvp-forced {
    color: rgba(255, 180, 40, 0.95);
    background: rgba(120, 80, 10, 0.4);
    border-color: rgba(255, 180, 40, 0.3);
    animation: pvpForcedPulse 1.5s ease-in-out infinite;
}

@keyframes pvpForcedPulse {
    0%, 100% { opacity: 0.85; box-shadow: 0 0 4px rgba(255, 180, 40, 0.0); }
    50% { opacity: 1.0; box-shadow: 0 0 8px rgba(255, 180, 40, 0.3); }
}

/* ============================================
   CODEX: Danger Pips, Level Range, Music Theme
   ============================================ */
.dex-biome-level {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(150, 165, 195, 0.8);
    letter-spacing: 1px;
    margin-left: auto;
}

.dex-danger-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.dex-danger-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(150, 130, 130, 0.7);
    letter-spacing: 1px;
    margin-right: 4px;
}

.dex-danger-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 80, 60, 0.3);
}

.dex-danger-pip.filled {
    background: rgba(255, 60, 40, 0.7);
    border-color: rgba(255, 80, 60, 0.6);
    box-shadow: 0 0 4px rgba(255, 60, 40, 0.3);
}

.dex-music-theme {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(160, 180, 220, 0.6);
    font-style: italic;
    margin-bottom: 8px;
    padding: 4px 0;
    border-top: 1px solid rgba(100, 120, 160, 0.1);
}

.dex-music-icon {
    margin-right: 4px;
    color: rgba(120, 150, 200, 0.5);
}

/* ======================================================================
   BUILD MODE UI
   ====================================================================== */
#build-hotbar {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}

#build-hotbar-slots {
    display: flex;
    gap: 4px;
    background: rgba(8, 12, 20, 0.85);
    border: 1px solid rgba(187, 136, 68, 0.4);
    border-radius: 6px;
    padding: 4px 6px;
    /* 7 visible slots: 7*64 + 6*4 gap + 12 padding + 2 border = 490px */
    max-width: 490px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

#build-hotbar-slots.dragging {
    cursor: grabbing;
}

#build-hotbar-slots::-webkit-scrollbar {
    height: 6px;
}

#build-hotbar-slots::-webkit-scrollbar-thumb {
    background: rgba(187, 136, 68, 0.4);
    border-radius: 999px;
}

.build-category-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 64px;
    flex-shrink: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    color: rgba(187, 136, 68, 0.7);
    text-transform: uppercase;
    border-left: 1px solid rgba(187, 136, 68, 0.25);
    margin-left: 2px;
    padding-left: 2px;
    user-select: none;
    scroll-snap-align: center;
}

.build-category-sep:first-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

.build-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: rgba(20, 25, 40, 0.7);
    border: 2px solid rgba(100, 120, 160, 0.3);
    border-radius: 4px;
    cursor: default;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    user-select: none;
    scroll-snap-align: center;
}

.build-slot.selected {
    border-color: #bb8844;
    background: rgba(187, 136, 68, 0.15);
    box-shadow: 0 0 8px rgba(187, 136, 68, 0.3);
}

.build-slot.disabled {
    opacity: 0.35;
    cursor: default;
}

.build-slot.level-locked {
    opacity: 0.3;
    border-color: rgba(255, 60, 60, 0.4);
}

.build-slot-name {
    font-size: 9px;
    color: #e0e4f0;
    text-align: center;
    line-height: 1.1;
    margin-top: 2px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Build slot hover tooltip */
.build-tooltip {
    position: fixed;
    z-index: 80;
    min-width: 160px;
    max-width: 240px;
    padding: 8px 10px;
    background: rgba(8, 12, 28, 0.95);
    border: 1px solid rgba(187, 136, 68, 0.4);
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ccc;
    pointer-events: none;
    transform: translate(-50%, -100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.36s ease;
}

.build-tooltip--fading {
    opacity: 0;
}

@media (pointer: coarse) {
    .build-tooltip {
        display: none !important;
    }
}

.btip-name {
    font-size: 13px;
    font-weight: bold;
    color: #bb8844;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.btip-type {
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(187, 160, 100, 0.5);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.btip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.btip-row span {
    color: #fff;
    font-weight: bold;
}

.btip-desc {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(187, 136, 68, 0.15);
    color: rgba(200, 210, 230, 0.7);
    font-size: 10px;
    white-space: normal;
}

.btip-unavailable {
    margin-top: 4px;
    color: rgba(255, 80, 80, 0.8);
    font-size: 10px;
}

.build-slot-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}

.build-slot.disabled .build-slot-icon,
.build-slot.level-locked .build-slot-icon {
    filter: grayscale(0.7) brightness(0.5);
}

#build-hotbar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 8px;
    font-size: 10px;
}

#build-material-counts {
    color: rgba(187, 136, 68, 0.8);
}

#build-mode-label {
    color: #bb8844;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(187, 136, 68, 0.4);
    animation: build-pulse 2s ease-in-out infinite;
}

@keyframes build-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Build mode indicator (top center) */
#build-mode-indicator {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    font-size: 14px;
    font-weight: bold;
    color: #bb8844;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(187, 136, 68, 0.5);
    padding: 4px 16px;
    background: rgba(8, 12, 20, 0.7);
    border: 1px solid rgba(187, 136, 68, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

#build-rotation-indicator {
    position: fixed;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    font-size: 13px;
    font-weight: bold;
    color: #66ccaa;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(102, 204, 170, 0.5);
    padding: 3px 12px;
    background: rgba(8, 12, 20, 0.7);
    border: 1px solid rgba(102, 204, 170, 0.3);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mobile build button */
#btn-mobile-build {
    background: rgba(187, 136, 68, 0.3);
    border: 1px solid rgba(187, 136, 68, 0.5);
    color: #bb8844;
}

/* --- Mobile Build Placement Confirm Menu (long-press session) ---
   Deliberately translucent: the panel floats over the world and the pinned
   ghost must stay visible through it. The container ignores touches
   (pointer-events: none) so taps between buttons pass through and re-aim
   the ghost — only the buttons themselves capture input. */
#build-confirm-menu {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px)) + 150px);
    width: min(340px, calc(100vw - 24px));
    background: rgba(8, 12, 20, 0.38);
    border: 1px solid rgba(187, 136, 68, 0.35);
    border-radius: 10px;
    padding: 6px 8px 8px;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    z-index: 130;
}
.bcm-title {
    text-align: center;
    color: #d9a45f;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.bcm-status {
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.5px;
    margin: 3px 0 6px;
    min-height: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.bcm-status-ok { color: #55e69a; }
.bcm-status-bad { color: #ff7766; }
.bcm-pad {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
.bcm-pad .bcm-btn {
    min-height: 38px;
    font-size: 14px;
    padding: 4px 0;
}
/* Skydeck height-tier steppers  half-width second row so the touch
   targets stay large (shown only while a Skydeck platform is selected) */
.bcm-pad .bcm-btn.bcm-tier {
    grid-column: span 3;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.bcm-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
}
.bcm-btn {
    background: rgba(45, 34, 16, 0.5);
    border: 1px solid rgba(187, 136, 68, 0.45);
    border-radius: 6px;
    color: rgba(255, 224, 180, 0.95);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    min-height: 40px;
    padding: 8px 4px;
    cursor: pointer;
    pointer-events: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.bcm-btn:active {
    background: rgba(187, 136, 68, 0.45);
}
.bcm-place {
    background: rgba(18, 72, 45, 0.55);
    border-color: rgba(68, 204, 136, 0.55);
    color: #b8ffd6;
}
.bcm-place:disabled { opacity: 0.35; }
.bcm-replace {
    background: rgba(84, 56, 14, 0.55);
    border-color: rgba(230, 170, 80, 0.55);
    color: #ffd9a0;
}
.bcm-demolish {
    background: rgba(92, 26, 26, 0.55);
    border-color: rgba(255, 100, 100, 0.55);
    color: #ffb9b9;
}
.bcm-cancel {
    background: rgba(36, 41, 56, 0.55);
    border-color: rgba(120, 140, 180, 0.45);
    color: #ccd8f2;
}

@media (pointer: coarse) and (orientation: landscape) {
    #build-confirm-menu {
        bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 118px);
        width: min(300px, calc(100vw - 200px));
    }
}

/* Mobile remove button (build mode only) */
#btn-mobile-remove {
    background: rgba(200, 50, 50, 0.3);
    border: 2px solid rgba(255, 80, 80, 0.5);
    color: #f66;
}
#btn-mobile-remove:active {
    background: rgba(200, 60, 60, 0.5);
    border-color: rgba(255, 100, 100, 0.7);
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.3);
}

/* Mobile Hack Arrow Pad (d-pad layout) */
#mobile-hack-arrows {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    grid-template-columns: 56px 56px 56px;
    grid-template-rows: 56px 56px 56px;
    gap: 4px;
    pointer-events: auto;
}
#btn-hack-up    { grid-column: 2; grid-row: 1; }
#btn-hack-left  { grid-column: 1; grid-row: 2; }
#btn-hack-right { grid-column: 3; grid-row: 2; }
#btn-hack-down  { grid-column: 2; grid-row: 3; }

.hack-arrow-btn {
    border-color: rgba(0, 255, 180, 0.4) !important;
    background: rgba(0, 40, 30, 0.7) !important;
    color: #0fa !important;
    font-size: 18px !important;
}
.hack-arrow-btn:active {
    background: rgba(0, 120, 80, 0.5) !important;
    border-color: rgba(0, 255, 180, 0.8) !important;
    box-shadow: 0 0 14px rgba(0, 255, 180, 0.4);
}

/* ============================================
   GRAVE TRACKER DISTANCE LABEL
   ============================================ */
#grave-tracker-label {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #ff4040;
    text-shadow: 0 0 6px rgba(255, 32, 32, 0.8), 0 0 12px rgba(255, 32, 32, 0.4);
    white-space: nowrap;
    z-index: 50;
    transition: opacity 0.3s ease;
}

#voss-tracker-label {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #7cdcff;
    text-shadow: 0 0 6px rgba(70, 190, 240, 0.85), 0 0 12px rgba(70, 190, 240, 0.4);
    white-space: nowrap;
    z-index: 50;
    transition: opacity 0.3s ease;
}

#voss-tracker-label .voss-tracker-kicker {
    font-size: 9px;
    letter-spacing: 2px;
    color: #ffe680;
    text-shadow: 0 0 6px rgba(255, 210, 64, 0.85), 0 0 12px rgba(255, 210, 64, 0.35);
}

#voss-tracker-label .voss-tracker-target {
    color: #7cdcff;
}

#dps-dummy-meter {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 218, 96, 0.65);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(22, 16, 8, 0.86), rgba(7, 5, 3, 0.72));
    box-shadow: 0 0 16px rgba(255, 190, 45, 0.2), inset 0 0 12px rgba(255, 190, 45, 0.08);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.2px;
    color: #ffe680;
    text-shadow: 0 0 6px rgba(255, 202, 64, 0.6);
    white-space: nowrap;
    z-index: 51;
    transition: opacity 0.18s ease;
}

#dps-dummy-meter .dps-dummy-kicker {
    color: #ff8b4a;
    font-size: 9px;
    letter-spacing: 2px;
}

#dps-dummy-meter .dps-dummy-title {
    color: #fff3c2;
}

#dps-dummy-meter .dps-dummy-stats {
    color: #7cdcff;
    font-size: 10px;
}

/* ============================================
   PC GAMEPLAY CURSOR
   ============================================ */
.pc-crosshair {
    position: fixed;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
    pointer-events: none;
}

.pc-crosshair.hidden {
    display: none !important;
}

.attack-cooldown-host {
    --attack-cooldown-angle: 0deg;
    --attack-cooldown-ratio: 0;
    --attack-cooldown-fill: rgba(255, 164, 76, 0.96);
    --attack-cooldown-track: rgba(255, 255, 255, 0.11);
    --attack-cooldown-glow: rgba(255, 144, 64, 0.34);
    --attack-cooldown-inner-glow: rgba(255, 210, 128, 0.18);
    --attack-cooldown-text: #ffd27a;
    --attack-cooldown-text-glow: rgba(255, 144, 64, 0.5);
    --special-cooldown-angle: 0deg;
    --special-cooldown-ratio: 0;
    --special-cooldown-fill: rgba(126, 241, 255, 0.98);
    --special-cooldown-track: rgba(62, 245, 255, 0.13);
    --special-cooldown-glow: rgba(74, 226, 255, 0.42);
    --special-cooldown-inner-glow: rgba(194, 252, 255, 0.2);
    --special-cooldown-text: #aefaff;
    --special-cooldown-text-glow: rgba(74, 226, 255, 0.6);
}

.attack-cooldown-ring,
.attack-cooldown-time {
    pointer-events: none;
}

.attack-cooldown-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    opacity: 0;
    background: conic-gradient(
        var(--cooldown-fill, var(--attack-cooldown-fill)) var(--cooldown-angle, var(--attack-cooldown-angle)),
        var(--cooldown-track, var(--attack-cooldown-track)) 0deg
    );
    box-shadow:
        0 0 10px var(--cooldown-glow, var(--attack-cooldown-glow)),
        inset 0 0 8px var(--cooldown-inner-glow, var(--attack-cooldown-inner-glow));
    transform: rotate(-90deg);
    transition: opacity 0.08s linear;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.attack-cooldown-ring-primary {
    --cooldown-angle: var(--attack-cooldown-angle);
    --cooldown-fill: var(--attack-cooldown-fill);
    --cooldown-track: var(--attack-cooldown-track);
    --cooldown-glow: var(--attack-cooldown-glow);
    --cooldown-inner-glow: var(--attack-cooldown-inner-glow);
    z-index: 2;
}

.attack-cooldown-ring-special {
    --cooldown-angle: var(--special-cooldown-angle);
    --cooldown-fill: var(--special-cooldown-fill);
    --cooldown-track: var(--special-cooldown-track);
    --cooldown-glow: var(--special-cooldown-glow);
    --cooldown-inner-glow: var(--special-cooldown-inner-glow);
    inset: -14px;
    z-index: 1;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.attack-cooldown-time {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    min-width: 28px;
    transform: translateX(-50%);
    opacity: 0;
    color: var(--attack-cooldown-text);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-shadow:
        0 0 5px rgba(0, 0, 0, 0.9),
        0 0 10px var(--attack-cooldown-text-glow);
}

.attack-cooldown-time-primary {
    z-index: 3;
}

.attack-cooldown-time-special {
    top: auto;
    bottom: calc(100% + 6px);
    color: var(--special-cooldown-text);
    font-size: 9px;
    text-shadow:
        0 0 5px rgba(0, 0, 0, 0.9),
        0 0 10px var(--special-cooldown-text-glow);
    z-index: 3;
}

.attack-cooldown-host.attack-cooldown-primary-active .attack-cooldown-ring-primary,
.attack-cooldown-host.attack-cooldown-primary-active .attack-cooldown-time-primary,
.attack-cooldown-host.attack-cooldown-special-active .attack-cooldown-ring-special,
.attack-cooldown-host.attack-cooldown-special-active .attack-cooldown-time-special {
    opacity: 1;
}

.attack-cooldown-host.attack-cooldown-ready-flash .attack-cooldown-ring {
    opacity: 1;
    background: conic-gradient(rgba(120, 255, 180, 0.95) 360deg, rgba(120, 255, 180, 0) 0deg);
    box-shadow:
        0 0 12px rgba(120, 255, 180, 0.42),
        inset 0 0 8px rgba(220, 255, 235, 0.24);
    animation: attack-cooldown-ready-pop 0.24s ease-out forwards;
}

@keyframes attack-cooldown-ready-pop {
    0% { opacity: 1; transform: rotate(-90deg) scale(0.94); }
    100% { opacity: 0; transform: rotate(-90deg) scale(1.28); }
}

.gamepad-attack-cooldown {
    position: fixed;
    left: calc(50% + 94px);
    top: calc(50% + 70px);
    width: 58px;
    height: 58px;
    z-index: 930;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(126, 241, 255, 0.42);
    border-radius: 50%;
    background: rgba(7, 16, 23, 0.72);
    color: #dbfbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    opacity: 0.76;
    box-shadow:
        0 0 13px rgba(0, 0, 0, 0.55),
        inset 0 0 14px rgba(74, 226, 255, 0.08);
    transition: opacity 0.1s linear, border-color 0.1s linear, box-shadow 0.1s linear;
}

.gamepad-attack-cooldown.hidden {
    display: none !important;
}

.gamepad-attack-cooldown.attack-cooldown-active {
    opacity: 1;
    border-color: rgba(126, 241, 255, 0.78);
    box-shadow:
        0 0 14px rgba(74, 226, 255, 0.24),
        inset 0 0 14px rgba(74, 226, 255, 0.12);
}

.gamepad-attack-cooldown .gamepad-attack-cooldown-glyph,
.gamepad-attack-cooldown .gamepad-attack-cooldown-label {
    position: relative;
    z-index: 1;
}

.gamepad-attack-cooldown .gamepad-attack-cooldown-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: #aefaff;
    text-shadow: 0 0 7px rgba(74, 226, 255, 0.62);
}

.gamepad-attack-cooldown .attack-cooldown-ring-primary {
    inset: -6px;
}

.gamepad-attack-cooldown .attack-cooldown-ring-special {
    inset: -11px;
}

.gamepad-attack-cooldown .attack-cooldown-time-primary {
    top: calc(100% + 4px);
    font-size: 10px;
}

.gamepad-attack-cooldown .attack-cooldown-time-special {
    bottom: calc(100% + 4px);
    font-size: 9px;
}

@media (pointer: fine) {
    /* Hide native cursor when crosshair is active */
    body.crosshair-active,
    body.crosshair-active * {
        cursor: none !important;
    }

    /* Minimal field cursor shared with gamepad/mobile aiming language. */
    .pc-crosshair {
        position: fixed;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
        pointer-events: none;
        z-index: 2147483647;
        opacity: 0.92;
        will-change: transform;
        filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.42));
    }

    .pc-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #e9fbff;
        box-shadow:
            0 0 5px rgba(233, 251, 255, 0.92),
            0 0 10px rgba(0, 217, 255, 0.52);
    }

    .pc-crosshair::after {
        content: '';
        display: none;
    }

    /* Crosshair arms removed — gameplay cursor now matches the UI ring cursor. */
    .crosshair-arm {
        display: none;
    }

    /* Vertical arms (top + bottom) */
    .crosshair-arm-top,
    .crosshair-arm-bottom {
        width: 2px;
        height: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .crosshair-arm-top    { top: 2px; }
    .crosshair-arm-bottom { bottom: 2px; }

    /* Horizontal arms (left + right) */
    .crosshair-arm-left,
    .crosshair-arm-right {
        height: 2px;
        width: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .crosshair-arm-left  { left: 2px; }
    .crosshair-arm-right { right: 2px; }

    .crosshair-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 22px;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(0, 217, 255, 0.74);
        border-radius: 50%;
        background:
            linear-gradient(rgba(0, 217, 255, 0.9), rgba(0, 217, 255, 0.9)) 50% -1px / 1px 5px no-repeat,
            linear-gradient(rgba(0, 217, 255, 0.68), rgba(0, 217, 255, 0.68)) 50% calc(100% + 1px) / 1px 5px no-repeat,
            linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) -1px 50% / 5px 1px no-repeat,
            linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) calc(100% + 1px) 50% / 5px 1px no-repeat;
        box-shadow: 0 0 7px rgba(0, 217, 255, 0.22);
    }

    .crosshair-ring::before {
        content: '';
        position: absolute;
        inset: 7px;
        border: 1px solid rgba(230, 169, 87, 0.5);
        border-radius: 50%;
    }

    .crosshair-ring::after {
        content: '';
        display: none;
    }

    /* --- Hidden state --- */
    .pc-crosshair.hidden {
        display: none;
    }

    /* --- Fire kick animation --- */
    .pc-crosshair.fire-kick .crosshair-ring {
        animation: crosshair-fire 0.15s ease-out;
    }

    /* Subtle idle breathing */
    @keyframes crosshair-idle {
        0%, 100% { opacity: 0.96; }
        50%      { opacity: 0.78; }
    }

    /* Shot feedback — brief expand + brighten */
    @keyframes crosshair-fire {
        0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
        40%  { transform: translate(-50%, -50%) scale(1.18);  opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.92; }
    }

    /* --- Server-confirmed hitmarker --- */
    /* Four diagonal ticks that pop in briefly when a server DAMAGE event
       confirms YOUR outgoing hit landed. PvP hits tint red. */
    .hit-marker {
        position: fixed;
        width: 22px;
        height: 22px;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 2147483646;
        opacity: 0;
    }
    .hit-marker.show {
        animation: hit-marker-pop 0.22s ease-out;
    }
    .hit-marker .hm-tick {
        position: absolute;
        width: 6px;
        height: 2px;
        background: #eafcff;
        box-shadow: 0 0 5px rgba(233, 251, 255, 0.95), 0 0 9px rgba(0, 217, 255, 0.55);
        border-radius: 1px;
    }
    .hit-marker.pvp .hm-tick {
        background: #ffd2d2;
        box-shadow: 0 0 5px rgba(255, 120, 120, 0.95), 0 0 9px rgba(255, 60, 60, 0.6);
    }
    /* Diagonal arms radiating from centre. */
    .hit-marker .hm-tl { top: 4px;  left: 4px;  transform: rotate(45deg); }
    .hit-marker .hm-tr { top: 4px;  right: 4px; transform: rotate(-45deg); }
    .hit-marker .hm-bl { bottom: 4px; left: 4px;  transform: rotate(-45deg); }
    .hit-marker .hm-br { bottom: 4px; right: 4px; transform: rotate(45deg); }

    @keyframes hit-marker-pop {
        0%   { opacity: 0;   transform: translate(-50%, -50%) scale(1.5); }
        25%  { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.85); }
    }

    /* Reflex sight switches the same cursor into a brighter sight state. */
    .pc-crosshair.reflex-sight::before {
        background: #fff7dd;
        width: 6px;
        height: 6px;
        box-shadow:
            0 0 6px rgba(255, 247, 221, 0.9),
            0 0 14px rgba(230, 169, 87, 0.48);
    }

    .pc-crosshair.reflex-sight .crosshair-ring {
        border-color: rgba(230, 169, 87, 0.78);
        background:
            linear-gradient(rgba(230, 169, 87, 0.9), rgba(230, 169, 87, 0.9)) 50% -1px / 1px 5px no-repeat,
            linear-gradient(rgba(230, 169, 87, 0.72), rgba(230, 169, 87, 0.72)) 50% calc(100% + 1px) / 1px 5px no-repeat,
            linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) -1px 50% / 5px 1px no-repeat,
            linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) calc(100% + 1px) 50% / 5px 1px no-repeat;
    }

    .pc-crosshair.reflex-sight .crosshair-ring::before {
        border-color: rgba(230, 169, 87, 0.6);
        box-shadow:
            0 0 14px rgba(230, 169, 87, 0.34),
            inset 0 0 10px rgba(0, 217, 255, 0.16);
    }
}

.combat-hitmarker {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%) scale(0.82);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
        drop-shadow(0 0 10px rgba(0, 217, 255, 0.42));
}

.combat-hitmarker::before,
.combat-hitmarker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: rgba(244, 255, 255, 0.98);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.75);
}

.combat-hitmarker::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.combat-hitmarker::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.combat-hitmarker.pvp::before,
.combat-hitmarker.pvp::after {
    background: #fff0d0;
    box-shadow:
        0 0 8px rgba(255, 220, 150, 0.82),
        0 0 14px rgba(255, 80, 80, 0.45);
}

.combat-hitmarker.hit-confirm {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   SNIPER SCOPE OVERLAY
   ============================================================ */

/* -- Fullscreen overlay: black outside the circular lens -- */
.scope-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    /* Hard circular cutout — sharp lens edge, total black outside */
    background: radial-gradient(
        circle at center,
        transparent 24%,
        rgba(0,0,0,0.02) 24.5%,
        rgba(0,0,0,0.6) 26%,
        rgba(0,0,0,0.97) 28%,
        #000 30%
    );
    transition: opacity 0.15s ease-in;
}
.scope-overlay.hidden { display: none; }

/* -- Circular lens area — centered, contains tint + reticle -- */
.scope-lens {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(48vw, 48vh);
    height: min(48vw, 48vh);
    border-radius: 50%;
    overflow: hidden;
    /* Thick scope ring */
    box-shadow:
        0 0 0 3px rgba(40, 42, 48, 0.9),
        0 0 0 5px rgba(20, 20, 24, 0.95),
        0 0 0 8px rgba(10, 10, 12, 0.8),
        inset 0 0 40px rgba(0,0,0,0.3);
}

/* Subtle amber lens tint */
.scope-lens-tint {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 200, 100, 0.03) 0%,
        rgba(255, 180, 60, 0.05) 60%,
        rgba(0, 0, 0, 0.15) 100%
    );
    border-radius: 50%;
}

/* -- Reticle container (inside the lens) -- */
.scope-reticle {
    position: absolute;
    inset: 0;
}

/* -- Duplex reticle: thick outer posts tapering to thin center lines -- */
.scope-duplex {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
}

/* Left post */
.scope-duplex-left {
    top: 50%;
    left: 6%;
    right: 56%;
    height: 2.5px;
    transform: translateY(-50%);
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 70%, transparent 100%);
}
/* Thin center line extends from left post */
.scope-duplex-left::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -24%;
    width: 24%;
    height: 1px;
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%);
}

/* Right post */
.scope-duplex-right {
    top: 50%;
    left: 56%;
    right: 6%;
    height: 2.5px;
    transform: translateY(-50%);
    background: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 70%, transparent 100%);
}
.scope-duplex-right::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -24%;
    width: 24%;
    height: 1px;
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%);
}

/* Top post */
.scope-duplex-top {
    left: 50%;
    top: 6%;
    bottom: 56%;
    width: 2.5px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 70%, transparent 100%);
}
.scope-duplex-top::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -24%;
    height: 24%;
    width: 1px;
    background: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%);
}

/* Bottom post */
.scope-duplex-bottom {
    left: 50%;
    top: 56%;
    bottom: 6%;
    width: 2.5px;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 70%, transparent 100%);
}
.scope-duplex-bottom::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -24%;
    height: 24%;
    width: 1px;
    background: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%);
}

/* -- Center aiming dot — small red/amber illuminated dot -- */
.scope-center-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    transform: translate(-50%, -50%);
    background: rgba(255, 60, 40, 0.9);
    border-radius: 50%;
    box-shadow:
        0 0 3px rgba(255, 60, 40, 0.6),
        0 0 8px rgba(255, 60, 40, 0.3);
}

/* -- Range estimation hash marks (below center on vertical axis) -- */
.scope-hash {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 1px;
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
}
.scope-hash-1 { top: calc(50% + 8%); width: 12px; }
.scope-hash-2 { top: calc(50% + 14%); width: 10px; }
.scope-hash-3 { top: calc(50% + 20%); width: 8px; }
.scope-hash-4 { top: calc(50% + 26%); width: 6px; }

/* -- Range numbers (small, subtle, next to hash marks) -- */
.scope-range-num {
    position: absolute;
    left: calc(50% + 14px);
    font-family: 'Courier New', monospace;
    font-size: 8px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
    transform: translateY(-50%);
    user-select: none;
}
.scope-range-1 { top: calc(50% + 8%); }
.scope-range-2 { top: calc(50% + 14%); }
.scope-range-3 { top: calc(50% + 20%); }

/* -- Hold-breath meter (bottom center of screen) -- */
.scope-breath-meter {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.scope-breath-fill {
    height: 100%;
    width: 100%;
    background: rgba(180, 220, 255, 0.5);
    border-radius: 2px;
    transition: width 0.1s linear;
}
.scope-breath-fill.holding {
    background: rgba(100, 255, 140, 0.7);
    box-shadow: 0 0 6px rgba(100, 255, 140, 0.3);
}
.scope-breath-label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
    white-space: nowrap;
    user-select: none;
}

/* ============================================================
   BINOCULAR OVERLAY
   ============================================================ */

.binocular-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    transition: opacity 0.15s ease-in;
    /* Same technique as .scope-overlay but with TWO circular cutouts.
       Each radial-gradient creates one transparent hole; mask-composite: intersect
       ensures only pixels where BOTH gradients are black (outside both circles)
       remain visible — giving us two see-through lens holes. */
    background: #000;
    --bino-size: min(38vw, 38vh);
    --bino-r: calc(var(--bino-size) / 2);
    /* Left lens center:  50% - lensSize/2 - 2px gap */
    /* Right lens center: 50% + lensSize/2 + 2px gap */
    -webkit-mask-image:
        radial-gradient(circle var(--bino-r) at calc(50% - var(--bino-r) - 2px) 50%,
            transparent 96%, rgba(0,0,0,0.6) 98%, #000 100%),
        radial-gradient(circle var(--bino-r) at calc(50% + var(--bino-r) + 2px) 50%,
            transparent 96%, rgba(0,0,0,0.6) 98%, #000 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        radial-gradient(circle var(--bino-r) at calc(50% - var(--bino-r) - 2px) 50%,
            transparent 96%, rgba(0,0,0,0.6) 98%, #000 100%),
        radial-gradient(circle var(--bino-r) at calc(50% + var(--bino-r) + 2px) 50%,
            transparent 96%, rgba(0,0,0,0.6) 98%, #000 100%);
    mask-composite: intersect;
}
.binocular-overlay.hidden { display: none; }

.bino-lens {
    position: absolute;
    top: 50%;
    width: min(38vw, 38vh);
    height: min(38vw, 38vh);
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 0 3px rgba(40, 42, 48, 0.9),
        0 0 0 5px rgba(20, 20, 24, 0.95),
        inset 0 0 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.bino-lens::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(200, 220, 255, 0.02) 0%,
        rgba(100, 140, 180, 0.04) 70%,
        rgba(0, 0, 0, 0.12) 100%
    );
}
.bino-lens-left {
    left: 50%;
    transform: translate(calc(-100% - 2px), -50%);
}
.bino-lens-right {
    left: 50%;
    transform: translate(2px, -50%);
}

.bino-bridge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: min(14vw, 14vh);
    background: rgba(15, 15, 18, 0.95);
    border-radius: 3px;
}

.bino-label {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
    user-select: none;
}

/* ============================================================
   NVG OVERLAY
   ============================================================ */

.nvg-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: #000;
    transition: opacity 0.15s ease-in;
}
.nvg-overlay.hidden { display: none; }

.nvg-lens {
    position: absolute;
    top: 50%;
    width: min(38vw, 38vh);
    height: min(38vw, 38vh);
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 0 3px rgba(30, 60, 40, 0.9),
        0 0 0 5px rgba(15, 30, 20, 0.95),
        inset 0 0 40px rgba(0, 20, 0, 0.3);
    overflow: hidden;
}
.nvg-lens::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(0, 255, 60, 0.06) 0%,
        rgba(0, 200, 40, 0.08) 70%,
        rgba(0, 0, 0, 0.15) 100%
    );
}
.nvg-lens-left {
    left: 50%;
    transform: translate(calc(-100% - 2px), -50%);
}
.nvg-lens-right {
    left: 50%;
    transform: translate(2px, -50%);
}

.nvg-bridge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: min(14vw, 14vh);
    background: rgba(10, 15, 10, 0.95);
    border-radius: 3px;
}

.nvg-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 60, 0.03) 2px,
        rgba(0, 255, 60, 0.03) 4px
    );
    pointer-events: none;
}

.nvg-label {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(0, 255, 80, 0.4);
    letter-spacing: 2px;
    user-select: none;
}

/* ============================================================
   TRADE SYSTEM
   ============================================================ */

/* Overlay container — full screen, centers the trade window */
.trade-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    pointer-events: auto;
}

/* Semi-transparent backdrop */
.trade-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* Main trade window */
.trade-window {
    position: relative;
    background: rgba(10, 12, 20, 0.95);
    border: 2px solid rgba(0, 217, 255, 0.4);
    border-radius: 8px;
    padding: 16px;
    min-width: 520px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 217, 255, 0.1);
    z-index: 1;
}

.trade-title {
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    color: var(--minimap-border-color, #00d9ff);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

/* Two-column layout */
.trade-columns {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
}

.trade-column {
    flex: 1;
    min-width: 0;
}

.trade-divider {
    width: 2px;
    background: rgba(0, 217, 255, 0.2);
    margin: 0 10px;
}

.trade-col-header {
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    color: #8ac;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.trade-pack-header {
    margin-top: 8px;
    margin-bottom: 5px;
}

/* Item grid (4 columns x 3 rows = 12 slots) */
.trade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.trade-slot {
    position: relative;
    aspect-ratio: 1;
    background: rgba(20, 25, 40, 0.8);
    border: 1px solid rgba(60, 80, 120, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.trade-slot:hover {
    border-color: rgba(0, 217, 255, 0.5);
}

.trade-slot-requestable {
    border-color: rgba(80, 224, 128, 0.35);
}

.trade-slot-requestable:hover {
    border-color: rgba(80, 224, 128, 0.75);
    background: rgba(40, 75, 55, 0.6);
}

.trade-slot-empty {
    opacity: 0.4;
}

.trade-slot-icon {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.trade-slot-abbr {
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
}

.trade-slot-count {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-family: monospace;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
}

/* Orbs row */
.trade-orbs-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.trade-orbs-label {
    font-family: monospace;
    font-size: 11px;
    color: #ffd700;
    font-weight: bold;
}

.trade-orbs-input {
    flex: 1;
    background: rgba(20, 25, 40, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: #ffd700;
    font-family: monospace;
    font-size: 12px;
    padding: 4px 6px;
    outline: none;
    width: 80px;
}

.trade-orbs-input:focus {
    border-color: rgba(255, 215, 0, 0.6);
}

.trade-orbs-value {
    font-family: monospace;
    font-size: 12px;
    color: #ffd700;
    font-weight: bold;
}

.handcraft-help {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: rgba(204, 136, 68, 0.12);
    border: 1px solid rgba(204, 136, 68, 0.28);
    border-radius: 8px;
}

.handcraft-help-title {
    margin-bottom: 5px;
    color: #ffd08a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: 0.5px;
}

.handcraft-help-copy {
    color: #d8c199;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0;
}

.trade-orbryn-section {
    border: 1px solid rgba(0, 217, 255, 0.24);
    background: rgba(0, 217, 255, 0.055);
    border-radius: 6px;
    padding: 10px;
    margin: 0 0 12px;
}

.trade-orbryn-header,
.trade-orbryn-entry {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trade-orbryn-header {
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: monospace;
    color: #8ff0ff;
    font-size: 12px;
    font-weight: bold;
}

.trade-orbryn-info,
.trade-orbryn-small-btn {
    min-height: 34px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: #d7fbff;
    font-family: monospace;
    font-size: 11px;
    cursor: pointer;
}

.trade-orbryn-info {
    padding: 4px 8px;
}

.trade-orbryn-small-btn {
    min-width: 52px;
    padding: 4px 8px;
}

.trade-orbryn-small-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.trade-orbryn-input {
    flex: 1;
    min-height: 38px;
    min-width: 0;
    background: rgba(20, 25, 40, 0.86);
    border: 1px solid rgba(0, 217, 255, 0.35);
    border-radius: 4px;
    color: #ffffff;
    font-family: monospace;
    font-size: 14px;
    padding: 7px 9px;
    outline: none;
}

.trade-orbryn-input:focus,
.trade-orbryn-small-btn:focus-visible,
.trade-orbryn-info:focus-visible {
    border-color: rgba(0, 217, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.trade-orbryn-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.trade-orbryn-stats div {
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

.trade-orbryn-stats span,
.trade-orbryn-stats strong {
    display: block;
    overflow-wrap: anywhere;
}

.trade-orbryn-stats span {
    color: #8a9bac;
    font-family: monospace;
    font-size: 10px;
}

.trade-orbryn-stats strong {
    margin-top: 2px;
    color: #ffffff;
    font-family: monospace;
    font-size: 11px;
}

.trade-orbryn-status {
    min-height: 24px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
    color: #b8c7d4;
    font-family: monospace;
    font-size: 11px;
}

.trade-orbryn-status-ok {
    color: #79f0a6;
}

.trade-orbryn-status-pending {
    color: #ffd66b;
}

.trade-orbryn-status-error {
    color: #ff8c9a;
}

/* Confirmation status */
.trade-status {
    font-family: monospace;
    font-size: 11px;
    text-align: center;
    height: 16px;
    color: transparent;
}

.trade-status-confirmed {
    color: #50e080;
    animation: trade-status-pulse 1.5s ease-in-out infinite;
}

@keyframes trade-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Inventory section */
.trade-inv-section {
    border-top: 1px solid rgba(60, 80, 120, 0.3);
    padding-top: 10px;
    margin-bottom: 12px;
}

.trade-inv-header {
    font-family: monospace;
    font-size: 10px;
    color: #667;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.trade-inv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.trade-partner-inv-grid {
    grid-template-columns: repeat(4, 1fr);
    max-height: 112px;
    overflow-y: auto;
}

.trade-inv-empty {
    grid-column: 1 / -1;
    font-family: monospace;
    font-size: 11px;
    color: #556;
    text-align: center;
    padding: 8px;
}

/* Buttons */
.trade-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.trade-btn {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 24px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, opacity 0.15s;
    touch-action: manipulation;
}

.trade-btn-accept {
    color: #50e080;
    border-color: rgba(80, 224, 128, 0.4);
    background: rgba(80, 224, 128, 0.1);
}

.trade-btn-accept:hover:not(:disabled) {
    background: rgba(80, 224, 128, 0.2);
}

.trade-btn-accept:disabled {
    opacity: 0.5;
    cursor: default;
}

.trade-btn-waiting {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.05);
}

.trade-btn-cancel {
    color: #ff6666;
    border-color: rgba(255, 102, 102, 0.4);
    background: rgba(255, 102, 102, 0.1);
}

.trade-btn-cancel:hover {
    background: rgba(255, 102, 102, 0.2);
}

/* Trade Request Notification */
.trade-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 12, 20, 0.95);
    border: 2px solid rgba(0, 217, 255, 0.5);
    border-radius: 8px;
    padding: 12px 20px;
    z-index: 910;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    animation: trade-notif-in 0.3s ease-out;
}

@keyframes trade-notif-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.trade-notif-text {
    font-family: monospace;
    font-size: 13px;
    color: #dde;
    text-align: center;
    margin-bottom: 10px;
}

.trade-notif-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.trade-notif-btn {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 28px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}

.trade-notif-accept {
    color: #50e080;
    border-color: rgba(80, 224, 128, 0.4);
    background: rgba(80, 224, 128, 0.1);
}

.trade-notif-accept:hover {
    background: rgba(80, 224, 128, 0.2);
}

.trade-notif-decline {
    color: #ff6666;
    border-color: rgba(255, 102, 102, 0.4);
    background: rgba(255, 102, 102, 0.1);
}

.trade-notif-decline:hover {
    background: rgba(255, 102, 102, 0.2);
}

/* Social tab trade button */
.social-btn-trade {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
    font-size: 10px;
}

.social-btn-trade:hover {
    background: rgba(255, 215, 0, 0.15);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .trade-overlay {
        align-items: flex-start;
        padding-top: 2vh;
    }

    .trade-window {
        min-width: unset;
        width: 95vw;
        max-height: 92vh;
        padding: 10px;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        touch-action: pan-y;
    }

    .trade-title {
        font-size: 12px;
        margin-bottom: 8px;
    }

    /* Stack columns vertically on mobile */
    .trade-columns {
        flex-direction: column;
        gap: 8px;
    }

    .trade-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }

    .trade-col-header {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .trade-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 3px;
    }

    .trade-slot {
        aspect-ratio: 1;
    }

    .trade-orbryn-entry {
        flex-wrap: wrap;
    }

    .trade-orbryn-input {
        flex-basis: 100%;
        min-height: 44px;
    }

    .trade-orbryn-small-btn,
    .trade-orbryn-info {
        min-height: 44px;
    }

    .trade-orbryn-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-inv-section {
        margin-bottom: 8px;
    }

    .trade-inv-grid {
        grid-template-columns: repeat(6, 1fr);
        max-height: 160px;
        gap: 3px;
    }

    .trade-buttons {
        position: sticky;
        bottom: 0;
        background: rgba(10, 12, 20, 0.98);
        padding: 8px 0 4px;
        z-index: 1;
    }

    .trade-btn {
        padding: 14px 20px;
        font-size: 14px;
        min-height: 44px; /* Touch-friendly tap target */
    }

    .trade-orbs-row {
        padding: 2px 0;
    }

    .trade-status {
        height: 14px;
        font-size: 10px;
    }
}

/* ===================================================================
   Ring Debug Overlay
   =================================================================== */

.debug-overlay {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(5, 8, 18, 0.85);
    border: 1px solid rgba(60, 180, 255, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(180, 210, 240, 0.9);
    pointer-events: none;
    z-index: 200;
    min-width: 180px;
}

.debug-overlay-title {
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(100, 200, 255, 0.7);
    margin-bottom: 6px;
    font-weight: bold;
    border-bottom: 1px solid rgba(60, 180, 255, 0.2);
    padding-bottom: 4px;
}

.debug-overlay-body .debug-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    gap: 8px;
}

.debug-overlay-body .debug-label {
    color: rgba(140, 170, 210, 0.7);
}

.debug-overlay-body .debug-dome {
    color: rgba(80, 220, 255, 0.9);
}

.debug-overlay-body .debug-ring-0 {
    color: rgba(80, 220, 120, 0.9);
}

.debug-overlay-body .debug-ring-1 {
    color: rgba(220, 80, 100, 0.9);
}

/* ═══════════════════════════════════════════════
   Extermination System Styles
   ═══════════════════════════════════════════════ */

/* ── Contract HUD Widget ── */
#ext-contract-hud {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 34, 68, 0.4);
    border-radius: 4px;
    width: 200px;
    transition: border-color 0.3s ease;
}

#ext-contract-hud.ext-complete {
    border-color: rgba(68, 255, 68, 0.6);
}

#ext-contract-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--minimap-mob-normal, #ff4444);
    margin-bottom: 4px;
}

#ext-contract-hud.ext-complete #ext-contract-label {
    color: #44ff44;
}

#ext-contract-target {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ext-contract-progress-container {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

#ext-contract-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #aa1122, #ff2244);
    transition: width 0.3s ease;
}

#ext-contract-hud.ext-complete #ext-contract-progress-bar {
    background: linear-gradient(90deg, #22aa44, #44ff44);
}

#ext-contract-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

@keyframes ext-kill-flash {
    0% { border-color: rgba(255, 255, 255, 0.8); }
    100% { border-color: rgba(255, 34, 68, 0.4); }
}

#ext-contract-hud.ext-flash {
    animation: ext-kill-flash 0.4s ease-out;
}

/* ── Terminal Prompt ── */
.ext-terminal-prompt {
    position: fixed;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 34, 68, 0.5);
    border-radius: 4px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-family: monospace;
    font-size: 12px;
    text-align: center;
    z-index: 400;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Terminal Overlay (Modal) ── */
.ext-terminal-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 4, 16, 0.95);
    border: 2px solid rgba(255, 34, 68, 0.6);
    border-radius: 8px;
    padding: 20px;
    min-width: 380px;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 600;
    box-shadow: 0 0 30px rgba(255, 34, 68, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.4);
    animation: ext-overlay-appear 0.25s ease-out;
}

@keyframes ext-overlay-appear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ext-terminal-header {
    font-size: 14px;
    font-family: monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff2244;
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(255, 34, 68, 0.5);
}

.ext-terminal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    background: none;
    border: none;
    font-family: monospace;
}

.ext-terminal-close:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Contract Cards ── */
.ext-contract-card {
    background: rgba(20, 10, 30, 0.8);
    border: 1px solid rgba(255, 34, 68, 0.25);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ext-contract-card:hover {
    border-color: rgba(255, 34, 68, 0.7);
    background: rgba(30, 15, 40, 0.9);
}

.ext-contract-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ext-contract-type {
    font-size: 12px;
    font-family: monospace;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
}

.ext-tier-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 2px;
    font-family: monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ext-tier-1 { background: rgba(100, 100, 100, 0.5); color: #aaaaaa; border: 1px solid rgba(100, 100, 100, 0.4); }
.ext-tier-2 { background: rgba(68, 170, 68, 0.2); color: #44aa44; border: 1px solid rgba(68, 170, 68, 0.3); }
.ext-tier-3 { background: rgba(68, 136, 204, 0.2); color: #4488cc; border: 1px solid rgba(68, 136, 204, 0.3); }
.ext-tier-4 { background: rgba(170, 68, 204, 0.2); color: #aa44cc; border: 1px solid rgba(170, 68, 204, 0.3); }
.ext-tier-5 { background: rgba(255, 34, 68, 0.2); color: #ff2244; border: 1px solid rgba(255, 34, 68, 0.4); }

.ext-contract-targets {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.ext-contract-zone {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.ext-contract-modifiers {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ext-modifier-tag {
    font-size: 8px;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(255, 170, 0, 0.15);
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ext-contract-rewards {
    font-size: 10px;
    color: rgba(255, 200, 68, 0.8);
}

/* ── Completion & Active Views ── */
.ext-completion-view,
.ext-active-view {
    text-align: center;
}

.ext-completion-title {
    font-size: 14px;
    color: #44ff44;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.ext-reward-summary {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
    line-height: 1.6;
}

.ext-reward-summary span {
    color: #ffcc44;
}

.ext-btn {
    display: inline-block;
    padding: 8px 20px;
    font-family: monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.2s ease;
    margin: 4px;
}

.ext-btn-finalize {
    background: rgba(68, 255, 68, 0.15);
    color: #44ff44;
    border-color: rgba(68, 255, 68, 0.4);
}

.ext-btn-finalize:hover {
    background: rgba(68, 255, 68, 0.3);
}

.ext-btn-abandon {
    background: rgba(255, 68, 68, 0.1);
    color: #ff6666;
    border-color: rgba(255, 68, 68, 0.3);
}

.ext-btn-abandon:hover {
    background: rgba(255, 68, 68, 0.25);
}

.ext-cooldown-text {
    font-size: 11px;
    color: rgba(255, 100, 100, 0.7);
    text-align: center;
    padding: 20px;
}

/* ── EXT Side Panel Tab ── */
.ext-tab-section {
    margin-bottom: 12px;
}

.ext-tab-section-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ff2244;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 34, 68, 0.2);
}

.ext-tab-no-contract {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 8px 0;
}

.ext-tab-target {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.ext-tab-target-bar {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.ext-tab-target-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #aa1122, #ff2244);
    transition: width 0.3s ease;
}

.ext-tab-stat {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 3px;
}

.ext-tab-stat-value {
    color: rgba(255, 255, 255, 0.9);
}

.ext-tab-history-entry {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ext-tab-history-entry:last-child {
    border-bottom: none;
}

/* ── Companion System (EXT tab + HUD) ── */

/* --- HUD overlay (screen-space HP bar above companion) --- */
#companion-hp-container {
    position: fixed;
    transform: translate(-50%, -100%);
    z-index: 120;
    pointer-events: none;
    text-align: center;
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace);
}
#companion-name-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
#companion-hp-bg {
    width: 50px;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}
#companion-hp-bar {
    height: 100%;
    width: 100%;
    background: var(--companion-hp-good, #44dd88);
    transition: width 0.2s ease, background-color 0.3s ease;
}
#companion-ammo-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* --- EXT tab companion section --- */
.comp-active-status {
    background: rgba(68, 221, 136, 0.08);
    border: 1px solid rgba(68, 221, 136, 0.2);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 10px;
}
.comp-active-name {
    font-size: 11px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}
.comp-active-stat {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}
.comp-tier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comp-tier-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px;
    transition: border-color 0.2s ease;
}
.comp-tier-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.comp-active-card {
    border-color: rgba(68, 221, 136, 0.35);
    background: rgba(68, 221, 136, 0.05);
}
.comp-locked {
    opacity: 0.4;
}
.comp-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.comp-tier-name {
    font-size: 11px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
}
.comp-tier-badge {
    font-size: 9px;
    background: rgba(255, 34, 68, 0.2);
    color: rgba(255, 34, 68, 0.8);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.comp-tier-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
    font-style: italic;
}
.comp-tier-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 3px;
}
.comp-locked-label {
    font-size: 9px;
    color: rgba(255, 68, 68, 0.7);
    margin-top: 4px;
    font-style: italic;
}
.comp-owned-label {
    font-size: 9px;
    color: rgba(68, 221, 136, 0.7);
    margin-top: 4px;
}
.comp-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.comp-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}
.comp-btn-recruit {
    border-color: rgba(68, 221, 136, 0.3);
    color: rgba(68, 221, 136, 0.9);
}
.comp-btn-recruit:hover {
    background: rgba(68, 221, 136, 0.1);
}
.comp-btn-deploy {
    border-color: rgba(68, 136, 221, 0.3);
    color: rgba(68, 136, 221, 0.9);
}
.comp-btn-deploy:hover {
    background: rgba(68, 136, 221, 0.1);
}
.comp-btn-dismiss {
    border-color: rgba(255, 68, 68, 0.3);
    color: rgba(255, 68, 68, 0.9);
}
.comp-btn-dismiss:hover {
    background: rgba(255, 68, 68, 0.1);
}
.comp-btn-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* --- Companion Storage Modal --- */
#companion-storage-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}
#companion-storage-inner {
    background: rgba(8, 4, 16, 0.97);
    border: 2px solid rgba(68, 221, 136, 0.4);
    border-radius: 8px;
    padding: 16px;
    min-width: 300px;
    max-width: 420px;
    max-height: 70vh;
    overflow-y: auto;
}
.comp-storage-title {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(68, 221, 136, 0.2);
    padding-bottom: 6px;
}
.comp-storage-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}
.comp-storage-slot {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.15s ease;
    min-height: 36px;
}
.comp-storage-slot:hover {
    border-color: rgba(255, 255, 255, 0.2);
}
.comp-storage-slot-filled {
    border-color: rgba(68, 221, 136, 0.2);
}
.comp-storage-slot-count {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.4);
}
.comp-storage-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Skill grid — now using sectioned layout (combat 3-col, trade 4-col) ── */

/* ════════════════════════════════════════════════════════════
   Extermination System — overlay layout & new component classes
   (Supplements the existing ext-* rules above)
   ════════════════════════════════════════════════════════════ */

/* The overlay uses display:flex so the inner box is centred. */
.ext-terminal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner scrollable box */
.ext-terminal-inner {
    background: rgba(8, 4, 16, 0.97);
    border: 2px solid rgba(255, 34, 68, 0.6);
    border-radius: 8px;
    padding: 20px;
    min-width: 380px;
    max-width: 500px;
    max-height: 78vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 34, 68, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.4);
    animation: ext-overlay-appear 0.25s ease-out;
}

.ext-terminal-title {
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ext-crimson, #ff2244);
    text-shadow: 0 0 10px rgba(255, 34, 68, 0.5);
}

/* Close button used in the new overlay HTML */
.ext-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Courier New', monospace;
    line-height: 1;
    padding: 4px 6px;
    transition: color 0.15s ease;
}
.ext-close-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Scrollable body inside the inner box */
.ext-terminal-body {
    margin-top: 4px;
}

/* ── Contract card inner sections (new element names) ── */
.ext-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ext-card-targets {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.ext-card-zone {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ext-card-mods {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    min-height: 14px;
}

.ext-card-rewards {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: rgba(255, 200, 68, 0.85);
    flex-wrap: wrap;
}

.ext-reward-xp    { color: #aaeeaa; }
.ext-reward-orbs  { color: #ffcc44; }
.ext-reward-tokens { color: #88aaff; }

.ext-no-mod {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

/* ── Completion view ── */
.ext-completion-header {
    font-size: 15px;
    color: #44ff44;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(68, 255, 68, 0.4);
}

.ext-completion-type {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.ext-completion-targets {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    margin-bottom: 12px;
}

.ext-completion-rewards {
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.8;
}

.ext-reward-line {
    display: block;
    font-size: 12px;
}

.ext-chain-bonus {
    font-size: 10px;
    color: #ffaa44;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.ext-finalize-btn {
    display: block;
    margin: 0 auto;
    padding: 9px 24px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 3px;
    cursor: pointer;
    background: rgba(68, 255, 68, 0.12);
    color: #44ff44;
    border: 1px solid rgba(68, 255, 68, 0.4);
    transition: background 0.2s ease;
}
.ext-finalize-btn:hover {
    background: rgba(68, 255, 68, 0.28);
}

/* ── Active contract view ── */
.ext-active-header {
    font-size: 12px;
    color: rgba(255, 34, 68, 0.9);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 12px;
}

.ext-active-targets {
    margin-bottom: 12px;
}

.ext-active-target {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}

.ext-target-label {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ext-target-bar-container {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ext-target-bar {
    height: 100%;
    background: linear-gradient(90deg, #cc2244, #ff4466);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ext-target-count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    white-space: nowrap;
}

.ext-target-zone {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    white-space: nowrap;
}

.ext-active-mods {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
    min-height: 14px;
}

.ext-abandon-warning {
    font-size: 9px;
    color: rgba(255, 100, 80, 0.65);
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}

.ext-abandon-btn {
    display: block;
    margin: 0 auto;
    padding: 7px 20px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    cursor: pointer;
    background: rgba(255, 68, 68, 0.08);
    color: #ff6666;
    border: 1px solid rgba(255, 68, 68, 0.3);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ext-abandon-btn:hover {
    background: rgba(255, 68, 68, 0.2);
}
.ext-abandon-btn.ext-abandon-confirm {
    background: rgba(255, 68, 68, 0.25);
    border-color: rgba(255, 68, 68, 0.7);
    color: #ff4444;
}

/* ── Cooldown view ── */
.ext-cooldown-view {
    text-align: center;
    padding: 20px 0;
}

.ext-cooldown-msg {
    font-size: 12px;
    color: rgba(255, 100, 80, 0.75);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ext-cooldown-timer {
    font-size: 22px;
    color: rgba(255, 68, 68, 0.9);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* CSS custom property hooks for theming overrides */
:root {
    --ext-crimson: #ff2244;
    --ext-crimson-dim: rgba(255, 34, 68, 0.4);
    --ext-complete-green: #44ff44;
    --ext-token-blue: #88aaff;
    --ext-orb-gold: #ffcc44;
    --ext-xp-green: #aaeeaa;
}

/* ================================================================
   Marketplace / Auction House Panel
   ================================================================ */

.market-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    max-height: 88vh;
    padding: 20px;
    background: rgba(6, 14, 30, 0.96);
    border: 1px solid rgba(100, 180, 255, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    z-index: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(100, 180, 255, 0.08);
    overflow-y: auto;
}

.market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.market-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #64b4ff;
    flex: 1;
    text-shadow: 0 0 12px rgba(100, 180, 255, 0.4);
}

.market-subtitle {
    margin: -2px 0 10px;
    text-align: center;
    font-size: 11px;
    color: #8798b6;
    letter-spacing: 1px;
}

.market-close-x {
    width: 28px;
    height: 28px;
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 6px;
    color: #ff6666;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.market-close-x:hover {
    background: rgba(255, 80, 80, 0.3);
    color: #ff8888;
}

.market-balance {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    text-align: center;
    font-size: 13px;
    color: #88a;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(80, 120, 200, 0.1);
}

.market-balance-line {
    white-space: nowrap;
}

.market-balance-line-orbryn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
}

.market-orb-count {
    font-size: 20px;
    font-weight: bold;
    color: #60a0ff;
}

.market-orbryn-count {
    font-size: 20px;
    font-weight: bold;
    color: #8ff0ff;
    overflow-wrap: anywhere;
}

.market-balance-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border: 1px solid rgba(120, 210, 255, 0.38);
    border-radius: 4px;
    background: rgba(30, 90, 140, 0.22);
    color: #b8f6ff;
    font-family: var(--orb-ui-mono, 'Courier New', monospace);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.market-balance-refresh:hover,
.market-balance-refresh:focus-visible {
    background: rgba(80, 170, 230, 0.26);
    border-color: rgba(160, 230, 255, 0.7);
    color: #ffffff;
    outline: none;
}

.market-balance-refresh:disabled {
    cursor: wait;
    opacity: 0.65;
}

.market-rail-strip {
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(100, 180, 255, 0.1);
    border-radius: 8px;
}

.market-rail-title {
    margin-bottom: 8px;
    font-size: 10px;
    color: #71819c;
    letter-spacing: 2px;
    font-weight: bold;
}

.market-rail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.market-rail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(100, 180, 255, 0.16);
    background: rgba(12, 24, 42, 0.9);
    color: #9fb2ce;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.market-rail-chip.is-live {
    border-color: rgba(100, 255, 170, 0.32);
    background: rgba(30, 70, 56, 0.55);
    color: #9dffd0;
}

.market-rail-chip.is-disabled {
    opacity: 0.65;
}

.market-rail-name {
    color: inherit;
}

.market-rail-status {
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    color: #d2dbec;
    font-size: 9px;
    letter-spacing: 0;
}

/* --- Marketplace Tabs --- */
.market-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(100, 180, 255, 0.15);
    padding-bottom: 8px;
}

.market-tab {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #556;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.market-tab:hover {
    color: #aac;
    background: rgba(20, 40, 70, 0.6);
}

.market-tab.active {
    color: #64b4ff;
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.35);
    text-shadow: 0 0 8px rgba(100, 180, 255, 0.3);
}

.market-tab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff4444;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

/* --- Marketplace Body --- */
.market-body {
    min-height: 280px;
    margin-bottom: 14px;
}

.market-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.market-stat-card {
    min-height: 58px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(100, 180, 255, 0.1);
    border-radius: 8px;
}

.market-stat-label {
    margin-bottom: 6px;
    font-size: 9px;
    color: #71819c;
    letter-spacing: 1px;
    font-weight: bold;
}

.market-stat-value {
    font-size: 14px;
    color: #d7e8ff;
    font-weight: bold;
}

.market-note {
    margin-bottom: 10px;
    padding: 9px 10px;
    color: #b8c4d8;
    background: rgba(80, 120, 200, 0.08);
    border: 1px solid rgba(100, 180, 255, 0.12);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.market-note-strong {
    border-color: rgba(255, 190, 90, 0.25);
    background: rgba(120, 82, 24, 0.24);
    color: #f2d6a0;
}

/* --- Browse Tab Controls --- */
.market-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.market-cat-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.market-cat-btn {
    padding: 5px 10px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #667;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.market-cat-btn:hover {
    color: #aac;
    background: rgba(100, 180, 255, 0.06);
}

.market-cat-btn.active {
    color: #64b4ff;
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.3);
}

.market-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-sort-label {
    font-size: 11px;
    color: #667;
    letter-spacing: 1px;
}

.market-sort-select {
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #cdf;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(100, 180, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
}

.market-sort-select option {
    background: #0a1428;
    color: #cdf;
}

/* --- Listing Grid --- */
.market-listing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.2) transparent;
}

.market-listing-grid::-webkit-scrollbar {
    width: 4px;
}
.market-listing-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 180, 255, 0.25);
    border-radius: 2px;
}

.market-listing-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 8px;
    transition: all 0.15s;
}

.market-listing-card:hover {
    background: rgba(100, 180, 255, 0.05);
    border-color: rgba(100, 180, 255, 0.2);
}

.market-listing-card.is-nft-manifestation,
.market-my-row.is-nft-manifestation {
    border-color: rgba(255, 212, 116, 0.26);
    background:
        linear-gradient(135deg, rgba(76, 54, 12, 0.32), rgba(0, 0, 0, 0.28)),
        rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.08);
}

.market-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.market-item-icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

.market-item-icon-text {
    font-size: 11px;
    font-weight: bold;
}

.market-card-info {
    flex: 1;
    min-width: 0;
}

.market-card-name {
    font-size: 12px;
    color: #cdf;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-card-qty {
    font-size: 10px;
    color: #889;
}

.market-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.market-card-tags span {
    padding: 3px 5px;
    border: 1px solid rgba(255, 212, 116, 0.22);
    border-radius: 4px;
    background: rgba(255, 212, 116, 0.08);
    color: #f5d889;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.market-card-note {
    margin-top: 5px;
    color: rgba(205, 231, 236, 0.72);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.market-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.market-card-price {
    font-size: 13px;
    font-weight: bold;
    color: #60a0ff;
}

.market-card-seller {
    font-size: 10px;
    color: #556;
}

.market-buy-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #64ffaa;
    background: rgba(100, 255, 170, 0.1);
    border: 1px solid rgba(100, 255, 170, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.market-buy-btn:hover {
    background: rgba(100, 255, 170, 0.2);
    color: #88ffc0;
}

.market-self-badge {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 9px;
    color: #667;
    letter-spacing: 1px;
    font-style: italic;
}

.market-empty {
    text-align: center;
    padding: 40px 20px;
    color: #445;
    font-size: 13px;
    letter-spacing: 2px;
    grid-column: 1 / -1;
}

/* --- Sell Tab --- */
.market-sell-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.market-form-label {
    font-size: 11px;
    font-weight: bold;
    color: #64b4ff;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.market-sell-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 4px;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.2) transparent;
}

.market-sell-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.market-sell-slot:hover {
    background: rgba(100, 180, 255, 0.06);
    border-color: rgba(100, 180, 255, 0.2);
}

.market-sell-slot.selected {
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.4);
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.15);
}

.market-sell-slot.is-nft-manifestation {
    border-color: rgba(255, 212, 116, 0.28);
    background: rgba(72, 50, 12, 0.28);
}

.market-sell-slot.is-nft-manifestation.selected {
    border-color: rgba(255, 212, 116, 0.6);
    box-shadow: 0 0 12px rgba(255, 212, 116, 0.16);
}

.market-sell-locked-empty {
    border: 1px solid rgba(255, 212, 116, 0.18);
    border-radius: 6px;
    background: rgba(72, 50, 12, 0.16);
    color: #f2d6a0;
    line-height: 1.35;
}

.market-sell-icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

.market-sell-icon-text {
    font-size: 11px;
    font-weight: bold;
}

.market-sell-slot-qty {
    font-size: 9px;
    color: #889;
}

.market-sell-slot-nft {
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 212, 116, 0.16);
    color: #f5d889;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}

.market-sell-selected {
    font-size: 12px;
    color: #aac;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.market-sell-selected.is-nft-manifestation,
.market-nft-sale-note {
    border: 1px solid rgba(255, 212, 116, 0.18);
    background: rgba(72, 50, 12, 0.22);
    color: #f2d6a0;
}

.market-nft-sale-note {
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.35;
}

.market-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.market-input {
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #cdf;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(100, 180, 255, 0.15);
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.market-input:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.4);
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.1);
}

.market-fee-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: #889;
}

.market-fee-preview strong {
    color: #60a0ff;
}

.market-list-btn {
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #64ffaa;
    background: rgba(100, 255, 170, 0.08);
    border: 1px solid rgba(100, 255, 170, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.market-list-btn:hover {
    background: rgba(100, 255, 170, 0.15);
    color: #88ffc0;
}

/* --- My Listings Tab --- */
.market-my-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.2) transparent;
}

.market-my-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 6px;
}

.market-my-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.market-my-info {
    flex: 1;
    min-width: 0;
}

.market-my-name {
    font-size: 12px;
    color: #cdf;
    font-weight: bold;
}

.market-my-price {
    font-size: 11px;
    color: #60a0ff;
}

.market-my-time {
    font-size: 10px;
    color: #667;
}

.market-cancel-btn {
    padding: 6px 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ff6666;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.market-cancel-btn:hover {
    background: rgba(255, 80, 80, 0.18);
    color: #ff8888;
}

.market-self-cancel {
    margin-left: auto;
    padding: 4px 12px;
}

/* --- Collection Tab --- */
.market-collection-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.2) transparent;
}

.market-collection-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(100, 180, 255, 0.08);
    border-radius: 6px;
}

.market-collection-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #60a0ff;
}

.market-collection-info {
    flex: 1;
}

.market-collection-name {
    font-size: 12px;
    color: #cdf;
    font-weight: bold;
}

.market-collection-reason {
    font-size: 10px;
    color: #667;
}

.market-collect-btn {
    width: 100%;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #64ffaa;
    background: rgba(100, 255, 170, 0.08);
    border: 1px solid rgba(100, 255, 170, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.market-collect-btn:hover {
    background: rgba(100, 255, 170, 0.15);
    color: #88ffc0;
}

/* --- NFT Desk --- */
.market-nft-desk {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.market-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #64b4ff;
    letter-spacing: 3px;
}

.market-nft-card,
.market-nft-vault-card {
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 180, 255, 0.12);
    border-radius: 8px;
}

.market-nft-vault-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.market-nft-vault-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.market-nft-vault-card.is-active {
    border-color: rgba(255, 212, 116, 0.24);
    background:
        linear-gradient(135deg, rgba(73, 51, 12, 0.28), rgba(0, 0, 0, 0.3)),
        rgba(0, 0, 0, 0.3);
}

.market-nft-clone-detail {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 212, 116, 0.18);
}

.market-nft-toolbar,
.market-nft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.market-nft-section-label {
    color: #8fa7c7;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.market-nft-name {
    margin-bottom: 4px;
    color: #f2f7ff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

.market-nft-meta {
    overflow: hidden;
    color: #8798b6;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.market-nft-clock {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 212, 116, 0.16);
    border-radius: 6px;
    background: rgba(65, 45, 12, 0.22);
}

.market-nft-clock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #c5d2e6;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.market-nft-clock-top strong {
    color: #f5d889;
    font-size: 12px;
}

.market-nft-clock-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.market-nft-clock-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5d889, #64b4ff);
    box-shadow: 0 0 12px rgba(100, 180, 255, 0.18);
}

/* --- Marketplace Responsive (Mobile) --- */
@media (max-width: 700px) {
    .market-panel {
        width: 100vw;
        max-height: 100vh;
        padding: 10px 8px;
        border-radius: 0;
        border: none;
        top: 0;
        left: 0;
        transform: none;
    }

    .market-title {
        font-size: 14px;
        letter-spacing: 4px;
    }

    .market-subtitle {
        font-size: 10px;
        line-height: 1.35;
    }

    .market-balance {
        font-size: 12px;
        padding: 6px 8px;
        margin-bottom: 8px;
    }

    .market-orb-count {
        font-size: 16px;
    }

    .market-tabs {
        gap: 2px;
        margin-bottom: 8px;
        padding-bottom: 6px;
        flex-wrap: wrap;
    }

    .market-tab {
        flex-basis: calc(33.333% - 2px);
        font-size: 9px;
        padding: 6px 2px;
        letter-spacing: 1px;
    }

    .market-rail-chip {
        font-size: 9px;
        padding: 4px 6px;
    }

    .market-body {
        min-height: 200px;
        margin-bottom: 8px;
    }

    .market-listing-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .market-nft-vault-grid {
        grid-template-columns: 1fr;
    }

    .market-stat-strip {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .market-stat-card {
        min-height: 48px;
        padding: 8px 10px;
    }

    .market-listing-card {
        padding: 8px 10px;
    }

    .market-card-name {
        font-size: 11px;
    }

    .market-card-price {
        font-size: 12px;
    }

    .market-buy-btn {
        padding: 6px 14px;
        font-size: 11px;
    }

    .market-cat-row {
        flex-wrap: wrap;
        gap: 3px;
    }

    .market-cat-btn {
        font-size: 9px;
        padding: 4px 6px;
    }

    .market-sell-item-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    }

    .market-form-row {
        flex-direction: column;
        gap: 4px;
    }

    .market-input {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        padding: 8px;
    }

    .market-list-btn {
        width: 100%;
        padding: 10px;
        font-size: 12px;
    }

    .market-fee-preview {
        font-size: 10px;
    }

    .market-sort-wrap {
        flex-wrap: wrap;
    }

    .market-sort-select {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        padding: 6px 8px;
    }

    .market-close-x {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ── Teleporter Panel ── */
.teleporter-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    max-height: 400px;
    background: var(--panel-bg, rgba(0, 0, 0, 0.92));
    border: 1px solid var(--border-color, #555);
    border-radius: 6px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 1200;
    font-family: var(--font-mono, monospace);
    color: var(--text-color, #ddd);
}
.tp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 6px;
}
.tp-title { font-weight: bold; font-size: 14px; color: #a040ff; }
.tp-close { cursor: pointer; color: #888; font-size: 16px; }
.tp-close:hover { color: #fff; }
.tp-no-dest { font-size: 12px; color: #888; text-align: center; padding: 20px 0; }
.tp-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 280px; }
.tp-dest {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(40, 20, 60, 0.6);
    border: 1px solid #553388;
    border-radius: 4px;
}
.tp-dest-name { font-size: 12px; color: #cc88ff; }
.tp-btn {
    padding: 4px 10px;
    border: 1px solid #8844cc;
    border-radius: 4px;
    background: rgba(80, 30, 120, 0.6);
    color: #cc88ff;
    cursor: pointer;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
}
.tp-btn:hover { background: rgba(120, 50, 180, 0.8); border-color: #aa66ff; }

/* ── Beacon Escape Cycle ───────────────────────────────── */

/* Cycle timer pulse animation (critical urgency) */
@keyframes cycle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Beacon progress indicator */
#beacon-progress {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 11px;
    color: var(--color-text, #ccddcc);
    background: var(--color-panel-bg, rgba(0, 0, 0, 0.6));
    border: 1px solid rgba(60, 180, 220, 0.3);
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 50;
}

/* Extraction overlay */
.beacon-extraction-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.beacon-extraction-overlay .extraction-timer {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 28px;
    font-weight: bold;
    color: #66ddff;
    text-shadow: 0 0 20px rgba(100, 200, 255, 0.8), 0 0 40px rgba(100, 200, 255, 0.4);
    letter-spacing: 3px;
    animation: extraction-pulse 2s infinite;
}
.beacon-extraction-overlay .extraction-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    box-shadow: inset 0 0 80px rgba(100, 200, 255, 0.15), inset 0 0 160px rgba(100, 200, 255, 0.08);
    pointer-events: none;
}
@keyframes extraction-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}
/* ═══════════════════════════════════════════════════════════════════════
   GROUP / PARTY SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */

/* Group invite notification (similar to trade notification) */
.group-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 12, 20, 0.95);
    border: 2px solid rgba(187, 102, 255, 0.5);
    border-radius: 8px;
    padding: 12px 20px;
    z-index: 910;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    animation: group-notif-in 0.3s ease-out;
}

@keyframes group-notif-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.group-notif-text {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: #dde;
    text-align: center;
    margin-bottom: 10px;
}

.group-notif-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.group-notif-btn {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: bold;
    padding: 6px 16px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s;
    background: transparent;
}

.group-notif-accept {
    color: #50e080;
    border-color: rgba(80, 224, 128, 0.4);
    background: rgba(80, 224, 128, 0.1);
}
.group-notif-accept:hover {
    background: rgba(80, 224, 128, 0.2);
}

.group-notif-decline {
    color: #ff6666;
    border-color: rgba(255, 102, 102, 0.4);
    background: rgba(255, 102, 102, 0.1);
}
.group-notif-decline:hover {
    background: rgba(255, 102, 102, 0.2);
}

/* Group HUD — party frames docked below the vitals column (left side).
   Keys off --orbryn-hud-top-offset so it tracks safe-area / shell offsets
   and never covers the zone label, player count, clock or buff pills.
   z 26 sits just above chat (25) so the Leave button stays clickable when a
   tall chat log meets the panel on short windows; max-height keeps the panel
   off the chat input entirely. */
.group-hud {
    position: fixed;
    top: calc(var(--orbryn-hud-top-offset, 16px) + 272px);
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 26;
    pointer-events: none;
    min-width: 176px;
    max-width: 210px;
    max-height: calc(100vh - var(--orbryn-hud-top-offset, 16px) - 402px);
    overflow-y: auto;
}

/* #hud > * re-enables pointer events on direct HUD children with id
   specificity — restate the click-through at higher specificity so the panel
   body never blocks clicks into the game world. Interactive children
   (leave button, perks tooltip) re-enable their own pointer events. */
#hud > .group-hud {
    pointer-events: none;
}

.group-hud-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: bold;
    color: #bb66ff;
    letter-spacing: 2px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(187, 102, 255, 0.3);
    margin-bottom: 2px;
}

.group-hud-count {
    color: #8899aa;
    letter-spacing: 1px;
}

.group-member-row {
    background: rgba(10, 12, 20, 0.8);
    border: 1px solid rgba(187, 102, 255, 0.25);
    border-radius: 4px;
    padding: 6px 8px;
}

.group-member-leader {
    border-color: rgba(187, 102, 255, 0.5);
}

.group-member-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.group-leader-icon {
    color: #ffd700;
    font-size: 10px;
}

.group-member-name {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: #dde;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-member-level {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: #8899aa;
}

.group-member-hp-container {
    position: relative;
    height: 8px;
    background: rgba(40, 20, 20, 0.8);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}

.group-member-hp-bar {
    height: 100%;
    background-color: var(--group-hp-high, #44cc44);
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.group-member-hp-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    font-family: var(--font-mono, monospace);
    font-size: 7px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 2px #000;
}

/* Thin energy bar under the HP bar */
.group-member-energy-container {
    height: 4px;
    background: rgba(15, 25, 45, 0.85);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

.group-member-energy-bar {
    height: 100%;
    background: #37b6ff;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Meta row: direction chevron · distance · status · XP-share link */
.group-member-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: #8899aa;
    min-height: 12px;
}

.group-member-dir {
    display: inline-block;
    font-size: 8px;
    color: #bb66ff;
    line-height: 1;
    transition: transform 0.15s linear;
}

.group-member-distance {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: #8899aa;
    min-width: 28px;
}

.group-member-state {
    flex: 1;
    text-align: right;
    letter-spacing: 0.5px;
}

.group-member-state.state-combat { color: #ff9944; }
.group-member-state.state-dead { color: #ff5555; font-weight: bold; }
.group-member-state.state-stale { color: #667788; }
.group-member-state.state-sleep { color: #7fa0d0; }

.group-member-sharelink {
    font-size: 9px;
    opacity: 0.3;
    filter: grayscale(1);
}

.group-member-sharelink.linked {
    opacity: 1;
    filter: none;
    text-shadow: 0 0 5px rgba(80, 224, 128, 0.7);
}

/* Downed / signal-lost member rows */
.group-member-dead {
    border-color: rgba(255, 85, 85, 0.5);
}

.group-member-dead .group-member-hp-bar {
    background-color: #552222 !important;
}

.group-member-stale {
    opacity: 0.75;
}

/* Online/Offline status indicator */
.group-member-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 4px;
    flex-shrink: 0;
}

.group-member-status.online {
    background-color: #44cc44;
    box-shadow: 0 0 4px rgba(68, 204, 68, 0.6);
}

.group-member-status.offline {
    background-color: #666;
}

/* Offline member styling */
.group-member-offline {
    opacity: 0.5;
}

.group-member-offline .group-member-name {
    color: #889;
}

/* Leader hint shown while the group has room */
.group-hud-invite-hint {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    color: #8899aa;
    letter-spacing: 0.4px;
    padding: 1px 0;
}

/* Compact perks reminder — hover for the full list */
.group-hud-perks {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    color: #667a90;
    letter-spacing: 0.3px;
    line-height: 1.5;
    cursor: help;
    pointer-events: auto;
}

.group-hud-leave-btn {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #cc4444;
    background: rgba(204, 68, 68, 0.1);
    border: 1px solid rgba(204, 68, 68, 0.4);
    border-radius: 3px;
    padding: 4px 8px;
    margin-top: 4px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s, border-color 0.15s;
}

.group-hud-leave-btn:hover {
    background: rgba(204, 68, 68, 0.25);
    border-color: rgba(204, 68, 68, 0.7);
}

.group-prompt {
    color: #bb66ff;
    text-shadow: 0 0 6px rgba(187, 102, 255, 0.5);
}

/* Purple nametag tint for group members (matches the minimap dot color) */
.remote-player-nametag.nametag-group .nametag-name {
    color: #cc88ff;
    text-shadow: 0 0 6px rgba(187, 102, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Mobile group pill — hidden on desktop */
.mobile-group-toggle {
    display: none; /* shown only on mobile via media query */
}

/* Mobile adjustments — matches the JS mobile check (touch OR narrow viewport).
   The old max-width:768px-only block never applied on modern landscape phones
   (780-932 CSS px), which left the panel at its desktop position on top of
   the joystick. */
@media (pointer: coarse), (max-width: 768px) {
    /* Compact dropdown docked under the toggle row, right of the chat toggle.
       Clear of the joystick (bottom-left), vitals (top-left) and loot toasts;
       z-index above the XP orbs (25) so drops never obscure it. */
    .group-hud {
        top: calc(54px + env(safe-area-inset-top, 0px));
        left: calc(212px + env(safe-area-inset-left, 0px));
        min-width: 168px;
        max-width: 178px;
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        z-index: 30;
    }

    /* The mobile dropdown is opened deliberately — keep it interactive so
       overflow scrolling and the leave button work under the finger. */
    #hud > .group-hud {
        pointer-events: auto;
    }

    .group-member-name {
        font-size: 10px;
    }

    .group-notification {
        top: 60px;
        padding: 8px 14px;
    }

    /* Group pill — sits right after the chat toggle (chat: 170px + 40px wide) */
    .mobile-group-toggle {
        display: flex;
        position: absolute;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: calc(212px + env(safe-area-inset-left, 0px));
        min-width: 36px;
        height: 36px;
        padding: 0 6px;
        border-radius: 18px;
        border: 1px solid rgba(187, 102, 255, 0.3);
        background: rgba(10, 15, 30, 0.85);
        color: #bb66ff;
        font-size: 14px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        touch-action: manipulation;
        z-index: 30;
        pointer-events: auto;
        transition: background 0.15s, border-color 0.15s;
    }
    .mobile-group-toggle.has-group {
        border-color: rgba(187, 102, 255, 0.7);
        box-shadow: 0 0 10px rgba(187, 102, 255, 0.28);
    }
    .mobile-group-toggle.just-formed {
        animation: mobile-group-toggle-pulse 0.9s ease-in-out 0s 2;
    }
    .mobile-group-toggle-icon {
        line-height: 1;
    }
    /* Mini HP slivers inside the pill — teammate health at a glance while
       the panel is collapsed */
    .mobile-group-toggle-bars {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .mobile-group-toggle-bars:empty {
        display: none;
    }
    .mgt-bar {
        display: block;
        width: 16px;
        height: 4px;
        border-radius: 2px;
        background: rgba(40, 20, 20, 0.9);
        overflow: hidden;
    }
    .mgt-bar-fill {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: #44cc44;
        transition: width 0.3s ease;
    }
    .mgt-bar-fill.mgt-low {
        background: #cc4444;
    }
    .mgt-bar-fill.mgt-dead {
        background: #552222;
    }
    .mgt-bar-fill.mgt-nodata {
        background: #55606e;
    }
    .mobile-group-toggle-count {
        position: absolute;
        top: -4px;
        right: -5px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #50e080;
        color: #04110a;
        border: 1px solid rgba(5, 20, 10, 0.65);
        font-family: var(--font-mono, monospace);
        font-size: 10px;
        font-weight: 800;
        line-height: 14px;
        text-align: center;
    }
    .mobile-group-toggle:active {
        background: rgba(100, 60, 180, 0.4);
        border-color: rgba(187, 102, 255, 0.6);
    }
    .mobile-group-toggle.active {
        background: rgba(100, 60, 180, 0.3);
        border-color: rgba(187, 102, 255, 0.6);
        box-shadow: 0 0 8px rgba(187, 102, 255, 0.3);
    }
    @keyframes mobile-group-toggle-pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 10px rgba(187, 102, 255, 0.28);
        }
        50% {
            transform: scale(1.12);
            box-shadow: 0 0 16px rgba(80, 224, 128, 0.5);
        }
    }
}

/* ====================================================================
   Season Pass — Side Panel Tab
   ==================================================================== */

.sp-season-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(64, 255, 128, 0.15);
    margin-bottom: 10px;
}

.sp-season-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--minimap-border-color, rgba(0, 217, 255, 0.9));
    letter-spacing: 2px;
}

.sp-season-timer {
    font-size: 11px;
    color: rgba(200, 200, 200, 0.7);
    margin-top: 4px;
}

.sp-season-currencies {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 10px;
}

.sp-season-currency {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-currency-label {
    font-size: 10px;
    color: rgba(180, 180, 180, 0.6);
    letter-spacing: 1px;
}

.sp-currency-value {
    font-size: 13px;
    font-weight: bold;
    color: rgba(255, 215, 64, 0.9);
}

.sp-season-progress-section {
    padding: 6px 0 10px;
}

.sp-season-tier-label {
    font-size: 12px;
    color: rgba(200, 200, 200, 0.8);
    margin-bottom: 4px;
}

.sp-season-progress-bar {
    position: relative;
    width: 100%;
    height: 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(100, 200, 100, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.sp-season-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(64, 208, 96, 0.8), rgba(96, 255, 128, 0.9));
    transition: width 0.4s ease;
    border-radius: 2px;
}

.sp-season-xp-label {
    font-size: 10px;
    color: rgba(160, 160, 160, 0.7);
    margin-top: 3px;
    text-align: right;
}

.sp-season-premium-section {
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
}

.sp-season-premium-btn {
    background: linear-gradient(135deg, rgba(255, 185, 15, 0.2), rgba(255, 215, 64, 0.15));
    border: 1px solid rgba(255, 215, 64, 0.4);
    color: rgba(255, 215, 64, 0.95);
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.sp-season-premium-btn:hover {
    background: linear-gradient(135deg, rgba(255, 185, 15, 0.35), rgba(255, 215, 64, 0.25));
    border-color: rgba(255, 215, 64, 0.7);
    box-shadow: 0 0 10px rgba(255, 215, 64, 0.15);
}

.sp-season-premium-cost {
    font-size: 10px;
    color: rgba(180, 180, 180, 0.5);
    margin-top: 4px;
}

.sp-season-premium-owned {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255, 215, 64, 0.9);
    letter-spacing: 1px;
    padding: 6px;
    border: 1px solid rgba(255, 215, 64, 0.3);
    border-radius: 4px;
    background: rgba(255, 215, 64, 0.06);
}

.sp-season-section-title {
    font-size: 10px;
    color: rgba(160, 160, 160, 0.6);
    letter-spacing: 2px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Challenges */
.sp-season-challenges {
    margin-bottom: 10px;
}

.sp-season-challenge-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 255, 128, 0.15) transparent;
}

.sp-challenge-group-label {
    font-size: 9px;
    color: rgba(140, 140, 140, 0.6);
    letter-spacing: 2px;
    margin: 4px 0 2px;
}

.sp-challenge-row {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(80, 120, 200, 0.08);
    border-radius: 4px;
    padding: 6px 8px;
}

.sp-challenge-row.sp-challenge-done {
    border-color: rgba(64, 255, 128, 0.2);
    opacity: 0.5;
}

.sp-challenge-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.sp-challenge-name {
    font-size: 11px;
    color: rgba(220, 220, 220, 0.85);
}

.sp-challenge-xp {
    font-size: 10px;
    color: rgba(96, 255, 128, 0.7);
}

.sp-challenge-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    overflow: hidden;
}

.sp-challenge-bar-fill {
    height: 100%;
    background: rgba(64, 208, 96, 0.7);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.sp-challenge-count {
    font-size: 9px;
    color: rgba(160, 160, 160, 0.6);
    text-align: right;
    margin-top: 2px;
}

.sp-no-challenges {
    font-size: 11px;
    color: rgba(140, 140, 140, 0.5);
    text-align: center;
    padding: 12px;
}

/* Reward Track */
.sp-season-rewards {
    margin-bottom: 8px;
}

.sp-season-reward-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 255, 128, 0.15) transparent;
}

.sp-tier-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(80, 120, 200, 0.06);
    border-radius: 4px;
    transition: all 0.15s;
}

.sp-tier-row.sp-tier-unlocked {
    border-color: rgba(64, 255, 128, 0.15);
    background: rgba(20, 40, 30, 0.3);
}

.sp-tier-row.sp-tier-next {
    border-color: rgba(0, 217, 255, 0.25);
    background: rgba(20, 30, 50, 0.3);
}

.sp-tier-row.sp-tier-locked {
    opacity: 0.55;
}

.sp-tier-num {
    font-size: 13px;
    font-weight: bold;
    color: rgba(100, 160, 255, 0.8);
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-tier-rewards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-tier-free,
.sp-tier-premium {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.sp-tier-free.claimed,
.sp-tier-premium.claimed {
    opacity: 0.5;
}

.sp-tier-premium.locked {
    opacity: 0.4;
}

.sp-tier-track-label {
    font-size: 8px;
    letter-spacing: 1px;
    color: rgba(160, 160, 160, 0.5);
    min-width: 44px;
}

.sp-tier-track-label.sp-premium-label {
    color: rgba(255, 215, 64, 0.6);
}

.sp-tier-reward-name {
    flex: 1;
    color: rgba(200, 200, 200, 0.8);
}

.sp-tier-claim-btn {
    background: rgba(64, 255, 128, 0.15);
    border: 1px solid rgba(64, 255, 128, 0.3);
    color: rgba(64, 255, 128, 0.9);
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    letter-spacing: 1px;
    transition: all 0.15s;
}

.sp-tier-claim-btn:hover {
    background: rgba(64, 255, 128, 0.25);
    border-color: rgba(64, 255, 128, 0.5);
}

.sp-tier-claim-btn.sp-premium-claim {
    background: rgba(255, 215, 64, 0.12);
    border-color: rgba(255, 215, 64, 0.3);
    color: rgba(255, 215, 64, 0.9);
}

.sp-tier-claim-btn.sp-premium-claim:hover {
    background: rgba(255, 215, 64, 0.22);
    border-color: rgba(255, 215, 64, 0.5);
}

.sp-tier-claimed-badge {
    font-size: 8px;
    color: rgba(100, 200, 100, 0.5);
    letter-spacing: 1px;
}

.sp-tier-requires-pass {
    font-size: 8px;
    color: rgba(255, 215, 64, 0.68);
    font-weight: bold;
    letter-spacing: 1px;
}

.sp-tier-lock-icon {
    font-size: 10px;
    opacity: 0.4;
}

.sp-season-claim-all-btn {
    width: 100%;
    margin-top: 8px;
    background: rgba(64, 255, 128, 0.12);
    border: 1px solid rgba(64, 255, 128, 0.3);
    color: rgba(64, 255, 128, 0.9);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1px;
    transition: all 0.15s;
}

.sp-season-claim-all-btn:hover {
    background: rgba(64, 255, 128, 0.22);
    border-color: rgba(64, 255, 128, 0.5);
    box-shadow: 0 0 8px rgba(64, 255, 128, 0.12);
}

/* ====================================================================
   Battle Pass — Full-Screen Paginated Overlay
   ==================================================================== */
.bp-overlay { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; pointer-events: auto; touch-action: none; overscroll-behavior: contain; }
.bp-overlay.bp-visible { display: flex; }
.bp-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: default; }

.bp-panel { position: relative; z-index: 1; width: 94vw; max-width: 900px; border-radius: 16px; background: rgba(8,6,20,0.97); border: 1px solid rgba(108,63,255,0.2); box-shadow: 0 8px 60px rgba(0,0,0,0.7), 0 0 80px rgba(108,63,255,0.06); display: flex; flex-direction: column; overflow: hidden; touch-action: auto; }

/* Header */
.bp-header { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(108,63,255,0.04); }
.bp-title { margin: 0; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 3px; white-space: nowrap; text-shadow: 0 0 12px rgba(108,63,255,0.3); }
.bp-progress { flex: 1; display: flex; align-items: center; gap: 10px; }
.bp-tier-label { font-size: 12px; font-weight: bold; color: rgba(167,139,250,0.9); letter-spacing: 1px; white-space: nowrap; }
.bp-progress-bar { flex: 1; height: 8px; background: rgba(108,63,255,0.08); border-radius: 4px; overflow: hidden; border: 1px solid rgba(108,63,255,0.12); }
.bp-progress-fill { height: 100%; background: linear-gradient(90deg, #6c3fff, #a78bfa); border-radius: 3px; transition: width 0.4s ease; box-shadow: 0 0 8px rgba(108,63,255,0.4); }
.bp-xp-label { font-size: 11px; color: rgba(200,195,220,0.6); white-space: nowrap; }
.bp-close-btn { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #aaa; border-radius: 6px; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.bp-close-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.bp-claim-all-btn { padding: 6px 14px; background: rgba(64,255,128,0.12); border: 1px solid rgba(64,255,128,0.3); color: rgba(64,255,128,0.9); border-radius: 6px; font-family: inherit; font-size: 10px; font-weight: bold; letter-spacing: 1px; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0; }
.bp-claim-all-btn:hover { background: rgba(64,255,128,0.22); border-color: rgba(64,255,128,0.5); }
.bp-claim-all-btn[hidden] { display: none; }

/* Body — nav arrows + cards */
.bp-body { display: flex; align-items: center; padding: 24px 12px; gap: 8px; min-height: 240px; }

/* Navigation arrows */
.bp-nav-btn { width: 40px; height: 80px; border: 1px solid rgba(108,63,255,0.2); background: rgba(108,63,255,0.06); color: rgba(167,139,250,0.8); border-radius: 8px; font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; user-select: none; }
.bp-nav-btn:hover:not(:disabled) { background: rgba(108,63,255,0.15); border-color: rgba(108,63,255,0.4); color: #fff; }
.bp-nav-btn:disabled { opacity: 0.2; cursor: default; }

/* Cards container */
.bp-cards-container { flex: 1; display: flex; justify-content: center; gap: 14px; }

/* Individual card */
.bp-card { width: 120px; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--rarity-glow, #555); background: var(--rarity-bg, #1a1a2e); border-radius: 12px; padding: 12px 8px; position: relative; cursor: default; transition: all 0.25s ease; }
.bp-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* Milestone cards — larger and more prominent */
.bp-card-milestone { width: 140px; padding: 16px 10px; border-width: 2px; box-shadow: 0 0 20px rgba(var(--rarity-glow), 0.2); }
.bp-card-milestone .bp-card-icon-wrap { width: 64px; height: 64px; }
.bp-card-milestone .bp-card-tier-badge { font-size: 14px; padding: 3px 14px; }

/* Tier badge */
.bp-card-tier-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: rgba(8,6,20,0.95); border: 1px solid var(--rarity-glow, #555); border-top: none; border-radius: 0 0 8px 8px; padding: 2px 10px; font-size: 11px; font-weight: 800; color: var(--rarity-glow); letter-spacing: 1px; z-index: 1; }

/* Icon wrapper */
.bp-card-icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-top: 14px; margin-bottom: 8px; }
.bp-card-icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,255,255,0.1)); transition: filter 0.3s; }
.bp-card-icon-text { font-size: 18px; font-weight: 900; color: var(--rarity-glow); }

/* Info */
.bp-card-info { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.bp-card-rarity { font-size: 8px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.bp-card-label { font-size: 10px; color: rgba(220,220,240,0.85); line-height: 1.3; }

/* Claim button */
.bp-card-claim { margin-top: 8px; padding: 5px 16px; background: rgba(64,255,128,0.15); border: 1px solid rgba(64,255,128,0.4); color: rgba(64,255,128,0.95); border-radius: 6px; font-family: inherit; font-size: 10px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: all 0.15s; }
.bp-card-claim:hover { background: rgba(64,255,128,0.3); border-color: rgba(64,255,128,0.6); box-shadow: 0 0 12px rgba(64,255,128,0.15); }

/* "Requires pass" label */
.bp-card-needs-pass { margin-top: 8px; font-size: 8px; font-weight: bold; letter-spacing: 1px; color: rgba(255,215,64,0.6); text-align: center; }

/* === CARD STATES === */

/* LOCKED — shadow silhouette */
.bp-locked { border-color: rgba(60,60,80,0.3) !important; background: rgba(12,10,24,0.8) !important; }
.bp-locked .bp-card-icon { filter: brightness(0) saturate(0) opacity(0.3) drop-shadow(0 0 4px rgba(255,255,255,0.05)); }
.bp-locked .bp-card-icon-text { color: rgba(60,60,80,0.4); }
.bp-locked .bp-card-info { opacity: 0.72; transition: opacity 0.2s; }
.bp-locked:hover .bp-card-info,
.bp-locked:focus-within .bp-card-info { opacity: 1; }
.bp-locked .bp-card-rarity { color: rgba(150,150,175,0.7) !important; }
.bp-locked .bp-card-label { color: rgba(205,205,225,0.72); }
.bp-locked .bp-card-tier-badge { border-color: rgba(60,60,80,0.3); color: rgba(100,100,120,0.5); }

/* CLAIMABLE — glowing pulse */
.bp-claimable { animation: bpPulse 2s ease-in-out infinite; cursor: pointer; }
@keyframes bpPulse {
    0%, 100% { box-shadow: 0 0 10px var(--rarity-glow); }
    50% { box-shadow: 0 0 25px var(--rarity-glow), 0 0 40px rgba(255,255,255,0.08); }
}

/* NEEDS PASS — unlocked by XP, gated by server-owned pass status */
.bp-needs-pass {
    border-color: rgba(255,215,64,0.28) !important;
    background: linear-gradient(180deg, rgba(255,215,64,0.07), rgba(12,10,24,0.8)) !important;
}

/* CLAIMED — checkmark, dimmed */
.bp-claimed { opacity: 0.45; }
.bp-claimed::after { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; color: rgba(80,200,120,0.7); text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; }

/* Footer */
.bp-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px 14px; border-top: 1px solid rgba(255,255,255,0.04); }
.bp-page-indicator { font-size: 12px; font-weight: bold; color: rgba(167,139,250,0.6); letter-spacing: 2px; }
.bp-guide-note { max-width: 620px; font-size: 10px; line-height: 1.4; color: rgba(200,195,220,0.6); text-align: right; }

/* Mobile */
@media (max-width: 768px) {
    .bp-panel { width: 100vw; max-width: 100vw; border-radius: 0; }
    .bp-card { width: 90px; }
    .bp-card-milestone { width: 110px; }
    .bp-card-icon-wrap { width: 40px; height: 40px; }
    .bp-body { padding: 16px 8px; gap: 4px; }
    .bp-nav-btn { width: 32px; font-size: 22px; }
    .bp-header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .bp-footer { flex-direction: column; gap: 8px; }
    .bp-guide-note { text-align: center; }
}

/* Currency HUD removed — WAGUS/LP no longer shown on in-game HUD */

/* ============================================
   MAIN MENU — Polished app-style layout
   ============================================ */

/* --- Design Tokens --- */
#start-screen[data-mm] {
    /* Core palette */
    --mm-bg: #0a0a12;
    --mm-bg-raised: #12101e;
    --mm-bg-card: rgba(18, 15, 38, 0.85);
    --mm-bg-input: rgba(14, 10, 32, 0.6);

    /* Accent */
    --mm-accent: #7c3aed;
    --mm-accent-light: #a78bfa;
    --mm-accent-subtle: rgba(124, 58, 237, 0.1);
    --mm-accent-border: rgba(124, 58, 237, 0.2);
    --mm-accent-glow: rgba(124, 58, 237, 0.15);

    /* Secondary (cyan for lore/special) */
    --mm-cyan: #00d9ff;
    --mm-cyan-subtle: rgba(0, 217, 255, 0.1);

    /* Gold (for hero titles, achievements) */
    --mm-gold: #f0d060;
    --mm-gold-subtle: rgba(212, 160, 74, 0.2);

    /* Text */
    --mm-text: rgba(240, 230, 255, 0.95);
    --mm-text-secondary: rgba(200, 195, 220, 0.75);
    --mm-text-muted: rgba(160, 150, 190, 0.5);
    --mm-text-dim: rgba(140, 130, 170, 0.35);

    /* Borders */
    --mm-border: rgba(120, 100, 200, 0.12);
    --mm-border-strong: rgba(120, 100, 200, 0.25);

    /* Spacing */
    --mm-radius-sm: 8px;
    --mm-radius-md: 12px;
    --mm-radius-lg: 16px;
    --mm-radius-xl: 20px;
    --mm-radius-pill: 9999px;

    /* Shadows */
    --mm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --mm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --mm-shadow-glow: 0 0 20px var(--mm-accent-glow);

    /* Transitions */
    --mm-transition-fast: 150ms ease;
    --mm-transition-normal: 250ms ease;

    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(165deg, var(--mm-bg) 0%, #140e2e 35%, #0d0a22 70%, #10082a 100%);
}
#start-screen[data-mm].active { display: flex; }

/* Subtle background pattern */
#start-screen[data-mm]::before {
    background-size: 60px 60px;
    opacity: 0.15;
}

/* --- Header --- */
.mm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(14, 10, 32, 0.98), rgba(14, 10, 32, 0.88));
    border-bottom: 1px solid var(--mm-accent-border);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mm-hamburger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mm-radius-sm);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mm-hamburger:hover,
.mm-hamburger:focus-visible { background: rgba(255, 255, 255, 0.1); }
.mm-hamburger-icon { width: 20px; height: 20px; filter: brightness(0) invert(0.8); }

.mm-title {
    font-size: 1.4em;
    letter-spacing: 8px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--mm-accent-light), #c4b5fd, #8b5cf6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 5s ease-in-out infinite;
    text-shadow: none;
}

/* Header right: user chip */
.mm-header-right { display: flex; align-items: center; gap: 8px; }
.mm-user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mm-radius-xl);
    cursor: pointer;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
}
.mm-user-chip:hover,
.mm-user-chip:focus-visible { background: rgba(255, 255, 255, 0.1); }
.mm-user-chip-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    filter: brightness(0) invert(0.7);
}
.mm-user-chip-name {
    font-size: 0.65em;
    color: var(--mm-text);
    letter-spacing: 0.5px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Scrollable Content --- */
.mm-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 0 16px 120px;
    position: relative;
    z-index: 2;
}
.mm-content::-webkit-scrollbar { width: 3px; }
.mm-content::-webkit-scrollbar-track { background: transparent; }
.mm-content::-webkit-scrollbar-thumb { background: var(--mm-accent-subtle); border-radius: 3px; }

/* --- Tabs --- */
.mm-tab { display: none; flex-direction: column; gap: 14px; animation: mmTabFadeIn 0.25s ease-out; }
.mm-tab-active { display: flex; }
@keyframes mmTabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Section Cards --- */
.mm-section {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--mm-shadow-sm);
}
.mm-section::before {
    content: '';
    position: absolute;
    left: 0; top: 8%; bottom: 8%;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--mm-accent) 50%, transparent);
    border-radius: 0 3px 3px 0;
}
.mm-section-header {
    font-size: 0.65em;
    color: rgba(168, 132, 255, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mm-accent-border);
}

/* Character switcher pills (loot tab) */
.mm-char-switcher {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    margin-bottom: 16px;
}
.mm-char-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--mm-accent-border);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-bg-input);
    color: rgba(180, 170, 200, 0.7);
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    line-height: 1.15;
    letter-spacing: 2px;
    cursor: pointer;
    min-height: 48px;
    transition: all var(--mm-transition-fast);
    text-align: center;
    overflow: visible;
}
.mm-char-pill:hover {
    background: rgba(24, 20, 44, 0.8);
    border-color: rgba(108, 63, 255, 0.35);
    color: rgba(210, 200, 230, 0.9);
}
.mm-char-pill-active {
    background: var(--mm-accent-subtle);
    border-color: rgba(108, 63, 255, 0.5);
    color: rgba(220, 200, 255, 1);
    box-shadow: var(--mm-shadow-glow);
}

/* --- Hero Banner --- */
.mm-hero-banner {
    position: relative;
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    height: 180px;
    margin-top: 16px;
}
.mm-hero-bg {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mm-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(10, 8, 32, 0.3) 0%, rgba(10, 8, 32, 0.7) 100%);
    text-align: center;
    padding: 20px;
}
.mm-hero-title {
    font-size: 1.4em;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--mm-gold);
    text-shadow: 0 2px 20px var(--mm-gold-subtle), 0 0 40px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
}
.mm-hero-sub {
    font-size: 0.75em;
    color: var(--mm-text-secondary);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 8px;
}

/* --- Status bar (server + version) --- */
.mm-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    margin-top: 10px;
}
.mm-server-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-xl);
    font-size: 0.75em;
    color: var(--mm-text-secondary);
    letter-spacing: 0.5px;
}
.mm-server-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ae04a;
    box-shadow: 0 0 6px rgba(74, 224, 74, 0.4);
    flex-shrink: 0;
}
.mm-version-pill {
    font-size: 0.6em;
    color: var(--mm-text-dim);
    letter-spacing: 1px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--mm-radius-sm);
}

/* --- Feature Cards --- */
.mm-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mm-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-md);
    text-align: center;
}
.mm-feature-static {
    pointer-events: none;
    opacity: 0.7;
}
.mm-feature-icon {
    width: 28px; height: 28px;
    filter: brightness(0) invert(0.7) sepia(0.3) hue-rotate(200deg);
}
.mm-feature-label {
    font-size: 0.75em;
    color: var(--mm-text);
    font-weight: bold;
    letter-spacing: 1px;
}
.mm-feature-desc {
    font-size: 0.55em;
    color: var(--mm-text-muted);
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* --- Lore Storybook Widget --- */
.mm-lore-widget {
    position: relative;
    margin-top: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(0, 40, 60, 0.9), rgba(10, 20, 50, 0.95));
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: var(--mm-radius-md);
    cursor: pointer;
    overflow: hidden;
    min-height: 44px;
    transition: all var(--mm-transition-normal);
}
.mm-lore-widget:hover {
    border-color: rgba(0, 200, 255, 0.45);
    box-shadow: 0 0 20px rgba(0, 180, 255, 0.15), inset 0 0 30px rgba(0, 180, 255, 0.03);
    transform: translateY(-1px);
}
.mm-lore-widget:active {
    transform: translateY(0);
}
.mm-lore-widget-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(0, 200, 255, 0.06), transparent 50%);
    pointer-events: none;
    animation: loreWidgetPulse 4s ease-in-out infinite;
}
@keyframes loreWidgetPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.mm-lore-widget-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.mm-lore-widget-icon {
    font-size: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.4));
}
.mm-lore-widget-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.mm-lore-widget-title {
    font-size: 0.8em;
    font-weight: bold;
    color: rgba(180, 230, 255, 0.95);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.mm-lore-widget-sub {
    font-size: 0.55em;
    color: rgba(140, 180, 210, 0.6);
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.mm-lore-widget-arrow {
    font-size: 1.1em;
    color: rgba(0, 200, 255, 0.5);
    flex-shrink: 0;
    transition: transform var(--mm-transition-fast), color var(--mm-transition-fast);
}
.mm-lore-widget:hover .mm-lore-widget-arrow {
    transform: translateX(3px);
    color: rgba(0, 220, 255, 0.8);
}

/* --- News Items --- */
.mm-news-item {
    display: block;
    border-bottom: 1px solid var(--mm-border);
}

body.store-confirm-open,
body.store-confirm-open * {
    cursor: auto !important;
}

body.store-confirm-open .store-confirm-close-btn,
body.store-confirm-open button {
    cursor: pointer !important;
}
.mm-news-item:last-child { border-bottom: none; }
.mm-news-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
}
.mm-news-summary::-webkit-details-marker { display: none; }
.mm-news-badge {
    font-size: 0.55em;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: var(--mm-radius-sm);
    background: linear-gradient(135deg, rgba(0, 200, 100, 0.2), rgba(0, 200, 100, 0.1));
    color: #60e090;
    border: 1px solid rgba(0, 200, 100, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}
.mm-news-badge-update {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.2), rgba(0, 150, 255, 0.1));
    color: #60b0ff;
    border-color: rgba(0, 150, 255, 0.2);
}
.mm-news-body { flex: 1; min-width: 0; }
.mm-news-title {
    font-size: 0.85em;
    color: var(--mm-text);
    font-weight: bold;
    margin-bottom: 0;
}
.mm-news-chevron {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.mm-news-item[open] .mm-news-chevron {
    transform: rotate(225deg);
    border-color: var(--mm-accent);
}
.mm-news-detail {
    padding: 0 20px 12px 0;
}
.mm-news-desc {
    font-size: 0.7em;
    color: var(--mm-text-muted);
    line-height: 1.4;
}
.mm-news-see-all {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.08), rgba(0, 200, 255, 0.03));
    border: 1px solid rgba(0, 200, 255, 0.15);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-accent);
    font-size: 0.75em;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.mm-news-see-all:hover {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.15), rgba(0, 200, 255, 0.06));
    border-color: rgba(0, 200, 255, 0.3);
}
.mm-news-expanded {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mm-accent) transparent;
}
.mm-news-expanded::-webkit-scrollbar { width: 4px; }
.mm-news-expanded::-webkit-scrollbar-thumb {
    background: var(--mm-accent);
    border-radius: 2px;
}
.mm-news-collapse-btn {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-text-muted);
    font-size: 0.7em;
    cursor: pointer;
    transition: color 0.2s;
}
.mm-news-collapse-btn:hover { color: var(--mm-text); }

/* --- Empty States --- */
.mm-empty-state {
    text-align: center;
    padding: 28px 16px;
}
.mm-empty-icon {
    width: 40px; height: 40px;
    filter: brightness(0) invert(0.35);
    margin-bottom: 12px;
}
.mm-empty-title {
    font-size: 0.85em;
    color: var(--mm-text-secondary);
    font-weight: bold;
    margin-bottom: 6px;
}
.mm-empty-sub {
    font-size: 0.7em;
    color: var(--mm-text-dim);
    line-height: 1.4;
}

/* --- Leaderboard Preview --- */
.mm-leaderboard-preview { display: flex; flex-direction: column; gap: 2px; }
.mm-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    font-size: 0.8em;
    border-radius: 6px;
}
.mm-lb-header {
    color: var(--mm-text-muted);
    font-size: 0.65em;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--mm-border);
}
.mm-lb-rank { width: 24px; text-align: center; font-weight: bold; color: var(--mm-text-muted); }
.mm-lb-gold { color: var(--mm-gold); }
.mm-lb-silver { color: #c0c8d0; }
.mm-lb-bronze { color: #c89060; }
.mm-lb-name { flex: 1; color: var(--mm-text-secondary); }
.mm-lb-score { color: var(--mm-text-muted); font-size: 0.9em; }

/* --- Inventory Preview Grid --- */
.mm-orb-counter {
    font-size: 0.75em;
    font-weight: 600;
    color: #60c0ff;
    letter-spacing: 0.5px;
}
.mm-inv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.mm-inv-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: var(--mm-bg-input);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
}
.mm-inv-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 4px;
}
.mm-inv-count {
    font-size: 0.65em;
    color: var(--mm-text-secondary);
}
.mm-inv-label {
    font-size: 0.55em;
    color: var(--mm-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- Equipped Gear Grid --- */
.mm-equipped-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mm-equipped-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    background: var(--mm-bg-input);
    border: 1px solid var(--mm-border-strong);
    border-radius: var(--mm-radius-sm);
    min-width: 70px;
}
.mm-equipped-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}
.mm-equipped-label {
    font-size: 0.6em;
    color: var(--mm-text-secondary);
    text-align: center;
}
.mm-equipped-type {
    font-size: 0.5em;
    color: var(--mm-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#start-screen.mm-desktop .mm-inv-grid { grid-template-columns: repeat(7, 1fr); }

/* --- Daily Rewards Grid --- */
.mm-daily-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mm-daily-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    transition: all var(--mm-transition-fast);
    position: relative;
}
.mm-daily-slot:hover { background: rgba(255, 255, 255, 0.06); }

/* Premium (Day 7) */
.mm-daily-premium {
    border-color: var(--mm-gold-subtle);
    background: rgba(210, 170, 80, 0.06);
}

/* Locked state — future days */
.mm-daily-locked {
    opacity: 0.4;
    pointer-events: none;
}

/* Claimed state — completed days */
.mm-daily-claimed {
    opacity: 0.65;
    border-color: rgba(74, 224, 74, 0.25);
    background: rgba(74, 224, 74, 0.05);
}
.mm-daily-check {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #4ae04a;
}

/* Claimable state — pulsing glow */
.mm-daily-claimable {
    cursor: pointer;
    border-color: rgba(100, 180, 255, 0.5);
    background: rgba(100, 180, 255, 0.08);
    animation: dailyPulse 2s ease-in-out infinite;
}
.mm-daily-claimable:hover {
    background: rgba(100, 180, 255, 0.15);
    border-color: rgba(100, 180, 255, 0.7);
    transform: scale(1.05);
}
@keyframes dailyPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(100, 180, 255, 0.1); }
    50% { box-shadow: 0 0 12px rgba(100, 180, 255, 0.35); }
}

/* Claim button */
.mm-daily-claim-btn {
    font-size: 0.55em;
    font-weight: bold;
    color: #fff;
    background: rgba(100, 180, 255, 0.3);
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: 1px;
    margin-top: 2px;
}
.mm-daily-claimable:hover .mm-daily-claim-btn {
    background: rgba(100, 180, 255, 0.5);
}

/* Countdown timer */
.mm-daily-countdown {
    font-size: 0.65em;
    color: var(--mm-text-muted);
    text-align: center;
    padding: 4px 0 8px;
    letter-spacing: 0.5px;
}

.mm-daily-day {
    font-size: 0.55em;
    color: var(--mm-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.mm-daily-icon { width: 28px; height: 28px; }
.mm-daily-reward {
    font-size: 0.7em;
    color: var(--mm-text);
    font-weight: bold;
}

/* --- Daily Reward Claim Popup --- */
.daily-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 9750;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: daily-overlay-fade 0.3s ease-out;
    cursor: pointer;
}
.daily-reward-overlay.daily-exit {
    animation: daily-overlay-fade 0.4s ease-in reverse forwards;
    pointer-events: none;
}

@media (max-width: 768px), (pointer: coarse) {
    #build-hotbar {
        width: min(88vw, 440px);
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    #build-hotbar-slots {
        width: 100%;
        max-width: 100%;
        gap: 3px;
        padding: 4px 38vw;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        touch-action: none;
        cursor: grab;
    }

    #build-hotbar-slots::-webkit-scrollbar {
        display: none;
    }

    .build-category-sep {
        width: 18px;
        height: 54px;
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    .build-slot {
        width: 54px;
        height: 54px;
        border-width: 1px;
    }

    .build-slot-icon {
        width: 26px;
        height: 26px;
    }

    .build-slot-name {
        max-width: 50px;
        font-size: 8px;
    }

    #build-hotbar-info {
        padding: 0 2px;
        font-size: 9px;
    }

    .build-tooltip {
        max-width: min(220px, 88vw);
        font-size: 10px;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    body.game-playing #build-hotbar,
    #build-hotbar {
        width: min(42vw, 400px);
        max-width: min(42vw, 400px);
        bottom: calc(max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px)) + 56px);
    }

    .build-category-sep {
        width: 16px;
        height: 50px;
    }

    .build-slot {
        width: 50px;
        height: 50px;
    }

    .build-slot-icon {
        width: 24px;
        height: 24px;
    }

    .build-slot-name {
        max-width: 46px;
        font-size: 7px;
    }
}

.daily-reward-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 40px;
    background: radial-gradient(ellipse at center, rgba(40, 50, 80, 0.95), rgba(15, 18, 30, 0.95));
    border: 1px solid rgba(100, 180, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(100, 180, 255, 0.2), inset 0 0 30px rgba(100, 180, 255, 0.05);
    position: relative;
    overflow: visible;
    pointer-events: none;
}
.daily-reward-popup.daily-premium-popup {
    border-color: rgba(210, 170, 80, 0.5);
    box-shadow: 0 0 40px rgba(210, 170, 80, 0.25), inset 0 0 30px rgba(210, 170, 80, 0.05);
}

.daily-reward-popup-day {
    font-size: 0.7em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(100, 180, 255, 0.7);
}
.daily-premium-popup .daily-reward-popup-day {
    color: rgba(210, 170, 80, 0.8);
}

.daily-reward-popup-icon {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 0 12px rgba(100, 180, 255, 0.5));
    animation: daily-icon-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.daily-premium-popup .daily-reward-popup-icon {
    filter: drop-shadow(0 0 12px rgba(210, 170, 80, 0.6));
}

.daily-reward-popup-label {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    opacity: 0;
    animation: daily-label-in 0.5s ease-out 0.4s forwards;
}

.daily-reward-popup-streak {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.daily-reward-popup-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 180, 255, 0.25) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    animation: daily-glow-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
.daily-premium-popup .daily-reward-popup-glow {
    background: radial-gradient(circle, rgba(210, 170, 80, 0.3) 0%, transparent 70%);
}

.daily-reward-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(100, 180, 255, 0.8);
    top: 45%;
    left: 50%;
    animation: daily-particle-fly 0.8s ease-out forwards;
    pointer-events: none;
}
.daily-premium-popup .daily-reward-particle {
    background: rgba(210, 170, 80, 0.8);
}

@keyframes daily-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes daily-icon-reveal {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes daily-label-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes daily-glow-pulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -60%) scale(1); }
    50%      { opacity: 0.8; transform: translate(-50%, -60%) scale(1.1); }
}

@keyframes daily-particle-fly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.3); }
}

/* --- Base Tab --- */
.mm-base-overview { display: flex; align-items: center; gap: 20px; }
.mm-base-icon-large { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.mm-base-ring-large { width: 100%; height: 100%; }
.mm-base-detail-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    filter: brightness(0) invert(0.65);
}
.mm-base-stats { flex: 1; }
.mm-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mm-border);
    font-size: 0.8em;
}
.mm-stat-row:last-child { border-bottom: none; }
.mm-stat-label { color: var(--mm-text-muted); letter-spacing: 1px; }
.mm-stat-value { color: var(--mm-text); font-weight: bold; }

/* Build grid — kept for reference but Quick Build section removed from HTML */
.mm-build-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mm-build-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    cursor: pointer;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
}
.mm-build-item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--mm-border-strong); }
.mm-build-icon { width: 32px; height: 32px; }
.mm-build-label { font-size: 0.6em; color: var(--mm-text-secondary); letter-spacing: 0.5px; }

/* Upkeep */
.mm-upkeep-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.mm-upkeep-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.mm-upkeep-fill {
    height: 100%;
    background: #4ae04a;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s, background 0.3s;
}
.mm-upkeep-pct {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: bold;
    color: #4ae04a;
    min-width: 36px;
    text-align: right;
}
.mm-upkeep-inv {
    display: flex;
    gap: 16px;
}
.mm-upkeep-item {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
}
.mm-upkeep-item-label {
    font-size: 0.78em;
    color: var(--mm-text-muted);
    letter-spacing: 0.5px;
}
.mm-upkeep-item-count {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--mm-text);
}

/* Storage */
.mm-storage-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-storage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
}
.mm-storage-name {
    font-size: 0.8em;
    color: var(--mm-text-secondary);
    letter-spacing: 0.5px;
}
.mm-storage-usage {
    font-size: 0.75em;
    color: var(--mm-text-muted);
}

/* --- Profile Tab --- */
.mm-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(25, 20, 50, 0.9), rgba(18, 15, 35, 0.85));
    border: 1px solid var(--mm-border-strong);
    border-radius: var(--mm-radius-lg);
    margin-top: 16px;
}
.mm-profile-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mm-cyan-subtle), var(--mm-accent-subtle));
    border: 2px solid rgba(0, 217, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mm-profile-avatar-icon { width: 30px; height: 30px; filter: brightness(0) invert(0.6); }
.mm-profile-info { flex: 1; }
.mm-profile-name {
    font-size: 1.15em;
    color: var(--mm-gold);
    font-weight: bold;
    letter-spacing: 2px;
}
.mm-profile-email {
    font-size: 0.7em;
    color: var(--mm-text-muted);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Stats Grid */
.mm-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.mm-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
}
.mm-stat-card-value {
    font-size: 1.3em;
    color: var(--mm-text);
    font-weight: bold;
}
.mm-stat-card-label {
    font-size: 0.6em;
    color: var(--mm-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Settings buttons */
.mm-settings-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-text-secondary);
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    letter-spacing: 1px;
    cursor: pointer;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.mm-settings-btn:first-of-type { margin-top: 0; }
.mm-settings-btn:hover,
.mm-settings-btn:focus-visible { background: rgba(255, 255, 255, 0.08); }

/* Account bar */
.mm-account-bar {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.mm-account-email {
    font-size: 0.8em;
    color: var(--mm-text-muted);
    letter-spacing: 0.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-btn-signout {
    font-family: 'Courier New', monospace;
    font-size: 0.7em;
    padding: 8px 14px;
    border: 1px solid rgba(200, 70, 70, 0.25);
    border-radius: var(--mm-radius-sm);
    background: rgba(200, 70, 70, 0.08);
    color: rgba(240, 130, 130, 0.75);
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
    white-space: nowrap;
}
.mm-btn-signout:hover,
.mm-btn-signout:focus-visible {
    background: rgba(200, 70, 70, 0.15);
    border-color: rgba(200, 70, 70, 0.4);
    color: #ff9090;
}

/* --- PWA Install Prompt --- */
.mm-install-prompt {
    margin: 16px 0 8px;
    padding: 12px 14px;
    background: var(--mm-accent-subtle);
    border: 1px solid var(--mm-accent-border);
    border-radius: var(--mm-radius-md);
}
.mm-install-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mm-install-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mm-radius-md);
    flex-shrink: 0;
}
.mm-install-text {
    flex: 1;
    min-width: 0;
}
.mm-install-title {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--mm-text);
    letter-spacing: 0.5px;
}
.mm-install-sub {
    font-size: 0.7em;
    color: var(--mm-text-muted);
    margin-top: 2px;
}
.mm-install-btn {
    font-family: 'Courier New', monospace;
    font-size: 0.72em;
    padding: 8px 16px;
    border: 1px solid rgba(108, 63, 255, 0.4);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-accent-glow);
    color: var(--mm-accent-light);
    cursor: pointer;
    letter-spacing: 1px;
    font-weight: bold;
    white-space: nowrap;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
}
.mm-install-btn:hover {
    background: rgba(108, 63, 255, 0.25);
    border-color: rgba(108, 63, 255, 0.6);
    color: #c8b0ff;
}
.mm-install-dismiss {
    background: none;
    border: none;
    color: var(--mm-text-dim);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    flex-shrink: 0;
    min-height: 44px;
    transition: color var(--mm-transition-fast);
}
.mm-install-dismiss:hover {
    color: var(--mm-text-secondary);
}

/* iOS Install Instructions Modal */
.mm-ios-install-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
}
.mm-ios-install-panel {
    background: rgba(10, 12, 20, 0.98);
    border: 2px solid rgba(108, 63, 255, 0.4);
    border-radius: var(--mm-radius-md);
    padding: 24px;
    max-width: 320px;
    width: 90vw;
    text-align: center;
}
.mm-ios-install-title {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--mm-accent-light);
    margin-bottom: 16px;
    letter-spacing: 1px;
}
.mm-ios-install-steps {
    text-align: left;
    margin-bottom: 20px;
}
.mm-ios-step {
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    color: var(--mm-text);
    padding: 8px 0;
    border-bottom: 1px solid var(--mm-accent-subtle);
}
.mm-ios-step:last-child {
    border-bottom: none;
}
.mm-ios-share-icon {
    font-size: 1.2em;
}
.mm-ios-install-close {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    padding: 10px 28px;
    border: 1px solid rgba(108, 63, 255, 0.4);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-accent-glow);
    color: var(--mm-accent-light);
    cursor: pointer;
    letter-spacing: 1px;
    font-weight: bold;
    min-height: 44px;
    transition: all var(--mm-transition-fast);
}
.mm-ios-install-close:hover {
    background: rgba(108, 63, 255, 0.25);
}

/* --- Auth Gate (signed-out empty state) --- */
.mm-auth-gate {
    margin: 16px 0;
}
.mm-auth-gate-inner {
    text-align: center;
    padding: 36px 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
}
.mm-auth-gate-icon {
    width: 48px; height: 48px;
    filter: brightness(0) invert(0.4);
    margin-bottom: 16px;
}
.mm-auth-gate-title {
    font-size: 1em;
    font-weight: bold;
    color: var(--mm-text);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.mm-auth-gate-sub {
    font-size: 0.75em;
    color: var(--mm-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.mm-auth-gate-btn {
    min-width: 180px;
    font-size: 0.85em;
    padding: 12px 28px;
}

.mm-logout-action {
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(255, 76, 96, 0.62);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(89, 12, 24, 0.72), rgba(35, 5, 12, 0.92));
    color: #ffbdc5;
    cursor: pointer;
    font-family: var(--o-mono, monospace);
    font-size: clamp(12px, 1.6vw, 15px);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

.mm-logout-action:hover,
.mm-logout-action:focus-visible {
    border-color: rgba(255, 126, 139, 0.95);
    background: linear-gradient(180deg, rgba(126, 18, 34, 0.82), rgba(49, 6, 15, 0.96));
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.mm-logout-action:disabled {
    cursor: wait;
    opacity: 0.65;
    transform: none;
}

.mm-logout-action-home {
    max-width: 320px;
    margin-top: 12px;
}

.mm-logout-action-profile {
    margin: 18px 0 22px;
}

/* Hide auth-required sections when signed out */
#start-screen.mm-signed-out .mm-auth-required { display: none; }
#start-screen.mm-signed-out .mm-drawer-item-danger { display: none; }
#start-screen.mm-signed-out .mm-account-bar { display: none; }

/* User chip as button reset (button inherits from existing .mm-user-chip) */
button.mm-user-chip {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}
#start-screen.mm-signed-out .mm-user-chip {
    border: 1px solid var(--mm-accent-border);
    border-radius: var(--mm-radius-xl);
    padding: 4px 12px 4px 6px;
}
#start-screen.mm-signed-out .mm-user-chip:hover {
    background: var(--mm-accent-subtle);
    border-color: var(--mm-border-strong);
}

/* --- Bottom Navigation (5-tab with center FAB) --- */
.mm-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background: linear-gradient(180deg, rgba(14, 10, 32, 0.96), rgba(8, 6, 20, 0.99));
    border-top: 1px solid var(--mm-accent-border);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.mm-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: none; border: none;
    cursor: pointer;
    color: var(--mm-text-muted);
    transition: color var(--mm-transition-fast), transform var(--mm-transition-fast);
    flex: 1; position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    min-height: 44px;
}
.mm-nav-item:active { transform: scale(0.92); }
.mm-nav-item:hover,
.mm-nav-item:focus-visible { color: var(--mm-text); }
.mm-nav-active { color: var(--mm-accent-light); box-shadow: var(--mm-shadow-glow); }
.mm-nav-active::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), transparent);
    border-radius: 0 0 2px 2px;
}
.mm-nav-icon {
    width: 22px; height: 22px;
    filter: brightness(0) invert(0.45);
    transition: filter var(--mm-transition-fast);
}
.mm-nav-active .mm-nav-icon {
    filter: brightness(0) invert(0.75) sepia(1) hue-rotate(220deg) saturate(3);
}
.mm-nav-label {
    font-family: 'Courier New', monospace;
    font-size: 0.55em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Center FAB */
.mm-nav-fab { flex: 1.2; padding: 0 4px 6px; z-index: 2; }
.mm-fab-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.25), rgba(168, 85, 247, 0.18));
    border: 2px solid rgba(108, 63, 255, 0.45);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    margin: -22px auto 2px;
    box-shadow: 0 -4px 20px var(--mm-gold-subtle),
                0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 4px rgba(8, 6, 18, 0.97);
    transition: all var(--mm-transition-normal);
}
.mm-nav-fab:active .mm-fab-circle { transform: scale(0.9); }
.mm-nav-fab:hover .mm-fab-circle {
    border-color: rgba(108, 63, 255, 0.65);
    box-shadow: 0 -4px 24px rgba(108, 63, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(8, 6, 18, 0.97);
}
.mm-nav-fab.mm-nav-active .mm-fab-circle {
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.4), rgba(168, 85, 247, 0.3));
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 -4px 28px rgba(108, 63, 255, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(8, 6, 18, 0.97);
}
.mm-fab-icon { width: 24px; height: 24px; filter: brightness(0) invert(0.65); transition: filter var(--mm-transition-fast); }
.mm-nav-fab.mm-nav-active .mm-fab-icon { filter: brightness(0) invert(0.9) sepia(1) hue-rotate(220deg) saturate(3); }
.mm-fab-label { margin-top: 0; }
.mm-nav-fab.mm-nav-active::after { display: none; }

/* --- Drawer --- */
.mm-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 40; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.mm-overlay-visible { opacity: 1; pointer-events: auto; }
.mm-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 290px; max-width: 82vw;
    background: linear-gradient(180deg, rgba(16, 13, 32, 0.99), rgba(10, 8, 22, 0.99));
    border-right: 1px solid var(--mm-accent-border);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
    backdrop-filter: blur(24px);
}
.mm-drawer-open { transform: translateX(0); }
.mm-drawer-header {
    padding: 28px 20px;
    padding-top: max(28px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--mm-border);
    background: linear-gradient(135deg, var(--mm-cyan-subtle), var(--mm-accent-subtle));
}
.mm-drawer-title {
    font-size: 1.5em; font-weight: 900;
    letter-spacing: 6px; display: block;
    background: linear-gradient(135deg, var(--mm-accent-light), #c4b5fd);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 6px;
}
.mm-drawer-email { font-size: 0.7em; color: var(--mm-text-muted); letter-spacing: 0.5px; display: block; }
.mm-drawer-items { flex: 1; padding: 12px 0; overflow-y: auto; }
.mm-drawer-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 20px;
    background: none; border: none;
    color: var(--mm-text-secondary);
    font-family: 'Courier New', monospace;
    font-size: 0.85em; letter-spacing: 1.5px;
    text-transform: uppercase; cursor: pointer;
    min-height: 44px;
    transition: all var(--mm-transition-fast); text-align: left;
    -webkit-tap-highlight-color: transparent;
    border-left: 3px solid transparent;
}
.mm-drawer-item:hover,
.mm-drawer-item:focus-visible {
    background: var(--mm-accent-subtle);
    color: var(--mm-text);
    border-left-color: rgba(139, 92, 246, 0.5);
}
.mm-drawer-item-danger { color: rgba(240, 120, 120, 0.65); }
.mm-drawer-item-danger:hover { background: rgba(200, 50, 50, 0.1); color: rgba(255, 140, 140, 0.95); }
.mm-drawer-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.55; filter: brightness(0) invert(1); transition: opacity var(--mm-transition-fast); }
.mm-drawer-item:hover .mm-drawer-icon,
.mm-drawer-item:focus-visible .mm-drawer-icon { opacity: 1; }
.mm-drawer-item-danger .mm-drawer-icon { filter: brightness(0) invert(0.7) sepia(1) saturate(5) hue-rotate(330deg); opacity: 0.55; }
.mm-drawer-item-danger:hover .mm-drawer-icon { opacity: 0.95; }
.mm-drawer-label { flex: 1; }
.mm-drawer-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.mm-drawer-copy .mm-drawer-label {
    flex: none;
}
.mm-drawer-sublabel {
    font-size: 0.62em;
    color: var(--mm-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mm-drawer-status {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--mm-text-secondary);
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mm-drawer-status--live {
    border-color: rgba(74, 224, 74, 0.26);
    background: rgba(74, 224, 74, 0.12);
    color: #98f198;
}
.mm-drawer-status--idle {
    border-color: rgba(255, 210, 90, 0.2);
    background: rgba(255, 210, 90, 0.1);
    color: #f0d27b;
}
.mm-drawer-item-wallet {
    align-items: center;
}
.mm-drawer-item-active { color: var(--mm-accent-light); }
.mm-drawer-item-active .mm-drawer-icon { opacity: 0.9; filter: brightness(0) invert(0.75) sepia(1) hue-rotate(220deg) saturate(3); }
.mm-drawer-item-active:hover { background: var(--mm-accent-subtle); }
.mm-drawer-item-active .mm-drawer-sublabel { color: rgba(210, 215, 255, 0.72); }
.mm-drawer-divider { height: 1px; background: var(--mm-border); margin: 8px 20px; }

/* --- Alert/Notice --- */
.mm-alert { margin: 0 0 12px 0; border-radius: var(--mm-radius-md); }

/* ============================================
   MAIN MENU — Desktop overrides
   ============================================ */
#start-screen.mm-desktop { flex-direction: row; align-items: stretch; }
#start-screen.mm-desktop .mm-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
}
#start-screen.mm-desktop .mm-content {
    margin-top: 56px;
    padding-bottom: 40px;
    max-width: 680px;
    margin-left: auto; margin-right: auto;
    height: calc(100vh - 56px);
}
#start-screen.mm-desktop .mm-bottom-nav {
    position: fixed; top: 56px; bottom: 0; left: 0; right: auto;
    width: 80px;
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 16px 0; gap: 4px;
    border-top: none;
    border-right: 1px solid var(--mm-border);
    background: linear-gradient(180deg, rgba(12, 10, 28, 0.97), rgba(8, 6, 18, 0.97));
}
#start-screen.mm-desktop .mm-nav-item { flex: none; width: 100%; padding: 12px 0; }
#start-screen.mm-desktop .mm-nav-active::after {
    top: 20%; bottom: auto; left: 0; right: auto;
    width: 2px; height: 60%;
    background: linear-gradient(180deg, transparent, var(--mm-gold-subtle), transparent);
}
#start-screen.mm-desktop .mm-nav-fab { margin-top: 8px; margin-bottom: 8px; }
#start-screen.mm-desktop .mm-fab-circle { margin: 0 auto; box-shadow: 0 0 20px var(--mm-gold-subtle); }
#start-screen.mm-desktop .mm-hero-banner { height: 220px; }
#start-screen.mm-desktop .mm-hero-title { font-size: 1.8em; }
#start-screen.mm-desktop .mm-stats-grid { grid-template-columns: repeat(4, 1fr); }
#start-screen.mm-desktop .mm-daily-grid { grid-template-columns: repeat(7, 1fr); }

/* Save slots in main menu */
#start-screen[data-mm] .save-slots { margin-bottom: 0; }
#start-screen[data-mm] .save-slot { flex-wrap: wrap; gap: 8px; }
#start-screen[data-mm] .slot-actions { width: 100%; justify-content: flex-end; }
#start-screen[data-mm] > .screen-content { display: none; }

/* --- Mobile-specific refinements --- */
@media (max-width: 400px) {
    .mm-header { padding: 8px 12px; }
    .mm-title { font-size: 1.1em; letter-spacing: 5px; }
    .mm-content { padding: 0 12px 100px; }
    .mm-section { padding: 12px; border-radius: var(--mm-radius-sm); }
    .mm-hero-banner { height: 150px; }
    .mm-hero-title { font-size: 1.1em; letter-spacing: 3px; }
    .mm-nav-label { font-size: 0.45em; letter-spacing: 0; }
    .mm-fab-circle { width: 50px; height: 50px; margin-top: -18px; }
    .mm-fab-icon { width: 20px; height: 20px; }
    .mm-drawer { width: 260px; }
    .mm-features { gap: 6px; }
    .mm-feature-card { padding: 12px 6px; }
    .mm-user-chip-name { max-width: 60px; }
}

/* Landscape phone (rare since menu is portrait-locked) */
@media (max-height: 480px) and (orientation: landscape) {
    .mm-bottom-nav { padding: 4px 0; }
    .mm-nav-item { padding: 4px 2px; }
    .mm-fab-circle { width: 44px; height: 44px; margin-top: -14px; }
    .mm-fab-icon { width: 18px; height: 18px; }
    .mm-content { padding-bottom: 70px; }
    .mm-hero-banner { height: 120px; }
}

/* ======================================================================
   Core Vault — Hacking Sequence Overlay
   ====================================================================== */

.vault-hack-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    font-family: var(--font-mono, 'Courier New', monospace);
    color: var(--color-text, #c8f0c8);
    pointer-events: all;
    overflow: hidden;
}

.vault-hack-overlay.hidden {
    display: none;
}

/* Matrix rain background effect */
.vault-hack-bg {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 100, 0.03) 2px,
        rgba(0, 255, 100, 0.03) 4px
    );
    animation: vault-scanlines 0.1s linear infinite;
}

@keyframes vault-scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Header */
.vault-hack-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 24px;
}

.vault-hack-title {
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #aa44ff;
    text-shadow: 0 0 10px rgba(170, 68, 255, 0.6);
    margin: 0 0 8px 0;
}

.vault-hack-level {
    font-size: 11px;
    color: #888;
}

/* Central prompt display */
.vault-hack-prompt-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border: 2px solid #aa44ff;
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(170, 68, 255, 0.3),
        inset 0 0 20px rgba(170, 68, 255, 0.1);
    margin-bottom: 24px;
    transition: border-color 0.1s, box-shadow 0.1s;
}

.vault-hack-prompt-container.correct {
    border-color: #44ff88;
    box-shadow:
        0 0 20px rgba(68, 255, 136, 0.4),
        inset 0 0 20px rgba(68, 255, 136, 0.1);
}

.vault-hack-prompt-container.wrong {
    border-color: #ff4444;
    box-shadow:
        0 0 30px rgba(255, 68, 68, 0.5),
        inset 0 0 20px rgba(255, 68, 68, 0.2);
    animation: vault-shake 0.3s ease-out;
}

@keyframes vault-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.vault-hack-prompt {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(170, 68, 255, 0.8);
    user-select: none;
    transition: color 0.05s;
}

/* Arrow symbols for directional inputs */
.vault-hack-prompt[data-dir="up"]::after { content: '\2191'; }
.vault-hack-prompt[data-dir="down"]::after { content: '\2193'; }
.vault-hack-prompt[data-dir="left"]::after { content: '\2190'; }
.vault-hack-prompt[data-dir="right"]::after { content: '\2192'; }

/* Progress bar (30 segments) */
.vault-hack-progress {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
}

.vault-hack-progress-segment {
    width: 12px;
    height: 6px;
    background: rgba(170, 68, 255, 0.15);
    border: 1px solid rgba(170, 68, 255, 0.3);
    transition: background 0.15s, border-color 0.15s;
}

.vault-hack-progress-segment.done {
    background: #44ff88;
    border-color: #44ff88;
    box-shadow: 0 0 4px rgba(68, 255, 136, 0.5);
}

.vault-hack-progress-segment.active {
    background: #aa44ff;
    border-color: #aa44ff;
    box-shadow: 0 0 6px rgba(170, 68, 255, 0.6);
    animation: vault-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes vault-pulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Timer bar (shrinks per input) */
.vault-hack-timer {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 4px;
    background: rgba(170, 68, 255, 0.15);
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.vault-hack-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #aa44ff, #ff44aa);
    border-radius: 2px;
    transition: width 0.05s linear;
    width: 100%;
}

.vault-hack-timer-fill.urgent {
    background: linear-gradient(90deg, #ff4444, #ff8844);
}

/* Status text */
.vault-hack-status {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Success overlay */
.vault-hack-success {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2;
    animation: vault-success-in 0.5s ease-out;
}

@keyframes vault-success-in {
    0% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}

.vault-hack-success-text {
    font-size: 28px;
    font-weight: bold;
    color: #44ff88;
    text-shadow: 0 0 20px rgba(68, 255, 136, 0.6);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.vault-hack-success-rewards {
    font-size: 14px;
    color: #aa88ff;
    text-align: center;
    line-height: 1.8;
}

/* Failure flash */
.vault-hack-fail-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
    animation: vault-fail-flash 0.4s ease-out forwards;
}

@keyframes vault-fail-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Cooldown message */
.vault-hack-cooldown {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: #ff8844;
    margin-top: 12px;
}

/* Interaction tooltip near vault */
.vault-interact-tooltip {
    position: fixed;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #aa44ff;
    border-radius: 4px;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 13px;
    color: #c8f0c8;
    text-align: center;
    z-index: 500;
    pointer-events: none;
    white-space: nowrap;
}

.vault-interact-tooltip.hidden {
    display: none;
}

.vault-interact-tooltip .vault-key-hint {
    color: #aa44ff;
    font-weight: bold;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .vault-hack-prompt-container {
        width: 120px;
        height: 120px;
    }
    .vault-hack-prompt {
        font-size: 36px;
    }
    .vault-hack-progress-segment {
        width: 8px;
        height: 4px;
    }
    .vault-hack-timer {
        width: 200px;
    }
}

/* --- Tool Cupboard Panel --- */
.tc-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgba(18, 22, 28, 0.96) 0%, rgba(12, 15, 20, 0.98) 100%);
    border: 1px solid rgba(80, 90, 110, 0.4);
    border-radius: 8px;
    padding: 16px 18px;
    min-width: 280px;
    max-width: 320px;
    z-index: 1000;
    font-family: var(--font-ui, 'Segoe UI', system-ui, sans-serif);
    color: #c8ccd4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(8px);
}
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #e8ecf2;
    letter-spacing: 0.3px;
}
.tc-icon {
    opacity: 0.7;
}
.tc-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    padding: 5px;
    transition: all 0.15s;
}
.tc-close:hover {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.tc-loading {
    text-align: center;
    padding: 6px;
    color: #667;
    font-size: 11px;
    font-style: italic;
}

/* Upkeep Section */
.tc-upkeep-section {
    margin-bottom: 14px;
}
.tc-upkeep-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #778;
}
.tc-status {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.tc-upkeep-track {
    position: relative;
    height: 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-upkeep-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease-out, background 0.5s;
}
.tc-upkeep-pct {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: #aab;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Divider */
.tc-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 2px 0 10px;
}

/* Resources Section */
.tc-inventory-section {
    margin-bottom: 10px;
}
.tc-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #556;
    margin-bottom: 8px;
    display: block;
}
.tc-resource {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}
.tc-resource:hover {
    background: rgba(255, 255, 255, 0.04);
}
.tc-resource-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tc-resource-icon {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.tc-wood-icon {
    background: #8B6914;
    box-shadow: 0 0 4px rgba(139, 105, 20, 0.4);
}
.tc-stone-icon {
    background: #7a7a80;
    box-shadow: 0 0 4px rgba(122, 122, 128, 0.4);
}
.tc-resource-name {
    font-size: 13px;
    color: #bbc;
}
.tc-resource-count {
    font-size: 14px;
    font-weight: 700;
    color: #e0e4ec;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
}
.tc-resource-actions {
    display: flex;
    gap: 4px;
}
.tc-btn {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: 0.3px;
}
.tc-btn-deposit {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}
.tc-btn-deposit:hover {
    background: rgba(46, 204, 113, 0.22);
    border-color: rgba(46, 204, 113, 0.4);
}
.tc-btn-withdraw {
    background: rgba(231, 76, 60, 0.1);
    color: #e07060;
    border: 1px solid rgba(231, 76, 60, 0.15);
}
.tc-btn-withdraw:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.35);
}
.tc-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Auth Section */
.tc-auth-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2px;
}
.tc-auth-count {
    font-size: 12px;
    color: #889;
    font-variant-numeric: tabular-nums;
}

/* --- Piece Health Bar (3D-projected) --- */
.piece-health-bar {
    position: fixed;
    width: 80px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -100%);
    text-align: center;
    transition: opacity 0.5s ease-out;
}
.piece-health-bar .piece-health-fill {
    height: 6px;
    border-radius: 3px;
    background: #2ecc71;
    transition: width 0.25s ease-out;
}
.piece-health-bar .piece-health-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.piece-health-text {
    display: block;
    font-size: 10px;
    font-family: var(--font-ui, 'Segoe UI', system-ui, sans-serif);
    color: #ddd;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   LORE STORYBOOK
   ============================================ */

:root {
    --lore-bg: rgba(6, 5, 14, 0.98);
    --lore-accent-keeper: #00d9ff;
    --lore-accent-fragment: #ffaa44;
    --lore-accent-testimony: #d0c0ff;
    --lore-accent-system: #44ff88;
    --lore-text: rgba(220, 215, 240, 0.88);
    --lore-text-dim: rgba(180, 175, 200, 0.6);
    --lore-title: #fff;
    --lore-page-bg: rgba(12, 10, 25, 0.85);
    --lore-border: rgba(100, 80, 180, 0.18);
    --lore-glow: rgba(100, 140, 255, 0.08);
}

/* ── Book Container ──────────────────────────── */

.lore-book {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 720px;
    height: 88vh;
    max-height: 900px;
    background: var(--lore-page-bg);
    border: 1px solid var(--lore-border);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 0 80px rgba(60, 40, 140, 0.15),
        0 4px 30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.lore-book::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.4), rgba(180, 140, 255, 0.35), transparent);
    border-radius: 1px;
}

/* ── Header ──────────────────────────────────── */

.lore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lore-border);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.lore-chapter-title {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--lore-title);
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(100, 180, 255, 0.3);
    text-align: center;
    flex: 1;
    opacity: 0.9;
}

.lore-close-btn,
.lore-toc-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--lore-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--lore-text-dim);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lore-close-btn:hover,
.lore-toc-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--lore-title);
    border-color: rgba(100, 140, 255, 0.35);
    box-shadow: 0 0 12px rgba(100, 140, 255, 0.15);
}

/* ── Page Container ──────────────────────────── */

.lore-page-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.lore-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(0);
}

.lore-page-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Page flip animations */
.lore-page-exit-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.lore-page-exit-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.lore-page-enter-right {
    opacity: 0;
    transform: translateX(40px);
}

.lore-page-enter-left {
    opacity: 0;
    transform: translateX(-40px);
}

/* ── Page Scroll Content ─────────────────────── */

.lore-page-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 32px 36px 48px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 80, 180, 0.25) transparent;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.lore-page-scroll::-webkit-scrollbar {
    width: 5px;
}

.lore-page-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.lore-page-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 80, 180, 0.3);
    border-radius: 3px;
}

/* ── Page Heading ────────────────────────────── */

.lore-page-heading {
    text-align: center;
    margin-bottom: 32px;
}

.lore-page-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lore-text-dim);
    margin-bottom: 10px;
}

.lore-page-title {
    font-family: 'Courier New', monospace;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 3px;
    color: var(--lore-title);
    text-shadow: 0 0 30px rgba(100, 180, 255, 0.25);
    animation: loreTitleGlow 4s ease-in-out infinite alternate;
}

@keyframes loreTitleGlow {
    from { text-shadow: 0 0 20px rgba(100, 180, 255, 0.15); }
    to   { text-shadow: 0 0 35px rgba(100, 180, 255, 0.3), 0 0 60px rgba(80, 120, 200, 0.1); }
}

.lore-divider {
    width: 60px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.5), transparent);
}

/* ── Section Types ───────────────────────────── */

.lore-section {
    margin-bottom: 28px;
    padding: 20px 24px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    background: rgba(255, 255, 255, 0.015);
}

.lore-section-header {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lore-section-speaker {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

.lore-section-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--lore-text-dim);
}

.lore-paragraph {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.75;
    color: var(--lore-text);
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.lore-paragraph:last-child {
    margin-bottom: 0;
}

/* Narrative (KEEPER) — cyan accent, italic feel */
.lore-section-narrative {
    border-left-color: var(--lore-accent-keeper);
    background: rgba(0, 217, 255, 0.02);
}

.lore-section-narrative .lore-section-speaker {
    color: var(--lore-accent-keeper);
}

.lore-section-narrative .lore-paragraph {
    font-style: italic;
    color: rgba(200, 230, 255, 0.88);
}

/* Fragment (recovered documents) — amber, degraded */
.lore-section-fragment {
    border-left-color: var(--lore-accent-fragment);
    background: rgba(255, 170, 68, 0.02);
}

.lore-section-fragment .lore-section-speaker {
    color: var(--lore-accent-fragment);
}

.lore-section-fragment .lore-paragraph {
    color: rgba(255, 220, 180, 0.82);
    opacity: 0.92;
}

.lore-section-fragment .lore-section-label::before {
    content: '\25B6 ';
    color: var(--lore-accent-fragment);
    opacity: 0.5;
}

/* Testimony (player accounts) — lavender, personal */
.lore-section-testimony {
    border-left-color: var(--lore-accent-testimony);
    background: rgba(208, 192, 255, 0.02);
}

.lore-section-testimony .lore-section-speaker {
    color: var(--lore-accent-testimony);
}

.lore-section-testimony .lore-paragraph {
    color: rgba(230, 220, 255, 0.85);
}

/* System (system logs) — green terminal */
.lore-section-system {
    border-left-color: var(--lore-accent-system);
    background: rgba(68, 255, 136, 0.02);
}

.lore-section-system .lore-section-speaker {
    color: var(--lore-accent-system);
}

.lore-section-system .lore-section-label::before {
    content: '> ';
    color: var(--lore-accent-system);
    opacity: 0.5;
}

.lore-section-system .lore-paragraph {
    color: rgba(180, 255, 200, 0.82);
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* ── Footer / Navigation ─────────────────────── */

.lore-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--lore-border);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.lore-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--lore-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--lore-text);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
    justify-content: center;
}

.lore-nav-btn:hover:not(.lore-nav-disabled) {
    background: rgba(100, 140, 255, 0.08);
    border-color: rgba(100, 140, 255, 0.3);
    color: var(--lore-title);
    box-shadow: 0 0 12px rgba(100, 140, 255, 0.12);
}

.lore-nav-disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.lore-page-indicator {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--lore-text-dim);
}

/* ── Table of Contents Overlay ───────────────── */

.lore-toc-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(3, 2, 8, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lore-toc-visible {
    opacity: 1;
    pointer-events: auto;
}

.lore-toc-panel {
    max-width: 440px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 36px 32px;
    text-align: center;
}

.lore-toc-title {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 3px;
    color: var(--lore-title);
    text-shadow: 0 0 25px rgba(100, 180, 255, 0.25);
    margin-bottom: 6px;
}

.lore-toc-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--lore-text-dim);
    text-transform: uppercase;
    margin-bottom: 28px;
}

.lore-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.lore-toc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

.lore-toc-item:hover {
    background: rgba(100, 140, 255, 0.06);
    border-color: var(--lore-border);
}

.lore-toc-active {
    background: rgba(100, 140, 255, 0.08);
    border-color: rgba(100, 140, 255, 0.25);
}

.lore-toc-num {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--lore-accent-keeper);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.lore-toc-name {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--lore-title);
    flex: 1;
}

.lore-toc-sub {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--lore-text-dim);
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Progress Bar ────────────────────────────── */

.lore-progress {
    height: 3px;
    background: rgba(100, 80, 180, 0.15);
    flex-shrink: 0;
}

.lore-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lore-accent-keeper), #6c3fff);
    transition: width 0.3s ease;
    border-radius: 0 2px 2px 0;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 600px) {
    .lore-book {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .lore-header {
        padding: 12px 14px;
    }

    .lore-page-scroll {
        padding: 24px 20px 40px;
    }

    .lore-page-title {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .lore-page-subtitle {
        font-size: 10px;
    }

    .lore-section {
        padding: 14px;
    }

    .lore-section-text,
    .lore-paragraph {
        font-size: 14px;
        line-height: 1.7;
    }

    .lore-footer {
        padding: 10px 14px;
    }

    .lore-nav-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
    }

    .lore-nav-btn span {
        display: none;
    }

    .lore-toc-panel {
        width: 95vw;
        max-width: 95vw;
    }
}

@media (max-height: 500px) {
    .lore-page-heading {
        margin-bottom: 20px;
    }

    .lore-page-scroll {
        padding: 16px 20px 32px;
    }

    .lore-section {
        margin-bottom: 18px;
        padding: 14px 16px;
    }
}

/* ============================================================
   LEADERBOARD BOARD OVERLAY
   Full-screen DOM overlay triggered from the 3D leaderboard
   board on the dome's second floor.
   ============================================================ */

.leaderboard-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 950;
    pointer-events: auto;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.leaderboard-panel {
    position: relative;
    background: rgba(6, 13, 24, 0.97);
    border: 2px solid rgba(64, 192, 255, 0.58);
    border-radius: 8px;
    width: min(1180px, calc(100vw - 32px));
    height: min(760px, calc(100dvh - 32px));
    min-height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(64, 192, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    z-index: 1;
}

.lb-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 64px 14px;
    border-bottom: 1px solid rgba(64, 192, 255, 0.2);
    position: relative;
    background: rgba(4, 8, 20, 0.8);
    flex-shrink: 0;
}

.lb-title {
    font-family: monospace;
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: bold;
    color: var(--minimap-border-color, #40c0ff);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(64, 192, 255, 0.6);
}

.lb-subtitle {
    font-family: monospace;
    font-size: 15px;
    color: #80d0ff;
    letter-spacing: 2px;
    margin-top: 3px;
    opacity: 0.8;
}

.lb-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(64, 192, 255, 0.1);
    border: 1px solid rgba(64, 192, 255, 0.35);
    color: #80c8e0;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.lb-close-btn:hover {
    background: rgba(64, 192, 255, 0.25);
    color: #ffffff;
}

.lb-panel-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 22px 22px;
    flex: 1 1 0;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-color: rgba(128, 208, 255, 0.85) rgba(6, 13, 24, 0.65);
    scrollbar-gutter: stable;
    touch-action: pan-y;
    outline: none;
}

.lb-my-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(128, 208, 255, 0.3);
    background: rgba(64, 192, 255, 0.08);
    color: #e9f7ff;
    font-family: monospace;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.lb-rank-num,
.lb-rank-total {
    color: #ffdd44;
}

.lb-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 18px;
    align-items: start;
}

.lb-player-pane,
.lb-tally-pane {
    min-width: 0;
}

.lb-section-label {
    font-family: monospace;
    font-size: 15px;
    font-weight: bold;
    color: #ff6040;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}

.lb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
    border: 1px solid rgba(64, 192, 255, 0.16);
    background: rgba(64, 192, 255, 0.035);
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-family: monospace;
    font-size: 15px;
    min-width: 900px;
}

.lb-table thead th {
    text-align: left;
    padding: 10px 12px;
    color: #90a8c0;
    font-size: 13px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 96, 64, 0.25);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(6, 13, 24, 0.98);
}

.lb-table tbody .lb-row td {
    padding: 11px 12px;
    color: #b0c8e0;
    border-bottom: 1px solid rgba(64, 192, 255, 0.06);
    white-space: nowrap;
}

.lb-table tbody .lb-podium td {
    background: rgba(64, 192, 255, 0.04);
}

.lb-empty {
    text-align: center;
    padding: 32px 0 !important;
    color: #506070 !important;
    font-style: italic;
    font-size: 15px;
}

.lb-kills {
    color: #ff6040 !important;
}

.lb-wealth {
    color: #40ff80 !important;
}

.lb-wealth-change {
    color: #80d0ff !important;
    font-weight: bold;
}

.lb-wealth-up {
    color: #40ff80 !important;
}

.lb-wealth-down {
    color: #ff8060 !important;
}

.lb-deaths {
    color: #6090a0 !important;
}

.lb-kd {
    color: #e0c040 !important;
}

.lb-online {
    color: #40ff80;
    font-weight: bold;
}

.lb-offline {
    color: #607080;
}

.lb-divider {
    height: 1px;
    background: rgba(64, 192, 255, 0.25);
    margin: 16px 0;
}

.lb-tallies {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.lb-tally-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: monospace;
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid rgba(64, 192, 255, 0.12);
    background: rgba(64, 192, 255, 0.035);
}

.lb-tally-label {
    color: #708090;
}

.lb-tally-value {
    font-weight: bold;
    min-width: 60px;
    text-align: right;
}

.lb-tally-chicken   { color: #ffcc40; }
.lb-tally-mobs      { color: #ff6060; }
.lb-tally-deaths    { color: #ff4040; }
.lb-tally-materials { color: #60c0ff; }
.lb-tally-orbs      { color: #40ff80; }
.lb-tally-wb        { color: #e0a040; }

.lb-footer {
    font-family: monospace;
    font-size: 12px;
    color: #5d748a;
    text-align: left;
    letter-spacing: 1px;
    padding-top: 4px;
}

@media (max-width: 900px) {
    .lb-content-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lb-tallies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 520px) {
    .leaderboard-overlay {
        align-items: flex-start;
        padding: 8px;
    }

    .leaderboard-panel {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
    }

    .lb-header {
        padding: 10px 56px 8px;
    }

    .lb-title {
        font-size: 22px;
    }

    .lb-subtitle {
        font-size: 12px;
    }

    .lb-close-btn {
        top: 8px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .lb-panel-body {
        padding: 12px 14px 16px;
    }

    .lb-my-rank {
        margin-bottom: 12px;
        padding: 10px 12px;
        font-size: 15px;
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .leaderboard-overlay {
        align-items: flex-start;
        padding: 0;
    }

    .leaderboard-panel {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .lb-header {
        padding: 16px 44px 12px;
    }

    .lb-title {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .lb-subtitle {
        font-size: 12px;
    }

    .lb-close-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
        top: 12px;
        right: 10px;
    }

    .lb-panel-body {
        padding: 14px 10px 20px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .lb-my-rank {
        font-size: 14px;
        justify-content: flex-start;
    }

    .lb-tallies {
        grid-template-columns: minmax(0, 1fr);
    }

    .lb-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .lb-table {
        font-size: 13px;
        min-width: 640px;
    }

    .lb-table thead th {
        padding: 8px 8px;
        font-size: 10px;
        position: sticky;
        top: 0;
        background: rgba(6, 13, 24, 0.98);
        z-index: 1;
    }

    .lb-table tbody .lb-row td {
        padding: 10px 8px;
    }

    .lb-section-label {
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .lb-tallies .lb-tally-row {
        padding: 8px 0;
        font-size: 13px;
    }
}

/* -- Wallet Card (Profile Tab) ---------------------- */
#profile-wallet-section {
    margin: 0.75rem 0;
}

#profile-staking-section {
    margin: 0.75rem 0;
}

.wallet-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 217, 255, 0.16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(230, 169, 87, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(6, 18, 24, 0.98), rgba(10, 13, 20, 0.98) 58%, rgba(18, 13, 10, 0.94));
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 18px;
    padding: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 70px rgba(0, 0, 0, 0.34);
}

.wallet-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.08), transparent) 0 0 / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px);
    opacity: 0.75;
}

.wallet-card-glow {
    position: absolute;
    right: -80px;
    top: -95px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(0, 217, 255, 0.18), rgba(0, 217, 255, 0.04) 44%, transparent 68%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

.wallet-card > :not(.wallet-card-glow) {
    position: relative;
    z-index: 1;
}

.wallet-header {
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(125, 211, 252, 0.7);
    margin-bottom: 0.28rem;
}

.wallet-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 16px;
}

.wallet-title-copy {
    min-width: 0;
}

.wallet-title {
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: clamp(1rem, 1.8vw, 1.34rem);
    color: var(--mm-text, #f2f3ff);
    letter-spacing: 0.08em;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(0, 217, 255, 0.18);
}

.wallet-chip {
    flex-shrink: 0;
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(5, 12, 18, 0.72);
    color: var(--mm-text-secondary, rgba(235, 238, 255, 0.78));
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
}

.wallet-chip--live {
    border-color: rgba(68, 255, 143, 0.38);
    background: rgba(33, 185, 95, 0.18);
    color: #9dffba;
    box-shadow:
        inset 0 0 18px rgba(33, 185, 95, 0.14),
        0 0 24px rgba(33, 185, 95, 0.13);
}

.wallet-chip--idle {
    border-color: rgba(230, 169, 87, 0.34);
    background: rgba(230, 169, 87, 0.12);
    color: #f3c77d;
}

.wallet-linked-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(240px, 0.8fr);
    gap: 12px;
}

.wallet-address-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(125, 211, 252, 0.08), rgba(255, 255, 255, 0.018)),
        rgba(0, 0, 0, 0.22);
}

.wallet-orb {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    border: 1px solid rgba(125, 211, 252, 0.24);
    background:
        radial-gradient(circle at 35% 25%, rgba(125, 211, 252, 0.32), rgba(0, 217, 255, 0.1) 45%, rgba(0, 0, 0, 0.24) 100%);
    box-shadow:
        inset 0 0 22px rgba(0, 217, 255, 0.12),
        0 14px 28px rgba(0, 0, 0, 0.28);
}

.wallet-orb::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px solid rgba(230, 169, 87, 0.18);
    opacity: 0.72;
}

.wallet-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(125, 211, 252, 0.3));
}

.wallet-address-block {
    min-width: 0;
}

.wallet-address {
    font-family: var(--o-mono, monospace);
    font-size: clamp(0.95rem, 1.8vw, 1.18rem);
    color: var(--mm-text, #f2f3ff);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.wallet-chain {
    color: rgba(230, 169, 87, 0.82);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.wallet-address-full {
    margin-top: 0.32rem;
    font-family: var(--o-mono, monospace);
    font-size: 0.73rem;
    color: rgba(196, 215, 230, 0.58);
    line-height: 1.45;
    word-break: break-all;
}

.wallet-status-grid,
.wallet-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.wallet-meta-card,
.wallet-meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.34rem;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(230, 169, 87, 0.14);
    border-radius: 14px;
    background: rgba(230, 169, 87, 0.055);
}

.wallet-meta-label {
    color: rgba(230, 169, 87, 0.72);
    font-family: var(--o-mono, monospace);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.wallet-meta-value {
    max-width: 100%;
    color: rgba(235, 238, 255, 0.86);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}

.wallet-note {
    margin: 14px 0 0;
    padding: 11px 12px;
    border-left: 2px solid rgba(125, 211, 252, 0.34);
    background: rgba(125, 211, 252, 0.055);
    color: rgba(196, 215, 230, 0.76);
    font-size: 0.78rem;
    line-height: 1.5;
}

.wallet-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 14px;
}

.wallet-actions--linked {
    grid-template-columns: minmax(0, 1fr) minmax(116px, auto) minmax(96px, auto);
}

.btn-wallet-copy,
.btn-wallet-export,
.btn-wallet-disconnect,
.btn-wallet-connect {
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    background:
        linear-gradient(180deg, rgba(125, 211, 252, 0.1), rgba(0, 217, 255, 0.045)),
        rgba(0, 0, 0, 0.28);
    color: var(--mm-text, #f2f3ff);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.btn-wallet-copy:hover,
.btn-wallet-export:hover,
.btn-wallet-disconnect:hover,
.btn-wallet-connect:hover {
    background:
        linear-gradient(180deg, rgba(125, 211, 252, 0.18), rgba(0, 217, 255, 0.08)),
        rgba(0, 0, 0, 0.2);
    border-color: rgba(125, 211, 252, 0.46);
    box-shadow: 0 0 28px rgba(0, 217, 255, 0.1);
    transform: translateY(-1px);
}

.btn-wallet-copy {
    width: 100%;
}

.btn-wallet-export {
    width: 100%;
    border-color: rgba(230, 169, 87, 0.34);
    background: rgba(230, 169, 87, 0.1);
    color: rgba(255, 219, 161, 0.95);
}

.btn-wallet-export:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.wallet-export-status {
    min-height: 1.1em;
    margin-top: 9px;
    color: rgba(255, 219, 161, 0.86);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.btn-wallet-connect {
    width: 100%;
    background:
        linear-gradient(180deg, rgba(230, 169, 87, 0.22), rgba(230, 169, 87, 0.08)),
        rgba(0, 0, 0, 0.28);
    border-color: rgba(230, 169, 87, 0.36);
    color: #ffe0a8;
}

.wallet-card > .btn-wallet-connect {
    margin-top: 14px;
}

.btn-wallet-disconnect {
    width: 100%;
    border-color: rgba(255, 110, 110, 0.25);
    background: rgba(255, 110, 110, 0.1);
    color: rgba(255, 184, 184, 0.95);
}

.btn-wallet-disconnect:hover {
    background: rgba(255, 110, 110, 0.18);
    border-color: rgba(255, 110, 110, 0.4);
}

.wallet-prompt {
    padding: 16px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--mm-text-secondary, rgba(235, 238, 255, 0.88));
    font-family: var(--o-mono, monospace);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.45;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.wallet-card--linked {
    border-color: rgba(0, 217, 255, 0.32);
    background:
        radial-gradient(circle at 8% 0%, rgba(0, 217, 255, 0.18), transparent 32%),
        radial-gradient(circle at 92% 14%, rgba(68, 255, 143, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(5, 25, 29, 0.98), rgba(6, 15, 22, 0.98) 55%, rgba(20, 15, 10, 0.93));
}

.wallet-card--link-banner {
    border-color: rgba(230, 169, 87, 0.38);
    background:
        radial-gradient(circle at 10% 0%, rgba(230, 169, 87, 0.16), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(0, 217, 255, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(25, 17, 8, 0.96), rgba(9, 15, 21, 0.98));
}

.wallet-card--link-banner .wallet-prompt {
    color: var(--mm-text, #f2f3ff);
}

.wallet-card .wallet-managed-chip {
    min-height: 42px;
    border-radius: 12px;
    border-color: rgba(68, 255, 143, 0.3);
    color: #9dffba;
    background:
        linear-gradient(180deg, rgba(68, 255, 143, 0.13), rgba(0, 217, 255, 0.05)),
        rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 0 18px rgba(68, 255, 143, 0.08);
}

.staking-profile-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(93, 244, 182, 0.24);
    background:
        linear-gradient(135deg, rgba(5, 20, 18, 0.96), rgba(9, 12, 18, 0.98) 56%, rgba(28, 22, 11, 0.92));
}
.staking-profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(93, 244, 182, 0.07), transparent) 0 0 / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px);
}
.staking-profile-card > * {
    position: relative;
    z-index: 1;
}
.staking-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.staking-profile-kicker {
    color: rgba(93, 244, 182, 0.76);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.staking-profile-title {
    margin-top: 5px;
    color: var(--mm-text, #f2f3ff);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.staking-profile-chip {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid rgba(242, 205, 117, 0.3);
    background: rgba(242, 205, 117, 0.1);
    color: #ffe3a4;
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.staking-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.staking-profile-meta {
    min-width: 0;
    min-height: 70px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.24);
}
.staking-profile-meta span {
    display: block;
    color: rgba(214, 230, 220, 0.66);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.staking-profile-meta strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.staking-profile-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 2px solid rgba(93, 244, 182, 0.36);
    background: rgba(93, 244, 182, 0.055);
    color: rgba(229, 238, 232, 0.76);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.staking-profile-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.btn-staking-open,
.btn-staking-streamflow,
.btn-staking-refresh {
    min-height: 40px;
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    border: 1px solid rgba(93, 244, 182, 0.3);
    background: rgba(93, 244, 182, 0.12);
    color: #d8ffe9;
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.btn-staking-refresh {
    border-color: rgba(242, 205, 117, 0.3);
    background: rgba(242, 205, 117, 0.1);
    color: #ffe3a4;
}
.btn-staking-streamflow {
    border-color: rgba(93, 213, 244, 0.34);
    background: rgba(93, 213, 244, 0.12);
    color: #d7f7ff;
}
.btn-staking-open:hover,
.btn-staking-streamflow:hover,
.btn-staking-refresh:hover,
.btn-staking-open:focus-visible,
.btn-staking-streamflow:focus-visible,
.btn-staking-refresh:focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(93, 244, 182, 0.54);
}

@media (max-width: 820px) {
    .wallet-linked-layout {
        grid-template-columns: 1fr;
    }

    .wallet-actions,
    .staking-profile-actions {
        grid-template-columns: 1fr;
    }

    .staking-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wallet-card .wallet-managed-chip {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .wallet-card {
        padding: 14px;
        border-radius: 16px;
    }

    .wallet-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallet-chip {
        align-self: flex-start;
    }

    .wallet-address-row {
        align-items: flex-start;
        padding: 12px;
    }

    .wallet-orb {
        width: 46px;
        height: 46px;
    }

    .btn-wallet-copy,
    .btn-wallet-export,
    .btn-wallet-disconnect,
    .btn-wallet-connect,
    .btn-staking-open,
    .btn-staking-streamflow,
    .btn-staking-refresh {
        width: 100%;
        flex-basis: 100%;
    }
}

/* ── Social Tab: Group & Friends List ─────────────── */
.mm-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.06);
}

.mm-social-row:last-child {
    border-bottom: none;
}

.mm-social-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mm-dot-online {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.mm-dot-offline {
    background: rgba(150, 150, 170, 0.35);
}

.mm-social-name {
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    color: rgba(210, 200, 230, 0.85);
    letter-spacing: 0.5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-social-badge {
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.mm-badge-leader {
    background: rgba(108, 63, 255, 0.2);
    color: rgba(168, 132, 255, 0.9);
    border: 1px solid rgba(108, 63, 255, 0.3);
}

/* ── Friend Search Bar ────────────────────────── */
.mm-friend-search {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.mm-search-input {
    flex: 1;
    background: rgba(108, 63, 255, 0.06);
    border: 1px solid rgba(108, 63, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(220, 210, 240, 0.9);
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    outline: none;
    transition: border-color 0.2s;
}

.mm-search-input::placeholder {
    color: rgba(150, 140, 180, 0.5);
}

.mm-search-input:focus {
    border-color: rgba(108, 63, 255, 0.5);
}

.mm-search-btn {
    background: rgba(108, 63, 255, 0.2);
    border: 1px solid rgba(108, 63, 255, 0.35);
    border-radius: 8px;
    padding: 8px 16px;
    color: rgba(168, 132, 255, 0.9);
    font-family: 'Courier New', monospace;
    font-size: 0.75em;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mm-search-btn:hover {
    background: rgba(108, 63, 255, 0.35);
}

/* Friend row with message + remove actions */
.mm-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s;
}

.mm-social-row:hover {
    background: rgba(108, 63, 255, 0.05);
}

.mm-social-row:last-child { border-bottom: none; }

.mm-social-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.mm-social-action-btn {
    background: rgba(108, 63, 255, 0.1);
    border: 1px solid rgba(108, 63, 255, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    color: rgba(168, 132, 255, 0.8);
    font-family: 'Courier New', monospace;
    font-size: 0.65em;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

.mm-social-action-btn:hover {
    background: rgba(108, 63, 255, 0.25);
}

.mm-social-action-btn.mm-btn-remove {
    color: rgba(240, 120, 120, 0.7);
    border-color: rgba(240, 120, 120, 0.15);
    background: rgba(240, 120, 120, 0.05);
}

.mm-social-action-btn.mm-btn-remove:hover {
    background: rgba(240, 120, 120, 0.15);
}

/* ── Leaderboard List ──────────────────────────── */
.mm-lb-list {
    font-family: 'Courier New', monospace;
}

.mm-lb-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.06);
    font-size: 0.75em;
}

.mm-lb-entry:last-child { border-bottom: none; }

.mm-lb-pos {
    width: 20px;
    text-align: center;
    font-weight: bold;
    color: rgba(150, 140, 180, 0.6);
}

.mm-lb-entry:nth-child(1) .mm-lb-pos { color: #ffd700; }
.mm-lb-entry:nth-child(2) .mm-lb-pos { color: #c0c0c0; }
.mm-lb-entry:nth-child(3) .mm-lb-pos { color: #cd7f32; }

.mm-lb-player {
    flex: 1;
    color: rgba(210, 200, 230, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-lb-player.mm-lb-online { color: #34d399; }

.mm-lb-stat {
    color: rgba(168, 132, 255, 0.7);
    font-size: 0.9em;
    white-space: nowrap;
}

.mm-lb-detail {
    width: 38px;
    text-align: center;
    color: rgba(168, 132, 255, 0.6);
    font-size: 0.85em;
    flex-shrink: 0;
}

.mm-lb-header-row {
    border-bottom: 1px solid rgba(108, 63, 255, 0.15);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.mm-lb-header-row .mm-lb-pos,
.mm-lb-header-row .mm-lb-player,
.mm-lb-header-row .mm-lb-detail {
    color: rgba(150, 140, 180, 0.45);
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* ── Season Pass — Premium Redesign ── */

.mm-sp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.12), rgba(167, 139, 250, 0.06));
    border: 1px solid rgba(108, 63, 255, 0.2);
    border-radius: 10px;
}

.mm-sp-tier {
    font-size: 1.1em;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--mm-accent-light, #a78bfa);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(108, 63, 255, 0.4);
}

.mm-sp-xp {
    font-size: 0.75em;
    color: var(--mm-text-secondary, rgba(200, 195, 220, 0.75));
    letter-spacing: 1px;
}

.mm-sp-bar {
    height: 10px;
    background: rgba(108, 63, 255, 0.08);
    border-radius: 5px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(108, 63, 255, 0.12);
    position: relative;
}

.mm-sp-fill {
    height: 100%;
    background: linear-gradient(90deg, #6c3fff, #a78bfa, #c4b5fd);
    border-radius: 5px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 12px rgba(108, 63, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mm-sp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    animation: spShimmer 2s ease-in-out infinite;
}

@keyframes spShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ── Battle Pass — Main Menu Paginated Track ── */
.mm-bp-track {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}
.mm-bp-nav {
    width: 32px;
    height: 64px;
    border: 1px solid rgba(108,63,255,0.2);
    background: rgba(108,63,255,0.06);
    color: rgba(167,139,250,0.8);
    border-radius: 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    user-select: none;
}
.mm-bp-nav:hover:not(:disabled) { background: rgba(108,63,255,0.15); color: #fff; }
.mm-bp-nav:disabled { opacity: 0.2; cursor: default; }

.mm-bp-cards {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mm-bp-page-indicator {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: rgba(167,139,250,0.5);
    letter-spacing: 2px;
    padding: 4px 0 2px;
}

.mm-bp-guide-note {
    max-width: 720px;
    margin: 6px auto 0;
    color: rgba(200, 195, 220, 0.66);
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

/* Individual card */
.mm-bp-card {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid;
    border-radius: 12px;
    padding: 12px 6px 10px;
    position: relative;
    transition: all 0.25s ease;
    cursor: default;
}
.mm-bp-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

/* Milestone — larger */
.mm-bp-milestone { width: 118px; padding: 14px 8px 12px; }
.mm-bp-milestone .mm-bp-icon-wrap { width: 52px; height: 52px; }
.mm-bp-milestone .mm-bp-tier-badge { font-size: 13px; padding: 2px 12px; }

/* Tier badge */
.mm-bp-tier-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8,6,20,0.95);
    border: 1px solid;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

/* Icon */
.mm-bp-icon-wrap { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-top: 10px; margin-bottom: 6px; }
.mm-bp-icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255,255,255,0.1)); }
.mm-bp-icon-text { font-size: 16px; font-weight: 900; }

/* Item info */
.mm-bp-item-info { text-align: center; display: flex; flex-direction: column; gap: 1px; }
.mm-bp-rarity { font-size: 7px; font-weight: 800; letter-spacing: 1.5px; }
.mm-bp-name { font-size: 9px; color: rgba(220,220,240,0.85); line-height: 1.2; }

/* SILHOUETTE — locked items */
.mm-bp-silhouette .mm-bp-icon { filter: brightness(0) saturate(0) opacity(0.25) drop-shadow(0 0 2px rgba(255,255,255,0.05)); }
.mm-bp-silhouette .mm-bp-icon-text { color: rgba(40,40,60,0.5) !important; }
.mm-bp-info-hidden { opacity: 0; transition: opacity 0.2s; }
.mm-bp-silhouette:hover .mm-bp-info-hidden { opacity: 0.7; }
.mm-bp-silhouette .mm-bp-rarity { color: rgba(100,100,120,0.5) !important; }
.mm-bp-silhouette .mm-bp-name { color: rgba(140,140,160,0.5); }
.mm-bp-silhouette .mm-bp-tier-badge { color: rgba(80,80,100,0.5) !important; border-color: rgba(50,50,70,0.4) !important; }

/* Keep old classes for backward compat but unused now */
.mm-sp-current .sp-reward-label {
    color: var(--mm-text);
    font-weight: bold;
}

/* Premium reward indicator */
.mm-sp-premium {
    border-color: rgba(240, 208, 96, 0.3);
    background: linear-gradient(165deg, rgba(240, 208, 96, 0.08), rgba(240, 208, 96, 0.02));
}

.mm-sp-premium .sp-tier-num {
    color: rgba(240, 208, 96, 0.6);
}

.mm-sp-premium:hover {
    border-color: rgba(240, 208, 96, 0.5);
    background: rgba(240, 208, 96, 0.12);
    box-shadow: 0 4px 12px rgba(240, 208, 96, 0.1);
}

/* ── Gacha Recent Wins (Loot Tab) ── */
.mm-gacha-wins-grid {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(117, 230, 255, 0.38) rgba(255, 255, 255, 0.06);
}

.mm-gacha-wins-grid::-webkit-scrollbar {
    height: 7px;
}

.mm-gacha-wins-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
}

.mm-gacha-wins-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(117, 230, 255, 0.34), rgba(255, 226, 139, 0.34));
    border-radius: 999px;
}

.mm-gacha-win {
    --win-color: rgba(170, 170, 170, 0.9);
    --win-bg: rgba(45, 45, 48, 0.96);
    border: 1px solid;
    border-radius: 14px;
    min-width: clamp(194px, 20vw, 248px);
    min-height: 82px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--win-color);
    background:
        radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--win-color) 30%, transparent), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.02) 48%, rgba(0, 0, 0, 0.18)),
        var(--win-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 26px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--win-color) 18%, transparent);
    scroll-snap-align: start;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#startup-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    --oa-bg: #050507;
    --oa-bg-1: #0a0a0d;
    --oa-line: rgba(255, 255, 255, 0.08);
    --oa-text: #f0efec;
    --oa-text-3: rgba(240, 239, 236, 0.38);
    --oa-cyan: #00d9ff;
    --oa-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    --oa-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    background:
        radial-gradient(ellipse 60% 90% at 30% -10%, rgba(0, 217, 255, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at 75% -5%, rgba(108, 63, 255, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 70% 60% at 80% 105%, rgba(108, 63, 255, 0.08) 0%, transparent 65%),
        var(--oa-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 420ms ease, visibility 0s linear 420ms;
}

body.orbryn-immersive-boot #startup-overlay {
    display: flex;
}

body:not(.orbryn-immersive-boot) #startup-overlay {
    display: none;
}

#startup-overlay.startup-overlay-exit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.startup-overlay-panel {
    width: min(620px, calc(100vw - 48px));
    min-width: 0;
    padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 42px);
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    animation: oaPanelEnter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.startup-overlay-kicker {
    display: none;
}

.startup-overlay-title {
    margin: 0;
    padding-left: 14px;
    color: var(--oa-text);
    font-family: var(--oa-sans);
    font-size: clamp(1.75rem, 5vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: clamp(0.18em, 1.4vw, 0.34em);
    text-transform: uppercase;
    position: relative;
}

.startup-overlay-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--oa-cyan);
    animation: oaTickPulse 1.4s ease-in-out infinite;
}

.startup-overlay-title::after {
    content: 'BOOT SEQUENCE';
    display: block;
    margin-top: 20px;
    color: var(--oa-cyan);
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3em;
}

.startup-overlay-detail {
    margin: 20px 0 0;
    max-width: 38rem;
    padding-left: 20px;
    color: rgba(240, 239, 236, 0.56);
    font-family: var(--oa-mono);
    font-size: clamp(10px, 1.1vw, 12px);
    line-height: 1.7;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    position: relative;
}

.startup-overlay-detail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 12px;
    height: 1px;
    background: var(--oa-text-3);
}

.startup-overlay-progress {
    position: relative;
    margin: clamp(28px, 5vw, 42px) 0 18px;
    width: 100%;
    height: 3px;
    border: 1px solid var(--oa-line);
    border-radius: 0;
    overflow: hidden;
    background: var(--oa-bg-1);
}

.startup-overlay-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.45) 45%, rgba(0, 217, 255, 0.85) 50%, rgba(0, 217, 255, 0.45) 55%, transparent 100%);
    transform: translateX(-100%);
    animation: oaLoadingScan 1.8s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

.startup-overlay-progress-bar {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: 0;
    background: var(--oa-cyan);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
    transition: width 360ms ease;
}

.startup-overlay-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.startup-overlay-steps li {
    position: relative;
    min-height: 48px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(240, 239, 236, 0.34);
    font-family: var(--oa-mono);
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.startup-overlay-steps li::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.18);
}

.startup-overlay-steps li.is-complete {
    color: rgba(240, 239, 236, 0.58);
    border-top-color: rgba(0, 217, 255, 0.34);
}

.startup-overlay-steps li.is-complete::before,
.startup-overlay-steps li.is-active::before {
    background: var(--oa-cyan);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.7);
}

.startup-overlay-steps li.is-active {
    color: var(--oa-cyan);
    border-top-color: rgba(0, 217, 255, 0.72);
}

@media (max-width: 480px) {
    .startup-overlay-panel {
        min-width: 0;
        width: calc(100vw - 28px);
        padding: 34px 8px;
    }

    .startup-overlay-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .startup-overlay-steps li {
        min-height: 0;
        padding: 8px 0 8px 18px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .startup-overlay-steps li::before {
        top: 12px;
        left: -3px;
    }
}

.mm-gacha-win::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--win-color), transparent);
    opacity: 0.62;
}

.mm-gacha-win-sheen {
    position: absolute;
    inset: -40% 35% auto -15%;
    height: 140%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    opacity: 0.22;
    pointer-events: none;
}

.mm-gacha-win-icon-frame {
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--win-color) 35%, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--win-color) 22%, transparent), transparent 66%),
        rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mm-gacha-win:hover:not(.mm-gacha-claimed) {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--win-color) 82%, white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.34),
        0 0 24px color-mix(in srgb, var(--win-color) 22%, transparent);
}

.mm-gacha-win-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--win-color) 34%, transparent));
}
.mm-gacha-win-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mm-gacha-win .win-rarity {
    font-size: 0.56em;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
}

.mm-gacha-win .win-label {
    font-size: 0.82em;
    font-weight: 800;
    line-height: 1.18;
    color: rgba(248, 250, 255, 0.92) !important;
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

.mm-gacha-win .win-status {
    width: max-content;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--win-color) 28%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--win-color) 68%, white);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.52em;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1;
    text-transform: uppercase;
}

.mm-gacha-claimed {
    opacity: 0.72;
    pointer-events: none;
}

.mm-gacha-queued {
    cursor: pointer;
    opacity: 0.88;
}

.mm-gacha-queued::after {
    content: 'HELD';
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 205, 102, 0.34);
    border-radius: 999px;
    background: rgba(255, 205, 102, 0.1);
    font-size: 0.55em;
    font-weight: bold;
    letter-spacing: 1.6px;
    color: rgba(255, 224, 153, 0.9);
}

.mm-gacha-queued .win-status {
    border-color: rgba(255, 205, 102, 0.34);
    color: rgba(255, 224, 153, 0.9);
}

.mm-gacha-claimed::after {
    content: 'DELIVERED';
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 6px;
    border: 1px solid rgba(125, 255, 156, 0.32);
    border-radius: 999px;
    background: rgba(125, 255, 156, 0.09);
    font-size: 0.55em;
    font-weight: bold;
    letter-spacing: 1.6px;
    color: rgba(125, 255, 156, 0.86);
}

/* ── Messages Overlay ──────────────────────────── */
/* Messages screen (full-page, replaces old overlay) */
#messages-screen {
    overflow-y: hidden;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.msg-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.msg-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: rgba(14, 10, 32, 0.98);
    border-bottom: 1px solid rgba(108, 63, 255, 0.2);
    flex-shrink: 0;
}

.msg-page-back {
    background: none;
    border: none;
    color: rgba(210, 200, 230, 0.7);
    font-size: 1.4em;
    cursor: pointer;
    padding: 4px 8px;
    -webkit-tap-highlight-color: transparent;
}
.msg-page-back:hover { color: rgba(168, 132, 255, 0.9); }

.msg-page-title {
    font-family: 'Courier New', monospace;
    font-size: 1em;
    letter-spacing: 3px;
    color: rgba(168, 132, 255, 0.9);
    text-transform: uppercase;
}

.msg-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* Thread list */
.msg-thread-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.08);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
}

.msg-thread-row:hover { background: rgba(108, 63, 255, 0.06); }

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.3), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(108, 63, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    font-weight: bold;
    color: rgba(200, 180, 255, 0.9);
    flex-shrink: 0;
}

.msg-avatar-sm { width: 32px; height: 32px; font-size: 0.85em; }

.msg-thread-info { flex: 1; min-width: 0; }

.msg-thread-name {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: rgba(220, 210, 240, 0.9);
    font-weight: bold;
}

.msg-thread-preview {
    font-size: 0.7em;
    color: rgba(150, 140, 180, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.msg-thread-time {
    font-size: 0.65em;
    color: rgba(150, 140, 180, 0.4);
    flex-shrink: 0;
}

/* Message detail */
.msg-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.msg-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(108, 63, 255, 0.12);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.msg-back-btn {
    background: none;
    border: none;
    color: rgba(168, 132, 255, 0.8);
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px 8px;
}

.msg-detail-name {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: rgba(220, 210, 240, 0.9);
    flex: 1;
}

.msg-remove-btn {
    background: none;
    border: none;
    color: rgba(240, 120, 120, 0.5);
    font-size: 1em;
    cursor: pointer;
    padding: 4px 8px;
}

.msg-remove-btn:hover { color: rgba(240, 120, 120, 0.9); }

/* Chat bubbles */
.msg-bubbles {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.msg-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.82em;
    line-height: 1.4;
    word-wrap: break-word;
    position: relative;
}

.msg-bubble-mine {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.35), rgba(139, 92, 246, 0.25));
    border: 1px solid rgba(108, 63, 255, 0.2);
    border-bottom-right-radius: 6px;
    color: rgba(230, 220, 255, 0.95);
}

.msg-bubble-theirs {
    align-self: flex-start;
    background: rgba(30, 25, 55, 0.8);
    border: 1px solid rgba(108, 63, 255, 0.1);
    border-bottom-left-radius: 6px;
    color: rgba(210, 200, 230, 0.85);
}

.msg-bubble-text { margin-bottom: 2px; }

.msg-bubble-time {
    font-size: 0.7em;
    color: rgba(150, 140, 180, 0.4);
    text-align: right;
}

.msg-input-bar {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid rgba(108, 63, 255, 0.12);
    flex-shrink: 0;
}

.msg-input {
    flex: 1;
    background: rgba(108, 63, 255, 0.06);
    border: 1px solid rgba(108, 63, 255, 0.2);
    border-radius: 20px;
    padding: 10px 16px;
    color: rgba(220, 210, 240, 0.9);
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    outline: none;
}

.msg-input:focus { border-color: rgba(108, 63, 255, 0.5); }
.msg-input::placeholder { color: rgba(150, 140, 180, 0.4); }

.msg-send-btn {
    background: linear-gradient(135deg, rgba(108, 63, 255, 0.3), rgba(139, 92, 246, 0.25));
    border: 1px solid rgba(108, 63, 255, 0.35);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: rgba(200, 180, 255, 0.9);
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.msg-send-btn:hover { background: rgba(108, 63, 255, 0.45); }

.msg-loading, .msg-empty, .msg-empty-chat {
    text-align: center;
    color: rgba(150, 140, 180, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    padding: 24px 0;
}

.msg-empty-title {
    color: rgba(180, 170, 210, 0.7);
    font-size: 0.9em;
    margin-bottom: 4px;
}

.msg-empty-sub { font-size: 0.75em; }

/* Notification toast */
.msg-notification {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: min(380px, calc(100vw - 32px));
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.09), transparent 62%),
        rgba(6, 8, 10, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 2px solid rgba(0, 217, 255, 0.62);
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99997;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translate3d(12px, -6px, 0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.msg-notif-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.msg-notif-avatar {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-weight: bold;
    color: #8ff0ff;
    flex-shrink: 0;
}

.msg-notif-content { flex: 1; min-width: 0; }

.msg-notif-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 11px;
    color: #8ff0ff;
    font-weight: 800;
    letter-spacing: 0;
}

.msg-notif-text {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(240, 239, 236, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer badge */
.mm-drawer-badge {
    background: rgba(108, 63, 255, 0.7);
    color: #fff;
    font-size: 0.6em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
}

/* ================================================================
   Gamepad Controller Support
   ================================================================ */

/* Interface Wheel */
.interface-wheel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 360px;
    height: 360px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    color: #e9fcff;
    font-family: 'Courier New', monospace;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.interface-wheel.wheel-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.interface-wheel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 318px;
    height: 318px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 48%, rgba(8, 28, 42, 0.96) 0%, rgba(4, 10, 18, 0.98) 54%, rgba(3, 6, 12, 0.98) 100%),
        conic-gradient(from -90deg, rgba(0, 217, 255, 0.36), rgba(230, 169, 87, 0.20), rgba(0, 217, 255, 0.28), rgba(68, 255, 143, 0.14), rgba(0, 217, 255, 0.36));
    border: 1px solid rgba(95, 230, 255, 0.42);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.52),
        0 0 38px rgba(0, 217, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 42px rgba(0, 217, 255, 0.05);
}
.interface-wheel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 194px;
    height: 194px;
    border-radius: 50%;
    border: 1px solid rgba(230, 169, 87, 0.18);
    background:
        linear-gradient(rgba(0, 217, 255, 0.18), rgba(0, 217, 255, 0.18)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(90deg, rgba(0, 217, 255, 0.16), rgba(0, 217, 255, 0.16)) 0 50% / 100% 1px no-repeat;
    opacity: 0.54;
}
.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    padding: 12px 10px;
    border: 1px solid rgba(95, 230, 255, 0.35);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 24%, rgba(0, 217, 255, 0.14), transparent 46%),
        linear-gradient(180deg, rgba(6, 18, 30, 0.96), rgba(3, 8, 15, 0.96));
    box-shadow:
        0 0 22px rgba(0, 217, 255, 0.13),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    text-align: center;
}
.wheel-center-kicker,
.wheel-center-hint {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(174, 235, 240, 0.62);
}
.wheel-center-label {
    max-width: 98px;
    overflow: hidden;
    color: #f8fbff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.48);
    text-transform: uppercase;
    white-space: nowrap;
}
.wheel-center-label:empty::before {
    content: 'SELECT';
    color: rgba(248, 251, 255, 0.78);
}
.wheel-item {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 84px;
    height: 66px;
    border: 1px solid rgba(95, 230, 255, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(8, 25, 36, 0.94), rgba(4, 11, 20, 0.96));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.wheel-item.wheel-selected {
    transform: translateY(-2px) scale(1.08);
    border-color: rgba(230, 169, 87, 0.86);
    background:
        linear-gradient(180deg, rgba(19, 45, 54, 0.98), rgba(8, 18, 27, 0.98));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 217, 255, 0.26),
        0 0 12px rgba(230, 169, 87, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wheel-icon {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(95, 230, 255, 0.26);
    border-radius: 4px;
    background: rgba(0, 217, 255, 0.08);
    color: rgba(149, 240, 255, 0.92);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}
.wheel-item.wheel-selected .wheel-icon {
    border-color: rgba(230, 169, 87, 0.82);
    background: rgba(230, 169, 87, 0.14);
    color: #ffd68a;
}
.wheel-label {
    max-width: 72px;
    overflow: hidden;
    color: rgba(218, 247, 252, 0.74);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.wheel-item.wheel-selected .wheel-label {
    color: #fff7e8;
}

/* Gamepad hotbar selection */
.hotbar-gp-selected {
    outline: 2px solid var(--accent, #6c3fff);
    outline-offset: 2px;
}

/* OTS aiming reticle - same minimal shape as touch aiming. */
.ots-crosshair {
    position: fixed;
    width: 24px;
    height: 24px;
    z-index: 900;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.42));
}
.ots-cross-ring {
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(0, 217, 255, 0.74);
    border-radius: 50%;
    background:
        linear-gradient(rgba(0, 217, 255, 0.9), rgba(0, 217, 255, 0.9)) 50% -1px / 1px 5px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.68), rgba(0, 217, 255, 0.68)) 50% calc(100% + 1px) / 1px 5px no-repeat,
        linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) -1px 50% / 5px 1px no-repeat,
        linear-gradient(90deg, rgba(0, 217, 255, 0.82), rgba(0, 217, 255, 0.82)) calc(100% + 1px) 50% / 5px 1px no-repeat;
    box-shadow: 0 0 7px rgba(0, 217, 255, 0.22);
}
.ots-cross-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(230, 169, 87, 0.5);
    border-radius: 50%;
}
.ots-cross-h,
.ots-cross-v {
    display: none;
}
.ots-cross-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e9fbff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 5px rgba(233, 251, 255, 0.92),
        0 0 10px rgba(0, 217, 255, 0.52);
}

/* Input source switching */
.input-keyboard .gp-prompt { display: none !important; }
.input-gamepad .kb-prompt { display: none !important; }
.input-gamepad,
.input-gamepad *,
.input-gamepad canvas,
.input-gamepad #game-container,
.input-gamepad #hud { cursor: none !important; }

/* Controller button glyphs */
.gp-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    margin: 0 2px;
}
.gp-glyph-a { background: #107c10; color: #fff; }
.gp-glyph-b { background: #e81123; color: #fff; }
.gp-glyph-x { background: #0078d7; color: #fff; }
.gp-glyph-y { background: #ffb900; color: #1a1a1a; }
.gp-glyph-ps-cross { background: #2f6dff; color: #fff; }
.gp-glyph-ps-circle { background: #e84a5f; color: #fff; }
.gp-glyph-ps-square { background: #cc5bff; color: #fff; }
.gp-glyph-ps-triangle { background: #2fc96b; color: #06220f; }
.gp-glyph-lb, .gp-glyph-rb, .gp-glyph-lt, .gp-glyph-rt,
.gp-glyph-l1, .gp-glyph-r1, .gp-glyph-l2, .gp-glyph-r2 {
    border-radius: 4px;
    background: #333;
    color: #ccc;
    font-size: 10px;
    width: auto;
    padding: 2px 6px;
}
.gp-glyph-dpad {
    background: #222;
    color: #ccc;
    border-radius: 4px;
    font-size: 10px;
    width: auto;
    padding: 2px 6px;
}

/* TTS settings section */
.tts-settings {
    padding: 8px 12px;
    border-top: 1px solid rgba(108, 63, 255, 0.2);
    margin-top: 8px;
}
.tts-settings h4 {
    color: var(--accent, #6c3fff);
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tts-settings .settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
}
.tts-settings .settings-toggle input[type="checkbox"] {
    accent-color: var(--accent, #6c3fff);
}

/* Controller settings section */
.controller-settings {
    padding: 8px 12px;
    border-top: 1px solid rgba(108, 63, 255, 0.2);
    margin-top: 8px;
}
.controller-settings h4 {
    color: var(--accent, #6c3fff);
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.controller-settings label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #ccc;
}
.controller-settings input[type="range"] {
    flex: 1;
    accent-color: var(--accent, #6c3fff);
}
.controller-settings input[type="checkbox"] {
    accent-color: var(--accent, #6c3fff);
}

/* Gamepad cursor hover highlight */
.gamepad-hover {
    outline: 2px solid rgba(108, 63, 255, 0.6) !important;
    outline-offset: 2px;
    transition: outline-color 0.15s;
}
/* Gamepad "held" item — picked up, waiting to place */
.gp-held {
    outline: 2px solid rgba(74, 224, 74, 0.8) !important;
    outline-offset: 2px;
    opacity: 0.6;
    transform: scale(0.92);
    transition: opacity 0.15s, transform 0.15s;
}

/* ═══════════════════════════════════════════════════════════
   STORE OVERLAY
   ═══════════════════════════════════════════════════════════ */

/* Main Menu Store Card */
.mm-store-card {
    position: relative;
    margin: 12px 0;
    padding: 18px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #120e24 0%, #1e1440 50%, #2a1848 100%);
    border: 1px solid rgba(108, 63, 255, 0.35);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.15s, box-shadow 0.25s;
    box-shadow: 0 2px 12px rgba(108, 63, 255, 0.08);
}
.mm-store-card:hover {
    border-color: rgba(108, 63, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108, 63, 255, 0.2);
}
.mm-store-card:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(108, 63, 255, 0.1); }
.mm-store-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(108, 63, 255, 0.2) 0%, transparent 60%);
    pointer-events: none;
    animation: store-card-shimmer 4s ease-in-out infinite;
}
@keyframes store-card-shimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.mm-store-card-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mm-store-card-badge {
    padding: 5px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent, #6c3fff), #9a5fff);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mm-store-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 12px rgba(108, 63, 255, 0.3);
}
.mm-store-card-sub {
    font-size: 12px;
    color: #aaa;
    flex: 1;
}
.mm-store-card-arrow {
    font-size: 20px;
    color: rgba(108, 63, 255, 0.6);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.mm-store-card:hover .mm-store-card-arrow { transform: translateX(3px); }

.mm-waglet-card {
    position: relative;
    margin: 12px 0;
    padding: 18px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #24111d 0%, #40203b 52%, #5b2c53 100%);
    border: 1px solid rgba(255, 170, 214, 0.34);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.15s, box-shadow 0.25s;
    box-shadow: 0 2px 12px rgba(255, 122, 191, 0.12);
}
.mm-waglet-card:hover {
    border-color: rgba(255, 199, 227, 0.78);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 122, 191, 0.24);
}
.mm-waglet-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 122, 191, 0.16);
}
.mm-waglet-card-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 233, 160, 0.18), transparent 34%),
        radial-gradient(circle at 82% 20%, rgba(255, 170, 214, 0.18), transparent 42%);
    pointer-events: none;
    animation: waglet-card-shimmer 4.4s ease-in-out infinite;
}
@keyframes waglet-card-shimmer {
    0%, 100% { opacity: 0.68; }
    50% { opacity: 1; }
}
.mm-waglet-card-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mm-waglet-card-badge {
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff89ca, #ffb88f);
    color: #fffaf5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.mm-waglet-card-copy {
    min-width: 0;
    flex: 1;
}
.mm-waglet-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff7fb;
    text-shadow: 0 0 12px rgba(255, 170, 214, 0.24);
}
.mm-waglet-card-sub {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 234, 244, 0.74);
    line-height: 1.45;
}
.mm-waglet-card-cta {
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 244, 224, 0.14);
    color: #fff7cf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    flex-shrink: 0;
    transition: transform 0.2s, background 0.2s;
}
.mm-waglet-card:hover .mm-waglet-card-cta {
    transform: translateX(3px);
    background: rgba(255, 244, 224, 0.2);
}
.mm-waglet-owned {
    border-color: rgba(255, 229, 152, 0.46);
    box-shadow: 0 6px 22px rgba(255, 198, 107, 0.18);
}
.mm-waglet-owned .mm-waglet-card-badge {
    background: linear-gradient(135deg, #f5d568, #ffc57a);
    color: #553c00;
}
.mm-waglet-owned .mm-waglet-card-cta {
    background: rgba(255, 220, 133, 0.22);
    color: #fff3c4;
}

.mm-staking-card {
    position: relative;
    margin: 12px 0;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(93, 244, 182, 0.34);
    background:
        linear-gradient(135deg, rgba(7, 27, 24, 0.98) 0%, rgba(11, 20, 30, 0.96) 52%, rgba(38, 28, 12, 0.94) 100%);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.22s, transform 0.15s, box-shadow 0.22s;
    box-shadow: 0 2px 12px rgba(93, 244, 182, 0.1);
}
.mm-staking-card:hover,
.mm-staking-card:focus-visible {
    border-color: rgba(93, 244, 182, 0.72);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(93, 244, 182, 0.18);
    outline: none;
}
.mm-staking-card:active {
    transform: translateY(0);
}
.mm-staking-card-glow {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(93, 244, 182, 0.08) 52%, transparent 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px);
    pointer-events: none;
    opacity: 0.72;
}
.mm-staking-card-content {
    position: relative;
    display: grid;
    gap: 12px;
}
.mm-staking-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mm-staking-card-copy {
    min-width: 0;
}
.mm-staking-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(93, 244, 182, 0.32);
    background: rgba(93, 244, 182, 0.12);
    color: #b8ffdc;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mm-staking-card-title {
    margin-top: 8px;
    color: #f8fff4;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(93, 244, 182, 0.18);
}
.mm-staking-refresh {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid rgba(242, 205, 117, 0.34);
    background: rgba(242, 205, 117, 0.1);
    color: #ffe3a4;
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    cursor: pointer;
}
.mm-staking-refresh:hover,
.mm-staking-refresh:focus-visible {
    border-color: rgba(242, 205, 117, 0.58);
    background: rgba(242, 205, 117, 0.16);
    outline: none;
}
.mm-staking-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mm-staking-metric {
    min-width: 0;
    min-height: 74px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.24);
}
.mm-staking-metric span {
    display: block;
    color: rgba(214, 230, 220, 0.66);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mm-staking-metric strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.mm-staking-status {
    min-height: 20px;
    color: rgba(229, 238, 232, 0.78);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.mm-staking-card-cta {
    justify-self: start;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(93, 244, 182, 0.22);
    background: rgba(93, 244, 182, 0.12);
    color: #d8ffe9;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    transition: transform 0.2s, background 0.2s;
}
.mm-staking-card:hover .mm-staking-card-cta {
    transform: translateX(3px);
    background: rgba(93, 244, 182, 0.18);
}

/* HUD Store Button */
#hud-wallet-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.hud-store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(108, 63, 255, 0.5);
    background: rgba(10, 6, 20, 0.85);
    color: var(--accent, #6c3fff);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
}
.hud-store-btn:hover {
    background: rgba(108, 63, 255, 0.2);
    border-color: var(--accent, #6c3fff);
    box-shadow: 0 0 10px rgba(108, 63, 255, 0.25);
}

/* Store Overlay */
.store-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
}
.store-overlay:not([hidden]) {
    display: flex;
}
.store-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.store-panel {
    position: relative;
    width: 94vw;
    max-width: 680px;
    max-height: 90vh;
    border-radius: 18px;
    background: linear-gradient(180deg, #0f0b1e 0%, #0a0714 100%);
    border: 1px solid rgba(108, 63, 255, 0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(108, 63, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(108, 63, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.store-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(108, 63, 255, 0.3);
}
.store-close-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #aaa;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.store-close-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.store-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,63,255,0.3) transparent;
}
.store-content::-webkit-scrollbar { width: 4px; }
.store-content::-webkit-scrollbar-track { background: transparent; }
.store-content::-webkit-scrollbar-thumb { background: rgba(108,63,255,0.3); border-radius: 4px; }

#start-screen[data-mm] #mm-tab-store.mm-tab-active {
    display: block;
    padding-top: 18px;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 26px 30px;
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-left: 3px solid var(--o-cyan, #00d9ff);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.13), transparent 42%),
        radial-gradient(circle at 88% 18%, rgba(222, 194, 122, 0.15), transparent 30%),
        linear-gradient(135deg, rgba(11, 13, 17, 0.96), rgba(5, 5, 7, 0.96));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-kicker,
#start-screen[data-mm] #mm-tab-store .mm-store-command-copy {
    font-family: var(--o-mono);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-kicker {
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(0, 217, 255, 0.42);
    color: var(--o-cyan, #00d9ff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    background: rgba(0, 217, 255, 0.07);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-title {
    margin-top: 18px;
    font-family: var(--o-sans);
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 850;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--o-text);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-copy {
    max-width: 58ch;
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--o-text-2);
}

#start-screen[data-mm] #mm-tab-store .mm-store-page-content {
    flex: none;
    overflow: visible;
    padding: 0;
    scrollbar-width: auto;
}

#start-screen[data-mm] #mm-tab-store .store-section {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
        rgba(8, 9, 12, 0.92);
}

#start-screen[data-mm] #mm-tab-store .store-bp-card,
#start-screen[data-mm] #mm-tab-store .store-waglet-card,
#start-screen[data-mm] #mm-tab-store .store-pkg-card,
#start-screen[data-mm] #mm-tab-store .store-spin-area,
#start-screen[data-mm] #mm-tab-store .store-rates,
#start-screen[data-mm] #mm-tab-store .store-history-details {
    border-radius: 3px;
}

.wallet-managed-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    color: rgba(125, 255, 156, 0.88);
    background: rgba(0, 217, 255, 0.06);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Early Access Banner */
.store-early-access {
    background: rgba(221, 170, 34, 0.08);
    border: 1px solid rgba(221, 170, 34, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    text-align: center;
}
.store-early-tag {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ddaa22;
    background: rgba(221, 170, 34, 0.12);
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.store-early-text {
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    margin: 6px 0 0;
}

.store-dev-grant-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(0, 217, 255, 0.20);
    border-left: 3px solid #00d9ff;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.09), transparent 48%),
        rgba(4, 11, 17, 0.86);
}

.store-dev-grant-copy {
    min-width: 0;
}

.store-dev-grant-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 4px;
    background: rgba(0, 217, 255, 0.08);
    color: #72e8ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.store-dev-grant-copy p {
    margin: 8px 0 0;
    color: rgba(210, 232, 238, 0.66);
    font-size: 12px;
    line-height: 1.45;
}

.store-dev-grant-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.store-dev-grant-btn {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 8px;
    background: rgba(0, 217, 255, 0.08);
    color: #d7fbff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}

.store-dev-grant-btn:hover:not(:disabled) {
    border-color: rgba(222, 194, 122, 0.46);
    background: rgba(222, 194, 122, 0.14);
    color: #fff3c4;
    transform: translateY(-1px);
}

.store-dev-grant-btn:disabled {
    cursor: default;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(242, 240, 234, 0.36);
}

.store-dev-grant-all {
    border-color: rgba(222, 194, 122, 0.42);
    background: rgba(222, 194, 122, 0.14);
    color: #ffe7a3;
}

/* Battle Pass Card */
.store-bp-card {
    border: 1px solid rgba(108, 63, 255, 0.3);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: rgba(12, 10, 24, 0.9);
    margin-top: 8px;
}
.store-bp-owned { opacity: 0.6; }
.store-bp-hero {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: rgba(20, 15, 40, 1);
}
.store-bp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 10, 24, 0.95) 0%, rgba(12, 10, 24, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    gap: 4px;
}
.store-bp-season {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ddaa22;
}
.store-bp-name {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.store-bp-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Store Sections */
.store-section { margin-bottom: 28px; }
.store-section-title {
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    margin-bottom: 14px;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.store-waglet-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 187, 218, 0.28);
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 225, 154, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(43, 18, 34, 0.95), rgba(78, 30, 64, 0.94) 55%, rgba(96, 42, 82, 0.92));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}
.store-waglet-owned {
    border-color: rgba(255, 222, 128, 0.42);
}
.store-waglet-copy {
    min-width: 0;
}
.store-waglet-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8fcf, #ffc387);
    color: #fff9ef;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 12px;
}
.store-waglet-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff8fb;
}
.store-waglet-description {
    margin: 10px 0 12px;
    color: rgba(255, 236, 244, 0.78);
    line-height: 1.6;
}
.store-waglet-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.store-waglet-note {
    margin: 14px 0 0;
    color: rgba(255, 225, 169, 0.82);
    font-size: 13px;
    line-height: 1.5;
}
.store-waglet-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-width: 180px;
}
.store-waglet-price {
    font-size: 18px;
    font-weight: 900;
    color: #fff5d9;
    text-align: right;
}
.store-waglet-primary {
    width: 100%;
}
.store-waglet-secondary {
    border: 1px solid rgba(255, 223, 171, 0.28);
    border-radius: 10px;
    padding: 10px 14px;
    background: rgba(255, 247, 232, 0.05);
    color: rgba(255, 235, 203, 0.88);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.store-waglet-secondary:hover {
    border-color: rgba(255, 223, 171, 0.48);
    background: rgba(255, 247, 232, 0.09);
    transform: translateY(-1px);
}
.store-waglet-secondary:active {
    transform: translateY(0);
}

/* Package Cards */
.store-pkg-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Package Cards */
.store-pkg-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(12, 10, 24, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.store-pkg-card:hover {
    border-color: rgba(108, 63, 255, 0.4);
    box-shadow: 0 6px 28px rgba(108, 63, 255, 0.12);
    transform: translateY(-2px);
}
.store-pkg-best {
    border-color: rgba(108, 63, 255, 0.5) !important;
    box-shadow: 0 0 24px rgba(108, 63, 255, 0.1);
}
.store-pkg-owned { opacity: 0.5; pointer-events: none; }
.store-pkg-locked { opacity: 0.3; pointer-events: none; }

/* Hero image area */
.store-pkg-hero {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: rgba(20, 15, 40, 1);
}
.store-pkg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 10, 24, 0.95) 0%, rgba(12, 10, 24, 0.4) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    gap: 4px;
}
.store-pkg-name {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.store-pkg-tagline {
    font-size: 12px;
    color: rgba(200, 195, 220, 0.8);
    font-style: italic;
}

/* Body section below hero */
.store-pkg-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.store-pkg-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.store-pkg-chip {
    font-size: 11px;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}
.store-pkg-chip-more {
    color: rgba(168, 140, 255, 0.85);
    border-color: rgba(108, 63, 255, 0.2);
    background: rgba(108, 63, 255, 0.08);
}
.store-pkg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.store-pkg-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent, #6c3fff);
    text-shadow: 0 0 12px rgba(108, 63, 255, 0.2);
}

.store-orbryn-price {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.08;
    color: inherit;
}

.store-orbryn-primary {
    color: #dec27a;
    font-weight: 900;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.store-orbryn-secondary {
    color: rgba(230, 225, 214, 0.58);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0;
    text-shadow: none;
    white-space: nowrap;
}

.store-orbryn-price-loading .store-orbryn-primary,
.store-orbryn-price-pending .store-orbryn-primary,
.store-orbryn-price-error .store-orbryn-primary {
    color: rgba(222, 194, 122, 0.82);
}

/* Store Badges */
.store-badge {
    position: absolute;
    top: 0;
    right: 14px;
    padding: 5px 12px;
    border-radius: 0 0 8px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 2;
}
.store-badge-best {
    background: linear-gradient(135deg, var(--accent, #6c3fff), #9a5fff);
    color: #fff;
    animation: badge-glow 2s ease-in-out infinite;
}
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(108, 63, 255, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(108, 63, 255, 0.6); }
}
.store-badge-owned {
    background: linear-gradient(135deg, #1a5a1a, #2a7a2a);
    color: #8f8;
}
.store-badge-locked {
    background: #444;
    color: #aaa;
}

/* Buy Button */
.store-buy-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
}
.store-buy-btn:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 16px rgba(108, 63, 255, 0.3);
    transform: translateY(-1px);
}
.store-buy-btn:active { transform: scale(0.97); }
.store-buy-btn:disabled {
    background: rgba(60, 60, 80, 0.4);
    color: #666;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Gacha Section */
.store-gacha-hero {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: rgba(20, 15, 40, 1);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.store-gacha-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 10, 24, 0.9) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 14px 16px;
}
.store-gacha-crate-text {
    font-size: 13px;
    color: rgba(220, 210, 240, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}
.store-gacha-buttons {
    display: flex;
    gap: 10px;
    margin: 14px 0;
}
.store-gacha-btn {
    flex: 1;
    padding: 14px 8px;
    border-radius: 12px;
    border: 1px solid rgba(221, 170, 34, 0.3);
    background: linear-gradient(180deg, rgba(221, 170, 34, 0.06) 0%, rgba(221, 170, 34, 0.02) 100%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.store-gacha-btn:hover {
    background: linear-gradient(180deg, rgba(221, 170, 34, 0.15) 0%, rgba(221, 170, 34, 0.04) 100%);
    border-color: rgba(221, 170, 34, 0.6);
    box-shadow: 0 0 16px rgba(221, 170, 34, 0.12);
}
.store-gacha-btn:active { transform: scale(0.97); }
.store-gacha-label {
    font-size: 12px;
    font-weight: 800;
    color: #ddaa22;
    letter-spacing: 0.5px;
}
.store-gacha-price {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 8px rgba(221, 170, 34, 0.2);
}

.store-gacha-price .store-orbryn-price {
    align-items: center;
    text-align: center;
}

.store-gacha-price .store-orbryn-secondary {
    font-size: 9px;
}
.store-gacha-discount {
    font-size: 10px;
    font-weight: 700;
    color: #4ae04a;
    background: rgba(74, 224, 74, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Gacha Spin Area */
.store-spin-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 218, 93, 0.16), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(75, 220, 150, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(28, 23, 12, 0.96), rgba(8, 12, 12, 0.96));
    border: 1px solid rgba(214, 184, 117, 0.34);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, 0.08),
        0 18px 42px rgba(0, 0, 0, 0.24);
}
.store-spin-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.24;
    pointer-events: none;
}
.store-spin-balance {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.store-spin-label {
    font-size: 0.65em;
    letter-spacing: 2px;
    color: rgba(200, 170, 50, 0.6);
    text-transform: uppercase;
}
.store-spin-count {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    color: #ffe28b;
    letter-spacing: 1px;
    line-height: 0.92;
    text-shadow: 0 0 22px rgba(221, 170, 34, 0.34);
}
.store-spin-btn {
    position: relative;
    z-index: 1;
    padding: 13px 34px;
    font-family: 'Courier New', monospace;
    font-size: 0.98em;
    font-weight: 900;
    letter-spacing: 2px;
    color: #080704;
    background: linear-gradient(135deg, #ffe28b, #d6a744 52%, #8b6424);
    border: 1px solid rgba(255, 248, 235, 0.2);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(214, 184, 117, 0.18);
    transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
    text-transform: uppercase;
}
.store-spin-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 18px 40px rgba(214, 184, 117, 0.28);
    transform: translateY(-2px);
}
.store-spin-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    background: rgba(100, 100, 100, 0.25);
    color: rgba(255, 255, 255, 0.48);
    box-shadow: none;
}
.store-gacha-assurance {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(117, 230, 255, 0.14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(117, 230, 255, 0.07), rgba(255, 226, 139, 0.04));
}
.store-gacha-assurance-kicker {
    border-radius: 999px;
    border: 1px solid rgba(117, 230, 255, 0.22);
    background: rgba(117, 230, 255, 0.08);
    padding: 5px 8px;
    color: #75e6ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
}
.store-gacha-assurance-copy {
    color: rgba(235, 228, 214, 0.72);
    font-size: 12px;
    line-height: 1.45;
}

/* Recent Wins Grid */
.store-wins-grid {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(117, 230, 255, 0.36) rgba(255, 255, 255, 0.06);
}

.store-wins-grid::-webkit-scrollbar {
    height: 7px;
}

.store-wins-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
}

.store-wins-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(117, 230, 255, 0.34), rgba(255, 226, 139, 0.34));
    border-radius: 999px;
}

.store-win-item {
    --win-color: rgba(170, 170, 170, 0.9);
    --win-bg: rgba(45, 45, 48, 0.96);
    border: 1px solid;
    border-radius: 14px;
    min-width: clamp(210px, 24vw, 280px);
    min-height: 86px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--win-color);
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--win-color) 26%, transparent), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 48%, rgba(0, 0, 0, 0.18)),
        var(--win-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--win-color) 18%, transparent);
    scroll-snap-align: start;
}

.store-win-item::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--win-color), transparent);
    opacity: 0.62;
}

.store-win-spark {
    position: absolute;
    inset: -36% 34% auto -14%;
    height: 132%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    opacity: 0.2;
    pointer-events: none;
}

.store-win-icon-frame {
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--win-color) 35%, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--win-color) 22%, transparent), transparent 66%),
        rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.store-win-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--win-color) 34%, transparent));
}
.store-win-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.store-win-rarity {
    font-size: 0.55em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
}
.store-win-label {
    font-size: 0.88em;
    font-weight: 800;
    line-height: 1.16;
    color: rgba(248, 250, 255, 0.92);
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

.store-win-meta {
    width: max-content;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--win-color) 28%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--win-color) 68%, white);
    background: rgba(0, 0, 0, 0.2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}

/* Drop Rate Table */
.store-rates {
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.store-rates-title {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.store-rates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.store-rates-table th {
    padding: 6px 8px;
    text-align: left;
    color: #666;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.store-rates-table td {
    padding: 7px 8px;
    color: #bbb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.store-rates-table tr:last-child td { border-bottom: none; }

/* Purchase History */
.store-history-details summary {
    cursor: pointer;
    list-style: none;
}
.store-history-details summary::-webkit-details-marker { display: none; }
.store-history-details summary::after {
    content: 'Hide';
    float: right;
    color: #666;
    font-size: 10px;
    letter-spacing: 1px;
}
.store-history-details:not([open]) summary::after {
    content: 'Show';
}
.store-history-list {
    max-height: 240px;
    margin-top: 8px;
    overflow-y: auto;
    padding-right: 4px;
}
.store-history-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.store-history-date { color: #666; }
.store-history-name { color: #bbb; }
.store-empty { font-size: 12px; color: #555; font-style: italic; }

/* Toast Notification */
.store-toast {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(9, 13, 24, 0.94);
    border: 1px solid rgba(117, 230, 255, 0.34);
    color: rgba(244, 248, 255, 0.94);
    font-size: 13px;
    font-weight: 700;
    z-index: 9500;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(117, 230, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.store-toast::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, transparent, rgba(117, 230, 255, 0.76), transparent);
}

.store-toast-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #75e6ff;
    box-shadow: 0 0 16px rgba(117, 230, 255, 0.7);
    animation: storeToastPulse 1.15s ease-in-out infinite;
}

.store-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.store-toast-title {
    color: rgba(255, 255, 255, 0.96);
    font-size: 13px;
    line-height: 1.15;
}

.store-toast-detail {
    color: rgba(210, 224, 238, 0.72);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.32;
}
.store-toast-warn {
    border-color: rgba(224, 180, 40, 0.5);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(224, 180, 40, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.store-toast-warn::before {
    background: linear-gradient(90deg, transparent, rgba(224, 180, 40, 0.82), transparent);
}
.store-toast-warn .store-toast-dot {
    background: #e0b428;
    box-shadow: 0 0 16px rgba(224, 180, 40, 0.7);
}
.store-toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.store-toast-success {
    border-color: rgba(40, 200, 90, 0.6);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(78, 221, 128, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.store-toast-success::before {
    background: linear-gradient(90deg, transparent, rgba(78, 221, 128, 0.86), transparent);
}
.store-toast-success .store-toast-dot {
    background: #4edd80;
    box-shadow: 0 0 16px rgba(78, 221, 128, 0.72);
    animation: none;
}
.store-toast-sync .store-toast-title {
    color: rgba(245, 252, 255, 0.98);
}

@keyframes storeToastPulse {
    0%, 100% {
        transform: scale(0.82);
        opacity: 0.68;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 680px) {
    .store-toast {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: calc(100vw - 28px);
    }
}

/* ── Checkout Delivery Sync Modal ── */
.store-confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(214, 184, 117, 0.16), transparent 34%),
        radial-gradient(circle at 14% 88%, rgba(40, 200, 90, 0.12), transparent 32%),
        rgba(0, 0, 0, 0.84);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.store-confirm-modal-visible {
    opacity: 1;
}
.store-confirm-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(22, 18, 11, 0.98), rgba(5, 7, 6, 0.98) 58%, rgba(10, 20, 13, 0.98)),
        linear-gradient(90deg, rgba(214, 184, 117, 0.15), transparent);
    border: 1px solid rgba(214, 184, 117, 0.42);
    border-radius: 24px;
    padding: 32px;
    max-width: 520px;
    width: 90vw;
    box-shadow:
        0 0 0 1px rgba(255, 248, 235, 0.04) inset,
        0 28px 90px rgba(0, 0, 0, 0.72),
        0 0 70px rgba(214, 184, 117, 0.13);
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: min(86vh, 720px);
    overflow-y: auto;
}
.store-confirm-modal-visible .store-confirm-panel {
    transform: translateY(0);
}
.store-confirm-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 220px;
    background: radial-gradient(circle, rgba(40, 200, 90, 0.22), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.store-confirm-icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(40, 200, 90, 0.12);
    border: 1px solid rgba(40, 200, 90, 0.4);
    box-shadow: 0 0 36px rgba(40, 200, 90, 0.24);
}
.store-confirm-icon-wrap::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: inherit;
    border: 1px solid rgba(214, 184, 117, 0.24);
}
.store-confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #39d86a, #138b3a);
    color: #061008;
    font-size: 32px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(13, 113, 48, 0.42);
}
.store-confirm-kicker {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 6px 10px;
    border: 1px solid rgba(214, 184, 117, 0.28);
    border-radius: 999px;
    background: rgba(214, 184, 117, 0.1);
    color: #d6b875;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
}
.store-confirm-title {
    font-size: clamp(25px, 5vw, 34px);
    font-weight: 950;
    color: #fff8eb;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.store-confirm-subtitle {
    max-width: 430px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 248, 235, 0.72);
    margin: 0 auto 16px;
}
.store-confirm-note {
    margin: 0 auto 18px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(40, 200, 90, 0.24);
    background: rgba(40, 200, 90, 0.08);
    color: #9bf1b5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.store-confirm-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.store-confirm-item {
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.07), rgba(214, 184, 117, 0.05));
    border: 1px solid rgba(214, 184, 117, 0.22);
    border-radius: 16px;
    padding: 14px;
    text-align: left;
}
.store-confirm-item-name {
    font-size: 15px;
    font-weight: 900;
    color: #fff8eb;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.store-confirm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.store-confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.store-confirm-primary-btn,
.store-confirm-secondary-btn,
.store-confirm-close-btn {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s, border-color 0.2s, background 0.2s;
}
.store-confirm-primary-btn {
    background: linear-gradient(135deg, #d6b875, #9c7430);
    border: 1px solid rgba(255, 248, 235, 0.16);
    color: #050403;
    box-shadow: 0 14px 32px rgba(214, 184, 117, 0.18);
}
.store-confirm-secondary-btn {
    background: rgba(40, 200, 90, 0.1);
    border: 1px solid rgba(40, 200, 90, 0.34);
    color: #d7ffe3;
}
.store-confirm-close-btn {
    background: rgba(255, 248, 235, 0.06);
    border: 1px solid rgba(255, 248, 235, 0.14);
    color: rgba(255, 248, 235, 0.82);
}
.store-confirm-primary-btn:hover,
.store-confirm-secondary-btn:hover,
.store-confirm-close-btn:hover {
    opacity: 0.9;
}
.store-confirm-primary-btn:active,
.store-confirm-secondary-btn:active,
.store-confirm-close-btn:active {
    transform: scale(0.98);
}

.store-confirm-panel {
    text-align: left;
    max-width: 560px;
    background:
        radial-gradient(circle at 14% 10%, rgba(117, 230, 255, 0.16), transparent 28%),
        radial-gradient(circle at 92% 24%, rgba(214, 184, 117, 0.18), transparent 30%),
        linear-gradient(145deg, rgba(7, 12, 15, 0.98), rgba(11, 15, 10, 0.98) 62%, rgba(23, 18, 8, 0.98));
    border-color: rgba(117, 230, 255, 0.24);
    box-shadow:
        0 0 0 1px rgba(255, 248, 235, 0.05) inset,
        0 34px 110px rgba(0, 0, 0, 0.78),
        0 0 64px rgba(117, 230, 255, 0.1);
}
.store-confirm-noise {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mix-blend-mode: screen;
}
.store-confirm-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    color: rgba(235, 228, 214, 0.55);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.store-confirm-topline span:last-child {
    color: #75e6ff;
}
.store-confirm-icon-wrap {
    margin: 0 0 18px;
    background: rgba(117, 230, 255, 0.1);
    border-color: rgba(117, 230, 255, 0.34);
    box-shadow: 0 0 42px rgba(117, 230, 255, 0.18);
}
.store-confirm-icon {
    background: linear-gradient(135deg, #75e6ff, #24c56b 62%, #ddaa22);
}
.store-confirm-kicker {
    margin: 0 0 10px;
}
.store-confirm-title {
    font-size: clamp(30px, 6vw, 44px);
    line-height: 0.95;
    letter-spacing: -0.045em;
}
.store-confirm-subtitle {
    margin: 0 0 18px;
}
.store-confirm-note {
    width: fit-content;
    margin: 0 0 18px;
    border-color: rgba(117, 230, 255, 0.24);
    background: rgba(117, 230, 255, 0.08);
    color: #b9f3ff;
}
.store-confirm-item {
    background:
        radial-gradient(circle at 12% 10%, rgba(117, 230, 255, 0.12), transparent 38%),
        linear-gradient(135deg, rgba(255, 248, 235, 0.08), rgba(214, 184, 117, 0.04));
    border-color: rgba(117, 230, 255, 0.18);
}
.store-confirm-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.store-confirm-item-label {
    margin-bottom: 4px;
    color: rgba(235, 228, 214, 0.5);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.store-confirm-item-name {
    margin-bottom: 0;
}
.store-confirm-item-check {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(40, 200, 90, 0.14);
    border: 1px solid rgba(40, 200, 90, 0.36);
    color: #9bf1b5;
    font-weight: 950;
}
.store-confirm-actions {
    grid-template-columns: 1.1fr 1fr auto;
    align-items: stretch;
}
.store-confirm-close-btn {
    min-width: 92px;
}

@media (max-width: 520px) {
    .store-confirm-panel {
        width: calc(100vw - 24px);
        padding: 26px 18px 20px;
        border-radius: 20px;
    }
    .store-confirm-subtitle {
        font-size: 13px;
    }
    .store-confirm-icon-wrap {
        width: 68px;
        height: 68px;
    }
    .store-confirm-topline,
    .store-confirm-actions {
        grid-template-columns: 1fr;
    }
    .store-confirm-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .store-confirm-close-btn {
        min-width: 0;
    }
}

/* ── Mobile responsiveness ── */
@media (max-width: 520px) {
    .store-panel { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .store-header { padding: 12px 14px; }
    .store-content { padding: 14px; }
    .store-pkg-items { columns: 1; }
    .store-spin-area { align-items: stretch; flex-direction: column; }
    .store-spin-btn { width: 100%; }
    .store-gacha-assurance { grid-template-columns: 1fr; }
    .store-gacha-buttons { gap: 6px; }
    .store-gacha-btn { padding: 12px 4px; }
    .store-gacha-price { font-size: 16px; }
    .store-rates-table { font-size: 10px; }
    .store-rates-table th, .store-rates-table td { padding: 5px 4px; }
}
@media (min-width: 521px) and (max-width: 768px) {
    .store-panel { width: 96vw; border-radius: 14px; }
}
/* Landscape phones */
@media (max-height: 500px) {
    .store-panel { max-height: 100vh; border-radius: 0; }
    .store-header { padding: 8px 14px; }
    .store-content { padding: 10px 14px; }
}
/* Touch-friendly: larger tap targets */
@media (hover: none) and (pointer: coarse) {
    .store-buy-btn { padding: 12px 28px; font-size: 14px; }
    .store-gacha-btn { padding: 16px 8px; }
    .store-close-btn { width: 40px; height: 40px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   GACHA ANIMATION
   ═══════════════════════════════════════════════════════════ */

.gacha-overlay {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: none;
    align-items: center;
    justify-content: center;
}
.gacha-overlay:not([hidden]) {
    display: flex;
}
.gacha-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.gacha-stage {
    position: relative;
    width: 320px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Crate */
.gacha-crate {
    width: 120px;
    height: 120px;
    position: relative;
    opacity: 0;
    transform: scale(0.5);
}
.gacha-crate-enter {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s, transform 0.3s ease-out;
}
.gacha-crate-body {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a1848 0%, #1a1035 100%);
    border: 2px solid var(--glow-color, #aaa);
    box-shadow: 0 0 20px var(--glow-color, #aaa33);
}
.gacha-crate-lid {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 30%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(135deg, #3a2060 0%, #2a1848 100%);
    border: 2px solid var(--glow-color, #aaa);
    border-bottom: none;
}

/* Shake Animation */
.gacha-crate-shake {
    animation: gacha-shake 1.5s ease-in-out;
}
@keyframes gacha-shake {
    0%, 100% { transform: scale(1) rotate(0); }
    10% { transform: scale(1) rotate(-2deg) translateX(-3px); }
    20% { transform: scale(1.02) rotate(2deg) translateX(3px); }
    30% { transform: scale(1.02) rotate(-3deg) translateX(-5px); }
    40% { transform: scale(1.04) rotate(3deg) translateX(5px); }
    50% { transform: scale(1.04) rotate(-4deg) translateX(-6px); }
    60% { transform: scale(1.06) rotate(5deg) translateX(7px); }
    70% { transform: scale(1.06) rotate(-6deg) translateX(-8px); }
    80% { transform: scale(1.08) rotate(7deg) translateX(9px); }
    90% { transform: scale(1.1) rotate(-8deg) translateX(-10px); }
}

/* Burst */
.gacha-crate-burst {
    animation: gacha-burst 0.5s ease-out forwards;
}
@keyframes gacha-burst {
    0% { transform: scale(1.1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}

/* Screen Flash */
.gacha-screen-flash::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: white;
    opacity: 0;
    animation: gacha-flash 0.3s ease-out;
    pointer-events: none;
}
@keyframes gacha-flash {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* Reveal */
.gacha-reveal {
    text-align: center;
    position: relative;
}
.gacha-reveal-enter {
    animation: gacha-reveal-in 0.5s ease-out;
}
@keyframes gacha-reveal-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
.gacha-reveal-glow {
    position: absolute;
    inset: -80px;
    border-radius: 50%;
    animation: gacha-glow-pulse 2s ease-in-out infinite;
}
@keyframes gacha-glow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}
.gacha-reveal-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gacha-reveal-rarity {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 4px;
}
.gacha-reveal-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.gacha-reveal-count {
    font-size: 14px;
    color: #ccc;
}

/* Rarity Colors */
.gacha-rarity-common .gacha-reveal-rarity,
.gacha-rarity-common { color: #aaa; }
.gacha-rarity-uncommon .gacha-reveal-rarity,
.gacha-rarity-uncommon { color: #44bb44; }
.gacha-rarity-rare .gacha-reveal-rarity,
.gacha-rarity-rare { color: #4488ee; }
.gacha-rarity-epic .gacha-reveal-rarity,
.gacha-rarity-epic { color: #aa44dd; }
.gacha-rarity-legendary .gacha-reveal-rarity,
.gacha-rarity-legendary { color: #ddaa22; }
.gacha-rarity-mythic .gacha-reveal-rarity,
.gacha-rarity-mythic { color: #ff4466; }

/* Mythic special effect */
.gacha-reveal-mythic .gacha-reveal-glow {
    background: conic-gradient(from 0deg, #ff4466, #ddaa22, #44bb44, #4488ee, #aa44dd, #ff4466) !important;
    opacity: 0.3;
    animation: gacha-mythic-rotate 3s linear infinite, gacha-glow-pulse 2s ease-in-out infinite;
}
@keyframes gacha-mythic-rotate {
    from { transform: rotate(0deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1.1); }
}

/* Particles */
.gacha-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.gacha-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: gacha-particle-fly 0.8s ease-out forwards;
}
@keyframes gacha-particle-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* Multi-spin grid */
.gacha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 500px;
}
.gacha-grid-card {
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gacha-grid-rarity {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}
.gacha-grid-item {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.gacha-grid-count {
    font-size: 11px;
    color: #aaa;
}

/* Skip/Dismiss buttons */
.gacha-skip-btn, .gacha-dismiss-btn {
    margin-top: 20px;
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s;
}
.gacha-skip-btn:hover, .gacha-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Spin counter */
.gacha-spin-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    color: #666;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .store-pkg-grid { grid-template-columns: 1fr; }
    .store-gacha-buttons { flex-direction: column; }
    .store-waglet-card { grid-template-columns: 1fr; }
    .store-waglet-actions { min-width: 0; }
    .store-waglet-price { text-align: left; }
    .gacha-stage { width: 280px; height: 360px; }
}

/* ============================================
   NOTIFICATION TOAST
   ============================================ */
.notif-toast-stack,
#notification-toast-container,
#notif-toast-container {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 99998;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(420px, calc(100vw - 28px));
    pointer-events: none;
}

#start-screen[data-mm].active ~ .notif-toast-stack,
#start-screen[data-mm].active ~ #notification-toast-container,
#start-screen[data-mm].active ~ #notif-toast-container {
    top: max(72px, calc(env(safe-area-inset-top) + 64px));
}

.notif-toast {
    position: relative;
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 12px;
    min-height: 54px;
    padding: 12px 14px;
    overflow: hidden;
    color: #f0efec;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.42;
    letter-spacing: 0;
    text-align: left;
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 62%),
        rgba(6, 8, 10, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left-color: rgba(0, 217, 255, 0.58);
    border-radius: 4px;
    pointer-events: auto;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.54),
        0 0 0 1px rgba(0, 217, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: notifSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-toast::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 217, 255, 0.72), transparent 68%);
    opacity: 0.72;
    pointer-events: none;
}

.notif-toast-rail {
    display: block;
    align-self: stretch;
    min-height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #00d9ff, rgba(0, 217, 255, 0.22));
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.24);
}

.notif-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.notif-toast-title {
    color: #8ff0ff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.notif-toast-detail {
    color: rgba(240, 239, 236, 0.86);
    overflow-wrap: anywhere;
}

.notif-toast:focus-visible {
    outline: 2px solid rgba(0, 217, 255, 0.68);
    outline-offset: 2px;
}
.notif-toast-exit {
    animation: notifSlideOut 0.2s ease forwards;
}
@keyframes notifSlideIn {
    from { opacity: 0; transform: translate3d(12px, -6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes notifSlideOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(12px, -6px, 0); }
}

@media (max-width: 560px) {
    .notif-toast-stack,
    #notification-toast-container,
    #notif-toast-container {
        left: 12px;
        right: 12px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notif-toast,
    .notif-toast-exit {
        animation: none;
    }
}

/* ============================================
   NOTIFICATION BELL & PAGE
   ============================================ */

/* Bell icon (header) */
.mm-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    -webkit-tap-highlight-color: transparent;
}
.mm-bell-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(0.75);
    transition: filter 0.2s;
}
.mm-bell:hover .mm-bell-icon { filter: brightness(0) invert(1); }
.mm-bell-badge {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mm-bell-badge-pulse {
    animation: bellPulse 0.6s ease;
}
@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Notification page */
#notifications-screen {
    overflow-y: hidden;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}
.notif-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.notif-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: rgba(14, 10, 32, 0.98);
    border-bottom: 1px solid rgba(108, 63, 255, 0.2);
    flex-shrink: 0;
}
.notif-page-back {
    background: none;
    border: none;
    color: rgba(210, 200, 230, 0.7);
    font-size: 1.4em;
    cursor: pointer;
    padding: 4px 8px;
}
.notif-page-back:hover { color: rgba(168, 132, 255, 0.9); }
.notif-page-title {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    letter-spacing: 3px;
    color: rgba(168, 132, 255, 0.9);
    text-transform: uppercase;
}
.notif-mark-read {
    background: none;
    border: 1px solid rgba(108, 63, 255, 0.25);
    border-radius: 6px;
    color: rgba(168, 132, 255, 0.7);
    font-family: 'Courier New', monospace;
    font-size: 0.7em;
    letter-spacing: 1px;
    padding: 6px 10px;
    cursor: pointer;
}
.notif-mark-read:hover { border-color: rgba(108, 63, 255, 0.5); color: rgba(200, 180, 255, 0.9); }
.notif-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* Notification rows */
.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: rgba(14, 10, 32, 0.4);
    border: none;
    border-left: 3px solid transparent;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
    font-family: 'Courier New', monospace;
    transition: background 0.15s;
    color: inherit;
}
.notif-row:hover { background: rgba(108, 63, 255, 0.06); }
.notif-row-unread {
    border-left-color: rgba(108, 63, 255, 0.6);
    background: rgba(108, 63, 255, 0.05);
}
.notif-row-icon { font-size: 1.4em; flex-shrink: 0; width: 28px; text-align: center; }
.notif-row-content { flex: 1; min-width: 0; }
.notif-row-title { font-size: 0.85em; color: rgba(220, 210, 240, 0.95); font-weight: bold; }
.notif-row-body { font-size: 0.75em; color: rgba(180, 170, 200, 0.6); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-row-time { font-size: 0.65em; color: rgba(140, 130, 170, 0.5); letter-spacing: 1px; flex-shrink: 0; }

/* Empty state */
.notif-empty { text-align: center; padding: 60px 20px; }
.notif-empty-icon { font-size: 3em; margin-bottom: 16px; opacity: 0.3; }
.notif-empty-title { font-size: 0.9em; color: rgba(180, 170, 200, 0.6); letter-spacing: 2px; margin-bottom: 4px; }
.notif-empty-sub { font-size: 0.75em; color: rgba(140, 130, 170, 0.4); }

/* Friend request action buttons */
.notif-row-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.notif-action-accept, .notif-action-decline {
    padding: 5px 14px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.notif-action-accept {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.notif-action-accept:hover {
    background: rgba(52, 211, 153, 0.35);
    border-color: rgba(52, 211, 153, 0.5);
}
.notif-action-decline {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(239, 68, 68, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.notif-action-decline:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}
.notif-row-acted {
    margin-top: 4px;
    font-size: 0.7em;
    color: rgba(140, 130, 170, 0.5);
    letter-spacing: 1px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   Costume Picker Overlay
   ═══════════════════════════════════════════════════════════════════════ */

.costume-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.costume-picker {
    background: var(--panel-bg, rgba(8, 12, 28, 0.95));
    border: 1px solid var(--panel-border, rgba(80, 120, 200, 0.2));
    border-radius: 10px;
    width: min(90vw, 520px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.costume-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.15);
}

.costume-picker-title {
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text-bright, #dde4ff);
}

.costume-picker-close {
    background: none;
    border: none;
    color: rgba(200, 200, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}
.costume-picker-close:hover {
    color: #ff6666;
}

.costume-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 120, 200, 0.3) transparent;
}

.costume-card {
    background: var(--rarity-bg, rgba(20, 25, 40, 0.8));
    border: 1px solid var(--rarity-glow, rgba(80, 120, 200, 0.2));
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.costume-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 8px var(--rarity-glow, rgba(80, 120, 200, 0.3));
}
.costume-card.equipped {
    box-shadow: 0 0 12px var(--rarity-glow, #44bb44), inset 0 0 20px rgba(68, 187, 68, 0.1);
}
.costume-card.owned {
    opacity: 0.95;
}

.costume-card-icon {
    font-size: 32px;
    line-height: 1;
}

.costume-card-name {
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.5px;
}

.costume-card-rarity {
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(200, 200, 255, 0.4);
}

.costume-card-desc {
    font-size: 9px;
    color: rgba(200, 200, 255, 0.5);
    text-align: center;
    line-height: 1.3;
}

.costume-card-price {
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: 10px;
    color: var(--rarity-glow, #aaa);
    font-weight: bold;
}

.costume-card-btn {
    width: 100%;
    padding: 5px 0;
    border: 1px solid var(--rarity-glow, rgba(80, 120, 200, 0.3));
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--rarity-glow, #aaa);
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s;
}
.costume-card-btn:hover {
    background: rgba(80, 120, 200, 0.15);
}
.costume-card-btn.buy {
    color: #ffcc44;
    border-color: rgba(255, 204, 68, 0.3);
}
.costume-card-btn.buy:hover {
    background: rgba(255, 204, 68, 0.1);
}
.costume-card-btn.equip {
    color: #44bb44;
    border-color: rgba(68, 187, 68, 0.3);
}
.costume-card-btn.equip:hover {
    background: rgba(68, 187, 68, 0.1);
}
.costume-card-btn.unequip {
    color: #ff6666;
    border-color: rgba(255, 102, 102, 0.3);
}
.costume-card-btn.unequip:hover {
    background: rgba(255, 102, 102, 0.1);
}

/* ── Server Selection Screen ────────────────────────────────────── */

.server-select-warning {
    font-size: 0.75em;
    color: rgba(255, 180, 80, 0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.server-card {
    background: rgba(8, 6, 18, 0.8);
    border: 1px solid rgba(120, 100, 160, 0.18);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.server-card:hover {
    border-color: rgba(200, 160, 80, 0.4);
    box-shadow: 0 0 20px rgba(200, 160, 60, 0.1);
    transform: translateY(-1px);
}

.server-card-recommended {
    border-color: rgba(200, 160, 80, 0.35);
    box-shadow: 0 0 20px rgba(200, 160, 60, 0.08);
}

.server-ping-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.server-ping-dot.ping-good { background: #4caf50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); }
.server-ping-dot.ping-ok { background: #ff9800; box-shadow: 0 0 8px rgba(255, 152, 0, 0.5); }
.server-ping-dot.ping-bad { background: #f44336; box-shadow: 0 0 8px rgba(244, 67, 54, 0.5); }
.server-ping-dot.ping-unknown { background: #00ddff; box-shadow: 0 0 8px rgba(0, 221, 255, 0.35); opacity: 0.75; }
.server-ping-dot.ping-offline { background: #666; }

.server-card-info {
    flex: 1;
    text-align: left;
}

.server-card-name {
    font-family: 'Courier New', monospace;
    font-size: 1em;
    color: #ddd0c0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.server-card-region {
    font-size: 0.7em;
    color: rgba(140, 130, 160, 0.6);
    letter-spacing: 1px;
    margin-top: 2px;
}

.server-card-ping {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: rgba(180, 170, 200, 0.7);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.server-card-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: linear-gradient(135deg, #6a4a1a, #8a5a10);
    color: #f0e0c0;
    font-size: 0.55em;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(210, 170, 80, 0.35);
}

.btn-server-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    color: rgba(140, 130, 160, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 0.7em;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 12px 0 4px;
    transition: color 0.2s ease;
}

.btn-server-toggle:hover {
    color: rgba(200, 190, 220, 0.8);
}

.server-toggle-arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.server-toggle-arrow.expanded {
    transform: rotate(180deg);
}

.server-all-list {
    margin-top: 4px;
}

/* ── Server Confirmation Modal ──────────────────────────────────── */

.server-confirm-detail {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    color: #ddd0c0;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.server-confirm-warning {
    font-size: 0.8em;
    color: rgba(255, 180, 80, 0.8);
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.server-confirm-note {
    font-size: 0.7em;
    color: rgba(140, 130, 160, 0.5);
    letter-spacing: 1px;
    line-height: 1.4;
    margin-bottom: 24px;
}

/* ── Site POI HUD Overlay ───────────────────────────────────────── */

.site-hud {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.site-hud-row {
    font-family: 'Courier New', monospace;
    font-size: 0.75em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(180, 170, 200, 0.6);
    background: rgba(8, 6, 18, 0.7);
    padding: 4px 14px;
    border-radius: 4px;
    border: 1px solid rgba(120, 100, 160, 0.15);
    text-align: center;
    backdrop-filter: blur(4px);
}

.site-hud-row.site-active {
    color: rgba(0, 255, 204, 0.9);
    border-color: rgba(0, 255, 204, 0.3);
    box-shadow: 0 0 12px rgba(0, 255, 204, 0.1);
}

/* ============================================
   World Editor Panel
   ============================================ */

#editor-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(300px, 29vw, 460px);
    min-width: 220px;
    max-width: calc(100vw - 16px);
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(10, 18, 28, 0.98) 0%, rgba(9, 13, 24, 0.96) 100%);
    border-right: 1px solid rgba(88, 180, 255, 0.24);
    box-shadow: 14px 0 42px rgba(0, 0, 0, 0.38);
    z-index: 100;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    color: #d0d8e0;
    backdrop-filter: blur(12px);
}
.ep-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 101;
}
.ep-resize-handle:hover {
    background: rgba(0, 217, 255, 0.3);
}

#editor-panel,
#editor-panel * {
    box-sizing: border-box;
}

#editor-panel::-webkit-scrollbar {
    width: 6px;
}

#editor-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.3);
    border-radius: 3px;
}

.ep-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 14px;
    background:
        linear-gradient(135deg, rgba(28, 52, 72, 0.92) 0%, rgba(10, 27, 40, 0.94) 70%);
    border-bottom: 1px solid rgba(88, 180, 255, 0.22);
}

.ep-header-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ep-title {
    font-size: 14px;
    font-weight: bold;
    color: #8fdcff;
    letter-spacing: 2.4px;
}

.ep-subtitle {
    font-size: 10px;
    color: rgba(180, 220, 246, 0.68);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ep-speed {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    color: #b7eeff;
    background: rgba(126, 203, 255, 0.12);
    border: 1px solid rgba(126, 203, 255, 0.18);
}

.ep-overview {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.ep-coords {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.ep-coord-card,
.ep-sync-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.ep-coord-card {
    padding: 10px 12px;
}

.ep-coord-label {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(136, 195, 231, 0.58);
}

.ep-coords-line {
    font-size: 11px;
    color: #d8f1ff;
    line-height: 1.4;
}

.ep-sync-card {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.ep-shared-notes,
.ep-sync-card,
.ep-live-feed {
    display: grid;
    gap: 8px;
}

.ep-notes-input {
    width: 100%;
    min-height: 124px;
    resize: vertical;
    padding: 10px 12px;
    background: rgba(11, 24, 34, 0.72);
    border: 1px solid rgba(126, 203, 255, 0.16);
    border-radius: 10px;
    color: #d8e6f2;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    outline: none;
}

.ep-notes-input:focus {
    border-color: rgba(0, 217, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
}

.ep-notes-input::placeholder {
    color: rgba(216, 230, 242, 0.32);
}

.ep-section {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ep-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.ep-section-title {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(123, 203, 246, 0.62);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.ep-section-head .ep-section-title {
    margin-bottom: 0;
}

.ep-section-meta {
    font-size: 10px;
    color: rgba(222, 242, 255, 0.56);
    white-space: nowrap;
}

/* Tool Bar */
.ep-tool-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.ep-tool-btn {
    min-width: 0;
    min-height: 52px;
    padding: 8px 8px 7px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #aaa;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.ep-tool-btn-label {
    display: block;
    font-size: 11px;
    line-height: 1.1;
}

.ep-tool-btn-key {
    display: block;
    font-size: 10px;
    color: rgba(0, 217, 255, 0.55);
    line-height: 1;
}

.ep-tool-btn:hover {
    background: rgba(88, 180, 255, 0.12);
    border-color: rgba(88, 180, 255, 0.22);
    color: #fff;
}

.ep-tool-btn.active {
    background: linear-gradient(135deg, rgba(47, 142, 189, 0.3), rgba(18, 88, 122, 0.34));
    border-color: rgba(126, 203, 255, 0.46);
    color: #a5e8ff;
    box-shadow: 0 8px 22px rgba(42, 118, 153, 0.18);
}

/* Search */
.ep-search {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(11, 24, 34, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ccc;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    outline: none;
    transition: border-color 0.15s;
}

.ep-search:focus {
    border-color: rgba(0, 217, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.ep-search::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Placement Info */
.ep-placement-info {
    display: none;
}

.ep-placement-hints {
    font-size: 9px;
    color: rgba(171, 196, 214, 0.6);
    margin-top: 4px;
}

.ep-checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    cursor: pointer;
}

.ep-checkbox-row input[type="checkbox"] {
    accent-color: #00d9ff;
    cursor: pointer;
}

/* Brush Settings */
.ep-brush {
    display: none;
}

.ep-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ep-slider-row label {
    font-size: 11px;
    color: #98aab8;
    width: 55px;
    flex-shrink: 0;
}

.ep-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: #00d9ff;
    cursor: pointer;
}

.ep-slider-row span {
    font-size: 11px;
    color: #00d9ff;
    width: 28px;
    text-align: right;
}

/* Category Bar */
.ep-category-bar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.ep-cat-btn {
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #888;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.ep-cat-btn:hover {
    background: rgba(0, 217, 255, 0.1);
    color: #ccc;
}

.ep-cat-btn.active {
    background: rgba(88, 180, 255, 0.18);
    border-color: rgba(126, 203, 255, 0.34);
    color: #b4ebff;
}

/* Asset List */
.ep-asset-list-wrap {
    max-height: 38vh;
    padding: 4px 12px;
}

.ep-asset-list {
    max-height: 34vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ep-asset-list::-webkit-scrollbar {
    width: 4px;
}

.ep-asset-list::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.2);
    border-radius: 2px;
}

.ep-asset-item {
    padding: 8px 10px;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #e0e8f0;
    cursor: pointer;
    transition: all 0.12s;
    overflow: hidden;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ep-asset-thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: rgba(10, 14, 20, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ep-asset-thumb.no-thumb::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.25);
    font-size: 18px;
    font-weight: 700;
}

.ep-asset-label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ep-asset-label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-asset-category-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(126, 203, 255, 0.7);
}

.ep-asset-item:hover {
    background: rgba(88, 180, 255, 0.12);
    color: #f4f8ff;
    border-color: rgba(88, 180, 255, 0.3);
}

.ep-asset-item.selected {
    background: linear-gradient(135deg, rgba(47, 142, 189, 0.28), rgba(18, 88, 122, 0.28));
    border-color: rgba(126, 203, 255, 0.46);
    color: #b4ebff;
    font-weight: 600;
}

.ep-empty-state {
    padding: 16px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(201, 220, 233, 0.68);
    font-size: 11px;
    line-height: 1.5;
}

/* Action Buttons */
.ep-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.ep-primary-actions {
    margin-top: 2px;
}

.ep-save-now-btn {
    grid-column: 1 / -1;
}

.ep-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    background: rgba(88, 180, 255, 0.1);
    border: 1px solid rgba(88, 180, 255, 0.2);
    border-radius: 10px;
    color: #b4ebff;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ep-btn:hover {
    background: rgba(88, 180, 255, 0.18);
    border-color: rgba(126, 203, 255, 0.36);
}

.ep-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.ep-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(11, 24, 34, 0.72);
    border: 1px solid rgba(88, 180, 255, 0.18);
    border-radius: 8px;
    color: #b4ebff;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    margin-bottom: 4px;
}
.ep-select option {
    background: #0a0e14;
    color: #e0e8f0;
}

.ep-btn-danger {
    background: rgba(255, 50, 50, 0.1);
    border-color: rgba(255, 50, 50, 0.25);
    color: #ff4444;
}

.ep-btn-danger:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.5);
}

/* Stats */
.ep-stats {
    padding: 0 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ep-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ep-stat-card {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ep-stat-card span {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(176, 214, 237, 0.55);
}

.ep-stat-card strong {
    font-size: 14px;
    color: #eff8ff;
    font-weight: 600;
}

.ep-help-text {
    font-size: 10px;
    color: #8899aa;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Spawn-preview viewer (boss/bot/mob) */
.ep-preview-mount {
    margin-top: 8px;
}
.ep-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #1f2a3d;
    border-radius: 6px;
    background: #0b101a;
}
.ep-preview-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ep-preview-label {
    font-size: 11px;
    color: #c0d0e0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-preview-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ep-preview-reset-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #2a3a52;
    background: #15202e;
    color: #d8e4ee;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
}
.ep-preview-reset-btn:hover {
    background: #1c2a3c;
    border-color: #3a5077;
}
.ep-preview-rotate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #8899aa;
    cursor: pointer;
    user-select: none;
}
.ep-preview-rotate input {
    margin: 0;
    cursor: pointer;
}
.ep-preview-canvas-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ep-preview-canvas-wrap canvas {
    max-width: 100%;
    background: #0e1320;
    box-shadow: 0 0 0 1px #1f2a3d inset;
}
.ep-preview-status {
    font-size: 10px;
    color: #8899aa;
    line-height: 1.4;
    min-height: 0;
}
.ep-preview-clips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ep-preview-clip-btn {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #2a3a52;
    background: #15202e;
    color: #d8e4ee;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}
.ep-preview-clip-btn:hover {
    background: #1c2a3c;
    border-color: #3a5077;
}
.ep-preview-clip-btn.is-active {
    background: #2a4570;
    border-color: #5a8dd0;
    color: #ffffff;
}

.ep-server-status {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.6px;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-server-status-idle {
    color: #b9f3d8;
    background: rgba(58, 168, 113, 0.14);
    border-color: rgba(58, 168, 113, 0.2);
}

.ep-server-status-busy {
    color: #ffe29b;
    background: rgba(194, 139, 45, 0.16);
    border-color: rgba(194, 139, 45, 0.24);
}

.ep-server-status-error {
    color: #ffc0bf;
    background: rgba(184, 66, 74, 0.16);
    border-color: rgba(184, 66, 74, 0.24);
}

.ep-details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ep-details-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(188, 224, 246, 0.7);
}

.ep-details-summary::-webkit-details-marker {
    display: none;
}

.ep-details-summary::after {
    content: '+';
    float: right;
    color: rgba(188, 224, 246, 0.5);
}

.ep-details[open] .ep-details-summary::after {
    content: '-';
}

.ep-details-body {
    padding-bottom: 8px;
}

.ep-details .ep-section:last-child {
    border-bottom: none;
}

.ep-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ep-shortcut-pill {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ep-shortcut-pill span {
    font-size: 9px;
    color: rgba(123, 203, 246, 0.68);
}

.ep-shortcut-pill strong {
    font-size: 11px;
    color: #eef8ff;
    font-weight: 600;
}

.ep-live-actions {
    margin-top: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ep-live-player-list {
    max-height: 220px;
}

.ep-live-player-list .ep-asset-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

#ep-live-players-status {
    white-space: normal;
    overflow-wrap: anywhere;
}

#ep-shared-notes-status {
    min-height: 16px;
}

/* Flash notification */
.ep-flash {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: rgba(0, 217, 255, 0.9);
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    z-index: 200;
    animation: ep-flash-fade 1.5s ease-out forwards;
}

@keyframes ep-flash-fade {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* World editor operations console polish */
#editor-panel {
    --ep-bg: #050608;
    --ep-bg-1: #0a0d10;
    --ep-bg-2: #11161a;
    --ep-line: rgba(236, 245, 239, 0.09);
    --ep-line-strong: rgba(0, 217, 255, 0.36);
    --ep-text: #eef5f1;
    --ep-text-2: rgba(238, 245, 241, 0.64);
    --ep-text-3: rgba(238, 245, 241, 0.42);
    --ep-cyan: #00d9ff;
    --ep-cyan-soft: rgba(0, 217, 255, 0.12);
    --ep-green: #7dff9c;
    --ep-warn: #ffb86b;
    --ep-danger: #ff6678;
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.08) 0, transparent 1px) 0 0 / 100% 100%,
        linear-gradient(180deg, rgba(8, 13, 15, 0.99), rgba(4, 5, 7, 0.98));
    border-right: 1px solid var(--ep-line-strong);
    box-shadow: 18px 0 42px rgba(0, 0, 0, 0.46);
    color: var(--ep-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    scrollbar-color: rgba(0, 217, 255, 0.35) transparent;
}

#editor-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.35);
    border-radius: 0;
}

.ep-header {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 15px 16px 13px;
    background:
        linear-gradient(180deg, rgba(8, 14, 16, 0.98), rgba(5, 6, 8, 0.96)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px);
    border-bottom: 1px solid var(--ep-line-strong);
}

.ep-kicker {
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.28em;
    color: var(--ep-green);
    text-transform: uppercase;
}

.ep-title {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 0.22em;
    color: var(--ep-text);
}

.ep-subtitle {
    color: var(--ep-text-3);
    letter-spacing: 0.12em;
}

.ep-speed {
    border-radius: 2px;
    color: #001017;
    background: var(--ep-cyan);
    border-color: var(--ep-cyan);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.ep-command-strip {
    position: sticky;
    top: 62px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--ep-line);
    background: rgba(5, 6, 8, 0.94);
    backdrop-filter: blur(10px);
}

.ep-command-strip span {
    min-width: 0;
    padding: 8px 6px;
    border-right: 1px solid var(--ep-line);
    color: var(--ep-text-3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ep-command-strip span:last-child {
    border-right: none;
    color: var(--ep-cyan);
}

.ep-overview {
    gap: 10px;
    padding: 12px;
}

.ep-section {
    padding: 13px 14px;
    background: transparent;
    border-bottom: 1px solid var(--ep-line);
}

.ep-section-head {
    align-items: center;
    min-width: 0;
}

.ep-section-title {
    color: var(--ep-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.ep-section-meta {
    color: var(--ep-text-3);
    font-size: 9px;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-coord-card,
.ep-sync-card,
.ep-stat-card,
.ep-shortcut-pill,
.ep-empty-state {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--ep-line);
    border-radius: 2px;
    box-shadow: none;
}

.ep-coord-card {
    min-width: 0;
    padding: 11px 10px;
}

.ep-coord-label,
.ep-stat-card span,
.ep-shortcut-pill span {
    color: var(--ep-text-3);
    letter-spacing: 0.16em;
}

.ep-coords-line {
    color: var(--ep-text);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.ep-sync-card {
    gap: 9px;
    padding: 12px;
    border-left: 2px solid rgba(0, 217, 255, 0.45);
}

.ep-server-status {
    border-radius: 2px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ep-server-status-idle {
    color: var(--ep-green);
    background: rgba(125, 255, 156, 0.08);
    border-color: rgba(125, 255, 156, 0.22);
}

.ep-server-status-busy {
    color: var(--ep-warn);
    background: rgba(255, 184, 107, 0.08);
    border-color: rgba(255, 184, 107, 0.24);
}

.ep-server-status-error {
    color: var(--ep-danger);
    background: rgba(255, 102, 120, 0.08);
    border-color: rgba(255, 102, 120, 0.28);
}

.ep-tool-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.ep-tool-btn {
    min-height: 42px;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 9px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--ep-line);
    border-radius: 2px;
    color: var(--ep-text-2);
    text-align: left;
}

.ep-tool-btn-key {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 217, 255, 0.26);
    color: var(--ep-cyan);
    font-size: 10px;
    line-height: 1;
}

.ep-tool-btn-label {
    display: block;
    min-width: 0;
    color: inherit;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-tool-btn:hover {
    background: var(--ep-bg-2);
    border-color: rgba(0, 217, 255, 0.28);
}

.ep-tool-btn.active {
    background: linear-gradient(90deg, rgba(0, 217, 255, 0.18), rgba(125, 255, 156, 0.06));
    border-color: rgba(0, 217, 255, 0.62);
    color: var(--ep-text);
    box-shadow: inset 2px 0 0 var(--ep-cyan), 0 0 18px rgba(0, 217, 255, 0.1);
}

.ep-tool-btn.active .ep-tool-btn-key {
    background: var(--ep-cyan);
    color: #001017;
    border-color: var(--ep-cyan);
}

.editor-bot-menu {
    position: fixed;
    z-index: 2200;
    display: none;
    grid-template-columns: 1fr;
    min-width: 156px;
    padding: 6px;
    gap: 4px;
    background: rgba(5, 8, 10, 0.96);
    border: 1px solid rgba(0, 217, 255, 0.42);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

.editor-bot-menu-status {
    padding: 7px 8px 8px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.22);
    color: #7de3ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.3;
    text-transform: uppercase;
}

.editor-bot-menu button {
    min-height: 30px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: #eef5f1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.editor-bot-menu button:hover {
    background: rgba(0, 217, 255, 0.12);
    border-color: rgba(0, 217, 255, 0.36);
}

.editor-bot-menu button.active {
    background: rgba(0, 217, 255, 0.22);
    border-color: rgba(0, 217, 255, 0.6);
    color: #fff;
}

.editor-mob-anim-menu {
    grid-template-columns: repeat(2, 1fr);
    min-width: 200px;
}

.editor-mob-anim-menu .editor-bot-menu-status {
    grid-column: 1 / -1;
}

.ep-category-bar {
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.ep-cat-btn {
    flex: 0 0 auto;
    border-radius: 2px;
    background: transparent;
    border-color: var(--ep-line);
    color: var(--ep-text-3);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ep-cat-btn:hover,
.ep-cat-btn.active {
    background: var(--ep-cyan-soft);
    border-color: rgba(0, 217, 255, 0.34);
    color: var(--ep-text);
}

.ep-search,
.ep-select,
.ep-notes-input {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--ep-line);
    border-radius: 2px;
    color: var(--ep-text);
}

.ep-search:focus,
.ep-select:focus,
.ep-notes-input:focus {
    border-color: rgba(0, 217, 255, 0.48);
    background: rgba(0, 217, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.16);
}

.ep-asset-list-wrap {
    max-height: 42vh;
    padding: 6px 12px 12px;
}

.ep-asset-list {
    gap: 6px;
}

.ep-asset-item {
    min-height: 50px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--ep-line);
    border-radius: 2px;
    color: var(--ep-text-2);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

.ep-asset-thumb {
    width: 38px;
    height: 38px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.34);
    border-color: var(--ep-line);
}

.ep-asset-category-tag {
    color: var(--ep-cyan);
    font-size: 9px;
    letter-spacing: 0.14em;
}

.ep-asset-item:hover,
.ep-asset-item.selected {
    background: rgba(0, 217, 255, 0.09);
    border-color: rgba(0, 217, 255, 0.38);
    color: var(--ep-text);
}

.ep-asset-item.selected {
    box-shadow: inset 2px 0 0 var(--ep-cyan);
}

.ep-actions {
    gap: 7px;
}

.ep-btn {
    min-height: 36px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--ep-line);
    color: var(--ep-text-2);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ep-btn:hover {
    background: var(--ep-bg-2);
    border-color: rgba(0, 217, 255, 0.34);
    color: var(--ep-text);
}

.ep-btn-danger {
    color: var(--ep-danger);
    border-color: rgba(255, 102, 120, 0.28);
}

.ep-stats {
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--ep-line);
}

.ep-stat-grid {
    gap: 7px;
}

.ep-stat-card {
    padding: 10px;
}

.ep-stat-card strong {
    color: var(--ep-text);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

.ep-help-text,
.ep-placement-hints,
.ep-checkbox-row {
    color: var(--ep-text-3);
}

.ep-checkbox-row input[type="checkbox"],
.ep-slider-row input[type="range"] {
    accent-color: var(--ep-cyan);
}

.ep-details {
    border-bottom: 1px solid var(--ep-line);
}

.ep-details-summary {
    color: var(--ep-text-2);
    letter-spacing: 0.18em;
}

.ep-details-summary:hover {
    color: var(--ep-text);
}

.ep-shortcuts-grid {
    gap: 6px;
}

.ep-shortcut-pill {
    border-radius: 2px;
}

.ep-flash {
    border-radius: 2px;
    background: var(--ep-cyan, #00d9ff);
}

@media (max-width: 540px) {
    #editor-panel {
        width: min(100vw, 390px);
    }

    .ep-command-strip {
        top: 60px;
    }

    .ep-tool-bar,
    .ep-coords,
    .ep-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   District Grid Planner
   ============================================ */

.district-grid-planner {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.06) 0, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(180deg, rgba(5, 7, 9, 0.99), rgba(6, 9, 12, 0.98));
    color: #eef5f1;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

.district-grid-planner[hidden] {
    display: none !important;
}

body.orbryn-district-layout-studio {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #050709;
    color: #eef5f1;
}

#district-layout-studio-loading {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.05) 0, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(180deg, #050709, #070b0f);
    color: rgba(238, 245, 241, 0.72);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    text-align: center;
}

#district-layout-studio-loading span {
    color: #7dff9c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.28em;
}

#district-layout-studio-loading strong {
    color: #eef5f1;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#district-layout-studio-loading small {
    max-width: min(520px, 88vw);
    color: #ff9ca8;
    font-size: 12px;
    line-height: 1.45;
}

.district-grid-planner.dgp-standalone {
    z-index: 1;
}

.district-grid-planner.dgp-standalone .dgp-close-action {
    display: none;
}

.dgp-topbar {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(180px, 0.35fr) minmax(0, auto);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.28);
    background: rgba(5, 7, 9, 0.96);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.dgp-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dgp-title-block span {
    color: #7dff9c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.dgp-title-block strong {
    min-width: 0;
    color: #eef5f1;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.18em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dgp-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.dgp-body {
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
    min-height: 0;
}

.dgp-sidebar {
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 217, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(9, 13, 15, 0.98), rgba(4, 5, 7, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 28px);
}

.dgp-section {
    display: grid;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(236, 245, 239, 0.09);
}

.dgp-section-fill {
    min-height: 220px;
}

.dgp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.dgp-section-head span {
    color: #00d9ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.dgp-section-head small {
    min-width: 0;
    color: rgba(238, 245, 241, 0.42);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-field,
.dgp-field-row {
    min-width: 0;
}

.dgp-field {
    display: grid;
    gap: 5px;
}

.dgp-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dgp-field span {
    color: rgba(238, 245, 241, 0.5);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dgp-input,
.dgp-select,
.dgp-textarea {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 8px 9px;
    border: 1px solid rgba(236, 245, 239, 0.1);
    border-radius: 2px;
    outline: none;
    background: rgba(0, 0, 0, 0.28);
    color: #eef5f1;
    font: inherit;
    font-size: 11px;
}

.dgp-textarea {
    min-height: 72px;
    line-height: 1.45;
    resize: vertical;
}

.dgp-input:focus,
.dgp-select:focus,
.dgp-textarea:focus {
    border-color: rgba(0, 217, 255, 0.48);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.16);
}

.dgp-input[readonly],
.dgp-input-locked,
.dgp-select:disabled {
    border-color: rgba(125, 255, 156, 0.12);
    background: rgba(125, 255, 156, 0.045);
    color: rgba(238, 245, 241, 0.72);
    cursor: default;
    opacity: 1;
}

.dgp-select option {
    color: #eef5f1;
    background: #050709;
}

.dgp-asset-meta {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(0, 217, 255, 0.13);
    background: rgba(0, 217, 255, 0.045);
    color: rgba(238, 245, 241, 0.58);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.dgp-grid-summary {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(0, 217, 255, 0.13);
    background: rgba(0, 217, 255, 0.045);
    color: rgba(238, 245, 241, 0.62);
    font-size: 10px;
    line-height: 1.45;
}

.dgp-grid-summary strong {
    color: #eef5f1;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.dgp-grid-summary span,
.dgp-grid-summary small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-civic-section {
    background:
        linear-gradient(180deg, rgba(125, 255, 156, 0.035), transparent 58%),
        rgba(255, 255, 255, 0.012);
}

.dgp-civic-section.is-disabled {
    opacity: 0.74;
}

.dgp-civic-score {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(125, 255, 156, 0.16);
    background: rgba(125, 255, 156, 0.045);
    color: rgba(238, 245, 241, 0.66);
    font-size: 10px;
    line-height: 1.35;
}

.dgp-civic-score strong {
    color: #7dff9c;
    font-size: 15px;
    font-weight: 900;
}

.dgp-civic-score span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dgp-civic-score-track {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(238, 245, 241, 0.08);
}

.dgp-civic-score-track i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f2c94c, #7dff9c);
    transition: width 160ms ease;
}

.dgp-civic-field {
    gap: 4px;
}

.dgp-civic-textarea {
    min-height: 54px;
}

.dgp-civic-checklist {
    display: grid;
    gap: 6px;
}

.dgp-civic-check {
    display: grid;
    grid-template-columns: 34px minmax(0, 0.52fr) minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(236, 245, 239, 0.08);
    background: rgba(0, 0, 0, 0.18);
    font-size: 9px;
}

.dgp-civic-check span {
    color: #050709;
    background: #ff9ca8;
    font-size: 8px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    text-transform: uppercase;
}

.dgp-civic-check.is-pass span {
    background: #7dff9c;
}

.dgp-civic-check strong,
.dgp-civic-check small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-civic-check strong {
    color: rgba(238, 245, 241, 0.86);
    font-size: 9px;
    text-transform: uppercase;
}

.dgp-civic-check small {
    color: rgba(238, 245, 241, 0.5);
}

.dgp-mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(236, 245, 239, 0.12);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
}

.dgp-mode-btn {
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-right: 1px solid rgba(236, 245, 239, 0.1);
    background: transparent;
    color: rgba(238, 245, 241, 0.58);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dgp-mode-btn:last-child {
    border-right: 0;
}

.dgp-mode-btn:hover,
.dgp-mode-btn.is-active {
    background: rgba(0, 217, 255, 0.12);
    color: #eef5f1;
}

.dgp-mode-btn.is-active {
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.38);
}

.dgp-color {
    width: 100%;
    height: 34px;
    padding: 2px;
    border: 1px solid rgba(236, 245, 239, 0.1);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.28);
}

.dgp-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 8px;
}

.dgp-btn,
.dgp-icon-btn {
    min-width: 0;
    min-height: 34px;
    border: 1px solid rgba(236, 245, 239, 0.12);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(238, 245, 241, 0.72);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.dgp-btn:hover,
.dgp-icon-btn:hover {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.34);
    color: #eef5f1;
}

.dgp-btn:disabled,
.dgp-icon-btn:disabled {
    cursor: default;
    opacity: 0.42;
}

.dgp-btn:disabled:hover,
.dgp-icon-btn:disabled:hover {
    border-color: rgba(236, 245, 239, 0.12);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(238, 245, 241, 0.72);
}

.dgp-btn-primary {
    border-color: rgba(0, 217, 255, 0.52);
    background: linear-gradient(90deg, rgba(0, 217, 255, 0.2), rgba(125, 255, 156, 0.08));
    color: #eef5f1;
}

.dgp-btn-danger {
    border-color: rgba(255, 102, 120, 0.28);
    color: #ff9ca8;
}

.dgp-icon-btn {
    width: 36px;
    padding: 0;
}

.dgp-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dgp-swatch {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    background: var(--dgp-swatch-color);
    cursor: pointer;
}

.dgp-swatch.is-active {
    outline: 2px solid #00d9ff;
    outline-offset: 2px;
}

.dgp-selected-editor {
    display: grid;
    gap: 8px;
}

.dgp-world-impact {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(125, 255, 156, 0.16);
    background: rgba(125, 255, 156, 0.045);
    color: rgba(238, 245, 241, 0.6);
    font-size: 10px;
    line-height: 1.4;
}

.dgp-world-impact strong {
    color: #7dff9c;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dgp-world-impact span,
.dgp-world-impact small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-nudge-pad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.dgp-nudge-pad .dgp-icon-btn {
    width: auto;
    padding: 0 8px;
}

.dgp-empty {
    padding: 12px;
    border: 1px dashed rgba(236, 245, 239, 0.14);
    color: rgba(238, 245, 241, 0.48);
    font-size: 11px;
    line-height: 1.5;
}

.dgp-mark-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
}

.dgp-list-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(236, 245, 239, 0.1);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
    color: #eef5f1;
    cursor: pointer;
    text-align: left;
}

.dgp-list-item:hover,
.dgp-list-item.is-selected {
    border-color: rgba(0, 217, 255, 0.4);
    background: rgba(0, 217, 255, 0.08);
}

.dgp-list-color {
    grid-row: 1 / 3;
    width: 10px;
    height: 100%;
    min-height: 30px;
    background: var(--dgp-item-color);
}

.dgp-list-item strong,
.dgp-list-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-list-item strong {
    font-size: 12px;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

.dgp-list-item small {
    color: rgba(238, 245, 241, 0.48);
    font-size: 10px;
}

.dgp-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.dgp-workspace-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    border-bottom: 1px solid rgba(236, 245, 239, 0.09);
}

.dgp-grid-status {
    min-height: 38px;
    padding: 11px 14px;
    color: rgba(238, 245, 241, 0.58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dgp-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid rgba(236, 245, 239, 0.09);
}

.dgp-zoom-label {
    min-width: 50px;
    color: rgba(238, 245, 241, 0.62);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.dgp-zoom-fit {
    min-width: 46px;
    padding: 0 10px;
}

.dgp-scroll {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 34px;
    cursor: grab;
}

.district-grid-planner.is-panning .dgp-scroll,
.district-grid-planner.is-panning .dgp-grid,
.district-grid-planner.is-panning .dgp-cell {
    cursor: grabbing;
}

.dgp-board {
    position: relative;
    isolation: isolate;
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.22), 0 24px 70px rgba(0, 0, 0, 0.34);
}

.dgp-grid,
.dgp-items {
    position: absolute;
    inset: 0;
    display: grid;
}

.dgp-grid {
    z-index: 1;
    background: #080c0e;
}

.dgp-grid-large {
    background:
        repeating-linear-gradient(90deg, rgba(238, 245, 241, 0.075) 0 1px, transparent 1px var(--dgp-cell)),
        repeating-linear-gradient(180deg, rgba(238, 245, 241, 0.075) 0 1px, transparent 1px var(--dgp-cell)),
        repeating-linear-gradient(90deg, transparent 0 calc(var(--dgp-major-cell) - 1px), rgba(125, 255, 156, 0.18) calc(var(--dgp-major-cell) - 1px) var(--dgp-major-cell)),
        repeating-linear-gradient(180deg, transparent 0 calc(var(--dgp-major-cell) - 1px), rgba(125, 255, 156, 0.18) calc(var(--dgp-major-cell) - 1px) var(--dgp-major-cell)),
        #080c0e;
    cursor: crosshair;
}

.dgp-items {
    z-index: 3;
    display: block;
    pointer-events: none;
}

.dgp-cell {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(238, 245, 241, 0.08);
    border-bottom: 1px solid rgba(238, 245, 241, 0.08);
    background: rgba(255, 255, 255, 0.012);
    cursor: crosshair;
}

.dgp-cell:hover {
    background: rgba(0, 217, 255, 0.11);
}

.dgp-cell-major-x {
    border-right-color: rgba(125, 255, 156, 0.22);
}

.dgp-cell-major-y {
    border-bottom-color: rgba(125, 255, 156, 0.22);
}

.dgp-world-guides {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.dgp-world-guide {
    position: absolute;
    border: 1px solid rgba(125, 255, 156, 0.24);
    border-radius: 50%;
    box-shadow: inset 0 0 34px rgba(125, 255, 156, 0.025);
}

.dgp-world-guide span {
    position: absolute;
    top: 5px;
    left: 50%;
    max-width: 180px;
    padding: 2px 5px;
    border: 1px solid rgba(236, 245, 239, 0.09);
    background: rgba(4, 7, 9, 0.76);
    color: rgba(238, 245, 241, 0.5);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

.dgp-world-guide-dome {
    border-color: rgba(45, 212, 191, 0.66);
    border-width: 2px;
    background: rgba(45, 212, 191, 0.035);
    box-shadow: 0 0 28px rgba(45, 212, 191, 0.14), inset 0 0 28px rgba(45, 212, 191, 0.06);
}

.dgp-world-guide-ring {
    border-color: rgba(96, 165, 250, 0.22);
}

.dgp-world-guide-void {
    border-color: rgba(255, 94, 122, 0.42);
    border-width: 2px;
}

.dgp-selection-box {
    position: absolute;
    z-index: 13;
    display: none;
    place-items: center;
    border: 2px solid rgba(0, 217, 255, 0.92);
    background: rgba(0, 217, 255, 0.16);
    color: #dffcff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    padding: 4px;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
}

.dgp-selection-box span,
.dgp-selection-box small,
.dgp-hover-footprint span,
.dgp-hover-footprint small {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgp-selection-box small,
.dgp-hover-footprint small {
    color: rgba(255, 255, 255, 0.74);
    font-size: 9px;
    letter-spacing: 0.03em;
}

.dgp-hover-footprint {
    position: absolute;
    z-index: 12;
    display: none;
    place-items: center;
    border: 2px dashed rgba(125, 255, 156, 0.82);
    background: rgba(125, 255, 156, 0.1);
    color: #e9ffee;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding: 4px;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
    text-transform: uppercase;
}

.dgp-hover-footprint.has-overlap {
    border-color: rgba(255, 102, 120, 0.9);
    background: rgba(255, 102, 120, 0.14);
    color: #ffd9de;
}

.dgp-item {
    position: absolute;
    box-sizing: border-box;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 0;
    margin: 2px;
    padding: 4px;
    border: 2px solid color-mix(in srgb, var(--dgp-item-color) 84%, white 16%);
    border-radius: 2px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dgp-item-color) 34%, transparent), color-mix(in srgb, var(--dgp-item-color) 20%, transparent)),
        rgba(4, 7, 9, 0.76);
    color: #ffffff;
    cursor: grab;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    pointer-events: auto;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.dgp-item.is-hit-expanded {
    border-style: dotted;
    background: rgba(4, 7, 9, 0.54);
    overflow: visible;
}

.dgp-item.is-hit-expanded::before {
    content: "";
    position: absolute;
    left: var(--dgp-real-left);
    top: var(--dgp-real-top);
    width: var(--dgp-real-width);
    height: var(--dgp-real-height);
    min-width: 2px;
    min-height: 2px;
    border: 2px solid color-mix(in srgb, var(--dgp-item-color) 88%, white 12%);
    border-radius: 2px;
    background: color-mix(in srgb, var(--dgp-item-color) 36%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--dgp-item-color) 45%, transparent);
    pointer-events: none;
}

.dgp-item:active {
    cursor: grabbing;
}

.dgp-item-floor,
.dgp-item-road,
.dgp-item-dome {
    border-style: dashed;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dgp-item-color) 24%, transparent), color-mix(in srgb, var(--dgp-item-color) 12%, transparent)),
        rgba(4, 7, 9, 0.58);
}

.dgp-item-dome {
    border-width: 3px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(45deg, rgba(45, 212, 191, 0.08) 0 10px, rgba(45, 212, 191, 0.02) 10px 20px),
        rgba(4, 7, 9, 0.34);
    color: rgba(255, 255, 255, 0.64);
}

.dgp-item-dome.is-hit-expanded::before {
    border-radius: 50%;
}

.dgp-item-district {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dgp-item-color) 42%, transparent), color-mix(in srgb, var(--dgp-item-color) 18%, transparent)),
        rgba(4, 7, 9, 0.82);
}

.dgp-item.has-terrain-block {
    border-color: rgba(255, 91, 113, 0.95);
    background:
        repeating-linear-gradient(135deg, rgba(255, 91, 113, 0.26) 0 8px, rgba(255, 91, 113, 0.08) 8px 16px),
        rgba(44, 5, 11, 0.9);
    color: #ffd9de;
    box-shadow: 0 0 18px rgba(255, 91, 113, 0.35);
}

.dgp-terrain-blocked {
    color: #ff8b9d;
}

.dgp-terrain-ok {
    color: #8ef0b3;
}

.dgp-item-floor {
    color: rgba(255, 255, 255, 0.82);
}

.dgp-item-road {
    color: rgba(255, 255, 255, 0.9);
}

.dgp-item.is-selected {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--dgp-item-color) 55%, transparent);
}

.dgp-item span,
.dgp-item small {
    position: relative;
    z-index: 1;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgp-item span {
    font-size: 12px;
    font-weight: 900;
}

.dgp-item small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    font-weight: 800;
}

.dgp-item .dgp-item-meta {
    color: rgba(255, 255, 255, 0.58);
    font-size: 9px;
}

@media (max-width: 840px) {
    .dgp-topbar {
        grid-template-columns: 1fr;
    }

    .dgp-topbar-actions {
        justify-content: stretch;
    }

    .dgp-topbar-actions .dgp-btn {
        flex: 1 1 130px;
    }

    .dgp-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(250px, 40vh) minmax(0, 1fr);
    }

    .dgp-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 217, 255, 0.2);
    }

    .dgp-scroll {
        padding: 18px;
    }
}

/* Keeper ascension selection UI */
.editor-player-deaths {
    color: #ff6666;
    font-size: 10px;
    margin-left: 4px;
}
.editor-select-btn {
    padding: 2px 6px;
    font-size: 10px;
    background: var(--accent-gold, #ffd700);
    color: #000;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 4px;
    flex-shrink: 0;
}
.editor-select-btn:disabled {
    background: #666;
    color: #aaa;
    cursor: default;
}
.editor-select-btn:not(:disabled):hover {
    background: #ffe84d;
}
.editor-extract-btn {
    display: block;
    width: calc(100% - 16px);
    padding: 8px;
    margin: 8px;
    background: linear-gradient(135deg, #ff4444, #ff8800);
    color: #fff;
    font-weight: bold;
    border: 2px solid #ff6600;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.editor-extract-btn:hover {
    background: linear-gradient(135deg, #ff6666, #ffaa33);
}

/* ============================================
   LOGIN QUEUE OVERLAY (AAA-style)
   ============================================ */
#login-queue-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(10, 18, 35, 0.95), rgba(0, 0, 0, 0.98));
    animation: queueFadeIn 0.4s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.queue-card {
    background: linear-gradient(135deg, rgba(10, 18, 35, 0.95), rgba(20, 30, 60, 0.95));
    border: 1px solid rgba(0, 180, 255, 0.4);
    border-radius: 16px;
    padding: 40px 48px;
    max-width: 480px;
    width: 90vw;
    text-align: center;
    font-family: 'Courier New', monospace;
    color: #c8ddf0;
    box-shadow: 0 0 60px rgba(0, 140, 255, 0.2), inset 0 0 20px rgba(0, 180, 255, 0.05);
}

.queue-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 6px;
}

.queue-header h2 {
    color: #ff8844;
    font-size: 13px;
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
}

.queue-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 136, 68, 0.2);
    border-top-color: #ff8844;
    border-radius: 50%;
    animation: queueSpin 1s linear infinite;
}

@keyframes queueSpin {
    to { transform: rotate(360deg); }
}

.queue-subtitle {
    color: #8899aa;
    font-size: 11px;
    margin: 0 0 28px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.queue-position-display {
    margin: 20px 0 28px;
}

.queue-position-label {
    color: #668899;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.queue-position-number {
    color: #00ddff;
    font-size: 72px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 24px rgba(0, 220, 255, 0.6), 0 0 48px rgba(0, 140, 255, 0.3);
    font-family: 'Courier New', monospace;
    letter-spacing: -2px;
    transition: transform 0.2s ease;
}

.queue-position-total {
    color: #668899;
    font-size: 12px;
    margin-top: 6px;
    letter-spacing: 1px;
}

.queue-eta {
    color: #8899aa;
    font-size: 12px;
    margin: 16px 0;
    letter-spacing: 1px;
}

.queue-eta span {
    color: #00ddff;
    font-weight: bold;
    font-size: 14px;
}

.queue-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 40, 80, 0.6);
    border-radius: 3px;
    overflow: hidden;
    margin: 20px 0 24px;
    border: 1px solid rgba(0, 180, 255, 0.15);
}

.queue-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00aaff, #00ddff, #00aaff);
    background-size: 200% 100%;
    animation: queueShimmer 2s linear infinite;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(0, 220, 255, 0.6);
}

@keyframes queueShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.queue-tip {
    color: #556677;
    font-size: 10px;
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.queue-fade-out {
    animation: queueFadeOut 0.4s ease forwards;
}

@keyframes queueFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes queueFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.05); }
}

@media (max-width: 480px) {
    .queue-card {
        padding: 28px 24px;
    }
    .queue-position-number {
        font-size: 56px;
    }
}

/* ============================================
   POST-TUTORIAL ONBOARDING OVERLAY
   ============================================ */
#onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0.75);
    animation: fadeIn 0.4s ease;
}

.onboarding-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--panel-bg, rgba(10, 18, 35, 0.95));
    border: 1px solid var(--panel-border, rgba(0, 180, 255, 0.3));
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    width: 90vw;
    color: var(--text-primary, #c8ddf0);
    font-family: var(--font-body, 'Courier New', monospace);
    box-shadow: 0 0 40px rgba(0, 120, 200, 0.2);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .onboarding-card {
        max-height: calc(100dvh - 32px);
    }
}

.onboarding-card h2 {
    color: var(--text-accent, #00ddff);
    font-size: 18px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.onboarding-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 200, 255, 0.28);
    border-radius: 6px;
    background: rgba(0, 20, 35, 0.72);
    color: var(--text-accent, #00ddff);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.onboarding-close:hover,
.onboarding-close:focus-visible {
    background: rgba(0, 120, 200, 0.28);
    border-color: rgba(0, 220, 255, 0.55);
    outline: none;
}

.onboarding-scroll {
    min-height: 0;
    margin-bottom: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.onboarding-intro {
    color: var(--text-secondary, #8899aa);
    font-size: 12px;
    margin: 0 0 16px 0;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 80, 160, 0.1);
    border: 1px solid rgba(0, 120, 200, 0.15);
}

.onboarding-icon {
    font-size: 20px;
    min-width: 28px;
    text-align: center;
    line-height: 1.4;
}

.onboarding-step strong {
    color: var(--text-accent, #00ddff);
    font-size: 12px;
    display: block;
    margin-bottom: 2px;
}

.onboarding-step p {
    color: var(--text-secondary, #8899aa);
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
}

.onboarding-dismiss {
    width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid var(--accent, rgba(0, 200, 255, 0.4));
    background: rgba(0, 120, 200, 0.2);
    color: var(--text-accent, #00ddff);
    font-family: var(--font-body, 'Courier New', monospace);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    flex: 0 0 auto;
    transition: background 0.15s, border-color 0.15s;
}

.onboarding-dismiss:hover,
.onboarding-dismiss:focus-visible {
    background: rgba(0, 140, 220, 0.35);
    border-color: rgba(0, 220, 255, 0.6);
    outline: none;
}

@media (max-width: 640px), (max-height: 680px) {
    #onboarding-overlay {
        align-items: center;
        padding: 8px;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .onboarding-card {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 16px);
        padding: 16px 14px 14px;
        border-radius: 10px;
    }

    @supports (height: 100dvh) {
        .onboarding-card {
            max-height: calc(100dvh - 16px);
        }
    }

    .onboarding-card h2 {
        padding-right: 46px;
        font-size: 15px;
        line-height: 1.25;
        letter-spacing: 1px;
    }

    .onboarding-close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .onboarding-scroll {
        margin-bottom: 12px;
    }

    .onboarding-intro {
        margin-bottom: 10px;
        font-size: 11px;
        line-height: 1.35;
    }

    .onboarding-steps {
        gap: 8px;
    }

    .onboarding-step {
        gap: 8px;
        padding: 8px 9px;
        border-radius: 6px;
    }

    .onboarding-icon {
        min-width: 22px;
        font-size: 16px;
        line-height: 1.2;
    }

    .onboarding-step strong {
        font-size: 11px;
    }

    .onboarding-step p {
        font-size: 10px;
        line-height: 1.3;
    }

    .onboarding-dismiss {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================================
   MAIN MENU — REDESIGN v3 (Editorial Frontier Console)
   Reference: Marathon / Death Stranding / Disco Elysium menus.
   Scoped to #start-screen[data-mm]. Pure presentation.

   Design rules:
   - Matte black. No aurora, no glass, no shimmer.
   - Hairline 1px borders, not card frames.
   - Sharp corners (2–4px radius max). No pill buttons.
   - Single brass accent + state colors only (online / warning).
   - Editorial display sans for headings, monospace for data labels.
   - Asymmetric data-readout layouts. Numbers large, labels small & tracked.
   - No ambient animation. Instant, crisp interaction feedback.
   ================================================================ */

#start-screen[data-mm] {
    /* Pure matte stack */
    --o-bg:          #050507;
    --o-bg-1:        #0a0a0d;
    --o-bg-2:        #101014;
    --o-bg-hover:    #14141a;

    /* Hairline system */
    --o-line:        rgba(255, 255, 255, 0.08);
    --o-line-soft:   rgba(255, 255, 255, 0.04);
    --o-line-strong: rgba(255, 255, 255, 0.18);

    /* Typography */
    --o-text:        #f0efec;
    --o-text-2:      rgba(240, 239, 236, 0.64);
    --o-text-3:      rgba(240, 239, 236, 0.38);
    --o-text-4:      rgba(240, 239, 236, 0.22);

    /* Canonical Orbryn cyan — matches icon, minimap, chat, skills */
    --o-cyan:        #00d9ff;
    --o-cyan-hi:     #8ff0ff;
    --o-cyan-dim:    rgba(0, 217, 255, 0.14);
    --o-cyan-line:   rgba(0, 217, 255, 0.38);

    /* Rift violet — void/KEEPER aura */
    --o-violet:      #6c3fff;
    --o-violet-hi:   #a68bff;
    --o-violet-dim:  rgba(108, 63, 255, 0.18);
    --o-violet-line: rgba(108, 63, 255, 0.40);

    /* Legacy aliases — kept to not break any inherited rule */
    --o-brass:       var(--o-cyan);
    --o-brass-hi:    var(--o-cyan-hi);
    --o-brass-dim:   var(--o-cyan-dim);
    --o-brass-line:  var(--o-cyan-line);

    /* Semantic state colors (locked to meaning — no decorative use) */
    --o-online:      #7dff9c;
    --o-warn:        #ff6a3d;
    --o-danger:      #ff445a;

    /* Type stacks */
    --o-sans:        ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    --o-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

    background: var(--o-bg);
    color: var(--o-text);
}

/* Kill global screen chrome on the menu: no scanline, no drifting grid, no backdrop blur. */
#start-screen[data-mm].screen { backdrop-filter: none; -webkit-backdrop-filter: none; }
#start-screen[data-mm].screen::before,
#start-screen[data-mm].screen::after { display: none !important; }

/* Static hairline grid, 56px. Subtle and anchored — doesn't drift. */
#start-screen[data-mm]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

/* Atmospheric cyan/violet halo at top — rift light bleed. Subtle, always-on. */
#start-screen[data-mm]::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 320px;
    background:
        radial-gradient(ellipse 60% 90% at 30% -10%, rgba(0, 217, 255, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at 75% -5%, rgba(108, 63, 255, 0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* ---------- HEADER ---------- */
#start-screen[data-mm] .mm-header {
    padding: 14px 20px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: rgba(5, 5, 7, 0.72);
    border-bottom: 1px solid var(--o-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 20;
    /* inherit position from existing layout: relative on mobile, fixed on desktop */
}
#start-screen[data-mm] .mm-hamburger {
    background: transparent;
    border: 1px solid var(--o-line);
    border-radius: 2px;
    width: 42px; height: 42px;
    min-height: 42px;
    padding: 0;
}
#start-screen[data-mm] .mm-hamburger:hover,
#start-screen[data-mm] .mm-hamburger:focus-visible {
    background: var(--o-bg-hover);
    border-color: var(--o-line-strong);
}
#start-screen[data-mm] .mm-hamburger-icon {
    width: 16px; height: 16px;
    filter: brightness(0) invert(0.85);
    opacity: 0.85;
}

/* Wordmark: tight display sans with a monospace version tag on its right.
   No gradient — just high-contrast type. */
#start-screen[data-mm] .mm-title {
    font-family: var(--o-sans);
    font-size: 1.05em;
    letter-spacing: 0.42em;
    font-weight: 700;
    color: var(--o-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
    text-shadow: none;
    position: relative;
    padding: 0 0 0 14px;
}
#start-screen[data-mm] .mm-title::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 2px;
    background: var(--o-brass);
}

#start-screen[data-mm] .mm-bell {
    width: 42px; height: 42px;
    background: transparent;
    border: 1px solid var(--o-line);
    border-radius: 2px;
}
#start-screen[data-mm] .mm-bell:hover,
#start-screen[data-mm] .mm-bell:focus-visible {
    background: var(--o-bg-hover);
    border-color: var(--o-line-strong);
}
#start-screen[data-mm] .mm-bell-icon {
    width: 16px; height: 16px;
    filter: brightness(0) invert(0.8);
    opacity: 0.8;
}
#start-screen[data-mm] .mm-bell-badge {
    background: var(--o-brass);
    color: #001018;
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 700;
    min-width: 14px; height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    border: 1.5px solid var(--o-bg);
}

/* ---------- CONTENT ---------- */
#start-screen[data-mm] .mm-content {
    padding: 0 20px 96px;
    position: relative;
    z-index: 2;
}
#start-screen[data-mm] .mm-tab { gap: 0; }

/* ---------- HERO: full-bleed editorial title + rift atmosphere ---------- */
#start-screen[data-mm] .mm-hero-banner {
    height: 280px;
    margin: 16px -20px 0;    /* bleed to screen edges */
    border-radius: 0;
    border: none;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
        /* Base foreground fade for legibility */
        linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,0.35) 55%, rgba(5,5,7,0.85) 100%),
        /* Cyan sweep from upper-left */
        radial-gradient(ellipse 70% 100% at 15% 10%, rgba(0, 217, 255, 0.22) 0%, transparent 60%),
        /* Violet pool from lower-right */
        radial-gradient(ellipse 75% 90% at 95% 95%, rgba(108, 63, 255, 0.32) 0%, transparent 65%),
        /* Magenta rift glow far upper-right */
        radial-gradient(ellipse 40% 60% at 90% 5%, rgba(160, 32, 240, 0.18) 0%, transparent 60%),
        /* Near-black base with a cool hue */
        linear-gradient(145deg, #04060e 0%, #070a18 55%, #0b0720 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
/* Scan line removed per user request. */
#start-screen[data-mm] .mm-hero-overlay::after { content: none; display: none; }
/* Hero star-field micro-dots: static, rendered via radial repeating. */
#start-screen[data-mm] .mm-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.45), transparent 60%),
        radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1px 1px at 34% 72%, rgba(255,255,255,0.25), transparent 60%),
        radial-gradient(1px 1px at 88% 54%, rgba(255,255,255,0.30), transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 42%, rgba(0, 217, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 20% 88%, rgba(168, 139, 250, 0.5), transparent 60%);
    pointer-events: none;
    z-index: 1;
    display: block;
    opacity: 1;
    animation: mmHeroStars 6s ease-in-out infinite;
}
@keyframes mmHeroStars {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}
#start-screen[data-mm] .mm-hero-bg {
    opacity: 0.32;
    mix-blend-mode: luminosity;
    filter: contrast(115%) brightness(0.75);
}
#start-screen[data-mm] .mm-hero-overlay {
    inset: 0;
    padding: 28px 24px;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    background: none;
}
#start-screen[data-mm] .mm-hero-overlay::before { content: none; display: none; }

/* Corner brackets drawn via background-image on the overlay — now cyan */
#start-screen[data-mm] .mm-hero-banner {
    --br-c: rgba(0, 217, 255, 0.55);
    --br-s: 16px;    /* bracket leg length */
    --br-w: 1px;     /* bracket stroke */
}
#start-screen[data-mm] .mm-hero-bg {
    /* Place 4 corner brackets over the photo using box-shadow trick via a wrapping ::before. */
}
#start-screen[data-mm] .mm-hero-overlay { position: absolute; }
#start-screen[data-mm] .mm-hero-overlay {
    /* Corner brackets using 4 pseudo-elements is not possible on one selector — so we
       draw them on the overlay with background-image corner gradients. */
    background-image:
        /* top-left */
        linear-gradient(var(--br-c), var(--br-c)) top left / var(--br-s) var(--br-w) no-repeat,
        linear-gradient(var(--br-c), var(--br-c)) top left / var(--br-w) var(--br-s) no-repeat,
        /* top-right */
        linear-gradient(var(--br-c), var(--br-c)) top right / var(--br-s) var(--br-w) no-repeat,
        linear-gradient(var(--br-c), var(--br-c)) top right / var(--br-w) var(--br-s) no-repeat,
        /* bottom-left */
        linear-gradient(var(--br-c), var(--br-c)) bottom left / var(--br-s) var(--br-w) no-repeat,
        linear-gradient(var(--br-c), var(--br-c)) bottom left / var(--br-w) var(--br-s) no-repeat,
        /* bottom-right */
        linear-gradient(var(--br-c), var(--br-c)) bottom right / var(--br-s) var(--br-w) no-repeat,
        linear-gradient(var(--br-c), var(--br-c)) bottom right / var(--br-w) var(--br-s) no-repeat;
    background-origin: border-box;
}

/* Hero title: big editorial display type, left-aligned, clean + subtle rift glow. */
#start-screen[data-mm] .mm-hero-title {
    font-family: var(--o-sans);
    font-size: 2.4em;
    line-height: 0.95;
    letter-spacing: -0.015em;
    font-weight: 800;
    color: var(--o-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow:
        0 0 18px rgba(0, 217, 255, 0.18),
        0 0 40px rgba(108, 63, 255, 0.12);
    filter: none;
    text-transform: none;
    max-width: 18ch;
    position: relative;
    z-index: 3;
}
#start-screen[data-mm] .mm-hero-sub {
    font-family: var(--o-mono);
    font-size: 0.72em;
    letter-spacing: 0.38em;
    color: var(--o-cyan);
    margin-top: 16px;
    text-transform: uppercase;
    position: relative;
    padding-left: 22px;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.35);
    z-index: 3;
}
#start-screen[data-mm] .mm-hero-sub::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 14px; height: 1px;
    background: var(--o-cyan);
    box-shadow: 0 0 6px rgba(0, 217, 255, 0.7);
}
#start-screen[data-mm] .mm-hero-overlay { z-index: 3; }

/* ---------- STATUS: inline readout strip instead of pills ---------- */
#start-screen[data-mm] .mm-status-bar {
    margin: 14px 0 20px;
    padding: 10px 0;
    border-top: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
    background: transparent;
}
#start-screen[data-mm] .mm-server-pill {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--o-text-2);
    text-transform: uppercase;
    gap: 8px;
}
#start-screen[data-mm] .mm-server-dot {
    width: 6px; height: 6px;
    background: var(--o-online);
    border-radius: 0;                /* square status dot */
    box-shadow: 0 0 0 0;
    animation: none;
}
#start-screen[data-mm] .mm-version-pill {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

/* ---------- SECTIONS: borderless with leading ordinal label ---------- */
#start-screen[data-mm] .mm-section {
    background: transparent;
    border: none;
    border-top: 1px solid var(--o-line);
    border-radius: 0;
    padding: 22px 0 24px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0;
}
#start-screen[data-mm] .mm-section::before { display: none; }
#start-screen[data-mm] .mm-section:first-child { border-top: none; padding-top: 16px; }

#start-screen[data-mm] .mm-section-header {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--o-text-3);
    text-transform: uppercase;
    padding-bottom: 16px;
    border-bottom: none;
    margin-bottom: 0;
    position: relative;
    padding-left: 28px;
}
#start-screen[data-mm] .mm-section-header::before {
    content: '01';
    position: absolute;
    left: 0; top: 0;
    color: var(--o-brass);
    font-weight: 600;
}
#start-screen[data-mm] .mm-section:nth-of-type(2) .mm-section-header::before { content: '02'; }
#start-screen[data-mm] .mm-section:nth-of-type(3) .mm-section-header::before { content: '03'; }
#start-screen[data-mm] .mm-section:nth-of-type(4) .mm-section-header::before { content: '04'; }
#start-screen[data-mm] .mm-section:nth-of-type(5) .mm-section-header::before { content: '05'; }
#start-screen[data-mm] .mm-section:nth-of-type(6) .mm-section-header::before { content: '06'; }

/* ---------- FEATURE STRIP: data-readout, not cards ---------- */
#start-screen[data-mm] .mm-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
}
#start-screen[data-mm] .mm-feature-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    opacity: 1 !important;
    pointer-events: auto;
    position: relative;
    overflow: visible;
}
#start-screen[data-mm] .mm-feature-card + .mm-feature-card {
    border-left: 1px solid var(--o-line) !important;
}
#start-screen[data-mm] .mm-feature-card::after { content: none !important; display: none; }

#start-screen[data-mm] .mm-feature-icon {
    width: 20px !important; height: 20px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    filter: brightness(0) invert(0.95) !important;
    opacity: 0.9;
    margin: 0;
}
#start-screen[data-mm] .mm-feature-label {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--o-text);
    text-transform: none;
}
#start-screen[data-mm] .mm-feature-desc {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
    line-height: 1.5;
}

/* ---------- STORE BANNER: restrained, not a gradient card ---------- */
#start-screen[data-mm] .mm-store-card {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-left: 2px solid var(--o-brass);
    border-radius: 2px;
    padding: 18px 20px;
    box-shadow: none;
    margin: 20px 0 0;
    overflow: hidden;
    transition: background 150ms ease, border-color 150ms ease;
}
#start-screen[data-mm] .mm-store-card:hover,
#start-screen[data-mm] .mm-store-card:focus-visible {
    background: var(--o-bg-2);
    border-color: var(--o-line-strong);
    border-left-color: var(--o-brass-hi);
    transform: none;
    box-shadow: none;
}
#start-screen[data-mm] .mm-store-card-glow { display: none !important; }

#start-screen[data-mm] .mm-store-card-content {
    gap: 16px;
    align-items: center;
}
#start-screen[data-mm] .mm-store-card-badge {
    background: transparent;
    color: var(--o-brass);
    border: 1px solid var(--o-brass-line);
    padding: 4px 8px;
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    font-weight: 600;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
}
#start-screen[data-mm] .mm-store-card-title {
    font-family: var(--o-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--o-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}
#start-screen[data-mm] .mm-store-card-sub {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
    flex: 1;
}
#start-screen[data-mm] .mm-store-card-arrow {
    color: var(--o-brass);
    font-size: 14px;
    filter: none;
}
#start-screen[data-mm] .mm-store-card:hover .mm-store-card-arrow { color: var(--o-brass-hi); transform: translateX(2px); }

/* ---------- LORE WIDGET: same quiet banner treatment ---------- */
#start-screen[data-mm] .mm-lore-widget {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-left: 2px solid rgba(125, 255, 156, 0.5);   /* unique teal for "DISCOVER" cue */
    border-radius: 2px;
    padding: 16px 20px;
    box-shadow: none;
    margin-top: 12px;
    transition: background 150ms ease, border-color 150ms ease;
}
#start-screen[data-mm] .mm-lore-widget:hover {
    background: var(--o-bg-2);
    border-color: var(--o-line-strong);
    border-left-color: rgba(125, 255, 156, 0.85);
    transform: none;
    box-shadow: none;
}
#start-screen[data-mm] .mm-lore-widget-glow { display: none !important; }
#start-screen[data-mm] .mm-lore-widget-content { gap: 14px; }
#start-screen[data-mm] .mm-lore-widget-icon {
    font-size: 18px;
    filter: none;
    width: 22px;
    text-align: center;
    opacity: 0.9;
}
#start-screen[data-mm] .mm-lore-widget-title {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--o-text);
    text-transform: none;
}
#start-screen[data-mm] .mm-lore-widget-sub {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-lore-widget-arrow {
    color: rgba(125, 255, 156, 0.7);
    font-size: 13px;
}

/* ---------- CHARACTER SLOTS: hairline data-rows, not cards ---------- */
#start-screen[data-mm] .save-slots { gap: 0; margin-top: 18px; margin-bottom: 0; border-top: 1px solid var(--o-line); }
#start-screen[data-mm] .save-slot {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    padding: 18px 0;
    box-shadow: none;
    transform: none;
    transition: background 150ms ease;
    display: grid;
    grid-template-columns: 6px 1fr auto;
    gap: 16px;
    align-items: center;
}
#start-screen[data-mm] .save-slot::before {
    content: '';
    position: static;
    width: 6px;
    height: 26px;
    background: var(--o-line-strong);
    margin: 0;
    border-radius: 0;
    filter: none;
    opacity: 1;
    display: block;
    grid-column: 1;
}
#start-screen[data-mm] .save-slot:hover,
#start-screen[data-mm] .save-slot:focus-visible {
    background: var(--o-bg-1);
    transform: none;
    border-color: var(--o-line);
    box-shadow: none;
}
#start-screen[data-mm] .save-slot:hover::before { background: var(--o-brass); }
#start-screen[data-mm] .save-slot.occupied::before { background: var(--o-brass); opacity: 1; }
#start-screen[data-mm] .slot-info {
    grid-column: 2;
    gap: 2px;
    min-width: 0;
}
#start-screen[data-mm] .slot-label {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--o-text-3);
    text-transform: uppercase;
    font-weight: 500;
}
#start-screen[data-mm] .slot-detail {
    font-family: var(--o-sans);
    font-size: 15px;
    color: var(--o-text-3);
    letter-spacing: 0;
}
#start-screen[data-mm] .slot-detail.has-data { color: var(--o-text); }
#start-screen[data-mm] .slot-char-name {
    font-family: var(--o-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--o-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}
#start-screen[data-mm] .slot-char-stats {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--o-text-3);
    text-transform: uppercase;
    margin-top: 4px;
}
#start-screen[data-mm] .slot-actions {
    grid-column: 3;
    width: auto;
    justify-content: flex-end;
    gap: 8px;
}

/* Ghost-style buttons: no gradients, no glow. */
#start-screen[data-mm] .btn-slot {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 2px;
    text-transform: uppercase;
    border: 1px solid var(--o-line-strong);
    background: transparent;
    color: var(--o-text);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    overflow: hidden;
}
#start-screen[data-mm] .btn-slot::after { display: none !important; }

#start-screen[data-mm] .btn-new-char {
    background: transparent;
    color: var(--o-text-2);
    border-color: var(--o-line);
}
#start-screen[data-mm] .btn-new-char:hover,
#start-screen[data-mm] .btn-new-char:focus-visible {
    background: var(--o-bg-hover);
    color: var(--o-text);
    border-color: var(--o-line-strong);
    box-shadow: none;
    transform: none;
}
#start-screen[data-mm] .btn-play-slot {
    background: var(--o-brass);
    color: #001018;
    border-color: var(--o-brass);
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
}
#start-screen[data-mm] .btn-play-slot:hover,
#start-screen[data-mm] .btn-play-slot:focus-visible {
    background: var(--o-brass-hi);
    color: #000a10;
    border-color: var(--o-brass-hi);
    box-shadow: none;
    transform: none;
}
#start-screen[data-mm] .btn-delete-slot,
#start-screen[data-mm] [class*="btn-delete"] {
    color: var(--o-danger);
    border-color: rgba(255, 68, 90, 0.25);
}
#start-screen[data-mm] .btn-delete-slot:hover {
    background: rgba(255, 68, 90, 0.08);
    border-color: var(--o-danger);
    color: var(--o-danger);
}

/* In the menu save slots wrap layout reset so info + actions share one row on mobile. */
#start-screen[data-mm] .save-slot { flex-wrap: nowrap; }
#start-screen[data-mm] .slot-actions { width: auto; }

/* ---------- AUTH GATE: editorial CTA ---------- */
#start-screen[data-mm] .mm-auth-gate-inner {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-left: 2px solid var(--o-brass);
    border-radius: 2px;
    padding: 28px 22px;
    text-align: left;
}
#start-screen[data-mm] .mm-auth-gate-icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
    width: 36px; height: 36px;
    align-self: flex-start;
}
#start-screen[data-mm] .mm-auth-gate-title {
    font-family: var(--o-sans);
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--o-text);
    margin-top: 16px;
}
#start-screen[data-mm] .mm-auth-gate-sub {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--o-text-3);
    line-height: 1.6;
    text-transform: none;
    margin: 8px 0 20px;
}
#start-screen[data-mm] .mm-auth-gate-btn {
    background: var(--o-brass) !important;
    color: #001018 !important;
    border: 1px solid var(--o-brass) !important;
    border-radius: 2px !important;
    font-family: var(--o-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 14px 22px !important;
    width: auto !important;
    margin: 0 !important;
}
#start-screen[data-mm] .mm-auth-gate-btn:hover {
    background: var(--o-brass-hi) !important;
    color: #000a10 !important;
    box-shadow: none !important;
    transform: none !important;
}
#start-screen[data-mm] .mm-auth-gate-btn::after { display: none !important; }

/* ---------- BOTTOM NAV: thin rail, no FAB bulge ---------- */
#start-screen[data-mm] .mm-bottom-nav {
    background: rgba(5, 5, 7, 0.92);
    border-top: 1px solid var(--o-line);
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 56px;
    align-items: stretch;
    justify-content: space-between;
}
#start-screen[data-mm] .mm-bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--o-line);
    pointer-events: none;
}
#start-screen[data-mm] .mm-nav-item {
    padding: 0 4px;
    gap: 4px;
    color: var(--o-text-3);
    min-height: 56px;
    flex: 1 1 0;
    background: transparent;
    box-shadow: none !important;
    border-radius: 0;
    position: relative;
    transition: color 120ms ease;
}
#start-screen[data-mm] .mm-nav-item:hover,
#start-screen[data-mm] .mm-nav-item:focus-visible { color: var(--o-text); }
#start-screen[data-mm] .mm-nav-item:active { transform: none; }
#start-screen[data-mm] .mm-nav-active { color: var(--o-text); }
#start-screen[data-mm] .mm-nav-active::after {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 2px;
    background: var(--o-brass);
    border-radius: 0;
    box-shadow: none;
}
#start-screen[data-mm] .mm-nav-icon {
    width: 20px; height: 20px;
    filter: brightness(0) invert(0.75);
    opacity: 0.85;
    transition: filter 120ms ease, opacity 120ms ease;
}
#start-screen[data-mm] .mm-nav-active .mm-nav-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}
#start-screen[data-mm] .mm-nav-label {
    font-family: var(--o-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    color: inherit;
}

/* FAB: flatten to a regular nav item — no bulge, no glow */
#start-screen[data-mm] .mm-nav-fab {
    flex: 1 1 0;
    padding: 0 4px;
    z-index: auto;
}
#start-screen[data-mm] .mm-fab-circle {
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid var(--o-line-strong);
    border-radius: 2px;
    margin: 0 auto 2px;
    box-shadow: none;
    transition: border-color 120ms ease, background 120ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#start-screen[data-mm] .mm-nav-fab:hover .mm-fab-circle {
    border-color: var(--o-brass-line);
    background: transparent;
    box-shadow: none;
}
#start-screen[data-mm] .mm-nav-fab.mm-nav-active .mm-fab-circle {
    background: var(--o-brass);
    border-color: var(--o-brass);
    box-shadow: none;
}
#start-screen[data-mm] .mm-fab-icon {
    width: 14px; height: 14px;
    filter: brightness(0) invert(0.75);
    opacity: 0.85;
}
#start-screen[data-mm] .mm-nav-fab:hover .mm-fab-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}
#start-screen[data-mm] .mm-nav-fab.mm-nav-active .mm-fab-icon {
    filter: brightness(0) invert(0.1);
    opacity: 1;
}
#start-screen[data-mm] .mm-nav-fab.mm-nav-active::after {
    display: block;
    top: 0; left: 30%; right: 30%;
    height: 2px;
    background: var(--o-brass);
}
#start-screen[data-mm] .mm-fab-label {
    margin-top: 4px;
    color: inherit;
    text-shadow: none;
}

/* ---------- DRAWER ---------- */
#start-screen[data-mm] .mm-drawer {
    background: var(--o-bg);
    border-right: 1px solid var(--o-line);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#start-screen[data-mm] .mm-drawer-header {
    padding: 28px 24px 20px;
    background: transparent;
    border-bottom: 1px solid var(--o-line);
}
#start-screen[data-mm] .mm-drawer-title {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.42em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--o-text);
    margin: 0;
    padding-left: 14px;
    position: relative;
}
#start-screen[data-mm] .mm-drawer-title::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 2px;
    background: var(--o-brass);
}
#start-screen[data-mm] .mm-drawer-email {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    margin-top: 12px;
    padding-left: 14px;
}
#start-screen[data-mm] .mm-drawer-item {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--o-text-2);
    padding: 14px 24px;
    gap: 14px;
    border-left: 2px solid transparent;
}
#start-screen[data-mm] .mm-drawer-item:hover,
#start-screen[data-mm] .mm-drawer-item:focus-visible {
    background: var(--o-bg-1);
    color: var(--o-text);
    border-left-color: var(--o-brass);
}
#start-screen[data-mm] .mm-drawer-icon {
    width: 16px; height: 16px;
    filter: brightness(0) invert(0.7);
    opacity: 0.85;
}
#start-screen[data-mm] .mm-drawer-item:hover .mm-drawer-icon { opacity: 1; }
#start-screen[data-mm] .mm-drawer-item-danger { color: var(--o-danger); }
#start-screen[data-mm] .mm-drawer-item-danger:hover { background: rgba(255, 68, 90, 0.06); border-left-color: var(--o-danger); }
#start-screen[data-mm] .mm-drawer-divider { background: var(--o-line); margin: 12px 24px; }

/* ---------- PROFILE TAB ---------- */
#start-screen[data-mm] .mm-profile-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    padding: 22px 0;
    box-shadow: none;
    gap: 16px;
}
#start-screen[data-mm] .mm-profile-avatar {
    background: var(--o-bg-2);
    border: 1px solid var(--o-line-strong);
    border-radius: 2px;
    box-shadow: none;
    width: 56px; height: 56px;
}
#start-screen[data-mm] .mm-profile-avatar-icon { filter: brightness(0) invert(0.6); opacity: 1; }
#start-screen[data-mm] .mm-profile-name {
    font-family: var(--o-sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.005em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--o-text);
    text-shadow: none;
}
#start-screen[data-mm] .mm-profile-email {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--o-text-3);
}

#start-screen[data-mm] .mm-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 12px;
}
#start-screen[data-mm] .mm-account-email {
    font-family: var(--o-mono);
    font-size: 12px;
    color: var(--o-text-2);
    letter-spacing: 0.03em;
}
#start-screen[data-mm] .mm-btn-signout {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 68, 90, 0.3);
    border-radius: 2px;
    color: var(--o-danger);
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-btn-signout:hover {
    background: rgba(255, 68, 90, 0.08);
    border-color: var(--o-danger);
    color: var(--o-danger);
    box-shadow: none;
}

/* Stats grid: big editorial numbers, small labels underneath. */
#start-screen[data-mm] .mm-stats-grid { gap: 0; border-top: 1px solid var(--o-line); border-left: 1px solid var(--o-line); }
#start-screen[data-mm] .mm-stat-card {
    background: transparent;
    border: none;
    border-right: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    padding: 20px 14px;
    align-items: flex-start;
    text-align: left;
    box-shadow: none;
}
#start-screen[data-mm] .mm-stat-card-value {
    font-family: var(--o-sans);
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--o-text);
}
#start-screen[data-mm] .mm-stat-card-label {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--o-text-3);
    margin-top: 6px;
    text-transform: uppercase;
}

/* ---------- NEWS ---------- */
#start-screen[data-mm] .mm-news-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--o-line);
    gap: 14px;
}
#start-screen[data-mm] .mm-news-item:last-child { border-bottom: none; }
#start-screen[data-mm] .mm-news-badge {
    background: transparent;
    border: 1px solid var(--o-line-strong);
    border-radius: 0;
    color: var(--o-text-2);
    font-family: var(--o-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 3px 7px;
    font-weight: 600;
    margin-top: 3px;
}
#start-screen[data-mm] .mm-news-badge-update {
    border-color: var(--o-brass-line);
    color: var(--o-brass);
    background: transparent;
}
#start-screen[data-mm] .mm-news-title {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--o-text);
    margin-bottom: 4px;
}
#start-screen[data-mm] .mm-news-desc {
    font-family: var(--o-sans);
    font-size: 13px;
    color: var(--o-text-2);
    line-height: 1.55;
    letter-spacing: 0;
}

/* ---------- INVENTORY / DAILY / BATTLE PASS: hairline surfaces ---------- */
#start-screen[data-mm] .mm-inv-grid,
#start-screen[data-mm] .mm-daily-grid {
    gap: 8px;
}
#start-screen[data-mm] .mm-inv-slot,
#start-screen[data-mm] .mm-daily-slot {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-radius: 2px;
}
#start-screen[data-mm] .mm-daily-slot:hover { background: var(--o-bg-2); }
#start-screen[data-mm] .mm-daily-claimable {
    border-color: var(--o-brass-line);
    background: var(--o-bg-1);
    animation: none;
    box-shadow: none;
}
#start-screen[data-mm] .mm-daily-claimable:hover {
    border-color: var(--o-brass);
    background: var(--o-bg-2);
}
#start-screen[data-mm] .mm-daily-premium {
    border-color: var(--o-brass-line);
    background: var(--o-bg-1);
}
#start-screen[data-mm] .mm-daily-claimed {
    border-color: rgba(125, 255, 156, 0.28);
    background: rgba(125, 255, 156, 0.03);
}
#start-screen[data-mm] .mm-daily-check { color: var(--o-online); }
#start-screen[data-mm] .mm-daily-day {
    font-family: var(--o-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--o-text-3);
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-daily-reward {
    font-family: var(--o-sans);
    font-size: 12px;
    color: var(--o-text);
}

/* Character switcher pills */
#start-screen[data-mm] .mm-char-switcher {
    gap: 0;
    margin: 18px 0 0;
    border: 1px solid var(--o-line);
    border-radius: 2px;
    overflow: hidden;
}
#start-screen[data-mm] .mm-char-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--o-line);
    font-family: var(--o-mono);
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.14em;
    color: var(--o-text-3);
    text-transform: uppercase;
    min-height: 44px;
    padding: 10px 14px;
    transition: background 120ms ease, color 120ms ease;
    overflow: visible;
}
#start-screen[data-mm] .mm-char-pill:last-child { border-right: none; }
#start-screen[data-mm] .mm-char-pill:hover {
    background: var(--o-bg-1);
    color: var(--o-text);
    border-color: var(--o-line);
}
#start-screen[data-mm] .mm-char-pill-active {
    background: var(--o-brass);
    color: #001018;
    border-color: var(--o-brass);
    box-shadow: none;
    font-weight: 700;
}

/* ---------- BASE TAB ---------- */
#start-screen[data-mm] .mm-base-overview { gap: 18px; padding: 18px 0; }
#start-screen[data-mm] .mm-base-icon-large { width: 64px; height: 64px; }
#start-screen[data-mm] #mm-base-ring-detail { stroke: var(--o-brass); filter: none; }
#start-screen[data-mm] .mm-base-detail-icon { filter: brightness(0) invert(0.85); }
#start-screen[data-mm] .mm-stat-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--o-line);
}
#start-screen[data-mm] .mm-stat-label {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--o-text-3);
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-stat-value {
    font-family: var(--o-mono);
    color: var(--o-text);
    font-weight: 600;
    letter-spacing: 0.04em;
}

#start-screen[data-mm] .mm-upkeep-bar {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-radius: 0;
    height: 4px;
}
#start-screen[data-mm] .mm-upkeep-fill { background: var(--o-brass); }

#start-screen[data-mm] .mm-storage-row {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    padding: 12px 0;
}

/* ---------- INSTALL PROMPT ---------- */
#start-screen[data-mm] .mm-install-prompt {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-left: 2px solid var(--o-brass);
    border-radius: 2px;
    box-shadow: none;
    margin: 20px 0 0;
}
#start-screen[data-mm] .mm-install-title {
    font-family: var(--o-sans);
    font-weight: 700;
    color: var(--o-text);
}
#start-screen[data-mm] .mm-install-sub {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--o-text-3);
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-install-btn {
    background: var(--o-brass);
    border: 1px solid var(--o-brass);
    border-radius: 2px;
    color: #001018;
    font-family: var(--o-mono);
    font-weight: 700;
    letter-spacing: 0.2em;
    box-shadow: none;
}
#start-screen[data-mm] .mm-install-btn:hover {
    background: var(--o-brass-hi);
    border-color: var(--o-brass-hi);
    color: #000a10;
    box-shadow: none;
}

/* ---------- EMPTY STATES ---------- */
#start-screen[data-mm] .mm-empty-state { padding: 28px 0; text-align: left; }
#start-screen[data-mm] .mm-empty-icon {
    filter: brightness(0) invert(0.4);
    opacity: 0.8;
    margin-bottom: 12px;
}
#start-screen[data-mm] .mm-empty-title {
    font-family: var(--o-sans);
    font-size: 15px;
    color: var(--o-text);
    font-weight: 600;
}
#start-screen[data-mm] .mm-empty-sub {
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--o-text-3);
    text-transform: uppercase;
    margin-top: 6px;
    line-height: 1.5;
}

/* ---------- SOCIAL / FRIEND SEARCH ---------- */
#start-screen[data-mm] .mm-friend-search { gap: 8px; margin-top: 16px; }
#start-screen[data-mm] .mm-search-input {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-radius: 2px;
    padding: 10px 12px;
    font-family: var(--o-mono);
    font-size: 12px;
    color: var(--o-text);
    letter-spacing: 0.04em;
}
#start-screen[data-mm] .mm-search-input::placeholder { color: var(--o-text-3); }
#start-screen[data-mm] .mm-search-input:focus {
    outline: none;
    border-color: var(--o-brass-line);
    background: var(--o-bg-2);
}
#start-screen[data-mm] .mm-search-btn {
    background: transparent;
    border: 1px solid var(--o-line-strong);
    border-radius: 2px;
    padding: 10px 16px;
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--o-text);
    font-weight: 600;
}
#start-screen[data-mm] .mm-search-btn:hover { background: var(--o-bg-hover); border-color: var(--o-brass-line); }

/* ---------- DESKTOP: keep the rail but refresh it ---------- */
#start-screen[data-mm].mm-desktop { background: var(--o-bg); }
#start-screen[data-mm].mm-desktop .mm-bottom-nav {
    background: rgba(5, 5, 7, 0.9);
    border-right: 1px solid var(--o-line);
    border-top: none;
    width: 72px;
    padding: 24px 0;
    gap: 2px;
    box-shadow: none;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav::before { display: none; }
#start-screen[data-mm].mm-desktop .mm-nav-item { padding: 14px 0; min-height: 56px; }
#start-screen[data-mm].mm-desktop .mm-nav-active::after {
    top: 20%; bottom: 20%;
    left: 0; right: auto;
    width: 2px; height: auto;
    background: var(--o-brass);
}
#start-screen[data-mm].mm-desktop .mm-content {
    max-width: 880px;
    padding-left: 40px;
    padding-right: 40px;
}
#start-screen[data-mm].mm-desktop .mm-hero-banner { height: 340px; margin: 20px -40px 0; }
#start-screen[data-mm].mm-desktop .mm-hero-title { font-size: 3.4em; }
#start-screen[data-mm].mm-desktop .mm-stats-grid { grid-template-columns: repeat(4, 1fr); }
#start-screen[data-mm].mm-desktop .mm-daily-grid { grid-template-columns: repeat(7, 1fr); }

/* ---------- MOBILE (< 480px) ---------- */
@media (max-width: 480px) {
    #start-screen[data-mm] .mm-content { padding: 0 16px 88px; }
    #start-screen[data-mm] .mm-hero-banner { height: 220px; margin: 12px -16px 0; }
    #start-screen[data-mm] .mm-hero-title { font-size: 2em; max-width: 14ch; }
    #start-screen[data-mm] .mm-hero-overlay { padding: 22px 18px; }
    #start-screen[data-mm] .mm-section { padding: 18px 0 20px; }
    #start-screen[data-mm] .mm-section-header { font-size: 10px; letter-spacing: 0.28em; }
    #start-screen[data-mm] .mm-feature-card { padding: 14px 10px; }
    #start-screen[data-mm] .mm-feature-label { font-size: 13px; }
    #start-screen[data-mm] .mm-feature-desc { font-size: 9px; }
    #start-screen[data-mm] .mm-store-card { padding: 16px 16px; }
    #start-screen[data-mm] .mm-store-card-title { font-size: 15px; }
    #start-screen[data-mm] .save-slot {
        grid-template-columns: 4px 1fr;
        grid-template-rows: auto auto;
        row-gap: 12px;
        padding: 16px 0;
    }
    #start-screen[data-mm] .save-slot::before { height: 20px; }
    #start-screen[data-mm] .slot-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        padding-left: 20px;
    }
    #start-screen[data-mm] .btn-play-slot { flex: 1; }
    #start-screen[data-mm] .btn-new-char { flex: 1; }
    #start-screen[data-mm] .mm-bottom-nav { height: 52px; }
    #start-screen[data-mm] .mm-nav-item { min-height: 52px; }
    #start-screen[data-mm] .mm-title { font-size: 0.95em; letter-spacing: 0.36em; }
}

@media (max-width: 360px) {
    #start-screen[data-mm] .mm-hero-title { font-size: 1.7em; }
    #start-screen[data-mm] .mm-features { grid-template-columns: repeat(3, 1fr); }
    #start-screen[data-mm] .mm-feature-card { padding: 12px 8px; }
}

/* ================================================================
   MAIN MENU HUB POLISH
   A tighter first-stop readout that matches the current world language.
   ================================================================ */

#start-screen[data-mm] .mm-hero-title {
    letter-spacing: 0;
    max-width: 12ch;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-hero-sub {
    max-width: 34ch;
    line-height: 1.55;
    letter-spacing: 0.18em;
}

#start-screen[data-mm] .mm-status-bar {
    margin-bottom: 0;
}

#start-screen[data-mm] .mm-command-brief {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    margin: 0 0 20px;
    border-bottom: 1px solid var(--o-line);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.012);
}

#start-screen[data-mm] .mm-brief-cell {
    min-width: 0;
    padding: 14px 14px 15px;
    border-right: 1px solid var(--o-line);
    display: grid;
    gap: 7px;
}

#start-screen[data-mm] .mm-brief-cell:last-child {
    border-right: none;
}

#start-screen[data-mm] .mm-brief-cell-primary {
    border-left: 2px solid var(--o-online);
}

#start-screen[data-mm] .mm-brief-label {
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--o-text-4);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

#start-screen[data-mm] .mm-brief-cell strong {
    min-width: 0;
    font-family: var(--o-sans);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.15;
    color: var(--o-text);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

#start-screen[data-mm] .mm-brief-cell-primary strong {
    color: var(--o-online);
}

#start-screen[data-mm] .mm-feature-card {
    min-height: 116px;
}

#start-screen[data-mm] .mm-store-card,
#start-screen[data-mm] .mm-waglet-card,
#start-screen[data-mm] .mm-lore-widget,
#start-screen[data-mm] .mm-auth-gate-inner,
#start-screen[data-mm] .mm-install-prompt {
    border-radius: 2px;
}

#start-screen[data-mm] .mm-waglet-card {
    background: var(--o-bg-1);
    border: 1px solid var(--o-line);
    border-left: 2px solid var(--o-violet-line);
    border-radius: 2px;
    box-shadow: none;
    margin-top: 12px;
    padding: 16px 20px;
}

#start-screen[data-mm] .mm-waglet-card:hover {
    background: var(--o-bg-2);
    border-color: var(--o-line-strong);
    border-left-color: var(--o-violet-hi);
    box-shadow: none;
    transform: none;
}

#start-screen[data-mm] .mm-waglet-card-glow {
    display: none !important;
}

#start-screen[data-mm] .mm-waglet-card-content {
    gap: 14px;
}

#start-screen[data-mm] .mm-waglet-card-badge,
#start-screen[data-mm] .mm-waglet-card-cta {
    border-radius: 0;
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-waglet-card-badge {
    background: transparent;
    border: 1px solid var(--o-violet-line);
    color: var(--o-violet-hi);
    padding: 4px 8px;
}

#start-screen[data-mm] .mm-waglet-card-title {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 750;
    color: var(--o-text);
}

#start-screen[data-mm] .mm-waglet-card-sub {
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-waglet-card-cta {
    color: var(--o-violet-hi);
}

#start-screen[data-mm].active .mm-command-brief {
    animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 190ms both;
}

@media (max-width: 540px) {
    #start-screen[data-mm] .mm-command-brief {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] .mm-brief-cell {
        border-right: none;
        border-bottom: 1px solid var(--o-line);
        padding: 12px 0 13px 12px;
    }

    #start-screen[data-mm] .mm-brief-cell:last-child {
        border-bottom: none;
    }

    #start-screen[data-mm] .mm-hero-sub {
        letter-spacing: 0.12em;
    }
}

/* ================================================================
   MOTION SYSTEM — tasteful, task-serving only.
   No decorative loops on CTAs. Subtle ambient life + entrance flow.
   ================================================================ */

/* Ambient pulse on the brass/cyan tick markers (title, section numbers, server dot). */
@keyframes mmAccentPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
#start-screen[data-mm] .mm-title::before,
#start-screen[data-mm] .mm-drawer-title::before {
    animation: mmAccentPulse 3.2s ease-in-out infinite;
}

/* Server status dot: heartbeat when online. */
#start-screen[data-mm] .mm-server-dot {
    animation: mmServerBeat 2.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(125, 255, 156, 0.65);
}
@keyframes mmServerBeat {
    0%, 100% { box-shadow: 0 0 4px rgba(125, 255, 156, 0.4); }
    50%      { box-shadow: 0 0 10px rgba(125, 255, 156, 0.9); }
}

/* Section ordinal numbers pulse with a slight delay so they don't all sync. */
#start-screen[data-mm] .mm-section-header::before {
    animation: mmAccentPulse 4s ease-in-out infinite;
}
#start-screen[data-mm] .mm-section:nth-of-type(2) .mm-section-header::before { animation-delay: 0.4s; }
#start-screen[data-mm] .mm-section:nth-of-type(3) .mm-section-header::before { animation-delay: 0.8s; }
#start-screen[data-mm] .mm-section:nth-of-type(4) .mm-section-header::before { animation-delay: 1.2s; }

/* Save slot tick bar: ambient pulse when occupied. Sweep on hover. */
#start-screen[data-mm] .save-slot.occupied::before {
    animation: mmAccentPulse 2.6s ease-in-out infinite;
}
#start-screen[data-mm] .save-slot:hover::before {
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
}

/* Store / Lore banner: left-stripe pulse, hover sheen sweep */
#start-screen[data-mm] .mm-store-card,
#start-screen[data-mm] .mm-lore-widget {
    position: relative;
    overflow: hidden;
}
#start-screen[data-mm] .mm-store-card::after,
#start-screen[data-mm] .mm-lore-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(0, 217, 255, 0.10) 50%, transparent 60%, transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#start-screen[data-mm] .mm-store-card:hover::after,
#start-screen[data-mm] .mm-lore-widget:hover::after {
    transform: translateX(100%);
}

/* CTA "PLAY" — subtle breathing glow on hover + press feedback. */
#start-screen[data-mm] .btn-play-slot {
    box-shadow: 0 0 0 0 rgba(0, 217, 255, 0.4);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 200ms ease;
}
#start-screen[data-mm] .btn-play-slot:hover,
#start-screen[data-mm] .btn-play-slot:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18), 0 0 22px rgba(0, 217, 255, 0.35);
}
#start-screen[data-mm] .btn-play-slot:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.25), 0 0 12px rgba(0, 217, 255, 0.4);
}

/* Bottom-nav active underline: soft traveling shimmer. */
#start-screen[data-mm] .mm-nav-active::after {
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
}

/* Entrance sequence: when the menu becomes .active, stagger children in. */
#start-screen[data-mm].active .mm-header { animation: mmFadeDown 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#start-screen[data-mm].active .mm-hero-banner { animation: mmFadeScale 520ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; }
#start-screen[data-mm].active .mm-status-bar { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both; }
#start-screen[data-mm].active .mm-features { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; }
#start-screen[data-mm].active .mm-store-card { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }
#start-screen[data-mm].active .mm-lore-widget { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both; }
#start-screen[data-mm].active .mm-auth-gate,
#start-screen[data-mm].active .save-slots { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; }
#start-screen[data-mm].active .mm-bottom-nav { animation: mmFadeUp 420ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; }

@keyframes mmFadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmFadeScale {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* Tab switch reveal (replaces vanilla mmTabFadeIn). */
#start-screen[data-mm] .mm-tab-active {
    animation: mmTabEnter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mmTabEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   HERO SCENE — live SVG/CSS cinematic.
   UFO, drop-crate, character silhouettes, ambient particles.
   Uses only transform+opacity transitions: GPU-friendly.
   ================================================================ */

#start-screen[data-mm] .mm-hero-bg { display: none; }   /* hide static bg img */

/* HyperFrames player — fill the hero banner */
#start-screen[data-mm] .mm-hero-player,
#start-screen[data-mm] hyperframes-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    background: transparent;
}
/* iframe cover-fit is applied by menuMotion.js (shadow-DOM style injection) */

#start-screen[data-mm] .mm-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    contain: layout paint;
}
#start-screen[data-mm] .mm-scene .mm-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Rift ellipse: soft pulse --- */
#start-screen[data-mm] .mm-scene .s-rift {
    transform-origin: 240px 208px;
    transform-box: fill-box;
    animation: mmRiftPulseSvg 5s ease-in-out infinite;
}
@keyframes mmRiftPulseSvg {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* --- Dome interior lights twinkle --- */
#start-screen[data-mm] .mm-scene .s-dome-light {
    animation: mmDomeTwinkle 2.6s ease-in-out infinite;
}
#start-screen[data-mm] .mm-scene .s-dome-light-2 { animation-delay: 0.9s; }
#start-screen[data-mm] .mm-scene .s-dome-light-3 { animation-delay: 1.5s; }
@keyframes mmDomeTwinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* --- Boss: subtle breathing scale + aura pulse + arm orbit --- */
#start-screen[data-mm] .mm-scene .s-boss {
    transform-origin: 320px 200px;
    transform-box: fill-box;
    animation: mmBossBreath 6s ease-in-out infinite;
}
@keyframes mmBossBreath {
    0%, 100% { transform: translate(320px, 168px) scale(1.00); }
    50%      { transform: translate(320px, 164px) scale(1.04); }
}
#start-screen[data-mm] .mm-scene .s-boss-aura {
    transform-origin: center;
    animation: mmBossAura 4.2s ease-in-out infinite;
}
@keyframes mmBossAura {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}
#start-screen[data-mm] .mm-scene .s-boss-eye {
    animation: mmBossEye 3.4s ease-in-out infinite;
}
@keyframes mmBossEye {
    0%, 45%, 55%, 100% { opacity: 0.95; }
    50%                { opacity: 0.25; }   /* blink */
}
#start-screen[data-mm] .mm-scene .s-boss-arms {
    transform-origin: center;
    animation: mmBossArms 8s ease-in-out infinite;
}
@keyframes mmBossArms {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* --- UFO drifts horizontally, bobs. Beam pulses periodically. --- */
#start-screen[data-mm] .mm-scene .s-ufo {
    animation: mmUfoPath 26s linear infinite;
}
@keyframes mmUfoPath {
    0%   { transform: translate(-40px, 50px); }
    25%  { transform: translate(110px, 46px); }
    50%  { transform: translate(240px, 52px); }
    75%  { transform: translate(340px, 48px); }
    100% { transform: translate(440px, 52px); }
}
#start-screen[data-mm] .mm-scene .s-ufo-body {
    transform-origin: center;
    animation: mmUfoHover 2.4s ease-in-out infinite;
}
@keyframes mmUfoHover {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-2px) rotate(1deg); }
}
#start-screen[data-mm] .mm-scene .s-ufo-beam {
    transform-origin: center top;
    opacity: 0;
    animation: mmUfoBeamPulse 26s linear infinite;
}
@keyframes mmUfoBeamPulse {
    0%, 28%, 42%, 100% { opacity: 0; transform: scaleY(0.2); }
    32%                { opacity: 0.9; transform: scaleY(1); }
    38%                { opacity: 0.6; transform: scaleY(1); }
}

/* --- Crate: falls from sky, parachute visible during descent, lands on ground (y=222). --- */
#start-screen[data-mm] .mm-scene .s-crate {
    transform: translate(200px, -30px);
    animation: mmCratePath 14s ease-in-out infinite;
}
@keyframes mmCratePath {
    0%   { transform: translate(200px, -30px); }
    2%   { transform: translate(200px, -30px); }
    50%  { transform: translate(210px, 215px); }   /* landing just above ground */
    52%  { transform: translate(210px, 215px); }
    95%  { transform: translate(210px, 215px); }
    100% { transform: translate(200px, -30px); }
}
#start-screen[data-mm] .mm-scene .s-crate-chute {
    transform-origin: center bottom;
    animation: mmCrateChute 14s ease-in-out infinite;
}
@keyframes mmCrateChute {
    0%, 2%     { opacity: 0; transform: scaleY(0.4); }
    8%         { opacity: 1; transform: scaleY(1); }
    45%        { opacity: 1; transform: scaleY(1); }
    49%        { opacity: 0; transform: translate(10px, 8px) scaleY(0.6) rotate(25deg); }
    95%, 100%  { opacity: 0; }
}
#start-screen[data-mm] .mm-scene .s-crate-impact {
    opacity: 0;
    transform-origin: center;
    animation: mmCrateImpact 14s ease-out infinite;
}
@keyframes mmCrateImpact {
    0%, 48%, 60%, 100% { opacity: 0; transform: scale(0.2); }
    50%                { opacity: 1; transform: scale(1.5); }
    54%                { opacity: 0.3; transform: scale(2.6); }
}

/* --- Ground mobs: small, wander in place on the ground line. --- */
#start-screen[data-mm] .mm-scene .s-mob-a {
    transform: translate(56px, 218px);
    animation: mmMobCrawl 6s ease-in-out infinite;
}
@keyframes mmMobCrawl {
    0%, 100% { transform: translate(56px, 218px); }
    50%      { transform: translate(86px, 218px); }
}
#start-screen[data-mm] .mm-scene .s-mob-b {
    transform: translate(210px, 219px);
    animation: mmMobScuttle 5s ease-in-out infinite;
}
@keyframes mmMobScuttle {
    0%, 100% { transform: translate(210px, 219px); }
    50%      { transform: translate(184px, 219px); }
}
#start-screen[data-mm] .mm-scene .s-mob-c {
    transform: translate(290px, 212px);
    animation: mmMobBob 3.6s ease-in-out infinite;
}
@keyframes mmMobBob {
    0%, 100% { transform: translate(290px, 212px); }
    50%      { transform: translate(296px, 206px); }
}

/* --- Walking humanoids --- */
#start-screen[data-mm] .mm-scene .s-walker-a {
    transform: translate(120px, 222px);
    animation: mmWalkerA 12s linear infinite;
}
@keyframes mmWalkerA {
    0%   { transform: translate(120px, 222px); }
    50%  { transform: translate(280px, 222px); }
    50.01% { transform: translate(280px, 222px) scaleX(-1); }
    100% { transform: translate(120px, 222px) scaleX(-1); }
}
#start-screen[data-mm] .mm-scene .s-walker-b {
    transform: translate(160px, 222px) scaleX(-1);
    animation: mmWalkerB 13s linear infinite;
}
@keyframes mmWalkerB {
    0%   { transform: translate(160px, 222px) scaleX(-1); }
    50%  { transform: translate(40px, 222px) scaleX(-1); }
    50.01% { transform: translate(40px, 222px); }
    100% { transform: translate(160px, 222px); }
}
/* Leg + arm swing animations */
#start-screen[data-mm] .mm-scene .s-walker .walker-leg-l,
#start-screen[data-mm] .mm-scene .s-walker .walker-arm-r {
    transform-origin: center top;
    animation: mmWalkSwingA 0.55s ease-in-out infinite;
}
#start-screen[data-mm] .mm-scene .s-walker .walker-leg-r,
#start-screen[data-mm] .mm-scene .s-walker .walker-arm-l {
    transform-origin: center top;
    animation: mmWalkSwingB 0.55s ease-in-out infinite;
}
#start-screen[data-mm] .mm-scene .s-walker .walker-body {
    animation: mmWalkBody 0.55s ease-in-out infinite;
}
@keyframes mmWalkSwingA {
    0%, 100% { transform: rotate(10deg); }
    50%      { transform: rotate(-10deg); }
}
@keyframes mmWalkSwingB {
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate(10deg); }
}
@keyframes mmWalkBody {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.35px); }
}
/* Walker B slight offset so they're not perfectly in sync */
#start-screen[data-mm] .mm-scene .s-walker-b .walker-leg-l,
#start-screen[data-mm] .mm-scene .s-walker-b .walker-arm-r,
#start-screen[data-mm] .mm-scene .s-walker-b .walker-leg-r,
#start-screen[data-mm] .mm-scene .s-walker-b .walker-arm-l,
#start-screen[data-mm] .mm-scene .s-walker-b .walker-body {
    animation-delay: 0.18s;
}

/* (Previous HTML/CSS scene removed — replaced by single SVG composition above.) */

/* Ambient particles — tiny dots drifting up. */
#start-screen[data-mm] .mm-scene-particles {
    position: absolute; inset: 0;
    z-index: 1;
}
#start-screen[data-mm] .mm-scene-particles .p {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    left: calc((var(--i) * 12%) + 4%);
    bottom: -4px;
    background: rgba(0, 217, 255, 0.85);
    opacity: 0;
    animation: mmParticle 10s linear infinite;
    animation-delay: calc(var(--i) * -1.2s);
    /* will-change removed to avoid layer proliferation */
}
#start-screen[data-mm] .mm-scene-particles .p1 { background: rgba(168, 139, 250, 0.85); }
#start-screen[data-mm] .mm-scene-particles .p2 { background: rgba(125, 255, 156, 0.8); }
#start-screen[data-mm] .mm-scene-particles .p3 { background: rgba(255, 255, 255, 0.8); }
@keyframes mmParticle {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.9; }
    100% { transform: translateY(-260px) translateX(6px); opacity: 0; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    #start-screen[data-mm] *,
    #start-screen[data-mm] *::before,
    #start-screen[data-mm] *::after {
        animation: none !important;
        transition: none !important;
    }
    #start-screen[data-mm] .mm-scene { display: none; }
}

/* ---------- HIDE LEAKED LEGACY DECOR ---------- */
/* (Hero ::before re-used for star dots — leave it alone. Hero ::after not used. ) */
#start-screen[data-mm] .mm-hero-banner::after { display: none; }

/* ================================================================
   AUTH FLOW + LOADING — same editorial matte vocabulary as the menu.
   Targets: #auth-screen, #verify-screen, #server-screen,
   #server-confirm-screen, #create-screen, #delete-screen, #loading-screen.
   Strips rainbow title, glass box, amber gradient buttons.
   Adds cyan tick accents, hairline borders, corner brackets, quiet motion.
   ================================================================ */

#auth-screen,
#verify-screen,
#server-screen,
#server-confirm-screen,
#create-screen,
#delete-screen,
#loading-screen,
#pause-screen {
    /* Palette (mirror of menu) */
    --oa-bg:         #050507;
    --oa-bg-1:       #0a0a0d;
    --oa-bg-2:       #101014;
    --oa-line:       rgba(255, 255, 255, 0.08);
    --oa-line-hi:    rgba(255, 255, 255, 0.18);
    --oa-text:       #f0efec;
    --oa-text-2:     rgba(240, 239, 236, 0.64);
    --oa-text-3:     rgba(240, 239, 236, 0.38);
    --oa-cyan:       #00d9ff;
    --oa-cyan-hi:    #8ff0ff;
    --oa-cyan-line:  rgba(0, 217, 255, 0.38);
    --oa-violet:     #6c3fff;
    --oa-danger:     #ff445a;
    --oa-sans:       ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    --oa-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

    /* Matte background + quiet rift halo (same palette as menu) */
    background:
        radial-gradient(ellipse 60% 90% at 30% -10%, rgba(0, 217, 255, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at 75% -5%, rgba(108, 63, 255, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 70% 60% at 80% 105%, rgba(108, 63, 255, 0.08) 0%, transparent 65%),
        var(--oa-bg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.orbryn-auth-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.88;
}

#auth-screen:has(.orbryn-auth-backdrop) {
    background:
        radial-gradient(circle at 46% 52%, rgba(64, 255, 128, 0.09), transparent 32%),
        linear-gradient(180deg, rgba(9, 18, 26, 0.05), rgba(3, 6, 8, 0.72)),
        #0e1a28 !important;
}

#auth-screen:has(.orbryn-auth-backdrop)::before {
    background-image:
        radial-gradient(ellipse at 50% 62%, rgba(64, 255, 128, 0.12), transparent 44%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%) !important;
    background-size: cover !important;
    opacity: 0.42 !important;
    animation: none !important;
}

#auth-screen:has(.orbryn-auth-backdrop) .screen-content {
    background:
        linear-gradient(180deg, rgba(10, 10, 14, 0.9), rgba(5, 5, 7, 0.83)),
        rgba(10, 10, 14, 0.9);
    border-color: rgba(143, 240, 255, 0.22);
    box-shadow:
        0 44px 90px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 209, 102, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

#auth-screen [hidden],
#verify-screen [hidden],
#server-screen [hidden],
#server-confirm-screen [hidden],
#create-screen [hidden],
#delete-screen [hidden],
#loading-screen [hidden] {
    display: none !important;
}

/* Kill global .screen grid + scanline on these screens — too noisy for a login. */
#auth-screen::before,
#verify-screen::before,
#server-screen::before,
#server-confirm-screen::before,
#create-screen::before,
#delete-screen::before,
#loading-screen::before {
    background-size: 96px 96px !important;
    opacity: 0.05 !important;
    animation: none !important;
}
#auth-screen::after,
#verify-screen::after,
#server-screen::after,
#server-confirm-screen::after,
#create-screen::after,
#delete-screen::after,
#loading-screen::after {
    display: none !important;
}

/* ---------- Panel: strip glass, use editorial card with corner brackets ---------- */
#auth-screen .screen-content,
#verify-screen .screen-content,
#server-screen .screen-content,
#server-confirm-screen .screen-content,
#create-screen .screen-content,
#delete-screen .screen-content,
#loading-screen .screen-content {
    background: rgba(10, 10, 14, 0.92);
    border: 1px solid var(--oa-line);
    border-radius: 2px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 44px 38px;
    max-width: 440px;
    width: calc(100% - 32px);
    position: relative;
    /* Corner brackets on the panel (cyan tick at each corner) */
    background-image:
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top right / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom right / 1px 14px no-repeat;
    animation: oaPanelEnter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#auth-screen .screen-content::before,
#verify-screen .screen-content::before,
#server-screen .screen-content::before,
#server-confirm-screen .screen-content::before,
#create-screen .screen-content::before,
#delete-screen .screen-content::before,
#loading-screen .screen-content::before {
    content: none;
    display: none;
}
@keyframes oaPanelEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tighten on small screens */
@media (max-width: 480px) {
    #auth-screen .screen-content,
    #verify-screen .screen-content,
    #server-screen .screen-content,
    #server-confirm-screen .screen-content,
    #create-screen .screen-content,
    #delete-screen .screen-content,
    #loading-screen .screen-content {
        padding: 28px 22px;
        margin: 0 14px;
    }
}

/* ---------- Wordmark: match menu header — editorial white with cyan tick ---------- */
#auth-screen .game-title,
#verify-screen .game-title,
#server-screen .game-title {
    font-family: var(--oa-sans);
    font-size: 1.6em;
    letter-spacing: 0.42em;
    font-weight: 700;
    color: var(--oa-text);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    animation: none;
    filter: none;
    text-shadow: none;
    margin: 0 0 8px 0;
    padding-left: 14px;
    position: relative;
    text-align: left;
    display: inline-block;
}
#auth-screen .game-title::before,
#verify-screen .game-title::before,
#server-screen .game-title::before {
    content: '';
    position: absolute;
    left: 0; top: 8%; bottom: 8%;
    width: 2px;
    background: var(--oa-cyan);
    animation: oaTickPulse 3s ease-in-out infinite;
}
@keyframes oaTickPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Wrap header row left-aligned */
#auth-screen .auth-content,
#verify-screen .auth-content,
#server-screen .auth-content {
    text-align: left;
}

/* Tagline: small mono cyan with leading tick */
#auth-screen .game-tagline,
#verify-screen .game-tagline,
#server-screen .game-tagline,
#server-screen .server-select-warning,
#server-confirm-screen .server-confirm-warning,
#server-confirm-screen .server-confirm-detail {
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--oa-cyan);
    text-transform: uppercase;
    margin: 14px 0 22px;
    padding-left: 20px;
    position: relative;
    text-align: left;
}
#auth-screen .game-tagline::before,
#verify-screen .game-tagline::before,
#server-screen .game-tagline::before,
#server-screen .server-select-warning::before,
#server-confirm-screen .server-confirm-warning::before,
#server-confirm-screen .server-confirm-detail::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 1px;
    background: var(--oa-cyan);
}
#server-screen .server-select-warning,
#server-confirm-screen .server-confirm-warning {
    color: var(--oa-text-2);
    margin-top: 4px;
}
#server-screen .server-select-warning::before,
#server-confirm-screen .server-confirm-warning::before {
    background: var(--oa-line-hi);
}

/* ---------- Inputs: matte, hairline, focus cyan ---------- */
#auth-screen .create-input,
#verify-screen .create-input,
#create-screen .create-input,
#auth-screen .auth-input {
    background: rgba(5, 5, 7, 0.9) !important;
    color: var(--oa-text) !important;
    border: 1px solid var(--oa-line) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    padding: 14px 16px !important;
    caret-color: var(--oa-cyan) !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 150ms ease, background 150ms ease;
}
#auth-screen .create-input::placeholder,
#verify-screen .create-input::placeholder,
#create-screen .create-input::placeholder,
#auth-screen .auth-input::placeholder {
    color: var(--oa-text-3);
}
#auth-screen .create-input:focus,
#verify-screen .create-input:focus,
#create-screen .create-input:focus,
#auth-screen .auth-input:focus {
    outline: none !important;
    border-color: var(--oa-cyan-line) !important;
    background: rgba(10, 10, 14, 0.95) !important;
}
/* Override Chrome/Safari autofill white-fill. Keep our matte color + cyan caret. */
#auth-screen .create-input:-webkit-autofill,
#auth-screen .auth-input:-webkit-autofill,
#verify-screen .create-input:-webkit-autofill,
#create-screen .create-input:-webkit-autofill,
#auth-screen .create-input:-webkit-autofill:hover,
#auth-screen .create-input:-webkit-autofill:focus,
#auth-screen .auth-input:-webkit-autofill:hover,
#auth-screen .auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgba(5, 5, 7, 0.98) inset !important;
    box-shadow: 0 0 0 30px rgba(5, 5, 7, 0.98) inset !important;
    -webkit-text-fill-color: var(--oa-text) !important;
    caret-color: var(--oa-cyan) !important;
    border-color: var(--oa-line) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

#create-screen .create-label {
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--oa-text-3);
    text-transform: uppercase;
    display: block;
    margin: 18px 0 4px;
    text-align: left;
}
#create-screen .create-hint {
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--oa-text-3);
    text-align: left;
    margin: 4px 0 18px;
    text-transform: uppercase;
}

#create-screen.active {
    align-items: flex-start;
    overflow-y: hidden;
    padding: 24px 0;
    box-sizing: border-box;
}

#create-screen::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#create-screen .screen-content {
    max-width: 600px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

#create-screen .create-character-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 8px 0 20px;
    max-height: min(40vh, 360px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

#create-screen .create-character-option {
    display: grid;
    grid-template-rows: minmax(100px, 1fr) auto;
    gap: 8px;
    min-height: 184px;
    padding: 8px;
    background: rgba(5, 5, 7, 0.9);
    border: 1px solid var(--oa-line);
    border-radius: 2px;
    color: var(--oa-text-2);
    font-family: var(--oa-mono);
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    overflow: hidden;
}

#create-screen .create-character-option:hover,
#create-screen .create-character-option:focus-visible {
    outline: none;
    background: rgba(10, 10, 14, 0.96);
    border-color: var(--oa-cyan-line);
    color: var(--oa-text);
}

#create-screen .create-character-option.active {
    border-color: var(--oa-cyan);
    color: var(--oa-text);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.2);
}

#create-screen .create-character-visual {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 217, 255, 0.16), rgba(5, 5, 7, 0.92) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

#create-screen .create-character-option.active .create-character-visual {
    border-color: rgba(0, 217, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.16);
}

#create-screen .create-character-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#create-screen .create-character-visual-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--oa-cyan);
    font-family: var(--oa-mono);
    font-size: 10px;
    line-height: 1;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity 160ms ease;
}

#create-screen .create-character-option.preview-ready .create-character-visual-fallback {
    opacity: 0;
}

#create-screen .create-character-copy {
    display: block;
    min-width: 0;
}

#create-screen .create-character-option-name,
#create-screen .create-character-option-meta,
#create-screen .create-character-option-passive {
    display: block;
}

#create-screen .create-character-option-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

#create-screen .create-character-option-meta {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--oa-cyan);
}

#create-screen .create-character-option-passive {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--oa-text-3);
}

@media (max-width: 480px) {
    #create-screen .create-character-options {
        grid-template-columns: 1fr;
    }

    #create-screen .create-character-option {
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        min-height: 124px;
    }

    #create-screen .create-character-visual {
        min-height: 0;
        height: 100px;
    }
}

/* ---------- Buttons: solid cyan primary, hairline ghost secondary ---------- */
#auth-screen .btn-primary,
#verify-screen .btn-primary,
#server-screen .btn-primary,
#server-confirm-screen .btn-primary,
#create-screen .btn-primary,
#delete-screen .btn-primary,
#loading-screen .btn-primary {
    background: var(--oa-cyan) !important;
    color: #001018 !important;
    border: 1px solid var(--oa-cyan) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    padding: 14px 22px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 150ms ease, box-shadow 200ms ease, transform 80ms ease !important;
}
#auth-screen .btn-primary:hover,
#verify-screen .btn-primary:hover,
#server-screen .btn-primary:hover,
#server-confirm-screen .btn-primary:hover,
#create-screen .btn-primary:hover,
#delete-screen .btn-primary:hover,
#loading-screen .btn-primary:hover,
#auth-screen .btn-primary:focus-visible,
#verify-screen .btn-primary:focus-visible,
#server-screen .btn-primary:focus-visible,
#server-confirm-screen .btn-primary:focus-visible,
#create-screen .btn-primary:focus-visible,
#delete-screen .btn-primary:focus-visible {
    background: var(--oa-cyan-hi) !important;
    color: #000a10 !important;
    border-color: var(--oa-cyan-hi) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.16), 0 0 22px rgba(0, 217, 255, 0.3) !important;
    transform: none !important;
}
#auth-screen .btn-primary::after,
#verify-screen .btn-primary::after,
#server-screen .btn-primary::after,
#server-confirm-screen .btn-primary::after,
#create-screen .btn-primary::after,
#delete-screen .btn-primary::after,
#loading-screen .btn-primary::after {
    display: none !important;
}

#auth-screen .btn-secondary,
#verify-screen .btn-secondary,
#server-screen .btn-secondary,
#server-confirm-screen .btn-secondary,
#create-screen .btn-secondary,
#delete-screen .btn-secondary {
    background: transparent !important;
    color: var(--oa-text) !important;
    border: 1px solid var(--oa-line-hi) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    padding: 14px 22px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    transition: background 150ms ease, border-color 150ms ease !important;
    transform: none !important;
}
#auth-screen .btn-secondary:hover,
#verify-screen .btn-secondary:hover,
#server-screen .btn-secondary:hover,
#server-confirm-screen .btn-secondary:hover,
#create-screen .btn-secondary:hover,
#delete-screen .btn-secondary:hover {
    background: var(--oa-bg-2) !important;
    border-color: var(--oa-cyan-line) !important;
    color: var(--oa-text) !important;
    box-shadow: none !important;
    transform: none !important;
}
#auth-screen .btn-secondary::after,
#verify-screen .btn-secondary::after,
#server-screen .btn-secondary::after,
#server-confirm-screen .btn-secondary::after,
#create-screen .btn-secondary::after,
#delete-screen .btn-secondary::after { display: none !important; }

/* Danger button (delete character, etc.) */
#delete-screen .btn-danger,
#auth-screen .btn-danger {
    background: transparent !important;
    color: var(--oa-danger) !important;
    border: 1px solid rgba(255, 68, 90, 0.4) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    padding: 14px 22px !important;
    box-shadow: none !important;
}
#delete-screen .btn-danger:hover,
#auth-screen .btn-danger:hover {
    background: rgba(255, 68, 90, 0.10) !important;
    border-color: var(--oa-danger) !important;
    color: var(--oa-danger) !important;
    box-shadow: none !important;
}

/* Terms text */
#auth-screen .auth-terms,
#verify-screen .verify-info,
#verify-screen .verify-info p,
#create-screen .create-title,
#create-screen .create-subtitle,
#delete-screen .delete-title,
#delete-screen .delete-detail {
    font-family: var(--oa-sans);
    color: var(--oa-text-2);
    text-align: left;
}
#auth-screen .auth-terms {
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--oa-text-3);
    margin-top: 18px;
    text-transform: uppercase;
}
#create-screen .create-title,
#delete-screen .delete-title {
    font-family: var(--oa-sans);
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--oa-text);
    margin: 0 0 4px 0;
}
#create-screen .create-subtitle {
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--oa-cyan);
    text-transform: uppercase;
    margin: 0 0 20px 0;
}
#delete-screen .delete-detail {
    font-family: var(--oa-sans);
    font-size: 14px;
    color: var(--oa-text-2);
    margin: 4px 0 14px 0;
}
#delete-screen .screen-content {
    max-width: 560px;
    max-height: calc(100dvh - 40px);
    overflow: auto;
}
#delete-screen .delete-warning {
    display: grid;
    gap: 8px;
    margin: 0 0 18px 0;
    padding: 14px 14px 12px;
    background: rgba(255, 68, 90, 0.06);
    border: 1px solid rgba(255, 68, 90, 0.24);
    border-radius: 2px;
    text-align: left;
}
#delete-screen .delete-warning p {
    margin: 0;
    color: var(--oa-text-2);
    font-family: var(--oa-sans);
    font-size: 13px;
    line-height: 1.45;
}
#delete-screen .delete-warning strong {
    color: var(--oa-text);
    font-weight: 700;
}
#delete-screen .delete-confirm-label {
    display: block;
    margin: 0 0 6px 0;
    color: var(--oa-danger);
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-align: left;
}
#delete-screen .delete-confirm-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px 0;
    padding: 13px 14px;
    background: rgba(5, 5, 7, 0.94);
    border: 1px solid rgba(255, 68, 90, 0.34);
    border-radius: 2px;
    color: var(--oa-text);
    caret-color: var(--oa-danger);
    font-family: var(--oa-mono);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#delete-screen .delete-confirm-input:focus {
    outline: none;
    border-color: var(--oa-danger);
    box-shadow: 0 0 0 3px rgba(255, 68, 90, 0.12);
}
#delete-screen .btn-danger:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--oa-text-3) !important;
}
#delete-screen .btn-danger:disabled:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--oa-text-3) !important;
}
@media (max-width: 480px) {
    #delete-screen .delete-warning p {
        font-size: 12px;
    }
}

/* ---------- Errors / alerts ---------- */
#auth-screen .auth-error,
#verify-screen .auth-error,
#verify-screen .verify-success,
#server-screen .auth-error {
    background: rgba(255, 68, 90, 0.08);
    border: 1px solid rgba(255, 68, 90, 0.35);
    border-radius: 2px;
    color: var(--oa-danger);
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 10px 12px;
    margin: 10px 0;
    text-align: left;
}
#verify-screen .verify-success {
    color: #7dff9c;
    border-color: rgba(125, 255, 156, 0.35);
    background: rgba(125, 255, 156, 0.06);
}

/* Auth-loading state */
#auth-screen .auth-loading p,
#verify-screen .auth-loading p {
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--oa-cyan);
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
    text-align: left;
}
#auth-screen .auth-loading p::before,
#verify-screen .auth-loading p::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 1px;
    background: var(--oa-cyan);
}

#auth-screen .auth-loading-progress,
#verify-screen .auth-loading-progress {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

#auth-screen .auth-loading-progress[hidden],
#verify-screen .auth-loading-progress[hidden] {
    display: none;
}

#auth-screen .auth-loading-progress-track,
#verify-screen .auth-loading-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, 0.28);
    border-radius: 2px;
    background: rgba(2, 12, 22, 0.78);
}

#auth-screen .auth-loading-progress-track::after,
#verify-screen .auth-loading-progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    animation: editorBootScan 1.2s linear infinite;
    pointer-events: none;
}

#auth-screen .auth-loading-progress-fill,
#verify-screen .auth-loading-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--oa-cyan), #8fffee);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
    transition: width 180ms ease;
}

#auth-screen .auth-loading-detail,
#verify-screen .auth-loading-detail {
    min-height: 15px;
    font-family: var(--oa-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(235, 246, 255, 0.62);
    text-transform: uppercase;
}

@keyframes editorBootScan {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

/* ---------- Server list items ---------- */
#server-screen .btn-server-toggle {
    background: transparent;
    border: 1px solid var(--oa-line);
    border-radius: 2px;
    color: var(--oa-text-2);
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    padding: 10px 12px;
    margin: 12px 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#server-screen .btn-server-toggle:hover {
    background: var(--oa-bg-2);
    border-color: var(--oa-cyan-line);
    color: var(--oa-text);
}
#server-screen .server-toggle-arrow {
    color: var(--oa-cyan);
    margin-left: 6px;
    font-size: 10px;
}

#server-confirm-screen .delete-title {
    font-family: var(--oa-sans);
    font-size: 1.1em;
    color: var(--oa-text);
    letter-spacing: 0.08em;
    text-align: left;
    margin: 0 0 4px 0;
}

/* ================================================================
   LOADING SCREEN — transmission vibe: cyan scan progress + pulse tick
   ================================================================ */

#loading-screen {
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden;
    background: #03070d !important;
}

#loading-screen .screen-content.loading-screen-content {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 30px;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100svh;
    height: 100%;
    margin: 0 !important;
    padding: calc(72px + env(safe-area-inset-top)) 20px calc(46px + env(safe-area-inset-bottom));
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    text-align: left;
    background:
        linear-gradient(90deg, rgba(3, 5, 7, 0.94) 0%, rgba(3, 5, 7, 0.76) 38%, rgba(3, 5, 7, 0.28) 68%, rgba(3, 5, 7, 0.72) 100%),
        linear-gradient(180deg, rgba(3, 5, 7, 0.12) 0%, rgba(3, 5, 7, 0.64) 100%),
        url("../assets/orbryn-dome-frontier.jpg?v=20260607") center center / cover no-repeat,
        #03070d !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#loading-screen .screen-content.loading-screen-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 68% 80% at 18% 24%, rgba(0, 217, 255, 0.18) 0%, transparent 58%),
        radial-gradient(ellipse 46% 72% at 86% 22%, rgba(108, 63, 255, 0.22) 0%, transparent 62%);
    pointer-events: none;
}

#loading-screen .screen-content.loading-screen-content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-position: -1px -1px;
    background-size: 56px 56px;
    opacity: 0.7;
    pointer-events: none;
}

#loading-screen .loading-shell-nav,
#loading-screen .loading-shell-brand,
#loading-screen .loading-shell-progress {
    width: min(100%, 920px);
}

#loading-screen .loading-shell-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: rgba(199, 220, 229, 0.72);
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

#loading-screen .loading-shell-nav span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

#loading-screen .loading-shell-nav span:first-child::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #7dff9c;
    box-shadow: 0 0 12px rgba(125, 255, 156, 0.72);
}

#loading-screen .loading-shell-brand {
    position: relative;
    padding-left: 20px;
}

#loading-screen .loading-shell-brand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    width: 2px;
    background: #00d9ff;
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.75);
}

#loading-screen .loading-shell-kicker {
    margin: 0 0 14px;
    color: #8ff0ff;
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

#loading-screen .loading-title {
    margin: 0;
    color: #f6f7fa;
    font-family: var(--oa-sans);
    font-size: 58px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.94;
    text-align: left;
    text-shadow: 0 0 18px rgba(0, 217, 255, 0.22), 0 0 44px rgba(108, 63, 255, 0.18);
    text-transform: uppercase;
    animation: none;
}

#loading-screen .loading-title::before,
#loading-screen .loading-title::after {
    content: none;
    display: none;
}

#loading-screen .loading-shell-subtitle {
    margin: 18px 0 0;
    color: rgba(215, 237, 247, 0.84);
    font-family: var(--oa-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.55;
    text-transform: uppercase;
}

#loading-screen .loading-shell-progress {
    max-width: 760px;
}

#loading-screen .loading-shell-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    color: #9fcde0;
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

#loading-screen .loading-shell-status span {
    color: rgba(199, 220, 229, 0.48);
    white-space: nowrap;
}

#loading-screen .loading-bar-container {
    width: 100%;
    height: 3px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

#loading-screen .loading-bar {
    height: 100%;
    width: 0%;
    border-radius: 0;
    background: linear-gradient(90deg, #256275, #00d9ff, #a68bff);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.66);
    transition: width 0.3s ease-out;
}

#loading-screen .loading-bar-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.35) 44%, rgba(255, 255, 255, 0.82) 50%, rgba(166, 139, 255, 0.42) 56%, transparent 100%);
    transform: translateX(-100%);
    animation: oaLoadingScan 1.8s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes oaLoadingScan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#loading-screen .loading-hint {
    min-height: 1em;
    margin: 0;
    padding: 0;
    color: #d7edf7;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    line-height: inherit;
    text-align: left;
    text-transform: uppercase;
}

#loading-screen .loading-hint::before {
    content: none;
    display: none;
}

#loading-screen .loading-shell-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

#loading-screen .loading-shell-steps span {
    min-height: 42px;
    padding-top: 11px;
    border-top: 1px solid rgba(125, 255, 156, 0.62);
    color: rgba(215, 255, 225, 0.92);
    font-family: var(--oa-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

@media (min-width: 720px) {
    #loading-screen .screen-content.loading-screen-content {
        padding: calc(92px + env(safe-area-inset-top)) 48px calc(64px + env(safe-area-inset-bottom));
    }

    #loading-screen .loading-title {
        font-size: 76px;
    }
}

@media (min-width: 1024px) {
    #loading-screen .screen-content.loading-screen-content {
        padding: calc(104px + env(safe-area-inset-top)) 72px calc(72px + env(safe-area-inset-bottom));
    }

    #loading-screen .loading-title {
        font-size: 92px;
    }
}

@media (max-width: 560px) {
    #loading-screen .screen-content.loading-screen-content {
        gap: 22px;
    }

    #loading-screen .loading-title {
        font-size: 48px;
    }

    #loading-screen .loading-shell-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    #loading-screen .loading-shell-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #loading-screen .loading-shell-steps span {
        min-height: 0;
        padding: 9px 0 9px 16px;
        border-top: 0;
        border-left: 1px solid rgba(125, 255, 156, 0.62);
    }
}

/* Auth boot/loading handoff: the mobile external route reaches this before the
   gameplay loading screen, so it must not fall back to the legacy boxed panel. */
#auth-screen:has(#auth-loading:not([hidden])) {
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden;
    opacity: 1 !important;
    animation: none !important;
    background:
        linear-gradient(180deg, rgba(2, 4, 10, 0.18) 0%, rgba(2, 5, 12, 0.72) 58%, rgba(0, 0, 0, 0.92) 100%),
        radial-gradient(circle at 66% 18%, rgba(76, 90, 255, 0.26), transparent 36%),
        radial-gradient(circle at 28% 54%, rgba(0, 217, 255, 0.18), transparent 42%),
        url("../assets/orbryn-dome-frontier.jpg?v=20260607") center center / cover no-repeat,
        #020408 !important;
}

#auth-screen:has(#auth-loading:not([hidden]))::before {
    opacity: 0.16 !important;
}

#auth-screen:has(#auth-loading:not([hidden])) .screen-content.auth-content {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 !important;
    padding: calc(72px + env(safe-area-inset-top)) 20px calc(46px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        linear-gradient(rgba(87, 123, 255, 0.16), rgba(87, 123, 255, 0.16)) left 50% top 0 / 1px 100% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)) left 0 top 36% / 100% 1px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) left 0 top 64% / 100% 1px no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    text-align: left;
}

#auth-screen .auth-loading-shell {
    display: none;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: min(100%, 920px);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-panel-flow {
    display: none;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-nav,
#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-brand,
#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-progress {
    width: min(100%, 920px);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: rgba(199, 220, 229, 0.72);
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-nav span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-nav span:first-child::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #7dff9c;
    box-shadow: 0 0 12px rgba(125, 255, 156, 0.72);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-brand {
    position: relative;
    padding-left: 20px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-brand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    width: 2px;
    background: #00d9ff;
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.75);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-kicker,
#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-subtitle,
#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-status,
#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-steps span {
    font-family: var(--oa-mono);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-kicker {
    margin: 0 0 14px;
    color: #8ff0ff;
    font-size: 10px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-title {
    margin: 0;
    color: #f6f7fa;
    font-family: var(--oa-sans);
    font-size: 58px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.94;
    text-align: left;
    text-shadow: 0 0 18px rgba(0, 217, 255, 0.22), 0 0 44px rgba(108, 63, 255, 0.18);
    text-transform: uppercase;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-subtitle {
    margin: 18px 0 0;
    color: rgba(215, 237, 247, 0.84);
    font-size: 11px;
    line-height: 1.55;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-progress {
    max-width: 760px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    color: #9fcde0;
    font-size: 10px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-status span {
    color: rgba(199, 220, 229, 0.48);
    white-space: nowrap;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-hint {
    margin: 0;
    color: #d7edf7;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-bar-container {
    position: relative;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-bar-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.35) 44%, rgba(255, 255, 255, 0.82) 50%, rgba(166, 139, 255, 0.42) 56%, transparent 100%);
    transform: translateX(-100%);
    animation: oaLoadingScan 1.8s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-bar {
    height: 100%;
    width: 78%;
    border-radius: 0;
    background: linear-gradient(90deg, #256275, #00d9ff, #a68bff);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.66);
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

#auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-steps span {
    min-height: 42px;
    padding-top: 11px;
    border-top: 1px solid rgba(125, 255, 156, 0.62);
    color: rgba(215, 255, 225, 0.92);
    font-size: 9px;
}

@media (max-width: 560px) {
    #auth-screen:has(#auth-loading:not([hidden])) .screen-content.auth-content {
        padding: calc(96px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)) !important;
        gap: 22px;
    }

    #auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-title {
        font-size: 48px;
    }

    #auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    #auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #auth-screen:has(#auth-loading:not([hidden])) .auth-loading-shell .loading-shell-steps span {
        min-height: 0;
        padding: 9px 0 9px 16px;
        border-top: 0;
        border-left: 1px solid rgba(125, 255, 156, 0.62);
    }
}

/* ================================================================
   AUTH FLOW — layout tweaks (left-align content, consistent spacing)
   ================================================================ */

#auth-screen .auth-content,
#verify-screen .auth-content,
#server-screen .auth-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
#auth-screen #auth-form,
#verify-screen .verify-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    margin-top: 8px;
}
#verify-screen .verify-email {
    font-family: var(--oa-mono);
    font-size: 12px;
    color: var(--oa-cyan);
    letter-spacing: 0.05em;
    padding: 8px 10px;
    background: rgba(0, 217, 255, 0.06);
    border: 1px solid var(--oa-cyan-line);
    border-radius: 2px;
    margin: 8px 0;
    word-break: break-all;
    text-align: left;
}
#verify-screen .verify-info p {
    font-family: var(--oa-sans);
    font-size: 13px;
    color: var(--oa-text-2);
    line-height: 1.5;
    margin: 4px 0;
    text-align: left;
}

/* ================================================================
   LOOT TAB POLISH - WAGUS / ORBryn operations console
   ================================================================ */

#start-screen[data-mm].mm-desktop .mm-content:has(#mm-tab-loot.mm-tab-active) {
    width: calc(100vw - 114px);
    max-width: none;
    padding-left: clamp(22px, 3vw, 48px);
    padding-right: clamp(22px, 3vw, 48px);
}

#start-screen[data-mm] #mm-tab-loot {
    --loot-panel: rgba(8, 9, 12, 0.92);
    --loot-panel-2: rgba(14, 15, 20, 0.94);
    --loot-line: rgba(255, 255, 255, 0.12);
    --loot-line-soft: rgba(255, 255, 255, 0.07);
    --loot-cyan: var(--o-cyan, #00d9ff);
    --loot-cyan-soft: rgba(0, 217, 255, 0.12);
    --loot-cyan-line: rgba(0, 217, 255, 0.42);
    --loot-gold: #dec27a;
    --loot-gold-soft: rgba(222, 194, 122, 0.12);
}

#start-screen[data-mm] #mm-tab-loot.mm-tab-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding-top: 18px;
}

#start-screen[data-mm] #mm-tab-loot .mm-char-switcher:empty {
    display: none;
}

#start-screen[data-mm] #mm-tab-loot .mm-char-switcher,
#start-screen[data-mm] #mm-tab-loot .mm-loot-command,
#start-screen[data-mm] #mm-tab-loot .mm-loot-daily,
#start-screen[data-mm] #mm-tab-loot .mm-loot-wins,
#start-screen[data-mm] #mm-tab-loot .mm-loot-battle {
    grid-column: 1 / -1;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 24px 28px;
    border: 1px solid var(--loot-line);
    border-left: 3px solid var(--loot-cyan);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.13), transparent 42%),
        radial-gradient(circle at 88% 18%, rgba(222, 194, 122, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(11, 13, 17, 0.96), rgba(5, 5, 7, 0.96));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command::before {
    content: '';
    position: absolute;
    inset: 14px;
    pointer-events: none;
    background-image:
        linear-gradient(var(--loot-cyan-line), var(--loot-cyan-line)),
        linear-gradient(var(--loot-cyan-line), var(--loot-cyan-line)),
        linear-gradient(var(--loot-cyan-line), var(--loot-cyan-line)),
        linear-gradient(var(--loot-cyan-line), var(--loot-cyan-line));
    background-position: top left, top left, bottom right, bottom right;
    background-size: 44px 1px, 1px 44px, 44px 1px, 1px 44px;
    background-repeat: no-repeat;
    opacity: 0.7;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command::after {
    content: '';
    position: absolute;
    top: 0;
    right: 8%;
    width: 180px;
    height: 100%;
    background:
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.05) 12px 13px),
        linear-gradient(180deg, transparent, rgba(0, 217, 255, 0.08), transparent);
    transform: skewX(-16deg);
    opacity: 0.45;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-kicker,
#start-screen[data-mm] #mm-tab-loot .mm-loot-command-readouts {
    font-family: var(--o-mono);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-kicker {
    position: relative;
    z-index: 1;
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid var(--loot-cyan-line);
    color: var(--loot-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    background: rgba(0, 217, 255, 0.07);
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-title {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    font-family: var(--o-sans);
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 850;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--o-text);
    text-shadow: 0 0 26px rgba(0, 217, 255, 0.15);
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-copy {
    position: relative;
    z-index: 1;
    max-width: 58ch;
    margin-top: 14px;
    font-family: var(--o-mono);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--o-text-2);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-readouts {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-command-readouts span {
    padding: 6px 9px;
    border: 1px solid var(--loot-line-soft);
    background: rgba(255, 255, 255, 0.025);
    color: var(--o-text-3);
    font-size: 10px;
    letter-spacing: 0.16em;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-section {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--loot-line);
    border-top: 1px solid var(--loot-line);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
        var(--loot-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-section::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--loot-cyan-soft), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%);
    opacity: 0.65;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-section > * {
    position: relative;
    z-index: 1;
}

#start-screen[data-mm] #mm-tab-loot .mm-section-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--o-text-2);
}

#start-screen[data-mm] #mm-tab-loot .mm-section-header::before {
    position: static;
    min-width: 42px;
    padding: 3px 6px;
    border: 1px solid var(--loot-cyan-line);
    background: rgba(0, 217, 255, 0.08);
    color: var(--loot-cyan);
    font-size: 9px;
    line-height: 1;
    text-align: center;
    animation: none;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-daily .mm-section-header::before { content: 'CACHE'; }
#start-screen[data-mm] #mm-tab-loot .mm-loot-battle .mm-section-header::before { content: 'PASS'; }
#start-screen[data-mm] #mm-tab-loot .mm-loot-wins .mm-section-header::before { content: 'WINS'; }
#start-screen[data-mm] #mm-tab-loot .mm-loot-inventory .mm-section-header::before { content: 'BAG'; }
#start-screen[data-mm] #mm-tab-loot .mm-loot-equipped .mm-section-header::before { content: 'KIT'; }

#start-screen[data-mm] #mm-tab-loot .mm-section-deck {
    margin: 8px 0 16px;
    max-width: 54ch;
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-daily,
#start-screen[data-mm] #mm-tab-loot .mm-loot-wins,
#start-screen[data-mm] #mm-tab-loot .mm-loot-battle,
#start-screen[data-mm] #mm-tab-loot .mm-loot-inventory,
#start-screen[data-mm] #mm-tab-loot .mm-loot-equipped {
    grid-column: 1 / -1;
    grid-row: auto;
}

/* Daily rewards */
#start-screen[data-mm] #mm-tab-loot .mm-daily-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-slot {
    min-height: 112px;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 6px 10px;
    border: 1px solid var(--loot-line);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 50%),
        rgba(255, 255, 255, 0.026);
    opacity: 1;
    transform: none;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--loot-line);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-slot:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: var(--loot-line-strong, rgba(255,255,255,0.22));
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-locked {
    opacity: 0.62;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-locked::after {
    content: 'LOCKED';
    position: absolute;
    right: 7px;
    bottom: 7px;
    font-family: var(--o-mono);
    font-size: 7px;
    letter-spacing: 0.14em;
    color: var(--o-text-4);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-claimable {
    border-color: var(--loot-cyan-line);
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 217, 255, 0.16), transparent 58%),
        rgba(0, 217, 255, 0.055);
    animation: lootClaimPulse 2.6s ease-in-out infinite;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-claimable::before {
    background: var(--loot-cyan);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.7);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-claimable:hover {
    transform: translateY(-2px);
    border-color: var(--loot-cyan);
    background: rgba(0, 217, 255, 0.11);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-premium {
    border-color: rgba(222, 194, 122, 0.38);
    background:
        radial-gradient(circle at 50% 18%, rgba(222, 194, 122, 0.18), transparent 52%),
        rgba(222, 194, 122, 0.055);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-premium::before {
    background: var(--loot-gold);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-day {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--o-text-3);
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-icon {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.16));
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-reward {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--o-sans);
    font-size: 11px;
    line-height: 1.12;
    color: var(--o-text);
    text-align: center;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-claim-btn {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--loot-cyan-line);
    border-radius: 2px;
    background: var(--loot-cyan);
    color: #001018;
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-align: center;
}

#start-screen[data-mm] #mm-tab-loot .mm-daily-countdown {
    margin: -4px 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--loot-line-soft);
    background: rgba(255, 255, 255, 0.025);
    color: var(--loot-gold);
    text-align: left;
}

@keyframes lootClaimPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0), 0 0 0 rgba(0, 217, 255, 0); }
    50% { box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.16), 0 0 24px rgba(0, 217, 255, 0.12); }
}

/* Battle pass */
#start-screen[data-mm] #mm-tab-loot #mm-season-pass-content {
    display: grid;
    gap: 14px;
}

#start-screen[data-mm] #mm-tab-loot .mm-sp-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--loot-line);
    border-left: 2px solid var(--loot-gold);
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(222, 194, 122, 0.11), transparent 44%),
        rgba(255, 255, 255, 0.028);
}

#start-screen[data-mm] #mm-tab-loot .mm-sp-tier {
    font-family: var(--o-sans);
    font-size: 28px;
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--o-text);
}

#start-screen[data-mm] #mm-tab-loot .mm-sp-xp {
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--loot-gold);
}

#start-screen[data-mm] #mm-tab-loot .mm-sp-bar {
    height: 12px;
    margin: -6px 0 0;
    border-radius: 999px;
    border: 1px solid rgba(222, 194, 122, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

#start-screen[data-mm] #mm-tab-loot .mm-sp-fill {
    background: linear-gradient(90deg, var(--loot-cyan), var(--loot-gold));
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.22);
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-track {
    align-items: stretch;
    gap: 12px;
    padding: 10px 0 0;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(116px, 1fr));
    gap: 12px;
    align-items: stretch;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-card {
    width: auto;
    min-height: 158px;
    justify-content: space-between;
    padding: 18px 12px 14px;
    border-width: 1px !important;
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%),
        rgba(255,255,255,0.03) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-milestone {
    width: auto;
    background:
        radial-gradient(circle at 50% 20%, rgba(222, 194, 122, 0.16), transparent 55%),
        rgba(255,255,255,0.035) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-tier-badge {
    top: 0;
    border-radius: 0 0 3px 3px;
    background: #050507;
    font-family: var(--o-mono);
    font-size: 10px;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 18px 0 10px;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-icon {
    filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.16));
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-info-hidden {
    opacity: 1;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-rarity {
    font-size: 8px;
    letter-spacing: 0.16em;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-name {
    font-family: var(--o-sans);
    font-size: 12px;
    line-height: 1.18;
    color: var(--o-text-2) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-silhouette {
    background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 9px),
        rgba(255,255,255,0.018) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-silhouette .mm-bp-icon {
    filter: brightness(0.28) saturate(0.4) opacity(0.72);
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-silhouette .mm-bp-name {
    color: var(--o-text-3) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-nav {
    width: 44px;
    height: auto;
    min-height: 158px;
    border: 1px solid var(--loot-line);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.028);
    color: var(--loot-cyan);
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-nav:hover:not(:disabled) {
    border-color: var(--loot-cyan-line);
    background: rgba(0, 217, 255, 0.08);
}

#start-screen[data-mm] #mm-tab-loot .mm-bp-page-indicator {
    padding-top: 4px;
    color: var(--o-text-3);
}

/* Recent wins */
#start-screen[data-mm] #mm-tab-loot .mm-gacha-wins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 0;
    padding: 2px 2px 8px;
    overflow-x: hidden;
    overflow-y: visible;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win {
    min-width: 0;
    width: 100%;
    min-height: 92px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-width: 1px !important;
    border-radius: 7px;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--win-color) 30%, transparent), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255,255,255,0.025) 48%, rgba(0, 0, 0, 0.18)),
        var(--win-bg) !important;
    opacity: 1;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--win-color), transparent);
    opacity: 0.72;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win-sheen {
    opacity: 0.24;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win-icon-frame {
    width: 50px;
    height: 50px;
    border-color: color-mix(in srgb, var(--win-color) 36%, var(--loot-line-soft));
    border-radius: 6px;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--win-color) 28%, transparent));
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win-info {
    gap: 5px;
    padding-right: 0;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win .win-rarity {
    font-family: var(--o-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win .win-label {
    font-family: var(--o-sans);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.12;
    color: var(--o-text) !important;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win .win-status {
    font-family: var(--o-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-claimed {
    opacity: 1;
    pointer-events: none;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-claimed::after {
    content: 'DELIVERED';
    top: 10px;
    right: 10px;
    left: auto;
    transform: none;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(125, 255, 156, 0.32);
    background: rgba(125, 255, 156, 0.08);
    color: rgba(125, 255, 156, 0.88);
    font-family: var(--o-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
}

/* Inventory and equipped readouts */
#start-screen[data-mm] #mm-tab-loot .mm-inv-grid,
#start-screen[data-mm] #mm-tab-loot .mm-equipped-grid {
    min-height: 156px;
    border: 1px dashed var(--loot-line-soft);
    background: rgba(255, 255, 255, 0.018);
}

#start-screen[data-mm] #mm-tab-loot .mm-empty-state {
    min-height: 132px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px;
    color: var(--o-text-3);
    text-align: center;
}

#start-screen[data-mm] #mm-tab-loot .mm-inv-grid > .mm-empty-state {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
}

#start-screen[data-mm] #mm-tab-loot .mm-equipped-grid > .mm-empty-state {
    width: 100%;
}

#start-screen[data-mm] #mm-tab-loot .mm-empty-icon {
    width: 42px;
    height: 42px;
    opacity: 0.42;
    filter: brightness(0) invert(0.75);
}

#start-screen[data-mm] #mm-tab-loot .mm-empty-title {
    margin: 0;
    font-family: var(--o-sans);
    font-size: 14px;
    line-height: 1.2;
    color: var(--o-text-2);
}

#start-screen[data-mm] #mm-tab-loot .mm-empty-sub {
    margin: 0;
    max-width: 30ch;
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

#start-screen[data-mm].active #mm-tab-loot.mm-tab-active .mm-loot-command {
    animation: mmFadeScale 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#start-screen[data-mm].active #mm-tab-loot.mm-tab-active .mm-loot-section {
    animation: mmFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#start-screen[data-mm].active #mm-tab-loot.mm-tab-active .mm-loot-daily { animation-delay: 80ms; }
#start-screen[data-mm].active #mm-tab-loot.mm-tab-active .mm-loot-wins { animation-delay: 120ms; }
#start-screen[data-mm].active #mm-tab-loot.mm-tab-active .mm-loot-battle { animation-delay: 160ms; }

@media (max-width: 980px) {
    #start-screen[data-mm] #mm-tab-loot.mm-tab-active {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-loot-daily,
    #start-screen[data-mm] #mm-tab-loot .mm-loot-wins,
    #start-screen[data-mm] #mm-tab-loot .mm-loot-battle,
    #start-screen[data-mm] #mm-tab-loot .mm-loot-inventory,
    #start-screen[data-mm] #mm-tab-loot .mm-loot-equipped {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-daily-grid {
        grid-template-columns: repeat(4, minmax(74px, 1fr)) !important;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-bp-cards {
        grid-template-columns: repeat(5, minmax(108px, 1fr));
        overflow-x: auto;
        padding-bottom: 6px;
    }
}

@media (max-width: 560px) {
    #start-screen[data-mm] #mm-tab-loot.mm-tab-active {
        gap: 14px;
        padding-top: 12px;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-loot-command,
    #start-screen[data-mm] #mm-tab-loot .mm-loot-section {
        padding: 18px;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-loot-command-title {
        font-size: 34px;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-daily-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-bp-track {
        gap: 8px;
    }

    #start-screen[data-mm] #mm-tab-loot .mm-bp-nav {
        width: 34px;
    }
}

/* ================================================================
   ORBRYN MENU SIMPLIFICATION PASS - Home / Social / Lore / Profile
   ================================================================ */

#start-screen[data-mm] {
    --orb-panel: rgba(7, 8, 11, 0.94);
    --orb-panel-lift: rgba(12, 14, 18, 0.95);
    --orb-line: rgba(255, 255, 255, 0.12);
    --orb-line-soft: rgba(255, 255, 255, 0.07);
    --orb-cyan: var(--o-cyan, #00d9ff);
    --orb-cyan-line: rgba(0, 217, 255, 0.42);
    --orb-cyan-soft: rgba(0, 217, 255, 0.11);
    --orb-brass: var(--o-brass, #dec27a);
    --orb-brass-soft: rgba(222, 194, 122, 0.13);
}

#start-screen[data-mm] .mm-header-shell-note {
    min-width: 48px;
    min-height: 42px;
    align-items: center;
    justify-content: flex-end;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

#start-screen[data-mm] .mm-header-shell-note span {
    padding: 4px 7px;
    border: 1px solid rgba(222, 194, 122, 0.24);
    color: rgba(222, 194, 122, 0.75);
    font-family: var(--o-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.18em;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

#start-screen[data-mm] .mm-header-shell-note:hover span,
#start-screen[data-mm] .mm-header-shell-note:focus-visible span {
    border-color: rgba(222, 194, 122, 0.52);
    background: rgba(222, 194, 122, 0.08);
    color: rgba(242, 218, 158, 0.95);
}

#start-screen[data-mm] .mm-header-shell-note:focus-visible {
    outline: 2px solid rgba(222, 194, 122, 0.52);
    outline-offset: 3px;
}

#start-screen[data-mm] .mm-hero-banner {
    min-height: 260px;
    border: 1px solid rgba(0, 217, 255, 0.26);
    background:
        radial-gradient(circle at 18% 18%, rgba(0, 217, 255, 0.22), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(222, 194, 122, 0.10), transparent 36%),
        linear-gradient(135deg, rgba(8, 18, 28, 0.98), rgba(14, 10, 30, 0.96));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#start-screen[data-mm] .mm-hero-player,
#start-screen[data-mm] hyperframes-player {
    opacity: 1;
    filter: brightness(1.32) contrast(1.08) saturate(1.16);
}

#start-screen[data-mm] .mm-hero-overlay {
    justify-content: flex-end;
    padding: 28px 30px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.70), transparent 48%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.58), transparent 54%);
}

#start-screen[data-mm] .mm-hero-title {
    color: #fffdf5;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.55),
        0 0 30px rgba(0, 217, 255, 0.18);
}

#start-screen[data-mm] .mm-hero-sub {
    width: fit-content;
    padding: 5px 8px;
    border-left: 2px solid var(--orb-cyan);
    background: rgba(0, 217, 255, 0.08);
    color: var(--orb-cyan);
}

#start-screen[data-mm] .mm-orbryn-spend-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
    gap: 16px;
    align-items: stretch;
    margin: -10px auto 18px;
    padding: 16px;
    width: min(100%, 980px);
    border: 1px solid rgba(222, 194, 122, 0.34);
    border-left: 3px solid var(--orb-brass);
    background:
        linear-gradient(90deg, rgba(222, 194, 122, 0.14), transparent 46%),
        radial-gradient(circle at 78% 10%, rgba(0, 217, 255, 0.14), transparent 32%),
        rgba(7, 8, 11, 0.95);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#start-screen[data-mm] .mm-orbryn-spend-head {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
}

#start-screen[data-mm] .mm-orbryn-spend-kicker,
#start-screen[data-mm] .mm-orbryn-spend-copy,
#start-screen[data-mm] .mm-orbryn-spend-label,
#start-screen[data-mm] .mm-orbryn-spend-price {
    font-family: var(--o-mono);
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-orbryn-spend-kicker {
    width: fit-content;
    padding: 4px 7px;
    border: 1px solid rgba(0, 217, 255, 0.34);
    background: rgba(0, 217, 255, 0.08);
    color: var(--orb-cyan);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

#start-screen[data-mm] .mm-orbryn-spend-token {
    color: var(--orb-brass);
    font-family: var(--o-sans);
    font-size: 34px;
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-orbryn-spend-copy {
    max-width: 48ch;
    color: rgba(242, 240, 234, 0.64);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

#start-screen[data-mm] .mm-orbryn-spend-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#start-screen[data-mm] .mm-orbryn-spend-card {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    min-height: 82px;
    padding: 13px 12px;
    border: 1px solid rgba(222, 194, 122, 0.30);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.10), transparent 58%),
        rgba(255, 255, 255, 0.03);
    color: var(--o-text, #f2f0ea);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

#start-screen[data-mm] .mm-orbryn-spend-card::before {
    display: none;
}

#start-screen[data-mm] .mm-orbryn-spend-card:hover,
#start-screen[data-mm] .mm-orbryn-spend-card:focus-visible {
    border-color: rgba(0, 217, 255, 0.44);
    background:
        linear-gradient(180deg, rgba(0, 217, 255, 0.10), transparent 58%),
        rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

#start-screen[data-mm] .mm-orbryn-spend-card:focus-visible {
    outline: 2px solid rgba(0, 217, 255, 0.44);
    outline-offset: 2px;
}

#start-screen[data-mm] .mm-orbryn-spend-card-primary {
    border-color: rgba(0, 217, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(0, 217, 255, 0.12), transparent 60%),
        rgba(222, 194, 122, 0.06);
}

#start-screen[data-mm] .mm-orbryn-spend-label {
    max-width: 100%;
    color: rgba(242, 240, 234, 0.86);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

#start-screen[data-mm] .mm-orbryn-spend-price {
    color: var(--orb-brass);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0;
}

#start-screen[data-mm] .mm-tab-command,
#start-screen[data-mm] .mm-lore-command {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 24px 26px;
    border: 1px solid var(--orb-line);
    border-left: 3px solid var(--orb-cyan);
    background:
        linear-gradient(90deg, var(--orb-cyan-soft), transparent 44%),
        radial-gradient(circle at 88% 12%, var(--orb-brass-soft), transparent 34%),
        linear-gradient(135deg, rgba(10, 12, 15, 0.98), rgba(4, 5, 8, 0.98));
    box-shadow:
        0 20px 58px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#start-screen[data-mm] .mm-tab-command::before,
#start-screen[data-mm] .mm-lore-command::before {
    content: '';
    position: absolute;
    inset: 13px;
    pointer-events: none;
    background-image:
        linear-gradient(var(--orb-cyan-line), var(--orb-cyan-line)),
        linear-gradient(var(--orb-cyan-line), var(--orb-cyan-line)),
        linear-gradient(var(--orb-cyan-line), var(--orb-cyan-line)),
        linear-gradient(var(--orb-cyan-line), var(--orb-cyan-line));
    background-position: top left, top left, bottom right, bottom right;
    background-size: 42px 1px, 1px 42px, 42px 1px, 1px 42px;
    background-repeat: no-repeat;
    opacity: 0.64;
}

#start-screen[data-mm] .mm-tab-command-kicker,
#start-screen[data-mm] .mm-lore-command-kicker,
#start-screen[data-mm] .mm-lore-card-code {
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orb-cyan);
}

#start-screen[data-mm] .mm-tab-command-title,
#start-screen[data-mm] .mm-lore-command-title {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-family: var(--o-sans);
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--o-text, #f7f3e8);
}

#start-screen[data-mm] .mm-tab-command p,
#start-screen[data-mm] .mm-lore-command-copy {
    position: relative;
    z-index: 1;
    max-width: 58ch;
    margin: 14px 0 0;
    font-family: var(--o-mono);
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--o-text-3, rgba(238, 241, 247, 0.58));
}

#start-screen[data-mm] #mm-tab-home .mm-section-deck {
    margin: 8px 0 16px;
    max-width: 62ch;
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-home .save-slots {
    gap: 0;
}

#start-screen[data-mm] #mm-tab-home .save-slot {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--orb-line);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 38%),
        radial-gradient(circle at 92% 12%, rgba(222, 194, 122, 0.12), transparent 32%),
        var(--orb-panel);
}

#start-screen[data-mm] #mm-tab-home .save-slot::after {
    content: 'SINGLE ACCOUNT SURVIVOR';
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 7px;
    border: 1px solid rgba(222, 194, 122, 0.26);
    background: rgba(222, 194, 122, 0.08);
    color: rgba(222, 194, 122, 0.86);
    font-family: var(--o-mono);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.14em;
}

#start-screen[data-mm] #mm-tab-home .slot-label {
    color: var(--orb-cyan);
}

#start-screen[data-mm] #mm-tab-home .slot-char-name {
    font-size: 20px;
    font-weight: 900;
    color: var(--o-text);
}

#start-screen[data-mm] #mm-tab-home .slot-actions {
    width: auto;
    min-width: 160px;
}

#start-screen[data-mm] #mm-tab-home .btn-new-char,
#start-screen[data-mm] #mm-tab-home .btn-play-slot {
    min-height: 42px;
}

#start-screen[data-mm] .mm-social-relay {
    min-height: 520px;
    border-color: rgba(0, 217, 255, 0.28) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(0, 217, 255, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(3, 16, 24, 0.98), rgba(1, 7, 12, 0.98)) !important;
}

#start-screen[data-mm] .mm-social-relay-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

#start-screen[data-mm] .mm-social-relay-heading .mm-section-header {
    margin-bottom: 6px !important;
}

#start-screen[data-mm] .mm-social-relay-heading p {
    margin: 0;
    color: rgba(215, 237, 247, 0.58);
    font-size: 0.72rem;
    line-height: 1.55;
}

#start-screen[data-mm] .mm-social-relay-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
    color: rgba(215, 237, 247, 0.58);
    font: 900 9px/1 var(--oa-mono);
    letter-spacing: 0.12em;
}

#start-screen[data-mm] .mm-social-relay-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70808a;
    box-shadow: 0 0 8px rgba(112, 128, 138, 0.42);
}

#start-screen[data-mm] .mm-social-relay-status[data-status="connected"],
#start-screen[data-mm] .mm-social-relay-status[data-status="syncing"] {
    border-color: rgba(255, 193, 77, 0.35);
    color: #ffd98e;
}

#start-screen[data-mm] .mm-social-relay-status[data-status="connected"] > span,
#start-screen[data-mm] .mm-social-relay-status[data-status="syncing"] > span {
    background: #ffc14d;
    box-shadow: 0 0 10px rgba(255, 193, 77, 0.65);
}

#start-screen[data-mm] .mm-social-relay-status[data-status="joined"] {
    border-color: rgba(93, 244, 182, 0.4);
    color: #bfffe3;
}

#start-screen[data-mm] .mm-social-relay-status[data-status="joined"] > span {
    background: #5df4b6;
    box-shadow: 0 0 11px rgba(93, 244, 182, 0.75);
}

#start-screen[data-mm] .mm-social-relay-status[data-status="error"] {
    border-color: rgba(255, 101, 122, 0.42);
    color: #ffb3bd;
}

#start-screen[data-mm] .mm-social-relay-status[data-status="error"] > span {
    background: #ff657a;
    box-shadow: 0 0 10px rgba(255, 101, 122, 0.62);
}

#start-screen[data-mm] .mm-social-chat-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border: 1px solid rgba(0, 217, 255, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

#start-screen[data-mm] .mm-social-chat-tab {
    min-height: 44px;
    border: 0;
    border-right: 1px solid rgba(0, 217, 255, 0.16);
    background: transparent;
    color: rgba(215, 237, 247, 0.5);
    cursor: pointer;
    font: 900 10px/1 var(--oa-mono);
    letter-spacing: 0.16em;
}

#start-screen[data-mm] .mm-social-chat-tab:last-child { border-right: 0; }

#start-screen[data-mm] .mm-social-chat-tab:hover,
#start-screen[data-mm] .mm-social-chat-tab:focus-visible {
    background: rgba(0, 217, 255, 0.07);
    color: #d7edf7;
    outline: none;
}

#start-screen[data-mm] .mm-social-chat-tab.active {
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.17), rgba(0, 217, 255, 0.055));
    color: #8ff0ff;
    box-shadow: inset 0 -2px #00d9ff;
}

#start-screen[data-mm] .mm-social-chat-context {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 11px;
    border-right: 1px solid rgba(0, 217, 255, 0.14);
    border-bottom: 1px solid rgba(0, 217, 255, 0.14);
    border-left: 1px solid rgba(0, 217, 255, 0.14);
    color: rgba(215, 237, 247, 0.58);
    font: 800 9px/1.4 var(--oa-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-social-chat-target-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

#start-screen[data-mm] .mm-social-chat-target-wrap[hidden] { display: none; }

#start-screen[data-mm] #mm-social-chat-target {
    min-width: min(230px, 42vw);
    min-height: 34px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 2px;
    outline: none;
    background: #031018;
    color: #d7edf7;
    font: 800 10px/1 var(--oa-mono);
}

#start-screen[data-mm] .mm-social-chat-log {
    display: flex;
    height: clamp(260px, 35vh, 390px);
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding: 14px;
    border-right: 1px solid rgba(0, 217, 255, 0.14);
    border-left: 1px solid rgba(0, 217, 255, 0.14);
    background:
        linear-gradient(rgba(0, 217, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 32px,
        rgba(0, 4, 8, 0.72);
    scrollbar-color: rgba(0, 217, 255, 0.35) transparent;
}

#start-screen[data-mm] .mm-social-chat-empty {
    display: grid;
    min-height: 100%;
    place-items: center;
    color: rgba(215, 237, 247, 0.38);
    font: 800 10px/1.6 var(--oa-mono);
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-social-chat-message {
    align-self: flex-start;
    width: min(86%, 760px);
    padding: 10px 12px;
    border: 1px solid rgba(0, 217, 255, 0.14);
    border-left: 2px solid rgba(0, 217, 255, 0.62);
    background: rgba(0, 217, 255, 0.045);
}

#start-screen[data-mm] .mm-social-chat-message-mine {
    align-self: flex-end;
    border-color: rgba(93, 244, 182, 0.17);
    border-right: 2px solid rgba(93, 244, 182, 0.62);
    border-left-width: 1px;
    background: rgba(93, 244, 182, 0.05);
}

#start-screen[data-mm] .mm-social-chat-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #72eaff;
    font: 900 9px/1 var(--oa-mono);
    letter-spacing: 0.08em;
}

#start-screen[data-mm] .mm-social-chat-message-mine .mm-social-chat-message-meta { color: #a7ffd2; }

#start-screen[data-mm] .mm-social-chat-message-meta time {
    color: rgba(215, 237, 247, 0.34);
    font-weight: 700;
}

#start-screen[data-mm] .mm-social-chat-message p {
    margin: 7px 0 0;
    color: rgba(235, 246, 250, 0.9);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

#start-screen[data-mm] .mm-social-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    background: rgba(1, 9, 14, 0.96);
}

#start-screen[data-mm] #mm-social-chat-input {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 217, 255, 0.24);
    border-radius: 2px;
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    color: #f6f7fa;
    font: 700 0.78rem/1.2 var(--oa-mono);
}

#start-screen[data-mm] #mm-social-chat-input:focus {
    border-color: rgba(0, 217, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.08);
}

#start-screen[data-mm] #mm-social-chat-send {
    min-width: 98px;
    border: 1px solid rgba(0, 217, 255, 0.48);
    border-radius: 2px;
    background: rgba(0, 217, 255, 0.14);
    color: #8ff0ff;
    cursor: pointer;
    font: 900 10px/1 var(--oa-mono);
    letter-spacing: 0.14em;
}

#start-screen[data-mm] #mm-social-chat-send:hover:not(:disabled),
#start-screen[data-mm] #mm-social-chat-send:focus-visible:not(:disabled) {
    background: rgba(0, 217, 255, 0.26);
    color: #fff;
    outline: none;
}

#start-screen[data-mm] #mm-social-chat-input:disabled,
#start-screen[data-mm] #mm-social-chat-send:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

#start-screen[data-mm] .mm-social-chat-feedback {
    min-height: 16px;
    margin: 7px 2px 0;
    color: rgba(215, 237, 247, 0.5);
    font: 800 9px/1.5 var(--oa-mono);
}

#start-screen[data-mm] .mm-social-chat-feedback[data-tone="error"] { color: #ff9dad; }

#start-screen[data-mm] #mm-tab-social.mm-tab-active,
#start-screen[data-mm] #mm-tab-profile.mm-tab-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 18px;
}

#start-screen[data-mm] #mm-tab-social .mm-section,
#start-screen[data-mm] #mm-tab-profile .mm-section,
#start-screen[data-mm] #mm-tab-profile .mm-profile-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--orb-line);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
        var(--orb-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#start-screen[data-mm] #mm-tab-social .mm-section::before,
#start-screen[data-mm] #mm-tab-profile .mm-section::before {
    display: none;
}

#start-screen[data-mm] #mm-tab-social .mm-section-header,
#start-screen[data-mm] #mm-tab-profile .mm-section-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--o-text-2);
}

#start-screen[data-mm] #mm-tab-social .mm-section-header::before,
#start-screen[data-mm] #mm-tab-profile .mm-section-header::before {
    position: static;
    min-width: 40px;
    padding: 3px 6px;
    border: 1px solid var(--orb-cyan-line);
    background: rgba(0, 217, 255, 0.08);
    color: var(--orb-cyan);
    font-size: 9px;
    line-height: 1;
    text-align: center;
    animation: none;
}

#start-screen[data-mm] #mm-tab-social .mm-social-relay .mm-section-header::before { content: 'COMMS'; }
#start-screen[data-mm] #mm-group-section .mm-section-header::before { content: 'TEAM'; }
#start-screen[data-mm] #mm-tab-social .mm-social-friends .mm-section-header::before { content: 'LINK'; }
#start-screen[data-mm] #mm-tab-social .mm-social-leaderboard .mm-section-header::before { content: 'RANK'; }
#start-screen[data-mm] #mm-tab-profile .mm-profile-account-section .mm-section-header::before { content: 'ID'; }
#start-screen[data-mm] #mm-tab-profile .mm-profile-wallet-section .mm-section-header::before { content: 'WAL'; }
#start-screen[data-mm] #mm-tab-profile .mm-profile-staking-section .mm-section-header::before { content: 'STK'; }
#start-screen[data-mm] #mm-tab-profile .mm-profile-stats-section .mm-section-header::before { content: 'LOG'; }

#start-screen[data-mm] .mm-friend-search {
    padding: 8px;
    border: 1px solid var(--orb-line-soft);
    background: rgba(255, 255, 255, 0.026);
}

#start-screen[data-mm] .mm-search-input {
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
}

#start-screen[data-mm] .mm-search-btn {
    border-radius: 2px;
    background: var(--orb-brass);
    color: #090807;
    font-weight: 900;
}

#start-screen[data-mm] #mm-tab-profile .mm-profile-card {
    border-left: 3px solid var(--orb-brass);
    background:
        radial-gradient(circle at 12% 38%, rgba(222, 194, 122, 0.15), transparent 36%),
        linear-gradient(135deg, rgba(14, 13, 10, 0.98), rgba(5, 5, 7, 0.98));
}

#start-screen[data-mm] #mm-tab-profile .mm-profile-avatar {
    border: 1px solid rgba(222, 194, 122, 0.36);
    background: rgba(222, 194, 122, 0.08);
    box-shadow: 0 0 26px rgba(222, 194, 122, 0.08);
}

#start-screen[data-mm] .mm-stats-grid {
    gap: 10px;
}

#start-screen[data-mm] .mm-stat-card {
    border: 1px solid var(--orb-line-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
        rgba(255, 255, 255, 0.02);
}

#start-screen[data-mm] #mm-tab-lore.mm-tab-active {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
    gap: 18px;
    align-items: stretch;
    padding-top: 18px;
}

#start-screen[data-mm] .mm-lore-command {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 0;
    background:
        radial-gradient(circle at 14% 12%, rgba(0, 217, 255, 0.22), transparent 34%),
        radial-gradient(circle at 86% 88%, rgba(222, 194, 122, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(9, 16, 24, 0.98), rgba(8, 5, 16, 0.98));
}

#start-screen[data-mm] .mm-lore-command::after {
    content: '';
    position: absolute;
    top: 12%;
    right: 10%;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(0, 217, 255, 0.26);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 49%, rgba(0, 217, 255, 0.20) 49% 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(0, 217, 255, 0.16) 49% 51%, transparent 51%),
        radial-gradient(circle, transparent 54%, rgba(0, 217, 255, 0.12) 55%, transparent 56%);
    opacity: 0.55;
    animation: loreScannerSpin 18s linear infinite;
}

#start-screen[data-mm] .mm-lore-primary {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-top: 22px;
    padding: 13px 16px;
    border: 1px solid var(--orb-cyan-line);
    border-radius: 2px;
    background: var(--orb-cyan);
    color: #031016;
    font-family: var(--o-mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

#start-screen[data-mm] .mm-lore-primary span {
    display: inline-block;
    margin-left: 8px;
    transition: transform 160ms ease;
}

#start-screen[data-mm] .mm-lore-primary:hover span {
    transform: translateX(4px);
}

#start-screen[data-mm] .mm-lore-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#start-screen[data-mm] .mm-lore-card {
    position: relative;
    min-height: 170px;
    padding: 18px;
    border: 1px solid var(--orb-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
        var(--orb-panel);
    overflow: hidden;
}

#start-screen[data-mm] .mm-lore-card::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    height: 1px;
    background: linear-gradient(90deg, var(--orb-cyan-line), transparent);
}

#start-screen[data-mm] .mm-lore-card-feature {
    grid-column: 1 / -1;
    min-height: 190px;
    border-color: rgba(222, 194, 122, 0.28);
    background:
        radial-gradient(circle at 84% 20%, rgba(222, 194, 122, 0.15), transparent 32%),
        linear-gradient(135deg, rgba(12, 12, 8, 0.98), rgba(5, 6, 8, 0.98));
}

#start-screen[data-mm] .mm-lore-card h3 {
    margin: 18px 0 8px;
    font-family: var(--o-sans);
    font-size: 24px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--o-text);
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-lore-card p {
    margin: 0;
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: var(--o-text-3);
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#start-screen[data-mm] .mm-nav-item {
    min-width: 0;
}

#start-screen[data-mm] .mm-nav-icon {
    opacity: 0.72;
}

#start-screen[data-mm].active #mm-tab-lore.mm-tab-active .mm-lore-command,
#start-screen[data-mm].active #mm-tab-social.mm-tab-active .mm-tab-command,
#start-screen[data-mm].active #mm-tab-profile.mm-tab-active .mm-tab-command {
    animation: mmFadeScale 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#start-screen[data-mm].active #mm-tab-lore.mm-tab-active .mm-lore-card,
#start-screen[data-mm].active #mm-tab-social.mm-tab-active .mm-section,
#start-screen[data-mm].active #mm-tab-profile.mm-tab-active .mm-section,
#start-screen[data-mm].active #mm-tab-profile.mm-tab-active .mm-profile-card {
    animation: mmFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes loreScannerSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
    #start-screen[data-mm] #mm-tab-lore.mm-tab-active {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] .mm-lore-command {
        min-height: 300px;
    }
}

@media (max-width: 560px) {
    #start-screen[data-mm] .mm-tab-command,
    #start-screen[data-mm] .mm-lore-command {
        padding: 20px 18px;
    }

    #start-screen[data-mm] .mm-lore-grid {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] .mm-lore-card-feature {
        grid-column: auto;
    }

    #start-screen[data-mm] #mm-tab-home .save-slot {
        padding-top: 40px;
    }

    #start-screen[data-mm] #mm-tab-home .slot-actions {
        width: 100%;
    }

    #start-screen[data-mm] .mm-social-relay-heading,
    #start-screen[data-mm] .mm-social-chat-context {
        align-items: stretch;
        flex-direction: column;
    }

    #start-screen[data-mm] .mm-social-relay-status {
        align-self: flex-start;
    }

    #start-screen[data-mm] .mm-social-chat-target-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    #start-screen[data-mm] #mm-social-chat-target {
        width: 100%;
        min-width: 0;
    }

    #start-screen[data-mm] .mm-social-chat-log {
        height: min(330px, 42vh);
        padding: 10px;
    }

    #start-screen[data-mm] .mm-social-chat-message {
        width: 94%;
    }

    #start-screen[data-mm] .mm-social-chat-composer {
        grid-template-columns: minmax(0, 1fr);
    }

    #start-screen[data-mm] #mm-social-chat-send {
        min-height: 42px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #auth-screen .screen-content,
    #verify-screen .screen-content,
    #server-screen .screen-content,
    #server-confirm-screen .screen-content,
    #create-screen .screen-content,
    #delete-screen .screen-content,
    #loading-screen .screen-content,
    #auth-screen *,
    #auth-screen *::before,
    #auth-screen *::after,
    #loading-screen *,
    #loading-screen *::before,
    #loading-screen *::after,
    #mm-tab-loot *,
    #mm-tab-loot *::before,
    #mm-tab-loot *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================================================
   ORBRYN WAGUS SHELL POLISH
   Cohesive cyan/brass console styling for shell-linked gameplay.
   ================================================================ */

#btn-signout,
#btn-verify-signout,
.mm-drawer-item-danger[data-action="signout"] {
    display: none !important;
}

#settings-screen,
#controls-screen,
#messages-screen,
#server-screen,
#server-confirm-screen,
#lore-screen {
    --o-bg: #050507;
    --o-bg-1: #0a0d12;
    --o-bg-2: #10151b;
    --o-line: rgba(255, 255, 255, 0.08);
    --o-line-soft: rgba(255, 255, 255, 0.045);
    --o-line-strong: rgba(255, 255, 255, 0.16);
    --o-text: #f2f0ea;
    --o-text-2: rgba(242, 240, 234, 0.68);
    --o-text-3: rgba(242, 240, 234, 0.42);
    --o-cyan: #00d9ff;
    --o-cyan-hi: #8ff0ff;
    --o-cyan-dim: rgba(0, 217, 255, 0.14);
    --o-cyan-line: rgba(0, 217, 255, 0.42);
    --o-brass: #dec27a;
    --o-brass-dim: rgba(222, 194, 122, 0.14);
    --o-brass-line: rgba(222, 194, 122, 0.34);
    --o-online: #7dff9c;
    --o-warn: #ffb24d;
    --o-danger: #ff556a;
    --o-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --o-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

#start-screen[data-mm] .mm-hamburger {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 3px;
    border-color: rgba(0, 217, 255, 0.20);
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(222, 194, 122, 0.045)),
        rgba(255, 255, 255, 0.018);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

#start-screen[data-mm] .mm-hamburger-icon {
    display: none;
}

#start-screen[data-mm] .mm-hamburger::before,
#start-screen[data-mm] .mm-hamburger::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    background: var(--o-cyan);
}

#start-screen[data-mm] .mm-hamburger::before {
    top: 13px;
    box-shadow:
        0 7px 0 rgba(242, 240, 234, 0.82),
        0 14px 0 rgba(222, 194, 122, 0.92);
}

#start-screen[data-mm] .mm-hamburger::after {
    top: 20px;
    left: 18px;
    right: 18px;
    background: var(--o-bg);
    opacity: 0.95;
}

#start-screen[data-mm] .mm-drawer {
    width: min(340px, 86vw);
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 217, 255, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(8, 12, 16, 0.99), rgba(4, 4, 6, 0.99));
    border-right: 1px solid rgba(0, 217, 255, 0.18);
    box-shadow: 28px 0 90px rgba(0, 0, 0, 0.68);
}

#start-screen[data-mm] .mm-drawer-header {
    padding: 30px 26px 22px;
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.08), transparent 68%),
        rgba(255, 255, 255, 0.012);
}

#start-screen[data-mm] .mm-drawer-title {
    color: var(--o-text);
    letter-spacing: 0.48em;
}

#start-screen[data-mm] .mm-drawer-title::before {
    width: 3px;
    background: linear-gradient(180deg, var(--o-cyan), var(--o-brass));
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.35);
}

#start-screen[data-mm] .mm-drawer-item {
    margin: 5px 14px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
}

#start-screen[data-mm] .mm-drawer-item:hover,
#start-screen[data-mm] .mm-drawer-item:focus-visible {
    border-color: rgba(0, 217, 255, 0.18);
    border-left-color: var(--o-cyan);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.12), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.02);
}

#start-screen[data-mm] .mm-drawer-icon {
    width: 18px;
    height: 18px;
    padding: 6px;
    box-sizing: content-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.045);
    filter: brightness(0) invert(0.9);
}

#start-screen[data-mm] .mm-account-bar {
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

#start-screen[data-mm] .mm-account-email {
    min-width: min(100%, 240px);
}

#start-screen[data-mm] .mm-account-managed {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 9px;
    border: 1px solid var(--o-cyan-line);
    border-radius: 3px;
    background: var(--o-cyan-dim);
    color: var(--o-cyan-hi);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nav-icon,
#start-screen[data-mm] .mm-fab-icon {
    display: none;
}

#start-screen[data-mm] .mm-nav-glyph {
    position: relative;
    display: block;
    width: 30px;
    height: 25px;
    margin: 0 auto 5px;
    color: currentColor;
    opacity: 0.9;
    transition: color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

#start-screen[data-mm] .mm-nav-item:hover .mm-nav-glyph,
#start-screen[data-mm] .mm-nav-active .mm-nav-glyph {
    color: var(--o-cyan);
    opacity: 1;
    transform: translateY(-1px);
}

#start-screen[data-mm] .mm-nav-svg {
    display: block;
    width: 30px;
    height: 25px;
    margin: 0 auto 5px;
    color: currentColor;
    overflow: visible;
    opacity: 0.96;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.055));
    transition:
        color 150ms ease,
        filter 150ms ease,
        opacity 150ms ease,
        transform 150ms ease;
}

#start-screen[data-mm] .mm-nav-svg path,
#start-screen[data-mm] .mm-nav-svg circle,
#start-screen[data-mm] .mm-nav-svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

#start-screen[data-mm] .mm-nav-svg [data-fill] {
    fill: currentColor;
    stroke: none;
}

#start-screen[data-mm] .mm-nav-svg [data-muted] {
    opacity: 0.58;
}

#start-screen[data-mm] .mm-nav-item:hover .mm-nav-svg,
#start-screen[data-mm] .mm-nav-action:hover .mm-nav-svg,
#start-screen[data-mm] .mm-nav-action:focus-visible .mm-nav-svg,
#start-screen[data-mm] .mm-nav-active .mm-nav-svg,
#start-screen[data-mm] .mm-nav-action-active .mm-nav-svg {
    color: var(--o-cyan);
    opacity: 1;
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.22));
}

#start-screen[data-mm] .mm-fab-circle .mm-nav-svg {
    width: 22px;
    height: 22px;
    margin: 0;
}

#start-screen[data-mm] .mm-nav-fab.mm-nav-active .mm-nav-svg {
    color: #06111d;
    filter: none;
}

#start-screen[data-mm] .mm-nav-glyph::before,
#start-screen[data-mm] .mm-nav-glyph::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}

#start-screen[data-mm] .mm-nav-glyph-home::before {
    left: 7px;
    top: 10px;
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

#start-screen[data-mm] .mm-nav-glyph-home::after {
    left: 8px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

#start-screen[data-mm] .mm-nav-glyph-social::before {
    left: 4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow:
        16px 0 0 -1px var(--o-bg),
        16px 0 0 0 currentColor,
        8px 12px 0 -1px var(--o-bg),
        8px 12px 0 0 currentColor;
}

#start-screen[data-mm] .mm-nav-glyph-social::after {
    left: 9px;
    top: 11px;
    width: 13px;
    height: 11px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: skewX(-18deg);
    opacity: 0.7;
}

#start-screen[data-mm] .mm-nav-glyph-lore::before {
    left: 8px;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    transform: rotate(45deg);
}

#start-screen[data-mm] .mm-nav-glyph-lore::after {
    left: 13px;
    top: 10px;
    width: 4px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.78;
}

#start-screen[data-mm] .mm-nav-glyph-loot::before {
    left: 5px;
    top: 7px;
    width: 20px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

#start-screen[data-mm] .mm-nav-glyph-loot::after {
    left: 10px;
    top: 4px;
    width: 10px;
    height: 6px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

#start-screen[data-mm] .mm-nav-glyph-profile::before {
    left: 11px;
    top: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

#start-screen[data-mm] .mm-nav-glyph-profile::after {
    left: 7px;
    top: 15px;
    width: 16px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

#start-screen[data-mm] .mm-nav-glyph-messages::before {
    left: 5px;
    top: 6px;
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

#start-screen[data-mm] .mm-nav-glyph-messages::after {
    left: 8px;
    top: 8px;
    width: 14px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.72;
}

#start-screen[data-mm] .mm-nav-glyph-wallet::before {
    left: 4px;
    top: 7px;
    width: 22px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

#start-screen[data-mm] .mm-nav-glyph-wallet::after {
    left: 8px;
    top: 11px;
    width: 14px;
    height: 2px;
    background: currentColor;
    box-shadow: 9px 5px 0 -1px currentColor;
    opacity: 0.78;
}

#start-screen[data-mm] .mm-nav-glyph-server::before {
    left: 7px;
    top: 5px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
}

#start-screen[data-mm] .mm-nav-glyph-server::after {
    left: 11px;
    top: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.76;
}

#start-screen[data-mm] .mm-nav-glyph-controls::before {
    left: 4px;
    top: 9px;
    width: 22px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 9px;
}

#start-screen[data-mm] .mm-nav-glyph-controls::after {
    left: 9px;
    top: 6px;
    width: 2px;
    height: 8px;
    background: currentColor;
    box-shadow:
        -3px 3px 0 0 currentColor,
        3px 3px 0 0 currentColor,
        11px 4px 0 1px currentColor;
}

#start-screen[data-mm] .mm-nav-glyph-settings::before {
    left: 7px;
    top: 4px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow:
        0 -4px 0 -2px currentColor,
        0 4px 0 -2px currentColor,
        4px 0 0 -2px currentColor,
        -4px 0 0 -2px currentColor;
}

#start-screen[data-mm] .mm-nav-glyph-settings::after {
    left: 13px;
    top: 10px;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}

#start-screen[data-mm] .mm-fab-circle .mm-nav-glyph {
    margin: 0;
}

#start-screen[data-mm] .mm-nav-fab.mm-nav-active .mm-nav-glyph,
#start-screen[data-mm] .mm-nav-fab:hover .mm-nav-glyph {
    color: #071014;
}

#start-screen[data-mm] .mm-hero-banner {
    min-height: clamp(250px, 27vw, 360px);
    border-color: rgba(0, 217, 255, 0.32);
    box-shadow:
        inset 0 -1px 0 rgba(0, 217, 255, 0.32),
        0 18px 70px rgba(0, 0, 0, 0.35);
}

#start-screen[data-mm] .mm-hero-overlay {
    background:
        linear-gradient(90deg, rgba(3, 8, 11, 0.22), transparent 42%),
        linear-gradient(180deg, transparent 68%, rgba(2, 5, 7, 0.30));
}

#start-screen[data-mm] .mm-scene .s-walker-a {
    transform: translate(120px, 216px);
}

@keyframes mmWalkerA {
    0% { transform: translate(120px, 216px); }
    50% { transform: translate(280px, 216px); }
    50.01% { transform: translate(280px, 216px) scaleX(-1); }
    100% { transform: translate(120px, 216px) scaleX(-1); }
}

#start-screen[data-mm] .mm-scene .s-walker-b {
    transform: translate(160px, 216px) scaleX(-1);
}

@keyframes mmWalkerB {
    0% { transform: translate(160px, 216px) scaleX(-1); }
    50% { transform: translate(40px, 216px) scaleX(-1); }
    50.01% { transform: translate(40px, 216px); }
    100% { transform: translate(160px, 216px); }
}

#start-screen[data-mm] .mm-server-pill {
    padding: 12px 14px;
    border-left: 2px solid var(--o-cyan);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.09), transparent 62%),
        rgba(255, 255, 255, 0.015);
}

#start-screen[data-mm] #server-status-text {
    color: var(--o-text-2);
}

#settings-screen,
#controls-screen,
#messages-screen,
#server-screen,
#server-confirm-screen,
#lore-screen {
    background:
        radial-gradient(circle at 16% 0%, rgba(0, 217, 255, 0.10), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(222, 194, 122, 0.075), transparent 24%),
        linear-gradient(135deg, #030608, #070611 62%, #050507);
}

#settings-screen,
#controls-screen {
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px;
}

#settings-screen > .orb-modal-content,
#controls-screen > .orb-modal-content,
#server-screen > .auth-content,
#server-confirm-screen > .screen-content {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    margin: 28px auto;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 36%),
        radial-gradient(circle at 94% 10%, rgba(0, 217, 255, 0.10), transparent 24%),
        rgba(5, 7, 10, 0.94);
    box-shadow:
        0 24px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

#settings-screen > .orb-modal-content::before,
#controls-screen > .orb-modal-content::before,
#server-screen > .auth-content::before,
#server-confirm-screen > .screen-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 92px;
    background: linear-gradient(180deg, var(--o-cyan), var(--o-brass));
    box-shadow: 0 0 24px rgba(0, 217, 255, 0.36);
}

.orb-screen-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 12px;
}

.orb-screen-back {
    flex: 0 0 auto;
    min-width: 78px;
    height: 38px;
    border: 1px solid rgba(0, 217, 255, 0.22);
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.05);
    color: var(--o-cyan-hi);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.orb-screen-back:hover,
.orb-screen-back:focus-visible {
    background: var(--o-cyan);
    color: #031016;
}

.orb-screen-kicker {
    margin: 0 0 5px;
    color: var(--o-cyan);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.orb-screen-title,
.settings-title,
.controls-title {
    margin: 0;
    background: none;
    color: var(--o-text);
    -webkit-text-fill-color: currentColor;
    filter: none;
    font-family: var(--o-sans);
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 950;
    line-height: 0.9;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.orb-screen-copy {
    max-width: 620px;
    margin: 0 0 20px 96px;
    color: var(--o-text-2);
    font-family: var(--o-mono);
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.orb-screen-bottom-back {
    width: 100%;
    margin-top: 16px;
    border-radius: 3px;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

#settings-content {
    display: grid;
    gap: 12px;
}

.settings-screen-section,
.controls-section {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid rgba(0, 217, 255, 0.56);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.055), transparent 48%),
        rgba(255, 255, 255, 0.018);
    padding: 17px 18px;
    margin-bottom: 0;
    text-align: left;
}

.settings-screen-heading,
.controls-section-title {
    margin: 0 0 14px;
    color: var(--o-cyan-hi);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.settings-screen-toggle {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: 14px;
}

.settings-screen-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-screen-slider {
    position: relative;
    display: block;
    width: 46px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.settings-screen-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(242, 240, 234, 0.75);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.settings-screen-toggle input[type="checkbox"]:checked + .settings-screen-slider {
    border-color: var(--o-cyan-line);
    background: rgba(0, 217, 255, 0.22);
}

.settings-screen-toggle input[type="checkbox"]:checked + .settings-screen-slider::after {
    transform: translateX(22px);
    background: var(--o-cyan-hi);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.45);
}

.settings-screen-toggle input[type="checkbox"]:disabled + .settings-screen-slider {
    opacity: 0.36;
}

.settings-screen-label {
    color: var(--o-text);
    font-weight: 750;
}

.settings-screen-hint {
    margin: 6px 0 0 60px;
    color: var(--o-text-3);
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.055em;
}

.settings-screen-range,
.settings-screen-range-label {
    display: grid;
    grid-template-columns: minmax(132px, 0.8fr) minmax(150px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: var(--o-text-2);
    font-family: var(--o-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-screen-range-label {
    grid-template-columns: minmax(132px, 0.8fr) minmax(150px, 1fr);
}

.settings-screen-range input[type="range"],
.settings-screen-range-label input[type="range"] {
    width: 100%;
    accent-color: var(--o-cyan);
}

.settings-screen-range span:last-child {
    color: var(--o-cyan-hi);
    font-weight: 900;
}

#settings-screen .settings-title {
    font-size: 42px;
    font-weight: 880;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

#settings-screen .orb-screen-copy {
    max-width: 660px;
    color: rgba(242, 240, 234, 0.72);
    font-family: var(--o-sans);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}

.settings-screen-heading {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: 15px;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
}

.settings-screen-label {
    font-family: var(--o-sans);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: 0;
    text-align: left;
}

.settings-screen-hint,
.settings-input-mode-option,
.settings-screen-range,
.settings-screen-range-label {
    font-family: var(--o-sans);
    letter-spacing: 0;
    text-transform: none;
}

.settings-screen-hint {
    max-width: 620px;
    color: rgba(242, 240, 234, 0.56);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.settings-input-mode {
    align-items: stretch;
}

.settings-input-mode-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.settings-input-mode-option input[type="radio"] {
    margin-top: 2px;
}

.settings-input-mode-option span {
    display: block;
    min-width: 0;
}

.settings-input-mode-option {
    color: rgba(242, 240, 234, 0.82);
    font-size: 13px;
    line-height: 1.45;
}

.settings-input-mode-option strong {
    color: var(--o-text);
    font-weight: 780;
}

.settings-input-mode-option em {
    color: rgba(242, 240, 234, 0.58);
    font-style: normal;
}

.settings-screen-range,
.settings-screen-range-label {
    color: rgba(242, 240, 234, 0.74);
    font-size: 13px;
    text-align: left;
}

.settings-screen-toggle {
    width: 100%;
    text-align: left;
}

.settings-screen-toggle--stacked {
    margin-top: 14px;
}

.settings-screen-range {
    grid-template-columns: minmax(128px, 0.58fr) minmax(180px, 1fr) 48px;
}

.settings-screen-range--audio {
    margin-left: 60px;
    width: calc(100% - 60px);
    grid-template-columns: minmax(150px, 0.62fr) minmax(180px, 1fr) 48px;
}

.settings-screen-range span:first-child,
.settings-screen-range-label span:first-child {
    text-align: left;
}

.settings-screen-range span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    #settings-screen .settings-title {
        font-size: 34px;
        letter-spacing: 0;
    }

    .settings-screen-range,
    .settings-screen-range--audio,
    .settings-screen-range-label {
        margin-left: 0;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .settings-screen-hint {
        margin-left: 0;
    }
}

.controls-input-tabs {
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.024);
}

.controls-tab {
    border-radius: 3px;
    border-color: transparent;
    color: var(--o-text-2);
}

.controls-tab.active {
    border-color: var(--o-cyan-line);
    background: var(--o-cyan);
    color: #041116;
}

.controls-grid {
    gap: 12px;
}

.control-row {
    border-bottom-color: rgba(255, 255, 255, 0.055);
}

.control-key {
    min-width: 64px;
    border-color: rgba(222, 194, 122, 0.24);
    border-radius: 3px;
    background: rgba(222, 194, 122, 0.09);
    color: var(--o-brass);
}

.control-desc {
    color: var(--o-text-2);
}

#server-screen > .auth-content,
#server-confirm-screen > .screen-content {
    max-width: 560px;
    text-align: left;
}

#server-screen .game-title {
    margin-bottom: 8px;
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: clamp(34px, 7vw, 56px);
    font-weight: 950;
    letter-spacing: -0.05em;
}

#server-screen .game-tagline,
#server-confirm-screen .delete-title {
    color: var(--o-cyan);
    font-family: var(--o-mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.server-select-warning,
.server-confirm-warning {
    padding: 12px 14px;
    border: 1px solid rgba(222, 194, 122, 0.24);
    border-left: 2px solid var(--o-brass);
    border-radius: 3px;
    background: rgba(222, 194, 122, 0.06);
    color: rgba(242, 240, 234, 0.70);
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.55;
}

.server-card {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 76px;
    margin-bottom: 12px;
    padding: 18px;
    border-radius: 4px;
    border-color: rgba(255, 255, 255, 0.09);
    border-left: 3px solid rgba(0, 217, 255, 0.26);
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.06), transparent 42%),
        rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.server-card:hover {
    border-color: rgba(0, 217, 255, 0.30);
    border-left-color: var(--o-cyan);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 22px rgba(0, 217, 255, 0.08);
}

.server-card-recommended {
    border-left-color: var(--o-brass);
}

.server-card-offline {
    opacity: 0.45;
    cursor: not-allowed;
}

.server-card-info {
    flex: 1 1 210px;
    min-width: 0;
}

.server-card-name {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.015em;
    text-transform: none;
}

.server-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    color: var(--o-text-3);
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.server-card-capacity::before {
    content: '/';
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.16);
}

.server-card-ping {
    color: var(--o-cyan-hi);
    font-family: var(--o-mono);
    font-size: 12px;
    font-weight: 900;
}

.server-card-badge {
    position: static;
    flex: 0 1 auto;
    max-width: 100%;
    margin-left: 0;
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.10);
    border-color: rgba(0, 217, 255, 0.30);
    color: var(--o-cyan-hi);
    white-space: normal;
}

.server-card-badge-recommended {
    background: rgba(222, 194, 122, 0.12);
    border-color: rgba(222, 194, 122, 0.34);
    color: var(--o-brass);
}

.server-card-badge-admin {
    background: rgba(0, 217, 255, 0.12);
    border-color: rgba(0, 217, 255, 0.34);
    color: var(--o-cyan-hi);
}

.server-card-badge-pass {
    background: rgba(125, 255, 156, 0.12);
    border-color: rgba(125, 255, 156, 0.30);
    color: var(--o-online);
}

.server-card-badge-locked {
    background: rgba(255, 178, 77, 0.12);
    border-color: rgba(255, 178, 77, 0.34);
    color: var(--o-warn);
}

.btn-server-toggle {
    margin: 4px 0 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.015);
}

#messages-screen {
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 32px);
}

.msg-page {
    width: min(760px, 100%);
    max-height: min(820px, calc(100vh - 42px));
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-radius: 6px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 217, 255, 0.10), transparent 24%),
        rgba(4, 6, 9, 0.96);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.msg-page-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.16);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 64%),
        rgba(255, 255, 255, 0.02);
}

.msg-page-back,
.msg-back-btn {
    min-width: 38px;
    height: 34px;
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-radius: 3px;
    background: rgba(0, 217, 255, 0.04);
    color: var(--o-cyan-hi);
}

.msg-page-title {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.msg-page-title::before {
    content: 'Comms / ';
    color: var(--o-cyan);
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
}

.msg-page-body {
    max-width: none;
    padding: 16px;
}

.msg-thread-row {
    margin-bottom: 9px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 2px solid rgba(0, 217, 255, 0.34);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.018);
}

.msg-thread-row:hover {
    background: rgba(0, 217, 255, 0.07);
}

.msg-avatar {
    border-radius: 4px;
    background: rgba(0, 217, 255, 0.09);
    border-color: rgba(0, 217, 255, 0.24);
    color: var(--o-cyan-hi);
}

.msg-thread-name,
.msg-detail-name {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-weight: 800;
}

.msg-thread-preview,
.msg-thread-time,
.msg-bubble-time,
.msg-empty-sub {
    color: var(--o-text-3);
}

.msg-detail-header {
    padding: 10px 0 14px;
    border-bottom-color: rgba(0, 217, 255, 0.12);
}

.msg-bubble {
    border-radius: 5px;
    font-family: var(--o-sans);
}

.msg-bubble-mine {
    background: rgba(0, 217, 255, 0.14);
    border-color: rgba(0, 217, 255, 0.24);
    color: var(--o-text);
}

.msg-bubble-theirs {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--o-text-2);
}

.msg-input-bar {
    border-top-color: rgba(0, 217, 255, 0.12);
}

.msg-input {
    border-radius: 4px;
    border-color: rgba(0, 217, 255, 0.18);
    background: rgba(0, 217, 255, 0.05);
    color: var(--o-text);
}

.msg-send-btn {
    border-radius: 4px;
    background: var(--o-cyan);
    border-color: var(--o-cyan);
    color: #031016;
}

.msg-empty,
.msg-empty-chat,
.msg-loading {
    border: 1px dashed rgba(0, 217, 255, 0.28);
    border-radius: 4px;
    background: rgba(0, 217, 255, 0.075);
    color: var(--o-text-2);
}

.msg-empty-title {
    color: var(--o-text);
    font-size: 1rem;
    letter-spacing: 0;
}

.msg-empty-sub {
    color: var(--o-text-2);
    font-size: 0.86rem;
}

#lore-screen {
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 32px);
}

.lore-book {
    width: min(920px, 96vw);
    max-width: 920px;
    height: min(860px, 88vh);
    border-radius: 6px;
    border-color: rgba(0, 217, 255, 0.18);
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 217, 255, 0.11), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 38%),
        rgba(4, 6, 9, 0.96);
    box-shadow:
        0 28px 100px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.lore-book::before {
    left: 0;
    right: auto;
    width: 3px;
    height: 90px;
    background: linear-gradient(180deg, var(--o-cyan), var(--o-brass));
}

.lore-header {
    padding: 14px 18px;
    border-bottom-color: rgba(0, 217, 255, 0.16);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 64%),
        rgba(255, 255, 255, 0.018);
}

.lore-chapter-title {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-weight: 900;
    letter-spacing: 0.36em;
}

.lore-close-btn,
.lore-toc-btn,
.lore-nav-btn {
    border-radius: 3px;
    border-color: rgba(0, 217, 255, 0.18);
    background: rgba(0, 217, 255, 0.045);
    color: var(--o-cyan-hi);
}

.lore-progress {
    background: rgba(255, 255, 255, 0.06);
}

.lore-progress-fill {
    background: linear-gradient(90deg, var(--o-cyan), var(--o-brass));
}

.lore-page-scroll {
    padding: clamp(24px, 5vw, 54px);
    background:
        linear-gradient(rgba(0, 217, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 217, 255, 0.025) 1px, transparent 1px);
    background-size: 38px 38px;
}

.lore-page-subtitle {
    color: var(--o-cyan);
    font-weight: 900;
}

.lore-page-title {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: -0.055em;
    animation: none;
}

.lore-divider {
    width: 120px;
    background: linear-gradient(90deg, transparent, var(--o-cyan), var(--o-brass), transparent);
}

.lore-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--o-cyan);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.05), transparent 38%),
        rgba(255, 255, 255, 0.025);
}

.lore-section-speaker {
    color: var(--o-cyan-hi);
    font-weight: 900;
}

.lore-section-label {
    color: var(--o-brass);
}

.lore-paragraph {
    color: rgba(242, 240, 234, 0.84);
    font-size: 14px;
    line-height: 1.82;
}

.lore-section-fragment {
    border-left-color: var(--o-brass);
    background:
        linear-gradient(135deg, rgba(222, 194, 122, 0.055), transparent 38%),
        rgba(255, 255, 255, 0.024);
}

.lore-section-testimony {
    border-left-color: rgba(168, 214, 255, 0.75);
}

.lore-section-system {
    border-left-color: var(--o-online);
}

.lore-footer {
    border-top-color: rgba(0, 217, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
}

.lore-page-indicator {
    color: var(--o-text-3);
    font-family: var(--o-mono);
}

.lore-toc-overlay {
    background: rgba(0, 0, 0, 0.72);
}

.lore-toc-panel {
    border-color: rgba(0, 217, 255, 0.18);
    border-radius: 6px;
    background: rgba(4, 6, 9, 0.98);
}

.lore-toc-title {
    color: var(--o-text);
    font-family: var(--o-sans);
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.lore-toc-subtitle {
    color: var(--o-cyan);
}

.lore-toc-item {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
}

.lore-toc-active,
.lore-toc-item:hover {
    border-color: rgba(0, 217, 255, 0.26);
    background: rgba(0, 217, 255, 0.07);
}

.lore-toc-num {
    color: var(--o-cyan);
}

@media (max-width: 680px) {
    .orb-screen-head {
        flex-direction: column;
        gap: 12px;
    }

    .orb-screen-copy {
        margin-left: 0;
    }

    .settings-screen-hint {
        margin-left: 0;
    }

    .settings-screen-range,
    .settings-screen-range-label {
        grid-template-columns: 1fr;
    }

    .server-card {
        align-items: flex-start;
    }

    .server-card-badge {
        width: fit-content;
    }

    .msg-page {
        max-height: calc(100vh - 24px);
    }

    .lore-page-scroll {
        padding: 22px 18px 34px;
    }
}

/* ================================================================
   ORBRYN IMAGE-FIX PASS
   Fixes the clipped hero title, odd bright walkers, and cramped rail.
   ================================================================ */

#start-screen[data-mm].mm-desktop .mm-content {
    max-width: 1120px;
    width: calc(100vw - 114px);
    max-width: none;
    height: calc(100dvh - 58px);
    min-height: 0;
    margin-top: 58px;
    margin-left: 94px;
    margin-right: 20px;
    padding-left: clamp(22px, 3vw, 36px);
    padding-right: clamp(22px, 3vw, 36px);
    box-sizing: border-box;
}

#start-screen[data-mm] .mm-content {
    min-height: 0;
    scroll-padding-bottom: 140px;
}

#start-screen[data-mm] #mm-tab-home {
    padding-bottom: 96px;
}

#start-screen[data-mm].mm-desktop #mm-tab-home {
    padding-bottom: 112px;
}

#start-screen[data-mm].mm-desktop .mm-hero-banner {
    height: clamp(300px, 28vw, 380px);
    margin: 20px 0 0;
}

#start-screen[data-mm] .mm-hero-overlay {
    padding-left: clamp(42px, 5vw, 68px);
    padding-bottom: clamp(34px, 4vw, 54px);
}

#start-screen[data-mm].mm-desktop .mm-hero-title {
    max-width: 9ch;
    font-size: clamp(48px, 5.1vw, 72px);
    line-height: 0.88;
    letter-spacing: -0.055em;
}

#start-screen[data-mm] .mm-hero-sub {
    display: inline-block;
    max-width: min(280px, 60vw);
    margin-top: 14px;
    padding: 8px 12px 8px 22px;
    background: rgba(0, 12, 16, 0.42);
    line-height: 1.55;
}

#start-screen[data-mm] .mm-hero-sub::before {
    left: 7px;
}

#start-screen[data-mm] .mm-hero-primary-action {
    position: relative;
    z-index: 4;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(320px, 100%);
    min-height: 66px;
    margin-top: 20px;
    padding: 0 26px;
    border: 1px solid rgba(0, 217, 255, 0.72);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(238, 255, 255, 0.98), rgba(0, 217, 255, 0.88)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 42%);
    color: #031115;
    box-shadow:
        0 16px 34px rgba(0, 217, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 32px rgba(0, 217, 255, 0.18);
    cursor: pointer;
    font-family: var(--o-sans);
    font-size: clamp(14px, 2.4vw, 18px);
    font-weight: 950;
    letter-spacing: 0.1em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        filter 120ms ease;
}

#start-screen[data-mm] #mm-tab-home .mm-hero-primary-action {
    min-height: 66px;
}

#start-screen[data-mm].mm-signed-out .mm-hero-primary-action {
    display: none;
}

#start-screen[data-mm] .mm-hero-primary-action:hover,
#start-screen[data-mm] .mm-hero-primary-action:focus-visible {
    border-color: rgba(255, 255, 255, 0.86);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(0, 217, 255, 0.92)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 42%);
    color: #031115;
    box-shadow:
        0 18px 38px rgba(0, 217, 255, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 0 42px rgba(0, 217, 255, 0.24);
    filter: brightness(1.05);
    outline: none;
    transform: translateY(-1px);
}

#start-screen[data-mm] .mm-hero-primary-action:active {
    transform: translateY(1px);
}

#start-screen[data-mm] .mm-hero-action-icon {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid currentColor;
}

#start-screen[data-mm] .mm-hero-primary-action.btn-new-char .mm-hero-action-icon {
    position: relative;
    width: 19px;
    height: 19px;
    border: 0;
}

#start-screen[data-mm] .mm-hero-primary-action.btn-new-char .mm-hero-action-icon::before,
#start-screen[data-mm] .mm-hero-primary-action.btn-new-char .mm-hero-action-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 19px;
    height: 3px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

#start-screen[data-mm] .mm-hero-primary-action.btn-new-char .mm-hero-action-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

#start-screen[data-mm] .mm-hero-action-label {
    min-width: 0;
}

#start-screen[data-mm] .mm-hero-player,
#start-screen[data-mm] hyperframes-player {
    opacity: 0.86;
}

#start-screen[data-mm] .mm-scene .s-walker {
    opacity: 0.68;
    filter:
        drop-shadow(0 0 5px rgba(0, 217, 255, 0.3))
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}

#start-screen[data-mm] .mm-scene .s-walker-a {
    transform: translate(132px, 216px) scale(0.84);
}

@keyframes mmWalkerA {
    0% { transform: translate(132px, 216px) scale(0.84); }
    50% { transform: translate(282px, 216px) scale(0.84); }
    50.01% { transform: translate(282px, 216px) scale(-0.84, 0.84); }
    100% { transform: translate(132px, 216px) scale(-0.84, 0.84); }
}

#start-screen[data-mm] .mm-scene .s-walker-b {
    display: block;
    opacity: 0.52;
    transform: translate(168px, 216px) scale(-0.8, 0.8);
}

@keyframes mmWalkerB {
    0% { transform: translate(168px, 216px) scale(-0.8, 0.8); }
    50% { transform: translate(54px, 216px) scale(-0.8, 0.8); }
    50.01% { transform: translate(54px, 216px) scale(0.8); }
    100% { transform: translate(168px, 216px) scale(0.8); }
}

#start-screen[data-mm].mm-desktop .mm-bottom-nav {
    position: fixed;
    top: 58px;
    bottom: 0;
    left: 0;
    right: auto;
    width: 94px;
    height: calc(100dvh - 58px);
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 0 max(18px, env(safe-area-inset-bottom));
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 217, 255, 0.35) transparent;
    background:
        linear-gradient(180deg, rgba(5, 8, 10, 0.98), rgba(4, 4, 6, 0.98)),
        var(--o-bg);
}

#start-screen[data-mm].mm-desktop .mm-bottom-nav::-webkit-scrollbar {
    width: 4px;
}

#start-screen[data-mm].mm-desktop .mm-bottom-nav::-webkit-scrollbar-track {
    background: transparent;
}

#start-screen[data-mm].mm-desktop .mm-bottom-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.35);
    border-radius: 999px;
}

#start-screen[data-mm].mm-desktop .mm-header {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) 94px;
    align-items: center;
    min-height: 58px;
}

#start-screen[data-mm].mm-desktop .mm-hamburger {
    display: none;
}

#start-screen[data-mm].mm-desktop .mm-title {
    grid-column: 2;
    justify-self: center;
}

#start-screen[data-mm].mm-desktop .mm-header-right {
    grid-column: 3;
    justify-self: end;
}

#start-screen[data-mm].mm-desktop .mm-nav-item {
    flex: 0 0 64px;
    min-height: 64px;
    max-height: 64px;
    width: calc(100% - 14px);
    margin: 0 auto;
    padding: 7px 4px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(242, 240, 234, 0.76);
}

#start-screen[data-mm].mm-desktop .mm-nav-item:hover,
#start-screen[data-mm].mm-desktop .mm-nav-active {
    border-color: rgba(0, 217, 255, 0.18);
    background: rgba(0, 217, 255, 0.045);
    color: var(--o-text);
}

#start-screen[data-mm].mm-desktop .mm-nav-active::after {
    top: 12px;
    bottom: 12px;
    left: -8px;
    width: 3px;
    background: var(--o-cyan);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.46);
}

#start-screen[data-mm].mm-desktop .mm-nav-glyph {
    width: 28px;
    height: 24px;
    margin: 0 auto 8px;
}

#start-screen[data-mm].mm-desktop .mm-nav-svg {
    width: 28px;
    height: 24px;
    margin: 0 auto 8px;
}

#start-screen[data-mm].mm-desktop .mm-nav-label {
    display: block;
    width: 100%;
    color: currentColor;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    opacity: 0.96;
}

#start-screen[data-mm].mm-desktop .mm-fab-circle {
    width: 36px;
    height: 32px;
    margin: 0 auto 7px;
    border-radius: 4px;
    box-shadow: none;
}

#start-screen[data-mm].mm-desktop .mm-fab-circle .mm-nav-svg {
    width: 24px;
    height: 24px;
    margin: 0;
}

#start-screen[data-mm].mm-desktop .mm-nav-fab {
    margin: 0 auto;
}

#start-screen[data-mm] .mm-nav-utility {
    display: none;
}

#start-screen[data-mm].mm-desktop .mm-nav-utility {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 5px;
    width: calc(100% - 14px);
    margin: 6px auto 0;
    padding-top: 12px;
    border-top: 1px solid var(--o-line);
}

#start-screen[data-mm].mm-desktop .mm-nav-action {
    display: flex;
    flex: 0 0 45px;
    min-height: 45px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 5px 3px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: rgba(242, 240, 234, 0.62);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#start-screen[data-mm].mm-desktop .mm-nav-action:hover,
#start-screen[data-mm].mm-desktop .mm-nav-action:focus-visible,
#start-screen[data-mm].mm-desktop .mm-nav-action-active {
    border-color: rgba(0, 217, 255, 0.14);
    background: rgba(0, 217, 255, 0.035);
    color: var(--o-cyan);
}

#start-screen[data-mm].mm-desktop .mm-nav-action .mm-nav-glyph {
    width: 24px;
    height: 20px;
    margin: 0 auto 3px;
}

#start-screen[data-mm].mm-desktop .mm-nav-action .mm-nav-svg {
    width: 24px;
    height: 20px;
    margin: 0 auto 3px;
}

#start-screen[data-mm].mm-desktop .mm-nav-action .mm-nav-label {
    font-size: 7px;
    letter-spacing: 0.04em;
    opacity: 0.92;
}

@media (max-width: 700px) {
    #start-screen[data-mm] .mm-hero-overlay {
        padding-left: 24px;
    }

    #start-screen[data-mm] .mm-hero-title {
        font-size: clamp(38px, 12vw, 58px);
    }

    #start-screen[data-mm] .mm-hero-primary-action {
        width: min(300px, calc(100vw - 48px));
        min-height: 58px;
        margin-top: 16px;
        padding: 0 18px;
        font-size: clamp(13px, 3.4vw, 16px);
    }

    #start-screen[data-mm] #mm-tab-home .mm-hero-primary-action {
        min-height: 58px;
    }
}

/* ================================================================
   ORBRYN INTERACTION FIX PASS
   Keeps the menu scrollable inside the WAGUS shell and adds Store nav.
   ================================================================ */

#start-screen[data-mm]::before,
#start-screen[data-mm]::after {
    pointer-events: none;
}

#start-screen[data-mm].active {
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

#start-screen[data-mm] .mm-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}

#start-screen[data-mm].mm-desktop .mm-content {
    height: calc(100dvh - 58px);
    max-height: calc(100dvh - 58px);
    padding-bottom: 92px;
}

#start-screen[data-mm]:not(.mm-desktop) .mm-content {
    height: calc(100dvh - 58px);
    max-height: calc(100dvh - 58px);
    padding-bottom: 112px;
}

#start-screen[data-mm] .mm-tab {
    min-height: 0 !important;
}

#start-screen[data-mm] #mm-tab-home.mm-tab-active {
    gap: clamp(16px, 2vh, 24px);
}

#start-screen[data-mm] #mm-tab-home .save-slots {
    margin-top: 14px;
    margin-bottom: 0;
}

#start-screen[data-mm] #mm-tab-home .save-slot {
    min-height: 96px;
}

#start-screen[data-mm]:not(.mm-desktop) .mm-bottom-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

#start-screen[data-mm].mm-desktop .mm-bottom-nav {
    display: flex;
}

#start-screen[data-mm] .mm-nav-glyph-store::before {
    left: 5px;
    top: 8px;
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

#start-screen[data-mm] .mm-nav-glyph-store::after {
    left: 10px;
    top: 4px;
    width: 10px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

#start-screen[data-mm] .mm-nav-item:hover .mm-nav-glyph-store::before,
#start-screen[data-mm] .mm-nav-item:hover .mm-nav-glyph-store::after {
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.22);
}

#start-screen[data-mm] #mm-tab-nft.mm-tab-active {
    gap: 16px;
}

#start-screen[data-mm] .mm-nft-command {
    border-color: rgba(0, 217, 255, 0.18);
    background:
        linear-gradient(120deg, rgba(0, 217, 255, 0.08), rgba(215, 183, 92, 0.07)),
        rgba(255, 255, 255, 0.018);
}

#start-screen[data-mm] .mm-nft-vault-section {
    overflow: hidden;
}

#start-screen[data-mm] .mm-nft-vault {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#start-screen[data-mm] .mm-nft-staking-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr);
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(93, 244, 182, 0.22);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(93, 244, 182, 0.09), rgba(215, 183, 92, 0.06)),
        rgba(5, 15, 13, 0.9);
}

#start-screen[data-mm] .mm-nft-staking-main {
    min-width: 0;
}

#start-screen[data-mm] .mm-nft-staking-title {
    margin-top: 5px;
    color: var(--o-text);
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

#start-screen[data-mm] .mm-nft-staking-card .mm-nft-toolbar {
    grid-column: 1 / -1;
}

#start-screen[data-mm] .mm-nft-staking-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(145px, 0.72fr) auto;
    gap: 10px;
    align-items: end;
    padding: 13px;
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-radius: 5px;
    background: rgba(0, 8, 13, 0.7);
}

#start-screen[data-mm] .mm-nft-staking-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: rgba(215, 237, 247, 0.62);
    font-family: var(--oa-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-staking-input,
#start-screen[data-mm] .mm-nft-staking-duration {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 4px;
    outline: 0;
    background: rgba(1, 7, 11, 0.9);
    color: #f6f7fa;
    font: 800 0.86rem/1.2 var(--oa-mono);
}

#start-screen[data-mm] .mm-nft-staking-input:focus,
#start-screen[data-mm] .mm-nft-staking-duration:focus {
    border-color: rgba(0, 217, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
}

#start-screen[data-mm] .mm-nft-staking-submit {
    min-height: 42px;
    padding: 10px 18px;
    border-color: rgba(93, 244, 182, 0.5);
    background: rgba(42, 175, 119, 0.16);
    color: #caffdf;
    white-space: nowrap;
}

#start-screen[data-mm] .mm-nft-staking-submit:disabled,
#start-screen[data-mm] .mm-nft-staking-withdraw:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

#start-screen[data-mm] .mm-nft-staking-feedback {
    grid-column: 1 / -1;
    margin: 0;
    padding: 9px 11px;
    border-left: 2px solid rgba(0, 217, 255, 0.65);
    background: rgba(0, 217, 255, 0.06);
    color: rgba(215, 237, 247, 0.82);
    font-family: var(--oa-mono);
    font-size: 10px;
    line-height: 1.5;
}

#start-screen[data-mm] .mm-nft-staking-feedback[data-tone="error"] {
    border-left-color: #ff657a;
    color: #ffb3bd;
}

#start-screen[data-mm] .mm-nft-staking-feedback[data-tone="success"] {
    border-left-color: #5df4b6;
    color: #bfffe3;
}

#start-screen[data-mm] .mm-gathering-dashboard {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: 7px;
    background:
        radial-gradient(circle at 88% 8%, rgba(0, 217, 255, 0.13), transparent 31%),
        linear-gradient(145deg, rgba(4, 18, 27, 0.97), rgba(2, 8, 13, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.25);
}

#start-screen[data-mm] .mm-gathering-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 2px;
    background: linear-gradient(90deg, #00d9ff, rgba(93, 244, 182, 0));
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.65);
}

#start-screen[data-mm] .mm-gathering-dashboard-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
}

#start-screen[data-mm] .mm-gathering-kicker,
#start-screen[data-mm] .mm-gathering-chart-head,
#start-screen[data-mm] .mm-gathering-receipts-title {
    color: #72eaff;
    font-family: var(--oa-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-gathering-dashboard-head h3 {
    margin: 8px 0 7px;
    color: #f6f7fa;
    font-size: clamp(1.65rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

#start-screen[data-mm] .mm-gathering-dashboard-head p {
    max-width: 720px;
    margin: 0;
    color: rgba(215, 237, 247, 0.68);
    font-size: 0.78rem;
    line-height: 1.65;
}

#start-screen[data-mm] .mm-gathering-live-chip {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 1px solid rgba(93, 244, 182, 0.38);
    border-radius: 3px;
    background: rgba(93, 244, 182, 0.08);
    color: #a7ffd2;
    font: 900 9px/1 var(--oa-mono);
    letter-spacing: 0.12em;
}

#start-screen[data-mm] .mm-gathering-stat-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, minmax(110px, 1fr));
    gap: 9px;
    margin-top: 22px;
}

#start-screen[data-mm] .mm-gathering-stat {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.025);
}

#start-screen[data-mm] .mm-gathering-stat-primary {
    border-color: rgba(0, 217, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.12), rgba(0, 217, 255, 0.025));
}

#start-screen[data-mm] .mm-gathering-stat span,
#start-screen[data-mm] .mm-gathering-stat small {
    display: block;
    overflow: hidden;
    color: rgba(215, 237, 247, 0.48);
    font-family: var(--oa-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

#start-screen[data-mm] .mm-gathering-stat strong {
    display: block;
    overflow: hidden;
    margin: 7px 0 5px;
    color: #f6f7fa;
    font-family: var(--oa-mono);
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    line-height: 1;
    text-overflow: ellipsis;
}

#start-screen[data-mm] .mm-gathering-stat-primary strong {
    color: #8ff0ff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.32);
}

#start-screen[data-mm] .mm-gathering-chart-card {
    margin-top: 12px;
    padding: 15px 15px 10px;
    border: 1px solid rgba(0, 217, 255, 0.13);
    border-radius: 5px;
    background: rgba(0, 4, 8, 0.6);
}

#start-screen[data-mm] .mm-gathering-chart-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

#start-screen[data-mm] .mm-gathering-chart-head strong {
    color: rgba(215, 237, 247, 0.42);
    font-size: 8px;
}

#start-screen[data-mm] .mm-gathering-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 210px;
    margin-top: 8px;
    overflow: visible;
}

#start-screen[data-mm] .mm-gathering-chart-grid line {
    stroke: rgba(175, 218, 232, 0.09);
    stroke-width: 1;
}

#start-screen[data-mm] .mm-gathering-chart-area {
    fill: url(#mm-gathering-area-gradient);
}

#start-screen[data-mm] .mm-gathering-chart-line {
    fill: none;
    stroke: #00d9ff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    filter: drop-shadow(0 0 7px rgba(0, 217, 255, 0.52));
}

#start-screen[data-mm] .mm-gathering-chart-points circle {
    fill: #06141b;
    stroke: #8ff0ff;
    stroke-width: 2;
}

#start-screen[data-mm] .mm-gathering-chart-x,
#start-screen[data-mm] .mm-gathering-chart-y {
    fill: rgba(215, 237, 247, 0.44);
    font: 800 9px var(--oa-mono);
}

#start-screen[data-mm] .mm-gathering-chart-empty {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px;
    color: rgba(215, 237, 247, 0.46);
    text-align: center;
}

#start-screen[data-mm] .mm-gathering-chart-empty strong {
    color: #8ff0ff;
    font: 900 0.82rem var(--oa-mono);
    letter-spacing: 0.12em;
}

#start-screen[data-mm] .mm-gathering-chart-empty span {
    max-width: 560px;
    font-size: 0.72rem;
    line-height: 1.6;
}

#start-screen[data-mm] .mm-gathering-receipts {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

#start-screen[data-mm] .mm-gathering-receipt {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.018);
    color: inherit;
    text-decoration: none;
}

#start-screen[data-mm] a.mm-gathering-receipt:hover {
    border-color: rgba(0, 217, 255, 0.35);
    background: rgba(0, 217, 255, 0.055);
}

#start-screen[data-mm] .mm-gathering-activity {
    color: #d7edf7;
    font: 800 0.7rem var(--oa-mono);
}

#start-screen[data-mm] .mm-gathering-receipt-meta,
#start-screen[data-mm] .mm-gathering-receipt-empty {
    color: rgba(215, 237, 247, 0.48);
    font: 700 0.62rem var(--oa-mono);
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-gathering-receipt strong {
    color: #a7ffd2;
    font: 900 0.72rem var(--oa-mono);
    white-space: nowrap;
}

#start-screen[data-mm] .mm-nft-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(0, 217, 255, 0.16);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(0, 217, 255, 0.07), rgba(215, 183, 92, 0.055)),
        rgba(6, 12, 18, 0.86);
}

#start-screen[data-mm] .mm-nft-summary-kicker,
#start-screen[data-mm] .mm-nft-card-kicker {
    color: var(--o-cyan);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-summary-wallet {
    margin-top: 5px;
    color: var(--o-text);
    font-family: "Courier New", monospace;
    font-size: clamp(1.15rem, 3vw, 1.65rem);
    font-weight: 900;
}

#start-screen[data-mm] .mm-nft-summary-mint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

#start-screen[data-mm] .mm-nft-summary-mint span {
    color: rgba(242, 240, 234, 0.56);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-summary-mint strong {
    min-width: 0;
    color: #f0d27b;
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

#start-screen[data-mm] .mm-nft-source-chip,
#start-screen[data-mm] .mm-nft-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(242, 240, 234, 0.82);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-source-chip {
    margin-top: 10px;
    border-color: rgba(215, 183, 92, 0.3);
    color: #f0d27b;
}

#start-screen[data-mm] .mm-nft-chip--ready {
    border-color: rgba(215, 183, 92, 0.34);
    background: rgba(215, 183, 92, 0.1);
    color: #f0d27b;
}

#start-screen[data-mm] .mm-nft-chip--live {
    border-color: rgba(0, 217, 255, 0.34);
    background: rgba(0, 217, 255, 0.1);
    color: var(--o-cyan);
}

#start-screen[data-mm] .mm-nft-chip--idle {
    color: rgba(242, 240, 234, 0.68);
}

#start-screen[data-mm] .mm-nft-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#start-screen[data-mm] .mm-nft-metrics > div,
#start-screen[data-mm] .mm-nft-meta-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
}

#start-screen[data-mm] .mm-nft-metrics strong,
#start-screen[data-mm] .mm-nft-meta-grid strong {
    display: block;
    color: var(--o-text);
    font-size: 1.1rem;
    font-weight: 900;
}

#start-screen[data-mm] .mm-nft-metrics span,
#start-screen[data-mm] .mm-nft-meta-grid span {
    display: block;
    margin-top: 3px;
    color: rgba(242, 240, 234, 0.58);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#start-screen[data-mm] .mm-nft-action-btn {
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 217, 255, 0.22);
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.08);
    color: var(--o-text);
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

#start-screen[data-mm] .mm-nft-market {
    border-color: rgba(215, 183, 92, 0.32);
    background: linear-gradient(135deg, rgba(215, 183, 92, 0.14), rgba(0, 217, 255, 0.08));
    color: #f0d27b;
}

#start-screen[data-mm] .mm-nft-action-btn:hover,
#start-screen[data-mm] .mm-nft-action-btn:focus-visible {
    border-color: rgba(0, 217, 255, 0.46);
    background: rgba(0, 217, 255, 0.13);
}

#start-screen[data-mm] .mm-nft-action-btn:disabled {
    cursor: default;
    opacity: 0.54;
}

#start-screen[data-mm] .mm-nft-alert,
#start-screen[data-mm] .mm-nft-empty {
    padding: 12px;
    border: 1px solid rgba(0, 217, 255, 0.16);
    border-radius: 6px;
    background: rgba(0, 217, 255, 0.055);
    color: rgba(242, 240, 234, 0.76);
    font-size: 0.82rem;
}

#start-screen[data-mm] .mm-nft-alert--error {
    border-color: rgba(240, 120, 120, 0.25);
    background: rgba(240, 120, 120, 0.08);
    color: rgba(255, 180, 180, 0.92);
}

#start-screen[data-mm] .mm-nft-empty-title {
    color: var(--o-text);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-empty p {
    margin: 6px 0 0;
}

#start-screen[data-mm] .mm-nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

#start-screen[data-mm] .mm-nft-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(3, 7, 12, 0.78);
}

#start-screen[data-mm] .mm-nft-card--active {
    border-color: rgba(0, 217, 255, 0.22);
}

#start-screen[data-mm] .mm-nft-card-top {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

#start-screen[data-mm] .mm-nft-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.08);
    color: var(--o-cyan);
    font-size: 0.68rem;
    font-weight: 900;
}

#start-screen[data-mm] .mm-nft-icon--clone {
    border-color: rgba(215, 183, 92, 0.28);
    background: rgba(215, 183, 92, 0.1);
    color: #f0d27b;
}

#start-screen[data-mm] .mm-nft-card-title-block {
    min-width: 0;
}

#start-screen[data-mm] .mm-nft-card-title {
    margin-top: 3px;
    overflow: hidden;
    color: var(--o-text);
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#start-screen[data-mm] .mm-nft-card-body,
#start-screen[data-mm] .mm-nft-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#start-screen[data-mm] .mm-nft-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#start-screen[data-mm] .mm-nft-mint {
    overflow: hidden;
    color: rgba(242, 240, 234, 0.58);
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#start-screen[data-mm] .mm-nft-countdown {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

#start-screen[data-mm] .mm-nft-clock {
    color: #f0d27b;
    font-family: "Courier New", monospace;
    font-size: 1.6rem;
    font-weight: 900;
}

#start-screen[data-mm] .mm-nft-countdown span:last-child {
    color: rgba(242, 240, 234, 0.58);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#start-screen[data-mm] .mm-nft-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

#start-screen[data-mm] .mm-nft-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--o-cyan), #f0d27b);
}

@media (max-width: 520px) {
    #start-screen[data-mm]:not(.mm-desktop) .mm-nav-label {
        font-size: 7px;
        letter-spacing: 0.03em;
    }

    #start-screen[data-mm]:not(.mm-desktop) .mm-nav-glyph {
        width: 24px;
        height: 22px;
    }
}

@media (max-width: 760px) {
    #start-screen[data-mm] .mm-nft-staking-card,
    #start-screen[data-mm] .mm-nft-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    #start-screen[data-mm] .mm-nft-card-top {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    #start-screen[data-mm] .mm-nft-card-top .mm-nft-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }

    #start-screen[data-mm] .mm-nft-staking-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    #start-screen[data-mm] .mm-gathering-dashboard-head {
        flex-direction: column;
    }

    #start-screen[data-mm] .mm-gathering-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #start-screen[data-mm] .mm-gathering-stat-primary {
        grid-column: 1 / -1;
    }

    #start-screen[data-mm] .mm-gathering-receipt {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #start-screen[data-mm] .mm-gathering-receipt-meta {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ================================================================
   Flat grid world preview
   Isolated viewer for district-grid scale without touching worldEdits.
   ================================================================ */

body.orbryn-grid-world-preview {
    margin: 0;
    overflow: hidden;
    background: #05090f;
    color: #f8fafc;
    font-family: "Inter", "Segoe UI", sans-serif;
}

.ogwp-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    background: #05090f;
}

.ogwp-canvas {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.ogwp-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    cursor: grab;
}

body.orbryn-grid-world-preview.is-dragging-object .ogwp-canvas canvas {
    cursor: grabbing;
}

body.orbryn-grid-world-preview.is-playing-bot .ogwp-canvas canvas {
    cursor: crosshair;
}

.ogwp-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 18px;
    border-left: 1px solid rgba(45, 212, 191, 0.28);
    background: rgba(3, 7, 13, 0.93);
    box-shadow: -18px 0 38px rgba(0, 0, 0, 0.28);
}

.ogwp-panel header {
    display: grid;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    text-transform: uppercase;
}

.ogwp-panel header span {
    color: #22d3ee;
    font: 800 10px/1.2 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.14em;
}

.ogwp-panel header strong {
    font: 800 18px/1.1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
}

.ogwp-status {
    padding: 12px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: rgba(8, 47, 73, 0.28);
    color: rgba(226, 232, 240, 0.88);
    font-size: 12px;
    line-height: 1.45;
}

.ogwp-toolbox {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(94, 234, 212, 0.24);
    background: rgba(15, 23, 42, 0.72);
}

.ogwp-toolbox[hidden] {
    display: none;
}

.ogwp-toolbox > strong {
    font: 800 12px/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ogwp-tool-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ogwp-tool-meta {
    color: rgba(226, 232, 240, 0.72);
    font-size: 11px;
    line-height: 1.45;
}

.ogwp-field {
    display: grid;
    gap: 6px;
}

.ogwp-field span {
    color: rgba(226, 232, 240, 0.62);
    font: 800 10px/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ogwp-field select {
    min-height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(3, 7, 13, 0.92);
    color: #f8fafc;
    padding: 0 10px;
    font: 700 12px/1 "Inter", "Segoe UI", sans-serif;
}

.ogwp-blocks {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow: auto;
    padding-right: 3px;
}

.ogwp-block {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.ogwp-block:hover {
    border-color: rgba(94, 234, 212, 0.48);
    background: rgba(20, 35, 48, 0.82);
}

.ogwp-block.is-selected {
    border-color: rgba(250, 204, 21, 0.86);
    background: rgba(113, 63, 18, 0.36);
    box-shadow: inset 4px 0 0 rgba(250, 204, 21, 0.85);
}

.ogwp-block strong {
    font-size: 13px;
    line-height: 1.2;
}

.ogwp-block span,
.ogwp-block small {
    color: rgba(226, 232, 240, 0.68);
    font-size: 11px;
    line-height: 1.35;
}

.ogwp-inline-link {
    justify-self: start;
    margin-top: 4px;
    color: #67e8f9;
    font: 800 10px/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.ogwp-inline-link:hover {
    color: #ecfeff;
}

.ogwp-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: auto;
}

.ogwp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    background: rgba(8, 47, 73, 0.5);
    color: #f8fafc;
    text-decoration: none;
    text-transform: uppercase;
    font: 800 11px/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.ogwp-btn:hover {
    background: rgba(14, 116, 144, 0.55);
}

.ogwp-btn.is-active {
    border-color: rgba(94, 234, 212, 0.9);
    background: rgba(20, 184, 166, 0.36);
    color: #ecfeff;
}

.ogwp-btn-danger {
    border-color: rgba(248, 113, 113, 0.56);
    background: rgba(127, 29, 29, 0.42);
}

.ogwp-btn-danger:hover {
    background: rgba(153, 27, 27, 0.58);
}

@media (max-width: 900px) {
    .ogwp-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .ogwp-panel {
        max-height: 42dvh;
        border-left: 0;
        border-top: 1px solid rgba(45, 212, 191, 0.28);
    }
}

/* ================================================================
   ORBRYN MAIN MENU STORE REFRESH
   Keeps checkout/store logic intact while matching the current menu shell.
   ================================================================ */

#start-screen[data-mm] #mm-tab-store.mm-tab-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 18px;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-height: 236px;
    padding: 24px 26px;
    border: 1px solid var(--orb-line, rgba(255, 255, 255, 0.12));
    border-left: 3px solid var(--orb-brass, #dec27a);
    background:
        linear-gradient(90deg, rgba(222, 194, 122, 0.13), transparent 42%),
        radial-gradient(circle at 86% 18%, rgba(0, 217, 255, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(12, 13, 12, 0.98), rgba(4, 6, 8, 0.98));
    box-shadow:
        0 20px 58px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command::before {
    content: '';
    position: absolute;
    inset: 13px;
    pointer-events: none;
    background-image:
        linear-gradient(var(--orb-cyan-line, rgba(0, 217, 255, 0.42)), var(--orb-cyan-line, rgba(0, 217, 255, 0.42))),
        linear-gradient(var(--orb-cyan-line, rgba(0, 217, 255, 0.42)), var(--orb-cyan-line, rgba(0, 217, 255, 0.42))),
        linear-gradient(rgba(222, 194, 122, 0.38), rgba(222, 194, 122, 0.38)),
        linear-gradient(rgba(222, 194, 122, 0.38), rgba(222, 194, 122, 0.38));
    background-position: top left, top left, bottom right, bottom right;
    background-size: 42px 1px, 1px 42px, 42px 1px, 1px 42px;
    background-repeat: no-repeat;
    opacity: 0.72;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command::after {
    content: 'SERVER-LINKED SUPPLY';
    position: absolute;
    right: 24px;
    bottom: 22px;
    padding: 5px 8px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    background: rgba(0, 217, 255, 0.07);
    color: rgba(143, 240, 255, 0.82);
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-kicker,
#start-screen[data-mm] #mm-tab-store .mm-store-command-copy {
    position: relative;
    z-index: 1;
    font-family: var(--o-mono);
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-kicker {
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(222, 194, 122, 0.38);
    color: var(--orb-brass, #dec27a);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.18em;
    background: rgba(222, 194, 122, 0.08);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-title {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-top: 16px;
    font-family: var(--o-sans);
    font-size: 48px;
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--o-text, #f2f0ea);
}

#start-screen[data-mm] #mm-tab-store .mm-store-command-copy {
    max-width: 58ch;
    margin: 14px 0 0;
    color: var(--o-text-3, rgba(242, 240, 234, 0.42));
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.07em;
}

#start-screen[data-mm] #mm-tab-store .mm-store-page-content {
    display: grid;
    gap: 14px;
    flex: none;
    overflow: visible;
    padding: 0;
    scrollbar-width: auto;
}

#start-screen[data-mm] #mm-tab-store .store-section {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#start-screen[data-mm] #mm-tab-store .store-section-title,
#start-screen[data-mm] #mm-tab-store .store-history-details summary.store-section-title {
    display: flex;
    align-items: center;
    min-height: 32px;
    width: fit-content;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid var(--orb-cyan-line, rgba(0, 217, 255, 0.42));
    border-left: 3px solid var(--orb-cyan, #00d9ff);
    background: rgba(0, 217, 255, 0.07);
    color: var(--orb-cyan, #00d9ff);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-early-access {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(222, 194, 122, 0.24);
    border-left: 3px solid var(--orb-brass, #dec27a);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(222, 194, 122, 0.10), transparent 46%),
        rgba(8, 9, 12, 0.86);
    text-align: left;
}

#start-screen[data-mm] #mm-tab-store .store-early-tag {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 7px;
    border: 1px solid rgba(222, 194, 122, 0.28);
    border-radius: 2px;
    background: rgba(222, 194, 122, 0.09);
    color: var(--orb-brass, #dec27a);
    font-family: var(--o-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
}

#start-screen[data-mm] #mm-tab-store .store-early-text {
    margin: 0;
    color: var(--o-text-3, rgba(242, 240, 234, 0.42));
    font-family: var(--o-mono);
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-bp-card,
#start-screen[data-mm] #mm-tab-store .store-waglet-card,
#start-screen[data-mm] #mm-tab-store .store-pkg-card,
#start-screen[data-mm] #mm-tab-store .store-dev-grant-panel,
#start-screen[data-mm] #mm-tab-store .store-spin-area,
#start-screen[data-mm] #mm-tab-store .store-gacha-assurance,
#start-screen[data-mm] #mm-tab-store .store-gacha-hero,
#start-screen[data-mm] #mm-tab-store .store-rates,
#start-screen[data-mm] #mm-tab-store .store-history-details {
    border-radius: 4px;
    border: 1px solid var(--orb-line, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
        var(--orb-panel, rgba(7, 8, 11, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#start-screen[data-mm] #mm-tab-store .store-bp-card,
#start-screen[data-mm] #mm-tab-store .store-pkg-card {
    overflow: hidden;
}

#start-screen[data-mm] #mm-tab-store .store-bp-card {
    border-left: 3px solid var(--orb-brass, #dec27a);
}

#start-screen[data-mm] #mm-tab-store .store-waglet-card {
    grid-template-columns: minmax(0, 1fr) minmax(178px, auto);
    border-left: 3px solid var(--orb-cyan, #00d9ff);
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 217, 255, 0.14), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(222, 194, 122, 0.12), transparent 30%),
        var(--orb-panel, rgba(7, 8, 11, 0.94));
}

#start-screen[data-mm] #mm-tab-store .store-waglet-owned {
    border-left-color: rgba(125, 255, 156, 0.84);
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-panel {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr);
    gap: 12px;
    padding: 14px;
    border-left-color: var(--orb-cyan, #00d9ff);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 45%),
        var(--orb-panel, rgba(7, 8, 11, 0.94));
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-kicker {
    border-radius: 2px;
    border-color: var(--orb-cyan-line, rgba(0, 217, 255, 0.42));
    background: rgba(0, 217, 255, 0.08);
    color: var(--orb-cyan, #00d9ff);
    font-family: var(--o-mono);
    font-size: 9px;
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-copy p {
    color: var(--o-text-3, rgba(242, 240, 234, 0.42));
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#start-screen[data-mm] #mm-tab-store .store-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-card {
    border-left: 3px solid rgba(255, 255, 255, 0.14);
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-card:hover,
#start-screen[data-mm] #mm-tab-store .store-pkg-card:focus-within {
    border-color: var(--orb-cyan-line, rgba(0, 217, 255, 0.42));
    border-left-color: var(--orb-cyan, #00d9ff);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.08), transparent 40%),
        var(--orb-panel-lift, rgba(12, 14, 18, 0.95));
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

#start-screen[data-mm] #mm-tab-store .store-pkg-best {
    border-color: rgba(222, 194, 122, 0.36);
    border-left-color: var(--orb-brass, #dec27a);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 28px rgba(222, 194, 122, 0.08);
}

#start-screen[data-mm] #mm-tab-store .store-pkg-owned,
#start-screen[data-mm] #mm-tab-store .store-pkg-locked,
#start-screen[data-mm] #mm-tab-store .store-bp-owned {
    opacity: 0.54;
}

#start-screen[data-mm] #mm-tab-store .store-bp-hero,
#start-screen[data-mm] #mm-tab-store .store-pkg-hero,
#start-screen[data-mm] #mm-tab-store .store-gacha-hero {
    border-radius: 0;
    background-color: rgba(5, 6, 9, 0.98);
    filter: saturate(0.82) contrast(1.08);
}

#start-screen[data-mm] #mm-tab-store .store-bp-hero,
#start-screen[data-mm] #mm-tab-store .store-pkg-hero {
    height: 142px;
    border-bottom: 1px solid var(--orb-line-soft, rgba(255, 255, 255, 0.07));
}

#start-screen[data-mm] #mm-tab-store .store-bp-hero-overlay,
#start-screen[data-mm] #mm-tab-store .store-pkg-hero-overlay,
#start-screen[data-mm] #mm-tab-store .store-gacha-hero-overlay {
    background:
        linear-gradient(0deg, rgba(3, 5, 7, 0.92), rgba(3, 5, 7, 0.24) 68%, transparent),
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 44%);
}

#start-screen[data-mm] #mm-tab-store .store-bp-season,
#start-screen[data-mm] #mm-tab-store .store-pkg-tagline,
#start-screen[data-mm] #mm-tab-store .store-spin-label,
#start-screen[data-mm] #mm-tab-store .store-gacha-assurance-kicker,
#start-screen[data-mm] #mm-tab-store .store-rates-title,
#start-screen[data-mm] #mm-tab-store .store-win-rarity {
    font-family: var(--o-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-bp-season,
#start-screen[data-mm] #mm-tab-store .store-gacha-assurance-kicker {
    color: var(--orb-cyan, #00d9ff);
}

#start-screen[data-mm] #mm-tab-store .store-bp-name,
#start-screen[data-mm] #mm-tab-store .store-pkg-name,
#start-screen[data-mm] #mm-tab-store .store-waglet-title {
    color: var(--o-text, #f2f0ea);
    font-family: var(--o-sans);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-tagline,
#start-screen[data-mm] #mm-tab-store .store-waglet-description,
#start-screen[data-mm] #mm-tab-store .store-waglet-note,
#start-screen[data-mm] #mm-tab-store .store-gacha-crate-text,
#start-screen[data-mm] #mm-tab-store .store-gacha-assurance-copy,
#start-screen[data-mm] #mm-tab-store .store-rates-table td,
#start-screen[data-mm] #mm-tab-store .store-empty {
    color: var(--o-text-3, rgba(242, 240, 234, 0.42));
    font-style: normal;
}

#start-screen[data-mm] #mm-tab-store .store-bp-body,
#start-screen[data-mm] #mm-tab-store .store-pkg-body {
    gap: 12px;
    padding: 14px;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-highlights,
#start-screen[data-mm] #mm-tab-store .store-waglet-highlights {
    gap: 6px;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-chip {
    max-width: 100%;
    border-radius: 2px;
    border: 1px solid var(--orb-line-soft, rgba(255, 255, 255, 0.07));
    background: rgba(255, 255, 255, 0.035);
    color: var(--o-text-2, rgba(242, 240, 234, 0.68));
    font-family: var(--o-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    white-space: normal;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-chip-more {
    border-color: rgba(222, 194, 122, 0.26);
    background: rgba(222, 194, 122, 0.08);
    color: var(--orb-brass, #dec27a);
}

#start-screen[data-mm] #mm-tab-store .store-pkg-footer {
    gap: 10px;
}

#start-screen[data-mm] #mm-tab-store .store-pkg-price,
#start-screen[data-mm] #mm-tab-store .store-waglet-price,
#start-screen[data-mm] #mm-tab-store .store-spin-count,
#start-screen[data-mm] #mm-tab-store .store-gacha-price {
    color: var(--orb-brass, #dec27a);
    font-family: var(--o-mono);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
}

#start-screen[data-mm] #mm-tab-store .store-orbryn-price {
    gap: 3px;
}

#start-screen[data-mm] #mm-tab-store .store-orbryn-primary {
    color: var(--orb-brass, #dec27a);
    font-family: var(--o-mono);
    font-size: 0.82em;
    font-weight: 950;
    line-height: 1.06;
}

#start-screen[data-mm] #mm-tab-store .store-orbryn-secondary {
    color: rgba(242, 240, 234, 0.48);
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: normal;
}

#start-screen[data-mm] #mm-tab-store .store-buy-btn,
#start-screen[data-mm] #mm-tab-store .store-spin-btn,
#start-screen[data-mm] #mm-tab-store .store-waglet-secondary,
#start-screen[data-mm] #mm-tab-store .store-dev-grant-btn {
    min-height: 38px;
    border-radius: 2px;
    border: 1px solid rgba(222, 194, 122, 0.36);
    background: var(--orb-brass, #dec27a);
    color: #090807;
    font-family: var(--o-mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    box-shadow: none;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

#start-screen[data-mm] #mm-tab-store .store-buy-btn:hover:not(:disabled),
#start-screen[data-mm] #mm-tab-store .store-spin-btn:hover:not(:disabled),
#start-screen[data-mm] #mm-tab-store .store-dev-grant-btn:hover:not(:disabled) {
    border-color: rgba(0, 217, 255, 0.42);
    background: var(--orb-cyan, #00d9ff);
    color: #031016;
    box-shadow: none;
    transform: translateY(-1px);
}

#start-screen[data-mm] #mm-tab-store .store-buy-btn:disabled,
#start-screen[data-mm] #mm-tab-store .store-spin-btn:disabled,
#start-screen[data-mm] #mm-tab-store .store-dev-grant-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--orb-line-soft, rgba(255, 255, 255, 0.07));
    color: rgba(242, 240, 234, 0.36);
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-btn {
    padding: 8px 10px;
    background: rgba(0, 217, 255, 0.07);
    border-color: var(--orb-cyan-line, rgba(0, 217, 255, 0.42));
    color: var(--orb-cyan, #00d9ff);
}

#start-screen[data-mm] #mm-tab-store .store-dev-grant-all {
    background: rgba(222, 194, 122, 0.14);
    border-color: rgba(222, 194, 122, 0.38);
    color: var(--orb-brass, #dec27a);
}

#start-screen[data-mm] #mm-tab-store .store-waglet-secondary {
    background: rgba(0, 217, 255, 0.07);
    border-color: var(--orb-cyan-line, rgba(0, 217, 255, 0.42));
    color: var(--orb-cyan, #00d9ff);
}

#start-screen[data-mm] #mm-tab-store .store-waglet-secondary:hover {
    background: rgba(0, 217, 255, 0.13);
    color: var(--o-text, #f2f0ea);
}

#start-screen[data-mm] #mm-tab-store .store-waglet-badge,
#start-screen[data-mm] #mm-tab-store .store-badge {
    border-radius: 2px;
    font-family: var(--o-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-waglet-badge {
    border: 1px solid rgba(0, 217, 255, 0.36);
    background: rgba(0, 217, 255, 0.08);
    color: var(--orb-cyan, #00d9ff);
}

#start-screen[data-mm] #mm-tab-store .store-badge-best {
    background: var(--orb-brass, #dec27a);
    color: #090807;
    animation: none;
}

#start-screen[data-mm] #mm-tab-store .store-badge-owned {
    background: rgba(125, 255, 156, 0.12);
    border: 1px solid rgba(125, 255, 156, 0.30);
    color: rgba(125, 255, 156, 0.90);
}

#start-screen[data-mm] #mm-tab-store .store-badge-locked {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--orb-line-soft, rgba(255, 255, 255, 0.07));
    color: rgba(242, 240, 234, 0.46);
}

#start-screen[data-mm] #mm-tab-store .store-spin-area {
    border-left: 3px solid var(--orb-brass, #dec27a);
    padding: 16px;
    margin: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(222, 194, 122, 0.11), transparent 44%),
        var(--orb-panel, rgba(7, 8, 11, 0.94));
}

#start-screen[data-mm] #mm-tab-store .store-spin-area::before {
    opacity: 0.13;
    background-size: 24px 24px;
}

#start-screen[data-mm] #mm-tab-store .store-spin-count {
    font-size: 44px;
    line-height: 0.95;
}

#start-screen[data-mm] #mm-tab-store .store-gacha-assurance {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    border-left: 3px solid var(--orb-cyan, #00d9ff);
}

#start-screen[data-mm] #mm-tab-store .store-gacha-assurance-kicker {
    border-radius: 2px;
}

#start-screen[data-mm] #mm-tab-store .store-gacha-hero {
    height: 120px;
    margin: 0;
    border-left: 3px solid rgba(255, 255, 255, 0.14);
}

#start-screen[data-mm] #mm-tab-store .store-gacha-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

#start-screen[data-mm] #mm-tab-store .store-gacha-btn {
    min-height: 86px;
    border-radius: 4px;
    border: 1px solid rgba(222, 194, 122, 0.28);
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.08), transparent 58%),
        rgba(255, 255, 255, 0.025);
}

#start-screen[data-mm] #mm-tab-store .store-gacha-btn:hover {
    border-color: rgba(0, 217, 255, 0.38);
    background:
        linear-gradient(180deg, rgba(0, 217, 255, 0.08), transparent 58%),
        rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

#start-screen[data-mm] #mm-tab-store .store-gacha-label,
#start-screen[data-mm] #mm-tab-store .store-gacha-discount {
    font-family: var(--o-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

#start-screen[data-mm] #mm-tab-store .store-gacha-label {
    color: var(--orb-brass, #dec27a);
}

#start-screen[data-mm] #mm-tab-store .store-gacha-discount {
    border: 1px solid rgba(125, 255, 156, 0.26);
    border-radius: 2px;
    background: rgba(125, 255, 156, 0.08);
    color: rgba(125, 255, 156, 0.86);
}

#start-screen[data-mm] #mm-tab-store .store-rates {
    padding: 12px;
    margin: 0;
    border-left: 3px solid rgba(255, 255, 255, 0.14);
}

#start-screen[data-mm] #mm-tab-store .store-rates-table th {
    color: rgba(242, 240, 234, 0.48);
    font-family: var(--o-mono);
    letter-spacing: 0.10em;
    border-bottom-color: var(--orb-line-soft, rgba(255, 255, 255, 0.07));
}

#start-screen[data-mm] #mm-tab-store .store-rates-table td {
    border-bottom-color: rgba(255, 255, 255, 0.035);
}

#start-screen[data-mm] #mm-tab-store .store-history-details {
    padding: 14px;
    border-left: 3px solid rgba(255, 255, 255, 0.14);
}

#start-screen[data-mm] #mm-tab-store .store-history-list {
    margin-top: 10px;
}

#start-screen[data-mm] #mm-tab-store .store-history-row {
    border-bottom-color: rgba(255, 255, 255, 0.045);
}

#start-screen[data-mm] #mm-tab-store .store-history-date {
    color: rgba(242, 240, 234, 0.42);
}

#start-screen[data-mm] #mm-tab-store .store-history-name {
    color: var(--o-text-2, rgba(242, 240, 234, 0.68));
}

@media (max-width: 980px) {
    #start-screen[data-mm] .mm-orbryn-spend-rail {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #start-screen[data-mm] #mm-tab-store .store-pkg-grid,
    #start-screen[data-mm] #mm-tab-store .store-gacha-buttons {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] #mm-tab-store .store-waglet-card {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] #mm-tab-store .store-waglet-actions {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    #start-screen[data-mm] .mm-orbryn-spend-rail {
        margin-top: -4px;
        padding: 13px;
    }

    #start-screen[data-mm] .mm-orbryn-spend-token {
        font-size: 28px;
    }

    #start-screen[data-mm] .mm-orbryn-spend-actions {
        grid-template-columns: 1fr;
    }

    #start-screen[data-mm] .mm-orbryn-spend-card {
        min-height: 58px;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: center;
        align-items: center;
    }

    #start-screen[data-mm] #mm-tab-store .mm-store-command {
        min-height: 0;
        padding: 22px 18px 58px;
    }

    #start-screen[data-mm] #mm-tab-store .mm-store-command-title {
        font-size: 34px;
    }

    #start-screen[data-mm] #mm-tab-store .store-early-access,
    #start-screen[data-mm] #mm-tab-store .store-spin-area,
    #start-screen[data-mm] #mm-tab-store .store-gacha-assurance,
    #start-screen[data-mm] #mm-tab-store .store-pkg-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #start-screen[data-mm] #mm-tab-store .store-gacha-assurance {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   PAUSE SCREEN — adopts the editorial OA design system
   (matches auth / main-menu / debug aesthetic: cyan accents, hairline borders,
   corner brackets, mono labels). Replaces the purple-blue gradient title,
   purple email text, gold/purple buttons, and the noisy purple grid overlay.
   ============================================================================ */

/* Calm the global animated grid + scanline that look noisy on a paused game */
#pause-screen::before {
    background-size: 96px 96px !important;
    opacity: 0.05 !important;
    animation: none !important;
}
#pause-screen::after { display: none !important; }

/* Panel: editorial card with cyan corner brackets */
#pause-screen .screen-content {
    background:
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) top right / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.55), rgba(0, 217, 255, 0.55)) bottom right / 1px 14px no-repeat,
        rgba(10, 10, 14, 0.92);
    border: 1px solid var(--oa-line);
    border-radius: 2px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 44px 38px;
    max-width: 440px;
    width: calc(100% - 32px);
    position: relative;
    animation: oaPanelEnter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#pause-screen .screen-content::before { content: none; display: none; }

/* Title: editorial wordmark with pulsing cyan tick (replaces purple-blue gradient) */
#pause-screen h2 {
    font-family: var(--oa-sans);
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--oa-text);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    background-clip: initial;
    filter: none;
    text-shadow: none;
    margin: 0 0 8px 0;
    padding-left: 14px;
    position: relative;
    text-align: left;
    display: inline-block;
}
#pause-screen h2::before {
    content: '';
    position: absolute;
    left: 0; top: 8%; bottom: 8%;
    width: 2px;
    background: var(--oa-cyan);
    animation: oaTickPulse 3s ease-in-out infinite;
}

/* Account email: mono cyan tagline with leading tick */
#pause-screen .pause-account-info {
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--oa-cyan);
    text-transform: uppercase;
    margin: 14px 0 22px;
    padding-left: 20px;
    position: relative;
    text-align: left;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pause-screen .pause-account-info::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 1px;
    background: var(--oa-cyan);
}
#pause-screen .pause-account-info:empty { display: none; }

/* Primary button (Resume): solid cyan */
#pause-screen .btn-primary {
    background: var(--oa-cyan) !important;
    color: #001018 !important;
    border: 1px solid var(--oa-cyan) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    padding: 14px 22px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition: background 150ms ease, box-shadow 200ms ease !important;
}
#pause-screen .btn-primary:hover,
#pause-screen .btn-primary:focus-visible {
    background: var(--oa-cyan-hi) !important;
    color: #000a10 !important;
    border-color: var(--oa-cyan-hi) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.16), 0 0 22px rgba(0, 217, 255, 0.3) !important;
    transform: none !important;
}
#pause-screen .btn-primary::after { display: none !important; }

/* Secondary buttons (Controls / Settings / Debug / Quit): hairline ghost */
#pause-screen .btn-secondary {
    background: transparent !important;
    color: var(--oa-text) !important;
    border: 1px solid var(--oa-line-hi) !important;
    border-radius: 2px !important;
    font-family: var(--oa-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;
    padding: 14px 22px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease !important;
}
#pause-screen .btn-secondary:hover,
#pause-screen .btn-secondary:focus-visible {
    background: var(--oa-bg-2) !important;
    border-color: var(--oa-cyan-line) !important;
    color: var(--oa-text) !important;
    box-shadow: none !important;
    transform: none !important;
}
#pause-screen .btn-secondary::after { display: none !important; }

/* ================================================================
   IN-GAME PANEL REFRESH
   Aligns active game overlays with the main menu and pause menu:
   matte panels, thin cyan ticks, quiet violet accents, and tighter
   readable controls. This intentionally skins shared shells instead
   of changing gameplay/UI construction code.
   ================================================================ */

:root {
    --orb-ui-bg: #050507;
    --orb-ui-bg-raised: rgba(10, 10, 14, 0.94);
    --orb-ui-bg-soft: rgba(255, 255, 255, 0.035);
    --orb-ui-line: rgba(255, 255, 255, 0.085);
    --orb-ui-line-strong: rgba(255, 255, 255, 0.16);
    --orb-ui-cyan: #00d9ff;
    --orb-ui-cyan-soft: rgba(0, 217, 255, 0.12);
    --orb-ui-cyan-line: rgba(0, 217, 255, 0.34);
    --orb-ui-violet: #7c3aed;
    --orb-ui-violet-soft: rgba(124, 58, 237, 0.12);
    --orb-ui-gold: #dec27a;
    --orb-ui-danger: #ff5e70;
    --orb-ui-success: #40ff80;
    --orb-ui-text: #f0efec;
    --orb-ui-text-muted: rgba(240, 239, 236, 0.64);
    --orb-ui-text-dim: rgba(240, 239, 236, 0.38);
    --orb-ui-radius: 8px;
    --orb-ui-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    --orb-ui-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    --orb-ui-corners:
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) top left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) top left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) top right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) top right / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) bottom left / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) bottom left / 1px 14px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) bottom right / 14px 1px no-repeat,
        linear-gradient(rgba(0, 217, 255, 0.52), rgba(0, 217, 255, 0.52)) bottom right / 1px 14px no-repeat;
    --orb-ui-shell:
        var(--orb-ui-corners),
        radial-gradient(ellipse 82% 70% at 18% 0%, rgba(0, 217, 255, 0.095), transparent 62%),
        radial-gradient(ellipse 64% 72% at 92% 8%, rgba(124, 58, 237, 0.105), transparent 64%),
        linear-gradient(180deg, rgba(10, 10, 14, 0.96), rgba(5, 5, 7, 0.94));
}

:is(
    #side-panel .sp-body,
    #chat-log,
    .inventory-panel,
    .bank-panel,
    .dialog-panel,
    .trade-window,
    .market-panel,
    .store-panel,
    .bp-panel,
    #debug-screen .debug-screen-content
) {
    background: var(--orb-ui-shell) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: var(--orb-ui-radius) !important;
    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    color: var(--orb-ui-text);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

:is(.inventory-panel, .bank-panel, .dialog-panel, .trade-window, .market-panel, .store-panel, .bp-panel, #debug-screen .debug-screen-content) {
    font-family: var(--orb-ui-mono);
}

:is(
    .inventory-panel .panel-title,
    .bank-title,
    .dialog-title,
    .trade-title,
    .market-title,
    .store-title,
    .bp-title,
    .debug-header h2,
    .sp-section-title
) {
    font-family: var(--orb-ui-sans);
    color: var(--orb-ui-text) !important;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: none !important;
}

/* Side panel */
#side-panel {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    color: var(--orb-ui-text);
    font-family: var(--orb-ui-mono);
}

.sp-drag-handle {
    height: 14px;
    background: linear-gradient(180deg, rgba(10, 10, 14, 0.92), rgba(5, 5, 7, 0.88)) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-bottom: none !important;
    border-radius: var(--orb-ui-radius) var(--orb-ui-radius) 0 0 !important;
}

.sp-drag-handle:hover {
    background: linear-gradient(180deg, rgba(17, 17, 22, 0.95), rgba(8, 8, 12, 0.9)) !important;
    border-color: var(--orb-ui-cyan-line) !important;
}

.sp-drag-grip,
.chat-drag-grip {
    color: var(--orb-ui-text-dim);
    letter-spacing: 0;
}

.sp-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 6px;
    margin-bottom: 0;
    padding: 0;
}

.sp-tab {
    min-height: 52px;
    padding: 8px 6px 9px;
    color: var(--orb-ui-text-dim);
    background:
        linear-gradient(180deg, rgba(13, 18, 22, 0.96), rgba(7, 9, 13, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.08), transparent 58%) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-bottom: none !important;
    border-radius: var(--orb-ui-radius) var(--orb-ui-radius) 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.sp-tab::after {
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.1), transparent);
}

.sp-tab:hover,
.sp-tab:focus-visible {
    color: var(--orb-ui-text);
    background:
        linear-gradient(180deg, rgba(17, 28, 34, 0.98), rgba(9, 12, 18, 0.94)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.14), transparent 62%) !important;
    border-color: var(--orb-ui-cyan-line) !important;
}

.sp-tab.active {
    color: var(--orb-ui-text) !important;
    background:
        linear-gradient(180deg, rgba(15, 40, 48, 0.98), rgba(8, 17, 25, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.22), transparent 62%) !important;
    border-color: var(--orb-ui-cyan-line) !important;
    box-shadow:
        0 -8px 26px rgba(0, 217, 255, 0.12),
        inset 0 1px 0 rgba(155, 240, 255, 0.18) !important;
}

.sp-tab.active::before {
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--orb-ui-cyan), transparent);
}

.sp-tab-icon {
    opacity: 0.72;
    filter: brightness(0) invert(0.72);
}

.sp-tab:hover .sp-tab-icon,
.sp-tab:focus-visible .sp-tab-icon,
.sp-tab.active .sp-tab-icon {
    opacity: 1;
    filter: brightness(0) invert(0.85) sepia(1) hue-rotate(145deg) saturate(3);
}

.sp-tab-label {
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 1400px) and (pointer: fine) {
    #side-panel {
        width: 320px;
    }

    .sp-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3px;
    }

    .sp-tab {
        min-height: 42px;
        padding: 6px 3px;
        gap: 3px;
        border: 1px solid var(--orb-ui-line) !important;
        border-radius: var(--orb-ui-radius) !important;
    }

    .sp-tab-label {
        font-size: 8px;
    }
}

.sp-body {
    position: relative;
    border-top-color: var(--orb-ui-cyan-line) !important;
    border-radius: 0 0 var(--orb-ui-radius) var(--orb-ui-radius) !important;
    padding: 18px;
    max-height: min(70dvh, calc(100dvh - 118px));
    overflow-y: auto;
}

.sp-content {
    position: relative;
    z-index: 1;
}

.skill-sections {
    gap: 12px;
}

.skill-section,
.sp-summary,
.sp-style,
.sp-equip-summary,
.sp-weapon-card,
.social-entry,
.sp-quest-content,
.sp-quest-prompt,
.debug-section,
.debug-sync-pill,
.debug-sync-metric {
    background: var(--orb-ui-bg-soft) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: var(--orb-ui-radius) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.skill-section {
    padding: 10px;
}

.skill-section-header,
.sp-section-title,
.bank-section-label,
.trade-col-header,
.market-form-label,
.debug-section-title {
    color: var(--orb-ui-text-muted) !important;
    border-bottom-color: var(--orb-ui-line) !important;
    letter-spacing: 0;
}

.skill-section-header--combat {
    color: #ff7668 !important;
}

.skill-section-header--trade {
    color: var(--orb-ui-gold) !important;
}

.skill-section-icon {
    color: currentColor;
    opacity: 0.86;
}

.skill-grid {
    gap: 8px;
}

.skill-cell,
.inv-slot,
.bank-slot,
.trade-slot,
.market-listing-card,
.market-sell-slot,
.market-my-row,
.bp-card {
    background: rgba(255, 255, 255, 0.032) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 6px !important;
}

@media (hover: hover) {
    .skill-cell:hover,
    .inv-slot.has-item:hover,
    .bank-slot.filled:hover,
    .trade-slot:hover,
    .market-listing-card:hover,
    .market-sell-slot:hover,
    .bp-card:hover {
        background: rgba(0, 217, 255, 0.055) !important;
        border-color: var(--orb-ui-cyan-line) !important;
    }
}

.skill-abbr {
    letter-spacing: 0;
}

.skill-level,
.bank-value,
.trade-orbs-value,
.market-card-price,
.market-orb-count {
    color: var(--orb-ui-text) !important;
    text-shadow: none !important;
}

.skill-bar,
.skill-tip-bar,
.bp-progress-bar,
.mm-upkeep-bar,
.sp-dur-bar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.035);
}

.skill-bar-fill,
.skill-tip-bar-fill,
.bp-progress-fill {
    box-shadow: 0 0 12px currentColor;
}

.sp-summary {
    color: var(--orb-ui-text-muted);
    letter-spacing: 0;
}

.sp-summary .sp-cmb-lv,
.sp-summary .sp-total-lv {
    color: var(--orb-ui-cyan);
}

.sp-style:hover,
.sp-style.active {
    color: var(--orb-ui-text);
    border-color: var(--orb-ui-cyan-line) !important;
    background: var(--orb-ui-cyan-soft) !important;
}

.sp-equip-slot {
    background: rgba(255, 255, 255, 0.032) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: var(--orb-ui-radius) !important;
}

.sp-equip-slot.equipped,
.sp-equip-slot.item-accent {
    background:
        linear-gradient(180deg, rgba(var(--slot-accent-rgb), 0.14), rgba(255, 255, 255, 0.025)),
        rgba(10, 10, 14, 0.72) !important;
    border-color: rgba(var(--slot-accent-rgb), 0.42) !important;
}

.sp-ghost-icon,
.sp-eslot-label,
.sp-style-desc,
.sp-info-text,
.sp-info-sub {
    color: var(--orb-ui-text-dim) !important;
}

.social-input,
.debug-input,
.debug-select,
.debug-search,
.bank-orb-input,
.trade-orbs-input,
.trade-orbryn-input,
.market-input,
#chat-input {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 4px !important;
    color: var(--orb-ui-text) !important;
    box-shadow: none !important;
}

.social-input:focus,
.debug-input:focus,
.debug-select:focus,
.debug-search:focus,
.bank-orb-input:focus,
.trade-orbs-input:focus,
.trade-orbryn-input:focus,
.market-input:focus,
#chat-input:focus {
    border-color: var(--orb-ui-cyan-line) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1) !important;
}

.social-input::placeholder,
.debug-input::placeholder,
.debug-search::placeholder,
.market-input::placeholder,
#chat-input::placeholder {
    color: var(--orb-ui-text-dim) !important;
}

/* Chat */
#chat-panel {
    font-family: var(--orb-ui-mono);
}

.chat-header,
.chat-tabs {
    background: rgba(10, 10, 14, 0.92) !important;
    border-color: var(--orb-ui-line) !important;
}

.chat-header {
    border-radius: var(--orb-ui-radius) var(--orb-ui-radius) 0 0 !important;
}

.chat-tabs {
    border-radius: 0 var(--orb-ui-radius) var(--orb-ui-radius) 0 !important;
}

.chat-header-label {
    color: var(--orb-ui-text-muted);
    letter-spacing: 0;
}

.chat-tab {
    color: var(--orb-ui-text-dim);
    border-radius: 4px;
}

.chat-tab:hover,
.chat-tab:focus-visible,
.chat-tab.active {
    color: var(--orb-ui-text);
    background: var(--orb-ui-cyan-soft);
    border-color: var(--orb-ui-cyan-line);
}

.chat-minimize-btn,
.store-close-btn,
.bp-close-btn,
.debug-close-btn {
    background: transparent !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 4px !important;
    color: var(--orb-ui-text-muted) !important;
    box-shadow: none !important;
}

.chat-minimize-btn:hover,
.store-close-btn:hover,
.bp-close-btn:hover,
.debug-close-btn:hover {
    background: rgba(255, 94, 112, 0.12) !important;
    border-color: rgba(255, 94, 112, 0.42) !important;
    color: #ffd5dc !important;
}

.chat-msg-body,
.social-name,
.bank-label,
.trade-orbs-label,
.market-card-name,
.market-my-name,
.bp-card-label,
.dialog-body,
.dialog-line {
    color: var(--orb-ui-text-muted) !important;
}

/* Store, battle pass, trade, market, bank, dialog, debug */
.store-overlay-backdrop,
.bp-overlay-backdrop,
.trade-backdrop {
    background:
        radial-gradient(ellipse 70% 70% at 50% 0%, rgba(0, 217, 255, 0.075), transparent 64%),
        rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.store-header,
.bp-header,
.market-header,
.debug-header {
    background: rgba(255, 255, 255, 0.025) !important;
    border-bottom: 1px solid var(--orb-ui-line) !important;
}

.market-tabs,
.debug-nav,
.bp-footer {
    background: rgba(0, 0, 0, 0.16) !important;
    border-color: var(--orb-ui-line) !important;
}

.market-tab,
.market-cat-btn,
.bp-nav-btn,
.debug-nav-btn,
.debug-btn,
.debug-btn-toggle,
.debug-qty-btn,
.debug-mob-qty-btn,
.social-btn,
.sg-back,
.dialog-continue,
.dialog-option-btn,
.trade-btn,
.trade-orbryn-small-btn,
.trade-orbryn-info,
.trade-notif-btn,
.market-buy-btn,
.market-list-btn,
.market-cancel-btn,
.market-collect-btn,
.bp-claim-all-btn,
.bp-card-claim {
    border-radius: 4px !important;
    font-family: var(--orb-ui-mono) !important;
    letter-spacing: 0;
    box-shadow: none !important;
    text-shadow: none !important;
}

.market-tab,
.market-cat-btn,
.bp-nav-btn,
.debug-nav-btn,
.debug-btn,
.debug-btn-toggle,
.debug-qty-btn,
.debug-mob-qty-btn,
.social-btn,
.sg-back,
.dialog-option-btn,
.trade-btn,
.trade-orbryn-small-btn,
.trade-orbryn-info,
.trade-notif-btn,
.market-cancel-btn {
    background: transparent !important;
    border: 1px solid var(--orb-ui-line) !important;
    color: var(--orb-ui-text-muted) !important;
}

.market-tab:hover,
.market-tab.active,
.market-cat-btn:hover,
.market-cat-btn.active,
.bp-nav-btn:hover:not(:disabled),
.debug-nav-btn:hover,
.debug-nav-btn.active,
.debug-btn:hover,
.debug-btn-toggle:hover,
.debug-qty-btn:hover,
.debug-mob-qty-btn:hover,
.social-btn:hover,
.sg-back:hover,
.dialog-option-btn:hover,
.dialog-option-btn:focus-visible,
.trade-btn:hover,
.trade-orbryn-small-btn:hover,
.trade-orbryn-info:hover,
.trade-notif-btn:hover,
.market-cancel-btn:hover {
    background: var(--orb-ui-cyan-soft) !important;
    border-color: var(--orb-ui-cyan-line) !important;
    color: var(--orb-ui-text) !important;
}

.trade-btn-accept,
.trade-notif-accept,
.market-buy-btn,
.market-list-btn,
.market-collect-btn,
.bp-claim-all-btn,
.bp-card-claim,
.dialog-continue {
    background: rgba(0, 217, 255, 0.11) !important;
    border: 1px solid var(--orb-ui-cyan-line) !important;
    color: var(--orb-ui-cyan) !important;
}

.trade-btn-accept:hover,
.trade-notif-accept:hover,
.market-buy-btn:hover,
.market-list-btn:hover,
.market-collect-btn:hover,
.bp-claim-all-btn:hover,
.bp-card-claim:hover,
.dialog-continue:hover,
.dialog-continue:focus-visible {
    background: rgba(0, 217, 255, 0.18) !important;
    border-color: rgba(0, 217, 255, 0.58) !important;
    color: #8ff0ff !important;
}

.trade-btn-cancel,
.trade-notif-decline,
.market-cancel-btn,
.debug-close-btn {
    color: rgba(255, 150, 160, 0.8) !important;
    border-color: rgba(255, 94, 112, 0.22) !important;
}

.bp-card-tier-badge {
    background: rgba(5, 5, 7, 0.96) !important;
    border-radius: 0 0 6px 6px !important;
}

.bp-page-indicator,
.bp-tier-label,
.sp-tab-badge {
    color: var(--orb-ui-cyan) !important;
}

.debug-section-sync,
.debug-section-inventory-trace {
    border-color: var(--orb-ui-cyan-line) !important;
}

.debug-sync-summary,
.debug-sync-json,
.market-empty,
.trade-status,
.trade-inv-empty,
.bank-inv-empty {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 6px !important;
    color: var(--orb-ui-text-muted) !important;
}

.market-data-shell {
    display: grid;
    gap: 12px;
    color: var(--orb-ui-text);
}

.market-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.market-history-range-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    gap: 6px;
    min-width: min(100%, 320px);
}

.market-history-range-btn,
.market-history-refresh,
.market-history-item {
    min-height: 42px;
    border-radius: 4px !important;
    font-family: var(--orb-ui-mono) !important;
    letter-spacing: 0;
    box-shadow: none !important;
}

.market-history-range-btn,
.market-history-refresh {
    padding: 0 12px;
    color: var(--orb-ui-text-muted);
    background: transparent;
    border: 1px solid var(--orb-ui-line);
}

.market-history-range-btn:hover,
.market-history-range-btn:focus-visible,
.market-history-range-btn.active,
.market-history-refresh:hover,
.market-history-refresh:focus-visible,
.market-history-item:hover,
.market-history-item:focus-visible,
.market-history-item.active {
    color: var(--orb-ui-text);
    background: var(--orb-ui-cyan-soft);
    border-color: var(--orb-ui-cyan-line);
}

.market-history-refresh:disabled {
    color: var(--orb-ui-text-dim);
    cursor: wait;
    opacity: 0.75;
}

.market-history-status {
    padding: 12px;
    color: var(--orb-ui-text-muted);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--orb-ui-line);
    border-radius: 6px;
}

.market-history-status-error {
    color: #ffd5dc;
    border-color: rgba(255, 94, 112, 0.32);
    background: rgba(255, 94, 112, 0.08);
}

.market-history-layout {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.market-history-item-list {
    display: grid;
    gap: 7px;
}

.market-history-item {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px;
    text-align: left;
    color: var(--orb-ui-text-muted);
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid var(--orb-ui-line);
}

.market-history-item span,
.market-history-item strong,
.market-history-item small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.market-history-item span {
    color: var(--orb-ui-text);
    font-size: 12px;
    font-weight: 700;
}

.market-history-item strong {
    color: var(--orb-ui-cyan);
    font-size: 12px;
    font-weight: 800;
}

.market-history-item small {
    color: var(--orb-ui-text-dim);
    font-size: 10px;
    line-height: 1.25;
}

.market-history-detail {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.market-history-detail-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.market-history-detail-head h3 {
    margin: 2px 0 0;
    color: var(--orb-ui-text);
    font-family: var(--orb-ui-sans);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.market-history-kicker,
.market-history-confidence {
    color: var(--orb-ui-text-dim);
    font-family: var(--orb-ui-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.market-history-confidence {
    flex: 0 0 auto;
    padding: 6px 8px;
    color: var(--orb-ui-cyan);
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid var(--orb-ui-cyan-line);
    border-radius: 4px;
}

.market-history-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.market-history-metric {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid var(--orb-ui-line);
    border-radius: 6px;
}

.market-history-metric span,
.market-history-metric small {
    color: var(--orb-ui-text-dim);
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.market-history-metric strong {
    color: var(--orb-ui-text);
    font-size: 14px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.market-history-chart-wrap {
    min-height: 172px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--orb-ui-line);
    border-radius: 6px;
}

.market-history-chart {
    display: block;
    width: 100%;
    min-height: 150px;
}

.market-history-axis,
.market-history-grid-line {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.market-history-grid-line {
    stroke-dasharray: 4 5;
}

.market-history-volume-bar {
    fill: rgba(64, 255, 128, 0.22);
}

.market-history-volume-bar[data-latest="true"] {
    fill: rgba(64, 255, 128, 0.42);
}

.market-history-line {
    fill: none;
    stroke: var(--orb-ui-cyan);
    stroke-width: 2.25;
    vector-effect: non-scaling-stroke;
}

.market-history-point {
    fill: var(--orb-ui-bg);
    stroke: var(--orb-ui-cyan);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.market-history-chart-empty {
    display: grid;
    min-height: 150px;
    place-items: center;
    color: var(--orb-ui-text-dim);
    text-align: center;
}

.market-history-table {
    display: grid;
    gap: 6px;
}

.market-history-table-head,
.market-history-sale-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(72px, 0.7fr) minmax(82px, 0.8fr);
    gap: 8px;
    align-items: center;
}

.market-history-table-head {
    color: var(--orb-ui-text-dim);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.market-history-sale-row {
    min-height: 42px;
    padding: 8px 10px;
    color: var(--orb-ui-text-muted);
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid var(--orb-ui-line);
    border-radius: 6px;
}

.market-history-sale-row span,
.market-history-sale-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.market-history-sale-row small {
    display: block;
    color: var(--orb-ui-text-dim);
    font-size: 10px;
    line-height: 1.2;
}

.market-history-sale-row strong {
    color: var(--orb-ui-cyan);
}

.market-history-sale-row.is-empty {
    display: block;
    color: var(--orb-ui-text-dim);
    text-align: center;
}

@media (max-width: 768px) {
    #side-panel {
        left: 10px;
        right: 10px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }

    #side-panel .sp-body {
        max-height: min(70vh, 520px);
        overflow-y: auto;
        padding: 14px;
    }

    .sp-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3px;
        overflow-x: visible;
        scrollbar-width: none;
    }

    .sp-tabs::-webkit-scrollbar {
        display: none;
    }

    .sp-tab {
        min-height: 42px;
        padding: 6px 3px;
        border: 1px solid var(--orb-ui-line) !important;
        border-radius: var(--orb-ui-radius) !important;
    }

    #sp-equipment .sp-equipment-layout {
        display: grid;
        grid-template-columns: 48px minmax(0, 160px);
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 2px 0 8px;
    }

    #sp-equipment .sp-psionics-rail {
        gap: 5px;
        padding: 0;
    }

    #sp-equipment .sp-equip-slot.sp-psionics-slot {
        width: 44px !important;
        height: 44px !important;
        border-radius: 5px 2px 2px 5px !important;
    }

    #sp-equipment .sp-equip-grid {
        display: grid;
        grid-template-columns: repeat(3, 48px);
        grid-auto-rows: 48px;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 0;
    }

    #sp-equipment .sp-equip-row {
        display: contents;
    }

    #sp-equipment .sp-equip-slot {
        width: 48px;
        height: 48px;
        box-sizing: border-box;
        padding: 12px 4px 4px;
        overflow: hidden;
        border-radius: 6px !important;
        font-size: 9px;
        gap: 0;
    }

    #sp-equipment .sp-equip-slot[data-eslot="head"] { grid-column: 2; grid-row: 1; }
    #sp-equipment .sp-equip-slot[data-eslot="cloak"] { grid-column: 1; grid-row: 2; }
    #sp-equipment .sp-equip-slot[data-eslot="amulet"] { grid-column: 2; grid-row: 2; }
    #sp-equipment .sp-equip-slot[data-eslot="ammo"] { grid-column: 3; grid-row: 2; }
    #sp-equipment .sp-equip-slot[data-eslot="weapon"] { grid-column: 1; grid-row: 3; }
    #sp-equipment .sp-equip-slot[data-eslot="body"] { grid-column: 2; grid-row: 3; }
    #sp-equipment .sp-equip-slot[data-eslot="gloves"] { grid-column: 1; grid-row: 4; }
    #sp-equipment .sp-equip-slot[data-eslot="legs"] { grid-column: 2; grid-row: 4; }
    #sp-equipment .sp-equip-slot[data-eslot="ring"] { grid-column: 3; grid-row: 4; }
    #sp-equipment .sp-equip-slot[data-eslot="feet"] { grid-column: 2; grid-row: 5; }

    #sp-equipment .sp-eslot-label {
        position: absolute;
        top: 4px;
        left: 2px;
        right: 2px;
        max-width: none;
        font-size: 7px;
        line-height: 1;
        letter-spacing: 0.4px;
        text-align: center;
        white-space: nowrap;
    }

    #sp-equipment .sp-ghost-icon {
        font-size: 16px;
        line-height: 1;
    }

    #sp-equipment .sp-equip-img {
        width: 28px;
        height: 28px;
    }

    #sp-equipment .sp-eslot-icon {
        font-size: 13px;
        line-height: 1;
    }

    #sp-equipment .sp-eslot-name {
        display: none;
    }

    #sp-equipment .sp-equip-slot[data-eslot="ammo"] .sp-ammo-count {
        font-size: 8px;
        line-height: 1;
        letter-spacing: 0;
    }

    #sp-equipment .sp-dur-bar {
        left: 4px;
        right: 4px;
        bottom: 2px;
    }

    .skill-grid,
    .skill-grid--combat,
    .skill-grid--trade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-history-toolbar {
        align-items: stretch;
    }

    .market-history-range-row {
        width: 100%;
        min-width: 0;
    }

    .market-history-refresh {
        width: 100%;
    }

    .market-history-layout {
        grid-template-columns: 1fr;
    }

    .market-history-item-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-history-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-history-table-head,
    .market-history-sale-row {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.inventory-panel, .bank-panel, .trade-window, .market-panel, .store-panel, .bp-panel, #debug-screen .debug-screen-content) {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        border-radius: var(--orb-ui-radius) !important;
    }

    #chat-panel {
        width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
    }
}

@media (pointer: coarse) {
    body.game-playing.inventory-action-menu-open .inventory-panel {
        bottom: calc(154px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 168px);
    }

    .item-context-menu.item-context-menu--mobile {
        left: 50%;
        right: auto;
        top: auto;
        bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 86px));
        transform: translateX(-50%);
        width: min(360px, calc(100vw - 24px));
        min-width: 0;
        max-height: calc(100dvh - 112px);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
        gap: 6px;
        overflow-y: auto;
        padding: 8px;
        z-index: 130;
    }

    .item-context-menu.item-context-menu--mobile .ctx-menu-title {
        grid-column: 1 / -1;
        margin: 0;
        padding-bottom: 6px;
    }

    .item-context-menu.item-context-menu--mobile .ctx-menu-btn {
        min-height: 42px;
        margin: 0;
        padding: 9px 10px;
        white-space: nowrap;
    }

    .sp-equip-picker.sp-equip-picker--mobile {
        left: 50%;
        right: auto;
        top: auto;
        bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 86px));
        transform: translateX(-50%);
        width: min(360px, calc(100vw - 24px));
        max-height: calc(100dvh - 112px);
        grid-template-columns: 1fr;
        z-index: 130;
    }

    .sp-equip-picker.sp-equip-picker--mobile .sp-equip-picker-item {
        min-height: 46px;
    }

    .sp-equip-picker.sp-equip-picker--mobile .sp-equip-picker-item--psionic {
        min-height: 96px;
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    .item-context-menu.item-context-menu--mobile {
        width: min(360px, calc(100vw - 144px));
    }

    .sp-equip-picker.sp-equip-picker--mobile {
        width: min(360px, calc(100vw - 144px));
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    body.game-playing {
        --orbryn-mobile-panel-bottom-clearance: max(104px, calc(env(safe-area-inset-bottom, 0px) + 96px));
        --orbryn-mobile-panel-top-gutter: max(10px, env(safe-area-inset-top, 0px));
    }

    body.game-playing :is(
        .inventory-panel,
        .grave-panel,
        .sleep-loot-panel,
        .bank-panel-full,
        .shop-panel,
        .cooking-panel,
        .smelting-panel,
        .refinery-panel,
        .handcraft-panel,
        .anvil-panel,
        .workbench-panel,
        .hack-terminal-panel,
        .dialog-panel,
        .trade-window,
        .market-panel,
        .store-panel,
        .bp-panel,
        .leaderboard-panel,
        .orb-modal-content
    ):not(.station-panel) {
        max-height: calc(100dvh - var(--orbryn-mobile-panel-bottom-clearance) - var(--orbryn-mobile-panel-top-gutter)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.game-playing :is(
        .grave-panel,
        .sleep-loot-panel,
        .bank-panel-full,
        .shop-panel,
        .cooking-panel,
        .smelting-panel,
        .refinery-panel,
        .handcraft-panel,
        .anvil-panel,
        .workbench-panel,
        .hack-terminal-panel,
        .dialog-panel,
        .market-panel,
        .store-panel,
        .bp-panel,
        .leaderboard-panel,
        .orb-modal-content
    ):not(.station-panel) {
        top: calc(50% - 52px) !important;
        transform: translate(-50%, -50%);
    }

    body.game-playing .trade-overlay {
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;
        padding: var(--orbryn-mobile-panel-top-gutter) 12px var(--orbryn-mobile-panel-bottom-clearance);
    }

    body.game-playing .trade-window {
        top: auto !important;
        transform: none !important;
        width: min(600px, calc(100vw - 24px)) !important;
        max-width: min(600px, calc(100vw - 24px)) !important;
        box-sizing: border-box;
        margin: 0 auto;
    }

    body.game-playing :is(
        .inventory-panel,
        .grave-panel,
        .sleep-loot-panel,
        .bank-panel-full,
        .shop-panel,
        .cooking-panel,
        .smelting-panel,
        .refinery-panel,
        .handcraft-panel,
        .anvil-panel,
        .workbench-panel,
        .hack-terminal-panel,
        .trade-window,
        .market-panel,
        .store-panel,
        .bp-panel,
        .leaderboard-panel,
        .orb-modal-content
    ):not(.station-panel) {
        z-index: 120;
    }
}

/* Unified station panels: bank, store, cooking, furnace, anvil, workbench */
.station-panel {
    --station-accent: var(--orb-ui-cyan);
    --station-accent-soft: rgba(0, 217, 255, 0.12);
    --station-accent-line: rgba(0, 217, 255, 0.38);
    width: min(860px, calc(100vw - 32px)) !important;
    max-height: min(760px, calc(100dvh - 32px)) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 12000 !important;
}

.bank-panel.station-panel {
    width: min(760px, calc(100vw - 32px)) !important;
}

.market-panel.station-panel {
    width: min(920px, calc(100vw - 32px)) !important;
}

.station-panel[data-station-accent="bank"] {
    --station-accent: #8ff0ff;
    --station-accent-soft: rgba(143, 240, 255, 0.12);
    --station-accent-line: rgba(143, 240, 255, 0.36);
}

.station-panel[data-station-accent="store"] {
    --station-accent: #40ff80;
    --station-accent-soft: rgba(64, 255, 128, 0.12);
    --station-accent-line: rgba(64, 255, 128, 0.38);
}

.station-panel[data-station-accent="market"] {
    --station-accent: #70aaff;
    --station-accent-soft: rgba(112, 170, 255, 0.12);
    --station-accent-line: rgba(112, 170, 255, 0.38);
}

.station-panel[data-station-accent="cooking"] {
    --station-accent: #ff9955;
    --station-accent-soft: rgba(255, 153, 85, 0.12);
    --station-accent-line: rgba(255, 153, 85, 0.38);
}

.station-panel[data-station-accent="furnace"],
.station-panel[data-station-accent="anvil"] {
    --station-accent: #dd7733;
    --station-accent-soft: rgba(221, 119, 51, 0.12);
    --station-accent-line: rgba(221, 119, 51, 0.38);
}

.station-panel[data-station-accent="workbench"] {
    --station-accent: #c8c8c8;
    --station-accent-soft: rgba(200, 200, 200, 0.11);
    --station-accent-line: rgba(200, 200, 200, 0.34);
}

.station-panel[data-station-accent="terminal"] {
    --station-accent: #00ffaa;
    --station-accent-soft: rgba(0, 255, 170, 0.11);
    --station-accent-line: rgba(0, 255, 170, 0.34);
}

.station-panel[data-station-accent="refinery"] {
    --station-accent: #b7a66a;
    --station-accent-soft: rgba(183, 166, 106, 0.12);
    --station-accent-line: rgba(183, 166, 106, 0.36);
}

.station-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 12px 14px 12px 16px;
    background:
        linear-gradient(180deg, rgba(10, 10, 14, 0.98), rgba(5, 5, 7, 0.94)),
        radial-gradient(circle at 0% 0%, var(--station-accent-soft), transparent 58%);
    border-bottom: 1px solid var(--station-accent-line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.station-title-wrap {
    min-width: 0;
}

.station-eyebrow {
    margin-bottom: 3px;
    color: var(--orb-ui-text-dim);
    font-family: var(--orb-ui-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.station-panel .station-title {
    margin: 0 !important;
    color: var(--station-accent) !important;
    font-family: var(--orb-ui-sans);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: left;
    text-shadow: none !important;
    overflow-wrap: anywhere;
}

.station-input-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--orb-ui-text-muted);
    font-family: var(--orb-ui-mono);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.station-input-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.station-input-legend kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 18px;
    padding: 0 5px;
    color: var(--orb-ui-text);
    font: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--orb-ui-line);
    border-radius: 4px;
}

.station-close-btn {
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    color: var(--orb-ui-text-muted) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 6px !important;
    font-family: var(--orb-ui-mono);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.station-close-btn:hover,
.station-close-btn:focus-visible {
    color: #ffd5dc !important;
    background: rgba(255, 94, 112, 0.12) !important;
    border-color: rgba(255, 94, 112, 0.42) !important;
}

.station-panel > :not(.station-header) {
    margin-right: clamp(12px, 2vw, 18px);
    margin-left: clamp(12px, 2vw, 18px);
}

.station-panel > .station-header + * {
    margin-top: 16px;
}

.station-panel > :last-child {
    margin-bottom: 16px;
}

.station-panel .shop-body,
.station-panel .cooking-body,
.station-panel .smelting-body,
.station-panel .refinery-body,
.station-panel .anvil-body,
.station-panel .handcraft-body,
.station-panel .wb-body,
.station-panel .ht-body {
    min-height: 0;
}

.station-panel .shop-list-panel,
.station-panel .anvil-recipe-list,
.station-panel .handcraft-items,
.station-panel .wb-recipe-list,
.station-panel .ht-recipe-list,
.station-panel .cooking-col-raw .cooking-items,
.station-panel .smelting-col-ore .smelting-items,
.station-panel .refinery-col-ore .refinery-items {
    max-height: min(44dvh, 360px);
}

.station-recipe-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 8px 10px 5px;
    color: var(--station-accent);
    font-family: var(--orb-ui-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(5, 8, 14, 0.96), rgba(5, 8, 14, 0.86));
    border-bottom: 1px solid var(--station-accent-line);
    pointer-events: none;
}

.station-recipe-group-count {
    min-width: 20px;
    color: var(--orb-ui-text-muted);
    text-align: right;
}

.station-panel .bank-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    max-height: min(34dvh, 260px);
}

.station-panel .bank-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.station-panel .station-action,
.station-panel button,
.station-panel input,
.station-panel select {
    min-height: 44px;
}

.station-panel :is(
    .bank-orb-section,
    .bank-row,
    .bank-selection-detail,
    .shop-balance,
    .shop-list-panel,
    .shop-detail-panel,
    .cooking-col,
    .smelting-col,
    .anvil-recipe-detail,
    .wb-recipe-detail,
    .market-balance,
    .market-stat-card,
    .market-note,
    .market-sell-selected,
    .market-fee-preview,
    .market-nft-card,
    .market-nft-vault-card
) {
    background: rgba(255, 255, 255, 0.038) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026);
}

.station-panel :is(.bank-orb-section, .shop-body, .cooking-body, .smelting-body, .anvil-body, .wb-body, .market-body) {
    gap: 12px;
}

.station-panel :is(.shop-balance, .market-balance) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    padding: 10px 12px;
    color: var(--orb-ui-text-muted) !important;
    letter-spacing: 0;
}

.station-panel :is(.shop-orb-count, .market-orb-count, .market-orbryn-count, .bank-value) {
    color: var(--orb-ui-text) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.station-panel :is(.shop-tabs, .market-tabs, .anvil-tabs, .wb-tabs) {
    gap: 6px;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.station-panel .shop-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-panel .market-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.station-panel :is(.shop-tab, .market-tab, .anvil-tab, .wb-tab) {
    min-height: 44px;
    padding: 8px 10px !important;
    color: var(--orb-ui-text-muted) !important;
    background: rgba(255, 255, 255, 0.032) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 7px !important;
    letter-spacing: 0 !important;
    line-height: 1.1;
    text-shadow: none !important;
    white-space: normal;
}

.station-panel :is(.shop-tab.active, .market-tab.active, .anvil-tab.active, .wb-tab.active) {
    color: var(--station-accent) !important;
    background: var(--station-accent-soft) !important;
    border-color: var(--station-accent-line) !important;
    box-shadow: inset 0 -2px 0 var(--station-accent);
}

.station-panel :is(
    .shop-item-row,
    .cooking-item,
    .smelting-item,
    .anvil-recipe-row,
    .wb-recipe-row,
    .market-listing-card,
    .market-sell-slot,
    .market-my-row,
    .market-collection-row
) {
    background: rgba(255, 255, 255, 0.032) !important;
    border: 1px solid var(--orb-ui-line) !important;
    border-radius: 7px !important;
}

.station-panel :is(
    .shop-item-row.selected,
    .cooking-recipe-row.recipe-selected,
    .smelting-recipe-row.recipe-selected,
    .anvil-recipe-row.selected,
    .wb-recipe-row.selected,
    .market-sell-slot.selected
) {
    background: var(--station-accent-soft) !important;
    border-color: var(--station-accent-line) !important;
    box-shadow: inset 3px 0 0 var(--station-accent), 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

.station-panel :is(.recipe-disabled, .missing-mats) {
    opacity: 0.68;
}

.station-panel :is(.recipe-locked, .locked) {
    opacity: 0.48;
}

.station-panel :is(
    .btn-bank,
    .btn-shop,
    .btn-cook,
    .btn-smelt,
    .btn-anvil-forge,
    .btn-anvil-stop,
    .btn-wb-craft,
    .btn-wb-stop,
    .market-buy-btn,
    .market-list-btn,
    .market-cancel-btn,
    .market-collect-btn
) {
    min-height: 44px;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    font-family: var(--orb-ui-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    line-height: 1.12;
    text-shadow: none !important;
    white-space: normal;
}

.station-panel :is(
    .btn-shop-buy,
    .btn-cook-one,
    .btn-smelt-one,
    .btn-anvil-forge,
    .btn-wb-craft,
    .market-buy-btn,
    .market-list-btn,
    .market-collect-btn
) {
    color: var(--station-accent) !important;
    background: var(--station-accent-soft) !important;
    border: 1px solid var(--station-accent-line) !important;
}

.station-panel :is(.btn-cook-all, .btn-smelt-all, .btn-shop-sell, .btn-shop-sell-all, .btn-bank-sm, .btn-bank-xs) {
    color: var(--orb-ui-text) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid var(--orb-ui-line-strong) !important;
}

.station-panel :is(.btn-cook-stop, .btn-smelt-stop, .btn-anvil-stop, .btn-wb-stop, .market-cancel-btn, .btn-bank-close) {
    color: rgba(255, 190, 198, 0.92) !important;
    background: rgba(255, 94, 112, 0.085) !important;
    border: 1px solid rgba(255, 94, 112, 0.24) !important;
}

.station-panel :is(.btn-bank:disabled, .btn-shop:disabled, .btn-cook:disabled, .btn-smelt:disabled, .btn-anvil-forge:disabled, .btn-wb-craft:disabled, .market-list-btn:disabled) {
    opacity: 0.42 !important;
    cursor: not-allowed;
}

.station-panel :is(.market-listing-grid, .market-sell-item-grid, .market-my-list, .market-collection-list) {
    gap: 8px;
}

.station-panel .market-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-panel .market-card-name,
.station-panel .market-my-name,
.station-panel .market-collection-name,
.station-panel .shop-item-name,
.station-panel .anvil-recipe-name,
.station-panel .wb-recipe-name {
    color: var(--orb-ui-text) !important;
    letter-spacing: 0;
    line-height: 1.2;
}

.station-panel .market-card-bottom,
.station-panel .market-my-row,
.station-panel .market-collection-row {
    align-items: center;
}

.station-panel .station-action:focus-visible,
.station-panel .station-key-focus,
.station-panel .gamepad-hover {
    position: relative;
    transform: translateY(-1px);
}

.station-panel .shop-item-row,
.station-panel .cooking-recipe-row,
.station-panel .smelting-recipe-row,
.station-panel .refinery-recipe-row,
.station-panel .anvil-recipe-row,
.station-panel .handcraft-recipe-row,
.station-panel .wb-recipe-row,
.station-panel .ht-recipe-row {
    min-height: 48px;
}

.station-panel .station-action:focus-visible,
.station-panel .station-key-focus,
.station-panel .gamepad-hover {
    outline: 2px solid var(--station-accent) !important;
    outline-offset: 2px;
    border-color: var(--station-accent-line) !important;
    box-shadow: 0 0 0 3px var(--station-accent-soft), 0 0 18px var(--station-accent-soft) !important;
}

@media (hover: hover) {
    .station-panel .station-action:hover {
        border-color: var(--station-accent-line) !important;
        background: var(--station-accent-soft) !important;
    }
}

@media (max-width: 768px), (pointer: coarse) {
    body.station-panel-open #minimap-canvas,
    body.station-panel-open #side-panel,
    body.station-panel-open #chat-panel,
    body.station-panel-open #mobile-controls,
    body.station-panel-open #mobile-hamburger-btn,
    body.station-panel-open .mobile-chat-toggle,
    body.station-panel-open #chat-mini-feed,
    body.station-panel-open .orbryn-universal-close {
        display: none !important;
    }

    .station-panel {
        width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        top: calc(9px + env(safe-area-inset-top, 0px));
        transform: translateX(-50%);
        border-radius: 10px;
        background: rgba(5, 9, 18, 0.96);
    }

    .station-header {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        min-height: 50px;
        padding: 8px 8px 7px 10px;
        box-shadow: none;
    }

    .station-input-legend {
        display: none;
    }

    .station-eyebrow {
        display: none;
    }

    .station-panel .station-title {
        font-size: 15px;
    }

    .station-panel > :not(.station-header) {
        margin-right: 10px;
        margin-left: 10px;
    }

    .station-panel > .station-header + * {
        margin-top: 8px;
    }

    .station-panel .shop-body,
    .station-panel .cooking-body,
    .station-panel .smelting-body,
    .station-panel .refinery-body,
    .station-panel .anvil-body,
    .station-panel .handcraft-body,
    .station-panel .wb-body,
    .station-panel .ht-body {
        flex-direction: column;
    }

    .station-panel .shop-body {
        gap: 8px;
    }

    .station-panel .shop-detail-panel {
        width: auto;
        min-height: 150px;
        align-items: stretch;
    }

    .station-panel .shop-detail-actions,
    .station-panel .cooking-actions,
    .station-panel .smelting-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 7px;
    }

    .market-panel.station-panel {
        width: calc(100vw - 18px) !important;
        left: 50%;
    }

    .station-panel .market-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .station-panel .market-tab {
        min-height: 42px;
        padding: 6px 7px !important;
        font-size: 10px;
    }

    .station-panel .market-balance {
        align-items: stretch;
        justify-content: stretch;
    }

    .station-panel .market-balance-line {
        flex: 1 1 128px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    .station-panel .market-controls {
        gap: 8px;
    }

    .station-panel .market-cat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .station-panel .market-cat-btn {
        min-height: 38px;
        padding: 6px 5px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .station-panel .market-sort-wrap {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .station-panel .market-listing-grid,
    .station-panel .market-nft-vault-grid {
        grid-template-columns: 1fr;
    }

    .station-panel .market-card-bottom,
    .station-panel .market-my-row,
    .station-panel .market-collection-row {
        flex-wrap: wrap;
    }

    .station-panel .market-buy-btn,
    .station-panel .market-cancel-btn {
        min-width: 92px;
        margin-left: 0;
    }

    .station-panel .market-sell-item-grid {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    }

    .station-panel .market-form-row {
        gap: 5px;
    }

    .station-panel .cooking-center,
    .station-panel .smelting-center {
        flex-direction: row;
        width: 100%;
        min-height: 42px;
        gap: 10px;
    }

    .station-panel .cooking-arrow,
    .station-panel .smelting-arrow {
        font-size: 20px;
        line-height: 1;
        transform: rotate(90deg);
    }

    .station-panel .cooking-progress-wrap,
    .station-panel .smelting-progress-wrap {
        width: min(38vw, 140px);
        height: 6px;
    }

    .station-panel .cooking-status,
    .station-panel .smelting-status {
        min-width: 52px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .station-panel .shop-list-panel,
    .station-panel .anvil-recipe-list,
    .station-panel .handcraft-items,
    .station-panel .wb-recipe-list,
    .station-panel .ht-recipe-list,
    .station-panel .cooking-col-raw .cooking-items,
    .station-panel .smelting-col-ore .smelting-items,
    .station-panel .refinery-col-ore .refinery-items {
        max-height: 30dvh;
    }

    .station-panel.smelting-panel {
        max-height: calc(100dvh - 18px) !important;
    }

    .station-panel .smelting-body {
        gap: 8px;
    }

    .station-panel .smelting-col {
        flex: 0 0 auto;
        min-width: 0;
        padding: 10px;
    }

    .station-panel .smelting-col-bars .smelting-items {
        gap: 6px;
    }

    .station-panel .smelting-recipe-row {
        min-height: 52px;
        padding: 9px 10px;
    }

    .station-panel .smelting-recipe-meta {
        font-size: 10px;
    }

    .station-panel .smelting-item-note {
        font-size: 10px;
    }

    .station-panel .smelting-center {
        flex-direction: row;
        width: 100%;
        min-height: 42px;
        gap: 10px;
    }

    .station-panel .smelting-arrow {
        font-size: 20px;
        line-height: 1;
        transform: rotate(90deg);
    }

    .station-panel .smelting-progress-wrap {
        width: min(38vw, 140px);
        height: 6px;
    }

    .station-panel .smelting-status {
        min-width: 52px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .station-panel .smelting-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 7px;
    }

    .station-panel .btn-smelt {
        min-height: 44px;
        padding: 8px;
        letter-spacing: 1px;
    }

    .anvil-panel.station-panel,
    .workbench-panel.station-panel,
    .hack-terminal-panel.station-panel {
        padding: 0 !important;
    }

    .station-panel .anvil-tabs,
    .station-panel .wb-tabs,
    .station-panel .ht-tabs {
        gap: 5px;
        margin-bottom: 8px;
        padding-bottom: 0;
        overflow-x: auto;
        border-bottom: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .station-panel .anvil-tabs::-webkit-scrollbar,
    .station-panel .wb-tabs::-webkit-scrollbar,
    .station-panel .ht-tabs::-webkit-scrollbar {
        display: none;
    }

    .station-panel .anvil-tab,
    .station-panel .wb-tab,
    .station-panel .ht-tab {
        flex: 1 0 92px;
        min-height: 40px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 10px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .station-panel .anvil-body,
    .station-panel .wb-body,
    .station-panel .ht-body {
        gap: 0;
        margin-bottom: 8px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
    }

    .station-panel .anvil-recipe-list,
    .station-panel .wb-recipe-list,
    .station-panel .ht-recipe-list,
    .station-panel .anvil-recipe-detail,
    .station-panel .wb-recipe-detail,
    .station-panel .ht-recipe-detail {
        flex: 0 0 auto;
        min-width: 0;
    }

    .station-panel .anvil-recipe-list,
    .station-panel .wb-recipe-list,
    .station-panel .ht-recipe-list {
        max-height: min(28dvh, 168px);
        gap: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .station-panel .station-recipe-group {
        min-height: 24px;
        padding: 7px 10px 4px;
        font-size: 9px;
        background: rgba(5, 8, 14, 0.94);
    }

    .station-panel .anvil-recipe-row,
    .station-panel .wb-recipe-row,
    .station-panel .ht-recipe-row {
        min-height: 44px;
        padding: 8px 10px;
        gap: 8px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 0;
    }

    .station-panel .anvil-recipe-row:last-child,
    .station-panel .wb-recipe-row:last-child,
    .station-panel .ht-recipe-row:last-child {
        border-bottom: 0;
    }

    .station-panel .anvil-recipe-row.selected,
    .station-panel .wb-recipe-row.selected,
    .station-panel .ht-recipe-row.selected {
        background: var(--station-accent-soft);
        box-shadow: inset 3px 0 0 var(--station-accent);
    }

    .station-panel .anvil-recipe-info,
    .station-panel .wb-recipe-info,
    .station-panel .ht-recipe-info {
        gap: 8px;
    }

    .station-panel .anvil-recipe-name,
    .station-panel .wb-recipe-name,
    .station-panel .ht-recipe-name {
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .station-panel .anvil-recipe-level,
    .station-panel .wb-recipe-level,
    .station-panel .ht-recipe-level {
        font-size: 10px;
        letter-spacing: 0;
    }

    .station-panel .anvil-recipe-detail,
    .station-panel .wb-recipe-detail,
    .station-panel .ht-recipe-detail {
        max-height: min(34dvh, 220px);
        padding: 10px;
        overflow-y: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .station-panel .anvil-detail-empty,
    .station-panel .wb-detail-empty,
    .station-panel .ht-detail-empty {
        min-height: 48px;
        padding: 14px 0;
    }

    .station-panel .anvil-detail-header,
    .station-panel .wb-detail-header,
    .station-panel .ht-detail-header {
        margin-bottom: 8px;
    }

    .station-panel .anvil-detail-mats-label,
    .station-panel .wb-detail-mats-label,
    .station-panel .ht-detail-mats-label {
        margin-top: 5px;
        letter-spacing: 0;
    }

    .station-panel .anvil-mat-row,
    .station-panel .wb-mat-row,
    .station-panel .ht-mat-row {
        padding: 4px 0;
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 0;
    }

    .station-panel .anvil-qty-row,
    .station-panel .wb-qty-row,
    .station-panel .ht-qty-row {
        gap: 6px;
    }

    .station-panel .anvil-qty-presets,
    .station-panel .wb-qty-presets,
    .station-panel .ht-qty-presets {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        flex: 1;
        gap: 4px;
        margin-left: 4px;
    }

    .station-panel .anvil-qty-preset,
    .station-panel .wb-qty-preset,
    .station-panel .ht-qty-preset {
        min-height: 36px;
        padding: 0 4px;
        letter-spacing: 0;
    }

    .station-panel .btn-anvil-forge,
    .station-panel .btn-anvil-stop,
    .station-panel .btn-wb-craft,
    .station-panel .btn-wb-stop,
    .station-panel .btn-ht-craft,
    .station-panel .btn-ht-stop {
        min-height: 44px;
        padding: 0 10px;
        letter-spacing: 0;
    }

    .station-panel .anvil-skill-info,
    .station-panel .wb-skill-info,
    .station-panel .ht-skill-info {
        margin-bottom: 10px;
        padding: 4px 0 0;
        background: transparent;
        border: 0;
        letter-spacing: 0;
    }

    .handcraft-panel.station-panel {
        width: min(460px, calc(100vw - 18px)) !important;
    }

    .handcraft-panel.station-panel .handcraft-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }

    .handcraft-panel.station-panel .handcraft-col {
        min-width: 0;
        padding: 8px;
    }

    .handcraft-panel.station-panel .handcraft-col-list {
        max-width: none;
    }

    .handcraft-panel.station-panel .handcraft-items {
        max-height: min(28dvh, 180px);
        overflow-y: auto;
    }

    .handcraft-panel.station-panel .handcraft-col-detail {
        max-height: min(26dvh, 180px);
        overflow-y: auto;
    }

    .handcraft-panel.station-panel .handcraft-recipe-row {
        min-height: 42px;
        padding: 7px 8px;
    }

    .handcraft-panel.station-panel .handcraft-detail-name {
        font-size: 14px;
        letter-spacing: 0;
    }

    .handcraft-panel.station-panel .handcraft-detail-desc,
    .handcraft-panel.station-panel .handcraft-mat,
    .handcraft-panel.station-panel .handcraft-detail-xp,
    .handcraft-panel.station-panel .handcraft-status,
    .handcraft-panel.station-panel .handcraft-skill-info {
        letter-spacing: 0;
    }

    .handcraft-panel.station-panel .handcraft-progress-wrap,
    .handcraft-panel.station-panel .handcraft-status,
    .handcraft-panel.station-panel .handcraft-skill-info,
    .handcraft-panel.station-panel .handcraft-actions {
        margin-bottom: 8px;
    }

    .handcraft-panel.station-panel .handcraft-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .handcraft-panel.station-panel #btn-handcraft-stop {
        grid-column: 1 / -1;
    }

    .handcraft-panel.station-panel .btn-handcraft {
        width: 100%;
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
        letter-spacing: 0;
        white-space: normal;
    }

    .station-panel .bank-grid,
    .station-panel .bank-inv-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 4px;
    }

    .bank-panel.station-panel {
        width: min(560px, calc(100vw - 112px)) !important;
        max-height: calc(100dvh - 18px) !important;
        left: calc(50% - 36px);
    }

    .bank-panel.station-panel .station-header {
        min-height: 50px;
        padding-right: 8px;
    }

    .bank-panel.station-panel .bank-orb-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .bank-panel.station-panel .bank-row {
        margin-bottom: 0;
        padding: 6px 8px;
    }

    .bank-panel.station-panel .bank-orb-amount,
    .bank-panel.station-panel .bank-orb-actions {
        grid-column: 1 / -1;
    }

    .bank-panel.station-panel .bank-orb-amount {
        display: grid;
        grid-template-columns: auto minmax(52px, 68px) minmax(0, 1fr);
        align-items: center;
    }

    .bank-panel.station-panel .bank-quick-amounts,
    .bank-panel.station-panel .bank-orb-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bank-panel.station-panel .bank-orb-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-panel.station-panel .bank-grid {
        grid-template-columns: repeat(6, minmax(40px, 1fr));
        max-height: min(31dvh, 188px);
        overflow-y: auto;
        padding-right: 3px;
    }

    .bank-panel.station-panel .bank-inv-grid {
        grid-template-columns: repeat(6, minmax(40px, 1fr));
        max-height: min(22dvh, 132px);
        overflow-y: auto;
        padding-right: 3px;
    }

    .bank-panel.station-panel .bank-slot {
        width: 100%;
        min-width: 0;
        aspect-ratio: 1;
        height: auto;
    }

    .bank-panel.station-panel .bank-selection-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        margin: 6px 0 8px;
        padding: 8px;
    }

    .bank-panel.station-panel .bank-selection-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .bank-panel.station-panel .bank-selection-icon img {
        width: 24px;
        height: 24px;
    }

    .bank-panel.station-panel .bank-selection-name {
        font-size: 11px;
        letter-spacing: 0;
    }

    .bank-panel.station-panel .bank-selection-meta,
    .bank-panel.station-panel .bank-selection-empty {
        font-size: 9px;
        letter-spacing: 0;
    }

    .bank-panel.station-panel .bank-selection-controls {
        grid-template-columns: minmax(58px, 0.9fr) repeat(3, minmax(42px, 0.62fr)) minmax(86px, 1.2fr);
        gap: 4px;
    }

    .bank-panel.station-panel .bank-item-amount,
    .bank-panel.station-panel .bank-selected-action {
        min-height: 38px;
        font-size: 11px;
    }

    .bank-panel.station-panel .bank-slot-img {
        width: min(24px, 64%);
        height: min(24px, 64%);
    }

    .bank-panel.station-panel .bank-section-label {
        margin-bottom: 5px;
    }

    .bank-panel.station-panel .btn-bank-xs {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 6px 8px;
        white-space: normal;
        line-height: 1.05;
    }

    .bank-panel.station-panel .bank-hint {
        margin-top: 8px;
    }
}

@media (max-width: 768px) and (orientation: landscape) and (max-height: 520px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    #minimap-canvas {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        right: 60px !important;
    }

    .orbryn-universal-close {
        top: calc(8px + env(safe-area-inset-top, 0px));
        right: calc(8px + env(safe-area-inset-right, 0px));
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .orbryn-universal-close-x {
        font-size: 28px;
    }

    .orbryn-universal-close-text {
        font-size: 8px;
    }

    .bank-panel.station-panel {
        width: min(520px, calc(100vw - 120px)) !important;
    }

    .bank-panel.station-panel > :not(.station-header) {
        margin-right: 10px;
        margin-left: 10px;
    }

    .bank-panel.station-panel > .station-header + * {
        margin-top: 8px;
    }

    .bank-panel.station-panel .station-title {
        font-size: 14px;
    }

    .bank-panel.station-panel .station-eyebrow,
    .bank-panel.station-panel .bank-label,
    .bank-panel.station-panel .bank-section-label,
    .bank-panel.station-panel .bank-hint {
        font-size: 9px;
    }

    .bank-panel.station-panel .station-close-btn {
        width: 40px !important;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .bank-panel.station-panel .bank-orb-section {
        grid-template-columns: 0.9fr 0.9fr 1.2fr;
        align-items: stretch;
        gap: 5px;
    }

    .bank-panel.station-panel .bank-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .bank-panel.station-panel .bank-orb-amount {
        grid-column: 3;
        grid-row: 1;
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 0;
    }

    .bank-panel.station-panel .bank-orb-actions {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .bank-panel.station-panel .bank-quick-amounts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bank-panel.station-panel .bank-orb-input {
        width: 100%;
    }

    .bank-panel.station-panel .btn-bank,
    .bank-panel.station-panel .btn-bank-quick {
        min-height: 38px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .bank-panel.station-panel .bank-grid {
        grid-template-columns: repeat(8, minmax(34px, 1fr));
        max-height: 150px;
    }

    .bank-panel.station-panel .bank-inv-grid {
        grid-template-columns: repeat(8, minmax(34px, 1fr));
        max-height: 92px;
    }

    .bank-panel.station-panel .bank-selection-detail {
        grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.25fr);
        padding: 7px;
    }

    .bank-panel.station-panel .bank-selection-controls {
        grid-template-columns: minmax(54px, 0.8fr) repeat(3, minmax(38px, 0.55fr)) minmax(82px, 1fr);
    }

    .handcraft-panel.station-panel .handcraft-body {
        grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.1fr);
    }

    .handcraft-panel.station-panel .handcraft-items,
    .handcraft-panel.station-panel .handcraft-col-detail {
        max-height: 132px;
    }
}

/* ===== Keeper focus overlay ===== */
.keeper-focus-overlay {
    position: fixed;
    left: 16px;
    bottom: 16px;
    max-width: 380px;
    padding: 10px 14px;
    background: rgba(10, 14, 26, 0.78);
    border: 1px solid rgba(120, 200, 255, 0.25);
    border-radius: 8px;
    color: #cfe8ff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 50;
}
.keeper-focus-overlay__name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #eaf6ff;
    letter-spacing: 0.02em;
}
.keeper-focus-overlay__stats,
.keeper-focus-overlay__currency,
.keeper-focus-overlay__skills {
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
    color: #cfe8ff;
}
.keeper-focus-overlay__skills {
    margin-top: 4px;
    font-size: 11px;
    color: #a4c5d8;
}

/* ================================================================
   ALMANAC — Drop Tables, Highscores & Guides (main-menu sections)
   Read-only player-facing reference UI. Scoped under #start-screen.
   ================================================================ */

/* --- Left-rail nav group (desktop) / hidden in mobile bottom grid --- */
#start-screen[data-mm] .mm-nav-almanac-label {
    display: none;
}
#start-screen[data-mm].mm-desktop .mm-nav-almanac-label {
    display: block;
    width: calc(100% - 14px);
    margin: 10px auto 2px;
    padding-top: 10px;
    border-top: 1px solid var(--o-line);
    color: rgba(242, 240, 234, 0.42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}
#start-screen[data-mm]:not(.mm-desktop) .mm-nav-almanac,
#start-screen[data-mm]:not(.mm-desktop) .mm-nav-almanac-label {
    display: none;
}

/* Inline drawer glyphs for the Almanac drawer entries (mobile access) */
#start-screen[data-mm] .mm-drawer-glyph {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--o-cyan);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
}
#start-screen[data-mm] .mm-drawer-glyph [data-muted] {
    opacity: 0.55;
}

/* --- Shared shell + primitives --- */
#start-screen[data-mm] .alm-mount {
    width: 100%;
}
#start-screen[data-mm] .alm-loading {
    padding: 48px 18px;
    color: rgba(242, 240, 234, 0.5);
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.04em;
}
#start-screen[data-mm] .alm-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4px 0 28px;
    color: var(--o-text);
    font-family: var(--o-sans);
}
#start-screen[data-mm] .alm-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
#start-screen[data-mm] .alm-kicker {
    display: block;
    color: var(--o-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
}
#start-screen[data-mm] .alm-title {
    margin: 4px 0 2px;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 900;
    letter-spacing: 0.01em;
}
#start-screen[data-mm] .alm-sub {
    margin: 0;
    max-width: 60ch;
    color: rgba(242, 240, 234, 0.6);
    font-size: 13px;
    line-height: 1.45;
}
#start-screen[data-mm] .alm-search {
    flex: 0 1 320px;
    min-width: 200px;
}
#start-screen[data-mm] .alm-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--o-line-strong);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--o-text);
    font-size: 14px;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
#start-screen[data-mm] .alm-search-input:focus {
    border-color: var(--o-cyan-line);
    box-shadow: 0 0 0 3px var(--o-cyan-dim);
}
#start-screen[data-mm] .alm-search-input::placeholder {
    color: rgba(242, 240, 234, 0.4);
}
#start-screen[data-mm] .alm-btn {
    padding: 9px 16px;
    border: 1px solid var(--o-cyan-line);
    border-radius: 9px;
    background: var(--o-cyan-dim);
    color: var(--o-cyan-hi);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
#start-screen[data-mm] .alm-btn:hover:not(:disabled) {
    background: rgba(0, 217, 255, 0.22);
}
#start-screen[data-mm] .alm-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
#start-screen[data-mm] .alm-btn-sm {
    padding: 6px 12px;
    font-size: 11px;
}
#start-screen[data-mm] .alm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 20px;
    text-align: center;
}
#start-screen[data-mm] .alm-empty-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--o-text);
}
#start-screen[data-mm] .alm-empty-sub {
    margin: 0;
    max-width: 44ch;
    color: rgba(242, 240, 234, 0.55);
    font-size: 13px;
    line-height: 1.5;
}
#start-screen[data-mm] .alm-error .alm-empty-title {
    color: var(--o-warn);
}
#start-screen[data-mm] .alm-rarity-pill {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    line-height: 1.5;
}
#start-screen[data-mm] .alm-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
#start-screen[data-mm] .alm-badge-boss {
    background: rgba(255, 106, 61, 0.16);
    color: var(--o-warn);
    border: 1px solid rgba(255, 106, 61, 0.4);
}
#start-screen[data-mm] .alm-badge-mob {
    background: rgba(0, 217, 255, 0.12);
    color: var(--o-cyan-hi);
    border: 1px solid var(--o-cyan-line);
}
#start-screen[data-mm] .alm-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    vertical-align: middle;
}
#start-screen[data-mm] .alm-dot-on {
    background: var(--o-online);
    box-shadow: 0 0 6px var(--o-online);
}

/* Loading skeleton */
#start-screen[data-mm] .alm-skel { display: flex; flex-direction: column; gap: 8px; }
#start-screen[data-mm] .alm-skel-head,
#start-screen[data-mm] .alm-skel-row {
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    background-size: 200% 100%;
    animation: almShimmer 1.2s ease-in-out infinite;
}
#start-screen[data-mm] .alm-skel-head { height: 30px; width: 40%; }
@keyframes almShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Drop Tables --- */
#start-screen[data-mm] .alm-dt-body {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
#start-screen[data-mm] .alm-dt-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 4px;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    padding-right: 4px;
}
#start-screen[data-mm] .alm-dt-group-head {
    margin-bottom: 6px;
    color: var(--o-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
}
#start-screen[data-mm] .alm-dt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    padding: 9px 11px;
    border: 1px solid var(--o-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.015);
    color: var(--o-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
#start-screen[data-mm] .alm-dt-row:hover {
    border-color: var(--o-cyan-line);
    background: var(--o-cyan-dim);
}
#start-screen[data-mm] .alm-dt-row-active {
    border-color: var(--o-cyan-line);
    background: rgba(0, 217, 255, 0.1);
}
#start-screen[data-mm] .alm-dt-row-name { font-weight: 600; }
#start-screen[data-mm] .alm-dt-detail {
    border: 1px solid var(--o-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
    padding: 18px 20px;
    min-height: 200px;
}
#start-screen[data-mm] .alm-dt-detail-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--o-line);
}
#start-screen[data-mm] .alm-dt-detail-name {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
}
#start-screen[data-mm] .alm-dt-detail-meta {
    margin-top: 4px;
    color: rgba(242, 240, 234, 0.55);
    font-size: 12px;
}
#start-screen[data-mm] .alm-dt-tier { margin-bottom: 18px; }
#start-screen[data-mm] .alm-dt-tier-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#start-screen[data-mm] .alm-dt-tier-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
#start-screen[data-mm] .alm-dt-tier-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(125, 255, 156, 0.14);
    border: 1px solid rgba(125, 255, 156, 0.4);
    color: var(--o-online);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#start-screen[data-mm] .alm-dt-tier-chance {
    margin-left: auto;
    color: rgba(242, 240, 234, 0.5);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
#start-screen[data-mm] .alm-dt-table {
    border: 1px solid var(--o-line);
    border-radius: 10px;
    overflow: hidden;
}
#start-screen[data-mm] .alm-dt-thead,
#start-screen[data-mm] .alm-dt-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 92px 78px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
#start-screen[data-mm] .alm-dt-thead {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(242, 240, 234, 0.5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#start-screen[data-mm] .alm-dt-item {
    border-top: 1px solid var(--o-line-soft);
    font-size: 13px;
}
#start-screen[data-mm] .alm-dt-item-main {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
#start-screen[data-mm] .alm-dt-item-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
}
#start-screen[data-mm] .alm-dt-item-icon-abbr,
#start-screen[data-mm] .alm-dt-item-icon-none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: rgba(242, 240, 234, 0.55);
}
#start-screen[data-mm] .alm-dt-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#start-screen[data-mm] .alm-dt-item-qty,
#start-screen[data-mm] .alm-dt-item-chance {
    font-variant-numeric: tabular-nums;
    color: rgba(242, 240, 234, 0.85);
}
#start-screen[data-mm] .alm-dt-item-nothing { opacity: 0.55; }
#start-screen[data-mm] .alm-dt-foot {
    margin: 14px 0 0;
    color: rgba(242, 240, 234, 0.4);
    font-size: 11px;
    font-style: italic;
}

/* --- Monsters --- */
#start-screen[data-mm] .alm-mon-row-meta {
    margin-left: auto;
    color: rgba(242, 240, 234, 0.52);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#start-screen[data-mm] .alm-mon-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
#start-screen[data-mm] .alm-mon-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--o-line-soft);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}
#start-screen[data-mm] .alm-mon-stat span {
    color: rgba(242, 240, 234, 0.5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#start-screen[data-mm] .alm-mon-stat strong {
    color: var(--o-text);
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
#start-screen[data-mm] .alm-mon-section { margin-top: 18px; }
#start-screen[data-mm] .alm-mon-section h4 {
    margin: 0 0 9px;
    color: var(--o-cyan-hi);
    font-size: 13px;
}
#start-screen[data-mm] .alm-mon-weak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
#start-screen[data-mm] .alm-mon-weak {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--o-line-soft);
    border-radius: 10px;
    background: rgba(0, 217, 255, 0.035);
}
#start-screen[data-mm] .alm-mon-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--o-cyan-line);
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.1);
    color: var(--o-cyan-hi);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
#start-screen[data-mm] .alm-mon-weak strong {
    display: block;
    margin-top: 7px;
    color: var(--o-text);
    font-size: 12px;
    overflow-wrap: anywhere;
}
#start-screen[data-mm] .alm-mon-weak p {
    margin: 5px 0 0;
    color: rgba(242, 240, 234, 0.64);
    font-size: 12px;
    line-height: 1.45;
}
#start-screen[data-mm] .alm-mon-tips {
    margin: 0;
    padding-left: 18px;
    color: rgba(242, 240, 234, 0.76);
    font-size: 13px;
    line-height: 1.55;
}
#start-screen[data-mm] .alm-mon-tips li { margin-bottom: 5px; }

/* --- Highscores --- */
#start-screen[data-mm] .alm-hs-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 14px;
    align-items: stretch;
}
#start-screen[data-mm] .alm-hs-community {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--o-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
}
#start-screen[data-mm] .alm-hs-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#start-screen[data-mm] .alm-hs-stat strong {
    display: block;
    min-width: 0;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
#start-screen[data-mm] .alm-hs-stat span {
    color: rgba(242, 240, 234, 0.5);
    font-size: 11px;
}
#start-screen[data-mm] .alm-hs-source {
    margin-left: 4px;
    color: var(--o-warn);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
#start-screen[data-mm] .alm-hs-you {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--o-cyan-line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0,217,255,0.08), rgba(0,217,255,0.02));
    color: var(--o-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
#start-screen[data-mm] button.alm-hs-you:hover {
    background: linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.04));
}
#start-screen[data-mm] .alm-hs-you-empty {
    cursor: default;
    border-color: var(--o-line);
    background: rgba(255, 255, 255, 0.018);
}
#start-screen[data-mm] .alm-hs-you-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#start-screen[data-mm] .alm-hs-you-title {
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#start-screen[data-mm] .alm-hs-you-rank {
    color: var(--o-cyan-hi);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
#start-screen[data-mm] .alm-hs-you-sub {
    margin: 0;
    color: rgba(242, 240, 234, 0.5);
    font-size: 12px;
}
#start-screen[data-mm] .alm-hs-you-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
#start-screen[data-mm] .alm-hs-you-grid div {
    display: flex;
    flex-direction: column;
}
#start-screen[data-mm] .alm-hs-you-grid strong {
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
#start-screen[data-mm] .alm-hs-you-grid span {
    color: rgba(242, 240, 234, 0.5);
    font-size: 10px;
}
#start-screen[data-mm] .alm-cmp {
    font-style: normal;
    font-weight: 800;
}
#start-screen[data-mm] .alm-cmp-up { color: var(--o-online); }
#start-screen[data-mm] .alm-cmp-down { color: var(--o-danger); }
#start-screen[data-mm] .alm-cmp-even { color: rgba(242, 240, 234, 0.45); }

#start-screen[data-mm] .alm-hs-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
#start-screen[data-mm] .alm-hs-cats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
#start-screen[data-mm] .alm-hs-cat {
    padding: 6px 12px;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.015);
    color: rgba(242, 240, 234, 0.7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
#start-screen[data-mm] .alm-hs-cat:hover {
    border-color: var(--o-cyan-line);
    color: var(--o-text);
}
#start-screen[data-mm] .alm-hs-cat-active {
    border-color: var(--o-cyan-line);
    background: var(--o-cyan-dim);
    color: var(--o-cyan-hi);
}
#start-screen[data-mm] .alm-hs-cat-divider {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--o-line-strong);
}
#start-screen[data-mm] .alm-hs-searchwrap { flex: 0 1 240px; min-width: 170px; }

#start-screen[data-mm] .alm-hs-detail-card {
    position: relative;
    margin-bottom: 4px;
    padding: 16px 18px;
    border: 1px solid var(--o-cyan-line);
    border-radius: 14px;
    background: rgba(0, 217, 255, 0.04);
}
#start-screen[data-mm] .alm-hs-detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--o-line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--o-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
#start-screen[data-mm] .alm-hs-detail-close:hover { border-color: var(--o-cyan-line); }
#start-screen[data-mm] .alm-hs-detail-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-right: 36px;
}
#start-screen[data-mm] .alm-hs-detail-name { font-size: 18px; font-weight: 900; }
#start-screen[data-mm] .alm-hs-detail-rank { color: var(--o-cyan-hi); font-weight: 800; font-size: 13px; }
#start-screen[data-mm] .alm-hs-detail-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
#start-screen[data-mm] .alm-hs-detail-top div { display: flex; flex-direction: column; }
#start-screen[data-mm] .alm-hs-detail-top strong { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
#start-screen[data-mm] .alm-hs-detail-top span { color: rgba(242, 240, 234, 0.5); font-size: 11px; }
#start-screen[data-mm] .alm-hs-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
#start-screen[data-mm] .alm-hs-skill {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--o-line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
    font-size: 12px;
}
#start-screen[data-mm] .alm-hs-skill-name { color: rgba(242, 240, 234, 0.7); }
#start-screen[data-mm] .alm-hs-skill-lvl { font-weight: 900; font-variant-numeric: tabular-nums; }
#start-screen[data-mm] .alm-hs-skill-rank { color: var(--o-cyan); font-size: 10px; font-variant-numeric: tabular-nums; }

#start-screen[data-mm] .alm-hs-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
#start-screen[data-mm] .alm-hs-board-title { font-size: 14px; font-weight: 800; }
#start-screen[data-mm] .alm-hs-board-count { color: rgba(242, 240, 234, 0.5); font-size: 12px; }
#start-screen[data-mm] .alm-hs-trunc { color: var(--o-warn); opacity: 0.85; }
#start-screen[data-mm] .alm-hs-table {
    border: 1px solid var(--o-line);
    border-radius: 12px;
    overflow: hidden;
}
#start-screen[data-mm] .alm-hs-thead,
#start-screen[data-mm] .alm-hs-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 96px 70px 56px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    text-align: left;
}
#start-screen[data-mm] .alm-hs-thead {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(242, 240, 234, 0.5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#start-screen[data-mm] .alm-hs-row {
    width: 100%;
    border-top: 1px solid var(--o-line-soft);
    background: transparent;
    color: var(--o-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 110ms ease;
}
#start-screen[data-mm] .alm-hs-row:hover { background: var(--o-cyan-dim); }
#start-screen[data-mm] .alm-hs-row-me {
    background: rgba(0, 217, 255, 0.07);
    box-shadow: inset 3px 0 0 var(--o-cyan);
}
#start-screen[data-mm] .alm-hs-row-sel { background: rgba(0, 217, 255, 0.12); }
#start-screen[data-mm] .alm-hs-col-rank { font-weight: 900; color: var(--o-cyan-hi); font-variant-numeric: tabular-nums; }
#start-screen[data-mm] .alm-hs-col-name {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
#start-screen[data-mm] .alm-hs-col-val { font-weight: 800; font-variant-numeric: tabular-nums; }
#start-screen[data-mm] .alm-hs-col-sub { color: rgba(242, 240, 234, 0.55); font-size: 12px; font-variant-numeric: tabular-nums; }
#start-screen[data-mm] .alm-hs-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}
#start-screen[data-mm] .alm-hs-pager-label { color: rgba(242, 240, 234, 0.6); font-size: 12px; }

/* --- Guides --- */
#start-screen[data-mm] .alm-guides-body {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
#start-screen[data-mm] .alm-guides-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 4px;
}
#start-screen[data-mm] .alm-guides-navitem {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--o-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.015);
    color: var(--o-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
#start-screen[data-mm] .alm-guides-navitem:hover { border-color: var(--o-cyan-line); background: var(--o-cyan-dim); }
#start-screen[data-mm] .alm-guides-navitem-active {
    border-color: var(--o-cyan-line);
    background: rgba(0, 217, 255, 0.1);
}
#start-screen[data-mm] .alm-guides-glyph {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 217, 255, 0.1);
    color: var(--o-cyan-hi);
    font-size: 16px;
}
#start-screen[data-mm] .alm-guides-navcopy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#start-screen[data-mm] .alm-guides-navtitle { font-size: 13px; font-weight: 800; }
#start-screen[data-mm] .alm-guides-navblurb {
    color: rgba(242, 240, 234, 0.5);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#start-screen[data-mm] .alm-guides-navcount {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(242, 240, 234, 0.6);
    font-size: 11px;
    font-weight: 800;
}
#start-screen[data-mm] .alm-guides-content { min-width: 0; }
#start-screen[data-mm] .alm-guides-cat-head { margin-bottom: 12px; }
#start-screen[data-mm] .alm-guides-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 900;
}
#start-screen[data-mm] .alm-guides-cat-blurb { margin: 0; color: rgba(242, 240, 234, 0.55); font-size: 13px; }
#start-screen[data-mm] .alm-guides-results-head {
    margin-bottom: 10px;
    color: var(--o-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
#start-screen[data-mm] .alm-guides-article {
    margin-bottom: 10px;
    border: 1px solid var(--o-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
    overflow: hidden;
}
#start-screen[data-mm] .alm-guides-article[open] { border-color: var(--o-cyan-line); }
#start-screen[data-mm] .alm-guides-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
#start-screen[data-mm] .alm-guides-summary::-webkit-details-marker { display: none; }
#start-screen[data-mm] .alm-guides-summary-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#start-screen[data-mm] .alm-guides-article-title { font-size: 14px; font-weight: 800; }
#start-screen[data-mm] .alm-guides-article-summary { color: rgba(242, 240, 234, 0.55); font-size: 12px; }
#start-screen[data-mm] .alm-guides-tag {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.12);
    border: 1px solid var(--o-cyan-line);
    color: var(--o-cyan-hi);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
#start-screen[data-mm] .alm-guides-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--o-cyan);
    border-bottom: 2px solid var(--o-cyan);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}
#start-screen[data-mm] .alm-guides-article[open] .alm-guides-chevron { transform: rotate(225deg); }
#start-screen[data-mm] .alm-guides-sections {
    padding: 0 16px 16px;
    border-top: 1px solid var(--o-line-soft);
}
#start-screen[data-mm] .alm-guides-section { margin-top: 14px; }
#start-screen[data-mm] .alm-guides-section-head {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--o-cyan-hi);
}
#start-screen[data-mm] .alm-guides-body-text {
    margin: 0;
    color: rgba(242, 240, 234, 0.78);
    font-size: 13px;
    line-height: 1.55;
}
#start-screen[data-mm] .alm-guides-bullets {
    margin: 6px 0 0;
    padding-left: 18px;
    color: rgba(242, 240, 234, 0.78);
    font-size: 13px;
    line-height: 1.6;
}
#start-screen[data-mm] .alm-guides-bullets li { margin-bottom: 3px; }

/* --- Almanac responsive (stack on narrow / mobile) --- */
@media (max-width: 860px) {
    #start-screen[data-mm] .alm-dt-body,
    #start-screen[data-mm] .alm-hs-summary,
    #start-screen[data-mm] .alm-guides-body {
        grid-template-columns: 1fr;
    }
    #start-screen[data-mm] .alm-dt-list,
    #start-screen[data-mm] .alm-guides-nav {
        position: static;
        max-height: none;
    }
    #start-screen[data-mm] .alm-guides-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    #start-screen[data-mm] .alm-guides-navitem { flex: 1 1 160px; }
    #start-screen[data-mm] .alm-hs-thead,
    #start-screen[data-mm] .alm-hs-row {
        grid-template-columns: 44px minmax(0, 1fr) 80px;
    }
    #start-screen[data-mm] .alm-hs-thead span:nth-child(4),
    #start-screen[data-mm] .alm-hs-thead span:nth-child(5),
    #start-screen[data-mm] .alm-hs-col-sub {
        display: none;
    }
    #start-screen[data-mm] .alm-dt-thead,
    #start-screen[data-mm] .alm-dt-item {
        grid-template-columns: minmax(0, 1fr) 64px 76px;
    }
    #start-screen[data-mm] .alm-dt-thead span:nth-child(3),
    #start-screen[data-mm] .alm-dt-item-rarity {
        display: none;
    }
    #start-screen[data-mm] .alm-mon-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #start-screen[data-mm] .alm-mon-weak-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    #start-screen[data-mm] .alm-mon-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Intro Cutscene (one-time post-character-creation cinematic)
   ================================================================ */

#intro-cutscene {
    position: fixed;
    inset: 0;
    z-index: 145; /* above HUD, below the loading screen (150) */
    /* Transparent: the cinematic renders on the game's own canvas underneath
       (one shared WebGL context -- iOS evicts extras). */
    background: transparent;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

/* Dome-approach phase: the real world renders underneath; keep only the
   letterbox bars, subtitles and skip button. */
#intro-cutscene.intro-cutscene-world-phase {
    pointer-events: none;
}

.intro-cutscene-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 9vh;
    background: #000;
    transition: transform 0.9s ease;
    z-index: 3;
}

.intro-cutscene-bar-top { top: 0; }
.intro-cutscene-bar-bottom { bottom: 0; }

#intro-cutscene.intro-cutscene-ending .intro-cutscene-bar-top { transform: translateY(-100%); }
#intro-cutscene.intro-cutscene-ending .intro-cutscene-bar-bottom { transform: translateY(100%); }

.intro-cutscene-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 4;
}

.intro-cutscene-flash.intro-cutscene-flash-on { opacity: 1; }

.intro-cutscene-fade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 5;
}

.intro-cutscene-fade.intro-cutscene-fade-on { opacity: 1; }

.intro-cutscene-subtitle {
    position: absolute;
    left: 50%;
    bottom: calc(9vh + 26px);
    transform: translateX(-50%);
    max-width: min(720px, 84vw);
    padding: 10px 18px;
    background: rgba(4, 10, 20, 0.72);
    border: 1px solid rgba(100, 180, 255, 0.35);
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 6;
}

.intro-cutscene-subtitle.visible { opacity: 1; }

.intro-cutscene-speaker {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 3px;
    color: #64b4ff;
    text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
}

.intro-cutscene-line {
    display: block;
    font-size: 15px;
    line-height: 1.45;
    color: #e8f4ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.intro-cutscene-skip {
    position: absolute;
    right: 22px;
    bottom: calc(9vh + 18px);
    padding: 8px 16px;
    background: rgba(6, 14, 30, 0.85);
    border: 1px solid rgba(100, 180, 255, 0.4);
    border-radius: 6px;
    color: #9fd2ff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, background 0.2s ease;
    z-index: 7;
}

.intro-cutscene-skip.visible {
    opacity: 1;
    pointer-events: auto;
}

.intro-cutscene-skip:hover {
    background: rgba(16, 34, 60, 0.95);
    border-color: rgba(140, 210, 255, 0.7);
}

/* Hide gameplay chrome while the cinematic runs */
body.intro-cutscene-active #hud,
body.intro-cutscene-active #mobile-controls,
body.intro-cutscene-active #chat-panel,
body.intro-cutscene-active #voss-tracker-label {
    display: none !important;
}

@media (max-width: 640px) {
    .intro-cutscene-line { font-size: 13px; }
    .intro-cutscene-subtitle { bottom: calc(9vh + 16px); padding: 8px 12px; }
    .intro-cutscene-skip { right: 12px; bottom: calc(9vh + 12px); }
}

/* Mobile: the survivor-body grid must scroll from a touch that starts on an
   option card or its WebGL preview canvas -- taps still select. */
#create-screen .create-character-options {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

#create-screen .create-character-option,
#create-screen .create-character-canvas {
    touch-action: pan-y;
}

/* ===== Battle Royale (Domefall) ===== */
/* .brm-* namespace only — the --br-* custom-property namespace is taken. */

/* BR HUD layer — top-center, below existing HUD offsets */
.brm-hud {
    position: absolute;
    top: calc(var(--orbryn-hud-top-offset, 24px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    font-family: var(--o-mono, 'Courier New', monospace);
    color: var(--o-text, #f0efec);
    text-align: center;
}

.brm-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border: 1px solid var(--o-line, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    background: rgba(5, 5, 7, 0.62);
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.brm-pill {
    color: var(--o-cyan, #00d9ff);
    font-weight: 700;
    text-shadow: 0 0 10px var(--o-cyan-dim, rgba(0, 217, 255, 0.14));
}

.brm-phase {
    color: var(--o-text, #f0efec);
    font-weight: 700;
}

.brm-countdown {
    color: var(--o-cyan-hi, #8ff0ff);
    min-width: 44px;
}

.brm-alive {
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
}

/* Per-phase objective hint — small muted line under the top line */
.brm-objective {
    padding: 1px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
    text-shadow: 0 1px 3px rgba(5, 5, 7, 0.85);
    white-space: nowrap;
}

.brm-zoneline,
.brm-gateline {
    padding: 2px 10px;
    border: 1px solid var(--o-line, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    background: rgba(5, 5, 7, 0.55);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
    white-space: nowrap;
}

.brm-zoneline--shrinking {
    color: #ff5566;
    border-color: rgba(255, 85, 102, 0.45);
    animation: brm-pulse 1s ease-in-out infinite;
}

@keyframes brm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.brm-coreline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    border: 1px solid var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    border-radius: 4px;
    background: rgba(5, 5, 7, 0.62);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--o-cyan, #00d9ff);
    white-space: nowrap;
}

/* Authored display rules above would silently defeat the hidden attribute
   (the CORE bar was visible from match start because of exactly this) —
   force it for every gated BR HUD line. */
.brm-zoneline[hidden],
.brm-gateline[hidden],
.brm-coreline[hidden],
.brm-objective[hidden] {
    display: none !important;
}

/* One-time HOW TO WIN onboarding card after first touchdown. */
.brm-howtowin {
    position: absolute;
    top: 108px;
    left: 50%;
    z-index: 45;
    transform: translateX(-50%) translateY(-8px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 380px;
    padding: 12px 18px;
    border: 1px solid var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    border-radius: 6px;
    background: rgba(5, 5, 7, 0.72);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(235, 245, 250, 0.92);
}

.brm-howtowin--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.brm-howtowin-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(255, 213, 128, 0.9);
}

.brm-howtowin-row strong {
    color: var(--o-cyan, #00d9ff);
}

@media (max-width: 700px) {
    .brm-howtowin {
        top: 92px;
        max-width: 86vw;
        font-size: 11px;
        padding: 10px 12px;
    }
}

.brm-core-bar {
    width: 110px;
    height: 5px;
    border-radius: 3px;
    background: var(--o-line, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}

.brm-core-fill {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    background: var(--o-cyan, #00d9ff);
    box-shadow: 0 0 8px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    transition: width 200ms linear;
}

/* Deploy vignette — full-screen fade shown on the drop teleport */
.brm-vignette {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(5, 5, 7, 0.35) 35%, rgba(5, 5, 7, 0.96) 100%);
    animation: brm-vignette-fade 2.5s ease forwards;
}

.brm-vignette-label {
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--o-cyan, #00d9ff);
    text-shadow: 0 0 24px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
}

@keyframes brm-vignette-fade {
    0% { opacity: 1; }
    65% { opacity: 1; }
    100% { opacity: 0; }
}

/* Results overlay — fullscreen match summary */
.brm-results {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: rgba(5, 5, 7, 0.78);
}

.brm-results-card {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 48px);
    overflow-y: auto;
    padding: 24px 28px;
    border: 1px solid var(--o-line-strong, rgba(255, 255, 255, 0.18));
    border-radius: var(--mm-radius-lg, 16px);
    background: var(--mm-bg-card, rgba(18, 15, 38, 0.85));
    font-family: var(--o-mono, 'Courier New', monospace);
    color: var(--o-text, #f0efec);
    text-align: center;
}

.brm-results-headline {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.brm-results-headline--victory {
    color: var(--o-cyan, #00d9ff);
    text-shadow: 0 0 28px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
}

.brm-results-headline--defeat {
    color: #ff5566;
    text-shadow: 0 0 22px rgba(255, 85, 102, 0.35);
}

.brm-results-sub {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
}

.brm-results-table {
    width: 100%;
    margin: 18px 0 6px;
    border-collapse: collapse;
    font-size: 12px;
}

.brm-results-table th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--o-line-strong, rgba(255, 255, 255, 0.18));
    color: var(--o-text-3, rgba(240, 239, 236, 0.38));
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
}

.brm-results-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--o-line-soft, rgba(255, 255, 255, 0.04));
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
    text-align: left;
}

.brm-results-row--local td {
    color: var(--o-cyan, #00d9ff);
    font-weight: 700;
}

.brm-results-next {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
}

.brm-results-leave {
    margin-top: 14px;
    padding: 10px 26px;
    border: 1px solid var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    border-radius: 5px;
    background: var(--o-cyan-dim, rgba(0, 217, 255, 0.14));
    color: var(--o-cyan, #00d9ff);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.brm-results-leave:hover,
.brm-results-leave:focus-visible {
    background: rgba(0, 217, 255, 0.26);
    box-shadow: 0 0 18px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
}

/* Main-menu Battle Royale / Duel entry buttons */
#start-screen[data-mm] .mm-mode-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 14px 0 18px;
}

#start-screen[data-mm] #mm-br-button[hidden] {
    display: none !important;
}

#start-screen[data-mm] #mm-br-button,
#start-screen[data-mm] #mm-duel-button,
#start-screen[data-mm] #mm-practice-duel-button {
    position: relative;
    z-index: 4;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 62px;
    padding: 9px 24px;
    border: 1px solid rgba(0, 217, 255, 0.55);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.16), rgba(124, 58, 237, 0.14) 55%, rgba(8, 10, 18, 0.82));
    color: var(--mm-text, rgba(240, 230, 255, 0.95));
    cursor: pointer;
    font-family: var(--o-sans, sans-serif);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
    animation: brm-button-pulse 2.6s ease-in-out infinite;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        color 120ms ease;
}

#start-screen[data-mm] #mm-br-button:hover,
#start-screen[data-mm] #mm-br-button:focus-visible,
#start-screen[data-mm] #mm-duel-button:hover,
#start-screen[data-mm] #mm-duel-button:focus-visible,
#start-screen[data-mm] #mm-practice-duel-button:hover,
#start-screen[data-mm] #mm-practice-duel-button:focus-visible {
    transform: translateY(-1px);
    border-color: var(--mm-accent, #7c3aed);
    color: var(--mm-text, rgba(240, 230, 255, 0.95));
    box-shadow: 0 0 22px var(--mm-accent-glow, rgba(124, 58, 237, 0.15));
}

#start-screen[data-mm] #mm-br-button:active,
#start-screen[data-mm] #mm-duel-button:active,
#start-screen[data-mm] #mm-practice-duel-button:active {
    transform: translateY(0);
}

#start-screen[data-mm] #mm-duel-button:disabled,
#start-screen[data-mm] #mm-practice-duel-button:disabled {
    cursor: default;
    opacity: 0.72;
    transform: none;
}

#start-screen[data-mm] #mm-practice-duel-button.is-confirming {
    border-color: rgba(255, 188, 74, 0.66);
    background:
        linear-gradient(135deg, rgba(34, 20, 8, 0.9), rgba(18, 12, 8, 0.92)),
        radial-gradient(circle at 80% 10%, rgba(255, 188, 74, 0.20), transparent 42%);
    color: rgba(255, 248, 225, 0.98);
    box-shadow:
        inset 0 0 0 1px rgba(255, 188, 74, 0.16),
        0 0 20px rgba(255, 188, 74, 0.16);
}

.mm-duel-entry {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
}

/* ORBRYN Lottery Machine */
.lottery-machine-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(87, 241, 255, 0.17), transparent 28%),
        rgba(2, 5, 9, 0.62);
    color: #f8fbff;
    font-family: var(--orb-ui-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.lottery-machine-panel {
    position: relative;
    width: min(980px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    border: 1px solid rgba(90, 241, 255, 0.42);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(7, 12, 19, 0.98), rgba(13, 17, 23, 0.96) 46%, rgba(23, 12, 24, 0.94)),
        rgba(5, 8, 13, 0.98);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.56),
        0 0 38px rgba(73, 219, 255, 0.2);
    padding: 18px;
}

.lottery-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font: 900 20px/1 var(--orb-ui-mono, "Courier New", monospace);
    cursor: pointer;
}

.lottery-hero {
    display: grid;
    gap: 8px;
    padding: 18px 44px 18px 18px;
    border: 1px solid rgba(255, 210, 94, 0.38);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 197, 66, 0.16), rgba(72, 231, 255, 0.1), rgba(255, 73, 205, 0.12)),
        rgba(255, 255, 255, 0.035);
}

.lottery-hero span,
.lottery-stats span,
.lottery-grid h3 {
    color: rgba(238, 246, 255, 0.72);
    font: 900 11px/1.2 var(--orb-ui-mono, "Courier New", monospace);
    letter-spacing: 0;
    text-transform: uppercase;
}

.lottery-hero strong {
    color: #ffe28a;
    font: 900 34px/1 var(--orb-ui-mono, "Courier New", monospace);
    text-shadow: 0 0 16px rgba(255, 204, 73, 0.42);
}

.lottery-hero em {
    color: #9df5ff;
    font-style: normal;
    font-size: 13px;
}

.lottery-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.lottery-stats div,
.lottery-grid section {
    min-width: 0;
    border: 1px solid rgba(126, 227, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.lottery-stats div {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.lottery-stats strong {
    color: #ffffff;
    font: 900 16px/1.1 var(--orb-ui-mono, "Courier New", monospace);
    overflow-wrap: anywhere;
}

.lottery-entry-form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 12px 0;
}

.lottery-entry-form label {
    display: grid;
    gap: 6px;
    color: rgba(238, 246, 255, 0.72);
    font: 900 11px/1.2 var(--orb-ui-mono, "Courier New", monospace);
    text-transform: uppercase;
}

.lottery-entry-form input {
    height: 42px;
    min-width: 0;
    border: 1px solid rgba(126, 227, 255, 0.28);
    border-radius: 8px;
    background: rgba(2, 5, 9, 0.8);
    color: #ffffff;
    padding: 0 12px;
    font: 900 15px/1 var(--orb-ui-mono, "Courier New", monospace);
}

.lottery-entry-form button,
.lottery-claim-row button {
    height: 42px;
    border: 1px solid rgba(255, 211, 99, 0.52);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 216, 106, 0.26), rgba(255, 173, 59, 0.14));
    color: #fff7d1;
    padding: 0 16px;
    font: 900 12px/1 var(--orb-ui-mono, "Courier New", monospace);
    cursor: pointer;
}

.lottery-entry-form button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.lottery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.lottery-grid section {
    padding: 12px;
}

.lottery-grid h3 {
    margin: 0 0 10px;
}

.lottery-list {
    display: grid;
    gap: 7px;
}

.lottery-entry-row,
.lottery-claim-row,
.lottery-winner-row,
.lottery-empty {
    display: grid;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 8px;
    border-radius: 7px;
    background: rgba(2, 5, 9, 0.48);
    color: rgba(248, 251, 255, 0.9);
    font-size: 12px;
}

.lottery-entry-row {
    grid-template-columns: 24px minmax(0, 1fr) auto 54px;
}

.lottery-claim-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.lottery-winner-row {
    grid-template-columns: minmax(0, 1fr) auto 48px;
}

.lottery-entry-row strong,
.lottery-claim-row strong,
.lottery-winner-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lottery-entry-row em,
.lottery-winner-row em,
.lottery-claim-row span {
    color: rgba(157, 245, 255, 0.75);
    font-style: normal;
}

@media (max-width: 760px) {
    .lottery-machine-overlay {
        align-items: stretch;
        padding: 10px;
    }

    .lottery-machine-panel {
        max-height: calc(100vh - 20px);
        padding: 12px;
    }

    .lottery-hero strong {
        font-size: 25px;
    }

    .lottery-stats,
    .lottery-grid,
    .lottery-entry-form {
        grid-template-columns: 1fr;
    }

    .lottery-claim-row,
    .lottery-winner-row {
        grid-template-columns: 1fr;
    }
}

/* ORBRYN Goal Voting Station */
.orbryn-voting-overlay {
    position: fixed;
    inset: 0;
    z-index: 2605;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at 62% 16%, rgba(77, 246, 210, 0.16), transparent 30%),
        radial-gradient(circle at 28% 84%, rgba(159, 118, 255, 0.14), transparent 34%),
        rgba(2, 5, 9, 0.66);
    color: #f7fbff;
    font-family: var(--orb-ui-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.orbryn-voting-panel {
    position: relative;
    width: min(1120px, 100%);
    max-height: min(90vh, 820px);
    overflow: auto;
    border: 1px solid rgba(81, 246, 218, 0.44);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(5, 12, 17, 0.98), rgba(12, 21, 29, 0.96) 48%, rgba(24, 16, 42, 0.94)),
        rgba(5, 8, 13, 0.98);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.58),
        0 0 40px rgba(80, 242, 216, 0.18);
    padding: 18px;
}

.orbryn-vote-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font: 900 22px/1 var(--orb-ui-mono, "Courier New", monospace);
    cursor: pointer;
}

.orbryn-vote-hero {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 18px 52px 18px 18px;
    border: 1px solid rgba(92, 248, 218, 0.38);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(74, 246, 214, 0.16), rgba(142, 104, 255, 0.12), rgba(255, 211, 96, 0.08)),
        rgba(255, 255, 255, 0.035);
}

.orbryn-vote-hero span,
.orbryn-vote-player span,
.orbryn-vote-card header span,
.orbryn-vote-results-head span {
    color: rgba(235, 247, 255, 0.72);
    font: 900 11px/1.2 var(--orb-ui-mono, "Courier New", monospace);
    letter-spacing: 0;
    text-transform: uppercase;
}

.orbryn-vote-hero strong {
    color: #65f6da;
    font: 900 32px/1.05 var(--orb-ui-mono, "Courier New", monospace);
    text-shadow: 0 0 16px rgba(74, 246, 214, 0.38);
    overflow-wrap: anywhere;
}

.orbryn-vote-hero em {
    color: #d7cbff;
    font-style: normal;
    font-size: 13px;
    line-height: 1.35;
}

.orbryn-vote-player {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.orbryn-vote-player div,
.orbryn-vote-card {
    min-width: 0;
    border: 1px solid rgba(126, 227, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.orbryn-vote-player div {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.orbryn-vote-player strong {
    color: #ffffff;
    font: 900 16px/1.15 var(--orb-ui-mono, "Courier New", monospace);
    overflow-wrap: anywhere;
}

.orbryn-vote-lock {
    margin-top: 10px;
    border: 1px solid rgba(255, 211, 96, 0.34);
    border-radius: 8px;
    background: rgba(255, 211, 96, 0.1);
    color: #fff2b8;
    padding: 12px;
    font-size: 14px;
    line-height: 1.35;
}

.orbryn-vote-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.orbryn-vote-card {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.orbryn-vote-card header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}

.orbryn-vote-card header div {
    min-width: 0;
}

.orbryn-vote-card h3 {
    margin: 4px 0 0;
    color: #f8fbff;
    font: 900 18px/1.15 var(--orb-ui-mono, "Courier New", monospace);
    overflow-wrap: anywhere;
}

.orbryn-vote-card header > strong {
    flex: 0 0 auto;
    min-width: 72px;
    border: 1px solid rgba(100, 246, 218, 0.34);
    border-radius: 8px;
    background: rgba(100, 246, 218, 0.08);
    color: #8dffe8;
    padding: 7px 9px;
    text-align: center;
    font: 900 11px/1 var(--orb-ui-mono, "Courier New", monospace);
    text-transform: uppercase;
}

.orbryn-vote-options {
    display: grid;
    gap: 8px;
}

.orbryn-vote-option {
    display: grid;
    gap: 5px;
    min-height: 66px;
    width: 100%;
    border: 1px solid rgba(126, 227, 255, 0.26);
    border-radius: 8px;
    background: rgba(2, 5, 9, 0.48);
    color: #f8fbff;
    padding: 12px;
    text-align: left;
    font-family: var(--orb-ui-font, Inter, system-ui, sans-serif);
    cursor: pointer;
}

.orbryn-vote-option strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
}

.orbryn-vote-option span {
    color: rgba(232, 242, 255, 0.74);
    font-size: 12px;
    line-height: 1.35;
}

.orbryn-vote-option em {
    color: #ffdf7f;
    font: 900 11px/1.2 var(--orb-ui-mono, "Courier New", monospace);
    font-style: normal;
    text-transform: uppercase;
}

.orbryn-vote-option:hover,
.orbryn-vote-option:focus-visible,
.orbryn-vote-option.gamepad-hover,
.orbryn-vote-close:hover,
.orbryn-vote-close:focus-visible,
.orbryn-vote-close.gamepad-hover {
    outline: 2px solid rgba(255, 223, 127, 0.86);
    outline-offset: 2px;
    border-color: rgba(255, 223, 127, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 223, 127, 0.12), 0 0 22px rgba(80, 242, 216, 0.18);
}

.orbryn-vote-option.is-selected {
    border-color: rgba(255, 223, 127, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 223, 127, 0.13), rgba(80, 242, 216, 0.08)),
        rgba(2, 5, 9, 0.56);
}

.orbryn-vote-option:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.orbryn-vote-option.is-selected:disabled {
    opacity: 1;
}

.orbryn-vote-results {
    display: grid;
    gap: 8px;
    border-top: 1px solid rgba(126, 227, 255, 0.18);
    padding-top: 10px;
}

.orbryn-vote-results-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.orbryn-vote-results-head em {
    color: rgba(215, 203, 255, 0.78);
    font: 900 11px/1.2 var(--orb-ui-mono, "Courier New", monospace);
    font-style: normal;
}

.orbryn-vote-result-empty {
    border-radius: 8px;
    background: rgba(2, 5, 9, 0.42);
    color: rgba(235, 247, 255, 0.72);
    padding: 10px;
    font-size: 12px;
    line-height: 1.3;
}

.orbryn-vote-result-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(2, 5, 9, 0.5);
    padding: 8px;
}

.orbryn-vote-result-row > * {
    position: relative;
    z-index: 1;
}

.orbryn-vote-result-row div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.orbryn-vote-result-row strong {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.orbryn-vote-result-row span {
    color: rgba(235, 247, 255, 0.68);
    font-size: 11px;
}

.orbryn-vote-result-row em {
    color: #65f6da;
    font: 900 12px/1 var(--orb-ui-mono, "Courier New", monospace);
    font-style: normal;
}

.orbryn-vote-result-row i {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    min-width: 2px;
    background: linear-gradient(90deg, rgba(80, 242, 216, 0.28), rgba(159, 118, 255, 0.2));
}

@media (max-width: 980px) {
    .orbryn-vote-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .orbryn-voting-overlay {
        align-items: stretch;
        padding: 10px;
    }

    .orbryn-voting-panel {
        max-height: calc(100vh - 20px);
        padding: 12px;
    }

    .orbryn-vote-hero strong {
        font-size: 25px;
    }

    .orbryn-vote-player,
    .orbryn-vote-card header {
        grid-template-columns: 1fr;
    }

    .orbryn-vote-player {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .orbryn-vote-player {
        grid-template-columns: 1fr;
    }

    .orbryn-vote-card header {
        display: grid;
    }

    .orbryn-vote-card header > strong {
        justify-self: start;
    }
}

/* ORBRYN Wager Matches navigation and lobby */
.mm-nav-section-label {
    display: none;
    padding: 10px 12px 4px;
    color: rgba(205, 220, 228, 0.55);
    font: 800 10px/1 var(--orb-ui-mono, 'Courier New', monospace);
    text-transform: uppercase;
    letter-spacing: 0;
}

.mm-nav-item,
.mm-nav-action {
    position: relative;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mm-nav-item::before,
.mm-nav-action::before {
    content: "";
    position: absolute;
    inset: 7px 10px auto 10px;
    height: 28px;
    border: 1px solid rgba(0, 217, 255, 0.18);
    border-radius: 8px;
    opacity: 0.72;
    pointer-events: none;
}

.mm-nav-item:hover,
.mm-nav-action:hover,
.mm-nav-item:focus-visible,
.mm-nav-action:focus-visible {
    transform: translateY(-1px);
    background: rgba(0, 217, 255, 0.08);
}

.mm-nav-item.mm-nav-active {
    border-color: rgba(0, 217, 255, 0.48);
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.18), rgba(0, 217, 255, 0.06));
    color: #f6fbff;
}

.mm-nav-wagers {
    --wager-gold: #e9b94f;
}

.mm-nav-wagers::before {
    border-color: rgba(233, 185, 79, 0.34);
}

.mm-nav-wagers.mm-nav-active {
    border-color: rgba(233, 185, 79, 0.62);
    background: linear-gradient(180deg, rgba(233, 185, 79, 0.22), rgba(83, 58, 16, 0.24));
}

.mm-nav-wagers .mm-nav-svg {
    color: #f4cf73;
}

.mm-nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid rgba(255, 230, 150, 0.78);
    border-radius: 9px;
    background: #d49a24;
    color: #140d05;
    font: 900 10px/16px var(--orb-ui-mono, 'Courier New', monospace);
    text-align: center;
}

.mm-nav-badge.is-active-wager {
    background: #ffdd7a;
    box-shadow: 0 0 16px rgba(255, 205, 90, 0.5);
}

.mm-player-status-panel {
    display: none;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 8px 10px;
    padding: 9px 10px;
    border: 1px solid rgba(233, 185, 79, 0.24);
    border-radius: 8px;
    background: rgba(11, 15, 20, 0.72);
    color: rgba(242, 236, 220, 0.9);
}

.mm-player-status-panel strong,
.mm-player-status-panel em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
    letter-spacing: 0;
}

.mm-player-status-panel strong {
    font: 900 11px/1.2 var(--orb-ui-mono, 'Courier New', monospace);
}

.mm-player-status-panel em {
    color: rgba(214, 225, 228, 0.68);
    font: 700 10px/1.3 var(--orb-ui-mono, 'Courier New', monospace);
}

.mm-player-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(116, 132, 142, 0.9);
    box-shadow: 0 0 0 3px rgba(116, 132, 142, 0.14);
}

.mm-player-status-dot.is-live {
    background: #f2c45b;
    box-shadow: 0 0 0 3px rgba(242, 196, 91, 0.2), 0 0 16px rgba(242, 196, 91, 0.45);
}

.wager-lobby {
    min-height: 100%;
}

.wager-shell {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.35fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 12px;
    padding: 14px;
}

.wager-panel {
    border: 1px solid rgba(233, 185, 79, 0.24);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.92), rgba(8, 11, 15, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 236, 170, 0.08);
    overflow: hidden;
}

.wager-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(233, 185, 79, 0.18);
    color: #f4d88a;
    font: 900 11px/1.2 var(--orb-ui-mono, 'Courier New', monospace);
    text-transform: uppercase;
}

.wager-panel-head strong {
    min-width: 0;
    color: rgba(232, 240, 242, 0.86);
    font-size: 10px;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wager-create-form,
.wager-chat-form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.wager-create-form label {
    display: grid;
    gap: 5px;
    color: rgba(227, 235, 237, 0.72);
    font: 800 10px/1.2 var(--orb-ui-mono, 'Courier New', monospace);
    text-transform: uppercase;
}

.wager-create-form input,
.wager-create-form select,
.wager-chat-form input {
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(233, 185, 79, 0.22);
    border-radius: 8px;
    background: rgba(4, 7, 11, 0.72);
    color: #f4f2e9;
    padding: 0 10px;
    font: 800 12px/1 var(--orb-ui-mono, 'Courier New', monospace);
}

.wager-checkbox {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.wager-create-form button,
.wager-chat-form button,
.wager-offer-actions button {
    min-height: 36px;
    border: 1px solid rgba(233, 185, 79, 0.5);
    border-radius: 8px;
    background: rgba(233, 185, 79, 0.16);
    color: #ffe6a0;
    font: 900 11px/1 var(--orb-ui-mono, 'Courier New', monospace);
    text-transform: uppercase;
    letter-spacing: 0;
}

.wager-offer-list,
.wager-chat-log,
.wager-board-list {
    display: grid;
    gap: 8px;
    max-height: 430px;
    overflow: auto;
    padding: 12px;
}

.wager-offer {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(115, 137, 148, 0.2);
    border-radius: 8px;
    background: rgba(7, 10, 14, 0.72);
}

.wager-offer.is-open {
    border-color: rgba(233, 185, 79, 0.38);
}

.wager-offer-main,
.wager-offer-meta,
.wager-offer-participants,
.wager-offer-actions,
.wager-board-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wager-offer-main {
    justify-content: space-between;
}

.wager-offer-main strong {
    color: #ffe29a;
    font: 900 16px/1.1 var(--orb-ui-mono, 'Courier New', monospace);
}

.wager-offer-main span,
.wager-offer-meta span,
.wager-pill,
.wager-chat-row,
.wager-board-row {
    min-width: 0;
    color: rgba(226, 235, 238, 0.78);
    font: 800 11px/1.35 var(--orb-ui-mono, 'Courier New', monospace);
}

.wager-offer-meta,
.wager-offer-participants {
    flex-wrap: wrap;
}

.wager-pill {
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid rgba(233, 185, 79, 0.22);
    border-radius: 999px;
    background: rgba(233, 185, 79, 0.08);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wager-pill.is-bot {
    border-color: rgba(104, 204, 255, 0.28);
    background: rgba(104, 204, 255, 0.08);
}

.wager-offer-actions {
    flex-wrap: wrap;
}

.wager-chat-row {
    display: grid;
    grid-template-columns: minmax(82px, 0.3fr) minmax(0, 1fr);
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.wager-chat-row span {
    overflow-wrap: anywhere;
}

.wager-board-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.wager-board-row em {
    color: #ffe29a;
    font-style: normal;
}

.wager-empty {
    padding: 12px;
    color: rgba(214, 225, 228, 0.62);
    font: 800 11px/1.4 var(--orb-ui-mono, 'Courier New', monospace);
}

@media (min-width: 900px) {
    .mm-bottom-nav {
        align-content: start;
    }

    .mm-nav-section-label,
    .mm-player-status-panel {
        display: grid;
    }
}

@media (max-width: 760px) {
    .wager-shell {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .wager-chat-row {
        grid-template-columns: 1fr;
    }

    .mm-nav-item::before,
    .mm-nav-action::before {
        display: none;
    }
}

.mm-duel-entry[hidden] {
    display: none !important;
}

.mm-duel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.mm-duel-rank-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 6px;
    background: rgba(5, 9, 18, 0.78);
    box-shadow: inset 3px 0 0 rgba(0, 217, 255, 0.76);
}

.mm-duel-rank-main {
    min-width: 0;
}

.mm-duel-rank-main span,
.mm-duel-rank-stats span {
    display: block;
    color: rgba(170, 235, 255, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mm-duel-rank-main strong {
    display: block;
    overflow: hidden;
    color: rgba(245, 251, 255, 0.96);
    font-size: 20px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-rank-stats {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mm-duel-rank-stats div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(143, 243, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.045);
}

.mm-duel-rank-stats strong {
    display: block;
    overflow: hidden;
    color: rgba(245, 251, 255, 0.94);
    font-size: 15px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-highscores-button {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(143, 243, 255, 0.28);
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.10);
    color: rgba(235, 248, 255, 0.94);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.mm-duel-highscores-button:hover,
.mm-duel-highscores-button:focus-visible {
    border-color: rgba(0, 217, 255, 0.68);
    background: rgba(0, 217, 255, 0.18);
}

.mm-duel-loadout {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.mm-duel-loadout-browser {
    width: 100%;
    display: grid;
    gap: 6px;
}

.mm-duel-loadout-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mm-duel-loadout-card {
    min-width: 0;
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid rgba(143, 243, 255, 0.22);
    border-radius: 6px;
    background: rgba(8, 10, 18, 0.72);
    color: rgba(235, 246, 255, 0.9);
    cursor: pointer;
    text-align: left;
}

.mm-duel-loadout-card strong,
.mm-duel-loadout-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-loadout-card strong {
    font-size: 11px;
    line-height: 1.15;
}

.mm-duel-loadout-card span {
    margin-top: 2px;
    color: rgba(170, 235, 255, 0.72);
    font-size: 9px;
}

.mm-duel-loadout-card.is-selected {
    border-color: rgba(0, 217, 255, 0.72);
    background: rgba(0, 217, 255, 0.13);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.18);
}

.mm-duel-loadout-details {
    width: 100%;
    border: 1px solid rgba(0, 217, 255, 0.26);
    border-radius: 6px;
    background: rgba(8, 10, 18, 0.62);
    padding: 9px;
}

.mm-duel-kit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mm-duel-kit-head span,
.mm-duel-kit-section h4,
.mm-duel-empty {
    color: rgba(170, 235, 255, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mm-duel-kit-head strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(245, 251, 255, 0.96);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-kit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.mm-duel-kit-section {
    min-width: 0;
}

.mm-duel-kit-section h4 {
    margin: 0 0 5px;
}

.mm-duel-kit-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mm-duel-item-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--duel-item-color, #8ff3ff) 45%, transparent);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.055);
}

.mm-duel-item-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.mm-duel-item-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.mm-duel-item-abbr {
    color: var(--duel-item-color, #8ff3ff);
    font-size: 9px;
    font-weight: 900;
}

.mm-duel-item-text {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.mm-duel-item-text strong,
.mm-duel-item-text em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-item-text strong {
    color: rgba(245, 251, 255, 0.95);
    font-size: 10px;
    line-height: 1.1;
}

.mm-duel-item-text em {
    color: rgba(170, 235, 255, 0.68);
    font-size: 9px;
    font-style: normal;
    line-height: 1.05;
}

.mm-duel-item-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 900;
}

.mm-duel-queue-status {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 9px 10px;
    border: 1px solid rgba(0, 217, 255, 0.32);
    border-radius: 6px;
    background: rgba(0, 217, 255, 0.09);
}

.mm-duel-queue-status[hidden] {
    display: none !important;
}

.mm-duel-queue-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.mm-duel-queue-main span,
.mm-duel-queue-meta {
    color: rgba(170, 235, 255, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mm-duel-queue-main strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(245, 251, 255, 0.96);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-duel-queue-clock {
    display: grid;
    justify-items: end;
    gap: 1px;
    min-width: 72px;
}

.mm-duel-queue-clock strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mm-duel-queue-clock span {
    color: rgba(170, 235, 255, 0.72);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.05;
    text-align: right;
    text-transform: uppercase;
}

.mm-duel-queue-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    text-transform: none;
}

.mm-duel-queue-leave {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255, 85, 102, 0.45);
    border-radius: 6px;
    background: rgba(255, 85, 102, 0.13);
    color: rgba(255, 229, 233, 0.95);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.mm-duel-queue-leave.is-confirming {
    border-color: rgba(255, 188, 74, 0.58);
    background: rgba(255, 188, 74, 0.16);
    color: rgba(255, 246, 220, 0.96);
}

@media (max-width: 640px) {
    #start-screen[data-mm] .mm-mode-stack {
        margin: 8px 0 12px;
        gap: 8px;
    }

    .mm-duel-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mm-duel-rank-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .mm-duel-highscores-button {
        width: 100%;
    }

    .mm-duel-loadout-options {
        display: flex;
        overflow-x: auto;
        padding: 1px 0 3px;
        scroll-snap-type: none;
        scrollbar-width: thin;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .mm-duel-loadout-card {
        flex: 0 0 126px;
        min-height: 44px;
        scroll-snap-align: none;
    }

    #start-screen[data-mm] #mm-br-button,
    #start-screen[data-mm] #mm-duel-button,
    #start-screen[data-mm] #mm-practice-duel-button {
        min-height: 56px;
        padding: 8px 10px;
        font-size: 13px;
    }

    #start-screen[data-mm] #mm-duel-button .mm-br-button-tag,
    #start-screen[data-mm] #mm-practice-duel-button .mm-br-button-tag {
        font-size: 10px;
        line-height: 1.15;
    }

    .mm-duel-kit-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 6px;
    }

    .mm-duel-loadout-details {
        padding: 8px;
    }

    .mm-duel-item-chip {
        padding: 3px 5px;
    }

    .mm-duel-queue-status {
        grid-template-columns: minmax(0, 1fr);
    }

    .mm-duel-queue-clock {
        justify-items: start;
    }

    .mm-duel-queue-clock span {
        text-align: left;
    }

    .mm-duel-queue-leave {
        width: 100%;
    }
}

.duel-hud {
    position: fixed;
    top: 96px;
    left: 50%;
    z-index: 320;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100dvh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-50%);
    padding: 12px;
    border: 1px solid rgba(0, 217, 255, 0.42);
    border-radius: 8px;
    background: rgba(7, 11, 18, 0.86);
    color: rgba(240, 248, 255, 0.96);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
    font-family: var(--o-sans, sans-serif);
    pointer-events: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.duel-hud-custom-position {
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

.duel-hud-draggable .duel-hud-top,
.duel-hud-draggable .duel-status {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.duel-hud-dragging {
    transition: none !important;
}

.duel-hud-top,
.duel-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.duel-hud-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    touch-action: manipulation;
}

.duel-mode-pill {
    padding: 4px 8px;
    border: 1px solid rgba(0, 217, 255, 0.42);
    border-radius: 999px;
    color: #8ff3ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.duel-toggle,
.duel-forfeit,
.duel-result-actions button {
    min-height: 32px;
    border: 1px solid rgba(0, 217, 255, 0.38);
    border-radius: 6px;
    background: rgba(0, 217, 255, 0.12);
    color: rgba(240, 248, 255, 0.95);
    cursor: pointer;
    font-weight: 800;
    padding: 0 12px;
}

.duel-toggle {
    border-color: rgba(143, 243, 255, 0.42);
    background: rgba(143, 243, 255, 0.1);
}

.duel-forfeit {
    border-color: rgba(255, 85, 102, 0.45);
    background: rgba(255, 85, 102, 0.13);
}

.duel-status {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.18;
}

.duel-grid,
.duel-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.duel-grid > div,
.duel-result-grid > div,
.duel-opponent {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
}

.duel-label,
.duel-result-grid span {
    display: block;
    color: rgba(178, 220, 232, 0.78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.duel-grid strong,
.duel-opponent strong,
.duel-result-grid strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.duel-result-versus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.duel-result-fighter {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.duel-result-fighter.is-local {
    border-color: rgba(0, 217, 255, 0.34);
    background: rgba(0, 217, 255, 0.08);
}

.duel-result-fighter span,
.duel-result-fighter small {
    display: block;
    color: rgba(178, 220, 232, 0.78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.duel-result-fighter strong,
.duel-result-fighter em {
    display: block;
    overflow-wrap: anywhere;
    font-style: normal;
    line-height: 1.2;
}

.duel-result-fighter strong {
    margin-top: 4px;
    font-size: 15px;
}

.duel-result-fighter em {
    margin-top: 4px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.duel-result-fighter small {
    margin-top: 5px;
    color: rgba(205, 226, 235, 0.82);
    text-transform: none;
}

.duel-opponent {
    display: grid;
    gap: 2px;
    margin-top: 8px;
}

.duel-opponent span:last-child,
.duel-restricted {
    color: rgba(205, 226, 235, 0.82);
    font-size: 12px;
}

.duel-restricted {
    margin-top: 8px;
}

.duel-loadout-panel {
    margin-top: 10px;
}

.duel-loadout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.duel-loadout-head span,
.duel-loadout-locked-summary span,
.duel-kit-section > span {
    display: block;
    color: rgba(170, 235, 255, 0.76);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.duel-loadout-head strong,
.duel-loadout-locked-summary strong {
    display: block;
    color: rgba(248, 252, 255, 0.98);
    font-size: 15px;
    line-height: 1.12;
}

.duel-lock-loadout {
    min-height: 34px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid rgba(255, 213, 128, 0.55);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 213, 128, 0.22), rgba(255, 144, 82, 0.14)),
        rgba(9, 11, 18, 0.82);
    color: rgba(255, 246, 220, 0.98);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.duel-lock-loadout:disabled {
    cursor: default;
    opacity: 0.7;
}

.duel-loadout-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 2px 6px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 243, 255, 0.26) transparent;
}

.duel-loadout-tile {
    flex: 0 0 156px;
    min-width: 0;
    min-height: 86px;
    display: grid;
    grid-template-rows: 30px auto auto;
    align-content: start;
    gap: 4px;
    padding: 7px;
    border: 1px solid rgba(143, 243, 255, 0.18);
    border-radius: 7px;
    background:
        radial-gradient(circle at 18% 8%, rgba(0, 217, 255, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(20, 30, 43, 0.78), rgba(8, 10, 16, 0.88));
    color: rgba(240, 248, 255, 0.94);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.duel-loadout-tile:hover,
.duel-loadout-tile:focus-visible {
    border-color: rgba(0, 217, 255, 0.58);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.14), 0 0 18px rgba(0, 217, 255, 0.13);
    transform: translateY(-1px);
}

.duel-loadout-tile.is-selected {
    border-color: rgba(255, 213, 128, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 213, 128, 0.18), 0 0 20px rgba(255, 213, 128, 0.13);
}

.duel-loadout-tile.is-locked {
    cursor: default;
}

.duel-loadout-art {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
}

.duel-loadout-art-icon,
.duel-kit-chip-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.06);
}

.duel-loadout-art-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.duel-loadout-art-icon img,
.duel-kit-chip-icon img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.duel-loadout-art-icon span,
.duel-kit-chip-icon span {
    color: rgba(143, 243, 255, 0.92);
    font-size: 9px;
    font-weight: 900;
}

.duel-loadout-title,
.duel-loadout-focus {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duel-loadout-title {
    color: rgba(248, 252, 255, 0.98);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.12;
    white-space: nowrap;
}

.duel-loadout-focus {
    color: rgba(178, 220, 232, 0.82);
    font-size: 11px;
    line-height: 1.22;
}

.duel-loadout-expanded {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.duel-loadout-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(143, 243, 255, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.052);
}

.duel-loadout-detail span {
    display: block;
    color: rgba(248, 252, 255, 0.96);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
}

.duel-loadout-detail p {
    margin: 2px 0 0;
    color: rgba(205, 226, 235, 0.82);
    font-size: 11px;
    line-height: 1.25;
}

.duel-kit-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 243, 255, 0.26) transparent;
    -webkit-overflow-scrolling: touch;
}

.duel-loadout-expanded p {
    margin: 0;
    color: rgba(230, 239, 245, 0.86);
    font-size: 12px;
    line-height: 1.32;
}

.duel-kit-section {
    display: grid;
    gap: 5px;
}

.duel-kit-section > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.duel-kit-chip {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid rgba(143, 243, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.055);
}

.duel-kit-chip-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.duel-kit-chip-name,
.duel-kit-chip-slot,
.duel-kit-chip-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.05;
}

.duel-kit-chip-name {
    color: rgba(245, 251, 255, 0.94);
    font-weight: 800;
}

.duel-kit-chip-slot,
.duel-kit-chip-count {
    color: rgba(170, 235, 255, 0.68);
}

.duel-loadout-locked-summary {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px solid rgba(255, 213, 128, 0.24);
    border-radius: 7px;
    background: rgba(255, 213, 128, 0.08);
}

.duel-loadout-locked-summary em {
    color: rgba(205, 226, 235, 0.82);
    font-size: 12px;
    font-style: normal;
    line-height: 1.2;
}

body.orbryn-duel-mode .remote-player-nametag .nametag-hp-bar {
    display: none !important;
}

.duel-hud-collapsed {
    width: min(320px, calc(100vw - 24px));
    padding: 8px 10px;
}

.duel-hud-collapsed .duel-hud-top {
    gap: 8px;
}

.duel-hud-collapsed .duel-mode-pill {
    font-size: 10px;
    white-space: nowrap;
}

.duel-hud-collapsed .duel-status {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.2;
}

.duel-hud-collapsed .duel-hud-body {
    display: none;
}

.duel-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 620;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}

.duel-result-panel {
    width: min(460px, 100%);
    padding: 20px;
    border: 1px solid rgba(0, 217, 255, 0.42);
    border-radius: 8px;
    background: rgba(7, 11, 18, 0.94);
    color: rgba(240, 248, 255, 0.96);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

.duel-result-kicker {
    color: #8ff3ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.duel-result-panel h2 {
    margin: 6px 0 0;
    font-size: 28px;
    line-height: 1.05;
}

.duel-result-panel p {
    color: rgba(205, 226, 235, 0.82);
}

@media (max-width: 640px) {
    .duel-hud {
        top: 76px;
        max-height: calc(100dvh - 96px);
    }

    .duel-grid,
    .duel-result-grid {
        grid-template-columns: 1fr;
    }

    .duel-result-versus {
        grid-template-columns: 1fr;
    }

    .duel-loadout-grid {
        gap: 7px;
    }

    .duel-loadout-tile {
        flex-basis: 138px;
        min-height: 82px;
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    .duel-hud {
        top: max(54px, calc(env(safe-area-inset-top, 0px) + 48px));
        width: min(360px, calc(100vw - 300px));
        max-height: min(410px, calc(100dvh - 168px - env(safe-area-inset-bottom, 0px)));
        padding: 9px;
    }

    .duel-hud-top,
    .duel-result-actions {
        gap: 8px;
    }

    .duel-toggle,
    .duel-forfeit,
    .duel-result-actions button {
        min-height: 30px;
        padding: 0 10px;
    }

    .duel-status {
        margin-top: 7px;
        font-size: 15px;
    }

    .duel-grid,
    .duel-result-grid {
        gap: 6px;
        margin-top: 7px;
    }

    .duel-result-panel {
        max-height: calc(100dvh - 24px);
        overflow: auto;
        padding: 14px;
    }

    .duel-result-versus {
        gap: 6px;
        margin-top: 8px;
    }

    .duel-result-fighter {
        padding: 7px;
    }

    .duel-grid > div,
    .duel-result-grid > div,
    .duel-opponent {
        padding: 6px;
    }

    .duel-grid strong,
    .duel-opponent strong,
    .duel-result-grid strong,
    .duel-result-fighter strong {
        font-size: 12px;
        line-height: 1.15;
    }

    .duel-result-fighter em {
        font-size: 15px;
    }

    .duel-opponent,
    .duel-restricted,
    .duel-loadout-panel {
        margin-top: 6px;
    }

    .duel-opponent span:last-child,
    .duel-restricted {
        font-size: 11px;
    }

    .duel-hud-collapsed {
        top: max(96px, calc(env(safe-area-inset-top, 0px) + 84px));
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(300px, calc(100vw - 320px));
        min-width: 220px;
        max-height: none;
        overflow: visible;
        padding: 7px 8px;
        transform: translateX(-50%);
    }

    .duel-hud-collapsed .duel-hud-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
    }

    .duel-hud-collapsed .duel-hud-actions {
        gap: 5px;
    }

    .duel-hud-collapsed .duel-toggle,
    .duel-hud-collapsed .duel-forfeit {
        min-height: 26px;
        padding: 0 7px;
        font-size: 10px;
    }

    .duel-hud-collapsed .duel-status {
        margin-top: 5px;
        max-width: 100%;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (pointer: coarse) and (max-height: 620px) and (orientation: landscape) {
    .duel-hud:not(.duel-hud-collapsed) {
        top: max(44px, calc(env(safe-area-inset-top, 0px) + 36px));
        width: min(520px, calc(100vw - 300px));
        max-height: min(410px, calc(100dvh - 168px - env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
    }

    body.orbryn-duel-mode .target-info {
        top: auto;
        bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 58px));
        left: 50%;
        min-width: 170px;
        transform: translateX(-50%);
    }

    .duel-loadout-tile {
        flex-basis: 132px;
        min-height: 78px;
        grid-template-rows: 28px auto auto;
        padding: 6px;
    }

    .duel-loadout-art-icon {
        width: 26px;
        height: 26px;
    }

    .duel-loadout-detail {
        max-height: none;
        overflow: visible;
        padding: 7px;
    }

    .duel-loadout-detail p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .duel-kit-row .duel-kit-chip:nth-child(n+5) {
        display: inline-flex;
    }
}

@media (max-width: 380px) {
    .mm-duel-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mm-br-button-icon {
    font-size: 16px;
    line-height: 1;
}

.mm-br-button-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-br-button-badge {
    padding: 2px 7px;
    border: 1px solid var(--mm-accent, #7c3aed);
    border-radius: var(--mm-radius-pill, 9999px);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--mm-accent-light, #a78bfa);
    background: var(--mm-accent-subtle, rgba(124, 58, 237, 0.1));
}

.mm-br-button-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(170, 235, 255, 0.78);
}

@keyframes brm-button-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 217, 255, 0.0); }
    50% { box-shadow: 0 0 26px rgba(0, 217, 255, 0.35); }
}

/* ── Domefall staging lobby (js/br/brLobby.js) — Fortnite-style page ── */
.brl {
    position: fixed;
    inset: 0;
    z-index: 8900;
    display: flex;
    font-family: var(--o-sans, sans-serif);
    color: rgba(242, 247, 250, 0.94);
}

/* display:flex above would silently defeat the hidden attribute — ROAM
   STAGING and the match-start handoff both rely on it actually hiding. */
.brl[hidden] {
    display: none !important;
}

.brl-backdrop {
    position: absolute;
    inset: -12px;
    background:
        url('../assets/br-lobby-bg.jpg?v=1') center 62% / cover no-repeat,
        #05070c;
    animation: brl-kenburns 46s ease-in-out infinite alternate;
}

@keyframes brl-kenburns {
    from { transform: scale(1.0) translateY(0); }
    to { transform: scale(1.05) translateY(-6px); }
}

/* Edge vignette so the glass panels stay readable over the bright art. */
.brl-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 5, 10, 0.62) 0%, transparent 24%, transparent 72%, rgba(2, 5, 10, 0.62) 100%),
        linear-gradient(180deg, rgba(2, 5, 10, 0.5) 0%, transparent 18%, transparent 78%, rgba(2, 5, 10, 0.55) 100%);
}

/* Deployment armed: hangar warning strobes + engine rumble on the vista. */
.brl-alertfx {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 170, 40, 0.28) 0%, transparent 9%, transparent 91%, rgba(255, 170, 40, 0.28) 100%),
        linear-gradient(180deg, rgba(255, 170, 40, 0.18) 0%, transparent 12%);
    transition: opacity 0.6s ease;
}

.brl-armed .brl-alertfx {
    opacity: 1;
    animation: brl-alert-strobe 1.6s ease-in-out infinite;
}

.brl-critical .brl-alertfx {
    background:
        linear-gradient(90deg, rgba(255, 70, 60, 0.34) 0%, transparent 10%, transparent 90%, rgba(255, 70, 60, 0.34) 100%),
        linear-gradient(180deg, rgba(255, 70, 60, 0.22) 0%, transparent 14%);
    animation: brl-alert-strobe 0.7s ease-in-out infinite;
}

@keyframes brl-alert-strobe {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.brl-armed .brl-backdrop {
    animation: brl-kenburns 46s ease-in-out infinite alternate, brl-engine-rumble 0.24s linear infinite;
}

.brl-critical .brl-backdrop {
    animation: brl-kenburns 46s ease-in-out infinite alternate, brl-engine-rumble 0.12s linear infinite;
}

@keyframes brl-engine-rumble {
    0%, 100% { margin-top: 0; }
    25% { margin-top: 1px; }
    75% { margin-top: -1px; }
}

/* One-shot cyan sweep when PLAY is pressed. */
.brl-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(80% 80% at 50% 55%, rgba(0, 217, 255, 0.35), transparent 70%);
}

.brl-flash-armed .brl-flash {
    animation: brl-flash-pop 0.55s ease-out 1;
}

@keyframes brl-flash-pop {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

/* White-out handoff into the boarding cinematic at countdown zero. */
.brl-deployflash {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    background: #eaf9ff;
}

.brl-deploying .brl-deployflash {
    animation: brl-deploy-whiteout 0.65s ease-in 1 forwards;
}

@keyframes brl-deploy-whiteout {
    0% { opacity: 0; }
    65% { opacity: 1; }
    100% { opacity: 1; }
}

.brl-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px clamp(12px, 3vw, 34px);
}

.brl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.18);
}

.brl-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: rgba(0, 217, 255, 0.72);
}

.brl-title h2 {
    margin: 2px 0 0;
    font-size: clamp(20px, 3.2vw, 30px);
    line-height: 1;
    letter-spacing: 0.06em;
}

.brl-head-actions {
    display: flex;
    gap: 10px;
}

.brl-ghost-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(242, 247, 250, 0.82);
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.brl-ghost-btn:hover { background: rgba(255, 255, 255, 0.1); }

.brl-exit {
    border-color: rgba(255, 120, 120, 0.34);
    color: rgba(255, 170, 170, 0.9);
}

.brl-body {
    display: grid;
    grid-template-columns: minmax(230px, 305px) minmax(0, 1fr) minmax(250px, 330px);
    gap: clamp(10px, 2vw, 24px);
    flex: 1;
    min-height: 0;
    padding: 14px 0;
}

.brl-panel {
    border: 1px solid rgba(0, 217, 255, 0.16);
    border-radius: 10px;
    background: rgba(4, 9, 15, 0.8);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

.brl-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.brl-squadpanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.brl-config {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.brl-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 213, 128, 0.8);
}

.brl-slot {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.brl-slot-self { border-color: rgba(0, 217, 255, 0.4); }

.brl-slot-open {
    width: 100%;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.brl-slot-open:hover,
.brl-slot-open:focus-visible {
    border-color: rgba(0, 217, 255, 0.4);
    background: rgba(0, 217, 255, 0.08);
}

.brl-slot-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 217, 255, 0.14);
    color: rgba(0, 217, 255, 0.88);
    font-size: 12px;
    font-weight: 900;
}

.brl-slot-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.brl-slot-state {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: rgba(255, 213, 128, 0.85);
}

.brl-roster-title { margin-top: 8px; }

.brl-roster,
.brl-friends {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.brl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.brl-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
}

.brl-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #57ff9a;
    box-shadow: 0 0 6px rgba(87, 255, 154, 0.7);
}

.brl-row-dot-off {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: none;
}

.brl-row-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: rgba(0, 217, 255, 0.8);
}

.brl-row-btn {
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(0, 217, 255, 0.5);
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.14);
    color: rgba(242, 247, 250, 0.95);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.brl-row-btn-ghost {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(242, 247, 250, 0.75);
}

.brl-empty {
    padding: 10px;
    font-size: 12px;
    color: rgba(242, 247, 250, 0.5);
}

.brl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

.brl-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.brl-hero-fallback {
    position: absolute;
    top: 45%;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(0, 217, 255, 0.6);
    pointer-events: none;
}

.brl-hero-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    padding: 10px 26px;
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: 8px;
    background: rgba(4, 10, 16, 0.82);
}

.brl-hero-name {
    font-size: 20px;
    letter-spacing: 0.04em;
}

.brl-hero-status {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: rgba(255, 213, 128, 0.85);
}

.brl-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.brl-mode-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.brl-mode-card strong {
    font-size: 13px;
    letter-spacing: 0.06em;
}

.brl-mode-card span {
    font-size: 11px;
    color: rgba(242, 247, 250, 0.6);
}

.brl-mode-card.brl-selected {
    border-color: rgba(0, 217, 255, 0.7);
    background: rgba(0, 217, 255, 0.12);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
}

.brl-toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.brl-toggle {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(242, 247, 250, 0.8);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.brl-toggle.brl-selected {
    border-color: rgba(0, 217, 255, 0.7);
    background: rgba(0, 217, 255, 0.14);
    color: rgba(242, 247, 250, 0.98);
}

.brl-toggle:disabled,
.brl-mode-card:disabled { opacity: 0.55; cursor: default; }

.brl-hint {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(242, 247, 250, 0.55);
}

/* Bottom-left play card — the Fortnite-style mode + PLAY block. */
.brl-playcard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.brl-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brl-brand-emblem {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 217, 255, 0.4);
    border-radius: 50%;
    background: rgba(0, 217, 255, 0.1);
    color: rgba(170, 235, 255, 0.95);
    font-size: 20px;
}

.brl-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brl-brand-text strong {
    font-size: 17px;
    letter-spacing: 0.08em;
}

.brl-brand-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(255, 213, 128, 0.85);
}

.brl-party-size {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.brl-status {
    min-height: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(170, 235, 255, 0.85);
}

.brl-launch,
.brl-cancel {
    width: 100%;
    min-height: 54px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.brl-launch {
    border: 1px solid rgba(255, 236, 80, 0.9);
    background: linear-gradient(180deg, #ffe95c, #ffd400);
    color: #131208;
    text-shadow: none;
    box-shadow: 0 6px 22px rgba(255, 220, 60, 0.28);
}

.brl-launch:hover:not(:disabled) {
    background: linear-gradient(180deg, #fff07e, #ffdd2e);
}

.brl-launch:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

.brl-cancel {
    border: 1px solid rgba(255, 120, 120, 0.5);
    background: rgba(255, 120, 120, 0.12);
    color: rgba(255, 190, 190, 0.95);
}

/* Holo deployment board — floats over the art beside the squad rail. */
.brl-holo {
    position: absolute;
    top: 4%;
    left: 2%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 172px;
    padding: 14px 18px;
    border: 1px solid rgba(110, 210, 255, 0.55);
    border-radius: 8px;
    background: rgba(8, 28, 46, 0.42);
    backdrop-filter: blur(3px);
    box-shadow: 0 0 24px rgba(60, 170, 255, 0.25), inset 0 0 18px rgba(60, 170, 255, 0.12);
    pointer-events: none;
}

.brl-holo-kicker {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(150, 220, 255, 0.8);
}

.brl-holo-count {
    margin-bottom: 6px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #cfeeff;
    text-shadow: 0 0 14px rgba(90, 200, 255, 0.8);
    font-variant-numeric: tabular-nums;
}

.brl-holo-staged {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    color: #cfeeff;
    text-shadow: 0 0 10px rgba(90, 200, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

.brl-armed .brl-holo {
    border-color: rgba(255, 190, 90, 0.7);
    box-shadow: 0 0 24px rgba(255, 170, 60, 0.3), inset 0 0 18px rgba(255, 170, 60, 0.12);
}

.brl-armed .brl-holo-count {
    color: #ffe2b0;
    text-shadow: 0 0 14px rgba(255, 180, 80, 0.85);
}

.brl-critical .brl-holo {
    border-color: rgba(255, 90, 80, 0.8);
    box-shadow: 0 0 28px rgba(255, 80, 70, 0.4), inset 0 0 18px rgba(255, 80, 70, 0.16);
}

.brl-critical .brl-holo-count {
    color: #ffc4bc;
    text-shadow: 0 0 16px rgba(255, 90, 80, 0.9);
    animation: brl-count-pulse 0.5s ease-in-out infinite;
}

@keyframes brl-count-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Pedestal glow under the survivor's feet — brightens when armed. */
.brl-hero-pad {
    position: absolute;
    left: 50%;
    bottom: 6%;
    z-index: 0;
    width: min(46%, 420px);
    height: 60px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(70, 190, 255, 0.35), transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.brl-armed .brl-hero-pad {
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 190, 90, 0.4), transparent 70%);
    animation: brl-alert-strobe 1.6s ease-in-out infinite;
}

/* Bottom-right character selector. */
.brl-charbar {
    position: absolute;
    right: clamp(12px, 3vw, 34px);
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: 8px;
    background: rgba(4, 9, 15, 0.85);
    backdrop-filter: blur(6px);
}

.brl-charbar-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(255, 213, 128, 0.85);
}

.brl-char-select {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(10, 18, 26, 0.95);
    color: rgba(242, 247, 250, 0.95);
    font-family: var(--o-mono, monospace);
    font-size: 13px;
    font-weight: 700;
}

/* While the staging page is open, incoming squad-invite toasts must render
   above it — accepting an invite IS the page's core flow. */
#hud.brl-open .group-notification {
    z-index: 8950;
}

/* Matchmaking search: the holo board scans cyan while looking for a room. */
.brl-searching .brl-holo {
    animation: brl-search-pulse 1.4s ease-in-out infinite;
}

@keyframes brl-search-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(60, 170, 255, 0.2), inset 0 0 14px rgba(60, 170, 255, 0.08); }
    50% { box-shadow: 0 0 34px rgba(60, 190, 255, 0.5), inset 0 0 22px rgba(60, 190, 255, 0.2); }
}

/* MATCH FOUND stinger — one-shot center flash when the room locks in. */
.brl-found-stinger {
    position: absolute;
    top: 34%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 900;
    letter-spacing: 0.22em;
    color: #dff6ff;
    text-shadow: 0 0 26px rgba(80, 200, 255, 0.95), 0 0 60px rgba(80, 200, 255, 0.5);
    white-space: nowrap;
}

.brl-found .brl-found-stinger {
    animation: brl-found-pop 1.45s ease-out 1;
}

@keyframes brl-found-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
    14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    24% { transform: translate(-50%, -50%) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@media (max-width: 900px) {
    .brl-frame { padding: 10px; overflow-y: auto; }

    .brl-body {
        display: flex;
        flex-direction: column;
    }

    .brl-hero { order: 1; min-height: 320px; }
    .brl-config { order: 2; }
    .brl-left { order: 3; }

    .brl-squadpanel,
    .brl-config { overflow: visible; flex: none; }

    .brl-holo {
        top: 8px;
        left: 8px;
        min-width: 140px;
        padding: 10px 12px;
    }

    .brl-holo-count { font-size: 26px; }
    .brl-holo-staged { font-size: 16px; }

    .brl-charbar {
        position: static;
        order: 4;
        margin-top: 10px;
        justify-content: space-between;
    }
}

/* Cryopod drop sequence: doors slide apart over the first airdrop frames */
.brm-cryopod {
    overflow: hidden;
}

.brm-pod-door {
    position: absolute;
    top: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient(90deg, #060a12, #0d1626 80%, #12233c);
    border-right: 2px solid rgba(0, 217, 255, 0.35);
    transition: transform 1400ms cubic-bezier(0.7, 0, 0.3, 1) 500ms;
    z-index: 1;
}

.brm-pod-door-left { left: -1%; }
.brm-pod-door-right {
    right: -1%;
    border-right: none;
    border-left: 2px solid rgba(0, 217, 255, 0.35);
}

.brm-pod-open .brm-pod-door-left { transform: translateX(-104%); }
.brm-pod-open .brm-pod-door-right { transform: translateX(104%); }

.brm-pod-frost {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(140, 220, 255, 0.10), rgba(10, 20, 35, 0.55) 75%);
    opacity: 1;
    transition: opacity 1600ms ease 900ms;
    z-index: 0;
    pointer-events: none;
}

.brm-pod-open .brm-pod-frost { opacity: 0; }

.brm-cryopod .brm-vignette-label {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brm-pod-title {
    font-size: clamp(18px, 3vw, 26px);
    letter-spacing: 0.22em;
    color: var(--o-cyan, #00d9ff);
    text-shadow: 0 0 18px rgba(0, 217, 255, 0.6);
}

.brm-pod-sub {
    font-size: clamp(11px, 1.6vw, 14px);
    letter-spacing: 0.1em;
    color: rgba(235, 245, 255, 0.8);
    text-transform: lowercase;
}

/* Post-elimination spectate panel */
.brm-eliminated-panel {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 68, 68, 0.5);
    border-radius: 8px;
    background: rgba(10, 8, 14, 0.85);
    font-family: var(--o-mono, monospace);
    z-index: 60;
    pointer-events: auto;
}

.brm-eliminated-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #ff4444;
    text-shadow: 0 0 14px rgba(255, 68, 68, 0.5);
}

.brm-eliminated-sub {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--o-text, #f0efec);
    opacity: 0.7;
}

.brm-eliminated-leave {
    margin-top: 4px;
    padding: 6px 16px;
    border: 1px solid rgba(0, 217, 255, 0.5);
    border-radius: 5px;
    background: rgba(0, 217, 255, 0.12);
    color: var(--o-cyan, #00d9ff);
    cursor: pointer;
    font-family: var(--o-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.brm-eliminated-leave:hover {
    background: rgba(0, 217, 255, 0.25);
}

/* Mobile-safe layout */
@media (max-width: 768px) {
    .brm-hud {
        top: calc(var(--orbryn-hud-top-offset, 24px) + 2px);
        max-width: calc(100% - 120px);
    }
    .brm-topline {
        gap: 6px;
        padding: 3px 8px;
        font-size: 10px;
    }
    .brm-zoneline,
    .brm-gateline,
    .brm-coreline {
        font-size: 9px;
        padding: 2px 8px;
    }
    .brm-objective {
        font-size: 9px;
        white-space: normal;
        max-width: 100%;
    }
    .brm-core-bar { width: 80px; }
    .brm-vignette-label { font-size: 14px; letter-spacing: 0.2em; }
    .brm-results-card { padding: 16px 14px; }
    .brm-results-headline { font-size: 22px; }
    .brm-results-table { font-size: 10px; }
}

/* #hud > * forces pointer-events auto at ID specificity — these BR layers
   are informational and must not swallow game clicks. */
#hud > .brm-hud,
#hud > .brm-vignette {
    pointer-events: none;
}

/* BR world map layers — Veil rings reuse the .orbryn-world-map-boundary
   geometry; crate/death dots are fixed-size points scaled against zoom
   like the YOU marker. All live in the pointer-events: none boundary
   layer, so they never swallow map drags. */
.orbryn-world-map-boundary.brm-map-zone {
    border: 2px solid rgba(0, 217, 255, 0.9);
    background: transparent;
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.35), inset 0 0 14px rgba(0, 217, 255, 0.18);
}

.orbryn-world-map-boundary.brm-map-zone .orbryn-world-map-boundary-label {
    color: #9feaff;
}

.orbryn-world-map-boundary.brm-map-zone-next {
    border: 1px dashed rgba(245, 251, 255, 0.75);
    background: transparent;
    box-shadow: none;
}

.brm-map-point {
    position: absolute;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%) scale(var(--world-map-marker-scale, 1));
    pointer-events: none;
}

.brm-map-point.brm-map-crate {
    width: 7px;
    height: 7px;
    background: #ffcc44;
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--world-map-marker-scale, 1));
    box-shadow: 0 0 6px rgba(255, 204, 68, 0.85);
}

.brm-map-point.brm-map-death {
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.8);
}

/* Anti-camper radar: live combatant positions (1 Hz), pulsing red. */
.brm-map-point.brm-map-combatant {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3333;
    border: 1px solid rgba(60, 0, 0, 0.9);
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.9);
    animation: brm-combatant-pulse 1.2s ease-in-out infinite;
}

@keyframes brm-combatant-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Drop Carrier ride banner — prominent center prompt while aboard.
   #hud > * forces pointer-events auto at ID specificity, so the banner
   re-disables them and only the JUMP button stays interactive. */
.brm-carrier-banner {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 26px;
    border: 1px solid var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    border-radius: 8px;
    background: rgba(5, 5, 7, 0.66);
    font-family: var(--o-mono, 'Courier New', monospace);
    color: var(--o-cyan, #00d9ff);
    text-align: center;
    pointer-events: none;
}

#hud > .brm-carrier-banner {
    pointer-events: none;
}

.brm-carrier-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-shadow: 0 0 18px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    animation: brm-pulse 1.6s ease-in-out infinite;
}

.brm-carrier-sub {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--o-text-2, rgba(240, 239, 236, 0.64));
}

.brm-carrier-count {
    color: var(--o-cyan-hi, #8ff0ff);
    font-weight: 700;
}

.brm-carrier-jump {
    margin-top: 4px;
    padding: 8px 30px;
    border: 1px solid var(--o-cyan-line, rgba(0, 217, 255, 0.38));
    border-radius: 5px;
    background: var(--o-cyan-dim, rgba(0, 217, 255, 0.14));
    color: var(--o-cyan, #00d9ff);
    font-family: var(--o-mono, 'Courier New', monospace);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.24em;
    cursor: pointer;
    pointer-events: auto;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.brm-carrier-jump:hover,
.brm-carrier-jump:focus-visible {
    background: rgba(0, 217, 255, 0.26);
    box-shadow: 0 0 18px var(--o-cyan-line, rgba(0, 217, 255, 0.38));
}

.brm-carrier-jump:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 768px) {
    .brm-carrier-banner {
        top: 18%;
        padding: 10px 16px;
        max-width: calc(100% - 32px);
    }
    .brm-carrier-title { font-size: 15px; letter-spacing: 0.2em; }
    .brm-carrier-sub { font-size: 10px; }
    .brm-carrier-jump { font-size: 12px; padding: 8px 24px; }
}

/* Drop Carrier boarding cinematic — letterbox bars. Above the BR HUD and
   carrier banner (z 30/40), below the deploy vignette (90) and results
   (120). Height transition slides them in/out; the BrManager removes the
   nodes after the slide-out finishes. */
.brm-letterbox {
    position: fixed;
    left: 0;
    right: 0;
    height: 0;
    background: #000;
    z-index: 80;
    pointer-events: none;
    transition: height 0.6s ease;
}

.brm-letterbox-top { top: 0; }
.brm-letterbox-bottom { bottom: 0; }

.brm-letterbox.brm-letterbox-on { height: 9vh; }

/* Mobile chat rescue layer: keep the composer readable above phone keyboards and
   keep the controller chat affordance outside the touch-control container. */
@media (pointer: coarse) and (orientation: landscape) {
    .mobile-chat-toggle {
        position: fixed !important;
        left: auto !important;
        right: calc(var(--minimap-size, 200px) + 38px + env(safe-area-inset-right, 0px)) !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto !important;
        min-width: 66px;
        height: 40px !important;
        padding: 0 10px;
        border-radius: 999px !important;
        border: 1px solid rgba(0, 217, 255, 0.36) !important;
        background:
            linear-gradient(180deg, rgba(12, 26, 34, 0.95), rgba(5, 8, 13, 0.95)),
            radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.16), transparent 62%) !important;
        color: var(--orb-ui-text, #f0efec) !important;
        font-family: var(--orb-ui-mono, 'Courier New', monospace);
        font-size: 11px !important;
        font-weight: 900;
        letter-spacing: 0;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 18px rgba(0, 217, 255, 0.14);
        z-index: 72 !important;
    }

    body.game-playing .mobile-chat-toggle {
        display: inline-flex;
    }

    /* Landscape phones: the chat toggle pill sits top-right beside the
       minimap — hang the mini feed directly below it, right-anchored. */
    #chat-mini-feed {
        left: auto;
        right: calc(var(--minimap-size, 200px) + 38px + env(safe-area-inset-right, 0px));
        top: calc(56px + env(safe-area-inset-top, 0px));
        bottom: auto;
        width: min(38vw, 240px);
        align-items: flex-end;
    }

    #chat-mini-feed .chat-mini-row {
        border-left: none;
        border-right: 2px solid rgba(80, 120, 200, 0.5);
    }

    .mobile-chat-toggle-label {
        line-height: 1;
    }

    .mobile-chat-toggle-gamepad {
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 22px;
        padding: 0 6px;
        border: 1px solid rgba(230, 169, 87, 0.55);
        border-radius: 5px;
        background: rgba(230, 169, 87, 0.12);
        color: #ffd68a;
        font-size: 10px;
        line-height: 1;
    }

    body.input-gamepad .mobile-chat-toggle,
    #hud.input-gamepad .mobile-chat-toggle {
        min-width: 106px;
        border-color: rgba(230, 169, 87, 0.62) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.44), 0 0 18px rgba(230, 169, 87, 0.18);
    }

    body.input-gamepad .mobile-chat-toggle-gamepad,
    #hud.input-gamepad .mobile-chat-toggle-gamepad {
        display: inline-flex;
    }

    #chat-panel.mobile-sheet {
        --chat-keyboard-offset: 0px;
        --chat-visual-height: 100dvh;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--chat-keyboard-offset) !important;
        width: auto !important;
        height: min(58dvh, 360px);
        max-height: calc(var(--chat-visual-height) - 16px);
        padding-bottom: 0 !important;
        overflow: hidden;
        border-radius: 10px 10px 0 0 !important;
        border-color: rgba(0, 217, 255, 0.26) !important;
        background:
            linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(2, 4, 8, 0.98)),
            radial-gradient(ellipse 70% 70% at 20% 0%, rgba(0, 217, 255, 0.12), transparent 68%) !important;
        box-shadow: 0 -20px 58px rgba(0, 0, 0, 0.58), 0 0 28px rgba(0, 217, 255, 0.12);
        z-index: 74 !important;
    }

    #chat-panel.mobile-sheet.chat-keyboard-open {
        height: min(64dvh, max(220px, calc(var(--chat-visual-height) - 16px)));
        max-height: calc(var(--chat-visual-height) - 10px);
    }

    #chat-panel.mobile-sheet.chat-minimized {
        transform: translateY(calc(100% + var(--chat-keyboard-offset))) !important;
    }

    #chat-panel.mobile-sheet.chat-minimized .chat-sheet-header,
    #chat-panel.mobile-sheet.chat-minimized .chat-composer {
        display: none !important;
    }

    #chat-panel.mobile-sheet .chat-sheet-header {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        align-items: center;
        gap: 6px;
        min-height: 48px;
        padding: 12px 10px 8px;
        background: rgba(5, 8, 13, 0.92);
        border-bottom: 1px solid rgba(0, 217, 255, 0.18);
    }

    #chat-panel.mobile-sheet .chat-sheet-title {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    #chat-panel.mobile-sheet .chat-sheet-title-main {
        color: var(--orb-ui-text, #f0efec);
        font: 900 13px/1 var(--orb-ui-sans, system-ui, sans-serif);
        letter-spacing: 0;
    }

    #chat-panel.mobile-sheet .chat-sheet-gamepad-hint {
        display: none;
        align-items: center;
        justify-content: center;
        height: 22px;
        min-width: 36px;
        padding: 0 6px;
        border: 1px solid rgba(230, 169, 87, 0.5);
        border-radius: 5px;
        background: rgba(230, 169, 87, 0.1);
        color: #ffd68a;
        font: 800 10px/1 var(--orb-ui-mono, 'Courier New', monospace);
        letter-spacing: 0;
    }

    body.input-gamepad #chat-panel.mobile-sheet .chat-sheet-gamepad-hint,
    #hud.input-gamepad #chat-panel.mobile-sheet .chat-sheet-gamepad-hint {
        display: inline-flex;
    }

    #chat-panel.mobile-sheet .chat-sheet-close,
    #chat-panel.mobile-sheet .chat-sheet-expand {
        width: 40px;
        height: 40px;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    #chat-panel.mobile-sheet .chat-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        flex-direction: column;
    }

    #chat-panel.mobile-sheet .chat-tabs {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        background: rgba(5, 8, 13, 0.72) !important;
    }

    #chat-panel.mobile-sheet .chat-tab {
        min-width: 0;
        min-height: 34px;
        padding: 7px 4px;
        border-radius: 0;
        font-size: 10px;
        letter-spacing: 0;
    }

    #chat-panel.mobile-sheet #chat-log {
        flex: 1 1 auto;
        max-height: none !important;
        min-height: 0;
        overflow-y: auto;
        padding: 9px 10px;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.24) !important;
        font-size: 13px;
        line-height: 1.35;
    }

    #chat-panel.mobile-sheet .chat-msg {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        column-gap: 5px;
        align-items: start;
        margin-bottom: 4px;
    }

    #chat-panel.mobile-sheet .chat-msg-body {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #chat-panel.mobile-sheet .chat-private-targets {
        flex: 0 0 auto;
        margin: 0;
        padding: 6px 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(5, 8, 13, 0.76);
    }

    #chat-panel.mobile-sheet .chat-composer {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(0, 217, 255, 0.2);
        background: rgba(5, 8, 13, 0.96);
    }

    #chat-panel.mobile-sheet #chat-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0 12px;
        border-radius: 8px !important;
        font-size: 16px;
        line-height: 44px;
    }

    #chat-panel.mobile-sheet .chat-send-btn {
        flex: 0 0 auto;
        min-width: 62px;
        height: 44px;
        padding: 0 12px;
        border: 1px solid rgba(0, 217, 255, 0.38);
        border-radius: 8px;
        background: rgba(0, 217, 255, 0.12);
        color: var(--orb-ui-text, #f0efec);
        font: 900 11px/1 var(--orb-ui-mono, 'Courier New', monospace);
        letter-spacing: 0;
    }

    #chat-panel.mobile-sheet .chat-send-btn:active {
        background: rgba(0, 217, 255, 0.24);
        border-color: rgba(0, 217, 255, 0.56);
    }
}

/* ── Daily Tasks (hardened ORBRYN economy) ─────────────────────────── */
.sp-daily-tasks-content .sp-daily-tasks-mount,
.daily-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
}

/* ── Emotes tab ────────────────────────────────────────────────────── */
.emotes-header {
    font-size: 0.7rem;
    color: var(--privy-color-foreground-3, #8a8e96);
    margin-bottom: 6px;
    line-height: 1.4;
}

.emotes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.emote-card {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    background: var(--privy-color-background-3, #102235);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 6px;
    color: var(--privy-color-foreground, #f6f7fa);
    font-family: inherit;
    font-size: 0.74rem;
    text-align: left;
    cursor: pointer;
    min-height: 40px;
}

.emote-card:hover {
    border-color: rgba(125, 211, 252, 0.45);
    background: rgba(0, 217, 255, 0.08);
}

.emote-card.playing {
    border-color: rgba(0, 217, 255, 0.8);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.25);
}

.emote-card.locked {
    opacity: 0.72;
}

.emote-swatch {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.emote-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emote-tag {
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
}

.emote-tag.owned {
    color: #7dffb0;
    background: rgba(60, 220, 130, 0.14);
    border: 1px solid rgba(60, 220, 130, 0.35);
}

.emote-tag.price {
    color: #ffd97c;
    background: rgba(255, 200, 90, 0.12);
    border: 1px solid rgba(255, 200, 90, 0.4);
}

.sp-emotes-mount {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.sp-modal-body .sp-emotes-mount {
    max-height: none;
    overflow-y: visible;
}

.daily-tasks-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.daily-tasks-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--privy-color-foreground, #f6f7fa);
    letter-spacing: 0.02em;
}

.daily-tasks-cap {
    font-size: 0.72rem;
    color: var(--privy-color-accent, #7dd3fc);
    white-space: nowrap;
}

.daily-tasks-sub {
    font-size: 0.7rem;
    color: var(--privy-color-foreground-3, #8a8e96);
    margin-bottom: 2px;
}

.daily-tasks-empty {
    font-size: 0.78rem;
    color: var(--privy-color-foreground-3, #8a8e96);
    padding: 12px 8px;
    text-align: center;
}

.daily-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.daily-task {
    background: var(--privy-color-background-3, #102235);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-left: 3px solid var(--privy-color-accent, #7dd3fc);
    border-radius: 6px;
    padding: 8px 10px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.daily-task-done {
    border-left-color: var(--privy-color-success, #3ddc97);
    opacity: 0.72;
}

.daily-task-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.daily-task-label {
    font-size: 0.82rem;
    color: var(--privy-color-foreground, #f6f7fa);
}

.daily-task-reward {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--privy-color-accent, #7dd3fc);
    white-space: nowrap;
}

.daily-task-done .daily-task-reward {
    color: var(--privy-color-success, #3ddc97);
}

.daily-task-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--privy-color-background, #03070d);
    overflow: hidden;
}

.daily-task-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--privy-color-accent-dark, #38bdf8),
        var(--privy-color-accent, #7dd3fc));
    transition: width 0.3s ease;
}

.daily-task-done .daily-task-fill {
    background: var(--privy-color-success, #3ddc97);
}

.daily-task-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.daily-task-tier {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--privy-color-foreground-2, #d6dae0);
    background: rgba(125, 211, 252, 0.1);
}

.daily-task-tier-medium { color: #ffd479; background: rgba(255, 212, 121, 0.12); }
.daily-task-tier-hard   { color: #ff9e7d; background: rgba(255, 158, 125, 0.12); }
.daily-task-tier-elite  { color: #f6a3ff; background: rgba(246, 163, 255, 0.14); }

.daily-task-count {
    font-size: 0.7rem;
    color: var(--privy-color-foreground-3, #8a8e96);
    font-variant-numeric: tabular-nums;
}

/* Inside the mobile hamburger popup the slate fills the modal body and scrolls. */
.sp-modal-body .daily-tasks {
    max-height: 100%;
}
.sp-modal-body .daily-tasks-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Touch-friendly sizing on small screens. */
@media (max-width: 768px) {
    .daily-tasks { gap: 10px; padding: 6px 4px; }
    .daily-tasks-title { font-size: 1.05rem; }
    .daily-tasks-cap { font-size: 0.82rem; }
    .daily-tasks-sub { font-size: 0.8rem; }
    .daily-task { padding: 12px 12px; border-radius: 8px; }
    .daily-task-label { font-size: 0.95rem; line-height: 1.25; }
    .daily-task-reward { font-size: 0.85rem; }
    .daily-task-bar { height: 8px; border-radius: 4px; }
    .daily-task-tier { font-size: 0.72rem; padding: 2px 8px; }
    .daily-task-count { font-size: 0.82rem; }
}

/* --- Psionic Imprint Synthesizer (gacha station) --- */
.psi-gacha-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(161, 99, 255, 0.18), transparent 30%),
        rgba(3, 3, 9, 0.64);
    color: #f6f2ff;
    font-family: var(--orb-ui-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.psi-gacha-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
    border: 1px solid rgba(185, 140, 255, 0.45);
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(12, 8, 22, 0.98), rgba(14, 11, 25, 0.96) 48%, rgba(22, 10, 30, 0.94)),
        rgba(6, 5, 13, 0.98);
    box-shadow: 0 0 42px rgba(122, 61, 242, 0.28);
    padding: 18px 20px 20px;
}

.psi-gacha-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.psi-gacha-eyebrow {
    font-size: 11px;
    letter-spacing: 0.28em;
    color: rgba(185, 140, 255, 0.85);
}

.psi-gacha-title {
    margin: 2px 0 0;
    font-size: 22px;
    letter-spacing: 0.08em;
    color: #ead9ff;
}

.psi-gacha-close {
    border: 1px solid rgba(185, 140, 255, 0.4);
    border-radius: 6px;
    background: rgba(23, 14, 38, 0.9);
    color: #d7b4ff;
    font-size: 20px;
    line-height: 1;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.psi-gacha-close:hover { background: rgba(52, 28, 84, 0.95); }

.psi-gacha-body { display: flex; flex-direction: column; gap: 12px; }

.psi-gacha-balance {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(238, 228, 255, 0.85);
}

.psi-gacha-odds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border: 1px solid rgba(185, 140, 255, 0.22);
    border-radius: 6px;
    background: rgba(18, 12, 32, 0.75);
}

.psi-gacha-result {
    border: 1px solid rgba(215, 180, 255, 0.6);
    border-radius: 8px;
    background: rgba(20, 13, 36, 0.92);
    padding: 14px;
    text-align: center;
    animation: psiGachaReveal 0.35s ease-out;
}

@keyframes psiGachaReveal {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.psi-gacha-result-icon { width: 48px; height: 48px; margin-bottom: 6px; }
.psi-gacha-result-name { font-size: 18px; letter-spacing: 0.06em; font-weight: 700; }
.psi-gacha-result-meta { font-size: 11px; letter-spacing: 0.18em; color: rgba(230, 220, 250, 0.7); margin-top: 3px; }
.psi-gacha-result-desc { font-size: 12.5px; color: rgba(238, 230, 255, 0.85); margin-top: 8px; line-height: 1.45; }
.psi-gacha-inbox-note { font-size: 11.5px; color: #ffd27a; margin-top: 8px; }
.psi-gacha-rolling { color: #d7b4ff; letter-spacing: 0.3em; font-size: 15px; }
.psi-gacha-dots { animation: psiGachaPulse 0.9s infinite; }

@keyframes psiGachaPulse { 50% { opacity: 0.25; } }

.psi-gacha-status {
    font-size: 12.5px;
    color: #ff9d9d;
    border: 1px solid rgba(255, 130, 130, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(46, 14, 20, 0.7);
}

.psi-gacha-roll-btn {
    border: 1px solid rgba(215, 180, 255, 0.65);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(94, 44, 178, 0.95), rgba(58, 26, 118, 0.95));
    color: #f4ebff;
    font-size: 15px;
    letter-spacing: 0.14em;
    font-weight: 700;
    padding: 12px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.psi-gacha-roll-btn:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-1px); }
.psi-gacha-roll-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.psi-gacha-divider {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: rgba(126, 242, 230, 0.8);
    margin-top: 4px;
}

.psi-gacha-featured { display: flex; flex-direction: column; gap: 6px; }

.psi-gacha-featured-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(126, 242, 230, 0.2);
    border-radius: 6px;
    background: rgba(10, 20, 24, 0.72);
    padding: 8px 10px;
}

.psi-gacha-featured-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.psi-gacha-featured-name { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.psi-gacha-featured-meta { font-size: 10.5px; letter-spacing: 0.14em; color: rgba(210, 240, 236, 0.6); text-transform: uppercase; }

.psi-gacha-buy-btn {
    border: 1px solid rgba(126, 242, 230, 0.55);
    border-radius: 6px;
    background: rgba(13, 42, 44, 0.92);
    color: #7ef2e6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.psi-gacha-buy-btn:hover { background: rgba(21, 66, 68, 0.95); }

.psi-gacha-footnote { font-size: 11px; color: rgba(226, 218, 246, 0.55); line-height: 1.5; }

@media (max-width: 640px) {
    .psi-gacha-overlay { padding: 10px; }
    .psi-gacha-panel { padding: 14px; max-height: 92vh; }
    .psi-gacha-title { font-size: 18px; }
}

/* === Bounty Broker wanted board panel ================================= */
.bounty-board-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 179, 71, 0.14), transparent 30%),
        rgba(6, 3, 2, 0.64);
    color: #fbf3e8;
    font-family: var(--orb-ui-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.bounty-board-panel {
    position: relative;
    width: min(600px, 100%);
    max-height: min(88vh, 740px);
    overflow: auto;
    border: 1px solid rgba(255, 179, 71, 0.45);
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(20, 12, 6, 0.98), rgba(22, 14, 9, 0.96) 48%, rgba(28, 14, 8, 0.94)),
        rgba(11, 7, 4, 0.98);
    box-shadow: 0 0 42px rgba(242, 140, 61, 0.24);
    padding: 18px 20px 20px;
}

.bounty-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.bounty-board-eyebrow {
    font-size: 11px;
    letter-spacing: 0.28em;
    color: rgba(255, 179, 71, 0.85);
}

.bounty-board-title {
    margin: 2px 0 0;
    font-size: 22px;
    letter-spacing: 0.08em;
    color: #ffe3bd;
}

.bounty-board-close {
    border: 1px solid rgba(255, 179, 71, 0.4);
    border-radius: 6px;
    background: rgba(38, 23, 14, 0.9);
    color: #ffcf8f;
    font-size: 20px;
    line-height: 1;
    width: 34px;
    height: 34px;
    cursor: pointer;
    flex-shrink: 0;
}

.bounty-board-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bounty-board-stats {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(251, 236, 214, 0.75);
}

.bounty-board-stats b {
    color: #ffcf8f;
}

.bounty-active {
    border: 1px solid rgba(255, 179, 71, 0.55);
    border-radius: 6px;
    background: rgba(46, 26, 12, 0.65);
    padding: 10px 12px;
}

.bounty-active-paused {
    border-color: rgba(200, 180, 160, 0.4);
    opacity: 0.9;
}

.bounty-active-head {
    font-size: 10px;
    letter-spacing: 0.24em;
    color: rgba(255, 179, 71, 0.8);
}

.bounty-active-name {
    font-size: 18px;
    color: #ffe3bd;
    margin: 2px 0;
}

.bounty-active-meta {
    font-size: 12px;
    margin-bottom: 8px;
}

.bounty-timer {
    color: #8ce99a;
}

.bounty-paused-tag {
    color: #d0b8a0;
}

.bounty-abandon-btn {
    border: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 6px;
    background: rgba(56, 18, 14, 0.85);
    color: #ff9b8f;
    font-size: 11px;
    letter-spacing: 0.14em;
    padding: 6px 12px;
    cursor: pointer;
}

.bounty-abandon-btn:hover {
    background: rgba(80, 24, 18, 0.9);
}

.bounty-notes {
    font-size: 12px;
    color: #ffd28a;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bounty-status {
    font-size: 12px;
    color: #ff9b8f;
}

.bounty-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bounty-empty {
    font-size: 13px;
    color: rgba(251, 236, 214, 0.6);
    padding: 14px 4px;
    text-align: center;
}

.bounty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255, 179, 71, 0.22);
    border-radius: 6px;
    background: rgba(30, 19, 10, 0.6);
    padding: 8px 10px;
}

.bounty-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bounty-row-name {
    font-size: 15px;
    color: #ffe9c9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bounty-row-meta {
    font-size: 11px;
    color: rgba(251, 236, 214, 0.65);
}

.bounty-online {
    color: #8ce99a;
}

.bounty-offline {
    color: #c9b294;
}

.bounty-server {
    color: #9ecbff;
    letter-spacing: 0.04em;
}

.bounty-claim-btn {
    border: 1px solid rgba(255, 179, 71, 0.55);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(120, 66, 20, 0.9), rgba(70, 38, 14, 0.92));
    color: #ffe3bd;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.bounty-claim-btn:hover:not(:disabled) {
    filter: brightness(1.15);
}

.bounty-claim-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.bounty-refresh-btn {
    border: 1px solid rgba(255, 179, 71, 0.4);
    border-radius: 6px;
    background: rgba(38, 23, 14, 0.9);
    color: #ffcf8f;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 9px 12px;
    cursor: pointer;
}

.bounty-refresh-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.bounty-footnote {
    font-size: 11px;
    color: rgba(251, 236, 214, 0.55);
    line-height: 1.5;
}

.bounty-dots {
    animation: psiGachaPulse 0.9s infinite;
}

/* ── Blood Price: danger tiers, risk panel, claim confirm, quest card ── */

.bounty-danger {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 0.12em;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bounty-danger-low {
    background: rgba(46, 106, 58, 0.55);
    color: #b9f0c3;
    border-color: rgba(120, 226, 143, 0.45);
}

.bounty-danger-medium {
    background: rgba(122, 100, 22, 0.55);
    color: #ffe9a8;
    border-color: rgba(255, 214, 90, 0.45);
}

.bounty-danger-high {
    background: rgba(128, 62, 18, 0.6);
    color: #ffcfa3;
    border-color: rgba(255, 150, 66, 0.5);
}

.bounty-danger-extreme {
    background: rgba(126, 20, 26, 0.65);
    color: #ffb9bd;
    border-color: rgba(255, 92, 102, 0.55);
}

.bounty-my-risk {
    border: 1px solid rgba(255, 179, 71, 0.4);
    border-radius: 8px;
    background: rgba(46, 26, 8, 0.6);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.bounty-my-risk-marked {
    border-color: rgba(255, 92, 102, 0.7);
    background: rgba(66, 12, 16, 0.65);
    box-shadow: 0 0 14px rgba(255, 92, 102, 0.25);
}

.bounty-my-risk-head {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #ffd9a8;
    margin-bottom: 6px;
}

.bounty-my-risk-body {
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(251, 236, 214, 0.85);
}

.bounty-marked-warning {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #ff9aa2;
    margin-bottom: 6px;
    animation: psiGachaPulse 1.4s infinite;
}

.bounty-active-risk {
    font-size: 11.5px;
    color: rgba(251, 236, 214, 0.85);
    margin: 4px 0;
}

.bounty-claim-confirm {
    border: 1px solid rgba(255, 92, 102, 0.55);
    border-radius: 8px;
    background: rgba(56, 14, 18, 0.78);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.bounty-claim-confirm-head {
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #ffb9bd;
    margin-bottom: 6px;
}

.bounty-claim-confirm-body {
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(251, 236, 214, 0.9);
    margin-bottom: 10px;
}

.bounty-claim-confirm-actions {
    display: flex;
    gap: 8px;
}

.bounty-claim-confirm-btn {
    border: 1px solid rgba(255, 92, 102, 0.6);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(140, 32, 40, 0.92), rgba(84, 18, 24, 0.94));
    color: #ffd7da;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    cursor: pointer;
}

.bounty-claim-confirm-btn:hover {
    filter: brightness(1.15);
}

.bounty-claim-cancel-btn {
    border: 1px solid rgba(255, 179, 71, 0.35);
    border-radius: 6px;
    background: rgba(40, 26, 12, 0.85);
    color: #ffe3bd;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    cursor: pointer;
}

.bounty-quest-card {
    border: 1px solid rgba(158, 203, 255, 0.4);
    border-radius: 8px;
    background: rgba(10, 24, 44, 0.62);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.bounty-quest-head {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #9ecbff;
    margin-bottom: 6px;
}

.bounty-quest-text {
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(214, 232, 255, 0.9);
}

.bounty-quest-btn {
    margin-top: 8px;
    border: 1px solid rgba(158, 203, 255, 0.55);
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(24, 62, 110, 0.92), rgba(12, 34, 64, 0.94));
    color: #d6e8ff;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    cursor: pointer;
}

.bounty-quest-btn:hover {
    filter: brightness(1.2);
}

.bounty-sim-breakdown {
    border: 1px solid rgba(158, 203, 255, 0.3);
    border-radius: 6px;
    background: rgba(4, 14, 28, 0.6);
    padding: 8px 10px;
    margin-top: 4px;
}

.bounty-sim-head {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: #9ecbff;
    margin-bottom: 6px;
}

.bounty-sim-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(214, 232, 255, 0.88);
}

.bounty-sim-note {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.5;
    color: rgba(255, 214, 90, 0.8);
}

/* Persistent "MARKED" HUD chip while a bounty contract on you is live */
#bounty-marked-chip {
    position: fixed;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 720;
    padding: 5px 12px;
    border: 1px solid rgba(255, 92, 102, 0.7);
    border-radius: 5px;
    background: rgba(56, 8, 12, 0.85);
    color: #ffb9bd;
    font-family: var(--font-pixel, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    box-shadow: 0 0 14px rgba(255, 92, 102, 0.35);
    pointer-events: none;
    animation: psiGachaPulse 1.6s infinite;
}

.bounty-chip-skull {
    margin-right: 4px;
}

/* Death screen: items kept + Blood Price forfeiture breakdown */
#death-kept-items {
    margin: 6px auto 0;
    font-size: 12px;
    color: rgba(214, 232, 255, 0.85);
}

#death-bounty-breakdown {
    margin: 12px auto;
    max-width: 340px;
    text-align: left;
    border: 1px solid rgba(255, 92, 102, 0.55);
    border-radius: 8px;
    background: rgba(46, 8, 12, 0.72);
    padding: 10px 14px;
}

.death-bounty-head {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #ff9aa2;
    margin-bottom: 6px;
    text-align: center;
}

.death-bounty-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(251, 226, 226, 0.9);
}

.death-bounty-row b {
    color: #ffd7da;
}

@media (max-width: 640px) {
    .bounty-board-overlay {
        padding: 10px;
    }

    .bounty-board-panel {
        padding: 14px;
        max-height: 92vh;
    }

    .bounty-board-title {
        font-size: 18px;
    }

    .bounty-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .bounty-claim-btn {
        width: 100%;
    }
}

.mini-dome-tracker {
    position: fixed;
    left: 50%;
    top: 86px;
    transform: translateX(-50%);
    z-index: 720;
    min-width: 180px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 9px 13px 10px;
    border: 1px solid rgba(86, 246, 255, 0.58);
    border-radius: 6px;
    background: rgba(3, 18, 24, 0.82);
    box-shadow: 0 0 18px rgba(86, 246, 255, 0.22);
    color: #d7feff;
    font-family: var(--font-pixel, monospace);
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.mini-dome-tracker[hidden] {
    display: none;
}

.mini-dome-tracker-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(151, 250, 255, 0.78);
}

.mini-dome-tracker-vector {
    margin-top: 4px;
    font-size: 18px;
    color: #7dfcff;
}

.mini-dome-tracker-site {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(236, 255, 250, 0.78);
}

@media (max-width: 640px) {
    .mini-dome-tracker {
        top: 72px;
        min-width: 160px;
        padding: 8px 10px;
    }

    .mini-dome-tracker-vector {
        font-size: 16px;
    }
}

/* ======================================================================
   Solbyte Companion — conversation window + memory management (sp-solbyte
   tab; same DOM serves desktop panel, mobile modal, and gamepad cursor)
   ====================================================================== */

.solb-root {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(93, 244, 182, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(140deg, rgba(4, 24, 22, 0.94), rgba(8, 12, 18, 0.97) 58%, rgba(29, 23, 9, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.solb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.solb-head-names {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.solb-name {
    color: #d8ffe9;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.solb-tier {
    color: rgba(214, 230, 220, 0.66);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.solb-status {
    min-height: 12px;
    color: rgba(255, 214, 150, 0.85);
    font-size: 10px;
}

.solb-status:empty {
    display: none;
}

.solb-btn {
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(93, 244, 182, 0.28);
    border-radius: 6px;
    background: rgba(93, 244, 182, 0.1);
    color: #d8ffe9;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
}

.solb-btn:hover:not(:disabled) {
    background: rgba(93, 244, 182, 0.2);
}

.solb-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.solb-btn-small {
    min-height: 24px;
    padding: 3px 7px;
}

.solb-btn-danger {
    border-color: rgba(255, 110, 110, 0.4);
    background: rgba(255, 110, 110, 0.12);
    color: #ffd3d3;
}

.solb-btn-danger:hover:not(:disabled) {
    background: rgba(255, 110, 110, 0.24);
}

.solb-log {
    display: grid;
    gap: 4px;
    max-height: 210px;
    min-height: 84px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
}

.solb-log-row {
    color: rgba(224, 238, 232, 0.92);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.solb-log-name {
    font-weight: 900;
    color: rgba(155, 240, 184, 0.95);
}

.solb-log-you .solb-log-name {
    color: rgba(150, 200, 255, 0.95);
}

.solb-thinking {
    color: rgba(214, 230, 220, 0.55);
    font-style: italic;
}

.solb-quick-row,
.solb-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
}

.solb-input-row,
.solb-rename-row {
    display: flex;
    gap: 6px;
}

.solb-input,
.solb-rename-input {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(93, 244, 182, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.32);
    color: #eafff4;
    font-family: inherit;
    font-size: 11px;
}

.solb-input:disabled {
    opacity: 0.45;
}

.solb-empty {
    padding: 10px;
    color: rgba(214, 230, 220, 0.7);
    font-size: 11px;
    line-height: 1.4;
}

.solb-mem-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.solb-mem-tier {
    color: rgba(214, 230, 220, 0.66);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.solb-mem-list {
    display: grid;
    gap: 5px;
    max-height: 250px;
    overflow-y: auto;
}

.solb-mem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
}

.solb-mem-archived {
    opacity: 0.55;
}

.solb-mem-main {
    min-width: 0;
    color: rgba(224, 238, 232, 0.92);
    font-size: 10.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.solb-mem-cat {
    margin-right: 4px;
    color: rgba(155, 240, 184, 0.8);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.solb-mem-badge {
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid rgba(160, 180, 190, 0.26);
    border-radius: 5px;
    background: rgba(160, 180, 190, 0.1);
    color: rgba(218, 228, 232, 0.86);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.solb-mem-note {
    padding: 6px 8px;
    color: rgba(214, 230, 220, 0.62);
    font-size: 9.5px;
    line-height: 1.4;
}

.solb-mem-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.solb-forget-confirm {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 110, 110, 0.4);
    border-radius: 6px;
    background: rgba(255, 110, 110, 0.08);
    color: #ffd3d3;
    font-size: 10.5px;
    line-height: 1.35;
}

/* Proactive Solbyte toast — dismissible, shows even with the panel closed */
.solb-proactive-toast {
    position: fixed;
    right: 14px;
    bottom: 96px;
    z-index: 1400;
    display: grid;
    gap: 3px;
    max-width: 300px;
    padding: 10px 30px 10px 12px;
    border: 1px solid rgba(93, 244, 182, 0.4);
    border-radius: 8px;
    background: linear-gradient(140deg, rgba(4, 24, 22, 0.96), rgba(8, 12, 18, 0.97));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.solb-proactive-name {
    color: #9bf0b8;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.solb-proactive-text {
    color: rgba(228, 244, 238, 0.94);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.solb-proactive-dismiss {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(224, 238, 232, 0.75);
    font-size: 11px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .solb-log {
        max-height: 160px;
    }

    .solb-proactive-toast {
        right: 10px;
        bottom: 130px;
        max-width: 250px;
    }
}

/* ================================================================
   MAIN MENU — CLARITY REFRESH (v0.102.0)
   Goals:
   1. Lift the lighting — ambient glow shell, brighter text tiers,
      visible hairlines. Same editorial identity, no more murk.
   2. Real hierarchy — hero + PLAY dominate; content grouped into
      Play column and Supply Line rail instead of 12 equal rows.
   3. Labeled desktop nav rail (176px) + centered content column.
   Scoped to #start-screen[data-mm]. Presentation only.
   ================================================================ */

/* ---------- 1. TOKEN LIFT + AMBIENT SHELL ---------- */
#start-screen[data-mm] {
    --o-bg:          #06080e;
    --o-bg-1:        #0b0e16;
    --o-bg-2:        #11151f;
    --o-bg-hover:    #161b28;

    --o-line:        rgba(167, 194, 222, 0.16);
    --o-line-soft:   rgba(167, 194, 222, 0.09);
    --o-line-strong: rgba(191, 214, 236, 0.30);

    --o-text-2:      rgba(240, 243, 248, 0.82);
    --o-text-3:      rgba(228, 235, 244, 0.60);
    --o-text-4:      rgba(222, 230, 240, 0.42);

    --orb-panel:      rgba(11, 15, 24, 0.90);
    --orb-panel-lift: rgba(15, 20, 31, 0.92);
    --orb-line:       rgba(167, 194, 222, 0.18);
    --orb-line-soft:  rgba(167, 194, 222, 0.10);

    /* Refresh-layer card language */
    --mmx-line:       rgba(167, 194, 222, 0.17);
    --mmx-line-soft:  rgba(167, 194, 222, 0.10);
    --mmx-card-wash:  linear-gradient(180deg, rgba(148, 184, 226, 0.085), rgba(148, 184, 226, 0.02) 48%);
    --mmx-card-base:  rgba(12, 16, 26, 0.88);
    --mmx-radius:     12px;
    --mmx-shadow:     0 18px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --mmx-gold:       #dec27a;

    background:
        radial-gradient(ellipse 72% 46% at 20% -8%, rgba(0, 217, 255, 0.14), transparent 62%),
        radial-gradient(ellipse 58% 44% at 84% 0%, rgba(108, 63, 255, 0.13), transparent 60%),
        radial-gradient(ellipse 96% 64% at 50% 110%, rgba(0, 96, 150, 0.12), transparent 56%),
        linear-gradient(180deg, #090c15 0%, #06080e 46%, #070a12 100%);
}

/* Slightly stronger grid + rift halo so the shell reads lit, not void. */
#start-screen[data-mm]::before {
    background-image:
        linear-gradient(rgba(190, 214, 236, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190, 214, 236, 0.035) 1px, transparent 1px);
}
#start-screen[data-mm]::after {
    height: 400px;
    background:
        radial-gradient(ellipse 60% 90% at 30% -10%, rgba(0, 217, 255, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at 75% -5%, rgba(108, 63, 255, 0.15) 0%, transparent 65%);
}

#start-screen[data-mm] .mm-header {
    background: rgba(9, 12, 19, 0.78);
}

/* ---------- 2. HOME LAYOUT — Play column + Supply rail ---------- */
#start-screen[data-mm] .mm-home-layout,
#start-screen[data-mm] .mm-home-main,
#start-screen[data-mm] .mm-home-side {
    display: contents;
}

@media (min-width: 1100px) {
    #start-screen[data-mm].mm-desktop .mm-home-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr);
        gap: 18px;
        align-items: start;
    }
    #start-screen[data-mm].mm-desktop .mm-home-main,
    #start-screen[data-mm].mm-desktop .mm-home-side {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }
}

/* Supply Line rail label */
#start-screen[data-mm] .mm-side-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 -4px;
    color: rgba(238, 214, 148, 0.88);
    font-family: var(--o-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.30em;
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-side-label::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--mmx-gold);
    box-shadow: 0 0 10px rgba(222, 194, 122, 0.55);
}
#start-screen[data-mm] .mm-side-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(222, 194, 122, 0.38), transparent);
}

/* ---------- 3. SHARED PANEL LANGUAGE (home tab) ---------- */
#start-screen[data-mm] #mm-tab-home .mm-section,
#start-screen[data-mm] .mm-command-brief,
#start-screen[data-mm] .mm-orbryn-spend-rail,
#start-screen[data-mm] .mm-store-card,
#start-screen[data-mm] .mm-waglet-card,
#start-screen[data-mm] .mm-staking-card,
#start-screen[data-mm] .mm-auth-gate,
#start-screen[data-mm] .mm-duel-entry {
    border: 1px solid var(--mmx-line);
    border-radius: var(--mmx-radius);
    background: var(--mmx-card-wash), var(--mmx-card-base);
    box-shadow: var(--mmx-shadow);
}

#start-screen[data-mm] #mm-tab-home .mm-section {
    padding: 20px;
    margin: 0;
    border-top: 1px solid var(--mmx-line);
}

/* Home has one section (SURVIVOR); pin its ordinal to 01 — sibling count
   changed with the new wrappers, so the global nth-of-type ordinals would
   otherwise stamp it '06'. */
#start-screen[data-mm] #mm-tab-home .mm-section-header::before {
    content: '01';
}

#start-screen[data-mm] .mm-section-header {
    color: var(--o-text-2);
    font-size: 11px;
    letter-spacing: 0.30em;
    padding-bottom: 14px;
}

#start-screen[data-mm] #mm-tab-home .mm-section-deck {
    color: var(--o-text-3);
}

#start-screen[data-mm] .mm-alert {
    border-radius: var(--mmx-radius);
}

/* Survivor slot: keep the data-row look but let it breathe on the panel */
#start-screen[data-mm] #mm-tab-home .save-slot {
    border-radius: 10px;
    border-color: var(--mmx-line);
    background:
        linear-gradient(90deg, rgba(0, 217, 255, 0.10), transparent 40%),
        rgba(9, 13, 21, 0.72);
}

/* ---------- 4. HERO — the one thing to look at ---------- */
#start-screen[data-mm] .mm-hero-banner {
    min-height: clamp(300px, 46vw, 400px);
    margin-left: 0;
    margin-right: 0;
    border-radius: 16px;
    border-color: rgba(0, 217, 255, 0.34);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 44px rgba(0, 217, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#start-screen[data-mm].mm-desktop .mm-hero-banner {
    min-height: 0;
    height: clamp(320px, 30vw, 420px);
}

#start-screen[data-mm] .mm-hero-overlay {
    background:
        linear-gradient(90deg, rgba(2, 6, 12, 0.78), transparent 52%),
        linear-gradient(0deg, rgba(2, 6, 12, 0.72), transparent 58%);
}

#start-screen[data-mm] .mm-hero-sub {
    border-left-color: var(--o-cyan);
    background: rgba(0, 217, 255, 0.12);
    color: var(--o-cyan-hi);
}

@keyframes mmxPlayPulse {
    0%, 100% {
        box-shadow:
            0 16px 34px rgba(0, 217, 255, 0.20),
            0 0 0 0 rgba(0, 217, 255, 0.32),
            0 0 32px rgba(0, 217, 255, 0.18);
    }
    50% {
        box-shadow:
            0 16px 42px rgba(0, 217, 255, 0.30),
            0 0 0 7px rgba(0, 217, 255, 0.09),
            0 0 44px rgba(0, 217, 255, 0.28);
    }
}
#start-screen[data-mm] .mm-hero-primary-action {
    width: min(360px, 100%);
    min-height: 72px;
    border-radius: 10px;
    font-size: clamp(15px, 2.4vw, 19px);
    letter-spacing: 0.12em;
    animation: mmxPlayPulse 2.8s ease-in-out infinite;
}
#start-screen[data-mm] #mm-tab-home .mm-hero-primary-action {
    min-height: 72px;
}
/* Let the authored hover glow read cleanly instead of fighting the pulse. */
#start-screen[data-mm] .mm-hero-primary-action:hover,
#start-screen[data-mm] .mm-hero-primary-action:focus-visible {
    animation: none;
}

/* ---------- 5. FIELD STATUS readout (server / world / build) ---------- */
#start-screen[data-mm] .mm-command-brief {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 12px;
    margin: 0;
}
#start-screen[data-mm] .mm-brief-cell {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 7px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--mmx-line-soft);
    border-radius: 8px;
    background: rgba(148, 184, 226, 0.045);
}
/* Older layers punch out last-child edges for the flat divider design;
   the tile design needs all four edges back. */
#start-screen[data-mm] .mm-brief-cell:last-child {
    border-right: 1px solid var(--mmx-line-soft);
    border-bottom: 1px solid var(--mmx-line-soft);
}
#start-screen[data-mm] .mm-brief-cell-primary {
    border-color: rgba(125, 255, 156, 0.22);
    background: rgba(125, 255, 156, 0.05);
}
#start-screen[data-mm] .mm-brief-cell-server {
    border-color: rgba(0, 217, 255, 0.24);
    background: rgba(0, 217, 255, 0.06);
}
#start-screen[data-mm] .mm-brief-label {
    color: var(--o-text-4);
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-brief-cell strong {
    color: var(--o-text-2);
    font-family: var(--o-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
#start-screen[data-mm] .mm-brief-cell-primary strong {
    color: var(--o-online);
}

#start-screen[data-mm] .mm-brief-cell .mm-server-pill {
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--o-text-2);
    font-family: var(--o-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Status dot: neutral while connecting; main.js swaps the class to
   'server-dot online|offline|full' once /admin/health answers. */
#start-screen[data-mm] #server-status .mm-server-dot,
#start-screen[data-mm] #server-status .server-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    background: rgba(170, 190, 210, 0.65);
    box-shadow: 0 0 6px rgba(170, 190, 210, 0.35);
    animation: none;
}
#start-screen[data-mm] #server-status .server-dot.online {
    background: var(--o-online);
    box-shadow: 0 0 9px rgba(125, 255, 156, 0.75);
    animation: mmServerBeat 2.4s ease-in-out infinite;
}
#start-screen[data-mm] #server-status .server-dot.offline {
    background: var(--o-danger);
    box-shadow: 0 0 9px rgba(255, 68, 90, 0.65);
    animation: none;
}
#start-screen[data-mm] #server-status .server-dot.full {
    background: var(--o-warn);
    box-shadow: 0 0 9px rgba(255, 106, 61, 0.65);
    animation: none;
}
#start-screen[data-mm] .mm-brief-cell-version .mm-version-pill {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--o-text-3);
    font-family: var(--o-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- 6. FEATURE STRIP — quiet flavor, not a section ---------- */
#start-screen[data-mm] .mm-features {
    border-top: none;
    border-bottom: none;
    gap: 10px;
    margin-top: 0;
}
#start-screen[data-mm] .mm-feature-card {
    background:
        linear-gradient(180deg, rgba(148, 184, 226, 0.06), rgba(148, 184, 226, 0.015) 52%),
        rgba(12, 16, 26, 0.72) !important;
    border: 1px solid var(--mmx-line-soft) !important;
    border-radius: 10px;
    padding: 13px 14px;
    gap: 7px;
}
#start-screen[data-mm] .mm-feature-card + .mm-feature-card {
    border-left: 1px solid var(--mmx-line-soft) !important;
}
#start-screen[data-mm] .mm-feature-label {
    font-size: 13px;
}
#start-screen[data-mm] .mm-feature-desc {
    color: var(--o-text-3);
}

/* ---------- 7. SUPPLY LINE cards (spend rail / store / waglet) ---------- */
#start-screen[data-mm] .mm-orbryn-spend-rail {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin: 0;
    gap: 14px;
    padding: 18px;
    border-left: 3px solid rgba(222, 194, 122, 0.72);
}
#start-screen[data-mm] .mm-orbryn-spend-token {
    font-size: 26px;
    color: var(--mmx-gold);
}
#start-screen[data-mm] .mm-orbryn-spend-copy {
    color: var(--o-text-3);
}
#start-screen[data-mm] .mm-orbryn-spend-card {
    border-radius: 8px;
    min-height: 72px;
}

#start-screen[data-mm] .mm-store-card {
    border-left: 3px solid rgba(0, 217, 255, 0.66);
    padding: 18px 20px;
    margin: 0;
}
#start-screen[data-mm] .mm-store-card:hover,
#start-screen[data-mm] .mm-store-card:focus-visible {
    background: var(--mmx-card-wash), var(--orb-panel-lift);
    border-color: rgba(0, 217, 255, 0.38);
    border-left-color: rgba(0, 217, 255, 0.8);
    box-shadow: var(--mmx-shadow);
}

#start-screen[data-mm] .mm-waglet-card {
    border-left: 3px solid rgba(255, 106, 166, 0.62);
    margin: 0;
}
#start-screen[data-mm] .mm-waglet-card:hover,
#start-screen[data-mm] .mm-waglet-card:focus-visible {
    background: var(--mmx-card-wash), var(--orb-panel-lift);
    border-color: rgba(255, 106, 166, 0.42);
    border-left-color: rgba(255, 106, 166, 0.85);
    box-shadow: var(--mmx-shadow);
}

/* ---------- 8. DESKTOP — labeled nav rail + centered content ---------- */
#start-screen[data-mm].mm-desktop .mm-bottom-nav {
    width: 176px;
    align-items: stretch;
    padding: 14px 10px max(16px, env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, rgba(9, 13, 20, 0.98), rgba(6, 8, 14, 0.98));
    border-right: 1px solid var(--o-line);
}
#start-screen[data-mm].mm-desktop .mm-header {
    grid-template-columns: 176px minmax(0, 1fr) 176px;
}
#start-screen[data-mm].mm-desktop .mm-content {
    width: calc(100vw - 196px);
    margin-left: 176px;
    margin-right: 20px;
}
/* The Loot tab has its own higher-specificity :has() width rule from the
   94px-rail era — keep it in sync with the 176px rail. */
#start-screen[data-mm].mm-desktop .mm-content:has(#mm-tab-loot.mm-tab-active) {
    width: calc(100vw - 196px);
    max-width: none;
}
#start-screen[data-mm].mm-desktop .mm-content > .mm-tab {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

#start-screen[data-mm].mm-desktop .mm-nav-section-label,
#start-screen[data-mm].mm-desktop .mm-nav-almanac-label {
    display: block;
    width: 100%;
    margin: 12px 0 2px;
    padding: 10px 12px 4px;
    border-top: 1px solid var(--o-line-soft);
    color: var(--o-text-4);
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: left;
}
#start-screen[data-mm].mm-desktop .mm-nav-section-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 4px;
}

/* Rail items become labeled rows. Scoped to .mm-bottom-nav so the
   spend-rail CTAs (which reuse .mm-nav-item for tab switching) stay cards. */
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-item {
    flex: 0 0 44px;
    min-height: 44px;
    max-height: 44px;
    width: 100%;
    margin: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--o-text-2);
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-item::before,
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-action::before {
    display: none;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-item:hover,
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-active {
    border-color: rgba(0, 217, 255, 0.26);
    background: rgba(0, 217, 255, 0.07);
    color: var(--o-text);
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-active::after {
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    height: auto;
    background: var(--o-cyan);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.46);
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-svg {
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 auto;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-label {
    width: auto;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-align: left;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-badge {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-fab {
    margin: 0;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-fab-circle {
    width: 28px;
    height: 28px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 6px;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-fab-circle .mm-nav-svg {
    width: 20px;
    height: 20px;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-fab-label {
    margin: 0;
}

#start-screen[data-mm].mm-desktop .mm-nav-utility {
    margin-top: auto;
    padding-top: 12px;
    width: 100%;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-action {
    flex: 0 0 38px;
    min-height: 38px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border-radius: 8px;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-action .mm-nav-svg {
    width: 18px;
    height: 18px;
    margin: 0;
}
#start-screen[data-mm].mm-desktop .mm-bottom-nav .mm-nav-action .mm-nav-label {
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* Shield the spend-rail CTAs from the OLD unscoped desktop nav rules
   (they capped every .mm-nav-item at 64px rows). Re-assert the card look. */
#start-screen[data-mm].mm-desktop .mm-orbryn-spend-actions .mm-nav-item {
    flex: initial;
    width: auto;
    min-height: 72px;
    max-height: none;
    margin: 0;
    padding: 13px 12px;
    border: 1px solid rgba(222, 194, 122, 0.30);
    border-radius: 8px;
    color: var(--o-text, #f2f0ea);
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.10), transparent 58%),
        rgba(255, 255, 255, 0.03);
}
#start-screen[data-mm].mm-desktop .mm-orbryn-spend-actions .mm-orbryn-spend-card-primary {
    border-color: rgba(0, 217, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(0, 217, 255, 0.12), transparent 60%),
        rgba(222, 194, 122, 0.06);
}
#start-screen[data-mm].mm-desktop .mm-orbryn-spend-actions .mm-nav-item:hover,
#start-screen[data-mm].mm-desktop .mm-orbryn-spend-actions .mm-nav-item:focus-visible {
    border-color: rgba(0, 217, 255, 0.44);
    background:
        linear-gradient(180deg, rgba(0, 217, 255, 0.10), transparent 58%),
        rgba(255, 255, 255, 0.04);
    color: var(--o-text, #f2f0ea);
}

/* ---------- 9. MOBILE POLISH ---------- */
@media (max-width: 1099px) {
    #start-screen[data-mm] .mm-hero-primary-action {
        width: 100%;
    }
}
@media (max-width: 700px) {
    #start-screen[data-mm] .mm-command-brief {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #start-screen[data-mm] .mm-brief-cell-server {
        grid-column: 1 / -1;
    }
    #start-screen[data-mm] .mm-brief-cell:last-child {
        border-bottom: 1px solid var(--mmx-line-soft);
    }
    #start-screen[data-mm] .mm-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    #start-screen[data-mm] .mm-feature-card {
        padding: 11px 10px;
    }
    #start-screen[data-mm] .mm-orbryn-spend-rail {
        padding: 14px;
    }
    #start-screen[data-mm] .mm-orbryn-spend-card {
        min-height: 58px;
    }
    #start-screen[data-mm] #mm-tab-home .mm-hero-primary-action {
        min-height: 64px;
    }
}

/* ---------- 10. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    #start-screen[data-mm] .mm-hero-primary-action,
    #start-screen[data-mm] #server-status .mm-server-dot,
    #start-screen[data-mm] #server-status .server-dot {
        animation: none !important;
    }
}

/* ---------- 11. FOLLOW-UPS (wager panel + modes) ---------- */
/* The rail's wager readout only appears when there is something to act on
   (mainMenu.setWagerStatus toggles the hidden attr). The min-900px rule
   sets display:grid, so the hidden state needs an explicit override. */
#start-screen[data-mm] .mm-player-status-panel[hidden] {
    display: none;
}

/* Battle Royale entry: align with the refresh card language. */
#start-screen[data-mm] .mm-mode-stack {
    margin: 0;
}
#start-screen[data-mm] #mm-br-button {
    border-radius: 10px;
}

/* ---------- 12. $ORBRYN BALANCE READOUTS (hero + store) ---------- */
@keyframes mmxBalancePulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

#start-screen[data-mm] .mm-hero-balance {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 132px;
    padding: 10px 16px 11px;
    border: 1px solid rgba(222, 194, 122, 0.46);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.14), rgba(222, 194, 122, 0.03) 55%),
        rgba(10, 10, 8, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(222, 194, 122, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    color: var(--o-text);
    cursor: pointer;
    text-align: right;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
#start-screen[data-mm] .mm-hero-balance:hover,
#start-screen[data-mm] .mm-hero-balance:focus-visible {
    border-color: rgba(238, 214, 148, 0.78);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(222, 194, 122, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    outline: none;
}
#start-screen[data-mm] .mm-hero-balance-label,
#start-screen[data-mm] .mm-store-balance-label {
    color: rgba(238, 214, 148, 0.92);
    font-family: var(--o-mono);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
#start-screen[data-mm] .mm-hero-balance-value,
#start-screen[data-mm] .mm-store-balance-value {
    color: #f6e7bd;
    font-family: var(--o-sans);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(222, 194, 122, 0.35);
    overflow-wrap: anywhere;
}
#start-screen[data-mm] .mm-hero-balance[data-status="loading"] .mm-hero-balance-value,
#start-screen[data-mm] .mm-store-command-balance[data-status="loading"] .mm-store-balance-value {
    animation: mmxBalancePulse 1.2s ease-in-out infinite;
}
#start-screen[data-mm] .mm-hero-balance[data-status="error"] .mm-hero-balance-value,
#start-screen[data-mm] .mm-store-command-balance[data-status="error"] .mm-store-balance-value {
    font-size: 13px;
    color: var(--o-text-3);
    text-shadow: none;
}

/* Store header readout */
#start-screen[data-mm] #mm-tab-store .mm-store-command {
    position: relative;
}
#start-screen[data-mm] .mm-store-command-balance {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 2;
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 150px;
    padding: 12px 16px;
    border: 1px solid rgba(222, 194, 122, 0.46);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.13), rgba(222, 194, 122, 0.03) 55%),
        rgba(12, 11, 6, 0.62);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    text-align: right;
}
#start-screen[data-mm] .mm-store-balance-refresh {
    margin-top: 2px;
    padding: 4px 9px;
    border: 1px solid rgba(222, 194, 122, 0.30);
    border-radius: 6px;
    background: transparent;
    color: rgba(238, 214, 148, 0.80);
    font-family: var(--o-mono);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
#start-screen[data-mm] .mm-store-balance-refresh:hover,
#start-screen[data-mm] .mm-store-balance-refresh:focus-visible {
    border-color: rgba(238, 214, 148, 0.62);
    background: rgba(222, 194, 122, 0.10);
    color: rgba(246, 231, 189, 0.98);
}
#start-screen[data-mm] .mm-store-command-balance[data-status="loading"] .mm-store-balance-refresh {
    opacity: 0.55;
    pointer-events: none;
}

/* Keep the store title clear of the readout on wide layouts */
@media (min-width: 701px) {
    #start-screen[data-mm] #mm-tab-store .mm-store-command {
        padding-right: clamp(200px, 24vw, 280px);
    }
}
@media (max-width: 700px) {
    #start-screen[data-mm] .mm-hero-balance {
        top: 12px;
        right: 12px;
        min-width: 110px;
        padding: 8px 12px 9px;
    }
    #start-screen[data-mm] .mm-store-command-balance {
        position: static;
        margin-top: 14px;
        justify-items: start;
        text-align: left;
        width: fit-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    #start-screen[data-mm] .mm-hero-balance .mm-hero-balance-value,
    #start-screen[data-mm] .mm-store-command-balance .mm-store-balance-value {
        animation: none !important;
    }
}

/* ---------- 13. FLOATING STORE BALANCE ---------- */
/* Sentinel marks the readout's docked spot; when it scrolls under the
   header, mainMenu flips the readout to a fixed chip below the header. */
#start-screen[data-mm] .mm-store-balance-sentinel {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

@keyframes mmxBalanceFloatIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#start-screen[data-mm] .mm-store-command-balance.mm-store-balance-floating {
    position: fixed;
    top: calc(max(14px, env(safe-area-inset-top, 0px)) + 52px);
    right: 24px;
    margin: 0;
    z-index: 35;
    animation: mmxBalanceFloatIn 200ms ease-out;
    background:
        linear-gradient(180deg, rgba(222, 194, 122, 0.16), rgba(222, 194, 122, 0.05) 55%),
        rgba(10, 9, 5, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(222, 194, 122, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

@media (max-width: 700px) {
    #start-screen[data-mm] .mm-store-command-balance.mm-store-balance-floating {
        right: 12px;
        justify-items: end;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    #start-screen[data-mm] .mm-store-command-balance.mm-store-balance-floating {
        animation: none !important;
    }
}

/* ==========================================================================
   WebXR (Quest) — Enter/Exit VR button
   Shown on the 2D page only while in gameplay and immersive-vr is supported.
   ========================================================================== */
.xr-enter-btn {
    position: absolute;
    right: 14px;
    /* Sits ABOVE the mobile touch cluster (Quest boots in touch mode and
       owns the lower-right corner) and above every HUD layer. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 190px);
    z-index: 60;
    pointer-events: auto;
    padding: 12px 20px;
    border: 1px solid rgba(125, 211, 252, 0.7);
    border-radius: 8px;
    background: rgba(8, 17, 28, 0.9);
    color: #7dd3fc;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.xr-enter-btn:hover {
    background: rgba(16, 43, 59, 0.95);
    border-color: #7dd3fc;
}

.xr-enter-btn--active {
    background: rgba(125, 211, 252, 0.18);
    color: #bae6fd;
    border-color: #bae6fd;
}

/* ============================================================
   MAIN MENU — HOME PULSE LAYER (v0.105.1)
   Live command brief (survivors online / peak / capacity) +
   interactive quick-intel shortcut cards. Appended layer: wins
   ties against all earlier menu redesign layers. Scoped to
   #start-screen[data-mm] per the menu layer rule.
   ============================================================ */

/* --- Command brief: brighter frame, live emphasis --- */
#start-screen[data-mm] .mm-command-brief {
    border: 1px solid rgba(94, 234, 212, 0.16);
    background: linear-gradient(135deg, rgba(10, 16, 26, 0.92), rgba(8, 20, 24, 0.88));
    box-shadow: inset 0 1px 0 rgba(148, 233, 255, 0.05);
}

#start-screen[data-mm] .mm-brief-cell strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

#start-screen[data-mm] .mm-brief-cell-live strong {
    font-size: 1.25em;
    line-height: 1.1;
    color: #5eead4;
    text-shadow: 0 0 14px rgba(94, 234, 212, 0.35);
    transition: color 160ms ease;
}

#start-screen[data-mm] .mm-brief-cell-live strong[data-state="loading"],
#start-screen[data-mm] .mm-brief-cell-live strong[data-state="offline"] {
    color: var(--o-text-3, #8fa3b8);
    text-shadow: none;
}

#start-screen[data-mm] .mm-brief-cell-live strong[data-state="live"]::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
    animation: mm-live-pulse 2.2s ease-in-out infinite;
    vertical-align: 2px;
}

@keyframes mm-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

/* --- Quick-intel shortcut cards (buttons, mm-nav-item) --- */
/* Shield: these carry .mm-nav-item for tab switching; re-assert the
   card look against the old unscoped .mm-desktop .mm-nav-item rules. */
#start-screen[data-mm] .mm-features .mm-feature-link,
#start-screen[data-mm].mm-desktop .mm-features .mm-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 16px 18px;
    margin: 0;
    font: inherit;
    text-align: left;
    text-transform: none;
    color: var(--o-text-2, #cfe3f2);
    background: linear-gradient(150deg, rgba(13, 20, 32, 0.95), rgba(9, 14, 24, 0.9));
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#start-screen[data-mm] .mm-features .mm-feature-link:hover,
#start-screen[data-mm] .mm-features .mm-feature-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(94, 234, 212, 0.12) inset;
}

#start-screen[data-mm] .mm-features .mm-feature-link:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.6);
    outline-offset: 2px;
}

#start-screen[data-mm] .mm-features .mm-feature-link .mm-feature-label {
    color: var(--o-text-1, #eef6ff);
    font-weight: 700;
}

#start-screen[data-mm] .mm-features .mm-feature-link .mm-feature-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 12px;
    color: rgba(94, 234, 212, 0.75);
    transition: transform 140ms ease;
}

#start-screen[data-mm] .mm-features .mm-feature-link:hover .mm-feature-arrow {
    transform: translateX(3px);
}

/* Kill the rail nav-item inner pill (::before) and hover wash on the
   quick-intel cards — those decorations are sized for the 64px bottom
   rail and render as an overlapping floating box inside the cards. */
#start-screen[data-mm] .mm-features .mm-feature-link::before {
    content: none;
}

#start-screen[data-mm] .mm-features .mm-feature-link:hover,
#start-screen[data-mm] .mm-features .mm-feature-link:focus-visible {
    background: linear-gradient(150deg, rgba(16, 26, 40, 0.97), rgba(10, 18, 30, 0.92));
}

/* The v3 layer strips .mm-feature-card chrome with !important
   (transparent bg, no border, sibling divider line). Re-assert the
   card look for the interactive shortcut variant at equal importance
   — this later layer wins the tie. */
#start-screen[data-mm] .mm-features .mm-feature-link {
    background: linear-gradient(150deg, rgba(13, 20, 32, 0.95), rgba(9, 14, 24, 0.9)) !important;
    border: 1px solid rgba(125, 211, 252, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#start-screen[data-mm] .mm-features .mm-feature-link + .mm-feature-link {
    border-left: 1px solid rgba(125, 211, 252, 0.12) !important;
}

#start-screen[data-mm] .mm-features .mm-feature-link:hover,
#start-screen[data-mm] .mm-features .mm-feature-link:focus-visible {
    background: linear-gradient(150deg, rgba(16, 26, 40, 0.97), rgba(10, 18, 30, 0.92)) !important;
    border-color: rgba(94, 234, 212, 0.45) !important;
}

/* --- Auth auto sign-in indication + screen transition (v0.105.1) --- */

/* Session probe row under the auth buttons: visible while Privy is still
   initializing, flips to "signing you in automatically" on session restore. */
#auth-screen .auth-session-probe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 8px;
    background: rgba(10, 22, 26, 0.6);
    color: #9ee8db;
    font-size: 12px;
    letter-spacing: 0.04em;
}

#auth-screen .auth-probe-spinner {
    width: 13px;
    height: 13px;
    flex: none;
    border: 2px solid rgba(94, 234, 212, 0.25);
    border-top-color: #5eead4;
    border-radius: 50%;
    animation: auth-probe-spin 800ms linear infinite;
}

@keyframes auth-probe-spin {
    to { transform: rotate(360deg); }
}

/* Auto sign-in keeps the full-screen loading surface opaque while the world
   initializes behind it. Only the obsolete auth controls may fade. */
#auth-screen.auth-screen-leaving {
    opacity: 1;
    pointer-events: none;
}

#auth-screen.auth-screen-leaving .auth-session-probe {
    opacity: 1;
}

#auth-screen button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Main menu entrance: soft fade-in when the start screen activates so the
   auth → menu handoff reads as a transition, not a hard cut. Opacity-only —
   transforms here would break position:fixed descendants (store float). */
#start-screen[data-mm].active {
    animation: mm-menu-enter 420ms ease both;
}

@keyframes mm-menu-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Opt-in sign-in card + auth→menu transition polish (v0.105.1) --- */

#auth-screen .auth-signedin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: 8px;
    background: rgba(10, 22, 26, 0.65);
    color: #cfe9e2;
    font-size: 13px;
    letter-spacing: 0.03em;
}

#auth-screen .auth-signedin strong {
    color: #5eead4;
    font-weight: 700;
    word-break: break-all;
}

#auth-screen .auth-signedin-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
}

#auth-screen .auth-auto-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: #9fb4c6;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}

#auth-screen .auth-auto-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #5eead4;
    cursor: pointer;
}

#auth-screen .auth-auto-toggle:hover {
    color: #d7e7f5;
}

/* Fuller auth → menu transition: the card drifts up and fades while the
   menu content rises in. Transform lives on inner content wrappers, never
   on the screen roots (position:fixed descendants). */
#auth-screen .auth-panel-flow {
    transition: opacity 420ms ease, transform 420ms ease;
}

#auth-screen.auth-screen-leaving .auth-panel-flow {
    opacity: 0.12;
    transform: translateY(-14px);
}

#start-screen[data-mm].active {
    animation: mm-menu-enter 560ms ease both;
}

#start-screen[data-mm].active .mm-content {
    animation: mm-menu-rise 560ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes mm-menu-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}