/* ============================================================
   OPERAÇÃO IMPOSTOR — Estilos
   Tema "dossiê": modo noite (arquivo lacrado) e modo dia (papel).
   ============================================================ */

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  --tap: 48px;
}

/* ---------- MODO NOITE (padrão) ---------- */
html[data-theme="dark"] {
  --bg: #080B0F;
  --bg-2: #0D131A;
  --panel: #131A22;
  --panel-2: #1A222C;
  --line: #253039;
  --text: #EDE7D9;
  --dim: #8C959F;
  --red: #E0483F;
  --green: #40A374;
  --yellow: #F2C14E;
  --grain: rgba(255, 255, 255, .012);
  --glow-1: rgba(64, 163, 116, .12);
  --glow-2: rgba(224, 72, 63, .10);
  color-scheme: dark;
}

/* ---------- MODO DIA (dossiê em papel) ---------- */
html[data-theme="light"] {
  --bg: #E7E1D1;
  --bg-2: #EFEADC;
  --panel: #F6F2E7;
  --panel-2: #FCFAF3;
  --line: #C9BFA7;
  --text: #16130D;
  --dim: #6B6252;
  --red: #B23A2E;
  --green: #2B6E4C;
  --yellow: #B07E14;
  --grain: rgba(0, 0, 0, .022);
  --glow-1: rgba(43, 110, 76, .10);
  --glow-2: rgba(178, 58, 46, .08);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, .chip, .vote-opt, .toggle, .icon-btn { touch-action: manipulation; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% -5%, var(--glow-1), transparent 45%),
    radial-gradient(circle at 95% 100%, var(--glow-2), transparent 45%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  transition: background-color .35s ease, color .35s ease;
}

/* textura de papel/grão */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 3px);
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-height: 100%;
  padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 28px);
  display: flex;
  flex-direction: column;
}

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--mono); margin: 0; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: 28px; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 16px; }
p { margin: 0; color: var(--dim); font-size: 14.5px; }
strong { color: var(--text); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); flex: none;
  animation: blink 2.4s infinite;
}
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 9px;
}

.mono { font-family: var(--mono); }
.center { text-align: center; }
.sp-6 { height: 6px } .sp-10 { height: 10px } .sp-14 { height: 14px }
.sp-20 { height: 20px } .sp-28 { height: 28px }
.spacer { flex: 1; min-height: 12px; }
hr.line { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; }
.row.tight { gap: 6px; }
.grow { flex: 1; }

/* ---------- topo ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 800; font-size: 13px;
  letter-spacing: .06em; flex: 1; min-width: 0;
}
.brand .emblem {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 15px;
}
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn.off { color: var(--dim); opacity: .65; }

/* ---------- botões ---------- */
.btn {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  border-radius: 12px;
  padding: 17px 18px;
  min-height: var(--tap);
  width: 100%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, opacity .2s ease, filter .2s ease;
  user-select: none;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-red { background: var(--red); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-yellow { background: var(--yellow); color: #14110C; }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn-ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.btn-sm { padding: 12px 14px; font-size: 12px; min-height: 42px; border-radius: 10px; }

/* ---------- cartões ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.card.flat { background: transparent; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 800; font-size: 11px;
  letter-spacing: .14em; padding: 5px 9px;
  border: 2px solid currentColor; border-radius: 4px;
}
.stamp.red { color: var(--red) } .stamp.green { color: var(--green) } .stamp.yellow { color: var(--yellow) }
.stamp.tilt { transform: rotate(-3deg); }

/* ---------- inputs ---------- */
input[type=text], input[type=tel] {
  width: 100%;
  background: var(--panel-2);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px;
  border-radius: var(--r-sm);
  outline: none;
  min-height: var(--tap);
}
input::placeholder { color: var(--dim); opacity: .7 }
input:focus { border-color: var(--yellow); }

.stepper {
  display: flex; align-items: center;
  background: var(--panel-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.stepper button {
  background: transparent; border: none; color: var(--text);
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  width: 52px; height: 52px; cursor: pointer;
}
.stepper button:active { background: var(--line); }
.stepper .val { flex: 1; text-align: center; font-family: var(--mono); font-weight: 800; font-size: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 10px 12px; border-radius: 20px;
  border: 1.5px solid var(--line); color: var(--dim);
  background: var(--panel); cursor: pointer;
  transition: all .15s ease;
}
.chip:active { transform: scale(.95) }
.chip.active { border-color: var(--yellow); color: #14110C; background: var(--yellow); }
.chip.sm { padding: 7px 10px; font-size: 11px; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.toggle-row .t-title { font-weight: 600; font-size: 14.5px }
.toggle-row .t-sub { font-size: 12px; color: var(--dim) }
.toggle {
  width: 50px; height: 30px; border-radius: 16px; background: var(--line);
  position: relative; flex: none; cursor: pointer; transition: background .2s;
}
.toggle.on { background: var(--green) }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: left .2s cubic-bezier(.4,1.4,.5,1);
}
.toggle.on::after { left: 23px }

/* ---------- lista de jogadores ---------- */
.plist { display: flex; flex-direction: column; gap: 8px }
.pitem {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 12px;
}
.pitem .num {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  width: 22px; flex: none; font-weight: 700;
}
.pitem .nm { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pitem .x {
  background: transparent; border: none; color: var(--dim);
  font-size: 18px; cursor: pointer; width: 34px; height: 34px; border-radius: 8px;
}
.pitem .x:active { background: var(--line) }
.pitem.host { border-color: var(--yellow) }
.badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 20px; font-weight: 800;
  background: var(--line); color: var(--text);
}
.badge.y { background: var(--yellow); color: #14110C }
.badge.g { background: var(--green); color: #fff }
.badge.r { background: var(--red); color: #fff }
.badge.off { background: transparent; border: 1px solid var(--line); color: var(--dim) }

/* ---------- cartão do dossiê / revelação ---------- */
.dossier {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1.5px solid var(--line);
  overflow: hidden;
  min-height: 250px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 26px 20px;
  box-shadow: var(--shadow);
}
.dossier .inner { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100% }
.word {
  font-family: var(--mono); font-weight: 800; font-size: clamp(24px, 8vw, 34px);
  color: var(--yellow); word-break: break-word; line-height: 1.15;
}
.role {
  font-family: var(--mono); font-weight: 800; font-size: clamp(24px, 8vw, 32px);
  color: var(--red); letter-spacing: .04em;
}
.role.agent { color: var(--green) }
.sub { font-size: 13px; color: var(--dim); max-width: 300px }

.redaction {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--bg-2) 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  transition: transform .4s cubic-bezier(.6,0,.35,1), opacity .35s ease;
}
.redaction.gone { transform: translateY(-106%); opacity: 0 }
.redaction .lock { font-size: 26px; opacity: .8 }
.redaction .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  color: var(--dim); text-transform: uppercase; font-weight: 700;
}
.hold {
  border: 1.5px dashed var(--line); background: var(--panel-2); color: var(--text);
}
.hold.pressing { background: var(--line); border-color: var(--yellow) }
.hold-bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 10px }
.hold-bar > i { display: block; height: 100%; width: 0%; background: var(--yellow); transition: width .08s linear }

.dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line) }
.dots span.done { background: var(--green) }
.dots span.now { background: var(--yellow); transform: scale(1.25) }

/* ---------- cronômetro ---------- */
.ring {
  width: min(230px, 62vw); aspect-ratio: 1; border-radius: 50%;
  margin: 18px auto; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--yellow) calc(var(--pct, 100) * 1%), var(--panel) 0);
}
.ring.warn { background: conic-gradient(var(--red) calc(var(--pct,100)*1%), var(--panel) 0); animation: pulse .9s infinite }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03) } }
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg) }
.ring .num {
  position: relative; font-family: var(--mono); font-size: clamp(34px, 11vw, 44px);
  font-weight: 800; color: var(--text);
}

/* ---------- votação ---------- */
.vote-grid { display: flex; flex-direction: column; gap: 9px }
.vote-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--panel);
  cursor: pointer; font-weight: 600; font-size: 15.5px;
  min-height: var(--tap);
  transition: all .15s ease;
}
.vote-opt:active { transform: scale(.985) }
.vote-opt.sel { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, var(--panel)); }
.vote-opt .mk { font-family: var(--mono); color: var(--yellow); font-weight: 800; opacity: 0 }
.vote-opt.sel .mk { opacity: 1 }
.vote-opt.dis { opacity: .4; pointer-events: none }

.bar-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; display: flex; flex-direction: column; gap: 7px }
.bar-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14.5px; gap: 8px }
.bar-top .n { font-family: var(--mono); color: var(--dim); font-size: 12.5px; flex: none }
.bar-track { height: 9px; border-radius: 6px; background: var(--line); overflow: hidden }
.bar-fill { height: 100%; border-radius: 6px; background: var(--yellow); width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1) }
.bar-fill.red { background: var(--red) }
.bar-fill.green { background: var(--green) }

/* ---------- ranking ---------- */
.rank-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 13px;
}
.rank-row.top { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, var(--panel)) }
.rank-pos { font-family: var(--mono); font-weight: 800; font-size: 15px; width: 30px; flex: none; text-align: center }
.rank-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rank-meta { font-size: 11.5px; color: var(--dim); font-family: var(--mono) }
.rank-pts { font-family: var(--mono); font-weight: 800; font-size: 18px; flex: none }
.delta { font-family: var(--mono); font-size: 11px; color: var(--green); font-weight: 700 }

/* ---------- caixa de link / convite ---------- */
.codebox {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--panel-2); border: 1.5px dashed var(--line);
  border-radius: var(--r); padding: 18px;
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(30px, 12vw, 44px); letter-spacing: .16em;
  color: var(--yellow);
}
.linkbox {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 13px; font-family: var(--mono); font-size: 12px; color: var(--dim);
  word-break: break-all;
}

/* ---------- avisos ---------- */
.note {
  border-left: 3px solid var(--yellow);
  background: var(--panel); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 14px; font-size: 13.5px; color: var(--dim);
}
.note.red { border-left-color: var(--red) }
.note.green { border-left-color: var(--green) }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  padding: 13px 18px; border-radius: 30px; z-index: 90;
  opacity: 0; transition: all .25s ease; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) }

/* ---------- modal ---------- */
.sheet-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100; opacity: 0; transition: opacity .2s;
}
.sheet-bg.show { opacity: 1 }
.sheet {
  width: 100%; max-width: 500px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(env(safe-area-inset-bottom) + 20px);
  max-height: 86vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
.sheet-bg.show .sheet { transform: translateY(0) }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -6px auto 14px }

/* ---------- animações ---------- */
.fade-in { animation: fadeIn .3s ease both }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.pop-in { animation: popIn .4s cubic-bezier(.2,1.3,.4,1) both }
@keyframes popIn { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }
.shake { animation: shake .5s }
@keyframes shake { 0%,100% { transform: none } 20% { transform: translateX(-7px) } 40% { transform: translateX(7px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(4px) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

/* ---------- telas grandes ---------- */
@media (min-width: 520px) {
  #app { padding-left: 24px; padding-right: 24px }
  h1 { font-size: 32px }
}

/* rodapé */
.foot {
  margin-top: 26px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--dim); opacity: .6; text-transform: uppercase;
}

/* ============================================================
   Chat da sala (texto + voz)
   ============================================================ */
.chat-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--yellow); color: #14110C; border: none;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.35); z-index: 60; cursor: pointer;
}
.chat-fab:active { transform: scale(.94); }
.chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-family: var(--mono);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.chat-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 480px; margin: 0 auto;
  background: var(--bg-2); border: 1px solid var(--line); border-bottom: none;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  height: min(72vh, 560px);
  transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.chat-panel.show { transform: translateY(0); }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.chat-title { font-family: var(--mono); font-weight: 800; font-size: 14px; }
.chat-close {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer;
}

.chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px; padding: 8px 11px;
}
.chat-bubble.mine { background: var(--yellow); color: #14110C; border-color: transparent; border-radius: 14px 14px 4px 14px; }
.chat-who { font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--yellow); margin-bottom: 2px; }
.chat-bubble.mine .chat-who { color: #14110C; }
.chat-txt { font-size: 14px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat-voice { font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.chat-ts { font-family: var(--mono); font-size: 9.5px; opacity: .55; margin-top: 3px; text-align: right; }

.chat-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 11px 15px; font-size: 14px;
}
.chat-send, .chat-mic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 17px; cursor: pointer;
}
.chat-mic.live { background: var(--red); border-color: var(--red); color: #fff; animation: micPulse 1s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,72,63,.5) } 50% { box-shadow: 0 0 0 9px rgba(224,72,63,0) } }
.chat-mic-label { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--dim); min-height: 16px; padding-bottom: 4px; }

@media (min-width: 520px) {
  .chat-panel { left: auto; right: 16px; width: 380px; border-radius: 18px; bottom: 16px; max-width: 380px; }
}