/* Cozy Fishing — kit de UI (playables-ui, T1/T2). Ficha de identidade (anti-ia.md):
   material:  tábua do píer com veio e prego, papel kraft de peixaria, barbante e a lona listrada do toldo
   forma:     etiqueta de preço de feira (canto cortado + furo com barbante) e recorte em meia-lua do toldo
   letreiro:  placa pintada à mão (Shrikhand, inclinada) nos títulos e números; Grandstander no texto
   personagem: retrato da pescadora/pescador (arte-conceito) falando no tutorial e nos painéis
   paleta:    madeira #B07E58, creme #FFF8EC, coral #EE836A, água #7FD1D9, denim #4F7FB5, texto #3A3340, ouro #F7C443
   narrativo: a meta é um pedido preso por pregador; a profundidade é uma régua com boia; o baú é um caixote que enche de água */
:root {
	--u: clamp(1px, min(100vw, 100vh) / 540, 1.7px); /* 1 px até ~540 px no menor lado; cresce devagar em tela grande */
	--madeira: #B07E58; --madeira-esc: #875C40; --madeira-clara: #D2A27A; --contorno: #4A2E22;
	--creme: #FFF8EC; --papel: #F6E9D2; --kraft: #E3C99E;
	--coral: #EE836A; --coral-esc: #B8503B; --agua: #7FD1D9; --agua-esc: #3F72A0; --denim: #4F7FB5;
	--texto: #3A3340; --texto-suave: #6B5560; --ouro: #F7C443; --ouro-esc: #C98A12; --verde: #6FA65F; --verde-esc: #3F6E37;
	--titulo: "Shrikhand", "Grandstander", system-ui, sans-serif;
	--corpo: "Grandstander", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe9f5; font-family: var(--corpo); color: var(--texto); user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; touch-action: none; }
#tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; border: 0; background: none; padding: 0; }
button:focus-visible { outline: calc(3 * var(--u)) solid var(--ouro); outline-offset: calc(3 * var(--u)); }
.num { font-family: var(--titulo); font-variant-numeric: tabular-nums; }

/* ---------- madeira, papel e etiqueta (materiais do mundo) ---------- */
.madeira-tex {
	background:
		repeating-linear-gradient(176deg, rgba(74, 46, 34, .10) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(9 * var(--u))),
		repeating-linear-gradient(90deg, transparent 0 calc(38 * var(--u)), rgba(74, 46, 34, .22) calc(38 * var(--u)) calc(40 * var(--u))),
		var(--madeira);
}

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) max(calc(10 * var(--u)), env(safe-area-inset-right)) 0 max(calc(10 * var(--u)), env(safe-area-inset-left)); display: flex; align-items: flex-start; gap: calc(8 * var(--u)); pointer-events: none; }
#hud > * { pointer-events: auto; }

/* pedido: papel creme com furos, preso por pregador, levemente torto */
.pedido { position: relative; flex: 0 1 calc(230 * var(--u)); min-height: calc(62 * var(--u)); padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u)); background:
	radial-gradient(circle at calc(7 * var(--u)) 50%, rgba(74,46,34,.18) calc(2.5 * var(--u)), transparent calc(3 * var(--u))) 0 0 / 100% calc(14 * var(--u)) repeat-y,
	linear-gradient(transparent 92%, rgba(127, 209, 217, .35) 92%) 0 0 / 100% calc(16 * var(--u)),
	var(--creme);
	border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); transform: rotate(-1.5deg); box-shadow: calc(2 * var(--u)) calc(4 * var(--u)) 0 rgba(74, 46, 34, .35); }
.pregador { position: absolute; top: calc(-11 * var(--u)); left: calc(36 * var(--u)); width: calc(14 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(4 * var(--u)); background: linear-gradient(90deg, var(--madeira-clara) 0 46%, var(--madeira-esc) 46% 54%, var(--madeira-clara) 54%); border: calc(2 * var(--u)) solid var(--contorno); transform: rotate(8deg); }
.aba { position: absolute; top: calc(-10 * var(--u)); right: calc(10 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)); font: calc(12 * var(--u)) var(--titulo); color: var(--creme); background: var(--coral); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); transform: rotate(3deg); letter-spacing: .02em; }
#meta-texto { font-weight: 800; font-size: calc(15 * var(--u)); line-height: 1.15; }
#meta-texto .num { font-size: calc(17 * var(--u)); color: var(--coral-esc); margin-left: calc(4 * var(--u)); }
.linha-prog { position: relative; height: calc(8 * var(--u)); margin-top: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: repeating-linear-gradient(90deg, #E7DBC4 0 calc(6 * var(--u)), #DDCFB3 calc(6 * var(--u)) calc(12 * var(--u))); border: calc(1.5 * var(--u)) solid var(--contorno); overflow: visible; }
#meta-enche { height: 100%; width: 0; border-radius: calc(3 * var(--u)); background: repeating-linear-gradient(115deg, var(--agua) 0 calc(5 * var(--u)), #A8E4E6 calc(5 * var(--u)) calc(10 * var(--u))); transition: width .3s cubic-bezier(.2, 1.4, .4, 1); }
#meta-boia { position: absolute; top: 50%; left: 0; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: calc(-7 * var(--u)) 0 0 calc(-7 * var(--u)); border-radius: 50%; background: linear-gradient(var(--coral) 0 50%, var(--creme) 50%); border: calc(2 * var(--u)) solid var(--contorno); transition: left .3s cubic-bezier(.2, 1.4, .4, 1); }
#meta.feita { animation: carimbo .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes carimbo { 0% { transform: rotate(-1.5deg); } 35% { transform: rotate(2deg) scale(1.08); background-color: #FFF1C8; } 100% { transform: rotate(-1.5deg); } }

/* pausa: boia salva-vidas (longe dos cantos do YouTube) */
.btn-boia { margin: 0 auto; width: calc(52 * var(--u)); height: calc(52 * var(--u)); min-width: 48px; min-height: 48px; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .45)); }
.btn-boia svg { width: 100%; height: 100%; }
.boia-aro { fill: var(--creme); stroke: var(--contorno); stroke-width: 2.4; }
.boia-faixa { fill: var(--coral); stroke: var(--contorno); stroke-width: 1.4; }
.boia-miolo { fill: #CFEFFF; stroke: var(--contorno); stroke-width: 2.2; }
.boia-icone { fill: var(--texto); }
.btn-boia:active, .btn-caixote:active, .btn-tabua:active, .btn:active { transform: translateY(calc(3 * var(--u))) scale(.96); filter: none; }

.hud-dir { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); }
/* moedas: tabuinha com a moeda saindo pela esquerda */
.placa-moedas { position: relative; display: flex; align-items: center; min-width: calc(108 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(34 * var(--u)); margin-left: calc(18 * var(--u)); border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(74, 46, 34, .3), 0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .45); transform: rotate(1.2deg); }
.placa-moedas { background: repeating-linear-gradient(176deg, rgba(74, 46, 34, .12) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(8 * var(--u))), var(--madeira); }
.placa-moedas b { margin-left: auto; font: calc(22 * var(--u)) var(--titulo); font-variant-numeric: tabular-nums; color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; line-height: 1; }
.moeda { position: absolute; left: calc(-18 * var(--u)); top: 50%; width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin-top: calc(-21 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFE9A8 0 18%, transparent 19%), radial-gradient(circle at 50% 50%, var(--ouro) 0 52%, var(--ouro-esc) 53% 62%, var(--ouro) 63%); border: calc(2.5 * var(--u)) solid var(--contorno); }
.moeda::after { content: ""; position: absolute; inset: 32% 26%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--ouro-esc); clip-path: polygon(0 50%, 70% 0, 70% 30%, 100% 10%, 100% 90%, 70% 70%, 70% 100%); opacity: .85; }
#moedas.pula { animation: pula .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pula { 40% { transform: rotate(1.2deg) scale(1.12); } }

.linha-botoes { display: flex; gap: calc(8 * var(--u)); }
/* botões quadrados: caixote de madeira */
.btn-caixote { position: relative; width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 48px; min-height: 48px; border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)); background: repeating-linear-gradient(0deg, transparent 0 calc(13 * var(--u)), rgba(74, 46, 34, .3) calc(13 * var(--u)) calc(15 * var(--u))), var(--madeira-clara); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(74, 46, 34, .3), 0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .45); display: grid; place-items: center; }
.btn-caixote svg { width: 86%; height: 86%; }
.interroga { font: calc(26 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; transform: rotate(-6deg); }
.caixa-fundo { fill: #8C6A50; } .caixa-agua { fill: var(--agua); transition: y .3s, height .3s; } .caixa-ripa { stroke: #6B4A38; stroke-width: 2; }
.caixa-borda { fill: none; stroke: var(--contorno); stroke-width: 2.4; } .caixa-tampa { fill: var(--madeira); stroke: var(--contorno); stroke-width: 2.2; stroke-linejoin: round; }
#btn-mare.cheio { background-color: var(--ouro); animation: balanca 1.1s ease-in-out infinite; }
@keyframes balanca { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(calc(-2 * var(--u))); } }
.barco-casco { fill: var(--coral); stroke: var(--contorno); stroke-width: 2.2; stroke-linejoin: round; } .barco-mastro { fill: var(--contorno); }
.barco-vela { fill: var(--creme); stroke: var(--contorno); stroke-width: 2; stroke-linejoin: round; } .barco-vela2 { fill: var(--agua); stroke: var(--contorno); stroke-width: 2; stroke-linejoin: round; }
.pulsa { animation: balanca 1.2s ease-in-out infinite; }

/* plaquinha do período e etiqueta do Peixe da Hora */
.plaquinha { display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); color: var(--creme); background: var(--agua-esc); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(12 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); transform: rotate(-2deg); }
#ico-periodo { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--contorno); background: var(--ouro); }
#ico-periodo.noite { background: radial-gradient(circle at 70% 35%, var(--agua-esc) 0 42%, transparent 43%), #F3EBC8; }
#ico-periodo.entardecer { background: linear-gradient(var(--coral) 0 55%, var(--agua-esc) 55%); }
.etiqueta { position: relative; white-space: nowrap; padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); background: var(--kraft); border: calc(2 * var(--u)) solid var(--contorno); clip-path: polygon(calc(12 * var(--u)) 0, 100% 0, 100% 100%, calc(12 * var(--u)) 100%, 0 50%); transform: rotate(2deg); }
.etiqueta .furo { position: absolute; left: calc(9 * var(--u)); top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-3 * var(--u)); border-radius: 50%; background: var(--contorno); }
.etiqueta b { color: var(--coral-esc); font-family: var(--titulo); font-weight: 400; }
.concha { padding: calc(4 * var(--u)) calc(12 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); color: var(--texto); background: radial-gradient(ellipse at 50% 120%, #FFF1E6 0 40%, #F7C9B9 41% 100%); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); }

/* régua de profundidade: corda com boia que desce; peixes do molinete como ganchos */
#leitura { position: absolute; top: calc(110 * var(--u)); bottom: calc(90 * var(--u)); right: max(calc(10 * var(--u)), env(safe-area-inset-right)); width: calc(64 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); pointer-events: none; }
.regua { position: relative; flex: 1; width: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid var(--contorno); background: repeating-linear-gradient(180deg, var(--creme) 0 calc(10 * var(--u)), var(--coral) calc(10 * var(--u)) calc(20 * var(--u))); }
#regua-boia { position: absolute; left: 50%; top: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: calc(-11 * var(--u)) 0 0 calc(-11 * var(--u)); border-radius: 50%; background: linear-gradient(var(--coral) 0 50%, var(--creme) 50%); border: calc(2.5 * var(--u)) solid var(--contorno); }
#regua-fundo { position: absolute; left: 50%; bottom: calc(-6 * var(--u)); width: calc(26 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(-13 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--madeira-esc); border: calc(2 * var(--u)) solid var(--contorno); }
#leitura-prof { font: calc(18 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; white-space: nowrap; }
#leitura-pegos { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.pego { width: calc(30 * var(--u)); height: calc(16 * var(--u)); border-radius: 50% 40% 40% 50%; border: calc(2 * var(--u)) dashed rgba(255, 248, 236, .8); }
.pego.cheio { border: calc(2 * var(--u)) solid var(--contorno); background: var(--agua); clip-path: polygon(0 50%, 22% 0, 100% 15%, 100% 85%, 22% 100%); }

/* botões grandes: tábua de madeira (ação embaixo) */
.btn-tabua { position: absolute; bottom: max(calc(14 * var(--u)), env(safe-area-inset-bottom)); display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: 52px; height: calc(54 * var(--u)); padding: 0 calc(18 * var(--u)); font: calc(19 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill;
	border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
	background: repeating-linear-gradient(176deg, rgba(74, 46, 34, .14) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(9 * var(--u))), linear-gradient(rgba(255, 255, 255, .22) 0 30%, transparent 30%), var(--madeira);
	box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(74, 46, 34, .35), 0 calc(4 * var(--u)) 0 var(--contorno); }
.btn-tabua svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); stroke: var(--contorno); stroke-width: 4.4; fill: none; stroke-linecap: round; }
.btn-tabua svg path { stroke: var(--contorno); }
.btn-tabua.coral { background: repeating-linear-gradient(90deg, var(--coral) 0 calc(18 * var(--u)), #F7B19B calc(18 * var(--u)) calc(36 * var(--u))); }
#btn-oficina { left: max(calc(12 * var(--u)), env(safe-area-inset-left)); transform: rotate(-2deg); }
#btn-trocar { right: max(calc(12 * var(--u)), env(safe-area-inset-right)); transform: rotate(1.5deg); }

/* avisos da loja: etiquetas pequenas no canto de baixo, acima do botão Loja/Píer (sozinhas no canto quando ele some) */
#avisos-loja { position: absolute; right: max(calc(6 * var(--u)), env(safe-area-inset-right)); bottom: calc(68 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; z-index: 4; }
#avisos-loja.baixo { bottom: max(calc(6 * var(--u)), env(safe-area-inset-bottom)); }
#avisos-loja.mudo { pointer-events: none; }
/* o botão tem 48 px de alvo; a etiqueta visível é menor */
.aviso-loja { display: flex; align-items: center; justify-content: flex-end; min-width: 48px; min-height: 48px; padding: 0 calc(6 * var(--u)); background: none; border: 0; font: inherit; cursor: pointer; }
.aviso-loja span { display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); font: calc(13 * var(--u)) var(--titulo); color: var(--texto); background: var(--creme); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u)); box-shadow: 0 calc(2 * var(--u)) 0 rgba(74, 46, 34, .35); white-space: nowrap; }
.aviso-loja span::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--texto-suave); border: calc(1.5 * var(--u)) solid var(--contorno); }
.aviso-loja.cobrar span { color: var(--coral-esc); transform: rotate(-1.5deg); animation: balanca 1.2s ease-in-out infinite; }
.aviso-loja.cobrar span::before { background: var(--coral); }
.aviso-loja.vazia span { transform: rotate(1deg); }
.aviso-loja:active span { transform: scale(.94); }

/* ---------- rótulos e balões presos ao mundo ---------- */
#rotulos, #flutuantes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rotulo { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 800; font-size: calc(13 * var(--u)); }
.rotulo.placa { padding: calc(2 * var(--u)) calc(8 * var(--u)); color: var(--creme); background: var(--agua-esc); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(5 * var(--u)); }
.rotulo.nome { padding: calc(1 * var(--u)) calc(7 * var(--u)); color: var(--texto); background: var(--creme); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(4 * var(--u)); font-size: calc(12 * var(--u)); }
.rotulo.preco { padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); background: var(--kraft); border: calc(2 * var(--u)) solid var(--contorno); clip-path: polygon(calc(12 * var(--u)) 0, 100% 0, 100% 100%, calc(12 * var(--u)) 100%, 0 50%); font-family: var(--titulo); font-weight: 400; font-size: calc(15 * var(--u)); color: var(--texto); }
.rotulo.preco::before { content: ""; position: absolute; left: calc(8 * var(--u)); top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-3 * var(--u)); border-radius: 50%; background: var(--contorno); }
.rotulo.preco.falta { background: #E7DED0; color: var(--texto-suave); }
.rotulo.balao { padding: calc(4 * var(--u)) calc(10 * var(--u)); background: var(--creme); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)); font-family: var(--titulo); font-weight: 400; color: var(--coral-esc); animation: balanca 1.2s ease-in-out infinite; }
.flut { position: absolute; transform: translate(-50%, -50%); font: calc(19 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; animation: sobe 1s ease-out forwards; white-space: nowrap; }
.flut.grande { font-size: calc(28 * var(--u)); color: var(--ouro); }
.flut.aviso { font: 800 calc(15 * var(--u)) var(--corpo); color: var(--texto); -webkit-text-stroke: 0; padding: calc(4 * var(--u)) calc(10 * var(--u)); background: var(--creme); border: calc(2 * var(--u)) solid var(--coral-esc); border-radius: calc(6 * var(--u)); animation: avisa 1.6s ease-out forwards; }
@keyframes sobe { to { transform: translate(-50%, -160%); opacity: 0; } }
@keyframes avisa { 0% { transform: translate(-50%, -30%) scale(.8); } 12% { transform: translate(-50%, -50%) scale(1.06); } 20%, 80% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(-50%, -80%); opacity: 0; } }
.moeda-voa { position: absolute; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFE9A8 0 20%, var(--ouro) 21%); border: calc(2 * var(--u)) solid var(--contorno); }

/* ---------- tutorial: dedo, alvo e a protagonista falando ---------- */
#mao { position: absolute; pointer-events: none; transform: translate(-30%, -10%); animation: toca 1.1s ease-in-out infinite; z-index: 4; }
#mao .dedo { fill: var(--creme); stroke: var(--contorno); stroke-width: 2.6; stroke-linejoin: round; }
#mao.arrasta { animation: arrasta 1.6s ease-in-out infinite; }
@keyframes toca { 50% { transform: translate(-30%, -10%) scale(.82); } }
@keyframes arrasta { 0%, 100% { transform: translate(-130%, -10%); } 50% { transform: translate(60%, -10%); } }
#alvo { position: absolute; width: calc(76 * var(--u)); height: calc(76 * var(--u)); margin: calc(-38 * var(--u)) 0 0 calc(-38 * var(--u)); border-radius: 50%; border: calc(4 * var(--u)) dashed var(--ouro); box-shadow: 0 0 0 calc(3 * var(--u)) var(--contorno); pointer-events: none; animation: gira 6s linear infinite; z-index: 3; }
@keyframes gira { to { transform: rotate(360deg); } }
#dica { position: absolute; left: max(calc(10 * var(--u)), env(safe-area-inset-left)); bottom: calc(84 * var(--u)); display: flex; align-items: flex-end; gap: calc(4 * var(--u)); max-width: min(calc(330 * var(--u)), 92vw); pointer-events: none; animation: entra .35s cubic-bezier(.2, 1.5, .4, 1); z-index: 5; }
#dica-retrato { width: calc(70 * var(--u)); height: calc(70 * var(--u)); flex: none; border-radius: 50%; background: var(--agua); border: calc(3 * var(--u)) solid var(--contorno); object-fit: cover; box-shadow: 0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .45); }
.balao { position: relative; margin-bottom: calc(22 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); background: var(--creme); border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)); box-shadow: 0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .35); }
.balao::before { content: ""; position: absolute; left: calc(-11 * var(--u)); bottom: calc(6 * var(--u)); width: calc(14 * var(--u)); height: calc(12 * var(--u)); background: var(--creme); border-left: calc(2.5 * var(--u)) solid var(--contorno); border-bottom: calc(2.5 * var(--u)) solid var(--contorno); transform: skewY(30deg); }
#dica-texto { margin: 0; font-weight: 800; font-size: calc(15 * var(--u)); line-height: 1.2; }
#dica-texto b { color: var(--coral-esc); }
@keyframes entra { from { transform: translateY(calc(20 * var(--u))); opacity: 0; } }

/* ---------- painéis: papel creme com o toldo listrado recortado em cima ---------- */
#modal { position: absolute; inset: 0; background: rgba(43, 55, 104, .42); display: grid; place-items: center; padding: calc(16 * var(--u)); z-index: 10; }
#painel { position: relative; width: min(calc(360 * var(--u)), 100%); max-height: 92%; overflow: auto; padding: calc(44 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); text-align: center; background: var(--creme); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); box-shadow: 0 calc(6 * var(--u)) 0 rgba(74, 46, 34, .5); animation: cai .45s cubic-bezier(.2, 1.5, .4, 1); }
#painel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(26 * var(--u)); background: repeating-linear-gradient(90deg, var(--coral) 0 calc(30 * var(--u)), var(--creme) calc(30 * var(--u)) calc(60 * var(--u))); border-bottom: calc(2.5 * var(--u)) solid var(--contorno); -webkit-mask: radial-gradient(circle at calc(15 * var(--u)) calc(26 * var(--u)), transparent calc(9 * var(--u)), #000 calc(9.5 * var(--u))) 0 0 / calc(30 * var(--u)) 100%; mask: radial-gradient(circle at calc(15 * var(--u)) calc(26 * var(--u)), transparent calc(9 * var(--u)), #000 calc(9.5 * var(--u))) 0 0 / calc(30 * var(--u)) 100%; }
@keyframes cai { 0% { transform: translateY(-60%) rotate(-4deg); } 60% { transform: translateY(4%) rotate(1deg); } 100% { transform: none; } }
.titulo-placa { display: inline-block; margin: 0 0 calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)); font: calc(24 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(5 * var(--u)) var(--contorno); paint-order: stroke fill; transform: rotate(-2deg); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); background: repeating-linear-gradient(176deg, rgba(74, 46, 34, .14) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(9 * var(--u))), var(--madeira); }
#painel p { margin: calc(6 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.3; }
#painel .grande { display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); margin: calc(8 * var(--u)) 0 calc(14 * var(--u)); font: calc(34 * var(--u)) var(--titulo); color: var(--ouro); -webkit-text-stroke: calc(5 * var(--u)) var(--contorno); paint-order: stroke fill; }
#painel .grande .moeda { position: relative; left: 0; margin: 0; top: 0; }
.retrato-painel { position: absolute; top: calc(-30 * var(--u)); left: calc(-14 * var(--u)); width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; background: var(--agua); border: calc(3 * var(--u)) solid var(--contorno); transform: rotate(-6deg); object-fit: cover; }
.opcoes { display: flex; gap: calc(10 * var(--u)); justify-content: center; flex-wrap: wrap; }
.btn { min-height: 48px; min-width: calc(130 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); font: calc(19 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; background: linear-gradient(rgba(255, 255, 255, .25) 0 34%, transparent 34%), var(--verde); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--verde-esc), 0 calc(4 * var(--u)) 0 var(--contorno); }
.btn.secundario { background: linear-gradient(rgba(255, 255, 255, .25) 0 34%, transparent 34%), var(--madeira-clara); box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--madeira-esc), 0 calc(4 * var(--u)) 0 var(--contorno); }
.btn:disabled { background: #D9CFC0; box-shadow: inset 0 calc(-4 * var(--u)) 0 #BFB3A2, 0 calc(3 * var(--u)) 0 #8C7B6A; color: #F6F0E6; -webkit-text-stroke-color: #8C7B6A; }
.btn .moeda { position: relative; display: inline-block; left: 0; top: 0; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin: 0 calc(4 * var(--u)) 0 0; vertical-align: -12%; border-width: calc(2 * var(--u)); }
.btn .moeda::after { display: none; }
/* linhas da oficina: etiqueta de feira por item */
.upg { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(8 * var(--u)) 0; padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(24 * var(--u)); text-align: left; background: var(--papel); border: calc(2 * var(--u)) solid var(--contorno); clip-path: polygon(calc(14 * var(--u)) 0, 100% 0, 100% 100%, calc(14 * var(--u)) 100%, 0 50%); position: relative; }
.upg:nth-child(odd) { transform: rotate(-.8deg); } .upg:nth-child(even) { transform: rotate(.7deg); }
.upg::before { content: ""; position: absolute; left: calc(9 * var(--u)); top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-3.5 * var(--u)); border-radius: 50%; background: var(--contorno); }
.upg div { flex: 1; }
.upg b { display: block; font-size: calc(17 * var(--u)); font-weight: 800; }
.upg small { color: var(--texto-suave); font-size: calc(14 * var(--u)); font-weight: 600; }
.upg .btn { min-width: calc(100 * var(--u)); font-size: calc(16 * var(--u)); }
.skin { flex: 1 1 calc(130 * var(--u)); min-height: calc(150 * var(--u)); padding: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(12 * var(--u)); background: var(--papel); font: calc(17 * var(--u)) var(--titulo); display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 var(--contorno); }
.skin:nth-child(1) { transform: rotate(-2deg); } .skin:nth-child(2) { transform: rotate(2deg); }
.skin img { width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%; background: var(--agua); border: calc(3 * var(--u)) solid var(--contorno); }
/* cartão de novidade e "como jogar" */
.passos { display: grid; gap: calc(8 * var(--u)); margin: 0 0 calc(14 * var(--u)); text-align: left; }
.passo { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(8 * var(--u)) calc(10 * var(--u)); background: var(--papel); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.2; }
.passo:nth-child(even) { transform: rotate(.8deg); } .passo:nth-child(odd) { transform: rotate(-.6deg); }
.passo i { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: grid; place-items: center; font: normal calc(18 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(3 * var(--u)) var(--contorno); paint-order: stroke fill; background: var(--coral); border: calc(2 * var(--u)) solid var(--contorno); border-radius: 50%; }
.novidade-ico { display: block; width: calc(84 * var(--u)); height: calc(84 * var(--u)); margin: 0 auto calc(6 * var(--u)); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (hover: hover) { .btn:hover, .btn-tabua:hover, .btn-caixote:hover { filter: brightness(1.06); } }

/* retrato estreito (≤ 3:4): o pedido encolhe, a coluna da direita não passa da borda e o Peixe da Hora fica só com o peixe */
@media (max-aspect-ratio: 3/4) {
	.pedido { flex-basis: calc(170 * var(--u)); min-width: 0; padding-right: calc(8 * var(--u)); }
	#meta-texto { font-size: calc(14 * var(--u)); }
	.btn-boia { margin: 0 calc(2 * var(--u)) 0 0; flex: none; }
	.hud-dir { flex: 1 1 0; min-width: 0; }
	.placa-moedas { min-width: calc(86 * var(--u)); margin-left: calc(20 * var(--u)); transform: none; }
	.placa-moedas b { font-size: calc(20 * var(--u)); }
	.etiqueta .rot { display: none; }
	.plaquinha, .etiqueta { transform: none; }
}

/* ---------- progressão longa: escuridão, eventos, VIP, puxada, oficina em abas, aquário ---------- */
#escuro { position: absolute; inset: 0; pointer-events: none; }
.col-esq { display: flex; flex-direction: column; gap: calc(8 * var(--u)); flex: 0 1 calc(230 * var(--u)); min-width: 0; }
.col-esq .pedido { flex: none; }
.etiqueta.vip { align-self: flex-start; margin-left: calc(8 * var(--u)); background: #FFE9A8; font-size: calc(13 * var(--u)); }
.etiqueta.vip b { font-family: var(--titulo); font-weight: 400; color: var(--coral-esc); margin-right: calc(4 * var(--u)); }
.faixa-evento { position: absolute; left: 50%; top: calc(76 * var(--u)); transform: translateX(-50%) rotate(-1.5deg); max-width: 92vw; padding: calc(8 * var(--u)) calc(26 * var(--u)); font: calc(17 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: calc(4 * var(--u)) var(--contorno); paint-order: stroke fill; text-align: center; background: var(--coral); border: calc(3 * var(--u)) solid var(--contorno); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); pointer-events: none; animation: desenrola .5s cubic-bezier(.2, 1.4, .4, 1); z-index: 6; }
.faixa-evento.dourado { background: var(--ouro-esc); } .faixa-evento.vip { background: var(--denim); } .faixa-evento.feira { background: var(--verde); }
@keyframes desenrola { from { clip-path: polygon(48% 0, 52% 0, 52% 50%, 52% 100%, 48% 100%, 48% 50%); } }
#puxada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: max(calc(16 * var(--u)), env(safe-area-inset-right)); pointer-events: none; z-index: 7; }
.pux-painel { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); width: calc(124 * var(--u)); padding: calc(10 * var(--u)); background: var(--creme); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(12 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 rgba(74, 46, 34, .5); }
.pux-painel b { font: calc(15 * var(--u)) var(--titulo); font-weight: 400; text-align: center; color: var(--coral-esc); }
.pux-trilho { position: relative; width: calc(34 * var(--u)); height: calc(220 * var(--u)); border: calc(3 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)); background: linear-gradient(#E39AD8 0 8%, #F6E9D2 8%); overflow: hidden; }
#puxada-faixa { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #8CC084 0 calc(6 * var(--u)), #7FB06F calc(6 * var(--u)) calc(12 * var(--u))); border-top: calc(2 * var(--u)) solid var(--verde-esc); border-bottom: calc(2 * var(--u)) solid var(--verde-esc); }
#puxada-tensao { position: absolute; left: calc(-3 * var(--u)); right: calc(-3 * var(--u)); height: calc(10 * var(--u)); margin-bottom: calc(-5 * var(--u)); background: var(--coral); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(5 * var(--u)); }
.pux-prog { width: 100%; height: calc(12 * var(--u)); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(6 * var(--u)); background: #E7DBC4; overflow: hidden; }
#puxada-prog { display: block; height: 100%; width: 0; background: var(--ouro); }
.pux-painel small { font-weight: 800; font-size: calc(12 * var(--u)); text-align: center; line-height: 1.15; }
.abas { display: flex; gap: calc(6 * var(--u)); justify-content: center; margin: 0 0 calc(10 * var(--u)); }
.aba-btn { min-height: 48px; padding: calc(4 * var(--u)) calc(14 * var(--u)); font: calc(15 * var(--u)) var(--titulo); color: var(--texto); background: var(--papel); border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)); }
.aba-btn.ativa { background: var(--coral); color: var(--creme); -webkit-text-stroke: calc(3 * var(--u)) var(--contorno); paint-order: stroke fill; transform: translateY(calc(2 * var(--u))); }
.upg b i { font-style: normal; font-size: calc(12 * var(--u)); color: var(--texto-suave); margin-left: calc(4 * var(--u)); }
.upg.travado { opacity: .62; }
#painel .estrelas { font: calc(18 * var(--u)) var(--titulo); color: var(--ouro-esc); margin: 0 0 calc(6 * var(--u)); }
.zona-tit { margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); font: calc(15 * var(--u)) var(--titulo); font-weight: 400; color: var(--agua-esc); text-align: left; }
.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(84 * var(--u)), 1fr)); gap: calc(8 * var(--u)); }
.carta { position: relative; padding: calc(6 * var(--u)) calc(4 * var(--u)); background: var(--papel); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(8 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.carta:nth-child(odd) { transform: rotate(-1deg); } .carta:nth-child(even) { transform: rotate(1deg); }
.carta svg { width: 100%; height: calc(32 * var(--u)); }
.carta b { font-size: calc(12 * var(--u)); line-height: 1.1; text-align: center; }
.carta small { font-size: calc(11 * var(--u)); color: var(--texto-suave); font-weight: 600; }
.carta.oculta { background: #E7DED0; }
.carta.lendaria { background: #FFE9A8; border-color: var(--ouro-esc); }
.carta .sel { position: absolute; top: calc(-6 * var(--u)); right: calc(-4 * var(--u)); min-width: calc(20 * var(--u)); padding: 0 calc(4 * var(--u)); font: calc(12 * var(--u)) var(--titulo); color: var(--creme); background: var(--denim); border: calc(2 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)); }
.carta .sel.ouro { right: calc(18 * var(--u)); background: var(--ouro-esc); }
.aq-vidro { fill: var(--agua); } .aq-peixe { fill: var(--coral); stroke: var(--contorno); stroke-width: 1.8; stroke-linejoin: round; } .aq-borda { fill: none; stroke: var(--contorno); stroke-width: 2.4; }
@media (max-aspect-ratio: 3/4) { .col-esq { flex-basis: calc(170 * var(--u)); } .linha-botoes { flex-wrap: wrap; justify-content: flex-end; max-width: calc(110 * var(--u)); } }
/* Oficina v2 (progressão da peixaria): seções, o que cada item faz, efeito atual → próximo, pips de nível,
   etiqueta do pedido, motivo do botão travado, contadores do que dá para comprar */
.secao { margin: calc(14 * var(--u)) 0 calc(2 * var(--u)); font: calc(14 * var(--u)) var(--titulo); font-weight: 400; color: var(--agua-esc); text-align: left; letter-spacing: .02em; }
.secao::after { content: ""; display: block; height: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); background: repeating-linear-gradient(90deg, var(--kraft) 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(12 * var(--u))); }
.upg small { display: block; line-height: 1.2; }
.upg small.dsc { font-size: calc(13 * var(--u)); }
.upg small.ef { margin-top: calc(2 * var(--u)); color: var(--texto); font-size: calc(13.5 * var(--u)); }
.upg small.ef b { display: inline; font-size: inherit; color: var(--verde-esc); }
.pips { display: inline-flex; gap: calc(2.5 * var(--u)); margin-left: calc(6 * var(--u)); vertical-align: middle; }
.pips i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid var(--contorno); background: transparent; }
.pips i.on { background: var(--coral); }
.upg .nv { margin-left: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--texto-suave); }
.upg.pode { background: linear-gradient(90deg, rgba(111, 166, 95, .16), transparent 60%), var(--papel); }
.upg.pedido-item, .reforma.pedido-item { background: linear-gradient(90deg, rgba(247, 196, 67, .45), rgba(247, 196, 67, .12)), var(--papel); }
.tag-pedido { position: absolute; top: calc(-1 * var(--u)); right: calc(14 * var(--u)); padding: 0 calc(7 * var(--u)) calc(1 * var(--u)); font: calc(11 * var(--u)) var(--titulo); color: var(--creme); background: var(--coral); border: calc(1.5 * var(--u)) solid var(--contorno); border-top: 0; border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); z-index: 1; }
.upg .btn.falta { background: linear-gradient(rgba(255, 255, 255, .25) 0 34%, transparent 34%), #CBBFAE; box-shadow: inset 0 calc(-4 * var(--u)) 0 #A8998A, 0 calc(3 * var(--u)) 0 #7A6A5C; -webkit-text-stroke-color: #6E5F52; }
.upg .btn.ref { min-width: calc(100 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); font: 800 calc(12 * var(--u)) var(--corpo); -webkit-text-stroke: 0; color: var(--texto-suave); line-height: 1.15; white-space: normal; }
.upg .cadeado { flex: none; padding: calc(6 * var(--u)) calc(10 * var(--u)); font-weight: 800; font-size: calc(13 * var(--u)); color: var(--texto-suave); border: calc(2 * var(--u)) dashed var(--texto-suave); border-radius: calc(8 * var(--u)); }
.vem-ai { margin: calc(4 * var(--u)) 0 !important; font-size: calc(13 * var(--u)) !important; color: var(--texto-suave); }
.upg.comprou, .reforma.comprou { animation: comprou .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes comprou { 0% { transform: scale(.94); background-color: var(--ouro); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.btn.nao { animation: nao .35s; }
@keyframes nao { 20%, 60% { transform: translateX(calc(-5 * var(--u))); } 40%, 80% { transform: translateX(calc(5 * var(--u))); } }
/* cartão da reforma: tabuão no topo da aba Peixaria */
.reforma { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(2 * var(--u)) calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); text-align: left; background: repeating-linear-gradient(176deg, rgba(74, 46, 34, .08) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(9 * var(--u))), var(--kraft); border: calc(2.5 * var(--u)) solid var(--contorno); border-radius: calc(10 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); box-shadow: 0 calc(3 * var(--u)) 0 rgba(74, 46, 34, .4); }
.reforma .ref-estrelas { grid-column: 1; font: calc(20 * var(--u)) var(--titulo); color: var(--ouro); -webkit-text-stroke: calc(3 * var(--u)) var(--contorno); paint-order: stroke fill; letter-spacing: .06em; }
.reforma .ref-estrelas i { font-style: normal; color: #E9DCC4; }
.reforma b { grid-column: 1; font: calc(17 * var(--u)) var(--titulo); }
.reforma small { grid-column: 1; font-weight: 700; font-size: calc(13 * var(--u)); color: var(--texto-suave); }
.reforma .btn { grid-column: 2; grid-row: 1 / span 3; min-width: calc(96 * var(--u)); font-size: calc(16 * var(--u)); }
/* contador "dá para comprar" */
.badge { position: absolute; top: calc(-9 * var(--u)); right: calc(-9 * var(--u)); min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(11 * var(--u)); font: calc(13 * var(--u)) / calc(19 * var(--u)) var(--titulo); color: var(--creme); -webkit-text-stroke: 0; background: var(--coral-esc); border: calc(2 * var(--u)) solid var(--contorno); text-align: center; }
.aba-btn { position: relative; }
.aba-btn .badge { top: calc(-10 * var(--u)); right: calc(-7 * var(--u)); }
#btn-oficina .badge { animation: balanca 1.4s ease-in-out infinite; }

/* pausa do Playables (onPause): nada se mexe até o onResume */
body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; transition: none !important; }