/* KAO PLAY — フラット統合ポータルのデザインシステム
   方針: 明るい・丸い・ポップ・全年齢。プレイ画面だけ暗色でゲームに集中させる。 */

:root {
  --bg: #fff7ee;            /* あたたかいクリーム */
  --bg-soft: #fdeeda;
  --ink: #22252e;
  --ink-soft: #6b7080;
  --card: #ffffff;
  --line: #f0e2d0;
  --coral: #ff5d73;         /* メインアクション */
  --coral-deep: #e63e56;
  --sun: #ffc53d;
  --mint: #2ec4b6;
  --violet: #7c6cf0;
  --violet-deep: #5646c8;   /* 白背景上のテキスト用（WCAG AA） */
  --sky: #4cc9f0;
  --shadow: 0 6px 20px rgba(90, 60, 20, .10);
  --shadow-pop: 0 10px 28px rgba(90, 60, 20, .16);
  --radius: 20px;
  --font: "Hiragino Maru Gothic ProN", "BIZ UDGothic", "M PLUS Rounded 1c",
          "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  overscroll-behavior-y: none;
  line-height: 1.55;
}
#app { max-width: 640px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- トップバー ---------- */
#topbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 8px;
}
@media (max-width: 420px) {
  .tb-title { display: none; }
  .badge { font-size: 11px; padding: 3px 8px; }
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-logo { font-weight: 900; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.tb-title { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  background: var(--card); border: 2px solid var(--line);
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.badge.coin { border-color: #ffe1a3; background: #fff6e0; }
.badge.streak { border-color: #ffd0d8; background: #fff0f2; }
#tb-expbar { height: 5px; background: var(--bg-soft); margin: 0 16px; border-radius: 99px; overflow: hidden; }
#tb-expfill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--coral)); border-radius: 99px; transition: width .5s cubic-bezier(.2,.9,.3,1.2); }

/* ---------- 画面共通 ---------- */
.screen { display: none; flex: 1; padding: 14px 16px calc(88px + env(safe-area-inset-bottom)); }
.screen.active { display: block; }
.sec-title { font-size: 18px; font-weight: 900; margin: 14px 0 10px; }
.note, .privacy-note { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin: 16px 0 4px; }

/* ---------- ヒーロー ---------- */
.hero { padding: 18px 4px 6px; text-align: center; }
.hero h1 {
  font-size: clamp(26px, 7.2vw, 34px); font-weight: 900; letter-spacing: .01em;
  background: linear-gradient(100deg, var(--coral), var(--violet) 60%, var(--sky));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; margin: 16px auto 0; max-width: 420px; }
.hero-done { margin-top: 10px; font-weight: 800; color: var(--mint); }

/* ---------- ボタン ---------- */
.btn {
  border-radius: 16px; font-weight: 800; font-size: 14px;
  padding: 12px 18px; background: var(--card); color: var(--ink);
  border: 2px solid var(--line); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 8px rgba(90,60,20,.12); }
.btn.primary {
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(230, 62, 86, .35);
}
.btn.soft { background: #fff; border-color: #e8ddfb; color: var(--violet-deep); }
.btn.big { padding: 15px 20px; font-size: 15.5px; border-radius: 18px; }
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 12px; box-shadow: none; }
.btn.ghost { background: rgba(255,255,255,.85); border-color: var(--line); box-shadow: none; }
.btn[disabled] { opacity: .5; cursor: default; }
.input-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.input-toggle input { width: 17px; height: 17px; accent-color: var(--coral); }

/* ---------- カテゴリチップ ---------- */
.cat-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: var(--card); color: var(--ink-soft); border: 2px solid var(--line);
  transition: all .15s ease;
}
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.04); }

/* ---------- ゲームグリッド ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 520px) { .mode-grid { grid-template-columns: repeat(3, 1fr); } }
.mode-card {
  position: relative; background: var(--card); border-radius: var(--radius);
  padding: 14px 14px 14px; cursor: pointer; overflow: hidden;
  border: 2px solid var(--line); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.mode-card:active { transform: scale(.965); }
@media (hover: hover) { .mode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } }
.mc-tile {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-size: 30px; margin-bottom: 2px;
}
.mode-card h3 { font-size: 14.5px; font-weight: 900; line-height: 1.3; }
.mc-target { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.mc-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }
.mc-best {
  position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 900;
  background: #fff2cf; color: #a06b00; padding: 3px 8px; border-radius: 999px;
}

/* ---------- リスト（ミッション/ショップ） ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 13px 15px;
  box-shadow: var(--shadow);
}
.list-item.done { opacity: .75; border-color: #cdeee9; background: #f2fbf9; }
.li-main { flex: 1; min-width: 0; }
.li-main h4 { font-size: 13.5px; font-weight: 800; }
.li-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.li-bar { height: 6px; background: var(--bg-soft); border-radius: 99px; margin-top: 7px; overflow: hidden; }
.li-fill { height: 100%; background: linear-gradient(90deg, var(--mint), var(--sky)); border-radius: 99px; transition: width .4s; }
.swatch { display: flex; gap: 3px; }
.swatch i { width: 13px; height: 26px; border-radius: 5px; display: block; }

/* ---------- プレイ画面（ここだけ暗色） ---------- */
.screen.play { display: none; padding: 0; position: fixed; inset: 0; background: #0d1020; z-index: 30; max-width: none; }
.screen.play.active { display: block; }
#game-stage { position: absolute; inset: 0; }
#game-stage canvas { width: 100%; height: 100%; display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.hud-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 0;
}
.hud-actions { display: flex; gap: 8px; pointer-events: auto; }
.hud-top .btn.ghost { background: rgba(13,16,32,.55); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
/* 抜ける ✕。**字を添えない。**（2026-09-12）
   "✕ Quit" は日本語の画面に英語が残る唯一の場所だったうえ、遊んでいる最中に
   読ませる言葉ではない。印だけにして、名前は読み上げ（aria-label）に置く */
.hud-x {
  width: 40px; height: 40px; border-radius: 999px; pointer-events: auto; cursor: pointer;
  background: rgba(13,16,32,.45); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px);
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.hud-x:active { transform: scale(.94); }
#hud-timer {
  font-size: 30px; font-weight: 900; color: #fff; min-width: 60px; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* 制限時間を持たないゲームは、同じ場所に自分の状態（面と残りの光）を出す。
   秒数ほど大きく主張してはいけないので、字を落として字間を開ける */
#hud-timer.status {
  font-size: 17px; font-weight: 800; letter-spacing: .14em; min-width: 96px;
  color: rgba(255,255,255,.92);
}
/* 点が入って時計が戻った合図。**黙って戻すと、なぜ終わらないのかが分からない。**
   数字そのものを一瞬だけ持ち上げる（別の場所に「+3」を出すと、目が時計から離れる） */
@keyframes hud-timer-gain {
  0%   { transform: scale(1);    color: #fff; }
  22%  { transform: scale(1.18); color: var(--sun, #ffd98a); }
  100% { transform: scale(1);    color: #fff; }
}
#hud-timer.gain { animation: hud-timer-gain .42s ease-out; }
@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では、拡大をやめて色だけで言う */
  @keyframes hud-timer-gain { 0%,100% { color: #fff; } 30% { color: var(--sun, #ffd98a); } }
}

#hud-score { font-size: 21px; font-weight: 900; color: var(--sun); min-width: 60px; text-align: right; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hud-bottom { padding: 0 14px calc(12px + env(safe-area-inset-bottom)); }
/* 親指の届く帯。片手で持って遊ぶ人がいちばん多いので、
   遊んでいる最中に押すものはここへ集める（上端は持ち替えが要る） */
.hud-thumb {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  pointer-events: auto; margin: 10px 0 2px;
}
/* 印だけの丸。**遊んでいる最中に読む言葉を置かない**（名前は aria-label へ） */
.thumb-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  background: rgba(13, 16, 32, .5); color: rgba(255,255,255,.82);
  border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.thumb-btn:active { transform: scale(.96); }
.thumb-btn.hidden { display: none; }
.thumb-btn.off { color: rgba(255,255,255,.34); }
.meter { height: 10px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; }
#hud-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--coral)); border-radius: 99px; transition: width .08s linear; }
/* 読めている量。**細く、静かに。** 情報としては要るが、主役ではない */
.hud-input {
  position: relative; height: 4px; margin-top: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .16);
}
.hud-input.hidden { display: none; }
.hud-input i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: #fff; transition: width .05s linear;
}
/* しきい値の線。**越えたかどうかが、越える前から見えていること** */
.hud-input b {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--sun, #ffd98a); border-radius: 2px;
}
.hud-input.on i { background: var(--sun, #ffd98a); }
@media (prefers-reduced-motion: reduce) { .hud-input i { transition: none; } }

/* いま何の顔をすればいいか。**遊びの絵の上に重なる**ので、どんな背景でも
   読めるだけの影を持たせる。中央に置くのは、下の丸い操作と軸を揃えるため */
#hud-hint {
  font-size: 13px; color: #fff; font-weight: 800; margin-top: 6px; text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.75); min-height: 1.4em;
}
/* 自撮り小窓
   ===== 下の帯と重ならせない =====
   前は bottom:21vh の決め打ちだった。21vh は当時の HUD の高さから逆算した値で、
   HUD を削るゲーム（#hud.minimal）では下に隙間が空き、小窓だけが**遊ぶ面の
   真ん中あたりに浮いて走路を隠す**状態になっていた。「下の部分にゲーム画面が
   重なって見えることがある」と言われたのはこれ。
   いまは HUD の実測の高さ（--hud-bottom-h）を JS から入れて、その上に置く。
   HUD が伸び縮みしても、小窓が遊ぶ面へ入ってこない */
#selfie-panel {
  position: absolute; left: 10px; width: 84px; border-radius: 14px; overflow: hidden;
  bottom: calc(var(--hud-bottom-h, 84px) + 10px + env(safe-area-inset-bottom));
  border: 2px solid rgba(255,255,255,.35); box-shadow: 0 4px 16px rgba(0,0,0,.4);
  z-index: 5; touch-action: none; cursor: grab;
}
#selfie-panel.tiny { width: 56px; }
/* 狭い画面では、小窓が画面幅の 2 割を超えないところまで下げる */
@media (max-width: 400px) {
  #selfie-panel { width: 72px; }
  #selfie-panel.tiny { width: 50px; }
}
#selfie-panel.mono video { filter: grayscale(1) contrast(1.05); }
#selfie-panel.starting { opacity: .6; }
#selfie { width: 100%; display: block; transform: scaleX(-1); }
/* VEIL: 世界の色に沈めた面影。顔立ちは柔らぐが、口の動きははっきり残る */
#selfie-panel.veil video {
  filter: grayscale(1) brightness(.92) contrast(1.2) sepia(1) hue-rotate(-46deg) saturate(2.2);
}
/* MESH: 点と線だけの顔。素顔のピクセルは描かない */
#selfie-mesh { width: 100%; aspect-ratio: 4 / 3; display: block; background: #12102a; }
#selfie-panel.mesh #selfie { display: none; }
/* アバター表示。素顔の代わりに出す（顔を映したくない時にも使える） */
#selfie-avatar { width: 100%; aspect-ratio: 4 / 5; display: block; background: #fff1f6; }
#selfie-panel.avatar #selfie { display: none; }
#selfie-panel.avatar { border-color: rgba(255,255,255,.6); }
.selfie-tool[aria-pressed="true"] { background: #7c6cf0; border-color: #b3a9ff; }
.selfie-drag-hint { position: absolute; right: 4px; top: 2px; color: rgba(255,255,255,.7); font-size: 10px; }
.selfie-tools {
  position: absolute; left: 10px; display: flex; gap: 6px; z-index: 6;
  bottom: calc(var(--hud-bottom-h, 84px) + 10px + env(safe-area-inset-bottom));
  transform: translateY(calc(-100% - 6px));
}
.selfie-tool {
  background: rgba(13,16,32,.72); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 10px;
}

/* カウントダウン */
#countdown {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 110px; font-weight: 900; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5);
  background: rgba(13,16,32,.35); z-index: 8;
  animation: pop .7s ease infinite;
}
@keyframes pop { 0% { transform: scale(.85); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------- ローディング（全画面共通・fixed） ---------- */
#loading {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(255, 247, 238, .94); text-align: center; padding: 30px;
}
#loading p { margin-top: 90px; position: absolute; font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }
/* 顔が見つからないときの逃げ道。#loading は grid の中央寄せなので、
   スピナーと重ならないよう文章のさらに下へ絶対配置で降ろす */
#loading-actions {
  position: absolute; margin-top: 190px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 6px solid var(--bg-soft); border-top-color: var(--coral);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- リザルト ---------- */
.card {
  background: var(--card); border: 2px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-pop); padding: 22px;
}
.result-card { max-width: 440px; margin: 24px auto; text-align: center; }
#res-game { font-size: 19px; font-weight: 900; }
.res-rank {
  display: inline-block; margin: 12px 0 6px; font-size: 15px; font-weight: 900; color: #a06b00;
  background: linear-gradient(135deg, #fff3cf, #ffe6a3); padding: 8px 22px; border-radius: 999px;
}
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 8px; }
.res-grid > div { background: var(--bg); border-radius: 16px; padding: 12px; }
.res-num { display: block; font-size: 26px; font-weight: 900; }
.res-grid label { font-size: 10.5px; color: var(--ink-soft); font-weight: 700; }
#res-extra { font-size: 13px; font-weight: 800; color: var(--mint); min-height: 1.2em; margin: 8px 0; }
.res-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }

/* ---------- 下部ナビ ---------- */
#bottombar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; display: flex; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-top: 2px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.nav-btn {
  flex: 1; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 19px; padding: 6px 0 4px; border-radius: 14px; color: var(--ink-soft);
}
.nav-btn span { font-size: 10px; font-weight: 800; }
.nav-btn.active { color: #b7203a; background: #fff0f2; }

/* ---------- トースト ---------- */
#toast-layer { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 70; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-pop);
  animation: toast-in .25s cubic-bezier(.2,.9,.3,1.3), toast-out .3s ease 2.8s forwards;
  max-width: 90vw;
}
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* ---------- キャリブレーション ---------- */
#calib-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(255, 247, 238, .97); padding: 20px;
}
.calib-card { text-align: center; max-width: 380px; width: 100%; }
.calib-kicker { font-size: 12.5px; font-weight: 900; color: var(--coral); letter-spacing: .04em; }
/* 表情の見本。絵文字ではなく、この作品の線で描いたグリフ（SVG） */
.calib-glyph { width: 96px; margin: 14px auto 4px; color: var(--coral); animation: bounce 1.4s ease infinite; }
.calib-glyph svg { width: 100%; height: auto; display: block; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.calib-label { font-size: 20px; font-weight: 900; min-height: 2.6em; display: grid; place-items: center; }
.calib-ring { position: relative; width: 108px; height: 108px; margin: 8px auto; }
.calib-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bg-soft); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--coral); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
#calib-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 900; }
.calib-meter { height: 12px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; max-width: 240px; margin: 6px auto; }
#calib-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--sky)); border-radius: 99px; transition: width .1s linear; }
.calib-sub { font-size: 13px; color: var(--ink-soft); font-weight: 700; margin: 6px 0 14px; }
.calib-actions { display: flex; flex-direction: column; gap: 9px; max-width: 300px; margin: 0 auto; }
.calib-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.calib-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--line); }
.calib-dots i.now { background: var(--coral); border-color: var(--coral); transform: scale(1.2); }
.calib-dots i.done { background: var(--mint); border-color: var(--mint); }

/* ---------- 画面ロック中の落ち着き ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ---------- はじめてのよびかけ（ゲーム内オンボーディング） ----------
   カードは上部に置き、キャラクターと足場は見えたままにする。
   「説明を読む画面」ではなく「動かしながら読む画面」なので、
   カード自体はタップを受け取らない（画面のどこを叩いても進む） */
#learn-overlay {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(64px + env(safe-area-inset-top)) 16px 0;
}
.learn-card {
  max-width: 420px; width: 100%; text-align: center;
  background: rgba(11, 10, 24, .82); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px;
  padding: 18px 20px 16px; color: #eef2ff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.learn-kicker { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #ff8fa3; }
.learn-glyph { width: 74px; margin: 10px auto 2px; color: #ffd08a; }
.learn-glyph svg { width: 100%; height: auto; display: block; }
.learn-title { font-size: 20px; font-weight: 900; margin-top: 4px; }
.learn-sub { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: #7fdcff; margin-top: 2px; }
.learn-body { font-size: 13px; line-height: 1.7; color: rgba(238, 242, 255, .85); margin-top: 8px; min-height: 3.4em; }
.learn-dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.learn-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.14); }
.learn-dots i.now { background: #ff8fa3; transform: scale(1.25); }
.learn-dots i.done { background: #7fdcff; }
.learn-tap {
  margin-top: 12px; font-size: 14px; font-weight: 900; color: #ffd08a;
  animation: learn-pulse 1.6s ease-in-out infinite;
}
.learn-tap span { display: block; font-size: 10px; letter-spacing: .18em; color: rgba(255, 208, 138, .75); }
@keyframes learn-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* ---------- 「あなたを、どう映す？」（映し方の選択） ---------- */
#style-overlay {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: rgba(11, 10, 22, .97);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.style-card { max-width: 440px; width: 100%; text-align: center; color: #eef2ff; }
.style-kicker { font-size: 11.5px; font-weight: 900; letter-spacing: .14em; color: #ff8fa3; }
.style-title { font-size: 24px; font-weight: 900; margin-top: 8px; }
.style-lede { font-size: 13px; line-height: 1.7; color: rgba(238, 242, 255, .75); margin: 10px auto 18px; max-width: 360px; }
.style-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.style-opt {
  background: rgba(255, 255, 255, .05); color: #eef2ff;
  border: 2px solid rgba(255, 255, 255, .16); border-radius: 16px;
  padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: border-color .15s ease, transform .15s ease;
}
.style-opt.selected { border-color: #ff8fa3; background: rgba(255, 143, 163, .1); transform: translateY(-2px); }
.style-opt b { font-size: 12.5px; font-weight: 900; letter-spacing: .1em; }
.style-opt i { font-size: 10.5px; font-style: normal; color: rgba(238, 242, 255, .65); line-height: 1.45; }
.style-preview {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #12102a;
  display: block;
}
.style-preview video, .style-preview canvas {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.style-preview video { transform: scaleX(-1); }
.style-preview.veil video {
  filter: grayscale(1) brightness(.92) contrast(1.2) sepia(1) hue-rotate(-46deg) saturate(2.2);
}
#style-go { margin-top: 18px; width: 100%; max-width: 300px; }
#style-go:disabled { opacity: .4; cursor: default; }

/* ---------- HUDのセーブ（右上） ---------- */
#btn-game-save { pointer-events: auto; letter-spacing: .08em; }

/* ---- 極限まで削った HUD（meta.hud === 'minimal'）----
   積み上げた数だけを大きく、細いサンセリフで置く。
   他は「読めるが主張しない」ところまで下げる。画面の主役は塔そのもので、
   数字も含めて、それ以外は全部あとから気づけばよい */
#hud.minimal #hud-score {
  position: absolute; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0;
  margin: 0 auto; min-width: 0; text-align: center;
  font-family: system-ui, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
  font-size: clamp(56px, 17vw, 104px);
  font-weight: 200;               /* 細さがこの画面の品を決める。太くすると途端に安くなる */
  letter-spacing: .01em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .32);
  opacity: .95;
}
#hud.minimal #hud-timer {
  font-size: 13px; font-weight: 300; letter-spacing: .18em;
  color: rgba(255, 255, 255, .5); text-shadow: none; min-width: 48px;
}
/* メーターは消す。入力が届いているかは塔の縁の光が伝えている */
#hud.minimal .meter { display: none; }
#hud.minimal #hud-hint {
  font-size: 12px; font-weight: 400; letter-spacing: .04em;
  color: rgba(255, 255, 255, .62); text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
#hud.minimal .thumb-btn {
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .16);
  font-weight: 400; letter-spacing: .06em;
}

/* ---- 言語の切替。トップバーに常に出す ---- */
.lang-switch { display: inline-flex; gap: 2px; margin-right: 8px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 2px; }
.lang-btn { background: none; border: 0; color: rgba(255,255,255,.55);
  font: inherit; font-size: 11px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; min-height: 26px; }
.lang-btn.on { background: rgba(255,255,255,.14); color: #fff; }
.lang-btn:focus-visible { outline: 2px solid var(--beacon, #9df3ff); outline-offset: 1px; }

/* 下へ促す一行（.gh-scroll）は 2026-08-17 に外した。「3本ならんでいます」と
   書いてあっても、書いてある時点で下に何かあることは伝わっている。
   表紙が画面いっぱいでなくなった（枠に収めた）ので、札の上端が既に見えている */

/* ---- はじめ方の紙。**開くときに動かす。**
       いきなり出ると、押した結果として出たのか分からない ---- */
.sheet:not(.hidden) .sheet-panel { animation: sheet-rise .26s cubic-bezier(.2,.9,.3,1) both; }
@keyframes sheet-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 選択肢は少し遅れて出す。**先に作品名、次に選ぶもの**、の順で目が動く */
.sheet:not(.hidden) #btn-start-face { animation: sheet-rise .3s .06s cubic-bezier(.2,.9,.3,1) both; }
.sheet:not(.hidden) #btn-start-practice { animation: sheet-rise .3s .12s cubic-bezier(.2,.9,.3,1) both; }
.sheet:not(.hidden) .sheet-altbox { animation: sheet-rise .3s .18s cubic-bezier(.2,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .sheet:not(.hidden) .sheet-panel,
  .sheet:not(.hidden) #btn-start-face,
  .sheet:not(.hidden) #btn-start-practice,
  .sheet:not(.hidden) .sheet-altbox { animation: none; }
}

/* ---- カメラなしの案内。**端末に合わせて中身を書き換える箱** ---- */
.sheet-altbox { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12); }
.sheet-althead { font-size: 12px; color: rgba(255,255,255,.7); margin: 0 0 2px; }
.sheet-altbody { font-size: 12px; color: rgba(255,255,255,.5); margin: 0 0 8px; line-height: 1.5; }