/* Telas de VITÓRIA e DERROTA — madeira 3D, tudo dinâmico.
   Unidade --u escala com a tela inteira (cabe em PC, tablet e celular sem rolar). */
.fim { --u: min(1vw, 1.42vh); position:fixed; inset:0; z-index:50; display:grid; place-items:center;
       background:radial-gradient(ellipse at center, rgba(10,20,5,.55), rgba(5,10,2,.88));
       backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); overflow:hidden;
       font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif; animation:fimFundo .4s ease both; }
.fim[hidden] { display:none; }
@keyframes fimFundo { from { opacity:0; } }

.fim-caixa { position:relative; width:calc(92 * var(--u)); max-width:1100px; padding-top:calc(13 * var(--u));
             animation:fimEntra .55s cubic-bezier(.2,1.4,.4,1) .1s both; }
@keyframes fimEntra { from { transform:translateY(-14%) scale(.7); opacity:0; } }
.fim.derrota .fim-caixa { animation:fimEntra .45s cubic-bezier(.2,1.6,.4,1) .1s both, fimTreme .4s .55s; }
@keyframes fimTreme { 20%,60% { transform:translateX(-1%); } 40%,80% { transform:translateX(1%); } }

/* ---------- painel de madeira ---------- */
.fim-painel { position:relative; border-radius:calc(3 * var(--u)); padding:calc(8.5 * var(--u)) calc(4 * var(--u)) calc(3.4 * var(--u));
  border:calc(.9 * var(--u)) solid #3a2416;
  background:
    repeating-linear-gradient(90deg, rgba(255,220,170,.05) 0 calc(.35 * var(--u)), transparent calc(.35 * var(--u)) calc(2.6 * var(--u))),
    repeating-linear-gradient(0deg, transparent 0 calc(5.6 * var(--u)), rgba(40,20,5,.45) calc(5.6 * var(--u)) calc(6 * var(--u))),
    linear-gradient(180deg, #9a6438 0%, #7a4a26 45%, #5e3a1c 100%);
  box-shadow: inset 0 calc(.6 * var(--u)) 0 rgba(255,220,170,.35), inset 0 calc(-1 * var(--u)) 0 rgba(0,0,0,.35),
              0 calc(1.6 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); }
.fim.derrota .fim-painel { background:
    repeating-linear-gradient(90deg, rgba(255,220,170,.04) 0 calc(.35 * var(--u)), transparent calc(.35 * var(--u)) calc(2.6 * var(--u))),
    repeating-linear-gradient(0deg, transparent 0 calc(5.6 * var(--u)), rgba(20,10,2,.5) calc(5.6 * var(--u)) calc(6 * var(--u))),
    linear-gradient(180deg, #6e4628 0%, #553419 50%, #3e2512 100%); }
.fim.vitoria .fim-painel { border-color:#6b3d12; outline:calc(.45 * var(--u)) solid #e8b03a; outline-offset:calc(-1.6 * var(--u));
  box-shadow: inset 0 calc(.6 * var(--u)) 0 rgba(255,220,170,.35), 0 0 calc(6 * var(--u)) rgba(255,210,80,.35), 0 calc(1.6 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); }

/* ---------- título ---------- */
.fim-titulo { position:absolute; left:50%; top:0; transform:translateX(-50%); width:72%; z-index:3; text-align:center; pointer-events:none; }
.fim-placa { display:inline-block; padding:calc(1.2 * var(--u)) calc(3 * var(--u)) calc(.4 * var(--u)); border-radius:calc(2.4 * var(--u));
  background:linear-gradient(#a8703e,#6b4423); border:calc(.7 * var(--u)) solid #3a2416; box-shadow:0 calc(.8 * var(--u)) 0 #3a2416, inset 0 calc(.5 * var(--u)) 0 rgba(255,220,170,.35); }
.fim-t1, .fim-t2 { display:block; line-height:.95; font-weight:800; letter-spacing:.02em; paint-order:stroke fill; }
.fim-t1 { font-size:calc(6 * var(--u)); color:#fff8ea; -webkit-text-stroke:calc(.55 * var(--u)) #3a2416;
          text-shadow:0 calc(.6 * var(--u)) 0 #3a2416, 0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,.5); }
.fim-t2 { font-size:calc(9.2 * var(--u)); -webkit-text-stroke:calc(.7 * var(--u)) #4a0a06;
          text-shadow:0 calc(.5 * var(--u)) 0 #7a1210, 0 calc(1 * var(--u)) 0 #4a0a06, 0 calc(1.6 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.55); }
.fim.derrota .fim-t2 { color:#ff4a32; background:linear-gradient(#ff7a52,#e8231c 55%,#a8100c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fim.vitoria .fim-t1 { font-size:calc(10.5 * var(--u)); -webkit-text-stroke:calc(.75 * var(--u)) #3a5a06;
          background:linear-gradient(#fff6b0,#ffd23a 50%,#e89a10); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
          text-shadow:none; filter:drop-shadow(0 calc(.7 * var(--u)) 0 #2f5a06) drop-shadow(0 calc(1.2 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,.5)); }
.fim.vitoria .fim-t2 { font-size:calc(4.6 * var(--u)); color:#fff8ea; -webkit-text-stroke:calc(.5 * var(--u)) #2f5a06; text-shadow:0 calc(.5 * var(--u)) 0 #2f5a06; margin-top:calc(.4 * var(--u)); }
.fim-fita { display:inline-block; margin-top:calc(1 * var(--u)); padding:calc(.4 * var(--u)) calc(4 * var(--u)) calc(.1 * var(--u));
  font-weight:800; font-size:calc(2.6 * var(--u)); color:#fff; background:linear-gradient(#e8322a,#a8160a);
  border:calc(.35 * var(--u)) solid #5a0a06; clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); text-shadow:0 calc(.3 * var(--u)) 0 #5a0a06; }

/* estrelas */
.fim-estrelas { display:flex; justify-content:center; gap:calc(1.2 * var(--u)); margin-bottom:calc(-1 * var(--u)); }
.fim-estrelas svg { width:calc(7 * var(--u)); height:calc(7 * var(--u)); filter:drop-shadow(0 calc(.5 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.5)); transform:scale(0); }
.fim-estrelas svg:nth-child(2) { width:calc(8.6 * var(--u)); height:calc(8.6 * var(--u)); margin-top:calc(-1.4 * var(--u)); }
.fim-estrelas svg.mostra { animation:estrela .5s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes estrela { from { transform:scale(0) rotate(-40deg); } to { transform:scale(1); } }

/* ---------- personagens ---------- */
.fim-heroi { position:absolute; z-index:4; height:calc(23 * var(--u)); width:auto; pointer-events:none;
             filter:drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.55)); }
.fim.derrota .fim-heroi { animation:pragaRi 1.1s ease-in-out infinite; }
.fim.vitoria .fim-heroi { animation:pula .9s cubic-bezier(.3,0,.4,1) infinite; }
.fim-heroi.e1 { left:calc(-3 * var(--u)); top:calc(4 * var(--u)); }
.fim-heroi.e2 { left:calc(9 * var(--u)); top:calc(7 * var(--u)); height:calc(18 * var(--u)); animation-delay:-.4s; }
.fim-heroi.d1 { right:calc(-3 * var(--u)); top:calc(4 * var(--u)); animation-delay:-.25s; }
@keyframes pragaRi { 50% { transform:translateY(calc(-1 * var(--u))) rotate(-3deg) scale(1.03); } }
@keyframes pula { 0%,100% { transform:translateY(0) scaleY(1); } 15% { transform:translateY(0) scaleY(.92); } 50% { transform:translateY(calc(-3 * var(--u))) scaleY(1.04) rotate(-3deg); } }

/* ---------- conteúdo ---------- */
.fim-pontos { display:flex; align-items:center; justify-content:center; gap:calc(2.4 * var(--u)); margin:0 auto calc(2 * var(--u)); width:62%;
  padding:calc(.8 * var(--u)) calc(3 * var(--u)) calc(.3 * var(--u)); border-radius:calc(2.2 * var(--u));
  background:linear-gradient(#4a2c14,#2e1a0a); border:calc(.45 * var(--u)) solid #c48a3a; box-shadow:inset 0 calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(0,0,0,.6); }
.fim-pontos svg { width:calc(6 * var(--u)); height:calc(6 * var(--u)); flex:none; }
.fim-pontos .rot { color:#fff8ea; font-weight:700; font-size:calc(2.6 * var(--u)); line-height:1; }
.fim-pontos .num { font-weight:800; font-size:calc(6.6 * var(--u)); line-height:1; color:#ffd23a; -webkit-text-stroke:calc(.35 * var(--u)) #6b3d06; paint-order:stroke fill;
  text-shadow:0 calc(.4 * var(--u)) 0 #6b3d06, 0 0 calc(2 * var(--u)) rgba(255,200,60,.45); min-width:5ch; text-align:left; }

.fim-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1.4 * var(--u)); margin-bottom:calc(1.8 * var(--u)); }
.fim-stat { display:flex; align-items:center; gap:calc(1 * var(--u)); padding:calc(.9 * var(--u)) calc(1.2 * var(--u)); border-radius:calc(1.6 * var(--u));
  background:linear-gradient(#5a3a1e,#3a2410); border:calc(.35 * var(--u)) solid #b07a3a; box-shadow:inset 0 calc(.3 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.5); min-width:0; }
.fim-stat svg { width:calc(5 * var(--u)); height:calc(5 * var(--u)); flex:none; }
.fim-stat .t { color:#f4e3c3; font-weight:700; font-size:calc(1.75 * var(--u)); line-height:1.05; }
.fim-stat .v { color:#ffd23a; font-weight:800; font-size:calc(3.1 * var(--u)); line-height:1.05; text-shadow:0 calc(.25 * var(--u)) 0 #3a2416; white-space:nowrap; }

.fim-premios { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:calc(1.4 * var(--u)) calc(2.6 * var(--u)); margin:0 auto calc(1.8 * var(--u));
  padding:calc(.8 * var(--u)) calc(2.6 * var(--u)); width:fit-content; max-width:100%; border-radius:calc(2 * var(--u));
  background:linear-gradient(#5a3a1e,#3a2410); border:calc(.35 * var(--u)) solid #e8b03a; }
.fim-premios .rot { color:#fff8ea; font-weight:800; font-size:calc(2.2 * var(--u)); }
.fim-premio { display:flex; align-items:center; gap:calc(.6 * var(--u)); color:#fff; font-weight:800; font-size:calc(2.3 * var(--u)); }
.fim-premio svg, .fim-premio img { width:calc(3.6 * var(--u)); height:calc(3.6 * var(--u)); object-fit:contain; }
.fim-premio small { color:#f4e3c3; font-weight:600; font-size:calc(1.5 * var(--u)); }

.fim-botoes { display:flex; justify-content:center; gap:calc(4 * var(--u)); }
.fim-btn { display:inline-flex; align-items:center; gap:calc(1.4 * var(--u)); cursor:pointer; font-family:inherit; font-weight:800; line-height:1;
  font-size:calc(3.4 * var(--u)); color:#fff; padding:calc(1.4 * var(--u)) calc(4 * var(--u)) calc(1 * var(--u)); border-radius:calc(2.2 * var(--u));
  border:calc(.55 * var(--u)) solid #1f4a08; text-shadow:0 calc(.35 * var(--u)) 0 rgba(0,0,0,.45);
  background:linear-gradient(#b6f07a,#4fa52a 55%,#2f7a1a); box-shadow:0 calc(.9 * var(--u)) 0 #1f4a08, inset 0 calc(.5 * var(--u)) 0 rgba(255,255,255,.45);
  transition:transform .08s, filter .15s, box-shadow .08s; }
.fim-btn svg { width:calc(4.4 * var(--u)); height:calc(4.4 * var(--u)); flex:none; }
.fim-btn:hover { filter:brightness(1.1); transform:translateY(calc(-.3 * var(--u))); }
.fim-btn:active { transform:translateY(calc(.7 * var(--u))); box-shadow:0 calc(.2 * var(--u)) 0 #1f4a08; }
.fim-btn.madeira { border-color:#5a2a06; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 calc(.3 * var(--u)), transparent calc(.3 * var(--u)) calc(2 * var(--u))),
    linear-gradient(#ffb04a,#e8761a 55%,#b04a0a); box-shadow:0 calc(.9 * var(--u)) 0 #5a2a06, inset 0 calc(.5 * var(--u)) 0 rgba(255,255,255,.4); }
.fim-btn.madeira:active { box-shadow:0 calc(.2 * var(--u)) 0 #5a2a06; }
.fim-btn.brilha { animation:brilhaBtn 1.6s ease-in-out infinite; }
@keyframes brilhaBtn { 50% { box-shadow:0 calc(.9 * var(--u)) 0 #1f4a08, 0 0 calc(3 * var(--u)) rgba(200,255,120,.9), inset 0 calc(.5 * var(--u)) 0 rgba(255,255,255,.45); } }
.fim-btn[disabled] { filter:grayscale(.8); cursor:default; }

/* enfeites: folhas e pedras */
.fim-folha { position:absolute; width:calc(9 * var(--u)); height:auto; z-index:2; pointer-events:none; }
.fim-pedra { position:absolute; bottom:calc(-2 * var(--u)); width:calc(9 * var(--u)); height:calc(5 * var(--u)); border-radius:50% 50% 40% 40%;
  background:radial-gradient(ellipse at 35% 30%, #c9c2b8, #7a7268 70%); border:calc(.35 * var(--u)) solid #3a3530; z-index:3; }

/* partículas (confete / folhas caindo) */
.fim-part { position:absolute; top:-6%; width:calc(1.2 * var(--u)); height:calc(1.8 * var(--u)); border-radius:2px; pointer-events:none; z-index:1;
  animation:cai linear forwards; }
@keyframes cai { to { transform:translateY(115vh) rotate(720deg); } }
.fim-brilho { position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,220,100,.13) 0 10deg, transparent 10deg 20deg); animation:gira 18s linear infinite; }
@keyframes gira { to { transform:rotate(360deg); } }

/* telas muito baixas (celular deitado): compacta */
@media (max-height: 430px) { .fim-caixa { width:calc(98 * var(--u)); } .fim-premio small { display:none; } }

/* ajustes de espaço (vitória tem título mais alto: estrelas + 2 linhas + fita) */
.fim.vitoria .fim-painel { padding-top:calc(14.5 * var(--u)); }
.fim.derrota .fim-painel { padding-top:calc(10 * var(--u)); }
.fim.vitoria .fim-t1 { font-size:calc(9 * var(--u)); }
.fim-heroi { height:calc(20 * var(--u)); }
.fim-heroi.e1 { left:calc(-9 * var(--u)); top:calc(5 * var(--u)); }
.fim-heroi.e2 { left:calc(3 * var(--u)); top:calc(8.5 * var(--u)); height:calc(15 * var(--u)); }
.fim-heroi.d1 { right:calc(-9 * var(--u)); top:calc(5 * var(--u)); }
.fim-pontos { margin-bottom:calc(1.4 * var(--u)); }
.fim-stats { margin-bottom:calc(1.4 * var(--u)); }
.fim-premios { gap:calc(.8 * var(--u)) calc(2 * var(--u)); padding:calc(.6 * var(--u)) calc(2.2 * var(--u)); margin-bottom:calc(1.6 * var(--u)); flex-wrap:nowrap; }
.fim-premio small { font-size:calc(1.35 * var(--u)); }

.fim-escala { transform-origin:center center; display:grid; place-items:center; }

.fim-envio { margin:0 auto calc(1.4 * var(--u)); width:fit-content; max-width:100%; padding:calc(.6 * var(--u)) calc(2.4 * var(--u)); border-radius:calc(1.6 * var(--u));
  font-weight:800; font-size:calc(2.2 * var(--u)); color:#fff; background:#2f7a1a; border:calc(.35 * var(--u)) solid #163a06; text-align:center; }
.fim-envio[data-ok="0"] { background:#8a1a10; border-color:#4a0a06; }
a.fim-btn { text-decoration:none; }