body[data-view="splash"],body[data-view="lobby"] { background:var(--primary-300); }
body[data-view="splash"] #app,body[data-view="lobby"] #app { padding:0; }
.figma-stage { position:relative; width:100%; height:100%; overflow:auto; isolation:isolate; }
.stage-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.splash { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:8.333vh; }
.start-show { color:white; font:600 clamp(14px,1.0417vw,24px)/1.4 Figtree,sans-serif; border:3px solid transparent; border-radius:var(--radius-xl); padding:20px 24px; background:linear-gradient(var(--primary-50),var(--primary-50)) padding-box,var(--stroke-gradient) border-box; }
.start-show:hover { filter:brightness(1.12); }
.splash-error { position:absolute; bottom:2vh; background:var(--primary-300); padding:10px; border-radius:12px; }
.approved-lobby { padding:8.7963vh 4.9479vw; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4.6296vh; }
.lobby-header { display:flex; justify-content:space-between; align-items:center; width:100%; height:13.8889vh; flex:none; }
.lobby-exit-slot { width:25.46875vw; display:flex; justify-content:center; }
.lobby-exit { display:grid; place-items:center; width:3.6458vw; height:3.6458vw; min-width:44px; min-height:44px; border:3px solid transparent; border-radius:var(--radius-xl); background:linear-gradient(var(--primary-50),var(--primary-50)) padding-box,var(--stroke-gradient) border-box; }
.lobby-exit img { max-width:100%; }
body.tv[data-view="lobby"] .game-exit-bar { display:none; }
.approved-lobby::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(196,181,253,.125),rgba(91,33,182,.25)); }
.lobby-brand { width:22.2917vw; display:flex; align-items:center; justify-content:center; }
.brand-badge { width:7.8125vw; height:7.8125vw; border:clamp(4px,.47vw,10px) solid var(--greyscale-25); background:var(--primary-200); border-radius:50%; display:grid; place-items:center; overflow:hidden; }
.brand-badge img { width:100%; height:100%; object-fit:cover; }
.approved-columns { display:flex; justify-content:space-between; align-items:flex-end; width:100%; flex:none; gap:3vw; }
.join-panel,.players-panel { border-radius:4.167vw; height:45.185vh; padding:2.78vh 1.563vw; background:rgba(107,46,209,.2); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2); }
.join-panel { width:22.292vw; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; }
.join-panel .qr { padding:8px; border-radius:8px; }
.join-panel .qr img,.join-panel .qr canvas { width:clamp(100px,7.03vw,160px); height:clamp(100px,7.03vw,160px); }
.room-code { font-size:clamp(14px,.94vw,20px); line-height:1.78; font-weight:600; letter-spacing:.1em; }
.join-title { font-size:clamp(20px,2.083vw,44px); line-height:1.2; font-weight:400; }
.language { display:flex; flex-direction:column; gap:10px; align-items:center; }
.language label { font:700 12px Inter,sans-serif; }
.language img { width:15px; height:15px; vertical-align:middle; margin-right:6px; }
.language select { width:clamp(140px,11.46vw,240px); padding:12px 14px; border-radius:16px; border:2px solid rgba(164,74,206,.8); background:var(--primary-100) url("/assets/figma/language-chevron.svg") right 14px center/13.8px 8.8px no-repeat; appearance:none; color:white; font-size:clamp(14px,1.04vw,22px); }
.continue-button { flex-shrink:0; width:7.8125vw; height:7.8125vw; min-width:60px; min-height:60px; border:5px solid transparent; border-radius:50%; color:white; font-weight:600; font-size:clamp(12px,1.04vw,22px); background:linear-gradient(var(--secondary-cyan-100),var(--secondary-cyan-100)) padding-box,var(--stroke-gradient) border-box; }
.continue-button:disabled { opacity:.65; }
.players-panel { width:25.47vw; overflow:auto; background:rgba(107,46,209,.2); }
.players-panel h2 { font-size:clamp(20px,1.667vw,36px); line-height:1; text-align:center; margin-bottom:1.3vh; font-weight:600; }
.player-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.685vh .78vw; }
.player-avatar { display:flex; flex-direction:column; align-items:center; min-width:0; }
.player-avatar img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:50%; background:var(--avatar-bg,var(--success-50)); }
.player-avatar span { background:var(--avatar-label,var(--success-100)); font-size:clamp(11px,.73vw,16px); line-height:1.55; border-radius:999px; padding:0 5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-avatar.off { opacity:.5; }
.empty-players { text-align:center; padding:3vh 0; }
.lobby-url { position:absolute; left:4.6875vw; bottom:3vh; font-size:clamp(12px,.85vw,18px); color:white; background:rgba(46,16,101,.7); padding:6px 12px; border-radius:999px; max-width:90%; overflow-wrap:anywhere; }
.setup-dialog { margin:auto; max-width:600px; width:90vw; max-height:85vh; overflow:auto; padding:32px; background:var(--primary-300); color:white; border:2px solid var(--primary-25); border-radius:24px; }
.setup-dialog::backdrop { background:rgba(15,23,42,.7); }
.setup-dialog h2,.setup-dialog p { margin-bottom:16px; }
.setup-dialog .btn { margin-top:20px; padding:12px 24px; color:white; }
/* Figma 126:79 — confirmação TV aprovada. Liquid Glass aproximado em CSS. */
body.tv .exit-dialog {
  width:536px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px);
  padding:40px; border:0; border-radius:var(--radius-xl);
  background:rgba(91,33,182,.2); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.3),inset 1px 1px 0 rgba(255,255,255,.2);
  text-align:center; overflow:auto;
}
body.tv .exit-dialog::backdrop {
  background:linear-gradient(rgba(27,27,27,.39),rgba(27,27,27,.39)),url('/assets/figma/exit-background.png') center/cover;
  filter:blur(13.4px);
}
body.tv .exit-dialog h2 { font:600 32px/32px Figtree,sans-serif; margin:0 0 24px; }
body.tv .exit-dialog p { font:600 18px/32px Figtree,sans-serif; max-width:360px; margin:0 auto 24px; }
body.tv .exit-actions { gap:16px; flex-wrap:nowrap; }
body.tv .exit-dialog button {
  min-width:0; min-height:55px; padding:10px 12px; border:3px solid rgba(164,74,206,.8);
  border-radius:var(--radius-xl); font:600 20px/28px Figtree,sans-serif;
}
body.tv .exit-dialog .exit-cancel { background:var(--primary-50); }
body.tv .exit-dialog .exit-confirm { background:var(--primary-200); }
body.tv .exit-dialog button:hover:not(:disabled) { filter:brightness(1.12); }
@media (max-width:560px) {
  body.tv .exit-dialog { padding:24px; }
  body.tv .exit-dialog h2 { font-size:26px; }
  body.tv .exit-actions { flex-wrap:wrap; }
  body.tv .exit-dialog button { flex-basis:100%; }
}
@media (max-width:850px) and (orientation:portrait) {
  body[data-view="lobby"] { overflow:auto; }
  .approved-lobby { min-height:100vh; height:auto; padding:24px; }
  .lobby-header { height:90px; }
  .lobby-brand { width:auto; height:90px; padding:0; }
  .lobby-exit-slot { width:auto; }
  .approved-lobby { gap:24px; }
  .brand-badge { width:80px; height:80px; }
  .approved-columns { flex-wrap:wrap; margin-top:24px; }
  .join-panel,.players-panel { width:100%; height:auto; min-height:280px; padding:24px; border-radius:32px; }
  .join-panel { gap:20px; }
  .continue-button { order:3; margin:auto; }
  .player-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .player-avatar img { max-width:85px; }
  .lobby-url { position:static; display:block; margin-top:24px; }
}