/* Modo "Com amigos" (amigos-tela.js). Medido nas capturas do client (1282 x 722 -> palco 1280 x 720, quase 1:1):
   VersusFront com dois Plank de 335 x 63 em x 473 (y 287 e 367); VersusJoiner num painel de 764 px em (262, 271), campo cinza
   de 42 px e o botão laranja de 66; VersusCreator num painel de 502 px em (391, 172), campos de 225 px em duas colunas (28 px
   entre elas), rótulos em negrito de 15 px e a caixa de marcar de 84 x 42; VersusCreatorAdvanced (regras) com uma linha a
   cada 73 px: rótulo e a caixa embaixo. O painel e os campos repetem os do login (login.css). */

/* ---------- VersusFront ---------- */
.btn-wood.am-front { left: 473px; width: 335px; height: 63px; font-size: 32px; color: #5a2d14; }

/* ---------- painéis ---------- */
.am-panel { position: absolute; z-index: 5; display: flex; flex-direction: column; background: #fff; border: 3px solid #000; border-radius: 6px;
  padding: 16px 12px 14px; color: #000; font-family: var(--display); }
.am-entrar { left: 262px; top: 236px; width: 764px; }
.am-criar { left: 391px; top: 96px; width: 502px; }
.am-criar.lado { left: 128px; }
.am-lbl { display: block; font-weight: 700; font-size: 15px; line-height: 1; margin: 0 0 6px 13px; color: #000; }
.am-in { display: block; width: 100%; height: 42px; margin: 0 0 18px; padding: 0 11px; border: 2px solid transparent; border-radius: 6px; background: #cbcbcb;
  font-family: var(--body); font-weight: 700; font-size: 19px; color: #1f1f1f; outline: none; text-align: left; user-select: text; -webkit-user-select: text; }
.am-in::placeholder { color: #8b8b8b; font-weight: 600; opacity: 1; }
.am-in:focus, .am-in:focus-visible { border-color: #7a7a7a; background: #d6d6d6; }
.am-in:disabled { opacity: .65; }
.am-in::-webkit-inner-spin-button { opacity: 1; }
.am-ciclo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-ciclo:hover { background: #d9d9d9; }
.am-codigo { letter-spacing: .32em; text-transform: uppercase; font-size: 24px; }
.am-codigo::placeholder { letter-spacing: 0; text-transform: none; font-size: 19px; }
.am-grade { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.am-campo { min-width: 0; }
.am-panel .btn-orange { position: static; }
.am-main { width: 100%; height: 62px; font-size: 30px; color: #5a1c06; margin-top: 2px; }
.am-entrar .am-main { height: 66px; font-size: 34px; }
.am-msg { margin: -6px 4px 12px 13px; font-family: var(--body); font-weight: 800; font-size: 15px; line-height: 1.35; color: #3a3a3a; }
.am-msg.err { color: #c0201b; }
.am-link { background: none; border: 0; padding: 0; font-family: var(--body); font-weight: 800; font-size: 15px; color: #1f1f1f; text-decoration: underline; text-underline-offset: 3px; }
.am-link:hover { color: #000; text-decoration-thickness: 2px; }

/* ninhada escolhida (no alto do painel) */
.am-ninhada { display: flex; align-items: center; gap: 10px; margin: -4px 4px 12px 8px; font-family: var(--body); font-weight: 800; font-size: 15px; color: #3a3a3a; }
.am-ninhada img { width: 36px; height: 36px; object-fit: contain; }
.am-ninhada b { color: #000; }
.am-ninhada .am-link { margin-left: auto; }

/* caixa de marcar (Toggle do client): cinza, o visto preto dentro */
.am-check { width: 84px; height: 42px; border-radius: 6px; background: #cbcbcb; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; flex: none; margin: 0 0 18px; }
.am-check img { width: 30px; height: 30px; filter: brightness(0); }
.am-check:hover { background: #d9d9d9; }
.am-check:focus-visible { border-color: #7a7a7a; }
.am-check.sm { width: 34px; height: 30px; margin: 0; }
.am-check.sm img { width: 22px; height: 22px; }

/* ---------- regras personalizadas (VersusCreatorAdvanced) ---------- */
.am-regras { left: 662px; top: 70px; width: 500px; max-height: 590px; overflow-y: auto; padding: 14px 14px 4px; overscroll-behavior: contain; }
.am-regra { margin-bottom: 8px; }
.am-regra .am-lbl { display: inline-block; margin-bottom: 6px; }
.am-linha { display: flex; align-items: flex-start; gap: 12px; }
.am-linha .am-check { margin-bottom: 12px; }
.am-mini { width: auto; max-width: 200px; height: 42px; margin: 0; font-size: 17px; }
.am-toy { display: flex; align-items: center; gap: 6px; }
.am-toy img { width: 30px; height: 30px; object-fit: contain; }
.am-passo { display: inline-flex; align-items: center; height: 42px; border-radius: 6px; background: #cbcbcb; font-family: var(--body); font-weight: 800; font-size: 19px; color: #1f1f1f; }
.am-passo b { min-width: 44px; text-align: center; }
.am-passo button { width: 38px; height: 42px; font-family: var(--display); font-weight: 700; font-size: 24px; color: #1f1f1f; border-radius: 6px; }
.am-passo button:hover { background: #b9b9b9; }

/* janelinhas: ninhadas permitidas e o brinquedo de todos */
.am-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; width: 420px; background: #fff; border: 3px solid #000; border-radius: 6px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 2000px rgba(0,0,0,.45); font-family: var(--display); }
.am-pop-tit { font-weight: 700; font-size: 22px; text-align: center; }
.am-pop-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.am-opt { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-family: var(--body); font-weight: 800; font-size: 16px; color: #1f1f1f; text-align: left; }
.am-opt:hover { background: #eee; }
.am-pop .btn-orange { position: static; align-self: center; width: 180px; }
.am-pop-toys { width: 560px; }
.am-toys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.am-toyopt { aspect-ratio: 1; border-radius: 8px; background: #eee; border: 3px solid transparent; display: flex; align-items: center; justify-content: center; }
.am-toyopt img { width: 80%; height: 80%; object-fit: contain; }
.am-toyopt:hover { background: #ddd; }
.am-toyopt.on { border-color: var(--orange, #f28c28); background: #fff3e0; }

/* ---------- sala (Lobby) ---------- */
.am-sala { left: 170px; top: 64px; width: 940px; padding: 16px 20px 18px; font-family: var(--body); }
.am-cab { display: flex; align-items: baseline; gap: 14px; }
.am-cab h2, .am-chave-cab h2 { margin: 0; font-family: var(--display); font-size: 32px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-modo { font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; background: #1f1f1f; border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.am-cod { display: flex; align-items: center; gap: 14px; margin: 12px 0 6px; padding: 10px 14px; background: #f1f1f1; border-radius: 8px; }
.am-cod .am-lbl { margin: 0; }
.am-cod b { font-family: var(--display); font-size: 42px; letter-spacing: .28em; color: #c64b00; user-select: all; -webkit-user-select: all; }
.am-cod .btn-orange { margin-left: auto; }
.am-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 8px; }
.am-sub { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 4px 0 6px; }
.am-jogs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; max-height: 300px; overflow-y: auto; }
.am-jogs li { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 6px; border-radius: 6px; background: #f6f6f6; font-weight: 800; font-size: 15px; }
.am-jogs li img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.am-jogs li > i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #e2e2e2; }
.am-jogs li.vaga { color: #9a9a9a; background: none; border: 2px dashed #ddd; }
.am-jogs li.off .am-nome { opacity: .55; }
.am-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.am-nome em { font-style: normal; color: #7a7a7a; font-weight: 700; }
.am-coroa { width: 22px !important; height: 22px !important; }
.am-ninh { margin-left: auto; color: #8a8a8a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.am-rules dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 15px; }
.am-rules dt { font-weight: 700; color: #555; }
.am-rules dd { margin: 0; font-weight: 800; }
.am-acoes { display: flex; gap: 16px; margin-top: 18px; align-items: center; }
.am-acoes .btn-orange { flex: 1; height: 58px; font-size: 28px; }
.am-acoes .am-msg { flex: 1; margin: 0; font-size: 18px; text-align: center; }
.am-sala > .am-msg { margin: 10px 0 0; text-align: center; }

/* ---------- chaveamento ---------- */
.am-chave-cab { position: absolute; left: 120px; right: 80px; top: 12px; display: flex; align-items: center; gap: 14px; z-index: 5; }
.am-chave-cab h2 { color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.am-cod-mini { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; background: rgba(0,0,0,.55); border-radius: 8px; padding: 3px 10px; letter-spacing: .05em; }
.am-chave { position: absolute; left: 20px; right: 20px; top: 70px; bottom: 92px; display: flex; gap: 14px; justify-content: center; z-index: 5; }
.am-chave.com-podio { bottom: 236px; }
.am-rod { display: flex; flex-direction: column; flex: 0 1 290px; min-width: 0; }
.am-rod-tit { text-align: center; font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; margin-bottom: 6px; }
.am-rod-cols { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.am-conf { background: #fff; border: 3px solid #000; border-radius: 8px; padding: 4px 6px 3px; font-family: var(--body); font-weight: 800; font-size: 14px; color: #1f1f1f; }
.am-conf.meu { border-color: #c64b00; box-shadow: 0 0 0 3px rgba(242, 140, 40, .55); }
.am-conf.aguardando { opacity: .8; }
.am-l { display: flex; align-items: center; gap: 6px; height: 22px; }
.am-l + .am-l { border-top: 1px solid #e5e5e5; }
.am-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-l.ganhou .am-n { color: #1d7a1d; }
.am-l.ganhou .am-n::after { content: " ✓"; }
.am-l.perdeu { color: #9a9a9a; }
.am-l.perdeu .am-n { text-decoration: line-through; }
.am-l.eu .am-n { text-decoration-color: #c64b00; }
.am-l.folga { color: #9a9a9a; font-style: italic; }
.am-st { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.am-st img { width: 15px; height: 15px; object-fit: contain; }
.am-chip { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: #6a6a6a; }
.am-chip .am-link { margin-left: auto; font-size: 12px; }
.am-chave.n4 .am-conf { font-size: 13px; padding: 2px 5px; }
.am-chave.n4 .am-l { height: 19px; }
.am-chave.n4 .am-chip { margin-top: 0; }
.am-chave.n1 .am-rod { flex-basis: 420px; }
.am-chave.n1 .am-conf { font-size: 22px; padding: 10px 14px; }
.am-chave.n1 .am-l { height: 38px; }
.am-chave.n1 .am-st { font-size: 18px; }
.am-chave.n1 .am-st img { width: 22px; height: 22px; }
.am-chave.n1 .am-chip { font-size: 15px; }
.am-podio { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; min-width: 460px; background: #fff; border: 4px solid #000; border-radius: 14px;
  padding: 10px 22px 12px; text-align: center; font-family: var(--body); font-weight: 800; font-size: 16px; color: #1f1f1f; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.am-p1 { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-size: 26px; }
.am-p1 img { width: 48px; height: 48px; object-fit: contain; }
.am-p1 b { color: #c64b00; }
.am-rodape { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; gap: 14px; align-items: center; justify-content: flex-end; z-index: 6; }
.am-rodape .btn-orange { position: static; height: 58px; font-size: 26px; }
.am-rodape .am-msg { margin: 0 auto 0 0; background: #fff; border: 3px solid #000; border-radius: 10px; padding: 6px 12px; font-size: 16px; color: #1f1f1f; }

/* ---------- loja: cronômetro, oponente e espera ---------- */
.am-timer { left: 50%; transform: translateX(-50%); top: 14px; height: 42px; font-size: 26px; padding: 0 14px 0 8px; z-index: 4; }
.am-timer img { width: 30px; height: 30px; }
.am-timer.urgente { background: #ffe1dc; border-color: #c0201b; color: #c0201b; animation: am-pulso 1s ease-in-out infinite; }
@keyframes am-pulso { 50% { transform: translateX(-50%) scale(1.08); } }
.am-op { position: absolute; left: 50%; transform: translateX(-50%); top: 62px; z-index: 4; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  background: rgba(255,255,255,.92); border: 3px solid var(--ink); border-radius: 10px; font-family: var(--body); font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.am-op b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.am-vs { font-family: var(--display); font-weight: 700; color: #c64b00; }
.am-op .am-st { font-size: 15px; }
.am-op .am-st img { width: 18px; height: 18px; }
.am-pronto { display: inline-flex; align-items: center; gap: 3px; color: #1d7a1d; }
.am-pronto img { width: 16px; height: 16px; }
.am-montando { color: #8a8a8a; }
.am-espera { position: absolute; inset: 0; z-index: 7; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.am-espera .am-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 16px 24px;
  font-family: var(--body); font-weight: 800; font-size: 20px; line-height: 1.35; color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.am-relogio { width: 54px; height: 54px; animation: am-gira 2s linear infinite; }
@keyframes am-gira { to { rotate: 360deg; } }
.am-espera .am-tempo { color: #c64b00; }
@media (prefers-reduced-motion: reduce) { .am-timer.urgente, .am-relogio { animation: none; } }

/* ---------- resultado do turno ---------- */
.am-result .am-placar { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 1;
  font-family: var(--display); font-weight: 700; font-size: 26px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.am-result .am-placar span { display: inline-flex; align-items: center; gap: 8px; }
.am-result .am-placar img { width: 32px; height: 32px; object-fit: contain; -webkit-text-stroke: 0; }
.am-result .am-placar i { font-style: normal; color: #ffcf3a; }
.am-result .face { top: 112px; }
.am-result .result-text { top: 362px; }
.am-motivo { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.am-result .hearts { top: 478px; gap: 10px; }
.am-result .hearts img { width: 56px; height: 56px; }
.am-result .hearts.am-hearts { align-items: center; font-family: var(--display); font-weight: 700; font-size: 44px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.am-perda { position: absolute; left: 0; right: 0; top: 548px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 26px; color: #ff6b5a; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.am-perda.op { color: #8ff08f; }
.am-aguarda { position: absolute; left: 50%; top: 616px; transform: translateX(-50%); background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 10px 18px;
  font-family: var(--body); font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; }

/* escolha da ninhada no modo (PackShop com o Continuar) */
.bubble.pk-amigos { left: 50%; right: auto; transform: translateX(-50%); top: 14px; bottom: auto; font-size: 18px; z-index: 6; }

/* pets do Ioiô (WackyParameters): abas de tier e a grade de pets */
.am-pop-ioio { width: 640px; }
.am-tiers { display: flex; gap: 6px; justify-content: center; }
.am-tier { padding: 4px 10px; border-radius: 6px; background: #eee; font-family: var(--display); font-weight: 700; font-size: 15px; color: #1f1f1f; }
.am-tier.on { background: #1f1f1f; color: #fff; }
.am-pets { grid-template-columns: repeat(12, 1fr); max-height: 300px; overflow-y: auto; }
.am-pop-acoes { display: flex; align-items: center; justify-content: center; gap: 24px; }

/* loja: recompensa ligada ("Recompensas da loja": escolha 1 de N) */
.space .rw-link { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 3; background: #fff; border: 2px solid var(--ink); border-radius: 8px;
  padding: 0 6px; font-family: var(--body); font-weight: 800; font-size: 12px; color: var(--ink); white-space: nowrap; pointer-events: none; }