@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600&display=swap');

:root{
  --bg:      oklch(12.67% 0.007 325.98);   /* quase preto com toque vermelho-violeta */
  --bg-2:    oklch(17.50% 0.0131 307.63);
  --neon-g:  oklch(84.98% 0.1528 89.56);   /* ouro quente da conquista */
  --neon-p:  oklch(57.72% 0.1525 315.32);  /* roxo — acento suave */
  --passion: oklch(58.90% 0.2365 19.90);   /* carmesim fundo — coração na garganta */
  --chalk:   oklch(95.07% 0.0111 303.11);
  --danger:  oklch(58.90% 0.2365 19.90);
  --display: 'Anton', sans-serif;
  --body:    'Inter', sans-serif;
  --lift-shake: 0; /* 0 a 1, atualizado via JS — dirige tremor do botão E da tela */
  --mx: 0.5;
  --my: 0.5;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; min-height:100%;
  background:
    radial-gradient(ellipse 40% 65% at 50% -8%, rgba(245,200,66,.14) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(232,0,61,.07) 0%, transparent 55%),
    linear-gradient(180deg, #0a0608 0%, #080608 100%);
  color: var(--chalk);
  font-family: var(--body);
  overflow:hidden;
  transform: translate(var(--shake-x, 0px), var(--shake-y, 0px));
  will-change: transform;
}

body{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding: 24px;
}

body.shake{ animation: screen-shake .3s linear; }
@keyframes screen-shake{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-4px, 2px); }
  40%{ transform: translate(4px, -3px); }
  60%{ transform: translate(-3px, 3px); }
  80%{ transform: translate(3px, -2px); }
}

/* tremor contínuo e sutil da tela inteira, sincronizado ao MESMO
   --lift-shake do botão (setado na raiz do documento pelo JS) —
   só fica perceptível depois de 50% de esforço, ver script.js */
#stage.lifting{
  animation: stage-tremor .09s linear infinite;
}
@keyframes stage-tremor{
  0%{   transform: translate(calc(var(--lift-shake,0) * -1.5px), calc(var(--lift-shake,0) * 1px)); }
  50%{  transform: translate(calc(var(--lift-shake,0) * 1.5px), calc(var(--lift-shake,0) * -1px)); }
  100%{ transform: translate(calc(var(--lift-shake,0) * -1px), calc(var(--lift-shake,0) * 1.5px)); }
}

/* piso emborrachado */
.gym-floor{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 22px);
  opacity:.6;
}

.neon-sign{
  position:fixed; top: 22px; left:50%; transform: translateX(-50%);
  font-family: var(--display);
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing:.12em;
  color: var(--neon-g);
  text-shadow:
    0 0 6px var(--neon-g), 0 0 18px var(--neon-g), 0 0 36px rgba(57,255,106,.5);
  animation: neon-flicker 4s infinite;
  z-index:1;
}
@keyframes neon-flicker{
  0%, 92%, 100%{ opacity:1; }
  93%{ opacity:.4; }
  94%{ opacity:1; }
  95%{ opacity:.6; }
  96%{ opacity:1; }
}

.rack{
  position:relative; z-index:2;
  width: min(620px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
  border: 1px solid rgba(245,200,66,.22);
  border-radius: 8px;
  box-shadow:
    0 -1px 0 rgba(245,200,66,.45),
    0 0 0 1px rgba(0,0,0,.5),
    0 40px 80px -20px rgba(0,0,0,.8),
    0 0 60px -20px rgba(245,200,66,.12);
  padding: 42px 32px 32px;
}

.hidden{ display:none !important; }



.card-tag{
  font-family: var(--body);
  font-weight: 800;
  font-size: 11px; letter-spacing:.15em; color: rgba(238,240,242,.5);
  margin: 0 0 6px;
}





.btn-row{
  position:relative;
  display:flex; justify-content:flex-start; align-items:center;
  gap: 24px; min-height: 100px;
  width: 100%;
}

.btn{
  font-family: var(--display);
  font-size: 17px; letter-spacing:.08em;
  padding: 14px 28px;
  border-radius: 4px;
  cursor:pointer;
  background: rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* --------------------------------------------------------------
   Botão SIM = "hold to lift". A barra de preenchimento usa um
   gradiente FIXO do tamanho do BOTÃO (não do próprio preenchimento),
   então quanto mais ela cresce, mais ela "revela" a faixa vermelha
   do fim — o efeito visual de "chegando no limite / na zona
   vermelha" nasce só de CSS, sem nenhum JS calculando cor.
-------------------------------------------------------------- */

.lift-btn.lifting{ border-color: var(--passion); }

.lift-btn::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(245,200,66,.45) 0%, transparent 70%);
  opacity: var(--lift-shake, 0);
  transform: scale(calc(1 + var(--lift-shake, 0) * 0.4));
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:0;
  transition: none;
  border-radius: inherit;
}

.lift-fill{
  position:absolute; inset:0;
  width: var(--lift-progress, 0%);
  background: linear-gradient(90deg, var(--neon-g) 0%, #ffd23f 60%, var(--passion) 100%);
  background-size: 220px 100%;
  background-position: 0 0;
  z-index:0;
}

.lift-label{
  position:relative; z-index:1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  letter-spacing: calc(0.06em + var(--lift-shake, 0) * 0.08em);
  transition: letter-spacing 0.1s linear;
}

.lift-btn.lifting{
  animation: lift-shake .1s linear infinite;
}
@keyframes lift-shake{
  0%{   transform: translate(calc(var(--lift-shake,0) * -3px), calc(var(--lift-shake,0) * 2px)) scale(calc(1 + var(--audio-bass, 0) * 0.15)); }
  50%{  transform: translate(calc(var(--lift-shake,0) * 3px), calc(var(--lift-shake,0) * -2px)) scale(calc(1 + var(--audio-bass, 0) * 0.15)); }
  100%{ transform: translate(calc(var(--lift-shake,0) * -2px), calc(var(--lift-shake,0) * 3px)) scale(calc(1 + var(--audio-bass, 0) * 0.15)); }
}

.lift-btn.lift-complete{
  animation: lift-pop .3s ease forwards;
  border-color: var(--chalk);
}
@keyframes lift-pop{
  0%{ transform: scale(calc(1 + var(--audio-bass, 0) * 0.15)); }
  40%{ transform: scale(calc(1.12 + var(--audio-bass, 0) * 0.15)); box-shadow: 0 0 40px 4px var(--neon-g), 0 0 calc(var(--audio-bass, 0) * 80px) var(--passion); }
  100%{ transform: scale(calc(1 + var(--audio-bass, 0) * 0.15)); }
}

/* --------------------------------------------------------------
   Overlay de pulso vermelho — sincronizado ao BPM calculado no JS
   (velocidade real controlada por --pulse-duration, em segundos).
   Roda DESDE O CARREGAMENTO da página (batimento de repouso) e
   acelera conforme o mouse se aproxima do botão de levantar.
-------------------------------------------------------------- */
.heart-pulse-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 5;
  background: radial-gradient(circle at 50% 60%, rgba(180,10,20,.35), transparent 70%);
  opacity: 0;
  animation: heart-pulse var(--pulse-duration, 1s) ease-in-out infinite;
}
@keyframes heart-pulse{
  0%, 100%{ opacity: 0; }
  15%{ opacity: var(--pulse-intensity, .35); }
  30%{ opacity: 0; }
  45%{ opacity: calc(var(--pulse-intensity, .35) * .7); }
  60%{ opacity: 0; }
}

/* --------------------------------------------------------------
   Botão NÃO — física de queda/rolagem 100% intacta (ver script.js);
   visual refeito como anilha de ferro bruta: metal escuro, aro
   grosso, dois furos de parafuso decorativos.
-------------------------------------------------------------- */

.btn-no::before, .btn-no::after{
  content:'';
  position:absolute; left:50%; transform: translateX(-50%);
  width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #7a7a84, #1c1c1f 75%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25);
}
.btn-no::before{ top: 9px; }
.btn-no::after{ bottom: 9px; }
.btn-no.placed{ transition: none; }

/* queda pesada com rotação — SEM teleporte seco, a queda é visível.
   Lógica de --from/--to/--roll-deg intocada no script.js. */
.btn-no.dropping{
  animation: rep-fail-drop .38s cubic-bezier(.55,0,.85,.35) forwards;
}
@keyframes rep-fail-drop{
  0%{
    transform: translate(var(--from-x), var(--from-y)) rotate(0deg);
    filter: blur(0px);
  }
  30%{
    transform: translate(
      calc(var(--from-x) * .4 + var(--to-x) * .6),
      calc(var(--from-y) * .4 + var(--to-y) * .6)
    ) rotate(calc(var(--roll-deg) * .5)) scaleY(.82) scaleX(1.12);
    filter: blur(3px) contrast(.8);
  }
  85%{
    filter: blur(.5px);
  }
  100%{
    transform: translate(var(--to-x), var(--to-y)) rotate(var(--roll-deg));
    filter: blur(0px);
  }
}

.fail-line{
  margin: 22px 0 0;
  font-size: 12px; letter-spacing:.05em;
  color: rgba(255,59,78,.75);
}
#fail-count{ color: var(--danger); font-weight:700; }

.fail-flash{
  position: fixed;
  pointer-events:none;
  font-family: var(--display);
  font-size: 15px; letter-spacing:.08em;
  color: var(--danger);
  text-shadow: 0 0 10px rgba(255,59,78,.7);
  opacity:0;
  z-index: 31;
  transition: opacity .2s ease;
}
.fail-flash.show{ opacity:1; }

/* ------------------------------------------------------------ */
/* Sucesso: barra levantando + magnésio + confete de giz          */
/* ------------------------------------------------------------ */
.pr-report{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}

.barbell-rig{
  height: 60px; display:flex; align-items:center; justify-content:center;
  animation: lift-complete 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lift-complete{
  0%{ transform: translateY(40px); opacity:0; }
  60%{ transform: translateY(-6px); opacity:1; }
  100%{ transform: translateY(0); }
}
.bar{
  position:relative; width: 220px; height: 8px;
  background: linear-gradient(180deg, #999, #555);
  border-radius: 4px;
  display:flex; align-items:center; justify-content:space-between;
}
.plate{ border-radius: 4px; background: linear-gradient(180deg, #2a2a2e, #111); border:2px solid #444; }
.plate-big{ width: 16px; height: 46px; }
.plate-small{ width: 12px; height: 34px; }
.plate-l{ margin-right: -2px; }
.plate-r{ margin-left: -2px; }

#confetti-layer{
  position: fixed; inset:0; pointer-events:none; z-index: 20; overflow:hidden;
}

/* nuvem de magnésio: círculos brancos desfocados que NASCEM no
   ponto da explosão e se EXPANDEM (scale) enquanto somem — bem
   diferente do confete, que só cai. mix-blend-mode:screen faz o
   branco "queimar" contra o fundo escuro, como pó real reagindo
   à luz. */
.mag-puff{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
  filter: blur(5px);
  opacity:0;
  mix-blend-mode: screen;
  transform: translate(-50%,-50%) scale(.3);
  animation-name: mag-puff-expand;
  animation-timing-function: cubic-bezier(.15,.7,.3,1);
  animation-fill-mode: forwards;
  pointer-events:none;
}
@keyframes mag-puff-expand{
  0%{   opacity:0;   transform: translate(-50%,-50%) scale(.3); }
  14%{  opacity:.9; }
  100%{ opacity:0;   transform: translate(calc(-50% + var(--pf-x)), calc(-50% + var(--pf-y))) scale(1.9); }
}

.chalk-bit{
  position:absolute; top:-5vh;
  width: 6px; height: 6px; border-radius:50%;
  background: var(--chalk);
  opacity:.85;
  animation-name: chalk-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes chalk-fall{
  to{ transform: translateY(110vh) translateX(var(--drift, 0px)); opacity:0; }
}

.photo-frame{
  width: min(280px, 85%);
  aspect-ratio: 4/5;
  border: 3px solid var(--neon-g);
  border-radius: 4px;
  overflow:hidden;
  box-shadow: 0 0 24px -4px var(--neon-g);
}
.couple-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: contrast(1.1) saturate(1.05);
  animation: photo-pop-in .5s cubic-bezier(.3,1.4,.4,1) both;
}
@keyframes photo-pop-in{
  from{ transform: scale(.85); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}

.report-card{
  width: min(420px, 92%);
  border-top: 1px dashed rgba(181,55,242,.4);
  padding-top: 14px;
  text-align:center;
}
.report-card h2{
  font-family: var(--display);
  font-size: 20px; letter-spacing:.05em;
  color: var(--neon-g);
  margin: 0 0 10px;
}
.report-row{ font-size: 13px; color: rgba(238,240,242,.75); margin:4px 0; }
.report-row span{ color: var(--neon-p); font-weight:600; letter-spacing:.03em; }
.report-resolution{
  font-size: 15px; color: var(--chalk); margin: 10px 0 4px; line-height:1.5; font-style:italic;
}
.report-notes{
  font-size: 12px; color: rgba(238,240,242,.55); margin:0;
}

/* Linha EKG que varre a tela no momento de sucesso */
#ekg-line{
  position: fixed; bottom: 18%; left: 0; right: 0;
  height: 2px;
  background: var(--neon-g);
  box-shadow: 0 0 12px var(--neon-g), 0 0 4px rgba(255,255,255,.5);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}
#ekg-line.spike{
  animation: ekg-spike .5s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ekg-spike{
  0%  { transform: scaleX(0); opacity: 1; }
  45% { transform: scaleX(1); opacity: 1; }
  75% { transform: scaleX(1); opacity: .35; }
  100%{ transform: scaleX(1); opacity: 0; }
}

@view-transition { navigation: none; }
::view-transition-old(root){
  animation: 450ms ease-in-out lift-transition-out;
}
::view-transition-new(root){
  animation: 450ms ease-out lift-transition-in;
}
@keyframes lift-transition-out{
  to { transform: translateY(-8px) scale(.97); opacity: 0; filter: blur(3px); }
}
@keyframes lift-transition-in{
  from { transform: translateY(12px) scale(1.02); opacity: 0; filter: blur(3px); }
}

@media (max-width: 480px){
  .workout-card { padding: 30px 20px; }
  .btn-row { gap: 12px; }
  .lift-btn, .btn-no { width: 80px; height: 80px; font-size: 0.9rem; }
  .lift-question { font-size: clamp(24px, 7vw, 32px); }
  .rack{ padding: 30px 20px 24px; }
  .btn{ padding: 12px 20px; font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
  body.shake, #stage.lifting, .btn-no.dropping, .neon-sign, .barbell-rig, .chalk-bit, .couple-photo,
  .lift-btn.lifting, .lift-btn.lift-complete, .heart-pulse-overlay, .mag-puff,
  #ekg-line.spike, ::view-transition-old(root), ::view-transition-new(root){
    animation: none !important;
  }
}
.interactive-props {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
}
.prop-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.prop-item:hover {
  transform: scale(1.1) rotate(-5deg);
}
.prop-item:active {
  transform: scale(0.9);
}
#prop-whey { bottom: 5%; left: 10%; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5)); }
#prop-dumbbell { bottom: 8%; right: 10%; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5)); }
.shake-anim { animation: shake-obj 0.4s ease-in-out; }
@keyframes shake-obj {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

#question-block .barbell-rig {
  animation: none; /* overrides lift-complete */
  margin-top: 20px;
  transform: translateY(calc(30px - var(--lift-progress, 0%) * 30px));
}
#question-block .bar {
  /* Enverga a barra conforme o progresso aumenta */
  transform: scaleY(calc(1 + var(--lift-progress, 0%) * 0.15));
}


.workout-card {
  position:relative; z-index:2;
  width: min(580px, 100%);
  background: 
    linear-gradient(rgba(10,10,10,0.85), rgba(10,10,10,0.85)),
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0V0zm20 20h20v20H20V20zM0 20h20v20H0V20z' fill='%231a1a1a' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  border: 2px solid var(--neon-g);
  border-radius: 16px;
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.8),
    0 0 20px rgba(245, 200, 66, 0.2),
    inset 0 0 20px rgba(245, 200, 66, 0.05);
  padding: 50px 40px;
  backdrop-filter: blur(10px);
}
.workout-question {
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: .03em;
  margin: 0 0 20px;
  color: var(--chalk);
  text-shadow: 2px 2px 0px rgba(232,0,61,0.5), -2px -2px 0px rgba(245,200,66,0.3);
}
.workout-sub {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: #cfced6;
  margin: 0 0 40px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-left: 4px solid var(--neon-p);
  padding-left: 16px;
}

/* ── Bug 3 fix: única definição de .lift-btn (mesclada) ─────── */
.lift-btn {
  position: relative;
  overflow: hidden;
  background: #111;
  border: 2px solid var(--neon-g);
  color: var(--chalk);
  cursor: pointer;
  font-size: 1.2rem; letter-spacing: .08em;
  padding: 18px 36px;
  border-radius: 12px;
  box-shadow: 0 8px 0 rgba(200, 160, 40, 0.8), 0 15px 20px rgba(0,0,0,0.4);
}
.lift-btn:active, .lift-btn.lifting {
  transform: translateY(8px);
  box-shadow: 0 0 0 rgba(200, 160, 40, 0.8), 0 5px 10px rgba(0,0,0,0.4);
}

/* ── Bug 3 fix: única definição de .btn-no (mesclada) ────────── */
.btn-no {
  position: relative;
  background: #111;
  border: 2px solid var(--danger);
  color: var(--danger);
  cursor: pointer;
  border-radius: 12px;
  width: 90px; height: 90px;
  font-size: 1.1rem;
  box-shadow: 0 8px 0 rgba(180, 0, 40, 0.8), 0 15px 20px rgba(0,0,0,0.4);
}
.btn-no:active {
  transform: translateY(8px) !important;
  box-shadow: 0 0 0 rgba(180, 0, 40, 0.8), 0 5px 10px rgba(0,0,0,0.4) !important;
}