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

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

: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;
}

#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;
    }
}

#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-boundary-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

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

.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, 96, 96, 0.82);
    background: rgba(255, 96, 96, 0.08);
}

.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-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));
}

.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); }
#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-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;
}

/* ── 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 {
    font-family: 'Courier New', monospace;
}

.sg-back {
    display: inline-block;
    padding: 8px 14px;
    margin-bottom: 10px;
    background: rgba(40, 60, 120, 0.3);
    border: 1px solid rgba(80, 120, 200, 0.2);
    border-radius: 4px;
    color: #8ac;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 44px;
    line-height: 28px;
}

.sg-back:hover {
    background: rgba(60, 90, 160, 0.4);
    border-color: rgba(80, 140, 255, 0.35);
    color: #cdf;
}

.sg-header {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.15);
}

.sg-skill-name {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 4px;
}

.sg-skill-level {
    font-size: 13px;
    color: #8ac;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.sg-next-unlock {
    margin: 0 auto 8px;
    max-width: 260px;
    color: #cfe5ff;
    font: 700 11px/1.35 "Courier New", monospace;
    letter-spacing: 0;
}

.sg-xp-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.sg-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #3080ff, #60c0ff);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sg-list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sg-level-group {
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
}

.sg-level-group.current-level {
    border-color: rgba(80, 140, 255, 0.3);
    background: rgba(30, 50, 100, 0.25);
    box-shadow: 0 0 8px rgba(80, 140, 255, 0.1);
}

.sg-level-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #667;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.08);
}

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

.sg-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 6px;
    min-height: 44px;
    border-radius: 3px;
    transition: background 0.15s;
}

.sg-entry:hover {
    background: rgba(40, 60, 120, 0.15);
}

.sg-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
}

.sg-icon.unlocked {
    color: #4c8;
}

.sg-icon.locked {
    font-size: 12px;
}

.sg-icon.coming-soon {
    color: #667;
    font-size: 16px;
    letter-spacing: 2px;
}

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

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

.sg-type,
.sg-status {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 1px 5px;
    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: #ffb6b6;
    border-color: rgba(204, 102, 102, 0.32);
    background: rgba(70, 28, 28, 0.38);
}

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

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

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

.sg-entry-desc {
    font-size: 10px;
    color: #889;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

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

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

.sg-entry-req {
    font-size: 9px;
    color: #c66;
    margin-top: 3px;
    letter-spacing: 1px;
}

.sg-entry-soon {
    font-size: 9px;
    color: #886;
    margin-top: 3px;
    letter-spacing: 2px;
}

/* --- 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; }
}

/* --- 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-equip-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

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

.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;
    cursor: default;
}

@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;
}

/* --- 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));
}

/* --- 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-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 {
    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;
}

/* --- 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; }
}

/* --- 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: 4px;
}
.lockpick-channel-label {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--hud-text, #e0c860);
    text-shadow: 0 0 8px rgba(224, 200, 96, 0.5);
}
.lockpick-channel-track {
    width: 180px;
    height: 8px;
    background: rgba(8, 20, 40, 0.85);
    border: 1px solid rgba(224, 200, 96, 0.3);
    border-radius: 4px;
    overflow: hidden;
}
.lockpick-channel-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #e0c860, #f0e080);
    border-radius: 3px;
    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;
}

@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;
    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-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: grab;
    border-color: rgba(80, 120, 200, 0.2);
    transition: all 0.12s;
    touch-action: none;
}

.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-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;
}

/* --- 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%;
}

.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: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    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: 30;
    pointer-events: auto;
    font-family: 'Courier New', monospace;
}

.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;
}

.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-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-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: 700px;
    max-height: 80vh;
    padding: 20px;
    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);
    overflow: auto;
}

.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);
}

.storage-crate-body {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    min-height: 200px;
}

.storage-crate-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 150, 170, 0.15);
    border-radius: 8px;
}

.storage-crate-col-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #88ccdd;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(100, 150, 170, 0.2);
    text-align: center;
}

.storage-crate-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

.storage-crate-item {
    display: grid;
    grid-template-columns: 40px 1fr 60px 70px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(100, 150, 170, 0.1);
    border-radius: 6px;
}

.storage-crate-item-visual {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.storage-crate-item-name {
    font-size: 11px;
    color: #aabbcc;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-crate-item-count {
    font-size: 12px;
    font-weight: bold;
    color: #88ccdd;
    letter-spacing: 0.5px;
    text-align: right;
}

.btn-storage-deposit, .btn-storage-withdraw {
    font-size: 10px;
    font-weight: bold;
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

.btn-storage-deposit {
    background: linear-gradient(135deg, #1a4a3a, #2a7a5a);
    color: #8fffa0;
    border: 1px solid #3aaa7a;
}

.btn-storage-deposit:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(100, 200, 150, 0.3);
}

.btn-storage-withdraw {
    background: linear-gradient(135deg, #3a4a6a, #5a7aaa);
    color: #88ccdd;
    border: 1px solid #6aaadd;
}

.btn-storage-withdraw:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(100, 170, 220, 0.3);
}

.storage-crate-empty {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 20px;
    opacity: 0.6;
}

/* --- 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-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 */
.sq-locked { border-left-color: #333; opacity: 0.45; }
.sq-locked .sq-dot { background: #555; box-shadow: none; }
.sq-locked .sq-name { color: #667; }

/* ---- 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-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) + 174px);
    left: 16px;
    z-index: 24;
    width: clamp(230px, 22vw, 330px);
    padding: 10px;
    border: 1px solid rgba(116, 214, 201, 0.36);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(14, 38, 42, 0.86), rgba(14, 16, 20, 0.9) 54%),
        linear-gradient(90deg, rgba(215, 165, 78, 0.16), rgba(104, 230, 199, 0.08));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: rgba(238, 248, 242, 0.96);
    font-family: 'Courier New', monospace;
    pointer-events: auto;
    backdrop-filter: blur(9px);
}

.olv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.olv-kicker,
.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-status {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 4px 6px;
    border: 1px solid rgba(142, 242, 198, 0.28);
    border-radius: 6px;
    background: rgba(31, 76, 64, 0.44);
    color: rgba(191, 255, 222, 0.96);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.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-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.olv-stat {
    min-width: 0;
}

.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-eligibility {
    margin-top: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.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-unknown {
    border: 1px solid rgba(158, 190, 210, 0.22);
    background: rgba(21, 34, 44, 0.44);
    color: rgba(224, 238, 244, 0.78);
}

.orbryn-launch-vault-panel[class*="claim-pulse-"] {
    animation: olv-claim-pulse 850ms ease-out;
}

.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);
}

@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(78px + env(safe-area-inset-top, 0px));
        left: calc(8px + env(safe-area-inset-left, 0px));
        width: min(236px, calc(100vw - 18px));
        padding: 8px;
    }

    .olv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .olv-stat-value {
        font-size: 11px;
    }

    .olv-eligibility {
        font-size: 10px;
    }

    .orbryn-launch-announcement {
        top: 14%;
        padding: 14px;
    }
}

/* 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;
}

.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.5px;
    line-height: 1.5;
}

.update-notice-btn {
    margin-top: 12px;
    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:hover,
.update-notice-btn:focus-visible {
    background: rgba(80, 200, 120, 0.35);
    border-color: rgba(80, 200, 120, 0.9);
}

.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-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;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 20;
    transform: translateX(-50%);
    animation: dmg-float 0.8s ease-out forwards;
}

@keyframes dmg-float {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.8); }
}

/* --- 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%);
    padding: 6px 24px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 200, 0, 0.4);
    border-radius: 4px;
    z-index: 100;
    pointer-events: auto;
    animation: sysupdate-fadein 0.4s ease-out;
}

.system-update-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.5);
    white-space: nowrap;
}

.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); }
}

/* --- Level Up Banner --- */
.levelup-banner {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: min(420px, calc(100vw - 40px));
    padding: 13px 22px 15px;
    border: 1px solid rgba(132, 226, 255, 0.36);
    border-radius: 10px;
    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 16px 42px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(80, 200, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    font-family: 'Courier New', monospace;
    font-size: 25px;
    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: 60;
    animation: levelup-pop 2.15s cubic-bezier(0.2, 0.8, 0.24, 1) forwards;
}

.levelup-banner .levelup-skill {
    display: block;
    font-size: 13px;
    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: min(260px, 70vw);
    height: 2px;
    margin-top: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(118, 232, 255, 0.9), transparent);
    opacity: 0.86;
}

@keyframes levelup-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-42%) scale(0.78);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1.02);
    }
    30% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-62%) scale(0.96);
    }
}

/* --- 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;
}

/* --- 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;
}

/* --- 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;
}

.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);
}

/* --- 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 .market-listing-grid,
    body.game-playing .market-sell-item-grid,
    body.game-playing .market-my-list,
    body.game-playing .market-collection-list,
    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 .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 {
        bottom: 6px;
        left: 50%;
        transform: translateX(-60%);
        gap: 3px;
    }

    .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: 60px;
        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; }

    .inventory-panel {
        bottom: 65px;
        padding: 8px 10px 10px;
        min-width: unset;
        min-height: unset;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .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;
    }

    #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);
    }

    /* 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;
    }

    #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;
    }

    /* DODGE button: orange-ish to match combat */
    #btn-mobile-dodge {
        border-color: rgba(255, 200, 60, 0.35);
        background: rgba(40, 35, 10, 0.6);
        color: #fc8;
    }

    #btn-mobile-dodge:active {
        background: rgba(200, 160, 40, 0.4);
        border-color: rgba(255, 200, 80, 0.7);
        box-shadow: 0 0 12px rgba(255, 200, 60, 0.3);
    }

    /* 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-back { padding: 6px 10px; font-size: 10px; min-height: 44px; }
    .sg-skill-name { font-size: 13px; }
    .sg-skill-level { font-size: 11px; }
    .sg-list { max-height: calc(100vh - 200px); }
    .sg-level-group { padding: 4px 6px; margin-bottom: 6px; }
    .sg-level-label { font-size: 9px; }
    .sg-entry { padding: 6px 4px; min-height: 44px; gap: 6px; }
    .sg-entry-name { font-size: 10px; }
    .sg-entry-desc { font-size: 9px; }

    /* 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 {
        font-size: 12px;
    }

    /* 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: 70px;
        font-size: 10px;
        padding: 4px 12px;
        letter-spacing: 2px;
    }

    /* Lockpick channel: compact on mobile */
    .lockpick-channel-wrap {
        bottom: 70px;
    }
    .lockpick-channel-label {
        font-size: 10px;
    }
    .lockpick-channel-track {
        width: 140px;
        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;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .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; }
    .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; }
    /* 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%;
    }
    .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 {
        right: 60px !important;
    }

    #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: top-right of the left joystick (joystick is 110x110 at left:16px bottom:16px) */
        left: 110px;
        bottom: 110px;
        margin-left: env(safe-area-inset-left, 0px);
        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));
        width: clamp(172px, 31dvw, 238px);
        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; }
    }

    /* --- 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-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-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: hidden;
}

.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;
}

.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;
}

.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;
}

.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 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;
}

/* ============================================
   PC GAMEPLAY CURSOR
   ============================================ */
@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;
        width: 24px;
        height: 24px;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 2147483647;
        opacity: 0.92;
        will-change: left, top;
        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 {
        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; }
    }

    /* 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;
}

/* 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-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;
}

/* 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-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-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-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 {
    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-orb-count {
    font-size: 20px;
    font-weight: bold;
    color: #60a0ff;
}

/* --- 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;
    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;
}

.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;
}

/* --- 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;
    max-height: 340px;
    overflow-y: auto;
    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-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-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;
    max-height: 160px;
    overflow-y: auto;
    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-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-selected {
    font-size: 12px;
    color: #aac;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.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;
    max-height: 340px;
    overflow-y: auto;
    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;
    max-height: 300px;
    overflow-y: auto;
    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;
}

/* --- 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-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;
    }

    .market-tab {
        font-size: 9px;
        padding: 6px 2px;
        letter-spacing: 1px;
    }

    .market-body {
        min-height: 200px;
        margin-bottom: 8px;
    }

    .market-listing-grid {
        grid-template-columns: 1fr;
        max-height: 50vh;
        gap: 6px;
    }

    .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));
        max-height: 120px;
    }

    .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 — left side panel (below vitals + buffs) */
.group-hud {
    position: fixed;
    top: 200px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 800;
    pointer-events: none;
    min-width: 160px;
    max-width: 200px;
}

.group-hud-header {
    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-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;
}

.group-member-distance {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: #8899aa;
    text-align: right;
}

/* 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;
}

.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);
}

/* Mobile group toggle button — positioned next to health bar */
.mobile-group-toggle {
    display: none; /* shown only on mobile via media query */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .group-hud {
        top: 90px;
        left: 6px;
        min-width: 130px;
        max-width: 150px;
    }

    .group-member-name {
        font-size: 10px;
    }

    .group-notification {
        top: 60px;
        padding: 8px 14px;
    }

    /* Mobile group toggle — next to health bar, before chat toggle */
    .mobile-group-toggle {
        display: flex;
        position: absolute;
        top: 10px;
        left: 170px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        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;
        cursor: pointer;
        touch-action: manipulation;
        z-index: 20;
        pointer-events: auto;
        transition: background 0.15s, border-color 0.15s;
    }
    .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);
    }

    /* Move chat toggle next to group toggle (after it) */
    .mobile-chat-toggle {
        left: 212px !important;
        top: 10px !important;
        bottom: auto !important;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ====================================================================
   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-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); }
}

/* 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; justify-content: center; 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; }

/* 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; }
}

/* 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;
}

.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;
}

/* 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;
}

.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: 700px;
}

.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-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;
}

.btn-wallet-copy,
.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-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-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(3, 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: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 14px;
}
.btn-staking-open,
.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-open:hover,
.btn-staking-refresh:hover,
.btn-staking-open: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: 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-disconnect,
    .btn-wallet-connect,
    .btn-staking-open,
    .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: 10px;
    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: 32px;
    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;
}

/* 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;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(52, 92, 170, 0.22), transparent 42%),
        radial-gradient(circle at 80% 72%, rgba(44, 184, 160, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(4, 10, 20, 0.96), rgba(6, 8, 14, 0.985));
    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(560px, calc(100vw - 40px));
    padding: 34px 28px 30px;
    border-radius: 24px;
    border: 1px solid rgba(120, 180, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(10, 16, 32, 0.92), rgba(8, 12, 24, 0.86));
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: left;
    backdrop-filter: blur(18px);
}

.startup-overlay-kicker {
    margin-bottom: 10px;
    color: rgba(146, 204, 255, 0.82);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.startup-overlay-title {
    margin: 0;
    color: #f4f8ff;
    font-size: clamp(1.8rem, 5vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.startup-overlay-detail {
    margin: 14px 0 0;
    max-width: 32rem;
    color: rgba(203, 217, 236, 0.84);
    font-size: 0.98rem;
    line-height: 1.55;
}

.startup-overlay-progress {
    position: relative;
    margin-top: 22px;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(95, 150, 255, 0.14);
}

.startup-overlay-progress-bar {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(116, 177, 255, 0), rgba(116, 177, 255, 0.95), rgba(104, 255, 224, 0.85), rgba(116, 177, 255, 0));
    animation: startupOverlaySweep 1.4s ease-in-out infinite;
}

@keyframes startupOverlaySweep {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(320%); }
}

.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; }

/* Xbox 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-lb, .gp-glyph-rb, .gp-glyph-lt, .gp-glyph-rt {
    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;
}

/* 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 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-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);
}

/* ── Dedicated Cosmetic Section (below equipment grid) ── */
.sp-cosmetic-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(200, 160, 60, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-cosmetic-label {
    font-family: var(--font-family, 'Courier New', monospace);
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(200, 160, 60, 0.5);
    writing-mode: vertical-lr;
    text-orientation: mixed;
}
.sp-cosmetic-slot {
    width: 76px;
    height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(200, 160, 60, 0.05);
    border: 1px solid rgba(200, 160, 60, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sp-cosmetic-slot:hover {
    border-color: rgba(200, 160, 60, 0.6);
    background: rgba(200, 160, 60, 0.1);
}
.sp-cosmetic-slot.empty {
    border-style: dashed;
}
.sp-cosmetic-slot.equipped {
    border-style: solid;
    box-shadow: 0 0 8px rgba(200, 160, 60, 0.2);
}
@media (max-width: 768px) {
    .sp-cosmetic-slot {
        width: 44px;
        height: 44px;
    }
}

/* ── 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;
    background: rgba(0, 0, 0, 0.75);
    animation: fadeIn 0.4s ease;
}

.onboarding-card {
    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;
    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);
}

.onboarding-card h2 {
    color: var(--text-accent, #00ddff);
    font-size: 18px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.onboarding-card > p {
    color: var(--text-secondary, #8899aa);
    font-size: 12px;
    margin: 0 0 16px 0;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.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;
    transition: background 0.15s, border-color 0.15s;
}

.onboarding-dismiss:hover {
    background: rgba(0, 140, 220, 0.35);
    border-color: rgba(0, 220, 255, 0.6);
}

@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 .create-character-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 20px;
}

#create-screen .create-character-option {
    display: grid;
    grid-template-rows: minmax(118px, 1fr) auto;
    gap: 8px;
    min-height: 174px;
    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: 118px;
    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 {
    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);
}

@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: 116px;
    }

    #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 .screen-content {
    padding: 56px 44px;
    min-width: 360px;
}

#loading-screen .loading-title {
    font-family: var(--oa-sans);
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--oa-text);
    margin: 0 0 4px 0;
    padding-left: 16px;
    position: relative;
    text-align: left;
    animation: none;
    text-transform: uppercase;
}
#loading-screen .loading-title::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 2px;
    background: var(--oa-cyan);
    animation: oaTickPulse 1.4s ease-in-out infinite;
}
#loading-screen .loading-title::after {
    content: 'TRANSMISSION';
    display: block;
    font-family: var(--oa-mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--oa-cyan);
    margin-top: 12px;
    padding-left: 0;
}

#loading-screen .loading-bar-container {
    width: 100%;
    height: 2px;
    background: var(--oa-bg-1);
    border: 1px solid var(--oa-line);
    border-radius: 0;
    margin: 28px 0 14px;
    position: relative;
    overflow: hidden;
}
#loading-screen .loading-bar {
    height: 100%;
    background: var(--oa-cyan);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.55);
    transition: width 0.3s ease-out;
    border-radius: 0;
}
/* Indeterminate scan sweep — visible even when loading-bar is 0-width */
#loading-screen .loading-bar-container::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;
}
@keyframes oaLoadingScan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#loading-screen .loading-hint {
    font-family: var(--oa-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--oa-text-3);
    text-align: left;
    padding-left: 20px;
    position: relative;
    text-transform: uppercase;
    margin-top: 8px;
    min-height: 1em;
}
#loading-screen .loading-hint::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 1px;
    background: var(--oa-text-3);
}

/* ================================================================
   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) {
    max-width: 1120px;
    padding-left: 48px;
    padding-right: 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, 1.08fr) minmax(320px, 0.92fr);
    gap: 18px;
    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-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 {
    grid-column: 1 / 2;
    grid-row: 2;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-wins {
    grid-column: 2 / 3;
    grid-row: 2;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-battle {
    grid-row: 3;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-inventory {
    grid-column: 1 / 2;
    grid-row: 4;
}

#start-screen[data-mm] #mm-tab-loot .mm-loot-equipped {
    grid-column: 2 / 3;
    grid-row: 4;
}

/* 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: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-top: 0;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

#start-screen[data-mm] #mm-tab-loot .mm-gacha-win {
    min-width: clamp(220px, 28vw, 304px);
    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-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-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-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%;
    }
}

/* 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;
}

.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;
}

.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(6, 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);
}

@media (max-width: 520px) {
    #start-screen[data-mm]:not(.mm-desktop) .mm-nav-label {
        font-size: 8px;
        letter-spacing: 0.03em;
    }

    #start-screen[data-mm]:not(.mm-desktop) .mm-nav-glyph {
        width: 24px;
        height: 22px;
    }
}

/* ================================================================
   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-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-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-buy-btn,
#start-screen[data-mm] #mm-tab-store .store-spin-btn,
#start-screen[data-mm] #mm-tab-store .store-waglet-secondary {
    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) {
    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 {
    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-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-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-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,
.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,
.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-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-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-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;
}

@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;
    }

    .skill-grid,
    .skill-grid--combat,
    .skill-grid--trade {
        grid-template-columns: repeat(2, 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;
    }
}

/* 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;
}

.bank-panel.station-panel {
    width: min(760px, calc(100vw - 32px)) !important;
}

.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="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="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 {
    min-height: 0;
}

.station-panel .shop-list-panel,
.station-panel .anvil-recipe-list,
.station-panel .handcraft-items,
.station-panel .wb-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-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 {
    min-height: 44px;
}

.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 {
    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;
    }
}

@media (max-width: 768px), (pointer: coarse) {
    .station-panel {
        width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
    }

    .station-header {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        min-height: 58px;
        padding: 10px 10px 9px 12px;
    }

    .station-input-legend {
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 5px;
        font-size: 9px;
        white-space: normal;
    }

    .station-panel .station-title {
        font-size: 15px;
    }

    .station-panel > :not(.station-header) {
        margin-right: 12px;
        margin-left: 12px;
    }

    .station-panel > .station-header + * {
        margin-top: 12px;
    }

    .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 {
        flex-direction: column;
    }

    .station-panel .shop-list-panel,
    .station-panel .anvil-recipe-list,
    .station-panel .handcraft-items,
    .station-panel .wb-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 .bank-grid,
    .station-panel .bank-inv-grid {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    }
}

/* ===== 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;
}