:root {
      color-scheme: dark;
      --bg: #05070a;
      --panel: #0c1118;
      --line: #202a35;
      --text: #dce8f3;
      --muted: #7f92a5;
      --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);
    }
    * { box-sizing: border-box; }
    html, body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      overscroll-behavior: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      background: radial-gradient(circle at 50% 40%, #111822 0%, #06080c 60%, #020304 100%);
      font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
    }
    html { position: fixed; inset: 0; }
    body {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      width: 100dvw;
      height: 100dvh;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    .stage {
      position: relative;
      width: min(100dvw, calc(100dvh * 16 / 9));
      height: min(100dvh, calc(100dvw * 9 / 16));
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid #27313d;
      background: #070a0f;
      box-shadow: 0 24px 80px rgba(0,0,0,.65), inset 0 0 70px rgba(25,45,65,.16);
      overflow: hidden;
      touch-action: none;
      contain: layout paint size;
    }
    @supports not (height: 100dvh) {
      body { width: 100vw; height: 100vh; }
      .stage {
        width: min(100vw, calc(100vh * 16 / 9));
        height: min(100vh, calc(100vw * 9 / 16));
      }
    }
    .stage:fullscreen,
    .stage:-webkit-full-screen {
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      margin: 0 !important;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: auto;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }
    button,
    .upgrade-card,
    .item-offer {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .hint {
      position: absolute;
      right: 14px;
      bottom: 26px;
      padding: 6px 9px;
      color: var(--muted);
      background: rgba(5,8,12,.72);
      border: 1px solid rgba(92,111,130,.25);
      font-size: 12px;
      letter-spacing: .04em;
      pointer-events: none;
      user-select: none;
    }

    .upgrade-overlay {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 2.2vh, 24px);
      padding: clamp(18px, 4vh, 52px) clamp(14px, 3vw, 48px);
      background: rgba(8, 5, 14, .73);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, visibility 0s linear .18s;
      user-select: none;
    }
    .upgrade-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .18s ease;
    }
    .upgrade-heading {
      flex: 0 0 auto;
      text-align: center;
      color: #f6efff;
      text-shadow: 0 2px 12px rgba(0,0,0,.85);
      transform: translateY(-8px);
    }
    .upgrade-heading strong {
      display: block;
      font-size: clamp(18px, 2.1vw, 34px);
      letter-spacing: .16em;
    }
    .upgrade-heading span {
      display: block;
      margin-top: 4px;
      color: #bca9ce;
      font-size: clamp(10px, 1vw, 15px);
      letter-spacing: .08em;
    }
    .upgrade-card-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 1.5vw, 28px);
      perspective: 1200px;
    }
    .upgrade-card {
      --delay: 0ms;
      position: relative;
      width: clamp(190px, 18vw, 300px);
      height: clamp(330px, 61vh, 610px);
      padding: 0;
      overflow: hidden;
      border: clamp(2px, .25vw, 4px) solid #17101d;
      border-radius: clamp(8px, 1vw, 16px);
      background: #cbb7df;
      color: #1a1020;
      box-shadow: 0 18px 42px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.18);
      
      opacity: 0;
      transform: translateY(-125vh) rotate(var(--tilt, 0deg));
      animation: upgradeCardDrop 820ms var(--delay) cubic-bezier(.2,.82,.22,1.16) forwards;
      transition: filter .16s ease, box-shadow .16s ease, border-color .16s ease;
      font: inherit;
      text-align: left;
    }
    .upgrade-card-row[data-count="4"] .upgrade-card {
      width: clamp(160px, 15.6vw, 260px);
    }
    .upgrade-card-row[data-count="5"] .upgrade-card {
      width: clamp(135px, 13.2vw, 220px);
    }
    .upgrade-card.item-card-special {
      border-color: #b86cff;
      box-shadow: 0 18px 42px rgba(0,0,0,.48), 0 0 14px rgba(184,108,255,.72), 0 0 34px rgba(155,72,235,.38), inset 0 0 0 2px rgba(239,218,255,.3);
    }
    .upgrade-card.item-card-premium {
      border-color: #ffd45c;
      box-shadow: 0 18px 42px rgba(0,0,0,.48), 0 0 15px rgba(255,212,92,.82), 0 0 38px rgba(255,174,34,.44), inset 0 0 0 2px rgba(255,244,196,.38);
    }
    .upgrade-card.item-card-special:hover,
    .upgrade-card.item-card-special:focus-visible {
      border-color: #d7a3ff;
      box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 20px rgba(199,135,255,.9), 0 0 45px rgba(156,70,236,.48);
    }
    .upgrade-card.item-card-premium:hover,
    .upgrade-card.item-card-premium:focus-visible {
      border-color: #ffe89a;
      box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 22px rgba(255,222,116,.95), 0 0 48px rgba(255,177,38,.55);
    }
    .upgrade-card.item-card-special .card-level-badge { background: rgba(92,28,133,.88); color: #efd8ff; border-color: rgba(224,185,255,.72); }
    .upgrade-card.item-card-premium .card-level-badge { background: rgba(118,76,8,.9); color: #fff2b5; border-color: rgba(255,225,118,.82); }
    .upgrade-pool-title { margin-bottom: 0; padding: 0 clamp(2px,.4vw,6px); }
    .upgrade-card:hover,
    .upgrade-card:focus-visible {
      filter: brightness(1.08);
      border-color: #f2dcff;
      box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 0 3px rgba(218,181,255,.23);
      outline: none;
    }
    .upgrade-card.selected {
      animation: none;
      opacity: 1;
      transform: translateY(-14px) scale(1.055);
      filter: brightness(1.14);
      box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 28px rgba(225,197,255,.36);
      transition: transform .24s cubic-bezier(.2,.8,.2,1.25), opacity .2s ease, filter .2s ease;
    }
    .upgrade-card.dismissed {
      animation: none;
      opacity: 0;
      transform: translateY(46px) scale(.91);
      filter: brightness(.65);
      pointer-events: none;
      transition: transform .24s ease, opacity .2s ease, filter .2s ease;
    }
    .upgrade-overlay.selection-committing .upgrade-heading,
    .upgrade-overlay.selection-committing .upgrade-resource-strip,
    .upgrade-overlay.selection-committing .upgrade-actions,
    .upgrade-overlay.selection-committing .skip-upgrade-wrap {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .22s ease;
    }
    .upgrade-overlay.selection-committing {
      background: rgba(4,3,7,.50);
      transition: background .55s ease;
    }
    .upgrade-card.holy-selected {
      --commit-x: 0px;
      --commit-y: 0px;
      z-index: 80;
      pointer-events: none;
      animation: holyCardAscend 920ms cubic-bezier(.18,.78,.2,1) forwards !important;
      isolation: isolate;
    }
    .upgrade-card.holy-selected::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      background: #fff;
      opacity: 0;
      mix-blend-mode: screen;
      animation: holyCardWhiten 920ms cubic-bezier(.18,.78,.2,1) forwards;
    }
    @keyframes holyCardAscend {
      0% { opacity: 1; transform: translate(0,0) scale(1); filter: brightness(1.08) saturate(1); box-shadow: 0 22px 54px rgba(0,0,0,.58); }
      58% { opacity: 1; transform: translate(var(--commit-x), var(--commit-y)) scale(1.18); filter: brightness(1.34) saturate(.72); box-shadow: 0 28px 80px rgba(0,0,0,.62), 0 0 34px rgba(244,226,255,.52); }
      100% { opacity: 1; transform: translate(var(--commit-x), var(--commit-y)) scale(1.25); filter: brightness(1.95) saturate(0); box-shadow: 0 30px 96px rgba(0,0,0,.55), 0 0 42px rgba(255,255,255,.95), 0 0 96px rgba(255,225,140,.72); }
    }
    @keyframes holyCardWhiten {
      0%, 34% { opacity: 0; }
      72% { opacity: .26; }
      100% { opacity: .76; }
    }
    .card-icon-zone {
      position: relative;
      height: 31%;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: linear-gradient(145deg, #a35a77, #74344f);
      border-bottom: clamp(2px, .24vw, 4px) solid #17101d;
    }
    .card-icon-zone::before,
    .card-icon-zone::after {
      content: "";
      position: absolute;
      width: 72%;
      height: 72%;
      border: 2px solid rgba(255,235,248,.17);
      transform: rotate(24deg);
    }
    .card-icon-zone::after {
      width: 48%;
      height: 48%;
      transform: rotate(-18deg);
    }
    .card-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: clamp(54px, 6vw, 92px);
      aspect-ratio: 1;
      border: 2px solid rgba(24,10,28,.8);
      border-radius: 50%;
      background: rgba(28,13,35,.72);
      color: #f8eaff;
      font-size: clamp(18px, 2.3vw, 34px);
      font-weight: 900;
      letter-spacing: -.03em;
      box-shadow: inset 0 0 18px rgba(255,255,255,.1);
    }
    .card-icon-image-asset {
      display: block;
      width: auto;
      height: auto;
      max-width: 78%;
      max-height: 78%;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
    .card-level-badge {
      position: absolute;
      z-index: 2;
      top: 8px;
      right: 8px;
      padding: 3px 7px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 999px;
      background: rgba(23,11,30,.74);
      color: #f5eaff;
      font-size: clamp(9px, .76vw, 12px);
      font-weight: 700;
    }
    .card-name-zone {
      min-height: 12.5%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7px 10px;
      background: #66568c;
      color: #fff7ff;
      border-bottom: clamp(2px, .24vw, 4px) solid #17101d;
      font-size: clamp(14px, 1.35vw, 22px);
      font-weight: 900;
      letter-spacing: .06em;
      text-align: center;
    }
    .card-desc-zone {
      height: 56.5%;
      display: flex;
      flex-direction: column;
      gap: clamp(7px, 1vh, 12px);
      padding: clamp(11px, 1.45vw, 20px);
      background: linear-gradient(180deg, #b9cbbf, #a8bcae);
      color: #17131b;
    }
    .card-next-effect {
      flex: 1 1 auto;
      display: flex;
      align-items: flex-start;
      font-size: clamp(11px, .98vw, 16px);
      line-height: 1.58;
      font-weight: 700;
      overflow: hidden;
    }
    .card-max-preview {
      flex: 0 0 auto;
      padding-top: 9px;
      border-top: 1px solid rgba(28,18,34,.28);
      color: #4d3154;
      font-size: clamp(9px, .78vw, 12px);
      line-height: 1.45;
    }
    .card-max-preview strong { color: #792f70; }
    .card-key-hint {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 3;
      width: clamp(22px, 2vw, 30px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 5px;
      background: rgba(17,8,22,.75);
      color: #fff;
      font-size: clamp(10px, .85vw, 13px);
      font-weight: 900;
    }
    @keyframes upgradeCardDrop {
      0% { opacity: 0; transform: translateY(-125vh) rotate(var(--tilt, 0deg)) scale(.92); }
      66% { opacity: 1; transform: translateY(26px) rotate(0deg) scale(1.015); }
      80% { transform: translateY(-13px) rotate(-1deg) scale(.995); }
      91% { transform: translateY(6px) rotate(0deg) scale(1.004); }
      100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    }


    /* 升级界面：强化/道具共用卡池 + 右侧属性。 */
    .upgrade-overlay {
      justify-content: flex-start;
      gap: clamp(7px, 1.4vh, 14px);
      padding: clamp(10px, 2vh, 22px) clamp(10px, 1.5vw, 28px) clamp(12px, 2.4vh, 28px);
    }
    .upgrade-heading { transform: none; }
    .upgrade-layout {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 320px);
      gap: clamp(8px, 1.15vw, 22px);
      align-items: stretch;
    }
    .upgrade-side-panel,
    .upgrade-center-panel {
      min-width: 0;
      min-height: 0;
      border: 1px solid rgba(216,190,238,.22);
      border-radius: clamp(7px, .65vw, 12px);
      background: rgba(25,17,34,.86);
      box-shadow: 0 16px 38px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .upgrade-side-panel {
      display: flex;
      flex-direction: column;
      padding: clamp(8px, 1vw, 15px);
      overflow: hidden;
    }
    .upgrade-center-panel {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: clamp(8px, 1.4vh, 14px);
      padding: clamp(7px, .8vw, 13px);
      background: rgba(17,11,25,.58);
    }
    .panel-title-row {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: clamp(7px, 1vh, 11px);
      color: #f1e7fa;
      font-weight: 900;
      font-size: clamp(11px, 1.05vw, 17px);
      letter-spacing: .04em;
    }
    .resource-chip {
      padding: 3px 7px;
      border: 1px solid rgba(246,206,91,.32);
      border-radius: 999px;
      color: #ffd967;
      background: rgba(69,48,12,.54);
      font-size: clamp(8px, .72vw, 11px);
      white-space: nowrap;
    }
    .item-shop-list {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(6px, 1.05vh, 11px);
      overflow: hidden;
    }
    .item-offer {
      --quality-color: #d9dde2;
      position: relative;
      flex: 0 0 auto;
      width: 100%;
      min-height: clamp(68px, 13vh, 112px);
      display: grid;
      grid-template-columns: clamp(48px, 5vw, 82px) minmax(0, 1fr);
      padding: 0;
      overflow: hidden;
      border: 2px solid #17101d;
      border-radius: clamp(5px, .55vw, 9px);
      background: #cbb7df;
      color: #1a1020;
      
      text-align: left;
      font: inherit;
      animation: itemEnter 420ms var(--item-delay, 0ms) cubic-bezier(.2,.85,.25,1.18) both;
      transition: filter .14s ease, transform .14s ease, opacity .2s ease;
    }
    .item-offer:hover,
    .item-offer:focus-visible { filter: brightness(1.08); transform: translateX(3px); outline: none; }
    .item-offer.insufficient { animation: itemShake 260ms ease; }
    .item-offer.purchased { animation: itemExit 290ms cubic-bezier(.45,0,.8,.2) forwards; pointer-events: none; }
    .item-icon-zone {
      min-width: 0;
      display: grid;
      place-items: center;
      background: var(--quality-color);
      border-right: 2px solid #17101d;
      color: #17101d;
      font-weight: 1000;
      font-size: clamp(13px, 1.8vw, 28px);
      text-shadow: 0 1px rgba(255,255,255,.4);
    }
    .item-main-zone { min-width: 0; display: flex; flex-direction: column; }
    .item-name-line {
      flex: 0 0 auto;
      min-height: 31%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      padding: 4px 7px;
      background: #66568c;
      border-bottom: 2px solid #17101d;
      color: #fff;
      font-weight: 900;
      font-size: clamp(9px, .88vw, 14px);
    }
    .item-quality-name { color: var(--quality-color); font-size: .78em; white-space: nowrap; }
    .item-affix-zone {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      padding: 4px 7px 17px;
      background: #82cb88;
      color: #17231a;
      font-size: clamp(8px, .72vw, 11px);
      line-height: 1.22;
    }
    .item-price {
      position: absolute;
      right: 5px;
      bottom: 3px;
      padding: 1px 5px;
      border-radius: 999px;
      background: rgba(31,20,5,.72);
      color: #ffdc67;
      font-size: clamp(8px, .68vw, 10px);
      font-weight: 900;
    }
    .upgrade-card-row {
      flex: 1 1 auto;
      min-height: 0;
      gap: clamp(6px, .8vw, 15px);
    }
    .upgrade-card {
      width: clamp(118px, 13.1vw, 245px);
      height: clamp(290px, 58vh, 610px);
    }
    .upgrade-card-row[data-count="4"] .upgrade-card { width: clamp(100px, 10.2vw, 200px); }
    .card-bottom-actions {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(7px, .8vw, 12px);
    }
    .upgrade-action-button {
      position: relative;
      min-height: clamp(30px, 5.2vh, 46px);
      padding: 6px 8px;
      overflow: hidden;
      border: 1px solid rgba(232,213,246,.32);
      border-radius: 7px;
      background: rgba(85,66,102,.82);
      color: #f7efff;
      font: 800 clamp(9px, .8vw, 13px) Inter, "Microsoft YaHei", sans-serif;
      
      transition: filter .14s ease, transform .14s ease;
    }
    .upgrade-action-button:hover:not(:disabled) { filter: brightness(1.12); }
    .upgrade-action-button:disabled { opacity: .42;  }
    .refresh-button { flex: 0 0 auto; margin-top: clamp(7px, 1vh, 11px); }
    .skip-button { background: rgba(80,52,65,.9); }
    .hold-progress {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 4px;
      height: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(0,0,0,.32);
    }
    .hold-progress i { display: block; width: 0%; height: 100%; background: #f2d5e4; }
    .stats-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(4px, .65vh, 7px);
      scrollbar-width: thin;
    }
    .stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: clamp(4px, .65vh, 7px) clamp(6px, .7vw, 10px);
      border: 1px solid rgba(211,189,228,.12);
      border-radius: 5px;
      background: rgba(80,62,94,.34);
      color: #c7b7d2;
      font-size: clamp(8px, .74vw, 12px);
    }
    .stat-row strong { color: #fff; font-variant-numeric: tabular-nums; }
    .stat-section-note {
      margin-top: 6px;
      color: #8e7e9b;
      text-align: center;
      font-size: clamp(7px, .64vw, 10px);
      line-height: 1.4;
    }
    @keyframes itemEnter { from { opacity: 0; transform: translateX(-130%); } to { opacity: 1; transform: translateX(0); } }
    @keyframes itemExit { to { opacity: 0; transform: translateX(-135%) rotate(-2deg); } }
    @keyframes itemShake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-6px); } 65% { transform: translateX(5px); } }

    @media (max-aspect-ratio: 4/3), (max-width: 780px) {
      .upgrade-layout { grid-template-columns: minmax(0,1fr) 145px; gap: 6px; }
      .upgrade-side-panel { padding: 6px; }
      .upgrade-card { width: clamp(105px, 14vw, 150px); }
      .item-offer { grid-template-columns: 43px minmax(0,1fr); }
    }
    @media (pointer: coarse) {
      .upgrade-action-button { min-height: 40px; }
      .upgrade-card:active,
      .item-offer:active,
      .upgrade-action-button:active:not(:disabled) {
        filter: brightness(1.13);
        transform: scale(.985);
      }
      .hint { font-size: 10px; padding: 4px 6px; }
    }


    .orientation-notice {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      padding: 28px;
      text-align: center;
      color: #f3ecff;
      background: radial-gradient(circle at 50% 45%, #17111f 0%, #07090d 64%, #020304 100%);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .orientation-notice strong {
      font-size: clamp(22px, 7vw, 42px);
      letter-spacing: .08em;
    }
    .orientation-notice span {
      color: #bca9ce;
      font-size: clamp(13px, 4vw, 20px);
      line-height: 1.55;
    }
    .orientation-phone {
      width: 46px;
      height: 78px;
      margin-bottom: 8px;
      border: 3px solid #d8c7e9;
      border-radius: 9px;
      animation: rotatePhone 1.65s ease-in-out infinite;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
    }
    @keyframes rotatePhone {
      0%, 24% { transform: rotate(0deg); }
      62%, 100% { transform: rotate(90deg); }
    }

    @media (orientation: portrait) and (pointer: coarse) {
      .orientation-notice { display: flex; }
    }

    @media (pointer: coarse) {
      .stage {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        box-shadow: none;
        border: 0;
      }
      .upgrade-overlay { backdrop-filter: none; }
      .hint { display: none; }
      button, .upgrade-card, .item-offer { min-width: 0; }
    }

    /* 手机横屏：压缩界面但保留全部交互区。 */
    @media (pointer: coarse) and (max-height: 620px) {
      .upgrade-overlay {
        gap: 3px;
        padding: max(3px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
      }
      .upgrade-heading strong { font-size: 14px; letter-spacing: .1em; }
      .upgrade-heading span { display: none; }
      .upgrade-layout {
        grid-template-columns: minmax(0, 1fr) clamp(96px, 18vw, 138px);
        gap: 4px;
      }
      .upgrade-side-panel { padding: 4px; border-radius: 5px; }
      .upgrade-center-panel { gap: 4px; padding: 4px; border-radius: 5px; }
      .panel-title-row { margin-bottom: 3px; font-size: 8px; }
      .resource-chip { padding: 2px 4px; font-size: 7px; }
      .item-shop-list { gap: 3px; }
      .item-offer {
        min-height: 50px;
        grid-template-columns: 32px minmax(0,1fr);
        border-width: 1px;
        border-radius: 4px;
      }
      .item-icon-zone { border-right-width: 1px; font-size: 11px; }
      .item-name-line { min-height: 28%; padding: 2px 3px; border-bottom-width: 1px; font-size: 7px; }
      .item-affix-zone { gap: 1px; padding: 2px 3px 11px; font-size: 6.5px; line-height: 1.12; }
      .item-price { right: 2px; bottom: 1px; padding: 1px 3px; font-size: 6.5px; }
      .upgrade-card-row { gap: 4px; }
      .upgrade-card,
      .upgrade-card-row[data-count="4"] .upgrade-card,
      .upgrade-card-row[data-count="5"] .upgrade-card {
        width: min(23%, 136px);
        height: min(64dvh, 250px);
        min-height: 0;
        border-width: 1px;
        border-radius: 5px;
      }
      .upgrade-card-row[data-count="4"] .upgrade-card { width: min(23%, 128px); }
      .upgrade-card-row[data-count="5"] .upgrade-card { width: min(18.5%, 108px); }
      .card-icon-zone { height: 27%; border-bottom-width: 1px; }
      .card-icon { width: 34px; border-width: 1px; font-size: 12px; }
      .card-level-badge { top: 3px; right: 3px; padding: 1px 3px; font-size: 6px; }
      .card-name-zone { min-height: 13%; padding: 3px; border-bottom-width: 1px; font-size: 8px; }
      .card-desc-zone { height: 60%; gap: 3px; padding: 4px; }
      .card-next-effect { font-size: 6.8px; line-height: 1.25; overflow: auto; }
      .card-max-preview { padding-top: 3px; font-size: 5.8px; line-height: 1.18; }
      .card-key-hint { display: none; }
      .card-bottom-actions { gap: 4px; }
      .upgrade-action-button { min-height: 30px; padding: 4px; border-radius: 4px; font-size: 7px; }
      .refresh-button { margin-top: 3px; }
      .stats-list { justify-content: flex-start; gap: 2px; }
      .stat-row { gap: 3px; padding: 2px 3px; border-radius: 3px; font-size: 6.5px; }
      .stat-section-note { display: none; }
    }


    /* Mobile11：大狗叫追踪预警、锁定、光波收束与渐弱震动。 */
    .pause-button {
      position: absolute;
      z-index: 16;
      top: max(12px, env(safe-area-inset-top));
      right: max(12px, env(safe-area-inset-right));
      width: clamp(38px, 4.2vw, 54px);
      height: clamp(38px, 4.2vw, 54px);
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(220,232,243,.34);
      border-radius: 9px;
      background: rgba(7,10,15,.72);
      color: #eef5fb;
      font: 900 clamp(17px, 1.75vw, 24px) Inter, "Microsoft YaHei", sans-serif;
      line-height: 1;
      
      box-shadow: 0 7px 22px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter: blur(4px);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .pause-button:hover { filter: brightness(1.14); }
    .pause-button:active { transform: scale(.94); }
    .pause-button[aria-hidden="true"] { opacity: 0; pointer-events: none; }

    .pause-overlay {
      position: absolute;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      padding:
        max(14px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
      background: rgba(3,5,8,.76);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .15s ease, visibility 0s linear .15s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .pause-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .15s ease;
    }
    .pause-panel {
      width: min(430px, 84vw);
      max-height: min(650px, 88vh);
      overflow: auto;
      padding: clamp(18px, 2.2vw, 28px);
      border: 1px solid rgba(196,216,235,.28);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(18,25,34,.98), rgba(8,12,18,.98));
      color: #dce8f3;
      box-shadow: 0 28px 80px rgba(0,0,0,.64), inset 0 0 0 1px rgba(255,255,255,.035);
    }
    .pause-title {
      margin: 0 0 4px;
      color: #f6fbff;
      text-align: center;
      font-size: clamp(24px, 3vw, 38px);
      letter-spacing: .14em;
    }
    .pause-subtitle {
      margin: 0 0 clamp(15px, 2vh, 23px);
      color: #8296aa;
      text-align: center;
      font-size: clamp(10px, 1vw, 13px);
    }
    .pause-menu-button {
      width: 100%;
      min-height: 46px;
      margin: 0 0 10px;
      border: 1px solid rgba(188,210,230,.25);
      border-radius: 8px;
      background: rgba(49,65,80,.76);
      color: #f2f7fb;
      font: 850 clamp(13px, 1.15vw, 16px) Inter, "Microsoft YaHei", sans-serif;
      
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .pause-menu-button:hover { filter: brightness(1.13); }
    .pause-menu-button:active { transform: scale(.985); }
    .pause-menu-button.continue { background: rgba(55,88,78,.86); }
    .pause-menu-button.exit { margin-top: 5px; background: rgba(105,47,54,.78); color: #ffdfe2; }
    .pause-menu-button.exit.confirming { background: rgba(156,48,57,.92); color: #fff; }

    .pause-setting-group {
      margin: 15px 0;
      padding: 13px 14px;
      border: 1px solid rgba(182,203,222,.15);
      border-radius: 9px;
      background: rgba(20,29,39,.68);
    }
    .pause-setting-row {
      display: grid;
      grid-template-columns: 82px minmax(0,1fr) 48px;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      color: #c8d5e1;
      font-size: 13px;
    }
    .pause-setting-row + .pause-setting-row { margin-top: 6px; }
    .pause-setting-row output { color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
    .pause-setting-row input[type="range"] {
      width: 100%;
      height: 28px;
      margin: 0;
      accent-color: #a78bc3;
      
      touch-action: pan-x;
    }
    .pause-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 44px;
      color: #c8d5e1;
      font-size: 13px;
    }
    .pause-toggle {
      min-width: 72px;
      height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(204,221,236,.24);
      border-radius: 999px;
      background: #2d3945;
      color: #aebdca;
      font-weight: 900;
      
      touch-action: manipulation;
    }
    .pause-toggle.on { background: #6d5283; color: #fff; border-color: rgba(226,204,244,.38); }
    .pause-tip {
      margin-top: 12px;
      color: #728599;
      text-align: center;
      font-size: 10px;
      line-height: 1.45;
    }

    /* Mobile81：加入耄耋刺客角色、近战爪击、哈气充能技能，并加入地图层叠展示。 */
    .main-menu-overlay {
      position: absolute;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
      background:
        radial-gradient(circle at 50% 42%, rgba(41,55,69,.18), transparent 42%),
        linear-gradient(180deg, rgba(2,4,7,.94), rgba(0,0,0,.985));
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, visibility 0s linear .22s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .main-menu-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .22s ease;
    }
    .main-menu-overlay {
      overflow: hidden;
      isolation: isolate;
    }
    .main-menu-background {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .main-menu-background::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.045), transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(0,0,0,.42) 100%);
      mix-blend-mode: screen;
      opacity: .9;
    }
    .main-menu-bg-layer {
      position: absolute;
      inset: -10%;
      transform-origin: 50% 50%;
      will-change: transform, opacity, background-position;
      pointer-events: none;
    }
    .main-menu-bg-plasma {
      opacity: .96;
      background:
        radial-gradient(39% 28% at 24% 18%, rgba(255,52,188,.98), transparent 62%),
        radial-gradient(35% 28% at 68% 16%, rgba(255,193,36,.98), transparent 60%),
        radial-gradient(37% 28% at 47% 40%, rgba(255,94,49,.95), transparent 58%),
        radial-gradient(43% 32% at 24% 82%, rgba(28,236,255,.98), transparent 56%),
        radial-gradient(41% 34% at 81% 70%, rgba(104,56,255,.98), transparent 55%),
        radial-gradient(36% 28% at 57% 84%, rgba(191,104,255,.9), transparent 60%),
        linear-gradient(180deg, rgba(1,3,9,.98), rgba(7,3,20,.99) 52%, rgba(1,3,10,.995));
      filter: blur(18px) saturate(1.28) contrast(1.08);
      mix-blend-mode: screen;
      -webkit-mask-image: radial-gradient(circle, #000 0 31%, transparent 40%);
      mask-image: radial-gradient(circle, #000 0 31%, transparent 40%);
      -webkit-mask-size: 10px 10px;
      mask-size: 10px 10px;
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
      animation: mainMenuPlasmaDrift 24s linear infinite, mainMenuPlasmaWave 18s ease-in-out infinite alternate;
    }
    .main-menu-bg-plasma.alt {
      opacity: .58;
      background:
        radial-gradient(42% 32% at 22% 26%, rgba(230,89,255,.78), transparent 62%),
        radial-gradient(40% 30% at 72% 24%, rgba(255,122,34,.84), transparent 58%),
        radial-gradient(44% 34% at 56% 56%, rgba(255,229,80,.8), transparent 58%),
        radial-gradient(39% 30% at 28% 78%, rgba(76,214,255,.82), transparent 56%),
        radial-gradient(43% 34% at 80% 78%, rgba(58,84,255,.9), transparent 58%);
      filter: blur(28px) saturate(1.34) contrast(1.04);
      mix-blend-mode: screen;
      -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 39%);
      mask-image: radial-gradient(circle, #000 0 30%, transparent 39%);
      -webkit-mask-size: 12px 12px;
      mask-size: 12px 12px;
      animation: mainMenuPlasmaDriftAlt 30s linear infinite, mainMenuPlasmaWaveAlt 22s ease-in-out infinite alternate;
    }
    .main-menu-bg-noise {
      inset: -6%;
      opacity: .16;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.04) 45%, rgba(255,255,255,.06) 100%),
        repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 5px);
      mix-blend-mode: screen;
      filter: blur(.35px);
      animation: mainMenuNoiseFlicker 1200ms steps(4) infinite, mainMenuNoiseDrift 10s linear infinite;
    }
    .main-menu-bg-scan {
      inset: 0;
      opacity: .34;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%, transparent 80%, rgba(255,255,255,.03)),
        repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 2px, rgba(255,255,255,.015) 2px 3px, transparent 3px 7px);
      mix-blend-mode: soft-light;
      animation: mainMenuScanRoll 14s linear infinite;
    }
    @keyframes mainMenuPlasmaDrift {
      0% {
        transform: translate3d(-2%, -1%, 0) scale(1.07) rotate(0deg);
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0;
      }
      50% {
        transform: translate3d(2%, 1.5%, 0) scale(1.11) rotate(3deg);
        background-position: 6% -4%, -5% 5%, 4% 4%, -4% -3%, 6% 2%, -3% 5%, 0 0;
      }
      100% {
        transform: translate3d(-3%, 2%, 0) scale(1.08) rotate(-2deg);
        background-position: -4% 5%, 3% -5%, -2% 4%, 4% -2%, -5% 3%, 3% -4%, 0 0;
      }
    }
    @keyframes mainMenuPlasmaWave {
      0% { transform: translate3d(-1%, -1%, 0) scale(1.06) rotate(-1deg) skewY(-2deg); }
      100% { transform: translate3d(2%, 1%, 0) scale(1.1) rotate(2deg) skewY(2deg); }
    }
    @keyframes mainMenuPlasmaDriftAlt {
      0% { transform: translate3d(2%, -1%, 0) scale(1.1) rotate(1deg); background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
      50% { transform: translate3d(-2%, 2%, 0) scale(1.14) rotate(-2deg); background-position: -5% 5%, 4% -5%, -4% 4%, 6% -3%, -5% 3%; }
      100% { transform: translate3d(3%, -2%, 0) scale(1.08) rotate(3deg); background-position: 4% -3%, -4% 4%, 5% -2%, -5% 4%, 4% -4%; }
    }
    @keyframes mainMenuPlasmaWaveAlt {
      0% { transform: translate3d(1%, -1%, 0) scale(1.08) skewX(-2deg); }
      100% { transform: translate3d(-2%, 2%, 0) scale(1.12) skewX(2deg); }
    }
    @keyframes mainMenuNoiseFlicker {
      0%, 100% { opacity: .12; }
      50% { opacity: .2; }
    }
    @keyframes mainMenuNoiseDrift {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(1.2%, -1%, 0); }
    }
    @keyframes mainMenuScanRoll {
      0% { transform: translate3d(0, -1.5%, 0); }
      100% { transform: translate3d(0, 1.5%, 0); }
    }
    .main-menu-shell {
      position: relative;
      z-index: 1;
      width: min(520px, 88vw);
      padding: clamp(22px, 3vw, 38px);
      border: 1px solid rgba(209,224,237,.22);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(14,19,25,.985), rgba(5,8,12,.995));
      color: #eaf2f8;
      box-shadow: 0 34px 90px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
      overflow: hidden;
    }
    .main-menu-shell::before,
    .main-menu-shell::after {
      content: '';
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216,230,242,.34), transparent);
      pointer-events: none;
    }
    .main-menu-shell::before { top: 8px; left: 9%; right: 9%; }
    .main-menu-shell::after { bottom: 8px; left: 18%; right: 18%; opacity: .6; }
    .main-menu-kicker {
      margin-bottom: 8px;
      color: #6f8294;
      text-align: center;
      font: 800 clamp(9px, .9vw, 11px) Inter, "Microsoft YaHei", sans-serif;
      letter-spacing: .34em;
      text-transform: uppercase;
    }
    .main-menu-title {
      margin: 0 0 5px;
      color: #f8fbfe;
      text-align: center;
      font: 950 clamp(28px, 3.4vw, 46px) Inter, "Microsoft YaHei", sans-serif;
      letter-spacing: .13em;
      text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,255,255,.045);
    }
    .main-menu-subtitle {
      margin: 0 0 clamp(22px, 3vh, 34px);
      color: #697b8c;
      text-align: center;
      font-size: clamp(9px, .95vw, 12px);
      letter-spacing: .08em;
    }
    .main-menu-actions { display: grid; gap: 10px; }
    .main-menu-button {
      position: relative;
      width: 100%;
      min-height: clamp(48px, 6vh, 62px);
      padding: 0 18px;
      border: 1px solid rgba(198,214,228,.19);
      border-radius: 7px;
      background: linear-gradient(180deg, rgba(35,45,55,.84), rgba(17,23,30,.92));
      color: #dfe9f1;
      font: 900 clamp(13px, 1.25vw, 17px) Inter, "Microsoft YaHei", sans-serif;
      letter-spacing: .16em;
      
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: border-color .12s ease, background .12s ease, transform .08s ease, color .12s ease;
    }
    .main-menu-button::before {
      content: '';
      position: absolute;
      left: 0;
      top: 25%;
      bottom: 25%;
      width: 2px;
      background: #cfdce6;
      opacity: .24;
    }
    .main-menu-button:hover {
      border-color: rgba(223,235,245,.38);
      background: linear-gradient(180deg, rgba(48,61,73,.92), rgba(21,29,37,.98));
      color: #fff;
    }
    .main-menu-button:active { transform: scale(.988); }
    .main-menu-button.primary {
      border-color: rgba(224,237,247,.31);
      background: linear-gradient(180deg, rgba(55,70,82,.92), rgba(25,34,43,.98));
      color: #fff;
    }
    .main-menu-button.exit { color: #9daab5; }
    .main-menu-settings { display: none; }
    .main-menu-settings.visible { display: block; }
    .main-menu-home.hidden { display: none; }
    .main-menu-settings-title {
      margin: 0 0 18px;
      color: #f1f6fa;
      text-align: center;
      font-size: clamp(20px, 2.5vw, 30px);
      letter-spacing: .16em;
    }
    .main-menu-setting-group {
      margin: 0 0 18px;
      padding: 14px 15px;
      border: 1px solid rgba(190,208,223,.14);
      border-radius: 8px;
      background: rgba(12,18,24,.82);
    }
    .main-menu-exit-note {
      min-height: 18px;
      margin-top: 10px;
      color: #718396;
      text-align: center;
      font-size: 10px;
    }


    /* Mobile81：全屏角色 / 地图选择界面；角色加入耄耋，地图卡改为半幅层叠。 */
    .main-menu-shell.selection-mode {
      width: 100%;
      height: 100%;
      max-width: none;
      padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
    }
    .main-menu-shell.selection-mode::before,
    .main-menu-shell.selection-mode::after { display: none; }
    .selection-panel { display: none; }
    .selection-panel.visible {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 0;
    }
    .selection-header {
      position: relative;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 auto;
      gap: 14px;
      min-height: 54px;
      margin: 0;
    }
    .selection-heading-wrap { min-width: 0; }
    .selection-eyebrow {
      color: #66798a;
      font-size: clamp(8px, .75vw, 10px);
      font-weight: 900;
      letter-spacing: .24em;
    }
    .selection-title {
      margin: 3px 0 0;
      color: #f4f8fb;
      font-size: clamp(22px, 2.5vw, 34px);
      font-weight: 950;
      letter-spacing: .12em;
      text-shadow:
        -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
        -2px  0   0 #000,                    2px  0   0 #000,
        -2px  2px 0 #000, 0  2px 0 #000, 2px  2px 0 #000,
        0 3px 5px rgba(0,0,0,.55);
    }
    .selection-back-button {
      flex: 0 0 auto;
      min-width: 88px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(198,214,228,.18);
      border-radius: 6px;
      background: rgba(20,27,34,.72);
      color: #9eafbc;
      font-weight: 900;
      
      transition: border-color .14s ease, color .14s ease, background .14s ease, transform .1s ease;
    }
    .selection-back-button:hover,
    .selection-back-button:focus-visible {
      border-color: rgba(223,235,245,.48);
      color: #fff;
      background: rgba(39,50,61,.88);
      outline: none;
    }
    .main-menu-button:focus-visible {
      border-color: rgba(236,245,252,.64);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 2px rgba(216,231,242,.12);
      color: #fff;
      outline: none;
    }

    .carousel-viewport {
      position: relative;
      width: 100%;
      overflow: hidden;
      touch-action: manipulation;
      
    }
    .carousel-track {
      display: flex;
      align-items: center;
      gap: clamp(28px, 4.5vw, 72px);
      width: max-content;
      height: 100%;
      will-change: transform;
      transition: transform .34s cubic-bezier(.16,.86,.18,1);
    }
    .selection-carousel-stage {
      position: relative;
      min-width: 0;
      min-height: 0;
    }
    .selection-arrow {
      position: absolute;
      top: 50%;
      z-index: 12;
      display: grid;
      place-items: center;
      width: clamp(42px, 4.6vw, 64px);
      height: clamp(72px, 10vh, 112px);
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(210,225,236,.68);
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1;
      text-shadow: 0 3px 10px #000;
      
      transform: translateY(-50%);
      transition: color .15s ease, transform .15s ease, opacity .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .selection-arrow.left { left: 0; }
    .selection-arrow.right { right: 0; }
    .selection-arrow:hover,
    .selection-arrow:focus-visible {
      color: #fff;
      outline: none;
    }
    .selection-arrow.left:hover,
    .selection-arrow.left:focus-visible { transform: translateY(-50%); }
    .selection-arrow.right:hover,
    .selection-arrow.right:focus-visible { transform: translateY(-50%); }

    /* 角色页：上方站立展示，下方信息，中间只保留一条分割线。 */
    .character-selection-body {
      flex: 1 1 auto;
      display: grid;
      grid-template-rows: minmax(0, 56%) 1px minmax(0, 44%);
      min-height: 0;
    }
    .character-stage {
      position: relative;
      min-height: 0;
      padding: 0 clamp(44px, 5vw, 72px);
    }
    /* Fix42：角色选择页上半区提亮，并把亮区向左右/下方扩散。 */
    #characterSelectPanel.visible::before {
      content: '';
      position: absolute;
      z-index: 0;
      left: -14%;
      right: -14%;
      top: -12%;
      height: 70%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 18%, rgba(173,198,217,.30) 0%, rgba(106,137,160,.20) 24%, rgba(61,85,105,.12) 48%, rgba(31,46,60,.055) 66%, transparent 84%),
        linear-gradient(180deg, rgba(70,96,116,.10), transparent 92%);
    }
    #characterSelectPanel.visible > * { position: relative; z-index: 1; }
    .character-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 2%, rgba(199,214,226,.28) 18%, rgba(226,236,244,.42) 50%, rgba(199,214,226,.28) 82%, transparent 98%);
    }
    .character-carousel-viewport { height: 100%; }
    .character-card {
      position: relative;
      flex: 0 0 clamp(150px, 16vw, 235px);
      height: clamp(210px, 35vh, 360px);
      border: 0;
      background: transparent;
      opacity: .26;
      transform: scale(.74);
      transform-origin: 50% 50%;
      transition: transform .3s cubic-bezier(.16,.86,.18,1), opacity .22s ease, filter .22s ease;
      overflow: visible;
      user-select: none;
      
    }
    .character-card::after {
      content: '';
      position: absolute;
      left: 50%;
      /* Fix56: shadow CENTER sits exactly on the portrait's bottom edge. JS keeps this value synced per portrait. */
      bottom: var(--selection-shadow-bottom, 6%);
      width: 62%;
      aspect-ratio: 3 / 1;
      height: auto;
      transform: translate(-50%, 50%);
      border-radius: 50%;
      background: rgba(0,0,0,.72);
      filter: blur(3px);
      pointer-events: none;
      z-index: 0;
    }
    .character-portrait { z-index: 1; }
    .character-card.active {
      opacity: 1;
      transform: scale(1.10);
      filter: brightness(1.06);
    }
    .character-portrait {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      overflow: visible;
    }
    .character-portrait img {
      display: block;
      max-width: 88%;
      max-height: 78%;
      width: auto;
      height: auto;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 12px 16px rgba(0,0,0,.72));
      pointer-events: none;
      transform-origin: 50% 50%;
    }
    .locked-placeholder {
      position: relative;
      width: 52%;
      height: 62%;
      border: 1px solid rgba(255,255,255,.03);
      border-radius: 18px 18px 5px 5px;
      background: #000;
      box-shadow: 0 12px 18px rgba(0,0,0,.65);
    }
    .locked-placeholder::before {
      content: '';
      position: absolute;
      left: 50%;
      top: -15%;
      width: 58%;
      aspect-ratio: 1;
      transform: translateX(-50%);
      border-radius: 50%;
      background: #000;
    }
    .maodie-placeholder {
      position: relative;
      width: 56%;
      height: 66%;
      border: 2px solid rgba(212,68,68,.56);
      border-radius: 8px;
      background: linear-gradient(180deg, #241517 0%, #0d090a 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 14px 22px rgba(0,0,0,.72);
    }
    .maodie-placeholder::after {
      content: '耄耋';
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(244,226,226,.72);
      font-size: clamp(20px, 2.6vw, 34px);
      font-weight: 950;
      letter-spacing: .12em;
      text-shadow: 0 2px 0 #000;
    }
    .character-lock {
      position: absolute;
      left: 50%;
      top: 47%;
      z-index: 2;
      transform: translate(-50%,-50%);
      font-size: clamp(28px, 3.5vw, 44px);
      filter: grayscale(1) brightness(.68);
    }
    .character-info {
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(12px, 2vh, 22px) clamp(18px, 6vw, 90px) 0;
      text-align: center;
    }
    .character-detail-top {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 12px;
      margin-bottom: 9px;
    }
    .character-detail-name {
      color: #f5f8fb;
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight: 950;
      letter-spacing: .10em;
      text-shadow: 0 2px 0 #000;
    }
    .character-detail-state {
      color: #6f8190;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
    }
    .character-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
      margin-bottom: 10px;
    }
    .character-stat {
      padding: 4px 9px;
      border: 1px solid rgba(190,207,221,.14);
      border-radius: 999px;
      background: rgba(21,29,36,.64);
      color: #bbc9d4;
      font-size: 10px;
      font-weight: 850;
    }
    .character-intro-label {
      margin-bottom: 4px;
      color: #a9bac7;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .18em;
    }
    .character-intro {
      width: min(760px, 92%);
      margin: 0;
      color: #7f91a0;
      font-size: 11px;
      line-height: 1.55;
    }
    .selection-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      width: min(440px, 92%);
      margin-top: clamp(10px, 1.8vh, 18px);
    }
    .selection-actions .main-menu-button {
      min-height: 44px;
      width: 100%;
    }
    .selection-actions .main-menu-button:disabled {
      
      opacity: .34;
      transform: none;
    }

    /* 地图页：去掉小窗口，3:2地图直接作为大屏核心。 */
    .map-selection-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .map-stage {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      padding: 0 clamp(44px, 5vw, 72px);
      --map-card-width: min(78vw, calc((100dvh - 185px) * 1.5), 1120px);
    }
    .map-carousel-viewport { height: 100%; }
    .map-stage .carousel-track { gap: 0; }
    .map-card {
      position: relative;
      z-index: 1;
      flex: 0 0 var(--map-card-width);
      margin-inline: 0;
      aspect-ratio: 3 / 2;
      max-height: 100%;
      border: 2px solid rgba(184,203,219,.14);
      border-radius: 10px;
      background: #080c10;
      opacity: .28;
      transform: scale(.86);
      filter: brightness(.64) saturate(.72);
      transition: transform .34s cubic-bezier(.16,.86,.18,1), opacity .24s ease, border-color .24s ease, filter .24s ease;
      overflow: hidden;
      user-select: none;
      
    }
    .map-card.active {
      z-index: 8;
      opacity: 1;
      transform: scale(1);
      filter: none;
      border-color: rgba(224,236,246,.58);
      box-shadow: 0 18px 48px rgba(0,0,0,.52);
    }
    .map-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(76,96,113,.18), transparent 52%),
        #070b0f;
      background-size: 28px 28px, 28px 28px, auto, auto;
    }
    .map-placeholder::before {
      content: 'SCENE PLACEHOLDER';
      padding: 7px 10px;
      border: 1px solid rgba(197,214,228,.16);
      color: #52616d;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .2em;
    }
    .map-card-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 14px 18px;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.9));
      color: #f0f5f8;
      font-size: clamp(18px, 2vw, 28px);
      font-weight: 950;
      letter-spacing: .08em;
      text-shadow: 0 2px 0 #000;
    }
    .map-footer {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 8px;
    }
    .map-detail {
      color: #8ca0af;
      text-align: center;
      font-size: 11px;
      letter-spacing: .08em;
    }
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-top: 7px;
    }
    .carousel-dot {
      width: 18px;
      height: 3px;
      border-radius: 999px;
      background: #26323d;
      transition: width .2s ease, background .2s ease;
    }
    .carousel-dot.active { width: 32px; background: #d8e4ec; }

    @media (pointer: coarse) {
      .main-menu-shell.selection-mode {
        padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
      }
      .selection-header { min-height: 42px; }
      .selection-title { font-size: 19px; }
      .selection-eyebrow { font-size: 7px; }
      .selection-back-button { min-width: 70px; min-height: 32px; font-size: 10px; }
      .character-selection-body { grid-template-rows: minmax(0, 55%) 1px minmax(0, 45%); }
      .character-stage { padding: 0 38px; }
      .character-card { flex-basis: clamp(120px, 19vw, 180px); height: min(34vh, 245px); }
      .character-info { padding: 7px 12px 0; }
      .character-detail-name { font-size: 19px; }
      .character-stats { gap: 4px; margin-bottom: 6px; }
      .character-stat { padding: 3px 6px; font-size: 8px; }
      .character-intro-label { font-size: 8px; }
      .character-intro { font-size: 8px; line-height: 1.35; }
      .selection-actions { margin-top: 7px; }
      .selection-actions .main-menu-button { min-height: 36px; font-size: 10px; }
      .map-stage { padding: 0 38px; }
      .map-stage { --map-card-width: min(76vw, calc((100dvh - 130px) * 1.5)); }
      .map-card-label { padding: 8px 12px; font-size: 16px; }
      .map-footer { padding-top: 4px; }
      .map-detail { font-size: 9px; }
      .selection-arrow { width: 38px; height: 72px; font-size: 28px; }
    }

    @media (pointer: coarse) {
      .pause-button {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        font-size: 20px;
        backdrop-filter: none;
      }
      .pause-overlay { background: rgba(3,5,8,.88); }
      .pause-panel {
        width: min(420px, 78vw);
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
        padding: 13px;
        border-radius: 10px;
      }
      .pause-title { font-size: 22px; }
      .pause-subtitle { margin-bottom: 10px; font-size: 9px; }
      .pause-menu-button { min-height: 42px; margin-bottom: 7px; font-size: 12px; }
      .pause-setting-group { margin: 9px 0; padding: 8px 10px; }
      .pause-setting-row { grid-template-columns: 64px minmax(0,1fr) 42px; gap: 7px; min-height: 36px; font-size: 11px; }
      .pause-setting-row input[type="range"] { height: 34px; }
      .pause-toggle-row { min-height: 37px; font-size: 11px; }
      .pause-toggle { height: 31px; min-width: 65px; }
      .pause-tip { margin-top: 7px; font-size: 8px; }
    }


    /* Mobile82：自定义内容编辑器 */
    .editor-panel {
      display: none;
      position: absolute;
      inset: 0;
      padding: clamp(14px, 2vw, 28px);
      color: #e8edf2;
      background:
        linear-gradient(180deg, rgba(6,9,13,.97), rgba(4,6,9,.99)),
        repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.018) 48px);
      overflow: hidden;
    }
    .editor-panel.visible { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 12px; }
    .editor-header { display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid #29313a; padding-bottom:10px; }
    .editor-title-wrap { min-width:0; }
    .editor-kicker { font-size:10px; letter-spacing:.22em; color:#70808e; }
    .editor-title { margin:3px 0 0; font-size:clamp(22px,2.4vw,36px); letter-spacing:.08em; }
    .editor-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .editor-toolbar .main-menu-button { min-height:34px; padding:7px 12px; font-size:10px; width:auto; }
    .editor-tabs { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:2px; }
    .editor-tab {
      border:1px solid #303a44; background:#0c1117; color:#9cabb8; min-width:72px;
      min-height:34px; padding:7px 12px;  font:700 11px/1 Microsoft YaHei,sans-serif;
    }
    .editor-tab:hover, .editor-tab.active { color:#fff; border-color:#697887; background:#151d25; }
    .editor-body { min-height:0; display:grid; grid-template-columns:minmax(180px,26%) minmax(0,1fr); border-top:1px solid #202832; }
    .editor-list-pane { min-height:0; padding:12px 12px 12px 0; border-right:1px solid #202832; display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; }
    .editor-list-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .editor-section-name { font-size:13px; font-weight:900; letter-spacing:.08em; }
    .editor-mini-button { border:1px solid #3a4651; background:#10161d; color:#dfe7ed; min-height:30px; padding:5px 10px;  font-weight:800; }
    .editor-mini-button:hover { border-color:#8a98a4; }
    .editor-record-list { min-height:0; overflow:auto; display:grid; align-content:start; gap:5px; padding-right:4px; }
    .editor-record {
      display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; width:100%;
      border:1px solid #232d36; background:#0a0f14; color:#b6c2cc; padding:9px 10px;  text-align:left;
    }
    .editor-record:hover { border-color:#53616d; }
    .editor-record.active { border-color:#d8b743; color:#fff; background:#17170f; }
    .editor-record small { color:#647381; font-size:9px; }
    .editor-empty { color:#687681; font-size:11px; padding:16px 6px; }
    .editor-form-pane { min-height:0; overflow:auto; padding:12px 0 18px 16px; }
    .editor-form-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
    .editor-form-actions { display:flex; gap:7px; flex-wrap:wrap; }
    .editor-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
    .editor-field { display:grid; gap:5px; min-width:0; }
    .editor-field.wide { grid-column:1 / -1; }
    .editor-field > span { font-size:10px; color:#8695a2; letter-spacing:.06em; }
    .editor-field input, .editor-field select, .editor-field textarea {
      width:100%; min-width:0; border:1px solid #303a44; background:#080c10; color:#edf2f6;
      padding:9px 10px; outline:none; font:600 12px/1.35 Microsoft YaHei,sans-serif; border-radius:0;
    }
    .editor-field textarea { resize:vertical; min-height:72px; }
    .editor-field input:focus, .editor-field select:focus, .editor-field textarea:focus { border-color:#d0ae36; box-shadow:0 0 0 1px rgba(208,174,54,.26); }
    .editor-status { margin-top:10px; min-height:18px; color:#91a1ae; font-size:10px; }
    .editor-status.ok { color:#8ecf97; }
    .editor-status.error { color:#ff7d84; }
    .editor-help { margin-top:12px; border-top:1px dashed #26313a; padding-top:10px; color:#6f7e8a; font-size:10px; line-height:1.65; }
    .editor-hidden-input { display:none; }
    .custom-character-placeholder {
      width:76px; height:112px; display:grid; place-items:center; background:#20262d; border:2px solid #828e98;
      color:#e9eef2; font-weight:900; font-size:13px; text-align:center; padding:6px; box-sizing:border-box;
    }
    .map-card.custom-map-card .map-placeholder { background:#151922; }
    @media (max-width: 820px) {
      .editor-panel { padding:10px; }
      .editor-panel.visible { gap:8px; }
      .editor-toolbar { gap:5px; }
      .editor-toolbar .main-menu-button { padding:5px 7px; min-height:29px; font-size:8px; }
      .editor-tabs { gap:4px; }
      .editor-tab { min-height:29px; min-width:58px; padding:5px 7px; font-size:9px; }
      .editor-body { grid-template-columns:150px minmax(0,1fr); }
      .editor-list-pane { padding-top:8px; }
      .editor-form-pane { padding:8px 0 12px 10px; }
      .editor-form-grid { gap:7px; }
      .editor-field input, .editor-field select, .editor-field textarea { padding:7px; font-size:10px; }
    }


    /* Mobile83：标准化角色编辑器分组、资源互斥字段、角色自由搭配主武器。 */
    .editor-group-title {
      grid-column:1 / -1; margin-top:8px; padding:8px 0 6px; border-bottom:1px solid #29333d;
      color:#d6e0e8; font-size:11px; font-weight:950; letter-spacing:.12em;
    }
    .editor-group-title small { margin-left:8px; color:#647583; font-size:9px; font-weight:600; letter-spacing:.04em; }
    .editor-field.resource-hidden, .editor-group-title.resource-hidden { display:none !important; }
    .character-loadout { width:min(620px,92%); margin:4px auto 0; display:grid; gap:5px; text-align:left; }
    .character-loadout-title { color:#9fb0bd; font-size:9px; font-weight:950; letter-spacing:.16em; text-align:center; }
    .character-loadout select { width:100%; min-height:34px; padding:6px 9px; border:1px solid rgba(190,207,221,.2); border-radius:5px; background:#0b1117; color:#edf4f8; font:800 10px Microsoft YaHei,sans-serif; }
    .character-weapon-detail { color:#718493; font-size:9px; line-height:1.4; text-align:center; }
    @media (pointer:coarse) { .character-loadout { width:min(520px,88%); gap:3px; } .character-loadout select { min-height:30px; font-size:9px; } .character-weapon-detail { font-size:7px; } }


    /* Mobile83-Compact：从 Mobile83 分支重做角色编辑器。去色调、纯白文字、单列紧凑数据表。 */
    .editor-panel { color:#fff; background:#090909; }
    .editor-panel * { scrollbar-color:#555 #111; }
    .editor-header { border-bottom-color:#303030; }
    .editor-kicker, .editor-title, .editor-section-name, .editor-record, .editor-record small, .editor-empty, .editor-help, .editor-status, .editor-status.ok, .editor-status.error { color:#fff; }
    .editor-kicker, .editor-record small, .editor-empty, .editor-help { opacity:.62; }
    .editor-tabs { gap:4px; }
    .editor-tab { min-width:68px; min-height:30px; padding:5px 10px; border-color:#333; background:#101010; color:#fff; font-size:10px; }
    .editor-tab:hover, .editor-tab.active { border-color:#777; background:#1a1a1a; color:#fff; }
    .editor-body { border-top-color:#282828; grid-template-columns:minmax(170px,23%) minmax(0,1fr); }
    .editor-list-pane { border-right-color:#282828; padding:9px 9px 9px 0; gap:6px; }
    .editor-mini-button { min-height:28px; padding:4px 9px; border-color:#3a3a3a; background:#111; color:#fff; font-size:10px; }
    .editor-mini-button:hover { border-color:#777; background:#181818; }
    .editor-record-list { gap:3px; }
    .editor-record { padding:7px 8px; border-color:#292929; background:#0d0d0d; color:#fff; }
    .editor-record:hover { border-color:#555; background:#131313; }
    .editor-record.active { border-color:#888; color:#fff; background:#1a1a1a; }
    .editor-form-pane { padding:8px 0 12px 12px; }
    .editor-form-top { margin-bottom:6px; }
    .editor-form-actions { gap:5px; }

    /* 角色数据：属性名 / 属性值形成两条竖直列，一行一个属性。 */
    #editorForm.character-compact-form { display:grid; grid-template-columns:minmax(0,1fr); gap:0; width:min(760px,100%); align-content:start; }
    #editorForm.character-compact-form .editor-group-title { grid-column:1; margin:7px 0 2px; padding:6px 2px 4px; border-bottom:1px solid #343434; color:#fff; font-size:10px; line-height:1.2; letter-spacing:.1em; }
    #editorForm.character-compact-form .editor-group-title small { margin-left:7px; color:#fff; opacity:.48; font-size:8px; }
    #editorForm.character-compact-form .editor-field, #editorForm.character-compact-form .editor-field.wide { grid-column:1; display:grid; grid-template-columns:clamp(118px,19vw,170px) minmax(0,1fr); align-items:center; gap:8px; min-height:30px; padding:2px 2px; border-bottom:1px solid #171717; }
    #editorForm.character-compact-form .editor-field > span { color:#fff; font-size:9px; line-height:1.15; letter-spacing:.02em; white-space:normal; }
    #editorForm.character-compact-form .editor-field input, #editorForm.character-compact-form .editor-field select, #editorForm.character-compact-form .editor-field textarea { min-height:26px; padding:4px 7px; border:1px solid #333; background:#111; color:#fff; font:600 10px/1.2 Microsoft YaHei,sans-serif; }
    #editorForm.character-compact-form .editor-field textarea { min-height:48px; max-height:96px; }
    #editorForm.character-compact-form .editor-field input:focus, #editorForm.character-compact-form .editor-field select:focus, #editorForm.character-compact-form .editor-field textarea:focus { border-color:#8a8a8a; box-shadow:0 0 0 1px #444; background:#151515; }
    #editorForm.character-compact-form option { background:#111; color:#fff; }

    /* 其余编辑分类同步去掉蓝紫色调。 */
    .editor-form-grid:not(.character-compact-form) { gap:6px 8px; }
    .editor-field > span { color:#fff; }
    .editor-field input, .editor-field select, .editor-field textarea { border-color:#333; background:#111; color:#fff; }
    .editor-field input:focus, .editor-field select:focus, .editor-field textarea:focus { border-color:#888; box-shadow:0 0 0 1px #444; }
    .editor-group-title { border-bottom-color:#343434; color:#fff; }
    .editor-group-title small { color:#fff; opacity:.48; }
    .character-loadout-title, .character-weapon-detail { color:#fff; }
    .character-weapon-detail { opacity:.62; }
    .character-loadout select { border-color:#3a3a3a; background:#111; color:#fff; }

    /* Mobile83-Compact-Fix2：编辑器字号整体放大，同时保留紧凑垂直属性布局。 */
    .editor-panel { font-size:13px; }
    .editor-title { font-size:clamp(24px,2.6vw,38px); }
    .editor-kicker { font-size:12px; }
    .editor-section-name { font-size:15px; }
    .editor-tab { font-size:12px; min-height:34px; }
    .editor-mini-button { font-size:12px; min-height:31px; }
    .editor-record { font-size:13px; }
    .editor-record small { font-size:11px; }
    .editor-help, .editor-status { font-size:12px; }
    #editorForm.character-compact-form .editor-group-title { font-size:12px; }
    #editorForm.character-compact-form .editor-group-title small { font-size:10px; }
    #editorForm.character-compact-form .editor-field, #editorForm.character-compact-form .editor-field.wide { min-height:34px; }
    #editorForm.character-compact-form .editor-field > span { font-size:12px; line-height:1.2; }
    #editorForm.character-compact-form .editor-field input,
    #editorForm.character-compact-form .editor-field select,
    #editorForm.character-compact-form .editor-field textarea { min-height:30px; font-size:13px; }

    .editor-attribute-tooltip {
      position:fixed; z-index:10000; max-width:min(420px,42vw); padding:9px 11px;
      border:1px solid #4a4a4a; background:rgba(8,8,8,.97); color:#fff;
      box-shadow:0 10px 28px rgba(0,0,0,.48); pointer-events:none; opacity:0; visibility:hidden;
      transform:translate(12px,12px); transition:opacity .08s ease, visibility 0s linear .08s;
      font:500 12px/1.55 Microsoft YaHei,Inter,sans-serif; white-space:normal;
    }
    .editor-attribute-tooltip.visible { opacity:1; visibility:visible; transition:opacity .08s ease; }
    .editor-attribute-tooltip strong { display:block; margin-bottom:3px; color:#fff; font-size:13px; font-weight:900; }
    #editorForm.character-compact-form .editor-field[data-description] {  }
    #editorForm.character-compact-form .editor-field[data-description]:hover { background:#121212; border-bottom-color:#303030; }

    @media (max-width:820px) {
      .editor-panel { font-size:12px; }
      .editor-body { grid-template-columns:145px minmax(0,1fr); }
      .editor-form-pane { padding:6px 0 8px 8px; }
      .editor-section-name { font-size:13px; }
      .editor-tab, .editor-mini-button { font-size:10px; }
      #editorForm.character-compact-form .editor-field, #editorForm.character-compact-form .editor-field.wide { grid-template-columns:112px minmax(0,1fr); gap:6px; min-height:31px; padding:1px 0; }
      #editorForm.character-compact-form .editor-field > span { font-size:10px; }
      #editorForm.character-compact-form .editor-field input, #editorForm.character-compact-form .editor-field select, #editorForm.character-compact-form .editor-field textarea { min-height:27px; padding:3px 5px; font-size:11px; }
      .editor-attribute-tooltip { display:none !important; }
    }

  

    /* Fix14：角色 / 敌人图像资源编辑器。资源本体放 IndexedDB，配置只保存引用。 */
    .editor-visual-panel { grid-column:1 / -1; margin-top:10px; padding:12px; border:1px solid #303030; background:#0a0a0a; color:#fff; }
    .editor-visual-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .editor-visual-head strong { font-size:14px; color:#fff; }
    .editor-visual-head small { font-size:11px; color:#fff; opacity:.62; }
    .editor-visual-layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(360px,1.2fr); gap:12px; align-items:start; }
    .editor-visual-controls { display:grid; gap:8px; }
    .editor-visual-row { display:grid; grid-template-columns:130px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:34px; }
    .editor-visual-row > span { font-size:12px; color:#fff; }
    .editor-visual-row input, .editor-visual-row select { min-width:0; min-height:30px; padding:4px 7px; border:1px solid #373737; background:#111; color:#fff; font:600 12px Microsoft YaHei,sans-serif; }
    .editor-visual-row button { min-height:30px; padding:4px 9px; border:1px solid #555; background:#171717; color:#fff;  font:700 11px Microsoft YaHei,sans-serif; }
    .editor-visual-row button:hover { border-color:#999; background:#202020; }
    .editor-visual-count { font-size:10px; color:#fff; opacity:.65; white-space:nowrap; }
    .editor-visual-preview-wrap { min-width:0; }
    .editor-visual-preview { display:block; width:100%; max-width:620px; aspect-ratio:13/8; border:1px solid #333; background:#080808;  touch-action:none; }
    .editor-visual-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; color:#fff; font-size:10px; opacity:.72; }
    .editor-visual-legend i { display:inline-block; width:9px; height:9px; margin-right:4px; vertical-align:-1px; border:1px solid currentColor; }
    .editor-visual-note { margin-top:8px; font-size:10px; line-height:1.5; color:#fff; opacity:.6; }
    .editor-record .builtin-badge { justify-self:end; padding:1px 5px; border:1px solid #555; font-size:9px; color:#fff; opacity:.72; }
    @media (max-width:900px) { .editor-visual-layout { grid-template-columns:1fr; } .editor-visual-row { grid-template-columns:105px minmax(0,1fr) auto; } }

  

    /* ===== Legacy Fix20: card number above + rarity colors ===== */
    .upgrade-card-row {
      padding-top: clamp(18px, 2.2vh, 28px);
      overflow: visible;
    }
    .upgrade-card {
      overflow: visible;
      --rarity-main: #d7dbe6;
      --rarity-soft: rgba(215,219,230,.22);
      --rarity-deep: #74819b;
      --rarity-text: #f4f7ff;
      box-shadow: 0 18px 42px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.18), 0 0 0 2px rgba(215,219,230,.34);
    }
    .upgrade-card::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: clamp(12px, 1.2vw, 20px);
      border: 2px solid var(--rarity-main);
      opacity: .72;
      pointer-events: none;
      z-index: -1;
    }
    .upgrade-card.rarity-common {
      --rarity-main: #d7dbe6;
      --rarity-soft: rgba(215,219,230,.2);
      --rarity-deep: #707b92;
      --rarity-text: #f4f7ff;
    }
    .upgrade-card.rarity-rare {
      --rarity-main: #62d7ff;
      --rarity-soft: rgba(98,215,255,.2);
      --rarity-deep: #2b8ab0;
      --rarity-text: #ebfbff;
    }
    .upgrade-card.rarity-epic {
      --rarity-main: #c57bff;
      --rarity-soft: rgba(197,123,255,.22);
      --rarity-deep: #7a3db3;
      --rarity-text: #f7edff;
    }
    .upgrade-card.rarity-legendary {
      --rarity-main: #ffcc66;
      --rarity-soft: rgba(255,204,102,.22);
      --rarity-deep: #b57418;
      --rarity-text: #fff7e2;
    }
    .upgrade-card.item-card-special { box-shadow: 0 18px 42px rgba(0,0,0,.48), 0 0 14px rgba(184,108,255,.46), inset 0 0 0 2px rgba(239,218,255,.18), 0 0 0 2px rgba(197,123,255,.32); }
    .upgrade-card.item-card-premium { box-shadow: 0 18px 42px rgba(0,0,0,.48), 0 0 15px rgba(255,212,92,.52), inset 0 0 0 2px rgba(255,244,196,.18), 0 0 0 2px rgba(255,204,102,.34); }
    .upgrade-card:hover,
    .upgrade-card:focus-visible {
      border-color: var(--rarity-main);
      box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 0 3px var(--rarity-soft), 0 0 0 1px rgba(255,255,255,.16) inset;
    }
    .upgrade-card.selected {
      box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 0 4px var(--rarity-soft), 0 0 26px color-mix(in srgb, var(--rarity-main) 42%, transparent);
    }
    .upgrade-card .card-icon-zone {
      background: linear-gradient(145deg, color-mix(in srgb, var(--rarity-main) 48%, #7a3148), color-mix(in srgb, var(--rarity-deep) 68%, #4a2334));
    }
    .upgrade-card .card-name-zone {
      background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-deep) 74%, #57486d), color-mix(in srgb, var(--rarity-main) 18%, #4c4266));
      color: var(--rarity-text);
    }
    .upgrade-card .card-level-badge {
      background: color-mix(in srgb, var(--rarity-deep) 84%, rgba(23,11,30,.74));
      color: var(--rarity-text);
      border-color: color-mix(in srgb, var(--rarity-main) 62%, rgba(255,255,255,.24));
      box-shadow: 0 0 0 1px rgba(0,0,0,.16);
    }
    .upgrade-card .card-max-preview strong { color: var(--rarity-deep); }
    .card-key-hint {
      left: 50%;
      top: 0;
      transform: translate(-50%, calc(-100% - 8px));
      width: clamp(26px, 2.1vw, 34px);
      height: clamp(24px, 2vw, 30px);
      aspect-ratio: auto;
      border-radius: 7px;
      border: 2px solid var(--rarity-main);
      background: rgba(10, 8, 14, .92);
      color: var(--rarity-text);
      box-shadow: 0 8px 18px rgba(0,0,0,.34);
      z-index: 6;
    }
    .upgrade-card.holy-selected .card-key-hint { opacity: 0; }
    @media (max-width: 900px) {
      .upgrade-card-row { padding-top: 14px; }
      .card-key-hint {
        transform: translate(-50%, calc(-100% - 4px));
        width: 20px;
        height: 18px;
        border-width: 1px;
        border-radius: 4px;
      }
    }
    @media (max-width: 640px) {
      .card-key-hint {
        display: grid !important;
        font-size: 6.8px;
      }
      .upgrade-card::before { inset: -3px; border-width: 1px; }
    }

  

    /* ===== Legacy Fix24: LAN multiplayer alpha ===== */
    .lan-overlay {
      position: fixed; inset: 0; z-index: 240; display: none; place-items: center;
      padding: 18px; background: rgba(5,4,8,.84); backdrop-filter: blur(8px);
      pointer-events: none;
    }
    .lan-overlay.visible { display: grid; pointer-events: auto; }
    .main-menu-overlay.lan-active { pointer-events: none !important; }
    .lan-panel {
      width: min(920px, 94vw); max-height: min(900px, 92vh); overflow: auto;
      border: 2px solid rgba(234,220,255,.34); border-radius: 14px;
      background: linear-gradient(180deg, rgba(35,25,48,.98), rgba(17,13,25,.98));
      box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.06);
      color: #fff; padding: 18px;
    }
    .lan-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
    .lan-kicker { color:#bca9ce; font-size:10px; letter-spacing:.18em; font-weight:800; }
    .lan-title { margin:3px 0 0; font-size:26px; }
    .lan-close { width:auto!important; min-width:82px!important; }
    .lan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .lan-card { border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.035); padding:12px; }
    .lan-card h3 { margin:0 0 9px; font-size:13px; letter-spacing:.08em; color:#f1e8ff; }
    .lan-field { display:grid; gap:5px; margin-bottom:9px; color:#cdbedc; font-size:10px; }
    .lan-field input,.lan-field select {
      width:100%; min-width:0; border:1px solid rgba(255,255,255,.18); border-radius:7px;
      padding:9px 10px; background:#15101d; color:#fff; font:inherit;
    }
    .lan-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .lan-actions .main-menu-button { width:auto; flex:1 1 150px; min-height:40px; }
    .lan-status { margin:10px 0 0; min-height:18px; color:#d9cce7; font-size:11px; line-height:1.5; }
    .lan-status.error { color:#ff9ca8; }
    .lan-room-code { font-size:26px; font-weight:900; letter-spacing:.18em; color:#fff0a8; }
    .lan-player-list { display:grid; gap:7px; }
    .lan-player-row {
      display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:center;
      min-height:36px; padding:6px 8px; border:1px solid rgba(255,255,255,.10); border-radius:7px; background:rgba(0,0,0,.18);
      font-size:11px;
    }
    .lan-player-dot { width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px currentColor; }
    .lan-player-meta { color:#bca9ce; font-size:9px; }
    .lan-badge { padding:2px 6px; border:1px solid rgba(255,255,255,.16); border-radius:999px; font-size:9px; color:#ddd; }
    .lan-badge.ready { color:#adffc4; border-color:rgba(110,255,145,.4); }
    .lan-lobby.hidden { display:none; }
    .lan-host-only.hidden { display:none; }
    .lan-note { margin-top:12px; color:#a99bb8; font-size:9px; line-height:1.55; }
    .lan-wave-banner {
      position:fixed; left:50%; top:13%; z-index:40; transform:translateX(-50%); pointer-events:none;
      padding:8px 14px; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(12,8,18,.78);
      color:#fff; font-size:16px; font-weight:900; letter-spacing:.08em; opacity:0; transition:opacity .16s ease;
    }
    .lan-wave-banner.visible { opacity:1; }
    @media (max-width:760px) { .lan-grid{grid-template-columns:1fr}.lan-panel{padding:11px}.lan-title{font-size:20px}.lan-room-code{font-size:20px} }

  
/* Fix34: user-supplied card assets cropped and mapped; card art keeps aspect ratio */
.card-icon-image-asset {
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}


/* Fix34: image-backed cards use a larger contained art region; no distortion or overflow. */
.card-icon.card-icon-image-wrap {
  width: 78% !important;
  height: 82% !important;
  max-width: 78% !important;
  max-height: 82% !important;
  aspect-ratio: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(24,10,28,.42) !important;
  background: rgba(20,10,24,.18) !important;
  overflow: hidden !important;
}
.card-icon.card-icon-image-wrap .card-icon-image-asset {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}



/* ===== Fix36: card art containment / nearest-neighbor low-pixel assets ===== */
.card-icon.card-icon-image-wrap {
  width: 74% !important;
  height: 78% !important;
  max-width: 74% !important;
  max-height: 78% !important;
  box-sizing: border-box !important;
  padding: 6px !important;
  overflow: hidden !important;
}
.card-icon.card-icon-image-wrap .card-icon-image-asset {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.card-icon-image-asset.low-pixel-asset,
.owned-card-art.low-pixel-asset {
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* ===== Fix36: selected cards HUD ===== */
.owned-card-hud {
  position: fixed;
  z-index: 34;
  left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  width: min(448px, 48vw);
  pointer-events: none;
}
.owned-card-chip {
  --rarity:#d7dbe6;
  position:relative;
  width:64px;
  height:64px;
  flex:0 0 64px;
  box-sizing:border-box;
  border:2px solid rgba(0,0,0,.72);
  border-radius:8px;
  background:var(--rarity);
  box-shadow:0 2px 0 rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.2);
  padding:4px;
  pointer-events:auto;
}
.owned-card-chip.rarity-common{--rarity:#aeb6c5}.owned-card-chip.rarity-rare{--rarity:#36bce7}.owned-card-chip.rarity-epic{--rarity:#9a58d3}.owned-card-chip.rarity-legendary{--rarity:#e7ad38}
.owned-card-art-wrap { width:100%;height:100%;border-radius:5px;overflow:hidden;background:rgba(12,8,18,.62);display:grid;place-items:center; }
.owned-card-art { width:88%;height:88%;object-fit:contain;display:block; }
.owned-card-fallback { color:#fff;font:900 20px/1 Microsoft YaHei,sans-serif;text-shadow:0 2px 2px #000; }
.owned-card-level { position:absolute;left:2px;bottom:2px;min-width:19px;padding:1px 4px;border-radius:4px;background:rgba(8,6,12,.9);color:#fff;font:900 11px/1.25 Georgia,serif;text-align:center;text-shadow:0 1px 1px #000; }
.owned-card-tooltip { display:none;position:absolute;left:0;top:70px;width:300px;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(12,8,18,.96);color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.5);font:12px/1.55 Microsoft YaHei,sans-serif;z-index:90;white-space:normal; }
.owned-card-chip:hover .owned-card-tooltip,.owned-card-chip:focus-within .owned-card-tooltip { display:block; }
.owned-card-tooltip strong { display:block;margin-bottom:3px;font-size:14px;color:#fff; }
.owned-card-tooltip .owned-card-tooltip-level { color:#d5c8df;margin-bottom:6px; }
.owned-card-tooltip .owned-card-tooltip-evolve { margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.15);color:#f1dba9; }
@media(max-width:760px){.owned-card-hud{gap:4px;width:min(360px,58vw)}.owned-card-chip{width:46px;height:46px;flex-basis:46px;padding:3px}.owned-card-level{font-size:8px;min-width:14px}.owned-card-tooltip{width:230px;top:51px;font-size:10px}}



    /* ===== Legacy Fix43: centered selection headers + brighter world selection ===== */
    .selection-header { justify-content:center !important; }
    .selection-heading-wrap {
      position:absolute !important; left:50% !important; top:50% !important;
      transform:translate(-50%,-50%) !important; text-align:center !important;
      width:min(62vw,680px); pointer-events:none;
    }
    .selection-back-button {
      position:absolute !important; left:0 !important; top:50% !important;
      transform:translateY(-50%); z-index:3;
    }
    .selection-back-button:hover,.selection-back-button:focus-visible { transform:translateY(-50%) !important; }
    #mapSelectPanel.visible::before {
      content:''; position:absolute; z-index:0; pointer-events:none;
      left:-16%; right:-16%; top:-14%; height:78%;
      background:
        radial-gradient(ellipse at 50% 25%, rgba(154,184,207,.22) 0%, rgba(92,125,151,.15) 30%, rgba(48,72,93,.09) 55%, transparent 84%),
        linear-gradient(180deg, rgba(67,91,111,.08), transparent 94%);
    }
    #mapSelectPanel.visible > * { position:relative; z-index:1; }
    @media(max-width:700px){
      .selection-heading-wrap{width:55vw}
      .selection-back-button{min-width:70px!important;padding:0 9px!important}
    }

  

    /* ===== Legacy Fix54: point-up item hex / split collision grace / mana conversions / selection shadow ===== */
    /* ===== Legacy Fix52: crop character assets / ground hazards / niangao mana / projectile pool gating ===== */
    .owned-card-art { width:66% !important; height:66% !important; }
    .owned-card-chip {
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      padding:4px !important;
      isolation:isolate;
    }
    .owned-card-chip::before {
      content:''; position:absolute; inset:0; z-index:-2;
      background:var(--rarity); border:2px solid rgba(0,0,0,.78);
      border-radius:10px;
      box-shadow:0 2px 0 rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.2);
    }
    .owned-card-chip.item-chip::before {
      border-radius:14px;
      clip-path:polygon(50% 1%,96% 25%,96% 75%,50% 99%,4% 75%,4% 25%);
    }
    .owned-card-chip.item-chip .owned-card-art-wrap {
      clip-path:polygon(50% 1%,96% 25%,96% 75%,50% 99%,4% 75%,4% 25%);
      border-radius:11px;
    }
    .owned-card-art-wrap { position:relative;z-index:1; }
    .owned-card-level { z-index:3; }
    .owned-card-tooltip { z-index:100; }

    .upgrade-card .card-icon-zone {
      border-radius:clamp(8px,1vw,16px) clamp(8px,1vw,16px) 0 0;
    }
    .upgrade-card .card-desc-zone {
      border-radius:0 0 clamp(8px,1vw,16px) clamp(8px,1vw,16px);
      overflow:hidden;
    }
    .upgrade-card.item-card .card-max-preview { display:none !important; }

  

    /* Fix60：暂停菜单右侧实时属性面板。 */
    .pause-shell {
      width: min(860px, 94vw);
      max-height: min(720px, 90vh);
      display: grid;
      grid-template-columns: minmax(320px, 430px) minmax(260px, 350px);
      align-items: stretch;
      justify-content: center;
      gap: 14px;
    }
    .pause-shell .pause-panel {
      width: auto;
      max-height: min(720px, 90vh);
    }
    .pause-stats-panel {
      min-width: 0;
      max-height: min(720px, 90vh);
      display: flex;
      flex-direction: column;
      padding: clamp(16px, 2vw, 24px);
      border: 1px solid rgba(196,216,235,.28);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(18,25,34,.98), rgba(8,12,18,.98));
      color: #dce8f3;
      box-shadow: 0 28px 80px rgba(0,0,0,.54), inset 0 0 0 1px rgba(255,255,255,.035);
      overflow: hidden;
    }
    .pause-stats-heading {
      flex: 0 0 auto;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(196,216,235,.16);
      color: #f6fbff;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .08em;
    }
    .pause-stats-heading strong { color:#a8c7e4; font-size:12px; letter-spacing:.04em; }
    .pause-stats-panel .stats-list { justify-content:flex-start; }
    .pause-stats-panel .stat-row { font-size:11px; padding:5px 7px; }
    @media (max-width: 760px) {
      .pause-shell {
        width: min(94vw, 470px);
        max-height: 91vh;
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: auto;
      }
      .pause-shell .pause-panel,
      .pause-stats-panel { max-height: none; }
      .pause-stats-panel .stats-list { max-height: 250px; }
    }

  
    /* Fix61: progression locks */
    .map-card.locked{filter:brightness(.22) saturate(.2)!important;}
    .map-card.locked.active{opacity:1;}
    .map-card.locked::after{content:'🔒';position:absolute;inset:0;display:grid;place-items:center;z-index:10;background:rgba(0,0,0,.46);font-size:clamp(44px,7vw,92px);text-shadow:0 5px 12px #000;}

  

    /* ===== Legacy Fix63: single-row card HUD / lock icon / skill HUD support ===== */
    .owned-card-hud{
      flex-wrap:nowrap !important;
      align-content:center !important;
      align-items:center !important;
      gap:6px !important;
      width:fit-content !important;
      max-width:min(720px,64vw) !important;
      overflow-x:auto !important;
      overflow-y:hidden !important;
      pointer-events:auto !important;
      padding:2px 2px 5px !important;
      scrollbar-width:none;
      overscroll-behavior:contain;
    }
    .owned-card-hud::-webkit-scrollbar{display:none;}
    .owned-card-chip{flex:0 0 64px !important;}
    .owned-card-chip .owned-card-tooltip{display:none !important;}
    .owned-card-floating-tooltip{
      position:fixed;z-index:100000;display:none;pointer-events:none;
      width:min(320px,82vw);box-sizing:border-box;padding:10px 12px;
      border:1px solid rgba(255,255,255,.24);border-radius:8px;
      background:rgba(12,8,18,.97);color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.62);
      font:12px/1.55 'Microsoft YaHei',sans-serif;white-space:normal;
    }
    .owned-card-floating-tooltip.visible{display:block;}
    .owned-card-floating-tooltip strong{display:block;margin-bottom:3px;font-size:14px;color:#fff;}
    .owned-card-floating-tooltip .owned-card-tooltip-level{color:#d5c8df;margin-bottom:6px;}
    .owned-card-floating-tooltip .owned-card-tooltip-evolve{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.15);color:#f1dba9;}
    @media(max-width:760px){.owned-card-hud{width:fit-content!important;max-width:min(480px,68vw)!important}.owned-card-chip{flex-basis:46px!important}.owned-card-floating-tooltip{font-size:10px;width:min(250px,78vw)}}

    /* locked character: exact portrait-sized 90%-transparent black/stripe mask + icon, no LOCKED text */
    .character-card.locked-character .character-portrait::before,

    .skill-hud-tooltip{position:fixed;z-index:100001;display:none;pointer-events:none;width:min(320px,82vw);box-sizing:border-box;
      padding:10px 12px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(7,10,14,.97);color:#fff;
      box-shadow:0 14px 38px rgba(0,0,0,.6);font:12px/1.55 'Microsoft YaHei',sans-serif;}
    .skill-hud-tooltip.visible{display:block;}
    .skill-hud-tooltip strong{display:block;font-size:14px;margin-bottom:5px;}
    .skill-hud-tooltip .skill-tip-meta{color:#bfcbd5;margin-bottom:6px;}

  

    /* ===== Legacy Fix66: LAN team portraits + HP mini HUD ===== */
    .lan-team-hud{
      position:fixed;
      z-index:36;
      left:max(12px,env(safe-area-inset-left));
      top:max(12px,env(safe-area-inset-top));
      display:none;
      grid-auto-rows:50px;
      gap:6px;
      width:218px;
      pointer-events:none;
      font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;
    }
    .lan-team-hud.visible{display:grid;}
    .lan-team-row{
      --name-color:#fff;
      height:50px;
      box-sizing:border-box;
      display:grid;
      grid-template-columns:46px minmax(0,1fr);
      gap:7px;
      align-items:center;
      padding:3px 7px 3px 3px;
      border:1px solid rgba(255,255,255,.17);
      border-left:3px solid var(--name-color);
      border-radius:8px;
      background:linear-gradient(90deg,rgba(9,8,13,.90),rgba(12,10,18,.76));
      box-shadow:0 3px 10px rgba(0,0,0,.34);
      overflow:hidden;
    }
    .lan-team-row.downed{filter:brightness(.56) saturate(.65);}
    .lan-team-portrait-wrap{
      position:relative;
      width:42px;height:42px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.24);
      border-radius:7px;
      background:#0b0a0e;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
    }
    .lan-team-portrait{display:block;width:42px;height:42px;}
    .lan-team-portrait-wrap::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:rgba(255,28,35,0);mix-blend-mode:screen;
    }
    .lan-team-portrait-wrap.hurt::after{animation:lanTeamPortraitHurt .34s cubic-bezier(.18,.72,.22,1);}
    @keyframes lanTeamPortraitHurt{
      0%{background:rgba(255,24,30,.92);box-shadow:inset 0 0 18px rgba(255,0,0,.95);}
      34%{background:rgba(255,24,30,.62);}
      100%{background:rgba(255,24,30,0);box-shadow:inset 0 0 0 rgba(255,0,0,0);}
    }
    .lan-team-info{min-width:0;display:grid;grid-template-rows:16px 13px;gap:4px;align-content:center;}
    .lan-team-name{
      min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      color:var(--name-color);font-size:10px;font-weight:900;line-height:16px;
      text-shadow:0 1px 2px #000,1px 0 1px #000,-1px 0 1px #000;
    }
    .lan-team-hp-track{
      position:relative;height:12px;overflow:hidden;
      border:1px solid rgba(255,255,255,.22);border-radius:4px;background:rgba(0,0,0,.78);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
    }
    .lan-team-hp-trail,.lan-team-hp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left center;}
    .lan-team-hp-trail{z-index:1;background:#ec3548;}
    .lan-team-hp-fill{z-index:2;background:#45a8ff;}
    .lan-team-row.self .lan-team-hp-fill{background:#54df75;}
    .lan-team-hp-text{
      position:absolute;z-index:3;inset:0;display:grid;place-items:center;
      color:#fff;font-size:7px;font-weight:900;line-height:12px;
      text-shadow:0 1px 1px #000,1px 0 1px #000,-1px 0 1px #000;
      font-variant-numeric:tabular-nums;
    }
    /* Fix67: card HUD stays pinned top-left; LAN team HUD flows below it. */
    body.lan-team-hud-active .owned-card-hud{
      top:max(12px,env(safe-area-inset-top)) !important;
    }
    .lan-team-hud{
      top:var(--lan-team-hud-top,max(86px,calc(env(safe-area-inset-top) + 86px))) !important;
    }
    @media(max-width:760px){
      .lan-team-hud{width:174px;grid-auto-rows:43px;gap:4px;}
      .lan-team-row{height:43px;grid-template-columns:38px minmax(0,1fr);gap:5px;padding:2px 5px 2px 2px;border-radius:6px;}
      .lan-team-portrait-wrap,.lan-team-portrait{width:36px;height:36px;}
      .lan-team-info{grid-template-rows:13px 11px;gap:3px;}
      .lan-team-name{font-size:8px;line-height:13px;}
      .lan-team-hp-track{height:10px;}
      .lan-team-hp-text{font-size:6px;line-height:10px;}
    }

  

    /* ===== Legacy Fix72: selection background depth / opaque portraits / restored overhead light ===== */
    .main-menu-background::before {
      content:'';
      position:absolute;
      inset:0;
      z-index:30;
      pointer-events:none;
      background:rgba(0,0,0,.46);
    }
    .main-menu-background::after {
      z-index:31;
      mix-blend-mode:normal !important;
      opacity:1 !important;
      background:
        radial-gradient(ellipse at 50% 34%, rgba(82,104,122,.055) 0%, rgba(0,0,0,0) 42%),
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0 44%, rgba(0,0,0,.42) 100%) !important;
    }
    .main-menu-bg-layer { z-index:1; }

    /* Side characters are dimmed, not transparent: the background can no longer show through the sprite. */
    .character-card {
      opacity:1 !important;
      filter:brightness(.42) saturate(.70) contrast(.96);
    }
    .character-card.active {
      opacity:1 !important;
      filter:brightness(1.08) saturate(1) contrast(1.02) !important;
    }
    .character-portrait,
    .character-portrait img { opacity:1 !important; }

    /* Old-version overhead light, lifted above the darkened background but kept behind every character/UI element. */
    #characterSelectPanel.visible::before {
      content:'' !important;
      position:absolute !important;
      z-index:0 !important;
      left:-16% !important;
      right:-16% !important;
      top:-14% !important;
      height:76% !important;
      pointer-events:none !important;
      mix-blend-mode:screen !important;
      background:
        radial-gradient(ellipse at 50% 8%, rgba(205,224,238,.38) 0%, rgba(151,181,203,.27) 21%, rgba(91,123,148,.15) 45%, rgba(43,64,82,.07) 66%, transparent 86%),
        linear-gradient(180deg, rgba(96,125,147,.10), transparent 92%) !important;
    }
    #characterSelectPanel.visible > * { position:relative; z-index:1; }



    /* ===== Legacy Fix78: remove TV/CRT display and halftone filters from every menu/select/editor screen ===== */
    .main-menu-background::after {
      content:none !important;
      display:none !important;
    }
    .main-menu-bg-noise,
    .main-menu-bg-scan {
      display:none !important;
      animation:none !important;
      background:none !important;
      filter:none !important;
    }
    .main-menu-bg-plasma,
    .main-menu-bg-plasma.alt {
      -webkit-mask-image:none !important;
      mask-image:none !important;
      -webkit-mask-size:auto !important;
      mask-size:auto !important;
      -webkit-mask-position:initial !important;
      mask-position:initial !important;
    }

    /* Fix85：玩家0.6秒倒地，0.4秒后爆烟；死亡3秒后才显示极简结算；死亡瞬间销毁玩家HUD。 */
    body.player-death-active #ownedCardHud,
    body.player-death-active #lanTeamHud,
    body.player-death-active #ownedCardFloatingTooltip,
    body.player-death-active #skillHudTooltip,
    body.player-death-active #pauseButton { display:none !important; }
    .death-run-info-overlay {
      position:absolute; inset:0; z-index:180; display:none;
      grid-template-columns:minmax(190px,23vw) minmax(0,1fr) minmax(220px,23vw);
      align-items:center; gap:clamp(14px,2vw,34px); padding:clamp(18px,3vw,50px); pointer-events:none;
    }
    .death-run-info-overlay.visible { display:grid; }
    .death-run-side { max-height:min(76vh,760px); overflow:hidden; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; }
    .death-run-side.left { grid-column:1; }
    .death-run-side.right { grid-column:3; }
    .death-run-cards { max-height:min(66vh,650px); overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); align-content:center; gap:10px; scrollbar-width:none; }
    .death-run-cards::-webkit-scrollbar { display:none; }
    .death-run-cards .owned-card-chip { width:58px !important; height:58px !important; flex-basis:58px !important; justify-self:center; pointer-events:none !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; isolation:auto !important; }
    .death-run-cards .owned-card-chip::before { content:none !important; display:none !important; }
    .death-run-cards .owned-card-art-wrap { width:100% !important; height:100% !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; }
    .death-run-cards .owned-card-art { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; }
    .death-run-cards .owned-card-level, .death-run-cards .owned-card-tooltip { display:none !important; }
    .death-run-stats { max-height:min(66vh,650px); overflow:auto; display:grid; gap:4px; scrollbar-width:none; }
    .death-run-stats::-webkit-scrollbar { display:none; }
    .death-run-stats .stat-row { min-height:29px; padding:4px 0; border:0; border-radius:0; background:none; font-size:11px; }
    .death-result-overlay {
      position:absolute;
      inset:0;
      z-index:190;
      display:grid;
      place-items:center;
      padding:clamp(18px,4vw,56px);
      background:transparent;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s ease, visibility 0s linear .22s;
    }
    .death-result-overlay.visible {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition:opacity .22s ease;
    }
    .death-result-panel {
      width:min(620px,46vw);
      padding:clamp(22px,3vw,38px);
      border:1px solid rgba(255,255,255,.22);
      border-radius:12px;
      background:linear-gradient(180deg,rgba(22,24,29,.98),rgba(7,9,12,.99));
      box-shadow:0 28px 80px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,255,255,.035);
      color:#fff;
      text-align:center;
    }
    .death-result-kicker { color:#8c9aa7;font-size:10px;font-weight:900;letter-spacing:.24em; }
    .death-result-title { margin:8px 0 8px;font-size:clamp(28px,4vw,48px);letter-spacing:.10em; }
    .death-result-character { color:#ff7f86;font-size:clamp(13px,1.2vw,17px);font-weight:900; }
    .death-result-summary { margin:18px 0 20px;color:#bdc8d1;font-size:12px;line-height:1.75;white-space:pre-line; }
    .death-result-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
    .death-result-actions .main-menu-button { min-height:50px;padding:0 10px;font-size:clamp(10px,1vw,14px);letter-spacing:.06em; }
    .death-result-actions .death-replay { border-color:rgba(255,126,134,.42);background:linear-gradient(180deg,rgba(92,39,45,.94),rgba(47,22,27,.98)); }
    @media(max-width:700px){
      .death-result-panel{width:min(720px,94vw);padding:15px;}
      .death-result-actions{gap:6px;}
      .death-result-actions .main-menu-button{min-height:42px;font-size:9px;}
      .death-result-summary{margin:10px 0 12px;font-size:9px;line-height:1.5;}
      .death-run-info-overlay{grid-template-columns:minmax(138px,25vw) minmax(0,1fr) minmax(150px,25vw);gap:8px;padding:8px;}
      .death-run-side{padding:0;max-height:82vh;}
      .death-run-cards{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;}
      .death-run-cards .owned-card-chip{width:44px!important;height:44px!important;flex-basis:44px!important;}
      .death-run-stats .stat-row{min-height:24px;padding:3px 0;font-size:8px;}
    }



    /* ===== Legacy Fix86：统一UI——纯白边框 + 50%透明黑底 ===== */
    :root { --fix86-ui-bg: rgba(0,0,0,.50); --fix86-ui-border: rgba(255,255,255,1); }

    /* 全屏遮罩层只统一黑底，不额外画边框。 */
    .upgrade-overlay,
    .pause-overlay,
    .lan-overlay { background: var(--fix86-ui-bg) !important; }

    /* 主菜单 / 暂停 / 升级 / 联机主面板。 */
    .main-menu-shell:not(.selection-mode),
    .upgrade-side-panel,
    .upgrade-center-panel,
    .pause-panel,
    .pause-stats-panel,
    .pause-setting-group,
    .main-menu-setting-group,
    .lan-panel,
    .lan-card,
    .editor-visual-panel,
    .owned-card-floating-tooltip,
    .skill-hud-tooltip,
    .editor-attribute-tooltip,
    .death-result-center {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
    }

    /* 所有常规按钮 / 选择按钮 / 编辑器按钮。 */
    .main-menu-button,
    .selection-back-button,
    .pause-button,
    .pause-menu-button,
    .pause-menu-button.continue,
    .pause-menu-button.exit,
    .pause-menu-button.exit.confirming,
    .pause-toggle,
    .pause-toggle.on,
    .upgrade-action-button,
    .skip-button,
    .editor-tab,
    .editor-tab:hover,
    .editor-tab.active,
    .editor-mini-button,
    .editor-mini-button:hover,
    .editor-record,
    .editor-record:hover,
    .editor-record.active,
    .editor-visual-row button,
    .editor-visual-row button:hover {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
      color: #fff !important;
    }

    /* Fix96：输入框直接改原始样式。只保留底部状态线，不再叠加完整白框。 */
    .editor-field input,
    .editor-field select,
    .editor-field textarea,
    #editorForm.character-compact-form .editor-field input,
    #editorForm.character-compact-form .editor-field select,
    #editorForm.character-compact-form .editor-field textarea,
    .editor-visual-row input,
    .editor-visual-row select,
    .character-loadout select,
    .lan-field input,
    .lan-field select {
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: rgba(0,0,0,.50) !important;
      color: #fff !important;
      box-shadow: inset 0 -2px 0 rgba(158,158,158,.92) !important;
      transition: box-shadow .12s ease, background-color .12s ease !important;
    }
    .editor-field input:focus,
    .editor-field select:focus,
    .editor-field textarea:focus,
    #editorForm.character-compact-form .editor-field input:focus,
    #editorForm.character-compact-form .editor-field select:focus,
    #editorForm.character-compact-form .editor-field textarea:focus,
    .editor-visual-row input:focus,
    .editor-visual-row select:focus,
    .character-loadout select:focus,
    .lan-field input:focus,
    .lan-field select:focus {
      border: 0 !important;
      outline: 0 !important;
      background: rgba(0,0,0,.56) !important;
      box-shadow: inset 0 -3px 0 #3a86ff !important;
    }
    .editor-field textarea { resize:none !important; }

    /* 小型信息框 / 标签 / 数值行。 */
    .resource-chip,
    .stat-row,
    .character-stat,
    .lan-player-row,
    .lan-badge,
    .lan-wave-banner,
    .character-lock-icon,
    .editor-record .builtin-badge {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
      color: #fff !important;
    }

    /* 地图选择框。角色本身保持无框，避免把人物卡重新变成卡片。 */
    .map-card,
    .map-card.active {
      border-color: var(--fix86-ui-border) !important;
      background-color: var(--fix86-ui-bg) !important;
    }

    /* ===== 升级卡 / 道具卡：统一白框 + 半透明黑底 ===== */
    .upgrade-card,
    .upgrade-card.rarity-common,
    .upgrade-card.rarity-rare,
    .upgrade-card.rarity-epic,
    .upgrade-card.rarity-legendary,
    .upgrade-card.item-card-special,
    .upgrade-card.item-card-premium,
    .upgrade-card:hover,
    .upgrade-card:focus-visible,
    .upgrade-card.selected,
    .item-offer,
    .item-offer:hover,
    .item-offer:focus-visible {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
      color: #fff !important;
    }
    .upgrade-card::before {
      border-color: var(--fix86-ui-border) !important;
      opacity: 1 !important;
    }
    .upgrade-card .card-icon-zone,
    .upgrade-card .card-name-zone,
    .upgrade-card .card-desc-zone,
    .item-icon-zone,
    .item-name-line,
    .item-affix-zone {
      background: var(--fix86-ui-bg) !important;
      color: #fff !important;
      border-color: var(--fix86-ui-border) !important;
    }
    .card-icon,
    .card-level-badge,
    .card-key-hint,
    .item-price {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
      color: #fff !important;
    }
    .upgrade-card .card-max-preview,
    .upgrade-card .card-max-preview strong,
    .card-next-effect,
    .item-quality-name { color: #fff !important; }

    /* 已选卡牌HUD同样统一，但死亡结算中的纯图标保持 Fix84/85 的无框样式。 */
    .owned-card-hud .owned-card-chip {
      border: 1px solid var(--fix86-ui-border) !important;
      border-radius: 8px !important;
      background: var(--fix86-ui-bg) !important;
      box-shadow: none !important;
    }
    .owned-card-hud .owned-card-chip::before {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
    }
    .owned-card-art-wrap,
    .owned-card-level {
      border-color: var(--fix86-ui-border) !important;
      background-color: var(--fix86-ui-bg) !important;
    }
    .death-run-cards .owned-card-chip,
    .death-run-cards .owned-card-chip::before,
    .death-run-cards .owned-card-art-wrap {
      border: 0 !important;
      background: none !important;
      box-shadow: none !important;
    }

    /* 联机队伍HUD与血槽：保留功能色，只统一白框/半透明黑底。 */
    .lan-team-row,
    .lan-team-portrait-wrap,
    .lan-team-hp-track {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
    }

    /* 编辑器画布/预览也统一容器色；内容本身不加滤镜。 */
    .editor-visual-preview {
      border-color: var(--fix86-ui-border) !important;
      background: var(--fix86-ui-bg) !important;
    }

    /* 移除旧稀有度彩色外发光，避免和统一白框冲突。 */
    .upgrade-card,
    .upgrade-card.item-card-special,
    .upgrade-card.item-card-premium,
    .upgrade-card:hover,
    .upgrade-card:focus-visible,
    .upgrade-card.selected {
      box-shadow: 0 14px 34px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.08) !important;
    }

    /* ===== Fix87：死亡结算去背景框 / 红色失败标题 / 属性增减着色 ===== */
    .death-result-panel {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .death-result-title {
      color: #ff4f5e !important;
      text-shadow: 0 0 18px rgba(255,55,70,.18);
    }
    .death-run-stats .stat-row {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .death-run-stats .stat-row strong { color:#e9eef2 !important; }
    .death-run-stats .stat-row strong.death-stat-positive { color:#5ee57a !important; }
    .death-run-stats .stat-row strong.death-stat-negative { color:#ff5964 !important; }
  

    /* ===== Fix113：主菜单最终改用“选项.png”九宫格组件 ===== */
    :root {
      --option-9slice: url("../assets/extracted/asset-0001.png");
    }
    .main-menu-shell:not(.selection-mode) {
      border:0 !important;
      border-image:none !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      overflow:visible !important;
    }
    .main-menu-shell:not(.selection-mode)::before,
    .main-menu-shell:not(.selection-mode)::after { display:none !important; }

    .main-menu-kicker,
    .main-menu-subtitle { display:none !important; }
    .main-menu-title { margin:0 !important; }
    .main-menu-version {
      margin:clamp(7px,.9vh,11px) 0 clamp(24px,3.2vh,38px);
      color:#6dff79;
      text-align:center;
      font:900 clamp(8px,.72vw,11px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
      letter-spacing:.14em;
      text-shadow:0 0 9px rgba(85,255,102,.25);
    }
    .main-menu-background::before {
      content:'';position:absolute;inset:0;z-index:20;
      background:rgba(0,0,0,.90);pointer-events:none;
    }
    .hint { display:none !important; }
    .performance-hud {
      position:absolute;z-index:500;
      right:max(10px,env(safe-area-inset-right));
      bottom:max(8px,env(safe-area-inset-bottom));
      color:rgba(255,255,255,.72);
      font:700 clamp(8px,.72vw,11px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
      letter-spacing:.045em;text-align:right;white-space:nowrap;
      pointer-events:none;user-select:none;text-shadow:0 1px 2px #000;
    }

    /* 通用选项九宫格组件：源图有效区域 114×113；保留左右和上下装饰，只拉伸中心。 */
    .ui-option-9slice {
      border-style:solid !important;
      border-color:transparent !important;
      border-width:16px 20px 20px 20px !important;
      border-image-source:var(--option-9slice) !important;
      border-image-slice:24 24 31 24 fill !important;
      border-image-width:16px 20px 20px 20px !important;
      border-image-outset:0 !important;
      border-image-repeat:stretch !important;
      background:transparent !important;
      border-radius:0 !important;
      box-shadow:none !important;
      image-rendering:auto;
    }

    .main-menu-home .main-menu-actions {
      width:min(760px,86vw) !important;
      margin-inline:auto !important;
      display:grid !important;
      grid-template-columns:minmax(0,1fr) !important;
      gap:clamp(8px,1.1vh,13px) !important;
      perspective:none !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit {
      box-sizing:border-box !important;
      position:relative !important;
      isolation:isolate !important;
      width:100% !important;
      min-height:clamp(62px,7.6vh,80px) !important;
      padding:0 clamp(28px,4vw,58px) !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      
      touch-action:manipulation !important;
      -webkit-tap-highlight-color:transparent !important;
      user-select:none !important;
      color:#fff !important;
      font:950 clamp(17px,1.45vw,23px)/1 "Microsoft YaHei",Inter,sans-serif !important;
      letter-spacing:.08em !important;
      text-align:center !important;
      text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000 !important;
      transform:none !important;
      filter:none !important;
      transition:filter .11s ease,transform .08s ease !important;
      border-style:solid !important;
      border-color:transparent !important;
      border-width:16px 20px 20px 20px !important;
      border-image-source:var(--option-9slice) !important;
      border-image-slice:24 24 31 24 fill !important;
      border-image-width:16px 20px 20px 20px !important;
      border-image-outset:0 !important;
      border-image-repeat:stretch !important;
      background:transparent !important;
      border-radius:0 !important;
      box-shadow:none !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button::before,
    .main-menu-home .main-menu-actions .main-menu-button::after {
      content:none !important;display:none !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button .menu-mini-tag { display:none !important; }
    .main-menu-home .main-menu-actions .main-menu-button > span:not(.menu-mini-tag) {
      position:relative !important;z-index:3 !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible {
      outline:none !important;transform:none !important;
      filter:brightness(1.18) contrast(1.06) drop-shadow(0 0 8px rgba(255,255,255,.12)) !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:active {
      transform:translateY(3px) scale(.978) !important;
      filter:brightness(.93) contrast(1.03) !important;
    }
    @media(max-width:760px) {
      .main-menu-home .main-menu-actions { width:min(500px,92vw) !important;gap:7px !important; }
      .main-menu-home .main-menu-actions .main-menu-button,
      .main-menu-home .main-menu-actions .main-menu-button.primary,
      .main-menu-home .main-menu-actions .main-menu-button.exit {
        min-height:58px !important;font-size:17px !important;padding-inline:20px !important;
        border-width:13px 16px 17px 16px !important;
        border-image-width:13px 16px 17px 16px !important;
      }
    }

    /* Fix97：编辑器左侧项目列统一使用「UI_部位标题底」九宫格。 */
    .editor-record-list {
      gap: 4px !important;
      padding-right: 3px !important;
    }
    .editor-record,
    .editor-record:hover,
    .editor-record.active {
      position: relative !important;
      min-height: 38px !important;
      padding: 7px 16px 9px 16px !important;
      border-style: solid !important;
      border-color: transparent !important;
      border-width: 4px 8px 6px 4px !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #fff !important;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      border-image-source: url("../assets/extracted/asset-0002.png") !important;
      /* 10x8 源图：右下阶梯占右4/下3，必须整块保留，不能进入拉伸区。 */
      border-image-slice: 2 4 3 2 fill !important;
      border-image-width: 4px 8px 6px 4px !important;
      border-image-outset: 0 !important;
      border-image-repeat: stretch !important;
      transition: filter .10s ease, transform .08s ease !important;
    }
    .editor-record:hover {
      filter: brightness(1.13) !important;
    }
    .editor-record.active {
      filter: brightness(1.24) !important;
    }
    .editor-record:active {
      transform: translateY(1px) !important;
      filter: brightness(1.06) !important;
    }
    .editor-record small {
      color: rgba(255,255,255,.68) !important;
      opacity: 1 !important;
    }
    .editor-record .builtin-badge {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      color: rgba(255,255,255,.62) !important;
    }

  

    /* ===== Fix108: card/item icon frame + tray using user-provided assets ===== */
    .owned-card-hud{gap:8px!important;padding:2px 2px 6px!important;}
    .owned-card-chip{
      position:relative!important;
      width:66px!important;height:66px!important;flex:0 0 66px!important;
      padding:0!important;border:0!important;border-radius:0!important;
      background:none!important;box-shadow:none!important;overflow:visible!important;
      isolation:isolate;
    }
    .owned-card-chip::before{content:none!important;display:none!important;}
    .owned-card-art-wrap{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      display:block!important;background:none!important;border:0!important;border-radius:0!important;
      overflow:visible!important;z-index:2;
    }
    .owned-card-ui-tray,.owned-card-ui-frame{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      display:block;pointer-events:none;user-select:none;
    }
    .owned-card-ui-tray{z-index:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.32));}
    .owned-card-ui-frame{z-index:3;}
    .owned-card-art-mask{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      z-index:2;overflow:hidden;pointer-events:none;
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-position:center;mask-position:center;
      -webkit-mask-size:100% 100%;mask-size:100% 100%;
    }
    .owned-card-art{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:122%;height:122%;object-fit:contain;display:block;
    }
    .owned-card-fallback{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      color:#fff;font:900 19px/1 Microsoft YaHei,sans-serif;
      text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 0 6px rgba(0,0,0,.75);
      white-space:nowrap;
    }
    .owned-card-chip.card-chip .owned-card-ui-tray{width:58px;height:64px;}
    .owned-card-chip.card-chip .owned-card-ui-frame{width:64px;height:64px;}
    .owned-card-chip.card-chip .owned-card-art-mask{width:56px;height:62px;}
    .owned-card-chip.item-chip .owned-card-ui-tray{width:58px;height:58px;}
    .owned-card-chip.item-chip .owned-card-ui-frame{width:62px;height:68px;top:50%;}
    .owned-card-chip.item-chip .owned-card-art-mask{width:56px;height:56px;}
    .owned-card-chip.item-chip .owned-card-art{width:118%;height:118%;}
    .owned-card-level{
      position:absolute!important;right:4px!important;bottom:3px!important;left:auto!important;
      z-index:4;min-width:0!important;padding:0!important;border-radius:0!important;border:0!important;
      background:none!important;color:#fff!important;
      font:900 11px/1.05 Georgia,serif!important;text-align:right;
      text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 0 6px rgba(0,0,0,.92)!important;
      box-shadow:none!important;
    }
    .death-run-cards .owned-card-chip,
    .death-run-cards .owned-card-chip::before,
    .death-run-cards .owned-card-art-wrap{background:none!important;border:0!important;box-shadow:none!important;}
    @media(max-width:760px){
      .owned-card-chip{width:52px!important;height:52px!important;flex-basis:52px!important;}
      .owned-card-chip.card-chip .owned-card-ui-tray{width:46px;height:51px;}
      .owned-card-chip.card-chip .owned-card-ui-frame{width:50px;height:50px;}
      .owned-card-chip.card-chip .owned-card-art-mask{width:44px;height:49px;}
      .owned-card-chip.item-chip .owned-card-ui-tray{width:46px;height:46px;}
      .owned-card-chip.item-chip .owned-card-ui-frame{width:50px;height:54px;}
      .owned-card-chip.item-chip .owned-card-art-mask{width:44px;height:44px;}
      .owned-card-level{font-size:9px!important;right:3px!important;bottom:2px!important;}
    }

  

    /* ===== Fix110: remove old rounded outer frame, add rarity glow, fill art to tray solid-area mask ===== */
    .owned-card-chip,
    .owned-card-hud .owned-card-chip,
    .death-run-cards .owned-card-chip {
      border:0 !important;
      border-radius:0 !important;
      background:none !important;
      box-shadow:none !important;
      outline:none !important;
      overflow:visible !important;
    }
    .owned-card-chip::before,
    .owned-card-hud .owned-card-chip::before,
    .death-run-cards .owned-card-chip::before {
      content:none !important;
      display:none !important;
      border:0 !important;
      background:none !important;
      box-shadow:none !important;
    }
    .owned-card-chip .owned-card-art-wrap,
    .owned-card-hud .owned-card-art-wrap,
    .death-run-cards .owned-card-art-wrap,
    .owned-card-chip .owned-card-level {
      border:0 !important;
      border-radius:0 !important;
      background:none !important;
      box-shadow:none !important;
      outline:none !important;
    }
    .owned-card-chip{--icon-glow:rgba(255,255,255,.92);}
    .owned-card-chip.rarity-common{--icon-glow:rgba(255,255,255,.92);}
    .owned-card-chip.rarity-rare{--icon-glow:rgba(54,188,231,.95);}
    .owned-card-chip.rarity-epic{--icon-glow:rgba(154,88,211,.95);}
    .owned-card-chip.rarity-legendary{--icon-glow:rgba(231,173,56,.98);}
    .owned-card-ui-frame{
      filter:
        drop-shadow(0 0 3px rgba(255,255,255,.65))
        drop-shadow(0 0 8px var(--icon-glow))
        drop-shadow(0 0 14px color-mix(in srgb, var(--icon-glow) 70%, transparent));
    }
    .owned-card-ui-tray{
      filter:drop-shadow(0 4px 6px rgba(0,0,0,.28));
    }
    .owned-card-chip.card-chip .owned-card-art-mask{
      width:58px !important;
      height:64px !important;
    }
    .owned-card-chip.item-chip .owned-card-art-mask{
      width:58px !important;
      height:58px !important;
    }
    .owned-card-chip .owned-card-art-mask{
      left:50% !important;
      top:50% !important;
      transform:translate(-50%,-50%) !important;
      overflow:hidden !important;
      -webkit-mask-repeat:no-repeat !important;
      mask-repeat:no-repeat !important;
      -webkit-mask-position:center !important;
      mask-position:center !important;
      -webkit-mask-size:100% 100% !important;
      mask-size:100% 100% !important;
    }
    .owned-card-chip .owned-card-art{
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center center !important;
      transform:none !important;
      left:0 !important;
      top:0 !important;
    }
    .owned-card-chip .owned-card-fallback{
      left:50% !important;
      top:50% !important;
      transform:translate(-50%,-50%) !important;
      width:100% !important;
      text-align:center;
    }
    @media(max-width:760px){
      .owned-card-chip.card-chip .owned-card-art-mask{width:46px !important;height:51px !important;}
      .owned-card-chip.item-chip .owned-card-art-mask{width:46px !important;height:46px !important;}
      .owned-card-ui-frame{
        filter:
          drop-shadow(0 0 2px rgba(255,255,255,.6))
          drop-shadow(0 0 6px var(--icon-glow))
          drop-shadow(0 0 10px color-mix(in srgb, var(--icon-glow) 70%, transparent));
      }
    }

  

    /* ===== Fix111: correct card/item tray mapping; glow belongs to tray silhouette only ===== */
    .owned-card-ui-frame{
      filter:none !important;
    }
    .owned-card-ui-tray{
      filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        drop-shadow(0 0 3px rgba(255,255,255,.55))
        drop-shadow(0 0 7px var(--icon-glow))
        drop-shadow(0 0 12px color-mix(in srgb, var(--icon-glow) 68%, transparent)) !important;
    }
    .owned-card-chip.card-chip .owned-card-ui-tray,
    .owned-card-chip.card-chip .owned-card-art-mask{
      width:58px !important;
      height:58px !important;
    }
    .owned-card-chip.card-chip .owned-card-ui-frame{
      width:64px !important;
      height:64px !important;
    }
    .owned-card-chip.item-chip .owned-card-ui-tray,
    .owned-card-chip.item-chip .owned-card-art-mask{
      width:58px !important;
      height:64px !important;
    }
    .owned-card-chip.item-chip .owned-card-ui-frame{
      width:62px !important;
      height:68px !important;
    }
    @media(max-width:760px){
      .owned-card-chip.card-chip .owned-card-ui-tray,
      .owned-card-chip.card-chip .owned-card-art-mask{width:46px !important;height:46px !important;}
      .owned-card-chip.card-chip .owned-card-ui-frame{width:50px !important;height:50px !important;}
      .owned-card-chip.item-chip .owned-card-ui-tray,
      .owned-card-chip.item-chip .owned-card-art-mask{width:46px !important;height:51px !important;}
      .owned-card-chip.item-chip .owned-card-ui-frame{width:50px !important;height:54px !important;}
    }

  

    /* ===== Fix112: full-width single-row card strip; no mask/overflow glow clipping ===== */
    .owned-card-hud{
      left:max(14px,env(safe-area-inset-left)) !important;
      right:max(14px,env(safe-area-inset-right)) !important;
      top:max(14px,env(safe-area-inset-top)) !important;
      width:auto !important;
      max-width:none !important;
      min-height:82px !important;
      display:flex !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      align-content:center !important;
      justify-content:flex-start !important;
      gap:8px !important;
      padding:8px 16px 10px !important;
      overflow:visible !important;
      scrollbar-width:none !important;
      overscroll-behavior:none !important;
      pointer-events:none !important;
      touch-action:none !important;
      z-index:34 !important;
    }
    .owned-card-hud::-webkit-scrollbar{display:none!important;}
    .owned-card-hud > .owned-card-chip{
      flex:0 0 66px !important;
      transform:translate3d(var(--owned-card-strip-x,0px),0,0) !important;
      transition:none !important;
      pointer-events:auto !important;
      touch-action:none !important;
      will-change:transform;
    }
    .owned-card-chip .owned-card-art-wrap,
    .owned-card-chip .owned-card-art-mask{
      -webkit-mask-image:none !important;
      mask-image:none !important;
      -webkit-mask:none !important;
      mask:none !important;
      overflow:visible !important;
      clip-path:none !important;
    }
    .owned-card-chip .owned-card-art{
      overflow:visible !important;
      object-fit:cover !important;
    }
    /* Glow remains on the tray silhouette; no parent clipping. */
    .owned-card-ui-tray{
      filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        drop-shadow(0 0 3px rgba(255,255,255,.55))
        drop-shadow(0 0 7px var(--icon-glow))
        drop-shadow(0 0 12px color-mix(in srgb,var(--icon-glow) 68%,transparent)) !important;
    }
    .owned-card-ui-frame{filter:none!important;}
    @media(max-width:760px){
      .owned-card-hud{
        left:max(10px,env(safe-area-inset-left)) !important;
        right:max(10px,env(safe-area-inset-right)) !important;
        top:max(10px,env(safe-area-inset-top)) !important;
        min-height:68px !important;
        gap:6px !important;
        padding:7px 12px 9px !important;
      }
      .owned-card-hud > .owned-card-chip{flex-basis:52px !important;}
    }

  

    /* ===== Fix114：顶部序列不裁切发光；图标本身恢复托盘实色 Alpha 蒙版 ===== */
    .owned-card-hud{
      overflow:visible !important;
    }
    .owned-card-chip .owned-card-art-wrap,
    .owned-card-chip .owned-card-art-mask{
      overflow:hidden !important;
      clip-path:none !important;
      -webkit-mask-repeat:no-repeat !important;
      mask-repeat:no-repeat !important;
      -webkit-mask-position:center !important;
      mask-position:center !important;
      -webkit-mask-size:100% 100% !important;
      mask-size:100% 100% !important;
      -webkit-mask-mode:alpha;
      mask-mode:alpha;
    }
    .owned-card-chip .owned-card-art{
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center !important;
      left:0 !important;
      top:0 !important;
      transform:none !important;
    }
    /* 发光仍只挂在托盘轮廓上；外框不发光。 */
    .owned-card-ui-frame{filter:none !important;}
    .owned-card-ui-tray{
      filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        drop-shadow(0 0 3px rgba(255,255,255,.55))
        drop-shadow(0 0 7px var(--icon-glow))
        drop-shadow(0 0 12px color-mix(in srgb,var(--icon-glow) 68%,transparent)) !important;
    }

  

    /* ===== Fix116：主菜单白模九宫格使用叠加染色；卡牌图标强制托盘Alpha蒙版 ===== */
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit {
      box-sizing:border-box !important;
      position:relative !important;
      isolation:isolate !important;
      overflow:visible !important;
      border-style:solid !important;
      border-color:transparent !important;
      border-width:16px 20px 20px 20px !important;
      border-image-source:var(--option-9slice) !important;
      border-image-slice:24 24 31 24 fill !important;
      border-image-width:16px 20px 20px 20px !important;
      border-image-outset:0 !important;
      border-image-repeat:stretch !important;
      background:transparent !important;
      border-radius:0 !important;
      box-shadow:none !important;
      filter:none !important;
      --option-tint:rgba(24,92,120,.86);
      --option-glow:rgba(30,144,190,.18);
    }
    .main-menu-home .main-menu-actions .main-menu-button::before {
      content:none !important;
      display:none !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button::after {
      content:'' !important;
      display:block !important;
      position:absolute !important;
      left:-20px !important;
      right:-20px !important;
      top:-16px !important;
      bottom:-20px !important;
      z-index:1 !important;
      pointer-events:none !important;
      background:var(--option-tint) !important;
      mix-blend-mode:color !important;
      opacity:.96 !important;
      -webkit-mask-box-image-source:var(--option-9slice) !important;
      -webkit-mask-box-image-slice:24 24 31 24 fill !important;
      -webkit-mask-box-image-width:16px 20px 20px 20px !important;
      -webkit-mask-box-image-outset:0 !important;
      -webkit-mask-box-image-repeat:stretch !important;
      mask-image:var(--option-9slice) !important;
      mask-repeat:no-repeat !important;
      mask-position:center !important;
      mask-size:100% 100% !important;
      filter:drop-shadow(0 0 8px var(--option-glow)) !important;
      transition:background-color .11s ease,filter .11s ease,transform .08s ease !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button .menu-mini-tag { display:none !important; }
    .main-menu-home .main-menu-actions .main-menu-button > span:not(.menu-mini-tag) {
      position:relative !important;
      z-index:3 !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible {
      outline:none !important;
      transform:none !important;
      filter:none !important;
      --option-tint:rgba(0,173,255,.98);
      --option-glow:rgba(0,174,255,.42);
    }
    .main-menu-home .main-menu-actions .main-menu-button:active {
      transform:translateY(3px) scale(.978) !important;
      filter:none !important;
      --option-tint:rgba(0,112,205,.96);
      --option-glow:rgba(0,105,210,.24);
    }
    .main-menu-home .main-menu-actions .main-menu-button:active::after {
      transform:translateY(1px) scale(.992) !important;
    }

    /* 顶部卡牌序列本身不裁切发光；只有图标内容按托盘实色Alpha裁切。 */
    .owned-card-hud { overflow:visible !important; }
    .owned-card-chip .owned-card-art-wrap,
    .owned-card-chip .owned-card-art-mask {
      overflow:hidden !important;
      clip-path:none !important;
      -webkit-mask:var(--tray-mask) center / 100% 100% no-repeat !important;
      mask:var(--tray-mask) center / 100% 100% no-repeat !important;
    }
    .owned-card-chip .owned-card-art {
      width:100% !important;
      height:100% !important;
      left:0 !important;
      top:0 !important;
      transform:none !important;
      object-fit:cover !important;
      object-position:center !important;
    }
    .owned-card-ui-frame { filter:none !important; }
    .owned-card-ui-tray {
      filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        drop-shadow(0 0 3px rgba(255,255,255,.55))
        drop-shadow(0 0 7px var(--icon-glow))
        drop-shadow(0 0 12px color-mix(in srgb,var(--icon-glow) 68%,transparent)) !important;
    }
    @media(max-width:760px){
      .main-menu-home .main-menu-actions .main-menu-button,
      .main-menu-home .main-menu-actions .main-menu-button.primary,
      .main-menu-home .main-menu-actions .main-menu-button.exit {
        border-width:13px 16px 17px 16px !important;
        border-image-width:13px 16px 17px 16px !important;
      }
      .main-menu-home .main-menu-actions .main-menu-button::after {
        left:-16px !important;right:-16px !important;top:-13px !important;bottom:-17px !important;
        -webkit-mask-box-image-width:13px 16px 17px 16px !important;
      }
    }

  
    /* Fix117: larger card level/item count text */
    .owned-card-level{font-size:14px!important;line-height:1!important;right:3px!important;bottom:2px!important;}
    @media(max-width:760px){.owned-card-level{font-size:11px!important;}}

  

    /* ===== Fix125: user card white-model + overlay rarity tint; lightweight top-icon glow ===== */
    :root{--fix125-card-shell:var(--v24-card-shell);--fix126-card-art-mask:var(--v24-card-shell);}

    /* Upgrade / item selection card is rebuilt from the supplied card white-model. */
    .upgrade-card,
    .upgrade-card.rarity-common,
    .upgrade-card.rarity-rare,
    .upgrade-card.rarity-epic,
    .upgrade-card.rarity-legendary,
    .upgrade-card.item-card-special,
    .upgrade-card.item-card-premium,
    .upgrade-card:hover,
    .upgrade-card:focus-visible,
    .upgrade-card.selected{
      --card-quality-tint:#e9edf2;
      position:relative!important;
      width:clamp(105px,20.2vh,212px)!important;
      height:clamp(300px,58vh,610px)!important;
      aspect-ratio:278/799!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
      isolation:isolate!important;
      color:#fff!important;
    }
    .upgrade-card.rarity-common{--card-quality-tint:#e7ebef;}
    .upgrade-card.rarity-rare{--card-quality-tint:#36bce7;}
    .upgrade-card.rarity-epic{--card-quality-tint:#a45be5;}
    .upgrade-card.rarity-legendary{--card-quality-tint:#ffc447;}
    .upgrade-card.item-card-special{--card-quality-tint:#a45be5;}
    .upgrade-card.item-card-premium{--card-quality-tint:#ffc447;}
    .upgrade-card::before{content:none!important;display:none!important;}
    .card-shell-base,
    .card-shell-tint{
      position:absolute;inset:0;pointer-events:none;z-index:0;
      background-image:var(--v24-card-shell, var(--fix125-card-shell));
      background-position:center;background-repeat:no-repeat;background-size:100% 100%;
    }
    .card-shell-tint{
      z-index:1;
      background-image:none;
      background-color:var(--card-quality-tint);
      mix-blend-mode:color;
      opacity:.94;
      -webkit-mask-image:var(--v24-card-shell, var(--fix125-card-shell));mask-image:var(--v24-card-shell, var(--fix125-card-shell));
      -webkit-mask-position:center;mask-position:center;
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-size:100% 100%;mask-size:100% 100%;
    }
    .upgrade-card > .card-key-hint,
    .upgrade-card > .card-icon-zone,
    .upgrade-card > .card-name-zone,
    .upgrade-card > .card-desc-zone{z-index:3!important;}
    .upgrade-card .card-icon-zone{
      position:absolute!important;left:6%!important;right:6%!important;top:2.2%!important;
      width:auto!important;height:23.5%!important;min-height:0!important;
      display:grid!important;place-items:center!important;
      padding:0!important;border:0!important;border-radius:0!important;
      background:transparent!important;overflow:visible!important;
    }
    .upgrade-card .card-icon-zone::before,
    .upgrade-card .card-icon-zone::after{content:none!important;display:none!important;}
    .upgrade-card .card-icon{
      width:72%!important;height:76%!important;max-width:none!important;max-height:none!important;
      border:0!important;border-radius:0!important;background:transparent!important;
      box-shadow:none!important;overflow:visible!important;
    }
    .upgrade-card .card-icon.card-icon-image-wrap{
      width:76%!important;height:80%!important;max-width:none!important;max-height:none!important;
      padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
      overflow:visible!important;
    }
    .upgrade-card .card-icon-image-asset,
    .upgrade-card .card-icon.card-icon-image-wrap .card-icon-image-asset{
      width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
      object-fit:contain!important;object-position:center!important;
    }
    .upgrade-card .card-level-badge{
      top:3%!important;right:5%!important;z-index:5!important;
      border:0!important;border-radius:0!important;background:rgba(0,0,0,.58)!important;
      color:#fff!important;box-shadow:none!important;
      font-size:clamp(7px,.68vw,11px)!important;
    }
    .upgrade-card .card-name-zone{
      position:absolute!important;left:7%!important;right:7%!important;top:25.7%!important;
      width:auto!important;height:8.2%!important;min-height:0!important;
      display:flex!important;align-items:center!important;justify-content:center!important;
      padding:0 5%!important;border:0!important;border-radius:0!important;
      background:transparent!important;color:#fff!important;
      font-size:clamp(11px,1.05vw,18px)!important;font-weight:950!important;
      text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 2px 6px rgba(0,0,0,.72)!important;
    }
    .upgrade-card .card-desc-zone{
      position:absolute!important;left:7%!important;right:7%!important;top:35.2%!important;bottom:4.5%!important;
      width:auto!important;height:auto!important;min-height:0!important;
      display:flex!important;flex-direction:column!important;
      padding:5.5% 5.5% 4.5%!important;gap:4%!important;
      border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important;
      overflow:hidden!important;
    }
    .upgrade-card .card-next-effect{
      flex:1 1 auto!important;min-height:0!important;overflow:auto!important;
      color:#f4f6f8!important;font-size:clamp(8px,.78vw,13px)!important;line-height:1.5!important;
      text-shadow:0 1px 2px rgba(0,0,0,.9)!important;
      scrollbar-width:none;
    }
    .upgrade-card .card-next-effect::-webkit-scrollbar{display:none;}
    .upgrade-card .card-max-preview{
      flex:0 0 22%!important;min-height:0!important;margin:0!important;padding:3% 0 0!important;
      border:0!important;background:transparent!important;color:#e9eef2!important;
      font-size:clamp(7px,.66vw,11px)!important;line-height:1.35!important;overflow:hidden!important;
      text-shadow:0 1px 2px rgba(0,0,0,.92)!important;
    }
    .upgrade-card .card-max-preview strong{color:#fff!important;}
    .upgrade-card .card-key-hint{
      left:50%!important;top:-3px!important;transform:translate(-50%,calc(-100% - 5px))!important;
      border:1px solid rgba(255,255,255,.72)!important;background:rgba(0,0,0,.72)!important;
      color:#fff!important;box-shadow:none!important;
    }
    .upgrade-card:hover,
    .upgrade-card:focus-visible{filter:brightness(1.07) saturate(1.06)!important;}
    .upgrade-card.selected{filter:brightness(1.12) saturate(1.08)!important;}

    /* Top selected-card/item HUD: single cheap glow; art shrinks to 80% of current visual size. */
    .owned-card-ui-frame{filter:none!important;}
    .owned-card-ui-tray{
      filter:drop-shadow(0 0 5px var(--icon-glow))!important;
    }
    .owned-card-chip .owned-card-art{
      width:80%!important;height:80%!important;
      left:10%!important;top:10%!important;
      transform:none!important;
      object-fit:contain!important;object-position:center!important;
    }
    .owned-card-chip .owned-card-art.low-pixel-asset{image-rendering:pixelated!important;}

    @media(max-height:620px){
      .upgrade-card,
      .upgrade-card-row[data-count="4"] .upgrade-card,
      .upgrade-card-row[data-count="5"] .upgrade-card{
        width:min(19.5vh,112px)!important;height:min(56vh,322px)!important;
      }
      .upgrade-card .card-name-zone{font-size:8px!important;}
      .upgrade-card .card-next-effect{font-size:6.5px!important;line-height:1.28!important;}
      .upgrade-card .card-max-preview{font-size:5.7px!important;}
    }

  


    /* ===== Card skin v2: supplied 339x948 card + exact supplied region guide ===== */
    .upgrade-card,
    .upgrade-card.rarity-common,
    .upgrade-card.rarity-rare,
    .upgrade-card.rarity-epic,
    .upgrade-card.rarity-legendary,
    .upgrade-card.item-card-special,
    .upgrade-card.item-card-premium{
      --card-quality-glow:#f2f4f7;
      width:clamp(107px,20.74vh,215px)!important;
      height:auto!important;
      aspect-ratio:339/948!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
      isolation:isolate!important;
      color:#fff!important;
    }
    .upgrade-card.rarity-common{--card-quality-glow:#f2f4f7;}
    .upgrade-card.rarity-rare{--card-quality-glow:#36bce7;}
    .upgrade-card.rarity-epic{--card-quality-glow:#b66cff;}
    .upgrade-card.rarity-legendary{--card-quality-glow:#ffd25a;}
    .upgrade-card.item-card-special{--card-quality-glow:#b66cff;}
    .upgrade-card.item-card-premium{--card-quality-glow:#ffd25a;}

    /* The supplied grayscale card stays visually intact. Rarity remains in glow/title treatment. */
    .upgrade-card .card-shell-base{
      background-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      background-size:100% 100%!important;
      background-position:center!important;
      background-repeat:no-repeat!important;
    }
    .upgrade-card .card-shell-tint{
      display:none!important;
    }

    /* RED guide region: icon/art. */
    .upgrade-card .card-icon-zone{
      position:absolute!important;
      left:12.979351%!important;
      right:12.389381%!important;
      top:8.333333%!important;
      width:auto!important;
      height:18.670886%!important;
      min-height:0!important;
      padding:0!important;
      border:0!important;
      background:transparent!important;
      overflow:hidden!important;
      display:block!important;
      -webkit-mask-image:none!important;
      mask-image:none!important;
      clip-path:inset(0 round 13% 13% 4% 4%)!important;
    }
    .upgrade-card .card-icon,
    .upgrade-card .card-icon.card-icon-image-wrap{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
      max-width:none!important;
      max-height:none!important;
      padding:0!important;
      margin:0!important;
      border:0!important;
      background:transparent!important;
      overflow:hidden!important;
      display:block!important;
    }
    .upgrade-card .card-icon-image-asset,
    .upgrade-card .card-icon.card-icon-image-wrap .card-icon-image-asset{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
      max-width:none!important;
      max-height:none!important;
      object-fit:cover!important;
      object-position:center!important;
    }
    .upgrade-card .card-icon:not(.card-icon-image-wrap){
      display:grid!important;
      place-items:center!important;
      font-size:clamp(24px,4vh,44px)!important;
    }

    /* Top dome remains available for card type + level metadata. */
    .upgrade-card > .card-type-label,
    .upgrade-card > .card-level-badge{
      top:3.55%!important;
    }
    .upgrade-card > .card-type-label{left:13.2%!important;}
    .upgrade-card > .card-level-badge{right:13.2%!important;}

    /* GREEN guide region: title. */
    .upgrade-card .card-name-zone{
      position:absolute!important;
      left:3.834808%!important;
      right:3.834808%!important;
      top:27.953586%!important;
      height:9.071730%!important;
      min-height:0!important;
      width:auto!important;
      padding:0 8%!important;
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      overflow:hidden!important;
      border:0!important;
      border-radius:999px!important;
      background:transparent!important;
      font-size:clamp(12px,1.12vw,19px)!important;
      line-height:1.1!important;
    }

    /* BLUE + MAGENTA guide regions: current effect and total/max preview. */
    .upgrade-card .card-desc-zone{
      position:absolute!important;
      left:10.029499%!important;
      right:9.439528%!important;
      top:37.025316%!important;
      bottom:8.544304%!important;
      width:auto!important;
      height:auto!important;
      min-height:0!important;
      padding:0!important;
      gap:0!important;
      border:0!important;
      background:transparent!important;
      display:block!important;
      overflow:visible!important;
    }
    .upgrade-card .card-next-effect{
      position:absolute!important;
      left:0!important;
      right:0!important;
      top:0.000000%!important;
      height:65.697674%!important;
      padding:6.0% 6.5%!important;
      overflow:auto!important;
      color:#f5f7fa!important;
      font-size:clamp(8px,.80vw,13px)!important;
      line-height:1.48!important;
      text-align:left!important;
      scrollbar-width:none!important;
    }
    .upgrade-card .card-next-effect::-webkit-scrollbar{display:none!important;}
    .upgrade-card .card-max-preview{
      display:block!important;
      position:absolute!important;
      left:0!important;
      right:0!important;
      top:65.891473%!important;
      height:34.108527%!important;
      margin:0!important;
      padding:6.0% 6.5% 5.0%!important;
      overflow:auto!important;
      border:0!important;
      background:transparent!important;
      color:#f4f6f8!important;
      font-size:clamp(7px,.70vw,11.5px)!important;
      line-height:1.42!important;
      text-align:left!important;
      scrollbar-width:none!important;
    }
    .upgrade-card .card-max-preview::-webkit-scrollbar{display:none!important;}
    .upgrade-card.item-card .card-max-preview{display:block!important;}

    .upgrade-card:hover,
    .upgrade-card:focus-visible{
      filter:brightness(1.055) saturate(1.03)!important;
    }
    .upgrade-card.selected{
      filter:brightness(1.10) saturate(1.05)!important;
    }

    @media(max-height:620px){
      .upgrade-card,
      .upgrade-card-row[data-count="4"] .upgrade-card,
      .upgrade-card-row[data-count="5"] .upgrade-card{
        width:min(19.95vh,114px)!important;
        height:auto!important;
        aspect-ratio:339/948!important;
      }
      .upgrade-card .card-name-zone{font-size:8px!important;}
      .upgrade-card .card-next-effect{font-size:6.4px!important;line-height:1.28!important;}
      .upgrade-card .card-max-preview{font-size:5.7px!important;line-height:1.22!important;}
    }


    /* ===== Fix127: shrink the ENTIRE top card/item icon UI to 80%, not just the art ===== */
    .owned-card-hud{
      gap:6.4px !important;
      min-height:68px !important;
      padding:6px 12px 8px !important;
    }
    .owned-card-hud > .owned-card-chip,
    .owned-card-chip{
      width:53px !important;
      height:53px !important;
      flex:0 0 53px !important;
    }
    /* Card/skill icon: tray + mask + outer frame all scale together. */
    .owned-card-chip.card-chip .owned-card-ui-tray,
    .owned-card-chip.card-chip .owned-card-art-mask{
      width:46.4px !important;
      height:46.4px !important;
    }
    .owned-card-chip.card-chip .owned-card-ui-frame{
      width:51.2px !important;
      height:51.2px !important;
    }
    /* Item icon: preserve its taller shield proportions while scaling the entire component. */
    .owned-card-chip.item-chip .owned-card-ui-tray,
    .owned-card-chip.item-chip .owned-card-art-mask{
      width:46.4px !important;
      height:51.2px !important;
    }
    .owned-card-chip.item-chip .owned-card-ui-frame{
      width:49.6px !important;
      height:54.4px !important;
    }
    /* Restore the art to full tray fill. The 80% reduction is now on the whole UI component. */
    .owned-card-chip .owned-card-art,
    .owned-card-chip.item-chip .owned-card-art{
      width:100% !important;
      height:100% !important;
      left:0 !important;
      top:0 !important;
      transform:none !important;
      object-fit:cover !important;
      object-position:center !important;
    }
    .owned-card-level{
      font-size:11.2px !important;
      right:2.4px !important;
      bottom:1.6px !important;
      line-height:1 !important;
    }
    /* Keep the cheap one-pass tray glow. */
    .owned-card-ui-frame{filter:none !important;}
    .owned-card-ui-tray{filter:drop-shadow(0 0 4px var(--icon-glow)) !important;}

    @media(max-width:760px){
      .owned-card-hud{
        min-height:55px !important;
        gap:5px !important;
        padding:5px 8px 6px !important;
      }
      .owned-card-hud > .owned-card-chip,
      .owned-card-chip{
        width:42px !important;
        height:42px !important;
        flex:0 0 42px !important;
      }
      .owned-card-chip.card-chip .owned-card-ui-tray,
      .owned-card-chip.card-chip .owned-card-art-mask{
        width:36.8px !important;
        height:36.8px !important;
      }
      .owned-card-chip.card-chip .owned-card-ui-frame{
        width:40px !important;
        height:40px !important;
      }
      .owned-card-chip.item-chip .owned-card-ui-tray,
      .owned-card-chip.item-chip .owned-card-art-mask{
        width:36.8px !important;
        height:40.8px !important;
      }
      .owned-card-chip.item-chip .owned-card-ui-frame{
        width:40px !important;
        height:43.2px !important;
      }
      .owned-card-level{
        font-size:8.8px !important;
        right:2px !important;
        bottom:1px !important;
      }
      .owned-card-ui-tray{filter:drop-shadow(0 0 3px var(--icon-glow)) !important;}
    }

  

    /* ===== Fix128: card image fit / current-shell selection FX / shield-era tuning ===== */
    /* Large upgrade-card art: show the whole source image, preserve aspect ratio, never stretch/crop. */
    .upgrade-card .card-icon-image-asset,
    .upgrade-card .card-icon.card-icon-image-wrap .card-icon-image-asset{
      width:100%!important;height:100%!important;
      max-width:100%!important;max-height:100%!important;
      object-fit:contain!important;object-position:center!important;
    }
    /* Top small card/item icon does the opposite: shortest side fills the tray, excess is tray-masked. */
    .owned-card-chip .owned-card-art,
    .owned-card-chip.item-chip .owned-card-art{
      width:100%!important;height:100%!important;
      left:0!important;top:0!important;transform:none!important;
      object-fit:cover!important;object-position:center!important;
    }

    
    
    
    
    
    
    
    
    

    /* Final whitening/gradient glow follows the current supplied card shell alpha. */
    .upgrade-card.holy-selected::after{
      inset:0!important;border-radius:0!important;
      background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.96) 100%)!important;
      -webkit-mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      -webkit-mask-position:center!important;mask-position:center!important;
      -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
      -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
      animation:holyCardWhiten 690ms cubic-bezier(.18,.78,.2,1) forwards!important;
    }
    .upgrade-card.holy-selected{
      animation:holyCardAscend 690ms cubic-bezier(.18,.78,.2,1) forwards!important;
      box-shadow:none!important;
    }
    .upgrade-card.holy-selected .card-shell-base{
      animation:fix128CurrentShellGlow 690ms cubic-bezier(.18,.78,.2,1) forwards!important;
    }
    @keyframes fix128CurrentShellGlow{
      0%{filter:drop-shadow(0 -8px 7px color-mix(in srgb,var(--card-quality-glow) 55%,transparent)) drop-shadow(0 10px 8px color-mix(in srgb,var(--card-quality-glow) 62%,transparent));}
      58%{filter:drop-shadow(0 -14px 12px rgba(255,255,255,.62)) drop-shadow(0 18px 15px color-mix(in srgb,var(--card-quality-glow) 78%,transparent));}
      100%{filter:drop-shadow(0 -18px 16px rgba(255,255,255,.90)) drop-shadow(0 24px 21px rgba(255,255,255,.82));}
    }

  

    /* Fix128 final: selected-card motion keeps no legacy rectangular shadow; shell glow is handled by the current alpha silhouette above. */
    @keyframes holyCardAscend {
      0% { opacity:1; transform:translate(0,0) scale(1); filter:brightness(1.08) saturate(1); box-shadow:none; }
      58% { opacity:1; transform:translate(var(--commit-x),var(--commit-y)) scale(1.18); filter:brightness(1.34) saturate(.72); box-shadow:none; }
      100% { opacity:1; transform:translate(var(--commit-x),var(--commit-y)) scale(1.25); filter:brightness(1.95) saturate(0); box-shadow:none; }
    }

  

    /* ===== Fix129: centered main menu / refresh sweep / old-style selected brighten using current shell ===== */
    .main-menu-shell:not(.selection-mode){
      width:100%!important;height:100%!important;max-width:none!important;
      display:flex!important;align-items:center!important;justify-content:center!important;
      padding:0!important;
    }
    .main-menu-home{
      width:100%!important;max-width:none!important;
      display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    }
    .main-menu-home .main-menu-title,
    .main-menu-home .main-menu-version{align-self:center!important;text-align:center!important;}
    .main-menu-home .main-menu-actions{
      width:min(760px,86vw)!important;max-width:min(760px,86vw)!important;
      margin-left:auto!important;margin-right:auto!important;
      align-self:center!important;justify-self:center!important;
    }
    /* Fix131：Fix129 的 display:flex!important 不能覆盖页面切换时的 hidden 状态。 */
    .main-menu-home.hidden{display:none!important;}

    
    
    
    
    
    
    
    
    

    /* Selection returns to the older gradual-brightening language; all whitening/glow is masked by the CURRENT supplied shell. */
    .upgrade-card.holy-selected{
      animation:fix129SelectedBrighten 690ms cubic-bezier(.18,.78,.2,1) forwards!important;
      box-shadow:none!important;
    }
    .upgrade-card.holy-selected::after{
      content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:40!important;pointer-events:none!important;
      border:0!important;border-radius:0!important;
      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.82))!important;
      -webkit-mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      -webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
      -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
      mix-blend-mode:screen!important;animation:fix129SelectedWhiten 690ms ease-out forwards!important;
    }
    .upgrade-card.holy-selected .card-shell-base{
      background-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      animation:fix129SelectedShellGlow 690ms ease-out forwards!important;
    }
    @keyframes fix129SelectedBrighten{
      0%{opacity:1;transform:translate(0,0) scale(1);filter:brightness(1.04) saturate(1)}
      62%{opacity:1;transform:translate(var(--commit-x),var(--commit-y)) scale(1.16);filter:brightness(1.34) saturate(.84)}
      100%{opacity:1;transform:translate(var(--commit-x),var(--commit-y)) scale(1.22);filter:brightness(1.88) saturate(.28)}
    }
    @keyframes fix129SelectedWhiten{0%{opacity:0}36%{opacity:.10}72%{opacity:.36}100%{opacity:.72}}
    @keyframes fix129SelectedShellGlow{
      0%{filter:drop-shadow(0 -10px 8px color-mix(in srgb,var(--card-quality-glow) 66%,transparent)) drop-shadow(0 12px 9px color-mix(in srgb,var(--card-quality-glow) 70%,transparent))}
      100%{filter:drop-shadow(0 -16px 14px rgba(255,255,255,.78)) drop-shadow(0 20px 16px rgba(255,255,255,.72))}
    }

  

    /* ===== Fix130: card top metadata / item total stats / numeric colors / shield-cap polish ===== */
    .upgrade-card .item-quality-name{display:none!important;}
    .upgrade-card > .card-type-label,
    .upgrade-card > .card-level-badge{
      position:absolute!important;z-index:8!important;top:3.55%!important;
      min-width:0!important;max-width:34%!important;height:auto!important;
      padding:3px 8px!important;border:1px solid rgba(255,255,255,.28)!important;
      border-radius:999px!important;background:rgba(24,25,28,.76)!important;
      color:#fff!important;box-shadow:none!important;
      font:900 clamp(7px,.66vw,11px)/1.2 Microsoft YaHei,sans-serif!important;
      white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    }
    .upgrade-card > .card-type-label{left:11.7%!important;right:auto!important;transform:none!important;}
    .upgrade-card > .card-level-badge{right:13.2%!important;left:auto!important;transform:none!important;}

    /* Selection number: reuse the project option-button nine-slice, with black text. */
    .upgrade-card .card-key-hint{
      left:50%!important;top:-4px!important;transform:translate(-50%,calc(-100% - 6px))!important;
      width:40px!important;min-width:40px!important;max-width:40px!important;
      height:40px!important;min-height:40px!important;max-height:40px!important;
      padding:0!important;box-sizing:border-box!important;
      border-style:solid!important;border-color:transparent!important;
      border-width:8px!important;
      border-image-source:var(--option-9slice)!important;
      border-image-slice:24 24 31 24 fill!important;
      border-image-width:8px!important;
      border-image-repeat:stretch!important;
      border-radius:0!important;background:transparent!important;box-shadow:none!important;
      color:#050505!important;font:950 clamp(11px,.9vw,15px)/1 Microsoft YaHei,sans-serif!important;
      display:flex!important;align-items:center!important;justify-content:center!important;
      text-align:center!important;line-height:1!important;
      text-shadow:none!important;
    }

    /* Unified black outline for all card copy. */
    .upgrade-card .card-type-label,
    .upgrade-card .card-level-badge,
    .upgrade-card .card-name-zone,
    .upgrade-card .card-next-effect,
    .upgrade-card .card-max-preview,
    .upgrade-card .card-max-preview strong,
    .upgrade-card .card-next-effect span,
    .upgrade-card .card-max-preview span{
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.72)!important;
    }
    .upgrade-card.item-card .item-stat-positive{color:#00ff99!important;}
    .upgrade-card.item-card .item-stat-negative{color:#ff0000!important;}
    .upgrade-card.item-card .card-max-preview.item-total-empty{
      display:flex!important;align-items:center!important;justify-content:center!important;
      text-align:center!important;font-size:clamp(16px,1.7vw,28px)!important;letter-spacing:.18em!important;
    }
    .upgrade-card.item-card .card-max-preview:not(.item-total-empty){text-align:left!important;}

    @media(max-height:620px){
      .upgrade-card > .card-type-label,
      .upgrade-card > .card-level-badge{padding:2px 5px!important;font-size:6px!important;}
      .upgrade-card .card-key-hint{width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;padding:0!important;border-width:6px!important;border-image-width:6px!important;font-size:9px!important;}
    }

  

    
    
    
    
    
    
    
    
    

    /* Item effect lines: name left, signed number right. */
    .upgrade-card.item-card .card-next-effect,
    .upgrade-card.item-card .card-max-preview{
      overflow:hidden!important;
      white-space:normal!important;
      word-break:keep-all!important;
    }
    .upgrade-card.item-card .item-stat-list{
      display:grid!important;gap:clamp(3px,.45vh,7px)!important;width:100%!important;
    }
    .upgrade-card.item-card .item-stat-row{
      display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
      align-items:center!important;column-gap:10px!important;width:100%!important;min-width:0!important;
      font:900 clamp(8px,.78vw,13px)/1.35 Microsoft YaHei,sans-serif!important;
    }
    .upgrade-card.item-card .item-stat-label{
      min-width:0!important;text-align:left!important;color:#f4f6f8!important;
      white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
      overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.35!important;
    }
    .upgrade-card.item-card .item-stat-value{
      justify-self:end!important;align-self:center!important;text-align:right!important;white-space:nowrap!important;
      font-variant-numeric:tabular-nums!important;
    }
    .upgrade-card.item-card .item-stat-heading{
      width:100%!important;text-align:center!important;margin:0 0 clamp(6px,.7vh,10px)!important;
      color:#fff!important;font:950 clamp(9px,.88vw,14px)/1.15 Microsoft YaHei,sans-serif!important;
      letter-spacing:.10em!important;
    }
    .upgrade-card.item-card .item-stat-empty{
      display:flex!important;align-items:center!important;justify-content:center!important;
      width:100%!important;min-height:65%!important;text-align:center!important;
      font:950 clamp(16px,1.7vw,28px)/1 Microsoft YaHei,sans-serif!important;letter-spacing:.18em!important;
    }
    .upgrade-card.item-card .item-stat-positive{color:#00ff99!important;}
    .upgrade-card.item-card .item-stat-negative{color:#ff0000!important;}
    .upgrade-card.item-card .item-stat-label,
    .upgrade-card.item-card .item-stat-value,
    .upgrade-card.item-card .item-stat-heading,
    .upgrade-card.item-card .item-stat-empty{
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.72)!important;
    }
    .upgrade-card.item-card .card-max-preview.item-total-empty{
      display:block!important;text-align:center!important;font-size:inherit!important;letter-spacing:normal!important;
    }

  

    /* ===== Fix139: Fix136 sweep path kept lower-left -> upper-right; only beam slant is \\; card index is square. ===== */
    /* ===== Fix136: rebuilt card refresh sweep; JS-driven, no CSS animation/keyframe history ===== */
    .upgrade-card .card-spawn-sweep-layer{
      position:absolute!important;
      inset:0!important;
      z-index:30!important;
      overflow:hidden!important;
      pointer-events:none!important;
      opacity:1!important;
      -webkit-mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      mask-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      -webkit-mask-position:center!important;
      mask-position:center!important;
      -webkit-mask-repeat:no-repeat!important;
      mask-repeat:no-repeat!important;
      -webkit-mask-size:100% 100%!important;
      mask-size:100% 100%!important;
    }
    .upgrade-card.holy-selected .card-spawn-sweep-layer{
      opacity:0!important;
      visibility:hidden!important;
    }
    .upgrade-card .card-spawn-sweep-beam{
      position:absolute!important;
      left:0!important;
      top:0!important;
      border-radius:999px!important;
      pointer-events:none!important;
      opacity:0;
      mix-blend-mode:screen!important;
      background:linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.04) 7%,
        rgba(255,255,255,.38) 21%,
        rgba(255,255,255,.98) 47%,
        rgba(255,255,255,1) 53%,
        rgba(255,255,255,.38) 79%,
        rgba(255,255,255,.04) 93%,
        rgba(255,255,255,0) 100%)!important;
      box-shadow:0 0 10px rgba(255,255,255,.30)!important;
      filter:blur(.8px)!important;
      will-change:transform,opacity;
      transform-origin:center center!important;
    }
    .upgrade-card .card-spawn-sweep-beam.big{
      width:175%!important;
      height:18%!important;
    }
    .upgrade-card .card-spawn-sweep-beam.small{
      width:130%!important;
      height:9%!important;
    }


    /* ===== Fix139: pointer-position perspective tilt for upgrade cards ===== */
    .upgrade-card.card-tilt-ready:not(.holy-selected):not(.selected):not(.dismissed){
      animation:none!important;
      opacity:1!important;
      transform:perspective(1050px)
        rotateX(var(--card-tilt-x,0deg))
        rotateY(var(--card-tilt-y,0deg))
        translateZ(var(--card-tilt-z,0px))!important;
      transform-origin:50% 50%!important;
      transform-style:preserve-3d!important;
      transition:transform .18s cubic-bezier(.2,.72,.2,1),filter .16s ease,box-shadow .16s ease,border-color .16s ease!important;
      will-change:transform;
    }
    .upgrade-card.card-tilt-ready.card-tilt-active:not(.holy-selected):not(.selected):not(.dismissed){
      transition:transform .045s cubic-bezier(.18,.70,.22,1),filter .16s ease,box-shadow .16s ease,border-color .16s ease!important;
    }


    /* ===== Fix140: intrinsic card-quality visual language ===== */
    .upgrade-card{
      --fix140-quality-top:#c2c9d0;
      --fix140-quality-mid:#8d98a3;
      --fix140-quality-bottom:#68727d;
      --fix140-quality-glow:rgba(184,194,204,.36);
      --fix140-quality-text:#eef2f5;
    }
    .upgrade-card.rarity-common{
      --fix140-quality-top:#c2c9d0;--fix140-quality-mid:#8d98a3;--fix140-quality-bottom:#68727d;
      --fix140-quality-glow:rgba(184,194,204,.34);--fix140-quality-text:#eef2f5;
    }
    .upgrade-card.rarity-rare{
      --fix140-quality-top:#75e6ff;--fix140-quality-mid:#159ed8;--fix140-quality-bottom:#075987;
      --fix140-quality-glow:rgba(24,190,255,.72);--fix140-quality-text:#8feaff;
    }
    .upgrade-card.rarity-epic{
      --fix140-quality-top:#e198ff;--fix140-quality-mid:#9b42dd;--fix140-quality-bottom:#542079;
      --fix140-quality-glow:rgba(183,83,255,.78);--fix140-quality-text:#dda5ff;
    }
    .upgrade-card.rarity-legendary{
      --fix140-quality-top:#ffe889;--fix140-quality-mid:#f2a51d;--fix140-quality-bottom:#9e5500;
      --fix140-quality-glow:rgba(255,177,31,.88);--fix140-quality-text:#ffe48a;
    }
    /* 道具沿用自己的特殊/特级品质，但进入同一套视觉语言。 */
    .upgrade-card.item-card-special{
      --fix140-quality-top:#e198ff;--fix140-quality-mid:#9b42dd;--fix140-quality-bottom:#542079;
      --fix140-quality-glow:rgba(183,83,255,.78);--fix140-quality-text:#dda5ff;
    }
    .upgrade-card.item-card-premium{
      --fix140-quality-top:#ffe889;--fix140-quality-mid:#f2a51d;--fix140-quality-bottom:#9e5500;
      --fix140-quality-glow:rgba(255,177,31,.88);--fix140-quality-text:#ffe48a;
    }
    .upgrade-card .card-shell-tint{
      background:linear-gradient(180deg,var(--fix140-quality-top) 0%,var(--fix140-quality-mid) 43%,var(--fix140-quality-bottom) 100%)!important;
      background-color:transparent!important;
      mix-blend-mode:multiply!important;
      opacity:.76!important;
    }
    .upgrade-card .card-shell-base{
      filter:brightness(.94) contrast(1.08)
        drop-shadow(0 -8px 7px var(--fix140-quality-glow))
        drop-shadow(0 11px 9px var(--fix140-quality-glow))!important;
    }
    .upgrade-card.rarity-common .card-shell-base{
      filter:brightness(.86) contrast(1.12) drop-shadow(0 8px 8px rgba(0,0,0,.44))!important;
    }
    .upgrade-card.rarity-epic .card-shell-base{
      filter:brightness(.94) contrast(1.10) drop-shadow(0 -10px 9px var(--fix140-quality-glow)) drop-shadow(0 14px 12px var(--fix140-quality-glow))!important;
    }
    .upgrade-card.rarity-legendary .card-shell-base,
    .upgrade-card.item-card-premium .card-shell-base{
      filter:brightness(1.02) contrast(1.12) drop-shadow(0 -12px 10px var(--fix140-quality-glow)) drop-shadow(0 16px 13px var(--fix140-quality-glow))!important;
    }
    .upgrade-card .card-name-zone{color:var(--fix140-quality-text)!important;}
    .upgrade-card > .card-type-label,
    .upgrade-card > .card-level-badge{
      border-color:color-mix(in srgb,var(--fix140-quality-text) 76%,#111)!important;
      background:color-mix(in srgb,var(--fix140-quality-bottom) 82%,#080b0f)!important;
      box-shadow:0 0 7px color-mix(in srgb,var(--fix140-quality-glow) 76%,transparent)!important;
    }
    .upgrade-card .card-icon-image-asset{
      filter:drop-shadow(0 0 5px color-mix(in srgb,var(--fix140-quality-glow) 72%,transparent))!important;
    }
    .upgrade-card.rarity-common .card-icon-image-asset{filter:none!important;}


    /* ===== Fix141: fixed character weapons / character select information layout / menu white glow ===== */
    .main-menu-home .main-menu-actions .main-menu-button::after{
      filter:
        drop-shadow(0 0 3px rgba(255,255,255,.82))
        drop-shadow(0 0 7px rgba(255,255,255,.46))
        drop-shadow(0 0 8px var(--option-glow)) !important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover::after,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible::after{
      filter:
        drop-shadow(0 0 4px rgba(255,255,255,.96))
        drop-shadow(0 0 8px rgba(255,255,255,.56))
        drop-shadow(0 0 10px var(--option-glow)) !important;
    }

    .character-stage{position:relative!important;}
    .character-upper-identity{
      position:absolute;left:50%;top:clamp(4px,.8vh,10px);z-index:24;
      transform:translateX(-50%);width:min(620px,70vw);text-align:center;pointer-events:none;
    }
    .character-upper-identity .character-detail-name{
      font-size:clamp(26px,3vw,42px)!important;line-height:1.05!important;letter-spacing:.13em!important;
      color:#f7fafc!important;text-shadow:0 2px 0 #000,0 0 12px rgba(255,255,255,.16)!important;
    }
    .character-upper-identity .character-detail-state{
      margin-top:6px!important;color:#a7b7c3!important;font-size:clamp(9px,.8vw,12px)!important;
      letter-spacing:.18em!important;text-shadow:0 1px 2px #000!important;
    }
    .character-info{
      align-items:stretch!important;text-align:left!important;
      padding:clamp(8px,1.25vh,14px) clamp(18px,4.5vw,72px) 0!important;
    }
    .character-info-grid{
      width:min(1160px,96%);margin:0 auto;min-height:0;flex:1 1 auto;
      display:grid;grid-template-columns:minmax(190px,24%) minmax(0,1fr);gap:clamp(20px,3.2vw,48px);
      align-items:stretch;
    }
    .character-core-panel{
      min-width:0;padding:clamp(8px,1vh,12px) clamp(14px,1.8vw,24px) 6px 0;
      border-right:1px solid rgba(210,225,236,.16);
    }
    .character-section-title,.character-intro-label{
      color:#e9f1f6!important;font-size:clamp(10px,.8vw,13px)!important;font-weight:950!important;
      letter-spacing:.18em!important;text-shadow:0 2px 2px #000!important;
    }
    .character-section-title{margin-bottom:clamp(8px,1vh,12px);}
    .character-stats{
      display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:0!important;
      justify-content:stretch!important;
    }
    .character-stat{
      display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;
      gap:14px!important;padding:clamp(5px,.72vh,8px) 0!important;margin:0!important;
      border:0!important;border-bottom:1px solid rgba(190,207,221,.09)!important;border-radius:0!important;
      background:transparent!important;color:#d5e0e7!important;font-size:clamp(10px,.82vw,13px)!important;font-weight:850!important;
      text-shadow:0 1px 2px #000!important;
    }
    .character-stat:last-child{border-bottom:0!important;}
    .character-stat-label{color:#8fa2b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .character-stat-value{color:#f4f7f9;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
    .character-description-panel{
      min-width:0;display:grid;grid-template-rows:auto auto auto;align-content:start;
      gap:clamp(8px,1.15vh,14px);padding:clamp(8px,1vh,12px) 0 6px;
    }
    .character-info-section{min-width:0;}
    .character-info-section .character-intro-label{margin:0 0 4px!important;}
    .character-weapon-detail,.character-intro{
      width:100%!important;margin:0!important;color:#91a4b2!important;font-size:clamp(9px,.76vw,12px)!important;
      line-height:1.52!important;text-align:left!important;white-space:pre-line;
    }
    .character-weapon-detail{opacity:1!important;}
    .character-loadout,.character-detail-top{display:none!important;}
    .character-info .selection-actions{
      flex:0 0 auto;width:min(440px,52vw)!important;margin:clamp(7px,1vh,11px) auto 0!important;
    }
    @media (pointer:coarse){
      .character-upper-identity{top:2px;width:min(520px,72vw);}
      .character-upper-identity .character-detail-name{font-size:clamp(20px,4vw,30px)!important;}
      .character-upper-identity .character-detail-state{margin-top:3px!important;font-size:8px!important;}
      .character-info{padding:5px 10px 0!important;}
      .character-info-grid{width:min(1040px,98%);grid-template-columns:minmax(145px,25%) minmax(0,1fr);gap:14px;}
      .character-core-panel{padding:5px 10px 2px 0;}
      .character-section-title,.character-intro-label{font-size:8px!important;}
      .character-stat{padding:3px 0!important;font-size:8px!important;gap:8px!important;}
      .character-description-panel{gap:5px;padding:5px 0 2px;}
      .character-weapon-detail,.character-intro{font-size:7.5px!important;line-height:1.36!important;}
      .character-info .selection-actions{width:min(360px,58vw)!important;margin-top:4px!important;}
    }


    /* ===== Fix142: restore common-card white separation edge + real cooldown mask in owned-card icon ===== */
    /* 普通卡仍保留枪灰品质，但恢复原本用于与背景分离的白色轮廓/亮边。 */
    .upgrade-card.rarity-common .card-shell-tint{
      mix-blend-mode:color!important;
      opacity:.82!important;
    }
    .upgrade-card.rarity-common .card-shell-base{
      filter:
        brightness(.98) contrast(1.08)
        drop-shadow(0 0 1px rgba(255,255,255,1))
        drop-shadow(0 0 2.2px rgba(255,255,255,.96))
        drop-shadow(0 7px 8px rgba(0,0,0,.46))!important;
    }

    /* 顶部卡牌冷却遮罩：严格位于托盘Alpha蒙版内部，框体/等级文字保持在上层。 */
    .owned-card-chip .owned-card-art-wrap{position:relative!important;}
    .owned-card-chip .owned-card-art{position:absolute!important;z-index:1!important;}
    .owned-card-cooldown-mask{
      position:absolute;inset:0;z-index:2;display:none;pointer-events:none;
      background:rgba(0,0,0,.50);
      clip-path:inset(0 0 0 0);
      -webkit-clip-path:inset(0 0 0 0);
      will-change:clip-path;
    }

    .death-run-cards .owned-card-cooldown-mask{display:none!important;}


    /* ===== Fix143: glow-only common edge / character bottom alignment / dense real combat stat list ===== */
    /* Fix142误加的实体白轮廓彻底取消；普通卡只恢复旧式 Alpha 外发光。 */
    .upgrade-card.rarity-common::before{content:none!important;display:none!important;}
    .upgrade-card.rarity-common .card-shell-base{
      filter:
        brightness(.90) contrast(1.10)
        drop-shadow(0 -9px 8px rgba(255,255,255,.58))
        drop-shadow(0 12px 10px rgba(255,255,255,.66))
        drop-shadow(0 8px 8px rgba(0,0,0,.42))!important;
    }
    /* 角色展示贴住上半区底边，而不是悬在中间。 */
    .character-carousel-viewport .carousel-track{align-items:flex-end!important;}
    .character-card{align-self:flex-end!important;transform-origin:50% 100%!important;}
    .character-portrait{align-items:flex-end!important;}
    .character-portrait img{max-height:88%!important;}
    .character-core-panel{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;min-height:0!important;}
    .character-stats{align-content:start!important;}
    @media(pointer:coarse){.character-portrait img{max-height:86%!important;}}


    /* ===== Fix144: restore original character position + put character name at the correct bottom position ===== */
    .character-carousel-viewport .carousel-track{align-items:center!important;}
    .character-card{align-self:auto!important;transform-origin:50% 50%!important;}
    .character-portrait{align-items:center!important;}
    .character-portrait img{max-height:78%!important;}
    .character-upper-identity{
      top:auto!important;bottom:clamp(6px,1vh,12px)!important;
      display:flex!important;flex-direction:column-reverse!important;align-items:center!important;
      gap:3px!important;
    }
    .character-upper-identity .character-detail-name{margin:0!important;}
    .character-upper-identity .character-detail-state{margin:0!important;}
    @media(pointer:coarse){
      .character-portrait img{max-height:78%!important;}
      .character-upper-identity{top:auto!important;bottom:4px!important;}
    }


    /* ===== Fix147: item counts use × N; owned-card icon text is 2x Fix146 ===== */
    .owned-card-level{
      font-size:22.4px !important;
      line-height:1 !important;
      right:2.4px !important;
      bottom:1.6px !important;
      min-width:0 !important;
      padding:1px 3px !important;
      white-space:nowrap !important;
    }
    @media(max-width:760px){
      .owned-card-level{
        font-size:17.6px !important;
        right:2px !important;
        bottom:1px !important;
        padding:1px 2px !important;
      }
    }


    /* ===== Fix148/v62: clean upgrade chrome; original canvas run HUD remains the single source ===== */
    /* User-marked content removed visually while keeping legacy DOM hooks intact. */
    #upgradeOverlay .upgrade-heading{display:none!important;}
    #upgradeOverlay .upgrade-pool-title > span:first-child{display:none!important;}
    #upgradeOverlay .stat-section-note{display:none!important;}

    /* Keep the selected-card strip above the upgrade dimmer and panels. */
    .owned-card-hud{z-index:1201!important;}
    .owned-card-floating-tooltip{z-index:1203!important;}
    /* v62: upgrade screen reuses the original canvas run HUD; no mirrored duplicate time/wave/kill DOM. */


    /* ===== Fix149: brighter shifted non-common title colors + detached fixed choice-index UI ===== */
    /* Only card-name text changes. Common/white cards keep their existing white name. */
    .upgrade-card.rarity-rare .card-name-zone{
      color:#b4b8ff!important; /* blue -> brighter blue-violet */
    }
    .upgrade-card.rarity-epic .card-name-zone,
    .upgrade-card.item-card-special .card-name-zone{
      color:#f0b6ff!important; /* violet -> slightly warmer/brighter violet */
    }
    .upgrade-card.rarity-legendary .card-name-zone,
    .upgrade-card.item-card-premium .card-name-zone{
      color:#fff0a8!important; /* gold -> brighter yellow-gold */
    }

    /* The old number is a child of the 3D card and therefore inherits tilt/filter. Hide it. */
    .upgrade-card > .card-key-hint{display:none!important;}
    .upgrade-card-row{position:relative!important;overflow:visible!important;}
    .upgrade-card-row > .card-key-hint-fixed{
      position:absolute!important;
      width:40px!important;min-width:40px!important;max-width:40px!important;
      height:40px!important;min-height:40px!important;max-height:40px!important;
      padding:0!important;box-sizing:border-box!important;
      transform:translate(-50%,calc(-100% - 6px))!important;
      border-style:solid!important;border-color:transparent!important;border-width:8px!important;
      border-image-source:var(--option-9slice)!important;
      border-image-slice:24 24 31 24 fill!important;
      border-image-width:8px!important;border-image-repeat:stretch!important;
      border-radius:0!important;background:transparent!important;
      color:#050505!important;
      font:950 clamp(11px,.9vw,15px)/1 Microsoft YaHei,sans-serif!important;
      display:flex!important;align-items:center!important;justify-content:center!important;
      text-align:center!important;line-height:1!important;
      text-shadow:none!important;box-shadow:none!important;
      mix-blend-mode:normal!important;filter:none!important;opacity:1!important;
      isolation:isolate!important;z-index:90!important;pointer-events:none!important;
      will-change:auto!important;
    }
    @media(max-height:620px){
      .upgrade-card-row > .card-key-hint-fixed{
        width:32px!important;min-width:32px!important;max-width:32px!important;
        height:32px!important;min-height:32px!important;max-height:32px!important;
        border-width:6px!important;border-image-width:6px!important;font-size:9px!important;
      }
    }


    /* ===== Fix152: JS spring owns transform smoothing; do not stack a second CSS transform delay ===== */
    .upgrade-card.card-tilt-ready:not(.holy-selected):not(.selected):not(.dismissed),
    .upgrade-card.card-tilt-ready.card-tilt-active:not(.holy-selected):not(.selected):not(.dismissed){
      transition:filter .16s ease,box-shadow .16s ease,border-color .16s ease!important;
    }


    /* ===== Fix159: lightweight top-layer sparkle sprites; no card mask / blend / blur ===== */
    .upgrade-card .card-quality-spark-layer{display:none!important;}
    #fix159CardSparkOverlay{
      position:absolute!important;inset:0!important;z-index:10050!important;
      pointer-events:none!important;overflow:visible!important;
      contain:layout style!important;
    }
    #fix159CardSparkOverlay .fix159-card-spark{
      position:absolute!important;display:none;pointer-events:none!important;
      object-fit:contain!important;opacity:0;
      transform:translate3d(-50%,-50%,0) scale(1);
      transform-origin:center center!important;
      filter:none!important;box-shadow:none!important;text-shadow:none!important;
      mix-blend-mode:normal!important;
    }



    /* ===== Fix161: intact rounded main-menu silhouette / spring-green buttons / cheap black glow / rose checker background ===== */
    /* Main menu only (home/settings). Selection screens keep their existing background treatment. */
    #mainMenuOverlay.mode-standard .main-menu-background{
      background:linear-gradient(180deg,
        #d94a76 0%,
        #bd315f 25%,
        #761c3e 48%,
        #2b0918 72%,
        #000 100%)!important;
    }
    /* Disable the old plasma stack while the normal main menu is showing. */
    #mainMenuOverlay.mode-standard .main-menu-bg-plasma,
    #mainMenuOverlay.mode-standard .main-menu-bg-plasma.alt{
      display:none!important;
      animation:none!important;
      filter:none!important;
      background:none!important;
    }
    /* A static checker texture is translated as one compositor layer; no blur/filter/particle work. */
    #mainMenuOverlay.mode-standard .main-menu-background::before{
      content:''!important;
      display:block!important;
      position:absolute!important;
      inset:-64px!important;
      z-index:2!important;
      pointer-events:none!important;
      opacity:.18!important;
      background:conic-gradient(from 90deg,
        rgba(255,255,255,.13) 0 25%,
        rgba(0,0,0,.12) 0 50%,
        rgba(255,255,255,.13) 0 75%,
        rgba(0,0,0,.12) 0 100%)!important;
      background-size:64px 64px!important;
      will-change:transform!important;
      transform:translate3d(-64px,-64px,0);
      animation:fix161MenuCheckerDrift 8s linear infinite!important;
    }
    @keyframes fix161MenuCheckerDrift{
      from{transform:translate3d(-64px,-64px,0);}
      to{transform:translate3d(0,0,0);}
    }



    /* ===== Fix163: pure CSS main-menu capsule buttons; no image assets ===== */
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit{
      position:relative!important;
      box-sizing:border-box!important;
      border:6px solid #050505!important;
      border-image:none!important;
      border-radius:999px!important;
      background:#ff4f9a!important;
      color:#fff!important;
      overflow:hidden!important;
      filter:none!important;
      box-shadow:0 0 12px rgba(0,0,0,.58)!important;
      transform-origin:center center!important;
      transition:transform .16s cubic-bezier(.2,.72,.2,1),background-color .12s ease,box-shadow .12s ease!important;
      will-change:transform!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button::before,
    .main-menu-home .main-menu-actions .main-menu-button::after{
      content:none!important;
      display:none!important;
      background:none!important;
      mask:none!important;
      -webkit-mask:none!important;
      border:0!important;
      box-shadow:none!important;
      filter:none!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button > span:not(.menu-mini-tag){
      position:relative!important;
      z-index:1!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible{
      background:#ff5fa3!important;
      transform:none!important;
      box-shadow:0 0 14px rgba(0,0,0,.62)!important;
      filter:none!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:active{
      background:#f04489!important;
      transform:scale(.90)!important;
      box-shadow:0 0 8px rgba(0,0,0,.52)!important;
      filter:none!important;
      transition-duration:.07s!important;
    }


    /* ===== Fix164: shorter menu buttons / sky-blue to sea-blue background / darker rose buttons ===== */
    #mainMenuOverlay.mode-standard .main-menu-background{
      background:linear-gradient(180deg,
        #78d7ff 0%,
        #4fc4f2 28%,
        #239bd1 58%,
        #087eaf 78%,
        #006b96 100%)!important;
    }
    .main-menu-home .main-menu-actions{
      width:min(620px,72vw)!important;
      max-width:min(620px,72vw)!important;
      margin-left:auto!important;
      margin-right:auto!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit{
      background:#c83f6b!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible{
      background:#d94a76!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:active{
      background:#b73560!important;
    }
    @media (max-width:760px){
      .main-menu-home .main-menu-actions{
        width:min(500px,82vw)!important;
        max-width:min(500px,82vw)!important;
      }
    }


    /* ===== Fix165: menu width follows the longest button label + reserved side padding ===== */
    .main-menu-home .main-menu-actions{
      width:max-content!important;
      max-width:calc(100vw - 48px)!important;
      grid-template-columns:max-content!important;
      justify-content:center!important;
      justify-items:stretch!important;
      margin-left:auto!important;
      margin-right:auto!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit{
      width:auto!important;
      min-width:0!important;
      padding-left:48px!important;
      padding-right:48px!important;
      white-space:nowrap!important;
    }
    @media (max-width:760px){
      .main-menu-home .main-menu-actions{
        width:max-content!important;
        max-width:calc(100vw - 32px)!important;
        grid-template-columns:max-content!important;
      }
      .main-menu-home .main-menu-actions .main-menu-button,
      .main-menu-home .main-menu-actions .main-menu-button.primary,
      .main-menu-home .main-menu-actions .main-menu-button.exit{
        width:auto!important;
        padding-left:34px!important;
        padding-right:34px!important;
      }
    }


    /* ===== Fix174: simple dark-gray -> rose hover color transition; dot/canvas effect removed ===== */
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit{
      position:relative!important;
      overflow:hidden!important;
      isolation:auto!important;
      background-color:#34373b!important;
      transition:
        background-color .28s cubic-bezier(.16,.84,.24,1),
        transform .16s cubic-bezier(.2,.72,.2,1),
        box-shadow .12s ease!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:hover,
    .main-menu-home .main-menu-actions .main-menu-button:focus-visible{
      background-color:#c83f6b!important;
      transform:none!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button:active{
      background-color:#b73560!important;
      transform:scale(.90)!important;
      transition-duration:.08s!important;
    }
    .main-menu-home .main-menu-actions .main-menu-button > span:not(.menu-mini-tag){
      position:relative!important;
      z-index:1!important;
      pointer-events:none!important;
    }


    /* ===== Fix175: keep the existing sky-blue top, fade the lower background to black ===== */
    #mainMenuOverlay.mode-standard .main-menu-background{
      background:linear-gradient(180deg,
        #78d7ff 0%,
        #4fc4f2 28%,
        #239bd1 58%,
        #0b526f 78%,
        #000000 100%)!important;
    }


    /* ===== Fix182: purple overhead light + enlarged disco checker flashes ===== */
    #mainMenuOverlay.mode-standard .main-menu-background{
      background:
        radial-gradient(ellipse at 50% -8%, rgba(220,145,255,.98) 0%, rgba(168,76,244,.78) 18%, rgba(104,37,183,.48) 38%, rgba(47,15,84,.16) 58%, transparent 72%),
        linear-gradient(180deg,#6d31a8 0%,#44206f 30%,#241238 58%,#100817 78%,#000 100%)!important;
    }
    #mainMenuOverlay.mode-standard .main-menu-background::before{
      inset:-128px!important;
      opacity:.20!important;
      background:conic-gradient(from 90deg,
        rgba(255,255,255,.11) 0 25%,
        rgba(13,6,22,.22) 0 50%,
        rgba(255,255,255,.11) 0 75%,
        rgba(13,6,22,.22) 0 100%)!important;
      background-size:128px 128px!important;
      transform:translate3d(-128px,-128px,0);
      animation:fix182MenuCheckerDrift 12s linear infinite!important;
    }
    @keyframes fix182MenuCheckerDrift{
      from{transform:translate3d(-128px,-128px,0);}
      to{transform:translate3d(0,0,0);}
    }
    #mainMenuDiscoGrid{
      position:absolute;inset:0;z-index:3;width:100%;height:100%;
      display:block;pointer-events:none;opacity:.92;mix-blend-mode:screen;
      image-rendering:auto;
    }
    #mainMenuOverlay.mode-selection #mainMenuDiscoGrid{display:none!important;}


    /* ===== Fix183: character selection uses bottom gradient instead of full black mask ===== */
    #mainMenuOverlay.mode-character .main-menu-background::before{
      content:''!important;
      display:block!important;
      position:absolute!important;
      inset:0!important;
      z-index:30!important;
      pointer-events:none!important;
      background:linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 34%,
        rgba(6,8,14,.10) 48%,
        rgba(4,6,10,.28) 62%,
        rgba(3,4,8,.56) 80%,
        rgba(0,0,0,.84) 100%)!important;
    }



    /* ===== Fix185: 25% wider home buttons + unified main-menu background for character/map selection ===== */
    /* 主菜单按钮视觉宽度增加25%，保持原高度与文字比例。 */
    .main-menu-home .main-menu-actions .main-menu-button,
    .main-menu-home .main-menu-actions .main-menu-button.primary,
    .main-menu-home .main-menu-actions .main-menu-button.exit{
      width:125%!important;
      justify-self:center!important;
    }

    /* 角色/地图选择完全复用当前主菜单紫色背景，不再使用旧版选择页背景。 */
    #mainMenuOverlay.mode-character .main-menu-background,
    #mainMenuOverlay.mode-map .main-menu-background{
      background:
        radial-gradient(ellipse at 50% -8%, rgba(220,145,255,.98) 0%, rgba(168,76,244,.78) 18%, rgba(104,37,183,.48) 38%, rgba(47,15,84,.16) 58%, transparent 72%),
        linear-gradient(180deg,#6d31a8 0%,#44206f 30%,#241238 58%,#100817 78%,#000 100%)!important;
    }

    /* 清空旧 Plasma/选角顶光/地图顶光/黑罩/旧渐变。 */
    #mainMenuOverlay.mode-character .main-menu-bg-plasma,
    #mainMenuOverlay.mode-character .main-menu-bg-plasma.alt,
    #mainMenuOverlay.mode-map .main-menu-bg-plasma,
    #mainMenuOverlay.mode-map .main-menu-bg-plasma.alt{
      display:none!important;
      animation:none!important;
      filter:none!important;
      background:none!important;
      opacity:0!important;
    }
    #characterSelectPanel.visible::before,
    #mapSelectPanel.visible::before{
      content:none!important;
      display:none!important;
      background:none!important;
      box-shadow:none!important;
      filter:none!important;
    }

    /* 选择页也使用主菜单同款128px移动大方格。 */
    #mainMenuOverlay.mode-character .main-menu-background::before,
    #mainMenuOverlay.mode-map .main-menu-background::before{
      content:''!important;
      display:block!important;
      position:absolute!important;
      inset:-128px!important;
      z-index:2!important;
      pointer-events:none!important;
      opacity:.20!important;
      background:conic-gradient(from 90deg,
        rgba(255,255,255,.11) 0 25%,
        rgba(13,6,22,.22) 0 50%,
        rgba(255,255,255,.11) 0 75%,
        rgba(13,6,22,.22) 0 100%)!important;
      background-size:128px 128px!important;
      transform:translate3d(-128px,-128px,0)!important;
      animation:fix182MenuCheckerDrift 12s linear infinite!important;
    }

    /* 角色/地图选择显示同一套渐入渐出随机闪光；编辑器仍不使用。 */
    #mainMenuOverlay.mode-character #mainMenuDiscoGrid,
    #mainMenuOverlay.mode-map #mainMenuDiscoGrid{
      display:block!important;
    }
    #mainMenuOverlay.mode-editor #mainMenuDiscoGrid{
      display:none!important;
    }



    /* ===== Fix187: selection button cleanup / rounded triangle arrows / pause white-line cleanup ===== */
    /* Selection action buttons must not inherit the ancient left-side decorative bar. */
    .selection-actions .main-menu-button::before,
    .selection-actions .main-menu-button::after{
      content:none!important;
      display:none!important;
    }
    .selection-actions .main-menu-button{
      isolation:isolate!important;
      overflow:hidden!important;
      background-clip:padding-box!important;
    }

    /* Rounded triangular previous/next controls. The outer mask is the black border; inner mask is the live button color. */
    button.selection-arrow:not(.upgrade-card){
      --fix187-arrow-mask-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M24 8C15 3 9 9 9 20v60c0 11 6 17 15 12l60-34c10-6 10-12 0-18L24 8Z'/%3E%3C/svg%3E");
      --fix187-arrow-mask-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M76 8c9-5 15 1 15 12v60c0 11-6 17-15 12L16 58C6 52 6 46 16 40L76 8Z'/%3E%3C/svg%3E");
      width:clamp(54px,5.2vw,72px)!important;
      min-width:clamp(54px,5.2vw,72px)!important;
      height:clamp(62px,8.2vh,86px)!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
      color:transparent!important;
      font-size:0!important;
      text-shadow:none!important;
      isolation:isolate!important;
    }
    .selection-arrow::before,
    .selection-arrow::after{
      content:''!important;
      display:block!important;
      position:absolute!important;
      pointer-events:none!important;
      transition:background-color .28s cubic-bezier(.16,.84,.24,1),transform .16s cubic-bezier(.2,.72,.2,1)!important;
    }
    .selection-arrow::before{
      inset:0!important;
      z-index:0!important;
      background:#050505!important;
    }
    .selection-arrow::after{
      inset:clamp(4px,.38vw,6px)!important;
      z-index:1!important;
      background:var(--fix186-btn-bg,#34373b)!important;
    }
    .selection-arrow.left::before,
    .selection-arrow.left::after{
      -webkit-mask:var(--fix187-arrow-mask-left) center/100% 100% no-repeat!important;
      mask:var(--fix187-arrow-mask-left) center/100% 100% no-repeat!important;
    }
    .selection-arrow.right::before,
    .selection-arrow.right::after{
      -webkit-mask:var(--fix187-arrow-mask-right) center/100% 100% no-repeat!important;
      mask:var(--fix187-arrow-mask-right) center/100% 100% no-repeat!important;
    }
    .selection-arrow:hover::after,
    .selection-arrow:focus-visible::after{
      background:var(--fix186-btn-hover,#c83f6b)!important;
    }
    .selection-arrow:active::after{
      background:var(--fix186-btn-active,#b73560)!important;
    }

    /* Pause UI: purge the Fix86 pure-white container outlines and residual separator lines. */
    .pause-overlay .pause-panel,
    .pause-overlay .pause-stats-panel,
    .pause-overlay .pause-setting-group{
      border-color:#050505!important;
      box-shadow:0 14px 34px rgba(0,0,0,.52)!important;
    }
    .pause-overlay .pause-stats-heading,
    .pause-overlay .stat-row{
      border-color:rgba(5,5,5,.88)!important;
    }
    .pause-overlay .pause-menu-button,
    .pause-overlay .pause-toggle{
      border-color:#050505!important;
    }
    .pause-overlay .pause-panel::before,
    .pause-overlay .pause-panel::after,
    .pause-overlay .pause-setting-group::before,
    .pause-overlay .pause-setting-group::after,
    .pause-overlay .pause-stats-panel::before,
    .pause-overlay .pause-stats-panel::after{
      border-color:transparent!important;
      box-shadow:none!important;
    }

    @media(max-width:760px){
      button.selection-arrow:not(.upgrade-card){
        width:54px!important;min-width:54px!important;height:62px!important;
      }
      .selection-arrow::after{inset:4px!important;}
    }



    /* ===== Fix189: remove menu side letterbox bars + unclipped map carousel edges ===== */
    /* 菜单体系（主菜单 / 选角 / 选地图 / 编辑器）铺满浏览器窗口，避免16:9舞台在宽屏上留下左右黑边。 */
    .stage.menu-open{
      width:100dvw!important;
      height:100dvh!important;
      max-width:none!important;
      max-height:none!important;
      aspect-ratio:auto!important;
      border:0!important;
      box-shadow:none!important;
      margin:0!important;
    }
    @supports not (height:100dvh){
      .stage.menu-open{width:100vw!important;height:100vh!important;}
    }

    /* 选择地图时关闭左右边缘裁切/遮罩，地图卡在轮播中保持连续。 */
    #mapSelectPanel.visible .map-carousel-viewport{
      overflow:visible!important;
      clip-path:none!important;
      -webkit-clip-path:none!important;
      -webkit-mask-image:none!important;
      mask-image:none!important;
      -webkit-mask:none!important;
      mask:none!important;
    }
    #mapSelectPanel.visible .map-stage::before,
    #mapSelectPanel.visible .map-stage::after,
    #mapSelectPanel.visible .map-carousel-viewport::before,
    #mapSelectPanel.visible .map-carousel-viewport::after{
      content:none!important;
      display:none!important;
      background:none!important;
      opacity:0!important;
      -webkit-mask:none!important;
      mask:none!important;
    }



    /* ===== Fix208: user-provided pause settings tray as true 9-slice UI ===== */
    :root{--fix208-pause-settings-tray:url("../assets/extracted/asset-0003.png");}
    .pause-overlay .pause-setting-group{
      position:relative!important;
      isolation:isolate!important;
      box-sizing:border-box!important;
      margin:15px 0!important;
      padding:clamp(31px,3.0vw,38px) clamp(20px,2.0vw,26px) clamp(17px,1.7vw,22px)!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
    }
    .pause-overlay .pause-setting-group::before{
      content:''!important;
      display:block!important;
      position:absolute!important;
      inset:0!important;
      z-index:0!important;
      pointer-events:none!important;
      box-sizing:border-box!important;
      border-style:solid!important;
      border-width:40px 34px 24px 34px!important;
      border-image-source:var(--fix208-pause-settings-tray)!important;
      border-image-slice:40 34 24 34 fill!important;
      border-image-width:40px 34px 24px 34px!important;
      border-image-outset:0!important;
      border-image-repeat:stretch!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      opacity:1!important;
    }
    .pause-overlay .pause-setting-group::after{content:none!important;display:none!important;}
    .pause-overlay .pause-setting-group > *{position:relative!important;z-index:1!important;}
    @media(max-width:760px){
      .pause-overlay .pause-setting-group{
        margin:9px 0!important;
        padding:30px 18px 16px!important;
      }
      .pause-overlay .pause-setting-group::before{
        border-width:36px 30px 22px 30px!important;
        border-image-width:36px 30px 22px 30px!important;
      }
    }



    /* ===== Fix210: correct pause tray 9-slice horizontal cuts from user reference ===== */
    /* Source image is 229x93. User-marked horizontal cuts are approximately equal thirds: y=31 / y=62. */
    .pause-overlay .pause-setting-group::before{
      border-style:solid!important;
      /* Keep left/right corner protection; correct only the horizontal slicing. */
      border-image-slice:31 34 31 34 fill!important;
      /* Match the marked cut positions on the stretched tray: top / middle / bottom ≈ 1/3 each. */
      border-image-width:31.5% 34px 31.5% 34px!important;
      border-image-outset:0!important;
      border-image-repeat:stretch!important;
    }
    @media(max-width:760px){
      .pause-overlay .pause-setting-group::before{
        border-image-slice:31 34 31 34 fill!important;
        border-image-width:31.5% 30px 31.5% 30px!important;
      }
    }


    /* ===== Fix212: replace pause settings tray with user's new tall 9-slice UI ===== */
    :root{--fix212-pause-settings-tray:url("../assets/extracted/asset-0004.png");}
    .pause-overlay .pause-setting-group{
      min-height:230px!important;
      margin:15px 0!important;
      padding:50px 22px 24px!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
    }
    .pause-overlay .pause-setting-group::before{
      content:''!important;
      display:block!important;
      position:absolute!important;
      inset:0!important;
      z-index:0!important;
      pointer-events:none!important;
      box-sizing:border-box!important;
      border-style:solid!important;
      border-width:44px 22px 30px 22px!important;
      border-image-source:var(--fix212-pause-settings-tray)!important;
      border-image-slice:94 72 80 72 fill!important;
      border-image-width:44px 22px 30px 22px!important;
      border-image-outset:0!important;
      border-image-repeat:stretch!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      opacity:1!important;
    }
    .pause-overlay .pause-setting-group > *{position:relative!important;z-index:1!important;}
    @media(max-width:760px){
      .pause-overlay .pause-setting-group{
        min-height:218px!important;
        margin:9px 0!important;
        padding:47px 18px 22px!important;
      }
      .pause-overlay .pause-setting-group::before{
        border-width:42px 20px 28px 20px!important;
        border-image-slice:94 72 80 72 fill!important;
        border-image-width:42px 20px 28px 20px!important;
      }
    }
    /* Fix214：设置托盘九宫格四条切线统一向素材中心内收50px。
       原 44/22/30/22 -> 新 94/72/80/72；显示边框宽度保持不变。 */

    /* ===== Fix215: pause layout overhaul =====
       1) "暂停" 标题脱离暂停框并固定在画面正上方；
       2) 移除设置项外部九宫格托盘，仅保留设置控件；
       3) 暂停主框严格居中；
       4) 属性框独立固定在画面右侧。 */
    #pauseOverlay.pause-overlay{
      display:block!important;
      position:absolute!important;
      inset:0!important;
      padding:0!important;
      overflow:hidden!important;
    }
    #pauseOverlay .pause-title-detached{
      position:absolute!important;
      left:50%!important;
      top:max(20px, env(safe-area-inset-top))!important;
      transform:translateX(-50%)!important;
      z-index:5!important;
      width:max-content!important;
      max-width:90vw!important;
      margin:0!important;
      padding:0!important;
      text-align:center!important;
      pointer-events:none!important;
      color:#f6fbff!important;
      font-size:clamp(30px,3.2vw,46px)!important;
      font-weight:950!important;
      line-height:1!important;
      letter-spacing:.16em!important;
      text-shadow:0 3px 0 #050505, 0 0 12px rgba(0,0,0,.8)!important;
    }
    #pauseOverlay .pause-shell{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
      max-width:none!important;
      max-height:none!important;
      display:block!important;
      overflow:visible!important;
      pointer-events:none!important;
    }
    #pauseOverlay .pause-panel{
      position:absolute!important;
      left:50%!important;
      top:50%!important;
      transform:translate(-50%,-50%)!important;
      z-index:3!important;
      width:min(430px,42vw)!important;
      max-height:min(680px,78vh)!important;
      box-sizing:border-box!important;
      overflow:auto!important;
      pointer-events:auto!important;
    }
    #pauseOverlay .pause-stats-panel{
      position:absolute!important;
      right:clamp(20px,3vw,58px)!important;
      top:50%!important;
      transform:translateY(-50%)!important;
      z-index:3!important;
      width:min(350px,24vw)!important;
      min-width:250px!important;
      max-height:min(720px,78vh)!important;
      box-sizing:border-box!important;
      pointer-events:auto!important;
    }

    /* 设置项取消所有外框 / 九宫格 / 伪元素，只保留控件本身。 */
    #pauseOverlay .pause-setting-group{
      position:relative!important;
      min-height:0!important;
      margin:15px 0!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:visible!important;
    }
    #pauseOverlay .pause-setting-group::before,
    #pauseOverlay .pause-setting-group::after{
      content:none!important;
      display:none!important;
      border:0!important;
      background:none!important;
      box-shadow:none!important;
    }
    #pauseOverlay .pause-setting-group > *{
      position:relative!important;
      z-index:1!important;
    }

    /* 中央框不再为顶部标题预留空间。 */
    #pauseOverlay .pause-subtitle{
      margin-top:0!important;
    }

    @media(max-width:760px){
      #pauseOverlay .pause-title-detached{
        top:max(12px, env(safe-area-inset-top))!important;
        font-size:clamp(24px,7vw,34px)!important;
      }
      #pauseOverlay .pause-panel{
        left:43%!important;
        width:min(58vw,390px)!important;
        max-height:78vh!important;
        padding:14px!important;
      }
      #pauseOverlay .pause-stats-panel{
        right:8px!important;
        width:34vw!important;
        min-width:0!important;
        max-height:68vh!important;
        padding:10px!important;
      }
      #pauseOverlay .pause-stats-heading{
        font-size:11px!important;
      }
      #pauseOverlay .pause-stats-heading strong{
        font-size:9px!important;
      }
      #pauseOverlay .pause-stats-panel .stat-row{
        font-size:9px!important;
        padding:4px 5px!important;
      }
      #pauseOverlay .pause-setting-group{
        min-height:0!important;
        margin:9px 0!important;
        padding:0!important;
      }
    }


    /* ===== Fix216: pause HUD visibility + tray title + exit confirmation ===== */
    /* The dimmer is now drawn inside the canvas BEFORE drawUI(), so the gameplay world is darkened
       while time/resources/HP/skill HUD stay fully visible. The DOM pause overlay itself is transparent. */
    #pauseOverlay.pause-overlay{
      z-index:1300!important;
      background:transparent!important;
    }
    #pauseOverlay .pause-title-detached{display:none!important;}
    #pauseOverlay .pause-center-stack{
      position:absolute!important;
      left:50%!important;
      top:50%!important;
      transform:translate(-50%,-50%)!important;
      z-index:4!important;
      width:min(430px,42vw)!important;
      max-height:86vh!important;
      display:flex!important;
      flex-direction:column!important;
      align-items:stretch!important;
      pointer-events:none!important;
    }
    #pauseOverlay .pause-panel{
      position:relative!important;
      left:auto!important;
      top:auto!important;
      transform:none!important;
      width:100%!important;
      max-height:calc(86vh - 126px)!important;
      box-sizing:border-box!important;
      overflow:auto!important;
      pointer-events:auto!important;
    }
    #pauseOverlay .pause-panel .pause-title{
      display:block!important;
      position:static!important;
      transform:none!important;
      width:auto!important;
      max-width:none!important;
      margin:0 0 clamp(14px,1.7vw,20px)!important;
      padding:0!important;
      color:#f6fbff!important;
      text-align:center!important;
      font-size:clamp(28px,3vw,42px)!important;
      font-weight:950!important;
      line-height:1!important;
      letter-spacing:.16em!important;
      text-shadow:0 3px 0 #050505,0 0 12px rgba(0,0,0,.78)!important;
      pointer-events:none!important;
    }
    #pauseOverlay .pause-subtitle,
    #pauseOverlay .pause-tip{
      display:none!important;
    }
    #pauseOverlay .pause-setting-group{
      margin:0!important;
    }
    #pauseOverlay .pause-actions{
      margin-top:12px!important;
      display:flex!important;
      flex-direction:column!important;
      gap:9px!important;
      pointer-events:auto!important;
    }
    #pauseOverlay .pause-actions .pause-menu-button{
      width:100%!important;
      margin:0!important;
      min-height:48px!important;
    }
    #pauseOverlay #resumeButton:hover,
    #pauseOverlay #resumeButton:focus-visible{
      background:#CCFF00!important;
      color:#050505!important;
      filter:none!important;
      box-shadow:0 0 0 3px #050505,0 0 18px rgba(204,255,0,.24)!important;
    }
    #pauseOverlay #exitRunButton{
      margin:0!important;
    }

    #pauseOverlay .pause-exit-confirm{
      position:absolute!important;
      inset:0!important;
      z-index:50!important;
      display:none!important;
      place-items:center!important;
      padding:20px!important;
      box-sizing:border-box!important;
      background:rgba(0,0,0,.38)!important;
      pointer-events:auto!important;
    }
    #pauseOverlay .pause-exit-confirm.visible{
      display:grid!important;
    }
    #pauseOverlay .pause-exit-confirm-window{
      width:min(390px,78vw)!important;
      padding:clamp(22px,2.5vw,30px)!important;
      box-sizing:border-box!important;
      border:4px solid #050505!important;
      border-radius:18px!important;
      background:#2f3237!important;
      box-shadow:0 22px 70px rgba(0,0,0,.72)!important;
    }
    #pauseOverlay .pause-exit-confirm-title{
      margin:0 0 22px!important;
      color:#fff!important;
      text-align:center!important;
      font:950 clamp(22px,2.2vw,30px)/1.15 'Microsoft YaHei',sans-serif!important;
      letter-spacing:.06em!important;
      text-shadow:0 2px 0 #050505!important;
    }
    #pauseOverlay .pause-exit-confirm-actions{
      display:grid!important;
      grid-template-columns:1fr 1fr!important;
      gap:12px!important;
    }
    #pauseOverlay .pause-exit-confirm-button{
      min-height:48px!important;
      border:4px solid #050505!important;
      border-radius:999px!important;
      color:#050505!important;
      font:950 15px/1 'Microsoft YaHei',sans-serif!important;
      
      box-shadow:0 5px 0 #050505!important;
      transition:transform .08s ease,filter .08s ease!important;
    }
    #pauseOverlay .pause-exit-confirm-button:hover,
    #pauseOverlay .pause-exit-confirm-button:focus-visible{
      filter:brightness(1.08)!important;
    }
    #pauseOverlay .pause-exit-confirm-button:active{
      transform:translateY(3px) scale(.985)!important;
      box-shadow:0 2px 0 #050505!important;
    }
    #pauseOverlay #pauseExitCancelButton{
      background:#CCFF00!important;
    }
    #pauseOverlay #pauseExitConfirmButton{
      background:#C83F6B!important;
      color:#fff!important;
    }

    @media(max-width:760px){
      #pauseOverlay .pause-center-stack{
        left:41%!important;
        width:min(54vw,390px)!important;
        max-height:88vh!important;
      }
      #pauseOverlay .pause-panel{
        left:auto!important;
        width:100%!important;
        max-height:calc(88vh - 108px)!important;
        padding:14px!important;
      }
      #pauseOverlay .pause-panel .pause-title{
        font-size:clamp(23px,6vw,32px)!important;
        margin-bottom:12px!important;
      }
      #pauseOverlay .pause-actions{
        margin-top:8px!important;
        gap:6px!important;
      }
      #pauseOverlay .pause-actions .pause-menu-button{
        min-height:40px!important;
        font-size:11px!important;
      }
      #pauseOverlay .pause-exit-confirm-window{
        width:min(360px,70vw)!important;
        padding:18px!important;
      }
      #pauseOverlay .pause-exit-confirm-button{
        min-height:42px!important;
        font-size:12px!important;
      }
    }




    /* ===== UI component baseline v2: explicit button, switch, slider and scrollbar families ===== */
    :root{
      --ui-dark:#34373b;
      --ui-dark-active:#292c30;
      --ui-lime:#CCFF00;
      --ui-lime-active:#A8D600;
      --ui-danger:#C83F6B;
      --ui-danger-active:#B73560;
      --ui-border:#050505;
    }

    /* Only actual capsule-button components opt into the shared button language. */
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button){
      box-sizing:border-box!important;
      border:clamp(3px,.34vw,6px) solid var(--ui-border)!important;
      border-image:none!important;
      border-radius:999px!important;
      background-color:var(--ui-dark)!important;
      background-image:none!important;
      color:#fff!important;
      box-shadow:0 5px 0 var(--ui-border),0 8px 16px rgba(0,0,0,.18)!important;
      filter:none!important;
      
      transition:background-color .14s ease,color .14s ease,box-shadow .14s ease!important;
      transform-origin:center center!important;
    }
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button)::before,
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button)::after{
      content:none!important;
      display:none!important;
    }

    /* Enabled normal buttons: hover/focus changes color only; no hover geometry change. */
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):not(:disabled):not(.exit):not(.confirm):not(#mainMenuExitButton):not(#lanLeaveButton):not(#exitRunButton):not(#pauseExitConfirmButton):not(#deathMainMenuButton):hover,
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):not(:disabled):not(.exit):not(.confirm):not(#mainMenuExitButton):not(#lanLeaveButton):not(#exitRunButton):not(#pauseExitConfirmButton):not(#deathMainMenuButton):focus-visible{
      background-color:var(--ui-lime)!important;
      filter:none!important;
      outline:none!important;
      box-shadow:0 5px 0 var(--ui-border),0 8px 16px rgba(0,0,0,.18),0 0 0 2px rgba(204,255,0,.20),0 0 12px rgba(204,255,0,.15)!important;
    }
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):not(:disabled):active{
      background-color:var(--ui-lime-active)!important;
      filter:none!important;
    }

    /* Destructive buttons are dark at rest and rose only while actively targeted. */
    :is(#mainMenuExitButton,#lanLeaveButton,#exitRunButton,#pauseExitConfirmButton,#deathMainMenuButton,.pause-menu-button.exit,.pause-exit-confirm-button.confirm){
      background-color:var(--ui-dark)!important;
    }
    :is(#mainMenuExitButton,#lanLeaveButton,#exitRunButton,#pauseExitConfirmButton,#deathMainMenuButton,.pause-menu-button.exit,.pause-exit-confirm-button.confirm):hover,
    :is(#mainMenuExitButton,#lanLeaveButton,#exitRunButton,#pauseExitConfirmButton,#deathMainMenuButton,.pause-menu-button.exit,.pause-exit-confirm-button.confirm):focus-visible{
      background-color:var(--ui-danger)!important;
      box-shadow:0 5px 0 var(--ui-border),0 8px 16px rgba(0,0,0,.18),0 0 0 2px rgba(200,63,107,.22),0 0 12px rgba(200,63,107,.18)!important;
    }
    :is(#mainMenuExitButton,#lanLeaveButton,#exitRunButton,#pauseExitConfirmButton,#deathMainMenuButton,.pause-menu-button.exit,.pause-exit-confirm-button.confirm):active{
      background-color:var(--ui-danger-active)!important;
    }

    /* Disabled state alone owns the full diagonal hatch. Hover may tint it, but never moves/scales/presses. */
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):disabled{
      
      opacity:.48!important;
      background-color:#303338!important;
      background-image:repeating-linear-gradient(55deg,rgba(0,0,0,.34) 0 3px,transparent 3px 10px)!important;
      transform:none!important;
      box-shadow:0 5px 0 var(--ui-border),0 8px 16px rgba(0,0,0,.16)!important;
    }
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):disabled:hover,
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):disabled:focus-visible,
    :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button):disabled:active{
      background-color:#667800!important;
      transform:none!important;
      filter:none!important;
      box-shadow:0 5px 0 var(--ui-border),0 8px 16px rgba(0,0,0,.16)!important;
    }

    /* Dynamic text contrast: real surrounding outline stays white; plain text becomes black on colored states. */
    .ui-text-plain:hover:not(:disabled),.ui-text-plain:focus-visible:not(:disabled),.ui-text-plain:active:not(:disabled),.ui-text-plain:disabled:hover,
    .ui-text-plain:hover:not(:disabled) *,.ui-text-plain:focus-visible:not(:disabled) *,.ui-text-plain:active:not(:disabled) *,.ui-text-plain:disabled:hover *{color:#050505!important;}
    .ui-text-outlined:hover:not(:disabled),.ui-text-outlined:focus-visible:not(:disabled),.ui-text-outlined:active:not(:disabled),.ui-text-outlined:disabled:hover,
    .ui-text-outlined:hover:not(:disabled) *,.ui-text-outlined:focus-visible:not(:disabled) *,.ui-text-outlined:active:not(:disabled) *,.ui-text-outlined:disabled:hover *{color:#fff!important;}

    /* Selection arrows are their own control family and never inherit capsule geometry. */
    .selection-arrow{
      --fix186-btn-bg:#34373b;
      --fix186-btn-hover:#CCFF00;
      --fix186-btn-active:#A8D600;
      transform:translateY(-50%)!important;
      transform-origin:center center!important;
    }
    .selection-arrow:hover,.selection-arrow:focus-visible{transform:translateY(-50%)!important;}
    .selection-arrow:active{transform:translateY(-50%) scale(.90)!important;}

    /* Return/up-level buttons remain stable capsules at their existing layout anchors. */
    :is(#editorBackButton,#characterSelectBackButton,#mapSelectBackButton,#lanCloseButton){
      width:auto!important;min-width:88px!important;max-width:none!important;
      height:40px!important;min-height:40px!important;max-height:40px!important;
      padding:0 16px!important;
      border-width:5px!important;
      overflow:hidden!important;
      font-weight:950!important;
      letter-spacing:.02em!important;
    }
    #lanCloseButton,#lanCloseButton:hover,#lanCloseButton:focus-visible,#lanCloseButton:active{transform:none!important;}
    #mainMenuSettingsBackButton{
      display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
      height:46px!important;min-height:46px!important;max-height:46px!important;
      margin:0!important;padding:0 16px!important;box-sizing:border-box!important;
      border-width:5px!important;overflow:hidden!important;font-weight:950!important;letter-spacing:.02em!important;
      transform:none!important;
    }
    #mainMenuSettingsBackButton:hover,#mainMenuSettingsBackButton:focus-visible,#mainMenuSettingsBackButton:active{transform:none!important;}
    :is(#editorBackButton,#characterSelectBackButton,#mapSelectBackButton),
    :is(#editorBackButton,#characterSelectBackButton,#mapSelectBackButton):hover,
    :is(#editorBackButton,#characterSelectBackButton,#mapSelectBackButton):focus-visible{transform:translateY(-50%)!important;}
    :is(#editorBackButton,#characterSelectBackButton,#mapSelectBackButton):active{transform:translateY(-50%) scale(.90)!important;}

    /* Editor selected rows keep a quiet selected state without joining danger colors. */
    .editor-record.active{background-color:#4a343c!important;color:#fff!important;}
    :is(.editor-tab,.editor-mini-button,.editor-visual-row button){border-width:3px!important;}

    /* Pause tray: semi-transparent dark gray, no obsolete nine-slice frame. */
    #pauseOverlay .pause-panel{
      background:rgba(50,54,60,.82)!important;
      border-color:#050505!important;
      box-shadow:0 16px 38px rgba(0,0,0,.48)!important;
      backdrop-filter:none!important;
    }
    #pauseOverlay .pause-setting-group{
      background:transparent!important;border:0!important;box-shadow:none!important;
    }
    #pauseOverlay .pause-setting-group::before,#pauseOverlay .pause-setting-group::after{content:none!important;display:none!important;}

    /* Range control family: restored from the user's Fix218 control-art reference. */
    html body .stage input[type="range"]{
      --range-pct:50%;
      appearance:none!important;-webkit-appearance:none!important;
      box-sizing:border-box!important;
      width:100%!important;height:28px!important;min-height:28px!important;
      margin:7px 0!important;padding:0!important;
      border:5px solid #050505!important;border-radius:999px!important;
      background:
        linear-gradient(90deg,#CCFF00 0 var(--range-pct),transparent var(--range-pct) 100%),
        linear-gradient(180deg,#fff 0%,#e6e6e6 46%,#c8c8c8 100%)!important;
      box-shadow:inset 0 5px 11px rgba(0,0,0,.24),inset 0 -3px 6px rgba(255,255,255,.28),0 3px 0 rgba(0,0,0,.92)!important;
      outline:none!important;overflow:visible!important;accent-color:#CCFF00!important;
    }
    html body .stage input[type="range"]:focus-visible{
      box-shadow:inset 0 5px 11px rgba(0,0,0,.24),inset 0 -3px 6px rgba(255,255,255,.28),0 3px 0 rgba(0,0,0,.92),0 0 0 3px rgba(204,255,0,.28)!important;
    }
    html body .stage input[type="range"]::-webkit-slider-runnable-track{
      -webkit-appearance:none!important;appearance:none!important;
      height:18px!important;border:0!important;border-radius:999px!important;
      background:transparent!important;box-shadow:none!important;
    }
    html body .stage input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none!important;appearance:none!important;
      box-sizing:border-box!important;width:30px!important;height:46px!important;margin-top:-14px!important;
      border:5px solid #050505!important;border-radius:999px!important;
      background:
        linear-gradient(#1d1d1d,#1d1d1d) center calc(50% - 7px)/11px 3px no-repeat,
        linear-gradient(#1d1d1d,#1d1d1d) center center/11px 3px no-repeat,
        linear-gradient(#1d1d1d,#1d1d1d) center calc(50% + 7px)/11px 3px no-repeat,
        linear-gradient(180deg,#6b6b6b 0%,#595959 50%,#505050 100%)!important;
      box-shadow:inset 0 7px 10px rgba(255,255,255,.08),inset 0 -7px 10px rgba(0,0,0,.22),0 4px 7px rgba(0,0,0,.45)!important;
      
    }
    html body .stage input[type="range"]:active::-webkit-slider-thumb{}
    html body .stage input[type="range"]::-moz-range-track{
      box-sizing:border-box!important;height:18px!important;border:0!important;border-radius:999px!important;
      background:linear-gradient(180deg,#fff 0%,#e6e6e6 46%,#c8c8c8 100%)!important;
      box-shadow:inset 0 5px 11px rgba(0,0,0,.24)!important;
    }
    html body .stage input[type="range"]::-moz-range-progress{height:18px!important;border:0!important;border-radius:999px 0 0 999px!important;background:#CCFF00!important;}
    html body .stage input[type="range"]::-moz-range-thumb{
      box-sizing:border-box!important;width:30px!important;height:46px!important;border:5px solid #050505!important;border-radius:999px!important;
      background:
        linear-gradient(#1d1d1d,#1d1d1d) center calc(50% - 7px)/11px 3px no-repeat,
        linear-gradient(#1d1d1d,#1d1d1d) center center/11px 3px no-repeat,
        linear-gradient(#1d1d1d,#1d1d1d) center calc(50% + 7px)/11px 3px no-repeat,
        linear-gradient(180deg,#6b6b6b 0%,#595959 50%,#505050 100%)!important;
      box-shadow:inset 0 7px 10px rgba(255,255,255,.08),inset 0 -7px 10px rgba(0,0,0,.22),0 4px 7px rgba(0,0,0,.45)!important;
    }

    /* Boolean switch is not a button-theme member. Hover only adds a cheap white outline/glow. */
    html body .stage button.pause-toggle[role="switch"]{
      --toggle-knob-size:24px;
      --toggle-knob-travel:36px;
      position:relative!important;isolation:isolate!important;
      width:72px!important;min-width:72px!important;max-width:72px!important;
      height:34px!important;min-height:34px!important;max-height:34px!important;
      padding:0!important;border:4px solid #050505!important;border-radius:999px!important;
      background:#33363a!important;background-image:linear-gradient(180deg,#4a4d52,#2d3034)!important;
      color:transparent!important;font-size:0!important;line-height:0!important;
      transform:none!important;filter:none!important;outline:none!important;
      box-shadow:inset 0 6px 9px rgba(0,0,0,.26),inset 0 -4px 7px rgba(255,255,255,.045),0 3px 0 rgba(0,0,0,.92)!important;
      transition:box-shadow .10s ease!important;overflow:visible!important;
    }
    html body .stage button.pause-toggle[role="switch"]::before{content:none!important;display:none!important;}
    html body .stage button.pause-toggle[role="switch"]::after{
      content:''!important;display:block!important;position:absolute!important;box-sizing:border-box!important;
      left:3px!important;right:auto!important;top:50%!important;
      width:var(--toggle-knob-size)!important;height:var(--toggle-knob-size)!important;
      transform:translate(0,-50%)!important;
      border:4px solid #050505!important;border-radius:50%!important;
      background:linear-gradient(180deg,#696d72,#4c5055)!important;
      box-shadow:inset 0 4px 6px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.45)!important;
      transition:transform .12s cubic-bezier(.22,.75,.25,1)!important;
      pointer-events:none!important;
    }
    html body .stage button.pause-toggle[role="switch"].on{
      background-color:#CCFF00!important;
      background-image:radial-gradient(ellipse at 36% 50%,#efff45 0%,#dfff00 38%,#CCFF00 62%,#8eac00 100%)!important;
    }
    html body .stage button.pause-toggle[role="switch"].on::after{
      left:3px!important;right:auto!important;transform:translate(var(--toggle-knob-travel),-50%)!important;
    }
    html body .stage button.pause-toggle[role="switch"]:hover,
    html body .stage button.pause-toggle[role="switch"]:focus-visible{
      transform:none!important;filter:none!important;
      box-shadow:inset 0 6px 9px rgba(0,0,0,.26),inset 0 -4px 7px rgba(255,255,255,.045),0 3px 0 rgba(0,0,0,.92),0 0 0 2px rgba(255,255,255,.92),0 0 10px rgba(255,255,255,.62)!important;
    }
    html body .stage button.pause-toggle[role="switch"].on:hover,
    html body .stage button.pause-toggle[role="switch"].on:focus-visible{
      box-shadow:inset 0 6px 9px rgba(0,0,0,.15),inset 0 -4px 7px rgba(0,0,0,.12),0 3px 0 rgba(0,0,0,.92),0 0 0 2px rgba(255,255,255,.92),0 0 10px rgba(255,255,255,.62)!important;
    }
    html body .stage button.pause-toggle[role="switch"]:active{transform:none!important;}

    /* Capsule vertical scrollbars. */
    html body .stage *{scrollbar-width:thin;scrollbar-color:#8c9097 #141619;}
    html body .stage *::-webkit-scrollbar{width:14px;height:14px;}
    html body .stage *::-webkit-scrollbar-track{
      background:#141619;border:3px solid #050505;border-radius:999px;
      box-shadow:0 0 7px rgba(0,0,0,.75);
    }
    html body .stage *::-webkit-scrollbar-thumb{
      min-height:28px;background:#8c9097;border:3px solid #050505;border-radius:999px;
      box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 7px rgba(255,255,255,.28);
    }
    html body .stage *::-webkit-scrollbar-thumb:hover{background:#a9adb4;}

    @media(max-width:760px){
      :is(.main-menu-button,.pause-button,.pause-menu-button,.pause-exit-confirm-button,.upgrade-action-button,.editor-tab,.editor-mini-button,.editor-record,.editor-visual-row button,.selection-back-button){border-width:3px!important;}
      html body .stage button.pause-toggle[role="switch"]{--toggle-knob-size:22px;--toggle-knob-travel:32px;width:66px!important;min-width:66px!important;max-width:66px!important;height:32px!important;min-height:32px!important;max-height:32px!important;}
      html body .stage button.pause-toggle[role="switch"]::after{left:3px!important;right:auto!important;width:var(--toggle-knob-size)!important;height:var(--toggle-knob-size)!important;}
      html body .stage button.pause-toggle[role="switch"].on::after{left:3px!important;right:auto!important;transform:translate(var(--toggle-knob-travel),-50%)!important;}
      html body .stage input[type="range"]{height:24px!important;min-height:24px!important;border-width:4px!important;}
      html body .stage input[type="range"]::-webkit-slider-runnable-track{height:16px!important;}
      html body .stage input[type="range"]::-webkit-slider-thumb{width:27px!important;height:40px!important;margin-top:-12px!important;border-width:4px!important;}
      html body .stage input[type="range"]::-moz-range-track,html body .stage input[type="range"]::-moz-range-progress{height:16px!important;}
      html body .stage input[type="range"]::-moz-range-thumb{width:27px!important;height:40px!important;border-width:4px!important;}
    }



    /* ===== Dynamic UI world camera =====
       One scene always equals the actual visible Stage size. Adjacent scenes therefore stay outside
       the viewport on 16:9, 21:9, 32:9 and 4K ultrawide displays alike. */
    .main-menu-shell.menu-camera-root{
      position:relative!important;
      z-index:1!important;
      display:block!important;
      width:100%!important;
      height:100%!important;
      max-width:none!important;
      min-width:0!important;
      min-height:0!important;
      padding:0!important;
      margin:0!important;
      border:0!important;
      border-image:none!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:hidden!important;
    }
    .main-menu-shell.menu-camera-root::before,
    .main-menu-shell.menu-camera-root::after{display:none!important;}
    .menu-camera-viewport{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:hidden;
      clip-path:inset(0);
      contain:layout paint style;
      isolation:isolate;
    }
    .menu-camera-world{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      transform:translate3d(0,0,0);
      transform-origin:0 0;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }
    .menu-camera-scene{
      position:absolute;
      width:100%;
      height:100%;
      box-sizing:border-box;
      overflow:hidden;
      contain:layout paint style;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }
    .menu-camera-scene--home{
      display:grid;
      place-items:center;
      padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    }
    .menu-camera-scene--selection{
      display:flex;
      flex-direction:column;
      padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    }
    .menu-camera-scene .selection-panel.visible{
      position:relative!important;
      display:flex!important;
      flex-direction:column!important;
      width:100%!important;
      height:100%!important;
      min-height:0!important;
    }
    .menu-camera-scene--home > .main-menu-home,
    .menu-camera-scene--home > .main-menu-settings{
      grid-area:1 / 1;
    }
    .menu-camera-scene--home > .editor-panel.visible{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
    }
    .menu-camera-scene.is-suspended{
      visibility:hidden!important;
      pointer-events:none!important;
      content-visibility:hidden;
    }
    .main-menu-overlay.menu-camera-moving .menu-camera-scene{
      pointer-events:none!important;
    }
    .main-menu-overlay.menu-camera-moving .menu-camera-world{
      will-change:transform;
    }
    @media (prefers-reduced-motion: reduce){
      .menu-camera-world{scroll-behavior:auto;}
    }



    /* ===== v8: whole-card quality tint + top labels placed fully inside the new card ===== */
    .upgrade-card .card-shell-base{
      position:absolute!important;
      inset:0!important;
      z-index:0!important;
      background-image:var(--v24-card-shell, var(--fix125-card-shell))!important;
      background-size:100% 100%!important;
      background-position:center!important;
      background-repeat:no-repeat!important;
      isolation:isolate!important;
    }
    .upgrade-card .card-shell-tint{
      display:block!important;
      position:absolute!important;
      inset:0!important;
      z-index:1!important;
      border-radius:0!important;
      background:linear-gradient(180deg,var(--fix140-quality-top) 0%,var(--fix140-quality-mid) 43%,var(--fix140-quality-bottom) 100%)!important;
      background-color:transparent!important;
      mix-blend-mode:color!important;
      opacity:.92!important;
      pointer-events:none!important;
    }
    .upgrade-card.rarity-common .card-shell-tint{
      mix-blend-mode:soft-light!important;
      opacity:.84!important;
    }
    .upgrade-card .card-shell-base{
      filter:brightness(.92) contrast(1.09)
        drop-shadow(0 -8px 7px var(--fix140-quality-glow))
        drop-shadow(0 11px 9px var(--fix140-quality-glow))!important;
    }
    .upgrade-card.rarity-common .card-shell-base{
      filter:brightness(.90) contrast(1.10)
        drop-shadow(0 -8px 8px rgba(255,255,255,.42))
        drop-shadow(0 10px 9px rgba(255,255,255,.44))
        drop-shadow(0 8px 8px rgba(0,0,0,.42))!important;
    }

    /* Keep all visible card content above the quality wash. */
    .upgrade-card > .card-type-label,
    .upgrade-card > .card-level-badge,
    .upgrade-card > .card-icon-zone,
    .upgrade-card > .card-name-zone,
    .upgrade-card > .card-desc-zone,
    .upgrade-card > .card-key-hint,
    .upgrade-card > .card-key-hint-fixed,
    .upgrade-card > .card-spawn-sweep-layer{
      z-index:6!important;
    }

    /* Put tag / count badge safely inside the card instead of floating outside the top edge. */
    .upgrade-card > .card-type-label,
    .upgrade-card > .card-level-badge{
      top:6.9%!important;
      max-width:28%!important;
      padding:2px 7px!important;
      font-size:clamp(6.5px,.60vw,10px)!important;
      line-height:1.1!important;
    }
    .upgrade-card > .card-type-label{left:8.4%!important;right:auto!important;transform:none!important;}
    .upgrade-card > .card-level-badge{right:8.4%!important;left:auto!important;transform:none!important;}

    @media(max-height:620px){
      .upgrade-card > .card-type-label,
      .upgrade-card > .card-level-badge{
        top:7.2%!important;
        max-width:29%!important;
        padding:2px 5px!important;
        font-size:5.8px!important;
      }
    }



    /* ===== Baseline v11: full-stage dot-wave transition layer ===== */
    #sceneDotTransitionCanvas{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
      z-index:2147480000!important;
      display:block!important;
      opacity:0!important;
      visibility:hidden!important;
      pointer-events:none!important;
      touch-action:none!important;
      background:transparent!important;
      image-rendering:auto!important;
      contain:strict!important;
    }
    #sceneDotTransitionCanvas.active{
      opacity:1!important;
      visibility:visible!important;
      pointer-events:auto!important;
    }



    /* ===== v19: main-menu composition ===== */
    /* v23: apply final home geometry on the first CSS frame, before camera-scene JS mounts it. */
    #mainMenuOverlay .main-menu-home{
      position:relative!important;width:100%!important;height:100%!important;min-height:0!important;overflow:visible!important;
    }
    #mainMenuOverlay .main-menu-home{
      position:relative!important;
      width:100%!important;
      height:100%!important;
      min-height:0!important;
      overflow:visible!important;
    }

    /* Keep the title/logo in the upper half, at 3x its previous type scale. */
    #mainMenuOverlay .main-menu-home .main-menu-title{
      position:absolute!important;
      z-index:12!important;
      left:50%!important;
      top:20%!important;
      width:max-content!important;
      max-width:92vw!important;
      margin:0!important;
      font-size:clamp(84px,10.2vw,138px)!important;
      line-height:.96!important;
      white-space:nowrap!important;
      transform-origin:50% 55%!important;
      animation:v19MainMenuLogoSineSway 5.6s linear infinite!important;
      will-change:transform;
      pointer-events:none!important;
    }
    @keyframes v19MainMenuLogoSineSway{
      0%   {transform:translate(-50%,-50%) rotate(-3.8deg);}
      12.5%{transform:translate(-50%,-50%) rotate(-2.7deg);}
      25%  {transform:translate(-50%,-50%) rotate(0deg);}
      37.5%{transform:translate(-50%,-50%) rotate(2.7deg);}
      50%  {transform:translate(-50%,-50%) rotate(3.8deg);}
      62.5%{transform:translate(-50%,-50%) rotate(2.7deg);}
      75%  {transform:translate(-50%,-50%) rotate(0deg);}
      87.5%{transform:translate(-50%,-50%) rotate(-2.7deg);}
      100% {transform:translate(-50%,-50%) rotate(-3.8deg);}
    }

    /* Shift the full home-button stack down by exactly two current button-height ranges. */
    #mainMenuOverlay .main-menu-home .main-menu-actions{
      transform:translateY(clamp(124px,15.2vh,160px))!important;
    }

    @media(max-width:760px){
      #mainMenuOverlay .main-menu-home .main-menu-title{
        top:18%!important;
        font-size:clamp(72px,11.5vw,96px)!important;
        max-width:94vw!important;
      }
      #mainMenuOverlay .main-menu-home .main-menu-actions{
        transform:translateY(116px)!important;
      }
    }

    @media(prefers-reduced-motion:reduce){
      #mainMenuOverlay .main-menu-home .main-menu-title{
        animation:none!important;
        transform:translate(-50%,-50%) rotate(0deg)!important;
        will-change:auto!important;
      }
    }



    /* ===== v24: current-only mechanism/item card layout + smooth hover selection ===== */
    /* v44: replaced large card shell art with the newly provided grayscale card templates. */
    /* v58: wheel carousel selection + closer damage icons + user-specified card/item replacements. */
    /* v45: updated mechanism/item card shell colors using the latest two user-provided recolor images. */
    /* v46: unified in-world character display sizes. */
    /* v47: restored the large HUD to v45 and fixed the overhead player HUD shield segment + number size. */
    /* v51: restored the original adaptive shared overhead HP+shield HUD behavior from the earlier correct implementation. */
    :root{
      --v24-mechanism-card-shell:url("../assets/runtime/extracted__asset-0005-527389936ee1.png");
      --v24-item-card-shell:url("../assets/runtime/extracted__asset-0006-5d7044074522.png");
    }

    .upgrade-card{
      --v24-card-shell:var(--v24-mechanism-card-shell);
      width:clamp(160px,30.5vh,315px)!important;
      height:auto!important;
      aspect-ratio:439/1199!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      overflow:visible!important;
      isolation:isolate!important;
    }
    .upgrade-card.item-card{--v24-card-shell:var(--v24-item-card-shell);}

    .upgrade-card .card-shell-base{
      position:absolute!important;inset:0!important;z-index:0!important;
      background-image:var(--v24-card-shell)!important;
      background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;
    }
    .upgrade-card .card-shell-tint{
      display:block!important;position:absolute!important;inset:0!important;z-index:1!important;
      background:linear-gradient(180deg,var(--fix140-quality-top) 0%,var(--fix140-quality-mid) 43%,var(--fix140-quality-bottom) 100%)!important;
      mix-blend-mode:color!important;opacity:.90!important;pointer-events:none!important;
      -webkit-mask-image:var(--v24-card-shell)!important;mask-image:var(--v24-card-shell)!important;
      -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
      -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
      -webkit-mask-position:center!important;mask-position:center!important;
    }
    .upgrade-card.rarity-common .card-shell-tint{mix-blend-mode:soft-light!important;opacity:.76!important;}

    /* v23: every transient card state keeps the current mechanism/item shell.
       No legacy card image is allowed during spawn, selection commit, whitening or dismissal. */
    .upgrade-card .card-spawn-sweep-layer,
    .upgrade-card.holy-selected::after{
      -webkit-mask-image:var(--v24-card-shell)!important;
      mask-image:var(--v24-card-shell)!important;
      -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
      -webkit-mask-position:center!important;mask-position:center!important;
      -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
    }
    .upgrade-card .card-shell-base,
    .upgrade-card.selected .card-shell-base,
    .upgrade-card.holy-selected .card-shell-base,
    .upgrade-card.dismissed .card-shell-base{
      background-image:var(--v24-card-shell)!important;
      background-size:100% 100%!important;
      background-position:center!important;
      background-repeat:no-repeat!important;
    }

    /* Red region: x 44..391, y 74..285. */
    .upgrade-card .card-icon-zone{
      position:absolute!important;
      left:10.023%!important;right:10.934%!important;top:6.172%!important;height:17.681%!important;
      width:auto!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;
      display:block!important;overflow:hidden!important;z-index:6!important;
      clip-path:inset(0 round 12% 12% 4% 4%)!important;
    }
    .upgrade-card .card-icon,
    .upgrade-card .card-icon.card-icon-image-wrap{
      position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
      max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;border:0!important;
      background:transparent!important;overflow:hidden!important;display:block!important;
    }
    .upgrade-card .card-icon-image-asset,
    .upgrade-card .card-icon.card-icon-image-wrap .card-icon-image-asset{
      position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
      max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;
    }
    .upgrade-card .card-icon:not(.card-icon-image-wrap){display:grid!important;place-items:center!important;font-size:clamp(28px,4.5vh,54px)!important;}

    /* Green region: x 23..410, y 286..404. */
    .upgrade-card .card-name-zone{
      position:absolute!important;
      left:5.239%!important;right:6.606%!important;top:23.853%!important;height:9.925%!important;
      width:auto!important;min-height:0!important;padding:0 7%!important;border:0!important;border-radius:0!important;
      background:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important;
      overflow:hidden!important;z-index:6!important;
      font-size:clamp(14px,1.28vw,23px)!important;line-height:1.08!important;font-weight:950!important;
    }

    /* Blue region: x 28..407, y 405..875. */
    .upgrade-card .card-desc-zone{
      position:absolute!important;
      left:6.378%!important;right:7.289%!important;top:33.778%!important;bottom:auto!important;height:39.200%!important;
      width:auto!important;min-height:0!important;padding:0!important;gap:0!important;border:0!important;background:transparent!important;
      display:block!important;overflow:hidden!important;z-index:6!important;
    }
    .upgrade-card .card-next-effect{
      position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;
      padding:7% 7.5%!important;overflow:auto!important;scrollbar-width:none!important;
      color:#f5f7fa!important;font-size:clamp(9px,.92vw,15px)!important;line-height:1.48!important;text-align:left!important;
    }
    .upgrade-card .card-next-effect::-webkit-scrollbar{display:none!important;}

    /* Pink region: x 28..407, y 876..1123. Mechanism cards only. */
    .upgrade-card .card-max-preview{
      display:block!important;position:absolute!important;
      left:6.378%!important;right:7.289%!important;top:73.061%!important;height:20.684%!important;
      width:auto!important;min-height:0!important;margin:0!important;padding:7% 7.5% 6%!important;
      border:0!important;background:transparent!important;overflow:auto!important;scrollbar-width:none!important;
      color:#f4f6f8!important;font-size:clamp(8px,.80vw,13px)!important;line-height:1.42!important;text-align:left!important;z-index:6!important;
    }
    .upgrade-card .card-max-preview::-webkit-scrollbar{display:none!important;}
    .upgrade-card.item-card .card-max-preview,
    .upgrade-card.item-card .card-max-preview.item-preview-empty{display:none!important;}

    /* Yellow region: x 108..327, y 1124..1173. This is the type label area. */
    .upgrade-card > .card-type-label{
      position:absolute!important;
      left:24.602%!important;right:25.513%!important;top:93.745%!important;height:4.087%!important;
      width:auto!important;max-width:none!important;min-width:0!important;padding:0 5%!important;
      border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
      color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;
      font:950 clamp(7px,.66vw,11px)/1 'Microsoft YaHei',sans-serif!important;letter-spacing:.08em!important;
      white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;z-index:7!important;
    }

    /* Level/count badge uses the reserved top-center cap. */
    .upgrade-card > .card-level-badge{
      position:absolute!important;top:2.25%!important;left:50%!important;right:auto!important;z-index:7!important;
      transform:translateX(-50%)!important;
      max-width:34%!important;min-width:0!important;padding:2px 7px!important;font-size:clamp(7px,.64vw,11px)!important;
      text-align:center!important;white-space:nowrap!important;
    }

    /* Keep the choice-index UI detached from the larger card body as before. */
    .upgrade-card > .card-key-hint{z-index:8!important;}

    @media(max-height:620px){
      .upgrade-card,
      .upgrade-card-row[data-count="4"] .upgrade-card,
      .upgrade-card-row[data-count="5"] .upgrade-card{
        width:min(29.2vh,166px)!important;height:auto!important;aspect-ratio:439/1199!important;
      }
      .upgrade-card .card-name-zone{font-size:9px!important;}
      .upgrade-card .card-next-effect{font-size:7.1px!important;line-height:1.30!important;}
      .upgrade-card .card-max-preview{font-size:6.4px!important;line-height:1.24!important;}
      .upgrade-card > .card-type-label{font-size:6px!important;}
      .upgrade-card > .card-level-badge{top:2.15%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;font-size:6px!important;padding:1px 5px!important;}
    }



    /* v24: hovering/focusing means "this card is being considered".
       Individual `scale` composes with pointer perspective tilt instead of replacing it. */
    .upgrade-card:not(.holy-selected):not(.selected):not(.dismissed){
      scale:1;
      transform-origin:50% 50%!important;
      transition-property:scale,filter!important;
      transition-duration:.22s,.16s!important;
      transition-timing-function:cubic-bezier(.22,.75,.25,1),ease!important;
    }
    .upgrade-card.card-tilt-ready:not(.holy-selected):not(.selected):not(.dismissed){
      transition:transform .18s cubic-bezier(.2,.72,.2,1),scale .22s cubic-bezier(.22,.75,.25,1),filter .16s ease,box-shadow .16s ease,border-color .16s ease!important;
    }
    .upgrade-card.card-tilt-ready.card-tilt-active:not(.holy-selected):not(.selected):not(.dismissed){
      transition:transform .055s cubic-bezier(.18,.70,.22,1),scale .22s cubic-bezier(.22,.75,.25,1),filter .16s ease,box-shadow .16s ease,border-color .16s ease!important;
    }
    @media(hover:hover) and (pointer:fine){
      .upgrade-card:hover:not(.holy-selected):not(.selected):not(.dismissed),
      .upgrade-card:focus-visible:not(.holy-selected):not(.selected):not(.dismissed){
        scale:1.035;
      }
    }
    @media(prefers-reduced-motion:reduce){
      .upgrade-card:not(.holy-selected):not(.selected):not(.dismissed){
        transition-duration:.01ms!important;
      }
    }


    /* ===== v28: mobile joystick settings + layout editor (aspect-safe editor / stable toggles) ===== */
    .mobile-settings-entry-button,
    .mobile-control-layout-entry{
      width:100%;min-height:42px;margin-top:10px;padding:0 16px;
      border:4px solid #050505;border-radius:999px;background:#33363a;color:#fff;
      font:900 12px/1 'Microsoft YaHei',sans-serif;letter-spacing:.04em;
      box-shadow:0 4px 0 #050505;transition:background-color .12s ease,box-shadow .12s ease;
    }
    .mobile-settings-entry-button:hover,.mobile-settings-entry-button:focus-visible,
    .mobile-control-layout-entry:hover,.mobile-control-layout-entry:focus-visible{
      background:#CCFF00;color:#050505;box-shadow:0 4px 0 #050505,0 0 14px rgba(204,255,0,.22);
    }
    .mobile-settings-entry-button:active,.mobile-control-layout-entry:active{transform:none!important;}
    #mainMenuSettingsPanel{
      width:min(620px,calc(100vw - 36px));box-sizing:border-box;
    }
    #mainMenuSettingsPanel .main-menu-setting-group{width:100%;box-sizing:border-box;}
    #mainMenuSettingsPanel #mainMenuSettingsBackButton{width:100%!important;box-sizing:border-box!important;}

    .mobile-controls-settings-modal,
    .mobile-control-layout-editor{
      position:absolute;inset:0;z-index:2600;display:none;place-items:center;
      background:rgba(6,8,11,.78);backdrop-filter:none;
      pointer-events:none;
    }
    .mobile-controls-settings-modal.visible,
    .mobile-control-layout-editor.visible{display:grid;pointer-events:auto;}
    .mobile-controls-settings-panel{
      width:min(600px,calc(100% - 32px));max-height:min(720px,calc(100% - 32px));overflow:auto;
      padding:24px;border:4px solid #050505;border-radius:22px;background:rgba(49,53,58,.96);
      box-shadow:0 18px 60px rgba(0,0,0,.58);box-sizing:border-box;
    }
    .mobile-controls-settings-panel h2{
      margin:0 0 18px;text-align:center;color:#fff;
      font:950 clamp(20px,2.2vw,30px)/1.15 'Microsoft YaHei',sans-serif;
      letter-spacing:.06em;text-shadow:0 3px 0 #050505;
    }
    .mobile-controls-settings-body{display:grid;gap:12px;}
    .mobile-control-setting-row{
      display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;
      min-height:64px;padding:13px 14px;border:2px solid rgba(255,255,255,.12);border-radius:14px;
      background:rgba(18,20,23,.55);color:#fff;
    }
    .mobile-control-setting-row strong{display:block;font-size:14px;letter-spacing:.03em;}
    .mobile-control-setting-row small{display:block;margin-top:5px;color:#aeb4bc;font-size:10px;line-height:1.45;}
    .mobile-control-setting-mode{grid-template-columns:minmax(0,1fr) minmax(180px,220px);}
    .mobile-control-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
    .mobile-control-choice{
      min-height:38px;padding:0 10px;border:4px solid #050505;border-radius:999px;
      background:#33363a;color:#fff;font:900 11px/1 'Microsoft YaHei',sans-serif;
      box-shadow:none!important;transform:none!important;
    }
    .mobile-control-choice:hover,.mobile-control-choice:focus-visible{background:#4a4e53!important;color:#fff!important;transform:none!important;}
    .mobile-control-choice.selected,.mobile-control-choice.selected:hover,.mobile-control-choice.selected:focus-visible{
      background:#CCFF00!important;color:#050505!important;box-shadow:0 0 10px rgba(204,255,0,.22)!important;
    }
    .mobile-controls-settings-close{width:100%!important;margin-top:16px!important;}

    .mobile-control-layout-editor{z-index:2700;background:rgba(4,5,7,.88);overflow:hidden;}
    .mobile-control-layout-editor-canvas{
      position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;
    }
    .mobile-control-layout-toolbar{
      position:absolute;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);
      width:min(720px,calc(100% - 28px));padding:15px 16px 14px;box-sizing:border-box;
      border:4px solid #050505;border-radius:18px;background:rgba(45,48,53,.94);
      box-shadow:0 12px 34px rgba(0,0,0,.52);pointer-events:auto;
    }
    .mobile-control-layout-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:#fff;margin-bottom:9px;}
    .mobile-control-layout-heading strong{font:950 16px/1 'Microsoft YaHei',sans-serif;}
    .mobile-control-layout-heading span{color:#bcc2c9;font:700 10px/1.3 'Microsoft YaHei',sans-serif;text-align:right;}
    .mobile-control-layout-ranges{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .mobile-control-layout-ranges .pause-setting-row{grid-template-columns:68px minmax(0,1fr) 46px!important;min-height:34px!important;font-size:11px!important;gap:8px!important;}
    .mobile-control-layout-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px;}
    .mobile-control-layout-actions .main-menu-button{width:100%!important;min-height:38px!important;margin:0!important;}

    @media(max-width:760px), (max-height:620px){
      .mobile-controls-settings-panel{width:min(620px,calc(100% - 20px));max-height:calc(100% - 16px);padding:14px 15px;border-radius:16px;}
      .mobile-controls-settings-panel h2{margin-bottom:10px;font-size:18px;}
      .mobile-control-setting-row{min-height:50px;padding:9px 10px;gap:10px;}
      .mobile-control-setting-row strong{font-size:11px;}.mobile-control-setting-row small{font-size:8px;margin-top:3px;}
      .mobile-control-setting-mode{grid-template-columns:minmax(0,1fr) 180px;}
      .mobile-control-choice{min-height:32px;font-size:9px;border-width:3px;}
      .mobile-control-layout-toolbar{top:max(8px,env(safe-area-inset-top));padding:9px 10px;border-radius:14px;}
      .mobile-control-layout-heading{margin-bottom:5px;}.mobile-control-layout-heading strong{font-size:12px;}.mobile-control-layout-heading span{font-size:8px;}
      .mobile-control-layout-ranges{gap:8px;}.mobile-control-layout-ranges .pause-setting-row{grid-template-columns:58px minmax(0,1fr) 40px!important;font-size:9px!important;}
      .mobile-control-layout-actions{margin-top:5px;gap:7px;}.mobile-control-layout-actions .main-menu-button{min-height:32px!important;font-size:9px!important;}
    }



    /* ===== v29: hard-stabilize boolean toggle / settings back / layout editor geometry ===== */
    html body .stage button.pause-toggle[role="switch"]{
      --toggle-knob-size:24px;
      --toggle-knob-x:4px;
      position:relative!important;
      width:72px!important;min-width:72px!important;max-width:72px!important;
      height:34px!important;min-height:34px!important;max-height:34px!important;
      padding:0!important;overflow:visible!important;
    }
    html body .stage button.pause-toggle[role="switch"]::after{
      left:var(--toggle-knob-x)!important;
      right:auto!important;
      top:50%!important;
      width:var(--toggle-knob-size)!important;
      height:var(--toggle-knob-size)!important;
      transform:translateY(-50%)!important;
      transition:left .12s cubic-bezier(.22,.75,.25,1),box-shadow .10s ease!important;
      will-change:left!important;
    }
    html body .stage button.pause-toggle[role="switch"].on{
      --toggle-knob-x:36px;
    }
    html body .stage button.pause-toggle[role="switch"].on::after{
      left:var(--toggle-knob-x)!important;
      right:auto!important;
      transform:translateY(-50%)!important;
    }
    html body .stage button.pause-toggle[role="switch"]:hover::after,
    html body .stage button.pause-toggle[role="switch"]:focus-visible::after,
    html body .stage button.pause-toggle[role="switch"]:active::after{
      transform:translateY(-50%)!important;
    }

    #mainMenuSettingsPanel.main-menu-settings.visible{
      width:min(620px,calc(100dvw - 36px))!important;
      max-width:calc(100dvw - 36px)!important;
      margin-left:auto!important;
      margin-right:auto!important;
      box-sizing:border-box!important;
    }
    #mainMenuSettingsPanel .main-menu-setting-group{
      width:100%!important;
      box-sizing:border-box!important;
    }
    #mainMenuSettingsPanel #mainMenuSettingsBackButton{
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      position:static!important;
      left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
      width:100%!important;
      min-width:100%!important;
      max-width:100%!important;
      height:48px!important;
      min-height:48px!important;
      max-height:48px!important;
      margin:0!important;
      padding:0 16px!important;
      box-sizing:border-box!important;
      transform:none!important;
    }
    #mainMenuSettingsPanel #mainMenuSettingsBackButton:hover,
    #mainMenuSettingsPanel #mainMenuSettingsBackButton:focus-visible,
    #mainMenuSettingsPanel #mainMenuSettingsBackButton:active{
      transform:none!important;
    }

    .mobile-control-layout-editor-canvas{
      width:100%!important;
      height:100%!important;
      max-width:none!important;
      max-height:none!important;
      aspect-ratio:auto!important;
      object-fit:fill!important;
    }

    @media(max-width:760px){
      html body .stage button.pause-toggle[role="switch"]{
        --toggle-knob-size:22px;
        --toggle-knob-x:3px;
        width:66px!important;min-width:66px!important;max-width:66px!important;
        height:32px!important;min-height:32px!important;max-height:32px!important;
      }
      html body .stage button.pause-toggle[role="switch"].on{
        --toggle-knob-x:32px;
      }
    }



    /* ===== v30: shared stat tray component =====
       One DOM tray is re-parented between character-select / upgrade / pause / death.
       Context classes only control placement/available size; visual language stays identical. */
    .stat-tray-mount{
      min-width:0!important;
      min-height:0!important;
      box-sizing:border-box!important;
    }
    .shared-stat-tray{
      width:100%;
      height:100%;
      min-height:0;
      box-sizing:border-box;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border:3px solid #050505;
      border-radius:16px;
      background:rgba(48,52,58,.88);
      box-shadow:0 12px 28px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.055);
      color:#fff;
    }
    .shared-stat-tray__header{
      flex:0 0 auto;
      min-height:42px;
      padding:9px 12px 8px;
      box-sizing:border-box;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom:2px solid rgba(5,5,5,.78);
      background:rgba(24,26,30,.48);
    }
    .shared-stat-tray__title{
      min-width:0;
      color:#fff;
      font:950 clamp(11px,.88vw,15px)/1.15 'Microsoft YaHei',sans-serif;
      letter-spacing:.12em;
      white-space:nowrap;
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    }
    .shared-stat-tray__meta{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#d9dce0;
      font:850 clamp(9px,.72vw,12px)/1.15 'Microsoft YaHei',sans-serif;
      font-variant-numeric:tabular-nums;
      text-align:right;
    }
    .shared-stat-tray__list{
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
      padding:5px 10px 8px;
      box-sizing:border-box;
      scrollbar-width:thin;
      scrollbar-color:#777 #15171a;
    }
    .shared-stat-tray__list::-webkit-scrollbar{width:11px;}
    .shared-stat-tray__list::-webkit-scrollbar-track{
      margin:5px 0;
      border:3px solid #050505;
      border-radius:999px;
      background:#1a1c20;
      box-shadow:0 0 6px rgba(0,0,0,.7);
    }
    .shared-stat-tray__list::-webkit-scrollbar-thumb{
      border:3px solid #050505;
      border-radius:999px;
      background:#777b80;
      box-shadow:0 0 5px rgba(255,255,255,.28);
    }
    .shared-stat-tray__row{
      min-height:29px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:14px;
      padding:5px 2px;
      box-sizing:border-box;
      border-bottom:1px solid rgba(5,5,5,.48);
      font:800 clamp(9px,.75vw,12px)/1.25 'Microsoft YaHei',sans-serif;
    }
    .shared-stat-tray__row:last-child{border-bottom:0;}
    .shared-stat-tray__label{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#b8bec6;
      text-shadow:0 1px 2px rgba(0,0,0,.72);
    }
    .shared-stat-tray__value{
      color:#fff;
      text-align:right;
      white-space:nowrap;
      font-weight:950;
      font-variant-numeric:tabular-nums;
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    }
    .shared-stat-tray__value[data-tone="positive"]{color:#CCFF00;}
    .shared-stat-tray__value[data-tone="negative"]{color:#d94a76;}

    /* Character-select: only placement differs. */
    #characterStatsTrayMount.character-core-panel{
      padding:0!important;
      border-right:0!important;
      overflow:hidden!important;
    }
    #characterStatsTrayMount .shared-stat-tray{max-height:100%;}

    /* Upgrade: old side-panel chrome is disabled; shared tray owns the visuals. */
    #upgradeStatsTrayMount.upgrade-side-panel{
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:hidden!important;
    }


    /* ===== v61: upgrade right-column layout ===== */
    .upgrade-right-stack{
      min-width:0;
      min-height:0;
      display:grid;
      grid-template-rows:clamp(74px,9vh,96px) minmax(0,1fr) clamp(86px,10.5vh,112px);
      gap:clamp(8px,1vh,12px);
      align-items:stretch;
    }
    .upgrade-run-info-spacer{min-height:0;pointer-events:none;}
    #upgradeStatsTrayMount{min-height:0!important;}
    #upgradeStatsTrayMount .shared-stat-tray{height:100%!important;}
    .upgrade-resource-window{
      min-width:0;
      min-height:0;
      box-sizing:border-box;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      align-items:stretch;
      padding:9px;
      border:3px solid #050505;
      border-radius:14px;
      background:rgba(48,52,58,.90);
      box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05);
      color:#fff;
    }
    .upgrade-resource-window__row{
      min-width:0;
      display:grid;
      grid-template-rows:minmax(0,1fr) auto;
      align-items:center;
      justify-items:center;
      justify-content:center;
      gap:3px;
      padding:5px 4px 6px;
      box-sizing:border-box;
      border:1px solid rgba(5,5,5,.58);
      border-radius:8px;
      background:rgba(24,26,30,.42);
      color:#b8bec6;
    }
    .upgrade-resource-window__icon{
      display:block;
      height:48px;
      width:auto;
      max-width:64px;
      object-fit:contain;
      image-rendering:auto;
    }
    .upgrade-resource-window__row strong{
      color:#fff;
      font:950 16px/1 ui-monospace,Consolas,monospace;
      font-variant-numeric:tabular-nums;
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
      white-space:nowrap;
    }
    #upgradeOverlay .upgrade-pool-title{display:none!important;}
    #upgradeOverlay .card-bottom-actions{align-items:end;}
    .upgrade-refresh-stack{
      min-width:0;
      display:grid;
      grid-template-rows:auto auto;
      gap:4px;
      align-items:end;
    }
    .upgrade-refresh-stack .upgrade-action-button{width:100%;}
    #shopXpText.upgrade-xp-stock{
      justify-self:end;
      display:block;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      border:0;
      border-radius:0;
      padding:0 2px;
      background:transparent;
      color:#fff;
      font:900 clamp(9px,.78vw,12px)/1.1 'Microsoft YaHei',sans-serif;
      text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
      text-align:right;
    }
    @media(max-width:760px){
      .upgrade-right-stack{
        grid-template-rows:58px minmax(0,1fr) 70px;
        gap:5px;
      }
      .upgrade-resource-window{padding:5px;border-width:2px;border-radius:9px;gap:5px;}
      .upgrade-resource-window__row{gap:2px;border-radius:5px;padding:3px 2px 4px;}
      .upgrade-resource-window__icon{height:34px;max-width:46px;}
      .upgrade-resource-window__row strong{font-size:12px;}
      #shopXpText.upgrade-xp-stock{font-size:7.5px;}
    }

    /* Pause: keep the existing independent right-side placement, but remove its old visual shell. */
    #pauseOverlay #pauseStatsPanel.pause-stats-panel{
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:hidden!important;
    }

    /* ===== v68: death result right-side stats use the exact same shared stat tray =====
       The death overlay only supplies placement. Border/background/header/rows/scrollbar/tone colors
       now come from .shared-stat-tray, exactly like pause / upgrade / character select. */
    .death-run-side.right{
      width:min(350px,24vw)!important;
      min-width:250px!important;
      height:min(720px,78vh)!important;
      max-height:min(720px,78vh)!important;
      justify-self:end!important;
      padding:0!important;
      border:0!important;
      border-radius:0!important;
      background:transparent!important;
      box-shadow:none!important;
      overflow:hidden!important;
    }
    #deathRunStats.death-run-stats{
      width:100%!important;
      height:100%!important;
      max-height:none!important;
      display:block!important;
      overflow:hidden!important;
      padding:0!important;
      gap:0!important;
      background:transparent!important;
      scrollbar-width:auto!important;
    }
    #deathRunStats.death-run-stats>.shared-stat-tray{
      width:100%!important;
      height:100%!important;
      max-height:100%!important;
    }

    @media(pointer:coarse), (max-width:760px){
      .shared-stat-tray{border-width:3px;border-radius:13px;}
      .shared-stat-tray__header{min-height:34px;padding:6px 8px 5px;gap:7px;}
      .shared-stat-tray__title{font-size:9px;}
      .shared-stat-tray__meta{font-size:7.5px;}
      .shared-stat-tray__list{padding:3px 7px 5px;}
      .shared-stat-tray__row{min-height:23px;padding:3px 1px;gap:7px;font-size:8px;}
      .death-run-info-overlay{
        grid-template-columns:minmax(120px,22vw) minmax(0,1fr) minmax(180px,34vw)!important;
        gap:8px!important;
        padding:8px!important;
      }
      .death-run-side.right{
        width:100%!important;
        min-width:0!important;
        height:min(68vh,560px)!important;
        max-height:min(68vh,560px)!important;
      }
    }



    /* v39：地图地板图案编辑器。图案保存为格子数据，不烘焙大图。 */
    .editor-floor-pattern-entry{border-color:#ccff00!important;color:#ccff00!important;box-shadow:0 0 0 1px rgba(204,255,0,.22) inset!important;}
    .editor-floor-pattern-entry:hover{background:#ccff00!important;color:#000!important;}
    .editor-floor-pattern-panel{grid-column:1/-1;margin-top:0;padding:12px;border:1px solid #596b27;background:#0a0a0a;color:#fff;box-shadow:inset 0 0 0 1px rgba(204,255,0,.08);}
    .editor-floor-pattern-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
    .editor-floor-pattern-head strong{font-size:14px;color:#fff;}
    .editor-floor-pattern-head small{font-size:11px;line-height:1.45;color:#fff;opacity:.58;text-align:right;}
    .editor-floor-pattern-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(380px,1.28fr);gap:12px;align-items:start;}
    .editor-floor-pattern-controls{display:grid;gap:8px;align-content:start;}
    .editor-floor-pattern-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:7px;align-items:center;min-height:32px;}
    .editor-floor-pattern-row>span{font-size:12px;color:#fff;}
    .editor-floor-pattern-row input,.editor-floor-pattern-row select{min-width:0;min-height:30px;padding:4px 7px;border:1px solid #373737;background:#111;color:#fff;font:600 12px Microsoft YaHei,sans-serif;}
    .editor-floor-pattern-button-row{display:flex;flex-wrap:wrap;gap:6px;}
    .editor-floor-pattern-button-row button,.editor-floor-tool,.editor-floor-color{min-height:31px;padding:5px 9px;border:1px solid #4a4a4a;background:#131313;color:#fff;font:700 11px Microsoft YaHei,sans-serif;}
    .editor-floor-pattern-button-row button:hover,.editor-floor-tool:hover,.editor-floor-color:hover{border-color:#888;background:#1b1b1b;}
    .editor-floor-tool.active,.editor-floor-color.active{border-color:#fff;box-shadow:0 0 0 1px #fff inset;background:#202020;}
    .editor-floor-color{min-width:54px;position:relative;padding-left:25px;}
    .editor-floor-color::before{content:'';position:absolute;left:7px;top:50%;width:11px;height:11px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.55);border-radius:3px;background:var(--floor-color,#fff);}
    .editor-floor-pattern-check{display:flex;align-items:center;gap:7px;font-size:11px;color:#fff;}
    .editor-floor-pattern-check input{width:auto;min-height:0;padding:0;}
    .editor-floor-pattern-preview-wrap{min-width:0;}
    .editor-floor-pattern-canvas{display:block;width:100%;max-width:900px;height:auto;border:1px solid #383838;background:#080808;touch-action:none;outline:none;}
    .editor-floor-pattern-canvas:focus{border-color:#777;box-shadow:0 0 0 1px #444;}
    .editor-floor-pattern-note{margin-top:7px;font-size:10px;line-height:1.55;color:#fff;opacity:.62;}
    .editor-floor-pattern-status{margin-top:5px;min-height:17px;font-size:10px;color:#cfd8df;}
    @media(max-width:900px){.editor-floor-pattern-layout{grid-template-columns:1fr}.editor-floor-pattern-head{display:block}.editor-floor-pattern-head small{display:block;margin-top:4px;text-align:left}.editor-floor-pattern-row{grid-template-columns:100px minmax(0,1fr)}}
    #editorForm.scene-editor-form{width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px 10px;}
    #editorForm.scene-editor-form>.editor-floor-pattern-panel,#editorForm.scene-editor-form>.editor-group-title,#editorForm.scene-editor-form>.editor-field.wide{grid-column:1/-1;}
    #editorForm.scene-editor-form>.editor-field{grid-column:auto;}
    #editorForm.scene-editor-form>.editor-group-title{margin:2px 0 0;padding:7px 2px 5px;border-bottom:1px solid #343434;color:#fff;font-size:12px;letter-spacing:.08em;}
    #editorForm.scene-editor-form>.editor-group-title small{margin-left:7px;font-size:10px;opacity:.5;letter-spacing:0;}
    @media(max-width:760px){#editorForm.scene-editor-form{grid-template-columns:1fr}#editorForm.scene-editor-form>.editor-field{grid-column:1/-1;}}



    /* ===== v59: pause resume button + Big Kick icon presentation fixes ===== */
    #pauseOverlay #resumeButton:not(:hover):not(:active),
    #pauseOverlay #resumeButton:focus-visible:not(:hover){
      background:#343a40!important;
      color:#ffffff!important;
      filter:none!important;
      box-shadow:0 0 0 1px rgba(255,255,255,.13)!important;
      opacity:1!important;
    }
    /* Big Kick keeps the original uploaded PNG; only the visible presentation is cropped by zooming into its opaque center. */
    .upgrade-card.item-card[data-def-key="bigKick"] .card-icon-image-asset{
      transform:scale(1.52)!important;
      transform-origin:53.2% 51.1%!important;
    }
    .owned-card-chip.item-chip[data-def-key="bigKick"] .owned-card-art{
      transform:scale(1.52)!important;
      transform-origin:53.2% 51.1%!important;
    }


    /* ===== v65: startup logo splash / desktop-touch UI cleanup / item-row wrapping ===== */
    /* v67: startup splash image replaced with user-supplied LOGO(2).png; timing remains 4s fully linear. */
    #startupSplash{
      position:fixed;inset:0;z-index:2147483000;background:#000;
      display:flex;align-items:center;justify-content:center;
      opacity:1;visibility:visible;pointer-events:auto;
      overflow:hidden;
    }
    #startupSplashLogo{
      display:block;width:auto;height:auto;
      max-width:min(36vw,420px);max-height:min(42vh,360px);
      opacity:0;transform:scale(.92);
      transform-origin:center center;
      user-select:none;-webkit-user-drag:none;pointer-events:none;
      will-change:opacity,transform;
    }
    #startupSplash.playing{
      animation:startupSplashFade 4s linear both;
    }
    #startupSplash.playing #startupSplashLogo{
      animation:startupLogoOpacity 4s linear both,startupLogoScale 4s linear both;
    }
    #startupSplash.reveal-menu{opacity:0;pointer-events:none;}
    #startupSplash.skipping{transition:opacity .18s linear;opacity:0;pointer-events:none;}
    @keyframes startupLogoOpacity{
      0%{opacity:0;}
      25%{opacity:1;}
      100%{opacity:1;}
    }
    @keyframes startupLogoScale{
      0%{transform:scale(.92);}
      100%{transform:scale(1.075);}
    }
    @keyframes startupSplashFade{
      0%,75%{opacity:1;}
      100%{opacity:0;}
    }


.shared-stat-tray__row[hidden]{display:none!important;}

.editor-ranking-warning{
  width:100%;box-sizing:border-box;padding:9px 12px;border:2px solid #ff5a64;border-radius:10px;
  background:rgba(92,12,19,.72);color:#fff;font:900 12px/1.45 "Microsoft YaHei",sans-serif;
  box-shadow:inset 0 0 18px rgba(255,47,64,.12);letter-spacing:.02em;
}
.editor-reset-all-button{border-color:#ff5a64!important;color:#fff!important;background:#471116!important;}
.editor-reset-all-button:hover,.editor-reset-all-button:focus-visible{background:#741a22!important;filter:brightness(1.1);}
.editor-status.warning{color:#ff8b92!important;font-weight:900;}
@media (max-width:820px){.editor-ranking-warning{padding:6px 8px;font-size:10px;}}

/* Locked characters: multiply only the original portrait RGB by 50% black.
   Alpha remains untouched; there is no stripe, silhouette or full-card mask. */
.character-card.locked-character .character-portrait img{
  opacity:1!important;
  filter:brightness(.5)!important;
}
.character-card.locked-character .character-portrait::before,
.character-card.locked-character .character-portrait::after,
.character-card.locked-character .character-lock-overlay{content:none!important;display:none!important;}
.character-card.locked-character .character-lock-icon{
  position:absolute!important;left:50%!important;top:50%!important;z-index:8!important;
  display:block!important;width:clamp(48px,5.2vw,82px)!important;aspect-ratio:200/264!important;
  transform:translate(-50%,-50%)!important;pointer-events:none!important;
  background:url("../assets/ui/lock-icon.png") center/contain no-repeat!important;
  filter:drop-shadow(0 3px 2px #000) drop-shadow(0 0 9px rgba(204,255,0,.28))!important;
}
.character-card.locked-character .character-lock-icon::before,
.character-card.locked-character .character-lock-icon::after{content:none!important;display:none!important;}

/* Semantic card-effect typography: values keep their meaning across upgrade cards and HUD tooltips. */
.card-effect-value,.card-effect-type,.card-effect-warning,.card-effect-atom,.card-effect-element-icon{display:inline!important;font-weight:950!important;vertical-align:baseline!important;}
.card-effect-damage-value{color:#69ff7d!important;text-shadow:0 1px 0 #062b0d,0 0 7px rgba(105,255,125,.34)!important;}
.card-effect-time-value{color:#54e8ff!important;text-shadow:0 1px 0 #06333a,0 0 7px rgba(84,232,255,.30)!important;}
.card-effect-range-value{color:#65bdff!important;text-shadow:0 1px 0 #082640,0 0 7px rgba(101,189,255,.30)!important;}
.card-effect-warning{color:#ff6548!important;white-space:nowrap!important;}
.card-effect-atom,.card-effect-type{white-space:nowrap!important;}
.card-effect-element-icon{display:inline-block;margin-right:.12em;line-height:1;vertical-align:.02em;filter:drop-shadow(0 1px 1px #090b10);}
.upgrade-card .card-next-effect{display:block!important;}
.upgrade-card .card-next-effect>.card-effect-value,.upgrade-card .card-next-effect>.card-effect-type,.upgrade-card .card-next-effect>.card-effect-warning,.upgrade-card .card-next-effect>.card-effect-atom,.upgrade-card .card-next-effect>.card-effect-element-icon,
.upgrade-card .card-max-preview>.card-effect-value,.upgrade-card .card-max-preview>.card-effect-type,.upgrade-card .card-max-preview>.card-effect-warning,.upgrade-card .card-max-preview>.card-effect-atom,.upgrade-card .card-max-preview>.card-effect-element-icon{display:inline!important;position:static!important;width:auto!important;height:auto!important;margin-left:0!important;margin-right:0!important;}
.card-effect-type--fire{color:#ff6845!important;}
.card-effect-type--poison{color:#89e85b!important;}
.card-effect-type--frost{color:#69c6ff!important;}
.card-effect-type--lightning{color:#ffe04c!important;}
.card-effect-type--bleed{color:#ff5d78!important;}
.card-effect-type--physical{color:#f2bd7a!important;}
.card-effect-type--true{color:#dfa1ff!important;}
.owned-card-tooltip-evolve-label{color:#d9a6ff;font-weight:950;}
.death-result-overlay.victory .death-result-title{color:var(--ui-lime)!important;text-shadow:0 0 18px rgba(204,255,0,.20);}

/* Startup readiness gate: the menu must never appear behind unfinished image decode. */
.boot-loading-overlay{position:fixed;inset:0;z-index:2147482999;display:none;place-items:center;background:#000!important;opacity:1!important;visibility:visible!important;}
.boot-loading-overlay.visible{display:grid!important;}
.boot-loading-shell{width:min(540px,calc(100vw - 32px));height:auto;min-height:0;}
.boot-loading-shell>.shared-stat-tray{height:auto;}
.boot-loading-content{display:grid;gap:10px;overflow:visible;padding:12px;}
.boot-loading-meter{display:flex;align-items:center;justify-content:center;min-height:58px;margin:0;padding:8px 12px 16px;pointer-events:none;}
.boot-loading-meter .hold-progress{height:5px;}
.boot-loading-retry{width:100%;margin:0;}
@media(max-height:520px),(max-width:640px){
  .boot-loading-shell{width:min(460px,calc(100vw - 24px));}
  .boot-loading-meter{min-height:48px;}
}

/* Maodie God victory delay reuses the established main-menu button skin. */
.maodie-victory-continue{position:fixed;left:50%;bottom:max(34px,env(safe-area-inset-bottom));z-index:2147481200;display:block;box-sizing:border-box;width:20vw;min-width:0;max-width:none;margin:0;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,34px);transition:opacity .24s ease,transform .34s cubic-bezier(.18,.82,.2,1),visibility 0s linear .34s;}
.maodie-victory-continue.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s;}
@media (max-height:560px){.maodie-victory-continue{bottom:max(14px,env(safe-area-inset-bottom));}}
/* Victory settlement keeps the battlefield visible beneath a viewport-aligned 50% dimmer. */
.death-result-overlay.victory{background:transparent;isolation:isolate;overflow:hidden;}
.death-result-overlay.victory::before{content:'';position:absolute;inset:0;width:100%;height:100%;z-index:0;background:rgba(0,0,0,.5);pointer-events:none;transform:none;}
.death-result-overlay.victory .death-result-panel{position:relative;z-index:1;}

/* Two-step first-run tutorial reuses the shared stat tray and upgrade action skin. */
.new-player-tutorial{position:fixed;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 18px));z-index:10025;width:min(520px,calc(100vw - 32px));transform:translate(-50%,24px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.new-player-tutorial.visible{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.new-player-tutorial>.shared-stat-tray{width:100%}
.new-player-tutorial__progress{display:grid!important;gap:7px!important;min-height:78px!important;padding:13px 16px 17px!important;text-align:left!important;}
.new-player-tutorial__progress strong{font-size:20px;color:#fff}
.new-player-tutorial__progress>span:not(.hold-progress){font-size:14px;line-height:1.45;color:#d9dce3}
.new-player-tutorial__progress .hold-progress i{background:#CCFF00}
@media (pointer:coarse){.new-player-tutorial{bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 8px));width:min(460px,calc(100vw - 24px))}.new-player-tutorial__progress{min-height:68px!important;padding:10px 13px 15px!important}.new-player-tutorial__progress strong{font-size:17px}.new-player-tutorial__progress>span:not(.hold-progress){font-size:12px}}

/* Supplied main-menu title artwork with exact sine-angle motion driven by main-menu-logo-motion.js. */
#mainMenuOverlay .main-menu-home .main-menu-title{
  --main-menu-logo-angle:0deg;
  top:16.5%!important;
  width:auto!important;
  height:clamp(150px,25vh,260px)!important;
  max-width:88vw!important;
  aspect-ratio:1492/640!important;
  line-height:0!important;
  transform:translate(-50%,-50%) rotate(var(--main-menu-logo-angle))!important;
  transform-origin:50% 52%!important;
  animation:none!important;
  text-shadow:none!important;
}
#mainMenuOverlay .main-menu-home .main-menu-title>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.36))!important;
}
@media(max-width:760px){
  #mainMenuOverlay .main-menu-home .main-menu-title{top:16%!important;height:clamp(122px,24vh,190px)!important;max-width:92vw!important;}
}
@media(prefers-reduced-motion:reduce){
  #mainMenuOverlay .main-menu-home .main-menu-title{--main-menu-logo-angle:0deg!important;}
}