/* 版权所有者：姚程樱软件开发工作室 https://anyio.club */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* 全局禁止长按选择/复制（含移动端） */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        /* 禁止元素/图片拖拽：封掉长按图片弹出的“保存图片”类系统菜单 */
        -webkit-user-drag: none;
      }
      body {
        overflow: hidden;
        background: #000;
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        touch-action: none;
        /* 禁止长按弹出系统菜单（搜一搜/翻译等）与文本选择 */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }
      canvas {
        display: block;
      }
      /* 准星 */
      .crosshair {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 28px;
        pointer-events: none;
        text-shadow:
          0 0 6px #000,
          0 0 10px #000;
        z-index: 10;
        transition: transform 0.05s;
      }
      /* HUD 顶部 */
      .robot-hud {
        position: fixed;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        color: #fff;
        padding: 8px 14px;
        border-radius: 40px;
        z-index: 99;
        text-align: center;
        min-width: 280px;
        font-size: 18px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        pointer-events: none;
      }
      .robot-hud .hud-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
      }
      .robot-hud .hud-title span {
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
      }
      /* 顶部 HUD 内的“重选难度”按钮：背景/边框随难度色，居中不破坏布局 */
      .robot-hud .hud-diff-btn {
        pointer-events: auto;
        align-self: center;
        margin-left: 6px;
        padding: 4px 12px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 20px;
        border: 1px solid #2e9e4f;
        background: #2e9e4f;
        color: #fff;
        cursor: pointer;
        transition: filter 0.15s ease;
      }
      .robot-hud .hud-diff-btn:hover {
        filter: brightness(1.1);
      }
      /* 进入游戏时短暂提示“可重新选择难度”，3秒后消失；
         置于右侧UI流中、重选难度按钮下方，自然跟随按钮位置 */
      .right-ui-wrap       .diff-hint {
        align-self: flex-end;
        margin-top: 2px;
        background: rgba(0, 0, 0, 0.62);
        color: #ffd84a;
        font-size: 14px;
        padding: 5px 12px;
        border-radius: 12px;
        pointer-events: none;
        display: none;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        white-space: nowrap;
        max-width: 180px;
        text-align: center;
      }
      .diff-hint.show {
        display: block;
        animation: diffHintFade 0.3s ease both;
      }
      @keyframes diffHintFade {
        from {
          opacity: 0;
          transform: translateY(-6px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
      .robot-icons {
        display: flex;
        justify-content: center;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: 4px;
      }
      .robot-icon,
      .run-txt {
        width: 18px;
        height: 18px;
        background: rgba(0, 60, 0, 0.5);
        border-radius: 3px;
        transition: background 0.2s;
        border: 1px solid #2a7a2a;
      }
      .robot-icon.dead {
        background: #6b7280;
        border-color: #4b5563;
      }
      .run-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-self: center;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        font-size: 14px;
      }
      .run-txt {
        display: inline-block;
        margin-right: 6px;
        width: 18px;
      }
      /* 左侧对局历史 (持久缓存) */
      .history-panel {
        position: fixed;
        top: 10%;
        left: 10px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        color: #e5e7eb;
        padding: 10px 12px;
        border-radius: 12px;
        z-index: 300;
        min-width: 160px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 14px;
        pointer-events: auto;
      }
      #historyList {
        max-height: 121px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
      }
      #historyList::-webkit-scrollbar {
        width: 5px;
      }
      #historyList::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
      }
      #historyList::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        min-height: 14px;
        transition: background 0.2s ease;
      }
      #historyList::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.55);
      }
      #historyList::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.7);
      }
      #historyList::-webkit-scrollbar-button {
        display: none;
      }
      #historyList::-webkit-scrollbar-corner {
        background: transparent;
      }
      .history-panel h4 {
        font-size: 16px;
        color: #cbd5e1;
        letter-spacing: 0.5px;
      }
      /* 对局记录收缩：默认展开，.collapsed 时隐藏记录列表（同右侧玩法说明） */
      .history-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer; /* 整栏可点击收起/展开 */
        user-select: none;
      }
      .history-collapse {
        flex: none;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #e5e7eb;
        font-size: 11px;
        line-height: 1;
        padding: 4px 7px;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.2s, background 0.15s;
      }
      .history-collapse:hover {
        background: rgba(255, 255, 255, 0.18);
      }
      .history-panel.collapsed #historyList {
        display: none;
      }
      .history-item {
        padding: 3px 6px;
        margin: 2px 0;
        border-radius: 4px;
        background: rgba(0, 60, 0, 0.5);
        font-size: 14px;
        color: #d1d5db;
        border: 1px solid #2a7a2a;
        line-height: 19px;
      }
      .history-empty {
        padding: 10px 6px;
        font-size: 14px;
        color: #8b93a1;
        text-align: center;
        font-style: italic;
      }
      /* 对局记录边框按难度着色：易=绿 中=黄 难=红 */
      .history-item.diff-medium {
        border-color: #ffd700;
      }
      .history-item.diff-hard {
        border-color: #ff4500;
      }
      /* 右侧UI */
      .right-ui-wrap {
        position: fixed;
        top: 10%;
        right: 10px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        pointer-events: none;
      }
      .right-ui-wrap > * {
        pointer-events: auto;
      }
      /* 开始界面（start-shown）：右侧游戏UI（重新选难度/指南针/找幽荧/说明）整体隐藏，
         仅游戏进行中显示；音效(music-wrap)已独立置顶，不受影响 */
      body.start-shown .right-ui-wrap {
        display: none;
      }
      .help-panel {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        color: #e5e7eb;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 1.55;
        border: 1px solid rgba(255, 255, 255, 0.06);
        min-width: 110px;
      }
      .help-panel h4 {
      	font-size: 16px;
      }
      /* 帮助面板收缩：默认展开，.collapsed 时隐藏说明内容（手机端可腾出视野） */
      .help-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer; /* 整栏可点击收起/展开 */
        user-select: none;
      }
      .help-head .run-title {
        margin-bottom: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      .help-collapse {
        flex: none;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #e5e7eb;
        font-size: 13px;
        line-height: 1;
        padding: 4px 7px;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.2s;
      }
      .help-collapse:hover {
        background: rgba(255, 255, 255, 0.18);
      }
      .help-body {
        margin-top: 6px;
      }
      .help-panel.collapsed .help-body {
        display: none;
      }
      /* 找幽荧按钮说明：原 <small> 默认字号过小（约 10px），显式放大并提升可读性 */
      .help-body small {
        display: block;
        margin-top: 4px;
        font-size: 15px;
        line-height: 1.7;
        color: #cbd5e1;
      }
      /* PC / 手机 玩法提示分离：默认全部隐藏，仅当 body 被 JS 加上 is-pc / is-touch（设备检测）后，才显示对应端 */
      .help-pc,
      .help-mobile,
      .tip-pc,
      .tip-mobile {
        display: none;
      }
      body.is-pc .help-pc,
      body.is-touch .help-mobile {
        display: block;
      }
      body.is-pc .tip-pc,
      body.is-touch .tip-mobile {
        display: inline;
      }
      .compass-wrap {
        width: 100px;
        height: 100px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        border-radius: 50%;
        position: relative;
        border: 2px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
      }
      .compass-needle {
        width: 7px;
        height: 47px;
        background: linear-gradient(to top, #fff 50%, #f44336 50%);
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: center bottom;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
      }
      .compass-text {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-weight: bold;
        font-size: 25px;
        text-shadow: 0 0 6px #000;
      }
      .compass-target-mark {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 12px;
        background: #ff4444;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 8px #ff0000;
        z-index: 2;
        transition:
          width 0.12s,
          height 0.12s;
      }
      .help-btn {
        padding: 11px 20px;
        border: none;
        border-radius: 30px;
        background: #2563eb;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        transition: 0.15s;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .help-btn:active {
        transform: scale(0.94);
      }
      /* 背景音乐控制：按钮 + 面板（音量滑杆 + 静音），无下载/倍速 */
      /* 音效控件独立置顶：脱离右侧游戏UI，开始界面(开始弹窗)之上即可设置 */
      .music-wrap {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 300;
        display: inline-flex;
        align-items: center;
      }
      .music-btn {
        padding: 10px 16px;
        font-size: 18px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(10, 30, 18, 0.7);
        color: #eafaf0;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .music-btn:active {
        transform: scale(0.94);
      }
      .music-panel {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        bottom: auto;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        padding: 8px 10px;
        z-index: 210;
      }
      .music-panel.show {
        display: flex;
      }
      .music-mode {
        width: 100%;
        min-width: 160px; /* 保证一行至少能放下 4 个汉字，不被挤压 */
        padding: 8px 14px;
        font-size: 14px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid transparent;
        background: transparent;
        color: #eafaf0;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.15s ease;
      }
      .music-mode:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      .music-mode.active {
        background: rgba(46, 125, 50, 0.35);
        border-color: rgba(46, 125, 50, 0.6);
      }
      /* 背景音乐 video：1px 透明隐藏（不可 display:none，否则 iOS 不播放） */
      .bgm-hidden {
        position: fixed;
        width: 1px;
        height: 1px;
        left: -10px;
        top: 0;
        opacity: 0.01;
        pointer-events: none;
        z-index: -1;
      }
      .hint-tip {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        color: #fff;
        padding: 10px 20px;
        border-radius: 40px;
        z-index: 99;
        display: none;
        font-size: 16px;
        max-width: 90%;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: none;
      }
      /* 前方障碍提示：默认隐藏，加 .show 显示 */
      .obstacle-hint {
        position: fixed;
        bottom: 84px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(70, 24, 14, 0.85);
        backdrop-filter: blur(4px);
        color: #ffe0d2;
        padding: 10px 22px;
        border-radius: 40px;
        z-index: 99;
        display: none;
        font-size: 16px;
        font-weight: 500;
        max-width: 90%;
        text-align: center;
        border: 1px solid rgba(255, 130, 100, 0.5);
        pointer-events: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      }
      .obstacle-hint.show {
        display: block;
        animation: obstaclePulse 0.9s ease-in-out infinite;
      }
      @keyframes obstaclePulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }
      /* 风效果提示：默认隐藏，加 .show 显示；仅“中”难度起风时出现 */
      .wind-badge {
        position: fixed;
        top: 64px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(
          100deg,
          rgba(28, 64, 110, 0.82) 0%,
          rgba(46, 104, 176, 0.92) 50%,
          rgba(28, 64, 110, 0.82) 100%
        );
        background-size: 220% 100%;
        backdrop-filter: blur(4px);
        color: #eaf4ff;
        padding: 9px 22px;
        border-radius: 40px;
        z-index: 98;
        display: none;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
        max-width: 90%;
        text-align: center;
        border: 1px solid rgba(150, 205, 255, 0.65);
        box-shadow: 0 4px 18px rgba(40, 120, 200, 0.45);
        pointer-events: none;
      }
      .wind-badge.show {
        display: block;
        animation: windGust 0.8s ease-in-out infinite, windShine 2.4s linear infinite;
      }
      @keyframes windGust {
        0%,
        100% {
          transform: translateX(-50%) translateY(0);
          opacity: 1;
        }
        50% {
          transform: translateX(-50%) translateY(-3px);
          opacity: 0.82;
        }
      }
      @keyframes windShine {
        0% {
          background-position: 220% 0;
        }
        100% {
          background-position: 0 0;
        }
      }
      /* 天黑提示（仅“难”难度）：复用 .wind-badge 的位置/尺寸，改为夜色紫 +
         缓慢呼吸式浮动，与蓝色风的提示区分 */
      .night-badge {
        background: linear-gradient(
          100deg,
          rgba(34, 28, 78, 0.85) 0%,
          rgba(74, 58, 150, 0.93) 50%,
          rgba(34, 28, 78, 0.85) 100%
        );
        background-size: 220% 100%;
        color: #eef0ff;
        border: 1px solid rgba(180, 162, 255, 0.65);
        box-shadow: 0 4px 18px rgba(92, 70, 200, 0.45);
      }
      .night-badge.show {
        display: block;
        animation: nightFloat 2s ease-in-out infinite, windShine 3.2s linear infinite;
      }
      @keyframes nightFloat {
        0%,
        100% {
          transform: translateX(-50%) translateY(0);
          opacity: 1;
        }
        50% {
          transform: translateX(-50%) translateY(-2px);
          opacity: 0.86;
        }
      }
      /* 看广告弹窗：点击“找幽荧”弹出，本局只需看一次，关闭后即无限次使用。
         前缀 find-ad-* 以避免与 public/ad.js 注入的同名 .ad-* / #adCloseBtn 冲突。 */
      .find-ad-overlay {
        position: fixed;
        inset: 0;
        z-index: 400;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
      }
      .find-ad-overlay.show {
        display: flex;
      }
      .find-ad-box {
        width: min(86vw, 360px);
        background: #11161f;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
        text-align: center;
      }
      .find-ad-tag {
        text-align: left;
        background: #2a2f3a;
        color: #9aa5b5;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 4px 10px;
      }
      .find-ad-body {
        padding: 22px 18px 18px;
        color: #e5e7eb;
      }
      .find-ad-logo {
        font-size: 40px;
        margin-bottom: 8px;
      }
      .find-ad-title {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 6px;
      }
      .find-ad-desc {
        font-size: 13px;
        color: #cbd5e1;
        margin-bottom: 14px;
        line-height: 1.5;
      }
      .find-ad-placeholder {
        font-size: 13px;
        color: #6b7280;
        border: 1px dashed rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        padding: 22px 10px;
        background: rgba(255, 255, 255, 0.03);
      }
      .find-ad-close {
        width: 100%;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: #1f6f3a;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        padding: 13px;
        cursor: pointer;
        transition: background 0.15s;
      }
      .find-ad-close:disabled {
        background: #2a3340;
        color: #7e8a99;
        cursor: not-allowed;
      }
      .find-ad-close:not(:disabled):active {
        background: #2a8a4a;
      }
      /* 开始遮罩：点击聚焦，解决 iframe/预览下键盘无焦点导致 WASD 无效 */
      .start-overlay {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(8, 20, 12, 0.78);
        backdrop-filter: blur(3px);
        cursor: pointer;
        user-select: none;
      }
      .start-card {
        text-align: center;
        padding: 32px 44px;
        border-radius: 18px;
        background: rgba(20, 40, 26, 0.9);
        border: 1px solid rgba(120, 200, 140, 0.35);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      }
      .start-title {
        font-size: 30px;
        font-weight: 700;
        color: #7ee0a0;
        margin-bottom: 10px;
      }
      .start-sub {
        font-size: 18px;
        color: #eafaf0;
        margin-bottom: 14px;
      }
      /* 加载中：不可点击、弱化视觉，等待地图渲染完成 */
      .start-overlay.loading {
        cursor: default;
      }
      .start-overlay.loading .start-card {
        border-color: rgba(126, 224, 160, 0.18);
      }
      .start-overlay.loading .start-sub {
        color: #9fd6b2;
      }
      .start-tip {
        font-size: 16px;
        line-height: 1.7;
        color: #b9d8c4;
      }
      /* 地图加载进度条 */
      .start-progress {
        width: 220px;
        height: 10px;
        margin: 0 auto 16px;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid rgba(120, 200, 140, 0.25);
      }
      .start-progress-bar {
        position: relative;
        overflow: hidden;
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #2e7d32, #7ee0a0);
        border-radius: 6px;
        transition: width 0.3s ease;
      }
      /* 加载中：进度条上叠加流动条纹，直观表明“正在加载”，避免误以为卡死 */
      .start-overlay.loading .start-progress-bar::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.28) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.28) 50%,
          rgba(255, 255, 255, 0.28) 75%,
          transparent 75%,
          transparent
        );
        background-size: 18px 18px;
        animation: startBarStripes 0.55s linear infinite;
      }
      @keyframes startBarStripes {
        from {
          background-position: 0 0;
        }
        to {
          background-position: 18px 0;
        }
      }
      /* 开始游戏按钮：地图未加载完成时 disabled 不可点 */
      .start-game-btn {
        padding: 12px 40px;
        font-size: 18px;
        font-weight: 700;
        border-radius: 40px;
        border: 1px solid rgba(126, 224, 160, 0.5);
        background: #2e7d32;
        color: #fff;
        cursor: pointer;
        margin-bottom: 14px;
        box-shadow: 0 6px 18px rgba(46, 125, 50, 0.35);
        transition:
          background 0.15s ease,
          transform 0.15s ease;
      }
      .start-game-btn:hover:not(:disabled) {
        background: #388e3c;
      }
      .start-game-btn:active:not(:disabled) {
        transform: scale(0.96);
      }
      .start-game-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #4a5a4c;
        box-shadow: none;
      }
      /* 难度选择按钮 */
      .diff-select {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 14px;
      }
      .diff-btn {
        padding: 10px 26px;
        font-size: 17px;
        font-weight: 600;
        border-radius: 10px;
        border: 2px solid rgba(120, 200, 140, 0.35);
        background: rgba(30, 60, 40, 0.55);
        color: #cdeeda;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .diff-btn:hover {
        filter: brightness(1.18);
      }
      /* 未选中：仅边框按难度着色（易=绿 / 中=黄 / 难=红），背景保持中性 */
      .diff-btn[data-diff='easy'] {
        border-color: #2e9e4f;
      }
      .diff-btn[data-diff='medium'] {
        border-color: #f5c518;
      }
      .diff-btn[data-diff='hard'] {
        border-color: #ff4d4d;
      }
      /* 选中：背景与边框同为对应难度色（易=绿 / 中=黄 / 难=红） */
      .diff-btn.active[data-diff='easy'] {
        background: #2e9e4f;
        border-color: #2e9e4f;
        color: #fff;
        box-shadow: 0 0 12px rgba(46, 158, 79, 0.5);
      }
      .diff-btn.active[data-diff='medium'] {
        background: #f5c518;
        border-color: #f5c518;
        color: #3a2f00;
        box-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
      }
      .diff-btn.active[data-diff='hard'] {
        background: #ff4d4d;
        border-color: #ff4d4d;
        color: #fff;
        box-shadow: 0 0 12px rgba(255, 77, 77, 0.5);
      }
      /* 胜利面板 */
      /* 胜利/结束面板：与开始弹窗一致的居中卡片 */
      .win-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        align-items: center;
        justify-content: center;
        background: rgba(8, 20, 12, 0.78);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        user-select: none;
      }
      .win-card {
        text-align: center;
        padding: 32px 44px;
        border-radius: 18px;
        background: rgba(20, 40, 26, 0.9);
        border: 1px solid rgba(120, 200, 140, 0.35);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      }
      .win-card .start-sub {
        font-size: 16px;
        color: #cdeeda;
        margin-bottom: 16px;
      }
      /* 结束面板：退出游戏按钮（红色警示） */
      .win-exit-btn {
        display: block;
        width: 100%;
        max-width: 260px;
        margin: 12px auto 0;
        padding: 11px 32px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 40px;
        border: 1px solid rgba(255, 120, 120, 0.5);
        background: rgba(120, 40, 40, 0.7);
        color: #ffecec;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.15s ease;
      }
      .win-exit-btn:hover {
        background: rgba(160, 50, 50, 0.85);
      }
      .win-exit-btn:active {
        transform: scale(0.96);
      }
      /* 退出提示：固定显示在“退出游戏”按钮下方（面板内普通文档流，不存在层级遮挡问题） */
      .win-exit-tip {
        display: none;
        margin-top: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        text-align: center;
      }
      .win-exit-tip.on {
        display: block;
      }
      /* 通关撒花层：全屏彩带雨，盖在结算面板(z-index:200)之上，不拦截点击 */
      #confettiCanvas {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 260;
        pointer-events: none;
        display: none;
      }
      #confettiCanvas.on {
        display: block;
      }
      /* 移动端专用摇杆 & 射击按钮 */
      #mobileControls {
        position: fixed;
        bottom: 75px;
        left: 0;
        right: 0;
        display: none;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 50;
        pointer-events: none;
      }
      #mobileControls > * {
        pointer-events: auto;
      }
      .joystick-area {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
        border: 2px solid rgba(255, 255, 255, 0.2);
        position: relative;
        touch-action: none;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
      }
      .joystick-knob {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.1) 100%
        );
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        transition: 0.03s;
      }
      .fire-btn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.1) 100%
        );
        border: 3px solid rgba(255, 255, 255, 0.4);
        color: white;
        font-size: 22px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
        touch-action: none;
        user-select: none;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }
      .fire-btn:active {
        transform: scale(0.92);
      }
      /* 手机端适配 */
      @media (max-width: 768px) {
        .robot-hud {
          font-size: 14px;
          min-width: 270px;
          padding: 6px 12px;
          top: 20px;
        }
        /* 50 只时图标换行多行会撑高 HUD 压到左右面板：缩小图标并限制图标区高度，超出隐藏 */
        .robot-icons {
          max-height: 52px;
          overflow: hidden;
          gap: 3px;
          margin-top: 2px;
        }
        .robot-icon {
          width: 11px;
          height: 11px;
        }
        .history-panel {
          top: 120px;
          left: 6px;
          min-width: 120px;
          padding: 6px 8px;
          font-size: 14px;
        }
        #historyList {
          max-height: 121px;
          -webkit-overflow-scrolling: touch;
        }
        .right-ui-wrap {
          top: 120px;
          right: 6px;
          gap: 6px;
        }
        .diff-hint {
          font-size: 14px;
          max-width: 150px;
        }
        .help-panel {
          font-size: 14px;
          padding: 6px 8px;
          min-width: 132px;
        }
        .help-body .help-text {
          font-size: 14px;
        }
        .compass-wrap {
          width: 73px;
          height: 73px;
        }
        .compass-needle {
          height: 33px;
          width: 5px;
        }
        .compass-text {
          font-size: 15px;
        }
        .music-btn {
          font-size: 16px;
          padding: 7px 12px;
        }
        .music-mode {
          font-size: 14px;
          padding: 6px 10px;
        }
        .win-overlay .start-title {
          font-size: 26px;
        }
        #mobileControls {
          display: flex !important;
        }
        .crosshair {
          font-size: 24px;
        }
      }
      @media (pointer: coarse) {
        #mobileControls {
          display: flex !important;
        }
      }
      /* 桌面端隐藏移动控件 */
      @media (pointer: fine) {
        #mobileControls {
          display: none !important;
        }
      }
      /* 防沉迷提醒样式已抽离到 public/antiAddiction.css（于 shooter.html 中 link 引入） */