/* 共用元件 */

/* 按鈕 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.7rem 1.4rem;
  font-size:var(--fs-btn); font-weight:700;
  color:#fff; background:var(--c-transport);
  border:none; border-radius:var(--radius-pill);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--scenery{ background:var(--c-scenery); }
.btn--ghost{ background:#fff; color:var(--c-ink); border:2px solid var(--c-line); box-shadow:none; }
.btn--lg{ font-size:1.35rem; padding:.9rem 1.8rem; }
.btn--block{ width:100%; }

/* 卡片 */
.card{
  background:var(--c-surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--space-lg);
  border:1px solid var(--c-line);
}

/* 星星評級 */
.stars{ font-size:1.5rem; letter-spacing:2px; }
.stars .on{ color:var(--c-star); }
.stars .off{ color:#E5E1D6; }

/* 進度條 */
.progress{ height:14px; background:#EDE6D7; border-radius:var(--radius-pill); overflow:hidden; }
.progress > i{ display:block; height:100%; background:linear-gradient(90deg,var(--c-transport),#60A5FA); border-radius:inherit; transition:width .5s ease; }

/* 徽章 */
.badge{
  display:inline-flex; flex-direction:column; align-items:center; gap:.25rem;
  width:96px; padding:.6rem; border-radius:var(--radius-sm);
  background:#fff; border:2px solid var(--c-line); text-align:center;
}
.badge .ico{ font-size:2rem; line-height:1; }
.badge .nm{ font-size:.85rem; font-weight:700; }
.badge.locked{ filter:grayscale(1); opacity:.45; }

/* chip / 標籤 */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .8rem; border-radius:var(--radius-pill);
  font-size:var(--fs-small); font-weight:700;
}
.chip--transport{ background:var(--c-transport-soft); color:#1D4ED8; }
.chip--scenery{ background:var(--c-scenery-soft); color:#B45309; }

/* toast 回饋 */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--c-ink); color:#fff; padding:.8rem 1.4rem;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-lg);
  font-weight:700; z-index:50; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.toast.ok{ background:var(--c-success); }
.toast.no{ background:var(--c-error); }

/* 過關星星彈跳 */
@keyframes pop{ 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.25);} 100%{transform:scale(1);opacity:1;} }
.pop{ animation:pop .4s ease both; }