@import url("https://fonts.googleapis.com/css2?family=Paytone+One&display=swap");
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #2d5a3d;
      color: #e8f0e8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 24px 16px;
    }
    .card {
      position: relative;
      background: rgba(35, 70, 48, 0.95);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      width: 100%;
      max-width: 420px;
      margin: 0 auto; /* 双重保险：body flex + margin auto 确保居中 */
      padding: 28px 24px;
    }
    h1 {
      font-family: "Paytone One", system-ui, sans-serif;
      font-size: 30px;
      letter-spacing: -0.5px;
      margin-bottom: 8px;
      color: #fff;
      text-shadow: 2px 2px 0 #1a3a26;
      text-align: center;
    }
    .sub { color: #a8c4ae; font-size: 13px; margin-bottom: 20px; text-align: center; }
    .help-btn {
      position: absolute; top: 14px; right: 14px; z-index: 50;
      width: 22px; height: 18px; padding: 0;
      border: none; background: transparent; cursor: pointer;
      display: flex; flex-direction: column; justify-content: space-between;
      align-items: center; box-sizing: border-box; padding: 3px 0;
      transition: all .2s;
    }
    .help-btn span {
      display: block; width: 16px; height: 2px; border-radius: 1px;
      background: #a8c4ae; transition: all .2s;
    }
    .help-btn:hover span { background: #fff; }
    /* 直播入口按钮：定位在骰子左侧，与右侧道具背包对称，点击进入直播大厅 */
    .live-entry {
      position: absolute; left: 4px; top: 15%;
      transform: translateY(-50%);
      flex-shrink: 0;
      width: 44px; height: 44px;      /* 与技能包按钮同尺寸 */
      padding: 0;
      font-size: 20px; font-weight: 800;   /* 与技能包按钮同字体 */
      line-height: 44px;
      text-align: center;
      border: none; border-radius: 8px;  /* 与技能包按钮同圆角 */
      cursor: pointer;
      background: linear-gradient(135deg, #e5484d, #b8303a); color: #fff;
      box-shadow: 0 2px 10px rgba(229, 72, 77, 0.5);
      white-space: nowrap;
      transition: filter .15s, transform .12s;
    }
    .live-entry:hover { filter: brightness(1.1); }
    .live-entry:active { transform: translateY(-50%) scale(0.95); }
    .help-modal {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.6); display: flex;
      align-items: center; justify-content: center; padding: 20px;
    }
    .help-card {
      position: relative; max-width: 360px; width: 100%;
      background: #20302a; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px; padding: 24px 22px; color: #e8f0ea;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    }
    .help-card h2 { font-size: 17px; margin: 0 0 12px; color: #fff; }
    .help-card p { font-size: 14px; line-height: 1.7; margin: 0; color: #cfddd4; }
    .help-note {
      margin-top: 16px !important; padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.12);
      font-size: 12px !important; line-height: 1.8 !important; color: #9bb6a4 !important;
    }
    .help-note .link-btn {
      width: auto; padding: 0 2px; margin: 0; border: none; border-radius: 0;
      background: none !important; box-shadow: none; color: #f0d860 !important;
      font-size: 12px !important; font-weight: normal !important; line-height: inherit; text-decoration: underline;
      cursor: pointer;
    }
    .help-note .link-btn:hover { color: #fff !important; }
    .help-note a.link-btn:visited, .help-note a.link-btn:active, .help-note a.link-btn:hover { color: #f0d860 !important; }
    .help-card a.link-btn, .help-card a.link-btn:visited, .help-card a.link-btn:active, .help-card a.link-btn:hover { color: #f0d860 !important; text-decoration: underline; }
    .help-vol {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 14px; padding-top: 12px; margin-bottom: 60px; border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; color: #9bb6a4;
    }
    .help-vol-label { white-space: nowrap; font-size: 14px; }
    .switch { position: relative; display: inline-block; width: 46px; height: 24px; cursor: pointer; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch-track {
      position: absolute; inset: 0; background: rgba(255,255,255,0.18);
      border-radius: 12px; transition: background .2s;
    }
    .switch-track::before {
      content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
      background: #e8f0e8; border-radius: 50%; transition: transform .2s;
    }
    .switch input:checked + .switch-track { background: #f0d860; }
    .switch input:checked + .switch-track::before { transform: translateX(22px); background: #1f2d23; }
    .help-legal {
      position: absolute; left: 22px; bottom: 14px;
      text-align: left; font-size: 12px;
    }
    .help-card .help-legal .link-btn, .help-card .help-legal .link-btn:visited, .help-card .help-legal .link-btn:active, .help-card .help-legal .link-btn:hover {
      color: #a8c4ae !important; font-size: 12px; font-weight: normal; text-decoration: underline;
    }
    .help-close {
      position: absolute; top: 10px; right: 14px; font-size: 22px;
      color: #a8c4ae; cursor: pointer; line-height: 1;
    }
    .copyright {
      width: 100%; max-width: 420px; box-sizing: border-box;
      text-align: center; padding: 18px 12px; font-size: 12px;
      color: #7e9a86; letter-spacing: 0.5px;
    }
    .help-close:hover { color: #fff; }
    /* 今日挑战展示区 */
    .challenge {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 8px 16px;
      margin-bottom: 24px;
    }
    .challenge-head { display: flex; align-items: center; justify-content: center; min-height: 24px; margin-bottom: 6px; }
    .challenge-title-group { position: relative; display: inline-flex; align-items: center; }
    .challenge-title-group .ch-help-btn { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
    .challenge-title { font-size: 16px; font-weight: 800; color: #f0d860; text-align: center; margin: 0; }
    .ch-help-btn {
      display: inline-flex; align-items: center; justify-content: center;
      flex: none; width: 22px; min-width: 0;
      padding: 0; height: 22px;
      border-radius: 50%; border: 1px solid rgba(240,216,96,0.6);
      background: rgba(240,216,96,0.08); color: #f0d860; font-size: 15px; font-weight: 700; line-height: 22px;
      cursor: pointer; transition: all .2s; vertical-align: middle;
      box-sizing: border-box; white-space: nowrap;
    }
    .ch-help-btn:hover { background: #f0d860; color: #1f2d23; }
    .challenge-desc {
      font-size: 14px; color: #cfddd4; text-align: left;
      margin: 0; line-height: 1.7;
    }
    .challenge-stats {
      font-size: 12px; color: #8ab894; text-align: left; white-space: pre-line;
      margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12);
      line-height: 1.8;
    }
    /* 本期挑战 info 浮层（独立样式，不与游戏说明浮层共用） */
    .ch-modal {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(0,0,0,0.6); display: flex;
      align-items: center; justify-content: center; padding: 20px;
    }
    .ch-card {
      position: relative; max-width: 360px; width: 100%;
      background: #20302a; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px; padding: 24px 22px; color: #e8f0ea;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    }
    .ch-card h2 { font-size: 17px; margin: 0 0 12px; color: #fff; }
    .ch-card p { font-size: 14px; line-height: 1.7; margin: 0; color: #cfddd4; }
    .ch-close {
      position: absolute; top: 10px; right: 14px; font-size: 22px;
      color: #a8c4ae; cursor: pointer; line-height: 1;
    }
    .ch-close:hover { color: #fff; }
    .challenge-meta { font-size: 12px; color: #8ab894; text-align: center; margin: 8px 0 8px; }
    .challenge-score {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 18px; font-weight: 600; color: #c8ddd0;
      background: rgba(0,0,0,0.18); border-radius: 10px; padding: 6px 18px;
      max-width: 100%; width: 100%; margin: 0 auto; box-sizing: border-box;
    }
    .challenge-score > .ch-side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
    /* 记分牌：左 opp/客、右 me/主。opp 在左→左对齐，me 在右→右对齐 */
    .challenge-score > .ch-side-opp { align-items: flex-start; }
    .challenge-score > .ch-side-me { align-items: flex-end; }

    /* 进攻方标记：上半局客队名右侧、下半局主队名左侧，一个小红点 */
    #chOppName.attack-mark, #chMeName.attack-mark { position: relative; }
    #chOppName.attack-mark::after, #chMeName.attack-mark::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      background: #e5484d;
      border-radius: 50%;
    }
    #chOppName.attack-mark::after { right: -12px; }  /* 客队（左）右侧 */
    #chMeName.attack-mark::before { left: -12px; }   /* 主队（右）左侧 */
    /* 队名：允许换行并截断超长文本，避免撑破记分牌布局 */
    .challenge-score .ch-side > span:not(.ch-side-tag) {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1;  /* 与「攻」标记行高一致，确保垂直居中标记与队名文字对齐 */
    }
    /* 队名上方的我方/对方说明标签 */
    .ch-side-tag {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      padding: 2px 6px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .ch-me-tag { color: #bfe9cd; background: rgba(127,200,160,0.18); border: 1px solid rgba(127,200,160,0.35); }
    .ch-opp-tag { color: #e8c0c0; background: rgba(200,120,120,0.14); border: 1px solid rgba(200,120,120,0.3); }
    .challenge-score-val {
      flex: 0 0 auto;
      text-align: center;
      white-space: nowrap;
      margin-top: 14px;
    }
    .challenge-score-val { font-size: 32px; color: #f0d860; }
    .challenge-score-val b { font-size: 38px; }
    /* 分数变化时 chMe 闪烁一下，更醒目 */
    @keyframes scoreFlashMe {
      0%   { color: #6ee7a0; text-shadow: 0 0 10px rgba(110,231,160,0.9); transform: scale(1.25); }
      60%  { color: #6ee7a0; text-shadow: 0 0 10px rgba(110,231,160,0.9); transform: scale(1.25); }
      100% { color: #f0d860; text-shadow: none; transform: scale(1); }
    }
    #chMe.score-flash { animation: scoreFlashMe 0.4s ease; display: inline-block; }
    .challenge-status { font-size: 12px; text-align: center; margin-top: 6px; font-weight: 600; }
    .challenge-status.done { color: #6ee7a0; }
    .challenge-status.todo { color: #f0d860; }
    /* 3D 骰子：scene 提供透视，cube 是真正的立方体（尺寸 ×2）*/
    .dice-area {
      position: relative; /* 作为道具图标右侧定位的参照 */
      z-index: 20; /* 置于垒包/本期挑战之上，避免被遮挡 */
      width: 100%; /* 撑满卡片宽度，保证骰子整体居中 */
      margin: 32px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 45px 0 45px;
    }
    .dice-scene {
      width: 103.68px; height: 103.68px;
      perspective: 518.4px;
      user-select: none;
      position: relative; /* 多骰叠放，仅显示当前那颗 */
      flex-shrink: 0;
      transition: width 0.3s ease; /* 双骰模式下平滑加宽 */
    }
    /* Double Dice 模式：两颗骰并排（Dice1 居左，Dice2 居右） */
    .dice-scene.double { width: 255.6px; }
    .dice-scene.double #diceMain { left: 0; }
    .dice-scene.double #diceDice2 { left: 140.4px; }
    .dice-cube {
      position: absolute; /* 全部绝对定位，叠加在同一位置 */
      left: 0; top: 0;
      width: 103.68px; height: 103.68px;
      transform-style: preserve-3d;
    }
    .dice-cube.hidden { display: none; }
    .dice-cube {
      transform: rotateY(180deg); /* 初始显示 1B 面（back）*/
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    .dice-cube.rolling {
      animation: diceSpin 0.7s linear infinite;
      transition: none;
    }
    /* 待机展示态：缓慢转动，示意这是一个骰子（仅刷新加载后一次性启用） */
    .dice-cube.idle {
      animation: diceIdle 8.57s linear infinite;
      transition: none;
    }
    @keyframes diceIdle {
      0%   { transform: rotateX(0deg) rotateY(180deg); }
      25%  { transform: rotateX(180deg) rotateY(270deg); }
      50%  { transform: rotateX(360deg) rotateY(360deg); }
      75%  { transform: rotateX(540deg) rotateY(450deg); }
      100% { transform: rotateX(720deg) rotateY(540deg); }
    }
    @keyframes diceSpin {
      0%   { transform: rotateX(0deg) rotateY(0deg); }
      25%  { transform: rotateX(180deg) rotateY(90deg); }
      50%  { transform: rotateX(360deg) rotateY(180deg); }
      75%  { transform: rotateX(540deg) rotateY(270deg); }
      100% { transform: rotateX(720deg) rotateY(360deg); }
    }
    .dice-face {
      position: absolute;
      width: 103.68px; height: 103.68px;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 -3px 6px rgba(0,0,0,0.08);
      display: flex; align-items: center; justify-content: center;
      font-size: 21.06px; font-weight: 800; color: #1a1a1a;
      letter-spacing: 0.3px;
      backface-visibility: hidden;
      border: 2px solid #ddd;
    }
    /* 棒球缝线装饰：在指定棱对应的面边界上画红白间隔线（更细更密） */
    .seam { position: absolute; z-index: 3; pointer-events: none; border-radius: 2px; }
    .seam.t { top: 0; left: 6px; right: 6px; height: 4px;
      background: repeating-linear-gradient(90deg, #e5484d 0 3px, #fff 3px 6px); }
    .seam.b { bottom: 0; left: 6px; right: 6px; height: 4px;
      background: repeating-linear-gradient(90deg, #e5484d 0 3px, #fff 3px 6px); }
    .seam.l { left: 0; top: 6px; bottom: 6px; width: 4px;
      background: repeating-linear-gradient(0deg, #e5484d 0 3px, #fff 3px 6px); }
    .seam.r { right: 0; top: 6px; bottom: 6px; width: 4px;
      background: repeating-linear-gradient(0deg, #e5484d 0 3px, #fff 3px 6px); }
    /* 每个面显示固定内容（结果 → 面序号映射见 JS RESULT_TO_INDEX）*/
    .dice-face .result-label {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }
    /* 出局类面（OUT / 双杀）白底红字 */
    .dice-face.out-face {
      color: #e5484d;
    }
    /* 六个面定位（立方体边长 103.68，半距 51.84）*/
    .face-front  { transform: rotateY(0deg)   translateZ(51.84px); }
    .face-back   { transform: rotateY(180deg) translateZ(51.84px); }
    .face-right  { transform: rotateY(90deg)  translateZ(51.84px); }
    .face-left   { transform: rotateY(-90deg) translateZ(51.84px); }
    .face-top    { transform: rotateX(90deg)  translateZ(51.84px); }
    .face-bottom { transform: rotateX(-90deg) translateZ(51.84px); }
    /* 紧凑局面区：垒包(中心显示局数) + 出局灯 融为一体 */
    .situation {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin: 16px auto 20px;
    }
    .bases-wrap {
      display: flex;
      justify-content: center;
    }
    .bases {
      display: grid;
      grid-template-columns: repeat(3, 30px);
      grid-template-rows: repeat(3, 30px);
      gap: 8px;
      position: relative;
    }
    /* 中心格：局数指示器（局数居中 + 三角标记上下半局） */
    .inning {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1a2233;
      font-weight: 800;
    }
    .inning .inn-num {
      font-size: 25px;
      line-height: 1.1;
      color: #f0d860;
    }
    /* 下半局（默认）：倒三角 ▼ 在数字下方，数字在上方 */
    .inning.bottom-half .inn-arrow {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      line-height: 1;
      color: #f0d860;
      margin-top: 1px;
    }
    /* 上半局：正三角 ▲ 在数字上方，数字在下方 */
    .inning.top-half .inn-arrow {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      line-height: 1;
      color: #f0d860;
      margin-bottom: -14px; /* 向下偏移，避免三角顶到网格上沿遮挡二垒 */
    }
    /* 上半局：数字下移，避免与上方三角重叠（flex 默认水平居中，这里仅兜底垂直对齐） */
    .inning.top-half .inn-num {
      position: relative;
      top: 15px;
    }
    button {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 12px;
      background: #fff;
      color: #2d5a3d;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    button:disabled { background: rgba(255,255,255,0.25); color: #6a9a78; cursor: not-allowed; box-shadow: none; animation: none !important; transform: none !important; }
    #rollBtn, #take1BBtn, #roll2Btn, #doubleContinueBtn {
      font-size: 22px; line-height: 1.1; min-height: 54px;
      white-space: nowrap; display: flex; align-items: center; justify-content: center;
    }
    /* 主要比赛按钮的点击反馈：悬停提亮、按下缩放 */
    #rollBtn:not(:disabled):hover, #take1BBtn:not(:disabled):hover,
    #roll2Btn:not(:disabled):hover, #doubleContinueBtn:not(:disabled):hover {
      filter: brightness(1.09);
    }
    #rollBtn:not(:disabled):active, #take1BBtn:not(:disabled):active,
    #roll2Btn:not(:disabled):active, #doubleContinueBtn:not(:disabled):active {
      transform: scale(0.95);
      filter: brightness(0.92);
    }
    /* 放手一搏：最初琥珀橙（无渐变；仅在可点击时生效，禁用态由 button:disabled 覆盖） */
    #roll2Btn {
      background: #d4883a;
      color: #fff;
      font-weight: 800;
      letter-spacing: 1px;
    }
    /* 被【棒】技能选中时，叠加金色高亮（保留原 armed 逻辑） */
    #roll2Btn.item-armed-bat {
      box-shadow: 0 0 0 3px rgba(240,216,96,0.7), 0 0 18px rgba(212,136,58,0.6);
      background: #d4883a;
    }
    #doubleContinueBtn[hidden] { display: none !important; }
    #doubleContinueBtn {
      background: #d4883a;
      color: #fff; font-weight: 800; letter-spacing: 1px;
      margin-top: 16px;
    }
    .result {
      margin-top: 16px;
      padding: 0;
      border: none;
      background: none;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      color: #9bb6a4;
      height: 51px;                 /* 固定 2 行高度（line-height 1.5 × 17px × 2） */
      line-height: 1.5;
      white-space: normal;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .result.passed { color: #6ee7a0; }
    .result.failed { color: #f08070; }
    .log { margin-top: 12px; font-size: 12px; color: #8ab894; }
    .uid-row { margin-top: 20px; display: none; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .uid { font-size: 11px; color: #5a8a66; text-align: left; word-break: break-all; cursor: pointer; transition: color .15s ease; }
    .uid:hover { color: #7fc8a0; text-decoration: underline; text-underline-offset: 2px; }

    /* 找回数据弹层（暗色玻璃拟态，与 reward-overlay 风格一致） */
    .recover-overlay {
      position: fixed; inset: 0; z-index: 60;
      display: flex; align-items: center; justify-content: center;
      background: rgba(8, 14, 24, 0.62); backdrop-filter: blur(6px);
      opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    .recover-overlay.show { opacity: 1; pointer-events: auto; }
    .recover-card {
      position: relative;
      width: min(420px, 90vw); padding: 22px;
      border-radius: 18px;
      background: linear-gradient(160deg, rgba(20,32,26,0.95), rgba(10,18,14,0.95));
      border: 1px solid rgba(127,200,160,0.3);
      box-shadow: 0 18px 50px rgba(0,0,0,0.55);
      transform: translateY(12px) scale(0.98); transition: transform 0.2s ease;
    }
    .recover-overlay.show .recover-card { transform: translateY(0) scale(1); }
    .recover-close {
      position: absolute; top: 10px; right: 10px;
      width: 24px; height: 24px; border-radius: 7px;
      border: none; background: rgba(127,200,160,0.1); color: #7fc8a0;
      font-size: 15px; font-weight: 300; line-height: 24px; text-align: center; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .recover-close:hover { background: rgba(127,200,160,0.22); color: #a8e8c4; }
    .recover-title { font-size: 16px; font-weight: 700; color: #e2e8f0; margin-bottom: 14px; padding-right: 28px; }
    .recover-hint { font-size: 12px; line-height: 1.6; color: #94a3b8; margin-bottom: 10px; }
    .recover-uid-row { display: flex; flex-direction: column; gap: 10px; }
    .recover-uid {
      width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: #cbd5e1; font-size: 13px; line-height: 1.6; word-break: break-all;
      overflow-wrap: anywhere;
      font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    }
    .recover-copy {
      align-self: flex-end; padding: 9px 18px; border: none; border-radius: 8px;
      background: linear-gradient(135deg, #3a9a6a, #1e5c40); color: #fff;
      font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .recover-copy:hover { filter: brightness(1.08); }
    .recover-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 18px 0; }
    .recover-subtitle { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 8px; }
    .recover-desc { font-size: 12px; line-height: 1.6; color: #94a3b8; margin-bottom: 14px; }
    .recover-input {
      width: 100%; padding: 12px 14px; border-radius: 10px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
      color: #e2e8f0; font-size: 13px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      outline: none;
    }
    .recover-input:focus { border-color: #5a9a78; box-shadow: 0 0 0 3px rgba(90,154,120,0.25); }
    .recover-msg { min-height: 18px; margin-top: 10px; font-size: 12px; text-align: center; }
    .recover-msg.err { color: #f08070; }
    .recover-msg.ok { color: #6ee7a0; }
    .recover-btns { display: flex; gap: 10px; margin-top: 14px; }
    .recover-cancel, .recover-confirm {
      flex: 1; padding: 11px; border: none; border-radius: 10px;
      font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .recover-cancel { background: rgba(255,255,255,0.1); color: #cbd5e1; }
    .recover-cancel:hover { background: rgba(255,255,255,0.16); }
    .recover-confirm { background: linear-gradient(135deg, #3a9a6a, #1e5c40); color: #fff; }
    .recover-confirm:hover { filter: brightness(1.08); }
    .recover-confirm:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
    /* 菱形布局：二垒(顶中) / 一垒(右下) / 三垒(左下)，本垒在底部中间 */
    .base[data-base="1"] { grid-column: 2; grid-row: 1; } /* 二垒 */
    .base[data-base="0"] { grid-column: 3; grid-row: 2; } /* 一垒 */
    .base[data-base="2"] { grid-column: 1; grid-row: 2; } /* 三垒 */
    .base {
      width: 26px; height: 26px;
      transform: rotate(45deg);
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      align-self: center; justify-self: center;
    }
    .base.on { background: #f0d860; border-color: #f0d860; }
    /* 跑者 = 移动的垒包块：直接用「亮起的垒包」在垒间滑动/亮起/回本，替代小圆点 */
    .runner {
      position: absolute;
      width: 22px; height: 22px;
      background: #f0d860;
      border: 2px solid #f7ec9f;
      box-shadow: 0 0 10px rgba(240,216,96,0.9);
      transform: translate(-50%, -50%) rotate(45deg);
      transition: left 0.5s ease, top 0.5s ease, opacity 0.45s ease;
      pointer-events: none;
      opacity: 0;
      z-index: 5;
    }
    /* 上垒亮起：垒包块出现时的小弹跳 + 强发光 */
    .runner.appear {
      animation: runnerAppear 0.5s ease-out;
    }
    @keyframes runnerAppear {
      0%   { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.3); box-shadow: 0 0 0 rgba(240,216,96,0); }
      60%  { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.35); box-shadow: 0 0 18px rgba(240,216,96,1); }
      100% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
    }
    /* 回本得分：垒包块从三垒方向冲向本垒并渐隐 */
    .runner.scoring {
      opacity: 1;
      animation: runnerScore 0.7s ease-in forwards;
    }
    @keyframes runnerScore {
      0%   { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      40%  { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.2); }
      100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.5); }
    }
    /* 出局：垒包块原地消失（红闪） */
    .runner.out {
      animation: runnerOut 0.45s ease-in forwards;
    }
    @keyframes runnerOut {
      0%   { opacity: 1; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      100% { opacity: 0; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(0.2); }
    }
    /* 盗垒失败：1垒扑向2垒被触杀，红闪两下后消失 */
    .runner.steal-fail {
      animation: runnerStealFail 0.7s ease-in forwards;
    }
    @keyframes runnerStealFail {
      0%   { opacity: 1; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      22%  { opacity: 0.15; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      34%  { opacity: 1; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      56%  { opacity: 0.15; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      68%  { opacity: 1; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
      100% { opacity: 0; background: #ff5a5f; border-color: #ffb3b3; transform: translate(-50%, -50%) rotate(45deg) scale(0.2); }
    }
    .outs {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-top: -18px;
    }
    .out-dot {
      width: 14px; height: 14px; border-radius: 50%;
      background: #e5484d;
    }
    .out-dot.off { background: rgba(255,255,255,0.12); box-shadow: none; animation: none; }
    /* 亮起效果：点亮瞬间「通电」弹起 + 持续呼吸发光（每次从熄灭转亮都会播放） */
    .out-dot:not(.off) {
      animation: outLightUp 0.6s ease-out, outGlow 2.2s ease-in-out 0.6s infinite;
    }
    @keyframes outLightUp {
      0%   { background: #ff9a9a; box-shadow: 0 0 0 rgba(229,72,77,0); transform: scale(0.4); }
      60%  { background: #ff5a5f; box-shadow: 0 0 16px rgba(229,72,77,0.95); transform: scale(1.3); }
      100% { background: #e5484d; box-shadow: 0 0 8px rgba(229,72,77,0.55); transform: scale(1); }
    }
    @keyframes outGlow {
      0%, 100% { box-shadow: 0 0 6px rgba(229,72,77,0.4); }
      50%      { box-shadow: 0 0 13px rgba(229,72,77,0.85); }
    }

    /* ---------- 道具系统（与 index.html 逻辑分离，见 items.js） ---------- */
    /* 背包入口图标：贴骰子区域右侧，按钮中心对齐主骰子下边缘 */
    .item-dock {
      position: absolute;
      right: 4px;
      top:15%;
      transform: translateY(-50%);
      flex-shrink: 0;
    }
    .item-bag-btn {
      position: relative;
      width: 44px; height: 44px;
      padding: 0;
      background: #ffffff;
      border: none;
      color: #2d5a3d;
      font-size: 20px;
      font-weight: 800;
      cursor: pointer;
      line-height: 44px;
      text-align: center;
      border-radius: 8px;
    }
    .item-bag-btn:hover { transform: scale(1.08); }
    .item-bag-btn.empty { background: #ffffff; color: #9bb0a3; }
    .item-bag-badge {
      position: absolute; top: -8px; right: -8px;
      min-width: 20px; height: 20px; padding: 0 5px;
      border-radius: 10px; background: #e5484d; color: #fff;
      font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .item-game-count { font-size: 12px; color: #f0d860; font-weight: 700; margin-bottom: 21px; }

    /* 浮层遮罩 */
    .item-overlay {
      position: fixed; inset: 0; z-index: 50;
      background: rgba(0,0,0,0.55);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s ease;
      padding: 20px;
    }
    .item-overlay.show { opacity: 1; }
    .item-panel {
      width: 100%; max-width: 380px;
      background: rgba(35, 70, 48, 0.98);
      border: 1px solid rgba(240, 216, 96, 0.35);
      border-radius: 18px; padding: 18px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.45);
      transform: scale(0.94); transition: transform 0.2s ease;
    }
    .item-overlay.show .item-panel { transform: scale(1); }
    .item-panel-head {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px;
    }
    .item-close {
      width: 32px; padding: 4px; font-size: 16px; font-weight: 800;
      background: rgba(255,255,255,0.12); color: #e8f0e8; border-radius: 8px;
    }
    .item-panel-sub { font-size: 12px; color: #8ab894; margin-bottom: 14px; }
    .item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .item-cell {
      background: rgba(255,255,255,0.06);
      border: 2px solid rgba(255,255,255,0.10);
      border-radius: 12px; padding: 12px 10px; cursor: pointer;
      text-align: center;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .item-cell:hover { transform: translateY(-2px); border-color: rgba(240,216,96,0.6); }
    /* 手机端触屏点击反馈：按下时缩小 + 明显提亮（无 hover，靠 :active 提供按压反馈） */
    .item-cell:not(.locked):active {
      transform: scale(0.93);
      border-color: rgba(240,216,96,0.9);
      background: rgba(255,255,255,0.18);
    }
    .item-cell.selected { border-color: #f0d860; background: rgba(240,216,96,0.16); }
    .item-cell-bat.selected { border-color: #f0d860; background: rgba(240,216,96,0.16); }
    .item-cell-steal.selected { border-color: #5ec2ff; background: rgba(94,194,255,0.16); }
    .item-cell-sac.selected { border-color: #ff9d6e; background: rgba(255,157,110,0.16); }
    .item-cell-mist.selected { border-color: #c9b6ff; background: rgba(201,182,255,0.16); }
    .item-cell.locked { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.6); }
    .item-cell.locked:hover { transform: none; border-color: rgba(255,255,255,0.10); }
    .item-cell.used-once { position: relative; }
    .item-cell.used-once::after {
      content: "已用"; position: absolute; top: 6px; right: 6px;
      font-size: 10px; font-weight: 700; color: #fff;
      background: rgba(0,0,0,0.5); border-radius: 6px; padding: 1px 6px;
    }
    .item-cell-name {
      font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 2px;
    }
    .item-cell-bat .item-cell-name { color: #f0d860; }
    .item-cell-steal .item-cell-name { color: #5ec2ff; }
    .item-cell-sac .item-cell-name { color: #ff9d6e; }
    .item-cell-mist .item-cell-name { color: #c9b6ff; }
    .item-cell-count { font-size: 11px; color: #8ab894; text-align: center; margin-bottom: 6px; }
    .item-cell-desc { font-size: 11px; color: #c8ddd0; line-height: 1.45; text-align: center; }
    .item-panel-foot { margin-top: 14px; font-size: 13px; color: #e8f0e8; text-align: center; }
    .item-foot-info { font-size: 12px; color: #c8ddd0; }
    .item-cancel {
      width: auto; padding: 4px 10px; margin-left: 8px; font-size: 12px; font-weight: 700;
      background: rgba(229,72,77,0.85); color: #fff; border: none; border-radius: 8px; cursor: pointer;
    }
    .item-toast {
      position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
      background: rgba(20,40,28,0.95); color: #f0d860; border: 1px solid rgba(240,216,96,0.4);
      padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 700;
      z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
      max-width: 80%; text-align: center;
    }
    .item-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* 发奖浮层 */
    .reward-overlay {
      position: fixed; inset: 0; z-index: 70;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none;
      transition: opacity 0.22s ease;
    }
    .reward-overlay.show { opacity: 1; pointer-events: auto; }
    .reward-card {
      width: min(86vw, 360px);
      background: linear-gradient(160deg, #1f3d2b, #16301f);
      border: 1px solid rgba(240,216,96,0.35);
      border-radius: 18px; padding: 26px 22px 22px;
      text-align: center; color: #eaf3ea;
      box-shadow: 0 18px 48px rgba(0,0,0,0.45);
      transform: translateY(10px) scale(0.96);
      transition: transform 0.22s ease;
    }
    .reward-overlay.show .reward-card { transform: translateY(0) scale(1); }
    .reward-title {
      font-size: 20px; font-weight: 800; color: #f0d860;
      margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .reward-items {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 16px;
    }
    .reward-chip {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      width: 64px; padding: 10px 0; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    }
    .reward-chip-icon {
      font-size: 24px; font-weight: 800; line-height: 1; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center; border-radius: 9px;
    }
    .reward-chip-num { font-size: 13px; font-weight: 700; color: #eaf3ea; }
    .reward-chip-bat .reward-chip-icon { background: linear-gradient(135deg,#f0d860,#e0b840); color:#2d5a3d; }
    .reward-chip-steal .reward-chip-icon { background: linear-gradient(135deg,#5ec2ff,#3a9ee0); color:#10314a; }
    .reward-chip-sac .reward-chip-icon { background: linear-gradient(135deg,#ff9d6e,#e07a4e); color:#3a1c12; }
    .reward-chip-mist .reward-chip-icon { background: linear-gradient(135deg,#c9b6ff,#9b86e0); color:#2a1f48; }
    .reward-msg { font-size: 13px; color: #c8ddd0; line-height: 1.6; margin-bottom: 18px; }
    .reward-close {
      width: 100%; padding: 12px 0; font-size: 15px; font-weight: 800; cursor: pointer;
      background: linear-gradient(135deg, #f0d860, #e8c84e); color: #2d5a3d;
      border: none; border-radius: 12px;
    }
    .reward-close:active { transform: scale(0.98); }

    /* 选中道具后主骰按钮高亮（按道具类型上色，提示将要触发道具） */
    #rollBtn.item-armed-bat { box-shadow: 0 0 0 3px rgba(240,216,96,0.55), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #f0d860, #e8c84e); }
    #rollBtn.item-armed-steal { box-shadow: 0 0 0 3px rgba(94,194,255,0.55), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #5ec2ff, #3a9ee0); }
    #rollBtn.item-armed-sac { box-shadow: 0 0 0 3px rgba(255,157,110,0.55), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #ff9d6e, #e07a4e); }
    #rollBtn.item-armed-mist { box-shadow: 0 0 0 3px rgba(201,182,255,0.55), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #c9b6ff, #9b86e0); }
    /* 道具骰结算后：Roll 按钮变「继续」，按道具类型上色提示玩家确认结果 */
    #rollBtn.confirm-bat,
    #rollBtn.confirm-steal,
    #rollBtn.confirm-sac,
    #rollBtn.confirm-mist {
      color: #fff;
      letter-spacing: 2px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    }
    #rollBtn.confirm-bat { box-shadow: 0 0 0 3px rgba(240,216,96,0.5), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #f0d860, #e8c84e); }
    #rollBtn.confirm-steal { box-shadow: 0 0 0 3px rgba(94,194,255,0.5), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #5ec2ff, #3a9ee0); }
    #rollBtn.confirm-sac { box-shadow: 0 0 0 3px rgba(255,157,110,0.5), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #ff9d6e, #e07a4e); }
    #rollBtn.confirm-mist { box-shadow: 0 0 0 3px rgba(201,182,255,0.5), 0 8px 18px rgba(0,0,0,0.25); background: linear-gradient(135deg, #c9b6ff, #9b86e0); }