/* 光るカードの台（T7）。カードを見る画面と撮影の画面で使う。
   幅は入れる側（画面の CSS）が決める。高さは 63:88 で決まる。 */
.card-stage {
  width: 100%;                                    /* 入れた箱の幅いっぱい */
  perspective: calc(var(--cw, 300px) * 3.2);      /* 遠近の強さ（カード幅の 3.2 倍の距離から見る。試作と同じ） */
  touch-action: none;                             /* なぞってもページがスクロール・拡大しない */
  user-select: none;                              /* 長押しで選択されない */
  -webkit-user-select: none;                      /* 同じ指定（iPhone の Safari 向け） */
  -webkit-touch-callout: none;                    /* 長押しで画像のメニューを出さない */
}
.card3d {
  position: relative;                             /* 側面の層を重ねる基準 */
  width: 100%;                                    /* 台の幅いっぱい */
  aspect-ratio: 63 / 88;                          /* カードの比率 */
  transform-style: preserve-3d;                   /* 側面の層を立体のまま重ねる */
  will-change: transform;                         /* 傾きを滑らかにする（GPU に任せる） */
}
.card-face {
  position: absolute;                             /* 側面の層の上に重ねる */
  inset: 0;                                       /* 台いっぱい */
  width: 100%;                                    /* 表示の幅（中の画素数は JS が決める） */
  height: 100%;                                   /* 表示の高さ */
  display: block;                                 /* 下にすき間を作らない */
}
.card-side {
  position: absolute;                             /* 表の面の後ろに重ねる */
  inset: 0;                                       /* 表の面と同じ大きさ */
  border-radius: calc(var(--cw, 300px) * 0.045);  /* 角の丸みを表の面とそろえる */
}

/* ===== カードを見る画面（T10） ===== */
.card-screen { display: flex; flex-direction: column; min-height: 100dvh; background: var(--page); } /* 上の段・カード・下の操作を縦に */
.card-head { display: flex; align-items: center; justify-content: space-between; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; } /* 戻ると「3 / 13」 */
.card-pos { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; } /* 数字の幅をそろえる */
.card-stage-wrap { flex: 1; display: flex; align-items: center; justify-content: center; touch-action: none; } /* 残りの高さの真ん中にカード。外側の払う操作をブラウザに取られないように */
.card-slot { width: min(calc(100% - 48px), calc((100dvh - 56px - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 63 / 88)); aspect-ratio: 63 / 88; } /* カードの置き場（中の .card-stage は幅いっぱい＝T7）。横にも縦にも収まる大きさ（上の段 56px・下の操作 104px を引いた高さから 63:88 で幅を出す）。横向きでも収まる */
.sensor-note { margin: 0 0 8px; font-size: 12px; color: var(--sub); text-align: center; } /* 断られたときの小さな案内 */
.card-tools { display: flex; align-items: center; gap: 4px; height: 72px; margin: 0 20px max(16px, env(safe-area-inset-bottom)); padding: 0 8px; border-radius: 36px; background: rgba(247, 249, 253, .9); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 10px var(--panel-shadow); } /* 下部ナビと同じ見た目の帯 */
.card-tools .tool { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); text-decoration: none; } /* 直す・消す・撮る */
.nav-prev, .nav-next { position: relative; flex: none; width: 44px; height: 44px; border: 0; background: none; } /* ‹ › の押せる範囲 */
.nav-prev::before, .nav-next::before { content: ""; position: absolute; top: 15px; width: 12px; height: 12px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); } /* 矢印の線 */
.nav-prev::before { left: 18px; transform: rotate(45deg); }   /* 左向き */
.nav-next::before { left: 12px; transform: rotate(-135deg); } /* 右向き */
.nav-prev:disabled, .nav-next:disabled { opacity: .25; }       /* 端のカードでは薄く */