/* ノーブル・エステート — 共通デザイン（論理解像度 1920×1080）
   トーン：「お嬢様の手帳とマーカー」。白い紙・濃紺インクの線・パステルのベタ塗り・ずらしたベタ影。
   金属グラデ、ぼかした濃い影、明朝の多用はしない。設計は docs/ui_style.md。 */
:root {
  /* 紙とインク */
  --paper: #FFFDF9;
  --paper-2: #FBF5EC;
  --paper-tint: #FFF5F7;
  --line: #3A3150;          /* 線・枠（純黒は使わない） */
  --line-soft: #CFC6DA;
  --ink: #3A3150;           /* 文字 */
  --ink-2: #7A7092;         /* 補助文字 */
  /* パステル（ベタ面）と淡色 */
  --pink: #FF8FB1;  --pink-soft: #FFE4EC;
  --lemon: #FFE27A; --lemon-soft: #FFF3BF;
  --mint: #8EDCC4;  --mint-soft: #D6F4EA;
  --sky: #8CCBFF;   --sky-soft: #D9EEFF;
  --lilac: #C3A6F5; --lilac-soft: #EBE0FF;
  --accent: #F0567F;        /* 主ボタン・強調 */
  --accent-dk: #C93A63;
  /* 形 */
  --bw: 2.5px;
  --radius: 18px;
  --pop: 4px 5px 0 rgba(58, 49, 80, .16);      /* ぼかさない、ずらした影 */
  --pop-lg: 6px 8px 0 rgba(58, 49, 80, .16);
  /* 文字 */
  --round: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;   /* 見出し・本文 */
  --num: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;             /* 数字（tabular-nums） */
  --hand: 'Yomogi', 'Zen Maru Gothic', cursive;                          /* 一言・メモ・ラベル */
  --formal: 'Kaisei Opti', 'Zen Maru Gothic', serif;                     /* ロゴ・誓約書だけ */
  --latin: 'Fredoka', 'Zen Maru Gothic', sans-serif;                     /* 欧文ラベル */

  /* 旧トークン（画面ごとの CSS を書き換え終えるまでの互換。新規コードでは使わない） */
  --ivory: var(--paper); --ivory-2: var(--paper-2); --cream: var(--paper-2);
  --gold: var(--line); --gold-hi: var(--lemon); --gold-dk: var(--ink-2);
  --wine: var(--accent-dk); --wine-2: var(--accent); --rose: var(--pink);
  --navy: var(--line); --glass: rgba(255, 253, 249, .96);
  --shadow: var(--pop); --serif: var(--round); --sans: var(--round);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b2540; overflow: hidden; }
body { font-family: var(--round); font-weight: 500; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center;
  overflow: hidden; background: var(--paper);
}
#screen-root, #fx-root { position: absolute; inset: 0; }
#fx-root { pointer-events: none; z-index: 50; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ---------- 紙の地（背景画像を使わない画面の下地） ---------- */
.paper-bg { position: absolute; inset: 0; background: var(--paper); }
.paper-bg.dots { background: radial-gradient(var(--pink-soft) 2.5px, transparent 3px) 0 0 / 30px 30px, var(--paper); }
.paper-bg.grid {
  background:
    linear-gradient(var(--sky-soft) 1.5px, transparent 1.5px) 0 0 / 36px 36px,
    linear-gradient(90deg, var(--sky-soft) 1.5px, transparent 1.5px) 0 0 / 36px 36px,
    var(--paper);
}

/* ---------- パネル・ボタン・見出し ---------- */
.panel {
  position: relative; background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--pop);
}
.panel.soft { border-color: var(--line-soft); }
/* 角に貼ったマスキングテープ（任意で .panel に .taped） */
.panel.taped::before, .panel.taped::after {
  content: ''; position: absolute; width: 96px; height: 26px; top: -13px; opacity: .85;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), var(--tape, var(--lemon));
  border-radius: 3px;
}
.panel.taped::before { left: 26px; transform: rotate(-6deg); }
.panel.taped::after { right: 26px; transform: rotate(5deg); }
.panel.ornate { } /* 旧クラス（飾りは廃止） */

.btn {
  appearance: none; cursor: pointer; position: relative;
  font: 900 26px var(--round); letter-spacing: .06em; color: var(--ink);
  padding: 14px 44px; border-radius: 999px;
  background: var(--lemon); border: var(--bw) solid var(--line);
  box-shadow: 0 6px 0 var(--line);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--line); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--line); }
.btn.primary, .btn.gold { background: var(--accent); color: #fff; }
.btn.ghost { background: #fff; }
.btn.small { font-size: 20px; padding: 9px 26px; box-shadow: 0 4px 0 var(--line); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled, .btn.off { opacity: .45; pointer-events: none; }

/* 見出し：文字の下にマーカーを引く */
.heading, .title-ribbon {
  display: inline-block; position: relative;
  font: 900 40px var(--round); letter-spacing: .1em; color: var(--ink);
  padding: 0 18px;
  background: linear-gradient(transparent 58%, var(--hl, var(--lemon)) 58% 92%, transparent 92%);
}
.heading small { display: block; font: 600 16px var(--latin); letter-spacing: .35em; color: var(--ink-2); margin-bottom: 2px; }

.chip { display: inline-block; font: 700 15px var(--round); padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--line); color: var(--ink); }
.chip.c { background: color-mix(in srgb, var(--c) 28%, #fff); }
.latin { font-family: var(--latin); letter-spacing: .08em; }
.num { font-family: var(--num); font-weight: 800; font-variant-numeric: tabular-nums; }
.hand { font-family: var(--hand); }

/* 写真シール（チェキ）枠：ギャラリー・図鑑・カード用 */
.cheki { background: #fff; border: var(--bw) solid var(--line); border-radius: 6px; padding: 10px 10px 0; box-shadow: var(--pop); }
.cheki .cap { padding: 8px 4px 10px; font: 700 16px var(--round); color: var(--ink); text-align: center; }

/* ---------- モーダル・トースト ---------- */
.modal-wrap { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(58, 49, 80, .32); animation: fadeIn .2s both; }
.modal { padding: 40px 50px 36px; min-width: 760px; }
.modal h3 { margin: 0 0 20px; text-align: center; }
.modal table { width: 100%; border-collapse: collapse; font-size: 20px; }
.modal th { font: 700 15px var(--round); letter-spacing: .1em; color: var(--ink-2); padding: 8px; border-bottom: var(--bw) solid var(--line); text-align: right; }
.modal th:first-child, .modal td:first-child { text-align: left; }
.modal td { padding: 12px 8px; border-bottom: 2px dashed var(--line-soft); text-align: right; }
.modal td .num { font-size: 24px; }
.modal .foot { text-align: center; margin-top: 26px; }
.who-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.who-cell img { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--c); object-fit: cover; background: #fff; }

.toast { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); z-index: 60; padding: 12px 36px; border-radius: 999px; background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--pop); color: var(--ink); font: 900 22px var(--round); animation: fadeIn .2s both; }

/* ---------- モックナビ（開発用） ---------- */
#mocknav { position: fixed; right: 10px; top: 10px; z-index: 1000; font-family: var(--round); }
#mocknav .tog { background: rgba(255,253,249,.92); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
#mocknav ul { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--paper); border-radius: 12px; border: 2px solid var(--line); box-shadow: var(--pop); display: none; min-width: 240px; }
#mocknav.open ul { display: block; }
#mocknav li { padding: 7px 12px; color: var(--ink); cursor: pointer; border-radius: 8px; font-size: 14px; font-weight: 700; }
#mocknav li:hover { background: var(--lemon-soft); }
#mocknav li.cur { background: var(--pink-soft); }
#mocknav li small { color: var(--ink-2); margin-right: 6px; }