/* ==========================================================================
   THEATRE MODE — click poster → YouTube nổi giữa trang, nền đen mờ
   Học cách Square Enix (jp.square-enix.com/rs3r) trình bày PV:
     #modalMask    position:fixed; inset:0; z-index:1000000; opacity .95
                   transition: opacity .6s cubic-bezier(.165,.84,.44,1)
     #modalContent position:fixed; z-index:1000001  (iframe 1100×618.75 = 16:9)
   Khác SE: rakuben giữ GIỌNG dark-fantasy — mask có scanline + máu đỏ,
   không dùng nút X tròn mà dùng chữ "ĐÓNG ✕" kiểu của sổ cổ.
   ========================================================================== */

/* Poster bấm được — thay <video controls> bằng ảnh + nút play */
.shatter__poster{
  position:absolute;inset:0;cursor:pointer;border:0;padding:0;margin:0;
  background:#000;display:block;width:100%;height:100%;
}
.shatter__poster img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.72) contrast(1.05);
  transition:filter .5s var(--ease),transform 6s var(--ease);
}
.shatter__poster:hover img{filter:brightness(.88) contrast(1.08);transform:scale(1.03)}

/* nút play giữa poster */
.shatter__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;
  border:1px solid rgba(212,175,55,.75);
  background:rgba(5,5,7,.42);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .42s var(--ease),border-color .42s var(--ease),background .42s var(--ease);
  pointer-events:none;
}
.shatter__play::after{
  content:'';display:block;margin-left:7px;
  border-left:24px solid var(--gold,#d4af37);
  border-top:15px solid transparent;border-bottom:15px solid transparent;
}
.shatter__poster:hover .shatter__play{
  transform:translate(-50%,-50%) scale(1.09);
  border-color:#d4af37;background:rgba(138,3,3,.42);
}
/* nhãn dưới nút play */
.shatter__play-label{
  position:absolute;left:50%;top:calc(50% + 74px);transform:translateX(-50%);
  font-family:var(--jpserif),serif;font-size:11.5px;letter-spacing:.32em;
  color:rgba(240,236,228,.82);text-transform:uppercase;white-space:nowrap;
  text-shadow:0 2px 10px #000;pointer-events:none;
}
/* vòng pulse nhẹ */
.shatter__play::before{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(212,175,55,.3);
  animation:rbPulse 2.6s ease-in-out infinite;
}
@keyframes rbPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.14);opacity:0}
}

/* ============================ MODAL ============================ */
.rb-modal{
  position:fixed;inset:0;z-index:1000000;
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s cubic-bezier(.165,.84,.44,1);
}
.rb-modal.is-open{display:flex}
.rb-modal.is-shown{opacity:1}

/* mask: đen mờ .95 + scanline + hơi đỏ ở viền (giọng rakuben) */
.rb-modal__mask{
  position:absolute;inset:0;background:rgba(3,3,4,.95);cursor:pointer;
  background-image:
    repeating-linear-gradient(0deg,rgba(138,3,3,.055) 0 1px,transparent 1px 3px);
}
.rb-modal__mask::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.72) 100%);
}

/* nội dung: căn giữa, 1100px như SE, viền vàng mảnh */
.rb-modal__box{
  position:relative;z-index:1000001;
  width:min(1100px,92vw);
  flex:0 0 auto;                 /* 🔴 KHÔNG để flex co chiều cao */
  max-height:92vh;
  transform:scale(.955);opacity:0;
  transition:transform .55s cubic-bezier(.165,.84,.44,1),opacity .45s ease;
}
.rb-modal.is-shown .rb-modal__box{transform:scale(1);opacity:1}

.rb-modal__ratio{
  position:relative;width:100%;
  /* 🔴 padding-bottom trick: ổn định hơn aspect-ratio trong flex container */
  height:0;padding-bottom:56.25%;        /* 9/16 = 56.25% */
  background:#000;overflow:hidden;
  border:1px solid rgba(212,175,55,.42);
  box-shadow:0 0 0 1px rgba(0,0,0,.9),0 30px 90px rgba(0,0,0,.85),
             0 0 90px rgba(138,3,3,.16);
}
.rb-modal__ratio iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* thanh trên: tiêu đề + nút đóng */
.rb-modal__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:12px;
}
.rb-modal__ttl{
  font-family:var(--jpserif),serif;font-size:13px;letter-spacing:.3em;
  color:rgba(240,236,228,.86);text-transform:uppercase;
}
.rb-modal__ttl span{color:var(--gold,#d4af37)}
.rb-modal__close{
  background:none;border:1px solid rgba(212,175,55,.5);
  color:var(--gold,#d4af37);font-family:var(--jpserif),serif;
  font-size:11.5px;letter-spacing:.22em;padding:9px 15px;cursor:pointer;
  transition:.35s var(--ease);
}
.rb-modal__close:hover{background:rgba(138,3,3,.55);border-color:#8a0303;color:#f0ece4}

/* khoá cuộn nền khi mở */
body.rb-locked{overflow:hidden}

@media (max-width:760px){
  .shatter__play{width:68px;height:68px}
  .shatter__play::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
  .shatter__play-label{top:calc(50% + 54px);font-size:10px;letter-spacing:.22em}
  .rb-modal__box{width:96vw}
  .rb-modal__bar{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .rb-modal,.rb-modal__box{transition:none}
  .shatter__play::before{animation:none}
}