/* Código do celular (2 fatores) para jogadores — src/online/dois-fatores.js (SQL 2478). Opção C: 3 passos. */
.df-fundo{position:fixed;inset:0;z-index:2147483000;background:rgba(3,6,12,.74);display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
.df-caixa{width:600px;max-width:100%;max-height:100%;overflow:auto;box-sizing:border-box;background:linear-gradient(180deg,#141c2b,#0b111b);border:1px solid #6b5228;border-radius:14px;box-shadow:0 0 0 1px #000,0 20px 60px #000c;color:#e8dcc4}
.df-caixa.df-estreita{width:420px}
.df-tit{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #2a3550;font-weight:800;letter-spacing:.06em;color:#f0c46a;font-size:1.05rem}
.df-x{margin-left:auto;background:none;border:0;color:#9aa4b8;font-size:1.1rem;cursor:var(--cur-mao,pointer);padding:4px 6px}
.df-corpo{padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;font-size:.9rem;line-height:1.35}
.df-linha{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.df-qr-linha{align-items:flex-start;flex-wrap:nowrap}
.df-qr{width:150px;height:150px;flex:none;background:#fff;border-radius:8px;padding:6px;box-sizing:border-box}
.df-qr img{width:100%;height:100%;display:block}
.df-lado{flex:1;min-width:0;display:grid;gap:9px}
.df-campo{width:100%;max-width:240px;box-sizing:border-box;background:#070b12;border:1px solid #6b5228;border-radius:9px;color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:.35em;padding:8px 12px;font-family:monospace}
.df-campo-centro{justify-self:center;text-align:center}
.df-campo-reserva{letter-spacing:.12em;text-transform:uppercase}
.df-btn{background:linear-gradient(180deg,#e7b44f,#a8731f);color:#1a1006;border:0;border-radius:9px;font-weight:900;letter-spacing:.06em;padding:11px 16px;font-size:.88rem;cursor:var(--cur-mao,pointer);justify-self:start}
.df-btn.df-largo{justify-self:stretch}
.df-btn2{background:#162036;color:#e8dcc4;border:1px solid #33456b;border-radius:9px;font-weight:700;padding:10px 14px;font-size:.82rem;cursor:var(--cur-mao,pointer)}
.df-perigo{border-color:#6b2f2f;color:#ff9c8a}
.df-links{display:grid;gap:8px;justify-items:center}
.df-link{background:none;border:0;padding:0;color:#8fb7ff;text-decoration:underline;font-size:.84rem;cursor:var(--cur-mao,pointer);text-align:center}
.df-link-fraco{color:#8b97b0}
.df-nota{font-size:.78rem;color:#a99f8c}
.df-chave{overflow-wrap:anywhere}
.df-erro{color:#ff9c8a;font-size:.82rem;min-height:1em}
.df-erro:empty{display:none}
.df-aviso{font-size:.8rem;background:#2b1f0a;border:1px solid #6b5228;border-radius:8px;padding:8px 10px;color:#ffd99a}
.df-passos{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.74rem;font-weight:800;letter-spacing:.04em}
.df-passos b{padding:5px 9px;border-radius:99px;background:#162036;color:#8b97b0;border:1px solid #2a3550;white-space:nowrap}
.df-passos b.feito{background:#173322;color:#8ef0a9;border-color:#2c6b42}
.df-passos b.agora{background:#3d2c10;color:#ffd27a;border-color:#a8731f}
.df-res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.df-res span{font-family:monospace;font-size:.95rem;background:#070b12;border:1px solid #2a3550;border-radius:6px;padding:7px 4px;text-align:center;color:#fff;letter-spacing:.06em;user-select:all}
.df-pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.05em}
.df-off{background:#3a1e1e;color:#ff9c8a;border:1px solid #6b2f2f}
.df-on{background:#173322;color:#8ef0a9;border:1px solid #2c6b42}
#contaLinhaCelular[hidden]{display:none}
#contaLinhaCelular b{margin-left:auto;margin-right:8px}
@media (max-width:520px){
  .df-corpo{padding:12px 13px}
  .df-qr-linha{flex-direction:column;align-items:center}
  .df-qr{width:136px;height:136px}
  .df-lado{width:100%}
  .df-res{grid-template-columns:repeat(2,minmax(0,1fr))}
  .df-res span{font-size:.85rem}
  .df-passos b{font-size:.64rem;padding:4px 7px}
}
/* celular deitado: pouca altura */
@media (max-height:480px){
  .df-tit{padding:8px 14px;font-size:.95rem}
  .df-corpo{padding:8px 14px;gap:7px;font-size:.84rem}
  .df-res{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .df-res span{padding:4px 2px;font-size:.8rem}
  .df-aviso{padding:5px 8px}
  .df-btn{padding:8px 14px}.df-btn2{padding:7px 12px}
  .df-qr-linha{flex-direction:row;align-items:flex-start}
  .df-qr{width:120px;height:120px}
}
/* 31/10: tutorial do passo 1, lojas, chave para copiar e o jeito do celular */
.df-tuto{margin:0;padding-left:1.4em;display:grid;gap:6px}
.df-tuto li::marker{color:#f0c46a;font-weight:800}
.df-lojas{display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:5px;vertical-align:middle}
.df-tuto li>span:first-child{margin-right:6px}
.df-loja{display:inline-block;text-decoration:none;padding:6px 12px;font-size:.8rem}
.df-linha-chave{gap:8px;flex-wrap:nowrap}
.df-chave-txt{flex:1;min-width:0;font-family:monospace;font-size:.86rem;background:#070b12;border:1px solid #2a3550;border-radius:7px;padding:7px 9px;color:#fff;letter-spacing:.04em;overflow-wrap:anywhere;user-select:all}
.df-copiar{flex:none}
a.df-abre-app{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.df-nao-abriu{display:grid;gap:6px}
.df-nao-abriu[hidden]{display:none}
.df-linha-codigo{flex-wrap:nowrap}
.df-linha-codigo .df-campo{flex:1;min-width:0}
.df-qr[hidden]{display:none}
.df-qr-cel{justify-self:center}
.df-modo-cel{gap:9px}
@media (max-height:480px){
  .df-tuto{gap:3px}
  .df-lojas{margin-top:2px}
  .df-loja{padding:4px 10px}
  .df-chave-txt{padding:5px 8px}
  .df-modo-cel{gap:6px}
  .df-nao-abriu:not([hidden]){display:flex;align-items:center;gap:8px;padding:4px 8px}
  .df-nao-abriu .df-lojas{margin:0;flex:none;flex-wrap:nowrap}
  .df-modo-cel .df-campo{font-size:1.15rem;padding:5px 10px}
}