/* Tradições e Exportação (o Sabi, o sabiá-laranjeira): só o que as brincadeiras precisam além do estilo.css. Tudo começa com tr-. */

/* ---------- peças comuns ---------- */
/* As animações de entrada (que vêm da direita) não podem criar rolagem para o lado. */
.tela[class*="tela-tradicoes"] { overflow-x: clip; }
.tr-arte { display: block; width: 100%; height: auto; }
.tr-apresenta { width: 120px; }
.abertura-arte .tr-arte { width: 130px; margin: 0 auto; }
.janela-arte .tr-arte { width: 110px; margin: 0 auto; }
.tr-brincadeira-emoji { background: #ffedd5; }
.tr-nota-menu { margin: 0; text-align: center; color: var(--branco); font-size: 15px; font-weight: 700; opacity: .95; }
.abertura .tr-nota-menu, .janela .tr-nota-menu { color: var(--tinta); }

/* O varal do menu, com os desenhos das tradições balançando. */
.tr-varal {
  position: relative; display: flex; justify-content: space-around; gap: 4px; padding: 14px 6px 4px;
  border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: var(--sombra); overflow: hidden;
}
.tr-varal::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--tinta); opacity: .4; }
.tr-varal-item { width: 11%; max-width: 54px; transform-origin: 50% 0; animation: tr-balanca-item 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes tr-balanca-item { 50% { transform: rotate(6deg); } 0%, 100% { transform: rotate(-6deg); } }

.tr-vez .tr-vez-nome { font-size: 22px; }
.tr-vez .tr-vez-nome .chip { padding: 3px 14px; }
.tr-vez.tr-todos { --cor: #f59e0b; }
.tr-info-jogo { font-size: 20px; font-weight: 900; }
.tr-selo-ouro {
  padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #fde047, #f59e0b); color: #713f12;
  font-size: 15px; font-weight: 900; box-shadow: 0 3px 0 #b45309; animation: tr-brilha 1.2s ease-in-out infinite;
}
@keyframes tr-brilha { 50% { transform: scale(1.06); } }
.tr-ouro-caixa { background: linear-gradient(#fffbeb, #fff); box-shadow: 0 0 0 5px #f59e0b, var(--sombra); }
.tr-apagada { opacity: .45; }
.tr-treme { animation: treme .12s 4; }

/* ---------- a mãozinha que mostra o gesto ---------- */
.tr-mao {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 18px;
  background: #fff7ed; border: 3px dashed #fb923c; font-size: 17px; font-weight: 800; line-height: 1.25;
}
.tr-mao-novo { animation: tr-mao-chega .4s ease-out; }
@keyframes tr-mao-chega { from { transform: scale(.9); opacity: .3; } }
.tr-mao-palco { position: relative; flex: none; width: 58px; height: 48px; }
.tr-mao-dedo { position: absolute; left: 14px; top: 8px; font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.tr-mao-rastro { position: absolute; display: block; pointer-events: none; }
.tr-mao-texto { flex: 1; min-width: 0; }

.tr-mao-tocar .tr-mao-dedo { animation: tr-dedo-toca 1.1s ease-in-out infinite; }
.tr-mao-tocar .tr-mao-rastro { left: 12px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #fb923c; animation: tr-anel 1.1s ease-out infinite; }
@keyframes tr-dedo-toca { 0%, 100% { transform: translateY(-6px); } 45% { transform: translateY(2px) scale(.92); } }
@keyframes tr-anel { 0%, 40% { transform: scale(.3); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

.tr-mao-segurar .tr-mao-dedo { animation: tr-dedo-segura 2s ease-in-out infinite; }
.tr-mao-segurar .tr-mao-rastro { left: 4px; bottom: 0; height: 7px; width: 50px; border-radius: 9px; background: linear-gradient(90deg, #fb923c 0 50%, #fed7aa 50%); background-size: 200% 100%; animation: tr-enche 2s linear infinite; }
@keyframes tr-dedo-segura { 0% { transform: translateY(-6px); } 15%, 85% { transform: translateY(3px) scale(.92); } 100% { transform: translateY(-6px); } }
@keyframes tr-enche { 0%, 15% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }

.tr-mao-deslizar .tr-mao-dedo { animation: tr-dedo-desliza 1.4s ease-in infinite; }
.tr-mao-deslizar .tr-mao-rastro { left: 26px; top: 4px; width: 4px; height: 36px; border-radius: 4px; background: linear-gradient(#fb923c, transparent); transform: rotate(25deg); animation: tr-some-volta 1.4s infinite; }
@keyframes tr-dedo-desliza { 0% { transform: translate(6px, 12px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(-6px, -14px); opacity: 1; } 100% { transform: translate(-6px, -14px); opacity: 0; } }
@keyframes tr-some-volta { 0%, 30% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }

.tr-mao-arrastar .tr-mao-dedo { animation: tr-dedo-arrasta 1.8s ease-in-out infinite; }
.tr-mao-arrastar .tr-mao-rastro { left: 0; top: 10px; width: 18px; height: 18px; border-radius: 5px; background: #fb923c; animation: tr-caixa-arrasta 1.8s ease-in-out infinite; }
@keyframes tr-dedo-arrasta { 0%, 15% { transform: translate(-10px, 6px); } 70%, 85% { transform: translate(20px, 6px); } 100% { transform: translate(-10px, 6px); } }
@keyframes tr-caixa-arrasta { 0%, 15% { transform: translateX(0); } 70%, 85% { transform: translateX(30px); } 100% { transform: translateX(0); } }

.tr-mao-girar .tr-mao-dedo { animation: tr-dedo-gira 1.6s linear infinite; }
.tr-mao-girar .tr-mao-rastro { left: 9px; top: 4px; width: 38px; height: 38px; border-radius: 50%; border: 3px dashed #fb923c; animation: tr-roda-gira 4s linear infinite; }
@keyframes tr-dedo-gira { from { transform: rotate(0) translateX(12px) rotate(0); } to { transform: rotate(360deg) translateX(12px) rotate(-360deg); } }
@keyframes tr-roda-gira { to { transform: rotate(360deg); } }

.tr-mao-ligar .tr-mao-dedo { animation: tr-dedo-liga 2s ease-in-out infinite; }
.tr-mao-ligar .tr-mao-rastro { left: 6px; top: 22px; width: 46px; height: 0; border-top: 3px dashed #fb923c; }
.tr-mao-ligar .tr-mao-rastro::before, .tr-mao-ligar .tr-mao-rastro::after { content: ""; position: absolute; top: -8px; width: 12px; height: 12px; border-radius: 50%; background: #fb923c; }
.tr-mao-ligar .tr-mao-rastro::before { left: -4px; }
.tr-mao-ligar .tr-mao-rastro::after { right: -4px; background: #a855f7; }
@keyframes tr-dedo-liga { 0%, 10% { transform: translate(-14px, 4px); } 20% { transform: translate(-14px, 10px); } 55%, 65% { transform: translate(22px, 4px); } 75% { transform: translate(22px, 10px); } 100% { transform: translate(-14px, 4px); } }

.tr-mao-pinca .tr-mao-dedo { animation: tr-dedo-pinca 1.4s ease-in-out infinite; }
.tr-mao-pinca .tr-mao-rastro { left: 2px; top: 2px; width: 44px; height: 44px; border-radius: 10px; border: 3px solid #fb923c; animation: tr-lupa-cresce 1.4s ease-in-out infinite; }
@keyframes tr-dedo-pinca { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.25); } }
@keyframes tr-lupa-cresce { 0%, 100% { transform: scale(.55); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }

/* A faixa de um conceito (exportação, câmbio...). */
.tr-conceito {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 16px; text-align: left;
  background: #fef9c3; border-left: 8px solid #f59e0b; font-size: 16px; line-height: 1.35; font-weight: 600; box-shadow: var(--sombra);
}
.tr-conceito + .tr-conceito { margin-top: 8px; }
.tr-conceito-emoji { font-size: 26px; line-height: 1; }
.abertura + .tr-conceito, .abertura ~ div .tr-conceito { margin-top: 6px; }

/* A faixa do que se aprendeu, com o botão de seguir. */
.tr-aprende {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 20px;
  background: var(--branco); box-shadow: var(--sombra); border-left: 10px solid #fb923c; font-size: 16px; line-height: 1.3;
}
.tr-aprende-certo { border-left-color: #22c55e; }
.tr-aprende > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.tr-aprende strong { font-size: 19px; }
.tr-aprende small { font-size: 15px; opacity: .85; }
.tr-aprende-arte { width: 56px; flex: none; }
.tr-aprende-bandeira { font-size: 42px; line-height: 1; flex: none; }
.tr-aprende .botao { margin-left: auto; }
.tr-explica { margin: 0; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .92); font-size: 17px; font-weight: 700; text-align: center; }

/* ---------- arrastar ---------- */
.tr-arrasta { touch-action: none; cursor: grab; }
.tr-pegou { position: relative; z-index: 50; cursor: grabbing; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .3)); }
.tr-volta { animation: tr-volta .3s ease-out; }
@keyframes tr-volta { 0% { transform: scale(1.1); } 50% { transform: scale(.92); } }
.tr-alvo-perto { outline: 5px solid #fde047; outline-offset: 2px; }

/* ---------- o palco das brincadeiras ---------- */
.tr-palco {
  position: relative; width: 100%; max-width: calc(58vh * 1.2); aspect-ratio: 1.2 / 1; margin: 0 auto; overflow: hidden;
  border-radius: 24px; background: linear-gradient(#bae6fd, #e0f2fe 62%, #a16207 62%); box-shadow: var(--sombra);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.tr-palco-dica {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-size: 16px; font-weight: 900; white-space: nowrap; pointer-events: none;
}
.tr-palco-pronto { box-shadow: 0 0 0 6px #22c55e, var(--sombra); }
.tr-campo-recado {
  position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: flex; flex-direction: column; align-items: center; padding: 10px 20px; border-radius: 22px;
  background: rgba(255, 255, 255, .95); font-size: clamp(22px, 7vw, 34px); font-weight: 900; text-align: center;
  pointer-events: none; transition: transform .2s, opacity .2s; box-shadow: var(--sombra); max-width: 92%;
}
.tr-campo-recado small { font-size: 15px; opacity: .75; }
.tr-recado-mostra { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tr-recado-bom { color: #15803d; }
.tr-recado-ruim { color: #b91c1c; }

/* ---------- Pênalti ---------- */
.tr-placar-gols .contagem-item { font-size: 15px; }
.tr-placar-gols .tr-agora { background: var(--cor); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.tr-campo {
  position: relative; width: 100%; max-width: calc(52vh * .85); aspect-ratio: .85 / 1; margin: 0 auto; overflow: hidden;
  border-radius: 24px; box-shadow: var(--sombra); touch-action: none; -webkit-user-select: none; user-select: none;
  background: repeating-linear-gradient(180deg, #22c55e 0 9%, #16a34a 9% 18%);
}
.tr-area { position: absolute; left: 4%; right: 4%; top: 39%; height: 26%; border: 4px solid rgba(255, 255, 255, .85); border-top: 0; }
.tr-area::after { content: ""; position: absolute; left: 50%; top: 155%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; }
.tr-gol {
  position: absolute; border: 7px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 12px),
    rgba(15, 23, 42, .25);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.tr-gol-guia { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, .5) 33% 33.6%, transparent 33.6% 66.4%, rgba(255, 255, 255, .5) 66.4% 67%, transparent 67%); }
.tr-balanca-rede { animation: tr-rede .5s ease-out; }
@keyframes tr-rede { 30% { transform: scale(1.04, 1.06); } 60% { transform: scale(.98); } }
.tr-goleiro {
  position: absolute; z-index: 2; width: 21%; transform: translate(-50%, -100%) rotate(var(--giro, 0deg)) translateY(var(--sobe, 0%));
  transform-origin: 50% 80%; transition: left .32s ease-out, top .32s ease-out, transform .32s ease-out;
}
.tr-goleiro.tr-lento { transition-duration: .7s; }
.tr-goleiro-svg { display: block; width: 100%; }
.tr-balanca .tr-goleiro-svg { animation: tr-goleiro-balanca 1.3s ease-in-out infinite alternate; }
@keyframes tr-goleiro-balanca { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
.tr-bola-campo {
  position: absolute; z-index: 3; width: 13%; transform: translate(-50%, -50%);
  transition: left .48s cubic-bezier(.2, .7, .4, 1), top .48s cubic-bezier(.2, .7, .4, 1), width .48s;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .3)); pointer-events: none;
}
.tr-bola-campo.tr-voando { width: 7%; }
.tr-bola-campo.tr-voando svg { animation: tr-gira-bola .3s linear infinite; }
@keyframes tr-gira-bola { to { transform: rotate(360deg); } }
.tr-bola-campo.tr-rebate { transition: top .5s ease-in, left .5s; top: 60% !important; }
.tr-ouro svg circle:first-child { fill: #fde047; }
.tr-ouro { filter: drop-shadow(0 0 10px #f59e0b); }
.tr-rastro {
  position: absolute; z-index: 4; height: 10px; margin-top: -5px; border-radius: 10px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .9)); pointer-events: none; opacity: 0; transition: opacity .2s;
}
.tr-mao-campo {
  position: absolute; z-index: 5; left: 50%; top: 84%; font-size: 46px; pointer-events: none;
  transform: translate(-30%, -20%); animation: tr-mao-chuta 1.8s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3));
}
@keyframes tr-mao-chuta { 0%, 10% { left: 50%; top: 84%; opacity: 0; } 20% { opacity: 1; } 70% { left: 24%; top: 24%; opacity: 1; } 85%, 100% { left: 24%; top: 24%; opacity: 0; } }
.tr-some { display: none; }

/* ---------- Do pé de café até a xícara ---------- */
.tr-trilha-cafe { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.tr-trilha-cafe span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; background: rgba(255, 255, 255, .35); }
.tr-trilha-cafe .tr-feito { background: #bbf7d0; }
.tr-trilha-cafe .tr-agora { background: #fff; transform: scale(1.2); box-shadow: 0 0 0 3px #fb923c; }
.tr-terra { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(#a16207, #78350f); }
.tr-ceu-cafe { position: absolute; right: 6%; top: 6%; font-size: 44px; }
.tr-buraco {
  position: absolute; width: 17%; aspect-ratio: 1.5 / 1; transform: translate(-50%, 0); border-radius: 50%;
  background: radial-gradient(#3f1d0b 55%, #713f12 60%); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .35);
}
.tr-buraco.tr-brilha { box-shadow: 0 0 0 5px #fde047, 0 0 18px 6px #fde047; animation: tr-brilha 0.9s ease-in-out infinite; }
.tr-buraco.tr-plantado { background: radial-gradient(#57260c 55%, #713f12 60%); }
.tr-muda { display: block; font-size: 34px; margin-top: -30px; animation: tr-cresce .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tr-cresce { from { transform: scale(0); } }
.tr-palco-regar .tr-terra { height: 24%; }
.tr-planta { position: absolute; bottom: 14%; width: 22%; transform: translateX(-50%) scale(var(--cresce, .35)); transform-origin: 50% 100%; transition: transform .1s; }
.tr-lata { position: absolute; left: 58%; top: 6%; width: 32%; transform: rotate(-10deg); transition: transform .3s; }
.tr-regando .tr-lata { transform: rotate(-38deg) translate(-12%, 8%); }
.tr-regador { display: block; width: 100%; }
.tr-gotas { position: absolute; left: 34%; top: 30%; font-size: 26px; letter-spacing: 6px; opacity: 0; }
.tr-regando .tr-gotas { opacity: 1; animation: tr-chove .5s linear infinite; }
@keyframes tr-chove { from { transform: translateY(-10px); } to { transform: translateY(24px); opacity: .3; } }
.tr-barra-segura, .tr-barra-torra { position: absolute; left: 8%; right: 8%; top: 4%; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .75); overflow: hidden; border: 3px solid var(--tinta); }
.tr-barra-segura i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #2563eb); }
.tr-palco-colher { background: linear-gradient(#bae6fd, #dcfce7 70%, #86efac 70%); }
.tr-copa { position: absolute; left: 10%; right: 10%; top: 6%; height: 72%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #22c55e, #15803d 70%); border: 4px solid var(--tinta); }
.tr-tronco { position: absolute; left: 47%; width: 6%; bottom: 4%; height: 22%; background: #78350f; border: 3px solid var(--tinta); border-radius: 4px; }
.tr-fruto {
  position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9f99d, #65a30d); border: 3px solid var(--tinta); transition: transform .2s, opacity .3s;
}
.tr-fruto::after { content: ""; position: absolute; left: 22%; top: 18%; width: 28%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.tr-fruto.tr-maduro { background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 60%, #991b1b); }
.tr-fruto.tr-fruto-ouro.tr-maduro { background: radial-gradient(circle at 35% 30%, #fef9c3, #f59e0b 60%, #b45309); box-shadow: 0 0 12px 4px #fde047; }
.tr-fruto.tr-amadureceu { animation: tr-brilha .5s 3; }
.tr-fruto.tr-colhido { transform: translate(-50%, 260%) scale(.4); opacity: 0; pointer-events: none; }
.tr-cesto { position: absolute; right: 4%; bottom: 4%; padding: 6px 12px; border-radius: 14px; background: #fff; font-size: 24px; font-weight: 900; }
.tr-palco-secar { background: linear-gradient(#bae6fd, #e0f2fe 30%, #fde68a 30%); }
.tr-cesto-montes { position: absolute; left: 4%; top: 36%; width: 30%; bottom: 6%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; border-radius: 18px; background: rgba(146, 64, 14, .25); border: 3px dashed #92400e; }
.tr-monte { width: 46px; height: 46px; display: grid; place-items: center; font-size: 32px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.tr-terreiro {
  position: absolute; right: 4%; top: 30%; width: 56%; bottom: 6%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px;
  border-radius: 18px; background: repeating-linear-gradient(45deg, #e7e5e4 0 14px, #d6d3d1 14px 28px); border: 4px solid var(--tinta);
}
.tr-terreiro small { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-weight: 900; }
.tr-sol { position: absolute; top: -48px; right: 8px; font-size: 44px; animation: tr-roda-gira 10s linear infinite; }
.tr-terreiro .tr-monte { width: 40px; height: 40px; font-size: 26px; transition: filter 1.4s; }
.tr-secando .tr-monte { filter: sepia(1) brightness(.55) saturate(1.6); }
.tr-palco-exportar { background: linear-gradient(#bae6fd, #e0f2fe 46%, #3b82f6 46%); }
.tr-mar-porto { position: absolute; left: 0; right: 0; bottom: 0; height: 54%; background: repeating-linear-gradient(180deg, #3b82f6 0 12px, #60a5fa 12px 20px); }
.tr-cais { position: absolute; left: 0; bottom: 0; width: 38%; height: 70%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 6px; background: #a8a29e; border-right: 5px solid var(--tinta); }
.tr-saca { width: 56px; }
.tr-navio-porto { position: absolute; right: 4%; bottom: 10%; width: 50%; transition: transform 1.4s ease-in; }
.tr-navio-porto.tr-zarpa { transform: translateX(120%); }
.tr-palco-conceito { position: absolute; left: 40%; right: 2%; top: 2%; }
.tr-palco-conceito .tr-conceito { font-size: 13px; padding: 6px 10px; }
.tr-palco-torrar { background: linear-gradient(#fef3c7, #fde68a); }
.tr-adulto-junto { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 900; white-space: nowrap; }
.tr-torrador { position: absolute; left: 22%; right: 22%; top: 26%; height: 44%; border-radius: 22px 22px 50% 50%; background: #57534e; border: 5px solid var(--tinta); overflow: hidden; }
.tr-graos { position: absolute; inset: 14% 8% 34% 8%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px; }
.tr-graos i { width: 18px; height: 13px; border-radius: 50%; background: var(--grao, #84cc16); border: 2px solid rgba(0, 0, 0, .35); position: relative; }
.tr-graos i::after { content: ""; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .3); }
.tr-torrando .tr-graos i { animation: tr-pula-grao .25s ease-in-out infinite alternate; }
.tr-torrando .tr-graos i:nth-child(2n) { animation-delay: .12s; }
@keyframes tr-pula-grao { to { transform: translateY(-4px) rotate(20deg); } }
.tr-fogo { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 26px; opacity: .35; }
.tr-torrando .tr-fogo { opacity: 1; animation: tr-brilha .3s infinite; }
.tr-barra-torra { top: auto; bottom: 20%; background: linear-gradient(90deg, #84cc16, #eab308 35%, #92400e 60%, #451a03 85%, #1c1917); }
.tr-ponto-torra { position: absolute; top: 0; bottom: 0; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 0 0 2px var(--tinta); }
.tr-torra-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-right: 5px solid #fff; box-shadow: 2px 0 0 var(--tinta); }
.tr-torra-rotulos { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: space-between; }
.tr-barra-torra { overflow: visible; }
.tr-torra-rotulos b { margin-top: 6px; font-size: 12px; background: #fff; padding: 0 6px; border-radius: 6px; }
.tr-palco-moer { background: radial-gradient(circle at 50% 36%, #fef3c7, #fde68a); }
.tr-roda { position: absolute; left: 50%; top: 4%; width: 60%; aspect-ratio: 1; transform: translateX(-50%); }
.tr-moinho { position: absolute; inset: 20% 10% 0; }
.tr-moinho svg { width: 100%; }
.tr-roda-guia { position: absolute; left: 14%; right: 14%; top: 4%; aspect-ratio: 1; border: 4px dashed rgba(42, 26, 94, .35); border-radius: 50%; pointer-events: none; transform: translateY(-14%); }
.tr-manivela { position: absolute; left: 50%; top: 32%; width: 0; height: 0; }
.tr-manivela i { position: absolute; left: 0; top: -5px; width: 70px; height: 10px; background: #6b7280; border: 3px solid var(--tinta); border-radius: 6px; }
.tr-manivela b { position: absolute; left: 60px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #b45309; border: 3px solid var(--tinta); }
.tr-po { position: absolute; left: 41%; width: 18%; bottom: 20%; height: calc(var(--po, 0) * 12%); background: #451a03; border-radius: 6px 6px 0 0; }
.tr-palco-passar { background: linear-gradient(#fef3c7, #fff7ed); }
.tr-chaleira { position: absolute; left: 18%; top: 2%; width: 40%; transform-origin: 80% 60%; transition: transform .3s; }
.tr-despejando .tr-chaleira { transform: rotate(30deg); }
.tr-agua { position: absolute; left: 60%; top: 24%; width: 8px; height: 0; margin-left: -4px; background: linear-gradient(#93c5fd, #60a5fa); border-radius: 4px; transition: height .3s; }
.tr-despejando .tr-agua { height: 18%; }
.tr-coador { position: absolute; left: 47%; top: 40%; width: 26%; height: 18%; background: #fff; border: 4px solid var(--tinta); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.tr-coador::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 20%; height: 30%; background: #451a03; border-radius: 0 0 50% 50%; }
.tr-xic { position: absolute; left: 49%; top: 60%; width: 22%; height: 24%; background: #fff; border: 4px solid var(--tinta); border-radius: 0 0 40% 40%; overflow: hidden; }
.tr-xic::after { content: ""; position: absolute; right: -24%; top: 20%; width: 24%; height: 40%; border: 4px solid var(--tinta); border-radius: 0 50% 50% 0; }
.tr-xic-cafe { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cheio, 0) * 90%); background: #6b3f1d; transition: height .6s; }
.tr-fumaca::before { content: "♨️"; position: absolute; left: 30%; top: -2px; font-size: 22px; z-index: 2; }
.tr-cafezinho { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; border-radius: 28px; background: var(--branco); box-shadow: var(--sombra); text-align: center; }
.tr-cafezinho h2 { margin: 0; font-size: 28px; }
.tr-cafezinho p { margin: 0; font-size: 19px; font-weight: 700; }
.tr-cafezinho-arte { width: 140px; }

/* ---------- Festa junina ---------- */
.tr-festa {
  position: relative; width: 100%; max-width: calc(34vh * 1.6); margin: 0 auto; aspect-ratio: 1.6 / 1; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra);
  background: radial-gradient(circle at 80% 12%, #fef9c3 0 3%, transparent 3.5%), linear-gradient(#1e3a8a, #6d28d9 62%, #92400e 62%);
}
.tr-varal-festa { position: absolute; left: 3%; right: 3%; top: 6%; display: flex; justify-content: space-around; gap: 2px; padding-top: 6px; }
.tr-varal-festa::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; background: #fde68a; border-radius: 2px; }
.tr-vaga { width: 15%; max-width: 54px; aspect-ratio: .8; border: 3px dashed rgba(255, 255, 255, .55); border-top: 0; border-radius: 0 0 8px 8px; }
.tr-vaga:not(:empty) { border: 0; animation: tr-balanca-item 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.tr-vaga .tr-peca-arte svg { width: 100%; display: block; }
.tr-fogueira-cena { position: absolute; left: 41%; width: 18%; bottom: 6%; opacity: .45; transition: opacity .6s; }
.tr-festa-pronta .tr-fogueira-cena { opacity: 1; animation: tr-brilha 1s ease-in-out infinite; }
.tr-mesa, .tr-caixa-fora {
  position: absolute; bottom: 5%; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 4px; padding: 22px 4px 4px;
  border-radius: 14px;
}
.tr-mesa { left: 3%; width: 36%; height: 40%; background: repeating-linear-gradient(90deg, #fca5a5 0 10px, #fff 10px 20px); border: 3px solid #fff; }
.tr-caixa-fora { right: 3%; width: 34%; height: 40%; background: rgba(255, 255, 255, .85); border: 3px dashed #ef4444; }
.tr-mesa small, .tr-caixa-fora small { position: absolute; top: 2px; left: 4px; right: 4px; font-size: 11px; font-weight: 900; text-align: center; background: rgba(255, 255, 255, .9); border-radius: 6px; }
.tr-mesa .tr-peca, .tr-caixa-fora .tr-peca { width: 34px; padding: 2px; box-shadow: none; }
.tr-mesa .tr-peca small, .tr-caixa-fora .tr-peca small { display: none; }
.tr-mesa .tr-peca-arte, .tr-caixa-fora .tr-peca-arte { width: 28px; }
.tr-mesa .tr-emoji-peca, .tr-caixa-fora .tr-emoji-peca { font-size: 24px; line-height: 28px; }
.tr-bandeja { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 40px; }
.tr-peca { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 16px; background: var(--branco); box-shadow: 0 4px 0 rgba(42, 26, 94, .2); }
.tr-peca-bandeira small { display: none; }
.tr-peca small { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1; }
.tr-peca-arte { width: 40px; display: grid; place-items: center; }
.tr-peca-arte svg { width: 100%; display: block; }
.tr-peca-bandeira .tr-peca-arte { width: 30px; }
.tr-emoji-peca { font-size: 32px; line-height: 40px; }
.tr-vez .tr-recado-festa { flex: 1 1 100%; font-size: 16px; opacity: .9; }
.tr-faltam { font-size: 16px; }
.tr-salao { position: relative; width: 100%; aspect-ratio: 2.3 / 1; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra); background: linear-gradient(#1e3a8a, #6d28d9 58%, #b45309 58%); }
.tr-salao-enfeite { position: absolute; inset: 0; }
.tr-salao-enfeite .tr-varal-festa { top: 2%; }
.tr-salao-enfeite .tr-vaga:empty { display: none; }
.tr-pares { position: absolute; left: 4%; right: 4%; bottom: 4%; display: flex; justify-content: space-around; align-items: flex-end; }
.tr-dancante { width: 14%; max-width: 64px; animation: tr-quadrilha 1.2s ease-in-out infinite alternate; }
.tr-dancante:nth-child(2n) { animation-delay: -.6s; }
.tr-dancante svg { display: block; width: 100%; }
@keyframes tr-quadrilha { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tr-danca-frente .tr-dancante { animation: tr-frente .7s ease-out; }
.tr-danca-tras .tr-dancante { animation: tr-tras .7s ease-out; }
.tr-danca-proteger .tr-dancante { animation: tr-protege .7s ease-out; }
.tr-danca-lugar .tr-dancante { animation: tr-gira-lugar .7s ease-in-out; }
@keyframes tr-frente { 50% { transform: translateY(8%) scale(1.25); } }
@keyframes tr-tras { 50% { transform: translateY(-14%) scale(.75); } }
@keyframes tr-protege { 30%, 70% { transform: translateY(6%) scaleY(.85); } }
@keyframes tr-gira-lugar { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.tr-estrela-ouro { position: absolute; right: 8%; top: 30%; z-index: 3; width: 64px; height: 64px; font-size: 48px; animation: tr-brilha .7s ease-in-out infinite; }
.tr-comando {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-radius: 22px;
  background: var(--branco); box-shadow: var(--sombra); text-align: center;
}
.tr-comando strong { font-size: clamp(26px, 8vw, 38px); line-height: 1.1; }
.tr-marcador { font-size: 34px; }
.tr-comando-dica { font-size: 38px; }
.tr-direcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-direcao {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; min-height: 72px; border-radius: 22px;
  background: var(--branco); box-shadow: 0 5px 0 rgba(42, 26, 94, .25); font-weight: 900;
}
.tr-direcao span { font-size: 32px; line-height: 1.1; }
.tr-direcao small { font-size: 16px; }
.tr-direcao:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(42, 26, 94, .25); }
.tr-direcao.tr-certo { background: #dcfce7; box-shadow: 0 0 0 4px #22c55e; }
.tr-direcao.tr-errado { background: #fee2e2; box-shadow: 0 0 0 4px #ef4444; }

/* ---------- Que tradição é essa? ---------- */
.tr-pergunta { padding: 16px 14px; }
.tr-pergunta p { font-size: clamp(20px, 6vw, 26px); }
.tr-pergunta-arte { width: min(120px, 32vw); }
.tr-pergunta-linha { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tr-pergunta-linha .tr-pergunta-arte { width: min(96px, 26vw); }
.tr-opcoes .opcao { min-height: 58px; padding: 8px 12px; font-size: 19px; }
.tr-opcoes .opcao-emoji { font-size: 32px; width: 44px; }
.tr-pergunta-sabi { width: min(110px, 30vw); }
.tr-mini-regioes { width: min(140px, 38vw); }
.tr-opcoes-desenho { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-opcao-desenho {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 24px;
  background: var(--branco); box-shadow: var(--sombra); border: 4px solid transparent;
}
.tr-opcao-desenho > span { width: min(130px, 34vw); }
.tr-opcao-desenho.opcao-certa { border-color: #22c55e; background: #dcfce7; }
.tr-opcao-desenho.opcao-errada { border-color: #ef4444; background: #fee2e2; animation: treme .12s 4; }
.tr-nome-escondido { font-size: 17px; font-weight: 900; visibility: hidden; }
.tr-nome-escondido.tr-revela { visibility: visible; }
.tr-opcao-regiao { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--cor); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--tinta); }

.tr-mapa-regioes { display: block; width: 100%; height: auto; overflow: visible; }
.tr-regiao polygon { fill: var(--clara); stroke: #fff; stroke-width: 3; stroke-linejoin: round; transition: fill .2s; }
.tr-regiao text { font-size: 15px; font-weight: 900; fill: var(--cor); stroke: #fff; stroke-width: 4px; paint-order: stroke; pointer-events: none; font-family: var(--letra); }
.tr-regiao[role="button"] { cursor: pointer; outline: none; }
.tr-regiao[role="button"]:active polygon { fill: var(--cor); }
.tr-regiao-escolhida polygon { fill: var(--cor); }
.tr-regiao-escolhida text { fill: #fff; stroke: var(--tinta); }
.tr-pisca polygon { animation: tr-pisca-regiao .7s ease-out; }
@keyframes tr-pisca-regiao { 30% { fill: var(--cor); } }
.tr-mini-enfeite { pointer-events: none; }
.tr-mapa-pequeno .tr-regiao text { font-size: 18px; }

.tr-ligar { display: flex; align-items: flex-start; gap: 8px; }
.tr-ligar-mapa { flex: 1 1 63%; min-width: 0; max-width: 380px; padding: 4px; border-radius: 20px; background: rgba(255, 255, 255, .9); box-shadow: var(--sombra); }
.tr-ligar-mapa .tr-regiao text { font-size: 20px; }
.tr-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tr-ligar .tr-cartas { flex: 1 1 37%; min-width: 0; grid-template-columns: 1fr; gap: 6px; }
.tr-ligar .tr-carta-ligar { flex-direction: row; text-align: left; padding: 4px 6px; gap: 6px; border-width: 3px; }
.tr-ligar .tr-carta-arte { width: 30px; flex: none; }
.tr-ligar .tr-carta-ligar strong { font-size: 13px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-ligar .tr-carta-ligar .tr-carta-regiao { display: none; }
.tr-ligar .tr-carta-ligar.tr-ligada { box-shadow: inset 8px 0 0 var(--cor), 0 4px 0 rgba(42, 26, 94, .2); }
.tr-carta-ligar {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 18px; text-align: center;
  background: var(--branco); box-shadow: 0 4px 0 rgba(42, 26, 94, .2); border: 4px solid transparent;
}
.tr-carta-ligar strong { font-size: 16px; line-height: 1.15; }
.tr-carta-regiao { font-size: 13px; font-weight: 900; color: var(--cor, var(--tinta)); min-height: 16px; }
.tr-carta-arte { width: 52px; }
.tr-carta-ligar.tr-escolhida { border-color: #a855f7; transform: scale(1.04); box-shadow: 0 0 0 3px #e9d5ff, 0 4px 0 rgba(42, 26, 94, .2); }
.tr-carta-ligar.tr-ligada { border-color: var(--cor); background: #f0fdf4; opacity: 1; }
.tr-recado-ligar { font-size: 17px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Brincadeiras de antigamente ---------- */
.tr-pronto { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; border-radius: 28px; background: var(--branco); box-shadow: var(--sombra); text-align: center; }
.tr-pronto h2 { margin: 0; font-size: 28px; }
.tr-pronto-arte { width: 120px; }
.tr-pronto .tr-mao { align-self: stretch; }
.tr-palco-pipa, .tr-palco-peteca { aspect-ratio: .82 / 1; max-width: calc(58vh * .82); }
.tr-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.tr-palco-peteca { background: linear-gradient(#bae6fd, #fef3c7 80%, #86efac 80%); }
.tr-zona { position: absolute; left: 0; right: 0; background: rgba(34, 197, 94, .16); border-top: 3px dashed rgba(21, 128, 61, .6); border-bottom: 3px dashed rgba(21, 128, 61, .6); pointer-events: none; transition: background .1s; }
.tr-zona span { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 44px; }
.tr-zona-agora { background: rgba(250, 204, 21, .45); }
.tr-peteca-voa { position: absolute; width: 18%; max-width: 74px; pointer-events: none; }
.tr-peteca-voa svg { display: block; width: 100%; }
.tr-bate svg { animation: tr-bate .25s ease-out; }
@keyframes tr-bate { 50% { transform: scale(1.25); } }
.tr-palco-amarelinha { aspect-ratio: auto; max-width: 420px; padding: 8px 8px 8px; background: linear-gradient(#a8a29e, #d6d3d1); display: flex; flex-direction: column; gap: 10px; }
.tr-amarelinha { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tr-linha-casas { display: flex; gap: 5px; }
.tr-casa {
  position: relative; width: min(70px, 19vw); height: min(42px, 5.6vh); border-radius: 8px; background: #fff; border: 4px solid #facc15;
  font-size: 24px; font-weight: 900; box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.tr-casa.tr-ceu { width: min(150px, 42vw); border-radius: 60px 60px 10px 10px; background: #dbeafe; border-color: #60a5fa; font-size: 20px; }
.tr-casa.tr-pisada { background: #bbf7d0; border-color: #22c55e; }
.tr-casa.tr-pisada::after { content: "👣"; position: absolute; right: 2px; top: -2px; font-size: 16px; }
.tr-casa.tr-pedra { background: #e7e5e4; color: #78716c; }
.tr-casa.tr-pedra::after { content: "🪨"; position: absolute; right: 2px; top: 2px; font-size: 20px; }
.tr-casa.tr-errada { background: #fee2e2; border-color: #ef4444; animation: treme .12s 4; }
.tr-casa.tr-casa-dica { box-shadow: 0 0 0 5px #22c55e; background: #dcfce7; }
.tr-recado-amarelinha { font-size: 17px; min-height: 0; }

/* ---------- Quem exporta o quê? ---------- */
.tr-mundi {
  position: relative; width: 100%; aspect-ratio: 1.55 / 1; max-height: 46vh; overflow: hidden; border-radius: 20px;
  background: #7cc4f5; box-shadow: var(--sombra); touch-action: none; -webkit-user-select: none; user-select: none; border: 4px solid #fff;
}
.tr-mundi-svg { display: block; width: 100%; height: 100%; touch-action: none; }
.tr-mar { fill: #7cc4f5; }
.tr-continente { fill: #a7e3a1; stroke: #2f855a; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tr-equador, .tr-tropico { stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 6 5; }
.tr-tropico { stroke: rgba(255, 255, 255, .45); }
.tr-ponto circle { fill: #fff; stroke: var(--tinta); }
.tr-ponto text { fill: var(--tinta); font-weight: 900; text-anchor: middle; stroke: #fff; paint-order: stroke; font-family: var(--letra); pointer-events: none; }
.tr-ponto-alvo circle { fill: #f59e0b; animation: tr-ponto-pisca .8s ease-in-out infinite; }
.tr-ponto-certo circle { fill: #22c55e; }
.tr-ponto-errado circle { fill: #ef4444; }
.tr-ponto-escolhido circle { fill: #a855f7; }
@keyframes tr-ponto-pisca { 50% { fill: #fde047; } }
.tr-mundi-nada { animation: tr-mundi-nada .3s; }
@keyframes tr-mundi-nada { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.tr-lupas { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 6px; }
.tr-lupa {
  position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 3px 0 rgba(42, 26, 94, .3);
  font-size: 19px; display: grid; place-items: center;
}
.tr-lupa b { position: absolute; right: 4px; bottom: 2px; font-size: 18px; font-weight: 900; color: var(--roxo-escuro); }
.tr-lupa:active { transform: scale(.92); }
.tr-pergunta-baixa { padding: 12px 14px; }
.tr-pergunta-baixa p { font-size: clamp(18px, 5.4vw, 23px); }
.tr-produto-grande { font-size: 50px; line-height: 1.05; }
.tr-produto-medio { font-size: 36px; line-height: 1.1; }
.tr-cartas-produto { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.tr-opcoes-produto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-opcao-produto { flex-direction: column; justify-content: center; gap: 2px; min-height: 96px; padding: 8px 4px; text-align: center; font-size: 15px; line-height: 1.15; }
.tr-dica-zoom { margin: 0; text-align: center; color: var(--branco); font-size: 15px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* ---------- Mercado do mundo ---------- */
.tr-opcao-pais { font-size: 34px; line-height: 90px; }
.tr-saldo-total { font-size: 17px; font-weight: 900; }
.tr-positivo { color: #15803d; }
.tr-negativo { color: #b91c1c; }
.tr-evento {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; background: var(--branco); box-shadow: var(--sombra);
  border-left: 10px solid #6366f1; text-align: left;
}
.tr-evento-emoji { font-size: 38px; line-height: 1; }
.tr-evento > span:last-child { display: flex; flex-direction: column; }
.tr-evento strong { font-size: 20px; }
.tr-evento small { font-size: 16px; line-height: 1.3; }
.tr-mercado { display: flex; flex-direction: column; gap: 10px; }
.tr-produto { padding: 10px 12px; border-radius: 20px; background: var(--branco); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.tr-produto-nome { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.tr-produto-emoji { font-size: 28px; }
.tr-mais, .tr-menos { padding: 1px 8px; border-radius: 999px; font-weight: 900; font-size: 13px; }
.tr-mais { background: #dcfce7; color: #15803d; }
.tr-menos { background: #fee2e2; color: #b91c1c; }
.tr-precos { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tr-preco { padding: 2px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 800; background: #f1f5f9; }
.tr-preco-1 { background: #ede9fe; }
.tr-preco-2 { background: #fef3c7; }
.tr-lotes { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-lote { width: 54px; height: 54px; border-radius: 14px; font-size: 28px; background: #f1f5f9; border: 3px solid #cbd5e1; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.tr-lote-1 { background: #ede9fe; border-color: #8b5cf6; }
.tr-lote-2 { background: #fef3c7; border-color: #f59e0b; }
.tr-lote:active { transform: translateY(2px); }
.tr-linha-fabrica { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .9); font-weight: 700; }
.tr-fabrica { font-size: 18px; font-weight: 900; }
.tr-fabrica.tr-cheia { color: #7c3aed; }
.tr-linha-fabrica small { font-size: 14px; }
.tr-maquina { padding: 10px 14px; border-radius: 16px; background: #fff7ed; border: 3px dashed #fb923c; font-size: 16px; font-weight: 800; text-align: left; }
.tr-maquina.tr-escolhida { background: #dcfce7; border: 3px solid #22c55e; }
.tr-previa { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 10px 12px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra); font-size: 16px; font-weight: 700; }
.tr-previa b { font-size: 18px; }
.tr-mercado ~ .tr-previa { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 0 0 3px #c4b5fd, var(--sombra); }
.tr-previa-grande { box-shadow: none; background: #f8fafc; font-size: 18px; }
.tr-resultado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; border-radius: 28px; background: var(--branco); box-shadow: var(--sombra); text-align: center; }
.tr-resultado h2, .tr-resultado h3 { margin: 0; }
.tr-resultado h2 { font-size: 26px; }
.tr-resultado .tr-explica { background: #f8fafc; }
.tr-grafico { display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 100%; max-width: 360px; height: 120px; padding: 4px; border-bottom: 3px solid var(--tinta); }
.tr-coluna { flex: 1; max-width: 40px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.tr-coluna i { display: block; width: 100%; height: var(--alto); min-height: 4px; border-radius: 6px 6px 0 0; background: #22c55e; }
.tr-coluna.tr-negativo i { background: repeating-linear-gradient(45deg, #ef4444 0 6px, #f87171 6px 12px); }
.tr-coluna small { font-size: 12px; font-weight: 800; color: var(--tinta); }

/* ---------- peças do passe v5: o que foi praticado, a dica do controle, o porquê do erro ---------- */
.tr-praticou {
  padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--tinta);
  font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: var(--sombra);
}
.tr-dica-controle { margin: 0; text-align: center; color: var(--branco); font-size: 15px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.abertura ~ div .tr-dica-controle, .tr-copa-gestos .tr-dica-controle { margin-top: 6px; }
.tr-campo-recado .tr-recado-porque { display: block; margin-top: 4px; font-size: clamp(14px, 3.8vw, 17px); font-weight: 800; opacity: .9; color: var(--tinta); line-height: 1.25; }
.tr-aprende .tr-aprende-erro { color: #b91c1c; opacity: 1; font-weight: 800; }
.tr-recado-pipa { top: 22%; }

/* ---------- a mira do pênalti (controle e teclado) ---------- */
.tr-mira {
  position: absolute; z-index: 4; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 50%; border: 4px solid #fde047; box-shadow: 0 0 0 3px rgba(42, 26, 94, .55), inset 0 0 0 3px rgba(42, 26, 94, .35);
  display: none;
}
.tr-mira i { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: #fde047; }
.tr-com-mira .tr-mira { display: block; animation: tr-mira 1s ease-in-out infinite; }
@keyframes tr-mira { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.tr-goleiro-chefe { width: 24%; }

/* ---------- a Copa do Sabi (o mapa de fases do pênalti) ---------- */
.tr-copa-gestos { display: flex; flex-direction: column; gap: 6px; }
.tr-copa-topo {
  display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 24px;
  background: var(--branco); box-shadow: var(--sombra);
}
.tr-copa-sabi { width: 84px; }
.tr-copa-fala { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 16px; line-height: 1.3; }
.tr-copa-fala strong { font-size: 22px; }
.tr-copa-fala small { font-size: 14px; font-weight: 800; color: #7c2d12; }
.tr-copa-mini { display: none; }
.tr-copa-brasil .tr-regiao polygon { stroke-width: 4; }
.tr-copa-brasil .tr-copa-vencida polygon { fill: var(--cor); opacity: .55; }
.tr-copa-brasil .tr-regiao-escolhida polygon { fill: var(--cor); opacity: 1; animation: tr-copa-pisca 1.2s ease-in-out infinite; }
@keyframes tr-copa-pisca { 50% { opacity: .6; } }
.tr-copa-trilha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: fase; }
.tr-copa-fase {
  position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 8px;
  min-height: 92px; padding: 10px 10px 8px; border-radius: 20px; text-align: left; color: var(--tinta);
  background: var(--branco); border: 4px solid var(--clara); box-shadow: 0 5px 0 var(--cor), var(--sombra);
}
.tr-copa-fase:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--cor); }
.tr-copa-fase:disabled { opacity: .55; filter: grayscale(.6); box-shadow: 0 4px 0 rgba(42, 26, 94, .2); }
.tr-copa-bola {
  grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  background: var(--clara); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08);
}
.tr-copa-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tr-copa-texto strong { font-size: 17px; }
.tr-copa-texto small { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.tr-copa-rival-nome { color: var(--cor); font-weight: 900 !important; filter: brightness(.75); }
.tr-copa-estrelas { grid-column: 2; font-size: 20px; letter-spacing: 1px; color: #f59e0b; line-height: 1; }
.tr-copa-chefao { background: linear-gradient(160deg, #fffbeb, #fff 60%); border-color: #f59e0b; }
.tr-copa-chefao .tr-copa-bola { background: #fde68a; box-shadow: 0 0 0 4px #f59e0b; }
.tr-copa-bola { position: relative; }
.tr-copa-feita .tr-copa-bola::after { content: "✔"; position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.tr-copa-atual { border-color: var(--cor); box-shadow: 0 0 0 4px #fde047, 0 5px 0 var(--cor), var(--sombra); animation: tr-copa-atual 1.6s ease-in-out infinite; }
@keyframes tr-copa-atual { 50% { transform: translateY(-3px); } }
.tr-copa-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.tr-copa-botoes .botao-grande { flex: 1 1 100%; }

/* Antes da fase: o Sabi contra o goleiro. */
.tr-copa-vs {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; border-radius: 28px; text-align: center;
  background: linear-gradient(var(--clara), #fff 45%); box-shadow: var(--sombra); border: 4px solid var(--cor);
}
.tr-copa-vs h2 { margin: 0; font-size: clamp(22px, 6vw, 30px); }
.tr-copa-vs-fase { margin: 0; padding: 3px 14px; border-radius: 999px; background: var(--cor); color: #fff; font-weight: 900; font-size: 15px; }
.tr-copa-vs-linha { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.tr-copa-vs-sabi { width: min(120px, 30vw); }
.tr-copa-vs-x { font-size: 40px; color: var(--cor); }
.tr-copa-vs-rival { position: relative; display: flex; flex-direction: column; align-items: center; width: min(110px, 28vw); }
.tr-copa-vs-goleiro { display: block; width: 100%; }
.tr-copa-vs-goleiro svg { display: block; width: 100%; }
.tr-copa-vs-emoji { position: absolute; right: -8px; top: -6px; font-size: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.tr-copa-vs-rival b { font-size: 17px; }
.tr-copa-vs-fala { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.tr-copa-meta { margin: 0; padding: 6px 14px; border-radius: 14px; background: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 0 0 3px var(--clara); }
.tr-copa-aviso { margin: 0; padding: 6px 12px; border-radius: 14px; background: #fef3c7; color: #78350f; font-size: 16px; font-weight: 800; }
.tr-copa-vs .tr-conceito { align-self: stretch; }
.tr-copa-vs-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.tr-copa-hud {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .94); border-left: 8px solid var(--cor); font-size: 16px; font-weight: 800;
}
.tr-copa-resultado {
  padding: 10px 14px; border-radius: 16px; background: #fff7ed; border-left: 8px solid #f97316; color: var(--tinta);
  font-size: 17px; font-weight: 800; line-height: 1.35; text-align: left;
}
.tr-copa-resultado.tr-copa-ganhou { background: #f0fdf4; border-left-color: #22c55e; }

/* Tela larga (tablet deitado e TV): o mapa do Brasil aparece, e as fases ficam em quatro colunas. */
@media (min-width: 760px) {
  .tr-copa-topo { grid-template-columns: 100px 1fr 150px; }
  .tr-copa-sabi { width: 100px; }
  .tr-copa-mini { display: block; width: 150px; }
  .tr-copa-trilha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-copa-botoes .botao-grande { flex: 0 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-varal-item, .tr-dancante, .tr-mao-dedo, .tr-mao-rastro, .tr-sol, .tr-balanca .tr-goleiro-svg, .tr-mao-campo,
  .tr-com-mira .tr-mira, .tr-copa-atual, .tr-copa-brasil .tr-regiao-escolhida polygon { animation: none !important; }
}