:root {
  --fundo: #14110f;
  --cartao: #201b18;
  --cartao2: #2a2420;
  --linha: #3a322c;
  --tinta: #f6efe6;
  --apagado: #a99c8f;
  --ouro: #f5c542;
  --ouro-escuro: #b8901f;
  --golpe: #ff4d5e;
  --honesto: #44d17a;
  --policia: #5ec8ff;
  --raio: 16px;
  --display: 'Archivo Black', 'Arial Black', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 16px/1.45 'Archivo', system-ui, sans-serif;
  background-image: radial-gradient(circle at 20% -10%, #3a2a12 0, transparent 45%), radial-gradient(circle at 110% 20%, #2b1418 0, transparent 40%);
  background-attachment: fixed; min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; margin: 0; line-height: 1.1; }
b { font-weight: 800; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .9em 1.4em; min-height: 48px;
  background: var(--ouro); color: #1a1406; font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 0 var(--ouro-escuro); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ouro-escuro); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.sec { background: var(--cartao2); color: var(--tinta); box-shadow: 0 4px 0 #0c0a09; border: 1px solid var(--linha); }
.btn.mini { min-height: 36px; padding: .45em 1em; font-size: .9rem; box-shadow: 0 3px 0 #0c0a09; }
.btn.largo { width: 100%; }

/* ---------- entrada ---------- */
.entrada { max-width: 440px; margin: 0 auto; padding: 40px 16px 60px; }
.logo { text-align: center; margin-bottom: 28px; }
.logo .moeda { width: 84px; height: 84px; margin: 0 auto 14px; animation: gira 6s ease-in-out infinite; }
@keyframes gira { 0%, 100% { transform: rotateY(0) } 50% { transform: rotateY(180deg) } }
.logo h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); color: var(--ouro); text-shadow: 0 4px 0 #5a3e06; }
.logo p { color: var(--apagado); margin: 8px 0 0; }
.painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; margin-bottom: 14px; }
.painel h3 { font-size: 1.1rem; margin-bottom: 12px; }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: .85rem; color: var(--apagado); margin-bottom: 4px; font-weight: 600; }
.campo input {
  width: 100%; background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha);
  border-radius: 12px; padding: .8em 1em; font-size: 1.05rem; outline: none;
}
.campo input:focus { border-color: var(--ouro); }
.campo input.codigo { text-transform: uppercase; letter-spacing: .3em; font-family: var(--display); text-align: center; }
.ou { text-align: center; color: var(--apagado); margin: 6px 0 14px; font-size: .9rem; }
.link-regras { background: none; border: 0; color: var(--ouro); text-decoration: underline; display: block; margin: 18px auto 0; }

/* ---------- jogo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: rgba(20, 17, 15, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.topo .marca { font-family: var(--display); color: var(--ouro); font-size: 1.05rem; white-space: nowrap; }
.topo .info { color: var(--apagado); font-size: .85rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .info b { color: var(--tinta); letter-spacing: .12em; }
.icone { background: var(--cartao2); border: 1px solid var(--linha); border-radius: 50%; width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 1rem; }
.relogio { font-family: var(--display); font-size: 1.25rem; min-width: 2.4em; text-align: center; padding: 4px 10px; border-radius: 999px; background: var(--cartao2); border: 1px solid var(--linha); }
.relogio.urgente { color: #fff; background: var(--golpe); border-color: var(--golpe); animation: pulsa .5s ease-in-out infinite alternate; }
@keyframes pulsa { to { transform: scale(1.08) } }
.barra-tempo { position: absolute; left: 0; bottom: -1px; height: 3px; background: var(--ouro); transition: width .25s linear; }

.grade { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px 16px 30px; max-width: 1180px; margin: 0 auto; }
@media (min-width: 900px) { .grade { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .lateral { position: sticky; top: 72px; } }
.palco { min-width: 0; }
.lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.fase-titulo { font-size: clamp(1.6rem, 6vw, 2.3rem); margin: 4px 0 6px; }
.fase-sub { color: var(--apagado); margin: 0 0 16px; }

/* cartão do negócio */
.negocio {
  position: relative; border-radius: 22px; padding: 24px 22px; margin-bottom: 16px; overflow: hidden;
  background: linear-gradient(145deg, #fff6dc, #f3dfa6); color: #20180a;
  box-shadow: 0 10px 0 #8a6a16, 0 20px 40px rgba(0, 0, 0, .4);
}
.negocio::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  border: 14px dashed rgba(138, 106, 22, .18);
}
.negocio .selo { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: #20180a; color: var(--ouro); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.negocio h2 { font-size: clamp(1.7rem, 7vw, 2.6rem); margin-bottom: 8px; }
.negocio p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.negocio .proposta { margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(32, 24, 10, .2); font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.negocio h2, .negocio p { overflow-wrap: anywhere; }
.ficha { border: 1px solid var(--linha); background: var(--cartao); border-radius: var(--raio); padding: 16px 18px 18px; margin: 0 0 14px; min-width: 0; }
.ficha legend { font-family: var(--display); color: var(--ouro); padding: 0 6px; font-size: 1.1rem; }
.ficha legend small { font-family: 'Archivo', sans-serif; color: var(--apagado); font-size: .8rem; }
.campo textarea { width: 100%; background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); border-radius: 12px; padding: .8em 1em; font: inherit; resize: vertical; outline: none; }
.campo textarea:focus { border-color: var(--ouro); }
.opcoes .inteiro { grid-column: 1 / -1; }
.negocio .vendedor { margin-top: 14px; font-size: .9rem; opacity: .75; }

.colinha { background: var(--cartao); border: 1px dashed var(--ouro-escuro); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 16px; }
.colinha h3 { font-size: .95rem; color: var(--ouro); margin-bottom: 8px; }
.colinha ul { margin: 0; padding-left: 1.2em; }
.colinha li { margin: 4px 0; }

.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.escolha {
  border: 2px solid var(--linha); background: var(--cartao); border-radius: 20px; padding: 18px 14px; text-align: left;
  transition: transform .1s, border-color .1s;
}
.escolha:hover { transform: translateY(-2px); }
.escolha .emoji { font-size: 2.2rem; display: block; margin-bottom: 6px; }
.escolha strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin-bottom: 4px; }
.escolha small { color: var(--apagado); font-size: .85rem; line-height: 1.35; display: block; }
.escolha.h { border-color: rgba(68, 209, 122, .5); } .escolha.h strong { color: var(--honesto); }
.escolha.g { border-color: rgba(255, 77, 94, .5); } .escolha.g strong { color: var(--golpe); }
@media (max-width: 420px) { .escolhas { grid-template-columns: 1fr; } }

.segredo { border-radius: var(--raio); padding: 14px 16px; margin-bottom: 16px; font-weight: 600; display: flex; gap: 12px; align-items: center; }
.segredo .emoji { font-size: 1.8rem; }
.segredo.golpe { background: rgba(255, 77, 94, .14); border: 1px solid rgba(255, 77, 94, .45); }
.segredo.honesto { background: rgba(68, 209, 122, .12); border: 1px solid rgba(68, 209, 122, .45); }
.esconder { filter: blur(9px); transition: filter .2s; cursor: pointer; user-select: none; }
.esconder.ver { filter: none; }

.aviso { color: var(--apagado); font-size: .92rem; background: var(--cartao); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--linha); margin-bottom: 14px; }

.esperando { text-align: center; padding: 26px 10px; }
.esperando .grande { font-size: 3.4rem; animation: balanca 1.2s ease-in-out infinite; display: inline-block; }
@keyframes balanca { 50% { transform: rotate(-12deg) } }

/* apostas */
.saldo-grande { font-family: var(--display); font-size: 1.7rem; color: var(--ouro); }
.valores { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0; }
.valor {
  border: 2px solid var(--linha); background: var(--cartao); border-radius: 16px; padding: 14px 8px; font-family: var(--display); font-size: 1.1rem;
}
.valor small { display: block; font-family: 'Archivo', sans-serif; font-size: .75rem; color: var(--apagado); font-weight: 600; }
.valor.on { border-color: var(--ouro); background: rgba(245, 197, 66, .14); color: var(--ouro); }
.valor:disabled { opacity: .35; cursor: not-allowed; }
.denuncia {
  width: 100%; border: 2px dashed rgba(94, 200, 255, .5); background: rgba(94, 200, 255, .06); border-radius: 16px; padding: 14px 16px; text-align: left; margin-top: 4px;
}
.denuncia strong { font-family: var(--display); font-weight: 400; color: var(--policia); font-size: 1.1rem; }
.denuncia small { display: block; color: var(--apagado); }
.denuncia.on { border-style: solid; background: rgba(94, 200, 255, .18); }
.denuncia:disabled { opacity: .4; cursor: not-allowed; }
.confirmado { margin-top: 12px; color: var(--honesto); font-weight: 600; }

/* revelação */
.suspense { text-align: center; padding: 50px 10px; }
.suspense .cofre { font-size: 5rem; display: inline-block; animation: treme .12s linear infinite; }
@keyframes treme { 25% { transform: translate(2px, -1px) rotate(2deg) } 75% { transform: translate(-2px, 1px) rotate(-2deg) } }
.carimbo {
  display: inline-block; font-family: var(--display); font-size: clamp(2.2rem, 10vw, 3.8rem); padding: 8px 22px; border: 6px solid currentColor; border-radius: 12px;
  transform: rotate(-6deg); animation: carimba .35s cubic-bezier(.2, 1.6, .5, 1) both; margin: 10px 0 18px; text-align: center; line-height: 1.05;
}
@keyframes carimba { from { transform: rotate(-6deg) scale(2.4); opacity: 0 } to { transform: rotate(-6deg) scale(1); opacity: 1 } }
.carimbo.golpe { color: var(--golpe); } .carimbo.honesto { color: var(--honesto); } .carimbo.pego { color: var(--policia); }
.revela { text-align: center; }
.revela .texto { font-size: 1.05rem; max-width: 560px; margin: 0 auto 18px; }
.tabela { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; text-align: left; margin-bottom: 14px; }
.tabela .linha { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--linha); }
.tabela .linha:first-child { border-top: 0; }
.tabela .nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .oque { color: var(--apagado); font-size: .88rem; white-space: nowrap; }
.tabela .delta { font-family: var(--display); min-width: 90px; text-align: right; }
.mais { color: var(--honesto); } .menos { color: var(--golpe); } .zero { color: var(--apagado); }

/* fim */
.podio { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.podio .lugar { display: flex; align-items: center; gap: 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 16px; }
.podio .lugar:first-child { background: linear-gradient(135deg, rgba(245, 197, 66, .25), var(--cartao)); border-color: var(--ouro); padding: 18px 16px; }
.podio .pos { font-family: var(--display); font-size: 1.4rem; width: 2em; }
.podio .lugar:first-child .pos { font-size: 2rem; }
.podio .nome { flex: 1; font-weight: 800; font-size: 1.1rem; }
.podio .saldo { font-family: var(--display); color: var(--ouro); }
.premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
.premio { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; }
.premio strong { display: block; font-family: var(--display); font-weight: 400; color: var(--ouro); margin-bottom: 4px; }
.premio span { color: var(--apagado); font-size: .9rem; }

/* lobby */
.convite { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; margin-bottom: 14px; }
.convite .cod { font-family: var(--display); font-size: 2.6rem; letter-spacing: .25em; color: var(--ouro); }
.convite .url { color: var(--apagado); font-size: .9rem; word-break: break-all; margin: 4px 0 12px; }
.convite .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 16px; }
.opcoes label span { display: block; font-size: .85rem; color: var(--apagado); margin-bottom: 4px; font-weight: 600; }
.opcoes select { width: 100%; background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); border-radius: 12px; padding: .7em .8em; }

/* lateral */
.bloco { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.bloco h3 { font-size: .9rem; padding: 12px 14px; border-bottom: 1px solid var(--linha); color: var(--apagado); font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.jog { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--linha); }
.jog:first-of-type { border-top: 0; }
.jog .bola { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #14110f; font-size: .85rem; }
.jog .quem { flex: 1; min-width: 0; }
.jog .quem .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jog .quem .hist { font-size: .75rem; letter-spacing: .05em; min-height: 1em; color: var(--apagado); }
.jog .din { font-family: var(--display); font-size: .95rem; }
.jog.off { opacity: .45; }
.jog.vez { background: rgba(245, 197, 66, .08); }
.tag { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.tag.vend { background: var(--ouro); color: #14110f; }
.tag.ok { background: var(--honesto); color: #0d2416; }
.tag.voce { background: var(--cartao2); border: 1px solid var(--linha); color: var(--apagado); }
.expulsar { background: none; border: 0; color: var(--apagado); font-size: 1.1rem; padding: 4px; }

.chat .msgs { height: 260px; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.chat .msg { word-wrap: break-word; overflow-wrap: anywhere; }
.chat .msg.sis { color: var(--apagado); font-style: italic; font-size: .85rem; }
.chat form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--linha); }
.chat input { flex: 1; min-width: 0; background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); border-radius: 999px; padding: .6em 1em; outline: none; }
.chat input:focus { border-color: var(--ouro); }
.chat button { border: 0; background: var(--ouro); color: #14110f; border-radius: 999px; padding: 0 16px; font-weight: 800; }

.host-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--tinta); color: #14110f; font-weight: 700;
  padding: 12px 18px; border-radius: 999px; transition: transform .25s; z-index: 50; max-width: calc(100% - 32px); text-align: center;
}
#toast:not(.on) { visibility: hidden; transition: transform .25s, visibility 0s .25s; }
#toast.on { transform: translate(-50%, 0); }
a.btn { text-decoration: none; }
@media (max-width: 480px) { .topo .marca { display: none; } }

dialog#regras { background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-radius: 20px; padding: 22px; max-width: 560px; width: calc(100% - 32px); max-height: 85vh; }
dialog#regras::backdrop { background: rgba(0, 0, 0, .7); }
dialog#regras h2 { color: var(--ouro); margin-bottom: 10px; }
dialog#regras ol { padding-left: 1.2em; } dialog#regras li { margin: 8px 0; } dialog#regras ul { padding-left: 1.1em; }

.confete { position: fixed; top: -20px; width: 10px; height: 14px; z-index: 40; pointer-events: none; animation: cai linear forwards; }
@keyframes cai { to { transform: translateY(110vh) rotate(720deg) } }