/*
 * オゴオリザクラの謎を追え！ 部品
 * 前提: tokens.css を先に読み込む。クラス名は oz- で始める。
 * 色・寸法は tokens.css の変数だけを使う（値を直接書かない）。
 *
 * 【暫定採用 v0.1（2026-09-21）】今後、更新の可能性あり。クラス名・構造を変えるときは、
 * docs/ogorizakura_nazooe_design_system.md の変更履歴に理由を書く。
 */

/* ---- 基本 ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none !important; } /* display指定のある部品（地図・シートなど）でも hidden を効かせる */

body {
  margin: 0;
  background: var(--oz-bg);
  color: var(--oz-text);
  font-family: var(--oz-font-body);
  font-size: var(--oz-fs-base);
  line-height: var(--oz-lh-body);
  overflow-wrap: anywhere;
  word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す。非対応でも崩れない */
}

/* ---- ルビ（モードAは総ルビ。漢字はすべて <ruby>漢字<rt>かんじ</rt></ruby> で書く）----
   モードB（およびモード未選択）では、万一ルビが混じっても表示しない。 */
ruby { ruby-position: over; }
rt {
  font-family: var(--oz-font-body); font-weight: 400; font-style: normal;
  font-size: max(var(--oz-rt-size), var(--oz-rt-min));
  letter-spacing: 0; user-select: none;
}
:root:not([data-mode="a"]) rt,
:root:not([data-mode="a"]) rp { display: none; }

h1, h2, h3 { line-height: var(--oz-lh-tight); margin: 0 0 var(--oz-space-3); }
h1 { font-size: var(--oz-fs-2xl); }
h2 { font-size: var(--oz-fs-xl); }
h3 { font-size: var(--oz-fs-lg); }
p  { margin: 0 0 var(--oz-space-4); }

a { color: var(--oz-accent-strong); text-underline-offset: 0.2em; }

:focus-visible {
  outline: var(--oz-focus-ring);
  outline-offset: var(--oz-focus-offset);
}

.oz-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 画面の枠（スマホ縦持ちが基準）---- */
.oz-screen {
  min-height: 100dvh;
  max-width: var(--oz-content-max);
  margin: 0 auto;
  padding: var(--oz-space-5) var(--oz-gutter);
  padding-bottom: calc(var(--oz-space-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--oz-space-4);
}
.oz-stack > * + * { margin-top: var(--oz-space-4); }
.oz-story { font-family: var(--oz-font-story); } /* 物語・日記 */
.oz-code  { font-family: var(--oz-font-code); letter-spacing: 0.08em; }

/* ---- ボタン ---- */
.oz-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--oz-space-2);
  min-height: var(--oz-tap-min);
  padding: var(--oz-space-3) var(--oz-space-5);
  border: 2px solid transparent;
  border-radius: var(--oz-radius-md);
  font: inherit; font-weight: 700; line-height: var(--oz-lh-tight);
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background var(--oz-dur-fast) var(--oz-ease), transform var(--oz-dur-fast) var(--oz-ease);
}
.oz-btn:active { transform: translateY(1px); }
.oz-btn--block { display: flex; width: 100%; }

.oz-btn--primary   { background: var(--oz-accent); color: #fff; }
.oz-btn--primary:hover  { background: var(--oz-accent-strong); }
.oz-btn--secondary { background: var(--oz-surface); color: var(--oz-iron-700); border-color: var(--oz-iron-700); }
.oz-btn--secondary:hover { background: var(--oz-iron-100); }
.oz-btn--ghost     { background: transparent; color: var(--oz-accent-strong); }
.oz-btn--ghost:hover { background: var(--oz-accent-tint); }
.oz-btn--danger    { background: var(--oz-danger-600); color: #fff; }

.oz-btn[disabled], .oz-btn[aria-disabled="true"] {
  background: var(--oz-paper-sunken); color: var(--oz-ink-2);
  border-color: var(--oz-line); cursor: not-allowed; transform: none;
}
/* 送信中。二重送信を防ぐ（冪等な処理でも、見た目で「押した」を伝える） */
.oz-btn[aria-busy="true"] { cursor: progress; opacity: 0.75; pointer-events: none; }

/* ---- カード ---- */
.oz-card {
  background: var(--oz-surface);
  border: var(--oz-border);
  border-radius: var(--oz-radius-md);
  padding: var(--oz-space-4);
  box-shadow: var(--oz-shadow-1);
}

/* ---- 状態バッジ（色だけに頼らず、文字を必ず添える）---- */
.oz-badge {
  display: inline-flex; align-items: center; gap: var(--oz-space-1);
  padding: 0 var(--oz-space-3);
  min-height: 1.75rem;
  border-radius: var(--oz-radius-pill);
  font-size: var(--oz-fs-sm); font-weight: 700;
  background: var(--oz-state-locked-bg); color: var(--oz-state-locked-fg);
}
.oz-badge--open   { background: var(--oz-state-open-bg);   color: var(--oz-state-open-fg); }
.oz-badge--solved { background: var(--oz-state-solved-bg); color: var(--oz-state-solved-fg); }

/* ---- スポットカード（拠点画面の一覧。状態は data-state で切り替える）---- */
.oz-spot {
  display: flex; align-items: center; gap: var(--oz-space-3);
  width: 100%; min-height: calc(var(--oz-tap-min) + var(--oz-space-4));
  padding: var(--oz-space-3) var(--oz-space-4);
  background: var(--oz-surface); color: inherit; text-align: left; font: inherit;
  border: 2px solid var(--oz-line); border-radius: var(--oz-radius-md);
  text-decoration: none;
}
.oz-spot__no {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--oz-state-locked-bg); color: var(--oz-state-locked-fg);
  font-weight: 700;
}
.oz-spot__name { flex: 1; font-weight: 700; }
.oz-spot[data-state="locked"] { border-style: dashed; color: var(--oz-ink-2); }
.oz-spot[data-state="open"]   { border-color: var(--oz-accent); }
.oz-spot[data-state="open"]   .oz-spot__no { background: var(--oz-state-open-bg);   color: var(--oz-state-open-fg); }
.oz-spot[data-state="solved"] { border-color: var(--oz-leaf-600); background: var(--oz-leaf-100); }
.oz-spot[data-state="solved"] .oz-spot__no { background: var(--oz-leaf-600); color: #fff; }
.oz-spot[data-state="solved"] .oz-badge { background: var(--oz-surface); } /* 地と同色で消えないように */

/* ---- 断片スロット（5つ。集めた数を見せる。並び順は見せない）---- */
.oz-fragments { display: flex; gap: var(--oz-space-2); justify-content: center; padding: 0; margin: 0; list-style: none; }
.oz-fragment {
  flex: 1; max-width: 4.5rem; aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  border: 2px dashed var(--oz-line-strong);
  border-radius: 4px 10px 6px 12px; /* ちぎれた紙の不揃いな角 */
  background: var(--oz-paper-sunken); color: var(--oz-ink-2);
  font-family: var(--oz-font-story); font-weight: 700;
}
.oz-fragment[data-got="true"] {
  border: 2px solid var(--oz-gold-400);
  background: var(--oz-gold-100); color: var(--oz-gold-700);
  box-shadow: var(--oz-shadow-1);
  animation: oz-fragment-in var(--oz-dur) var(--oz-ease);
}
@keyframes oz-fragment-in { from { transform: scale(0.85) rotate(-4deg); opacity: 0; } }

/* 大謎の並べ替え。ドラッグに頼らず「上へ／下へ」ボタンでも動かせるようにする */
.oz-sort { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oz-space-2); }
.oz-sort__item {
  display: flex; align-items: center; gap: var(--oz-space-2);
  min-height: var(--oz-tap-min); padding: var(--oz-space-2) var(--oz-space-3);
  background: var(--oz-gold-100); border: 2px solid var(--oz-gold-400);
  border-radius: var(--oz-radius-md);
}
.oz-sort__item > :first-child { flex: 1; }

/* ---- 入力 ---- */
.oz-field { display: grid; gap: var(--oz-space-2); }
.oz-label { font-weight: 700; }
.oz-help  { font-size: var(--oz-fs-sm); color: var(--oz-text-sub); margin: 0; }
.oz-input {
  width: 100%; min-height: var(--oz-tap-min);
  padding: var(--oz-space-3) var(--oz-space-4);
  background: var(--oz-surface); color: var(--oz-ink);
  border: 2px solid var(--oz-line-strong); border-radius: var(--oz-radius-md);
  font: inherit; font-size: max(1rem, var(--oz-fs-base)); /* iOSのズーム防止のため16px未満にしない */
}
.oz-input::placeholder { color: var(--oz-ink-2); opacity: 0.8; }
.oz-input[aria-invalid="true"] { border-color: var(--oz-danger-600); background: var(--oz-danger-100); }
.oz-input--code { font-family: var(--oz-font-code); letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
.oz-error { color: var(--oz-danger-600); font-weight: 700; margin: 0; }

/* ---- お知らせ（色＋見出しの文字で種類を伝える）---- */
.oz-notice {
  padding: var(--oz-space-4);
  border-radius: var(--oz-radius-md);
  border-left: 6px solid var(--oz-iron-500);
  background: var(--oz-iron-100);
}
.oz-notice__title { font-weight: 700; margin: 0 0 var(--oz-space-1); }
.oz-notice > :last-child { margin-bottom: 0; }
.oz-notice--fiction { border-color: var(--oz-gold-400);   background: var(--oz-gold-100); }    /* フィクション注記 */
.oz-notice--caution { border-color: var(--oz-danger-600); background: var(--oz-danger-100); } /* 歩きスマホ禁止など */
.oz-notice--success { border-color: var(--oz-leaf-600);   background: var(--oz-leaf-100); }
.oz-notice--closed  { border-color: var(--oz-iron-700);   background: var(--oz-paper-sunken); } /* 受付終了・景品終了 */

/* ---- セリフ（キャラクターの吹き出し）---- */
.oz-speech { display: flex; gap: var(--oz-space-3); align-items: flex-start; }
.oz-speech__face, .oz-hint__face { /* 顔だけのアイコン（正方形の絵を丸く切り抜く） */
  flex: none; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden;
  background: var(--oz-paper-sunken); border: var(--oz-border);
}
.oz-speech__face img, .oz-hint__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oz-speech__body { flex: 1; min-width: 0; }
.oz-speech__name { font-size: var(--oz-fs-sm); font-weight: 700; color: var(--oz-text-sub); margin: 0 0 var(--oz-space-1); }
.oz-speech__text {
  position: relative; margin: 0; padding: var(--oz-space-3) var(--oz-space-4);
  background: var(--oz-surface); border: var(--oz-border); border-radius: var(--oz-radius-md);
  font-family: var(--oz-font-story);
}
.oz-speech--no-face .oz-speech__face { display: none; }     /* 顔アイコンなし。名前と吹き出しだけ（絵が別にある場面用） */
.oz-speech--silhouette .oz-speech__face {                    /* 九十九：シルエットのみ */
  background: var(--oz-shadow-figure); border-color: var(--oz-shadow-figure);
}
.oz-speech--silhouette .oz-speech__text { background: var(--oz-shadow-figure); color: #fff; border-color: var(--oz-shadow-figure); }
.oz-speech--silhouette .oz-speech__name { color: var(--oz-ink); }

/* ---- ヒント（おごりん）。謎解き画面の上に重ねる独立レイヤー ---- */
.oz-hint-btn {
  position: fixed; right: var(--oz-gutter); bottom: calc(var(--oz-space-4) + env(safe-area-inset-bottom));
  z-index: var(--oz-z-hint);
  min-width: var(--oz-tap-min); min-height: var(--oz-tap-min);
  border-radius: var(--oz-radius-pill); box-shadow: var(--oz-shadow-2);
}
.oz-hint {
  display: flex; gap: var(--oz-space-3); align-items: flex-start;
  background: var(--oz-leaf-100); border: 2px solid var(--oz-leaf-600);
  border-radius: var(--oz-radius-md); padding: var(--oz-space-4);
}
.oz-hint__face { width: 3.5rem; height: 3.5rem; border-color: var(--oz-leaf-600); background: var(--oz-surface); }
.oz-hint__body { flex: 1; min-width: 0; }
.oz-hint-btn__icon { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.oz-hint__step { font-size: var(--oz-fs-sm); font-weight: 700; color: var(--oz-leaf-700); margin: 0 0 var(--oz-space-1); }

/* ---- 場面（腰から上の絵＋セリフ）。プロローグ・エンディングなど ----
   絵の下端は腰で切れているので、セリフの箱を少し重ねて切れ目を隠す。 */
.oz-scene { display: flex; flex-direction: column; }
.oz-scene__stage {
  display: flex; justify-content: center; align-items: flex-end;
  height: min(48dvh, 26rem);
}
.oz-portrait {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; object-position: center bottom;
  animation: oz-portrait-in var(--oz-dur) var(--oz-ease);
}
@keyframes oz-portrait-in { from { opacity: 0; transform: translateY(8px); } }
.oz-scene__dialog { position: relative; margin-top: calc(var(--oz-space-7) * -1); } /* 絵の下端に重ねる（名札の高さを見込んで深めに） */
.oz-scene__dialog .oz-speech__name { /* 絵の上に乗っても読めるよう、名札にする */
  position: relative; z-index: 1; display: inline-block;
  padding: 0 var(--oz-space-3); margin-bottom: calc(var(--oz-space-2) * -1);
  background: var(--oz-surface); color: var(--oz-ink);
  border: var(--oz-border); border-radius: var(--oz-radius-pill);
}

/* ---- 地図（拠点画面から開く全面画像。操作は閉じる×だけ）---- */
.oz-map {
  position: fixed; inset: 0; z-index: var(--oz-z-map);
  display: grid; background: var(--oz-ink);
}
.oz-map__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.oz-map__close {
  position: absolute;
  top: calc(var(--oz-space-3) + env(safe-area-inset-top)); right: var(--oz-space-3);
  width: var(--oz-tap-min); height: var(--oz-tap-min); padding: 0;
  display: grid; place-items: center;
  border: 2px solid var(--oz-iron-700); border-radius: 50%;
  background: var(--oz-surface); color: var(--oz-ink);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: var(--oz-shadow-2);
}
.oz-noscroll { overflow: hidden; } /* 地図・シートを開いている間、<body>に付ける */

/* ---- カメラ（画像認識・QR読み取り）。映像は保存・送信しない旨を必ず添える ---- */
.oz-camera {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--oz-iron-700); border-radius: var(--oz-radius-lg);
}
.oz-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.oz-camera__frame {
  position: absolute; inset: 12%; pointer-events: none;
  border: 3px solid #fff; border-radius: var(--oz-radius-md);
  box-shadow: 0 0 0 9999px rgb(43 38 34 / 0.35);
}
.oz-camera__note { font-size: var(--oz-fs-sm); color: var(--oz-text-sub); }

/* ---- 再開コード ---- */
.oz-resume {
  text-align: center; padding: var(--oz-space-4);
  background: var(--oz-paper-sunken); border: 2px dashed var(--oz-line-strong); border-radius: var(--oz-radius-md);
}
.oz-resume__code { display: block; font-family: var(--oz-font-code); font-size: var(--oz-fs-xl); font-weight: 700; letter-spacing: 0.2em; }

/* ---- クリア証（引換コード＋サーバー時刻のカウントアップ）---- */
.oz-ticket {
  text-align: center; padding: var(--oz-space-5) var(--oz-space-4);
  background: var(--oz-gold-100); border: 3px double var(--oz-gold-700); border-radius: var(--oz-radius-lg);
}
.oz-ticket__clock {
  display: block; font-family: var(--oz-font-code); font-size: var(--oz-fs-2xl); font-weight: 700;
  font-variant-numeric: tabular-nums; /* 数字の幅を揃え、カウントアップ中も揺れない */
}
.oz-ticket__qr { display: block; margin: var(--oz-space-4) auto; background: #fff; padding: var(--oz-space-3); border-radius: var(--oz-radius-sm); }

/* ---- 進み具合（ゲージ）---- */
.oz-progress { height: 0.75rem; background: var(--oz-paper-sunken); border-radius: var(--oz-radius-pill); overflow: hidden; }
.oz-progress__bar { height: 100%; background: var(--oz-accent); transition: width var(--oz-dur) var(--oz-ease); }

/* ---- シート（下から出る。確認など）---- */
.oz-sheet {
  position: fixed; inset: auto 0 0 0; z-index: var(--oz-z-sheet);
  max-width: var(--oz-content-max); margin: 0 auto;
  max-height: 85dvh; overflow: auto;
  padding: var(--oz-space-5) var(--oz-gutter) calc(var(--oz-space-5) + env(safe-area-inset-bottom));
  background: var(--oz-surface); border-radius: var(--oz-radius-lg) var(--oz-radius-lg) 0 0; box-shadow: var(--oz-shadow-2);
}

/* ---- 全画面ブロック（アプリ内ブラウザ案内。先へ進ませない）---- */
.oz-block {
  position: fixed; inset: 0; z-index: var(--oz-z-block); overflow: auto;
  background: var(--oz-paper);
}

/* ---- 運営画面（引換所・管理）。参加者画面より情報量を優先した密な表 ---- */
.oz-admin { --oz-fs-base: 0.9375rem; --oz-lh-body: 1.6; }
.oz-table { width: 100%; border-collapse: collapse; }
.oz-table th, .oz-table td { padding: var(--oz-space-2) var(--oz-space-3); border-bottom: var(--oz-border); text-align: left; }
.oz-table th { background: var(--oz-paper-sunken); font-size: var(--oz-fs-sm); }

/* ==== v0.1.1 追加（2026-09-21）====
   参加者画面をv0.1へ移行するために足した部品。既存の部品は変えていない。
   理由と使う画面は、docs/ogorizakura_nazooe_design_system.md の6章・10章。 */

/* ---- 画面の並び：本文は伸び、操作（.oz-actions）は下に寄る ---- */
.oz-main { flex: 1; display: flex; flex-direction: column; gap: var(--oz-space-5); }
.oz-actions { display: grid; gap: var(--oz-space-3); }
.oz-center { text-align: center; }
.oz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oz-space-3); }
.oz-icon { flex: none; vertical-align: middle; } /* SVGアイコン。色は currentColor */

/* ---- 見出しの上の小さな見出し ---- */
.oz-eyebrow { margin: 0 0 var(--oz-space-1); font-size: var(--oz-fs-sm); font-weight: 700; color: var(--oz-text-sub); letter-spacing: 0.08em; }

/* ---- 画面上部：見出し＋右端のアイコンボタン ---- */
.oz-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--oz-space-3); }
.oz-topbar h1 { margin-bottom: 0; }

/* ---- アイコンだけのボタン（メニュー・とじる・コピー）。名前は aria-label で必ず付ける ---- */
.oz-icon-btn {
  appearance: none; flex: none; display: inline-grid; place-items: center;
  width: var(--oz-tap-min); height: var(--oz-tap-min); padding: 0;
  border: 2px solid var(--oz-iron-700); border-radius: 50%;
  background: var(--oz-surface); color: var(--oz-iron-700); cursor: pointer;
  transition: background var(--oz-dur-fast) var(--oz-ease);
}
.oz-icon-btn:hover { background: var(--oz-iron-100); }

/* ---- 読み込み中・トースト ---- */
.oz-loading { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--oz-space-3); color: var(--oz-text-sub); text-align: center; }
.oz-loading p { margin: 0; }
.oz-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--oz-space-6) + env(safe-area-inset-bottom)); z-index: var(--oz-z-toast);
  width: max-content; max-width: min(calc(100% - 2 * var(--oz-gutter)), var(--oz-content-max));
  padding: var(--oz-space-3) var(--oz-space-5);
  background: var(--oz-iron-700); color: #fff; border-radius: var(--oz-radius-md);
  box-shadow: var(--oz-shadow-2); text-align: center;
}

/* ---- 全面のお知らせ画面（大きな印＋見出し＋本文）。エラー・受付終了・解決済みなど ---- */
.oz-status { flex: 1; display: grid; align-content: center; justify-items: center; gap: var(--oz-space-3); text-align: center; }
.oz-status h1, .oz-status p { margin: 0; }
.oz-status h1 { text-wrap: balance; } /* 見出しの最後の1文字だけが次の行に落ちないように */
.oz-status__icon {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--oz-accent-tint); color: var(--oz-accent-strong);
}

/* ---- シートの背後の幕・見出し ---- */
.oz-overlay { position: fixed; inset: 0; z-index: var(--oz-z-sheet); background: var(--oz-scrim); }
.oz-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--oz-space-3); margin-bottom: var(--oz-space-4); }
.oz-sheet__head h2 { margin: 0; }

/* ---- 選択カード（モード選択）。選んでいる状態は「選択中」の文字（.oz-badge）でも伝える ---- */
.oz-choice {
  position: relative; display: grid; gap: var(--oz-space-2);
  padding: var(--oz-space-4);
  background: var(--oz-surface); border: 2px solid var(--oz-line-strong); border-radius: var(--oz-radius-md);
  cursor: pointer;
}
.oz-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* 見えないが、操作・フォーカスできる */
.oz-choice:has(input:focus-visible) { outline: var(--oz-focus-ring); outline-offset: var(--oz-focus-offset); }
.oz-choice__head { display: flex; align-items: center; gap: var(--oz-space-2); font-weight: 700; }
.oz-choice__name { font-size: var(--oz-fs-lg); }
.oz-choice__mark { display: none; margin-left: auto; }
.oz-choice p { margin: 0; }
.oz-choice:has(input:checked) { border-color: var(--oz-accent); background: var(--oz-accent-tint); }
.oz-choice:has(input:checked) .oz-choice__mark { display: inline-flex; }

/* ---- 番号つきの手順・アイコンつきの箇条書き ---- */
.oz-steps { margin: 0; padding-left: 1.5em; display: grid; gap: var(--oz-space-2); }
.oz-iconlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oz-space-3); }
.oz-iconlist li { display: flex; gap: var(--oz-space-3); align-items: flex-start; }
.oz-iconlist .oz-icon { margin-top: 0.35em; color: var(--oz-accent-strong); }

/* ---- 進み具合の幅（--oz-value に 0〜100 を入れる）とスポットカードの本文 ---- */
.oz-progress__bar { width: calc(var(--oz-value, 0) * 1%); }
.oz-spot__body { flex: 1; min-width: 0; display: grid; gap: var(--oz-space-1); }
.oz-spot__body .oz-spot__name { flex: none; }
.oz-spot__body .oz-help { color: inherit; }

/* 画面が切り替わったとき、JSが見出し（tabindex="-1"）へフォーカスを移して読み上げに知らせる。
   見出しは押せない部品なので、その枠だけは出さない（押せる部品の :focus-visible は消さない）。 */
[tabindex="-1"]:focus { outline: none; }

/* ==== v0.1.2 追加（2026-09-21）====
   謎解き・大謎の画面（画像＋入力＋ヒント、並べ替え）で足りなかった部品。既存の部品は変えていない。 */
.oz-puzzle { margin: 0; }
.oz-puzzle__img { display: block; width: 100%; height: auto; background: var(--oz-paper-sunken); border: var(--oz-border); border-radius: var(--oz-radius-md); }
.oz-screen--hint { padding-bottom: calc(var(--oz-tap-min) + var(--oz-space-7)); } /* 右下に重なるヒントのボタン（.oz-hint-btn）に、本文が隠れないように */
.oz-sort__char { font-family: var(--oz-font-story); font-size: var(--oz-fs-lg); font-weight: 700; }
.oz-sort__item[data-dragging="true"] { border-color: var(--oz-gold-700); box-shadow: var(--oz-shadow-2); }
.oz-sort__item .oz-icon-btn { border-color: var(--oz-gold-700); }
.oz-sort__grip { touch-action: none; cursor: grab; } /* 指でつかんで動かす取っ手。ドラッグ中にページが動かないように */
.oz-icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.oz-hint__face { display: grid; place-items: center; } /* 顔の絵が届くまでの仮のアイコンを、丸の中央に置く */
/* 縦に長くなりすぎて、撮影ボタンが画面の外に出ないようにする（映像は cover で切り取る）。
   aspect-ratio と max-height を同時に使うと、iOSのSafariでは幅が縮んで左に寄るため、高さを直接決める。
   映像は、高さの割合（%）に頼らず、枠いっぱいに絶対配置する。 */
.oz-camera { width: 100%; aspect-ratio: auto; height: clamp(14rem, 42vh, 30rem); height: clamp(14rem, 42dvh, 30rem); }
.oz-camera__view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* 映像の表示。<video>ではなく<canvas>に描く（JSの attachCameraView） */
.oz-camera .oz-camera__source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* 映像の入口。見えない大きさで残す */
.oz-camera__frame { box-shadow: none; } /* 画面の外まで届く巨大な影は、iOSのSafariで描画が乱れることがあるため、使わない */

/* ==== v0.1.3 追加（2026-09-21）====
   クリア証・アプリ内スキャナー用。既存の部品は変えていない。 */
.oz-ticket { display: grid; gap: var(--oz-space-3); justify-items: center; }
.oz-ticket__code { font-size: var(--oz-fs-xl); font-weight: 700; letter-spacing: 0.12em; }
.oz-ticket__qr { color: var(--oz-ink); width: 13rem; max-width: 100%; margin: 0 auto; } /* QRの暗い部分の色（白い地は既存の指定） */
.oz-ticket__qr svg { display: block; width: 100%; height: auto; }

/* ==== v0.1.5 追加（2026-09-21）====
   運営画面（/admin/）用。参加者画面では使わない。既存の部品は変えていない。 */
.oz-admin .oz-screen { max-width: 56rem; }                       /* 運営画面は、参加者画面より広く使う（表・編集欄） */
.oz-editor { min-height: 24rem; font-family: var(--oz-font-code); font-size: var(--oz-fs-sm); line-height: 1.5; letter-spacing: 0; white-space: pre; overflow: auto; }
.oz-qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--oz-space-4); }
.oz-qr-cell { display: grid; gap: var(--oz-space-2); justify-items: center; align-content: start; align-self: start; text-align: center; break-inside: avoid; }
@media print {
  .oz-print-hide { display: none !important; }
  .oz-admin .oz-screen { max-width: none; padding: 0; }
  .oz-qr-sheet { grid-template-columns: repeat(2, 1fr); }
}

/* ==== v0.1.6 追加（2026-09-23）====
   謎の画像（モードBの個別謎・大謎）を正方形（1:1）に統一（本人。仕様書8.37）。
   謎解き画面は画像以外の部分（見出し・入力欄・ボタン・ヒントボタンの余白）だけで440〜460px程度を占め、
   縦長の画像だと多くの機種で入力欄・送信ボタンが画面外に出るため、画面内で完結する正方形にした。
   正方形でない画像が届いても切り取らず収める（object-fit: contain。地はv0.1.2と同じ --oz-paper-sunken）。 */
.oz-puzzle__img { aspect-ratio: 1 / 1; height: auto; object-fit: contain; }