#replay-modal{
      display:none;position:fixed;inset:0;
      background:rgba(0,0,0,.62);z-index:800;
      align-items:center;justify-content:center;padding:16px;
    }
    #replay-modal.open{display:flex;}
    #replay-box{
      background:#fff;border-radius:24px;
      padding:24px 20px 20px;width:100%;max-width:480px;
      max-height:90vh;overflow-y:auto;
      animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes popIn{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
    #replay-box h2{font-size:1.2rem;color:#5b8dee;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
    #replay-sessions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:60vh;overflow-y:auto;}
    .session-item{
      display:flex;justify-content:space-between;align-items:center;
      background:#f5f5f5;border-radius:10px;padding:8px 12px;
      font-size:.82rem;border:2px solid transparent;
      gap:8px;flex-wrap:wrap;
    }
    .session-item .si-moves{color:#5b8dee;font-weight:bold;}
    /* 主操作「みる」: 子ども向けUXガイドに沿い、大きく・目立つ色で見つけやすくする */
    .si-watch{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:44px;min-width:60px;padding:6px 16px;
      background:linear-gradient(135deg,#ff8c42,#f0a060);color:#fff;
      font-size:.86rem;font-weight:bold;text-decoration:none;
      border-radius:20px;white-space:nowrap;transition:.15s;
    }
    .si-watch:active{transform:scale(.96);}
    /* 副操作「けす」: 主操作より控えめな見た目にする */
    .si-delete{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:44px;padding:6px 12px;
      font-size:.76rem;color:#ff9b9b;background:none;
      border:1px solid rgba(255,155,155,.4);border-radius:16px;
      cursor:pointer;white-space:nowrap;font-family:inherit;
    }
    #replay-close{width:100%;margin-top:12px;padding:10px;background:#eee;color:#555;border:none;border-radius:20px;font-family:inherit;font-size:.9rem;cursor:pointer;font-weight:bold;}

/* ─── Issue #1225 / #1281: rrweb Replay v2 (Dev/Test) bundle一覧section ───
   既存semantic Replayの.session-item/.si-watchとは意図的に配色を変え、
   実況・保存形式が別物であることが一目で分かるようにする（紫系の破線枠）。 */
#replay-v2-dev-section{
  margin:4px 0 14px;padding:10px 12px;
  border:2px dashed #b98ae0;border-radius:12px;
  background:rgba(185,138,224,.08);
}
#replay-v2-dev-header{font-size:.78rem;font-weight:bold;color:#8a4fc7;margin-bottom:8px;}
.replay-v2-dev-empty{color:#aaa;font-size:.78rem;padding:4px 2px;}
.replay-v2-dev-item{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border-radius:10px;padding:8px 12px;
  font-size:.8rem;gap:8px;flex-wrap:wrap;
}
.replay-v2-dev-item-label{font-size:.7rem;color:#8a4fc7;margin-bottom:2px;}
.replay-v2-dev-audio-note{font-size:.7rem;color:#5b8dee;margin-top:2px;}
.replay-v2-dev-error-note{font-size:.7rem;color:#e05c5c;margin-top:2px;}
.replay-v2-dev-watch{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:60px;padding:6px 16px;
  background:linear-gradient(135deg,#8a4fc7,#b98ae0);color:#fff;
  font-size:.82rem;font-weight:bold;border:none;
  border-radius:20px;white-space:nowrap;transition:.15s;cursor:pointer;font-family:inherit;
}
.replay-v2-dev-watch:active{transform:scale(.96);}
.replay-v2-dev-watch:disabled{opacity:.6;cursor:default;}
.replay-v2-dev-meta{font-size:.7rem;color:#777;margin-top:2px;}
.replay-v2-dev-delete{
  min-height:44px;min-width:52px;padding:6px 12px;background:#eee;color:#555;
  font-size:.8rem;font-weight:bold;border:none;border-radius:20px;cursor:pointer;font-family:inherit;
}
.replay-v2-dev-item[data-status="partial"],.replay-v2-dev-item[data-status="corrupt"]{opacity:.85;}

/* ─── Issue #1225: rrweb同一page再生（visual）─────────────────────
   core/ReplayV2Poc.jsが作るrootは元々無style（開発者console利用時は自然な
   document flowで問題ないため）。通常UIからのDev限定再生では実機で見つけやすい
   全画面overlayにする。 */
#replay-v2-poc-root{
  position:fixed;inset:0;z-index:2000;
  background:#000;display:flex;align-items:center;justify-content:center;
  overflow:auto;
}
/* Issue #1283: z-indexは#app-version-info(固定・下端中央, z-index:9997)より上。2001だと中央のScene jumpボタンへの
   pointerがversionボタンに遮られ、実タップ/実clickで押せなかった（version modal 10000 / toast 10001 よりは下）。 */
#replay-v2-dev-overlay-controls{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  font-family:inherit;pointer-events:none;
}
#replay-v2-dev-overlay-controls .replay-v2-dev-overlay-panel{
  display:flex;flex-direction:column;gap:6px;
  padding:8px calc(14px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));
  background:rgba(20,10,30,.88);pointer-events:auto;
  max-height:min(55vh,360px);max-height:min(55dvh,360px);
  overflow-y:auto;overscroll-behavior:contain;
}
#replay-v2-dev-overlay-controls [hidden]{display:none!important;}
#replay-v2-dev-overlay-controls[data-collapsed="true"]{
  left:auto;right:calc(12px + env(safe-area-inset-right,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
.replay-v2-dev-overlay-float{
  width:56px;height:56px;min-width:56px;min-height:56px;
  border:2px solid #e0c8ff;border-radius:50%;
  background:#8a4fc7;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;box-shadow:0 3px 14px rgba(0,0,0,.35);
  pointer-events:auto;touch-action:manipulation;
}
.replay-v2-dev-overlay-btn-mini{min-width:44px;background:#665080;}
/* rrweb cursor, tap ripple and tail are player decorations, not recorded game UI. */
#replay-v2-poc-root .replayer-mouse,
#replay-v2-poc-root .replayer-mouse-tail{display:none!important;}
.replay-v2-dev-overlay-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.replay-v2-dev-overlay-seek{flex:1;min-width:120px;min-height:32px;accent-color:#b98ae0;}
.replay-v2-dev-overlay-time{color:#e0c8ff;font-size:.74rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
.replay-v2-dev-overlay-speed,.replay-v2-dev-overlay-scene{min-width:48px;padding:6px 10px;background:#5a3a85;}
.replay-v2-dev-overlay-speed[aria-pressed="true"]{background:#b98ae0;color:#20102f;}
.replay-v2-dev-overlay-scene:disabled{opacity:.5;}
.replay-v2-dev-overlay-scenes{max-height:96px;overflow:auto;}
.replay-v2-dev-overlay-status{color:#e0c8ff;font-size:.76rem;flex:1;min-width:0;}
.replay-v2-dev-overlay-partial{color:#ffe2a8;font-size:.76rem;line-height:1.3;}
.replay-v2-dev-overlay-partial[hidden]{display:none;}
.replay-v2-dev-overlay-btn{
  min-height:44px;min-width:64px;padding:6px 16px;
  background:#8a4fc7;color:#fff;border:none;border-radius:20px;
  font-size:.82rem;font-weight:bold;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.replay-v2-dev-overlay-btn-close{background:#555;}
