/* ============================================================================
 * base.css — 色・書体・共通部品
 * ----------------------------------------------------------------------------
 * ■ 触るときの指針
 *   色と書体は必ず :root の変数を経由する。個別の要素に生の色を書かない。
 *   ここを1か所変えれば全画面のトーンが変わる状態を保つこと。
 *
 * ■ 書体の選定理由
 *   見出しは明朝（Shippori Mincho B1）。「研究所の観察記録」という体裁に合わせ、
 *   中身のふざけた魚との落差を作るための選択。
 *   本文は Zen Kaku Gothic New。仮名の字面が整っていて小サイズでも崩れない。
 *   数値は Roboto Mono。桁が揃うのでメーターの値が読みやすい。
 *   日本語フォントを差し替えるときは、必ず実機（特にAndroid）で
 *   ウェイトが出ているか確認すること。
 * ========================================================================== */

:root{
  /* 水の色。上が浅瀬、下が深部 */
  --water-shallow:#1E7E96;
  --water-mid:#12546A;
  --water-deep:#0A3140;
  --water-abyss:#06212A;

  /* 器の色 */
  --hull:#08191F;          /* 画面の地 */
  --hull-raise:#0E262E;    /* 一段手前のパネル */
  --hull-high:#143039;     /* さらに手前・開いているパネル */
  --line:#1C3A44;

  /* 文字 */
  --chalk:#E7EFEC;
  --chalk-dim:#8FA8AE;

  /* 状態色。良い / 注意 / 危険 の3段だけに絞る */
  --algae:#79D2A6;
  --amber:#E9A63C;
  --rust:#CB5740;

  --f-display:"Shippori Mincho B1", serif;
  --f-body:"Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
           "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-mono:"Roboto Mono", ui-monospace, SFMono-Regular, monospace;

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --pad:14px;

  /* 水槽の高さ。--tank-scale は ui.js がスクロール量に応じて書き換える */
  --tank-h:44dvh;
  --tank-scale:1;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* アコーディオンを開くとページが伸びてスクロールバーが出入りし、
   その分だけ本文の横幅が動いてしまう。あらかじめ場所を確保して固定する。
   これを消すと、パネルを開くたびに水槽の幅がわずかに変わる */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}

body{
  background:var(--hull);
  color:var(--chalk);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  overscroll-behavior-y:none;
}
/* モーダルを開いているあいだ、背後がスクロールしないようにする */
body.is-locked{overflow:hidden}

h1,h2,h3,h4,p,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}

/* ── ボタン ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 16px;
  background:var(--water-deep);border:1px solid var(--water-mid);
  border-radius:var(--r-sm);font-size:14px;
  transition:background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled){background:var(--water-mid)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-primary{background:var(--amber);border-color:var(--amber);color:#1F1509;font-weight:700}
.btn-primary:hover:not(:disabled){background:#F2B457}
.btn-block{width:100%}
.btn-grow{flex:1}
.btn-buy{min-height:44px;padding:6px 14px;font-family:var(--f-mono);font-size:13px;flex:none}
.btn-meta{font-family:var(--f-mono);font-size:11px;opacity:.7;font-weight:400}

/* ── 選択チップ（餌の種類、パーツ選択に共通） ──────────────────────── */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chip{
  min-height:52px;padding:7px 4px;
  background:#0A1E25;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.35;color:var(--chalk-dim);
  transition:border-color .15s, background .15s, color .15s;
}
.chip[aria-pressed="true"]{border-color:var(--amber);background:#16323C;color:var(--chalk)}
.chip em{display:block;font-style:normal;font-family:var(--f-mono);font-size:10px;opacity:.65;margin-top:1px}

/* ── 補足テキスト ──────────────────────────────────────────────────── */
.note{font-size:11.5px;line-height:1.6;color:var(--chalk-dim);margin:10px 0 0}
.note-top{margin:0 0 10px}
.footnote{font-size:11.5px;color:var(--chalk-dim);text-align:center;margin:18px 0 0}

/* ── トースト ──────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  z-index:90;max-width:86vw;
  background:var(--hull-high);border:1px solid var(--amber);color:#F6D9A6;
  padding:9px 18px;border-radius:999px;font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 動きを減らす設定の尊重 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important}
}