:root{color-scheme:dark;font:17px system-ui,sans-serif;background:#101321;color:#f2f4ff}*{box-sizing:border-box}body{margin:0}main{max-width:740px;margin:auto;padding:24px}h1{font-size:clamp(28px,4vw,60px)}h2{font-size:20px}header{display:flex;justify-content:space-between;gap:16px}label{display:block;margin:14px 0}input,select,button{font:inherit;border-radius:12px;border:1px solid #58617c;padding:12px;background:#202941;color:inherit}input,select{display:block;width:100%;margin-top:7px}button{cursor:pointer;background:#334caf;margin:8px 8px 8px 0}button:disabled{opacity:.5;cursor:wait}label:has(input[type=checkbox]){display:flex;align-items:center;gap:12px}input[type=checkbox]{width:auto}fieldset{border:1px solid #58617c;border-radius:12px}#status{position:fixed;bottom:0;left:0;background:#101321e8;padding:8px 14px;z-index:20;font-size:14px;max-width:100%}iframe{border:0;width:100%;height:100vh;height:100dvh;display:block}.tv{overflow:hidden}.tv main{text-align:center;max-width:1000px;padding-top:12vh}.codigo{font-size:clamp(40px,8vw,110px);letter-spacing:.15em;display:block;margin:32px 0}#som{position:fixed;right:12px;bottom:12px;z-index:21;font-size:14px}#jogo[hidden],[hidden]{display:none!important}#televisores p,#participantes p{margin:9px 0}body:not(.tv){display:flex;flex-direction:column;width:min(100%,480px);margin-inline:auto;height:100dvh;overflow:auto;background:#040f1c}body:not(.tv) #entrada{overflow:auto;width:100%}body:not(.tv) iframe{flex:1;min-height:calc(min(100vw,480px)*1.5);height:auto}#sala{padding:10px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));background:#071321;border-bottom:1px solid #263958;display:block;flex-shrink:0;font-size:12px}#sala .sala-identidade{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}#codigo{letter-spacing:.12em}#sala #papel{margin-left:auto;color:#a7c5ed}#sala button{padding:8px;font-size:12px;margin:0}#sala summary{padding:7px 0;color:#a7c5ed}#sala details[open]{max-height:55dvh;overflow:auto}#sala form{max-width:500px;margin:auto}#aguarde{padding:30px 20px;text-align:center;color:#a7c5ed}#status{font-size:11px;padding:5px 10px;pointer-events:none}

.tv #resultado{position:fixed;left:20%;right:20%;top:8px;padding:8px;background:#101321ee;border:1px solid #8193ab;border-radius:12px;text-align:center;pointer-events:none;font-size:14px}.tv #resultado h1{font-size:18px;margin:0}.tv #resultado p{margin:4px}

.tv #pareamento{padding:4vh 24px}.tv #pareamento h1{font-size:clamp(28px,4vw,48px);margin:16px 0}.tv #qrControle{width:min(30vh,240px);height:auto}.tv #pareamento .codigo{font-size:clamp(32px,5vw,64px);margin:16px 0}
summary{cursor:pointer;padding:12px 0}

#entrada section{padding:16px 0;border-top:1px solid #58617c;margin-top:20px}#sincronizarEntrada button,#entrada #criar{width:100%;margin-right:0}#acessoNegado{color:#ffce90}#liberarAcesso{color:#b9caff;display:inline-block;padding:8px 0}#entrada h1{font-size:clamp(28px,5vw,40px)}

.espelhado{position:fixed;top:12px;right:16px;z-index:30;margin:0;padding:8px 14px;border-radius:20px;background:#182d27ee;color:#a7f3ce;font:600 16px system-ui;pointer-events:none}
.tv.layout-leve .espelhado{left:12px;right:auto}
/* Os jogos recebem toda a tela; só o controle inicial conserva a largura vertical. */
body.controle-jogo{width:100%;height:100vh;height:100dvh;overflow:hidden}
body.controle-jogo iframe{flex:1 1 0;min-height:0;height:0;width:100%}
#sala{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
#sala .sala-identidade{flex:1;min-width:0}
#opcoesSala>summary{padding:6px 10px;white-space:nowrap;border:1px solid #58617c;border-radius:8px}
#sala #opcoesSala[open]{max-height:none;overflow:visible}
.sala-opcoes{position:absolute;top:100%;right:0;z-index:40;width:min(100vw,480px);max-height:75vh;max-height:75dvh;overflow:auto;padding:16px;background:#071321;border:1px solid #263958;box-shadow:0 10px 24px #0008}
#sala .sala-opcoes>button{margin:0 8px 8px 0}
.orientacao-inicial{display:none}
@media(orientation:landscape){body:not(.tv):not(.controle-jogo) .orientacao-inicial{display:flex;position:fixed;inset:0;z-index:50;padding:24px;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#040f1c}.orientacao-inicial strong{font-size:24px;color:#ffcf6b}}