/* 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%); }
/* Line 21658: the illustrated cinema lobby (alive-kit/world/2d/lobby-illustrated.js) paints the flat tier. It scrolls with
   the page (its door layer sits under the door links), the ticket list makes room under its band of doors on narrower
   screens, and the links' own sign faces give way to the drawn marquees while staying the focusable controls. */
.ntl[data-lobby-2d-ready] .ntl-flat { position: absolute; inset: 0 0 auto; background: none; }
.ntl-flat .ntl2d-scene { position: absolute; top: 0; left: 0; }
.ntl[data-lobby-2d-ready][data-lobby-2d-band] .ntl-tickets { margin-top: var(--ntl2d-band, 0px); }
.ntl[data-lobby-2d-ready][data-lobby-2d-band] .ntl-room-doors { display: none; }
.ntl[data-lobby-2d-ready]:not([data-lobby-3d-ready]) .ntl-scene-door__sign,
.ntl[data-lobby-2d-ready]:not([data-lobby-3d-ready]) .ntl-scene-door__sign small { color: transparent; background: none; border-color: transparent; box-shadow: none; }
.ntl[data-lobby-2d-ready]:not([data-lobby-3d-ready]) .ntl-scene-door__panel { opacity: 0; }
.ntl[data-lobby-2d-ready] .ntl-title, .ntl[data-lobby-2d-ready] .ntl-sub { text-shadow: 0 1px 2px #191510, 0 0 12px #191510; }

/* 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; }
}