:root{
  --panel-bg:rgba(5,10,20,0.66);
  --panel-border:rgba(255,255,255,0.06);
  --accent:#66ccff;
}

html,body{
  height:100%; margin:0; background:#000; color:#e6f2ff;
  font-family:Inter,Arial,Helvetica,sans-serif;
  overflow:hidden;
}

#container{ position:relative; width:100%; height:100vh; overflow:hidden }
canvas{ display:block }

/* Painel de texto — agora SEM fundo e sem bloquear cliques */
.panel-left{
  position:absolute; left:18px; top:18px;
  /* removidos: bottom, width fixa e fundo */
  background:none; border:none; box-shadow:none; border-radius:0; padding:0;
  pointer-events:none;          /* não bloqueia cliques no canvas */
  max-width:520px;
}
.panel-left h2{ margin:0 0 8px 0; font-size:20px }
.panel-left .small{ font-size:12px; color:#9fcff0 }

/* Painel de controles (se usar) — mantém escopo dos botões */
.panel-right{
  position:absolute; right:18px; top:18px; width:260px; background:var(--panel-bg);
  border:1px solid var(--panel-border); padding:12px; border-radius:12px; z-index:10;
}
.control{ margin-bottom:10px }
label{ display:block; font-size:13px; color:#bfeaff; margin-bottom:6px }
.panel-right input[type=range]{ width:100% }
.panel-right button{
  width:100%; padding:10px; border-radius:8px; border:none;
  background:var(--accent); color:#012; font-weight:600; cursor:pointer;
}

/* Status (pode manter) */
.status{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px;
  background:rgba(0,0,0,0.45); color:#bfeaff;
  padding:8px 12px; border-radius:10px; border:1px solid var(--panel-border);
}

/* Classe .back genérica — NÃO define posição para não conflitar */
.back{
  z-index:12; padding:8px 12px; border-radius:8px;
  border:1px solid var(--panel-border); background:var(--panel-bg);
  color:#e6f2ff; cursor:pointer; backdrop-filter: blur(6px);
  font-size:13px; line-height:1; box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.hidden{ display:none }

/* Canvas deve receber cliques */
#container canvas { pointer-events:auto }

/* ===== Botão Voltar (id específico, SOBREPOR posição e largura) ===== */
#backBtn {
  position: absolute;
  top:20px;
  left:20px;
  transform:none;
  z-index: 10;

  width:auto;
  padding:4px 8px;
  font-size:24px;
  font-weight:bold;

  color:#fff;
  background:rgba(0, 0, 0, 0.4);
  border:2px solid #fff;
  border-radius:6px;

  cursor:pointer;
  transition:background 0.2s ease;
}

#backBtn:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* ===== Botão para chamar votação ===== */
#voteBtn {
  position: absolute;
  bottom: 200px;
  right: 20px;
  z-index: 10;

  width: auto;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: bold;

  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #fff;
  border-radius: 6px;

  cursor: pointer;
  transition: background 0.2s ease;
}

#voteBtn:hover {
  background: rgba(0, 0, 0, 0.6);
}


/* ===== Título e Texto (sem painel) ===== */
#nodeTitle{
  margin:0 0 6px 0; padding:0; color:#fff;
  font-size:24px; font-weight:bold;
  text-shadow:0 0 6px rgba(0,0,0,0.6);
}
.sim-mode #nodeTitle{
  right:20px;
  white-space:nowrap;
}
#nodeText{
  background:none; padding:0; color:#fff;
  font-size:16px; line-height:1.4;
  text-shadow:0 0 4px rgba(0,0,0,0.5);
  max-width:520px;
}

.sim-mode #nodeTitle{
  position:absolute;
  top:0;
  left:60px;
}
.sim-mode #textPanel{
  top:20px;
  left:20px;
  padding-top:60px;
}

/* Container opcional para posicionar título/texto juntos */
#nodeInfo{
  position:absolute;
  bottom:20px;
  left:20px;
  z-index:10;
  pointer-events:none; /* não bloquear cliques; texto é só informativo */
}

/* Controls panel já existe como .panel-right */

/* Votação */
.vote {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 20;
}
.vote.hidden { display: none; }

.vote-box {
  min-width: 720px; max-width: 90vw;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 22px;
  color: #e6f2ff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.vote-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.vote-instructions { font-size: 14px; color: #bfeaff; margin-bottom: 14px; }

.vote-options {
  display: grid; grid-template-columns: 1fr 140px 1fr; gap: 18px; align-items: center;
}

.vote-col { text-align: center; }
.vote-label { font-weight: 600; margin-bottom: 6px; }
.vote-count { font-size: 40px; font-weight: 800; }

.vote-timer { text-align: center; }
.vote-timer .timer { font-size: 54px; font-weight: 900; }
.vote-timer .timer-caption { font-size: 12px; color: #9fcff0; }

.vote-note { margin-top: 10px; font-size: 12px; color: #9fcff0; text-align: center; }

.script-bar{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.script-bar button{
  padding:8px 10px; border-radius:8px; border:1px solid var(--panel-border);
  background:rgba(255,255,255,0.08); color:#e6f2ff; cursor:pointer;
}
.script-bar button:hover{ background:rgba(255,255,255,0.14) }
#btnPlayPause::after{ content:' Roteiro'; }
#btnPlayPause.playing::before{ content:'⏸'; }
#btnPlayPause.paused::before,
#btnPlayPause.stopped::before{ content:'▶︎'; }
#btnPlayPause.playing{ background:rgba(255,255,255,0.14); }

.caption{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(920px, 86vw);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.45);
  color: #e6f2ff;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  z-index: 12;
}
.caption.hidden{ display: none; }

.script-bar button.off { opacity: 0.6; }

/* ===== Overlay de carregamento ===== */
.loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}
.loading.hidden { display: none; }

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading .spinner {
  width: 64px;
  height: 64px;
  border: 6px solid rgba(255,255,255,0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading .loading-text {
  margin-top: 12px;
  font-size: 16px;
  color: #e6f2ff;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

button.fullscreen {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 6px 10px;
  font-size: 1.2em;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button.fullscreen:hover {
  background: rgba(0,0,0,0.8);
}