/* ブラウザ版くもぽんの見た目（iOS の App/Shell/Theme.swift と各画面の SwiftUI の寸法を写した）。
   1pt ＝ 1px。字は丸ゴシックの太字（M PLUS Rounded 1c を使う字だけに絞った woff。iOS の .heavy は Black 900、.bold は Bold 700）。
   動きは必ずイージング（ばねは ui/parts.js が SwiftUI の spring を CSS の linear() 関数〈点を並べた曲線。等速の linear とは別物〉に写して --sp-… に置く）。
   遊んでいる間、#ui は指を通し（下の <canvas id="game"> が びんを回す指を取る）、ボタンだけが指を受ける */

@font-face {
  font-family: 'KumoponRounded';
  src: url('../../assets/fonts/kumopon-rounded-black.woff') format('woff');
  font-weight: 800 900;
  font-style: normal;
  /* 読み込む前に別の字体で出さない（ちらつき）。UI は document.fonts.load を待ってから見せる */
  font-display: block;
}
@font-face {
  font-family: 'KumoponRounded';
  src: url('../../assets/fonts/kumopon-rounded-bold.woff') format('woff');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: #5c4054;
  --ink-soft: #8c7085;
  --cream: #fff5e8;
  --blush: #ffdbe0;
  --pink: #ff859e;
  --pink-deep: #eb6180;
  --mint: #8cdbb8;
  --sky: #8cc7ff;
  --gold: #ffd15c;
  --gold-deep: #db9933;
  --book-blue: #b8e0ff;
  --book-blue-deep: #73a8e6;
  --endless: #8cdbd1;
  --endless-deep: #4da39e;
  /* タイトルの空の上の色（title_bg のいちばん上。iOS の TitleView.skyTop） */
  --sky-top: #98d0f9;
  --rainbow: linear-gradient(90deg, #ffb3bd, #ffcf9e, #fff0a3, #bdedb3, #a8e0ff, #b3c2ff, #dbbdff);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  /* 遊ぶ列の幅: 盤面（論理キャンバス 360×720 の縦横そのまま）と同じ幅。広い画面では盤面の幅、狭い画面では画面の幅
     （背の低いブラウザ〈iPhone の Safari のアドレスバーつき〉でも 360px より細くしない） */
  --colw: min(100vw, max(360px, 50vh));
  /* ばね（JavaScript が置き直す。置く前の代わり） */
  --sp-press: cubic-bezier(0.22, 1.2, 0.36, 1);
  --sp-press-d: 350ms;
  --sp-scale: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sp-scale-d: 400ms;
  --sp-squish: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sp-squish-d: 450ms;
  --sp-toggle: cubic-bezier(0.22, 1.2, 0.36, 1);
  --sp-toggle-d: 400ms;
}
@supports (height: 100dvh) {
  :root { --colw: min(100vw, max(360px, 50dvh)); }
}

/* ---- ページ全体: スクロール・引っぱって更新・ダブルタップの拡大・長押しのメニュー・文字の選択を止める ---- */

[hidden] { display: none !important; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky-top);
  color: var(--ink);
  font-family: 'KumoponRounded', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  position: fixed;
  inset: 0;
  touch-action: none;
}
img { -webkit-user-drag: none; user-select: none; }

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* 読み込みの間（main.js が <html> に ready を付けたら消える） */
#loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, var(--sky-top), #ffdcea);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 900;
  transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
}
html.ready #loading { opacity: 0; visibility: hidden; pointer-events: none; }
#loading .loading-cloud { width: 84px; height: 64px; animation: loading-bob 0.9s var(--ease-in-out-sine) infinite alternate; }
@keyframes loading-bob { from { transform: translateY(-6px) scale(1.02, 0.98); } to { transform: translateY(6px) scale(0.98, 1.02); } }

#boot-error {
  position: fixed;
  z-index: 30;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 24px;
  background: var(--cream);
  box-shadow: inset 0 0 0 3px #fff, 0 10px 20px rgba(0, 0, 0, 0.12);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* 横向きのスマホ: 縦に回してもらう（遊ぶ画面は縦長） */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--sky-top), #ffdcea);
  font-size: 18px;
  font-weight: 900;
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  #rotate { display: flex; }
}

/* ---- 画面の入れ物 ---- */

#ui {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#ui.fonts-pending { visibility: hidden; }
/* 画面の文は ことばの間に空白を入れて書いてある（分かち書き）。行は空白と句読点でだけ折り返す（「育つ（8／段）」のように ことばの途中で切らない） */
#ui { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
#ui button, #ui a { font-family: inherit; touch-action: manipulation; }
#ui :focus { outline: none; }
#ui :focus-visible { outline: 3px solid rgba(115, 168, 230, 0.9); outline-offset: 3px; }

.col {
  position: relative;
  width: var(--colw);
  margin: 0 auto;
  box-sizing: border-box;
}
/* 重なりの順: 画面（タイトル・上の帯）→ 重ね画面（一時停止・結果・説明）→ シート → 切り替えの雲。画面の中の z-index は外に漏らさない */
.screen { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.spacer { flex: 1 1 0; min-width: 0; }
.icon { flex: 0 0 auto; display: block; }

/* 白い縁取りの字（OutlinedText。縁は JavaScript が text-shadow で付ける） */
.ol { font-weight: 900; line-height: 1.2; white-space: nowrap; }

/* ---- ボタン ---- */

button { -webkit-tap-highlight-color: transparent; }

/* 押すと沈む厚みのボタン（ChunkyButtonStyle） */
.chunky {
  position: relative;
  display: inline-block;
  border: 0;
  margin: 0;
  padding: 0 0 var(--depth);
  background: none;
  color: var(--fg);
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  pointer-events: auto;
}
.chunky .edge {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--depth);
  bottom: 0;
  border-radius: 999px;
  background: var(--edge);
  box-shadow: 0 5px 6px color-mix(in srgb, var(--edge) 35%, transparent);
  transition: box-shadow 0.2s var(--ease-out);
}
.chunky .face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border-radius: 999px;
  background: var(--c);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  transition: transform var(--sp-press-d) var(--sp-press);
}
.chunky .label { overflow: hidden; text-overflow: ellipsis; }
.chunky:active .face { transform: translateY(calc(var(--depth) - 1px)); }
.chunky:active .edge { box-shadow: 0 2px 2px color-mix(in srgb, var(--edge) 35%, transparent); }
.chunky.fill { flex: 1 1 0; min-width: 0; }

/* 押すと「ぷにっ」と縮むボタン（SquishyButtonStyle） */
.squishy {
  border: 0;
  margin: 0;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 5px 8px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform var(--sp-squish-d) var(--sp-squish), box-shadow 0.2s var(--ease-out);
}
.squishy:active {
  transform: scale(1.06, 0.9);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 2px color-mix(in srgb, var(--c) 45%, transparent);
}

/* 押すと少し縮むだけのボタン（PressScaleStyle） */
.press {
  border: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--sp-scale-d) var(--sp-scale), opacity 0.2s var(--ease-out);
}
.press:active { transform: scale(1.04, 0.92); }

/* 字だけのボタン（もどる・タイトルへ） */
.text-btn {
  border: 0;
  background: none;
  padding: 8px 16px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  pointer-events: auto;
}

/* ---- タイトル ---- */

.title-screen { pointer-events: auto; background: var(--sky-top); overflow: hidden; }
.title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drift-cloud {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  width: 64px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 6px rgba(128, 153, 217, 0.22));
  will-change: transform;
  /* 帯を測って置くまでは出さない（左上に元の大きさで出てしまう） */
  visibility: hidden;
}
.drift.placed .drift-cloud { visibility: visible; }
.title-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.title-top {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 18px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.gear-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* iPhone で開いた人への帯 */
.ios-band {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px 6px 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 10px rgba(107, 133, 217, 0.18);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--sp-scale-d) var(--sp-scale);
}
.ios-band:active { transform: scale(0.97); }
.band-text { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 900; line-height: 1.3; }
.band-sub { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.band-chev { color: var(--pink-deep); }
.title-gap { flex: 0 1 44px; min-height: 0; }
.logo-block {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.logo-frame {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 光の筋: 520×300 の枠に、中心から放射する 14 本。横長の楕円（縦 0.62）に消え、±0.1 rad を 9 秒で 1 往復 */
.rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 300px;
  margin: -150px 0 0 -260px;
  overflow: hidden;
  pointer-events: none;
}
.rays-squash { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: scaleY(0.62); }
.rays-svg { position: absolute; animation: rays-sway 4.5s var(--ease-in-out-sine) infinite alternate; }
@keyframes rays-sway { from { transform: rotate(-0.1rad); } to { transform: rotate(0.1rad); } }
.logo-pop { position: relative; }
/* ロゴの上下のゆれ: 2.4 秒で上から下へ（sin のイージング。行って戻って 4.8 秒） */
.logo-bob { animation: logo-bob 2.4s var(--ease-in-out-sine) infinite alternate; }
@keyframes logo-bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.title-logo {
  display: block;
  width: min(340px, calc(var(--colw) - 40px));
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(107, 133, 217, 0.28));
}
.best-pill {
  max-width: calc(100% - 40px);
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.best-pill.empty { visibility: hidden; }
.title-flex { flex: 1 1 auto; min-height: 16px; }
.title-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.title-row { display: flex; gap: 14px; padding: 0 16px; }
.title-bottom {
  flex: 0 0 auto;
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 8px;
  box-sizing: border-box;
}
.storage-note {
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
/* 背の低い画面（iPhone の Safari のアドレスバーつきなど）: ロゴの枠を少し詰める */
@media (max-height: 600px) {
  .logo-frame { height: 124px; }
  .title-logo { width: min(300px, calc(var(--colw) - 40px)); }
}

/* ---- 遊ぶ画面の上の帯 ---- */

.hud { pointer-events: none; }
.hud-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: calc(env(safe-area-inset-top) + 6px) 14px 0;
}
.hud-row { display: flex; align-items: flex-start; gap: 10px; }
.pause-btn {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 2.5px #fff, 0 2px 4px rgba(92, 64, 84, 0.18);
  color: rgba(92, 64, 84, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pause-btn.off { opacity: 0; pointer-events: none; }
.hud-mid {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: opacity 0.3s var(--ease-out);
}
.score-box { max-width: 100%; min-width: 0; }
.score { font-size: 38px; line-height: 1.18; text-align: center; font-variant-numeric: tabular-nums; }
.rain-pill {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-soft);
}

/* 時計の輪（TimerPill） */
.timer { position: relative; flex: 0 0 68px; width: 68px; height: 68px; transition: opacity 0.3s var(--ease-out); }
.t-pop, .t-beat { position: relative; width: 100%; height: 100%; }
.t-beat {
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(92, 64, 84, 0.15);
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.timer.hurry .t-beat { box-shadow: 0 2px 8px rgba(235, 97, 128, 0.4); }
.t-beat.beat { transform: scale(1.08); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .arc { transition: stroke 0.3s var(--ease-out); }
.t-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.t-num { font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; }
.t-num.small { font-size: 22px; }
.t-unit { margin-top: 0; font-size: 9px; font-weight: 700; color: var(--ink-soft); }
.t-bonus { position: absolute; left: -40px; bottom: -24px; pointer-events: none; }
.bonus-text {
  font-weight: 900;
  color: #33998c;
  white-space: nowrap;
  text-shadow: 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff;
}

/* 段のはしご（LadderView） */
.ladder {
  align-self: center;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transition: opacity 0.3s var(--ease-out);
}
.step { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.step-art { position: relative; transition: opacity 0.3s var(--ease-out); }
.step-art svg { display: block; overflow: visible; }
.step-dot { width: 3.5px; height: 3.5px; border-radius: 50%; }
.step-dot.on { background: rgba(92, 64, 84, 0.7); }
.step-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0 3px;
  border-radius: 999px;
  background: var(--pink-deep);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

/* 返しの数え上げ（TallyView） */
.tally-row { display: flex; justify-content: center; min-height: 26px; transition: opacity 0.3s var(--ease-out); }
.tally {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}
.tally-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pink-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.tally-num { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* READY */
.banner-layer { position: absolute; inset: 0; pointer-events: none; }
.banner { position: absolute; left: 50%; transform: translate(-50%, -50%); }

/* 残りわずか: 画面のふちが桃色に脈打つ（1 秒に 2 回。sin のイージング。遊ぶ列の左右のふちと上下） */
.hurry-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--colw);
  margin-left: calc(var(--colw) / -2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.hurry-glow.on { opacity: 1; }
.hurry-glow .pulse {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 36px 16px var(--pink-deep);
  animation: glow-pulse 0.25s var(--ease-in-out-sine) infinite alternate;
  animation-play-state: paused;
}
.hurry-glow.on .pulse { animation-play-state: running; }
@keyframes glow-pulse { from { opacity: 0.075; } to { opacity: 0.75; } }

/* 結果を出している間: 点・時計・はしごを消す */
.hud.finished .hud-mid,
.hud.finished .timer,
.hud.finished .ladder,
.hud.finished .tally-row { opacity: 0; }

/* ---- 重ね画面（一時停止・結果・初めての説明）---- */

.overlay { position: absolute; inset: 0; z-index: 2; pointer-events: auto; }
.overlay > .dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); }
.center {
  position: absolute;
  inset: 0;
  display: flex;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.card {
  position: relative;
  margin: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--cream);
  border-radius: 30px;
  box-shadow: inset 0 0 0 3px #fff, 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* 一時停止（PauseView） */
.pause-card { max-width: 330px; padding: 22px 22px 14px; }
.pause-title { font-size: 22px; font-weight: 900; line-height: 1.25; }
.pause-mode { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.rules {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.rule { display: flex; align-items: baseline; gap: 6px; }
.rule .dot, .intro-line .dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.rule-text { font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.35; white-space: pre-line; }
.book-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 14px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--book-blue);
  box-shadow: inset 0 0 0 2px #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
.pause-card .book-chip { margin-top: 10px; min-height: 44px; }
.pause-card .squishy { margin-top: 20px; }
.retry-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}
.pause-card .to-title { margin-top: 34px; }
@media (max-height: 720px) {
  .pause-card { padding-top: 16px; }
  .pause-card .rules { gap: 5px; padding: 9px 12px; margin-top: 8px; }
  .pause-card .squishy { margin-top: 12px; }
  .pause-card .retry-btn { margin-top: 8px; }
  .pause-card .to-title { margin-top: 8px; }
}
/* さらに背の低い画面（iPhone の Safari の横の帯つきなど 600px 未満）: 説明の字を少し小さく、ボタンの間を詰めて 1 枚に収める（収まらなければスクロール） */
@media (max-height: 620px) {
  .pause-card { padding: 12px 18px 6px; }
  .pause-title { font-size: 19px; }
  .pause-mode { display: none; }
  .pause-card .rules { gap: 4px; padding: 8px 10px; }
  .rule-text { font-size: 12px; line-height: 1.3; }
  .pause-card .book-chip { margin-top: 6px; min-height: 36px; padding: 5px 12px; }
  .pause-card .squishy { margin-top: 8px; padding: 11px 24px; }
  .pause-card .retry-btn { margin-top: 6px; }
  .pause-card .to-title { margin-top: 2px; }
}

/* 初めての説明（ModeIntroCard） */
.intro-card { max-width: 340px; padding: 20px 20px 12px; }
.kicker { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.intro-card > .ol { margin-top: 2px; }
.goals { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.goal { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.goal-img { height: 64px; width: auto; }
.goal-name { font-size: 12px; font-weight: 700; }
.goal-gain { font-size: 13px; font-weight: 900; color: var(--endless-deep); }
.intro-lines {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.intro-line { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.intro-card .squishy { margin-top: 16px; }
.intro-card .text-btn { margin-top: 6px; }

/* 結果（ResultView）: 後ろの空は暗くしない。カードの後ろにだけ白い薄い幕 */
.result-layer, .result-layer .center { pointer-events: none; }
.result-wrap { position: relative; margin: auto; width: 100%; max-width: 330px; pointer-events: auto; }
.result-glow {
  position: absolute;
  inset: -14px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(6px);
}
.result-card { max-width: 330px; padding: 24px; gap: 12px; }
.result-mode { font-size: 18px; font-weight: 900; color: var(--ink-soft); }
.result-card .score-box { width: 100%; }
.result-score { font-size: 56px; line-height: 1.15; text-align: center; font-variant-numeric: tabular-nums; }
.new-best {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--pink-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.best-line { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.best-note { font-size: 11px; font-weight: 700; color: rgba(140, 112, 133, 0.85); }
.grade { display: flex; align-items: center; gap: 10px; }
.badge { position: relative; height: 78px; }
.badge-img { display: block; height: 78px; width: auto; }
.badge-name {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 56px;
  margin-left: -28px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
}
.grade-text { text-align: left; }
.grade-name { font-size: 20px; font-weight: 900; line-height: 1.25; }
.grade-sub { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.grade-band {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--rainbow);
  box-shadow: inset 0 0 0 2px #fff;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}
.cheer { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.stats { display: flex; gap: 10px; width: 100%; padding-top: 4px; }
.stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink);
}
.stat.link { box-shadow: inset 0 0 0 1.5px rgba(115, 168, 230, 0.5); }
.stat-value { font-size: 18px; font-weight: 900; white-space: nowrap; }
.stat-label { display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.book-chip.fresh { padding: 5px 12px; min-height: 30px; }
/* ［シェア］（iOS の ShareLink のカプセル: 白 90%・字は ink・縁は ink の 18%） */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 6px;
  padding: 7px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1.5px rgba(92, 64, 84, 0.18);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.result-buttons { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding-top: 2px; }
.sticker {
  position: absolute;
  right: -26px;
  top: -50px;
  width: 96px;
  transform-origin: 0 100%;
  pointer-events: none;
}
.sticker-img {
  display: block;
  width: 96px;
  height: auto;
  animation: sticker-bob 1.8s var(--ease-in-out-sine) infinite alternate;
}
@keyframes sticker-bob { from { transform: rotate(8deg) translateY(-3px); } to { transform: rotate(8deg) translateY(3px); } }
/* 順位の行（RankChip の並び。ほかの文は小さく） */
.rank-line { width: 100%; display: flex; justify-content: center; }
.rank-chips { display: flex; gap: 6px; width: 100%; padding: 0; background: none; }
.rank-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1.5px rgba(92, 64, 84, 0.12);
}
.rank-chip.gold { background: rgba(255, 209, 92, 0.45); box-shadow: inset 0 0 0 1.5px rgba(219, 153, 51, 0.6); }
.chip-title { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.chip-rank { font-size: 16px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 4px;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.rank-crown { color: var(--gold-deep); }

/* ---- シート ---- */

.sheets { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sheets.open { pointer-events: auto; }
.sheet { position: absolute; inset: 0; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(100%, 520px);
  height: calc(100% - max(env(safe-area-inset-top), 10px) - 10px);
  max-height: 900px;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: var(--cream);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.sheet-panel.book, .sheet-panel.settings { background: linear-gradient(180deg, var(--cream), #e0f0ff); }
.sheet-head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 16px 16px 8px;
  touch-action: none;
  cursor: grab;
}
.grabber {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: rgba(140, 112, 133, 0.32);
}
.sheet-title { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.sheet-title-img { height: 28px; width: auto; }
.close-btn {
  grid-column: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-body {
  position: relative;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
}

/* せってい（iOS の Form の組にならい、白い角丸の組に行を並べる） */
.page { position: relative; }
.group { margin-top: 18px; }
.group:first-child { margin-top: 6px; }
.group-head { padding: 0 16px 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.group-box { border-radius: 14px; background: #fff; overflow: hidden; }
.group-foot { padding: 6px 16px 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink-soft); }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.row + .row { border-top: 1px solid rgba(92, 64, 84, 0.08); }
.row-label { flex: 1 1 auto; min-width: 0; }
.row.disabled { opacity: 0.4; pointer-events: none; }
.row-seg { flex-wrap: wrap; padding: 8px 16px; cursor: default; }
.row-seg .seg { flex: 1 1 210px; }
.row-text { display: block; padding: 12px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); cursor: default; }
.row-text .warn { margin-top: 4px; color: var(--pink-deep); }
.row-chev { color: var(--ink-soft); }
.row-link:active { background: rgba(92, 64, 84, 0.05); }
.version { margin-top: 22px; text-align: center; font-size: 11px; color: rgba(140, 112, 133, 0.6); }

/* 切り替え（Toggle）。オンは mint を少し濃く（白い丸が見えるように） */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.18);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out);
}
.switch[aria-checked='true'] { background: #5fc796; }
.knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform var(--sp-toggle-d) var(--sp-toggle);
}
.switch[aria-checked='true'] .knob { transform: translateX(20px); }

/* 区切りの選び（segmented の Picker） */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  padding: 2px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
}
.seg.disabled { opacity: 0.4; pointer-events: none; }
.seg-pill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--n));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  transition: transform var(--sp-toggle-d) var(--sp-toggle);
}
.seg-opt {
  position: relative;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 10px 0 0;
  background: none;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 900;
}
/* 「あそびかた」のページは、せっていのページの上に重ねて右から入る（入れ替わる間、両方が見えるように） */
.page-rules { position: absolute; top: 0; left: 16px; right: 16px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.page-rules .back-btn { display: flex; }

/* くもずかん（CloudBookView） */
.book-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.trophy { height: 30px; width: auto; }
.complete {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--rainbow);
  box-shadow: inset 0 0 0 2px #fff;
  color: var(--ink);
}
.book-list { display: flex; flex-direction: column; }
.book-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(92, 64, 84, 0.1);
  cursor: pointer;
  transform-origin: 50% 0;
  animation: row-in 0.32s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.book-row.found { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(92, 64, 84, 0.1), 0 3px 6px rgba(92, 64, 84, 0.08); }
.book-row.top { box-shadow: inset 0 0 0 2.5px var(--gold), 0 3px 6px rgba(92, 64, 84, 0.08); }
.book-row.focus { box-shadow: inset 0 0 0 2.5px var(--pink-deep), 0 3px 6px rgba(92, 64, 84, 0.08); }
/* 行は上から少しずつずらして入る（RowEntrance） */
@keyframes row-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.book-art { flex: 0 0 74px; height: 64px; display: flex; align-items: center; justify-content: center; }
.book-cloud { display: block; max-width: 74px; max-height: 64px; transform-origin: 50% 100%; }
/* まだ出会っていない雲は絵だけ影（colorMultiply(.black) と opacity 0.16） */
.book-art.shadow .book-cloud { filter: brightness(0) opacity(0.16); }
.book-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.book-name-line, .book-pts-line { display: flex; align-items: baseline; gap: 6px; }
.book-pts-line { gap: 8px; }
.book-name { font-size: 17px; font-weight: 900; white-space: nowrap; }
.book-row.top .book-name { font-size: 19px; }
.book-tier { font-size: 10px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.book-pts { font-size: 17px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.book-row.top .book-pts { font-size: 20px; color: var(--pink-deep); }
.book-gain {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(140, 219, 209, 0.35);
  color: var(--endless-deep);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.book-row.top .book-gain { font-size: 15px; }
.size-bar { display: flex; align-items: center; gap: 6px; }
.size-track { position: relative; flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(92, 64, 84, 0.08); }
.size-fill { height: 100%; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(92, 64, 84, 0.15); }
.size-text { font-size: 9.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.book-detail { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(140, 112, 133, 0.9);
  animation: row-in 0.32s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.merge-arrow.faint { color: rgba(140, 112, 133, 0.5); }
.book-foot { padding-top: 14px; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: center; }

/* ランキング（中身は親の ranking.js） */
.ranking-slot { min-height: 200px; }

/* ---- 画面の切り替えの雲（いちばん上。覆っている間は指も止める）---- */

.wipe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  visibility: hidden;
}
.wipe.on { visibility: visible; pointer-events: auto; }

/* 動きを減らす設定の人: 飾りのゆれを止める（切り替えの雲とボタンの手応えは残す） */
@media (prefers-reduced-motion: reduce) {
  .rays-svg, .logo-bob, .sticker-img, #loading .loading-cloud { animation: none; }
}