/* ========================================================
   photo-hand.css — 写真で手牌読み込み（共通部品・ベータ版）の画面
   photo-hand.js とセット。何切る・かんたん点数計算で使う。
   写真を扱う画面なので、アプリのテーマに関係なく暗い画面にする（色は下の --ph-* だけで決める）。
   縦画面は1列、横画面は左（写真・チェック・手牌）と右（修正パネル・決定）の2列。
   ======================================================== */

.ph-overlay {
  --ph-scrim: #000000; /* 透かすと、下のページ（点数計算の文字など）が見えて読みにくい */
  --ph-tag-bg: rgba(0, 0, 0, 0.75);
  --ph-card: #1c1c1e;
  --ph-card-2: #2c2c2e;
  --ph-line: #38383a;
  --ph-line-strong: #48484a;
  --ph-text: #f5f5f7;
  --ph-text-2: #a1a1a6;
  --ph-text-3: #86868b;
  --ph-ok: #34d399;        /* 自信が高い・選んでいる候補 */
  --ph-unsure: #f59e0b;    /* 自信が低い（要確認） */
  --ph-sel: #60a5fa;       /* 選択中 */
  --ph-sel-bg: rgba(96, 165, 250, 0.14);
  --ph-accent: #d4a24c;
  --ph-on-accent: #1d1d1f; /* 明るいキャラメルの上の文字 */
}

.ph-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ph-scrim);
  color: var(--ph-text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* どのページから開いても同じ見た目にする（点数計算は丸ゴシック・字間つまり・ボタンの余白なしのため） */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  letter-spacing: normal;
}
/* ボタンの文字色は、部品ごとの指定がなければ画面の色を受け継ぐ（:where で、部品ごとの指定より弱くしておく） */
:where(.ph-overlay) button { color: inherit; }
.ph-sheet {
  max-width: 980px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.ph-header { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; min-height: 44px; }
.ph-link { border: 0; background: none; color: var(--ph-text-2); font-size: 14px; text-align: left; cursor: pointer; min-height: 44px; font-family: inherit; padding: 1px 6px; }
.ph-title { margin: 0; text-align: center; font-size: 16px; font-weight: 900; }

.ph-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ph-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 撮影した写真と、牌ごとの枠（緑=自信あり / 橙=要確認 / 青=選択中） */
/* 手牌の部分だけを切り取った写真。img の位置と大きさは JS がインラインで指定する */
.ph-photo { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: var(--ph-card); }
.ph-photo img { position: absolute; display: block; height: auto; max-width: none; max-height: none; }
.ph-box { position: absolute; border: 2px solid var(--ph-ok); border-radius: 4px; }
.ph-box.unsure { border-color: var(--ph-unsure); }
.ph-box.sel { border-color: var(--ph-sel); box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4); }
.ph-photo-tag { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--ph-tag-bg); font-size: 11px; font-weight: 700; }

/* チェック欄 */
.ph-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 6px;
  border-radius: 12px;
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
}
.ph-check span { font-size: 10px; color: var(--ph-text-2); }
.ph-check b { font-size: 15px; font-weight: 900; color: var(--ph-ok); }
.ph-check.warn { background: #2a1d0c; border-color: #7a4d14; }
.ph-check.warn b { color: #fbbf24; }
.ph-autofix { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(245, 158, 11, 0.12); color: #fcd34d; font-size: 12px; line-height: 1.6; }

/* 読み取った手牌（7枚×2段） */
.ph-sec-title { display: flex; align-items: baseline; justify-content: space-between; padding-left: 10px; border-left: 3px solid #4cc47c; margin-bottom: 8px; }
.ph-sec-title span { font-size: 15px; font-weight: 900; }
.ph-sec-title small { font-size: 11px; color: var(--ph-text-2); }
.ph-hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px 6px; }
.ph-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 3px;
  border-radius: 9px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.ph-slot.unsure { border-color: var(--ph-unsure); }
.ph-slot.sel { border-color: var(--ph-sel); background: var(--ph-sel-bg); }
.ph-slot .ph-tile { width: 100%; max-width: 46px; }
.ph-q {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ph-unsure);
  color: #1a1000;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-add { border: 2px dashed var(--ph-line-strong); color: var(--ph-text-2); font-size: 22px; font-weight: 700; }
.ph-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--ph-text-2); }
.ph-legend span { display: flex; align-items: center; gap: 5px; }
.ph-legend i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--ph-unsure); }
.ph-legend i.sel { border-color: var(--ph-sel); }

/* 牌の画像（未選択は「?」の枠） */
.ph-tile { display: block; height: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
.ph-tile-empty {
  width: 100%;
  max-width: 46px;
  aspect-ratio: 64 / 86;
  border: 2px dashed var(--ph-line-strong);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-text-2);
  font-weight: 900;
  filter: none;
}

/* 修正パネル */
.ph-panel { border-radius: 18px; border: 1px solid var(--ph-line); background: var(--ph-card); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ph-panel-head { display: flex; align-items: center; gap: 12px; }
.ph-panel-head b { display: block; font-size: 15px; font-weight: 900; }
.ph-panel-head small { display: block; font-size: 12px; color: var(--ph-text-2); margin-top: 2px; }
.ph-tile-preview { width: 40px; flex-shrink: 0; }
.ph-panel-head .ph-tile-empty { width: 40px; }
.ph-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-cand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 92px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid var(--ph-line);
  background: var(--ph-card-2);
  color: var(--ph-text);
  cursor: pointer;
  font-family: inherit;
}
.ph-cand.cur { border: 2px solid var(--ph-ok); background: #0f2a24; }
.ph-tile-cand { width: 34px; }
.ph-cand-name { font-size: 12px; font-weight: 700; }
.ph-bar { width: 100%; height: 4px; border-radius: 999px; background: var(--ph-line); overflow: hidden; display: block; }
.ph-bar i { display: block; height: 100%; background: var(--ph-text-3); }
.ph-bar i.top { background: var(--ph-ok); }
.ph-cand small { font-size: 10px; color: var(--ph-text-2); }
.ph-all-toggle {
  min-height: 44px;
  border-radius: 12px;
  border: 1px dashed var(--ph-line-strong);
  background: transparent;
  color: #d9c9b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 1px 6px;
}
.ph-palette { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.ph-pal { padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.ph-pal.cur { border-color: var(--ph-ok); }
.ph-pal .ph-tile { width: 100%; }
.ph-remove { border: 0; background: none; color: #f87171; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 36px; font-family: inherit; padding: 1px 6px; }

.ph-decide {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--ph-accent);
  color: var(--ph-on-accent);
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}
.ph-decide.disabled { background: var(--ph-line); color: var(--ph-text-2); font-size: 14px; font-weight: 700; cursor: default; text-align: center; padding: 0 12px; }

/* 横画面: 左右2列にして1画面に収める */
@media (orientation: landscape) {
  .ph-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .ph-sheet { padding-top: 4px; }
  .ph-header { min-height: 36px; }
  .ph-body { gap: 10px; }
  .ph-col { gap: 8px; }
  .ph-check { padding: 5px 4px; }
  .ph-check b { font-size: 13px; }
  .ph-slot { min-height: 46px; padding: 2px; }
  .ph-slot .ph-tile, .ph-tile-empty { max-width: 34px; }
  .ph-panel { padding: 10px; gap: 8px; }
  .ph-cand { min-height: 68px; padding: 5px 4px; gap: 3px; }
  .ph-tile-cand { width: 26px; }
  .ph-decide { min-height: 44px; font-size: 14px; }
}

/* ---------- 写真の読み込み（入口・枠合わせ） ---------- */
.ph-start { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.ph-lead { margin: 4px 0; font-size: 13px; line-height: 1.7; color: var(--ph-text-2); }
.ph-lead strong { color: var(--ph-text); }
.ph-start-btns { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ph-secondary { background: transparent; border: 1px solid #2c7a60; color: #cfeee2; font-size: 14px; }
.ph-note { margin: 0; font-size: 11px; line-height: 1.6; color: #fbbf24; }

/* わんこの吹き出し */
.ph-wanko { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.ph-wanko-img { width: 64px; height: 64px; flex-shrink: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); animation: ph-bob 2.4s ease-in-out infinite; }
@keyframes ph-bob { 50% { transform: translateY(-4px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .ph-wanko-img { animation: none; } }
.ph-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #0f2a24;
  border: 1px solid #2c7a60;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ph-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #0f2a24;
  border-left: 1px solid #2c7a60;
  border-bottom: 1px solid #2c7a60;
  transform: translateY(-50%) rotate(45deg);
}
.ph-bubble b { font-size: 15px; font-weight: 900; color: #fff; }
.ph-bubble span { font-size: 12px; line-height: 1.6; color: var(--ph-text-2); }
/* 背の低い横画面: わんこと吹き出しを小さくして1画面に収める */
@media (orientation: landscape) and (max-height: 430px) {
  .ph-start { max-width: 760px; gap: 8px; }
  .ph-wanko-img { width: 46px; height: 46px; }
  .ph-bubble { padding: 6px 12px; }
  .ph-bubble b { font-size: 13px; }
  .ph-bubble span { font-size: 11px; line-height: 1.5; }
}

.ph-frame-wrap { position: relative; margin: 6px auto 10px; max-width: 100%; width: fit-content; }
.ph-frame-wrap img { display: block; max-width: 100%; max-height: 62vh; border-radius: 10px; user-select: none; }
.ph-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.ph-frame-poly { fill: rgba(52, 211, 153, 0.12); stroke: var(--ph-ok); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ph-frame-div { stroke: rgba(52, 211, 153, 0.7); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ph-frame-handle { fill: #fbbf24; stroke: #022c22; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.ph-frame-actions { display: flex; justify-content: center; }
.ph-frame-actions .ph-decide { min-width: 240px; padding: 0 24px; }
@media (orientation: landscape) and (max-height: 430px) {
  .ph-frame-wrap img { max-height: 58vh; }
  .ph-lead { font-size: 12px; margin: 0; }
}

/* ベータ版の札（入口のボタン・画面の題名）。何切る・点数計算のどちらのボタンにも付くので、色はここで決める */
.ph-beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  background: #f2c985;
  color: #5a3d06;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: 2px;
}

/* わんこの絵（仮）。何切るのページは style.css を読まないので、写真の画面で使う絵だけはここでも指定する
   （正式な素材が届いたら、style.css の「わんこの絵」と一緒に差し替える） */
.ph-wanko-img { background: center / contain no-repeat; }
.ph-art-think { background-image: url("img/wanko/wanko-think.svg"); }
.ph-art-sad   { background-image: url("img/wanko/wanko-sad.svg"); }