* { box-sizing: border-box; }

/* PC (data-device=pc は ui_layout.js が画面幅から付与) ではマウスカーソルを全体で非表示にする。 */
body[data-device="pc"],
body[data-device="pc"] * {
  cursor: none !important;
}
/* モバイルは鼻カーソル (arrow.svg) を使わずタップ操作にするので、鼻カーソルを隠す。 */
body[data-device="mobile"] .session-nose-cursor {
  display: none !important;
}

:root {
  /* START 画面 / カウントダウン用のカーソル (arrow.svg は assets 直下)。 */
  --start-cursor: url('./assets/arrow.svg') 0 0, pointer;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}

/* Adobe Fonts (Typekit kit: jun7beh) の nitalago-ruika を全 UI に当てる。
   button / input / textarea / select はブラウザ既定フォントが効くので明示。 */
html,
body,
button,
input,
textarea,
select {
  font-family:
    "nitalago-ruika",
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
  font-weight: 200;
  font-style: normal;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

canvas {
  display: block;
}

/* ---- 各 mode の UI (top-left, ナビの下) ---- */
#mode-ui {
  position: fixed;
  left: 16px;
  top: 64px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  font-size: 13px;
}

#mode-ui:empty {
  display: none;
}

#mode-ui button {
  padding: 6px 14px;
  font-size: 13px;
  background: #2c5d35;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

#mode-ui button:hover {
  background: #3a7944;
}

#mode-ui label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cfcfcf;
}

#mode-ui input[type="range"] {
  width: 130px;
}

#mode-ui span {
  min-width: 32px;
  text-align: right;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

#mode-ui pre {
  margin: 4px 0 0;
  padding: 8px 10px;
  font: 11px/1.55 monospace;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  white-space: pre;
  max-width: 280px;
}

/* ---- グローバル status (bottom-left) ---- */
/* 一旦、パラメーター/デバッグ UI をすべて非表示にする。
   (status 表示 / mode-ui の crop スライダー・debug / 映像カラーチューナー)。
   戻す時はこのブロックを削除するだけ。 */
#status,
#mode-ui,
#video-color-tuner {
  display: none !important;
}

#status {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  padding: 5px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
}

/* ---- session countdown (RUNNING 中のみ右下端に残り秒数) ---- */
/* 指定フォント (neue-haas-grotesk-display / weight 100)。DOM なので保存画像には写らない。 */
#session-countdown {
  position: fixed;
  right: 28px;
  bottom: 28px; /* 旧 "?" ヘルプと同じ位置。 */
  z-index: 80;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 1;
  color: #ed0000;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  display: none;
}
#session-countdown.is-visible {
  display: block;
}

/* ---- session overlay (START / RESULT) ---- */
/* 背面の p5 canvas はそのまま動くが、その上にぼかしたグレーを重ねて静止画的に見せる。
   保存対象は session_flow.js が裏で作る resultCanvas であって、この overlay ではない。 */
#session-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 120, 120, 0.45);
}

#session-overlay.is-hidden {
  display: none;
}

/* START / カウントダウン中はカメラ映像 + 顔隠し円 (canvas) を見せるため、
   overlay 背景を透明にする (RESULT は既定のグレーのまま)。 */
body[data-session-state="start"] #session-overlay,
body[data-session-state="result"] #session-overlay {
  background: transparent;
}

/* ---- START 画面 (カメラ映像 + 顔隠し円は canvas 側 = main.js が描画。
   ここは画面下部中央の "start" 文字だけ) ---- */
.session-start-screen {
  position: fixed;
  inset: 0;
  background: transparent;
  /* START 画面はカーソルを消す (この画面と子要素だけに適用)。開始は鼻先 arrow ↔ 右端 start の接触。 */
  --start-cursor: none;
  cursor: none;
}
/* START 画面中央のタイトル (title.svg)。start ボタンより下のレイヤー。
   サイズは高さ基準 (ui_layout.js が短辺から算出した --ui-title-height)。
   横幅は SVG 比率のまま自動、--ui-max-width を超えたらアスペクト維持で縮む (画面外に出さない)。 */
.session-start-title {
  position: absolute;
  left: 50%;
  top: 50%;
  height: var(--ui-title-height, 12vh);
  width: auto;
  max-width: var(--ui-max-width, 85vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}
.is-hidden {
  display: none !important;
}

/* session overlay (START / カウントダウン / RESULT) 全体で矢印カーソルに統一する。
   子要素や button の cursor 指定 (pointer 等) に負けないよう !important。 */
#session-overlay,
#session-overlay *,
.session-start-screen,
.session-start-screen *,
.session-start-message-wrap,
.session-start-message,
.session-start-button,
.session-countdown-screen,
.session-countdown-screen * {
  cursor: var(--start-cursor) !important;
}

/* ---- Start ボタン後のカウントダウン + 白背景の分割トランジション ---- */
.session-countdown-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: transparent;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--start-cursor);
  z-index: 1000;
}
.session-countdown-split {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: #ffffff;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.session-countdown-split-top {
  top: 0;
}
.session-countdown-split-bottom {
  bottom: 0;
}
.session-countdown-text {
  position: relative;
  z-index: 2;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-size: clamp(90px, 18vw, 220px);
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  /* カメラ / 肌色円の上でも読めるよう、暗い影で縁取る (ぼかしは映像には掛けない)。 */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.6);
}
.session-countdown-text.is-popping {
  animation: countdownPop 260ms steps(2, end);
}
.session-countdown-text.is-hidden {
  opacity: 0;
}
.session-countdown-screen.is-opening .session-countdown-split-top {
  animation: countdownSplitTop 940ms steps(9, end) forwards;
}
.session-countdown-screen.is-opening .session-countdown-split-bottom {
  animation: countdownSplitBottom 940ms steps(9, end) forwards;
}
@keyframes countdownPop {
  0% {
    transform: translate3d(-5px, 0, 0);
  }
  50% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes countdownSplitTop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  12% {
    transform: translate3d(0, -8vh, 0);
  }
  24% {
    transform: translate3d(0, -18vh, 0);
  }
  36% {
    transform: translate3d(0, -30vh, 0);
  }
  48% {
    transform: translate3d(0, -44vh, 0);
  }
  60% {
    transform: translate3d(0, -60vh, 0);
  }
  72% {
    transform: translate3d(0, -78vh, 0);
  }
  84% {
    transform: translate3d(0, -98vh, 0);
  }
  100% {
    transform: translate3d(0, -120vh, 0);
  }
}
@keyframes countdownSplitBottom {
  0% {
    transform: translate3d(0, 0, 0);
  }
  12% {
    transform: translate3d(0, 8vh, 0);
  }
  24% {
    transform: translate3d(0, 18vh, 0);
  }
  36% {
    transform: translate3d(0, 30vh, 0);
  }
  48% {
    transform: translate3d(0, 44vh, 0);
  }
  60% {
    transform: translate3d(0, 60vh, 0);
  }
  72% {
    transform: translate3d(0, 78vh, 0);
  }
  84% {
    transform: translate3d(0, 98vh, 0);
  }
  100% {
    transform: translate3d(0, 120vh, 0);
  }
}

/* ---- SVG 数字カウントダウン (count.svg の 3,2,1 を表示切替) ----
   背面の START 画面 (カメラ + 顔隠し円) を隠さないよう透明・pointer なし。 */
.session-svg-countdown-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}
/* count.svg 1 枚を画面いっぱいに表示。 */
.countdown-count-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
.countdown-count-svg {
  width: 100vw;
  height: 100vh;
  display: block;
  overflow: visible;
}
/* 数字グループは既定で非表示、is-visible で表示 (登りアニメーションはしない)。 */
.countdown-count-svg .count-number-group {
  visibility: hidden;
}
.countdown-count-svg .count-number-group.is-visible {
  visibility: visible;
}
.countdown-count-svg .count-number-group polygon,
.countdown-count-svg .count-number-group path {
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
}
/* 表示中の数字は、その場でほんの少しカクつく (jitter)。 */
.countdown-count-svg .count-number-group.is-visible polygon,
.countdown-count-svg .count-number-group.is-visible path {
  animation-name: countLocalJitter;
  animation-duration: var(--jitter-duration, 400ms);
  animation-timing-function: steps(var(--jitter-steps, 1), end);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: var(--jitter-delay, 0ms);
}
@keyframes countLocalJitter {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(var(--jx, 0px), var(--jy, 0px)) rotate(var(--jr, 0deg));
  }
  100% {
    transform: translate(
      calc(var(--jx, 0px) * -0.6),
      calc(var(--jy, 0px) * -0.6)
    ) rotate(calc(var(--jr, 0deg) * -0.6));
  }
}

.session-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
}

/* ---- START 画面の導入 (タイトル + 短い説明 + 3 モードカード + 開始指示) ----
   体験中の細かい操作確認は RUNNING 中の "?" ヘルプに任せる。ここは初見者の入口。
   pointer-events:none で Start ボタンへの誤クリックを邪魔しない。 */
.session-panel-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.session-intro {
  width: min(860px, calc(100vw - 48px));
  margin: 0 auto 28px;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.session-title {
  font-size: clamp(38px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-bottom: 20px;
}
.session-lead {
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.session-description {
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 26px;
}

/* 3 モードの説明カード (横並び / 狭い画面では縦並びへ折り返し) */
.session-mode-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto 24px;
  pointer-events: none;
}
.session-mode-card {
  min-height: 188px;
  padding: 20px 18px 18px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 18px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.session-mode-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
  /* SVG は塗り指定がなく既定で黒なので、暗背景上では白く反転して見せる。 */
  filter: invert(1);
}
.session-mode-name {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.session-mode-text {
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.session-mode-text kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  font: 11px/1.4 monospace;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}
.session-start-hint {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.62);
}

/* 狭い画面: カードを縦並び + アイコン左 / テキスト右の 2 列レイアウトに切り替え */
@media (max-width: 760px) {
  .session-intro {
    width: min(520px, calc(100vw - 36px));
    margin-bottom: 22px;
  }
  .session-mode-guide {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .session-mode-card {
    min-height: 0;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    text-align: left;
    align-items: center;
  }
  .session-mode-icon {
    width: 42px;
    height: 42px;
    margin: 0;
    grid-row: 1 / span 2;
  }
  .session-mode-name {
    margin: 0 0 4px;
    font-size: 15px;
  }
  .session-mode-text {
    font-size: 12px;
    line-height: 1.5;
  }
}

.session-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 18px 42px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}

.session-button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.session-button:active {
  transform: scale(0.98);
}

/* START 画面の "start" 文字 (画面下部中央。枠 / 背景なし)。
   .session-button より後に定義して確実に上書きする。 */
.session-start-button {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #000000;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: var(--start-cursor);
  z-index: 3;
}
.session-start-button:hover,
.session-start-button:active,
.session-start-button:focus {
  background: transparent;
  color: #000000;
}

.session-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.session-preview-wrap {
  width: min(72vw, 520px);
  max-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-preview-wrap canvas,
.session-preview-wrap img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  background: #fff;
}

/* ---- Adobe Fonts (nitalago-ruika) を START DOM に明示適用 ----
   button や内部要素はブラウザの user-agent stylesheet で別フォントになりがちなので、
   一段強いセレクタで上書きしておく。kbd だけは monospace を維持。 */
.session-panel,
.session-intro,
.session-title,
.session-lead,
.session-description,
.session-start-hint,
.session-mode-card,
.session-mode-name,
.session-mode-text {
  font-family:
    "nitalago-ruika",
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
  font-weight: 200;
  font-style: normal;
}

/* キー表示は本文フォントだと判別しづらいので monospace を維持。
   nitalago-ruika の weight 200 は細いので、kbd 側は通常 weight に戻す。 */
kbd,
.session-mode-text kbd {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-weight: 400;
}

/* -----------------------------------------------------------
   映像調整 UI (右上・日本語スライダー。開発用)
   ----------------------------------------------------------- */
#video-color-tuner {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 280px;
  padding: 12px;
  /* #session-overlay (z-index:10000) より確実に前面へ。 */
  z-index: 10001;
  pointer-events: auto;
  touch-action: auto;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  backdrop-filter: blur(8px);
}
/* UI 内部すべてクリック可能に (背面 overlay / canvas に吸われないように)。 */
#video-color-tuner,
#video-color-tuner * {
  pointer-events: auto;
}
#video-color-tuner input[type="range"] {
  pointer-events: auto;
  touch-action: auto;
  cursor: pointer;
}
#video-color-tuner button {
  pointer-events: auto;
  cursor: pointer;
}
.video-color-tuner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 700;
}
.video-color-tuner-header button,
.video-color-save,
.video-color-reset {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
.video-color-tuner-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-color-row {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  gap: 8px;
  align-items: center;
}
.video-color-row input {
  width: 100%;
}
.video-color-row output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.video-color-tuner-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.video-color-save-status {
  min-height: 1.4em;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
}
#video-color-tuner.is-collapsed {
  width: auto;
}
#video-color-tuner.is-collapsed .video-color-tuner-body,
#video-color-tuner.is-collapsed .video-color-tuner-actions,
#video-color-tuner.is-collapsed .video-color-save-status {
  display: none;
}

/* -----------------------------------------------------------
   RESULT 画面: 撮影 8 枚を 4 列 × 2 行のグリッドで表示。
   背景は canvas の暗いカメラ映像 (overlay 透明)。全体保存ボタン/白背景/logo は無し。
   ----------------------------------------------------------- */
.session-result-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 写真を全体表示 (トリミングなし) にすると縦に長くなるので、上詰め + 縦スクロールにする。
     ※ overflow-y:auto + justify-content:center は上端が切れてスクロール不能になるため flex-start。 */
  justify-content: flex-start;
  padding: var(--photo-gap, 20px) 0;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  /* OS カーソルは消し、鼻ポインタ (arrow.svg / download.svg) を使う。 */
  --start-cursor: none;
  cursor: none;
}
.session-result-photo-grid {
  /* 12 枚を 2 列で表示。写真は「全体」を自然アスペクトで見せる (トリミングしない)。
     横幅 / 余白 / 列数は ui_layout.js が短辺基準で算出し CSS 変数で受け取る。
     縦は自然アスペクトぶん伸び、画面を超えたぶんは親のスクロールで見せる。 */
  width: auto;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--photo-cols, 2), var(--photo-w, 46vw));
  gap: var(--photo-gap, 20px);
  justify-content: center;
}
/* End ボタン (end.svg) を画面右下端に固定。サイズは title/start と同じ高さ基準で揃える。 */
.session-end-svg {
  position: fixed;
  right: 0;
  bottom: 0;
  height: var(--ui-end-height, 12vh);
  width: auto;
  max-width: var(--ui-max-width, 85vw);
  z-index: 3;
  pointer-events: auto;
  cursor: none;
}
/* 鼻先に付いてくる arrow.svg。最前面に出す。 */
.session-nose-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: min(8vw, 140px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30; /* 最前面。 */
  opacity: 0;
}
/* RESULT (エンド) 画面では OS カーソルを確実に非表示にする (鼻先 arrow のみ使う)。 */
body[data-session-state="result"],
body[data-session-state="result"] #session-overlay,
body[data-session-state="result"] #session-overlay * {
  cursor: none !important;
}
/* ダウンロードした時の downloaded.svg 表示。位置は JS が選択写真の中央に設定。 */
.session-downloaded-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.session-downloaded-toast.is-visible {
  opacity: 1;
}
/* downloaded.svg 本体 (インライン化された svg)。文字が動いても見切れないよう overflow:visible。 */
.session-downloaded-svg {
  display: block;
  height: min(10vh, 84px);
  width: auto;
  max-width: 80vw;
  overflow: visible;
}
.session-result-photo-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: inherit;
  /* aspect-ratio は指定しない → 高さは写真 (canvas) の自然アスペクトで決まる。 */
  overflow: visible;
}
.session-result-photo-canvas {
  display: block;
  width: 100%;
  height: auto;          /* 全体表示 (トリミングなし)。撮影キャンバスの比率のまま。 */
}

/* ---- PC (横広い画面) は以前の配置: 画面に収める (スクロールなし) + 4:3 トリミング ----
   ui_layout.js が body[data-result-layout="pc"] を付与し、写真サイズ (--photo-w/--photo-h) を
   画面に収まるよう算出する。 */
body[data-result-layout="pc"] .session-result-screen {
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
body[data-result-layout="pc"] .session-result-photo-item {
  /* 高さは算出値 (--photo-h) に固定 → 4:3 トリミング表示。 */
  height: var(--photo-h, 220px);
}
body[data-result-layout="pc"] .session-result-photo-canvas {
  height: 100%;
  object-fit: cover;     /* 以前どおり範囲を絞って (トリミングして) 見せる。 */
}
/* hover / focus で四隅 SVG を表示 (「選択中」の見た目。保存画像には入らない)。
   frame は写真と同じ矩形に合わせ、各コーナーを写真の外側へ逃がして被らないようにする。 */
.session-result-photo-hover-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.session-result-photo-item:hover .session-result-photo-hover-frame,
.session-result-photo-item:focus-visible .session-result-photo-hover-frame {
  opacity: 1;
}
.session-result-photo-hover-corner {
  position: absolute;
  width: clamp(34px, 3.6vw, 72px);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* 素材 (黒) を白にする。 */
  filter: brightness(0) invert(1);
}
/* 位置は translate/rotate プロパティで持たせ (transform とは別レイヤー)、
   ホバー時の transform ジッターと合成できるようにする。
   translate 72% で写真の角の少し外へ (100% より写真に近づけて距離を狭める)。 */
.session-result-photo-hover-corner.corner-0 {
  left: 0;
  top: 0;
  translate: -72% -72%;
  rotate: 0deg;
}
.session-result-photo-hover-corner.corner-1 {
  right: 0;
  top: 0;
  translate: 72% -72%;
  rotate: 90deg;
}
.session-result-photo-hover-corner.corner-2 {
  right: 0;
  bottom: 0;
  translate: 72% 72%;
  rotate: 180deg;
}
.session-result-photo-hover-corner.corner-3 {
  left: 0;
  bottom: 0;
  translate: -72% 72%;
  rotate: -90deg;
}
/* ホバー中、カウントダウンの数字 SVG のように steps() でカクカク揺らす。 */
.session-result-photo-item:hover .session-result-photo-hover-corner,
.session-result-photo-item:focus-visible .session-result-photo-hover-corner {
  animation: resultCornerJitter 260ms steps(2, end) infinite alternate;
}
/* 各コーナーの揺れをずらす (hover 文脈に含めて specificity を上げ、shorthand の delay:0 に勝つ)。 */
.session-result-photo-item:hover .session-result-photo-hover-corner.corner-1 { animation-delay: -70ms; }
.session-result-photo-item:hover .session-result-photo-hover-corner.corner-2 { animation-delay: -140ms; }
.session-result-photo-item:hover .session-result-photo-hover-corner.corner-3 { animation-delay: -210ms; }
@keyframes resultCornerJitter {
  from { transform: translate(-2px, 2px) rotate(-1.6deg); }
  to   { transform: translate(2px, -2px) rotate(1.6deg); }
}
.session-result-screen .session-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* RESULT (end 画面) はカーソルの矢印も白にする (arrow_white.svg)。
   #session-overlay の !important 矢印指定に勝つため ID + 状態属性で上書き。 */
body[data-session-state="result"] #session-overlay,
body[data-session-state="result"] #session-overlay * {
  cursor: url('./assets/arrow_white.svg') 0 0, pointer !important;
}
/* 写真にホバー中はカーソルを白い download アイコンにする (白矢印より優先)。 */
#session-overlay .session-result-photo-item:hover,
#session-overlay .session-result-photo-item:hover * {
  cursor: url('./assets/download_white.svg') 20 20, pointer !important;
}
/* 旧 RESULT パネルの白背景は今回使わない (念のため透明化)。 */
.session-panel-result,
.session-preview-wrap {
  background: transparent;
  box-shadow: none;
}