* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
        }
        html {
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            -webkit-text-size-adjust: 100%;
        }
        body {
            background: #0a1f0e;
            overflow: hidden;
            overscroll-behavior: none;
            font-family: monospace, "Microsoft YaHei", sans-serif;
            height: 100%;
            min-height: 100vh;
            min-height: 100dvh;
        }
        #app-root {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            width: 100%;
            max-width: 100vw;
            border: 2px solid #2d5a32;
            overflow: hidden;
            touch-action: manipulation;
        }
        /* 中间整块地图区（顶栏悬浮在其上，不占用纵向空间） */
        #game-stage {
            flex: 1;
            min-height: 0;
            position: relative;
            background: #1a3a1a;
            /* 小地图 bottom 抬高，避免被底栏遮住 */
            --bottom-dock-offset: 56px;
        }
        #game-stage:has(#bottom-dock:not(.minimized)) {
            --bottom-dock-offset: min(42vh, 380px);
        }
        #game-wrap {
            position: absolute;
            inset: 0;
            background: #1a3a1a;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
        }
        #hud-top-floating {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 40;
            pointer-events: none;
            padding: 5px 10px 0;
            display: flex;
            flex-direction: column;
        }
        #hud-top-floating > * {
            pointer-events: auto;
        }
        #hud-top-inner {
            position: relative;
            width: 100%;
            max-width: none;
            margin: 0;
            border-radius: 0;
            overflow: visible;
            border: none;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        #top-bar {
            display: block;
            padding: 0;
            color: #e8f4ec;
            font-size: 12px;
            line-height: 1.25;
            font-family: ui-sans-serif, system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
        }
        .hud-top-layout {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px 12px;
            padding: 6px 10px 8px;
        }
        .hud-left-stack {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
            flex: 0 1 auto;
            min-width: 0;
            max-width: min(268px, 46vw);
        }
        /* 左上角：整块轻底板 + 头像与血槽 */
        .hud-hero-panel.hud-hero-panel--fantasy {
            --hud-portrait-size: 72px;
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 8px;
            flex: 0 1 auto;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            padding: 6px 10px;
            border-radius: 12px;
            border: 1px solid rgba(100, 116, 139, 0.32);
            background: linear-gradient(
                165deg,
                rgba(15, 46, 28, 0.58) 0%,
                rgba(2, 12, 8, 0.62) 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 3px 12px rgba(0, 0, 0, 0.22);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            overflow: visible;
        }
        .hud-hero-panel.hud-hero-panel--fantasy > * {
            position: relative;
        }
        .hud-hero-portrait {
            position: relative;
            width: var(--hud-portrait-size);
            height: var(--hud-portrait-size);
            flex-shrink: 0;
        }
        .hud-exp-ring {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .hud-exp-ring__arc {
            transition: stroke-dasharray 0.35s cubic-bezier(0.33, 1, 0.68, 1);
        }
        .hud-hero-panel--fantasy .hud-avatar-wrap {
            position: absolute;
            inset: 10px;
            border-radius: 50%;
            overflow: hidden;
            padding: 0;
            margin: 0;
            z-index: 2;
            background: rgba(2, 6, 23, 0.35);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
        }
        .hud-hero-panel--fantasy .hud-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, sans-serif;
            font-size: 26px;
            line-height: 1;
            text-align: center;
            background:
                radial-gradient(circle at 40% 30%, rgba(134, 239, 172, 0.25) 0%, transparent 50%),
                linear-gradient(165deg, rgba(22, 55, 35, 0.9) 0%, rgba(6, 24, 14, 0.95) 100%);
        }
        .hud-hero-panel--fantasy .hud-avatar img.hud-avatar-img,
        .hud-hero-panel--fantasy .hud-avatar img.dom-icon-img {
            width: 88%;
            height: 88%;
            max-width: 88%;
            max-height: 88%;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
        }
        .hud-avatar-emoji {
            font-size: 26px;
            line-height: 1;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
        }
        .hud-avatar-initial {
            font-size: 19px;
            font-weight: 800;
            color: #ecfdf5;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            letter-spacing: 0.03em;
        }
        .hud-hero-level-orb {
            position: absolute;
            left: -2px;
            bottom: -2px;
            min-width: 28px;
            padding: 2px 6px 3px;
            border-radius: 999px;
            background: rgba(2, 6, 23, 0.65);
            border: 1px solid rgba(100, 116, 139, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            font-size: 9px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: #fde047;
            text-align: center;
            line-height: 1.15;
            z-index: 5;
        }
        .hud-hero-level-orb__prefix {
            display: inline;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: rgba(253, 224, 71, 0.75);
            margin-right: 2px;
        }
        .hud-hero-stats {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            height: var(--hud-portrait-size);
            display: flex;
            flex-direction: column;
            gap: 3px;
            align-self: center;
        }
        /* 生存属性：生命单行 + 四维 2×2 网格，全部常显 */
        .hud-vitals {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            width: 100%;
            position: relative;
        }
        .hud-vitals-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px 8px;
        }
        .hud-vital {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr) 24px;
            align-items: center;
            gap: 0 4px;
            min-width: 0;
        }
        .hud-vital--wide {
            grid-template-columns: 18px minmax(0, 1fr) 28px;
        }
        .hud-vital__ico {
            font-size: 11px;
            line-height: 1;
            text-align: center;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
            user-select: none;
        }
        .hud-vital__track {
            position: relative;
            height: 7px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(2, 6, 23, 0.55);
            border: 1px solid rgba(100, 116, 139, 0.3);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        .hud-vital--wide .hud-vital__track {
            height: 9px;
        }
        .hud-vital__fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            max-width: 100%;
            border-radius: inherit;
            transition: width 0.32s cubic-bezier(0.33, 1, 0.68, 1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        .hud-vital__val {
            font-size: 9px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: rgba(248, 250, 252, 0.92);
            text-align: right;
            line-height: 1;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
        }
        .hud-vital.warning .hud-vital__track {
            border-color: rgba(251, 191, 36, 0.55);
            box-shadow: inset 0 0 6px rgba(251, 191, 36, 0.15);
        }
        .hud-vital.warning--critical .hud-vital__track {
            border-color: rgba(248, 113, 113, 0.7);
            animation: hud-vital-pulse 1.2s ease-in-out infinite;
        }
        @keyframes hud-vital-pulse {
            0%,
            100% {
                box-shadow: inset 0 0 4px rgba(248, 113, 113, 0.2);
            }
            50% {
                box-shadow: inset 0 0 10px rgba(248, 113, 113, 0.45);
            }
        }
        .hud-disease-badge {
            position: absolute;
            top: -4px;
            right: -2px;
            font-size: 10px;
            line-height: 1;
            padding: 1px 4px;
            border-radius: 6px;
            background: rgba(127, 29, 29, 0.85);
            border: 1px solid rgba(248, 113, 113, 0.5);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
            pointer-events: none;
        }
        .hud-disease-badge[hidden] {
            display: none !important;
        }
        .hud-fantasy-bar {
            display: grid;
            grid-template-columns: 16px minmax(0, 1fr) minmax(26px, max-content);
            align-items: center;
            gap: 0 7px;
            min-width: 0;
        }
        .hud-fantasy-bar__label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 22px;
            font-family: ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: rgba(226, 232, 240, 0.88);
            user-select: none;
            border-radius: 4px;
            background: rgba(2, 6, 23, 0.4);
            border: 1px solid rgba(100, 116, 139, 0.22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .hud-fantasy-bar--hp .hud-fantasy-bar__label {
            color: #fecdd3;
            border-color: rgba(248, 113, 113, 0.28);
            background: rgba(127, 29, 29, 0.22);
        }
        .hud-fantasy-bar--hunger .hud-fantasy-bar__label {
            color: #fed7aa;
            border-color: rgba(251, 146, 60, 0.28);
            background: rgba(124, 45, 18, 0.2);
        }
        .hud-fantasy-bar--thirst .hud-fantasy-bar__label {
            color: #bae6fd;
            border-color: rgba(56, 189, 248, 0.28);
            background: rgba(12, 74, 110, 0.22);
        }
        .hud-fantasy-bar--comfort .hud-fantasy-bar__label {
            color: #fde68a;
            border-color: rgba(250, 204, 21, 0.28);
            background: rgba(113, 63, 18, 0.22);
        }
        .hud-fantasy-bar--fatigue .hud-fantasy-bar__label {
            color: #d8b4fe;
            border-color: rgba(167, 139, 250, 0.28);
            background: rgba(76, 29, 149, 0.22);
        }
        .hud-fantasy-bar__shell {
            min-width: 0;
            display: flex;
            align-items: center;
        }
        .hud-fantasy-bar__track {
            position: relative;
            width: 100%;
            height: 9px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(2, 6, 23, 0.5);
            border: 1px solid rgba(100, 116, 139, 0.28);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        .hud-fantasy-bar__fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            max-width: 100%;
            border-radius: inherit;
            transition: width 0.32s cubic-bezier(0.33, 1, 0.68, 1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }
        .hud-vital__fill--hp,
        .hud-fantasy-bar__fill--hp {
            background: linear-gradient(180deg, #fb7185 0%, #dc2626 55%, #b91c1c 100%);
        }
        .hud-vital__fill--hunger,
        .hud-fantasy-bar__fill--hunger {
            background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
        }
        .hud-vital__fill--thirst,
        .hud-fantasy-bar__fill--thirst {
            background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 50%, #0369a1 100%);
        }
        .hud-vital__fill--comfort,
        .hud-fantasy-bar__fill--comfort {
            background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
        }
        .hud-vital__fill--fatigue,
        .hud-fantasy-bar__fill--fatigue {
            background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 55%, #5b21b6 100%);
        }
        .hud-avatar--diseased {
            box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.85), 0 0 12px rgba(220, 38, 38, 0.45);
        }
        .hud-fantasy-bar__value {
            font-size: 10px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: rgba(248, 250, 252, 0.92);
            text-align: right;
            letter-spacing: -0.02em;
            line-height: 1;
            pointer-events: none;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
        }
        .hud-fantasy-bar.warning .hud-fantasy-bar__track {
            border-color: rgba(248, 113, 113, 0.55);
            box-shadow:
                inset 0 1px 2px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(248, 113, 113, 0.2);
            animation: hudBarWarnPulse 1.1s ease-in-out infinite;
        }
        @keyframes hudBarWarnPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.06); }
        }
        .hud-fantasy-bar.warning--critical .hud-fantasy-bar__label {
            animation: hudLabelPulse 0.85s ease-in-out infinite;
            color: #fecaca;
        }
        .hud-fantasy-bar.warning--critical .hud-fantasy-bar__track {
            animation: hudBarWarnPulse 0.65s ease-in-out infinite;
            border-color: rgba(248, 113, 113, 0.85);
        }
        @keyframes hudLabelPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.72; transform: scale(1.08); }
        }
        .hud-meta-row,
        .hud-meta-wrap {
            flex: 1 1 0;
            min-width: 0;
            max-width: min(100%, calc(100vw - 300px));
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-start;
            gap: 6px;
            padding: 6px 4px 4px;
            box-sizing: border-box;
        }
        /* 芯片组单行横滑，避免某一枚过长把整行撑乱 */
        .hud-meta-quick {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
            padding-bottom: 2px;
        }
        .hud-meta-quick::-webkit-scrollbar {
            height: 4px;
        }
        .hud-meta-quick::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background: rgba(100, 116, 139, 0.45);
        }
        .hud-meta-more-btn {
            display: none;
        }
        .hud-meta-drawer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            max-width: 100%;
        }
        .hud-meta-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 9px;
            min-height: 26px;
            max-width: min(28vw, 168px);
            min-width: 0;
            flex: 0 1 auto;
            box-sizing: border-box;
            border-radius: 999px;
            font-size: 10px;
            line-height: 1.2;
            color: #e2e8f0;
            background: rgba(2, 6, 23, 0.55);
            border: 1px solid rgba(100, 116, 139, 0.35);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            white-space: nowrap;
            overflow: hidden;
            flex-shrink: 0;
        }
        .hud-meta-chip__ico {
            font-size: 12px;
            line-height: 1;
            flex-shrink: 0;
        }
        .hud-meta-chip__val {
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hud-survival-chip {
            max-width: min(32vw, 160px);
        }
        .hud-meta-caravan-preview {
            max-width: min(30vw, 152px);
        }
        #caravan-preview-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hud-nav-goal-chip {
            max-width: min(30vw, 160px);
        }
        .hud-meta-weather.weather-display,
        .hud-meta-world-event.world-event-display {
            max-width: min(32vw, 172px);
        }
        .hud-meta-chip.hud-meta-audio {
            max-width: none;
            flex-shrink: 0;
            padding: 2px 6px;
        }
        .hud-meta-cap {
            background: linear-gradient(180deg, rgba(127, 29, 29, 0.55) 0%, rgba(69, 10, 10, 0.65) 100%);
            border-color: rgba(252, 165, 165, 0.35);
        }
        .hud-coord-chip {
            font-family: ui-monospace, "Cascadia Mono", monospace;
        }
        .hud-coord-chip .lbl {
            font-size: 9px;
            font-weight: 600;
            color: rgba(148, 163, 184, 0.95);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .hud-coord-chip--action {
            cursor: pointer;
            border-color: rgba(159, 212, 168, 0.35);
        }
        .hud-coord-chip--action:hover {
            background: rgba(48, 96, 68, 0.55);
            border-color: rgba(159, 212, 168, 0.55);
        }
        .hud-coord-chip--action:focus-visible {
            outline: 2px solid rgba(159, 212, 168, 0.75);
            outline-offset: 2px;
        }
        .hud-meta-weather.weather-display {
            margin: 0;
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-wrap: nowrap;
            white-space: nowrap;
            min-height: 26px;
            box-sizing: border-box;
            line-height: 1.2;
        }
        .weather-display__ico,
        .hud-meta-chip__ico.weather-display__ico {
            font-size: 13px;
            line-height: 1;
            flex-shrink: 0;
        }
        .weather-display__name {
            opacity: 0.95;
            white-space: nowrap;
            flex-shrink: 1;
            min-width: 0;
            max-width: 5.5em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .weather-display__eta,
        .world-event-display__eta {
            font-size: 10px;
            color: rgba(159, 212, 168, 0.88);
            white-space: nowrap;
            flex-shrink: 1;
            min-width: 0;
            max-width: 9em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .world-event-display__eta {
            color: rgba(203, 213, 225, 0.88);
        }
        .weather-display__eta:empty {
            display: none;
        }
        .weather-display__eta:not(:empty)::before {
            content: '·';
            margin-right: 4px;
            opacity: 0.55;
        }
        .hud-meta-world-event.world-event-display {
            margin: 0;
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-wrap: nowrap;
            white-space: nowrap;
            min-height: 26px;
            box-sizing: border-box;
            line-height: 1.2;
            border-color: rgba(148, 163, 184, 0.25);
        }
        .hud-meta-world-event.world-event-display.is-active {
            border-color: rgba(251, 146, 60, 0.45);
            background: rgba(40, 18, 8, 0.55);
        }
        .hud-meta-world-event.world-event-display.world-event--warning {
            border-color: rgba(250, 204, 21, 0.5);
            animation: world-event-pulse 2s ease-in-out infinite;
        }
        .hud-meta-world-event.world-event-display.world-event--friendly {
            border-color: rgba(74, 222, 128, 0.55);
            background: linear-gradient(135deg, rgba(20, 50, 30, 0.92), rgba(15, 40, 25, 0.88));
            box-shadow: 0 0 10px rgba(74, 222, 128, 0.25);
        }
        .hud-meta-world-event.world-event-display.world-event--active {
            border-color: rgba(248, 113, 113, 0.55);
            background: rgba(50, 10, 10, 0.6);
            animation: world-event-pulse 1.2s ease-in-out infinite;
        }
        .hud-meta-world-event .hud-meta-chip__ico {
            font-size: 13px;
            line-height: 1;
            flex-shrink: 0;
        }
        .world-event-display__name {
            opacity: 0.95;
            white-space: nowrap;
            flex-shrink: 1;
            min-width: 0;
            max-width: 4.2em;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 10px;
            line-height: 1.2;
            color: #fde68a;
        }
        .world-event-display__eta {
            font-size: 10px;
            line-height: 1.2;
            color: rgba(252, 165, 165, 0.9);
            font-variant-numeric: tabular-nums;
        }
        .world-event-display__eta:empty {
            display: none;
        }
        .world-event-display__eta:not(:empty)::before {
            content: '·';
            margin-right: 4px;
            opacity: 0.55;
        }
        @keyframes world-event-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
            50% { box-shadow: 0 0 12px 2px rgba(248, 113, 113, 0.35); }
        }
        .world-event-help-btn {
            flex-shrink: 0;
            margin-left: 2px;
            width: 18px;
            height: 18px;
            padding: 0;
            border: 1px solid rgba(251, 191, 36, 0.45);
            border-radius: 50%;
            background: rgba(30, 20, 5, 0.7);
            color: #fde68a;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
        }
        .world-event-help-btn:hover {
            background: rgba(60, 35, 8, 0.9);
            border-color: rgba(253, 224, 71, 0.7);
        }
        .hud-meta-audio.audio-settings-wrap {
            position: relative;
            padding: 2px 6px;
            gap: 0;
        }
        .audio-settings-btn {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 2px 4px;
            border-radius: 6px;
            opacity: 0.92;
        }
        .audio-settings-btn:hover {
            background: rgba(30, 41, 59, 0.55);
        }
        .audio-settings-btn--off {
            opacity: 0.45;
            filter: grayscale(0.6);
        }
        .audio-settings-popover {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 1200;
            min-width: 220px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.96);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .audio-settings-popover.is-hidden {
            display: none;
        }
        .audio-settings-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #e2e8f0;
            cursor: pointer;
        }
        .audio-settings-row input[type='range'] {
            flex: 1;
            min-width: 72px;
        }
        .audio-settings-val {
            min-width: 36px;
            text-align: right;
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
        }
        .audio-settings-hint {
            margin: 0;
            font-size: 10px;
            line-height: 1.4;
            color: #64748b;
        }
        .game-modal-panel--wide {
            max-width: 420px;
        }
        .beast-tide-help-body p {
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 1.55;
            color: #e2e8f0;
        }
        .beast-tide-help-muted {
            font-size: 12px !important;
            color: #94a3b8 !important;
            margin-bottom: 0 !important;
        }
        .dock-guide-btn {
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.75);
            color: #e2e8f0;
            border-radius: 6px;
            padding: 2px 8px;
            font-size: 14px;
            line-height: 1.2;
            cursor: pointer;
            margin-right: 4px;
        }
        .dock-guide-btn:hover {
            background: rgba(30, 41, 59, 0.95);
            border-color: rgba(226, 232, 240, 0.45);
        }
        .newbie-guide-body p {
            margin: 0 0 10px;
        }
        .newbie-guide-hint {
            margin: 0 12px 8px;
            padding: 8px 10px;
            font-size: 12px;
            line-height: 1.45;
            color: #fde68a;
            background: rgba(120, 53, 15, 0.25);
            border-radius: 8px;
            border: 1px solid rgba(251, 191, 36, 0.25);
        }
        .newbie-guide-hint[hidden] {
            display: none;
        }
        .newbie-guide-no-auto {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 12px 10px;
            font-size: 12px;
            color: #94a3b8;
            cursor: pointer;
        }
        .newbie-guide-actions {
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }
        /* 兽潮全屏特效（在 canvas 之上，与 vision-vignette 同层） */
        #world-event-fx {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        #world-event-fx.world-event-fx--warning {
            opacity: 1;
            background: radial-gradient(
                ellipse 85% 80% at 50% 50%,
                transparent 0%,
                transparent 42%,
                rgba(120, 50, 10, 0.28) 72%,
                rgba(60, 20, 0, 0.45) 100%
            );
            animation: world-event-fx-pulse 2.2s ease-in-out infinite;
        }
        #world-event-fx.world-event-fx--active {
            opacity: 1;
            background:
                radial-gradient(
                    ellipse 80% 75% at 50% 50%,
                    transparent 0%,
                    transparent 32%,
                    rgba(120, 20, 10, 0.42) 70%,
                    rgba(40, 0, 0, 0.62) 100%
                ),
                repeating-linear-gradient(
                    -18deg,
                    transparent,
                    transparent 40px,
                    rgba(180, 40, 20, 0.03) 40px,
                    rgba(180, 40, 20, 0.03) 42px
                );
            animation: world-event-fx-pulse 1.1s ease-in-out infinite;
        }
        #game-wrap.world-event--active {
            filter: brightness(0.92) saturate(1.08) contrast(1.04);
            animation: beast-tide-screen-shake 4.5s ease-in-out infinite;
        }
        @keyframes world-event-fx-pulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.12); }
        }
        @keyframes beast-tide-screen-shake {
            0%, 100% { transform: translate(0, 0); }
            12% { transform: translate(-1px, 1px); }
            24% { transform: translate(1px, -1px); }
            36% { transform: translate(-1px, -1px); }
            48% { transform: translate(1px, 1px); }
            60% { transform: translate(0, 0); }
        }
        .chat-coord-link {
            display: inline;
            margin: 0 2px;
            padding: 0 4px;
            border: none;
            border-radius: 4px;
            background: rgba(72, 140, 96, 0.45);
            color: #c8ffe0;
            font: inherit;
            font-size: inherit;
            cursor: pointer;
            text-decoration: underline;
            vertical-align: baseline;
        }
        .chat-coord-link:hover {
            background: rgba(96, 180, 120, 0.65);
            color: #fff;
        }
        .hud-tool-strip.hud-meta-tool-block {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding: 6px 8px;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.32);
            background: linear-gradient(
                165deg,
                rgba(15, 46, 28, 0.52) 0%,
                rgba(2, 12, 8, 0.58) 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 2px 8px rgba(0, 0, 0, 0.18);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            white-space: nowrap;
        }
        .hud-meta-tool-block {
            max-width: min(560px, 58vw);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            font-family: inherit;
        }
        .hud-meta-tool-block::-webkit-scrollbar {
            height: 4px;
        }
        .hud-meta-tool-block::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 4px;
        }
        .hud-tool-strip.hud-meta-tool-block .equipped-tool--hud-block {
            flex: 0 0 auto;
            max-width: min(140px, 36vw);
        }
        .hud-meta-tool-block .equipped-tool--hud-block {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            min-width: 0;
            max-width: min(200px, 28vw);
            margin: 0;
            padding: 0 8px 0 0;
            border-radius: 0;
            border: none;
            border-right: 1px solid rgba(148, 163, 184, 0.28);
            background: transparent;
            box-shadow: none;
            font-family: inherit;
            font-size: 10px;
            font-weight: 600;
            color: #e2e8f0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        .hud-tool-strip.hud-meta-tool-block .tool-efficiency,
        .hud-meta-tool-block .tool-efficiency {
            display: inline-flex;
            flex: 0 0 auto;
            flex-wrap: nowrap;
            align-items: center;
            min-width: 0;
            margin: 0;
            justify-content: flex-start;
            font-family: inherit;
            font-size: 10px;
            font-weight: 600;
            color: #e2e8f0;
        }
        .hud-tool-strip.hud-meta-tool-block .eff-badge,
        .hud-meta-tool-block .eff-badge {
            flex: 0 0 auto;
            font-family: inherit;
            font-size: 10px;
            font-weight: 600;
            color: #e2e8f0;
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0 2px;
            white-space: nowrap;
        }
        .hud-meta-tool-block .hud-meta-tool-eff {
            max-width: none;
            flex-wrap: nowrap;
        }
        @media (max-width: 720px) {
            body {
                padding: 0;
            }
            #app-root {
                border-width: 0;
                border-radius: 0;
            }
            .hud-top-layout {
                flex-direction: column;
                align-items: stretch;
            }
            .hud-left-stack {
                width: 100%;
                max-width: 100%;
            }
            .hud-hero-panel.hud-hero-panel--fantasy {
                width: 100%;
                max-width: 100%;
            }
            .hud-hero-panel {
                max-width: 100%;
            }
            .hud-tool-strip.hud-meta-tool-block {
                width: 100%;
                max-width: 100%;
            }
            .hud-meta-row,
            .hud-meta-wrap {
                max-width: 100%;
                justify-content: flex-start;
                flex-direction: column;
                align-items: stretch;
                gap: 6px;
                padding: 4px 0 2px;
            }
            .hud-meta-quick {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                gap: 6px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scrollbar-width: thin;
                padding-bottom: 2px;
            }
            .hud-meta-more-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                min-height: 32px;
                padding: 4px 10px;
                border-radius: 999px;
                border: 1px solid rgba(148, 163, 184, 0.4);
                background: rgba(15, 23, 42, 0.85);
                color: #e2e8f0;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
            }
            .hud-meta-more-btn[aria-expanded='true'] {
                border-color: rgba(74, 222, 128, 0.55);
                color: #bbf7d0;
            }
            .hud-meta-drawer {
                display: none;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
                width: 100%;
                padding: 6px 4px 2px;
                border-radius: 10px;
                background: rgba(2, 6, 23, 0.72);
                border: 1px solid rgba(100, 116, 139, 0.28);
            }
            .hud-meta-drawer.is-open {
                display: flex;
            }
            .hud-meta-wrap .weather-display__eta,
            .hud-meta-wrap .world-event-display__eta {
                display: none;
            }
            .hud-meta-wrap .weather-display__name,
            .hud-meta-wrap .world-event-display__name {
                max-width: 4.5em;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #bottom-dock-toolbar {
                flex-direction: row;
                align-items: center;
                gap: 4px;
                padding-top: 4px;
                padding-bottom: 4px;
            }
            .dock-tabs-scroll {
                order: 1;
                flex: 1 1 auto;
                min-width: 0;
                overflow: visible;
            }
            #dock-tabs {
                flex-wrap: nowrap;
                width: 100%;
                min-width: 0;
                gap: 4px;
                padding-bottom: 0;
            }
            html.dock-mobile-compact .dock-tabs-scroll {
                overflow: visible;
            }
            html.dock-mobile-compact #dock-tabs {
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
                width: 100%;
            }
            html.dock-mobile-compact .dock-chat-wrap {
                display: none;
            }
            html.dock-mobile-compact .dock-tab,
            html.dock-mobile-compact .dock-more-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                min-height: 44px;
                padding: 4px 2px;
                border-radius: 8px;
                position: relative;
            }
            html.dock-mobile-compact .dock-tab__ico {
                display: block;
                font-size: 18px;
                line-height: 1;
            }
            html.dock-mobile-compact .dock-tab__lbl {
                font-size: 10px;
                line-height: 1.1;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            html.dock-mobile-compact .dock-more-btn {
                background: transparent;
                border: none;
                color: #888;
                font-family: inherit;
                cursor: pointer;
            }
            html.dock-mobile-compact .dock-more-btn.is-active,
            html.dock-mobile-compact .dock-more-btn:hover {
                color: #4ade80;
                background: #222;
            }
            html.dock-mobile-compact .dock-more-btn {
                z-index: 3;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }
            #hud-top-floating {
                padding-top: calc(4px + var(--safe-top));
                padding-left: calc(6px + var(--safe-left));
                padding-right: calc(6px + var(--safe-right));
            }
            #bottom-dock {
                padding-bottom: var(--safe-bottom);
            }
            .world-minimap-wrap {
                right: calc(6px + var(--safe-right));
                bottom: calc(8px + var(--bottom-dock-offset, 56px) + var(--safe-bottom));
                width: 112px;
            }
            .minimap-stage {
                height: 112px;
            }
            #bottom-dock-toolbar {
                padding-left: calc(8px + var(--safe-left));
                padding-right: calc(8px + var(--safe-right));
            }
            .dock-tab {
                min-height: 36px;
                padding: 6px 8px;
            }
            .dock-panel-tab,
            .dock-subtab,
            .leaderboard-tab {
                min-height: 40px;
                padding-bottom: 12px;
            }
            #inventory-grid .inv-slot {
                width: 48px;
                height: 48px;
                touch-action: manipulation;
            }
            #inventory-grid .inv-slot.has-item {
                cursor: pointer;
            }
            .dock-guide-btn,
            #bottom-dock-minimize {
                min-height: 36px;
                min-width: 36px;
            }
            .game-modal-panel {
                max-width: calc(100vw - 24px - var(--safe-left) - var(--safe-right));
                margin: 12px;
            }
        }
        html.is-mobile-ui #app-root {
            border-width: 0;
        }
        /* 竖屏：顶栏跑马灯收起、底栏略矮，给地图留高度 */
        html.is-mobile-ui.is-portrait {
            --hud-portrait-size: 44px;
            --mobile-dock-panel-h: min(30vh, 250px);
        }
        html.is-mobile-ui #game-stage {
            --bottom-dock-offset: 46px;
        }
        html.is-mobile-ui #game-stage:has(#bottom-dock:not(.minimized)) {
            --bottom-dock-offset: var(--mobile-dock-panel-h, min(30vh, 250px));
        }
        html.is-mobile-ui.is-portrait #world-marquee {
            display: none;
        }
        html.is-mobile-ui.is-portrait #game-stage:has(#bottom-dock:not(.minimized)) {
            --bottom-dock-offset: var(--mobile-dock-panel-h);
        }
        html.is-mobile-ui.is-portrait #bottom-dock {
            max-height: var(--mobile-dock-panel-h);
        }
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-chat.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-inventory.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-craft.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-pets.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-build.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-farming.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-codex.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-daily.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-events.active):not(.minimized),
        html.is-mobile-ui.is-portrait #bottom-dock:has(#panel-leaderboard.active):not(.minimized) {
            height: var(--mobile-dock-panel-h);
            min-height: 120px;
        }
        html.is-mobile-ui.is-portrait .world-minimap-wrap {
            width: 88px;
        }
        html.is-mobile-ui.is-portrait .minimap-stage {
            height: 88px;
        }

        /* 移动端：底栏「更多」类 Tab 必须隐藏（避免 display:flex 覆盖 [hidden]） */
        html.dock-mobile-compact .dock-tab[data-dock-tier='more'],
        html.dock-mobile-compact .dock-tab[hidden] {
            display: none !important;
        }
        html.is-mobile-ui.dock-mobile-compact #dock-tabs {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            width: 100%;
            gap: 2px;
        }
        html.is-mobile-ui.dock-mobile-compact .dock-tab,
        html.is-mobile-ui.dock-mobile-compact .dock-more-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            min-height: 34px;
            padding: 2px 1px;
            border-radius: 6px;
        }
        html.is-mobile-ui.dock-mobile-compact .dock-tab__ico {
            font-size: 15px;
        }
        html.is-mobile-ui.dock-mobile-compact .dock-tab__lbl {
            font-size: 9px;
        }
        html.is-mobile-ui.dock-mobile-compact #bottom-dock-toolbar {
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 0;
            padding: 2px calc(4px + var(--safe-right)) 2px calc(4px + var(--safe-left));
        }
        html.is-mobile-ui.dock-mobile-compact .dock-toolbar-primary {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            width: 100%;
            gap: 4px;
            min-height: 0;
        }
        html.is-mobile-ui.dock-mobile-compact .dock-tabs-scroll {
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
            order: unset;
        }
        html.is-mobile-ui.dock-mobile-compact .dock-toolbar-toggle,
        html.is-mobile-ui.dock-mobile-compact #bottom-dock-minimize {
            flex: 0 0 34px;
            width: 34px;
            min-width: 34px;
            min-height: 0;
            height: auto;
            align-self: stretch;
            margin: 0;
            border-radius: 6px;
            font-size: 11px;
            line-height: 1;
        }
        html.is-mobile-ui.dock-mobile-compact #dock-meta {
            display: none !important;
        }
        html.is-mobile-ui.dock-mobile-compact #dock-more-btn {
            display: flex !important;
        }
        html.is-mobile-ui #panel-inventory.dock-panel--tabbed {
            padding-top: 4px !important;
        }
        html.is-mobile-ui #panel-inventory .dock-panel-head {
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
            padding: 0 2px 6px;
        }
        html.is-mobile-ui #panel-inventory .dock-panel__title {
            display: none;
        }
        html.is-mobile-ui #panel-inventory .dock-panel-tabs {
            flex: 1 1 auto;
            order: 0;
            min-width: 0;
            justify-content: flex-start;
            gap: 0;
        }
        html.is-mobile-ui #panel-inventory .dock-panel-tab {
            min-height: 30px;
            padding: 2px 8px 8px;
            font-size: 12px;
        }
        html.is-mobile-ui .inv-gift-mode-btn {
            order: 0;
            flex: 0 0 auto;
            min-height: 28px;
            min-width: 28px;
            padding: 4px 8px;
            margin: 0;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            border: 1px solid rgba(74, 222, 128, 0.45);
            background: rgba(22, 78, 52, 0.35);
            color: #86efac;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        html.is-mobile-ui .inv-gift-mode-btn.is-active {
            border-color: #4ade80;
            background: rgba(74, 222, 128, 0.28);
            color: #dcfce7;
            box-shadow: none;
        }
        html.is-mobile-ui #panel-inventory .inventory-mobile-hint {
            display: none !important;
        }
        html.is-mobile-ui #panel-inventory #inventory-scroll {
            padding: 4px 8px 8px;
        }
        html.is-mobile-ui #bottom-dock.minimized {
            max-height: none;
        }
        html.is-mobile-ui #game-stage {
            --bottom-dock-offset: 52px;
        }
        /* 小地图改左下角并置于底栏之下，避免挡住右下角 Tab / 收起 / 更多 */
        html.is-mobile-ui .world-minimap-wrap {
            left: calc(6px + var(--safe-left));
            right: auto;
            bottom: calc(10px + var(--bottom-dock-offset, 52px) + var(--safe-bottom));
            width: 84px;
            z-index: 45;
        }
        html.is-mobile-ui .minimap-stage {
            height: 84px;
        }

        /* 移动端 HUD 芯片：覆盖 display:contents，横屏宽屏触控也生效 */
        html.is-mobile-ui .hud-top-layout {
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding: 2px 4px 4px;
        }
        html.is-mobile-ui .hud-left-stack {
            width: 100%;
            max-width: 100%;
        }
        html.hud-meta-mobile-compact .hud-tool-strip.hud-meta-tool-block {
            display: none !important;
        }
        html.hud-meta-mobile-compact .hud-hero-panel.hud-hero-panel--fantasy {
            --hud-portrait-size: 44px;
            padding: 3px 6px;
            gap: 4px;
        }
        html.hud-meta-mobile-compact .hud-vitals {
            gap: 2px;
        }
        html.hud-meta-mobile-compact .hud-vitals-grid {
            gap: 2px 4px;
        }
        html.hud-meta-mobile-compact .hud-vital__track {
            height: 5px;
        }
        html.hud-meta-mobile-compact .hud-vital--wide .hud-vital__track {
            height: 6px;
        }
        html.hud-meta-mobile-compact .hud-vital__val {
            font-size: 8px;
        }
        html.is-mobile-ui .hud-meta-wrap {
            width: 100%;
            max-width: 100%;
            flex: none;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 4px;
            padding: 0 calc(2px + var(--safe-right)) 2px calc(2px + var(--safe-left));
            box-sizing: border-box;
        }
        html.is-mobile-ui .hud-meta-quick {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 4px;
            width: 100%;
            overflow: visible;
            -webkit-overflow-scrolling: auto;
            padding-bottom: 0;
        }
        html.is-mobile-ui .hud-meta-drawer {
            display: none;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 6px 4px;
            border-radius: 10px;
            background: rgba(2, 6, 23, 0.72);
            border: 1px solid rgba(100, 116, 139, 0.28);
            box-sizing: border-box;
        }
        html.is-mobile-ui .hud-meta-drawer.is-open {
            display: flex;
        }
        html.is-mobile-ui .hud-meta-chip {
            max-width: 100%;
            min-width: 0;
            width: auto;
            padding: 5px 6px;
            font-size: 9px;
            justify-content: center;
            flex-shrink: 1;
        }
        html.is-mobile-ui .hud-meta-chip {
            min-height: 28px;
            padding: 3px 4px;
            font-size: 8px;
        }
        html.hud-meta-mobile-compact .hud-meta-drawer .hud-survival-chip {
            grid-column: 1 / -1;
            width: 100%;
            max-width: 100%;
            justify-content: center;
        }
        html.hud-meta-mobile-compact .hud-meta-drawer .hud-survival-chip .hud-meta-chip__val {
            font-size: 9px;
        }
        html.is-mobile-ui .hud-coord-chip .lbl {
            display: none;
        }
        html.is-mobile-ui .hud-meta-quick .weather-display__name,
        html.is-mobile-ui .hud-meta-quick .world-event-display__name {
            display: none;
        }
        html.is-mobile-ui .hud-meta-wrap .weather-display__eta,
        html.is-mobile-ui .hud-meta-wrap .world-event-display__eta {
            display: none;
        }
        html.is-mobile-ui .hud-meta-quick #caravan-preview-text {
            max-width: 2.8em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        html.is-mobile-ui .world-event-help-btn {
            min-width: 18px;
            min-height: 18px;
            padding: 0 4px;
            font-size: 10px;
        }
        html.is-mobile-ui .hud-meta-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 3px 6px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(15, 23, 42, 0.85);
            color: #e2e8f0;
            font-size: 9px;
            font-weight: 600;
            cursor: pointer;
            grid-column: auto;
        }
        html.is-mobile-ui #hud-top-floating {
            padding: 2px calc(2px + var(--safe-right)) 0 calc(2px + var(--safe-left));
        }
        html.is-mobile-ui #top-bar {
            font-size: 11px;
        }
        html.is-mobile-ui.is-portrait .world-minimap-wrap {
            width: 68px;
        }
        html.is-mobile-ui.is-portrait .minimap-stage {
            height: 68px;
        }

        .portrait-orient-hint {
            position: fixed;
            top: calc(6px + var(--safe-top));
            left: calc(8px + var(--safe-left));
            right: calc(8px + var(--safe-right));
            z-index: 280;
            max-width: 100%;
            pointer-events: none;
        }
        .portrait-orient-hint:not(.is-hidden):not([hidden]) {
            pointer-events: auto;
        }
        .portrait-orient-hint.is-hidden,
        .portrait-orient-hint[hidden] {
            display: none !important;
        }
        .portrait-orient-hint__inner {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.94);
            border: 1px solid rgba(74, 222, 128, 0.35);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .portrait-orient-hint__icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
            transform: rotate(90deg);
        }
        .portrait-orient-hint__text {
            flex: 1;
            min-width: 0;
        }
        .portrait-orient-hint__title {
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
            margin-bottom: 2px;
        }
        .portrait-orient-hint__sub {
            font-size: 11px;
            line-height: 1.35;
            color: #94a3b8;
        }
        .portrait-orient-hint__btn {
            flex-shrink: 0;
            min-height: 44px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(74, 222, 128, 0.45);
            background: rgba(74, 222, 128, 0.15);
            color: #bbf7d0;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            touch-action: manipulation;
        }
        .weather-effect-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 200;
            opacity: 0;
            transition: opacity 0.45s ease;
        }
        #weather-particles-host {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 201;
            display: none;
        }
        #weather-particles-host canvas {
            display: block;
            width: 100%;
            height: 100%;
            /* 内部分辨率已按 devicePixelRatio 放大，避免 CSS 拉伸发糊 */
            image-rendering: auto;
        }
        .weather-effect-overlay.rain {
            background: linear-gradient(135deg, rgba(0, 60, 180, 0.18) 0%, rgba(0, 40, 120, 0.08) 100%);
            opacity: 0.5;
        }
        .weather-effect-overlay.snow {
            background: radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
            opacity: 0.42;
        }
        .weather-effect-overlay.storm {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.38) 0%, rgba(40, 40, 90, 0.26) 100%);
            opacity: 0.62;
            animation: weather-lightning 2.8s ease-in-out infinite;
        }
        @keyframes weather-lightning {
            0%, 92%, 100% { opacity: 0.58; filter: brightness(1); }
            94% { opacity: 0.92; filter: brightness(1.35); }
            96% { opacity: 0.55; filter: brightness(0.85); }
        }
        /* 不对 Pixi 画布做 blur，否则会整屏发糊；氛围靠遮罩 + 粒子 */
        #game-wrap.weather-vision--rain {
            filter: saturate(0.94);
        }
        #game-wrap.weather-vision--snow {
            filter: brightness(1.03);
        }
        #game-wrap.weather-vision--storm {
            filter: brightness(0.92) saturate(0.94);
        }
        #game-wrap.game-wrap--night {
            filter: brightness(0.88) saturate(0.9);
        }
        .vision-vignette {
            position: absolute;
            inset: 0;
            z-index: 45;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease;
            background: radial-gradient(
                ellipse 72% 68% at 50% 48%,
                transparent 0%,
                transparent 38%,
                rgba(0, 12, 28, calc(var(--vision-strength, 0) * 0.55)) 72%,
                rgba(0, 4, 12, calc(var(--vision-strength, 0) * 0.92)) 100%
            );
        }
        .vision-vignette.is-active {
            opacity: 1;
        }
        .vision-vignette.vision-vignette--campfire {
            background: radial-gradient(
                ellipse 78% 72% at 50% 48%,
                transparent 0%,
                transparent 48%,
                rgba(40, 24, 8, calc(var(--vision-strength, 0) * 0.35)) 78%,
                rgba(0, 4, 12, calc(var(--vision-strength, 0) * 0.75)) 100%
            );
        }
        .weather-display.weather-display--severe {
            border-color: rgba(248, 113, 113, 0.55);
            box-shadow: 0 0 10px rgba(248, 80, 80, 0.25);
            animation: weather-chip-pulse 2s ease-in-out infinite;
        }
        .weather-display.weather-display--storm .weather-display__ico {
            animation: weather-icon-shake 2.4s ease-in-out infinite;
        }
        .weather-display.weather-display--night:not(.weather-display--severe) {
            border-color: rgba(147, 197, 253, 0.35);
            background: rgba(15, 30, 50, 0.55);
        }
        .weather-display.weather-display--rain {
            border-color: rgba(96, 165, 250, 0.4);
        }
        .weather-display.weather-display--snow {
            border-color: rgba(226, 232, 240, 0.45);
        }
        .weather-display__tag {
            margin-left: 4px;
            padding: 1px 5px;
            border-radius: 4px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #fecaca;
            background: rgba(127, 29, 29, 0.65);
            vertical-align: middle;
        }
        .weather-display--night .weather-display__tag {
            color: #bfdbfe;
            background: rgba(30, 58, 138, 0.55);
        }
        @keyframes weather-chip-pulse {
            0%, 100% { box-shadow: 0 0 8px rgba(248, 80, 80, 0.2); }
            50% { box-shadow: 0 0 14px rgba(248, 80, 80, 0.45); }
        }
        @keyframes weather-icon-shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-1px); }
            75% { transform: translateX(1px); }
        }
        #world-minimap.world-minimap--night {
            border-color: rgba(147, 197, 253, 0.5);
            box-shadow: 0 0 12px rgba(30, 64, 120, 0.35);
        }
        #world-minimap.world-minimap--rain {
            border-color: rgba(96, 165, 250, 0.55);
        }
        #world-minimap.world-minimap--snow {
            border-color: rgba(226, 232, 240, 0.55);
        }
        #world-minimap.world-minimap--storm {
            border-color: rgba(248, 113, 113, 0.65);
            box-shadow: 0 0 14px rgba(248, 80, 80, 0.35);
            animation: weather-chip-pulse 2.2s ease-in-out infinite;
        }
        .pets-section-title {
            font-size: 11px;
            color: rgba(226, 232, 240, 0.85);
            margin: 8px 0 6px;
        }
        .pet-tame-catalog {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 10px;
        }
        .mount-tame-block {
            margin-top: 4px;
        }
        .pet-tame-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .pet-tame-info {
            flex: 1;
            min-width: 0;
        }
        .pet-tame-ico {
            margin-right: 4px;
        }
        .pet-tame-name {
            font-weight: 700;
            color: #fdba74;
        }
        .pet-tame-meta {
            display: block;
            font-size: 10px;
            color: #94a3b8;
            margin-top: 2px;
        }
        .companions-list {
            padding: 4px 0 8px;
        }
        .companion-kind {
            display: inline-block;
            margin-right: 6px;
            padding: 1px 5px;
            border-radius: 4px;
            font-size: 9px;
            font-weight: 700;
            vertical-align: middle;
            color: #e2e8f0;
            background: rgba(148, 163, 184, 0.2);
            border: 1px solid rgba(148, 163, 184, 0.35);
        }
        .companion-kind--mount {
            color: #fde68a;
            background: rgba(251, 191, 36, 0.12);
            border-color: rgba(251, 191, 36, 0.35);
        }
        .pet-item,
        .mount-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            margin-bottom: 8px;
            border: 1px solid transparent;
        }
        .pet-active {
            border-color: rgba(74, 222, 128, 0.45);
            background: rgba(74, 222, 128, 0.08);
        }
        .pet-name {
            font-weight: 700;
            color: #fdba74;
        }
        .pet-stats {
            font-size: 10px;
            color: #cbd5e1;
            margin-top: 4px;
        }
        .pet-happiness {
            color: #4ade80;
        }
        .pet-on-field {
            color: #4ade80;
        }
        .mount-speed {
            color: #fdba74;
            margin-left: 8px;
        }
        .pet-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: flex-end;
        }
        .pet-btn,
        .mount-btn {
            background: #4ade80;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            color: #052e16;
        }
        .pet-btn.danger,
        .mount-btn.danger {
            background: #f87171;
            color: #450a0a;
        }
        .stat-sep {
            color: rgba(255, 255, 255, 0.35);
            font-size: 10px;
            user-select: none;
            margin: 0 1px;
        }
        .hud-exp-detail-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        #game-container { position: absolute; inset: 0; touch-action: none; }
        #game-canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            touch-action: none;
            -webkit-tap-highlight-color: transparent;
        }
        .world-minimap-wrap {
            position: absolute;
            right: 10px;
            bottom: calc(10px + var(--bottom-dock-offset, 56px));
            width: 128px;
            z-index: 60;
            transition: bottom 0.22s ease;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
        }
        .minimap-stage {
            position: relative;
            width: 100%;
            height: 128px;
            flex-shrink: 0;
        }
        .minimap-tooltip {
            position: absolute;
            z-index: 5;
            max-width: 120px;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 9px;
            line-height: 1.3;
            color: #ecfdf5;
            background: rgba(8, 16, 12, 0.92);
            border: 1px solid rgba(120, 180, 140, 0.45);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #world-minimap {
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(120, 180, 140, 0.45);
            border-radius: 6px;
            cursor: crosshair;
            pointer-events: auto;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
        }
        .minimap-legend-toggle {
            position: absolute;
            top: 4px;
            left: 4px;
            z-index: 2;
            width: 20px;
            height: 20px;
            padding: 0;
            border-radius: 4px;
            border: 1px solid rgba(120, 180, 140, 0.5);
            background: rgba(15, 24, 20, 0.88);
            color: #9fd4a8;
            font-size: 10px;
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
        }
        .minimap-legend-toggle--active {
            background: rgba(48, 96, 68, 0.95);
            color: #d1fae5;
        }
        .minimap-legend {
            position: relative;
            flex: 0 1 auto;
            max-height: min(28vh, 200px);
            overflow-x: hidden;
            overflow-y: auto;
            padding: 6px 8px;
            border-radius: 6px;
            background: rgba(8, 16, 12, 0.92);
            border: 1px solid rgba(120, 180, 140, 0.35);
            pointer-events: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.45) rgba(0, 0, 0, 0.4);
        }
        .minimap-legend.is-hidden {
            display: none !important;
        }
        .minimap-legend__title {
            margin: 0 0 4px;
            font-size: 9px;
            color: #9fd4a8;
            font-weight: 600;
        }
        .minimap-legend__list {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 8px;
            color: #cbd5e1;
            line-height: 1.35;
        }
        .minimap-legend__list li {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 2px;
        }
        .minimap-legend__dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .minimap-legend__dot--self { background: #4db8ff; border: 1px solid #0a2838; }
        .minimap-legend__dot--other { background: #f0a050; }
        .minimap-legend__dot--shelter-mine { background: #5ee88a; }
        .minimap-legend__dot--shelter { background: #d4a84a; }
        .minimap-legend__dot--beast { background: #f87171; border: 1px solid #7f1d1d; }
        .minimap-legend__dot--caravan { background: #c084fc; border: 1px solid #4c1d95; }
        .minimap-legend__ring {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1.5px solid rgba(248, 113, 113, 0.9);
            flex-shrink: 0;
        }
        .minimap-legend__ring--hunt {
            border-color: #fde047;
            background: rgba(253, 224, 71, 0.25);
        }
        .minimap-legend__ring--resource {
            border-color: #fbbf24;
            background: rgba(251, 191, 36, 0.25);
        }
        .minimap-legend__ring--shelter-nav {
            border-color: #5ee88a;
            background: rgba(94, 232, 138, 0.25);
        }
        .hud-nav-goal-chip--beast {
            border-color: rgba(253, 224, 71, 0.55);
            color: #fde68a;
        }
        .hud-nav-goal-chip--resource {
            border-color: rgba(251, 191, 36, 0.55);
            color: #fcd34d;
        }
        .hud-nav-goal-chip--shelter {
            border-color: rgba(94, 232, 138, 0.55);
            color: #86efac;
        }
        .hud-nav-goal-chip--notice {
            border-color: rgba(148, 163, 184, 0.55);
            color: #e2e8f0;
            animation: hud-nav-notice-pulse 0.6s ease;
        }
        @keyframes hud-nav-notice-pulse {
            0% { opacity: 0.55; }
            100% { opacity: 1; }
        }
        .minimap-legend__mark {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 7px solid #ff6eb4;
            flex-shrink: 0;
        }
        .minimap-legend__line {
            width: 14px;
            height: 0;
            border-top: 1.5px dashed rgba(200, 220, 200, 0.75);
            flex-shrink: 0;
        }
        .minimap-legend__arrow {
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-left: 6px solid rgba(200, 220, 200, 0.85);
            flex-shrink: 0;
        }
        .hud-nav-goal-chip--notice.hud-nav-goal-chip--resource {
            border-color: rgba(251, 191, 36, 0.55);
            color: #fcd34d;
        }
        .hud-nav-goal-chip--notice.hud-nav-goal-chip--shelter {
            border-color: rgba(94, 232, 138, 0.55);
            color: #86efac;
        }
        .hud-btn-chip {
            background: rgba(32, 64, 48, 0.9);
            border: 1px solid rgba(120, 200, 140, 0.45);
            color: #e8ffe8;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
        }
        .hud-btn-chip:hover { background: rgba(48, 96, 68, 0.95); }
        .codex-scroll {
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 0 2px 4px 0;
            font-size: 12px;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .codex-progress-card {
            padding: 10px 12px;
            margin-bottom: 10px;
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(159, 212, 168, 0.25);
        }

        .codex-progress-card__title {
            font-size: 12px;
            font-weight: 600;
            color: #9fd4a8;
            margin-bottom: 8px;
        }

        .codex-progress-row {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #94a3b8;
            margin-bottom: 4px;
        }

        .codex-progress-row__val {
            color: #e2e8f0;
        }

        .codex-progress-bar {
            height: 5px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .codex-progress-fill {
            height: 100%;
        }

        .codex-progress-fill--res {
            background: linear-gradient(90deg, #38bdf8, #4ade80);
        }

        .codex-progress-fill--recipe {
            background: linear-gradient(90deg, #a78bfa, #fbbf24);
        }

        .codex-progress-hint {
            margin: 0;
            font-size: 9px;
            color: #64748b;
            line-height: 1.35;
        }

        .codex-recipe-row--undiscovered {
            opacity: 0.55;
            border: 1px dashed rgba(148, 163, 184, 0.35);
        }

        .world-event-display--tide-alert {
            animation: worldEventTideAlert 0.9s ease-in-out infinite;
            border-color: rgba(248, 113, 113, 0.75) !important;
            box-shadow: 0 0 12px rgba(248, 113, 113, 0.35);
        }

        @keyframes worldEventTideAlert {
            0%,
            100% {
                filter: brightness(1);
            }
            50% {
                filter: brightness(1.25);
            }
        }
        .codex-section-title {
            margin: 10px 0 6px;
            color: #9fd4a8;
            font-size: 12px;
        }
        .codex-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 6px;
        }
        .codex-card {
            display: flex;
            gap: 6px;
            padding: 6px;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .codex-card--unknown {
            opacity: 0.72;
            border-style: dashed;
        }
        .codex-recipe-head { margin-bottom: 4px; }
        .codex-recipe-tag {
            font-size: 9px;
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 4px;
        }
        .codex-recipe-tag--ok { background: rgba(74, 222, 128, 0.2); color: #86efac; }
        .codex-recipe-tag--missing { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
        .codex-craft-btn {
            margin-top: 6px;
            font-size: 10px;
            padding: 3px 8px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid rgba(159, 212, 168, 0.35);
            background: rgba(48, 96, 68, 0.5);
            color: #d1fae5;
        }
        .codex-craft-btn:hover { background: rgba(48, 96, 68, 0.85); }
        .craft-item--highlight {
            outline: 2px solid rgba(251, 191, 36, 0.85);
            outline-offset: 1px;
            animation: craftHighlight 1.2s ease-in-out 2;
        }
        @keyframes craftHighlight {
            0%, 100% { background: rgba(0, 0, 0, 0.25); }
            50% { background: rgba(251, 191, 36, 0.12); }
        }
        .codex-card__icon {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            line-height: 1;
            overflow: hidden;
            user-select: none;
        }
        .codex-card__icon img.dom-icon-img,
        .codex-card__icon img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        .codex-card__name { font-weight: 600; color: #eee; }
        .codex-card__meta { color: #9aa; font-size: 10px; margin-top: 2px; }
        .codex-recipe-list { display: flex; flex-direction: column; gap: 6px; }
        .codex-recipe-row {
            padding: 6px 8px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }
        .codex-recipe-lv { color: #fbbf24; font-size: 10px; margin-left: 6px; }
        .codex-recipe-mats { color: #9aa; font-size: 10px; }
        .codex-empty { color: #888; }
        .codex-load-btn { margin-top: 8px; }

        .shelter-defense-panel {
            margin-bottom: 10px;
        }

        .shelter-defense-card {
            padding: 10px 12px;
            border-radius: 8px;
            background: rgba(30, 41, 59, 0.65);
            border: 1px solid rgba(96, 165, 250, 0.3);
        }

        .shelter-defense-card__title {
            font-size: 12px;
            font-weight: 600;
            color: #93c5fd;
            margin-bottom: 8px;
        }

        .shelter-defense-row {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #94a3b8;
            margin-bottom: 4px;
        }

        .shelter-defense-bar {
            height: 5px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .shelter-defense-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
        }

        .shelter-defense-stats {
            list-style: none;
            margin: 0 0 6px;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            font-size: 10px;
            color: #cbd5e1;
        }

        .shelter-defense-hint {
            margin: 0;
            font-size: 9px;
            color: #64748b;
            line-height: 1.35;
        }

        .return-summary-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 12px;
            color: #e2e8f0;
        }

        .return-summary-list__time {
            color: #94a3b8;
            margin-right: 6px;
            font-size: 11px;
        }

        .return-summary-list__msg {
            color: #94a3b8;
            font-size: 11px;
        }

        .return-summary-list__item--clickable {
            cursor: pointer;
            border-radius: 6px;
            padding: 4px 6px;
            margin: 0 -6px;
            transition: background 0.15s ease;
        }

        .return-summary-list__item--clickable:hover {
            background: rgba(56, 189, 248, 0.12);
        }

        .return-summary-list__item--clickable:active {
            background: rgba(56, 189, 248, 0.2);
        }

        .event-cat-filter,
        .return-summary-filter {
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(30, 41, 59, 0.6);
            color: #cbd5e1;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 999px;
            cursor: pointer;
        }

        .event-cat-filter.is-active,
        .return-summary-filter.is-active {
            border-color: #38bdf8;
            background: rgba(14, 116, 144, 0.35);
            color: #e0f2fe;
        }

        .event-cat-filter.is-disabled,
        .event-cat-filter:disabled,
        .return-summary-filter.is-disabled,
        .return-summary-filter:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .event-cat-toolbar,
        .return-summary-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }

        .event-log-group {
            margin-bottom: 8px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 8px;
            padding: 4px 8px 6px;
            background: rgba(15, 23, 42, 0.35);
        }

        .event-log-group__summary {
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            color: #e2e8f0;
            list-style: none;
            padding: 4px 0;
        }

        .event-log-group__summary::-webkit-details-marker {
            display: none;
        }

        .event-log-group__rows .event-log-row {
            margin-top: 6px;
        }

        .hud-nav-goal-chip {
            touch-action: manipulation;
            user-select: none;
        }

        .hud-nav-goal-chip--pressing {
            transform: scale(0.96);
            opacity: 0.85;
        }

        .world-minimap-wrap--peek {
            width: 200px;
            z-index: 85;
            transition: width 0.2s ease;
        }

        .world-minimap-wrap--peek .minimap-stage {
            height: 200px;
        }

        .world-minimap-wrap--peek #world-minimap {
            box-shadow:
                0 0 0 2px rgba(94, 232, 138, 0.45),
                0 4px 20px rgba(0, 0, 0, 0.55);
        }

        .return-summary-group {
            margin-bottom: 8px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 8px;
            padding: 4px 8px 6px;
            background: rgba(15, 23, 42, 0.45);
        }

        .return-summary-group__summary {
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            color: #e2e8f0;
            list-style: none;
        }

        .return-summary-group__summary::-webkit-details-marker {
            display: none;
        }

        .return-summary-group__count {
            font-weight: 400;
            color: #94a3b8;
            font-size: 11px;
        }

        .return-summary-empty {
            margin: 0;
            font-size: 12px;
            color: #94a3b8;
        }

        .return-summary-content .return-summary-list {
            margin-top: 6px;
        }

        /* 离线摘要 / 兽潮战报：内容区可滚动，底部按钮始终可见 */
        #return-summary-modal .game-modal-panel,
        #tide-end-summary-modal .game-modal-panel {
            display: flex;
            flex-direction: column;
            max-height: min(88dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
            width: min(400px, 100%);
        }

        #return-summary-modal .game-modal-header,
        #tide-end-summary-modal .game-modal-header,
        #return-summary-modal .game-modal-actions,
        #tide-end-summary-modal .game-modal-actions {
            flex-shrink: 0;
        }

        #return-summary-modal .game-modal-body,
        #tide-end-summary-modal .game-modal-body {
            flex: 1;
            min-height: 0;
            align-items: stretch;
            padding: 12px 16px 10px;
            gap: 0;
        }

        #return-summary-modal .game-modal-body {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #tide-end-summary-modal .game-modal-body {
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
        }

        #return-summary-modal .return-summary-toolbar,
        #return-summary-modal .event-cat-toolbar {
            flex-shrink: 0;
        }

        #return-summary-modal .return-summary-content {
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            padding-right: 2px;
        }

        #return-summary-modal .game-modal-actions,
        #tide-end-summary-modal .game-modal-actions {
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* 悬浮在地图层上方，不参与纵向 flex，避免挤压画布比例 */
        #bottom-dock {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 50;
            touch-action: pan-y;
            display: flex;
            flex-direction: column;
            border-top: 1px solid #333;
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.5);
            max-height: min(42vh, 380px);
            min-height: 0;
            overscroll-behavior: contain;
            overflow-x: hidden;
        }
        /* 聊天需要固定可用高度。须加 :not(.minimized)，否则特异性会压过 .minimized 导致「最小化无反应」 */
        #bottom-dock:has(#panel-chat.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
        }
        /* 背包格子多：与打造类似，底栏固定高度，在 #inventory-scroll 内滚动（勿用 height:auto 顶满视口却无内部滚动区） */
        #bottom-dock:has(#panel-inventory.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        /* 打造条目多：底栏占满可用高度，列表在 #craft-list 内滚动（勿与背包共用 height:auto，否则无明确高度无法出滚动区） */
        #bottom-dock:has(#panel-craft.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        /* 宠物面板：子 Tab 内各自在 .pets-panel-scroll 中滚动 */
        #bottom-dock:has(#panel-pets.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        /* 建造面板：子 Tab 内各自在 .build-panel-scroll 中滚动 */
        #bottom-dock:has(#panel-build.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        /* 种植面板：农田列表在 #farming-panel-scroll 内滚动 */
        #bottom-dock:has(#panel-farming.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        #bottom-dock:has(#panel-codex.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        #bottom-dock:has(#panel-leaderboard.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        #panel-leaderboard.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        #panel-codex.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        #panel-codex.active.dock-panel-pad {
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
        }
        #bottom-dock.minimized {
            max-height: none;
            height: auto;
            min-height: 0;
            overflow-y: visible;
        }
        #bottom-dock-toolbar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            border-bottom: 1px solid #333;
            flex-shrink: 0;
            gap: 8px;
        }
        .dock-toolbar-primary {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1 1 auto;
        }
        #dock-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .dock-tabs-scroll {
            flex: 1 1 auto;
            min-width: 0;
        }
        .dock-toolbar-toggle,
        #bottom-dock-minimize {
            flex-shrink: 0;
        }
        /* 桌面端：最小化按钮放最右侧（在 DOM 里是 toolbar 最后一个元素） */
        html:not(.is-mobile-ui) #dock-meta {
            margin-left: auto;
        }
        html.is-mobile-ui .dock-tab {
            flex-shrink: 0;
            white-space: nowrap;
        }
        .dock-chat-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            margin-right: 4px;
            flex-shrink: 0;
        }
        .dock-ico { margin-right: 0; line-height: 1; }
        .dock-chat-badge {
            position: absolute;
            top: -5px;
            right: -7px;
            min-width: 14px;
            height: 14px;
            padding: 0 3px;
            border-radius: 8px;
            background: #ef4444;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            line-height: 14px;
            text-align: center;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.85);
            pointer-events: none;
        }
        .dock-chat-wrap.has-unread .dock-ico {
            animation: dockChatPulse 1.2s ease-in-out infinite;
            filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.85));
        }
        .dock-tab[data-tab="chat"].has-unread {
            color: #86efac;
            text-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
        }
        @keyframes dockChatPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.12); opacity: 0.92; }
        }
        .dock-tab {
            background: transparent;
            border: none;
            color: #888;
            cursor: pointer;
            font-size: 12px;
            font-family: inherit;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .dock-tab__ico {
            display: none;
            line-height: 1;
        }
        .dock-tab__lbl {
            line-height: 1.2;
        }
        .dock-tab:hover { color: #ccc; background: #222; }
        .dock-tab.active { color: #4ade80; font-weight: bold; }
        #dock-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #aaa; }
        .dock-sep { color: #555; }
        .conn-off { color: #f87171; }
        .conn-on { color: #4ade80; }
        .dock-toolbar-toggle,
        #bottom-dock-minimize {
            background: #333;
            border: none;
            color: #ccc;
            width: 32px;
            height: 28px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            margin: 0;
            padding: 0;
            touch-action: manipulation;
        }
        .dock-toolbar-toggle:hover,
        #bottom-dock-minimize:hover {
            background: #444;
            color: #fff;
        }
        #bottom-dock-content {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        #bottom-dock.minimized #bottom-dock-content { display: none; }
        /* 聊天占满剩余高度并在内部滚动；背包 #inventory-scroll；打造 #craft-list；宠物/建造子面板内 .pets-panel-scroll / .build-panel-scroll */
        .dock-panel {
            display: none;
            flex-direction: column;
            min-height: 0;
        }
        .dock-panel.active { display: flex; }
        #panel-chat.active {
            flex: 1;
            overflow: hidden;
        }
        #panel-inventory.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        .inv-filter-hint {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 72px;
            padding: 16px 12px;
            text-align: center;
            font-size: 12px;
            color: #94a3b8;
        }
        .inv-filter-hint[hidden] {
            display: none !important;
        }
        #inventory-grid.inv-grid--empty {
            display: none !important;
        }
        #inventory-scroll {
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
        }
        #panel-craft.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        #panel-pets.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        /* 底栏带 Tab 面板：统一顶栏 + 下划线 Tab（背包 / 宠物 / 建造 / 排行榜） */
        .dock-panel--tabbed {
            padding-top: 8px !important;
        }

        .dock-panel-head,
        .leaderboard-panel__head {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
            padding: 0 2px 10px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.1);
            flex-shrink: 0;
            pointer-events: auto;
        }

        .dock-panel__title,
        .leaderboard-panel__title {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.14em;
            color: #64748b;
            line-height: 1;
            padding-bottom: 6px;
            user-select: none;
            flex-shrink: 0;
        }

        .dock-panel-tabs,
        .dock-subtabs,
        .leaderboard-tabs {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            margin: 0;
            padding: 0;
            flex-shrink: 0;
        }

        .dock-panel-head .dock-panel-tabs {
            flex: 1;
            justify-content: flex-end;
            min-width: 0;
        }

        .dock-panel-tab,
        .dock-subtab,
        .leaderboard-tab {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            min-width: 44px;
            min-height: 32px;
            padding: 4px 10px 10px;
            margin: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            color: #64748b;
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: color 0.15s ease;
        }

        .dock-panel-tab::after,
        .dock-subtab::after,
        .leaderboard-tab::after {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 4px;
            height: 2px;
            border-radius: 2px;
            background: transparent;
            transition: background 0.18s ease;
        }

        .dock-panel-tab:hover:not(.active),
        .dock-subtab:hover:not(.active),
        .leaderboard-tab:hover:not(.active) {
            color: #94a3b8;
        }

        .dock-panel-tab.active,
        .dock-subtab.active,
        .leaderboard-tab.active {
            color: #4ade80;
            font-weight: 600;
            border: none;
            background: transparent;
        }

        .dock-panel-tab.active::after,
        .dock-subtab.active::after,
        .leaderboard-tab.active::after {
            background: #4ade80;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
        }

        .dock-panel-tab:focus-visible,
        .dock-subtab:focus-visible,
        .leaderboard-tab:focus-visible {
            outline: none;
        }

        .dock-panel-tab:focus-visible::after,
        .dock-subtab:focus-visible::after,
        .leaderboard-tab:focus-visible::after {
            background: rgba(74, 222, 128, 0.55);
        }

        .dock-panel-head__action {
            flex-shrink: 0;
            align-self: flex-end;
            margin-bottom: 4px;
        }
        .dock-subtab-pane {
            display: none;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        .dock-subtab-pane.active {
            display: flex;
        }
        .pets-panel-scroll,
        .build-panel-scroll {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 0 2px 4px 0;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        #panel-build.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        #panel-farming.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        #farming-panel-scroll {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 0 2px 4px 0;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
        }
        .farming-summary-panel {
            margin-bottom: 10px;
        }

        .farming-summary-card {
            padding: 10px 12px;
            border-radius: 8px;
            background: rgba(30, 41, 59, 0.65);
            border: 1px solid rgba(74, 222, 128, 0.28);
        }

        .farming-summary-card__title {
            font-size: 12px;
            font-weight: 600;
            color: #9fd4a8;
            margin-bottom: 8px;
        }

        .farming-summary-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 12px;
            font-size: 10px;
            color: #cbd5e1;
            margin-bottom: 8px;
        }

        .farming-summary-warn {
            color: #fbbf24;
        }

        .farming-summary-bar {
            height: 5px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 4px;
        }

        .farming-summary-fill {
            height: 100%;
            background: linear-gradient(90deg, #22c55e, #86efac);
        }

        .farming-summary-meta {
            margin: 0 0 6px;
            font-size: 10px;
            color: #94a3b8;
        }

        .farming-summary-hint {
            margin: 0;
            font-size: 9px;
            color: #64748b;
            line-height: 1.35;
        }

        .farming-summary-hint--warn {
            color: #fbbf24;
        }

        .farming-section-title {
            font-size: 11px;
            color: rgba(226, 232, 240, 0.85);
            margin: 4px 0 8px;
        }
        .farming-empty {
            padding: 16px 12px;
            text-align: center;
            font-size: 12px;
            color: #94a3b8;
        }
        .farmlands-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .farmland-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .farmland-item--empty {
            cursor: pointer;
        }
        .farmland-item--empty:hover {
            border-color: rgba(74, 222, 128, 0.4);
            background: rgba(74, 222, 128, 0.1);
        }
        .farmland-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        .farmland-info {
            flex: 1;
            min-width: 0;
        }
        .farmland-title {
            font-weight: 700;
            color: #fdba74;
            font-size: 12px;
        }
        .farmland-coords {
            color: #94a3b8;
            font-weight: 400;
            font-size: 10px;
            margin-left: 4px;
        }
        .farmland-meta {
            font-size: 10px;
            color: #cbd5e1;
            margin-top: 4px;
        }
        .farmland-water {
            font-size: 10px;
            color: #7dd3fc;
            margin-top: 4px;
        }
        .farmland-progress {
            width: 100%;
            height: 6px;
            background: #333;
            border-radius: 3px;
            margin-top: 6px;
            overflow: hidden;
        }
        .farmland-progress-fill {
            height: 100%;
            background: #4ade80;
            transition: width 0.3s;
        }
        .farmland-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-end;
            flex-shrink: 0;
        }
        .farm-btn {
            padding: 5px 10px;
            border-radius: 6px;
            border: 1px solid rgba(74, 222, 128, 0.45);
            background: rgba(74, 222, 128, 0.12);
            color: #e2e8f0;
            font-size: 11px;
            cursor: pointer;
            font-family: inherit;
        }
        .farm-btn:hover:not(:disabled) {
            background: rgba(74, 222, 128, 0.22);
        }
        .farm-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .farm-wait-hint {
            font-size: 10px;
            color: #94a3b8;
        }
        .plant-crops {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid #333;
        }
        .plant-crops-title {
            font-size: 11px;
            color: #94a3b8;
            margin-bottom: 8px;
        }
        .crop-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .crop-option.disabled {
            opacity: 0.5;
        }
        .crop-option-main {
            font-size: 12px;
            color: #e2e8f0;
        }
        .crop-option-meta {
            font-size: 10px;
            color: #94a3b8;
            flex: 1;
            text-align: center;
        }
        #chat-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 8px 10px;
            font-size: 11px;
            color: #ddd;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
        }
        #chat-input-container {
            display: flex;
            padding: 8px;
            border-top: 1px solid #333;
            flex-shrink: 0;
        }
        #chat-input {
            flex: 1;
            background: #333;
            border: none;
            color: white;
            padding: 8px;
            border-radius: 8px;
            outline: none;
            font-size: 12px;
        }
        #chat-send,
        #btn-share-coord {
            border: none;
            padding: 8px 12px;
            border-radius: 8px;
            margin-left: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;
            flex-shrink: 0;
        }
        #chat-send {
            background: #4ade80;
            color: #1a472a;
        }
        #chat-send:hover {
            background: #6ee7a0;
        }
        #btn-share-coord {
            background: rgba(48, 96, 68, 0.95);
            color: #c8ffe0;
            border: 1px solid rgba(120, 200, 140, 0.45);
            padding: 8px 10px;
        }
        #btn-share-coord:hover {
            background: rgba(64, 120, 88, 0.98);
            color: #fff;
        }
        .dock-panel-pad { padding: 12px; color: #888; }
        .inv-grid {
            display: grid;
            width: 100%;
            max-width: 100%;
            /* 固定格子约 56px（与早期版本一致），列数随横向空间自动增加 */
            grid-template-columns: repeat(auto-fill, 56px);
            grid-auto-rows: 56px;
            gap: 8px;
            justify-content: start;
            align-content: start;
            padding: 8px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-sizing: border-box;
        }

        /* 建造面板：图纸格含多行材料/占地说明，行高须随内容增高，否则会挤出父级圆角区域 */
        #build-list.inv-grid,
        #building-owned-grid.inv-grid {
            grid-auto-rows: minmax(0, auto);
        }
        .inv-slot {
            width: 56px;
            height: 56px;
            box-sizing: border-box;
            border-radius: 8px;
            background: rgba(35, 48, 38, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.22);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.45);
        }
        .inv-slot.empty {
            background: rgba(22, 32, 24, 0.95);
            border-style: dashed;
            border-width: 1.5px;
            border-color: rgba(120, 180, 130, 0.45);
        }
        .inv-slot.disabled {
            opacity: 0.45;
            cursor: not-allowed !important;
            pointer-events: none;
        }

        #build-list .inv-slot {
            height: auto;
            min-height: 72px;
            align-self: stretch;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 4px;
            padding-bottom: 6px;
        }

        #build-list .inv-slot-icon {
            font-size: 22px;
        }
        .inv-slot.empty::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 4px;
            border: 1px dashed rgba(255, 255, 255, 0.12);
            pointer-events: none;
        }
        .inv-slot.locked {
            background: rgba(12, 16, 14, 0.92);
            border-style: dashed;
            border-color: rgba(80, 90, 85, 0.55);
            opacity: 0.72;
            cursor: not-allowed;
            pointer-events: none;
        }
        .inv-slot-lock {
            font-size: 15px;
            line-height: 1;
            opacity: 0.45;
            user-select: none;
            filter: grayscale(0.35);
        }
        .inv-slot.has-item {
            border-color: rgba(255, 200, 100, 0.25);
            background: linear-gradient(145deg, rgba(40, 50, 35, 0.9), rgba(15, 25, 15, 0.95));
            cursor: default;
        }
        .inv-slot.inv-slot--giftable {
            box-shadow:
                inset 0 0 0 1px rgba(74, 222, 128, 0.35),
                0 0 8px rgba(74, 222, 128, 0.2);
        }
        .inv-gift-mode-btn {
            padding: 4px 10px 8px;
            border-radius: 0;
            border: 1px solid rgba(74, 222, 128, 0.45);
            background: rgba(74, 222, 128, 0.1);
            color: #bbf7d0;
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
        }
        .inv-gift-mode-btn.is-active {
            background: rgba(74, 222, 128, 0.28);
            font-weight: 700;
        }
        .inventory-mobile-hint {
            margin: 0 0 6px;
            font-size: 11px;
            line-height: 1.35;
            color: #94a3b8;
        }
        .inv-slot-icon {
            font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, sans-serif;
            font-size: clamp(22px, 5vw, 30px);
            line-height: 1;
            user-select: none;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
        }
        .inv-slot-icon img.dom-icon-img {
            max-width: 90%;
            max-height: 90%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }
        .inv-slot-qty {
            position: absolute;
            right: 2px;
            bottom: 2px;
            z-index: 3;
            padding: 1px 4px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            color: #fde68a;
            background: rgba(0, 0, 0, 0.72);
            border: 1px solid rgba(255, 170, 68, 0.35);
            text-shadow: 0 1px 2px #000;
            font-variant-numeric: tabular-nums;
            line-height: 1.1;
            pointer-events: none;
        }
        .inv-slot.has-item:not(:has(.inv-slot-durability)) .inv-slot-qty {
            font-size: 11px;
        }
        .inv-equipped-badge {
            position: absolute;
            top: 3px;
            left: 3px;
            z-index: 3;
            font-size: 9px;
            font-weight: 700;
            line-height: 1.15;
            padding: 2px 5px;
            border-radius: 4px;
            color: #fef08a;
            background: rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(250, 204, 21, 0.45);
            text-shadow: 0 1px 2px #000;
            pointer-events: none;
            letter-spacing: 0.02em;
        }
        .chat-message {
            margin-bottom: 5px;
            word-break: break-word;
            font-size: 12px;
            line-height: 1.45;
        }
        .chat-message .chat-tag {
            font-weight: 700;
            margin-right: 2px;
        }
        .chat-message .chat-body {
            color: inherit;
        }
        .chat-message--player .chat-name {
            color: #4ade80;
            font-weight: 700;
        }
        .chat-message--player .chat-body {
            color: #e8f0ea;
        }
        .chat-message--system {
            color: #94a3b8;
            font-style: italic;
            font-size: 11px;
        }
        .chat-message--system .chat-tag {
            color: #64748b;
            font-style: normal;
        }
        .chat-message--survival {
            color: #fcd34d;
            font-weight: 600;
            border-left: 2px solid rgba(251, 191, 36, 0.65);
            padding-left: 6px;
            background: rgba(251, 191, 36, 0.08);
            border-radius: 0 4px 4px 0;
        }
        .chat-message--survival .chat-tag {
            color: #fbbf24;
        }
        .chat-message--world {
            color: #fecaca;
            font-weight: 600;
            border-left: 2px solid rgba(248, 113, 113, 0.7);
            padding-left: 6px;
            background: rgba(127, 29, 29, 0.22);
            border-radius: 0 4px 4px 0;
        }
        .chat-message--world .chat-tag {
            color: #f87171;
        }
        .chat-message--guide {
            color: #7dd3fc;
            font-size: 11px;
        }
        .chat-message--guide .chat-tag {
            color: #38bdf8;
        }
        .chat-message--error {
            color: #f87171;
            font-weight: 700;
        }
        .chat-message--error .chat-tag {
            color: #fca5a5;
        }
        .chat-name { color: #4ade80; font-weight: bold; }
        .chat-message-error { color: #f87171; font-weight: bold; }
        .muted { color: #666; }
        .craft-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
        }

        #chat-messages::-webkit-scrollbar,
        .craft-grid::-webkit-scrollbar,
        #inventory-scroll::-webkit-scrollbar,
        .codex-scroll::-webkit-scrollbar,
        .event-log-list::-webkit-scrollbar,
        #return-summary-modal .return-summary-content::-webkit-scrollbar,
        #tide-end-summary-modal .game-modal-body::-webkit-scrollbar,
        .daily-quest-list::-webkit-scrollbar,
        .combat-log-scroll::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        #chat-messages::-webkit-scrollbar-button,
        .craft-grid::-webkit-scrollbar-button,
        #inventory-scroll::-webkit-scrollbar-button,
        .codex-scroll::-webkit-scrollbar-button,
        .event-log-list::-webkit-scrollbar-button,
        #return-summary-modal .return-summary-content::-webkit-scrollbar-button,
        #tide-end-summary-modal .game-modal-body::-webkit-scrollbar-button,
        .daily-quest-list::-webkit-scrollbar-button,
        .combat-log-scroll::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }
        #chat-messages::-webkit-scrollbar-track,
        .craft-grid::-webkit-scrollbar-track,
        #inventory-scroll::-webkit-scrollbar-track,
        .codex-scroll::-webkit-scrollbar-track,
        .event-log-list::-webkit-scrollbar-track,
        #return-summary-modal .return-summary-content::-webkit-scrollbar-track,
        #tide-end-summary-modal .game-modal-body::-webkit-scrollbar-track,
        .daily-quest-list::-webkit-scrollbar-track,
        .combat-log-scroll::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
            margin: 4px 0;
        }
        #chat-messages::-webkit-scrollbar-thumb,
        .craft-grid::-webkit-scrollbar-thumb,
        #inventory-scroll::-webkit-scrollbar-thumb,
        .codex-scroll::-webkit-scrollbar-thumb,
        .event-log-list::-webkit-scrollbar-thumb,
        #return-summary-modal .return-summary-content::-webkit-scrollbar-thumb,
        #tide-end-summary-modal .game-modal-body::-webkit-scrollbar-thumb,
        .daily-quest-list::-webkit-scrollbar-thumb,
        .combat-log-scroll::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(96, 220, 140, 0.65), rgba(34, 160, 85, 0.45));
            border-radius: 8px;
            border: 2px solid rgba(0, 0, 0, 0.35);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        #chat-messages::-webkit-scrollbar-thumb:hover,
        .craft-grid::-webkit-scrollbar-thumb:hover,
        #inventory-scroll::-webkit-scrollbar-thumb:hover,
        .codex-scroll::-webkit-scrollbar-thumb:hover,
        .event-log-list::-webkit-scrollbar-thumb:hover,
        #return-summary-modal .return-summary-content::-webkit-scrollbar-thumb:hover,
        #tide-end-summary-modal .game-modal-body::-webkit-scrollbar-thumb:hover,
        .daily-quest-list::-webkit-scrollbar-thumb:hover,
        .combat-log-scroll::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(120, 235, 160, 0.85), rgba(52, 200, 110, 0.6));
        }
        #chat-messages::-webkit-scrollbar-corner,
        .craft-grid::-webkit-scrollbar-corner,
        .gift-modal-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 12px;
            font-size: 13px;
            color: #cbd5e1;
        }
        .world-event-fx--blood-moon {
            background: radial-gradient(
                ellipse at 50% 20%,
                rgba(127, 29, 29, 0.35) 0%,
                rgba(30, 10, 20, 0.15) 45%,
                transparent 70%
            );
            animation: world-event-pulse 2.2s ease-in-out infinite;
        }

        .caravan-trade-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid #334155;
        }
        .caravan-trade-row-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 12px;
            line-height: 1.35;
            color: #e2e8f0;
        }
        .caravan-trade-goods {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 8px;
            min-width: 0;
        }
        .caravan-trade-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            max-width: 100%;
        }
        .caravan-trade-item__icon {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            overflow: hidden;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.35);
        }
        .caravan-trade-item__icon img.dom-icon-img,
        .caravan-trade-item__icon img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        .caravan-trade-item__label {
            font-weight: 600;
            color: #f1f5f9;
            word-break: break-word;
        }
        .caravan-trade-arrow {
            flex-shrink: 0;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 700;
            padding: 0 2px;
        }
        .caravan-trade-stock {
            font-size: 10px;
            color: #94a3b8;
        }
        .caravan-trade-btn.game-modal-btn {
            flex: 0 0 auto;
            width: auto;
            min-width: 0;
            max-width: none;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.2;
            border-radius: 6px;
            white-space: nowrap;
        }
        .game-modal-actions--caravan .game-modal-btn {
            flex: 0 0 auto;
            max-width: none;
            padding: 6px 14px;
            font-size: 12px;
        }
        .caravan-trade-empty {
            color: #94a3b8;
            font-size: 13px;
        }

        .gift-modal-select,
        .gift-modal-qty {
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid #334155;
            background: #0f172a;
            color: #e2e8f0;
            font-size: 14px;
        }

        #inventory-scroll::-webkit-scrollbar-corner,
        .codex-scroll::-webkit-scrollbar-corner,
        .event-log-list::-webkit-scrollbar-corner,
        .daily-quest-list::-webkit-scrollbar-corner,
        .combat-log-scroll::-webkit-scrollbar-corner {
            background: transparent;
        }

        .craft-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s;
        }

        .craft-item:hover {
            background: rgba(255,255,255,0.1);
            border-color: #ffaa44;
        }

        .craft-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .craft-item--level-locked {
            opacity: 0.42;
            border-color: rgba(100, 116, 139, 0.35);
        }

        .craft-item--level-locked .craft-name {
            color: #94a3b8;
        }

        .craft-item--needs-facility,
        .craft-item--needs-materials {
            opacity: 0.62;
        }

        .craft-unlock-hint {
            margin-top: 4px;
            font-size: 10px;
            line-height: 1.35;
            color: #fbbf24;
        }

        .craft-item--level-locked .craft-unlock-hint {
            color: #94a3b8;
        }

        .craft-group {
            margin-bottom: 10px;
        }

        .craft-group__head {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            margin: 0 0 6px;
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.55);
            color: #e2e8f0;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
        }

        .craft-group__head:hover {
            border-color: rgba(251, 191, 36, 0.45);
        }

        .craft-group__title {
            flex: 1;
        }

        .craft-group__count {
            font-size: 10px;
            font-weight: 500;
            color: #94a3b8;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(51, 65, 85, 0.6);
        }

        .craft-group__chevron {
            width: 8px;
            height: 8px;
            border-right: 2px solid #94a3b8;
            border-bottom: 2px solid #94a3b8;
            transform: rotate(45deg);
            transition: transform 0.15s ease;
        }

        .craft-group--collapsed .craft-group__chevron {
            transform: rotate(-45deg);
        }

        .craft-group--collapsed .craft-group__body {
            display: none;
        }

        .craft-group__body {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .craft-info {
            flex: 1;
        }

        .craft-name {
            font-weight: bold;
            color: #ffaa44;
        }

        .craft-level {
            font-size: 10px;
            color: #888;
            margin-left: 8px;
        }

        .craft-materials {
            font-size: 11px;
            color: #ccc;
            margin-top: 4px;
        }

        .craft-missing {
            color: #f87171;
        }

        .craft-mat-nav {
            margin-left: 2px;
            padding: 0 5px;
            font-size: 10px;
            line-height: 1.4;
            border-radius: 4px;
            border: 1px solid rgba(74, 222, 128, 0.45);
            background: rgba(34, 80, 52, 0.65);
            color: #86efac;
            cursor: pointer;
            vertical-align: middle;
        }

        .craft-mat-nav:hover {
            background: rgba(48, 96, 68, 0.9);
            color: #ecfdf5;
        }

        .craft-mat-nav--hunt {
            border-color: rgba(248, 113, 113, 0.5);
            background: rgba(80, 30, 30, 0.65);
            color: #fca5a5;
        }

        .craft-mat-nav--hunt:hover {
            background: rgba(120, 40, 40, 0.9);
            color: #fee2e2;
        }

        .craft-mat-nav--farm {
            border-color: rgba(250, 204, 21, 0.5);
            background: rgba(70, 55, 20, 0.65);
            color: #fde68a;
        }

        .craft-mat-nav--farm:hover {
            background: rgba(90, 70, 25, 0.9);
            color: #fef9c3;
        }

        .craft-mat-nav--water {
            border-color: rgba(56, 189, 248, 0.5);
            background: rgba(20, 50, 70, 0.65);
            color: #7dd3fc;
        }

        .craft-mat-nav--water:hover {
            background: rgba(30, 70, 95, 0.9);
            color: #e0f2fe;
        }

        .craft-mat-nav--caravan {
            border-color: rgba(251, 191, 36, 0.55);
            background: rgba(70, 50, 15, 0.7);
            color: #fde68a;
        }

        .craft-mat-nav--caravan:hover {
            background: rgba(95, 70, 20, 0.9);
            color: #fef9c3;
        }

        .craft-mat-nav--inv {
            border-color: rgba(167, 139, 250, 0.5);
            background: rgba(55, 40, 85, 0.65);
            color: #c4b5fd;
        }

        .craft-mat-nav--inv:hover {
            background: rgba(75, 55, 115, 0.9);
            color: #ede9fe;
        }

        .inv-slot--focus {
            outline: 2px solid rgba(167, 139, 250, 0.85);
            outline-offset: -1px;
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
        }

        .game-modal-actions--caravan {
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        .caravan-auto-open-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #cbd5e1;
            cursor: pointer;
            user-select: none;
        }

        .caravan-auto-open-label input {
            accent-color: #fbbf24;
        }

        .dock-panel-head--with-action {
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .leaderboard-refresh-btn {
            margin-left: auto;
            padding: 2px 8px;
            font-size: 11px;
            border-radius: 6px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(30, 41, 59, 0.65);
            color: #cbd5e1;
            cursor: pointer;
        }

        .leaderboard-refresh-btn:hover {
            border-color: rgba(56, 189, 248, 0.45);
            color: #e0f2fe;
        }

        .craft-btn {
            background: #4ade80;
            border: none;
            color: #1a472a;
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .equipped-tool {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            padding: 3px 11px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            color: #fef3c7;
            background: linear-gradient(180deg, rgba(55, 48, 26, 0.9) 0%, rgba(25, 22, 10, 0.95) 100%);
            border: 1px solid rgba(251, 191, 36, 0.32);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 进入游戏前全屏加载 */
        .game-loading-overlay {
            position: fixed;
            inset: 0;
            z-index: 280;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: radial-gradient(ellipse at 50% 35%, rgba(22, 58, 34, 0.97) 0%, rgba(6, 14, 8, 0.98) 55%, rgba(2, 8, 4, 1) 100%);
            font-family: ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .game-loading-overlay.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        body.game-loading-active {
            overflow: hidden;
        }

        .game-loading-overlay__panel {
            text-align: center;
            max-width: 280px;
        }

        .game-loading-overlay__spinner {
            width: 48px;
            height: 48px;
            margin: 0 auto 18px;
            border-radius: 50%;
            border: 3px solid rgba(74, 222, 128, 0.2);
            border-top-color: rgba(74, 222, 128, 0.95);
            animation: game-loading-spin 0.85s linear infinite;
        }

        @keyframes game-loading-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .game-loading-overlay__brand {
            margin: 0 0 10px;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: #bbf7d0;
        }

        .game-loading-overlay__text {
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
            color: rgba(180, 220, 185, 0.82);
        }

        /* 装备确认：主题弹窗（替代系统 confirm） */
        .game-modal {
            position: fixed;
            inset: 0;
            z-index: 300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            font-family: ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
        }
        /* 拆除确认须盖在装备/使用物品等其它弹窗之上，避免按钮点不到 */
        .game-modal--stack-top {
            z-index: 400;
        }
        .game-modal.is-hidden {
            display: none !important;
        }
        .game-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(4, 14, 8, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .game-modal-panel {
            position: relative;
            width: min(360px, 100%);
            border-radius: 14px;
            border: 1px solid rgba(74, 222, 128, 0.28);
            background: linear-gradient(165deg, rgba(18, 42, 26, 0.97) 0%, rgba(8, 22, 12, 0.98) 100%);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.5),
                0 20px 50px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            overflow: hidden;
        }
        .game-modal-header {
            padding: 14px 18px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.2);
        }
        .game-modal-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #bbf7d0;
            letter-spacing: 0.04em;
        }
        .game-modal-sub {
            margin: 4px 0 0;
            font-size: 11px;
            color: rgba(180, 220, 185, 0.65);
        }
        .game-modal-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 22px 20px 18px;
        }
        .game-modal-icon-wrap {
            width: 72px;
            height: 72px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 30% 25%, rgba(60, 90, 55, 0.5), rgba(10, 24, 14, 0.95));
            border: 1px solid rgba(255, 200, 100, 0.22);
            box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.45);
        }
        .game-modal-icon {
            font-size: 38px;
            line-height: 1;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }
        .game-modal-icon img.dom-icon-img {
            max-width: 64px;
            max-height: 64px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        .game-modal-text {
            margin: 0;
            text-align: center;
            font-size: 14px;
            color: #e2e8f0;
            line-height: 1.55;
        }
        .game-modal-text strong {
            color: #fde68a;
            font-weight: 700;
        }
        .game-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            padding: 0 18px 18px;
        }
        .game-modal-btn {
            flex: 1;
            max-width: 140px;
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.35);
            color: #cbd5e1;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .game-modal-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
        }
        .game-modal-btn.primary {
            border-color: rgba(74, 222, 128, 0.45);
            background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
            color: #052e16;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
        }
        .game-modal-btn.primary:hover {
            filter: brightness(1.06);
            color: #052e16;
        }
        .game-modal-panel--danger {
            border-color: rgba(248, 113, 113, 0.45);
        }
        .game-modal-panel--danger .game-modal-title {
            color: #fca5a5;
        }
        .game-modal-btn.danger {
            border-color: rgba(248, 113, 113, 0.55);
            background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
            color: #fff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
        }
        .game-modal-btn.danger:hover {
            filter: brightness(1.08);
            color: #fff;
        }

        .game-modal-input-wrap {
            width: 100%;
            max-width: 280px;
        }
        .game-modal-input {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid rgba(74, 222, 128, 0.25);
            background: rgba(0, 0, 0, 0.45);
            color: #e2e8f0;
            font-size: 14px;
            outline: none;
            font-family: inherit;
        }
        .game-modal-input:focus {
            border-color: rgba(74, 222, 128, 0.55);
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
        }
        .game-modal-input::placeholder {
            color: rgba(148, 167, 184, 0.65);
        }
        .game-modal-input.is-invalid {
            border-color: rgba(248, 113, 113, 0.75);
        }
        .game-modal-hint {
            margin: 0;
            font-size: 12px;
            color: #f87171;
            min-height: 1.2em;
            text-align: center;
        }
        .use-item-qty-wrap {
            margin-top: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .use-item-qty-wrap[hidden] {
            display: none !important;
        }
        .use-item-qty-label {
            font-size: 11px;
            color: #94a3b8;
            letter-spacing: 0.04em;
        }
        .use-item-qty-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            max-width: 280px;
        }
        .use-item-qty-input {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 88px;
            text-align: center;
            -moz-appearance: textfield;
        }
        .use-item-qty-input::-webkit-outer-spin-button,
        .use-item-qty-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .use-item-qty-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 8px;
            border: 1px solid rgba(100, 116, 139, 0.45);
            background: rgba(15, 23, 42, 0.65);
            color: #e2e8f0;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
        }
        .use-item-qty-btn:hover {
            border-color: rgba(74, 222, 128, 0.45);
            background: rgba(74, 222, 128, 0.12);
        }
        .use-item-qty-max {
            flex-shrink: 0;
            padding: 6px 10px;
            font-size: 11px;
            min-height: 32px;
        }
        .use-item-qty-hint {
            margin: 0;
            font-size: 11px;
            color: #94a3b8;
            text-align: center;
        }
        /* 全服跑马灯：置于顶栏文档流内（避免 absolute 上浮被 app-root 裁切） */
        .world-marquee {
            position: relative;
            order: -1;
            flex-shrink: 0;
            left: 0;
            right: 0;
            margin: 0 0 4px;
            z-index: 50;
            height: 0;
            max-height: 0;
            min-height: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
            pointer-events: none;
            transform: translateY(-4px);
            transition:
                opacity 0.22s ease,
                transform 0.28s ease,
                visibility 0.28s ease,
                border-color 0.2s ease;
            border-radius: 8px;
            background: linear-gradient(90deg, rgba(6, 22, 12, 0.94), rgba(18, 48, 28, 0.96), rgba(6, 22, 12, 0.94));
            border: 1px solid transparent;
            box-shadow: none;
        }
        .world-marquee.is-visible {
            height: 28px;
            max-height: 28px;
            margin: 0 0 4px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
            border-color: rgba(74, 222, 128, 0.28);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }
        .world-marquee.world-marquee--event.is-visible {
            border-color: rgba(248, 113, 113, 0.45);
            background: linear-gradient(90deg, rgba(28, 8, 8, 0.96), rgba(68, 18, 18, 0.94), rgba(28, 8, 8, 0.96));
            box-shadow: 0 4px 18px rgba(127, 29, 29, 0.35);
        }
        .world-marquee.world-marquee--event .world-marquee-chunk {
            color: #fecaca;
            text-shadow: 0 0 12px rgba(248, 113, 113, 0.55), 0 1px 2px #000;
        }
        .world-marquee-viewport {
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        }
        .world-marquee-track {
            display: inline-flex;
            white-space: nowrap;
        }
        /* 短文案：居中静态显示，不复制第二段 */
        .world-marquee--static .world-marquee-track {
            display: flex;
            width: 100%;
            justify-content: center;
            animation: none !important;
        }
        .world-marquee--static .world-marquee-chunk {
            padding-right: 0;
        }
        /* 长文案：双段衔接滚动 */
        .world-marquee--scroll .world-marquee-track {
            display: inline-flex;
        }
        .world-marquee--scroll .world-marquee-chunk {
            padding-right: 3rem;
        }
        .world-marquee-chunk {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: #fef9c3;
            text-shadow: 0 0 10px rgba(250, 204, 21, 0.4), 0 1px 2px #000;
            letter-spacing: 0.05em;
        }
        @keyframes worldMarqueeScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .inv-slot-durability {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #333;
            border-radius: 0 0 8px 8px;
            overflow: hidden;
        }
        .tool-efficiency {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 5px;
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
            font-size: 10px;
            color: #fcd34d;
        }
        .eff-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(148, 163, 184, 0.2);
            color: #fef9c3;
            font-weight: 700;
            font-size: 10px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .eff-badge .eff-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1em;
            font-size: 11px;
            opacity: 0.95;
        }
        .eff-badge .eff-ico-text {
            line-height: 1;
        }
        .eff-badge .eff-ico-img {
            width: 14px;
            height: 14px;
            object-fit: contain;
            display: block;
            flex-shrink: 0;
        }
        #building-effects.hud-building-effects {
            display: none;
            flex: 0 1 auto;
            align-self: center;
            box-sizing: border-box;
            max-width: min(200px, 32vw);
            min-width: 0;
            margin: 0;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            line-height: 1.35;
            color: #d1fae5;
            background: rgba(6, 28, 22, 0.82);
            border: 1px solid rgba(45, 212, 191, 0.28);
            overflow: hidden;
        }
        #building-effects.hud-building-effects.is-visible {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            max-width: min(200px, 32vw);
        }
        #building-effects .hud-building-effects__lbl {
            flex-shrink: 0;
            font-weight: 700;
            font-size: 9px;
            letter-spacing: 0.06em;
            color: #6ee7b7;
            white-space: nowrap;
        }
        #building-effects .hud-building-effects__body {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .dock-panel--tabbed .pets-section-title,
        .dock-panel--tabbed .build-section-title {
            margin-top: 0;
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.04em;
            color: #64748b;
        }

        .leaderboard-list {
            flex: 1;
            min-height: 0;
            padding: 2px 0 8px;
            max-height: 280px;
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.4) rgba(0, 0, 0, 0.35);
        }

        .leaderboard-empty {
            padding: 20px 12px;
            text-align: center;
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
        }

        .leaderboard-entry {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(15, 23, 42, 0.35);
            border: none;
        }

        .leaderboard-entry:last-child {
            margin-bottom: 0;
        }

        .leaderboard-entry:first-child {
            background: rgba(74, 222, 128, 0.08);
        }

        .leaderboard-entry--self {
            background: rgba(56, 189, 248, 0.15) !important;
            border: 1px solid rgba(56, 189, 248, 0.45);
            box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
        }

        .leaderboard-entry--self .leaderboard-name {
            color: #7dd3fc;
            font-weight: 600;
        }

        .leaderboard-entry--footnote {
            margin-top: 8px;
            opacity: 0.92;
        }

        .leaderboard-entry--footnote .leaderboard-rank {
            color: #64748b;
        }

        .leaderboard-rank {
            flex-shrink: 0;
            width: 36px;
            font-size: 13px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: #94a3b8;
            text-align: center;
        }

        .leaderboard-entry:first-child .leaderboard-rank {
            color: #fbbf24;
        }

        .leaderboard-name {
            flex: 1;
            min-width: 0;
            padding: 0;
            color: #e2e8f0;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .leaderboard-value {
            flex-shrink: 0;
            font-size: 12px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: #86efac;
        }

        .build-item {
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .build-item:hover {
            background: rgba(255,255,255,0.1);
            border-color: #ffaa44;
        }

        .build-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .build-icon {
            font-size: 32px;
        }

        .build-name {
            font-weight: bold;
            margin: 5px 0;
        }

        .build-materials {
            font-size: 10px;
            color: #ccc;
        }

        .build-missing {
            color: #f87171;
        }

        .build-section-title {
            font-size: 11px;
            color: #94a3b8;
            padding: 0 12px;
            margin-top: 4px;
        }

        #building-owned-grid .inv-slot {
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 6px;
            padding-bottom: 6px;
            min-height: 64px;
            height: auto;
            align-self: stretch;
        }

        #building-owned-grid .building-owned-slot:hover {
            outline: 1px solid rgba(248, 113, 113, 0.55);
            background: rgba(248, 113, 113, 0.08);
        }

        #building-owned-grid .building-owned-actions {
            position: relative;
            z-index: 2;
            pointer-events: auto;
        }
        #building-owned-grid button.building-action-btn {
            position: relative;
            z-index: 2;
            pointer-events: auto;
        }
        #building-owned-grid button.building-coord-btn {
            display: block;
            margin: 4px auto 0;
            padding: 1px 4px;
            max-width: 56px;
            font-size: 9px;
            line-height: 1.25;
            color: #9fd4a8;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(159, 212, 168, 0.35);
            border-radius: 4px;
            cursor: pointer;
            pointer-events: auto;
            z-index: 2;
        }
        #building-owned-grid button.building-coord-btn:hover {
            color: #d1fae5;
            border-color: rgba(159, 212, 168, 0.65);
            background: rgba(48, 96, 68, 0.55);
        }
        html.is-mobile-ui #building-owned-grid button.building-demolish-btn {
            display: block;
            margin: 4px auto 0;
            padding: 4px 10px;
            min-height: 36px;
            min-width: 56px;
            position: relative;
            z-index: 3;
            pointer-events: auto;
            font-size: 11px;
            line-height: 1.2;
            color: #fecaca;
            background: rgba(127, 29, 29, 0.45);
            border: 1px solid rgba(248, 113, 113, 0.55);
            border-radius: 6px;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        #bottom-dock:has(#panel-daily.active):not(.minimized),
        #bottom-dock:has(#panel-events.active):not(.minimized) {
            height: min(42vh, 380px);
            min-height: 140px;
            overflow: hidden;
        }
        #panel-events.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        #panel-events.active.dock-panel-pad {
            display: flex;
            flex-direction: column;
            padding: 10px 12px;
        }
        #panel-daily.active {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            align-self: stretch;
            width: 100%;
        }
        #panel-daily.active.dock-panel-pad {
            display: flex;
            flex-direction: column;
            padding: 10px 12px;
        }
        .event-log-toolbar {
            flex-shrink: 0;
            margin-bottom: 8px;
        }
        .event-log-personal-stats {
            flex-shrink: 0;
            margin: 10px 0 0;
        }
        .event-log-personal-stats[hidden] {
            display: none !important;
        }
        .event-tide-stats-toggle.is-active {
            border-color: rgba(251, 191, 36, 0.55);
            background: rgba(120, 80, 20, 0.35);
            color: #fde68a;
        }

        .tide-stats-card {
            padding: 10px 12px;
            border-radius: 8px;
            background: rgba(30, 41, 59, 0.65);
            border: 1px solid rgba(251, 191, 36, 0.25);
        }

        .tide-stats-card__title {
            font-size: 12px;
            font-weight: 600;
            color: #fde68a;
            margin-bottom: 8px;
        }

        .tide-stats-breakdown {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 11px;
            color: #cbd5e1;
        }

        .tide-stats-breakdown li {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .tide-stats-breakdown strong {
            color: #fef3c7;
        }

        .tide-stats-breakdown--muted {
            color: #94a3b8;
            font-size: 10px;
        }

        .tide-stats-total {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(148, 163, 184, 0.25);
            font-size: 12px;
            color: #fde68a;
            text-align: right;
        }

        .tide-stats-total strong {
            font-size: 14px;
            color: #fff;
        }

        .codex-recipe-row--locked {
            opacity: 0.55;
        }

        .codex-recipe-tag--locked {
            color: #94a3b8;
            border-color: rgba(148, 163, 184, 0.4);
        }

        .codex-recipe-hint {
            margin-top: 4px;
            font-size: 10px;
            color: #fbbf24;
        }
        .event-log-list {
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 2px 4px 0;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        .event-log-empty {
            margin: 0;
            font-size: 12px;
            color: #94a3b8;
        }
        .event-log-row {
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }
        .event-log-row__time {
            font-size: 11px;
            color: #94a3b8;
            margin-right: 6px;
        }
        .event-log-row__title {
            font-size: 13px;
            font-weight: 600;
            color: #e2e8f0;
        }
        .event-log-row__phase {
            margin-left: 6px;
            font-size: 11px;
            color: #9fd4a8;
        }
        .event-log-row__msg {
            margin: 4px 0 0;
            font-size: 12px;
            line-height: 1.45;
            color: #cbd5e1;
        }

        .event-log-row--clickable {
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .event-log-row--clickable:hover {
            background: rgba(56, 189, 248, 0.12);
            border-color: rgba(56, 189, 248, 0.35);
        }

        .event-log-row--clickable:active {
            background: rgba(56, 189, 248, 0.2);
        }

        .daily-quest-list {
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 2px 4px 0;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        .daily-quest-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 4px;
        }

        .daily-quest-section-head {
            margin-bottom: 2px;
        }

        .daily-quest-section-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            color: #94a3b8;
            margin: 4px 0 6px;
        }

        .daily-quest-section-meta strong {
            color: #d1fae5;
        }

        .daily-quest-section-claimable {
            color: #fbbf24;
            font-weight: 600;
        }

        .daily-quest-section-pct {
            margin-left: auto;
            color: #9fd4a8;
        }

        .daily-quest-section-bar {
            height: 5px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
        }

        .daily-quest-section-fill {
            height: 100%;
            background: linear-gradient(90deg, #38bdf8, #4ade80);
        }

        .daily-quest-day {
            margin: 0 0 4px;
            font-size: 11px;
            color: #9fd4a8;
        }

        .dock-tab--badge {
            position: relative;
        }

        .dock-tab--badge,
        .dock-tab[data-dock-tier],
        .dock-more-btn {
            position: relative;
        }
        .dock-tab-badge {
            position: absolute;
            top: -4px;
            right: -2px;
            min-width: 14px;
            height: 14px;
            padding: 0 3px;
            border-radius: 8px;
            background: #f59e0b;
            color: #1e293b;
            font-size: 9px;
            font-weight: 800;
            line-height: 14px;
            text-align: center;
            pointer-events: none;
        }
        .dock-more-sheet {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            z-index: 120;
            pointer-events: none;
        }
        html.is-mobile-ui .dock-more-sheet.is-open,
        html.dock-mobile-compact .dock-more-sheet.is-open {
            position: fixed;
            inset: 0;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            z-index: 500;
            display: flex !important;
            flex-direction: column;
            justify-content: flex-end;
            padding-bottom: calc(48px + var(--safe-bottom, 0px));
            box-sizing: border-box;
            pointer-events: auto !important;
        }
        .dock-more-sheet.is-open {
            pointer-events: auto;
        }
        .dock-more-sheet__backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        html.dock-mobile-compact .dock-more-sheet.is-open .dock-more-sheet__backdrop {
            position: absolute;
            inset: 0;
        }
        html.dock-mobile-compact .dock-more-sheet.is-open .dock-more-sheet__panel {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            margin: 0 8px 0;
        }
        .dock-more-sheet.is-open .dock-more-sheet__backdrop {
            opacity: 1;
        }
        .dock-more-sheet__panel {
            position: relative;
            margin: 0 8px 6px;
            padding: 10px 12px 12px;
            border-radius: 12px 12px 4px 4px;
            background: rgba(15, 23, 42, 0.97);
            border: 1px solid rgba(100, 116, 139, 0.45);
            box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
            transform: translateY(12px);
            opacity: 0;
            transition: transform 0.22s ease, opacity 0.22s ease;
        }
        .dock-more-sheet.is-open .dock-more-sheet__panel {
            transform: translateY(0);
            opacity: 1;
        }
        .dock-more-sheet__title {
            margin: 0 0 8px;
            font-size: 12px;
            font-weight: 600;
            color: #94a3b8;
        }
        .dock-more-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .dock-more-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 56px;
            padding: 8px 4px;
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius: 10px;
            background: rgba(30, 41, 59, 0.65);
            color: #cbd5e1;
            font-family: inherit;
            font-size: 11px;
            cursor: pointer;
            position: relative;
            touch-action: manipulation;
        }
        .dock-more-item.is-active {
            border-color: rgba(74, 222, 128, 0.55);
            color: #bbf7d0;
            background: rgba(22, 78, 52, 0.45);
        }
        .dock-more-item__ico {
            font-size: 22px;
            line-height: 1;
        }
        .dock-more-item__lbl {
            font-size: 11px;
        }
        .dock-more-item__badge {
            position: absolute;
            top: 4px;
            right: 4px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 8px;
            background: #f59e0b;
            color: #1e293b;
            font-size: 10px;
            font-weight: 800;
            line-height: 16px;
            text-align: center;
        }
        .daily-quest-empty {
            color: #888;
            font-size: 12px;
        }
        .daily-quest-row {
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .daily-quest-row--done {
            border-color: rgba(159, 212, 168, 0.35);
        }
        .daily-quest-row--claimed {
            opacity: 0.65;
        }
        .daily-quest-row__head {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: baseline;
        }
        .daily-quest-row__reward {
            font-size: 9px;
            color: #fbbf24;
        }
        .daily-quest-row__desc {
            font-size: 10px;
            color: #9aa;
            margin: 4px 0;
        }
        .daily-quest-row__bar {
            height: 4px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 2px;
            overflow: hidden;
        }
        .daily-quest-row__fill {
            height: 100%;
            background: linear-gradient(90deg, #4ade80, #22c55e);
        }
        .daily-quest-row__prog {
            font-size: 9px;
            color: #94a3b8;
            margin-top: 2px;
        }
        .daily-quest-row__actions {
            display: flex;
            gap: 6px;
            margin-top: 6px;
        }

        .daily-quest-row__actions .daily-quest-claim-btn {
            flex: 1;
            margin-top: 0;
        }

        .daily-quest-go-btn {
            flex: 0 0 auto;
            min-width: 52px;
            font-size: 10px;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid rgba(56, 189, 248, 0.4);
            background: rgba(20, 50, 70, 0.55);
            color: #bae6fd;
            cursor: pointer;
        }

        .daily-quest-go-btn:hover {
            background: rgba(30, 70, 95, 0.85);
            color: #e0f2fe;
        }

        .daily-quest-claim-btn {
            margin-top: 6px;
            width: 100%;
            font-size: 10px;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid rgba(159, 212, 168, 0.35);
            background: rgba(48, 96, 68, 0.5);
            color: #d1fae5;
            cursor: pointer;
        }
        .daily-quest-claim-btn:disabled {
            opacity: 0.55;
            cursor: default;
        }
        .daily-quest-claim-btn:not(:disabled):hover {
            background: rgba(48, 96, 68, 0.85);
        }

        .combat-advice-compare {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(30, 20, 20, 0.55);
            border: 1px solid rgba(248, 113, 113, 0.25);
        }
        .combat-advice-compare__verdict {
            font-size: 11px;
            color: #fbbf24;
            margin-bottom: 8px;
            text-align: center;
        }
        .combat-advice-compare__grid {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 8px;
            align-items: start;
        }
        .combat-advice-col__head {
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .combat-advice-col--player .combat-advice-col__head {
            color: #7dd3fc;
        }
        .combat-advice-vs {
            align-self: center;
            font-size: 10px;
            color: #64748b;
            font-weight: 700;
            padding-top: 18px;
        }
        .combat-advice-hp {
            margin-bottom: 6px;
        }
        .combat-advice-hp__track {
            height: 6px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 2px;
        }
        .combat-advice-hp__fill--beast {
            height: 100%;
            background: linear-gradient(90deg, #dc2626, #f87171);
        }
        .combat-advice-hp__fill--player {
            height: 100%;
            background: linear-gradient(90deg, #2563eb, #60a5fa);
        }
        .combat-advice-hp__text {
            font-size: 9px;
            color: #94a3b8;
        }
        .combat-advice-stat {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #94a3b8;
        }
        .combat-advice-stat strong {
            color: #e2e8f0;
        }
        .combat-advice-forecast {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(100, 116, 139, 0.35);
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 10px;
            color: #cbd5e1;
            text-align: center;
        }
        .combat-advice-forecast strong {
            color: #fca5a5;
        }
        .combat-advice-hints {
            margin: 8px 0 0;
            padding: 8px 10px 8px 22px;
            border-radius: 6px;
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(148, 163, 184, 0.25);
            font-size: 10px;
            color: #cbd5e1;
            line-height: 1.45;
        }
        .combat-advice-hints li {
            margin-bottom: 4px;
        }
        .combat-advice-hints li:last-child {
            margin-bottom: 0;
        }
        .combat-advice-hints li:nth-child(1) {
            color: #fecaca;
        }
        .combat-advice-hints li:nth-child(2) {
            color: #e2e8f0;
        }
        .combat-advice-text {
            color: #fca5a5;
            line-height: 1.5;
        }
        .combat-outlook {
            margin-bottom: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(20, 50, 30, 0.55);
            border: 1px solid rgba(74, 222, 128, 0.35);
        }
        .combat-outlook__head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 10px;
        }
        .combat-outlook__label {
            color: #86efac;
            font-weight: 600;
        }
        .combat-outlook__meta {
            color: #94a3b8;
            text-align: right;
            line-height: 1.3;
        }
        .combat-outlook__track {
            height: 6px;
            background: rgba(0, 0, 0, 0.45);
            border-radius: 3px;
            overflow: hidden;
        }
        .combat-outlook__fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #16a34a, #86efac);
            transition: width 0.35s ease;
        }
        .combat-outlook--intro {
            opacity: 0.92;
            border-color: rgba(134, 239, 172, 0.5);
        }
        .combat-outlook--intro .combat-outlook__meta {
            font-size: 9px;
        }
        .combat-advice-actions .game-modal-btn.primary {
            background: rgba(30, 64, 45, 0.85);
        }
        #combat-advice-fight {
            color: #94a3b8;
        }

        /* —— 野兽狩猎战斗弹窗 —— */
        .combat-modal-panel {
            width: min(440px, 100%);
            max-width: 440px;
            border-color: rgba(248, 113, 113, 0.22);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.5),
                0 0 28px rgba(220, 38, 38, 0.12),
                0 22px 56px rgba(0, 0, 0, 0.58),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .combat-modal-frame {
            position: relative;
            background:
                radial-gradient(ellipse 120% 80% at 50% -20%, rgba(220, 38, 38, 0.14), transparent 55%),
                linear-gradient(180deg, rgba(22, 48, 32, 0.35) 0%, transparent 42%);
        }
        .combat-modal-frame::before,
        .combat-modal-frame::after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-color: rgba(250, 204, 21, 0.35);
            border-style: solid;
            pointer-events: none;
            opacity: 0.85;
        }
        .combat-modal-frame::before {
            top: 6px;
            left: 8px;
            border-width: 2px 0 0 2px;
        }
        .combat-modal-frame::after {
            bottom: 6px;
            right: 8px;
            border-width: 0 2px 2px 0;
        }
        .combat-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 18px 12px;
            border-bottom: 1px solid rgba(248, 113, 113, 0.18);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 100%);
        }
        .combat-modal-header__main {
            min-width: 0;
        }
        .combat-modal-tagline {
            margin: 4px 0 0;
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(180, 220, 185, 0.55);
        }
        .combat-round-pill {
            flex-shrink: 0;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #fef9c3;
            background: linear-gradient(180deg, rgba(120, 53, 15, 0.65), rgba(69, 26, 3, 0.85));
            border: 1px solid rgba(251, 191, 36, 0.45);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .combat-modal-body {
            align-items: stretch;
            gap: 0;
            padding: 16px 18px 18px;
        }
        .combat-beast-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(69, 10, 10, 0.35) 0%, rgba(15, 23, 42, 0.45) 100%);
            border: 1px solid rgba(248, 113, 113, 0.22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .combat-beast-portrait {
            position: relative;
            flex-shrink: 0;
            width: 76px;
            height: 76px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 35% 30%, rgba(127, 29, 29, 0.55), rgba(8, 18, 12, 0.95));
            border: 1px solid rgba(252, 165, 165, 0.28);
            box-shadow:
                inset 0 2px 14px rgba(0, 0, 0, 0.5),
                0 4px 16px rgba(0, 0, 0, 0.35);
        }
        .combat-beast-portrait__glow {
            position: absolute;
            inset: -4px;
            border-radius: 16px;
            background: radial-gradient(circle, rgba(248, 113, 113, 0.25), transparent 70%);
            animation: combatPortraitGlow 2.2s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes combatPortraitGlow {
            0%, 100% { opacity: 0.55; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.04); }
        }
        .combat-beast-portrait__icon {
            position: relative;
            z-index: 1;
            font-size: 40px;
        }
        .combat-beast-portrait__icon--img {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .combat-beast-portrait__icon--img img {
            width: 46px;
            height: 46px;
            object-fit: contain;
            image-rendering: auto;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
        }
        .combat-beast-level {
            position: absolute;
            right: -4px;
            bottom: -4px;
            z-index: 2;
            padding: 2px 7px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 800;
            color: #fef9c3;
            background: linear-gradient(180deg, #b45309, #78350f);
            border: 1px solid rgba(253, 224, 71, 0.5);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        }
        .combat-beast-meta {
            flex: 1;
            min-width: 0;
        }
        .combat-beast-name {
            margin: 0 0 10px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .combat-vs-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 12px 0 8px;
        }
        .combat-vs-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.35), transparent);
        }
        .combat-vs-badge {
            flex-shrink: 0;
            padding: 2px 10px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.2em;
            color: rgba(254, 249, 195, 0.9);
            text-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
        }
        .combat-status-row {
            text-align: center;
            margin-bottom: 8px;
        }
        .combat-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            color: #cbd5e1;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }
        .combat-status.combat-status--active {
            color: #bbf7d0;
            border-color: rgba(74, 222, 128, 0.35);
            animation: combatStatusPulse 1.4s ease-in-out infinite;
        }
        @keyframes combatStatusPulse {
            0%, 100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
            50% { box-shadow: 0 0 12px rgba(74, 222, 128, 0.25); }
        }
        .combat-log-scroll {
            max-height: 156px;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 10px 12px;
            margin: 0 0 12px;
            color-scheme: dark;
            scrollbar-width: thin;
            scrollbar-color: rgba(74, 222, 128, 0.5) rgba(0, 0, 0, 0.45);
            background:
                linear-gradient(180deg, rgba(4, 14, 8, 0.75) 0%, rgba(8, 22, 12, 0.92) 100%);
            border: 1px solid rgba(74, 222, 128, 0.18);
            border-radius: 10px;
            font-size: 12px;
            line-height: 1.5;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
        }
        .combat-log-line {
            display: flex;
            gap: 10px;
            margin-bottom: 6px;
            padding: 4px 6px;
            border-radius: 6px;
            color: #d1e7d6;
            animation: combatLogIn 0.28s ease-out;
        }
        @keyframes combatLogIn {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .combat-log-line:last-child {
            margin-bottom: 0;
        }
        .combat-log-line__round {
            flex-shrink: 0;
            min-width: 2em;
            font-size: 10px;
            font-weight: 700;
            color: rgba(251, 191, 36, 0.85);
            font-variant-numeric: tabular-nums;
        }
        .combat-log-line--hit-beast {
            background: rgba(220, 38, 38, 0.12);
            color: #fecaca;
        }
        .combat-log-line--hit-player {
            background: rgba(220, 38, 38, 0.18);
            color: #fca5a5;
        }
        .combat-log-line--victory {
            background: rgba(34, 197, 94, 0.15);
            color: #86efac;
            font-weight: 700;
        }
        .combat-log-line--defeat {
            background: rgba(127, 29, 29, 0.35);
            color: #fca5a5;
            font-weight: 700;
        }
        .combat-log-line--loot {
            background: rgba(34, 197, 94, 0.12);
            color: #fde68a;
            font-weight: 600;
        }
        .combat-log-line--narration {
            background: rgba(30, 41, 59, 0.45);
            color: #cbd5e1;
            font-style: italic;
            border-left: 2px solid rgba(148, 163, 184, 0.55);
            padding-left: 8px;
        }
        .combat-log-line--narration .combat-log-line__round {
            color: rgba(148, 163, 184, 0.9);
        }
        .combat-status--intro {
            color: #fde68a;
            letter-spacing: 0.06em;
        }
        .combat-close-hint {
            margin: 0 0 10px;
            padding: 0;
            min-height: 0;
            font-size: 11px;
            text-align: center;
            color: rgba(180, 220, 185, 0.55);
            transition: opacity 0.2s ease;
            opacity: 0;
        }
        .combat-close-hint.is-visible {
            opacity: 1;
            color: #fbbf24;
        }
        .combat-close-actions {
            display: flex;
            justify-content: center;
            margin: 0 0 14px;
        }
        .combat-player-card {
            padding: 10px 12px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(20, 83, 45, 0.28) 0%, rgba(4, 14, 8, 0.55) 100%);
            border: 1px solid rgba(74, 222, 128, 0.22);
        }
        .combat-hp-block__head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
        }
        .combat-hp-label {
            font-size: 11px;
            font-weight: 600;
            color: rgba(180, 220, 185, 0.85);
            letter-spacing: 0.04em;
        }
        .combat-hp-track {
            position: relative;
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
        }
        .combat-hp-track--beast::after,
        .combat-hp-track--player::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 18%,
                rgba(0, 0, 0, 0.12) 18%,
                rgba(0, 0, 0, 0.12) 20%
            );
            pointer-events: none;
        }
        .combat-hp-fill {
            height: 100%;
            width: 100%;
            transition: width 0.38s cubic-bezier(0.33, 1, 0.68, 1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        .combat-hp-fill--pulse {
            filter: brightness(1.4);
        }
        .combat-hp-fill--beast {
            background: linear-gradient(90deg, #991b1b 0%, #ef4444 55%, #fca5a5 100%);
        }
        .combat-hp-fill--player {
            background: linear-gradient(90deg, #14532d 0%, #22c55e 55%, #bbf7d0 100%);
        }
        .combat-hp-text {
            font-size: 11px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: #e2e8f0;
        }

        .death-choice-overlay {
            position: absolute;
            inset: 0;
            z-index: 210;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(6, 10, 16, 0.82);
            pointer-events: auto;
            overflow-y: auto;
            padding: 16px;
        }
        .death-choice-overlay.is-active {
            display: flex;
        }
        .death-choice-overlay__panel {
            width: min(440px, 100%);
            max-height: 90vh;
            overflow-y: auto;
            padding: 22px 24px;
            border-radius: 12px;
            background: linear-gradient(165deg, #1e2838 0%, #121a14 100%);
            border: 1px solid rgba(248, 113, 113, 0.4);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
        }
        .death-choice-overlay__title {
            margin: 0 0 10px;
            font-size: 20px;
            color: #fca5a5;
            text-align: center;
        }
        .death-choice-overlay__reason {
            margin: 0 0 8px;
            font-size: 14px;
            line-height: 1.5;
            color: #e2e8f0;
            text-align: center;
        }
        .death-choice-overlay__countdown {
            margin: 0 0 14px;
            font-size: 12px;
            color: #94a3b8;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .death-choice-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .death-choice-option {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
            padding: 12px 14px;
            text-align: left;
            cursor: pointer;
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.6);
            color: #e2e8f0;
            transition: border-color 0.15s, background 0.15s;
        }
        .death-choice-option:hover:not(:disabled) {
            border-color: rgba(251, 146, 60, 0.6);
            background: rgba(30, 41, 59, 0.85);
        }
        .death-choice-option.is-recommended {
            border-color: rgba(74, 222, 128, 0.55);
        }
        .death-choice-option--hard {
            border-color: rgba(248, 113, 113, 0.35);
        }
        .death-choice-option--hard:hover:not(:disabled) {
            border-color: rgba(248, 113, 113, 0.75);
        }
        .death-choice-option:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .death-choice-option__name {
            font-size: 15px;
            font-weight: 600;
            color: #f8fafc;
        }
        .death-choice-option__desc {
            font-size: 12px;
            line-height: 1.45;
            color: #94a3b8;
        }
        .death-choice-charm-btn {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 10px 16px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid rgba(167, 139, 250, 0.5);
            border-radius: 8px;
            background: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%);
            color: #f5f3ff;
        }
        .death-choice-charm-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .downed-overlay {
            position: absolute;
            inset: 0;
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(8, 12, 18, 0.72);
            pointer-events: auto;
        }
        .downed-overlay.is-active {
            display: flex;
        }
        .downed-overlay__panel {
            max-width: 360px;
            padding: 24px 28px;
            border-radius: 12px;
            background: linear-gradient(165deg, #1a2430 0%, #0f1612 100%);
            border: 1px solid rgba(220, 120, 80, 0.45);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            text-align: center;
        }
        .downed-overlay__title {
            margin: 0 0 12px;
            font-size: 20px;
            color: #fca5a5;
        }
        .downed-overlay__text {
            margin: 0 0 16px;
            font-size: 14px;
            line-height: 1.5;
            color: #e2e8f0;
        }
        .downed-overlay__btn {
            padding: 10px 24px;
            font-size: 15px;
            cursor: pointer;
            border: none;
            border-radius: 8px;
            background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
            color: #fff;
        }
        .downed-overlay__btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .downed-overlay__hint {
            margin: 14px 0 0;
            font-size: 12px;
            color: #94a3b8;
        }

        .hud-survival-chip .hud-meta-chip__val {
            font-size: 11px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hud-survival-chip--pulse {
            animation: hud-survival-pulse 0.9s ease-in-out 3;
        }
        @keyframes hud-survival-pulse {
            0%,
            100% {
                box-shadow: none;
            }
            50% {
                box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.75);
            }
        }
        .hud-meta-caravan-preview {
            cursor: pointer;
            border-color: rgba(251, 191, 36, 0.35);
        }

        .hud-meta-caravan-preview:hover {
            border-color: rgba(251, 191, 36, 0.65);
        }

        .hud-meta-chip--caravan-soon {
            animation: hudCaravanSoon 1.2s ease-in-out infinite;
        }

        @keyframes hudCaravanSoon {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
            }
            50% {
                box-shadow: 0 0 8px 1px rgba(251, 191, 36, 0.45);
            }
        }

        .caravan-trade-row--preview {
            opacity: 0.92;
            border-style: dashed;
        }

        .caravan-trade-list--preview .caravan-trade-row-main {
            font-size: 12px;
        }

        .hud-meta-chip--caravan-here {
            box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45);
        }

        .inv-filter-group-title {
            grid-column: 1 / -1;
            margin: 6px 0 2px;
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            letter-spacing: 0.04em;
        }