/* Marble — 구슬 홀짝 (스테이지 전용 스타일)
 * 공통 UI (.round-meta / .side-buttons / .hint / 모달 / .history-list / .rules-table / .verify-*)
 * 는 common.css 에 있으며, 여기서는 본 게임의 무대 색감/배치/결과 배지만 정의한다.
 *
 * 스테이지는 PC/모바일 동일하게 860 × 460 비율로 고정 동작.
 */

html, body { width: 100%; height: 100%; position: relative; }
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 216, 107, 0.18), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(255, 107, 157, 0.15), transparent 45%),
    linear-gradient(135deg, #1e1b3a 0%, #2d1b4e 50%, #4a1f5c 100%);
}

/* 게임별 토큰 오버라이드 — 보라/금 계열에 맞춤 */
:root {
  --game-pill-bg: rgba(0, 0, 0, 0.55);
  --game-pill-border: rgba(255, 216, 107, 0.45);
  --game-pill-text: #ffd86b;
  --game-pill-label: #ffb380;
  --game-accent-yellow: #ffd86b;
}

/* Stage: 860×460 비율 고정. 화면 크기에 비례 축소되지만 비율은 보존. */
.stage {
  width: 860px;
  width: min(860px, 100vw, calc(100vh * 860 / 460));
  width: min(860px, 100vw, calc(100dvh * 860 / 460));
  height: 460px;
  height: auto;
  aspect-ratio: 860 / 460;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 0;
  /* container query container — 자식 (sprite, marbles) 이 cqi 로 비례 스케일링 */
  container-type: inline-size;
  background-color: #2a1f3d;
  background-image: url('/images/marble/background.png');
  /* 원본 게임과 동일: 의자/바닥 부분을 잘라내기 위해 140%로 확대 */
  background-size: auto 140%;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Foreground desk overlay: 책상이 캐릭터 하반신을 가리도록 */
.stage .desk-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 82%;
  bottom: 0;
  background-image: url('/images/marble/background.png');
  background-size: 133.09% 777.78%;
  background-position: center 67.21%;
  background-repeat: no-repeat;
  z-index: 4;
  pointer-events: none;
}

/* Sprite: 8 frames × 3 rows. 스테이지 너비의 25.58% 크기 = 원본 220/860. */
.sprite {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 25.58cqi;
  height: 25.58cqi;
  transform: translate(-50%, -50%);
  background-image: url('/images/marble/sprite_sheet.png');
  background-size: 204.65cqi 76.74cqi;
  background-position: 0 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

@keyframes marble-idle-anim {
  from { background-position: 0 0; }
  to { background-position: -204.65cqi 0; }
}
.sprite.idle {
  animation: marble-idle-anim 1s steps(8) infinite;
}

@keyframes marble-shake-anim {
  from { background-position: 0 -25.58cqi; }
  to { background-position: -204.65cqi -25.58cqi; }
}
.sprite.shake {
  animation: marble-shake-anim 0.4s steps(8) infinite;
}

/* 손을 다 편 후 잠금 프레임: row 3, frame 4 — 빈 손 */
.sprite.revealed {
  background-position: -102.32cqi -51.16cqi;
}

/* Marbles overlay — sprite 스케일/위치와 동일 */
.marbles {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 25.58cqi;
  height: 25.58cqi;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.marbles.show { opacity: 1; }

.marble {
  position: absolute;
  /* 17px in 220 reference sprite → 7.73% */
  width: 7.73%;
  height: 7.73%;
  transform: translate(-50%, -50%) scale(0);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  animation: marble-pop-in 0.4s ease-out forwards;
}
@keyframes marble-pop-in {
  0%   { transform: translate(-50%, -50%) scale(0); }
  60%  { transform: translate(-50%, -50%) scale(1.25); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.marble.red    { background-image: url('/images/marble/marble_red.png'); }
.marble.blue   { background-image: url('/images/marble/marble_blue.png'); }
.marble.green  { background-image: url('/images/marble/marble_green.png'); }
.marble.yellow { background-image: url('/images/marble/marble_yellow.png'); }

/* Count badge: 손을 연 뒤 노출되는 결과 카운트 표시. */
.count-badge {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.9);
  background: linear-gradient(135deg, #ffd86b, #ff8a4c);
  color: #2d1b4e;
  padding: 8px 22px;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.32s ease-out, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 16px rgba(255, 138, 76, 0.4);
  z-index: 7;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 1px;
}
.count-badge.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Result badge — dalgona 패턴과 동일한 하단 콜아웃 */
.result-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  z-index: 25;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease-out, transform 0.45s cubic-bezier(.3,1.6,.5,1);
  background: rgba(8, 3, 0, 0.78);
  border: 2px solid rgba(255, 216, 107, 0.5);
  border-radius: 14px;
  padding: 10px 26px 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 22px rgba(168, 85, 247, 0.25);
  min-width: 180px;
  max-width: 78%;
}
.result-badge.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.result-badge .badge-label {
  font-size: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--game-accent-yellow);
  margin-bottom: 4px;
}
.result-badge .badge-text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  color: #fff;
  white-space: nowrap;
}
.result-badge .badge-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--game-accent);
  letter-spacing: 2px;
  white-space: nowrap;
}
.result-badge .badge-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
}
.result-badge .badge-color-dot.red    { background: #f87171; }
.result-badge .badge-color-dot.blue   { background: #60a5fa; }
.result-badge .badge-color-dot.green  { background: #4ade80; }
.result-badge .badge-color-dot.yellow { background: #ffd86b; }

/* 과거 회차 모달의 컬럼 폭: 회차 / 시드해시 / 개수 / 색 / 홀짝 / 시각 */
.history-list {
  grid-template-columns:
    56px
    42px
    minmax(56px, 0.8fr)
    minmax(64px, 0.8fr)
    minmax(56px, 0.7fr)
    minmax(92px, 1fr);
}
.history-list .col-count {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--game-accent-yellow);
  font-weight: 700;
}
.history-list .col-color { text-align: center; }
.history-list .col-count,
.history-list .col-color,
.history-list .col-oe {
  justify-content: center;
}
.history-list .col-color .dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}
.history-list .col-color .dot.red    { background: #f87171; }
.history-list .col-color .dot.blue   { background: #60a5fa; }
.history-list .col-color .dot.green  { background: #4ade80; }
.history-list .col-color .dot.yellow { background: #ffd86b; }
.history-list .col-oe {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 1px;
  font-weight: 700;
}
.history-list .col-oe.odd  { color: #ff9bb8; }
.history-list .col-oe.even { color: #7fd5e0; }

@media (max-width: 720px) {
  .count-badge {
    top: 42px;
    padding: 5px 14px;
    font-size: 13px;
  }
  .result-badge {
    bottom: 9px;
    min-width: 0;
    max-width: 74%;
    padding: 7px 16px 8px;
    border-width: 1px;
    border-radius: 10px;
  }
  .result-badge .badge-label {
    font-size: 8px;
    letter-spacing: 3px;
    margin-bottom: 3px;
  }
  .result-badge .badge-text {
    font-size: clamp(18px, 5.1vw, 22px);
    letter-spacing: 2px;
  }
  .result-badge .badge-meta {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  .history-list {
    grid-template-columns:
      44px
      36px
      minmax(48px, 0.8fr)
      minmax(52px, 0.9fr)
      minmax(42px, 0.7fr);
  }
  .history-list .col-hash,
  .history-list .col-time { display: none; }
}

@media (max-height: 260px) {
  .count-badge {
    top: 40px;
    padding: 4px 12px;
    font-size: 12px;
  }
  .result-badge {
    bottom: 8px;
    padding: 6px 14px 7px;
  }
  .result-badge .badge-text { font-size: 20px; }
  .result-badge .badge-meta { font-size: 10px; }
}