/* =========================================================
   GainBet — Remate ao Golo
   Um estádio à noite (igual no tema claro e no escuro): a escada dos cinco remates em cima, o cenário com a
   baliza, o guarda-redes e a bola, e por baixo a frase do que está a acontecer.
   ========================================================= */
.gt--goal{--tile:#14532d}
.gt--goal .a-c{fill:#f2c14e}
.gt--goal .a-k{fill:none;stroke:#f2c14e;stroke-linecap:round}

.cg-viz.gl{justify-items:stretch;align-content:start;gap:10px;min-height:0;padding:4px 0 2px}

/* ---------- escada dos cinco remates ---------- */
.gl-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.gl-step{position:relative;display:grid;gap:3px;min-width:0;padding:8px 10px 9px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);transition:border-color .25s,background-color .25s,opacity .25s}
.gl-st-n{display:flex;align-items:center;justify-content:space-between;gap:4px;font:800 11px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gl-mk{font-style:normal;font-size:13px}
.gl-st-t{font:800 13.5px/1.12 var(--font-head);letter-spacing:.02em;text-transform:uppercase}
.gl-st-d{overflow:hidden;font-size:11.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.gl-st-x{font:800 17px/1.1 var(--font-head);color:var(--gold);font-variant-numeric:tabular-nums}
.gl-st-p{overflow:hidden;font-size:11.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.gl-step.is-now{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.gl-step.is-goal{background:rgba(22,163,74,.15);border-color:rgba(34,197,94,.5)}
.gl-step.is-goal .gl-mk{color:#22c55e}
.gl-step.is-save{background:rgba(220,38,38,.15);border-color:rgba(248,113,113,.55)}
.gl-step.is-save .gl-mk{color:#f87171}
.gl-step.was-goal,.gl-step.was-save{opacity:.62}
.gl-step.was-goal .gl-st-p{color:#22c55e}
.gl-step.was-save .gl-st-p{color:#f87171}
:root[data-theme="light"] .gl-step.is-goal .gl-mk,:root[data-theme="light"] .gl-step.was-goal .gl-st-p{color:#15803d}
:root[data-theme="light"] .gl-step.is-save .gl-mk,:root[data-theme="light"] .gl-step.was-save .gl-st-p{color:#b91c1c}
:root[data-theme="light"] .gl-st-x{color:var(--gold-ink)}
@media(max-width:700px){
  .gl-ladder{gap:4px}
  .gl-step{gap:2px;padding:6px 6px 7px}
  .gl-st-d,.gl-st-p{display:none}
  .gl-st-t{font-size:11px}
  .gl-st-x{font-size:14px}
}
@media(max-width:420px){.gl-st-t{display:none}}

/* ---------- cenário ---------- */
.gl-scene{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/10;border-radius:var(--r-lg);background:#0c1430;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);user-select:none;-webkit-user-select:none}
.gl-scene.is-narrow{aspect-ratio:1/1}
/* tudo o que é "mundo" (estádio, relvado, baliza, bola) fica numa camada que treme com o impacto */
.gl-world{position:absolute;inset:0}
.gl-pitch{position:absolute;inset:0}
/* o estádio é maior do que o cenário e encolhe à volta da baliza quando a câmara recua (--bk, --bko) */
.gl-back{position:absolute;top:-12%;bottom:-16%;left:-20%;right:-20%;transform:scale(var(--bk,1));transform-origin:50% var(--bko,40%);transition:transform .75s cubic-bezier(.3,.7,.25,1)}
.gl-back-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.gl-crowd{position:absolute;left:0;width:100%;pointer-events:none;will-change:transform}
.gl-pitch-svg{display:block;width:100%;height:100%}
.gl-pitch{opacity:0;transition:opacity .6s ease}
.gl-pitch.is-on{opacity:1}
.gl-vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 46%,transparent 58%,rgba(0,0,8,.42) 100%)}
.gl-roof{fill:#03050c}
.gl-tower{fill:#1b2233}
.gl-lamp{fill:#fff7d9}
.gl-grass-far{fill:#145a2b}
.gl-grass-a{fill:#1a7337}
.gl-grass-b{fill:#20843f}
.gl-lines{fill:none;stroke:#eef6ee;stroke-linecap:round;stroke-linejoin:round;opacity:.86}
.gl-spot{fill:#eef6ee;opacity:.85}
.gl-goal-shade{fill:#000;opacity:.3}
.gl-post-shadow{fill:#000;opacity:.2}
/* painéis LED com o logótipo da casa a andar da esquerda para a direita */
.gl-board-bg{fill:#06070c}
.gl-ad{fill:#7b1230}
.gl-ad.is-b{fill:#3f0918}
.gl-board-top{fill:#fff;opacity:.14}
.gl-ads-track{animation:gl-ads 34s linear infinite}
/* o rolo vai de −1000 a 1000: começa parado em 0 e anda 1000 para a direita (as duas metades são iguais) */
@keyframes gl-ads{from{transform:translateX(0)}to{transform:translateX(1000px)}}
/* a distância até à baliza (como na televisão), só enquanto escolhes */
.gl-dist{opacity:0;transition:opacity .35s}
.gl-scene.is-aiming .gl-dist{opacity:1}
.gl-dist-bg{fill:none;stroke:rgba(0,0,0,.35);stroke-width:5;stroke-linecap:round}
.gl-dist-ln{fill:none;stroke:#f2c14e;stroke-width:2.2;stroke-dasharray:3 7;stroke-linecap:round}
.gl-dist text{fill:#fff;font-family:var(--font-head);font-weight:800;letter-spacing:.02em;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#08101c;stroke-width:4px;stroke-linejoin:round}
/* o público: festa nos golos (salta em ondas, flashes) e "uuuh" nas defesas */
.gl-fl{fill:#fff;opacity:0}
.gl-ooh{fill:#000;opacity:0}
.gl-back.is-cheer .gl-crowd--a{animation:gl-jump .34s ease-in-out 6 alternate}
.gl-back.is-cheer .gl-crowd--b{animation:gl-jump .34s ease-in-out .17s 6 alternate}
@keyframes gl-jump{to{transform:translateY(-1.4%)}}
.gl-back.is-cheer .gl-fl{animation:gl-pop .45s ease-out 3}
.gl-back.is-cheer .gl-fl--1{animation-delay:.12s}
.gl-back.is-cheer .gl-fl--2{animation-delay:.27s}
.gl-back.is-cheer .gl-fl--3{animation-delay:.41s}
.gl-back.is-cheer .gl-fl--4{animation-delay:.55s}
.gl-back.is-cheer .gl-fl--5{animation-delay:.7s}
@keyframes gl-pop{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.gl-back.is-ooh .gl-ooh{animation:gl-ooh 1.8s ease-in-out}
@keyframes gl-ooh{30%{opacity:.3}100%{opacity:0}}

/* baliza: posição e tamanho vêm do goal-ui.js (--gx, --gy, --gw, --gh) e mudam a cada remate */
.gl-goal{position:absolute;z-index:2;left:var(--gx,18%);top:var(--gy,25%);width:var(--gw,64%);height:var(--gh,34%);container-type:inline-size;
  transition:left .75s cubic-bezier(.3,.7,.25,1),top .75s cubic-bezier(.3,.7,.25,1),width .75s cubic-bezier(.3,.7,.25,1),height .75s cubic-bezier(.3,.7,.25,1)}
.gl-goal-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gl-gk{position:absolute;left:calc(50% + var(--kx,0%));bottom:-1%;z-index:2;height:76%;aspect-ratio:100/130;transform:translate(-50%,0);transform-origin:50% 92%;pointer-events:none;transition:left .45s cubic-bezier(.3,.7,.3,1)}
.gl-gk.is-instant{transition:none}
/* pronto para defender: balança, dobra os joelhos e inclina-se para o sítio para onde estás a apontar */
.gl-gk-in{width:100%;height:100%;rotate:var(--lean,0deg);transform-origin:50% 95%;transition:rotate .25s ease-out}
.gl-scene.is-aiming .gl-gk-in{animation:gl-bob .85s ease-in-out infinite alternate}
@keyframes gl-bob{from{translate:0 0}to{translate:0 3%}}
.gl-gk-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.gl-bulge{position:absolute;z-index:1;width:34cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.55) 0,rgba(0,0,0,.28) 32%,rgba(0,0,0,0) 70%);opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.gl-gk .gk-arms--high{display:none}
.gl-gk.is-high .gk-arms--low{display:none}
.gl-gk.is-high .gk-arms--high{display:inline}
.gl-scene.is-aiming .gl-gk-svg{animation:gl-sway 1.7s ease-in-out infinite alternate}
@keyframes gl-sway{from{transform:translateX(-5%)}to{transform:translateX(5%)}}

/* sítios para rematar (o tamanho acompanha a baliza) */
.gl-targets{position:absolute;inset:0;z-index:3}
.gl-tg{position:absolute;width:clamp(22px,7.6cqw,50px);aspect-ratio:1;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.88);background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(0,0,0,.2);cursor:pointer;transform:translate(-50%,-50%);transition:transform .15s,background-color .15s,border-color .15s,opacity .25s}
.gl-targets[data-n="8"] .gl-tg{width:clamp(24px,9.6cqw,56px)}
.gl-targets[data-n="2"] .gl-tg{width:clamp(32px,15cqw,72px)}
.gl-tg::after{content:"";position:absolute;inset:32%;border-radius:50%;background:rgba(255,255,255,.75);transition:background-color .15s}
.gl-scene.is-aiming .gl-tg{animation:gl-pulse 1.9s ease-in-out infinite}
@keyframes gl-pulse{50%{box-shadow:0 0 0 7px rgba(255,255,255,.12)}}
.gl-tg:hover:not(:disabled),.gl-tg:focus-visible{border-color:#f2c14e;background:rgba(242,193,78,.36);transform:translate(-50%,-50%) scale(1.1)}
.gl-tg:hover:not(:disabled)::after,.gl-tg:focus-visible::after{background:#f2c14e}
.gl-tg:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gl-tg:disabled{cursor:default}
.gl-scene:not(.is-aiming) .gl-tg{opacity:.28;animation:none}
.gl-tg.is-pick{opacity:1!important;border-color:#f2c14e;background:rgba(242,193,78,.5)}
.gl-ripple{position:absolute;z-index:1;width:26cqw;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none;transform:translate(-50%,-50%)}

/* a mira: a curva que a bola vai fazer até ao sítio onde tens o rato (ou o foco do teclado) */
.gl-aim{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .2s}
.gl-aim.is-on{opacity:1}
.gl-aim-bg{fill:none;stroke:rgba(0,0,0,.35);stroke-width:5;stroke-linecap:round}
.gl-aim-ln{fill:none;stroke:#f2c14e;stroke-width:2.5;stroke-dasharray:2 9;stroke-linecap:round;animation:gl-march .6s linear infinite}
@keyframes gl-march{to{stroke-dashoffset:-11}}

/* bola: no chão, à esquerda, ao centro ou à direita (--bs = −1, 0, 1); a sombra fica no chão quando ela voa */
.gl-shadow{position:absolute;z-index:3;left:calc(50% + var(--bs,0) * var(--side,25%));top:calc(var(--by,88%) + var(--bwh,10%) * .46);width:calc(var(--bw,6%) * 1.2);aspect-ratio:3/1;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);opacity:.6;transform:translate(-50%,-50%);pointer-events:none;transition:left .45s cubic-bezier(.3,.7,.3,1)}
.gl-scene.is-over .gl-shadow{opacity:0}
.gl-ghost{position:absolute;z-index:4;left:calc(50% + var(--bs,0) * var(--side,25%));top:var(--by,88%);width:var(--bw,6%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e8ebe6 58%,rgba(255,255,255,0) 72%);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.gl-ball{position:absolute;z-index:4;left:calc(50% + var(--bs,0) * var(--side,25%));top:var(--by,88%);width:var(--bw,6%);aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 4px rgba(0,0,0,.42));pointer-events:none;transition:left .45s cubic-bezier(.3,.7,.3,1),opacity .3s}
.gl-ball.is-rolling .gl-ball-spin{animation:gl-spin .5s linear}
/* a perna de quem remata: entra por trás, bate na bola e sai */
.gl-boot{position:absolute;z-index:5;left:calc(50% + var(--bs,0) * var(--side,25%) + var(--bw,6%) * .3);top:calc(var(--by,88%) - var(--bwh,10%) * .55);width:calc(var(--bw,6%) * 1.1);aspect-ratio:60/100;opacity:0;pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.gl-boot-svg{display:block;width:100%;height:100%}
/* confetes no prémio máximo */
.gl-fx{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.gl-conf{position:absolute;top:-6%;width:8px;height:12px;border-radius:2px;background:#f2c14e;animation:gl-fall 2.2s cubic-bezier(.3,.5,.5,1) forwards}
.gl-conf--1{background:#a3213f}
.gl-conf--2{background:#fff}
.gl-conf--3{background:#35c98d;width:6px;height:10px}
@keyframes gl-fall{0%{transform:translate(0,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx,0),calc(var(--fall,640) * 1px)) rotate(var(--rot,360deg));opacity:0}}
.gl-ball.is-instant{transition:none}
.gl-ball-svg{display:block;width:100%;height:100%}
.gl-ball-spin{transform-origin:20px 20px}
.gl-ball.is-flying .gl-ball-spin{animation:gl-spin .42s linear infinite}
@keyframes gl-spin{to{transform:rotate(360deg)}}
.gl-ball.is-gone{opacity:0}
.gl-scene.is-instant .gl-goal,.gl-scene.is-instant .gl-ball,.gl-scene.is-instant .gl-pitch,.gl-scene.is-instant .gl-back,.gl-scene.is-instant .gl-shadow,.gl-scene.is-instant .gl-gk{transition:none}

/* de onde bates o livre (nos livres a 30, 50 e 70 m) */
.gl-from{position:absolute;z-index:3;inset:0;pointer-events:none}
.gl-from[hidden]{display:none}
.gl-spotbtn{position:absolute;top:calc(var(--by,88%) + var(--bwh,10%) * .62);display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;transform:translateX(-50%)}
.gl-spotbtn[data-gl-from="left"]{left:calc(50% - var(--side,25%))}
.gl-spotbtn[data-gl-from="center"]{left:50%}
.gl-spotbtn[data-gl-from="right"]{left:calc(50% + var(--side,25%))}
.gl-spotbtn::before{content:"";width:34px;height:9px;margin-top:-18px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.gl-spotbtn span{padding:4px 10px;border-radius:99px;background:rgba(6,12,24,.72);border:1px solid rgba(255,255,255,.35);font:800 11.5px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;transition:background-color .15s,border-color .15s,color .15s}
.gl-spotbtn:hover span,.gl-spotbtn:focus-visible span{border-color:#f2c14e}
.gl-spotbtn:focus-visible{outline:none}
.gl-spotbtn:focus-visible span{outline:2px solid #fff;outline-offset:2px}
.gl-spotbtn[aria-pressed="true"] span{background:#f2c14e;border-color:#f2c14e;color:#2b1206}
.gl-spotbtn[aria-pressed="true"]::before{opacity:0}

/* "Golo!" e "Defendido!" */
.gl-flash{position:absolute;left:50%;top:40%;z-index:6;margin:0;opacity:0;font:900 clamp(34px,7.5vw,74px)/1 var(--font-head);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:#f2c14e;-webkit-text-stroke:2px #4a0b1d;paint-order:stroke fill;text-shadow:0 8px 22px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%) scale(.6)}
.gl-flash.is-save{color:#fff;-webkit-text-stroke-color:#7b1230}
.gl-flash.is-on{animation:gl-flash 1.7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gl-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}28%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-64%) scale(1)}}

/* depois de um golo: retirar ou continuar */
.gl-card{position:absolute;left:50%;bottom:4%;z-index:7;display:grid;gap:8px;width:min(480px,92%);padding:14px 16px;border-radius:var(--r-md);background:rgba(18,9,14,.93);border:1px solid rgba(242,193,78,.5);box-shadow:0 16px 34px rgba(0,0,0,.5);color:#f6efe6;transform:translateX(-50%);animation:gl-card-in .35s cubic-bezier(.2,.8,.2,1)}
.gl-card[hidden]{display:none}
.gl-card p{margin:0;font-size:13.5px;line-height:1.45}
.gl-card .gl-card-h{font:900 21px/1.1 var(--font-head);letter-spacing:.02em;text-transform:uppercase;color:#f2c14e}
.gl-card .gl-card-x{font-weight:700}
.gl-card .gl-warn{padding:8px 10px;border-radius:var(--r-sm);border-left:3px solid #f59e0b;background:rgba(245,158,11,.17);font-weight:700}
.gl-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.gl-card-acts .btn{min-height:42px;padding-left:8px;padding-right:8px}
@keyframes gl-card-in{from{opacity:0;transform:translate(-50%,14px)}}
.gl-card.is-leaving{animation:gl-card-out .2s ease-in forwards;pointer-events:none}
@keyframes gl-card-out{to{opacity:0;transform:translate(-50%,14px)}}
@media(max-width:560px){
  .gl-card{bottom:3%;width:94%;padding:11px 12px;gap:6px}
  .gl-card p{font-size:12.5px}
  .gl-card .gl-card-h{font-size:18px}
}

.gl-status{min-height:22px;margin:0;text-align:center;font:600 14.5px/1.45 var(--font);color:var(--text)}
.gl-status.is-win{color:var(--ok);font-weight:700}
.gl-acts{display:grid;gap:8px}
.gl-note{margin:-2px 0 0;font-size:12.5px;color:var(--muted)}
.gl-levels{grid-template-columns:repeat(3,minmax(0,1fr))}

/* histórico: os remates de uma ronda */
.gl-hist{display:grid;gap:4px;margin:6px 0 8px;padding:0;list-style:none}
.gl-hist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:7px 10px;border-radius:var(--r-sm);background:var(--surface-2);border-left:3px solid #22c55e;font-size:13px}
.gl-hist li.is-save{border-left-color:#ef4444}
.gl-hist b{font-weight:700}
.gl-hist span{grid-column:1;color:var(--muted);font-size:12.5px}
.gl-hist em{grid-row:1/3;grid-column:2;align-self:center;font:800 11.5px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;font-style:normal;color:#22c55e}
.gl-hist li.is-save em{color:#ef4444}

@media (prefers-reduced-motion: reduce){
  .gl-ads-track,.gl-scene.is-aiming .gl-gk-in,.gl-aim-ln,.gl-back.is-cheer .gl-crowd--a,.gl-back.is-cheer .gl-crowd--b,.gl-back.is-cheer .gl-fl,.gl-back.is-ooh .gl-ooh{animation:none}
  .gl-back,.gl-gk,.gl-shadow{transition:none}
}
@media (prefers-reduced-motion: reduce){
  .gl-goal,.gl-ball,.gl-pitch,.gl-step{transition:none}
  .gl-scene.is-aiming .gl-gk-svg,.gl-scene.is-aiming .gl-tg,.gl-ball.is-flying .gl-ball-spin{animation:none}
  .gl-flash.is-on{animation:none;opacity:1;transform:translate(-50%,-50%)}
  .gl-card{animation:none}
}