* {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent
      }

      html,
      body {
        margin: 0;
        height: 100%;
        background: #03040a;
        overflow: hidden;
        color: #d8f3ff;
        font-family: ui-monospace, Menlo, Consolas, monospace;
        cursor: crosshair;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        touch-action: none;
        overscroll-behavior: none;
        position: fixed;
        width: 100%
      }

      body.touch {
        cursor: default
      }

      /* 只针对主画布 —— 早先写作裸 `canvas`，
         会把机库预览画布 #hgc 也撑成全屏 fixed，盖住整个机库 UI */
      #c {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        touch-action: none
      }

      #v {
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 8, .45))
      }

      #m {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left;
        padding: 24px;
        z-index: 8;
        background: radial-gradient(circle, rgba(3, 4, 10, .1), rgba(3, 4, 10, .82));
        transition: opacity .6s
      }

      /* 排版：左边一排按钮，右边标题 */
      #m .mBody {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(18px, 5vw, 58px);
        width: 100%;
        max-width: 900px
      }

      #m .mLeft {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 0 0 auto;
        min-width: min(210px, 42vw)
      }

      #m .mLeft button {
        width: 100%;
        text-align: left;
        padding: 13px 16px;
        border: 1px solid #1d4a5c;
        background: rgba(10, 30, 45, .5);
        color: #cfe9f5;
        font: 700 12.5px ui-monospace, Menlo, monospace;
        letter-spacing: .16em;
        cursor: pointer;
        transition: border-color .15s, background .15s, color .15s
      }

      #m .mLeft button:hover,
      #m .mLeft button:active {
        border-color: #2ee6ff;
        background: rgba(46, 230, 255, .12);
        color: #2ee6ff
      }

      #m .mRight {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px
      }

      /* 窄屏：改成上下堆叠，按钮排在上方 */
      @media (max-width:620px) {
        #m .mBody {
          flex-direction: column;
          align-items: stretch;
          gap: 14px
        }

        #m .mLeft {
          min-width: 0
        }

        #m .mLeft button {
          padding: 10px 13px;
          font-size: 11.5px
        }

        /* 选择器要和 .mRight 那条同权重，否则压不住 */
        #m .mRight #hint {
          display: none
        }
      }

      /* 横屏矮屏：压紧间距 */
      @media (max-height:430px) {
        #m .mBody {
          gap: 16px
        }

        #m .mLeft {
          gap: 6px;
          min-width: min(170px, 36vw)
        }

        #m .mLeft button {
          padding: 8px 12px;
          font-size: 11px
        }

        /* 矮屏：压紧间距，横排即可，不需要堆叠 */
        #m .mRight #hint {
          display: none
        }
      }

      /* 菜单 / 模式选择时隐藏游戏内控件（GM、技能键、副武器、FPS），
         否则它们会压在菜单文字上。类由 render() 每帧同步。 */
      body.inMenu #gm,
      body.inMenu #fp,
      body.inMenu #ui,
      body.inMenu #sk {
        display: none !important
      }

      /* 很矮的横屏手机（如 568×320）用竖排会顶出屏幕：进一步压紧 */
      @media (max-width:620px) and (max-height:440px) {
        #m {
          padding: 10px 14px
        }

        #m .mBody {
          gap: 8px
        }

        #m .mLeft {
          gap: 5px
        }

        #m .mLeft button {
          padding: 6px 11px;
          font-size: 10.5px;
          letter-spacing: .12em
        }

        #m .mRight {
          gap: 4px
        }

        #m .mRight h1 {
          font-size: clamp(20px, 7.2vw, 32px);
          line-height: .96;
          letter-spacing: .1em
        }

        #m .mRight p {
          font-size: 8.5px;
          letter-spacing: .18em
        }

        #m .mRight #hint,
        #m #build {
          display: none
        }
      }

      /* 游玩中的暂停按钮：放顶部中间偏左，避开 FPS 与静音键 */
      #pb {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: calc(8px + env(safe-area-inset-top));
        z-index: 20;
        display: none;
        width: 42px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(46, 230, 255, .45);
        background: rgba(4, 10, 18, .82);
        color: #2ee6ff;
        font: 700 11px ui-monospace, Menlo, monospace;
        letter-spacing: .06em;
        cursor: pointer;
        transition: background .15s, border-color .15s
      }

      #pb:hover,
      #pb:active {
        background: rgba(46, 230, 255, .18);
        border-color: #2ee6ff
      }

      /* 只有游玩中出现；菜单 / 暂停时隐藏（暂停面板自己有继续按钮） */
      body.playing #pb {
        display: block
      }

      /* 强制横屏提示层 */
      #rot {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: #03040a;
        color: #2ee6ff;
        text-align: center
      }

      #rot.on {
        display: flex
      }

      #rot .rotIco {
        font-size: 54px;
        line-height: 1;
        animation: rotSpin 2.4s ease-in-out infinite
      }

      #rot b {
        font: 700 14px ui-monospace, Menlo, monospace;
        letter-spacing: .24em
      }

      #rot small {
        font: 400 10px ui-monospace, Menlo, monospace;
        color: #4f7b8a;
        letter-spacing: .14em
      }

      @keyframes rotSpin {
        0%,
        45% {
          transform: rotate(0)
        }

        55%,
        100% {
          transform: rotate(90deg)
        }
      }

      #m.h {
        opacity: 0;
        pointer-events: none
      }

      h1 {
        margin: 0;
        font: 200 clamp(34px, 9vw, 120px)/1 "Helvetica Neue", Arial, sans-serif;
        letter-spacing: .18em;
        text-shadow: 0 0 30px #2ee6ff
      }

      /* 标题必须留在右列里：原来 9vw 在横屏会把 VECTORSTRIKE 顶出屏幕。
         手机竖屏（≤620px）时宽度不够，改成两行堆叠，避免被裁掉。 */
      #m .mRight h1 {
        font-size: clamp(20px, min(5.6vw, 13vh), 66px);
        letter-spacing: .12em;
        white-space: nowrap;
        overflow: hidden
      }

      #m .mRight h1 b {
        display: inline
      }

      @media (max-width:620px) {
        #m .mRight h1 {
          font-size: clamp(26px, 12vw, 46px);
          letter-spacing: .14em;
          white-space: normal;
          line-height: .98;
          overflow: visible
        }

        /* VECTOR / STRIKE 上下两行，两个词都不会被切掉 */
        #m .mRight h1 b {
          display: block
        }
      }

      #m .mRight p {
        font-size: clamp(9px, 1.5vw, 13px);
        letter-spacing: .28em
      }

      h1 b {
        font-weight: 800;
        color: #ff4d8d;
        text-shadow: 0 0 30px #ff4d8d
      }

      p {
        margin: 0;
        letter-spacing: .4em;
        opacity: .75;
        font-size: 13px
      }

      .btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center
      }

      button {
        cursor: pointer;
        background: none;
        color: #fff;
        border: 1px solid #2ee6ff;
        padding: 14px 34px;
        letter-spacing: .3em;
        font: inherit;
        font-size: 13px;
        transition: .25s;
        box-shadow: 0 0 20px #2ee6ff44 inset
      }

      button:hover {
        background: #2ee6ff;
        color: #001;
        box-shadow: 0 0 40px #2ee6ff
      }

      button:active {
        background: #2ee6ff;
        color: #001
      }

      button:disabled {
        opacity: .3;
        cursor: default;
        box-shadow: none
      }

      button:disabled:hover {
        background: none;
        color: #fff;
        box-shadow: none
      }

      small {
        opacity: .55;
        line-height: 2;
        letter-spacing: .12em;
        font-size: 12px
      }

      #cr {
        color: #ffd23f;
        letter-spacing: .2em
      }

      #hg {
        position: fixed;
        inset: 0;
        display: none;
        z-index: 10;
        background: rgba(2, 3, 10, .96);
        overflow-y: auto;
        padding: 18px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain
      }

      #hg.on {
        display: block
      }

      .panel {
        max-width: 860px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-bottom: 40px
      }

      .hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        letter-spacing: .3em;
        font-size: 14px;
        color: #2ee6ff;
        border-bottom: 1px solid #143a4a;
        padding-bottom: 10px
      }

      .hd .ttl {
        font-size: 16px
      }

      .row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
      }

      .card {
        flex: 1 1 168px;
        min-width: 148px;
        border: 1px solid #1d4a5c;
        padding: 12px;
        background: rgba(10, 30, 45, .5);
        display: flex;
        flex-direction: column;
        gap: 6px
      }

      .card.sel {
        border-color: #2ee6ff;
        box-shadow: 0 0 18px #2ee6ff44 inset
      }

      .card.lock {
        opacity: .62
      }

      .card b {
        font-size: 13px;
        letter-spacing: .12em
      }

      .card small {
        opacity: .62;
        font-size: 10px;
        letter-spacing: .05em;
        line-height: 1.6
      }

      .card button {
        padding: 8px;
        font-size: 11px;
        letter-spacing: .16em;
        border-color: #2ee6ff88;
        margin-top: auto
      }

      .sect {
        letter-spacing: .32em;
        font-size: 11px;
        color: #7fe;
        opacity: .8;
        margin-top: 6px
      }

      #ui {
        position: fixed;
        inset: 0;
        pointer-events: none;
        display: none;
        z-index: 5
      }

      body.touch #ui {
        display: block
      }

      #ui button {
        pointer-events: auto;
        padding: 0;
        font-family: inherit
      }

      #mf {
        position: fixed;
        right: calc(20px + env(safe-area-inset-right));
        bottom: calc(26px + env(safe-area-inset-bottom));
        width: 98px;
        height: 98px;
        border-radius: 50%;
        border: 1px solid rgba(255, 210, 63, .55);
        color: #ffd23f;
        font-size: 12px;
        letter-spacing: .16em;
        background: rgba(4, 10, 18, .88);
        box-shadow: none;
        transition: background .1s, border-color .1s, color .1s
      }

      #mf.on {
        background: #ffd23f;
        color: #001;
        border-color: #ffd23f
      }

      #mm {
        position: fixed;
        right: calc(16px + env(safe-area-inset-right));
        top: calc(16px + env(safe-area-inset-top));
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid #2ee6ff88;
        color: #2ee6ff;
        font-size: 17px;
        letter-spacing: 0;
        background: rgba(46, 230, 255, .06);
        box-shadow: none
      }

      /* 移动端技能按钮：横排贴底。
         不是在整个视口里居中 —— 右侧还压着 MORTAR 圆钮（约 98px），
         整视口居中会让最后一个技能键（隐身）盖到 MORTAR 上。
         这里把可用区收窄成「左边到 MORTAR 之前」，再在其中居中。 */
      #sk {
        position: fixed;
        left: calc(8px + env(safe-area-inset-left));
        right: calc(112px + env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        display: none;
        flex-direction: row;
        gap: 9px;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 5
      }

      body.touch #sk {
        display: flex
      }

      #skDash {
        --acc: #2ee6ff;
        --accSoft: rgba(46, 230, 255, .22);
        --accRing: rgba(46, 230, 255, .15);
        --accEdge: rgba(46, 230, 255, .40)
      }

      #skSlow {
        --acc: #c77dff;
        --accSoft: rgba(199, 125, 255, .22);
        --accRing: rgba(199, 125, 255, .15);
        --accEdge: rgba(199, 125, 255, .40)
      }

      #skEmp {
        --acc: #ffd23f;
        --accSoft: rgba(255, 210, 63, .22);
        --accRing: rgba(255, 210, 63, .15);
        --accEdge: rgba(255, 210, 63, .40)
      }

      #skStealth {
        --acc: #c77dff;
        --accSoft: rgba(199, 125, 255, .22);
        --accRing: rgba(199, 125, 255, .15);
        --accEdge: rgba(199, 125, 255, .40)
      }

      .skB {
        --acc: #2ee6ff;
        --accSoft: rgba(46, 230, 255, .22);
        --accRing: rgba(46, 230, 255, .15);
        --accEdge: rgba(46, 230, 255, .40);
        pointer-events: auto;
        position: relative;
        width: 70px;
        height: 70px;
        padding: 0;
        border: 1px solid var(--accEdge);
        border-radius: 50%;
        background: rgba(4, 10, 18, .88);
        color: var(--acc);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font: 700 12px ui-monospace, monospace;
        letter-spacing: .04em;
        cursor: pointer;
        outline: none;
        box-shadow: none;
        transition: transform .12s cubic-bezier(.2, 1.4, .5, 1), border-color .2s, color .2s;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: none
      }

      .skB .skr {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        pointer-events: none;
        overflow: visible
      }

      .skB .skrT {
        fill: none;
        stroke: var(--accRing);
        stroke-width: 4
      }

      .skB .skrP {
        fill: none;
        stroke: var(--acc);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 213.6;
        stroke-dashoffset: 0;
        opacity: 0;
        transition: stroke-dashoffset .08s linear, opacity .2s
      }

      .skB.cool .skrP {
        opacity: 1
      }

      .skB .ski {
        font-size: 22px;
        line-height: 1;
        transition: opacity .15s
      }

      .skB .ske {
        font-size: 8px;
        opacity: .68;
        margin-top: 3px;
        letter-spacing: .1em;
        transition: opacity .15s
      }

      .skB .skq {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 10px;
        background: rgba(4, 10, 18, .94);
        border: 1px solid var(--accEdge);
        color: var(--acc);
        font: 700 9px/17px ui-monospace, monospace;
        text-align: center;
        letter-spacing: 0
      }

      .skB .skcd {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        font: 700 18px/1 ui-monospace, monospace;
        color: #eaf7ff;
        text-shadow: 0 0 10px #000, 0 0 4px #000;
        pointer-events: none
      }

      .skB.cool .skcd {
        display: flex
      }

      .skB.cool .ski,
      .skB.cool .ske {
        opacity: 0
      }

      .skB.noen {
        color: #5d7078;
        border-color: rgba(93, 112, 120, .22)
      }

      .skB.noen .skrT {
        stroke: rgba(93, 112, 120, .18)
      }

      .skB.noen .skrP {
        stroke: #5d7078
      }

      /* 就绪态：只换颜色，不做脉冲泛光 —— 贴合线框主题 */
      .skB.rdy {
        --acc: #2eff9a;
        --accEdge: rgba(46, 255, 154, .55);
        --accRing: rgba(46, 255, 154, .22)
      }

      /* 隐身激活中：反白提示状态 */
      .skB.act {
        background: var(--acc);
        color: #001;
        border-color: var(--acc)
      }

      .skB.act .ski,
      .skB.act .ske {
        opacity: 0
      }

      .skB:active {
        transform: scale(.9)
      }

      @media (max-width:420px) {
        #sk {
          gap: 8px
        }

        .skB {
          width: 58px;
          height: 58px
        }

        .skB .ski {
          font-size: 18px
        }

        .skB .skcd {
          font-size: 14px
        }

        /* 窄屏：4 个技能键 + MORTAR 挤在一排会互相压住。
           让技能键换行并往上让位，MORTAR 独占最右下角。 */
        #sk {
          left: calc(8px + env(safe-area-inset-left));
          right: calc(8px + env(safe-area-inset-right));
          bottom: calc(84px + env(safe-area-inset-bottom));
          flex-wrap: wrap;
          gap: 7px
        }
      }

      

      /* GAMEMODE */
      #gm {
        position: fixed;
        z-index: 30;
        width: 58px;
        height: 58px;
        left: 16px;
        top: 60%
      }

      #gmBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid rgba(46, 230, 255, .55);
        padding: 0;
        background: rgba(4, 10, 18, .92);
        color: #2ee6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font: 800 13px ui-monospace, monospace;
        letter-spacing: .12em;
        cursor: pointer;
        user-select: none;
        touch-action: none;
        box-shadow: none;
        transition: transform .12s, color .2s, border-color .2s, background .2s
      }

      /* 扁平化：去掉旋转虚线环与泛光，贴合线框主题 */
      #gm.on #gmBtn {
        background: #2ee6ff;
        color: #001;
        border-color: #2ee6ff
      }

      #gmPanel {
        position: fixed;
        left: 0;
        top: 0;
        width: 288px;
        max-height: min(82vh, 700px);
        overflow-y: auto;
        background: linear-gradient(180deg, rgba(6, 14, 24, .985), rgba(3, 7, 14, .985));
        border: 1px solid rgba(46, 230, 255, .42);
        border-radius: 4px;
        box-shadow: 0 18px 46px rgba(0, 0, 0, .62), 0 0 34px rgba(46, 230, 255, .14), 0 0 0 1px rgba(46, 230, 255, .08) inset;
        display: none;
        font-size: 11px;
        color: #cfe;
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(46, 230, 255, .35) transparent
      }

      #gmPanel::-webkit-scrollbar {
        width: 6px
      }

      #gmPanel::-webkit-scrollbar-thumb {
        background: rgba(46, 230, 255, .35);
        border-radius: 3px
      }

      #gm.on #gmPanel {
        display: block;
        animation: gmIn .16s ease-out
      }

      @keyframes gmIn {
        from {
          opacity: 0;
          transform: translateY(-6px) scale(.985)
        }
      }

      /* 面板位置改由 JS 计算（gmPlacePanel）：任何屏幕尺寸都留在视口内 */

      #gmHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 14px;
        border-bottom: 1px solid rgba(46, 230, 255, .24);
        color: #2ee6ff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3em;
        cursor: move;
        user-select: none;
        touch-action: none;
        background: linear-gradient(180deg, rgba(46, 230, 255, .12), rgba(46, 230, 255, .02))
      }

      #gmClose {
        color: #ff4d6d;
        cursor: pointer;
        font-size: 17px;
        padding: 0 7px;
        letter-spacing: 0;
        line-height: 1;
        border-radius: 3px;
        transition: background .15s, color .15s
      }

      #gmClose:hover {
        color: #fff;
        background: rgba(255, 77, 109, .2)
      }

      /* 实时状态条 */
      .gmStats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: rgba(46, 230, 255, .12);
        border-bottom: 1px solid rgba(46, 230, 255, .18)
      }

      .gmStat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        padding: 8px 4px;
        background: rgba(4, 10, 18, .96)
      }

      .gmStat b {
        color: #eaf7ff;
        font-size: 13px;
        letter-spacing: .02em
      }

      .gmStat i {
        font-style: normal;
        font-size: 8px;
        letter-spacing: .18em;
        color: #4f7b8a
      }

      /* 一键预设 */
      .gmQuick {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(46, 230, 255, .14)
      }

      .gmQuick button {
        flex: 1;
        padding: 8px 4px;
        border: 1px solid rgba(46, 230, 255, .45);
        border-radius: 3px;
        background: rgba(46, 230, 255, .07);
        color: #2ee6ff;
        font: 700 10px ui-monospace, monospace;
        letter-spacing: .1em;
        cursor: pointer;
        transition: background .15s, box-shadow .15s
      }

      .gmQuick button:hover {
        background: rgba(46, 230, 255, .2);
        box-shadow: 0 0 16px rgba(46, 230, 255, .3)
      }

      .gmQuick button:active {
        background: rgba(46, 230, 255, .38);
        color: #001
      }

      .gmGroup {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px 5px;
        color: #7fe;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .22em;
        opacity: .8
      }

      .gmGroup::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(46, 230, 255, .3), transparent)
      }

      .gmRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(46, 230, 255, .06);
        cursor: pointer;
        user-select: none;
        transition: background .12s
      }

      .gmRow:hover {
        background: rgba(46, 230, 255, .07)
      }

      .gmRow:active {
        background: rgba(46, 230, 255, .16)
      }

      .gmRow .gmLabel {
        color: #9db8c4;
        font-size: 11.5px;
        transition: color .15s
      }

      .gmRow .gmVal {
        color: #2ee6ff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em;
        padding: 2px 7px;
        border: 1px solid rgba(46, 230, 255, .3);
        border-radius: 3px;
        background: rgba(46, 230, 255, .07)
      }

      /* 开关 */
      .gmSw {
        position: relative;
        flex: 0 0 auto;
        width: 38px;
        height: 20px;
        border-radius: 10px;
        background: rgba(120, 140, 150, .2);
        border: 1px solid rgba(120, 140, 150, .3);
        transition: background .18s, border-color .18s, box-shadow .18s
      }

      .gmSw i {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #6d8089;
        transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), background .18s
      }

      .gmRow.on {
        background: rgba(46, 255, 154, .07)
      }

      .gmRow.on .gmLabel {
        color: #2eff9a
      }

      .gmRow.on .gmSw {
        background: rgba(46, 255, 154, .28);
        border-color: rgba(46, 255, 154, .6);
        box-shadow: 0 0 12px rgba(46, 255, 154, .35)
      }

      .gmRow.on .gmSw i {
        transform: translateX(18px);
        background: #2eff9a
      }

      /* 倍率 */
      .gmRow.gmCyc.on {
        background: rgba(255, 210, 63, .07)
      }

      .gmRow.gmCyc.on .gmLabel {
        color: #ffd23f
      }

      .gmRow.gmCyc.on .gmVal {
        color: #ffd23f;
        border-color: rgba(255, 210, 63, .45);
        background: rgba(255, 210, 63, .1)
      }

      /* 操作 */
      .gmAct {
        padding: 9px 14px;
        border-bottom: 1px solid rgba(46, 230, 255, .06);
        color: #ffd23f;
        font-size: 11px;
        text-align: left;
        cursor: pointer;
        user-select: none;
        letter-spacing: .06em;
        position: relative;
        padding-left: 26px;
        transition: background .12s, padding-left .12s
      }

      .gmAct::before {
        content: '›';
        position: absolute;
        left: 13px;
        color: rgba(255, 210, 63, .55);
        font-weight: 700
      }

      .gmAct:hover {
        background: rgba(255, 210, 63, .12);
        padding-left: 30px
      }

      .gmAct:active {
        background: rgba(255, 210, 63, .28);
        color: #fff
      }

      .gmFoot {
        padding: 11px 14px;
        color: #4a6b78;
        font-size: 9px;
        letter-spacing: .12em;
        text-align: center;
        border-top: 1px solid rgba(46, 230, 255, .1)
      }

      /* ============ FPS 计数器 ============ */
      #fp {
        position: fixed;
        right: calc(16px + env(safe-area-inset-right));
        top: calc(70px + env(safe-area-inset-top));
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        padding: 5px 9px;
        border: 1px solid #2ee6ff88;
        border-radius: 3px;
        background: rgba(4, 10, 18, .72);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        pointer-events: none;
        z-index: 9;
        font-family: ui-monospace, Menlo, Consolas, monospace;
        transition: opacity .3s, border-color .3s
      }

      #fp span {
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .02em;
        color: #2eff9a;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 0 10px currentColor
      }

      #fp i {
        font-style: normal;
        font-size: 7px;
        letter-spacing: .22em;
        color: #4f7b8a;
        margin-top: 2px
      }

      /* ============ 设置面板 ============ */
      #st, #mu {
        position: fixed;
        inset: 0;
        display: none;
        z-index: 20;
        background: rgba(2, 3, 10, .96);
        overflow-y: auto;
        padding: 18px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain
      }

      #st.on, #mu.on {
        display: block
      }

      #stClose, #muClose {
        color: #ff4d6d;
        cursor: pointer;
        font-size: 17px;
        padding: 0 7px;
        line-height: 1;
        transition: background .15s, color .15s
      }

      #stClose:hover, #muClose:hover {
        color: #fff;
        background: rgba(255, 77, 109, .2)
      }

      .setGroup {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 18px 0 4px;
        padding-bottom: 6px;
        border-bottom: 1px solid #143a4a;
        color: #7fe;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .26em;
        opacity: .85
      }

      .setGroup:first-child {
        margin-top: 4px
      }

      .setRow {
        padding: 12px 0;
        border-bottom: 1px solid rgba(46, 230, 255, .08)
      }

      .setRow:last-child {
        border-bottom: 0
      }

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

      .setLab span {
        font-size: 13px;
        color: #d8f3ff;
        letter-spacing: .06em
      }

      .setLab em {
        font-style: normal;
        font-size: 10px;
        color: #4f7b8a;
        text-align: right;
        line-height: 1.4;
        letter-spacing: .04em
      }

      .setCtrl {
        display: flex;
        align-items: center;
        gap: 12px
      }

      .setCtrl input[type=range] {
        flex: 1;
        height: 24px;
        background: transparent;
        outline: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none
      }

      .setCtrl input[type=range]::-webkit-slider-runnable-track {
        height: 2px;
        background: rgba(46, 230, 255, .26)
      }

      .setCtrl input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        margin-top: -6px;
        border: 0;
        border-radius: 50%;
        background: #2ee6ff;
        box-shadow: 0 0 14px -2px #2ee6ff
      }

      .setCtrl input[type=range]::-moz-range-track {
        height: 2px;
        background: rgba(46, 230, 255, .26)
      }

      .setCtrl input[type=range]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: 0;
        border-radius: 50%;
        background: #2ee6ff;
        box-shadow: 0 0 14px -2px #2ee6ff
      }

      .setVal {
        flex: none;
        min-width: 52px;
        text-align: right;
        color: #2ee6ff;
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums
      }

      .setSw {
        position: relative;
        width: 50px;
        height: 26px;
        padding: 0;
        border: 1px solid #1d4a5c;
        border-radius: 2px;
        background: transparent;
        cursor: pointer;
        transition: all .22s
      }

      .setSw i {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        background: #4f7b8a;
        transition: all .22s cubic-bezier(.22, .8, .3, 1)
      }

      .setSw.on {
        border-color: #2ee6ff;
        background: rgba(46, 230, 255, .14)
      }

      .setSw.on i {
        left: 27px;
        background: #2ee6ff;
        box-shadow: 0 0 14px -2px #2ee6ff
      }

      .setBtns {
        display: flex;
        gap: 10px;
        margin-top: 18px
      }

      .setBtns button {
        flex: 1;
        padding: 12px;
        font-size: 12px
      }

      /* ============ 音乐面板 ============ */
      /* ---------- 音乐面板：搜索区重新排版 ---------- */
      .musTop {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #143a4a
      }

      .musBar {
        display: flex;
        align-items: stretch;
        gap: 0;
        border: 1px solid #1d4a5c;
        background: rgba(10, 30, 45, .6);
        transition: border-color .2s
      }

      .musBar:focus-within {
        border-color: #2ee6ff
      }

      .musBar .musIco {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        flex: none;
        color: #2ee6ff;
        font-size: 15px;
        background: rgba(46, 230, 255, .07);
        border-right: 1px solid #1d4a5c
      }

      .musBar input {
        flex: 1;
        min-width: 0;
        padding: 11px 12px;
        border: 0;
        background: transparent;
        color: #d8f3ff;
        font: inherit;
        font-size: 13px;
        outline: none;
        letter-spacing: .02em
      }

      .musBar input::placeholder {
        color: #43606e
      }

      .musBar button {
        flex: none;
        padding: 0 18px;
        border: 0;
        border-left: 1px solid #1d4a5c;
        background: rgba(46, 230, 255, .10);
        color: #2ee6ff;
        font: 700 11px ui-monospace, Menlo, monospace;
        letter-spacing: .18em;
        cursor: pointer;
        transition: background .2s
      }

      .musBar button:hover {
        background: rgba(46, 230, 255, .22)
      }

      .musTypes {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0
      }

      .musTypes .musLab {
        flex: none;
        font: 700 9px ui-monospace, Menlo, monospace;
        letter-spacing: .2em;
        color: #4f7b8a;
        padding-right: 2px
      }

      .musT {
        flex: 0 1 auto;
        padding: 6px 12px;
        border: 1px solid #1d4a5c;
        border-radius: 2px;
        background: transparent;
        color: #4f7b8a;
        font: 700 10px ui-monospace, Menlo, monospace;
        letter-spacing: .14em;
        cursor: pointer;
        transition: all .2s
      }

      .musT:hover {
        border-color: rgba(46, 230, 255, .5);
        color: #7fa8b8
      }

      .musT.on {
        border-color: #2ee6ff;
        color: #2ee6ff;
        background: rgba(46, 230, 255, .1)
      }

      .musNow {
        padding: 10px 12px;
        margin-bottom: 10px;
        border: 1px solid rgba(46, 230, 255, .2);
        border-left: 2px solid #ffd23f;
        background: rgba(10, 30, 45, .45);
        color: #ffd23f;
        font-size: 12px;
        letter-spacing: .04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .musList {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 52vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(46, 230, 255, .35) transparent
      }

      .musList::-webkit-scrollbar {
        width: 6px
      }

      .musList::-webkit-scrollbar-thumb {
        background: rgba(46, 230, 255, .35);
        border-radius: 3px
      }

      .musRow {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid #1d4a5c;
        background: rgba(10, 30, 45, .45);
        transition: border-color .2s
      }

      .musRow:hover {
        border-color: rgba(46, 230, 255, .6)
      }

      /* 预置音色包：当前正在用的那一项 */
      .musRow.sel {
        border-color: #2ee6ff;
        background: rgba(46, 230, 255, .1);
        box-shadow: 0 0 18px rgba(46, 230, 255, .2) inset
      }

      .musRow b {
        flex: 1;
        min-width: 0;
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: .04em;
        color: #d8f3ff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .musRow small {
        display: block;
        font-size: 10px;
        color: #4f7b8a;
        letter-spacing: .04em;
        margin-top: 3px;
        opacity: 1
      }

      .musRow > div {
        flex: 1;
        min-width: 0
      }

      .musRow button {
        flex: none;
        padding: 7px 16px;
        font-size: 11px;
        letter-spacing: .14em
      }

      .musTip {
        padding: 18px;
        text-align: center;
        color: #4f7b8a;
        font-size: 12px;
        letter-spacing: .1em
      }

      .musTip.err {
        color: #ff4d6d
      }

      .musPager {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0 4px
      }

      .musPager button {
        flex: none;
        padding: 8px 16px;
        font-size: 11px;
        letter-spacing: .12em
      }

      .musPager span {
        flex: 1;
        text-align: center;
        font-size: 10px;
        color: #4f7b8a;
        letter-spacing: .08em
      }
/* ============ 双摇杆（触屏） ============ */
      /* 左 = 移动，右 = 瞄准 + 开火；固定底座，拇指不用找位置 */
      .joy {
        position: fixed;
        width: 132px;
        height: 132px;
        border-radius: 50%;
        border: 2px solid rgba(46, 230, 255, .30);
        background: radial-gradient(circle, rgba(46, 230, 255, .10), rgba(46, 230, 255, .02) 65%, transparent 72%);
        pointer-events: none;
        z-index: 6;
        opacity: .45;
        display: none;
        transition: opacity .15s, border-color .15s, box-shadow .15s
      }

      body.touch .joy {
        display: block
      }

      .joy.on {
        opacity: 1;
        border-color: rgba(46, 230, 255, .78);
        box-shadow: 0 0 26px rgba(46, 230, 255, .26)
      }

      #joyL {
        left: calc(26px + env(safe-area-inset-left));
        bottom: calc(26px + env(safe-area-inset-bottom))
      }

      #joyR {
        right: calc(26px + env(safe-area-inset-right));
        bottom: calc(26px + env(safe-area-inset-bottom));
        border-color: rgba(255, 210, 63, .30);
        background: radial-gradient(circle, rgba(255, 210, 63, .10), rgba(255, 210, 63, .02) 65%, transparent 72%)
      }

      #joyR.on {
        border-color: rgba(255, 210, 63, .82);
        box-shadow: 0 0 26px rgba(255, 210, 63, .30)
      }

      .joyk {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 2px solid #2ee6ff;
        background: rgba(46, 230, 255, .32);
        transform: translate(-50%, -50%);
        box-shadow: 0 0 18px rgba(46, 230, 255, .60);
        pointer-events: none
      }

      #joyR .joyk {
        border-color: #ffd23f;
        background: rgba(255, 210, 63, .30);
        box-shadow: 0 0 18px rgba(255, 210, 63, .55)
      }

      .joyk::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        transform: translate(-50%, -50%)
      }

      /* 触屏：MISSILE 缩到右下角，与底部横排技能同排，避开右侧高度条 */
      body.touch #mf {
        left: auto;
        right: calc(12px + env(safe-area-inset-right));
        transform: none;
        bottom: calc(9px + env(safe-area-inset-bottom));
        width: 66px;
        height: 66px;
        font-size: 10px
      }

      @media (max-width:420px) {
        .joy {
          width: 112px;
          height: 112px
        }

        .joyk {
          width: 40px;
          height: 40px
        }

        #joyL {
          left: calc(16px + env(safe-area-inset-left))
        }

        #joyR {
          right: calc(16px + env(safe-area-inset-right))
        }

        body.touch #mf {
          width: 58px;
          height: 58px;
          font-size: 9px
        }
      }/* ============ 修复：面板滚动 / 自由摇杆 ============ */
/* body 上的 touch-action:none 会连带屏蔽子元素滚动，这里放开；
   游戏手势由 canvas 自己保持 none 来吃掉。 */
html, body { touch-action: manipulation; }
#hg, #st, #mu, .musList { touch-action: pan-y; }

/* 摇杆不再固定在左下 / 右下：手指按在哪里就出现在哪里 */
body.touch .joy { display: none; }
body.touch .joy.on { display: block; }
.joy {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: none;
  opacity: 1
}
.joy.on {
  display: block;
  opacity: 1
}
#joyL, #joyR {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto
}

@media (max-width:420px) {
  #joyL, #joyR {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto
  }
}
/* ═══════════ HANGAR · preview left · list right ═══════════ */
/* overflow-y 而非 hidden：内容超高时面板本身能滚动，BACK 不会被裁掉 */
#hg { padding: 0; overflow-y: auto; }

.hgWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  gap: 12px;
  box-sizing: border-box;
}

.hgHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .3em;
  font-size: 15px;
  color: #2ee6ff;
  border-bottom: 1px solid #143a4a;
  padding-bottom: 10px;
  flex: none;
}

.hgBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
}

/* 左侧预览 */
.hgPrev {
  flex: 1 1 54%;
  min-width: 0;
  min-height: 210px;
  position: relative;
  border: 1px solid #1d4a5c;
  background: radial-gradient(circle at 50% 42%, rgba(46,230,255,.07), rgba(3,6,12,.98) 72%);
  overflow: hidden;
}

#hgc { display: block; width: 100%; height: 100%; }

/* 右侧列表 */
.hgSide {
  flex: 0 0 320px;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

#hgTabs { display: flex; gap: 6px; flex: none; }

.hgTab {
  flex: 1;
  padding: 9px 4px;
  border: 1px solid #1d4a5c;
  border-radius: 2px;
  background: transparent;
  color: #4f7b8a;
  font: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  cursor: pointer;
  transition: all .2s;
}

.hgTab.on {
  border-color: #2ee6ff;
  color: #2ee6ff;
  background: rgba(46,230,255,.10);
  box-shadow: 0 0 16px rgba(46,230,255,.18) inset;
}

.hgList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 3px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,255,.35) transparent;
}

.hgList::-webkit-scrollbar { width: 6px; }
.hgList::-webkit-scrollbar-thumb { background: rgba(46,230,255,.35); border-radius: 3px; }

.hgRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #1d4a5c;
  background: rgba(10,30,45,.5);
  transition: border-color .2s, background .2s;
}

.hgRow:hover { border-color: rgba(46,230,255,.55); }
.hgRow.sel {
  border-color: #2ee6ff;
  background: rgba(46,230,255,.10);
  box-shadow: 0 0 18px rgba(46,230,255,.20) inset;
}
.hgRow.lock { opacity: .6; }

.hgRowMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hgRowMain b { font-size: 12.5px; letter-spacing: .08em; }
.hgRowMain small {
  font-size: 10px;
  color: #7fa8b8;
  letter-spacing: .03em;
  opacity: 1;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hgMini { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }

.hgMiniBar { display: flex; align-items: center; gap: 5px; }
.hgMiniBar i {
  font-style: normal;
  font-size: 8px;
  letter-spacing: .1em;
  color: #4f7b8a;
  width: 24px;
  flex: none;
}
.hgMiniBar u {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.10);
  text-decoration: none;
  overflow: hidden;
}
.hgMiniBar u b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2ee6ff, #2eff9a);
}

.hgRow button {
  flex: none;
  padding: 7px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  border-color: #2ee6ff88;
}

#hbBack {
  flex: none;
  padding: 11px;
  font-size: 12px;
  letter-spacing: .24em;
}

/* 窄屏：改成上下布局，预览在上 */
@media (max-width: 720px) {
  /* 手机也保持左预览 · 右列表（用户要求），预览收窄给列表让位 */
  .hgBody { flex-direction: row; }
  .hgPrev { flex: 0 0 40%; min-height: 0; }
  .hgSide { flex: 1 1 auto; max-width: none; }
  .hgWrap {
    padding: 10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    gap: 8px;
  }
  .hgTab { font-size: 9.5px; letter-spacing: .06em; padding: 7px 2px; }
  .hgRow { padding: 8px 9px; gap: 8px; }
  .hgRowMain b { font-size: 11.5px; }
  .hgRowMain small { font-size: 9px; }
  .hgRow button { padding: 6px 9px; font-size: 9.5px; letter-spacing: .08em; }
  #hbBack { padding: 9px; font-size: 11px; }
}

/* ═══════════ 设置：分段选择器 ═══════════ */
.setSeg { display: flex; gap: 6px; }

.setSeg button {
  flex: 1;
  padding: 9px 4px;
  border: 1px solid #1d4a5c;
  border-radius: 2px;
  background: transparent;
  color: #4f7b8a;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
  transition: all .2s;
}

.setSeg button.on {
  border-color: #2ee6ff;
  color: #2ee6ff;
  background: rgba(46,230,255,.10);
}

/* ═══════════ 开场动画 ═══════════ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #03040a;
  opacity: 1;
  transition: opacity .5s ease;
  cursor: pointer;
}

#intro.out { opacity: 0; pointer-events: none; }

#ic { display: block; width: 100%; height: 100%; }

#iskip {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font: 400 9.5px ui-monospace, Menlo, monospace;
  letter-spacing: .28em;
  color: #4f7b8a;
  animation: iskBlink 1.6s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes iskBlink {
  0%, 100% { opacity: .30; }
  50% { opacity: .80; }
}

/* ═══════════ SOUNDFONT ═══════════ */
.sf2Box {
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #1d4a5c;
  background: rgba(10, 30, 45, .45);
}

.sf2Head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sf2Head b {
  font-size: 12px;
  letter-spacing: .08em;
  color: #2ee6ff;
}
.sf2Head span {
  font-size: 10px;
  color: #4f7b8a;
  letter-spacing: .03em;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf2Head span.ok { color: #2eff9a; }

.sf2Hint {
  font-size: 10px;
  color: #5d7078;
  line-height: 1.6;
  letter-spacing: .02em;
  margin-bottom: 9px;
}

.sf2Btns { display: flex; gap: 8px; }
.sf2Btns button {
  flex: 1;
  padding: 9px 6px;
  font-size: 11px;
  letter-spacing: .14em;
  border-color: #2ee6ff88;
}
.sf2Btns button:disabled { opacity: .35; }

/* 列表高度收一点，给按钮留位 */
.musList { max-height: 38vh; }

@media (max-width: 420px) {
  .musList { max-height: 32vh; }
  .sf2Hint { display: none; }
}
/* ═══════════ 面板：标题与返回按钮始终可见 ═══════════ */
/* 内容变长后，标题栏和底部按钮会被滚走 —— 这里让它们吸顶 / 吸底。
   （机库已改为由 js/hangar.js 注入 DOM 与样式，不再依赖本文件的机库规则） */
#st, #mu {
  padding: 0;
  overflow: hidden;
}

#st .panel, #mu .panel {
  height: 100%;
  max-width: 860px;
  margin: 0 auto;
  gap: 12px;
  padding: 0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

#st .hd, #mu .hd {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
  background: rgba(2, 3, 10, .97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 底部的 BACK / STOP 那一行吸底，长列表也点得到 */
#st .panel > .btns, #mu .panel > .btns {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 !important;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(2, 3, 10, 0), rgba(2, 3, 10, .97) 34%);
}

#setContent { padding-bottom: 2px; }/* ═══════════ GM 面板：布局与视觉升级 ═══════════ */
#gmPanel {
  width: min(322px, calc(100vw - 16px));
  max-height: min(82vh, 700px);
}

/* 状态格子扩到 4 列，容纳 8 项读数 */
.gmStats { grid-template-columns: repeat(4, 1fr); }
.gmStat b { font-size: 12px; }
.gmStat i { font-size: 7.5px; letter-spacing: .12em; }

/* 预设按钮：三列网格 */
.gmQuick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.gmQuick button {
  padding: 7px 2px;
  font-size: 8.5px;
  letter-spacing: .05em;
}

/* 视觉开关：开启时标签走流动彩虹 */
.gmRow.gmVis.on .gmLabel {
  background: linear-gradient(90deg, #ff4d6d, #ffd23f, #2eff9a, #2ee6ff, #c77dff, #ff4d6d);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gmRainbow 3s linear infinite;
}

@keyframes gmRainbow {
  to { background-position: 300% 0; }
}

/* 有视觉作弊开启时，面板描边跟着变色（不再做泛光/脉冲，避免浮夸） */
#gm.fx #gmPanel {
  border-color: rgba(255, 255, 255, .48);
  animation: gmEdge 4s linear infinite;
}

@keyframes gmEdge {
  0% {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(255, 77, 109, .38) inset;
  }
  33% {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(46, 230, 255, .38) inset;
  }
  66% {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(46, 255, 154, .38) inset;
  }
  100% {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(255, 77, 109, .38) inset;
  }
}

/* 视觉作弊中：GM 按钮只换边框颜色，不做旋转与脉冲 */
#gm.fx #gmBtn {
  border-color: #ff4d6d;
  color: #ff4d6d;
}

@media (max-width: 420px) {
  #gmPanel { width: min(268px, calc(100vw - 16px)); max-height: min(74vh, 560px); }
  .gmQuick { grid-template-columns: repeat(2, 1fr); }
  .gmStats { grid-template-columns: repeat(4, 1fr); }
  .gmStat b { font-size: 11px; }
  .gmRow { padding: 9px 12px; }
  .gmRow .gmLabel { font-size: 10.5px; }
}/* ═══════════ GM 面板：滚动与吸顶修正 ═══════════ */
/* 上一轮加的 scroll-behavior:smooth 会让程序化设 scrollTop 立即读回旧值，
   触摸滚动也发黏；改回 auto。 */
#gmPanel {
  scroll-behavior: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* 标题栏吸顶：面板内容很长时，× 关闭按钮不会被滚出视野 */
#gmHead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(46, 230, 255, .14), rgba(8, 18, 30, .97) 70%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 底部提示也吸底，随时能看到拖动说明 */
.gmFoot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(6, 14, 24, .97) 40%, rgba(6, 14, 24, 0));
}