/* ============================================================
   架空のラーメン屋メーカー : 木札まわりの見た目とスロット演出
   （レイアウトは Tailwind、雰囲気づくりだけここで担当）
   ============================================================ */

/* --- 木札カード --------------------------------------------- */
.wood-card {
  background:
    repeating-linear-gradient(
      92deg,
      rgba(90, 52, 16, 0.05) 0px,
      rgba(90, 52, 16, 0.05) 2px,
      rgba(255, 231, 190, 0.06) 3px,
      rgba(255, 231, 190, 0.06) 7px
    ),
    linear-gradient(165deg, #e6bc80 0%, #cf9a55 45%, #b0762f 100%);
  border: 6px solid #4d2c10;
  position: relative;
}

/* 四隅の鋲 */
.wood-card::before,
.wood-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8a6b4a, #33220f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.wood-card::before { top: 12px; left: 12px; }
.wood-card::after  { top: 12px; right: 12px; }

/* --- 暖簾 ---------------------------------------------------- */
.noren {
  width: 130px;
  height: 62px;
  background: linear-gradient(180deg, #8f1d22 0%, #6e1418 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 暖簾の切れ込み */
.noren::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 22px;
  background:
    linear-gradient(90deg, transparent 31%, #0c0a09 31%, #0c0a09 34%, transparent 34%),
    linear-gradient(90deg, transparent 65%, #0c0a09 65%, #0c0a09 68%, transparent 68%);
}
.noren-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  font-size: 26px;
  color: #f7e2c0;
  letter-spacing: 0.2em;
  transform: translateY(-6px);
}

/* --- 落款（印） ---------------------------------------------- */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2.5px solid #b8202a;
  border-radius: 6px;
  color: #b8202a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  font-size: 17px;
  transform: rotate(-6deg);
  opacity: 0.9;
}

/* --- 明朝体を使う要素 ---------------------------------------- */
#shop-name,
#catch-copy,
#price,
#ranking-list li {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", "Noto Serif JP", serif;
}

/* --- スロット演出 -------------------------------------------- */
.slot {
  transition: filter 120ms linear, opacity 120ms linear;
}
.slot.is-rolling {
  filter: blur(0.7px);
  opacity: 0.78;
}
.slot.is-locked {
  animation: slot-lock 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes slot-lock {
  0%   { transform: scale(1.16) translateY(-3px); filter: brightness(1.35); }
  55%  { transform: scale(0.97); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 開店決定時のカード揺れ */
.is-shaking {
  animation: shop-shake 380ms ease-in-out;
}
@keyframes shop-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-0.35deg); }
  45% { transform: translateX(5px) rotate(0.35deg); }
  70% { transform: translateX(-3px); }
}

/* 投票時のはずみ */
.is-popping {
  animation: vote-pop 380ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes vote-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* --- ランキング ---------------------------------------------- */
/* メダルと数字で幅が変わらないよう、順位欄を固定幅にして店名の左端を揃える */
.rank-badge {
  flex: none;
  width: 1.6rem;
  text-align: center;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #d6a75f;
  font-variant-numeric: tabular-nums;
}
#ranking-list li:first-child {
  font-weight: 700;
}

/* --- 動きを減らす設定を尊重する ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .slot.is-locked,
  .is-shaking,
  .is-popping {
    animation: none;
  }
  .slot.is-rolling {
    filter: none;
    opacity: 1;
  }
}