[data-trailer-floor]{padding:clamp(18px,2vw,28px) max(10px,4vw) 24px;background:#030805;color:#eee5c8;box-sizing:border-box;min-height:calc(100svh - var(--t-header-desktop,72px))}
.q-trailer-heading{max-width:1140px;margin:0 auto 14px;text-align:center}
.q-trailer-ticket{color:#25dc71;font:400 15px/1.2 var(--t-font-display)}
.q-trailer-heading h2{margin:6px 0 4px;font:400 clamp(28px,3vw,42px)/1.1 var(--t-font-display);color:#f4e7cb;text-shadow:3px 3px #000}
.q-trailer-heading p{margin:4px 0;font:400 18px/1.25 var(--t-font-body)}
.q-trailer{width:min(1140px,100%);margin:auto;position:relative;box-sizing:border-box}
.q-trailer-screen{position:relative;border:clamp(12px,2vw,24px) solid transparent;border-image:url('community-art/crt.webp') 134 / 1 stretch;background:#030805;box-sizing:border-box}
.q-trailer-poster{position:absolute;inset:0;pointer-events:none}
.q-trailer-poster img{display:block;width:100%;height:100%;object-fit:contain}
.q-trailer[data-started="true"] .q-trailer-poster{display:none}
.q-trailer-screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#030805}
.q-trailer-screen video::cue{font-family:Arial,sans-serif;color:white;background:rgb(0 0 0 / .85);font-size:clamp(14px,2vw,25px)}
.q-trailer-deck{position:relative;margin-top:-4px;padding:8px 14px 6px;border:12px solid transparent;border-image:url('community-art/deck.webp') 66 76 72 76 fill / 12px stretch;box-sizing:border-box}
.q-trailer-timeline{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.q-trailer-timeline output{white-space:nowrap;color:#f4e7cb;font:400 20px/1.2 "VT323",monospace;min-width:108px;text-align:right}
.q-trailer-timeline input{flex:1;min-width:0;width:100%;height:44px;appearance:none;-webkit-appearance:none;background:none;cursor:pointer;touch-action:pan-y}
.q-trailer-timeline input::-webkit-slider-runnable-track{height:12px;border:3px solid #151e11;border-radius:5px;background:#25dc71;box-shadow:0 0 0 2px #777a5a}
.q-trailer-timeline input::-moz-range-track{height:8px;border:3px solid #151e11;border-radius:5px;background:#25dc71;box-shadow:0 0 0 2px #777a5a}
.q-trailer-timeline input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border:0;background:url('community-art/cheer.webp') center / contain no-repeat}
.q-trailer-timeline input::-moz-range-thumb{width:30px;height:30px;border:0;background:url('community-art/cheer.webp') center / contain no-repeat}
.q-trailer-timeline input:disabled{opacity:.5;cursor:default}
.q-trailer-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.q-trailer-controls button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:112px;min-height:48px;padding:6px 16px;background:none;border:8px solid transparent;border-image:url('/media/trailer-v10/control-plate.webp') 110 130 fill / 8px 12px stretch;border-image-source:image-set(url('/media/trailer-v10/control-plate.avif') type('image/avif'),url('/media/trailer-v10/control-plate.webp') type('image/webp'));color:#25dc71;font:400 15px/1.2 var(--t-font-display);cursor:pointer;text-align:center;transition:transform .12s,filter .12s}
.q-trailer-controls [data-trailer-play]{color:#ffe1b4}
.q-trailer-controls button:hover{filter:brightness(1.3);transform:translateY(-1px)}
.q-trailer-controls button:active{transform:translateY(2px)}
.q-trailer :focus-visible,.q-trailer:focus-visible,.q-trailer-transcript summary:focus-visible{outline:3px solid #ffe36b;outline-offset:3px}
.q-trailer [data-trailer-status]{min-height:1.3em;margin:6px 0 0;text-align:center;color:#f4e7cb;font:400 14px/1.3 var(--t-font-body)}
.q-trailer-transcript{max-width:1080px;margin:22px auto 0;font:400 18px/1.5 var(--t-font-body)}
.q-trailer-transcript summary{cursor:pointer;list-style:none;text-align:center;text-decoration:underline;text-underline-offset:5px;color:#b6c5b6;font:400 15px/1.4 var(--t-font-display);padding:12px}
.q-trailer-transcript summary::-webkit-details-marker{display:none}
.q-trailer-transcript>div{max-width:720px;margin:20px auto;padding:0 12px}
.q-trailer:fullscreen{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;justify-content:center;background:#030805;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.q-trailer:fullscreen .q-trailer-screen{min-height:0;flex:1;border-width:0;display:flex;align-items:center;justify-content:center}
.q-trailer:fullscreen video{width:100%;height:100%;min-height:0;object-fit:contain}
.q-trailer:fullscreen .q-trailer-deck{flex:none;width:100%;padding:6px 20px;border-width:8px;margin:0}
.q-trailer:fullscreen [data-trailer-status]:empty{display:none}
@media(max-width:600px){
 [data-trailer-floor]{padding:22px 8px 20px;min-height:0}
 .q-trailer-heading{margin-bottom:16px}
 .q-trailer-deck{padding:12px 4px 6px;border-width:12px}
 .q-trailer-timeline{gap:6px;margin-bottom:8px}
 .q-trailer-timeline output{font-size:17px;min-width:83px}
 .q-trailer-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .q-trailer-controls button{min-width:0;min-height:44px;font-size:13px;padding:6px}
 .q-trailer [data-trailer-status]{font-size:14px}
}
@media(max-height:500px) and (orientation:landscape){
 .q-trailer:fullscreen .q-trailer-controls{display:flex;gap:8px}
 .q-trailer:fullscreen .q-trailer-controls button{min-height:36px;min-width:96px;font-size:12px;padding:4px}
 .q-trailer:fullscreen .q-trailer-timeline{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){.q-trailer-controls button{transition:none}}

.q-trailer-transcript>a{display:block;min-height:48px;padding:12px;text-align:center;text-underline-offset:5px;color:#b6c5b6}
