/* Line 20784: the existing cinema room, polished. Materials have their own warm palette; interface type, focus and
   spacing read the house tokens. The booth and tickets paint first; phones never need a GPU or a texture download. */
.ntl {
    --ntl-plum: #191510;
    --ntl-wine: #32271e;
    --ntl-red: #4e2630;
    --ntl-gold: var(--ns-gold-light);
    --ntl-brass: #af9464;
    --ntl-brass-light: #ead7ac;
    --ntl-wood: #34261c;
    --ntl-ink: #f6efe4;
    --ntl-muted: #cabda8;
    --ntl-stone: #a99b85;
    --ntl-bulb: #fff0ca;
    --ntl-shadow: rgb(0 0 0 / .5);
    margin: 0; min-height: 100vh; background: var(--ntl-plum); color: var(--ntl-ink);
    font: 400 16px/1.5 var(--ns-font); overflow-x: hidden;
}
.ntl *, .ntl *::before, .ntl *::after { box-sizing: border-box; }
.ntl a { color: var(--ntl-gold); }
.ntl a:focus-visible, .ntl button:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 4px; }
.ntl-3d { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; z-index: 0; }
.ntl[data-lobby-3d-ready] .ntl-3d { display: block; }
.ntl[data-lobby-3d-ready] .ntl-flat { display: none; }
.ntl-flat { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse at 50% 25%, var(--ntl-wine), var(--ntl-plum) 76%); }
.ntl-flat__ceiling { position: absolute; inset: 0 0 auto; height: 22vh;
    background: radial-gradient(ellipse at 50% 0%, rgb(255 222 164 / .15), transparent 65%),
        repeating-linear-gradient(90deg, transparent 0 15%, rgb(234 215 172 / .08) 15% calc(15% + 1px), transparent calc(15% + 1px) 25%); }
.ntl-flat__ceiling::after { content: ''; position: absolute; top: 20%; left: 10%; right: 10%; height: 2px;
    background: var(--ntl-brass-light); box-shadow: 0 0 12px 3px rgb(255 216 143 / .16); opacity: .55; }
.ntl-flat__wall { position: absolute; inset: 16vh 0 28vh;
    background: repeating-linear-gradient(90deg, transparent 0 11%, rgb(234 215 172 / .055) 11% calc(11% + 1px), transparent calc(11% + 1px) 22%),
        linear-gradient(180deg, transparent, rgb(0 0 0 / .2)); border-bottom: 2px solid rgb(234 215 172 / .12); }
.ntl-flat__floor { position: absolute; inset: auto -30% -10vh; height: 48vh; transform: perspective(600px) rotateX(42deg); transform-origin: bottom;
    background: repeating-linear-gradient(0deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, transparent 37%, var(--ntl-red) 37% 63%, transparent 63%),
        linear-gradient(180deg, var(--ntl-wine), var(--ntl-plum)); }

/* Room doors: real HTML links over the same screen-space plan as the 3D architecture. */
.ntl-room-doors { display: none; position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none; }
.ntl-scene-door { position: absolute; display: grid; grid-template-rows: var(--ntl-sign-height) 1fr; gap: 16px;
    left: var(--ntl-door-left); top: var(--ntl-door-top); width: var(--ntl-door-width); height: var(--ntl-door-height);
    padding: 0 10px; color: var(--ntl-ink) !important; text-decoration: none; pointer-events: auto; }
.ntl-scene-door__sign { display: grid; align-content: center; min-height: 44px; padding: 8px; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center;
    background: linear-gradient(180deg, var(--ntl-wine), var(--ntl-plum)); border: 1px solid var(--ntl-brass); border-radius: 3px;
    box-shadow: 0 1px 0 rgb(255 240 202 / .2), 0 4px 12px var(--ntl-shadow); transition: border-color 80ms, color 80ms; }
.ntl-scene-door__sign small { display: block; margin-top: 4px; color: var(--ntl-muted); font-size: 12px; }
.ntl-scene-door__panel { position: relative; justify-self: center; width: 72%; height: 100%; border: 3px solid var(--ntl-brass); border-radius: 3px 3px 0 0;
    background: repeating-linear-gradient(90deg, transparent 0 4px, rgb(0 0 0 / .12) 4px 5px),
        linear-gradient(100deg, var(--ntl-wood), var(--ntl-wine) 45%, var(--ntl-wood)); box-shadow: 0 0 24px rgb(255 208 144 / .08), inset 0 0 0 8px rgb(0 0 0 / .2); }
.ntl-scene-door__panel::after { content: ''; position: absolute; top: 48%; right: 10%; width: 4px; height: 24px;
    background: linear-gradient(90deg, var(--ntl-brass), var(--ntl-brass-light), var(--ntl-brass)); border-radius: 4px; }
.ntl[data-lobby-3d-ready] .ntl-scene-door__panel { opacity: 0; }
.ntl-scene-door.is-lit .ntl-scene-door__sign, .ntl-scene-door:hover .ntl-scene-door__sign { color: var(--ntl-gold); border-color: var(--ntl-brass-light); }
.ntl-scene-door--soon { opacity: .65; }
@media (min-width: 1100px) { .ntl[data-lobby-doors-ready] .ntl-room-doors { display: block; } }

.ntl-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 24px;
    background: linear-gradient(180deg, var(--ntl-plum), transparent); }
.ntl-brand { font-weight: 600; font-size: 20px; color: var(--ntl-ink) !important; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.ntl-brand__room { color: var(--ntl-brass-light); font-weight: 400; }
.ntl-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--ns-radius); border: 1px solid var(--ns-border-strong);
    text-decoration: none; color: var(--ntl-ink) !important; background: var(--ntl-shadow); font-size: 14px; }
.ntl-main { position: relative; z-index: 1; display: grid; gap: 32px; max-width: 1240px; margin: 0 auto; padding: 16px 16px 32px; pointer-events: none; }
.ntl-main > * { pointer-events: auto; }
.ntl-walk-in { justify-self: center; min-width: 132px; min-height: 48px; padding: 0 22px; border: 1px solid var(--ntl-brass-light); border-radius: 999px;
    background: var(--ntl-brass-light); color: var(--ntl-plum); font: 600 16px/1 var(--ns-font); cursor: pointer; box-shadow: 0 8px 24px var(--ntl-shadow); }
.ntl-world { position: fixed; inset: 0; z-index: 1; background: var(--ntl-plum); }
.ntl-world__stage, .ntl-world__stage > canvas, .ntl-world__stage > div { width: 100%; height: 100%; overflow: hidden; }
.ntl-world__stage > div { display: grid; place-items: center; color: var(--ntl-brass-light); background: var(--ntl-plum); }
.ntl-world__status { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; max-width: calc(100% - 32px); padding: 8px 12px;
    border-radius: var(--ns-radius); background: rgb(25 21 16 / .82); color: var(--ntl-ink); font-size: 14px; }
.ntl-world .ak-world-joystick { z-index: 2; }
.ntl[data-lobby-walking] .ntl-walk-in { visibility: hidden; }
.ntl[data-lobby-walking] .ntl-tickets { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Line 21444 (live check 10050308): the footer (z-index 1, after <main>) painted over the walking world; it leaves the screen like the tickets. */
.ntl[data-lobby-walking] .ntl-foot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ntl[data-lobby-walking] .ntl-booth { position: fixed; right: 16px; bottom: 16px; z-index: 3; width: 150px; padding: 0; border: 0; background: none; box-shadow: none; }
.ntl[data-lobby-walking] .ntl-booth > :not(.ntl-glass) { display: none; }
.ntl[data-lobby-walking] .ntl-glass.nst-room { width: 140px; height: 180px; margin: 0; border: 0; background: transparent; box-shadow: none; }
@media (max-width: 480px) { .ntl[data-lobby-walking] .ntl-booth { width: 92px; right: 8px; bottom: 64px; }
    .ntl[data-lobby-walking] .ntl-glass.nst-room { width: 92px; height: 120px; } }
@media (max-width: 480px) { .ntl-world .ak-world-joystick { display: grid; place-items: center; position: absolute; left: 20px; bottom: 68px; width: 88px; height: 88px;
    border: 1px solid var(--ntl-brass); border-radius: 50%; background: rgb(25 21 16 / .72); touch-action: none; }
    .ntl-world .ak-world-joystick span { width: 36px; height: 36px; border-radius: 50%; background: var(--ntl-brass-light); } }

/* Walnut cabinet, brushed brass, a glass window and a honed stone counter. */
.ntl-booth { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 0 20px 24px; border-radius: 32px 32px 8px 8px;
    background: repeating-linear-gradient(90deg, rgb(255 230 190 / .025) 0 1px, transparent 1px 5px),
        linear-gradient(95deg, var(--ntl-plum), var(--ntl-wood) 12%, var(--ntl-wine) 48%, var(--ntl-wood) 88%, var(--ntl-plum));
    border: 1px solid var(--ntl-brass); box-shadow: inset 0 1px 0 var(--ntl-brass-light), inset 8px 0 14px rgb(0 0 0 / .25),
        0 20px 40px var(--ntl-shadow), 0 0 64px rgb(255 206 139 / .06); }
.ntl-marquee { display: flex; align-items: center; justify-content: center; gap: 16px; width: calc(100% + 40px); margin: 0 -20px; padding: 16px;
    border-radius: 32px 32px 0 0; background: linear-gradient(180deg, var(--ntl-wine), var(--ntl-plum)); border-bottom: 1px solid var(--ntl-brass); }
.ntl-marquee__word { font-weight: 500; font-size: 20px; letter-spacing: .24em; text-transform: uppercase; color: var(--ntl-bulb); text-shadow: 0 0 12px rgb(255 216 143 / .18); }
.ntl-marquee__bulbs { flex: 1; height: 8px; max-width: 80px; background: radial-gradient(circle, var(--ntl-bulb) 0 2px, transparent 3px) 0 50% / 16px 8px repeat-x; filter: drop-shadow(0 0 3px rgb(255 216 143 / .25)); }
.ntl-glass.nst-room { position: relative; display: grid; place-items: center; width: min(256px, 64vw); height: min(240px, 60vw); margin-top: 12px;
    border-radius: 68px 68px 6px 6px; background: radial-gradient(ellipse at 50% 15%, rgb(234 215 172 / .14), transparent 65%), var(--ntl-plum);
    border: 1px solid var(--ntl-brass-light); box-shadow: 0 0 0 4px var(--ntl-wood), 0 0 0 5px var(--ntl-brass), inset 0 0 28px rgb(0 0 0 / .35); }
.ntl-glass::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(116deg, transparent 10%, rgb(255 255 255 / .075) 11%, rgb(255 255 255 / .025) 30%, transparent 31%, transparent 66%, rgb(255 255 255 / .025) 67%, transparent 80%); }
.ntl-glass alive-agent[data-theater-host][data-mode="container"] { width: 90%; height: 90%; --alive-agent-size: 100%; }
/* Line 21098 (live check of OC-FIV): in her container the kit's caption inside the glass is hidden (netshow-theater.css);
   her whole question, ending "story?", is the booth's own line under the glass (.ntl-caption). So the glass holds no room
   for a caption that is not shown there, and the Happy Face uses all of it. Set free, the kit's own caption rules apply. */
.ntl-glass alive-agent[data-theater-host][data-mode="container"] > .ak-face { inset: 0; }
.ntl-who { margin: 8px 0 0; font-weight: 500; font-size: 14px; }
.ntl-who__ai { margin-left: 8px; font-size: 12px; color: var(--ntl-brass-light); }
.ntl-caption { margin: 0; min-height: 3em; max-width: 34em; padding: 4px 0 8px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ntl-ink); }
.ntl-counter { width: calc(100% + 52px); height: 16px; margin: 0 -26px; border-radius: 2px;
    background: linear-gradient(180deg, var(--ntl-brass-light), var(--ntl-stone) 45%, var(--ntl-wine) 50%, var(--ntl-brass) 90%);
    box-shadow: 0 6px 8px var(--ntl-shadow); }
.ntl-tray { min-height: 0; width: 100%; display: grid; justify-items: center; }
.ntl-ropes { position: absolute; bottom: -20px; left: -60px; right: -60px; height: 100px; pointer-events: none; }
.ntl-ropes span { position: absolute; top: 0; width: 28%; height: 50%; border-bottom: 5px solid var(--ntl-red); border-radius: 0 0 50% 50%; filter: drop-shadow(0 2px 2px var(--ntl-shadow)); }
.ntl-ropes span:first-child { left: 0; transform: rotate(-12deg); }
.ntl-ropes span:last-child { right: 0; transform: rotate(12deg); }
.ntl-ropes::before, .ntl-ropes::after { content: ''; position: absolute; top: 16px; width: 12px; height: 82px; border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, var(--ntl-wine), var(--ntl-brass) 28%, var(--ntl-brass-light) 50%, var(--ntl-brass) 65%, var(--ntl-wine)); border-bottom: 4px solid var(--ntl-brass); }
.ntl-ropes::before { left: 0; }.ntl-ropes::after { right: 0; }
.ntl-printed { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: min(340px, 100%); padding: 12px; border-radius: 4px;
    background: var(--ntl-brass-light); color: var(--ntl-plum); border-left: 4px dashed var(--ntl-brass); box-shadow: 0 8px 16px var(--ntl-shadow); animation: ntl-print .4s ease-out both; }
@keyframes ntl-print { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ntl-printed__admit { font-size: 12px; text-transform: uppercase; color: var(--ntl-red); writing-mode: vertical-rl; transform: rotate(180deg); }
.ntl-printed__title { font-weight: 600; line-height: 1.25; }
.ntl-printed__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--ns-radius); font-weight: 600; text-decoration: none; background: var(--ntl-red); color: var(--ntl-ink) !important; }

.ntl-tickets { display: grid; align-content: start; gap: 12px; }
.ntl-title { margin: 0; font-size: clamp(24px, 6vw, 32px); font-weight: 500; line-height: 1.25; }
.ntl-sub { margin: 0 0 4px; color: var(--ntl-muted); }
.ntl-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ntl-ticket { position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr auto; gap: 8px 12px; min-width: 0; padding: 16px 16px 16px 0;
    border-radius: var(--ns-radius); background: linear-gradient(120deg, var(--ntl-wine), var(--ntl-plum)); border: 1px solid var(--ns-border-strong);
    box-shadow: 0 4px 12px rgb(0 0 0 / .16); transition: border-color 80ms, box-shadow 80ms; }
.ntl-ticket.is-focus, .ntl-ticket.is-handed { border-color: var(--ntl-brass); box-shadow: 0 0 0 1px var(--ntl-brass); }
.ntl-ticket__stub { grid-row: 1 / span 2; display: grid; place-items: center; border-right: 1px dashed var(--ntl-brass); font-size: 12px; text-transform: uppercase; color: var(--ntl-muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.ntl-ticket__body { display: grid; gap: 4px; min-width: 0; }
.ntl-ticket__title { font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--ntl-ink); overflow-wrap: anywhere; }
.ntl-ticket__line { color: var(--ntl-muted); font-size: 14px; }
.ntl-ticket__site { font-size: 12px; color: var(--ntl-brass-light); }
.ntl-ticket__go, .ntl-ticket__soon { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; }
.ntl-ticket__go { border: 1px solid var(--ntl-brass); color: var(--ntl-brass-light) !important; transition: background 80ms; }
.ntl-ticket__go:hover { background: rgb(234 215 172 / .1); }
.ntl-ticket:first-child .ntl-ticket__go { background: var(--ntl-brass-light); color: var(--ntl-plum) !important; }
.ntl-ticket__soon { color: var(--ntl-muted); border: 1px dashed var(--ns-border-strong); }
.ntl-ticket--soon { border-style: dashed; }
.ntl-foot { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 8px 16px 32px; font-size: 14px; color: var(--ntl-muted); }
.ntl-foot p { margin: 0 0 4px; }.ntl-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.ntl[data-lobby-going] .ntl-main { transition: opacity .4s ease; opacity: .6; }
@media (min-width: 560px) { .ntl-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
    .ntl-main { justify-items: center; gap: 40px; padding-top: 32px; }
    .ntl-booth { width: 380px; }
    .ntl-tickets { width: 100%; justify-items: center; text-align: center; }.ntl-list { width: 100%; text-align: left; }
}
@media (min-width: 1200px) { .ntl-list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 559px) {
    .ntl-bar { padding: 8px 16px; }.ntl-brand { font-size: 16px; }
    /* The voice disclosure is created with shared inline positioning. In this room it belongs immediately below the
       52 px title bar, never over the NetShow Theater name during the booth host's first hello. */
    #ns-voice-privacy-note { top: 60px !important; bottom: auto !important; }
    .ntl-main { gap: 24px; }
    .ntl-glass.nst-room { height: 190px; }
    .ntl-marquee { padding-block: 12px; }
    .ntl-booth { padding-bottom: 20px; }.ntl-ropes { left: -4px; right: -4px; bottom: -12px; height: 48px; }
    .ntl-ropes::before, .ntl-ropes::after { height: 32px; width: 8px; }
    .ntl-ticket__title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ntl .ntl-printed, .ntl .ntl-marquee__bulbs { animation: none; }
    .ntl .ntl-ticket, .ntl .ntl-scene-door__sign, .ntl[data-lobby-going] .ntl-main { transition: none; }
}