/* สกินธีมเบญจรงค์ทองสำหรับห้องบทเรียนสังคม V5 (Light Benjarong Gold & Shot-Cut Transitions)
   ใช้ทับตัวเล่น player.css โดยไม่แตะต้องไฟล์ _player ต้นฉบับ
*/
:root {
  --bg1: #FBF6EA;
  --bg2: #F5EED9;
  --bg3: #ECE1C3;
  --card: rgba(255, 255, 255, 0.94);
  --card2: #F8F1E3;
  --edge: rgba(184, 134, 11, 0.38);
  --ink: #3A2614;
  --muted: #7A6956;
  --line: rgba(184, 134, 11, 0.22);
  --brand: #B8860B;
  --brand2: #D4AF37;
  --brandSoft: rgba(212, 175, 55, 0.16);
  --bio: #B8860B;
  --laser: transparent;
  --chip: #EFE4CE;
  --shadow: 0 12px 32px rgba(90, 60, 20, 0.12);
}

body {
  background: linear-gradient(145deg, var(--bg1), var(--bg2) 52%, var(--bg3)) fixed !important;
  color: var(--ink) !important;
}

body::before {
  background-image: 
    linear-gradient(rgba(184, 134, 11, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 134, 11, 0.08) 1px, transparent 1px) !important;
  background-size: 32px 32px;
  opacity: 0.55;
}

.brand i {
  background: linear-gradient(135deg, #ECC855, #C59B27);
  color: #3A2614;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

.brand div {
  color: var(--ink) !important;
}
.brand small {
  color: var(--muted) !important;
}

.card {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: var(--shadow) !important;
}

.chip {
  color: #7A4B10 !important;
  background: rgba(212, 175, 55, 0.22) !important;
  border: 1px solid rgba(184, 134, 11, 0.45) !important;
}

.scenes button {
  background: #F8F1E3 !important;
  color: #5A4025 !important;
  border: 1px solid rgba(184, 134, 11, 0.25) !important;
}

.scenes button.cur {
  border-color: #B8860B !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.18)) !important;
  color: #3A2614 !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25) !important;
}

.tabs button {
  color: var(--ink) !important;
  background: #F2E8D2 !important;
}

.tabs button[aria-selected="true"] {
  background: linear-gradient(135deg, #ECC855, #C59B27) !important;
  color: #3A2614 !important;
  font-weight: 800;
}

.canvas {
  background: #EDE2C8 !important;
  border: 1.5px solid rgba(184, 134, 11, 0.35) !important;
  box-shadow: inset 0 0 16px rgba(140, 100, 30, 0.15) !important;
}

.side {
  background: var(--card) !important;
}

/* 1. ซ่อนกล่องบทพูดครูเต็มตามคำสั่ง V5 */
.say {
  display: none !important;
}

.pts h3 {
  color: var(--ink) !important;
}

.pts ol button {
  color: var(--ink) !important;
  background: #FAF4E6 !important;
  border: 1px solid rgba(184, 134, 11, 0.25) !important;
}

.pts ol button.cur {
  border-color: #B8860B !important;
  background: #F5E8C8 !important;
  font-weight: 700 !important;
  color: #B0281C !important;
}

.player {
  background: var(--card) !important;
  border-top: 1.5px solid var(--edge) !important;
  color: var(--ink) !important;
}

.player .time {
  color: var(--muted) !important;
}

.player input[type="range"] {
  accent-color: var(--brand) !important;
}

.ctrl button {
  background: #F4EAD3 !important;
  color: var(--ink) !important;
  border: 1px solid var(--edge) !important;
}

.ctrl .play {
  background: linear-gradient(135deg, #ECC855, #C59B27) !important;
  color: #3A2614 !important;
  font-weight: 800;
}

/* 2. การตัดภาพรายประโยค (Ken Burns Drift + Fade In + ซ่อน Laser และ Spotlight) */
#canvas .cam svg {
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  #canvas .cam svg {
    animation: shotIn .35s ease-out both, shotDrift 12s ease-out .35s both;
  }
}

@keyframes shotIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

#laser, 
#canvas .ring, 
#canvas .spot, 
#canvas .spot-shade,
#canvas .pinlbl {
  display: none !important;
}

/* 3. ปุ่มเริ่มเรียนใหญ่กลางเวที */
.start-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(251, 246, 234, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.start-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.btn-start-learn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 38px;
  font-size: 24px;
  font-weight: 700;
  color: #3A2614;
  background: linear-gradient(135deg, #FDE68A, #D4AF37 55%, #B8860B);
  border: 2px solid #FFFBEB;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.45), 0 0 40px rgba(212, 175, 55, 0.35);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.btn-start-learn:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 38px rgba(184, 134, 11, 0.65), 0 0 55px rgba(212, 175, 55, 0.5);
}

.btn-start-learn .icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3A2614;
  color: #FDE68A;
  font-size: 18px;
  padding-left: 3px;
}

.start-tip {
  margin-top: 14px;
  font-size: 15px;
  color: #5A4025;
}

/* 4. การแสดงผลบนมือถือ: เวทีภาพอยู่บนสุด เลื่อนหัวข้อ/ฉากลงใต้เวที */
@media (max-width: 900px) {
  #viewLesson {
    display: flex !important;
    flex-direction: column !important;
  }
  #viewLesson .grid {
    display: flex !important;
    flex-direction: column !important;
    order: 1 !important;
  }
  #viewLesson .grid .stage {
    order: 1 !important;
  }
  #viewLesson .grid .side {
    order: 3 !important;
  }
  #viewLesson .head {
    order: 2 !important;
    margin-top: 12px !important;
  }
}