@charset "UTF-8";

/* ==========================================================================
   Satisfy Games カスタムスタイル (寒色メイン・16色カラーパレット準拠)
   指定の16色を使用:
   #141414, #403020, #645a50, #641450, #143ca0, #3cb4c8, #14643c, #3cb43c,
   #f0dc3c, #f0783c, #b4283c, #a0643c, #c8a078, #f0c8a0, #bec8c8, #f0f0f0
   ========================================================================== */

:root {
  --c-dark: #141414;
  --c-darkbrown: #403020;
  --c-mutedgray: #645a50;
  --c-purple: #641450;
  --c-blue: #143ca0;
  --c-cyan: #3cb4c8;
  --c-darkgreen: #14643c;
  --c-green: #3cb43c;
  --c-yellow: #f0dc3c;
  --c-orange: #f0783c;
  --c-red: #b4283c;
  --c-bronze: #a0643c;
  --c-tan: #c8a078;
  --c-sand: #f0c8a0;
  --c-lightgray: #bec8c8;
  --c-white: #f0f0f0;
}

/* --------------------------------------------------------------------------
   全体・スクロールバー (寒色基調)
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  background-color: #141414;
  color: #f0f0f0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #141414;
  color: #f0f0f0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #141414;
}

::-webkit-scrollbar-thumb {
  background: #143ca0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3cb4c8;
}

/* --------------------------------------------------------------------------
   カジノフェルトテーブルの質感 (深みのある寒色グリーン＆ディープブルー枠)
   -------------------------------------------------------------------------- */
.casino-felt {
  background: radial-gradient(circle at 50% 40%, #3cb43c 0%, #14643c 55%, #141414 100%);
  box-shadow: inset 0 0 80px rgba(20, 20, 20, 0.85);
  border: 4px solid #143ca0;
  border-radius: 40px;
  position: relative;
}

@media (max-width: 640px) {
  .casino-felt {
    border-width: 6px;
    border-radius: 20px;
    box-shadow: inset 0 0 40px rgba(20, 20, 20, 0.7);
  }
}

/* --------------------------------------------------------------------------
   トランプカードのスタイル
   -------------------------------------------------------------------------- */
.card-container {
  perspective: 1000px;
  display: inline-block;
}

.playing-card,
.card-placeholder {
  width: 52px;
  height: 76px;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease;
  user-select: none;
  position: relative;
}

.playing-card {
  box-shadow: 0 3px 8px rgba(20, 20, 20, 0.6);
  background-color: #f0f0f0;
}

.card-placeholder {
  border: 2px dashed #3cb4c8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3cb4c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background-color: #141414;
}

@media (min-width: 640px) {

  .playing-card,
  .card-placeholder {
    width: 66px;
    height: 98px;
    border-radius: 8px;
    font-size: 12px;
  }
}

@media (min-width: 1024px) {

  .playing-card,
  .card-placeholder {
    width: 76px;
    height: 112px;
    border-radius: 10px;
    font-size: 13px;
  }
}

.playing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(20, 20, 20, 0.7);
}

/* カード配布アニメーション */
@keyframes dealIn {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.6) rotate(-15deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.animate-deal {
  animation: dealIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* カード裏面デザイン */
.card-back-pattern {
  background-color: #b4283c;
  background-image: repeating-linear-gradient(45deg, #b4283c 0, #b4283c 3px, #641450 3px, #641450 6px);
  border: 2px solid #f0f0f0;
  border-radius: 6px;
}

@media (min-width: 640px) {
  .card-back-pattern {
    border-width: 3px;
    border-radius: 8px;
  }
}

/* --------------------------------------------------------------------------
   カジノチップ スタイル
   -------------------------------------------------------------------------- */
.casino-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  border: 3px dashed #bec8c8;
  box-shadow: 0 3px 6px rgba(20, 20, 20, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .casino-chip {
    width: 56px;
    height: 56px;
    font-size: 0.9rem;
    border-width: 4px;
  }
}

.casino-chip:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 12px rgba(20, 20, 20, 0.8);
}

.casino-chip:active {
  transform: translateY(0) scale(0.96);
}

/* チップ額面別カラー */
.chip-5 {
  background: radial-gradient(circle, #f0783c 30%, #b4283c 100%);
  color: #f0f0f0;
}

.chip-25 {
  background: radial-gradient(circle, #3cb43c 30%, #14643c 100%);
  color: #f0f0f0;
}

.chip-50 {
  background: radial-gradient(circle, #3cb4c8 30%, #143ca0 100%);
  color: #f0f0f0;
}

.chip-100 {
  background: radial-gradient(circle, #143ca0 30%, #141414 100%);
  color: #3cb4c8;
  border-color: #3cb4c8;
}

.chip-500 {
  background: radial-gradient(circle, #641450 30%, #143ca0 100%);
  color: #f0f0f0;
}

/* ベットスポット (シアン＆ディープブルー枠) */
.bet-spot {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px dashed #3cb4c8;
  background: radial-gradient(circle, #143ca0 0%, #141414 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

@media (min-width: 640px) {
  .bet-spot {
    width: 96px;
    height: 96px;
  }
}

.bet-spot.active {
  border-color: #3cb43c;
  box-shadow: 0 0 14px #3cb43c;
}

/* チップスタックコンテナ */
.chip-stack-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .chip-stack-wrapper {
    width: 48px;
    height: 48px;
  }
}

/* 積み重なる個別チップ */
.stacked-chip {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.65rem;
  border: 2.5px dashed #bec8c8;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.7);
  user-select: none;
  animation: chipDrop 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@media (min-width: 640px) {
  .stacked-chip {
    width: 46px;
    height: 46px;
    font-size: 0.75rem;
    border-width: 3px;
  }
}

@keyframes chipDrop {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(1.15);
  }

  100% {
    opacity: 1;
  }
}

.chip-pulse {
  animation: chipPulseAnim 0.4s ease-out;
}

@keyframes chipPulseAnim {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   ランキング機能 スタイル
   -------------------------------------------------------------------------- */
.rank-badge-1 {
  background: linear-gradient(135deg, #3cb4c8, #3cb43c);
  color: #141414;
  box-shadow: 0 0 10px #3cb4c8;
}

.rank-badge-2 {
  background: linear-gradient(135deg, #f0f0f0, #bec8c8);
  color: #141414;
  box-shadow: 0 0 8px #bec8c8;
}

.rank-badge-3 {
  background: linear-gradient(135deg, #3cb4c8, #143ca0);
  color: #f0f0f0;
  box-shadow: 0 0 8px #3cb4c8;
}

.rank-badge-other {
  background: #143ca0;
  color: #bec8c8;
  border: 1px solid #3cb4c8;
}