/* ============================================================
   components.css — ボタン / カード / HUD ピル / タグ / ヒント / 装飾
============================================================ */

/* ---------- ボタン（Figma: button > inner + highlight） ---------- */
.btn{
  position:relative; display:block;
  width:100%; padding:6px;
  background:#fff; border-radius:100px;
  box-shadow:var(--shadow-btn);
  transition:transform .06s ease-out, box-shadow .06s ease-out;
  -webkit-user-select:none; user-select:none;
}
.btn .btn-inner{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:90px; padding:8px 20px 0;
  border-radius:100px; box-shadow:var(--shadow-inner);
  font-family:var(--font-display); font-size:32px; letter-spacing:.09em;
  color:#fff; line-height:.9; text-transform:uppercase;
}
.btn .btn-inner::before{
  content:""; position:absolute; left:20px; top:16px; width:22px; height:10px;
  background:url("../assets/img/ui/highlight.svg") 0 0 / 100% 100% no-repeat;
}
/* 押下: 白い枠は動かさず、色付きの面だけが沈む
   （下側の濃い縁が薄くなり、上側の明るい縁が消え、中身が下にずれる） */
.btn .btn-inner > *, .btn .btn-inner::before{ transition:transform .06s ease-out; }
.btn:active .btn-inner, .btn.is-pressed .btn-inner{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.18);
  filter:brightness(.96);
}
.btn:active .btn-inner > *, .btn.is-pressed .btn-inner > *,
.btn:active .btn-inner::before, .btn.is-pressed .btn-inner::before{ transform:translateY(6px); }

.btn-pink  .btn-inner{ background:var(--pink); }
.btn-dark  .btn-inner{ background:var(--dark); }
.btn-red   .btn-inner{ background:var(--red); }
.btn-green .btn-inner{ background:var(--green); }
.btn-organik .btn-inner{ background:var(--organik); }
.btn-anorganik .btn-inner{ background:var(--anorganik); }
.btn-residu  .btn-inner{ background:var(--residu); }
.btn-b3      .btn-inner{ background:var(--b3); }

.btn-play .btn-inner{ font-size:40px; }

/* 現在選択中の言語（151:3990）: グレー */
.btn.is-current .btn-inner{ background:#ABA3A8; }

/* 角丸四角のボタン（○× / ゴミ箱） */
.btn-square{ border-radius:28px; box-shadow:var(--shadow-btn-flat); }
.btn-square .btn-inner{ border-radius:24px; padding:8px 0 10px; }
.btn-square .btn-inner::before{ left:10px; top:8px; }

/* 縦積み */
.btn-stack{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:280px; }

/* ---------- カード ---------- */
.card-wrap{
  flex:1; width:100%; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  padding:calc(20px + var(--safe-top)) 30px calc(20px + var(--safe-bottom));
}
.card{
  position:relative; width:100%; max-width:360px;
  background:#fff; border:4px solid var(--pink); border-radius:36px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center;
}

/* ---------- QUIZ タグ ---------- */
.quiz-tag{
  display:inline-flex; align-items:baseline; gap:4px;
  background:var(--pink); color:#fff; border-radius:50px;
  padding:3px 20px 4px; font-weight:900; font-size:16px; line-height:1.2;
  text-transform:uppercase; white-space:nowrap;
}
.quiz-tag b{ font-size:26px; font-weight:900; }

/* ---------- HUD ピル ---------- */
.pill{
  display:flex; align-items:center; gap:10px;
  height:60px; padding:0 20px 0 17px;
  background:#fff; border-radius:20px; box-shadow:var(--shadow-card);
  font-family:var(--font-display); color:var(--brown-num);
}
.pill-ic{ width:32px; height:32px; flex:none; }
.pill-num{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  padding-top:10px; font-size:36px; letter-spacing:.02em; line-height:.9; min-width:44px;
  font-family:var(--font-num);
}
.pill-num small{ font-size:24px; font-family:var(--font-display); }
.pill-time.low .pill-num{ color:var(--red); }

.btn-pause{
  width:52px; height:52px; flex:none; padding:4px;
  background:#fff; border-radius:50%; box-shadow:var(--shadow-card);
  transition:transform .06s;
}
.btn-pause img{ width:44px; height:44px; }
.btn-pause img{ transition:transform .06s ease-out; }
.btn-pause:active img{ transform:translateY(2px) scale(.94); filter:brightness(.94); }

/* ---------- ヒント枠 ---------- */
.hint{
  width:100%; background:var(--hint); border-radius:16px; padding:20px;
  text-align:center; font-weight:900; font-size:18px; line-height:1.3;
  color:var(--brown); text-transform:uppercase;
}
.hint .cat{ font-size:18px; margin-top:4px; }
.hint .nw{ white-space:nowrap; }   /* 分類チップと続きの語（!, waste!, で分別するよ！）は改行しない */

/* ---------- SKIP ---------- */
.btn-skip{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:4px 8px;
}
.skip-label{
  font-family:var(--font-display); font-size:30px; letter-spacing:.06em;
  color:var(--purple); padding-top:12px; line-height:1;
}
.skip-ic{
  display:block; padding:4px; background:#fff; border-radius:50px; box-shadow:var(--shadow-card);
}
.skip-ic i{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--purple);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18);
}
.skip-ic img{ width:20px; height:20px; }
.btn-skip:active .skip-ic i{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18); filter:brightness(.94); }
.btn-skip:active .skip-ic img{ transform:translateY(2px); }

/* ---------- 言語ボタン（151:4406 / 151:4419） ---------- */
.btn-lang{
  position:absolute; z-index:3;
  top:calc(25px + var(--safe-top)); right:25px;
  padding:4px; background:#fff; border-radius:50px; box-shadow:var(--shadow-card);
}
.btn-lang-inner{
  display:flex; align-items:center; gap:4px;
  height:44px; padding:0 14px 0 10px;
  background:var(--dark); border-radius:40px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18);
  font-weight:900; font-size:16px; line-height:1.1; color:#fff;
  text-transform:uppercase; white-space:nowrap;
}
.btn-lang-inner img{ width:26px; height:26px; flex:none; }
.btn-lang-inner, .btn-lang-inner > *{ transition:transform .06s ease-out; }
.btn-lang:active .btn-lang-inner{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18); filter:brightness(.94);
}
.btn-lang:active .btn-lang-inner > *{ transform:translateY(2px); }

/* ---------- 紙吹雪の装飾（正解 / 結果カードの上部） ---------- */
.decor{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
/* 各ピースは JS で --sx / --sy（飛び出す開始位置）と --d（遅延）を持つ */
.decor i{
  position:absolute; display:block; background:center / contain no-repeat;
  opacity:0; transform:translate(var(--sx, 0px), var(--sy, 200px)) scale(.2);
  will-change:transform;
}
.decor.show i{
  animation:decorBurst .7s cubic-bezier(.18,1.15,.35,1) forwards;
  animation-delay:var(--d, 0s);
}