/* ── เครื่องเล่นวิดีโอ interactive ─────────────────────────────────────────── */

.player-body { background: #000; overflow: hidden; }

.pl-stage {
    position: fixed;
    inset: 0;
    background: #000;
    overflow: hidden;
}
.pl-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.pl-stage video.behind { opacity: 0; pointer-events: none; }

.pl-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 22%, transparent 58%, rgba(0,0,0,.82) 100%),
        radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.45));
}
.pl-fade {
    position: absolute; inset: 0; z-index: 6; background: #000;
    opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
.pl-fade.on { opacity: 1; }

/* ── หัวเรื่อง ─────────────────────────────────────────────────────────────── */
.pl-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 8;
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem clamp(1rem, 3vw, 2.2rem);
}
.pl-back {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
    background: rgba(0,0,0,.35); backdrop-filter: blur(8px);
    color: #f4efe3; font-family: var(--font-meta); font-size: .78rem; letter-spacing: .1em;
}
.pl-back:hover { border-color: var(--ember); color: var(--ember); }
.pl-title { margin-left: auto; text-align: right; }
.pl-title b {
    display: block; font-family: var(--font-display); font-size: 1.05rem; color: #f4efe3;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.pl-title small { font-family: var(--font-meta); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,227,.62); }

/* ── แถบเส้นทางที่เดินมา ───────────────────────────────────────────────────── */
.pl-path {
    position: absolute; top: 4.6rem; left: clamp(1rem, 3vw, 2.2rem); z-index: 8;
    display: flex; align-items: center; gap: .45rem;
}
.pl-path i {
    width: 22px; height: 3px; border-radius: var(--radius-sm); background: rgba(255,255,255,.28);
    display: block; transition: all .4s var(--ease);
}
.pl-path i.on { background: var(--ember); width: 34px; }

/* ── คำบรรยายฉาก ───────────────────────────────────────────────────────────── */
.pl-caption {
    position: absolute; left: clamp(1rem, 3vw, 2.2rem); bottom: 5.6rem; z-index: 8;
    max-width: min(460px, 74vw);
    opacity: 0; transform: translateY(12px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pl-caption.on { opacity: 1; transform: none; }
.pl-caption b {
    display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.3rem);
    color: #fff; line-height: 1.1; text-shadow: 0 4px 20px rgba(0,0,0,.7);
}
.pl-caption span { font-size: .9rem; color: rgba(244,239,227,.8); text-shadow: 0 2px 10px rgba(0,0,0,.8); }

/* ── โอเวอร์เลย์ระหว่างเล่น ────────────────────────────────────────────────── */
.pl-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.ix {
    position: absolute; pointer-events: auto;
    animation: ix-in .5s var(--ease);
}
@keyframes ix-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ix.out { animation: ix-out .35s var(--ease) forwards; }
@keyframes ix-out { to { opacity: 0; transform: translateY(-8px); } }

.ix-text {
    background: rgba(7,18,15,.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232,163,61,.34);
    border-left: 2px solid var(--ember);
    padding: .85rem 1.2rem;
    max-width: min(340px, 72vw);
    border-radius: var(--radius);
}
.ix-text b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ember-soft); line-height: 1.15; }
.ix-text span { font-size: .84rem; color: rgba(244,239,227,.82); }

.ix.pos-top-left { top: 6.5rem; left: clamp(1rem,3vw,2.2rem); }
.ix.pos-top-right { top: 6.5rem; right: clamp(1rem,3vw,2.2rem); }
.ix.pos-bottom-left { bottom: 9rem; left: clamp(1rem,3vw,2.2rem); }
.ix.pos-bottom-right { bottom: 9rem; right: clamp(1rem,3vw,2.2rem); }

.ix-poi {
    right: clamp(1rem,3vw,2.2rem); bottom: 9rem;
    display: flex; gap: .9rem; align-items: center;
    background: rgba(7,18,15,.72); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    padding: .8rem 1.1rem; max-width: min(330px, 78vw);
    transition: border-color .3s;
}
.ix-poi:hover { border-color: var(--ember); }
.ix-poi .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(232,163,61,.18); }
.ix-poi b { display: block; font-family: var(--font-display); font-size: 1.1rem; color: #f4efe3; }
.ix-poi small { color: rgba(244,239,227,.6); font-size: .78rem; }

.ix-cta { left: 50%; transform: translateX(-50%); bottom: 9.5rem; }

/* ── ควิซ ──────────────────────────────────────────────────────────────────── */
.ix-quiz {
    inset: auto 50% 50% 50%; transform: translate(50%, 50%);
    width: min(560px, 88vw);
    background: rgba(7,18,15,.9); backdrop-filter: blur(18px);
    border: 1px solid rgba(232,163,61,.3);
    padding: clamp(1.4rem, 4vw, 2.2rem);
}
.ix-quiz h4 { font-size: clamp(1.2rem,3vw,1.7rem); margin: 0 0 1.2rem; color: #f4efe3; }
.quiz-opt {
    display: block; width: 100%; text-align: left;
    padding: .9rem 1.1rem; margin-bottom: .6rem;
    background: rgba(255,255,255,.05); color: #f4efe3;
    border: 1px solid rgba(255,255,255,.14);
    font-family: var(--font-body); font-size: .96rem;
    transition: all .28s var(--ease);
    border-radius: var(--radius-sm);
}
.quiz-opt:hover { border-color: var(--ember); background: rgba(232,163,61,.12); transform: translateX(4px); }
.quiz-opt.right { border-color: #4ec9a0; background: rgba(78,201,160,.16); }
.quiz-opt.wrong { border-color: var(--clay); background: rgba(200,98,60,.14); opacity: .65; }
.quiz-explain { margin-top: 1rem; font-size: .9rem; color: var(--ember-soft); }

/* ── หน้าจอเลือกทาง ────────────────────────────────────────────────────────── */
/* ตัวเลือกอยู่ครึ่งล่าง ปล่อยครึ่งบนให้เห็นภาพวิดีโอที่ยังเล่นวนอยู่
   ฉากทับใช้ไล่เฉด ไม่ใช่ทึบทั้งจอ และไม่เบลอ จะได้ยังดูหนังต่อได้ */
.pl-choice {
    position: absolute; inset: 0; z-index: 14;
    display: none;
    align-items: end; justify-items: center;
    padding-bottom: clamp(4.5rem, 9vh, 7rem);
    background: linear-gradient(to top,
        rgba(4,12,10,.94) 0%,
        rgba(4,12,10,.86) 34%,
        rgba(4,12,10,.42) 62%,
        transparent 88%);
    animation: fade-in .45s ease;
    pointer-events: none;                 /* ครึ่งบนคลิกทะลุไปโดนตัวควบคุมได้ */
}
.pl-choice.on { display: grid; }
@keyframes fade-in { from { opacity: 0; } }
.pl-choice-in { width: min(1080px, 94vw); text-align: center; pointer-events: auto; }
.pl-choice h3 {
    font-size: clamp(1.15rem, 2.6vw, 1.9rem); margin: 0 0 1.1rem; color: #f4efe3;
    text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
/* คอลัมน์ยืดหยุ่น — จอแคบพับเป็นแถว จอเตี้ยเลื่อนในกล่องได้ ไม่ล้นออกนอกเวที */
.pl-choice-grid {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
    justify-content: center;
    /* เผื่อที่ด้านบนให้การ์ดยกตัวตอนชี้เมาส์ได้โดยไม่ชนขอบและเงาไม่โดนตัด */
    padding: 10px 4px 6px;
}
/* จอเตี้ยเท่านั้นที่ต้องเลื่อนในกล่อง — และตอนเลื่อนได้ก็ไม่ยกตัว จะได้ไม่โดนตัด */
@media (max-height: 620px) {
    .pl-choice { padding-bottom: 3.5rem; }
    .pl-choice h3 { margin-bottom: .7rem; font-size: clamp(1rem, 2.2vw, 1.4rem); }
    .pl-choice-grid { max-height: 52vh; overflow-y: auto; }
    .choice-btn { padding: .7rem .9rem; }
    .choice-btn small { display: none; }
    .choice-btn:hover, .choice-btn:focus-visible { transform: none; }
}
.choice-btn {
    position: relative;
    display: flex; align-items: center; gap: .9rem;
    width: 100%;
    padding: .95rem 1.1rem;
    background: rgba(10,20,17,.62);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    color: #f4efe3; text-align: left;
    transition: all .4s var(--ease);
    overflow: hidden;
    animation: choice-in .55s var(--ease) backwards;
}
.choice-btn:nth-child(2) { animation-delay: .1s; }
.choice-btn:nth-child(3) { animation-delay: .2s; }
@keyframes choice-in { from { opacity: 0; transform: translateY(18px); } }
.choice-btn:hover, .choice-btn:focus-visible {
    border-color: var(--ember); background: rgba(232,163,61,.14);
    transform: translateY(-3px); box-shadow: 0 16px 34px -20px var(--ember);
}
.choice-btn .ic {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.15rem;
    color: var(--ember);
    background: rgba(232,163,61,.14);
    border: 1px solid rgba(232,163,61,.4);
    transition: all .35s var(--ease);
}
.choice-btn:hover .ic { background: var(--ember); color: #0a1410; border-color: var(--ember); }
.choice-btn .tx { flex: 1; min-width: 0; }
.choice-btn b {
    display: block; font-family: var(--font-display); font-size: 1.02rem;
    line-height: 1.35; margin-bottom: .1rem;
}
.choice-btn small { display: block; color: rgba(244,239,227,.6); font-size: .78rem; line-height: 1.45; }
.choice-btn .bar {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ember);
    transition: width .4s var(--ease);
}
.choice-btn:hover .bar { width: 100%; }
.pl-choice-timer {
    margin-top: 1.6rem; font-family: var(--font-meta); font-size: .7rem;
    letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,227,.45);
}

/* ── ปุ่มเริ่ม / จบ ─────────────────────────────────────────────────────────── */
.pl-start, .pl-end {
    position: absolute; inset: 0; z-index: 16;
    display: grid; place-items: center; text-align: center;
    background: radial-gradient(70% 70% at 50% 45%, rgba(7,18,15,.7), rgba(0,0,0,.94));
    border: 0; width: 100%; color: inherit;
}
.pl-start[hidden], .pl-end[hidden] { display: none; }
.pl-start .ring {
    width: 92px; height: 92px; border-radius: 50%;
    border: 1px solid var(--ember); color: var(--ember);
    display: grid; place-items: center; font-size: 1.8rem;
    margin: 0 auto 1.2rem;
    transition: transform .4s var(--ease), background .4s;
    animation: ring-pulse 2.6s ease-in-out infinite;
}
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 14px rgba(232,163,61,.07); } }
.pl-start:hover .ring { transform: scale(1.08); background: rgba(232,163,61,.14); }
.pl-start h2 { font-size: clamp(1.8rem,5vw,3.2rem); margin: 0 0 .4rem; }
.pl-start p { color: rgba(244,239,227,.66); margin: 0; }

.pl-end-in { width: min(760px, 92vw); }
.pl-end h2 { font-size: clamp(1.8rem,5vw,3.2rem); }
.pl-end .path-list {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    margin: 1.6rem 0 2rem;
}
.pl-end .path-list span {
    font-family: var(--font-meta); font-size: .74rem; letter-spacing: .12em;
    padding: .35rem .85rem; border: 1px solid rgba(232,163,61,.4); border-radius: 100px;
    color: var(--ember-soft);
}
.pl-end .path-list span + span::before { content: '→ '; opacity: .5; }

/* ── แถบควบคุม ─────────────────────────────────────────────────────────────── */
.pl-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem clamp(1rem, 3vw, 2.2rem) 1.4rem;
    opacity: 1; transition: opacity .5s;
}
.pl-stage.idle .pl-controls, .pl-stage.idle .pl-top { opacity: 0; pointer-events: none; }
.pl-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35);
    color: #f4efe3; display: grid; place-items: center; font-size: .95rem;
    backdrop-filter: blur(8px); transition: all .28s;
}
.pl-btn:hover { border-color: var(--ember); color: var(--ember); }
.pl-bar {
    flex: 1; height: 3px; background: rgba(255,255,255,.18); position: relative; overflow: hidden;
}
.pl-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ember); display: block; }
.pl-bar.locked { cursor: not-allowed; }
.pl-time { font-family: var(--font-meta); font-size: .74rem; color: rgba(244,239,227,.6); font-variant-numeric: tabular-nums; }

.pl-spinner {
    position: absolute; inset: 0; z-index: 12; display: none; place-items: center;
}
.pl-spinner.on { display: grid; }
.pl-spinner::after {
    content: ''; width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid rgba(232,163,61,.25); border-top-color: var(--ember);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }