/* グルメレベル（XP・ミッション・獲得履歴）
 *
 * 全画面から出る獲得ポップアップがあるので、このファイルは layouts/application.html.erb で
 * 常時読み込んでいる。そのため :root に変数を置かず、必ずブロックへスコープする
 * （user_list_modal.css と同じ方針。profiles.css などページ別の :root を汚さない）。
 *
 * 基準サイズは 383 x 622px。文字を縮めて詰め込まず、本文スクロールで収める。
 */

.xp-card,
.xp-dialog,
.xp-toast {
  --xp-text: #111;
  --xp-muted: #8d8d95;
  --xp-line: #f0f0f2;
  --xp-card-border: #f2f2f4;
  --xp-accent: #f56b6b;
  --xp-accent-weak: #ffe4e4;
  /* 獲得を表す緑。獲得ポップアップの ＋XP の文字色と縁の色が同じものを指す */
  --xp-gain: #39b54a;
  --xp-radius: 16px;
  --xp-shadow: 0 18px 50px rgba(0, 0, 0, .08);

  /* XPバー（参考イメージのグリーン系） */
  --xp-bar-track: #eceff1;
  --xp-bar-from: #7ad97a;
  --xp-bar-to: #39b54a;
}

/* ── 共通: レベル・称号・XPバー ───────────────────────────── */

.xp-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.xp-summary__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.xp-summary__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--xp-muted);
}

.xp-summary__title {
  font-size: 12px;
  font-weight: 800;
  color: var(--xp-accent);
  background: var(--xp-accent-weak);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.xp-summary__level {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--xp-text);
}

.xp-summary__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.xp-summary__xp {
  font-size: 13px;
  font-weight: 800;
  color: var(--xp-text);
}

.xp-summary__next {
  font-size: 12px;
  color: var(--xp-muted);
}

/* メインのXPバー。画像は使わず、グラデーション＋上部ハイライト＋内側の影で
   ウルウルした光沢のあるピル形状をつくる。 */
.xp-bar {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--xp-bar-track);
  /* 溝が凹んで見えるように、内側の影を上から強めに入れる */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}

.xp-bar__fill {
  position: relative;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  /* 中央をいちばん明るくして、上下に落とす＝筒状のふくらみ */
  background:
    linear-gradient(180deg,
      var(--xp-bar-from) 0%,
      #5ccf63 45%,
      var(--xp-bar-to) 78%,
      #2f9d3f 100%);
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .5);
  /* 伸びるときに軽く行き過ぎてから戻る＝弾む動き。常時アニメーションはしない。 */
  transition: width 900ms cubic-bezier(.22, 1.3, .36, 1);
}

/* 上半分の白いハイライト。これがウルウル・プルプルした光沢の主役。 */
.xp-bar__fill::before {
  content: "";
  position: absolute;
  inset: 1.5px 2px auto 2px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .1) 100%);
  pointer-events: none;
}

/* 先端のまるい反射。液体がたまっているように見せる。 */
.xp-bar__fill::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 3px;
  width: 6px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  filter: blur(.5px);
  pointer-events: none;
}

/* ── プロフィールのレベルカード ───────────────────────────── */

/* .card（profiles.css）の上に重ねる。ボタン要素なので初期値を打ち消す。
   他人のプロフィールでは <div> で描画するので box-sizing を明示する。
   （元の理由: <button> は UA 既定が border-box だが <div> は content-box なので、
   width:100% + padding 14 + border 1 で親より 30px はみ出して横スクロールが出ていた。
   現在は application.css の全体リセットで全要素が border-box なので下の宣言は
   冗長だが、意図の記録として残している。） */
.xp-card {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  /* 浮き出るグラスカード（Home/検索結果と同じレシピ）。プロフィール画面でも
     .page の背景は html の淡いウォッシュを透かしているため、同じ配色で持ち上がって見える。 */
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background:
    radial-gradient(130% 150% at 8% -15%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.25) 32%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(85% 85% at 92% 102%, rgba(255, 198, 221, 0.3) 0%, rgba(255, 198, 221, 0) 72%),
    radial-gradient(85% 85% at 4% 96%, rgba(205, 190, 255, 0.24) 0%, rgba(205, 190, 255, 0) 72%),
    rgba(255, 253, 250, 0.62);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 1px 0 2px rgba(255, 255, 255, 0.55),
    inset 0 -1px 3px rgba(130, 110, 150, 0.06),
    0 4px 10px rgba(195, 165, 205, 0.18),
    0 16px 36px rgba(165, 180, 220, 0.24);
  padding: 14px;
  margin-top: 12px;
}

.xp-card--tappable {
  cursor: pointer;
  padding-right: 34px;
}

.xp-card__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--xp-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 詳細モーダル ─────────────────────────────────────────── */

.xp-dialog {
  /* 高さは .xp-dialog__inner にも同じ値を持たせる。
     <dialog> 自体を display:flex にすると UA の `dialog:not([open]){display:none}` を
     打ち消して閉じているダイアログが見えてしまうので、flex コンテナは内側に置く。 */
  --xp-dialog-max-h: min(86svh, 560px);

  width: min(92vw, 360px);
  max-height: var(--xp-dialog-max-h);
  padding: 0;
  border: none;
  border-radius: var(--xp-radius);
  background: #fff;
  box-shadow: var(--xp-shadow);
  color: var(--xp-text);
  overflow: hidden;
}

.xp-dialog::backdrop {
  background: rgba(0, 0, 0, .35);
}

/* タイトルとタブを固定し、本文だけをスクロールさせる。
   max-height を inherit に頼らず明示するのは、ここが「高さが確定した flex コンテナ」で
   ないと、下の .xp-detail__body が overflow-y を効かせられないため。 */
.xp-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: var(--xp-dialog-max-h);
  min-height: 0;
}

.xp-dialog__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--xp-line);
}

.xp-dialog__title {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
}

.xp-dialog__close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  color: var(--xp-muted);
  cursor: pointer;
}

.xp-dialog__loading {
  padding: 24px 14px;
  text-align: center;
  color: var(--xp-muted);
  font-size: 14px;
}

/* turbo-frame は既定が inline なので、縦の flex レイアウトに参加させる。
   ここと .xp-detail を flex コンテナで繋ぐことで、高さが本文まで伝わる
   （height:100% だと turbo-frame の高さが auto のため解決できない）。 */
.xp-detail-frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.xp-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.xp-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--xp-line);
}

.xp-tab {
  flex: 1 1 0;
  border: none;
  background: #f1f1f4;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--xp-muted);
  cursor: pointer;
}

.xp-tab.is-active {
  background: var(--xp-accent-weak);
  color: var(--xp-accent);
}

/* 狭い画面ではレベルカードごと一緒にスクロールさせ、一覧の表示領域を確保する */
.xp-detail__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

.xp-detail__lead {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--xp-muted);
}

.xp-section-title {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 900;
  color: var(--xp-muted);
}

/* ── ミッション ───────────────────────────────────────────── */

.xp-mission-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xp-mission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  /* .xp-dialog の中（白いモーダルシート）はHome/プロフィールのような彩りのある
     ウォッシュ背景を持たないため、backdrop-filterや淡いピンク/薄紫のにじみは
     効果が出ず無駄になる。ここは「ふわっと浮く」の縮小版として、やわらかい
     ハイライト＋ごく小さい影だけを付ける軽量版にする。 */
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, #ffffff, #fff6f8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(190, 160, 200, 0.14);
}

.xp-mission.is-achieved {
  background: linear-gradient(135deg, #fafafa, #f6f3f4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 1px 4px rgba(0, 0, 0, 0.05);
}

.xp-mission__icon {
  font-size: 18px;
  line-height: 1.3;
}

.xp-mission__body {
  min-width: 0;
}

.xp-mission__name {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.xp-mission__period {
  font-size: 11px;
  font-weight: 700;
  color: var(--xp-muted);
}

.xp-mission__desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--xp-muted);
}

.xp-mission__progress {
  margin: 6px 0 4px;
  font-size: 12px;
  font-weight: 800;
}

.xp-mission__done {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #39b54a;
}

/* ミッションのバーはメインより細く、光沢も付けない */
.xp-mission__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--xp-bar-track);
  overflow: hidden;
}

.xp-mission__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--xp-bar-from) 0%, var(--xp-bar-to) 100%);
  transition: width 600ms cubic-bezier(.22, 1.3, .36, 1);
}

.xp-mission__reward {
  font-size: 12px;
  font-weight: 900;
  color: var(--xp-accent);
  white-space: nowrap;
}

/* ── 獲得履歴 ─────────────────────────────────────────────── */

.xp-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.xp-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--xp-line);
}

.xp-history__main {
  min-width: 0;
}

.xp-history__reason {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.xp-history__source {
  display: block;
  font-size: 12px;
  color: var(--xp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-history__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
  color: var(--xp-muted);
  white-space: nowrap;
}

.xp-history__delta {
  font-size: 13px;
  font-weight: 900;
}

.xp-history__item.is-plus .xp-history__delta {
  color: #39b54a;
}

.xp-history__item.is-minus .xp-history__delta {
  color: var(--xp-muted);
}

.xp-history__empty {
  margin: 24px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--xp-muted);
}

.xp-history__more {
  display: block;
  text-align: center;
  padding: 12px 0 4px;
}

.xp-history__more-btn {
  display: inline-block;
  border-radius: 999px;
  border: 1.5px solid var(--xp-card-border);
  padding: 7px 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--xp-text);
  text-decoration: none;
}

/* ── 獲得ポップアップ ─────────────────────────────────────── */

.xp-toast {
  position: fixed;
  /* 画面の中央。下端に置いていたときは「さらに評価」で同時に出る
     スコア変化トースト（.bm-toast.score-toast = 下端+10px・高さ55px）と
     41px 重なり、黒帯の文字が白カードの裏に隠れていた。
     中央へ動かしたので --bottom-nav-h は参照しない（下端からの距離を持たない）。 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: min(92vw, 340px);
  padding: 12px 34px 12px 14px;
  border-radius: var(--xp-radius);
  background: #fff;
  /* 縁は獲得の緑。白いカードが背景のウォッシュに溶けないよう、
     外側に同色の薄いリングを重ねて輪郭を出す（1本目が色リング、2本目が影） */
  border: 2px solid var(--xp-gain);
  box-shadow:
    0 0 0 4px rgba(57, 181, 74, .12),
    var(--xp-shadow);
  color: var(--xp-text);
}

.xp-toast.is-hidden {
  display: none;
}

.xp-toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--xp-muted);
  cursor: pointer;
}

.xp-toast__levelup {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 900;
  color: var(--xp-accent);
}

.xp-toast__levelup.is-hidden {
  display: none;
}

.xp-toast__gain {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--xp-gain);
}

.xp-toast__breakdown {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--xp-muted);
}

/* ── 動きを減らす設定への対応 ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .xp-bar__fill,
  .xp-mission__bar-fill {
    transition: none;
  }
}

/* ── 狭い端末（基準の383px幅より小さい場合） ──────────────── */
/* メディアクエリは上書き対象より後ろに置く（カスケードの規約） */

@media (max-width: 360px) {
  .xp-summary__level {
    font-size: 23px;
  }

  .xp-mission {
    grid-template-columns: auto 1fr;
    gap: 8px;
  }

  /* 報酬は3カラム目から本文の下へ回す（文字は小さくしない） */
  .xp-mission__reward {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* =========================================
   Tasty共通Glass UI（うるうる＋ぷっくり＋ぷるぷる）— XP詳細モーダル分
   XP詳細（タブ・履歴）はProfile画面の中にしか登場しないため body.profiles.show の
   接頭で閉じ込める（turbo-frameで中身だけ差し替わっても<body>は同じなので効く）。

   profiles.css の Glass と違って `body.users.show`（= `/users/:id`）を並べていないのは、
   `profiles/xp_modal` が `if @is_own_profile` でしか描画されない
   （profiles/show.html.erb:154）ため、他人のプロフィールにはここの対象要素が
   そもそも存在しないから。他人のプロフィールでもモーダルを出すようにしたら、
   profiles.css と同じ `:is(body.profiles.show, body.users.show)` に変えること。

   レシピは home.css で最初に作った値をそのまま再利用する（新規考案しない）。
   .xp-card--tappable（グルメレベルカード本体）はHomeのカード本体と同じ
   「コンテンツ」扱いのため対象外。 */

/* 閉じる×（.xp-dialog__close）は板を敷かない。素の見た目が background: transparent・
   角丸なしなので、白いダイアログの上では×を囲う四角い枠になる
   （→ application.css の【Glass 化の対象にしない要素】）。タップ演出だけ残す。 */
body.profiles.show .xp-history__more-btn,
body.profiles.show .xp-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.profiles.show .xp-history__more-btn::before,
body.profiles.show .xp-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(130% 120% at 20% -25%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}

body.profiles.show .xp-history__more-btn {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.03),
    0 1px 4px rgba(0, 0, 0, 0.05);
}

/* タブは既存が薄グレー背景(#f1f1f4)なので、少し濃いめのLiquid Glassにする */
body.profiles.show .xp-tab {
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

body.profiles.show .xp-dialog__close:active,
body.profiles.show .xp-history__more-btn:active,
body.profiles.show .xp-tab:active {
  animation: tastyGlassPulse 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.profiles.show .xp-dialog__close:active,
  body.profiles.show .xp-history__more-btn:active,
  body.profiles.show .xp-tab:active {
    animation: none;
  }
}