/* Scoped CSS for work.html single-card player (strictly mirroring demo4/story_single.html) */

/* Layout: center the single scene */
#media { /* desktop will expand; mobile overrides */ }
.single { display: grid; place-items: center; width: 100%; max-width: 1320px; margin: 0 auto; }
/* Scene container (common) */
.single .scene { height: auto; display: grid; padding: 0; background: transparent; border-radius: 12px; }

/* Flip card fills the media row */
.flip-card { position: relative; width: 100%; height: auto; perspective: 1000px; -webkit-perspective: 1000px; border-radius: 12px; overflow: hidden; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 2s ease; transform-origin: center; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
.face.back { background: #000; transform: rotateY(180deg); }
.face.back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face.front { transform: none; background: #000; display:flex; }

.video-wrap { width: 100%; height: 100%; background: #000; }
.video-wrap video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Subtitle area (base styles; sizes are set per breakpoint) */
.scene .text { margin: 0; box-sizing: border-box; border-radius: 8px; padding: 12px; overflow-y: auto; overflow-x: hidden; line-height: 1.45; color: #444; font-weight: 600; background: #fff; }
.scene:not(.playing) .text { visibility: hidden; }

/* Grid/masonry styles (used when manifest chooses grid layout) */
:root { --vb-col-width: 28vw; --vb-row-gap: 10px; --vb-col-gap: 8px; }
.vb-masonry { margin: 0 auto; column-gap: var(--vb-col-gap); column-count: 3; column-width: var(--vb-col-width); max-width: calc((var(--vb-col-width) * 3) + (var(--vb-col-gap) * 2)); }
@media (max-width: 1200px) { .vb-masonry { column-count: 2; } }
@media (max-width: 820px) { .vb-masonry { column-count: 1; } }
.vb-scene { break-inside: avoid; background: rgba(255,255,255,0.15); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); margin: 0 0 var(--vb-row-gap); }
.vb-scene .video-wrap { border-radius: 10px; background: #000; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.vb-scene video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vb-text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: #374151; font-weight: 600; }
.vb-word { padding: 0 1px; transition: background-color .08s ease, color .08s ease; font-weight: 600; }
.vb-word.done { background: #ffe58f; color: #111; }

/* Story_single word highlight */
.word { border-radius: 0; padding: 0 1px; transition: background-color .08s ease, color .08s ease; font-weight: 600; }
.word.done { background: #ffe58f; color: #111; }

/* Desktop viewport-fit: prevent page scroll and tighten paddings */
@media (min-width: 641px) {
  html, body { overflow-y: hidden; height: 100%; }
  body > main { padding-top: 8px !important; padding-bottom: 8px !important; }
  #media { width: 100%; }
  /* Desktop default: flip-card 600x600, subtitle 200x600 */
  .single .scene { width: 600px; grid-template-rows: 600px 200px; }
  .flip-card { height: 600px; }
  /* Center controls horizontally on desktop */
  #controls { display: flex; justify-content: center; width: max-content; margin: 0 auto; }
  /* Desktop subtitle font size */
  .scene .text { font-size: 24px; }
}

/* Mobile adaptations: full-width scene, bottom controls, larger text */
@media (max-width: 640px) {
  html, body { overflow: hidden; height: 100%; }
  /* Remove extra paddings and width constraints so scene hugs header */
  body > main { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; overflow: hidden; }
  /* Reorder so media appears first under the header */
  #detail { display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }
  /* neutralize tailwind space-y margins to avoid double vertical gaps */
  #detail > * + * { margin-top: 0 !important; }
  #media { order: 1; margin-left: 5px; margin-right: 5px; width: auto; }
  #title { order: 2; }
  #description { order: 3; }
  #controls { order: 4; margin-top: auto; }

  .single { place-items: stretch; max-width: none; width: 100%; }
  .single .scene { width: 100%; height: auto; display: grid; grid-template-rows: auto auto; border-radius: 0; padding-left: 5px; padding-right: 5px; box-sizing: border-box; }
  .flip-card { width: 100%; height: 100%; border-radius: 0; }
  .flip-inner, .face { height: 100%; }
  .face.back img { border-radius: 0; }
  .video-wrap video { border-radius: 0; }

  /* Subtitle area: height controlled by grid row; scroll if overflow */
  .scene .text { font-size: 24px; line-height: 1.5; height: 100%; min-height: 100px; max-height: none; border-radius: 0; overflow-y: auto; overflow-x: hidden; }

  /* Controls in-flow at bottom of main; compact; BG Music on next line */
  #controls { position: static; bottom: auto; z-index: 1; width: calc(100% - 10px); margin: 0 5px; border-radius: 12px; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(0,0,0,0.6); margin-top: auto; }
  #controls > div { display: flex; align-items: center; gap: 6px; }
  #controls .volume-group { flex-basis: 100%; margin-top: 4px; }
  #controls label, #controls select, #controls button { font-size: 0.9rem; }
  #controls button { padding: 0.4rem 0.6rem; }
  #controls input[type="range"] { width: 140px; max-width: min(240px, 70vw); }
}

/* Pre-scene title styling */
.pre-scene-title { 
  margin: 6px 0 8px; 
  font-weight: 600; 
  font-size: 14px; 
  color: #374151; /* gray-700 */
}
@media (max-width: 640px) { .pre-scene-title { font-size: 14px; padding: 0 8px; } }