@font-face{font-family:Rye;src:url('assets/fonts/rye-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#29251c;--paper:#ecd7ac;--accent:#873f2d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100e0c}body{font-family:Barlow,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #f3b765;outline-offset:4px}[hidden]{display:none!important}
body.is-idle,body.is-idle button{cursor:none}
/* De hele pagina, inclusief bediening, krijgt na een kwartslag omgewisselde maten. */
.tv-viewport{--u:1px;position:absolute;left:50%;top:50%;width:var(--view-width,100vw);height:var(--view-height,100vh);transform:translate(-50%,-50%) rotate(var(--rotation,0deg));transform-origin:center;overflow:hidden;isolation:isolate}
.screen{position:relative;width:100%;height:100%;display:flex;flex-direction:column;gap:calc(20 * var(--u));padding:0 0 calc(24 * var(--u));overflow:hidden;background:repeating-linear-gradient(91deg,#ffffff04 0 2px,transparent 3px 104px,#08050266 106px 109px,transparent 112px 213px),repeating-linear-gradient(1deg,#ffffff02 0 1px,transparent 2px 8px),linear-gradient(90deg,#201812,#33251b 24%,#271e17 55%,#35281e 80%,#1d1712);box-shadow:inset 0 0 calc(75 * var(--u)) #000b}
/* Video bovenaan, een smalle titelregel, vervolgens alle resterende ruimte voor tekst. */
.music{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;max-height:50%;width:100%;color:#e8d6b0}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;flex:0 1 auto;min-height:0;background:#080807;overflow:hidden}
.video-host,.video-host>div,.video-host>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-host{z-index:1}.video-host iframe{display:block;width:100%;height:100%;border:0}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 20%,#30463f,#152823 70%);color:#e6ce9c;z-index:2;pointer-events:none}
.video-placeholder:before{content:"";position:absolute;inset:calc(22 * var(--u));border:1px solid #d8ba7a50;outline:1px solid #d8ba7a25;outline-offset:calc(8 * var(--u))}
.saloon-star{height:calc(91 * var(--u));width:calc(91 * var(--u));fill:#cfaa69;stroke:#1a2b26;stroke-width:2;margin-bottom:calc(20 * var(--u))}.saloon-star circle{fill:#233e34;stroke:#dfc48c}
.saloon-eyebrow{font-size:calc(18 * var(--u));letter-spacing:calc(7 * var(--u));margin:0 0 calc(14 * var(--u));color:#c9b785}.video-placeholder strong{font-family:Rye,Georgia,serif;font-size:calc(64 * var(--u));font-weight:400;letter-spacing:calc(-1 * var(--u))}.video-placeholder p{font-size:calc(23 * var(--u));letter-spacing:var(--u);color:#c3c0a6;margin:calc(22 * var(--u)) 0 0}
.music-caption{margin-bottom:-15px;margin-top:8px;flex:0 0 auto;min-height:clamp(24px,calc(48 * var(--u)),120px);padding:calc(9 * var(--u)) calc(18 * var(--u));display:flex;align-items:center;gap:calc(23 * var(--u));position:relative}
.caption-label{margin-top:3px;font-size:calc(16 * var(--u));letter-spacing:calc(3 * var(--u));white-space:nowrap;font-weight:700;color:#bc9561}.track-window{flex:1;min-width:0;overflow:hidden;white-space:nowrap;line-height:1.4}.track-window span{display:inline-block;font-size:calc(23 * var(--u));letter-spacing:var(--u);font-weight:600;color:#d9c7a7}.caption-brand{margin-bottom:0px;margin-top:5px;flex:none;margin-left:auto;text-align:right;white-space:nowrap;font-size:calc(20 * var(--u));font-weight:600;letter-spacing:var(--u);color:#d9c7a7}.sound-prompt{flex:none;font-size:calc(20 * var(--u));border:1px solid #cba16580;border-radius:calc(4 * var(--u));background:#261f17;color:#f1d3a0;padding:calc(7 * var(--u)) calc(11 * var(--u));letter-spacing:calc(.4 * var(--u))}
.poster{--ink:#2c2a20;--paper:#ecd5a4;--accent:#883d2d;position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:calc(24 * var(--u));margin:0 calc(24 * var(--u));padding:calc(72 * var(--u)) calc(78 * var(--u)) calc(48 * var(--u));overflow:hidden;color:var(--ink);background:radial-gradient(ellipse at 48% 34%,#fff6da90,transparent 65%),linear-gradient(100deg,#8163381a,transparent 17% 82%,#6b4b2920),var(--paper);box-shadow:0 9px 28px #0008,inset 0 0 calc(50 * var(--u)) #69471e35;clip-path:polygon(0 9px,8px 0,calc(100% - 10px) 0,100% 11px,100% calc(100% - 8px),calc(100% - 8px) 100%,10px 100%,0 calc(100% - 10px));transition:background-color .8s,color .8s}
.poster[data-palette=teal]{--ink:#f1dcad;--paper:#213e35;--accent:#d8ab65;background:radial-gradient(ellipse at 48% 34%,#38604c50,transparent 65%),var(--paper);box-shadow:0 9px 28px #0008,inset 0 0 60px #0b1d1580}
.poster[data-palette=rust]{--ink:#f4dfb6;--paper:#793d2f;--accent:#eec481;background:radial-gradient(ellipse at 48% 34%,#bc6d4140,transparent 65%),var(--paper);box-shadow:0 9px 28px #0008,inset 0 0 60px #35181160}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:url('assets/grain.svg');background-size:290px;mix-blend-mode:multiply;z-index:4}.poster-frame{position:absolute;inset:calc(23 * var(--u));border:calc(3 * var(--u)) solid currentColor;opacity:.75;pointer-events:none}.poster-frame:before{content:"";position:absolute;inset:calc(7 * var(--u));border:1px solid currentColor}.frame-corner{position:absolute;width:calc(37 * var(--u));height:calc(37 * var(--u));background:var(--paper);color:var(--ink);transform:rotate(45deg);border:calc(2 * var(--u)) solid currentColor;outline:calc(5 * var(--u)) solid var(--paper)}.top-left{top:calc(9 * var(--u));left:calc(9 * var(--u))}.top-right{top:calc(9 * var(--u));right:calc(9 * var(--u))}.bottom-left{bottom:calc(9 * var(--u));left:calc(9 * var(--u))}.bottom-right{bottom:calc(9 * var(--u));right:calc(9 * var(--u))}.frame-corner:after{content:"";position:absolute;inset:calc(10 * var(--u));background:currentColor}
.message-area{position:relative;flex:1 1 0;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}.slide-message{width:100%;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;font-family:Barlow,"Arial Narrow",Arial,sans-serif;font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:normal}.slide-line{flex:0 0 auto;display:block;width:max-content;max-width:none;white-space:pre;line-height:1.02;tab-size:4}.slide-line:empty:before{content:"\00a0"}.slide-word{display:inline-block;white-space:pre;will-change:transform,opacity}.slide-line.is-black{color:#171713}.slide-line.is-accent{color:var(--accent)}
.poster-footer{position:relative;flex:none;text-align:center}.footer-rule{display:flex;align-items:center;justify-content:center;gap:calc(24 * var(--u));color:var(--accent);height:calc(28 * var(--u))}.footer-rule>span{width:22%;max-width:calc(177 * var(--u));height:calc(2 * var(--u));background:currentColor;box-shadow:0 calc(5 * var(--u)) 0 calc(-1 * var(--u)) currentColor}.footer-rule b{font-size:calc(16 * var(--u));line-height:1;font-family:Georgia,serif}.footer-rule b:nth-of-type(2){font-size:calc(29 * var(--u))}.store-signoff{font-size:calc(18 * var(--u));letter-spacing:calc(5 * var(--u));margin-top:calc(17 * var(--u));font-weight:700;opacity:.75}
.connection-mark{position:absolute;right:calc(8 * var(--u));bottom:calc(8 * var(--u));width:calc(8 * var(--u));height:calc(8 * var(--u));background:#c59650;border-radius:50%;z-index:10}
.operator-controls{position:absolute;bottom:18px;right:18px;z-index:20;display:flex;gap:7px;padding:7px;border:1px solid #d5b78640;background:#181612ed;border-radius:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .25s,transform .25s;box-shadow:0 5px 24px #0005}.operator-controls.is-visible{opacity:1;pointer-events:auto;transform:none}.operator-controls button{border:1px solid #c5ad8626;background:#ffffff08;color:#f5e1bd;border-radius:6px;min-height:40px;padding:7px 12px;font-family:Arial,sans-serif;font-size:13px;font-weight:600}.operator-controls button:hover{background:#ffffff16}.operator-controls button:last-child,.operator-controls button:nth-last-child(2){font-size:20px}
.settings-overlay{position:absolute;inset:0;background:#080705cb;backdrop-filter:blur(8px);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:20px;font-family:Arial,sans-serif;color:#eadecb;overflow:auto}.settings-card{width:470px;max-width:100%;margin:auto;border:1px solid #bda17a55;background:#27221b;border-radius:13px;padding:29px;box-shadow:0 18px 90px #0009}.settings-heading{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:27px}.settings-heading span{font-size:9px;letter-spacing:2px;color:#d3ac74}.settings-heading h1{font-size:24px;line-height:1.2;margin:9px 0 0}.settings-heading>button{background:transparent;border:0;color:#d8c6aa;font-size:28px;line-height:1;padding:0 3px}.settings-card label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}.settings-card input[type=url]{width:100%;background:#181611;border:1px solid #a88c624d;border-radius:7px;color:#f2dfbd;padding:13px 12px;font-size:13px}.settings-hint{font-size:11px;color:#afa18b;line-height:1.65;margin:10px 0 25px}.settings-card label output{float:right;color:#d6b57e}.settings-card input[type=range]{width:100%;accent-color:#c18a4a;margin:0 0 22px}.settings-card .settings-checkbox{display:flex;gap:9px;align-items:center;font-size:12px;font-weight:400;line-height:1.5}.settings-checkbox input{accent-color:#c18a4a;width:16px;height:16px;margin:0}.settings-status{min-height:36px;font-size:11px;line-height:1.5;color:#dcba83;margin:20px 0 3px}.settings-status.is-error{color:#f0a890}.settings-buttons{display:flex;gap:10px}.settings-buttons>button{padding:12px 13px;border-radius:7px;font-size:11px;font-weight:700;flex:1}.settings-buttons .secondary{background:transparent;border:1px solid #ab91634d;color:#e0c89f}.settings-buttons .primary{background:#d0a66d;border:1px solid #d0a66d;color:#211b14}.settings-buttons button:disabled{opacity:.5;cursor:wait}.settings-card>small{display:block;font-size:9px;line-height:1.6;color:#938875;margin-top:23px}
.rotation-picker{padding:0;margin:0 0 24px;border:0;min-width:0}.rotation-picker legend{font-size:12px;font-weight:600;margin-bottom:10px}.rotation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.settings-card .rotation-option{position:relative;margin:0;cursor:pointer;font-size:11px;font-weight:400}.rotation-option input{position:absolute;width:1px;height:1px;opacity:0}.rotation-option span{height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #a88c624d;border-radius:7px;background:#181611;color:#cabcaa}.rotation-option b{font-size:24px;font-weight:400;line-height:1}.rotation-option input:checked+span{border-color:#d0a66d;color:#f3d7aa;background:#d0a66d13;box-shadow:inset 0 0 0 1px #d0a66d30}.rotation-option input:focus-visible+span{outline:3px solid #f3b765;outline-offset:3px}.rotation-picker .settings-hint{margin:10px 0 0}
.settings-webhook{border-top:1px solid #ab91632b;padding-top:17px;margin-top:20px}.settings-webhook>span{font-size:10px;font-weight:600;color:#d6b57e}.settings-webhook code{display:block;font-size:11px;line-height:1.6;color:#eadecb;margin-top:7px;overflow-wrap:anywhere}.settings-webhook p{font-size:10px;line-height:1.6;color:#938875;margin-bottom:0}
@media(max-width:420px){.operator-controls{right:10px;bottom:10px;gap:5px;padding:5px}.operator-controls button{padding:7px 9px}.settings-overlay{padding:12px}.settings-card{padding:23px}.rotation-options{gap:5px}}
noscript{position:absolute;inset:0;display:grid;place-items:center;padding:40px;background:#211913;color:#e6ce9c;font:20px Arial,sans-serif;z-index:99}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.slide-word{will-change:auto}}