/* ============================================================
   パワースポットマップ — デザインシステム
   ============================================================ */
:root {
  --gold: #c9a227;
  --gold-light: #e8c964;
  --gold-deep: #9a7a14;
  --ink: #3b3226;
  --ink-soft: #6f6352;
  --paper: rgba(255, 252, 244, 0.92);
  --paper-solid: #fffcf4;
  --line: rgba(160, 135, 80, 0.25);
  --shadow: 0 10px 40px rgba(60, 40, 0, 0.18);
  --radius: 18px;
  --font-main: 'Zen Maru Gothic', sans-serif;
  --font-title: 'Shippori Mincho B1', serif;
  --vermilion: #d0392e;
}
body.night {
  --ink: #f0e8d8;
  --ink-soft: #b8ac94;
  --paper: rgba(24, 28, 42, 0.90);
  --paper-solid: #1a1e30;
  --line: rgba(200, 170, 100, 0.22);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-main);
  color: var(--ink);
  background: #bfe3ea;
  transition: background 0.8s;
}
body.night { background: #0a1526; }
button { font-family: var(--font-main); cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }

#scene-container { position: fixed; inset: 0; }
#scene-container canvas { display: block; }

/* ---------- ローディング ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, #f7ecd2, #e8d5a8);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity 0.6s;
}
#loader.fade { opacity: 0; pointer-events: none; }
.loader-torii { font-size: 64px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.loader-text { font-weight: 700; color: #7a6230; letter-spacing: 0.1em; }
.loader-bar { width: 220px; height: 6px; background: rgba(122, 98, 48, 0.2); border-radius: 3px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--gold); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------- ようこそ ---------- */
#intro {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 14, 2, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein 0.6s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.intro-card {
  background: var(--paper-solid);
  border: 1px solid var(--line);
  border-radius: 28px; padding: 44px 48px; text-align: center;
  max-width: 460px; width: calc(100% - 40px);
  box-shadow: var(--shadow);
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  position: relative; overflow: hidden;
}
.intro-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--vermilion), var(--gold), var(--vermilion));
}
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
.intro-mark { font-size: 54px; margin-bottom: 8px; }
.intro-card h1 { font-family: var(--font-title); font-size: clamp(22px, 6vw, 30px); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.intro-sub { color: var(--gold-deep); font-weight: 700; letter-spacing: 0.3em; font-size: 12px; margin: 6px 0 18px; }
body.night .intro-sub { color: var(--gold-light); }
.intro-desc { font-size: 14px; line-height: 2; color: var(--ink-soft); margin-bottom: 26px; }
.intro-actions { display: flex; flex-direction: column; gap: 12px; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #4a3a08; font-weight: 900; font-size: 16px;
  padding: 15px 24px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201, 162, 39, 0.55); }
.btn-ghost {
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 13px 24px; font-weight: 700; color: var(--ink-soft);
  transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(201, 162, 39, 0.08); }

/* ---------- ヘッダー ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.logo {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 9px 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.logo-mark { color: var(--vermilion); font-size: 22px; }
.logo-text { font-family: var(--font-title); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; }
.logo-text small { display: block; font-family: var(--font-main); font-size: 9px; letter-spacing: 0.35em; color: var(--gold-deep); font-weight: 700; }
body.night .logo-text small { color: var(--gold-light); }

#searchbox { position: relative; flex: 1; max-width: 380px; }
#search-input {
  width: 100%; padding: 12px 18px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-main); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); outline: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#search-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
#search-input:focus { border-color: var(--gold); }
#search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; cursor: pointer; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active { background: rgba(201, 162, 39, 0.12); }
.suggest-item .s-pref { font-size: 11px; color: var(--ink-soft); margin-left: auto; white-space: nowrap; }
.suggest-item .s-cat { font-size: 10px; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }

.top-actions { display: flex; gap: 10px; margin-left: auto; }
.icon-btn, .pill-btn {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight: 700; font-size: 13px; color: var(--ink);
  transition: transform 0.15s;
}
.icon-btn { width: 42px; height: 42px; font-size: 17px; }
.pill-btn { padding: 0 18px; height: 42px; }
.icon-btn:hover, .pill-btn:hover { transform: translateY(-2px); }
.pill-btn.gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #4a3a08; border: none; font-weight: 900;
}

/* ---------- カテゴリチップ ---------- */
#chips {
  position: fixed; top: 74px; left: 0; right: 0; z-index: 35;
  display: flex; gap: 8px; padding: 6px 18px 12px;
  overflow-x: auto; scrollbar-width: none;
}
#chips::-webkit-scrollbar { display: none; }
.chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; box-shadow: 0 4px 14px rgba(60, 40, 0, 0.10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s, background 0.2s;
}
.chip:hover { transform: translateY(-2px); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.chip .cnt { font-size: 10.5px; color: var(--ink-soft); background: rgba(120, 100, 60, 0.12); border-radius: 999px; padding: 1px 7px; }
.chip.active { background: var(--ink); color: #fff8e8; border-color: var(--ink); }
body.night .chip.active { background: var(--gold); color: #33270a; border-color: var(--gold); }
.chip.active .cnt { color: inherit; background: rgba(255, 255, 255, 0.2); }

/* ---------- 神社カード ---------- */
#card {
  position: fixed; left: 18px; bottom: 46px; z-index: 45;
  width: 340px; max-width: calc(100vw - 36px);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  background: var(--paper-solid);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow);
  animation: cardin 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  scrollbar-width: thin;
}
@keyframes cardin { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
.card-head {
  position: relative; padding: 20px 22px 14px;
  background: linear-gradient(150deg, rgba(232, 201, 100, 0.28), rgba(201, 162, 39, 0.10));
  border-bottom: 1px solid var(--line);
}
.card-badge {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
  color: #7a5c00; background: linear-gradient(135deg, #ffe9a8, #f4cf5e);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.35);
}
.card-badge.visited-badge { color: #fff; background: linear-gradient(135deg, #d0392e, #a82a20); margin-left: 6px; }
.card-kana { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.15em; }
.card-name { font-family: var(--font-title); font-size: 25px; font-weight: 800; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.card-name .torii-ico { color: var(--vermilion); font-size: 20px; }
.card-pref { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-top: 3px; }
.card-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(120, 100, 60, 0.12); font-size: 15px; color: var(--ink-soft);
}
.card-body { padding: 16px 22px 20px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { font-size: 11px; font-weight: 800; color: #fff; padding: 4px 12px; border-radius: 999px; }
.card-desc { font-size: 13px; line-height: 1.9; margin-bottom: 14px; }
.card-row {
  display: flex; gap: 10px; font-size: 12px; line-height: 1.7;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.card-row .rlabel { flex-shrink: 0; font-weight: 900; color: var(--gold-deep); }
body.night .card-row .rlabel { color: var(--gold-light); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.act-btn {
  flex: 1; min-width: 90px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 10px; border-radius: 12px;
  font-size: 12.5px; font-weight: 800; text-decoration: none;
  border: 1.5px solid var(--line); color: var(--ink);
  transition: transform 0.12s, background 0.15s;
}
.act-btn:hover { transform: translateY(-2px); }
.act-btn.visit {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #4a3a08; border: none;
}
.act-btn.visit.done { background: linear-gradient(135deg, #d0392e, #b02c22); color: #fff; }
.act-btn.official { background: rgba(201, 162, 39, 0.10); }

/* ---------- ツールチップ ---------- */
#tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 800; box-shadow: var(--shadow);
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
}
#tooltip small { display: block; font-weight: 500; font-size: 10px; color: var(--ink-soft); }

/* ---------- 地方ナビ ---------- */
#regions {
  position: fixed; bottom: 46px; right: 18px; z-index: 35;
  display: flex; flex-direction: column; gap: 6px;
}
.region-btn {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 14px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  box-shadow: 0 4px 14px rgba(60, 40, 0, 0.10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: left; transition: transform 0.12s, background 0.15s;
}
.region-btn:hover { transform: translateX(-3px); background: rgba(201, 162, 39, 0.15); }

/* ---------- 参拝帳 ---------- */
#visited-panel {
  position: fixed; top: 74px; right: 18px; bottom: 46px; z-index: 50;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  animation: cardin 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
}
.panel-head h2 { font-family: var(--font-title); font-size: 19px; letter-spacing: 0.08em; }
.close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(120, 100, 60, 0.12); font-size: 16px; color: var(--ink-soft);
}
.visited-progress { padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.vp-label { font-size: 13px; font-weight: 900; margin-bottom: 6px; }
.vp-label span { font-size: 22px; color: var(--gold-deep); }
body.night .vp-label span { color: var(--gold-light); }
.vp-bar { height: 8px; border-radius: 4px; background: rgba(120, 100, 60, 0.15); overflow: hidden; }
.vp-bar i { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }
.vp-rank { font-size: 11px; color: var(--ink-soft); margin-top: 7px; font-weight: 700; }
#visited-list { list-style: none; overflow-y: auto; flex: 1; padding: 8px 12px 14px; scrollbar-width: thin; }
#visited-list .empty { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 30px 10px; line-height: 2; }
.visited-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 12px; cursor: pointer;
  transition: background 0.15s;
}
.visited-item:hover { background: rgba(201, 162, 39, 0.10); }
.visited-item .vi-mark { font-size: 18px; }
.visited-item .vi-name { font-weight: 800; font-size: 13.5px; }
.visited-item .vi-date { margin-left: auto; font-size: 10.5px; color: var(--ink-soft); }

/* ---------- 開運診断 ---------- */
#quiz-modal, #daily-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 14, 2, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein 0.35s;
  padding: 20px;
}
.quiz-box {
  position: relative;
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--shadow);
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto; scrollbar-width: thin;
  animation: rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.quiz-box::before {
  content: ''; position: sticky; top: 0; display: block; height: 6px;
  background: linear-gradient(90deg, var(--vermilion), var(--gold), var(--vermilion));
  z-index: 2;
}
.quiz-box .close-btn { position: absolute; top: 16px; right: 16px; z-index: 3; }
#quiz-body { padding: 30px 36px 34px; }

.q-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.q-progress i { flex: 1; height: 5px; border-radius: 3px; background: rgba(120, 100, 60, 0.15); }
.q-progress i.done { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }

.q-step { font-size: 11px; font-weight: 900; letter-spacing: 0.25em; color: var(--gold-deep); margin-bottom: 6px; }
body.night .q-step { color: var(--gold-light); }
.q-title { font-family: var(--font-title); font-size: 21px; font-weight: 800; line-height: 1.5; margin-bottom: 20px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--ink);
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.q-opt:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(201, 162, 39, 0.08); }
.q-opt .q-emoji { font-size: 20px; }
.q-back { margin-top: 18px; font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.q-back:hover { color: var(--gold-deep); }

/* 診断結果 */
.result-head { text-align: center; margin-bottom: 6px; }
.result-head .r-emoji { font-size: 40px; }
.result-title { font-family: var(--font-title); font-size: 23px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.result-theme {
  text-align: center; font-size: 13px; font-weight: 900; margin-bottom: 18px;
}
.result-theme b { padding: 3px 14px; border-radius: 999px; color: #fff; margin: 0 3px; }
.result-bars { margin-bottom: 22px; }
.rbar { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.rbar .rb-label { width: 74px; flex-shrink: 0; font-size: 11.5px; font-weight: 800; text-align: right; }
.rbar .rb-track { flex: 1; height: 10px; border-radius: 5px; background: rgba(120, 100, 60, 0.12); overflow: hidden; }
.rbar .rb-fill { display: block; height: 100%; border-radius: 5px; width: 0; transition: width 0.9s cubic-bezier(0.2, 0.9, 0.3, 1); }

.result-shrine {
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 18px 20px; margin-bottom: 12px;
  position: relative;
}
.result-shrine.first {
  border: 2px solid var(--gold);
  background: linear-gradient(150deg, rgba(232, 201, 100, 0.18), rgba(201, 162, 39, 0.05));
  box-shadow: 0 8px 26px rgba(201, 162, 39, 0.25);
}
.rs-rank {
  position: absolute; top: -12px; left: 16px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
  background: var(--ink); color: #fff8e8; padding: 4px 13px; border-radius: 999px;
}
.result-shrine.first .rs-rank { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #4a3a08; }
.rs-name { font-family: var(--font-title); font-size: 19px; font-weight: 800; margin-top: 4px; }
.rs-pref { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.rs-reason { font-size: 12.5px; line-height: 1.85; margin-bottom: 12px; }
.rs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-actions .act-btn { flex: initial; padding: 9px 16px; font-size: 12px; }
.q-restart { display: block; margin: 18px auto 0; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.q-restart:hover { color: var(--gold-deep); }

/* ---------- クレジット ---------- */
#credit {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  padding: 7px 16px; text-align: center;
  font-size: 9.5px; color: rgba(50, 40, 20, 0.55);
  background: linear-gradient(transparent, rgba(255, 252, 244, 0.5));
  pointer-events: none;
}
#credit a { pointer-events: auto; }
body.night #credit { color: rgba(230, 220, 190, 0.45); background: linear-gradient(transparent, rgba(10, 21, 38, 0.6)); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 760px) {
  #topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .logo { order: 1; padding: 7px 12px; }
  .logo-text { font-size: 14px; }
  .top-actions { order: 2; gap: 4px; }
  #searchbox { order: 3; flex-basis: 100%; max-width: none; }
  .pill-btn { padding: 0 10px; height: 38px; font-size: 12px; }
  .icon-btn { width: 36px; height: 36px; }
  #chips { top: 196px; }
  #card {
    left: 10px; right: 10px; bottom: 30px; width: auto;
    max-height: 52vh;
  }
  #regions { display: none; }
  #visited-panel { top: auto; height: 70vh; left: 10px; right: 10px; width: auto; bottom: 30px; }
  #quiz-body { padding: 24px 20px 26px; }
  .intro-card { padding: 34px 26px; }
}


/* ============================================================
   パワースポット版 追加スタイル
   ============================================================ */
:root {
  --jade: #2f9e85;
  --jade-light: #5ec4a8;
  --jade-deep: #1c6e5c;
  --amethyst: #8a7ce8;
}
body { background: #b8e0d8; }
body.night { background: #0c1226; }
.logo-mark { color: var(--jade); }
.logo-text small { color: var(--jade-deep); letter-spacing: 0.22em; }
body.night .logo-text small { color: var(--jade-light); }
.pill-btn.gold { background: linear-gradient(135deg, #8fe0c8, var(--jade)); color: #073830; }
.btn-gold { background: linear-gradient(135deg, #8fe0c8, var(--jade)); color: #073830; box-shadow: 0 6px 20px rgba(47,158,133,.45); }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(47,158,133,.55); }
.intro-card::before { background: linear-gradient(90deg, var(--amethyst), var(--jade), var(--gold)); }
.quiz-box::before { background: linear-gradient(90deg, var(--amethyst), var(--jade), var(--gold)); }
.intro-sub { color: var(--jade-deep); }
body.night .intro-sub { color: var(--jade-light); }
#loader { background: linear-gradient(160deg, #d8f0e6, #a8d8c8); }
.loader-text { color: #1c6e5c; }
.loader-bar i { background: var(--jade); }
#search-input:focus { border-color: var(--jade); }
.suggest-item:hover, .suggest-item.active { background: rgba(47,158,133,.12); }
.chip.active { background: var(--jade-deep); border-color: var(--jade-deep); color: #eafff8; }
body.night .chip.active { background: var(--jade); color: #04241e; border-color: var(--jade); }

/* ---------- 気メーター ---------- */
#ki-meter {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 7px 14px; min-width: 172px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ki-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 800; margin-bottom: 4px; }
.ki-num { color: var(--jade-deep); }
body.night .ki-num { color: var(--jade-light); }
.ki-num b { font-size: 14px; }
.ki-bar { height: 5px; border-radius: 3px; background: rgba(47,158,133,.15); overflow: hidden; }
.ki-bar i { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--jade-light), var(--jade)); transition: width .6s cubic-bezier(.2,.9,.3,1); }

.streak-chip {
  display: none; align-items: center;
  background: linear-gradient(135deg, #ffb35c, #e8703d); color: #fff;
  border-radius: 999px; padding: 0 13px; height: 42px;
  font-weight: 900; font-size: 13px; box-shadow: var(--shadow);
}
.pill-btn.daily { position: relative; }
.dot-alert {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #e84a3d; border: 2px solid var(--paper-solid);
  display: none;
}

/* ---------- 属性チップ2段目 ---------- */
#elem-chips {
  position: fixed; top: 122px; left: 0; right: 0; z-index: 35;
  display: flex; gap: 8px; padding: 0 18px 10px;
  overflow-x: auto; scrollbar-width: none;
}
#elem-chips::-webkit-scrollbar { display: none; }
#elem-chips .chip { font-size: 11.5px; padding: 6px 12px; }

/* ---------- 気トースト ---------- */
.ki-toast {
  position: fixed; top: 84px; left: 50%; z-index: 200;
  transform: translate(-50%, -18px); opacity: 0;
  background: var(--paper-solid); border: 1.5px solid var(--jade);
  border-radius: 999px; padding: 9px 22px;
  font-family: var(--font-main); font-size: 13.5px; font-weight: 800; color: var(--ink);
  box-shadow: 0 10px 34px rgba(28,110,92,.35);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .3s;
  pointer-events: none; text-align: center; white-space: nowrap;
}
.ki-toast small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.ki-toast.show { transform: translate(-50%, 0); opacity: 1; }
.ki-toast.badge { border-color: var(--gold); box-shadow: 0 10px 34px rgba(201,162,39,.4); }
.ki-toast.rankup { border-color: var(--amethyst); box-shadow: 0 10px 34px rgba(138,124,232,.45); }

/* ---------- 毎日の気めぐり ---------- */
.daily-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.daily-head h3 { font-family: var(--font-title); font-size: 21px; letter-spacing: .05em; }
.daily-streak { font-size: 13px; font-weight: 900; color: #e8703d; }
.daily-card {
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 12px;
}
.daily-card.done { background: rgba(47,158,133,.07); border-color: rgba(47,158,133,.4); }
.dc-label { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--jade-deep); margin-bottom: 9px; }
body.night .dc-label { color: var(--jade-light); }
.dc-spot { display: flex; align-items: center; gap: 12px; }
.dc-emoji { font-size: 30px; }
.dc-name { font-family: var(--font-title); font-size: 17px; font-weight: 800; }
.dc-sub { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.dc-go {
  margin-left: auto; background: linear-gradient(135deg, #8fe0c8, var(--jade));
  color: #073830; font-weight: 900; font-size: 12px;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap;
}
.dc-donemsg { font-size: 12.5px; color: var(--ink-soft); }
.omikuji-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #4a3a08; font-weight: 900; font-size: 15px;
  padding: 13px; border-radius: 12px;
  transition: transform .15s;
}
.omikuji-btn:hover { transform: translateY(-2px); }
.omikuji-btn.teal { background: linear-gradient(135deg, #8fe0c8, var(--jade)); color: #073830; }
.omikuji-btn span { font-size: 19px; }
.omikuji-result { text-align: center; animation: rise .5s cubic-bezier(.2,.9,.3,1.2); }
.om-label { font-family: var(--font-title); font-size: 40px; font-weight: 800; line-height: 1.2; }
.om-msg { font-size: 13.5px; font-weight: 700; margin: 6px 0 4px; }
.om-advice { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.om-lucky {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(201,162,39,.08); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; font-size: 12px; font-weight: 700;
}
.om-spot-btn {
  background: none; border: none; color: var(--jade-deep);
  font-weight: 900; font-size: 12.5px; text-decoration: underline; cursor: pointer;
}
body.night .om-spot-btn { color: var(--jade-light); }
.daily-bonus {
  text-align: center; font-size: 12px; font-weight: 800;
  color: var(--ink-soft); padding: 8px;
  border: 1.5px dashed var(--line); border-radius: 12px;
}
.daily-bonus.got { color: var(--jade-deep); border-color: var(--jade); background: rgba(47,158,133,.07); }
body.night .daily-bonus.got { color: var(--jade-light); }

/* 検定 */
.kentei-q { font-size: 11px; font-weight: 900; letter-spacing: .15em; color: var(--ink-soft); margin-bottom: 6px; }
.kentei-title { font-size: 14px; font-weight: 800; line-height: 1.7; margin-bottom: 12px; }
.kentei-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kentei-opt {
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 8px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.kentei-opt:hover:not(:disabled) { border-color: var(--jade); background: rgba(47,158,133,.08); }
.kentei-opt.correct { border-color: var(--jade); background: rgba(47,158,133,.18); }
.kentei-opt.wrong { border-color: #d94141; background: rgba(217,65,65,.12); }

/* ---------- 結晶図鑑 ---------- */
#zukan-panel {
  position: fixed; top: 74px; right: 18px; bottom: 46px; z-index: 50;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  animation: cardin .35s cubic-bezier(.2,.9,.3,1.15);
}
#zukan-tabs { display: flex; gap: 8px; padding: 0 20px 12px; }
#zukan-tabs button {
  flex: 1; padding: 8px; border-radius: 999px;
  border: 1.5px solid var(--line); font-weight: 800; font-size: 12.5px; color: var(--ink-soft);
}
#zukan-tabs button.active { background: var(--jade-deep); border-color: var(--jade-deep); color: #eafff8; }
body.night #zukan-tabs button.active { background: var(--jade); color: #04241e; }
#zukan-body { overflow-y: auto; flex: 1; padding: 4px 20px 18px; scrollbar-width: thin; }
.zukan-total { text-align: center; margin-bottom: 14px; }
.zt-num { font-family: var(--font-title); font-size: 30px; font-weight: 800; color: var(--jade-deep); }
body.night .zt-num { color: var(--jade-light); }
.zt-num small { font-size: 13px; color: var(--ink-soft); font-family: var(--font-main); }
.zt-bar { height: 8px; border-radius: 4px; background: rgba(47,158,133,.15); overflow: hidden; margin: 6px 0; }
.zt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-light), var(--jade)); transition: width .6s; }
.zt-pct { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.zukan-row { margin-bottom: 10px; }
.zr-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; margin-bottom: 4px; }
.zr-crystals { display: flex; flex-wrap: wrap; gap: 3px; }
.crystal {
  font-size: 17px; cursor: pointer; color: var(--line);
  transition: transform .15s;
}
.crystal:hover { transform: scale(1.3); }
.crystal.got { color: var(--c); text-shadow: 0 0 8px var(--c); }
.zukan-hint { font-size: 10.5px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.badge-cell {
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 8px; text-align: center; opacity: .45; filter: grayscale(.9);
}
.badge-cell.got { opacity: 1; filter: none; border-color: var(--gold); background: rgba(201,162,39,.07); }
.bc-emoji { font-size: 24px; display: block; }
.bc-name { font-size: 11.5px; font-weight: 900; display: block; margin: 3px 0 2px; }
.bc-desc { font-size: 9.5px; color: var(--ink-soft); display: block; line-height: 1.5; }

/* ---------- 瞑想モード ---------- */
#meditation {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 16, 24, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein .8s;
}
.med-inner { text-align: center; color: #e8f4ee; }
.med-spot { font-size: 15px; font-weight: 800; letter-spacing: .1em; margin-bottom: 34px; }
.med-circle {
  width: 190px; height: 190px; margin: 0 auto 30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mc) 0%, transparent 72%);
  border: 2px solid var(--mc);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
  box-shadow: 0 0 40px var(--mc);
}
.med-circle.inhale { transform: scale(1.35); transition-duration: 4s; }
.med-circle.hold { transform: scale(1.35); transition-duration: 4s; }
.med-circle.exhale { transform: scale(1.0); transition-duration: 6s; }
.med-count { font-family: var(--font-title); font-size: 30px; margin-bottom: 26px; opacity: .8; }
.med-quit { color: rgba(232,244,238,.55); font-size: 12px; font-weight: 700; text-decoration: underline; }

/* シェア */
.result-share { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
.act-btn.share { flex: initial; background: linear-gradient(135deg, #8fe0c8, var(--jade)); color: #073830; border: none; }

@media (max-width: 760px) {
  #ki-meter { order: 4; flex: 1; min-width: 0; }
  #chips { top: 196px; }
  #elem-chips { top: 244px; }
  #zukan-panel { top: auto; height: 72vh; left: 10px; right: 10px; width: auto; bottom: 30px; }
  .kentei-opts { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .intro-desc br { display: none; }
}

/* ---------- みくじ紙 ---------- */
.omikuji-paper {
  background: #fffdf4;
  border: 1px solid rgba(150, 125, 70, .4);
  border-top: 4px solid #b3372b;
  border-radius: 6px;
  padding: 18px 18px 20px;
  text-align: center;
  max-width: 340px; margin: 0 auto;
  box-shadow: 0 6px 20px rgba(40, 30, 10, .1);
  animation: rise .5s cubic-bezier(.2,.9,.3,1.2);
}
.op-head {
  font-size: 10px; font-weight: 800; letter-spacing: .4em;
  color: #9a7a14; margin-bottom: 8px;
}
.op-head::before, .op-head::after {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: currentColor; opacity: .4; vertical-align: middle; margin: 0 10px;
}
.op-grade {
  font-family: var(--font-title); font-size: 52px; font-weight: 800;
  line-height: 1.25; letter-spacing: .1em;
}
.op-msg {
  font-size: 12.5px; line-height: 1.9; font-weight: 700;
  color: #4a4032; margin: 4px 0 14px;
}
.op-block {
  border-top: 1px dashed rgba(150, 125, 70, .35);
  padding: 10px 4px 2px; margin-top: 8px;
}
.op-label {
  display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .3em;
  color: #1c6e5c; margin-bottom: 3px;
}
.op-value { font-size: 13px; font-weight: 700; color: #3b3226; line-height: 1.8; }
.omikuji-paper .om-spot-btn {
  color: #b3372b; font-weight: 800; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
body.night .omikuji-paper { box-shadow: 0 10px 30px rgba(0,0,0,.5); }

.daily-head { padding-right: 42px; }

/* ---------- 実参拝・結願 ---------- */
.card-badge.verified-badge {
  color: #fff; background: linear-gradient(135deg, #c9a227, #9a7a14);
  border: none;
}
.act-btn.gps {
  background: linear-gradient(135deg, #e8c964, #c9a227);
  color: #4a3a08; border: none; font-weight: 900;
}
.act-btn.verified {
  background: rgba(201, 162, 39, .15); color: #9a7a14;
  border: 1.5px solid rgba(201, 162, 39, .5); cursor: default;
}
body.night .act-btn.verified { color: #e8c964; }
.crystal.real { text-shadow: 0 0 12px var(--c), 0 0 4px #fff; }
.kechigan {
  border: 1.5px solid rgba(201, 162, 39, .5);
  background: linear-gradient(150deg, rgba(232, 201, 100, .12), rgba(201, 162, 39, .04));
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
  text-align: center;
}
.kg-head {
  font-family: var(--font-title); font-size: 12px; font-weight: 800;
  letter-spacing: .3em; color: #9a7a14; margin-bottom: 6px;
}
body.night .kg-head { color: #e8c964; }
.kg-num { font-size: 13px; font-weight: 900; margin-bottom: 6px; }
.kg-num b { font-family: var(--font-title); font-size: 24px; color: #9a7a14; }
body.night .kg-num b { color: #e8c964; }
.kg-num small { color: var(--ink-soft); }
.kg-bar { height: 7px; border-radius: 4px; background: rgba(150, 125, 70, .2); overflow: hidden; margin-bottom: 8px; }
.kg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e8c964, #c9a227); transition: width .6s; }
.kg-note { font-size: 10.5px; line-height: 1.8; color: var(--ink-soft); }

.kg-img {
  width: 132px; height: 132px; object-fit: cover;
  border-radius: 10px; margin: 2px auto 10px; display: block;
  box-shadow: 0 6px 18px rgba(40, 30, 10, .25);
  border: 1px solid rgba(201, 162, 39, .4);
}

/* ---------- 開運だより導線 ---------- */
.tayori-btn {
  display: block; text-align: center;
  margin: 10px 16px 16px; padding: 12px;
  border-radius: 10px; text-decoration: none;
  background: linear-gradient(135deg, #e8c964, #c9a227);
  color: #4a3a08; font-weight: 900; font-size: 12.5px;
}

#daily-modal .tayori-btn { margin: 0 30px 24px; }

/* ---------- おみくじ抽選演出 ---------- */
.om-draw-anim { text-align: center; padding: 14px 0 8px; }
.om-stick {
  width: 56px; height: 150px; margin: 0 auto 14px;
  background: #fffdf4; border: 1px solid rgba(150,125,70,.5);
  border-top: 4px solid #b3372b; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 26px; font-weight: 800; color: #b3372b;
  animation: om-shake .55s ease-in-out 2, om-fly .5s ease-in 1.1s forwards;
  box-shadow: 0 8px 20px rgba(40,30,10,.2);
}
@keyframes om-shake {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg) translateY(-2px); }
  75% { transform: rotate(7deg) translateY(-2px); }
}
@keyframes om-fly {
  to { transform: translateY(-46px) rotate(10deg); opacity: 0; }
}
.om-draw-txt { font-size: 11px; letter-spacing: .25em; color: var(--ink-soft); font-weight: 700; }

/* ---------- 合言葉 ---------- */
.kotoba { display: flex; gap: 8px; margin: 0 16px 16px; }
#daily-modal .kotoba { margin: 10px 30px 24px; }
.kotoba input {
  flex: 1; padding: 9px 14px; border-radius: 8px;
  border: 1px dashed rgba(160,135,80,.5); background: transparent;
  font-family: var(--font-main); font-size: 12px; color: var(--ink); outline: none;
}
.kotoba button {
  padding: 9px 16px; border-radius: 8px; font-weight: 900; font-size: 12px;
  border: 1px solid rgba(160,135,80,.5); color: var(--ink-soft);
}

/* ---------- 褒賞応募・カード写真 ---------- */
.card-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--line); }
.kg-done { margin-top: 4px; }
.kg-congrats { font-family: var(--font-title); font-weight: 800; font-size: 13px; color: var(--gold-deep); margin-bottom: 6px; }
body.night .kg-congrats { color: var(--gold-light); }
.kg-code { font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.kg-code b { font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: 1px; color: var(--vermilion); background: rgba(208, 57, 46, 0.08); padding: 2px 8px; border-radius: 6px; }
.kg-apply { display: inline-block; }
.card-photo-credit { font-size: 8.5px; color: var(--ink-soft); text-align: right; margin: -7px 0 8px; opacity: 0.75; }
.card-photo-credit a { color: inherit; }

/* ---------- 全体俯瞰に戻るボタン（モバイルのみ・地方ナビ非表示の代替） ---------- */
#btn-overview { display: none; }
@media (max-width: 760px) {
  #btn-overview {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 14px; bottom: 54px; z-index: 35;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--paper); border: 1px solid var(--line);
    box-shadow: var(--shadow); font-size: 20px;
  }
  #btn-overview:active { transform: scale(0.92); }
}

/* ---------- メニュー（案内所） ---------- */
#menu-panel {
  position: fixed; top: 74px; right: 18px; z-index: 45;
  width: 330px; max-height: calc(100vh - 100px);
  background: var(--paper-solid); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
#menu-panel .menu-body { overflow-y: auto; padding: 12px 18px 18px; }
.menu-links { display: flex; flex-direction: column; gap: 8px; }
.menu-links a {
  display: block; padding: 11px 14px; border-radius: 12px;
  background: rgba(201,162,39,0.07); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 700;
}
.menu-links a:hover { background: rgba(201,162,39,0.15); }
.menu-links a small { display: block; font-size: 10px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 760px) {
  #menu-panel { left: 10px; right: 10px; width: auto; top: auto; bottom: 30px; max-height: 72vh; }
}

/* iOSのダブルタップ拡大・UI上のピンチによるページズームを抑止（地図キャンバスはOrbitControlsが管理） */
body { touch-action: pan-x pan-y; }
button, a, select, input, .chip, .pill-btn, .icon-btn, .act-btn { touch-action: manipulation; }
aside, #topbar, #chips { touch-action: pan-y; }

/* BGMトグル */
#btn-bgm.bgm-off { opacity: 0.45; filter: grayscale(0.6); }

/* ============ 開運こよみ ============ */
.menu-section-title {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.25em;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 14px 0 8px;
}
.ky-card {
  background: var(--paper-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  margin-bottom: 6px;
}
.ky-card.best {
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.35);
}
.ky-best-ribbon {
  text-align: center;
  color: var(--gold-deep);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.ky-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ky-chip {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold-deep);
  border: 1px solid rgba(201, 162, 39, 0.35);
}
.ky-chip.ky-tensha { background: linear-gradient(135deg, #f6e7b2, #e8c964); color: #6b5308; border-color: var(--gold); }
.ky-chip.ky-newmoon, .ky-chip.ky-fullmoon { background: rgba(90, 100, 160, 0.12); color: #4a5488; border-color: rgba(90, 100, 160, 0.3); }
.ky-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.7; margin: 4px 0 0; }
.ky-none { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.ky-none b { color: var(--gold-deep); }
.ky-otsuge {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(201, 162, 39, 0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.75;
}
.ky-otsuge-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--gold-deep);
  font-weight: 800;
  margin-bottom: 3px;
}
#koyomi-chip {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 800;
  color: #6b5308;
  background: linear-gradient(135deg, #f9edc4, #eccf70);
  border: 1px solid var(--gold);
  border-radius: 22px;
  padding: 7px 16px;
  box-shadow: 0 6px 20px rgba(150, 110, 10, 0.3);
  cursor: pointer;
  animation: kyFloat 3s ease-in-out infinite;
}
#koyomi-chip.hidden { display: none; }
@keyframes kyFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
@media (max-width: 640px) {
  #koyomi-chip { bottom: 96px; font-size: 11.5px; }
}

/* ============ 福分け ============ */
.ky-fuku {
  display: block; width: 100%; margin-top: 10px;
  font-family: var(--font-main); font-size: 12.5px; font-weight: 700;
  color: var(--gold-deep); background: rgba(201, 162, 39, 0.1);
  border: 1px dashed rgba(201, 162, 39, 0.5); border-radius: 10px;
  padding: 8px; cursor: pointer;
}
.ky-fuku:hover { background: rgba(201, 162, 39, 0.18); }
#fuku-modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 24, 18, 0.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  animation: fkIn .5s ease;
}
#fuku-modal.out { opacity: 0; transition: opacity .5s ease; }
@keyframes fkIn { from { opacity: 0; } to { opacity: 1; } }
.fk-inner {
  background: var(--paper-solid); border: 1.5px solid var(--gold);
  border-radius: 18px; padding: 28px 26px; text-align: center;
  max-width: 340px; margin: 0 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.fk-title {
  font-family: var(--font-title); font-size: 20px; color: var(--ink);
  line-height: 1.6; margin-bottom: 14px;
}
.fk-otsuge {
  font-size: 13.5px; color: var(--ink); line-height: 1.9;
  background: rgba(201, 162, 39, 0.07); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 12px 0 16px;
  text-align: left; font-family: var(--font-title);
}
#fuku-modal .act-btn {
  font-family: var(--font-main); font-size: 14px; font-weight: 700;
  padding: 10px 22px; border-radius: 22px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #4a3a08;
}

/* ============ こよみ吉日アイコン（SVG化） ============ */
.ky-chip { display: inline-flex; align-items: center; gap: 5px; }
.ky-ico { display: inline-flex; align-items: center; justify-content: center; }
.ky-svg { width: 14px; height: 14px; }
.ky-svg path, .ky-svg circle, .ky-svg rect { stroke: var(--gold-deep); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ky-svg [data-moon] { fill: var(--gold-light); stroke: var(--gold-deep); }
.mi-inline { display: inline-flex; vertical-align: -3px; margin-right: 5px; }
.mi-inline .ky-svg { width: 16px; height: 16px; }
#koyomi-chip .ky-ico { vertical-align: -2px; }
#koyomi-chip .ky-svg path, #koyomi-chip .ky-svg circle { stroke: #6b5308; }

/* ============================================================
   気のかけら経済 追加スタイル（かけら/気だまり/精霊/磨き/呪文/juice）
   ============================================================ */

/* ---------- かけらバッジ（常時表示） ---------- */
.kakera-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 42px; padding: 0 13px 0 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-title); font-weight: 900; font-size: 14px; color: var(--jade-deep);
}
body.night .kakera-badge { color: var(--jade-light); }
.kakera-badge.earn { animation: kakera-pop .5s ease; }
@keyframes kakera-pop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* ---------- 気だまり（放置積立の受け取り） ---------- */
#kidamari {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(8, 24, 20, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein 0.5s;
}
.offering-card {
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 28px; padding: 40px 44px 36px; text-align: center;
  max-width: 400px; width: calc(100% - 40px);
  box-shadow: var(--shadow);
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  position: relative; overflow: hidden;
}
.offering-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--amethyst), var(--jade), var(--gold));
}
.offering-orb { font-size: 46px; margin-bottom: 8px; animation: orb-breathe 3.4s ease-in-out infinite; }
@keyframes orb-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(47, 158, 133, 0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(47, 158, 133, 0.65)); }
}
@media (prefers-reduced-motion: reduce) { .offering-orb { animation: none; } }
.offering-title { font-family: var(--font-title); font-size: 24px; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 10px; }
.offering-lead { font-size: 14px; line-height: 2; color: var(--ink-soft); margin-bottom: 24px; }
.offering-lead b { color: var(--jade-deep); font-size: 17px; }
body.night .offering-lead b { color: var(--jade-light); }
.offering-receive { width: 100%; }

/* ---------- 気の精霊との遭遇 ---------- */
#seirei {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(8, 24, 20, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein 0.6s;
}
.seirei-card {
  position: relative;
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 28px; padding: 28px 40px 32px; text-align: center;
  max-width: 380px; width: calc(100% - 40px);
  box-shadow: var(--shadow);
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
}
.seirei-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--amethyst), var(--jade), var(--gold));
}
.seirei-halo {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 196, 168, 0.42), rgba(94, 196, 168, 0) 68%);
  pointer-events: none; animation: seirei-glow 3.6s ease-in-out infinite;
}
@keyframes seirei-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.seirei-img { position: relative; min-height: 60px; }
.seirei-img img {
  width: 216px; height: 216px; object-fit: cover; border-radius: 18px;
  border: 1px solid rgba(94, 196, 168, 0.35);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  animation: seirei-float 4s ease-in-out infinite;
}
@keyframes seirei-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.seirei-when { position: relative; font-family: var(--font-title); font-size: 12px; font-weight: 800; letter-spacing: 0.28em; color: var(--jade-deep); margin-top: 2px; }
body.night .seirei-when { color: var(--jade-light); }
.seirei-msg { position: relative; font-size: 14px; line-height: 1.9; color: var(--ink); margin: 8px 0 20px; }
.seirei-receive { position: relative; width: 100%; }
@media (prefers-reduced-motion: reduce) { .seirei-halo, .seirei-img img { animation: none; } }

/* ---------- ご褒美演出（juice・頂点だけ・上品に） ---------- */
.juice-gain {
  position: fixed; z-index: 95; transform: translate(-50%, 0);
  font-family: var(--font-title); font-weight: 900; font-size: 18px;
  color: var(--jade-deep); text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
  pointer-events: none; animation: juiceGain 1.2s cubic-bezier(.2, .8, .3, 1) forwards;
}
body.night .juice-gain { color: var(--jade-light); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
@keyframes juiceGain {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); }
  25% { opacity: 1; transform: translate(-50%, -6px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
.juice-lit { animation: juiceLit 1.4s ease; }
@keyframes juiceLit {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(94, 196, 168, 0.8)); }
  100% { filter: brightness(1); }
}
.juice-petals { position: fixed; inset: 0; z-index: 94; pointer-events: none; overflow: hidden; }
.juice-petals .jp {
  position: absolute; top: -14px; width: 10px; height: 10px;
  background: linear-gradient(150deg, #eafff8, #5ec4a8);
  border-radius: 1px; transform: rotate(45deg); opacity: .9;
  box-shadow: 0 0 6px rgba(94, 196, 168, 0.7);
  animation: jpFall linear forwards;
}
@keyframes jpFall {
  0% { transform: translateY(-14px) translateX(0) rotate(45deg); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translateY(105vh) translateX(var(--sway, 0)) rotate(var(--spin, 165deg)); opacity: 0; }
}

/* ---------- 案内所の追加ボタン ---------- */
.zukan-open-btn {
  display: block; width: 100%; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px;
  font-weight: 800; font-size: 13.5px; color: var(--ink);
  background: rgba(47, 158, 133, 0.05);
  transition: background .15s, transform .15s;
}
.zukan-open-btn:hover { background: rgba(47, 158, 133, 0.12); transform: translateY(-1px); }
.zukan-open-btn small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 旅の記録（復活の呪文） ---------- */
#save-panel {
  position: fixed; top: 74px; right: 18px; bottom: 46px; z-index: 52;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--paper-solid); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  animation: cardin .35s cubic-bezier(.2,.9,.3,1.15);
}
#save-body { overflow-y: auto; flex: 1; padding: 4px 20px 18px; scrollbar-width: thin; }
.sv-lead { text-align: center; font-family: var(--font-title); font-size: 14px; color: var(--ink); line-height: 1.85; margin: 8px 0 14px; }
.sv-lead small { font-size: 11.5px; color: var(--ink-soft); font-family: var(--font-main); }
.sv-now {
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  background: rgba(47, 158, 133, 0.07); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.8;
}
.sv-now b { color: var(--jade-deep); font-weight: 900; }
body.night .sv-now b { color: var(--jade-light); }
.sv-spell { margin-top: 10px; }
.sv-spell.hidden { display: none; }
#sv-spell, #sv-input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper-solid); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  padding: 10px 12px; resize: none; outline: none; box-sizing: border-box;
  letter-spacing: 0.06em; line-height: 1.7; margin-bottom: 8px;
}
#sv-spell { background: rgba(47, 158, 133, 0.06); font-weight: 700; color: var(--jade-deep); }
body.night #sv-spell { color: var(--jade-light); }
#sv-input:focus { border-color: var(--jade); }
.sv-divider { text-align: center; font-size: 11px; letter-spacing: 0.3em; color: var(--jade-deep); font-weight: 800; margin: 22px 0 12px; }
body.night .sv-divider { color: var(--jade-light); }
.sv-note { font-size: 11px; color: var(--ink-soft); line-height: 1.7; margin: 12px 0 0; }
#save-panel .act-btn {
  display: block; width: 100%; text-align: center;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 11px 14px; font-weight: 800; font-size: 13.5px; color: var(--ink);
  margin-bottom: 8px; transition: background .15s;
}
#save-panel .act-btn:hover { background: rgba(47, 158, 133, 0.1); }
#save-panel .act-btn.gps { background: linear-gradient(135deg, #8fe0c8, var(--jade)); color: #073830; border: none; }

/* ---------- 精霊図鑑 ---------- */
#seireizukan-panel {
  position: fixed; top: 74px; right: 18px; bottom: 46px; z-index: 52;
  width: 360px; max-width: calc(100vw - 36px);
  background: linear-gradient(170deg, #12262e, #1a2e2a); border: 1px solid rgba(94, 196, 168, 0.35);
  border-radius: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin;
  color: #e8f5ef;
}
#seireizukan-panel .panel-head h2 { color: #e8f5ef; }
#seireizukan-body { padding: 0 18px 18px; }
.sz-intro { text-align: center; margin-bottom: 14px; }
.sz-lead { font-size: 12.5px; line-height: 1.9; color: #b8d8cc; margin: 4px 0 10px; }
.sz-count { font-size: 12px; font-weight: 800; color: #b8d8cc; }
.sz-count b { font-family: var(--font-title); font-size: 18px; color: var(--jade-light); }
.sz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sz-card {
  position: relative; text-align: center;
  border: 1px solid rgba(94, 196, 168, 0.3); border-radius: 16px;
  padding: 12px 10px 12px; overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.sz-halo {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 196, 168, 0.35), transparent 68%);
  pointer-events: none;
}
.sz-card.unmet .sz-halo { background: radial-gradient(circle, rgba(120, 130, 140, 0.14), transparent 68%); }
.sz-img { position: relative; }
.sz-img img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 10px; display: block; }
.sz-card.unmet .sz-img img { filter: grayscale(1) brightness(0.28) blur(3px); }   /* まだ会っていない＝影絵 */
.sz-name { position: relative; font-family: var(--font-title); font-size: 14px; font-weight: 800; color: #f0faf5; margin-top: 4px; }
.sz-card.unmet .sz-name { color: #7f958c; letter-spacing: 0.22em; }
.sz-when { position: relative; font-size: 10px; font-weight: 800; letter-spacing: 0.24em; color: var(--jade-light); margin-top: 2px; }
.sz-lore { position: relative; font-size: 10.5px; line-height: 1.7; color: #a8c8bc; margin: 6px 0 0; }
.sz-note { font-size: 10.5px; color: #7f958c; text-align: center; margin-top: 12px; }

/* ---------- 結晶磨き ---------- */
.zr-stage {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; vertical-align: 1px;
}
.zr-stage-1 { background: rgba(47, 158, 133, 0.14); color: var(--jade-deep); border: 1px solid rgba(47, 158, 133, 0.4); }
body.night .zr-stage-1 { color: var(--jade-light); }
.zr-stage-2 { background: rgba(138, 124, 232, 0.14); color: var(--amethyst); border: 1px solid rgba(138, 124, 232, 0.45); }
.mg-row { display: flex; align-items: center; gap: 8px; margin: 5px 0 2px; }
.mg-btn {
  border: 1.5px solid rgba(47, 158, 133, 0.5); border-radius: 999px;
  padding: 4px 12px; font-size: 11px; font-weight: 900; color: var(--jade-deep);
  background: rgba(47, 158, 133, 0.07); transition: background .15s, transform .15s;
}
body.night .mg-btn { color: var(--jade-light); }
.mg-btn:not(:disabled):hover { background: rgba(47, 158, 133, 0.16); transform: translateY(-1px); }
.mg-btn:disabled { opacity: .45; cursor: default; }
.mg-hint { font-size: 9.5px; color: var(--ink-soft); font-weight: 700; }
.mg-max { font-size: 10.5px; font-weight: 900; color: var(--amethyst); letter-spacing: 0.06em; }
/* 磨きの段階で結晶の輝きが増す */
.zukan-row.migaki-1 .crystal.got { text-shadow: 0 0 12px var(--c), 0 0 3px #fff; filter: brightness(1.12); }
.zukan-row.migaki-2 .crystal.got { text-shadow: 0 0 14px var(--c), 0 0 5px #fff; animation: reishoShimmer 2.6s ease-in-out infinite; }
@keyframes reishoShimmer {
  0%, 100% { filter: brightness(1.1); }
  50% { filter: brightness(1.5) drop-shadow(0 0 6px rgba(138, 124, 232, 0.7)); }
}
@media (prefers-reduced-motion: reduce) { .zukan-row.migaki-2 .crystal.got { animation: none; } }

/* ---------- レスポンシブ（追加分） ---------- */
@media (max-width: 760px) {
  .kakera-badge { height: 38px; font-size: 13px; padding: 0 10px 0 8px; }
  #save-panel, #seireizukan-panel { top: auto; height: 76vh; left: 10px; right: 10px; width: auto; bottom: 30px; }
}

/* ============================================================
   UI仕上げ（かいうん基準の移植）: SVGアイコン基盤／フィルタボトムシート
   ============================================================ */

/* ---------- インラインSVGアイコン基盤（.uic=1em・currentColor追従） ---------- */
.uic { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.uic path, .uic rect, .uic circle, .uic ellipse, .uic line, .uic polyline {
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.uic [data-fill] { fill: currentColor; stroke: none; }

/* パネルタイトルのアイコン */
.h2-ico { width: 20px; height: 20px; margin-right: 8px; vertical-align: -3px; }
.h2-ico path, .h2-ico rect, .h2-ico circle {
  stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ローダー・イントロ・ロゴの結晶 */
.loader-torii svg { width: 64px; height: 64px; }
.loader-torii svg path { stroke: #1c6e5c; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.intro-mark svg { width: 54px; height: 54px; }
.intro-mark svg path { stroke: var(--jade); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.logo-mark svg { width: 23px; height: 23px; display: block; }
.logo-mark svg path { stroke: var(--jade); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 案内所ボタンのデュオトーンアイコン（かいうん確定方式: 線＋やわらか塗り） */
.zukan-open-btn .mi { display: inline-flex; width: 25px; height: 25px; vertical-align: -7px; margin-right: 6px; }
.zukan-open-btn .mi svg { width: 100%; height: 100%; }
.zukan-open-btn .mi svg path, .zukan-open-btn .mi svg circle {
  stroke: var(--jade-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.zukan-open-btn .mi svg [data-f] { fill: rgba(47, 158, 133, 0.20); }
body.night .zukan-open-btn .mi svg path, body.night .zukan-open-btn .mi svg circle { stroke: var(--jade-light); }

/* ご案内リンクのラインアイコン */
.menu-links .li-ico { display: inline-flex; width: 19px; height: 19px; vertical-align: -4px; margin-right: 4px; }
.li-svg { width: 100%; height: 100%; }
.li-svg path, .li-svg rect, .li-svg circle {
  stroke: var(--jade-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
body.night .li-svg path, body.night .li-svg rect, body.night .li-svg circle { stroke: var(--jade-light); }

/* 各所のアイコンサイズ調整 */
.icon-btn .uic { width: 19px; height: 19px; }
.pill-btn .uic { width: 16px; height: 16px; vertical-align: -3px; }
.kakera-badge .uic { width: 17px; height: 17px; margin-right: 4px; }
.streak-chip .uic { width: 14px; height: 14px; margin-right: 2px; }
#ki-rank .uic { width: 13px; height: 13px; vertical-align: -2px; }
.dc-emoji .uic { width: 30px; height: 30px; color: var(--jade-deep); }
body.night .dc-emoji .uic { color: var(--jade-light); }
.omikuji-btn .uic { width: 20px; height: 20px; }
.bc-emoji .uic { width: 26px; height: 26px; color: var(--jade-deep); }
body.night .bc-emoji .uic { color: var(--jade-light); }
.badge-cell:not(.got) .bc-emoji .uic { color: var(--ink-soft); }
.r-emoji .uic { width: 42px; height: 42px; color: var(--jade); }
.s-eico .uic { width: 17px; height: 17px; color: var(--jade-deep); }
body.night .s-eico .uic { color: var(--jade-light); }
.card-badge .uic { width: 12px; height: 12px; }
.act-btn .uic { width: 15px; height: 15px; }
.mg-btn .uic { width: 13px; height: 13px; }
.region-btn .uic { width: 15px; height: 15px; }
#btn-overview .uic { width: 22px; height: 22px; }
.zr-head .uic { width: 14px; height: 14px; vertical-align: -2px; }
.tayori-btn .uic { width: 15px; height: 15px; }
.ki-toast .uic { width: 15px; height: 15px; vertical-align: -2.5px; }
.offering-orb svg { width: 52px; height: 52px; }
.offering-orb svg path { stroke: var(--jade-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.night .offering-orb svg path { stroke: var(--jade-light); }

/* ---------- フィルタ（トリガーpill → ボトムシート） ---------- */
.filter-btn {
  position: fixed; top: 82px; left: 18px; z-index: 35;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 14px 9px 12px;
  font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 60, 50, 0.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s, box-shadow 0.2s;
}
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn:active { transform: scale(0.97); }
.filter-btn .fb-ico { display: inline-flex; }
.filter-btn .fb-ico svg { width: 17px; height: 17px; }
.filter-btn .fb-ico svg path { stroke: var(--jade-deep); }
body.night .filter-btn .fb-ico svg path { stroke: var(--jade-light); }
.filter-btn .fb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.filter-btn .fb-cnt { font-size: 11px; color: var(--ink-soft); background: rgba(47, 158, 133, 0.12); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.filter-btn .fb-caret { width: 12px; height: 12px; }
.filter-btn .fb-caret path { stroke: var(--ink-soft); }
.filter-btn.filtered { border-color: var(--jade); box-shadow: 0 4px 18px rgba(47, 158, 133, 0.28); }

#filter-sheet { position: fixed; inset: 0; z-index: 61; }
#filter-sheet.hidden { display: none; }
.fs-backdrop {
  position: absolute; inset: 0; background: rgba(5, 25, 20, 0.34);
  opacity: 0; transition: opacity 0.28s ease;
}
#filter-sheet.open .fs-backdrop { opacity: 1; }
.fs-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  max-width: 560px; max-height: 78vh; overflow-y: auto;
  background: var(--paper-solid); border: 1px solid var(--line); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(10, 40, 32, 0.24);
  transform: translateY(102%); transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
#filter-sheet.open .fs-panel { transform: translateY(0); }
.fs-grip { width: 42px; height: 5px; border-radius: 3px; background: rgba(47, 158, 133, 0.28); margin: 6px auto 4px; }
.fs-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; }
.fs-head h2 { font-family: var(--font-title); font-size: 18px; color: var(--ink); }
.fs-sec { text-align: center; font-size: 11px; letter-spacing: 0.25em; color: var(--jade-deep); font-weight: 800; margin: 12px 0 10px; }
body.night .fs-sec { color: var(--jade-light); }
.fs-grid-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fs-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--ink);
  cursor: pointer; text-align: left; transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.fs-item:active { transform: scale(0.97); }
.fs-item .fs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.fs-item .fs-eico { display: inline-flex; width: 20px; height: 20px; color: var(--c); flex-shrink: 0; }
.fs-item .fs-eico .uic { width: 100%; height: 100%; }
.fs-item .fs-label { flex: 1; }
.fs-item .fs-cnt { font-size: 11.5px; color: var(--ink-soft); background: rgba(47, 158, 133, 0.12); border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.fs-item.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--paper-solid)); }
.fs-item.active .fs-cnt { background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--ink); }
@media (max-width: 380px) { .fs-grid-inner { grid-template-columns: 1fr; } }

/* ============================================================
   フィードバック対応（2026-07-09）: トップバー再編・かけら導線・横ブレ対策・画像
   ============================================================ */

/* 横ブレ（iOSの横ゴムスクロール）対策 */
html, body { overscroll-behavior: none; }
#topbar { max-width: 100vw; }
.top-actions { flex-wrap: nowrap; min-width: 0; }

/* タイトルロゴ画像（あれば使う・なければ文字ロゴ） */
.logo-img { height: 44px; display: block; }
.logo:has(.logo-img) .logo-mark, .logo:has(.logo-img) .logo-text { display: none; }
@media (max-width: 760px) { .logo-img { height: 36px; } }

/* かけらバッジはタップで結晶図鑑へ */
.kakera-badge { cursor: pointer; transition: transform 0.15s; }
.kakera-badge:hover { transform: translateY(-2px); }
.kakera-badge:active { transform: scale(0.95); }

/* 案内所ピル */
.pill-btn.annai { font-weight: 800; }

/* 案内所の「せってい」トグル */
.menu-toggles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mt-btn {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-weight: 800; font-size: 13px; color: var(--ink);
  background: rgba(47, 158, 133, 0.05); text-align: left;
  transition: background 0.15s;
}
.mt-btn:hover { background: rgba(47, 158, 133, 0.12); }
.mt-btn .uic { width: 17px; height: 17px; color: var(--jade-deep); }
body.night .mt-btn .uic { color: var(--jade-light); }
.mt-btn.bgm-off { opacity: 0.6; }
.mt-btn.bgm-off::after { content: 'OFF'; margin-left: auto; font-size: 10px; letter-spacing: .1em; color: var(--ink-soft); }
.mt-btn:not(.bgm-off)#btn-bgm::after { content: 'ON'; margin-left: auto; font-size: 10px; letter-spacing: .1em; color: var(--jade-deep); font-weight: 900; }

/* 図鑑のかけら残高チップ */
.zt-kakera {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; font-weight: 800; color: var(--jade-deep);
  background: rgba(47, 158, 133, 0.08); border: 1px solid rgba(47, 158, 133, 0.3);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 14px;
}
body.night .zt-kakera { color: var(--jade-light); }
.zt-kakera b { font-family: var(--font-title); font-size: 15px; }
.zt-kakera small { flex-basis: 100%; font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.zt-kakera .uic { width: 14px; height: 14px; }

/* 気だまりの使い道ノート */
.offering-note { font-size: 10.5px; color: var(--ink-soft); margin-top: 12px; font-weight: 700; }

/* イントロカードの背景（あれば使う・404なら淡いグラデのみ） */
.intro-card {
  background:
    linear-gradient(rgba(255, 252, 244, 0.90), rgba(255, 252, 244, 0.96)),
    url(../img/bg/intro_bg.jpg) center/cover,
    var(--paper-solid);
}

/* 夜モードはロゴ画像（墨色文字）が沈むので、文字ロゴに戻す */
body.night .logo-img { display: none; }
body.night .logo:has(.logo-img) .logo-mark { display: inline; }
body.night .logo:has(.logo-img) .logo-text { display: inline; }

/* ============================================================
   実機フィードバック対応v2: 改行/ズーム/トップバー詰め
   ============================================================ */

/* ピルの変な改行を止める */
.pill-btn, .filter-btn, .kakera-badge, .region-btn { white-space: nowrap; }

/* iOSの入力フォーカス自動ズーム対策（16px未満だとズームされ、横パンできてしまう） */
#search-input, .kotoba input, #sv-input, #sv-spell { font-size: 16px; }

/* モーダル内もピンチ/横パンさせない（縦スクロールだけ） */
#daily-modal, #quiz-modal, .quiz-box, .fs-panel, #meditation { touch-action: pan-y; }

/* モバイルのトップバー: ロゴ＋気メーターを同じ行に・ピル行はなみなみ収める */
@media (max-width: 760px) {
  #topbar { row-gap: 6px; }
  .logo { order: 1; flex: 0 1 auto; padding: 6px 10px; }
  #ki-meter { order: 2; flex: 1 1 0; min-width: 0; }
  .top-actions { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 3px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .top-actions::-webkit-scrollbar { display: none; }
  #searchbox { order: 4; }
  .pill-btn { padding: 0 8px; }
  .pill-btn .uic { margin-right: -1px; }
  .kakera-badge { padding: 0 7px 0 5px; }
  #btn-account { width: 34px; height: 34px; flex-shrink: 0; }
}

/* 豪華ロゴv2: 大きめに堂々と（箱はロゴに寄り添う） */
.logo { padding: 4px 10px; }
.logo-img { height: 56px; }
@media (max-width: 760px) { .logo-img { height: 48px; } .logo { padding: 3px 8px; } }

/* ロゴv3(すっきりロックアップ): 4:1なので高さは締めて幅で見せる */
.logo-img { height: 44px; }
@media (max-width: 760px) { .logo-img { height: 38px; } }

/* ロゴ焼き込み版（v=4・不透明）: ロゴ画像＝ロゴ箱。透過も:hasの夜切替も不要で、どの端末でも同じ見た目 */
.logo { padding: 0; overflow: hidden; }
.logo:not(:has(.logo-img)) { padding: 9px 16px; }  /* 画像が消えた時の文字ロゴ用 */
.logo-img { height: 62px; border-radius: 16px; display: block; }
body.night .logo-img { display: block; }  /* 夜モードも同じロゴ（銘板のように見せる） */
@media (max-width: 760px) { .logo-img { height: 50px; } }

/* ============================================================
   旅の記録をあずける（クラウド保存・任意ログイン）— save-panel内
   ============================================================ */
#sv-cloud input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 11px 13px; border-radius: 11px; font-size: 14px;
  border: 1px solid rgba(47,158,133,0.4); background: #fff; color: var(--ink);
  font-family: inherit;
}
#sv-cloud input:focus { outline: 2px solid rgba(47,158,133,0.45); }
.sv-cloud-row { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.sv-cloud-who { font-size: 13.5px; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.sv-cloud-forgot {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-size: 12px; color: var(--jade-deep, #1e6b59); text-decoration: underline;
  font-family: inherit;
}
.svc-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 0; margin-bottom: 4px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid rgba(30,40,38,0.22); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(30,40,38,0.08);
}
.svc-google:active { transform: translateY(1px); }
/* topbar右端のアカウントボタン（人型・ログイン済みは翡翠のしるし） */
.account-btn { position: relative; }
.account-btn svg.acc-svg { width: 20px; height: 20px; }
.account-btn svg.acc-svg circle, .account-btn svg.acc-svg path {
  stroke: var(--jade-deep, #1e6b59); fill: none; stroke-width: 1.7; stroke-linecap: round;
}
.account-btn .acc-dot {
  position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--jade, #2f9e85); border: 1.5px solid #fff; display: none;
}
.account-btn.logged .acc-dot { display: block; }
@media (max-width: 640px) {
  #btn-account { width: 36px; height: 36px; }
}

/* ============================================================
   精霊とまなぶ あそびかた（紙芝居チュートリアル・案内所の1機能）
   ============================================================ */
.asobi-mi img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid rgba(47,158,133,0.5); }
#asobikata-panel {
  position: fixed; inset: 74px 18px 24px auto; z-index: 47;
  width: 420px; max-width: calc(100vw - 36px);
  background: var(--paper-solid, #fffdf7); border-radius: var(--radius, 22px);
  box-shadow: var(--shadow, 0 10px 40px rgba(20,40,35,.18)); border: 1px solid var(--line, rgba(30,60,50,.12));
  display: flex; flex-direction: column; overflow: hidden;
}
#asobikata-panel.hidden { display: none; }
#asobikata-body { overflow-y: auto; padding: 12px 20px 18px; display: flex; flex-direction: column; }
.ak-stage { text-align: center; padding-top: 6px; }
.ak-seirei-wrap { position: relative; display: inline-block; }
.ak-seirei {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid rgba(47,158,133,0.55);
  box-shadow: 0 0 18px rgba(47,158,133,0.35);
}
.ak-who {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: var(--jade, #2f9e85); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 2px 10px; border-radius: 999px; letter-spacing: .08em; white-space: nowrap;
}
.ak-bubble {
  position: relative; margin-top: 16px; text-align: left;
  background: #fff; border: 1px solid rgba(47,158,133,0.3); border-radius: 14px;
  padding: 13px 16px; box-shadow: 0 3px 12px rgba(20,40,35,0.08);
  min-height: 128px;
}
.ak-bubble::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid rgba(47,158,133,0.3); border-top: 1px solid rgba(47,158,133,0.3);
}
.ak-title { font-weight: 800; font-size: 15.5px; color: var(--jade-deep, #1e6b59); letter-spacing: 0.04em; margin-bottom: 7px; }
.ak-text { font-size: 13px; line-height: 1.9; color: var(--ink, #22332e); }
.ak-shot {
  margin-top: 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(47,158,133,0.3); box-shadow: 0 4px 14px rgba(20,40,35,0.1);
}
.ak-shot img { width: 100%; height: auto; display: block; }
.ak-dots { display: flex; justify-content: center; gap: 7px; padding: 13px 0 3px; }
.ak-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(47,158,133,0.25); transition: background .25s, transform .25s; }
.ak-dots i.on { background: var(--jade, #2f9e85); transform: scale(1.25); }
.ak-nav { display: flex; gap: 10px; padding-top: 10px; }
.ak-btn {
  flex: 1; padding: 11px 0; border-radius: 12px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  border: 1px solid rgba(47,158,133,0.4); background: #fff; color: var(--jade-deep, #1e6b59);
}
.ak-btn.next {
  background: linear-gradient(135deg, #58bfa5, var(--jade, #2f9e85)); color: #fff; border: none;
  box-shadow: 0 3px 10px rgba(20,80,65,0.28);
}
.ak-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 640px) {
  #asobikata-panel { inset: auto 10px 24px 10px; width: auto; max-height: 84vh; }
  .ak-seirei { width: 100px; height: 100px; }
}

/* ---------- 診断結果の開運だより導線（2026-08-27） ---------- */
.quiz-tayori {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed rgba(160, 135, 80, .35);
  text-align: center;
}
.quiz-tayori .qt-lead {
  font-family: var(--font-title); font-size: 13px; letter-spacing: .12em;
  color: var(--ink); margin-bottom: 10px;
}
.quiz-tayori .tayori-btn { margin: 0 8px 8px; display: block; }
.quiz-tayori .qt-note {
  font-size: 10.5px; line-height: 1.8; color: var(--ink-soft); opacity: .85;
}