/* ============================================================
   Teleprompter "Eu Melhor" — estilo neon/glow, escuro
   ============================================================ */
:root{
  --bg:      #05060a;
  --bg-2:    #0a0f1e;
  --fg:      #eef4ff;
  --muted:   #8fa3c4;
  --accent:  #00e6ff;
  --accent-2:#7b5cff;
  --danger:  #ff5470;
  --glass:   rgba(14,20,38,.74);
  --line:    rgba(120,165,255,.18);

  --size:  56px;   /* fonte do texto  (JS) */
  --width: 80vw;   /* largura do texto (JS) */
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(0,230,255,.10), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(123,92,255,.12), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.idle{ cursor:none; }

/* ---------- barra de progresso ---------- */
#progress{ position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.05); z-index:40; }
#progressBar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 12px var(--accent);
  transition:width .08s linear;
}

/* ---------- área de leitura ---------- */
/* touch-action:none = o arrasto por toque é NOSSO (senão o navegador do celular
   captura o gesto pro scroll nativo e trava o teleprompter). */
#viewport{ position:fixed; inset:0; overflow:hidden; touch-action:none; overscroll-behavior:none; }
#mirror{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
#scroller{ position:absolute; left:0; top:0; width:100%; will-change:transform; }
.spacer{ height:50vh; }

#content{
  width:var(--width);
  max-width:1400px;
  margin:0 auto;
  padding:0 4vw;
  text-align:center;
  font-size:var(--size);
  font-weight:650;
  line-height:1.42;
  letter-spacing:.2px;
  white-space:pre-wrap;
  word-break:break-word;
  user-select:none;
  -webkit-user-select:none;
}
body.glow #content{
  text-shadow:0 0 24px rgba(0,230,255,.16), 0 2px 26px rgba(0,0,0,.55);
}

/* ---------- vinheta (escurece topo e base) ---------- */
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:10;
  background:linear-gradient(
    to bottom,
    var(--bg) 0%, rgba(5,6,10,.86) 12%, rgba(5,6,10,0) 34%,
    rgba(5,6,10,0) 66%, rgba(5,6,10,.86) 88%, var(--bg) 100%);
}

/* ---------- guia de leitura no centro ---------- */
#readline{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:calc(var(--size) * 1.5); pointer-events:none; z-index:11;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
}
#readline .arrow{
  width:0; height:0; opacity:.55;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 0 6px var(--accent));
}
#readline .arrow.left{  border-left:16px solid var(--accent); }
#readline .arrow.right{ border-right:16px solid var(--accent); }
#readline.band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(0,230,255,.10), transparent);
  border-top:1px solid rgba(0,230,255,.22);
  border-bottom:1px solid rgba(0,230,255,.22);
}

/* ---------- contagem 3·2·1 ---------- */
#countdown{
  position:absolute; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center;
  background:rgba(5,6,10,.55); backdrop-filter:blur(2px);
}
#countdown.show{ display:flex; }
#countdown span{
  font-size:min(40vh,360px); font-weight:800; color:var(--accent);
  text-shadow:0 0 60px rgba(0,230,255,.6);
  animation:pop .8s ease;
}
@keyframes pop{
  0%{ transform:scale(.4); opacity:0; }
  35%{ transform:scale(1.05); opacity:1; }
  100%{ transform:scale(.9); opacity:.15; }
}

/* ---------- barra de controles ---------- */
#controls{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:50; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:center; width:max-content; max-width:96vw;
  padding:9px 12px; border-radius:16px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,230,255,.04) inset;
  transition:opacity .3s ease, transform .35s ease;
}
body.idle #controls{ opacity:0; transform:translateX(-50%) translateY(150%); pointer-events:none; }

#controls .sep{ width:1px; align-self:stretch; background:var(--line); margin:2px 2px; }

#controls button, #controls select{
  font:inherit; font-size:14px; color:var(--fg);
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; cursor:pointer;
  transition:all .16s ease; white-space:nowrap; line-height:1;
}
#controls button:hover, #controls select:hover{
  border-color:var(--accent); color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 18px rgba(0,230,255,.25);
}
#controls button:active{ transform:translateY(1px); }
#controls button.on{
  color:var(--accent); border-color:var(--accent);
  background:rgba(0,230,255,.10);
  box-shadow:0 0 16px rgba(0,230,255,.30);
}
#controls .primary{
  color:#03121a; font-weight:700; border:none;
  background:linear-gradient(135deg, var(--accent), #38f0ff);
  box-shadow:0 0 18px rgba(0,230,255,.35);
}
#controls .primary:hover{ filter:brightness(1.08); color:#03121a; }
#controls #playBtn{ min-width:48px; font-size:16px; }
#controls button.icon{ padding:8px 11px; font-size:17px; line-height:1; }
#controls #playBtn.on{
  background:linear-gradient(135deg, var(--accent-2), #a78bff); color:#0c0820;
}

.group{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:12px; padding:4px 8px;
}
.group .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.group .val{ min-width:30px; text-align:center; font-variant-numeric:tabular-nums; font-weight:700; }
.group button{ padding:6px 10px; }
.group.wide{ gap:10px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:120px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px var(--accent); border:2px solid var(--accent);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--accent);
}
select{ -webkit-appearance:none; appearance:none; max-width:240px; padding-right:14px; }
select option{ background:var(--bg-2); color:var(--fg); }

/* ---------- editor / ajuda ---------- */
#editor, #help{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(3,5,12,.66); backdrop-filter:blur(6px); padding:20px;
}
#editor.hidden, #help.hidden{ display:none; }

.panel{
  width:min(820px,96vw); max-height:88vh; display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(180deg, rgba(18,24,44,.96), rgba(10,14,28,.96));
  border:1px solid var(--line); border-radius:18px; padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,230,255,.05) inset;
}
.panelHead{ display:flex; gap:10px; }
#edTitle{
  flex:1; font:inherit; font-size:17px; font-weight:600; color:var(--fg);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
}
#edTitle:focus, #edText:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#edText{
  flex:1; min-height:46vh; resize:vertical; font:inherit; font-size:16px; line-height:1.5;
  color:var(--fg); background:rgba(0,0,0,.30); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px;
}
.panelFoot{ display:flex; align-items:center; gap:10px; }
.panelFoot .grow{ flex:1; }
.hint{ color:var(--muted); font-size:13px; }

.panel button{
  font:inherit; font-size:14px; color:var(--fg); cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:10px 16px;
  transition:all .16s ease;
}
.panel button:hover{ border-color:var(--accent); color:var(--accent); }
.panel .primary{
  color:#03121a; font-weight:700; border:none;
  background:linear-gradient(135deg, var(--accent), #38f0ff); box-shadow:0 0 16px rgba(0,230,255,.3);
}
.panel .primary:hover{ color:#03121a; filter:brightness(1.08); }
.panel .danger:hover{ border-color:var(--danger); color:var(--danger); }
.panel .ghost{ background:transparent; }

#help .panel{ width:min(560px,96vw); }
#help h2{ margin:.2em 0 .3em; font-size:20px; }
.keys{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.keys li{ color:var(--fg); font-size:15px; }
kbd{
  display:inline-block; min-width:20px; text-align:center; padding:2px 8px; margin-right:2px;
  font-family:inherit; font-size:12px; color:var(--accent);
  background:rgba(0,230,255,.08); border:1px solid var(--line); border-radius:6px;
}
.tip{ color:var(--muted); font-size:13px; line-height:1.5; }

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; top:22px; transform:translate(-50%,-20px);
  z-index:90; padding:11px 18px; border-radius:12px;
  background:var(--glass); border:1px solid var(--accent); color:var(--fg);
  box-shadow:0 0 22px rgba(0,230,255,.3); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- indicador de sincronização ---------- */
#syncDot{
  position:fixed; top:10px; right:12px; z-index:60;
  display:flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(10px); color:var(--muted);
  font-size:12px; letter-spacing:.3px; user-select:none;
  transition:opacity .4s ease;
}
#syncDot .led{
  width:9px; height:9px; border-radius:50%;
  background:var(--muted); box-shadow:0 0 0 0 rgba(0,230,255,0);
  transition:background .2s ease, box-shadow .2s ease;
}
#syncDot.live  .led{ background:#25e29a; box-shadow:0 0 10px rgba(37,226,154,.8); animation:pulse 1.8s ease-in-out infinite; }
#syncDot.wait  .led{ background:var(--accent); box-shadow:0 0 10px rgba(0,230,255,.7); }
#syncDot.off   .led{ background:var(--danger); box-shadow:0 0 10px rgba(255,84,112,.7); }
#syncDot.live  { color:#9df3d3; }
@keyframes pulse{ 50%{ box-shadow:0 0 14px rgba(37,226,154,.35); } }
/* no controlador o dot some quando ninguém está conectado */
body.role-control #syncDot{ opacity:.55; }
body.idle #syncDot{ opacity:0; }

/* ---------- modo player (sem controles, sem cursor) ---------- */
body.role-player{ cursor:none; }
body.role-player #syncDot{ opacity:0; }
body.role-player #syncDot.show{ opacity:.7; }

/* PLAYER: alvo de leitura no TOPO (o mais perto possível da lente da câmera).
   O espaçador de cima passa a valer --readY e o de baixo o resto — a SOMA
   continua 100vh, então o "max" de rolagem não muda e a sincronização em
   fração fica idêntica ao controlador (mesma linha, só que lá no alto). */
body.role-player{ --readY: 18vh; }
body.role-player .spacer:first-child{ height: var(--readY); }
body.role-player .spacer:last-child{ height: calc(100vh - var(--readY)); }
body.role-player #readline{ top: var(--readY); }
/* vinheta do player: metade de CIMA clara (foco na leitura, perto da lente) e
   escurece progressivamente da METADE PARA BAIXO. */
body.role-player #vignette{
  background:linear-gradient(to bottom,
    rgba(5,6,10,.5) 0%, rgba(5,6,10,0) 8%,        /* topo: leve fade de entrada */
    rgba(5,6,10,0) 48%,                            /* metade de cima: clara */
    rgba(5,6,10,.72) 72%, rgba(5,6,10,.94) 100%);  /* metade de baixo: escurece */
}

/* ---------- responsivo ---------- */
@media (max-width:720px){
  :root{ --width:92vw; }
  #controls{ bottom:10px; gap:6px; padding:8px; }
  #controls .lbl{ display:none; }
  .group.wide{ display:none; }
}