/* ============================================================
   ROM v2 共通スタイル (common.css)

   全ツールページ（v2/*.html）が共有するベース・ヘッダー・フッター・星空。
   これまで各ページの <style> 内に同じ内容が 20 箇所以上コピーされていたものを
   ここに一本化している。

   ■ 読み込み順（重要）
     common.css → (gacha_styles.css / boss_styles.css) → ページ固有 <style>
     後から読むものが勝つ。ページ固有の差分は必ずページ側 <style> に置く。

   ■ 変更時の注意
     ここはサイト全体の見た目に効く。1ページだけ変えたい場合は
     このファイルではなくそのページの <style> に上書きを書くこと。
   ============================================================ */

/* ---------- ベース ---------- */
/* iOS Safari の自動テキスト拡大（横広な表があると footer 等が肥大化）を無効化 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* ダブルタップ拡大だけを止め、ピンチ拡大は許す。
     viewport の user-scalable=no / maximum-scale=1 を外したので、その代わりをここで担う */
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* 全ページが個別に 0 にしていたので既定にした（各ページ・timer.css 等に残っている同じ指定は消してよい） */
body {
  margin: 0;
  /* 日本語の折り返し：「ー」「ッ」などを行頭に置かない（strict）＋最終行が1文字だけになるのを避ける（pretty）。
     文字を大きくすると狭いタイル（職業名・カード名）でカタカナ名が折り返すため */
  line-break: strict;
  text-wrap: pretty;
}

/* <small> の既定（smaller ≒ 0.83em）で 12px を割らないようにする（親が 14px 以下だと割る） */
small {
  font-size: max(var(--fs-xs), 0.83em);
}

/* キーボード操作時のフォーカス表示（:where で詳細度 0。ページ側の指定があればそちらが勝つ） */
:where(a, button, summary, [role="button"], [role="tab"], [tabindex], input[type="range"], input[type="checkbox"], input[type="radio"]):focus-visible {
  /* 明るいパネル上では金色が見えにくいので、ページ側で --focus-ring を上書きする */
  outline: 2px solid var(--focus-ring, #ffe088);
  outline-offset: 2px;
}

/* 視覚的にだけ隠す（チェックボックスを自作トグルにするとき等。display:none だとフォーカスできない） */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- 共通トークン ---------- */
:root {
  /* ゴールド（見出し・装飾の基調色） */
  --gold-1: #f4d27a;
  --gold-2: #d4a04a;
  --gold-3: #8a5a1c;
  --ink-sub: #c5b38f;
  /* 明るいパネル上の青い文字（見出しカプセル・件数・リンク）。ボタン地色の --sky-btn（#3b7fe6）を文字に使うと
     白地でコントラスト 3.9:1 と足りないので、文字にはこちらを使う（白地 5.6:1。白パネル上のフォーカス枠と同じ色） */
  --sky-ink: #2a64c4;

  /* 文字サイズ（v2 ツール共通）。スマホで読める最小を 12px とし、これ未満は使わない。
     xs=バッジ・注記・著作権表記 / sm=表のセル・メタ情報 / md=密なデータの本文 / base=説明文。
     見出しや大きな数値表示はページ固有の px のままでよい。
     2026-10-13 に全体を 1px 大きくした（オーナー指示「全体的に文字が小さい」。旧 12/13/14/15/18） */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 19px;

  /* 余白・タップ領域。スマホ幅（〜600px）では、画面端からいちばん外側のパネルの縁までを --gutter-panel（12px）に揃え、
     パネルの内側は 12〜16px にする（本文は画面端から約 24〜28px）。パネルの無い面の本文は --gutter（16px）。
     主な操作（タブ・主ボタン・フィルタ）は --tap（44px）以上にする */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --gutter: 16px;
  --gutter-panel: 12px;
  --tap: 44px;

  /* 夜空グラデーション（タイマー / 精錬 / ガチャ系の body 背景） */
  --bg-night:
    radial-gradient(1200px 700px at 18% 12%, rgba(86, 140, 230, 0.28), transparent 55%),
    radial-gradient(900px 600px at 85% 80%, rgba(120, 90, 220, 0.22), transparent 55%),
    linear-gradient(160deg, #0a1330 0%, #0c1c44 42%, #0a1838 100%);
}

/* ============================================================
   ヘッダー  <header class="site">
     <h1>ツール名</h1>
     <div class="sub">ラグナロクマスターズ</div>
     <div class="ornament"></div>
   ============================================================ */
header.site {
  padding: 18px 4px 10px;
  text-align: center;
}

header.site h1 {
  /* タイトルが長いページ（モンスター攻撃パターン図鑑など）でも
     はみ出さないよう、幅に応じて 20〜26px に収める */
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(20px, 6.4vw, 26px);
  line-height: 1.3;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  /* 2行になるときは語の区切り（HTML 側の <wbr>）で折り返す。「ー」1文字だけ次の行へ落ちるのを防ぐ。
     <wbr> の無いタイトルが収まらないときは overflow-wrap:anywhere で任意の位置で折れる */
  word-break: keep-all;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff0c9 0%, var(--gold-1) 45%, var(--gold-2) 70%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(244, 210, 122, 0.18);
}

header.site .sub {
  font-size: var(--fs-sm);
  color: var(--ink-sub);
  letter-spacing: 0.2em;
}

header.site .ornament {
  width: 220px;
  max-width: 70%;
  height: 14px;
  margin: 8px auto 0;
  background:
    linear-gradient(90deg, transparent, var(--gold-2) 50%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at center, var(--gold-1) 0 3px, transparent 4px);
}

/* 別ページへの導線（ダンジョン耐性表の旧版/一覧表リンクなど） */
header.site .list-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 8px;
  padding: 0 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffe088;
  text-decoration: none;
  border: 1px solid rgba(255, 224, 136, 0.5);
  border-radius: 999px;
  background: rgba(255, 224, 136, 0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

header.site .list-link:hover {
  background: rgba(255, 224, 136, 0.18);
  border-color: rgba(255, 224, 136, 0.9);
  color: #fff;
}

/* ============================================================
   フッター  <footer class="note">
     <div class="copyright">…</div>
     指摘のお願い / X リンク / キノコ（トップへ戻る）
   ============================================================ */
footer.note {
  margin-top: 28px;
  padding: 14px 10px 26px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

footer.note a {
  color: #ffe088;
  text-decoration: none;
  font-weight: 600;
  /* 下線は border ではなく text-decoration で引く。上下の padding でタップ領域を
     44px 相当まで広げても、下線の位置と行の高さが変わらないようにするため（inline の padding は行送りに影響しない） */
  text-decoration: underline dotted rgba(255, 224, 136, 0.55);
  text-underline-offset: 3px;
  padding: 12px 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

footer.note a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

footer.note .copyright {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: normal;
  line-height: 1.7;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

/* フッターのキノコ（タップでトップへ戻る）。
   footer.note a の下線と padding を打ち消す（inline-block なので padding が寸法に効いてしまう）。 */
footer.note .footer-mushroom,
.footer-mushroom {
  display: inline-block;
  margin-top: 10px;
  line-height: 0;
  border-bottom: 0;
  text-decoration: none;
  padding: 0;
  transform-origin: 50% 100%;
  animation: mushroomBob 3.2s ease-in-out infinite;
}

.footer-mushroom svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.footer-mushroom:hover {
  animation-play-state: paused;
}

@keyframes mushroomBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* アニメを付けている footer.note .footer-mushroom（0,2,1）に負けないよう同じセレクタで止める */
  footer.note .footer-mushroom,
  .footer-mushroom { animation: none; }
}

/* ============================================================
   星空の背景（<div class="rf-stars" id="stars">）
   星の <i> は js/ui-common.js の ROMUI.stars() が生成する。
   クラス名はページごとに接頭辞が違うため 3 種まとめて定義する。
   ============================================================ */
.rf-stars,
.bx-stars,
.st-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.rf-stars i,
.bx-stars i,
.st-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #dfeaff;
  opacity: 0.7;
  animation: twinkle 3.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-stars i,
  .bx-stars i,
  .st-stars i { animation: none; }
}

/* ============================================================
   確認ダイアログ（ROMUI.confirm。DOM は ui-common.js が作る）
   既定は精錬トーン（refine / box-gacha / relic-gacha の明るい青のパネル＋オレンジの決定ボタン）。
   系統ごとの見た目は theme のクラスで上書きする（ポリン系：poring-common.css の .ui-confirm.is-poring）
   ============================================================ */
.ui-confirm {
  position: fixed; inset: 0; z-index: 200;   /* ページ内の全画面演出（ポリン大発生の舞台 100 など）より上 */
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 14, 34, 0.55);
}
.ui-confirm[hidden], .ui-confirm__art[hidden] { display: none; }   /* display:flex が UA の [hidden] に勝つので明示する */
.ui-confirm__panel {
  width: min(320px, 100%); text-align: center;
  border-radius: 16px; padding: 16px 18px 18px;
  background: #eef4fd; border: 1px solid #cdddf3; color: #2b3a57;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  --focus-ring: #2a64c4;   /* 明るいパネルの上では金色のフォーカス枠が見えないので濃い青に */
  animation: uiConfirmIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes uiConfirmIn { from { transform: scale(0.86); opacity: 0; } }
.ui-confirm__title { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.08em; color: #2b3a57; }
.ui-confirm__msg { margin: 0 0 16px; font-size: var(--fs-md); font-weight: 700; line-height: 1.6; color: #2b3a57; }
.ui-confirm__btns { display: flex; gap: 10px; }
.ui-confirm__btn {
  flex: 1; min-height: 44px; border-radius: 11px; cursor: pointer;
  font: 700 var(--fs-md) / 1 "Noto Sans JP", sans-serif;
  color: #2b3a57; background: #fff; border: 1px solid #cdddf3;
  transition: filter 0.15s;
}
.ui-confirm__btn:hover { filter: brightness(0.97); }
.ui-confirm__btn.is-ok {
  color: #3a1c00; border: 0;   /* オレンジの地に白文字はコントラストが足りないので濃い茶 */
  background: linear-gradient(180deg, #ffb347, #ff8a1f 55%, #ef6f12);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.ui-confirm__btn.is-ok:hover { filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .ui-confirm__panel { animation: none; } }