/* =========================================================================
   mascot.css — マスコット劇場型の追加スタイル
   -------------------------------------------------------------------------
   ①停留所の文字に地板を敷く（3Dの上で読ませる。明るい地では必須）
   ②右下に固定の予約ボタン（ピザ型）。platform を替えたら色も差し替える
   ========================================================================= */

/* ---------- ①停留所の文字（地板は敷かない） ----------
   カードは置かず、地に直接。読み味は地色の淡い光彩で守る */
.bs-station__title { grid-column: 1 / span 9; }
.bs-station__text  { max-width: 36ch; }
.bs-station__no,
.bs-station__title,
.bs-station__text {
  text-shadow: 0 1px 14px color-mix(in srgb, var(--bg) 96%, transparent),
               0 0 34px color-mix(in srgb, var(--bg) 88%, transparent);
}

/* ---------- ③幕（スプラッシュ）で踊るマスコット ----------
   使い方：ローダーを data-splash="true" にし、__inner に
     <div class="bs-loader__pet" style="background-image:url('assets/img/pet.webp')"></div>
   を置く（紋の代わり）。数字が100まで回ると自ずと開く（bs-core の initSplash）。
   コマ送りは 8列×9行シートの5行目（しゃがみ→ジャンプ）を回す既定。 */
.bs-loader__pet {
  width: clamp(150px, 17vw, 210px);
  aspect-ratio: 192 / 208;
  background-size: 800% 900%;      /* シートの格子（8列×9行）と対 */
  background-repeat: no-repeat;
  animation: bs-pet-dance 0.85s step-end infinite;
  filter: drop-shadow(0 14px 22px rgba(90, 50, 14, .22));
}
@keyframes bs-pet-dance {
  0%   { background-position: 0% 50%; }
  20%  { background-position: 14.2857% 50%; }
  40%  { background-position: 28.5714% 50%; }
  60%  { background-position: 42.8571% 50%; }
  80%  { background-position: 57.1429% 50%; }
}

/* 幕の色は brand.css の夜色を捨てて、配色トークンに追従させる
   （ピッツェリアなら朝のクリーム、暗い配色ならそのまま夜になる） */
.has-js .bs-loader[data-splash="true"] {
  background:
    radial-gradient(72% 58% at 50% 42%,
      color-mix(in srgb, var(--bg) 84%, #ffffff), var(--bg-2) 82%),
    var(--bg);
  color: var(--ink);
}
.bs-loader[data-splash="true"] .bs-loader__mark { color: var(--ink-dim); }
.bs-loader[data-splash="true"] .bs-odo { color: var(--ink); opacity: .85; }
.bs-loader[data-splash="true"] .bs-loader__bar { background: var(--ink-faint); }
.bs-loader[data-splash="true"] .bs-loader__bar-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 30%, transparent), var(--ink));
}

@media (prefers-reduced-motion: reduce) {
  .bs-loader__pet { animation: none; background-position: 0% 0%; }
}

/* ---------- ②右下固定・ピザ型の予約ボタン ---------- */
.bs-pizza-btn {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3.5vh, 40px);
  z-index: 9999;   /* 常に最前面。幕のあいだだけ伏せる */
  width: clamp(86px, 9vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  text-decoration: none;
  /* 実写マルゲリータ（円形切り抜き透過webp）を敷く */
  background: url('../img/pizza-footer.webp') center / 100% 100% no-repeat;
  box-shadow: 0 10px 28px rgba(60, 30, 8, .38);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* 文字の後ろだけ柔らかく暗くする（モッツァレラの白に白文字が沈むのを防ぐ。
   ピザ全体は隠さない） */
.bs-pizza-btn::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(22, 9, 4, .58) 0 30%, rgba(22, 9, 4, .30) 46%, transparent 62%);
}
.bs-pizza-btn span {
  position: relative; z-index: 1;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(0.86rem, 1.1vw, 1.02rem);
  letter-spacing: 0.16em;
  color: #FFF6E6;
  text-shadow: 0 1px 3px rgba(20, 8, 4, .95), 0 0 14px rgba(20, 8, 4, .7),
               0 0 2px rgba(20, 8, 4, .95);
}
.bs-pizza-btn:hover { transform: rotate(12deg) scale(1.06);
  box-shadow: 0 14px 34px rgba(60, 30, 8, .42),
              inset 0 -4px 10px rgba(120, 62, 18, .35); }
.bs-pizza-btn:active { transform: rotate(12deg) scale(0.98); }
.is-locked .bs-pizza-btn { opacity: 0; pointer-events: none; }
.bs-pizza-btn { transition: transform .5s var(--ease), box-shadow .5s var(--ease),
                            opacity .5s ease; }

/* ---------- ⑦フッター＝フィナーレ ----------
   フッターの地を透かして、3D（小人とピザ）を隠さない。
   文字ブロックには薄い地板を敷いて読ませる */
.has-3d .bs-footer { background: transparent; }
.has-3d .bs-footer__block {
  /* 半透明にすると裏のコンテナ地（--line のグレー）が透けて
     カードがグレーに見える（実際に踏んだ）。不透明の白で塗る */
  background: #FFFFFF;
  border-radius: 12px;
}

@media (max-width: 720px) {
  .bs-pizza-btn { width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-pizza-btn { transition: none; }
  .bs-pizza-btn:hover { transform: none; }
}

/* ---------- ④ファーストビューを夜にする場合（mascot.fvDark） ----------
   シーンが data-tone を dark に切り替えるあいだ、地の上に直接載る文字を
   明色へ追従させる。停留所の文字は地板があるのでそのままでよい */
:root[data-tone="dark"] .bs-header__logo--text,
:root[data-tone="dark"] .bs-header__logo,
:root[data-tone="dark"] .bs-header__link {
  color: #F2EFE9; text-shadow: 0 1px 12px rgba(10, 5, 2, .7);
}
:root[data-tone="dark"] .bs-header .bs-btn {
  color: #F2EFE9; border-color: rgba(242, 239, 233, .45);
}
:root[data-tone="dark"] .bs-hint .bs-meta { color: rgba(242, 239, 233, .7); }
:root[data-tone="dark"] .bs-hint__line { background: rgba(242, 239, 233, .5); }

/* 夜のあいだの停留所は地板を敷かない。白い文字＋濃い落ち影で直接置く
   （朝に明けたら通常の地板に戻る） */
:root[data-tone="dark"] .bs-station__no,
:root[data-tone="dark"] .bs-station__title,
:root[data-tone="dark"] .bs-station__text {
  background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0;
}
:root[data-tone="dark"] .bs-station__no {
  color: rgba(246, 241, 232, .8);
  text-shadow: 0 1px 12px rgba(10, 5, 2, .9);
}
:root[data-tone="dark"] .bs-station__title {
  color: #F6F1E8;
  text-shadow: 0 2px 22px rgba(10, 5, 2, .92), 0 0 52px rgba(10, 5, 2, .65);
}
:root[data-tone="dark"] .bs-station__text {
  color: rgba(246, 241, 232, .9);
  text-shadow: 0 1px 14px rgba(10, 5, 2, .92), 0 0 30px rgba(10, 5, 2, .6);
}

/* ---------- ⑤メニュー（品書き） ---------- */
.bs-menu__list { list-style: none; margin: 0; padding: 0; }
.bs-menu__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem clamp(16px, 2vw, 36px);
  align-items: baseline;
  padding: clamp(18px, 2.6vh, 28px) 0;
  border-bottom: 1px solid var(--ink-faint);
}
.bs-menu__item:last-child { border-bottom: 0; }
.bs-menu__name {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.12rem, 1.65vw, 1.45rem); letter-spacing: .04em;
}
.bs-menu__name small {
  font-family: var(--font-ui); font-weight: 400;
  font-size: .58em; letter-spacing: .16em; color: var(--ink-faint);
  margin-left: 1em;
}
.bs-menu__price {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(.98rem, 1.35vw, 1.2rem); color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.bs-menu__note {
  grid-column: 1 / -1; margin: 0;
  color: var(--ink-dim); font-size: clamp(.86rem, 1vw, .96rem); line-height: 1.8;
}
.bs-menu__foot {
  margin: clamp(20px, 3vh, 32px) 0 0;
  color: var(--ink-dim); font-size: clamp(.86rem, 1vw, .96rem);
}
/* 品書きの第二部（ワインなど）。二重罫で章を分ける */
.bs-menu__list--wine {
  margin-top: clamp(28px, 4vh, 46px);
  border-top: 3px double color-mix(in srgb, var(--ink) 24%, transparent);
}
/* 品書きに写真を添える場合（丸く抜く＝ピザの形をそのまま使う） */
.bs-menu__item--photo {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.bs-menu__photo {
  grid-row: 1 / span 2; align-self: center;
  /* 高さは必ず明示する。auto のままだとグリッドの伸縮に引きずられて
     縦長の楕円になる（実際に踏んだ） */
  width: clamp(78px, 9vw, 120px); height: clamp(78px, 9vw, 120px);
  object-fit: contain;
  /* 背景透過の切り抜きなので、影は輪郭（アルファ）に沿わせる */
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--ink) 30%, transparent));
}
@media (max-width: 720px) {
  .bs-menu__photo { width: 64px; height: 64px; grid-row: auto; }
  .bs-menu__item--photo { grid-template-columns: auto minmax(0, 1fr); }
  .bs-menu__item--photo .bs-menu__price { grid-column: 2; justify-self: end; }
}

/* ---------- ⑥アクセス ---------- */
.bs-access__list { margin: 0; }
.bs-access__row {
  display: grid; grid-template-columns: clamp(88px, 10vw, 128px) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 28px);
  padding: clamp(14px, 2vh, 20px) 0;
  border-bottom: 1px solid var(--ink-faint);
}
.bs-access__row:last-child { border-bottom: 0; }
.bs-access__row dt {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(.8rem, .95vw, .9rem); letter-spacing: .18em;
  color: var(--ink-dim); padding-top: .2em;
}
.bs-access__row dd { margin: 0; line-height: 1.9; }
.bs-access__note { color: var(--ink-faint); font-size: clamp(.78rem, .9vw, .86rem); }
.bs-access__map {
  margin: clamp(24px, 3.5vh, 40px) 0 0;
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, #ffffff);
}

/* ---------- セクション背景の筆記体（イタリア語） ----------
   「01／はじめに」等の通し番号ラベルの代わり。白地に薄いグレーの
   大きな筆記体を敷く。読ませる文字ではなく空気なので、黒の7%まで */
.bs-section { position: relative; overflow: hidden; }
.bs-bgword {
  position: absolute; z-index: -1;
  top: clamp(4px, 1.2vw, 18px);
  left: clamp(10px, 3.5vw, 56px);
  font-family: 'Italianno', cursive;
  font-weight: 400; line-height: 0.85; white-space: nowrap;
  font-size: clamp(100px, 15vw, 250px);
  color: rgba(20, 18, 15, 0.07);
  pointer-events: none; user-select: none;
}
.bs-section > .bs-container { position: relative; z-index: 1; }