/* ============================================================
   おりがみ 3D おりかたプレイヤー V2
   - 外部ライブラリなし / CDNなし / eval不使用
   - 作品データは works/index.json + works/<作品>.json で管理
   - 先生向けメモ:
     * index.html をダブルクリックで開くと、ブラウザの制限で
       外部JSONが読み込めないことがあります。その場合は内蔵の
       サンプル「かぶと」が自動で表示されます(フォールバック)。
     * 正しく確認するには、フォルダで
         python -m http.server 8000
       を実行し http://localhost:8000/ を開くか、
       Webサーバー(WordPress等)に置いて確認してください。
     * 作品を増やすには works/ にJSONを追加し、
       works/index.json の works 配列に1件追記するだけです。
   ============================================================ */
:root {
  --navy: #1e3a5f;
  --navy-soft: #33517a;
  --gold: #d4af37;
  --washi: #faf7f0;
  --card: #ffffff;
  --valley: #2f6fd8;   /* 谷折り(青) */
  --mountain: #d64545; /* 山折り(赤) */
  --radius-pill: 999px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #ffffff 0%, var(--washi) 60%),
    var(--washi);
  color: var(--navy);
}
body { display: flex; flex-direction: column; align-items: center; }
.okp-app {
  width: 100%; max-width: 980px; height: 100dvh;
  display: flex; flex-direction: column; padding: 8px 10px 10px;
}

/* ---------- ヘッダー ---------- */
.okp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; padding: 4px 6px 8px;
}
.okp-title { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.okp-title .okp-appname { font-size: 13px; color: var(--navy-soft); letter-spacing: .06em; }
.okp-title .okp-work { font-size: 21px; font-weight: 800; }
.okp-back-btn {
  display: none;
  font-family: inherit; font-weight: 700; font-size: 12px;
  color: var(--navy); background: #fff;
  border: 2px solid var(--navy); border-radius: var(--radius-pill);
  padding: 7px 14px; min-height: 34px; cursor: pointer; white-space: nowrap;
}
.okp-app.okp-playing .okp-back-btn { display: inline-flex; }
.okp-colors { display: flex; align-items: center; gap: 6px; }
.okp-colors .okp-colors-label { font-size: 12px; font-weight: 700; color: var(--navy-soft); }
.okp-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(30,58,95,.35);
  cursor: pointer; padding: 0;
}
.okp-swatch.okp-active { outline: 3px solid var(--gold); outline-offset: 1px; }
.okp-mode-toggle {
  font-family: inherit; font-weight: 700; font-size: 12px;
  color: var(--navy-soft); background: #f2eee3;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  padding: 7px 14px; min-height: 34px; cursor: pointer; white-space: nowrap;
}
.okp-mode-toggle.okp-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- 作品選択画面 ---------- */
.okp-select { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.okp-select-title { font-size: 20px; font-weight: 800; text-align: center; margin-top: 12px; }
.okp-notice {
  display: none; text-align: center; font-size: 13px; color: var(--mountain);
  background: #fdeeee; border: 2px solid #f2c7c7; border-radius: 14px;
  padding: 8px 14px; margin: 0 auto; max-width: 560px;
}
.okp-notice.okp-show { display: block; }
/* 修正: JSON検証エラーの一覧(先生モードのときだけ表示。児童には見せない) */
.okp-errors {
  display: none; font-size: 12px; color: var(--navy-soft);
  background: #fdf6e3; border: 2px dashed var(--gold); border-radius: 14px;
  padding: 8px 14px; margin: 0 auto; max-width: 560px; line-height: 1.7;
}
.okp-app.okp-teacher-mode .okp-errors.okp-show { display: block; }
.okp-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; padding: 6px 4px 14px;
}
.okp-card {
  background: var(--card); border: 2px solid #e7e0d2; border-radius: 20px;
  padding: 14px; cursor: pointer; text-align: center;
  transition: transform .1s, box-shadow .15s, border-color .15s;
  font-family: inherit;
}
.okp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,58,95,.12); }
.okp-card:active { transform: scale(.97); }
.okp-card.okp-last { border-color: var(--gold); }
.okp-card canvas {
  width: 100%; height: 130px; border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4efe4 100%);
}
.okp-card .okp-card-title { font-size: 18px; font-weight: 800; margin-top: 8px; }
.okp-select-foot { text-align: center; font-size: 13px; color: var(--navy-soft); padding-bottom: 8px; }

/* ---------- 再生画面 ---------- */
.okp-player { flex: 1 1 0%; display: none; flex-direction: column; min-height: 0; }
.okp-app.okp-playing .okp-player { display: flex; }
.okp-app.okp-playing .okp-select { display: none; }

.okp-stage {
  position: relative; flex: 1 1 0%; min-height: 320px;
  background: linear-gradient(180deg, #ffffff 0%, #f4efe4 100%);
  border: 2px solid #e7e0d2; border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(30,58,95,.08) inset;
}
.okp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
/* 折り紙表示エリアには文字・ボタン・ラベル・トースト・完成ポップアップを一切出さない。
   表示するのは 紙 / 折り線 / 矢印 / 動かす面の光 / ゴースト / 影 / 紙ふぶき のみ。 */

/* ---------- 操作ボタン ---------- */
.okp-controls { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.okp-row { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.okp-row-nowrap { flex-wrap: nowrap; }
.okp-row-nowrap .okp-btn {
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.okp-btn {
  font-family: inherit; font-weight: 800; font-size: 16px;
  color: var(--navy); background: #fff;
  border: 2px solid var(--navy); border-radius: var(--radius-pill);
  padding: 11px 20px; min-height: 48px; min-width: 96px;
  cursor: pointer; transition: transform .08s, background .15s;
}
.okp-btn:active { transform: scale(.96); }
.okp-btn.okp-primary { background: var(--navy); color: #fff; flex: 0 1 200px; }
.okp-btn.okp-small { font-size: 13px; padding: 8px 14px; min-height: 40px; min-width: 0; }
.okp-btn.okp-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.okp-btn:disabled { opacity: .35; cursor: default; }
.okp-views { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.okp-view-btn {
  font-family: inherit; font-weight: 700; font-size: 13px;
  color: var(--navy-soft); background: #f2eee3;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  padding: 8px 16px; min-height: 40px; cursor: pointer;
}
.okp-view-btn.okp-active { background: #fff; border-color: var(--gold); color: var(--navy); }

/* 児童モード(既定)/先生モードの出し分け */
.okp-teacher-only { display: none; }
.okp-app.okp-teacher-mode .okp-teacher-only { display: inline-flex; }
.okp-student-only { display: inline-flex; }
.okp-app.okp-teacher-mode .okp-student-only { display: none; }

/* 狭い画面では視点ボタンを「👁 見方」に収納 */
.okp-views-toggle { display: none; }
@media (max-width: 620px) {
  .okp-views-toggle { display: inline-flex; }
  .okp-views { display: none; }
  .okp-views.okp-expanded { display: flex; }
}
@media (max-width: 480px) {
  .okp-title .okp-work { font-size: 18px; }
  .okp-btn { font-size: 14px; padding: 10px 14px; min-width: 84px; }
}