/* TV: palco fisso 960×540 scalato da tv.js. Niente CSS grid né variabili (Tizen datati). */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; }
body { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; color: #fff7e6; }
[hidden] { display: none !important; }
#stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; overflow: hidden; background: #000; }
#cv { position: absolute; left: 0; top: 0; width: 960px; height: 540px; }

.panel { position: absolute; left: 0; top: 0; width: 960px; height: 540px; }
#lobby { background: rgba(20, 8, 2, .55); display: -webkit-box; display: -webkit-flex; display: flex; }
#lobby .left { width: 540px; padding: 26px 0 0 34px; box-sizing: border-box; }
#lobby .right { width: 420px; padding: 26px 30px 0 10px; box-sizing: border-box; }

.logo { margin: 0; font: 900 64px/0.92 Impact, "Arial Black", sans-serif; text-transform: uppercase; color: #ffb21a; text-shadow: 0 4px 0 #a3330f, 0 8px 18px rgba(0,0,0,.6); letter-spacing: .01em; }
.logo span { display: block; font-size: 26px; color: #fff7e6; text-shadow: 0 2px 0 #a3330f; }
.logo em { display: block; font-style: normal; color: #ff5a1f; font-size: 50px; text-shadow: 0 4px 0 #5e1a06; }

.join { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 18px; }
.qr { width: 150px; height: 150px; background: #fff; padding: 8px; border-radius: 10px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.qr img, .qr canvas { width: 150px; height: 150px; display: block; image-rendering: pixelated; }
.howto { margin-left: 20px; font-size: 17px; line-height: 1.35; }
.howto p { margin: 0 0 10px; }
.howto b { color: #ffd27a; word-break: break-all; }
.code { font-size: 18px; }
.code b { font: 900 40px/1 Impact, "Arial Black", sans-serif; letter-spacing: .14em; color: #fff; display: block; margin-top: 4px; }

.now { margin-top: 16px; font-size: 22px; min-height: 58px; line-height: 1.3; }
.now b { color: #ffd27a; }
.now .blink { -webkit-animation: blink 1s steps(2) infinite; animation: blink 1s steps(2) infinite; color: #7dff8a; }
@-webkit-keyframes blink { 50% { opacity: .3; } }
@keyframes blink { 50% { opacity: .3; } }
.now small { display: block; font-size: 16px; color: #e8cfa6; }

.keysHelp { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; color: #e8cfa6; }
.keysHelp li { display: inline-block; margin: 0 14px 6px 0; }
.keysHelp b { display: inline-block; min-width: 26px; padding: 0 4px; box-sizing: border-box; height: 26px; line-height: 26px; text-align: center; border-radius: 6px; background: #3b2a1c; color: #ffd27a; margin-right: 4px; border: 1px solid #6b4a2b; }

.tops { background: rgba(0,0,0,.45); border: 2px solid #ffb21a; border-radius: 12px; padding: 12px 16px; min-height: 236px; }
.tops h3 { margin: 0 0 8px; font: 900 26px Impact, "Arial Black", sans-serif; color: #ffb21a; text-transform: uppercase; letter-spacing: .03em; }
.tops table { width: 100%; border-collapse: collapse; font-size: 18px; }
.tops td { padding: 3px 0; }
.tops td.n { width: 30px; color: #ffb21a; font-weight: bold; }
.tops td.s { text-align: right; font-family: "Courier New", monospace; font-weight: bold; color: #fff; }
.tops td.l { width: 52px; text-align: right; color: #c9a87a; font-size: 14px; }
.tops .empty { color: #c9a87a; font-size: 16px; }
.tops .dots { margin-top: 6px; text-align: center; }
.tops .dots i { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #6b4a2b; margin: 0 3px; }
.tops .dots i.on { background: #ffb21a; }
.tops.small { min-height: 0; margin-top: 16px; }
.tops.small table { font-size: 16px; }

.queue { margin-top: 14px; }
.queue h3 { margin: 0 0 4px; font-size: 16px; color: #e8cfa6; text-transform: uppercase; letter-spacing: .08em; }
.queue ol { margin: 0; padding-left: 26px; font-size: 18px; max-height: 120px; overflow: hidden; }
.queue li { margin: 1px 0; }
.queue li.cur { color: #ffd27a; font-weight: bold; }
.queue li.off { color: #8e7a5e; }
.queue li.off:after { content: " (scollegato)"; font-size: 13px; }

.over { background: rgba(10, 2, 0, .72); text-align: center; }
.overBox { width: 600px; margin: 40px auto 0; }
.over .t1 { margin: 0; font: 900 64px Impact, "Arial Black", sans-serif; color: #ff5a1f; text-transform: uppercase; text-shadow: 0 4px 0 #5e1a06; }
.over .t2 { margin: 6px 0 0; font-size: 30px; }
.over .t3 { margin: 4px 0 0; font: 900 58px "Courier New", monospace; color: #ffd27a; }
.over .t4 { margin: 2px 0 0; font-size: 20px; color: #e8cfa6; }
.over .tops { text-align: left; }

.toast { position: absolute; left: 50%; bottom: 18px; width: 640px; margin-left: -320px; text-align: center; background: rgba(0,0,0,.75); border: 1px solid #ffb21a; border-radius: 10px; padding: 10px; font-size: 18px; }
.diag { position: absolute; left: 6px; bottom: 4px; font: 12px monospace; color: #9f9; background: rgba(0,0,0,.6); padding: 2px 6px; }