/* 교보손글씨 2019 (KyoboHandwriting 2019) 웹폰트 - 부드럽고 동글한 무료 손글씨체 */
@font-face {
  font-family: 'KyoboHand';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-main: #f0f4ff;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --secondary: #0ea5e9;
  --zone-a: #2563eb;
  --zone-a-light: #dbeafe;
  --zone-a-border: #1d4ed8;
  --zone-b: #e11d48;
  --zone-b-light: #ffe4e6;
  --zone-b-border: #be123c;
  --zone-center: #64748b;
  --gold: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --card-bg: #ffffff;
  --font-display: 'KyoboHand', cursive, sans-serif;
  --font-sans: 'KyoboHand', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  letter-spacing: -0.2px;
  background: var(--bg-main);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 학생 전용 모드일 때 선생님 전용 메뉴만 숨기고 광장 무대와 학생 리모컨 탭은 자유롭게 이용 가능 */
body.student-only-mode [data-tab="editor"],
body.student-only-mode #openInviteModalBtn,
body.student-only-mode #toggleSoundBtn,
body.student-only-mode .teacher-control-bar {
  display: none !important;
}

.hidden {
  display: none !important;
}

/* =========================================
   상단 네비게이션 바 (모던 미니멀 - 박스형태 배제)
   ========================================= */
.topbar {
  background: #0f172a;
  color: #f8fafc;
  padding: 0 28px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-title {
  font-family: var(--font-sans);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #ffffff;
}

/* 카테고리 5개 (박스 없이 깔끔한 텍스트 네비게이션) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.nav-item {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0 14px;
  height: 100%;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  border-radius: 4px;
  outline: none;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.nav-item.mode-tab.active {
  color: #ffffff;
  font-weight: 600;
}

/* 박스 형태 대신 밑줄 인디케이터로만 단정하게 활성 상태 표시 */
.nav-item.mode-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2.5px;
  background: #6366f1;
  border-radius: 2px 2px 0 0;
}

/* =========================================
   공통 버튼 & 입력 요소
   ========================================= */
.btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  outline: none;
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background: #4f46e5;
  color: #fff;
}

.btn-primary:hover {
  background: #4338ca;
}

.btn-secondary {
  background: #f1f5f9;
  color: #334155;
}

.btn-secondary:hover {
  background: #e2e8f0;
}

.btn-subtle {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.btn-subtle:hover {
  background: #dcfce7;
}

.btn-ghost {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.btn-ghost:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.btn-warning {
  background: #ea580c;
  color: #fff;
}

.btn-warning:hover {
  background: #c2410c;
}

.btn-gold {
  background: #d97706;
  color: #fff;
}

.btn-gold:hover {
  background: #b45309;
}

.btn-outline-sm {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  padding: 6px 12px;
  font-size: 0.82rem;
}

.btn-outline-sm:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-danger-outline {
  border: 1px solid #fecaca;
  background: #fff;
  color: #e11d48;
}

.btn-danger-outline:hover {
  background: #fff1f2;
}

.btn-giant {
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 10px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.btn-block {
  width: 100%;
}

/* =========================================
   VIEW 전환
   ========================================= */
.view-section {
  display: none;
  flex: 1;
}

.view-section.active {
  display: flex;
  flex-direction: column;
}

/* =========================================
   선생님 상단 컨트롤 바 (과도한 박스 지양, 미니멀 툴바)
   ========================================= */
.teacher-control-bar {
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  padding: 8px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.control-left,
.control-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.select-clean {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.84rem;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
  outline: none;
}

.select-clean:focus {
  border-color: #6366f1;
}

/* 접속 인원 & 생존 인원 (예쁜 파스텔톤 뱃지, 이모지 없음) */
.stats-pastel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.stat-total {
  background: #eef2ff; /* 소프트 파스텔 라벤더 블루 */
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.stat-total strong {
  color: #312e81;
  font-weight: 700;
  font-size: 0.92rem;
}

.stat-alive {
  background: #ecfdf5; /* 은은하고 산뜻한 파스텔 민트 */
  color: #047857;
  border: 1px solid #a7f3d0;
}

.stat-alive strong {
  color: #065f46;
  font-weight: 700;
  font-size: 0.92rem;
}

/* =========================================
   전광판 (문장 & 타이머 보드)
   ========================================= */
.arena-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 28px;
  gap: 14px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.question-board {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 28px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.03);
  position: relative;
}

.board-lobby {
  text-align: center;
  padding: 12px 0 8px;
}

.lobby-badge {
  display: inline-block;
  background: #ede9fe; /* 소프트 파스텔 라벤더 */
  color: #6d28d9;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid #ddd6fe;
  letter-spacing: 0.2px;
}

.lobby-headline {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #1e1b4b;
  margin: 12px 0 18px;
}

.btn-pastel-start {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 42px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pastel-start:hover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.45);
}

.btn-pastel-start:active {
  transform: scale(0.98);
}

.lobby-desc {
  color: #64748b;
  font-size: 0.94rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

.lobby-start-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 문제 출제 보드 */
.board-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.q-badge {
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

.q-category {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 6px;
}

.timer-pill {
  color: #ea580c;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 4px 12px;
  border-radius: 6px;
  background: #fff7ed;
  display: flex;
  align-items: center;
  gap: 4px;
}

.timer-pill.urgent {
  animation: pulseUrgent 0.45s infinite alternate;
  background: #fee2e2;
  color: #dc2626;
}

@keyframes pulseUrgent {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.timer-progress-track {
  width: 100%;
  height: 4px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}

.timer-progress-fill {
  height: 100%;
  width: 100%;
  background: #6366f1;
  transition: width 0.45s linear;
}

.sentence-box {
  font-family: var(--font-sans);
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  color: #0f172a;
  line-height: 1.55;
  margin: 14px 0 10px;
  word-break: keep-all;
}

.blank-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 2px 14px;
  margin: 0 6px;
  border-radius: 8px;
  background: #f8fafc;
  border-bottom: 2.5px solid #6366f1;
  color: #4f46e5;
  font-weight: 700;
  transition: all 0.25s ease;
}

.blank-slot.revealed {
  border-bottom-color: #10b981;
  background: #ecfdf5;
  color: #047857;
  transform: scale(1.04);
}

.sentence-translation {
  text-align: center;
  color: #64748b;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.explanation-banner {
  background: #f8fafc;
  border-left: 3px solid #6366f1;
  border-radius: 4px;
  padding: 8px 14px;
  margin: 12px auto;
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #334155;
}

.exp-tag {
  color: #6366f1;
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

.round-action-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* =========================================
   무대: 구름 위의 둥근 3D 플랫폼 (중앙 광장 + 좌우 대칭 A/B 구역)
   ========================================= */
.stage-sky {
  flex: 1;
  min-height: 540px;
  background: radial-gradient(circle at 50% 15%, #eff6ff 0%, #e0f2fe 45%, #f1f5f9 100%);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e7ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 24px 28px;
  box-shadow: inset 0 2px 14px rgba(255, 255, 255, 0.8), 0 12px 36px rgba(99, 102, 241, 0.06);
  perspective: 1000px;
}

/* 하늘 배경 3D 몽실 구름 클러스터 (참고 이미지 완벽 구현) */
.sky-clouds-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.puff-cloud {
  position: absolute;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 6px 12px rgba(148, 163, 184, 0.2));
  animation: floatCloudDrift 22s ease-in-out infinite alternate;
}

.puff-cloud.cloud-1 {
  top: 18px;
  left: 6%;
  animation-duration: 20s;
}

.puff-cloud.cloud-2 {
  top: 28px;
  right: 8%;
  animation-duration: 25s;
}

.puff-cloud.cloud-3 {
  bottom: 90px;
  right: 22%;
  animation-duration: 18s;
}

.cloud-bubble {
  background: #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(148, 163, 184, 0.22);
}

.puff-cloud .cb1 { width: 44px; height: 32px; }
.puff-cloud .cb2 { width: 56px; height: 42px; margin-left: -16px; margin-top: -8px; z-index: 2; }
.puff-cloud .cb3 { width: 38px; height: 28px; margin-left: -14px; }

@keyframes floatCloudDrift {
  from { transform: translateX(-15px) translateY(0); }
  to { transform: translateX(15px) translateY(-5px); }
}

.stage-status-banner {
  align-self: center;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  padding: 6px 20px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.88rem;
  z-index: 15;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* 3개 구역 3D 플랫폼 컨테이너 (좌우 대칭 구조) */
.platforms-container {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 22px;
  align-items: stretch;
  margin: 18px 0 24px;
  z-index: 5;
}

/* 구름 위의 둥근 3D 아일랜드 플랫폼 공통 */
.platform-zone {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 36px;
  padding: 10px 12px 14px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: islandFloat 4.5s ease-in-out infinite alternate;
}

/* A 플랫폼 (맑은 하늘색) */
.platform-zone.zone-a {
  animation-delay: 0s;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  box-shadow: 0 12px 0 #7dd3fc, 0 20px 30px rgba(14, 165, 233, 0.15);
}

/* 가운데 시작 광장 (구름 위의 둥근 3D 부유섬: 잔디·나무·바위) */
.platform-zone.zone-center {
  animation-delay: 0.8s;
  background: #f4fbe8;
  border: 2px solid #cce899;
  border-radius: 42px;
  box-shadow: 0 14px 0 #a5d365, 0 24px 35px rgba(101, 163, 13, 0.18);
}

/* B 플랫폼 (맑은 파란색 계열) */
.platform-zone.zone-b {
  animation-delay: 1.6s;
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  box-shadow: 0 12px 0 #93c5fd, 0 20px 30px rgba(37, 99, 235, 0.15);
}

@keyframes islandFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* =========================================
   시작 광장 상단 자연 풍경 데코 (파스텔 몽실 나무 & 둥근 바위)
   ========================================= */
.island-scenery {
  position: absolute;
  top: -46px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 14px;
  pointer-events: none;
  z-index: 2;
}

/* 몽실몽실 파스텔 볼 나무 */
.island-tree {
  position: relative;
  width: 48px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.tree-trunk {
  width: 8px;
  height: 18px;
  background: #966b44;
  border-radius: 4px;
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
}

.tree-canopy {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.12),
              inset 2px 2px 4px rgba(255, 255, 255, 0.65),
              0 3px 6px rgba(0, 0, 0, 0.08);
}

.tree-left .canopy-1 {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 35% 35%, #e0f8ce 0%, #b4d8b8 70%, #87be9a 100%);
  top: 6px;
  left: 10px;
  z-index: 2;
}
.tree-left .canopy-2 {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 35%, #c8eddf 0%, #8ec5ba 70%, #68a79b 100%);
  top: 18px;
  left: 2px;
  z-index: 3;
}
.tree-left .canopy-3 {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #ebf9d8 0%, #bde2c4 70%, #9bc4a3 100%);
  top: 16px;
  right: 3px;
  z-index: 1;
}

.tree-right .canopy-1 {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 35% 35%, #e2fbd4 0%, #aedaa5 70%, #83c076 100%);
  top: 8px;
  right: 10px;
  z-index: 2;
}
.tree-right .canopy-2 {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, #d5f4eb 0%, #94cdc5 70%, #6db3a9 100%);
  top: 18px;
  right: 0px;
  z-index: 3;
}

/* 둥근 로우폴리 바위 무리 */
.island-rocks {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  margin-bottom: 2px;
}

.island-rock {
  border-radius: 12px 12px 4px 4px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.7),
              0 3px 6px rgba(0, 0, 0, 0.1);
}

.rock-1 {
  width: 20px;
  height: 26px;
  background: linear-gradient(135deg, #d8d3ca 0%, #b8b2a7 60%, #9a9489 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.rock-2 {
  width: 26px;
  height: 34px;
  background: linear-gradient(135deg, #e4dfd6 0%, #c4beb3 60%, #a49e93 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  margin: 0 -2px;
}

.rock-3 {
  width: 18px;
  height: 20px;
  background: linear-gradient(135deg, #ccc7be 0%, #aba59a 60%, #8e887d 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

/* =========================================
   부유섬 하단 3D 원뿔형 암석 & 구름 받침 (참고 이미지 완벽 재현)
   ========================================= */
.island-rock-cone {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  height: 68px;
  display: flex;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.rock-facet-left {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #b8b2a8 0%, #8c857b 60%, #686259 100%);
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 35% 100%);
}

.rock-facet-mid {
  flex: 1.4;
  height: 100%;
  background: linear-gradient(180deg, #c7c1b8 0%, #9e978c 60%, #756f65 100%);
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

.rock-facet-right {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #9e978d 0%, #766f65 60%, #524d45 100%);
  clip-path: polygon(0% 0%, 90% 0%, 65% 100%, 0% 100%);
}

.bottom-cloud-cushion {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cushion-puff {
  background: #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(148, 163, 184, 0.25), 0 4px 10px rgba(100, 116, 139, 0.15);
  position: absolute;
}
.cushion-puff.puff-1 { width: 55px; height: 32px; left: 10px; }
.cushion-puff.puff-2 { width: 68px; height: 38px; left: 36px; z-index: 2; }
.cushion-puff.puff-3 { width: 50px; height: 30px; right: 10px; }

/* 플랫폼 상단 표지판 */
.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 99px;
  color: #fff;
  font-weight: 700;
  margin: 4px auto 8px;
  width: calc(100% - 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 6;
}

.zone-a .zone-header {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.zone-center .zone-header {
  background: linear-gradient(135deg, #4d7c0f, #65a30d);
  justify-content: center;
  gap: 12px;
}

.zone-b .zone-header {
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}

/* 큼직한 A, B 표지판 원형 엠블럼 */
.zone-letter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.zone-a .zone-letter {
  color: #0284c7;
}

.zone-b .zone-letter {
  color: #1d4ed8;
}

/* 선택지 보기 단어 */
.zone-word {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.zone-count {
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* 둥근 3D 발판 바닥 */
.platform-floor {
  flex: 1;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 250px;
  transition: transform 0.25s ease;
}

.platform-surface {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  z-index: 3;
  transition: opacity 0.25s, transform 0.35s ease;
}

.zone-a .platform-surface {
  background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #f0f9ff 65%, #e0f2fe 100%);
  border: 1.5px solid #bae6fd;
}

.zone-center .platform-surface {
  background: transparent;
  border: none;
}

/* 부유섬 상단 잔디 대지 & 흙길 & 시냇물 */
.island-ground {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, #e2f4be 0%, #cde897 55%, #b2d776 100%);
  border: 2.5px solid #9dc75c;
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.7),
              inset 0 -6px 12px rgba(90, 130, 40, 0.25);
}

.island-path {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36%;
  width: 28%;
  background: radial-gradient(ellipse at 50% 50%, #deb887 0%, #c49a6c 65%, #a87f52 100%);
  opacity: 0.82;
  border-radius: 40px;
  transform: rotate(-3deg);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.island-stream {
  position: absolute;
  bottom: -4px;
  left: 42%;
  width: 26px;
  height: 22px;
  background: linear-gradient(180deg, #bae6fd 0%, #7dd3fc 100%);
  border-radius: 8px 8px 14px 14px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 3px 6px rgba(14, 165, 233, 0.3);
}

.zone-b .platform-surface {
  background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #eff6ff 65%, #dbeafe 100%);
  border: 1.5px solid #bfdbfe;
}

/* 시작 광장 중앙 원형 문양 및 출발선 디자인 */
.plaza-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.95;
}

.plaza-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px dashed #4d7c0f;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(240, 253, 244, 0.5) 70%, transparent 100%);
  box-shadow: inset 0 0 14px rgba(77, 124, 15, 0.15);
}

.plaza-inner-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid #65a30d;
}

.start-line {
  position: absolute;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #3f6212;
  letter-spacing: 1px;
}

.line-dash {
  width: 24px;
  height: 2.5px;
  background: #65a30d;
  border-radius: 2px;
}

.line-text {
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* 함정 문 (오답 시 열리는 바닥) */
.trapdoor-left,
.trapdoor-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, #1e293b, #334155);
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.trapdoor-left {
  left: 0;
  border-radius: 24px 0 0 24px;
  transform-origin: left center;
}

.trapdoor-right {
  right: 0;
  border-radius: 0 24px 24px 0;
  transform-origin: right center;
}

/* 바닥 아래 구름 심연 구덩이 */
.abyss-pit {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, #0f172a 20%, #020617 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  z-index: 1;
}

/* =========================================
   게임 연출: 정답은 빛과 점프, 오답은 코믹한 낙하
   ========================================= */

/* 1. 정답 구역: 찬란한 빛 발광 연출 */
.platform-zone.is-correct {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 0 0 5px #fde047, 0 0 45px rgba(250, 204, 21, 0.75), 0 16px 0 #eab308 !important;
  animation: correctGoldGlow 0.7s ease-in-out infinite alternate !important;
  z-index: 10;
}

.platform-zone.is-correct .platform-surface {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fef9c3 50%, #fef08a 100%) !important;
  border-color: #facc15 !important;
}

.platform-zone.is-correct .zone-header {
  background: linear-gradient(135deg, #eab308, #f59e0b) !important;
}

@keyframes correctGoldGlow {
  0% {
    box-shadow: 0 0 0 4px #fde047, 0 0 30px rgba(250, 204, 21, 0.6), 0 16px 0 #ca8a04;
  }
  100% {
    box-shadow: 0 0 0 6px #fef08a, 0 0 55px rgba(250, 204, 21, 0.95), 0 18px 0 #ca8a04;
  }
}

/* 2. 오답 확인 경고 (바닥 진동) */
.platform-zone.is-warning .platform-floor {
  animation: platformShake 0.12s infinite;
}

.platform-zone.is-warning .platform-surface {
  background: repeating-linear-gradient(
    45deg,
    #fee2e2,
    #fee2e2 14px,
    #fecaca 14px,
    #fecaca 28px
  ) !important;
  border-color: #f87171 !important;
}

@keyframes platformShake {
  0% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(-3px); }
}

/* 3. 오답 바닥 열림 (DROP 단계) */
.platform-zone.is-dropped {
  transform: translateY(6px) !important;
  box-shadow: 0 6px 0 #94a3b8, 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.platform-zone.is-dropped .platform-surface {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.platform-zone.is-dropped .trapdoor-left {
  transform: perspective(600px) rotateY(-85deg);
}

.platform-zone.is-dropped .trapdoor-right {
  transform: perspective(600px) rotateY(85deg);
}

/* =========================================
   귀여운 캐릭터 아바타 레이어 & 모션
   ========================================= */
.avatars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.avatar-actor {
  position: absolute;
  width: 74px;
  height: 98px;
  transform: translate(-50%, -50%);
  transition: left 0.68s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.68s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 22;
}

/* 내 아바타 강조 표시 */
.avatar-actor.is-me .avatar-nametag {
  background: #f59e0b;
  color: #1e1b4b;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

/* 이름표 */
.avatar-nametag {
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  margin-bottom: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 말풍선 (이모트 / 비명 / 환호) */
.avatar-bubble {
  position: absolute;
  top: -28px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  animation: popBubble 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 30;
}

.avatar-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}

@keyframes popBubble {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* =========================================
   귀여운 3D 클레이 젤리 생명체 아바타 (15가지 색상)
   ========================================= */
.avatar-creature {
  position: relative;
  width: 48px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: creatureIdleSway 2.5s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes creatureIdleSway {
  0% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-2px); }
  100% { transform: rotate(3deg) translateY(0); }
}

/* 3D 클레이 달걀형 바디 */
.creature-body {
  position: relative;
  width: 46px;
  height: 52px;
  border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
  background: var(--creature-bg, linear-gradient(175deg, #ff8a65 0%, #ea580c 68%, #c2410c 100%));
  box-shadow: inset 0 5px 8px rgba(255, 255, 255, 0.48),
              inset 0 -6px 10px rgba(0, 0, 0, 0.18),
              0 6px 14px rgba(0, 0, 0, 0.12);
  z-index: 2;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 상단 3D 엠보싱 하이라이트 광택 */
.creature-shine {
  position: absolute;
  top: 5px;
  left: 9px;
  width: 13px;
  height: 6px;
  background: rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* 아바타 표정 (초롱초롱한 눈, 발그레한 볼, 미소 입) */
.creature-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 초롱초롱한 검은 단추 눈 */
.creature-eye {
  position: absolute;
  top: 14px;
  width: 6.5px;
  height: 7.5px;
  background: #18181b;
  border-radius: 50%;
  transition: all 0.2s;
}

.creature-eye.left { left: 10px; }
.creature-eye.right { right: 10px; }

/* 눈 속 반짝이는 하이라이트 */
.creature-eye::after {
  content: '';
  position: absolute;
  top: 1.2px;
  left: 1.5px;
  width: 2.4px;
  height: 2.4px;
  background: #ffffff;
  border-radius: 50%;
}

/* 발그레한 붉은 원형 볼터치 */
.creature-blush {
  position: absolute;
  top: 18px;
  width: 9.5px;
  height: 9.5px;
  background: #ef4444;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
}

.creature-blush.left { left: 3px; }
.creature-blush.right { right: 3px; }

/* 귀여운 반달 미소 입 */
.creature-mouth {
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 5.5px;
  border-bottom: 2.2px solid #18181b;
  border-radius: 0 0 10px 10px;
  transition: all 0.2s;
}

/* 짧고 앙증맞은 팔 */
.creature-arm {
  position: absolute;
  top: 22px;
  width: 9px;
  height: 16px;
  background: var(--creature-arm, #ea580c);
  border-radius: 8px;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.16);
  transform-origin: top center;
  transition: transform 0.2s;
}

.creature-arm.left {
  left: -4px;
  transform: rotate(14deg);
}

.creature-arm.right {
  right: -4px;
  transform: rotate(-14deg);
  /* 대기 중 살짝 손을 드는 모션 */
  animation: creatureHandWave 3.8s ease-in-out infinite;
}

@keyframes creatureHandWave {
  0%, 65%, 100% {
    transform: rotate(-14deg);
  }
  72% {
    transform: rotate(-95deg);
  }
  78% {
    transform: rotate(-72deg);
  }
  84% {
    transform: rotate(-95deg);
  }
  90% {
    transform: rotate(-72deg);
  }
  95% {
    transform: rotate(-14deg);
  }
}

/* 통통한 짧은 다리/발 */
.creature-legs {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: -3px;
  z-index: 1;
}

.creature-leg {
  width: 11px;
  height: 9px;
  background: var(--creature-leg, #c2410c);
  border-radius: 5px 5px 8px 8px;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  transform-origin: top center;
  transition: transform 0.15s;
}

.avatar-shadow {
  width: 36px;
  height: 8px;
  background: rgba(15, 23, 42, 0.22);
  border-radius: 50%;
  margin-top: 3px;
  transition: transform 0.3s, opacity 0.3s;
}

/* =========================================
   1. 이동 모션: 짧은 팔다리를 흔들며 통통 뛰듯 달리기
   ========================================= */
.avatar-actor.is-walking .avatar-creature {
  animation: creatureRunBounce 0.22s infinite alternate ease-in-out !important;
}

@keyframes creatureRunBounce {
  0% { transform: translateY(0) scale(1.08, 0.92) rotate(-3.5deg); }
  100% { transform: translateY(-10px) scale(0.94, 1.08) rotate(3.5deg); }
}

.avatar-actor.is-walking .creature-leg.left {
  animation: creatureLegRunLeft 0.18s infinite alternate ease-in-out;
}

.avatar-actor.is-walking .creature-leg.right {
  animation: creatureLegRunRight 0.18s infinite alternate ease-in-out;
}

@keyframes creatureLegRunLeft {
  from { transform: rotate(-32deg) translateY(-2px); }
  to { transform: rotate(32deg) translateY(1px); }
}

@keyframes creatureLegRunRight {
  from { transform: rotate(32deg) translateY(1px); }
  to { transform: rotate(-32deg) translateY(-2px); }
}

.avatar-actor.is-walking .creature-arm.left {
  animation: creatureArmRunLeft 0.18s infinite alternate ease-in-out;
}

.avatar-actor.is-walking .creature-arm.right {
  animation: creatureArmRunRight 0.18s infinite alternate ease-in-out !important;
}

@keyframes creatureArmRunLeft {
  from { transform: rotate(45deg); }
  to { transform: rotate(-35deg); }
}

@keyframes creatureArmRunRight {
  from { transform: rotate(-35deg); }
  to { transform: rotate(45deg); }
}

/* =========================================
   2. 정답 공개: 살아남은 아바타는 높이 점프 & 양손 환호
   ========================================= */
.avatar-actor.is-celebrating .avatar-creature {
  animation: creatureJoyJump 0.32s ease-in-out infinite alternate !important;
}

@keyframes creatureJoyJump {
  0% {
    transform: translateY(0) scale(1.08, 0.9) rotate(-3deg);
  }
  100% {
    transform: translateY(-30px) scale(0.95, 1.15) rotate(3deg);
  }
}

.avatar-actor.is-celebrating .creature-body {
  box-shadow: inset 0 5px 8px rgba(255, 255, 255, 0.6),
              inset 0 -6px 10px rgba(0, 0, 0, 0.15),
              0 0 22px rgba(250, 204, 21, 0.85),
              0 8px 16px rgba(0, 0, 0, 0.12) !important;
}

.avatar-actor.is-celebrating .creature-arm.left {
  transform: rotate(155deg) !important;
  animation: none !important;
}

.avatar-actor.is-celebrating .creature-arm.right {
  transform: rotate(-155deg) !important;
  animation: none !important;
}

/* 정답 시 활짝 웃는 눈 (^ ^) */
.avatar-actor.is-celebrating .creature-eye {
  height: 4px;
  background: transparent;
  border-top: 2.8px solid #18181b;
  border-radius: 8px 8px 0 0;
}

.avatar-actor.is-celebrating .creature-eye::after {
  display: none;
}

/* 정답 시 활짝 벌린 기쁨의 입 */
.avatar-actor.is-celebrating .creature-mouth {
  width: 14px;
  height: 9px;
  background: #dc2626;
  border: 1.5px solid #18181b;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.avatar-actor.is-celebrating .creature-mouth::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 10px;
  height: 5px;
  background: #f472b6;
  border-radius: 5px 5px 0 0;
}

/* =========================================
   3. 정답 공개: 오답 아바타는 바닥과 함께 아래로 떨어지기
   ========================================= */
.avatar-actor.is-panicking .avatar-creature {
  animation: panicTremble 0.1s infinite !important;
}

.avatar-actor.is-panicking .creature-arm.left {
  transform: rotate(120deg) !important;
}

.avatar-actor.is-panicking .creature-arm.right {
  transform: rotate(-120deg) !important;
  animation: none !important;
}

@keyframes panicTremble {
  0% { transform: translateX(-3px) rotate(-4deg); }
  50% { transform: translateX(3px) rotate(4deg); }
  100% { transform: translateX(-3px) rotate(-4deg); }
}

.avatar-actor.is-falling {
  pointer-events: none;
  z-index: 15;
  animation: creatureComicDrop 0.88s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
}

.avatar-actor.is-falling .avatar-shadow {
  opacity: 0;
  transform: scale(0.1);
}

.avatar-actor.is-falling .creature-mouth {
  width: 8px;
  height: 8px;
  background: #18181b;
  border-radius: 50%;
  border-bottom: none;
}

.avatar-actor.is-falling .creature-arm.left {
  transform: rotate(140deg) !important;
  animation: none !important;
}

.avatar-actor.is-falling .creature-arm.right {
  transform: rotate(-140deg) !important;
  animation: none !important;
}

@keyframes creatureComicDrop {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -50%) translateY(-18px) rotate(-14deg) scale(1.1);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) translateY(28px) rotate(40deg) scale(0.92);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) translateY(360px) rotate(240deg) scale(0.18);
    opacity: 0;
  }
}

/* =========================================
   미니 썸네일 & 모바일/우승단상 렌더링 컴포넌트
   ========================================= */
.creature-thumb {
  position: relative;
  width: 28px;
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
}

.thumb-body {
  position: relative;
  width: 26px;
  height: 30px;
  border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
  background: var(--creature-bg);
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.45),
              inset 0 -3px 5px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.thumb-shine {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 7px;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.thumb-eye {
  position: absolute;
  top: 8px;
  width: 3.8px;
  height: 4.4px;
  background: #18181b;
  border-radius: 50%;
}
.thumb-eye.left { left: 5px; }
.thumb-eye.right { right: 5px; }

.thumb-blush {
  position: absolute;
  top: 10px;
  width: 5.5px;
  height: 5.5px;
  background: #ef4444;
  border-radius: 50%;
  opacity: 0.9;
}
.thumb-blush.left { left: 2px; }
.thumb-blush.right { right: 2px; }

.thumb-mouth {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 3px;
  border-bottom: 1.5px solid #18181b;
  border-radius: 0 0 6px 6px;
}

.thumb-arm {
  position: absolute;
  top: 12px;
  width: 5px;
  height: 9px;
  background: var(--creature-arm);
  border-radius: 4px;
}
.thumb-arm.left { left: -2px; transform: rotate(12deg); }
.thumb-arm.right { right: -2px; transform: rotate(-12deg); }

.thumb-legs {
  display: flex;
  gap: 3px;
  margin-top: -2px;
  z-index: 1;
}

.thumb-leg {
  width: 6.5px;
  height: 5.5px;
  background: var(--creature-leg);
  border-radius: 3px 3px 5px 5px;
}

/* 캐릭터 선택 버튼 스타일 개선 */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.avatar-pick-btn {
  border: 2px solid #e2e8f0;
  background: #ffffff;
  border-radius: 14px;
  padding: 8px 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.avatar-pick-btn:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
}

.avatar-pick-btn.selected {
  border-color: #4f46e5;
  background: #f5f3ff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  transform: scale(1.05);
}

.avatar-pick-btn span {
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
}

.st-me-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.winner-hero-creature {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
  transform: scale(1.4);
}

/* 탈락자 관람석 */
.eliminated-bar {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.elim-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.elim-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.elim-chip {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.elim-empty {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* =========================================
   🏆 최종 승리 오버레이 (시상대)
   ========================================= */
.winner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.winner-card {
  background: #fff;
  border-radius: 28px;
  padding: 32px 36px;
  max-width: 780px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border: 4px solid #fbbf24;
  position: relative;
  z-index: 2;
}

.winner-crown-badge {
  display: inline-block;
  background: #fef3c7;
  color: #b45309;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 6px 18px;
  border-radius: 99px;
  margin-bottom: 10px;
}

.winner-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: #1e1b4b;
  margin-bottom: 6px;
}

.winner-subtitle {
  color: #64748b;
  margin-bottom: 24px;
}

.winner-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 170px;
  margin-bottom: 26px;
  padding: 16px;
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
  border-radius: 20px;
}

.winner-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
  border: 2px solid #fcd34d;
  animation: celebrateJump 0.55s ease-in-out infinite alternate;
}

.winner-hero-crown {
  font-size: 1.6rem;
  margin-bottom: -4px;
}

.winner-hero-emoji {
  font-size: 2.8rem;
}

.winner-hero-name {
  font-weight: 800;
  font-size: 1rem;
  color: #1e293b;
  margin-top: 6px;
}

.winner-hero-score {
  font-size: 0.8rem;
  font-weight: 700;
  color: #d97706;
}

.winner-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================
   VIEW 2: 수업 문장 & 문제 편집기
   ========================================= */
.editor-container {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 20px;
  max-width: 1400px;
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
  flex: 1;
}

.editor-sidebar {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: fit-content;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-help {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

.set-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.set-item {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.15s;
}

.set-item:hover {
  border-color: #a5b4fc;
  background: #f8fafc;
}

.set-item.active {
  border-color: #4f46e5;
  background: #eef2ff;
}

.set-item-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #1e293b;
  margin-bottom: 3px;
}

.set-item-meta {
  font-size: 0.78rem;
  color: #64748b;
}

.sidebar-footer {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.backup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.file-label {
  text-align: center;
  cursor: pointer;
}

.editor-main {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.editor-set-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.set-title-inputs {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-set-title {
  font-size: 1.25rem;
  font-weight: 800;
  padding: 8px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-family: var(--font-sans);
}

.input-set-desc {
  font-size: 0.88rem;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: var(--font-sans);
}

.set-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.questions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.questions-editor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.q-editor-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-num-label {
  font-weight: 800;
  color: #4f46e5;
  font-size: 0.95rem;
}

.q-top-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.q-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.q-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 130px;
  gap: 10px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
}

.field-input {
  padding: 8px 11px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

/* =========================================
   학생 컨트롤러 화면 (전체화면 & 미니 스마트폰 공통)
   ========================================= */
.student-screen-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.student-device-card {
  background: #fff;
  width: 100%;
  max-width: 430px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

/* 플로팅 미니 스마트폰 드로어 */
.mini-phone-drawer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 350px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
  border: 1px solid #cbd5e1;
  z-index: 90;
  overflow: hidden;
  display: none;
}

.mini-phone-drawer.open {
  display: block;
  animation: slideUpPhone 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.mini-phone-header {
  background: #0f172a;
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-phone-close {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
}

/* 학생 카드 내부 UI */
.st-box {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-profile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.st-me-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-me-emoji {
  font-size: 1.8rem;
}

.st-me-name {
  font-weight: 800;
  font-size: 0.98rem;
}

.st-me-status {
  font-size: 0.78rem;
  font-weight: 700;
}


.st-question-prompt {
  background: #f1f5f9;
  padding: 12px;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

.st-ab-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.st-choice-btn {
  border: none;
  border-radius: 14px;
  padding: 20px 14px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  outline: none;
}

.st-choice-btn:active {
  transform: scale(0.97);
}

.st-choice-btn.btn-a {
  background: #2563eb;
}

.st-choice-btn.btn-b {
  background: #e11d48;
}

.st-choice-btn.selected {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #6366f1;
}

.st-choice-letter {
  font-size: 1.8rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-choice-word {
  font-size: 1.25rem;
  font-weight: 700;
  word-break: keep-all;
}

.st-emote-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.st-emote-btn {
  flex: 1;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 10px;
  padding: 7px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.st-emote-btn:hover {
  background: #f1f5f9;
}

/* =========================================
   모달 & 토스트
   ========================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: #fff;
  border-radius: 16px;
  max-width: 620px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border: 1px solid #e2e8f0;
}

.modal-header {
  padding: 14px 20px;
  background: #0f172a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

.modal-close {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.modal-body {
  padding: 22px;
}

.invite-modal-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: center;
}

.qr-box {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}

.qr-box img {
  width: 165px;
  height: 165px;
  display: block;
  margin: 0 auto 10px;
}

.room-code-pill {
  background: #eef2ff;
  color: #4338ca;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 0.9rem;
}

.invite-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-info h4 {
  font-size: 0.95rem;
  color: #1e293b;
}

.invite-info p {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.45;
}

.url-copy-row {
  display: flex;
  gap: 8px;
}

.url-copy-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.84rem;
}

.invite-tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  color: #92400e;
  line-height: 1.45;
}

.bulk-help {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12px;
}

#bulkPasteTextarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.toast-container {
  position: fixed;
  top: 66px;
  right: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: rgba(30, 27, 75, 0.92);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 9px 18px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* 학생 화면 내 3D 아바타 대형 미리보기 무대 */
.st-creature-stage {
  position: relative;
  background: radial-gradient(circle at 50% 25%, #eff6ff 0%, #e0f2fe 65%, #f0f9ff 100%);
  border: 1.5px solid #bae6fd;
  border-radius: 20px;
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.85);
}

.st-creature-actor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.st-large-creature {
  transform: scale(1.38);
  transform-origin: center center;
  margin: 14px 0 12px;
}

.st-mini-island-pad {
  width: 130px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #e2f4be 0%, #b2d776 75%, #84cc16 100%);
  border: 2px solid #84cc16;
  box-shadow: 0 6px 0 #65a30d, 0 10px 18px rgba(101, 163, 13, 0.22);
  margin-top: -6px;
  z-index: 2;
}

.st-quick-avatar-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.st-quick-av-btn {
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  border-radius: 10px;
  padding: 5px 2px 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  transition: all 0.15s ease;
}

.st-quick-av-btn.selected {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #312e81;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  .editor-container {
    grid-template-columns: 1fr;
  }
  .q-options-grid {
    grid-template-columns: 1fr 1fr;
  }
  .invite-modal-body {
    grid-template-columns: 1fr;
  }
}