.hidden { display: none !important; }

/* ── 인트로 영상 ── */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#intro-skip-btn {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  letter-spacing: 0.04em;
}

#intro-tap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  pointer-events: none;
  display: none;
}

body.mode-select #game-viewport {
  display: none;
}

/* ==================== 모드 선택 화면 (짙은 녹색 배경) ==================== */

:root {
  --primary-green: #1b5e20;
  --dark-green: #0d3b1a;
  --light-green: #2e7d32;
  --accent-gold: #ffd700;
  color-scheme: light;
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-width: 69px;
  --card-height: 97px;
  --card-gap: 10px;
  --pile-offset: 58px;
  --bg: #239722;
  --panel-bg: #1e8d1e;
  --card-front: #fff;
  --card-border: #252525;
  --text-dark: #172217;
}

#mode-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
  /* PC: 배경 이미지를 화면에 맞게 cover */
  background-image: url('images/title.png');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  background-color: #051f12;
}

/* 가독성을 위한 어두운 오버레이 */
#mode-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(5, 20, 10, 0.55) 60%,
    rgba(5, 20, 10, 0.80) 100%
  );
  z-index: 0;
  pointer-events: none;
}

#mode-screen.hidden {
  display: none !important;
}

.mode-screen-background {
  display: none; /* 기존 배경 요소 숨김 */
}

.mode-screen-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 700px;
  padding: 20px;
  box-sizing: border-box;
}

.mode-screen-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 700px;
}

/* ===== 게임 제목 ===== */
.game-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin: 0;
  letter-spacing: 3px;
  text-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.3);
  animation: slideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  font-family: 'Arial Black', sans-serif;
  position: relative;
  z-index: 1;
}

/* ===== 카드 쇼케이스 ===== */
.card-showcase {
  animation: zoomIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.4));
  perspective: 1000px;
}

.card-showcase img {
  max-width: 300px;
  height: auto;
  width: 100%;
}

.card-showcase-img {
  width: 100%;
  max-width: 550px;
  height: auto;
  display: block;
}

/* ===== 모드 버튼 컨테이너 ===== */
.mode-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  animation: slideUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

/* p 태그 래퍼 초기화 */
.mode-buttons-container p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ===== 모드 버튼 기본 스타일 ===== */
.mode-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  width: 280px;
  font-size: 1.05rem;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: white;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.mode-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s;
}

.mode-button:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-4px);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mode-button:hover::before {
  opacity: 1;
}

.mode-button:active {
  transform: translateY(-1px);
}

.mode-button i {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ===== 솔로 모드 버튼 ===== */
.solo-button {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
  border-color: rgba(150, 180, 255, 0.5);
}

.solo-button:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
  border-color: rgba(200, 230, 255, 0.8);
  box-shadow: 
    0 15px 40px rgba(102, 126, 234, 0.3),
    0 0 20px rgba(102, 126, 234, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== 네트워크 모드 버튼 ===== */
.network-button {
  background: linear-gradient(135deg, rgba(144, 202, 249, 0.25), rgba(100, 181, 246, 0.25));
  border-color: rgba(144, 202, 249, 0.6);
}

.network-button:hover {
  background: linear-gradient(135deg, rgba(144, 202, 249, 0.4), rgba(100, 181, 246, 0.4));
  border-color: rgba(200, 230, 255, 0.8);
  box-shadow: 
    0 15px 40px rgba(100, 181, 246, 0.3),
    0 0 20px rgba(100, 181, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== 애니메이션 ===== */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.85) rotateX(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 태블릿 반응형 (900px 이하) ===== */
@media (max-width: 900px) {
  .game-title {
    font-size: 3rem;
    letter-spacing: 2px;
  }

  .mode-screen-content {
    gap: 25px;
  }

  .card-showcase img {
    max-width: 400px;
  }

  .mode-buttons-container {
    max-width: 450px;
  }

  .mode-button {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* ===== 모바일 반응형 (768px 이하) ===== */
@media (max-width: 768px) {
  .mode-screen-container {
    padding-top: 80px;
  }

  .game-title {
    font-size: 2.4rem;
    letter-spacing: 1.5px;
  }

  .mode-screen-content {
    gap: 20px;
  }

  .card-showcase img {
    max-width: 320px;
  }

  .mode-buttons-container {
    max-width: 100%;
    gap: 10px;
    padding: 0 16px;
  }

  .mode-button {
    width: 100%;
    max-width: 320px;
    padding: 15px 24px;
    font-size: 1.15rem;
  }
}

/* ===== 소형 모바일 (480px 이하) ===== */
@media (max-width: 480px) {
  .mode-screen-container {
    padding: 12px;
    padding-top: 120px;
  }

  .game-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .mode-screen-content {
    gap: 16px;
  }

  .card-showcase img {
    max-width: 260px;
  }

  .mode-buttons-container {
    padding: 0 12px;
    gap: 8px;
  }

  .mode-button {
    padding: 14px 20px;
    font-size: 1.1rem;
    gap: 10px;
    letter-spacing: 1px;
  }

  .mode-button i {
    font-size: 1.2rem;
  }
}

/* ===== 초소형 모바일 (375px 이하, iPhone SE 등) ===== */
@media (max-width: 375px) {
  .game-title {
    font-size: 1.7rem;
  }

  .mode-screen-content {
    gap: 12px;
  }

  .card-showcase img {
    max-width: 200px;
  }

  .mode-button {
    padding: 13px 16px;
    font-size: 1rem;
  }
}

/* ===== 기존 네트워크 로비 스타일 ===== */
#network-lobby.hidden {
  display: none !important;
}

.overlay-screen {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  display: grid;
  place-items: center;
  z-index: 100;
}

.overlay-screen.hidden {
  display: none !important;
}

.overlay-card {
  background: #fff;
  color: #172217;
  border-radius: 12px;
  padding: 18px;
  width: min(360px, calc(100vw - 24px));
}

.overlay-card h2 {
  margin: 0 0 10px 0;
  color: #172217;
  font-size: 1.5rem;
}

.overlay-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: #172217;
}

.overlay-card input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.overlay-card input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.3);
}

.overlay-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  flex-wrap: wrap;
}

.overlay-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  background: #4CAF50;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  user-select: none;
  -webkit-user-select: none;
}

.overlay-actions button:hover:not(:disabled) {
  background: #45a049;
}

.overlay-actions button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.lobby-step {
  display: block;
}

.lobby-step.hidden {
  display: none;
}

.room-list {
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  margin: 12px 0;
  background: #f9f9f9;
}

.room-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.room-item:hover {
  background: #f0f0f0;
}

.room-item:last-child {
  border-bottom: none;
}

.room-item-info {
  flex: 1;
}

.room-item-title {
  color: #172217;
  font-weight: 600;
  margin-bottom: 4px;
}

.room-item-host {
  color: #666;
  font-size: 0.9rem;
}

.room-item-right {
  display: flex;
  gap: 8px;
}

.room-join-btn {
  padding: 6px 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

.room-join-btn:hover {
  background: #45a049;
}

.room-status-badge {
  padding: 4px 8px;
  background: #f0f0f0;
  color: #666;
  border-radius: 4px;
  font-size: 0.85rem;
}

.lobby-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.lobby-user-nick {
  background: #e8f3ea;
  color: #1b5e20;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.lobby-list-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.lobby-list-actions button {
  padding: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.lobby-list-actions button:hover {
  background: #45a049;
}

#room-info {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  margin: 16px 0;
}

#room-info p {
  margin: 8px 0;
  color: #172217;
}

#room-host-ready-badge,
#room-guest-ready-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 8px;
}

.ready-badge {
  background: #4CAF50;
  color: white;
}

/* ===== 게임 결과 다이얼로그 ===== */
#game-result-dialog {
  border: none;
  border-radius: 10px;
  padding: 24px;
  width: min(360px, calc(100vw - 24px));
  text-align: center;
}

#game-result-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

#game-result-dialog h3 {
  font-size: 2rem;
  margin: 0 0 16px;
  color: #172217;
}

#game-result-dialog p {
  color: #172217;
  margin: 12px 0 20px;
  font-size: 1.1rem;
}

#game-result-dialog button {
  padding: 10px 20px;
  font-size: 1rem;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#game-result-dialog button:hover {
  background: #45a049;
}

/* ===== 카운트다운 팝업 ===== */
#countdown-popup {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ===== 기존 게임 스타일 ===== */
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #0d0600;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── 전체화면 게임 뷰포트 ─── */
#game-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: url('images/playground.png') center top / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  flex-shrink: 0;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

header.hidden-header {
  display: none;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-size: 1rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* 카드 모양 버튼 - 빨간 뒷면 카드처럼 */
.card-btn {
  width: calc(var(--card-width, 69px) * 1.3);
  height: 100%;
  min-height: 52px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  background: 
    radial-gradient(ellipse at 30% 30%, rgba(255,120,80,0.3) 0%, transparent 60%),
    linear-gradient(145deg, #b81c1c 0%, #7a0000 50%, #5a0000 100%);
  border: 2px solid rgba(220,80,60,0.6);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,180,160,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.2s;
  color: #fff;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* 카드 테두리 안쪽 장식선 */
.card-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,160,140,0.35);
  border-radius: 4px;
  pointer-events: none;
}

/* 카드 광택 */
.card-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255,200,180,0.18) 0%, transparent 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

.card-btn:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 10px 22px rgba(0,0,0,0.7),
    0 0 12px rgba(255,80,60,0.4),
    inset 0 1px 0 rgba(255,180,160,0.4);
  border-color: rgba(255,130,100,0.9);
}

.card-btn:active {
  transform: translateY(-1px);
}

.card-btn-icon {
  font-size: 1.3rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.card-btn-label {
  font-size: 0.66rem;
  font-weight: 800;
  position: relative;
  z-index: 1;
  color: #ffe8e0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  letter-spacing: 0.3px;
}

/* 타이머/이동횟수 카드 버튼 2개 세로 배치 */
#timer-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  width: calc(var(--card-width, 69px) * 1.6);
  min-width: calc(var(--card-width, 69px) * 1.6);
  height: 100%;
}

/* 타이머/이동횟수 공용 카드 박스 */
.info-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,120,80,0.3) 0%, transparent 60%),
    linear-gradient(145deg, #b81c1c 0%, #7a0000 50%, #5a0000 100%);
  border: 2px solid rgba(220,80,60,0.6);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,180,160,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  color: #fff;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 24px;
  padding: 0 6px;
}

/* 안쪽 장식선 */
.info-card-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,160,140,0.35);
  border-radius: 4px;
  pointer-events: none;
}

/* 광택 */
.info-card-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255,200,180,0.18) 0%, transparent 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

#timer {
  font-weight: 900;
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.7), 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

#move-count {
  font-weight: 700;
  font-size: clamp(0.72rem, 3vw, 0.9rem);
  color: #ffe8b0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

#status-bar {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: 4px 6px;
  padding-right: max(6px, env(safe-area-inset-right));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  overflow: visible;
}

.bottom-cards-left,
.bottom-cards-right {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 0;
}

/* 상태 메시지 바: 버튼 메뉴 바로 위, 왼쪽 정렬 */
#status-message-bar {
  flex-shrink: 0;
  width: 100%;
  padding: 2px 14px 0;
  box-sizing: border-box;
  min-height: 1.4em;
}
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}


  border: none;
  border-radius: 8px;
  background: #fff;
  color: #124229;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

#auto-foundation-button.ready {
  background: #ffd44f;
  color: #1f2b12;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
}

#auto-foundation-button.ready .card-btn-label,
#auto-foundation-button.ready .card-btn-icon {
  color: #1f2b12;
  text-shadow: none;
  filter: brightness(0);
}

.timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  box-sizing: border-box;
}

/* 하단 고정 타이머 */
.timer-fixed {
  flex-shrink: 0;
  margin-left: auto;
  min-width: 72px;
  width: auto;
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
}


dialog {
  border: none;
  border-radius: 10px;
  padding: 16px;
  width: min(320px, calc(100vw - 24px));
}

dialog::backdrop {
  background: rgb(0 0 0 / 40%);
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
  color: #172217;
}

.records-list {
  color: #172217;
  max-height: 260px;
  overflow: auto;
  padding-left: 20px;
}

.pause-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.pause-actions button {
  padding: 11px 22px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  min-width: 110px;
}

#pause-dialog p {
  color: #172217;
  margin: 8px 0 0;
}

.game-paused main {
  pointer-events: none;
}

.game-paused .card {
  visibility: hidden;
}

.game-paused .slot,
.game-paused .tableau-pile {
  background: rgb(0 0 0 / 25%);
}

main {
  padding: 8vh 20px 4px 20px;
  max-width: 100%;
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.top-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  margin-left: calc(var(--card-width) * 0.5);
  flex-wrap: nowrap;
}

.zone-group {
  flex: 0 0 auto;
  min-width: auto;
}

.slots,
.tableau {
  display: grid;
  gap: var(--card-gap);
}

.slots {
  grid-template-columns: repeat(4, var(--card-width));
}

.tableau {
  grid-template-columns: repeat(8, var(--card-width));
  align-items: flex-start;
}

.slot,
.tableau-pile {
  width: var(--card-width);
  border: 1px solid rgba(180,140,60,0.4);
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  position: relative;
}

/* 프리셀 슬롯: card.png 질감 (빈 슬롯) */
#free-cells .slot {
  background: url('images/card.png') center / cover no-repeat;
  opacity: 0.6;
  border: 1px solid rgba(160,120,40,0.5);
}
#free-cells .slot:has(.card) {
  opacity: 1;
  background: none;
}

/* 파운데이션 슬롯: 프리셀과 동일하게 card.png 사용 */
#foundations .slot {
  background: url('images/card.png') center / cover no-repeat;
  opacity: 0.6;
  border: 1px solid rgba(160,120,40,0.5);
}
#foundations .slot:has(.card) {
  opacity: 1;
  background: none;
}

.foundation-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(120,80,15,0.55);
  text-shadow: 0 1px 0 rgba(255,220,150,0.25);
  pointer-events: none;
}

.slot {
  height: var(--card-height);
}

.tableau-pile {
  min-height: calc(var(--card-height) + var(--pile-offset) * 3);
}

.tableau-pile .card {
  position: absolute;
  left: 0;
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 8px;
  background: url('images/card.png') center center / cover no-repeat;
  border: 1px solid rgba(160,120,40,0.7);
  box-shadow: 0 3px 6px rgb(0 0 0 / 22%);
  color: var(--text-dark);
  font-weight: 800;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.card.red {
  color: #c01818;
}

.card .corner {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 0.92;
  font-size: 1.95rem;
  letter-spacing: -0.04em;
}

.card .corner .rank {
  font-size: 1em;
}

.card .corner .suit {
  font-size: 0.8em;
  margin-top: 0.08em;
}

.card .center {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-60%, -60%);
  font-size: 2.55rem;
  line-height: 1;
}

/* ─── 왕 카드(J/Q/K) 이미지 ─── */
.card .royal-center {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 73.8%;
  height: 82.8%;
  font-size: 0;
  line-height: 0;
  display: block;
  z-index: 1;
  left: auto;
  top: auto;
  transform: none;
  pointer-events: none;
  background: transparent;
}

.card .royal-center .royal-art {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.card .royal-center .royal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  background: transparent;
  /* border-radius, box-shadow 제거 → 투명 PNG 그대로 표시 */
}

.card .bottom {
  bottom: 3px;
  transform: rotate(180deg);
}

.card .corner:not(.bottom) {
  top: 3px;
}

.card.clickable {
  cursor: pointer;
}

.card.selected {
  outline: 3px solid #ffd95e;
  outline-offset: -2px;
}

#status {
  flex: 1;
  min-height: 1.8em;
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  :root {
    --card-width: 62px;
    --card-height: 74px;
    --pile-offset: 24px;
    --card-gap: 8px;
  }

  .top-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 배틀 모드: 모바일에서도 가로 배치 유지 */
  body.battle-active .top-row {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    margin-left: 0;
  }

  body.battle-active .center-zones {
    gap: 6px;
  }

  .card {
    padding: 0;
  }

  .card .corner {
    font-size: 1.06rem;
  }


  main {
    padding: 8vh 10px 4px 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  #status-bar {
    padding: 4px 12px 8px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    font-size: 0.85rem;
  }
  #status {
    font-size: 0.85rem;
  }
}

/* ─── 모바일: 카드를 화면 너비에 맞게 최대화 ─────────────────── */
/* game-viewport = 100vw, main padding = 6px 양쪽, gap = 2px × 7칸 */
@media (max-width: 480px) {
  :root {
    --card-gap: 2px;
    --card-width: calc((100vw - 12px - 14px) / 8);
    --card-height: calc(var(--card-width) * 1.42);
    --pile-offset: 18px;
  }

  main {
    padding: 8vh 6px 4px 6px;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  /* 카드 숫자 크기: 카드 너비 비례 */
  .card .corner {
    font-size: clamp(0.75rem, 3.2vw, 1.1rem);
    padding: 1px 2px;
    line-height: 1.1;
  }

  .card .center {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  /* top-row 간격 최소화 */
  .top-row {
    gap: 4px;
    margin-bottom: 6px;
    margin-left: calc(var(--card-width) * 0.5);
  }

  .zone-group h2 {
    font-size: 0.7rem;
    margin-bottom: 3px;
  }

  .tableau-zone {
    margin-top: 6px;
  }

  .tableau-zone h2 {
    font-size: 0.7rem;
  }
}

/* 소형 기기(390px 이하)도 동일 공식 자동 적용 — 별도 오버라이드 불필요 */
@media (max-width: 390px) {
  :root {
    --pile-offset: 15px;
  }
}

.foundation-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  font-weight: 700;
  color: rgb(0 0 0 / 32%);
}

.tableau-zone {
  margin-top: 4vh;
}

.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.drag-ghost .card {
  position: absolute;
  cursor: none;
}

body.is-dragging,
body.is-dragging *,
body.is-dragging *::before,
body.is-dragging *::after {
  cursor: none !important;
  user-select: none !important;
}

.card {
  -webkit-user-drag: none;
  user-drag: none;
}

/* 모바일 pull-to-refresh 방지 */
body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

.tableau-pile,
.slot,
.card {
  touch-action: none;
}

#animation-speed-slider {
  cursor: pointer;
}

#animation-speed-value {
  font-weight: bold;
  color: #4CAF50;
  min-width: 40px;
  text-align: right;
}

.card.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

.card.dragging::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(76, 175, 80, 0.2);
  border: 2px solid #4CAF50;
  border-radius: 8px;
  pointer-events: none;
}

/* ===== kingdom-map-dialog 반응형 스타일 ===== */
#kingdom-map-dialog {
  border: none;
  border-radius: 15px;
  padding: 0;
  overflow: visible;
}

#kingdom-map-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

#map-dialog-content {
  padding: 20px;
  background: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* PC 레이아웃 (900px 이상) */
@media (min-width: 900px) {
  #kingdom-map-dialog {
    width: 600px;
    height: 85vh;
    max-height: 900px;
  }

  #map-dialog-content {
    width: 600px;
    height: 85vh;
    max-height: 900px;
  }

  #map-container {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid #2e7d32;
    border-radius: 10px;
    background: #f9f9f9;
    box-sizing: border-box;
    min-height: 300px;
  }

  #kingdom-map-img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 모바일 레이아웃 (900px 미만) */
@media (max-width: 899px) {
  #kingdom-map-dialog {
    width: 90vw;
    max-width: 500px;
    height: 80vh;
    max-height: 800px;
  }

  #map-dialog-content {
    width: 90vw;
    max-width: 500px;
    height: 80vh;
    max-height: 800px;
  }

  #map-container {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid #2e7d32;
    border-radius: 10px;
    background: #f9f9f9;
    box-sizing: border-box;
    min-height: 200px;
  }

  #kingdom-map-img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
  }
}

#map-container::-webkit-scrollbar {
  width: 12px;
}

#map-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#map-container::-webkit-scrollbar-thumb {
  background: #2e7d32;
  border-radius: 10px;
}

#map-container::-webkit-scrollbar-thumb:hover {
  background: #1b5e20;
}

#map-container {
  scrollbar-color: #2e7d32 #f1f1f1;
  scrollbar-width: thin;
}

/* ===== 왕국 진행도 다이얼로그 ===== */
#kingdom-progress-dialog {
  border: none;
  border-radius: 15px;
  padding: 0;
  width: min(500px, calc(100vw - 40px));
}

#kingdom-progress-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

#progress-dialog-content {
  animation: slideUpDialog 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpDialog {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moveArrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(10px);
    opacity: 0.7;
  }
}

@keyframes cardScale {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#from-card-suit, #from-card-name {
  animation: cardScale 0.5s ease-out;
}

#to-card-suit, #to-card-name {
  animation: cardScale 0.5s ease-out 0.3s both;
}

#movement-arrow {
  animation: moveArrow 1.5s ease-in-out infinite;
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  #kingdom-progress-dialog {
    width: min(90vw, 400px);
  }
  
  #progress-dialog-content {
    padding: 20px;
    min-width: auto;
  }
}

/* ===== 최종 승리 다이얼로그 ===== */
#kingdom-complete-dialog {
  border: none;
  border-radius: 15px;
  padding: 0;
  width: min(520px, calc(100vw - 40px));
}

#kingdom-complete-dialog::backdrop {
  background: rgb(0 0 0 / 70%);
  animation: fadeIn 0.4s ease-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-30px);
    opacity: 0.6;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 50px rgba(255, 215, 0, 0.9), 0 4px 25px rgba(0, 0, 0, 0.7);
  }
}

#mission-complete-text {
  animation: slideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), pulse-glow 2s ease-in-out infinite 0.8s !important;
}

#complete-confirm-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
}

#complete-confirm-button:active {
  transform: translateY(-1px);
}

/* 모바일 반응형 갤럭시s10 (~600px) */
@media (max-width: 600px) {
  :root {
    --card-gap: 3px;
    --card-width: calc((100vw - 8px - 21px) / 8); /* padding4×2 + gap3×7 = 29px */
    --card-height: calc(var(--card-width) * 1.42);
    --pile-offset: 20px;
  }

  #kingdom-complete-dialog {
    width: min(90vw, 380px);
  }
  
  #complete-dialog-content {
    padding: 30px 20px;
  }
  
  #mission-complete-text {
    font-size: 3rem;
  }
  
  #complete-dialog-content h2 {
    font-size: 1.4rem;
  }
  
  #complete-dialog-content p {
    font-size: 1.1rem;
  }

  .card .center {
    font-size: 1.65rem;
  }
  
  .card .corner {
    font-size: 1.35rem;
  }
}

/* 모바일 반응형 아이폰x (~379px) — 동일 공식, pile-offset만 조정 */
@media (max-width: 379px) {
  :root {
    --pile-offset: 14px;
    /* card-width/height/gap은 480px 블록 calc 공식으로 자동 적용 */
  }
  #kingdom-complete-dialog {
    width: min(70vw, 250px);
  }
  
  #complete-dialog-content {
    padding: 30px 20px;
  }
  
  #mission-complete-text {
    font-size: 3rem;
  }
  
  #complete-dialog-content h2 {
    font-size: 1.4rem;
  }
  
  #complete-dialog-content p {
    font-size: 1.1rem;
  }

  .card .center {
    font-size: 1.25rem;
  }
  
  .card .corner {
    font-size: 1.25rem;
  }
}

/* iOS 터치 보장 - 로비 버튼 */
.lobby-list-actions button,
#lobby-nick-confirm-button,
#lobby-cancel-button,
#lobby-cancel-button-2,
#room-start-button,
#room-leave-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  user-select: none;
  -webkit-user-select: none;
}
/* =========================================
   상대방 파운데이션 카드 날아오기 애니메이션
   ========================================= */

/* =========================================
   상대방 파운데이션 카드 날아오기 애니메이션
   ========================================= */

@keyframes opponentCardFall {
  0% {
    opacity: 0;
    transform: perspective(600px) translateZ(500px) rotateX(var(--fall-rx)) rotateY(var(--fall-ry)) rotateZ(var(--fall-rz));
  }
  12% { opacity: 1; }
  78% {
    transform: perspective(600px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(calc(var(--fall-rz) * 0.03));
  }
  86% {
    transform: perspective(600px) translateZ(-18px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.08, 0.93);
  }
  93% {
    transform: perspective(600px) translateZ(8px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.98, 1.03);
  }
  100% {
    opacity: 0;
    transform: perspective(600px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }
}

@keyframes opponentLandFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  18%  { opacity: 1; transform: scale(1.0); }
  55%  { opacity: 0.5; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.2); }
}

@keyframes opponentSlotPulse {
  0%   { box-shadow: 0 0 0px 0px rgba(255, 255, 200, 0.0); transform: scale(1); }
  30%  { box-shadow: 0 0 18px 6px rgba(255, 255, 180, 0.8); transform: scale(1.12); }
  60%  { box-shadow: 0 0 10px 3px rgba(255, 248, 150, 0.5); transform: scale(1.06); }
  100% { box-shadow: 0 0 0px 0px rgba(255, 255, 180, 0.0); transform: scale(1); }
}

.opponent-slot-pulse {
  animation: opponentSlotPulse 0.7s ease-out forwards !important;
}

.opponent-flying-card {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #252525;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: opponentCardFall var(--fall-duration, 0.9s) cubic-bezier(0.25, 0.0, 0.45, 1.0) forwards;
}

.opponent-flying-card .ofc-corner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;
  font-size: 1.85rem;
  letter-spacing: -0.04em;
}
.opponent-flying-card .ofc-corner .ofc-rank { font-size: 1em; }
.opponent-flying-card .ofc-corner .ofc-suit { font-size: 0.7em; margin-top: 0.05em; }
.opponent-flying-card .ofc-corner-bottom { align-self: flex-end; transform: rotate(180deg); }
.opponent-flying-card .ofc-center {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-60%, -60%);
  font-size: 2.55rem;
  line-height: 1;
}

.opponent-land-flash {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 45% at 50% 85%,
    rgba(255, 255, 220, 0.95) 0%,
    rgba(255, 252, 180, 0.7) 25%,
    rgba(255, 248, 140, 0.35) 55%,
    transparent 100%
  );
  animation: opponentLandFlash 0.65s ease-out forwards;
}

@keyframes opponentStatusHighlight {
  0%   { background: rgba(255,60,60,0.22); color: #ff6b6b; transform: scale(1.04); }
  50%  { background: rgba(255,100,60,0.15); color: #ff9a6b; }
  100% { background: transparent; color: inherit; transform: scale(1); }
}

.status-opponent-alert {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: opponentStatusHighlight 2.5s ease-out forwards;
  color: #ff6b6b;
}

/* =========================================
   스플래시 / 타이틀 화면
   ========================================= */

#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  background: #000;
  overflow: hidden;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* 힌트 하단 고정 - 중복 정의 제거, 아래 상세 정의 사용 */

#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

#splash-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  animation: splashImageIn 0.8s ease-out both;
}

@keyframes splashImageIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

#splash-title {
  position: absolute;
  z-index: 2;
  top: 65%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: clamp(2.8rem, 10vw, 5.5rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #fff;
  text-shadow:
    0 0 30px rgba(255, 200, 60, 0.95),
    0 0 60px rgba(255, 140, 0, 0.8),
    0 0 100px rgba(255, 80, 0, 0.6),
    3px 3px 0 #7a3000,
    -1px -1px 0 #7a3000,
    1px -1px 0 #7a3000,
    -1px 1px 0 #7a3000;
  animation: splashTitleIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes splashTitleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(-50% + 30px)) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); }
}

#splash-click-hint {
  position: absolute;
  z-index: 2;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  font-size: clamp(0.95rem, 3vw, 1.3rem);
  font-weight: 700;
  color: rgba(255, 240, 180, 0.95);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 0 12px rgba(255,200,60,0.8), 0 2px 6px rgba(0,0,0,0.7);
  white-space: nowrap;
  animation: splashHintIn 1s ease 0.8s both, splashPulse 2s ease-in-out 1.8s infinite;
}

@keyframes splashHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes splashPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%); text-shadow: 0 0 12px rgba(255,200,60,0.8), 0 2px 6px rgba(0,0,0,0.7); }
  50%       { opacity: 0.6; transform: translateX(-50%); text-shadow: 0 0 24px rgba(255,200,60,1.0), 0 2px 6px rgba(0,0,0,0.7); }
}

/* PC 화면에서 타이틀 위치 조정 */
@media (min-width: 768px) and (min-height: 500px) {
  #splash-title {
    top: 55%;
    font-size: clamp(3rem, 7vw, 5.5rem);
  }
}

/* 모바일에서 타이틀 한 칸 아래로 */
@media (max-width: 767px) {
  #splash-title {
    top: 72%;
  }
}

/* BGM 볼륨 버튼 */
.bgm-vol-btn {
  padding: 8px 4px;
  font-size: 0.78rem;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  transition: all 0.18s ease;
  font-weight: 600;
}
.bgm-vol-btn:hover {
  border-color: #888;
  background: #e8e8e8;
}
.bgm-vol-btn.active {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
  box-shadow: 0 0 0 2px rgba(46,125,50,0.25);
}

.sfx-vol-btn {
  padding: 8px 4px;
  font-size: 0.78rem;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  transition: all 0.18s ease;
  font-weight: 600;
}
.sfx-vol-btn:hover {
  border-color: #888;
  background: #e8e8e8;
}
.sfx-vol-btn.active {
  border-color: #1565c0;
  background: #e3f2fd;
  color: #0d47a1;
  box-shadow: 0 0 0 2px rgba(21,101,192,0.25);
}

.speed-btn {
  padding: 8px 4px;
  font-size: 0.78rem;
  border-radius: 8px;
  border: 2px solid #ccc;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  transition: all 0.18s ease;
  font-weight: 600;
}
.speed-btn:hover {
  border-color: #888;
  background: #e8e8e8;
}
.speed-btn.active {
  border-color: #6a1b9a;
  background: #f3e5f5;
  color: #4a148c;
  box-shadow: 0 0 0 2px rgba(106,27,154,0.25);
}

/* =========================================
   배틀 캐릭터 사이드 패널
   ========================================= */

/* ─── top-row: 배틀 모드만 flex stretch ─── */
body.battle-active .top-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-bottom: 0;
  margin-left: 0;
}
body.battle-active .center-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
body:not(.battle-active) .top-row {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}
body:not(.battle-active) .center-zones {
  display: contents;
}

/* ─── 솔로 모드: 액자 위치에 절대배치 ─── */
/* playground.png 1024x1536 기준:
   x: 563~875px → left=55%, width=30.5%
   y: 18~395px  → top=1.2%, height=24.5% (of vh) */
main {
  position: relative;
}

.solo-char-panel {
  position: absolute;
  left: 62%;
  top: 4%;
  width: 30.5%;
  height: 24.5vh;
  display: block;
  overflow: visible;
  z-index: 10;
  pointer-events: none;
  background: none;
  border: none;
  box-shadow: none;
}

/* 액자 내부 캐릭터 영역 */
.solo-char-bg-only {
  position: absolute;
  inset: 10% 10.2% 8.9% 10.6%;
  overflow: hidden;
  border-radius: 3px;
  z-index: 1;
}

/* frame.png 오버레이 */
.solo-char-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* PC/태블릿: % 기반 배치 유지 (동일 비율) */
@media (min-width: 481px) {
  body:not(.battle-active) .center-zones {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
    flex: 0 0 auto;
  }

  body:not(.battle-active) .top-row {
    justify-content: flex-start;
  }

  body:not(.battle-active) main {
    padding-right: 12px;
  }

  .solo-char-panel {
    left: 62%;
    top: 4%;
    width: 30.5%;
    height: 24.5vh;
    right: auto;
    pointer-events: auto;
  }
}

/* PC (861px+): 카드 중앙 정렬 시 액자 위치를 카드 영역 기준으로 재조정 */
@media (min-width: 861px) {
  /* 카드 콘텐츠 너비: 8열 = 8*69+7*10 = 622px, 패딩 40px → 총 ~662px */
  /* 액자를 카드 영역 오른쪽 끝 바깥(배경 프레임 위치)에 오버레이 */
  .solo-char-panel {
    /* 화면 중앙 기준: 50% + 카드너비/2 + 오프셋 */
    left: calc(50% + 320px);
    top: 4%;
    width: 22vw;
    max-width: 240px;
    min-width: 150px;
    height: 28vh;
    transform: none;
  }
}


.solo-char-panel.hidden {
  display: none !important;
}

/* ─── 캐릭터 패널: flex:1로 남는 공간 균등 채움 ─── */
.battle-char-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 0;                  /* 좌우 동일하게 남은 공간 채움 */
  min-width: 60px;
  max-width: 140px;             /* 너무 커지지 않도록 */
}
.battle-char-side.hidden {
  display: none !important;
}

/* ─── 닉네임: 액자 내부 상단 오버레이 ─── */
.battle-char-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* ─── 흰 배경 프레임: flex:1로 사이드 전체 높이 채움 ─── */
.battle-char-bg {
  flex: 1;
  min-height: 80px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 14px rgba(0,0,0,0.5),
              0 0 0 2px rgba(255,255,255,0.2);
}

/* ─── 캐릭터 이미지 ─── */
.battle-char-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  image-rendering: auto;
  transition: transform 0.12s;
}

/* 솔로 캐릭터: 박스 전체 cover 크롭, 상단 기준 */
.solo-char-bg-only .battle-char-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 135%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.battle-char-img.char-shake {
  animation: charShake 0.35s ease-out;
}

/* ─── 상대 파운데이션 오버레이 ─── */
.battle-opp-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 4px;
  z-index: 2;
}
.battle-opp-overlay.hidden {
  display: none !important;
}
.battle-opp-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  width: 100%;
}
.battle-opp-slots .slot {
  width: auto !important;
  height: auto !important;
  min-height: 26px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.battle-opp-slots .card { display: none !important; }
.battle-opp-slots .opponent-back-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.battle-opp-slots .opponent-back-stack .opp-suit {
  font-size: 0.76rem;
}
.battle-opp-slots .opponent-back-stack .opp-count {
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ─── 진행도 행 — top-row 바로 아래, 패널과 픽셀 단위 정렬 ─── */
.battle-progress-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* top-row와 동일한 gap */
  gap: 8px;
  margin-top: 3px;
  margin-bottom: 8px;
}
.battle-progress-row.hidden {
  display: none !important;
}
/* 중앙 스페이서: center-zones와 동일한 폭 = 4슬롯 */
.battle-progress-spacer {
  flex: 0 0 auto;
  width: calc(4 * var(--card-width) + 3 * var(--card-gap));
}
/* 진행도 셀: 캐릭터 패널과 동일하게 flex:1 */
.battle-progress-cell {
  flex: 1 1 0;
  min-width: 60px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.battle-progress-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
}
.battle-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 5px;
  transition: width 0.5s ease-out;
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
}
.battle-progress-bar-opp {
  background: linear-gradient(90deg, #f87171, #ef4444);
  box-shadow: 0 0 6px rgba(248,113,113,0.5);
}
.battle-progress-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

/* ─── 애니메이션 ─── */
@keyframes charShake {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-7px) rotate(-4deg); }
  40%  { transform: translateX(7px) rotate(4deg); }
  60%  { transform: translateX(-4px) rotate(-2deg); }
  80%  { transform: translateX(3px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.char-hit-flash { animation: charHitFlash 0.45s ease-out; }
@keyframes charHitFlash {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(3) saturate(0.2) sepia(1) hue-rotate(-30deg); }
  55%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* ─── 날아오는 카드 ─── */
.battle-flying-card {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #252525;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  overflow: hidden;
}
.battle-flying-card .ofc-corner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}
.battle-flying-card .ofc-corner .ofc-rank { font-size: 1em; }
.battle-flying-card .ofc-corner .ofc-suit { font-size: 0.7em; margin-top: 0.05em; }
.battle-flying-card .ofc-corner-bottom { align-self: flex-end; transform: rotate(180deg); }
.battle-flying-card .ofc-center {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-60%, -60%);
  font-size: 2rem;
  line-height: 1;
}

/* ─── 반응형: gap만 조정, 폭은 flex:1이 자동 처리 ─── */
@media (max-width: 860px) {
  body.battle-active .top-row {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-bottom: 0;
    margin-left: 0;
  }
  .battle-progress-row { gap: 6px; }
  .battle-opp-slots .slot { min-height: 22px; }
  .battle-opp-slots .opponent-back-stack .opp-suit { font-size: 0.68rem; }
  .battle-opp-slots .opponent-back-stack .opp-count { font-size: 0.55rem; }

  /* solo-char-panel 크기는 위의 (min-width:481px) and (max-width:860px) 규칙으로 처리 */
}

@media (max-width: 480px) {
  .battle-char-name { font-size: 0.6rem; padding: 2px 4px; }
  .battle-opp-overlay { padding: 3px; }
  .battle-opp-slots { gap: 2px; }
  .battle-opp-slots .slot { min-height: 18px; }
  .battle-opp-slots .opponent-back-stack .opp-suit { font-size: 0.6rem; }
  .battle-opp-slots .opponent-back-stack .opp-count { font-size: 0.5rem; }
  .battle-progress-label { font-size: 0.58rem; }
}

/* ─── 초대 링크 섹션 ─────────────────────────────────────── */
.invite-section {
  background: #f0f9f1;
  border: 1px solid #a5d6a7;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  text-align: center;
}

.invite-desc {
  font-size: 0.85rem;
  color: #388e3c;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.invite-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.invite-btn {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.invite-btn:hover { opacity: 0.85; }

.kakao-btn {
  background: #FEE500;
  color: #3C1E1E;
}

.copy-btn {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

/* ─── 모드 선택 배경 반응형 ─────────────────────────────────── */
@media (max-width: 768px) {
  #mode-screen {
    background-size: 250%;
    background-position: 48% 15%;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 120px;
  }
}

@media (max-width: 480px) {
  #mode-screen {
    background-size: 120%;
    background-position: 48% 30%;
  }
}

/* ─── 헤더 버튼 반응형 ─────────────────────────────────────── */
@media (max-width: 480px) {
  .controls {
    gap: 6px;
  }
  .card-btn {
    width: 75px;
  }
  .card-btn-icon {
    font-size: 1.1rem;
  }
  .card-btn-label {
    font-size: 0.6rem;
  }
  .bottom-cards-left,
  .bottom-cards-right {
    gap: 4px;
  }
  #mode-back-button {
    min-width: 84px;
    width: 84px;
    font-size: 0.75rem;
  }
  .timer-fixed {
    min-width: 62px;
    width: 62px;
    padding: 3px 8px;
    font-size: 0.82rem;
    right: max(12px, env(safe-area-inset-right));
  }
}

@media (max-width: 390px) {
  .card-btn {
    width: 68px;
  }
  .card-btn-icon {
    font-size: 1rem;
  }
  .card-btn-label {
    font-size: 0.55rem;
  }
  #mode-back-button {
    min-width: 74px;
    width: 74px;
    font-size: 0.72rem;
  }
  .timer-fixed {
    min-width: 56px;
    width: 56px;
    padding: 3px 6px;
    font-size: 0.78rem;
  }
}

/* ===== game-viewport 추가 스타일 ===== */

/* main, header 배경 투명 */
main { background: transparent; }
header { background: transparent; }

/* 하단 status 메시지 */
#status {
  color: #ffe4a0;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8);
  font-weight: 700;
  font-size: 0.78rem;
  width: 100%;
  text-align: left;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.35;
}

/* game-paused 오버레이도 viewport 안에서 */
.game-paused #game-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 5;
  pointer-events: none;
}

/* ─── PC 게임화면 카드 영역 중앙 정렬 (모바일 레이아웃 미영향) ─── */
@media (min-width: 861px) {
  /* 솔로 모드: main을 flex column + 중앙 정렬 */
  body:not(.battle-active) main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* top-row: 자동 좌우 마진 제거 (flex center가 대신 정렬) */
  body:not(.battle-active) .top-row {
    margin-left: 0;
    margin-right: 0;
    width: fit-content;
    justify-content: flex-start;
  }

  /* tableau-zone: 중앙 정렬 */
  body:not(.battle-active) .tableau-zone {
    width: fit-content;
  }

  /* status-message-bar: 카드 너비에 맞게 제한 */
  body:not(.battle-active) #status-message-bar {
    max-width: calc(8 * var(--card-width) + 7 * var(--card-gap) + 28px);
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ─── Diamond 존 앰비언트 keyframes ─── */
@keyframes seagullFly {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }
  25%  { transform: translateX(25vw) translateY(-18px) scaleX(1); }
  50%  { transform: translateX(50vw) translateY(0px) scaleX(1); }
  75%  { transform: translateX(75vw) translateY(-12px) scaleX(1); }
  100% { transform: translateX(105vw) translateY(5px) scaleX(1); }
}
@keyframes seagullFlyRtl {
  0%   { transform: translateX(0) translateY(0) scaleX(-1); }
  25%  { transform: translateX(-25vw) translateY(-14px) scaleX(-1); }
  50%  { transform: translateX(-50vw) translateY(4px) scaleX(-1); }
  75%  { transform: translateX(-75vw) translateY(-10px) scaleX(-1); }
  100% { transform: translateX(-105vw) translateY(0px) scaleX(-1); }
}
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes bubbleRise {
  0%   { opacity: 0;   transform: translateY(0) scale(1); }
  20%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translateY(-38px) scale(1.6); }
}
@keyframes sunrayDrift {
  0%   { opacity: 0;   transform: translateX(-30px) skewX(-18deg); }
  30%  { opacity: 0.18; }
  70%  { opacity: 0.12; }
  100% { opacity: 0;   transform: translateX(60px) skewX(-18deg); }
}

@keyframes emberRise {
  0%   { opacity: 0;    transform: translateY(0)     translateX(0)    scale(1); }
  15%  { opacity: 0.95; }
  60%  { opacity: 0.7;  transform: translateY(-70px) translateX(var(--ex, 8px)) scale(0.85); }
  100% { opacity: 0;    transform: translateY(-120px) translateX(var(--ex, 8px)) scale(0.4); }
}

/* ── 앰비언트 CSS 애니메이션 ── */

/* 반딧불 */
@keyframes fireflyMove {
  0%   { transform: translate(0, 0);     opacity: 0; }
  8%   { opacity: 0.85; }
  25%  { transform: translate(var(--fx1), var(--fy1)); opacity: 0.4; }
  50%  { transform: translate(var(--fx2), var(--fy2)); opacity: 0.9; }
  75%  { transform: translate(var(--fx3), var(--fy3)); opacity: 0.35; }
  92%  { opacity: 0.7; }
  100% { transform: translate(var(--fx4), var(--fy4)); opacity: 0; }
}
.firefly {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: fireflyMove var(--ff-dur) ease-in-out forwards;
}

/* 민들레 홀씨 */
@keyframes dandelionFloat {
  0%   { transform: translate(0,0) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translate(var(--dx), -18vh) rotate(12deg); opacity: 0.85; }
  88%  { opacity: 0.7; }
  100% { transform: translate(var(--dx2), -35vh) rotate(-8deg); opacity: 0; }
}
.dandelion-seed {
  position: absolute;
  pointer-events: none;
  animation: dandelionFloat var(--dd-dur) ease-in-out forwards;
}

/* 날벌레 */
@keyframes bugFly {
  0%   { opacity: 0; }
  6%   { opacity: 0.65; }
  50%  { transform: translateY(var(--by)); }
  94%  { opacity: 0.65; }
  100% { transform: translateX(var(--bx)) translateY(var(--by2)); opacity: 0; }
}
.bug {
  position: absolute;
  pointer-events: none;
  animation: bugFly var(--bug-dur) linear forwards;
}

/* 물고기 점프 */
@keyframes fishJump {
  0%   { transform: translateY(0)             rotate(var(--fr1)); opacity: 0; }
  5%   { opacity: 1; }
  45%  { transform: translateY(var(--fy-top)) rotate(var(--fr2)); opacity: 1; }
  90%  { transform: translateY(0)             rotate(var(--fr3)); opacity: 0.9; }
  100% { transform: translateY(4px)           rotate(var(--fr3)); opacity: 0; }
}
.fish {
  position: absolute;
  pointer-events: none;
  transform-origin: center center;
  animation: fishJump var(--fish-dur) ease-in-out forwards;
}

/* 돌풍 낙엽 */
@keyframes gustLeaf {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
  6%   { opacity: 0.9; }
  88%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translate(var(--gx), var(--gy)) rotate(var(--gr)); }
}
.gust-leaf {
  position: absolute;
  border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
  pointer-events: none;
  animation: gustLeaf var(--gl-dur) cubic-bezier(0.25,0.1,0.4,1) forwards;
}

/* 낙엽 */
@keyframes leafFall {
  0%   { transform: translate(0,0) rotate(0deg);   opacity: 0; }
  5%   { opacity: 0.85; }
  80%  { opacity: 0.8; }
  100% { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: 0; }
}
.leaf {
  position: absolute;
  border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
  pointer-events: none;
  animation-name: leafFall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* 클로버 잎 */
@keyframes cloverFloat {
  0%   { opacity:0; transform:translate(0,0) rotate(0deg); }
  6%   { opacity:0.9; }
  88%  { opacity:0.8; }
  100% { opacity:0;   transform:translate(var(--cl-tx),var(--cl-ty)) rotate(var(--cl-rot)); }
}

/* 나비 */
@keyframes butterflyFly {
  0%   { opacity:0; transform:translate(0,0); }
  5%   { opacity:0.9; }
  30%  { transform:translate(calc(var(--bf-tx)*0.3), calc(var(--bf-ty)*0.3 - 3vh)); }
  60%  { transform:translate(calc(var(--bf-tx)*0.65), calc(var(--bf-ty)*0.6 + 2vh)); }
  90%  { opacity:0.85; }
  100% { opacity:0; transform:translate(var(--bf-tx),var(--bf-ty)); }
}

/* 빛 입자 상승 */
@keyframes lightParticleRise {
  0%   { opacity:0;   transform:translate(0,0) scale(1); }
  12%  { opacity:0.9; }
  70%  { opacity:0.6; transform:translate(var(--lp-dx), -35vh) scale(0.7); }
  100% { opacity:0;   transform:translate(var(--lp-dx), -55vh) scale(0.3); }
}

/* 별빛 낙하 */
@keyframes starDustFall {
  0%   { opacity:0;    transform:translate(0, 0) scale(1); }
  8%   { opacity:0.9; }
  70%  { opacity:0.6;  transform:translate(calc(var(--sd-dx)*0.6), 55vh) scale(0.8); }
  100% { opacity:0;    transform:translate(var(--sd-dx), 100vh) scale(0.4); }
}

/* 달빛 파문 */
@keyframes moonRipple {
  0%   { opacity:0.8; transform:scale(1);    border-color:rgba(100,200,255,0.7); }
  60%  { opacity:0.3; transform:scaleX(18) scaleY(9); border-color:rgba(100,200,255,0.2); }
  100% { opacity:0;   transform:scaleX(28) scaleY(14); border-color:transparent; }
}

/* 이슬비 */
@keyframes drizzleFall {
  0%   { opacity:0;   transform:translateY(0) rotate(var(--dz-ang)); }
  8%   { opacity:1; }
  90%  { opacity:0.7; }
  100% { opacity:0;   transform:translateY(102vh) rotate(var(--dz-ang)); }
}

/* 맵 마커 */
@keyframes mapMarkerPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.25; }
}

/* Diamond 존 */
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes bubbleRise {
  0%   { opacity: 0;   transform: translateY(0) scale(1); }
  20%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translateY(-38px) scale(1.6); }
}
@keyframes emberRise {
  0%   { opacity: 0;    transform: translateY(0)     translateX(0)    scale(1); }
  15%  { opacity: 0.95; }
  60%  { opacity: 0.7;  transform: translateY(-70px) translateX(var(--ex, 8px)) scale(0.85); }
  100% { opacity: 0;    transform: translateY(-120px) translateX(var(--ex, 8px)) scale(0.4); }
}
@keyframes seagullFly {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }
  25%  { transform: translateX(25vw) translateY(-18px) scaleX(1); }
  50%  { transform: translateX(50vw) translateY(0px) scaleX(1); }
  75%  { transform: translateX(75vw) translateY(-12px) scaleX(1); }
  100% { transform: translateX(105vw) translateY(5px) scaleX(1); }
}
@keyframes seagullFlyRtl {
  0%   { transform: translateX(0) translateY(0) scaleX(-1); }
  25%  { transform: translateX(-25vw) translateY(-14px) scaleX(-1); }
  50%  { transform: translateX(-50vw) translateY(4px) scaleX(-1); }
  75%  { transform: translateX(-75vw) translateY(-10px) scaleX(-1); }
  100% { transform: translateX(-105vw) translateY(0px) scaleX(-1); }
}
@keyframes sunrayDrift {
  0%   { opacity: 0;   transform: translateX(-30px) skewX(-18deg); }
  30%  { opacity: 0.18; }
  70%  { opacity: 0.12; }
  100% { opacity: 0;   transform: translateX(60px) skewX(-18deg); }
}

/* ── 등불 글로우 ── */
.lantern-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,80,0.55) 0%, rgba(255,140,20,0.25) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: lanternFlicker 2.8s ease-in-out infinite;
  display: none;
}
@keyframes lanternFlicker {
  0%,100% { opacity: 0.85; transform: translate(-50%,-50%) scale(1);   }
  30%     { opacity: 1;    transform: translate(-50%,-50%) scale(1.12); }
  55%     { opacity: 0.7;  transform: translate(-50%,-50%) scale(0.94); }
  75%     { opacity: 0.95; transform: translate(-50%,-50%) scale(1.06); }
}

/* ── 앉는 새 ── */
.bird {
  position: absolute;
  pointer-events: none;
}
.bird-body {
  width: 10px;
  height: 6px;
  background: rgba(40,30,20,0.85);
  border-radius: 50%;
  position: relative;
}
.bird-wing-l,
.bird-wing-r {
  position: absolute;
  width: 8px;
  height: 3px;
  background: rgba(40,30,20,0.8);
  border-radius: 50% 50% 0 0;
  top: -2px;
  transform-origin: bottom center;
}
.bird-wing-l { left: -6px; transform: rotate(-20deg); }
.bird-wing-r { right: -6px; transform: rotate(20deg); }

@keyframes birdFlyIn {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
}
@keyframes birdSit {
  0%,100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg); }
  50%     { transform: translate(var(--tx), var(--ty)) scale(1) rotate(3deg); }
}
@keyframes birdFlyOut {
  0%   { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--tx) - 120vw), calc(var(--ty) - 20vh)) scale(0.3); opacity: 0; }
}

/* 게 등장 흔들림 */
@keyframes crabWiggle {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  25%  { transform: translate(-50%,-50%) rotate(10deg); }
  50%  { transform: translate(-50%,-50%) rotate(-10deg); }
  75%  { transform: translate(-50%,-50%) rotate(10deg); }
  100% { transform: translate(-50%,-50%) rotate(0deg); }
}

/* 빛줄기 */
@keyframes godRayFade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* 벚꽃잎 낙하 */
@keyframes cherryBlossomFall {
  0%   { transform: translate(0, 0) rotate(0deg);             opacity: 0; }
  5%   { opacity: 0.9; }
  50%  { transform: translate(calc(var(--drift) * 0.5), 50vh) rotate(calc(var(--spin) * 0.5)); opacity: 0.85; }
  90%  { opacity: 0.7; }
  100% { transform: translate(var(--drift), 108vh) rotate(var(--spin)); opacity: 0; }
}