/* 占い お試し版（初回配信限定）の見た目。作りは uranai-proto 第 6 期（src/styles/global.css）と同じ値・同じ部品を使う。
   既定は**ダーク**（SPEC §11: 配信の手元・夜に眩しくない）。色は header-research の U1「夜の札卓」（ダーク）と U3「象牙の星図」（ライト）。
   演出の格「いちばん特別」（grades.json の id=hoshifuri: stage=hoshi・image_frame=gold）の見た目: 背景の星・金の額縁・夜空。 */

:root {
  --card-ratio: calc(2 / 3);
  --ink: #f3ecd8;
  --ink-soft: #d2cdbd;
  --ink-faint: #a9aecb;
  --ground: #0b1130;
  --card: #131c4a;
  --rule: #5766b3;
  --accent: #e8a33d;
  --accent-ink: #0b1130;
  --good: #86d4b0;
  --warn: #f0a37a;
  --gold: #c9a24c;
  --hito-bg: #1b2766;
  --hito-ink: #f3ecd8;
  --page-bg: linear-gradient(180deg, #080d28, #16215a);
  --page-end: #16215a;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ink: #1b2559;
  --ink-soft: #3c4574;
  --ink-faint: #57608a;
  --ground: #f6f1e3;
  --card: #fffdf6;
  --rule: #767ea8;
  --accent: #8a5f10;
  --accent-ink: #fffdf6;
  --good: #1f6e4d;
  --warn: #9a4a1c;
  --gold: #8a5f10;
  --hito-bg: #1b2559;
  --hito-ink: #f6f1e3;
  --page-bg: #f6f1e3;
  --page-end: #f6f1e3;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground);
  background-image: var(--page-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-break: strict;
  overflow-wrap: anywhere;
  overflow-x: clip;
}
.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- 見出し ---------- */
.app-header { padding: 1.1rem 1rem 0.2rem; text-align: center; }
.app-header h1 {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0.2rem 0 0;
  letter-spacing: 0.08em;
}
.sub { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; }

#app { flex: 1; display: flex; flex-direction: column; position: relative; }
.screen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 0.8rem 0 1.2rem; position: relative; z-index: 1; }

/* 夜空: 静止した星（動かさない・動きを減らす設定でも残る）。演出の星の粒は effects.mjs が足す */
.sky {
  position: absolute;
  inset: 0 -1rem;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1px 1px at 82% 14%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 28% 31%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1px 1px at 91% 38%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 6% 55%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 70% 63%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1px 1px at 19% 79%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 88% 86%, #f6e9c8 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 92%, #f6e9c8 50%, transparent 52%);
}
:root[data-theme="light"] .sky { opacity: 0; }

.lead { margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.95; }
.note { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.9; }
.note.warn { color: var(--warn); }
.clause { display: inline-block; }
.tail, .nb { display: inline-block; white-space: nowrap; }

/* ---------- ボタン ---------- */
.btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-wide { width: min(100%, 22rem); min-height: 54px; font-size: 1.15rem; letter-spacing: 0.04em; }
.btn-mid { width: min(100%, 18rem); min-height: 48px; font-size: 0.95rem; }
.btn-small {
  appearance: none;
  min-height: 44px;
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 札の裏（紺に金の細線）・引く前の大きな札 ---------- */
.hero-card,
.card-face.back {
  background: radial-gradient(120% 90% at 50% 20%, #1a2778 0%, #0e1642 70%);
  box-shadow: inset 0 0 0 3px #0e1642, inset 0 0 0 4px #c9a24c, inset 0 0 0 9px #0e1642, inset 0 0 0 10px rgba(201, 162, 76, 0.55);
}
.hero-card::before,
.card-face.back::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid #c9a24c;
  background: radial-gradient(circle, #c9a24c 0 13%, transparent 14%);
}
.hero-card {
  position: relative;
  width: 63%;
  max-width: 17rem;
  aspect-ratio: var(--card-ratio);
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 76, 0.5);
  margin-top: 0.3rem;
}

/* ---------- 札（めくる） ---------- */
.stage { position: relative; width: 63%; max-width: 17rem; aspect-ratio: var(--card-ratio); margin: 0.7rem auto 0; perspective: 900px; }
.card-node { position: absolute; inset: 0; border-radius: 8px; transform-style: preserve-3d; will-change: transform; }
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201, 162, 76, 0.5);
}
.card-face.back { transform: translateZ(1px); }
.card-face.front { transform: rotateY(180deg) translateZ(1px); background-color: var(--card); overflow: hidden; }
.card-node.flipped { transform: rotateY(180deg); transition: transform var(--flip-ms, 0.6s); }
.card-node .card-face.front { opacity: 0; }
.card-node.flipped .card-face.front { opacity: 1; transition: opacity 0s linear calc(var(--flip-ms, 0.6s) / 2); }
.card-node.flipped .card-face.back { opacity: 0; transition: opacity 0s linear calc(var(--flip-ms, 0.6s) / 2); }
.card-node.reversed .card-face.front { transform: rotateY(180deg) translateZ(1px) rotate(180deg); }
/* 見返し・再生のやり直しでは、動かさずに一瞬で切り替える */
.card-node.instant, .card-node.instant .card-face { transition: none !important; }
/* 動きを減らす設定: 回転せず、裏→表をフェードだけで */
.card-node.flip-fade .card-face.back { opacity: 1; transition: opacity 0.2s ease; }
.card-node.flip-fade .card-face.front { transform: none; opacity: 0; transition: opacity 0.2s ease; }
.card-node.flip-fade.is-revealed .card-face.back { opacity: 0; }
.card-node.flip-fade.is-revealed .card-face.front { opacity: 1; }
.card-node.flip-fade.reversed .card-face.front { transform: rotate(180deg); }

/* 額装「金」（image_frame=gold）: 札の縁。夜空の背景と合わせる */
#app[data-frame="gold"] .card-face { box-shadow: 0 0 0 3px #d0aa45, 0 0 0 6px #6b5218, 0 0 26px 4px rgba(217, 189, 108, 0.38), 0 16px 32px -14px rgba(0, 0, 0, 0.6); }
#app[data-frame="gold"] .card-face.back { box-shadow: 0 0 0 3px #d0aa45, 0 0 0 6px #6b5218, 0 0 26px 4px rgba(217, 189, 108, 0.38), 0 16px 32px -14px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #0e1642, inset 0 0 0 4px #c9a24c, inset 0 0 0 9px #0e1642, inset 0 0 0 10px rgba(201, 162, 76, 0.55); }

/* めくった瞬間の光（effects.mjs flipLight）と、星降りの星の粒（startStarfield・burstStars・合計 60 個まで） */
#app { --light-color: rgba(255, 226, 140, 0.95); }
.flip-light { position: absolute; top: -5%; bottom: -5%; left: 0; width: 38%; opacity: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, var(--light-color) 50%, transparent 100%); }
.starfield { position: absolute; inset: -8px; pointer-events: none; z-index: 0; }
.star { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #f6e9c8; box-shadow: 0 0 6px 1px rgba(246, 233, 200, 0.75); opacity: 0.2; animation: star-twinkle var(--d, 2s) ease-in-out var(--delay, 0s) infinite alternate; pointer-events: none; }
.star-burst { animation: none; opacity: 1; z-index: 3; }
@keyframes star-twinkle { from { opacity: 0.15; transform: scale(0.6); } to { opacity: 1; transform: scale(1.25); } }

.flip-hint { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.flip-hint, .controls, .reading-body, .reading-foot { position: relative; z-index: 1; }
.controls { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 100%; min-height: 54px; }

/* ---------- 結果（読みの 3 拍とひとこと） ---------- */
.reading-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.result-title { margin: 0.4rem 0 0; font-size: 1.15rem; font-weight: 700; line-height: 1.7; }
.t-name, .t-pic { display: inline-block; }
.t-pic { font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); }
.t-pic:not(:empty)::before { content: '\00a0・\00a0'; }
.result-orientation { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.3rem; }
.beats { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.beat { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; font-size: 1rem; line-height: 1.95; opacity: 0; transform: translateY(8px); }
.beat.is-shown { opacity: 1; transform: none; transition: opacity var(--beat-ms, 0.3s) ease-out, transform var(--beat-ms, 0.3s) ease-out; }
.chip { flex: none; margin-top: 0.4rem; min-width: 3.4em; padding: 0.28rem 0.55rem 0.1rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; font-weight: 700; line-height: 1.9; text-align: center; }
.beat-text { flex: 1; min-width: 0; }
.hitokoto { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.2rem 0 0; padding: 0.8rem 1rem 0.9rem; border-radius: 12px; background: var(--hito-bg); color: var(--hito-ink); opacity: 0; transform: translateY(8px); }
.hitokoto.is-shown { opacity: 1; transform: none; transition: opacity var(--beat-ms, 0.3s) ease-out, transform var(--beat-ms, 0.3s) ease-out; }
.hito-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: #c9a24c; }
.hito-text { font-size: 1.3rem; font-weight: 700; line-height: 1.75; }
.beats.reading-error { color: #b3261e; border: 1px solid #b3261e; border-radius: 10px; padding: 0.8rem 1rem; }
.reading-foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.drawn-on { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- 初回配信の記念ヘッダー（端末の中で作る画像） ---------- */
.header-box { width: 100%; max-width: 26rem; margin-top: 1rem; padding: 1rem 0.9rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.header-box h2 { margin: 0; font-size: 0.95rem; color: var(--gold); letter-spacing: 0.06em; }
.hdr-name-field { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.hdr-name-label { font-size: 0.85rem; color: var(--ink); line-height: 1.9; text-align: center; }
.hdr-name { width: 100%; max-width: 16rem; min-height: 44px; box-sizing: border-box; padding: 0.4rem 0.7rem; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 8px; text-align: center; }
.hdr-name::placeholder { color: var(--ink-faint); }
.hdr-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hdr-name-note { text-align: center; }
.header-btns { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
.header-btns .btn { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.7; }
.b-main, .b-sub { display: block; }
.b-sub { font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.btn-primary .b-sub { color: var(--accent-ink); } /* 主役の釦（橙・ライトでは茶）の上の小さい字。ink-soft のままだと、ダークでは橙の上の薄い字・ライトでは茶の上の暗い字で読みにくい */
.hdr-preview { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: #0b1130; }
#hdr-status:empty { display: none; }
/* アイコンリングを作る（自分のアイコン）: 選ぶ入口は label（btn）・入力欄そのものは見えない所に置く（キーボードの操作はそのまま効く） */
.icon-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.icon-pick { cursor: pointer; }
.icon-box:focus-within .icon-pick { outline: 2px solid var(--gold); outline-offset: 2px; }
#icon-status:empty { display: none; }
.hdr-ring-note { text-align: center; }
/* 位置と大きさの調整（操作面は 1 枚の画布。リングを重ねたまま動かす）。touch-action: none は操作面だけ＝ここへの指のドラッグではページがスクロールしない（まわりと下の部品では普通にスクロールできる） */
.icon-editor { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.icon-stage { width: min(17rem, 100%); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; border-radius: 50%; }
.icon-stage:active { cursor: grabbing; }
.icon-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.icon-canvas { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.icon-howto, .icon-hint { text-align: center; }
.icon-hint { color: var(--warn); }
.icon-zoom { width: min(100%, 18rem); display: grid; grid-template-columns: auto 1fr 3.4em; align-items: center; gap: 0.5rem; }
.icon-zoom-label { font-size: 0.85rem; color: var(--ink); line-height: 1.9; }
.icon-zoom-out { font-size: 0.85rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.icon-zoom-range { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); touch-action: pan-y; cursor: pointer; }
.icon-zoom-range:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- 断る画面 ---------- */
.notice { width: 100%; max-width: 26rem; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.notice h2 { margin: 0; font-size: 1.1rem; line-height: 1.7; }
.notice p { margin: 0; font-size: 0.95rem; line-height: 1.95; }
.notice .help { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- ありがとうのカード（結果の画面の一番下・見出しも枠も無い・絵は引いた画面を出してから取る） ---------- */
/* さりげなく置く: 箱の枠・地の色・見出し・主役の橙のボタンは付けない。地にそのまま置き、絵は小さく中央・ボタンは枠だけの控えめな形（押す所は 44px 以上のまま）。 */
.omake-box { width: 100%; max-width: 26rem; margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.omake-frame { width: min(100%, 15rem); aspect-ratio: 43 / 24; /* 絵の寸法 2752×1536 と同じ比（OMAKE・check-dist D-7a）。16:9 にすると左右が約 1px 切れる */ border-radius: 8px; overflow: hidden; background: var(--hito-bg); }
.omake-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.omake-note { font-size: 0.8rem; text-align: center; }
.omake-save { width: auto; min-width: 9rem; min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.85rem; font-weight: 400; }

/* ---------- 下の小さな切り替え ---------- */
.app-foot { display: flex; justify-content: center; gap: 0.6rem; padding: 0.6rem 0 0.4rem; position: relative; z-index: 1; }

/* ---------- ルビ（uranai-proto と同じ検算値） ---------- */
rt { font-size: .5em; font-weight: 600; line-height: 1; letter-spacing: -.06em; font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; color: currentColor; opacity: 1; -webkit-user-select: none; user-select: none; }
@supports not (-webkit-hyphens: none) { rt { position: relative; top: -0.2em; } }
/* WebKit（iPhone の Safari）だけ: 振り仮名を本文へ引き寄せる量。-0.21em だと振り仮名が文字に近すぎた。
   実測（WebKit・幅 375px・振り仮名の下端と親文字の上端の隙間を親文字の大きさで割った中央値・3 回の平均）: -0.21em で 0.114em → -0.16em で 0.14em（規約 R11 の帯 0.10〜0.18em・目標 0.13em）。
   2026-10-07 本人が iPhone で「振り仮名がちょっと文字と近いかも」→ -0.16em（0.14em）では目で分かる差にならなかったので、占いは R11 の帯より広い 0.22em 前後を目標にした（WebKit 0 で中央値 0.221em・Chromium は top -0.2em）。
   ひとこと（大きい太字）は同じ値だと狭い（0.05em）ので別に -0.06em（0.12em）。測り方: notes/uranai-trial-day-prep-2026-10/tools/measure_ruby_gap.mjs */
@supports (-webkit-hyphens: none) { rt { margin-bottom: 0; } .hito-text rt { margin-bottom: 0.1em; } }
rp { display: none; }
html[data-ruby="off"] rt { display: none; }
@media print { rt { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .card-node, .card-face { transition: none !important; }
  .beat, .hitokoto, .beat.is-shown, .hitokoto.is-shown { transition: none; transform: none; }
  .star { animation: none !important; }
}