/* ============================================================
   game.css — 分別ゲーム画面 (2:469 / 4:50 / 47:33215 / 47:33440)
   HUD → 名前カード → ベルト（flex:1）→ ゴミ箱
============================================================ */
#screen-game{ justify-content:flex-start; }

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; gap:10px;
  padding:calc(21px + var(--safe-top)) 20px 0;
  z-index:8;
}
.pill-time{ flex:none; }
.pill-score{ flex:1; }
.pill-score .pill-num{ flex:1; }

/* ---------- 名前カード + メーター ---------- */
.name-card{
  margin:calc(20px + 4vh) auto 0; width:calc(100% - 80px); max-width:340px;
  background:#fff; border:4px solid var(--pink); border-radius:36px;
  padding:26px 30px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  z-index:8;
}
.item-name{
  width:100%; text-align:center; font-weight:900; font-size:24px; line-height:1.3;
  color:var(--pink); text-transform:uppercase;
}
/* メーターは全体を SVG で描く（ピンクのトラックも塗りも rect rx）。
   CSS の border-radius / clip-path / overflow:hidden は Safari で角が立つことがあるので使わない。
   Figma: 264×30（白 5px の縁 + 内側 254×20） → 白い縁はカード上で見えないので padding で確保 */
.meter{
  width:100%; max-width:264px; height:30px; padding:5px;
}
.meter-svg{ display:block; width:100%; height:100%; overflow:visible; }
.meter-svg rect{ transition:width .1s linear; }

/* ---------- ベルトコンベア ---------- */
.belt-zone{ position:relative; flex:1; min-height:200px; }
.belt{
  position:absolute; left:-9px; right:-9px; top:50%;
  height:137px; transform:translateY(-38%);
}
/* 台形の下辺はローラー台（ピル型）の中心に合わせる: 79.7 + 57.5/2 ≒ 108.5 */
.belt-top{
  position:absolute; left:0; right:0; top:0; height:108px;
}
.belt-shape{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.belt-arrows-clip{
  position:absolute; inset:0; overflow:hidden;
  clip-path:polygon(13.6% 0, 86.4% 0, 100% 100%, 0 100%);   /* 台形の斜辺に沿ってクリップ */
}
.belt-arrows{
  position:absolute; top:22px; left:0; height:34px; width:200%;
  display:flex; align-items:center; gap:52px; padding-left:40px;
  animation:beltMove 1.4s linear infinite;
}
.belt-arrows i{
  flex:none; width:0; height:0;
  border-top:17px solid transparent; border-bottom:17px solid transparent;
  border-left:30px solid rgba(205,200,196,.18);
}
.belt-base{
  position:absolute; left:0; right:0; top:79.7px; height:57.5px;
  background:#CDC8C4; border:5.75px solid #B6AFA9; border-radius:46px;
  display:flex; align-items:center; justify-content:center;
}
.belt-base img{ width:calc(100% - 30px); max-width:390px; height:23px; }

/* ---------- 流れるアイテム ---------- */
.item{
  position:absolute; left:0; top:50%;
  width:150px; height:150px; margin-top:-118px;
  will-change:transform; z-index:6;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.15));
}
.item img{ width:100%; height:100%; object-fit:contain; }
.item.drop{ animation:itemDrop .28s ease-in forwards; }
.item.hidden{ visibility:hidden; }

/* ---------- フィードバック（BENAR! / SALAH...） ---------- */
.feedback{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; pointer-events:none; z-index:9;
  filter:drop-shadow(0 5px 0 rgba(93,72,32,.3));
}
.feedback.show{ animation:fbPop .8s ease forwards; }
.fb-title{
  font-family:var(--font-display); font-size:38px; letter-spacing:.06em; line-height:1;
  text-transform:uppercase; padding-top:4px;
  text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff;
}
.fb-pill{
  display:flex; align-items:center; justify-content:center; gap:16px;
  min-width:140px; padding:10px 26px 6px 20px;
  background:#fff; border:5px solid currentColor; border-radius:20px;
}
.fb-ic{ width:32px; height:32px; }
.fb-num{ font-family:var(--font-num); font-size:42px; letter-spacing:.06em; line-height:.9; padding-top:6px; }
.fb-num small{ font-size:30px; font-family:var(--font-display); }
.feedback.good{ color:var(--green); }
.feedback.bad{ color:var(--red); }
.feedback.bad .fb-title{ font-size:34px; }

/* ---------- ゴミ箱（Figma button-select 2:473: 2×2、190×112、ラベルはボタン内） ---------- */
.bins{
  position:relative; z-index:12;
  display:grid; grid-template-columns:1fr 1fr; column-gap:8px; row-gap:8px;
  padding:10px 16px calc(max(50px, 10vh) + var(--safe-bottom));
}
/* チュートリアル時にゴミ箱の帯だけ明るく抜くパネル */
.bins::before{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; top:-6px;
  bottom:calc(max(50px, 10vh) + var(--safe-bottom) - 22px);
  border-radius:30px; background:rgba(252,243,225,.96);
  opacity:0; transition:opacity .2s;
}
.bin{
  position:relative; display:block; width:100%;
  transition:opacity .15s;
}
.bin .btn{ width:100%; }
.bin .btn .btn-inner{
  flex-direction:column; gap:10px;
  height:100px; padding:6px 10px 12px;
}
.bin-ic{ width:30px; height:30px; flex:none; }
/* ゴミ箱は <button class="bin"> の中に .btn(span) があるので、押下は .bin:active で受ける */
.bin:active .btn .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);
}
.bin:active .btn .btn-inner > *, .bin:active .btn .btn-inner::before{ transform:translateY(6px); }
.bin-label{
  font-family:var(--font-display); font-size:min(25px, 6.2vw); letter-spacing:.05em; line-height:1;
  color:#fff; text-align:center; text-transform:uppercase; white-space:nowrap;
  padding-top:4px;   /* Luckiest Guy は上に寄って見えるので光学補正 */
}
.bin.dim{ opacity:.35; }
.bin.flash .btn .btn-inner{ animation:binFlash .35s; }
#stage.shake{ animation:shake .3s; }

/* ---------- チュートリアル (4:50) ---------- */
.tutorial-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  z-index:11; opacity:0; pointer-events:none; transition:opacity .25s;
}
.tutorial-hand{
  /* 指先がボタンの上辺あたりに来る高さ（ボタンの絵柄を隠さない） */
  position:absolute; right:-18px; top:-72px; width:120px; height:120px;
  display:none; pointer-events:none; z-index:2;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));
}
#screen-game.tutorial .tutorial-overlay{ opacity:1; pointer-events:auto; }
#screen-game.tutorial .bins::before{ opacity:1; }
#screen-game.tutorial .bin.target .tutorial-hand{ display:block; animation:handTap 1s ease-in-out infinite; }
#screen-game.tutorial .belt-arrows{ animation-play-state:paused; }

/* ---------- 言語別（Figma EN 151:2603 / JP 151:3048） ---------- */
/* EN: Luckiest Guy 25px（INORGANIC / HAZARDOUS が 1 行で収まる） */
html[lang="en"] .bin-label{ font-size:min(25px, 5.6vw); letter-spacing:.04em; }
/* JA: LINE Seed JP ExtraBold 24px（見出し書体ではなく本文書体）、アイコンとの間隔 6px */
html[lang="ja"] .bin .btn .btn-inner{ gap:6px; }
html[lang="ja"] .bin-label{
  font-family:var(--font-body); font-weight:800; font-size:min(24px, 5.8vw);
  letter-spacing:0; padding-top:0;
}
html[lang="ja"] .fb-title{ letter-spacing:.02em; padding-top:0; }
html[lang="ja"] .feedback.bad .fb-title{ font-size:34px; }
html[lang="ja"] .fb-num small{ font-size:26px; }

/* 小さい端末（iPhone SE など）向けの詰め */
@media (max-height:700px){
  .name-card{ padding:16px 24px; gap:10px; margin-top:12px; }
  .item-name{ font-size:20px; }
  .meter{ height:26px; padding:4px; }
  .belt-zone{ min-height:130px; }
  .belt{ height:110px; }
  .belt-top{ height:87px; }
  .belt-base{ top:64px; height:46px; }
  .item{ width:120px; height:120px; margin-top:-100px; }
  .bins{ padding-bottom:calc(44px + var(--safe-bottom)); row-gap:6px; }
  .bins::before{ bottom:calc(44px + var(--safe-bottom) - 22px); }
  .bin .btn .btn-inner{ height:74px; gap:4px; padding:4px 10px 10px; }
  .bin-ic{ width:26px; height:26px; }
  .bin-label{ font-size:22px; }
  .tutorial-hand{ width:100px; height:100px; top:-60px; }
}
@media (max-width:380px){
  .pill{ padding:0 14px; }
  .pill-num{ font-size:30px; }
}