/* NOVOSONIC Signage player. Sizes use container units (cqmin) of the stage, so everything scales with the design resolution. Readable from a distance; works with touch, mouse, keyboard and TV remote. */
:root{--bg:#0E1419;--panel:#18222B;--ink:#F3F6F8;--muted:#9AA8B4;--signal:#F2A900;--go:#2FB36B;--stop:#E2504C;--line:#2C3A46;
  --font:"Bahnschrift","DIN Alternate","Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--font);cursor:default}
body.hide-cursor{cursor:none}
[hidden]{display:none!important}

/* the stage is the design resolution, scaled (and rotated when needed) to fit the physical screen */
#stage{container-type:size;position:absolute;left:50%;top:50%;transform-origin:center center;background:var(--bg);overflow:hidden}
#stage.full{left:0;top:0;width:100vw;height:100vh;transform:none}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4cqmin;text-align:center;gap:2.2cqmin}
.brand{position:absolute;left:4cqmin;top:3.4cqmin;font-weight:700;letter-spacing:.04em;color:var(--muted);font-size:2.2cqmin}
.langs{position:absolute;right:4cqmin;top:3cqmin;display:flex;gap:1cqmin}
.langs button{font:inherit;font-size:2cqmin;padding:.8cqmin 1.6cqmin;border-radius:1cqmin;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.langs button[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}
h1{font-size:5cqmin;margin:0;font-weight:700}
p{margin:0;font-size:2.6cqmin;color:var(--muted);max-width:70ch;line-height:1.4}

form.activate{display:flex;flex-direction:column;gap:2cqmin;width:min(86cqmin,900px);margin-top:2cqmin;text-align:left}
form.activate label{display:flex;flex-direction:column;gap:.8cqmin;font-size:2.2cqmin;color:var(--muted)}
form.activate input{font:inherit;font-size:3.6cqmin;padding:1.6cqmin 2cqmin;border-radius:1.2cqmin;border:2px solid var(--line);background:var(--panel);color:var(--ink);width:100%}
form.activate input.key{font-family:Consolas,"Cascadia Mono","Roboto Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
form.activate input:focus{outline:none;border-color:var(--signal)}
form.activate button{font:inherit;font-size:3cqmin;font-weight:700;padding:1.6cqmin;border-radius:1.2cqmin;border:0;background:var(--signal);color:#1A1300;cursor:pointer}
form.activate button:focus-visible{outline:4px solid #fff;outline-offset:3px}
form.activate button[disabled]{opacity:.6}
.err{color:var(--stop);font-size:2.4cqmin;min-height:3cqmin;margin:0}
.meta{position:absolute;left:0;right:0;bottom:3cqmin;font-size:1.8cqmin;color:var(--muted)}

.icon{width:12cqmin;height:12cqmin;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7cqmin;font-weight:700}
.icon.ok{background:rgba(47,179,107,.15);color:var(--go)}
.icon.bad{background:rgba(226,80,76,.15);color:var(--stop)}
.icon.wait{background:rgba(242,169,0,.15);color:var(--signal)}
.clock{font-size:12cqmin;font-weight:700;letter-spacing:.02em;line-height:1}
.date{font-size:3cqmin;color:var(--muted)}
.standby .who{font-size:3.4cqmin}
.test{position:absolute;right:4cqmin;top:3cqmin;background:var(--signal);color:#1A1300;font-weight:700;padding:.6cqmin 1.4cqmin;border-radius:.8cqmin;font-size:1.8cqmin}

.banner{position:fixed;left:0;right:0;top:0;padding:1.2vmin 2vmin;background:#FFD45C;color:#3A2A00;font-size:2vmin;text-align:center;z-index:10;font-family:var(--font)}

/* playback: two layers for a soft cross-fade */
.layer{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background:#000}
.layer.on{opacity:1}
.layer .media{position:absolute;inset:0;width:100%;height:100%;display:block}