/* 1/3すっぱいガム固有のスタイル（共通部分は assets/css/game.css） */

.topbar h1 { font-size: clamp(1.1rem, 4vw, 1.8rem); }

/* ---------- 駄菓子屋の店内 ---------- */
.shop {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 0 12px 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 60px),
    #e9c891;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
.shop::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: repeating-linear-gradient(90deg, var(--red) 0 34px, #fff 34px 68px);
  border-bottom: 3px solid var(--ink);
}
.shelf {
  margin-top: 40px;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 0 6px 4px;
  border-bottom: 8px solid #a8743f;
  opacity: 0.7;
}
.shelf .art { width: 44px; height: 44px; }

/* プレイヤー */
.players {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.players li {
  display: grid; justify-items: center;
  min-width: 82px;
  padding: 6px 8px 4px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.85rem;
  transition: transform 0.2s;
}
.players li .art { width: 46px; height: 46px; }
.players li.turn { background: var(--yellow); transform: translateY(-4px); box-shadow: var(--shadow); }
.players li.me .pname { color: var(--red); }
.players li.out { opacity: 0.4; filter: grayscale(1); }
.lives { display: flex; gap: 2px; min-height: 18px; }
.lives .art { width: 16px; height: 16px; }
.lives .lost { opacity: 0.2; filter: grayscale(1); }

/* 真ん中（食べている人） */
.stage { text-align: center; align-self: center; padding: 8px 0; }
.eater { height: 150px; display: grid; place-items: center; }
.eater .art { width: 140px; height: 140px; }
.eater.chewing .art { animation: chew 0.22s ease-in-out infinite alternate; }
.eater.sour .art { animation: shiver 0.08s linear infinite; }
.eater.safe .art { animation: pop 0.4s ease-out; }
@keyframes chew { from { scale: 1 1; } to { scale: 1.04 0.96; } }
@keyframes shiver { 0% { translate: -3px 0; } 50% { translate: 3px 1px; } 100% { translate: -2px -1px; } }
.stage-main.sour { color: #4f9d69; font-size: clamp(2rem, 8vw, 3.4rem); animation: pop 0.35s ease-out; }
.stage-main.safe { color: var(--red); }

/* カウンターと箱 */
.counter {
  margin: 0 -12px;
  padding: 18px 12px 20px;
  background: linear-gradient(#a8743f, #8f6033);
  border-top: 4px solid var(--ink);
  display: grid; place-items: center;
}
.box {
  background: #fff6c9;
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  padding: 0 0 12px;
  width: min(100%, 360px);
  overflow: hidden;
}
.box-label {
  background: var(--green);
  color: #fff;
  font-weight: 900;
  text-align: center;
  padding: 4px;
  border-bottom: 3px solid var(--ink);
  letter-spacing: 0.1em;
}
.slots { display: flex; justify-content: space-around; padding-top: 12px; }
.gum-slot {
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 3px dashed rgba(59, 42, 30, 0.35);
  background: #fffbe6;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.12s;
}
.gum-slot .art { width: 100%; height: 100%; }
.gum-slot:not(:disabled):hover { transform: translateY(-5px) rotate(-6deg); }
.gum-slot:disabled { cursor: default; }
.gum-slot.empty .art { opacity: 0; }
.gum-slot.taken { animation: takeout 0.35s ease-in forwards; }
@keyframes takeout { to { transform: translateY(-120px) scale(0.6); opacity: 0; } }
.gum-slot.reveal-sour { border-color: var(--green); background: #e5f5d8; }
.slots.my-turn .gum-slot:not(:disabled) { border-color: var(--red); border-style: solid; animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 50% { rotate: 6deg; } }

@media (max-width: 480px) {
  .gum-slot { width: 72px; height: 72px; }
  .eater .art { width: 110px; height: 110px; }
}