/* สีและสัดส่วนหน้าแรกเท่านั้น — ไม่กระทบหน้าจองหรือหลังบ้าน */
:root {
    color-scheme: dark;
    --pink: #ff66c4;
    --green: #99e17a;
    background: #090909;
    color: #fff;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-weight: 300
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

button {
    font: inherit;
    cursor: pointer
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 7px
}

[hidden] {
    display: none !important
}

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    background: #090909
}

.hero-video,
.hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.hero-video {
    object-fit: cover;
    object-position: center;
    cursor: pointer
}

.hero-shade {
    pointer-events: none;
    background: linear-gradient(180deg, #0003 0%, transparent 30%, #0005 48%, #000e 100%)
}

.play {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    border: 0;
    background: transparent;
    color: white;
    padding: 16px
}

.play svg {
    width: 64px;
    height: 64px;
    fill: #ffffff15;
    stroke: #fff;
    stroke-width: 1.4;
    transition: transform .2s
}

.play path {
    fill: white;
    stroke: none
}

.play span {
    font-size: 11px;
    letter-spacing: 2px
}

.play:hover svg {
    transform: scale(1.08)
}

.hero-bottom {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(220px, 300px);
    justify-content: space-between;
    align-items: end;
    gap: 48px;
    width: 100%;
    padding: 0 clamp(28px, 4.5vw, 88px) max(80px, env(safe-area-inset-bottom));
    margin-top: 320px
}

h1 {
    white-space: nowrap;
    font-size: clamp(68px, 7.2vw, 112px);
    line-height: .93;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 0 0 26px
}

.synopsis {
    max-width: 630px;
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    color: #e0dfe0;
    text-wrap: pretty
}

.booking-action {
    padding-bottom: 2px
}

.buy-ticket {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    padding: 14px 28px;
    border-radius: 99px;
    background: var(--pink);
    color: #240d1c;
    text-decoration: none;
    font-size: 19px;
    font-weight: 500;
    transition: background .2s, transform .2s
}

.buy-ticket:hover {
    background: #ff8fd4;
    transform: translateY(-2px)
}

.ticket-arrow {
    display: block;
    flex: none;
    width: 30px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.dates {
    color: var(--green);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .6px;
    text-align: left;
    margin: 0 0 12px
}

.video-message {
    position: absolute;
    top: 44%;
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 12px;
    background: #000b
}

@media(max-width:760px) {
    .hero {
        min-height: 100svh
    }

    .hero-video {
        object-position: 50% center
    }

    .hero-shade {
        background: linear-gradient(180deg, #0003, transparent 20%, #0007 43%, #000f 100%)
    }

    .play {
        top: 26%;
        gap: 10px
    }

    .play svg {
        width: 54px;
        height: 54px
    }

    .hero-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        margin-top: max(310px, 38svh);
        padding: 0 24px max(50px, env(safe-area-inset-bottom))
    }

    h1 {
        font-size: clamp(52px, 13.5vw, 82px);
        margin-bottom: 20px
    }

    .synopsis {
        font-size: 13px;
        line-height: 1.8
    }

    .buy-ticket {
        min-height: 56px;
        font-size: 17px
    }

    .dates {
        font-size: 16px
    }
}

/* มือถือ: ขนาดปุ่ม ชื่อเรื่อง และระยะขอบล่าง */
@media(max-width:600px) {

    /* ดันชื่อเรื่องและปุ่มไว้ล่างจอ เว้นขอบปลอดภัยของมือถือ */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100svh;
        min-height: 100dvh
    }

    .hero-bottom {
        margin-top: 280px;
        gap: 12px;
        padding: 0 24px max(30px, env(safe-area-inset-bottom))
    }

    h1 {
        font-size: calc((100vw - 48px)/8.35);
        line-height: 1.1;
        white-space: nowrap;
        margin: 0
    }

    .booking-action {
        align-self: stretch;
        width: 100%
    }

    .buy-ticket {
        min-height: 32px;
        padding: 4px 18px;
        font-size: 14px;
        line-height: 24px
    }

    .ticket-arrow {
        width: 28px;
        height: 22px
    }

    .dates {
        font-size: 14px;
        letter-spacing: .5px;
        margin: 0 0 10px
    }

    .play {
        top: 45%
    }

    .story h1 {
        order: 0
    }

    /* หักจาก gap 12px ให้ชื่อเรื่องกับวันที่ห่างกัน 4px เฉพาะมือถือ */
    .dates {
        order: 1;
        margin: -8px 0 -2px
    }

    .booking-action {
        order: 2
    }

    .synopsis {
        display: block;
        order: 3;
        width: 100%;
        max-width: none;
        text-wrap: wrap;
        font-size: 10px;
        line-height: 1.7;
        color: #d0ced0;
        margin-top: 4px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}

/* แตะพื้นที่ภาพได้ แม้มีแผงข้อความซ้อนอยู่;
ปุ่มจองยังกดได้ตามปกติ */
.hero-bottom {
    pointer-events: none
}

.buy-ticket {
    pointer-events: auto
}

/* จัดลำดับแยกมือถือ แท็บเล็ต และคอม;
เรื่องย่อใช้ข้อความชุดเดียว */
.story {
    display: contents
}

@media(min-width:601px) and (max-width:1023px) {
    .hero-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding-bottom: max(30px, env(safe-area-inset-bottom))
    }

    .story h1 {
        font-size: min(82px, calc((100vw - 92px)/8.35));
        margin: 0
    }

    .dates {
        font-size: 18px;
        margin: 0
    }

    .synopsis {
        max-width: none;
        width: 100%;
        font-size: 15px;
        line-height: 1.85
    }

    .booking-action {
        width: 100%;
        padding: 0;
        margin-top: 4px;
        position: relative;
        top: -6px
    }

    .buy-ticket {
        width: 100%
    }
}

@media(min-width:1024px) {
    .hero-bottom {
        row-gap: 20px
    }

    .story h1 {
        grid-column: 1/-1;
        grid-row: 1;
        margin: 0
    }

    .dates {
        grid-column: 1/-1;
        grid-row: 2;
        margin: 0;
        font-size: 20px
    }

    .synopsis {
        grid-column: 1;
        grid-row: 3
    }

    .booking-action {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        padding: 0
    }
}

/* จอใหญ่: ความกว้างเรื่องย่ออิงขนาดชื่อเรื่อง เพิ่มฟอนต์ให้อ่านง่าย */
@media(min-width:1280px) {
    .hero-bottom {
        grid-template-columns: minmax(0, calc(clamp(68px, 7.2vw, 112px)*8.25)) minmax(220px, 300px);
        column-gap: 48px
    }

    .synopsis {
        max-width: none;
        font-size: 18px;
        line-height: 1.85
    }
}


/* ข้อมูลการแสดง: มือถือวางใต้วันที่ จอใหญ่เรียงข้างวันที่ */
.event-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    grid-column: 1/-1;
    grid-row: 2
}

.event-details .dates {
    margin: 0;
    order: 0
}

.event-badges {
    display: flex;
    align-items: center;
    gap: 8px
}

.event-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border: 1px solid #ffffff60;
    border-radius: 8px;
    background: #161218b3;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    backdrop-filter: blur(8px)
}

.venue {
    pointer-events: auto;
    transition: background .2s, border-color .2s, transform .2s
}

@media(hover:hover) {
    .venue:hover {
        background: #ff66c433;
        border-color: var(--pink);
        transform: translateY(-2px)
    }
}

.ticket-prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    margin: 0 0 10px;
    color: #ece5ea;
    font-size: 11px;
    line-height: 1.6;
    text-align: center
}

.ticket-prices span {
    white-space: nowrap
}

.ticket-prices strong {
    font-weight: 500;
    color: #fff
}

@media(max-width:600px) {
    .event-details {
        order: 1;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-top: -8px
    }

    .event-details .dates {
        margin: 0;
        order: 0
    }

    .event-badge {
        font-size: 11px;
        padding: 4px 10px
    }

    .ticket-prices {
        font-size: 10px;
        gap: 4px 10px;
        margin-bottom: 7px
    }
}

@media(prefers-reduced-motion:reduce) {
    .venue {
        transition: none
    }

    .venue:hover {
        transform: none
    }
}

/* กล่องข้อมูลกรอบเขียว และเติมสีเมื่อชี้เมาส์ */
.event-badge {
    border-color: var(--green);
    color: var(--green);
    transition: background .2s, color .2s
}

@media(hover:hover) {
    .event-badge:hover {
        background: var(--green);
        color: #162110;
        border-color: var(--green)
    }
}

.event-badge {
    pointer-events: auto
}
/* หมุดสถานที่แบบผู้ใช้: ย่อให้พอดีกล่อง และไม่ใช้ .loader ร่วมกับหน้าจอง */
.location-marker{width:14px;height:19px;display:inline-block;position:relative;flex:none;color:var(--green)}
.location-marker::after{content:'';position:absolute;width:12px;height:12px;left:1px;top:0;border:4px solid currentColor;border-radius:50% 50% 0;box-sizing:border-box;transform:rotate(45deg);animation:venue-marker .4s ease-in-out infinite alternate}
.location-marker::before{content:'';position:absolute;left:3px;bottom:0;width:8px;height:2px;background:currentColor;opacity:.3;border-radius:50%;animation:venue-shadow .4s ease-in-out infinite alternate}
.venue-arrow{position:relative;left:-2px}
.venue:hover .location-marker{color:inherit}
@keyframes venue-marker{from{transform:translateY(1px) rotate(45deg)}to{transform:translateY(-2px) rotate(45deg)}}
@keyframes venue-shadow{from{transform:scale(.5)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.location-marker::before,.location-marker::after{animation:none}}

/* ไอคอนเวลาใช้สีเดียวกับกล่อง และเปลี่ยนตาม hover */
.time-icon{display:inline-block;width:14px;height:14px;flex:none;background:currentColor;mask:url("/assets/decor/decor-19.png") center/contain no-repeat;-webkit-mask:url("/assets/decor/decor-19.png") center/contain no-repeat}

/* CAST / อัลบั้มปัจฉิม: เปลี่ยนสัดส่วนรูป สี และจำนวนคอลัมน์ในบล็อกนี้ */
html { scroll-behavior: smooth; }
.cast-booking-bar { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px max(20px, calc((100vw - 1200px)/2)); background: #121014eb; backdrop-filter: blur(12px); border-bottom: 1px solid #ff66c440; }
.cast-brand { font-size: 17px; font-weight: 600; color: #fff; text-decoration: none; }
.cast-book { display: flex; align-items: center; gap: 28px; padding: 9px 22px; color: #23111d; background: var(--pink); border-radius: 99px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cast-yearbook { position: relative; overflow: hidden; background: #f6f1e8; color: #29212b; padding: 85px max(24px,calc((100vw - 1160px)/2)) 48px; scroll-margin-top: 70px; background-image: repeating-linear-gradient(0deg,transparent,transparent 31px,#7967790a 32px); }
.yearbook-intro { position: relative; margin-bottom: 58px; }
.yearbook-eyebrow { font-size: 12px; letter-spacing: .12em; font-weight: 500; }
.yearbook-intro h2 { font-size: clamp(48px,7vw,90px); line-height: 1.15; margin: 18px 0 12px; font-weight: 600; }
.yearbook-intro h2 span { background: var(--pink); padding: 0 12px; display: inline-block; transform: rotate(-3deg); }
.yearbook-note { font-size: 18px; }
.yearbook-stamp { position: absolute; right: 8%; bottom: 0; color: #6b4785; border: 2px solid #6b478570; border-radius: 50%; padding: 20px; transform: rotate(12deg); font-size: 22px; }
.cast-chapter { margin: 0 0 70px; }
.cast-chapter > h3 { display: flex; align-items: center; gap: 18px; font-size: 22px; margin: 0 0 26px; font-weight: 500; }
.cast-chapter > h3 span { font-size: 12px; color: #776b78; letter-spacing: .12em; }
.yearbook-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 34px 24px; }
.yearbook-card { position: relative; background: #fffdf7; padding: 12px 12px 16px; transform: rotate(var(--tilt)); box-shadow: 2px 5px 10px #32212b15; }
.yearbook-card::before { content: ''; position: absolute; width: 74px; height: 24px; background: #99e17a99; left: calc(50% - 37px); top: -10px; transform: rotate(-5deg); z-index: 1; }
.yearbook-card:nth-child(even)::before { background: #ff66c455; transform: rotate(5deg); }
.yearbook-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #e9e4ec; display: grid; place-items: center; }
.yearbook-photo svg { width: 75%; height: 85%; fill: #c6bbcf; }
.yearbook-photo span { position: absolute; bottom: 10px; font-size: 10px; letter-spacing: .17em; color: #73677e; }
.yearbook-caption { padding: 15px 4px 0; }
.cast-number { font-size: 10px; letter-spacing: .14em; color: #8c7c8f; }
.yearbook-caption h3 { font-size: 18px; font-weight: 500; margin: 5px 0; }
.yearbook-caption p { font-size: 13px; color: #776b78; margin: 0; }
.yearbook-end { text-align: center; font-size: 16px; border-top: 1px solid #29212b20; padding-top: 25px; }
.yearbook-end span { color: #ac5bb6; }
.cast-scroll-cue { position: absolute; top: 24px; left: 24px; color: #fff; font-size: 11px; letter-spacing: .15em; text-decoration: none; }
/* การ์ดค่อย ๆ ลอยขึ้นและคลายมุมเมื่อเลื่อนถึง แสดงครบแม้ปิด JavaScript */
.cast-motion .reveal-card { opacity: 0; transform: translateY(36px) rotate(calc(var(--tilt)*2)); transition: opacity .65s ease var(--delay),transform .8s cubic-bezier(.22,1,.36,1) var(--delay); }
.cast-motion .reveal-card.is-visible { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
@media(max-width:900px) { .yearbook-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 22px; } .yearbook-stamp { right: 0; font-size: 17px; } }
@media(max-width:600px) { .cast-brand { font-size: 12px; } .cast-book { font-size: 14px; gap: 12px; padding: 8px 16px; } .cast-yearbook { padding-top: 60px; } .yearbook-stamp { position: static; display: inline-block; padding: 10px 18px; margin-top: 12px; } .yearbook-card { padding: 8px 8px 13px; } .yearbook-caption h3 { font-size: 15px; } .yearbook-caption p { font-size: 11px; } .yearbook-grid { gap: 28px 16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .cast-motion .reveal-card { opacity: 1; transform: rotate(var(--tilt)); transition: none; } }

/* ข้อความลายมือและวง brush ของผู้ใช้ในหน้า Cast */
.yearbook-stamp { font-family: 'Mali', cursive; font-weight: 600; border: 0; border-radius: 0; isolation: isolate; padding: 24px 28px; }
.yearbook-stamp::before { content: ''; position: absolute; inset: -8px -18px; z-index: -1; background: url("/assets/icons/icon-20.svg") center/100% 100% no-repeat; opacity: .65; transform: rotate(-7deg); }
.cast-book .ticket-arrow { width: 30px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media(hover:hover) { .cast-book:hover { background: #f34fb3; } }

/* รูปแคสจริง: เรียงตาม article ใน index.html; ช่องว่างรออัปเดต */
.yearbook-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.yearbook-caption .cast-full-name { font-size: 12px; margin-bottom: 5px; }
.cast-scroll-cue { top: 24px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; }
.cast-scroll-cue span { width: 32px; height: 32px; background: #fff; mask: var(--arrow-image) center/contain no-repeat; -webkit-mask: var(--arrow-image) center/contain no-repeat; animation: cast-arrow-pulse 1.8s ease-in-out infinite; }
@keyframes cast-arrow-pulse { 50% { opacity: .35; transform: translateY(5px); } }
/* ลายอัลบั้มจาก Elements: พื้นหลังตลอดส่วน cast ไม่รับคลิก */
.cast-yearbook { isolation: isolate; }
.cast-decoration { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.cast-doodle { position: absolute; width: 190px; height: auto; opacity: .22; }
.cast-doodle.star-a { left: 3%; top: 3%; width: 150px; opacity: .3; transform: rotate(-14deg); }
.cast-doodle.arrow-a { right: 5%; top: 7%; width: 200px; transform: rotate(14deg); }
.cast-doodle.burst-a { left: 1%; top: 32%; opacity: .25; }
.cast-doodle.ring-a { right: 12%; top: 37%; width: 270px; opacity: .12; transform: rotate(-16deg); }
.cast-doodle.scribble-a { left: 38%; top: 48%; width: 200px; opacity: .25; }
.cast-doodle.streak-a { right: 0; top: 65%; transform: rotate(-20deg); }
.cast-doodle.ring-b { left: 4%; top: 81%; width: 230px; opacity: .14; }
.cast-doodle.burst-b { right: 10%; bottom: 3%; width: 240px; opacity: .3; }
@media(max-width:600px) { .cast-doodle { width: 130px; } .cast-doodle.arrow-a { width: 145px; right: -20px; top: 4%; } .cast-doodle.ring-a { width: 180px; right: -30px; } .cast-doodle.scribble-a { left: 12%; } .cast-doodle.burst-b { width: 170px; right: -15px; } }
@media(prefers-reduced-motion:reduce) { .cast-scroll-cue span { animation: none; } }

/* ชื่อเล่นและบทบาทอยู่แถวเดียวกัน; ชื่อจริงอยู่ด้านล่าง */
.cast-name-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; }
.yearbook-caption h3 { font-size: 27px; font-weight: 600; }
.cast-role { font-size: 13px; color: #776b78; }
@media(max-width:600px) { .yearbook-caption h3 { font-size: 23px; } .cast-role { font-size: 11px; } .cast-name-row { gap: 3px 7px; } }

/* แคส: ชื่อเล่น > ชื่อจริง > รับบทเป็น; เลขประจำตัวเป็น placeholder */
.yearbook-caption h3 { color: var(--pink); font-size: 32px; line-height: 1.35; margin: 6px 0; }
.yearbook-caption .cast-full-name { color: #000; font-size: 16px; line-height: 1.6; margin: 0 0 5px; }
.yearbook-caption .cast-role { color: #000; font-size: 16px; line-height: 1.6; margin: 0; }
.yearbook-caption .cast-number { color: #000; font-size: 14px; letter-spacing: .08em; }
@media(max-width:600px) { .yearbook-caption h3 { font-size: 28px; } .yearbook-caption .cast-full-name, .yearbook-caption .cast-role { font-size: 14px; } .yearbook-caption .cast-number { font-size: 13px; } }

/* UID LETTER — ใช้เฉพาะชื่อเล่นและชื่อจริงของนักแสดง */
@font-face { font-family: 'UID Letter'; src: url('/assets/fonts/uid-letter.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.yearbook-caption h3, .yearbook-caption .cast-full-name { font-family: 'UID Letter', 'Kanit', sans-serif; font-weight: 400; }

/* ลดชื่อจริงลง 2px โดยคงขนาดชื่อเล่นและบทบาท */
.yearbook-caption .cast-full-name { font-size: 14px; }
@media(max-width:600px) { .yearbook-caption .cast-full-name { font-size: 12px; } }

/* บทบาทใช้ลายมือเดียวกับชื่อ; ปรับชื่อจริงเฉพาะมือถือจอเล็ก */
.yearbook-caption .cast-role { font-family: 'UID Letter', 'Kanit', sans-serif; font-weight: 400; }
@media(max-width:360px) { .yearbook-caption .cast-full-name { font-size: 11px; } }

/* บทบาทเล็กกว่าชื่อจริงทุกขนาดจอ */
.yearbook-caption .cast-role { font-size: 12px; }
@media(max-width:600px) { .yearbook-caption .cast-role { font-size: 10px; } }
@media(max-width:360px) { .yearbook-caption .cast-role { font-size: 9px; } }

/* ลูกศรเลื่อนลง: กึ่งกลางขอบล่างของ hero เต็มจอ */
.cast-scroll-cue { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 3; }

@media(max-width:600px) {
    /* Reserve the 44px arrow area plus a 12px gap below the synopsis. */
    .hero-bottom { padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 47px); }
    .cast-scroll-cue { bottom: calc(max(18px, env(safe-area-inset-bottom)) - 9px); }
}