.sala-field { display:block; margin:0 0 12px; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.sala-field input, input.codigo, input.sala-input {
  display:block; width:100%; margin-top:6px; min-height:48px; padding:10px 12px;
  border-radius:12px; border:1px solid #3d6474; background:#0e2732; color:#f1f8fc;
  font:inherit; font-weight:700; letter-spacing:.08em;
}
input.codigo { text-transform:uppercase; letter-spacing:.28em; font-size:22px; text-align:center; }
.formas { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:8px 0 16px; }
.forma-op {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:88px; min-width:0; padding:12px 8px; font-size:13px; font-weight:700;
  background:linear-gradient(#2a4c5c,#173442 48%,#0e2430);
}
.forma-op b { font-size:24px; font-weight:400; line-height:1; }
.forma-op span { text-align:center; line-height:1.25; }
.forma-op.on {
  background:linear-gradient(var(--btn-ok-top), var(--btn-ok-mid) 48%, var(--btn-ok-bot));
  border-color:#7fd4c8;
}
.assistencia-opcoes { display:grid; gap:10px; margin:18px 0; }
.assistencia-op,
.tempo-op,
.duracao-op {
  display:block;
  width:100%;
  text-align:left;
  background:linear-gradient(#2a4c5c,#173442 48%,#0e2430);
}
.assistencia-op b,
.tempo-op b,
.duracao-op b { display:block; color:#f1f8fc; }
.assistencia-op span,
.tempo-op span,
.duracao-op span { display:block; color:var(--muted); font-weight:500; font-size:13px; line-height:1.32; margin-top:4px; }
.assistencia-op.on,
.tempo-op.on,
.duracao-op.on { border-color:#7fd4c8; background:linear-gradient(var(--btn-ok-top), var(--btn-ok-mid) 48%, var(--btn-ok-bot)); }
.config-grupo { margin:16px 0; padding:0; border:0; }
.config-grupo legend { padding:0; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.config-opcoes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:8px; }
.config-opcoes[aria-label="Tempo por jogada"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.config-opcoes button { min-width:0; min-height:86px; padding:9px 7px; }
.config-opcoes button b { font-size:15px; }
.config-opcoes button span { font-size:11px; }
.telao-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0; padding:12px 14px; border:1px solid #3d6474; border-radius:13px; background:#0e2732; cursor:pointer; }
.telao-toggle b,
.telao-toggle small { display:block; }
.telao-toggle small { color:var(--muted); font-size:12px; margin-top:2px; }
.telao-toggle input { inline-size:48px; block-size:26px; accent-color:#65d5cc; flex:0 0 auto; }
.portas { display:grid; gap:10px; margin:18px 0 8px; }
.caso-btn.ligado {
  border-color:#7fd4c8;
  background:linear-gradient(var(--btn-ok-top), var(--btn-ok-mid) 48%, var(--btn-ok-bot));
}
.modal-fundo {
  position:fixed; inset:0; z-index:140; background:#061823cc;
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
}
.modal-fundo[hidden],
#modal-mestre[hidden],
.sala-panel[hidden] {
  display:none !important;
}
.modal-sala {
  width:min(440px,100%);
  background:linear-gradient(180deg,#163644,#102833);
  border:1px solid #3d6474; border-radius:18px; padding:18px 16px 16px;
  box-shadow:0 18px 40px #000a;
}
.telao-view { min-height:70dvh; display:flex; flex-direction:column; align-items:stretch; text-align:center; gap:12px; }
.telao-pauta { padding:16px; text-align:left; }
.telao-pauta .kicker { margin:0 0 5px; }
.telao-pauta h2 { margin:0; font-size:clamp(22px,4vw,38px); }
.telao-campos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.telao-campos > * { margin:0; padding:10px; border:1px solid #3d6474; border-radius:9px; background:#0e2732; }
.telao-status { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; }
.telao-status p { margin:0; padding:12px; background:#0e2732; }
.telao-status small { display:block; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.telao-status strong { display:block; margin-top:4px; color:#fff; font-size:clamp(18px,4vw,30px); font-variant-numeric:tabular-nums; }
.codigo-grande, .telao-view .codigo-grande, .sala-codigo-grande {
  font-size:clamp(36px,12vw,72px); letter-spacing:.18em; font-weight:800; color:#ffc46b;
  text-align:center; margin:12px 0;
}
.sala-lista { margin:12px 0; padding:6px; list-style:none; color:#f1f8fc; background:#03080d; border:1px solid rgba(20,36,48,.95); border-left:4px solid #6aa8ca; border-radius:10px; }
.sala-lista li { padding:10px 12px; border-bottom:1px solid rgba(45,63,72,.7); display:flex; justify-content:space-between; gap:10px; }
.sala-lista li:last-child { border-bottom:0; }
.sala-lista small { color:var(--accent); letter-spacing:.12em; text-transform:uppercase; font-size:10px; }
.sala-qr-wrap { text-align:center; }
.sala-qr {
  width:min(280px,80vw); margin:14px auto; background:#fff; padding:10px; border-radius:12px;
}
.sala-qr svg { display:block; width:100%; height:auto; }
.sala-qr-fallback {
  color:#111; font:800 16px/1.3 monospace; text-align:center; padding:24px 8px; word-break:break-all;
}
button.danger {
  background:linear-gradient(#7d2d2a,#4b1715);
  color:#fff3ef;
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 5px 0 #1b0706, 0 10px 18px #0008;
}
.mestre-float {
  position:fixed;
  z-index:160;
  right:max(14px, env(safe-area-inset-right));
  bottom:max(28px, env(safe-area-inset-bottom));
  min-width:140px;
  height:48px;
  border:1px solid #4d6774;
  border-radius:10px;
  background:#071014;
  color:#bdeeff;
  font:800 13px Inter,system-ui,sans-serif;
  letter-spacing:.04em;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  cursor:pointer;
}
.mestre-float[hidden] { display:none !important; }
.sala-panel {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:170;
  width:auto;
  max-width:none;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:24px 14px;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.sala-panel[hidden] { display:none !important; }
.sala-card {
  width:min(620px,100%);
  margin:auto;
  background:linear-gradient(165deg,#1a3348,#153044 60%,#102838);
  border:1px solid rgba(159,228,255,.52);
  border-radius:14px;
  padding:18px;
  color:#e6edf2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 50px rgba(0,0,0,.55);
}
.sala-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.sala-head h2 { margin:0 0 4px; }
.sala-sec {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #26343c;
}
.sala-sec summary {
  cursor:pointer;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#afc8d5;
}
#lobby { text-align:center; }
#lobby .actions { margin-top:18px; }
.lobby-prontidao { margin:12px 0 0; padding:11px 13px; border-radius:10px; background:#0e2732; border:1px solid #3d6474; color:var(--muted); }
.controle-mestre { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.controle-mestre button { min-width:0; min-height:42px; padding:8px; font-size:12px; }
button.btn-go {
  background: linear-gradient(#8ee4ad, #3ea86a 52%, #2d8a52);
  color: #062011;
  border-color: #5ecf8a;
  border-bottom-color: #1b5c38;
  box-shadow:
    inset 0 2px 1px #d4f5e2cc,
    inset 0 -3px 4px #14532d88,
    0 4px 0 #164e30,
    0 7px 8px #0008;
}
.sala-nota {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #0e2732;
  border-radius: 10px;
  color: var(--muted);
  line-height: 1.45;
  font-size: 15px;
}
.sala-nota[hidden] { display: none !important; }
#entrar .ident-actions {
  display: grid;
  gap: 10px;
}
#entrar .ident-actions button {
  width: 100%;
  min-height: 48px;
}
#entrar[data-modo="mestre"] #campo-cod { display: none; }
@media (max-width: 430px) {
  .formas { gap: 8px; }
  .forma-op { min-height: 80px; padding: 10px 4px; font-size: 12px; }
  .config-opcoes { gap:5px; }
  .config-opcoes button { min-height:78px; padding:8px 4px; }
  .config-opcoes button b { font-size:13px; }
  .config-opcoes button span { font-size:10px; }
  .telao-campos { grid-template-columns:1fr; }
}