/* SUPER GOAL — oyun kiti (tam ekran stadyum) */
:root{ --gk-accent:#16A34A; --gk-accent-d:#14532D; }
.sg-page .gk-chip, .sg-page .gk-iconbtn{ background:#132E57; border-color:#24497F; border-bottom-color:#06142B; }
.sg-dots{ display:flex; gap:6px; align-items:center; }
.sg-dots i{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:13px; }
.sg-dots i.cur{ border-color:var(--gk-gold); box-shadow:0 0 10px rgba(255,210,63,.6); }
.sg-dots i.goal{ background:#22C55E; border-color:#86EFAC; }
.sg-dots i.miss{ background:#EF4444; border-color:#FCA5A5; }

/* ---------- Saha ---------- */
.sg-field{ position:relative; flex:1; min-height:420px; border-radius:28px; overflow:hidden; border:3px solid #24497F; border-bottom:8px solid #06142B;
  background:linear-gradient(180deg,#07142E 0%,#0E2552 38%,#12305F 46%); user-select:none; }
.sg-light{ position:absolute; top:-6%; width:34%; height:60%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,230,.55), rgba(255,255,230,.12) 35%, transparent 70%); }
.sg-light.l{ left:-6%; transform:rotate(18deg); } .sg-light.r{ right:-6%; transform:rotate(-18deg); }
.sg-light::before{ content:''; position:absolute; top:4%; left:44%; width:12%; height:5%; border-radius:6px;
  background:repeating-linear-gradient(90deg,#FFFDE7 0 18%,#9CA3AF 18% 25%); box-shadow:0 0 30px 10px rgba(255,255,220,.7); }

/* tribün */
.sg-stands{ position:absolute; left:0; right:0; top:10%; height:42%;
  background:
    radial-gradient(circle at 50% 40%, #F87171 0 34%, transparent 36%) 0 0/22px 18px,
    radial-gradient(circle at 50% 40%, #FDE68A 0 34%, transparent 36%) 11px 9px/22px 18px,
    radial-gradient(circle at 50% 40%, #93C5FD 0 30%, transparent 32%) 5px 4px/33px 27px,
    radial-gradient(circle at 50% 40%, #FFFFFF 0 26%, transparent 28%) 17px 13px/29px 23px,
    linear-gradient(180deg,#1E1B4B,#312E81 70%,#1E1B4B);
  opacity:.9; }
.sg-stands.cheer{ animation:sgCheer .35s ease-in-out 6; }
.sg-stands.sigh{ animation:sgSigh 1.2s ease-in-out; }
.sg-ads{ position:absolute; left:0; right:0; top:50%; height:5%; min-height:18px; overflow:hidden; display:flex; align-items:center;
  background:linear-gradient(90deg,#FFD23F,#F97316,#EC4899,#7C3AED,#2563EB,#16A34A,#FFD23F); background-size:200% 100%; animation:sgAds 8s linear infinite; }
.sg-ads span{ white-space:nowrap; font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(10px,1.6vh,16px); color:#fff; letter-spacing:3px; text-shadow:0 1px 0 rgba(0,0,0,.35); animation:sgTicker 18s linear infinite; }

/* çim */
.sg-pitch{ position:absolute; left:0; right:0; top:55%; bottom:0; overflow:hidden; perspective:600px; }
.sg-grass{ position:absolute; left:-40%; right:-40%; top:0; bottom:-30%; transform-origin:50% 0; transform:rotateX(38deg);
  background:repeating-linear-gradient(90deg,#2F9E44 0 6%,#37B24D 6% 12%); }
.sg-box{ position:absolute; left:18%; right:18%; top:0; height:42%; border:4px solid rgba(255,255,255,.75); border-top:0; }
.sg-box.small{ left:32%; right:32%; height:18%; }
.sg-spot{ position:absolute; left:50%; top:74%; width:12px; height:8px; margin-left:-6px; border-radius:50%; background:rgba(255,255,255,.85); }

/* dev ekran */
.sg-screen{ position:absolute; left:50%; top:2.5%; height:45%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column;
  aspect-ratio:16/10; max-width:62%; padding:8px; border-radius:18px; background:#0A0A12; border:4px solid #2B2B3A; box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 3px #111; }
.sg-screen-img{ flex:1; min-height:0; border-radius:10px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.sg-screen-img img{ width:100%; height:100%; object-fit:contain; display:block; animation:sgScreenIn .5s ease-out; }
.sg-screen-img .sg-emoji{ font-size:72px; }
.sg-ticker{ margin-top:6px; height:26px; flex-shrink:0; border-radius:8px; background:#111827; color:#FDE68A; display:flex; align-items:center; gap:8px; padding:0 10px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(12px,1.9vh,17px); white-space:nowrap; overflow:hidden; }
.sg-ticker b{ color:#F87171; font-size:.8em; letter-spacing:1px; }
.sg-ticker span{ animation:sgScreenIn .4s ease-out; overflow:hidden; text-overflow:ellipsis; }

/* kale */
.sg-goal{ position:absolute; left:50%; top:49%; width:62%; height:33%; transform:translateX(-50%); z-index:4; }
.sg-frame{ position:absolute; inset:0; border:clamp(6px,1vw,12px) solid #F8FAFC; border-bottom:0; border-radius:6px 6px 0 0; box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.08); z-index:2; pointer-events:none; }
.sg-net{ position:absolute; inset:0; z-index:0; background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, rgba(10,30,60,.55), rgba(10,40,30,.35)); }
.sg-net.hit{ animation:sgNet .7s ease-out; }
.sg-bulge{ position:absolute; width:30%; aspect-ratio:1; border-radius:50%; z-index:1; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); }
.sg-bulge.go{ animation:sgBulge .8s ease-out; }

/* hedef tabelaları */
.sg-target{ position:absolute; top:7%; width:30%; min-height:30%; z-index:3; cursor:pointer; border:0; border-radius:16px; padding:6px 8px;
  background:#FFFFFF; color:#1B1740; border-bottom:6px solid #CBD5E1; box-shadow:0 6px 16px rgba(0,0,0,.3);
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(15px,2.4vw,34px); line-height:1.05; white-space:nowrap; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:transform .15s, background .2s, opacity .3s; }
.sg-target::before{ content:''; position:absolute; inset:-6px; border-radius:20px; border:3px dashed rgba(255,210,63,.0); transition:border-color .2s; }
.sg-target:hover:not(:disabled){ transform:translateY(-4px) scale(1.04); }
.sg-target:hover:not(:disabled)::before{ border-color:rgba(255,210,63,.9); }
.sg-target:disabled{ cursor:default; }
.sg-target.t0{ left:3%; } .sg-target.t1{ left:35%; } .sg-target.t2{ left:67%; }
.sg-target.ok{ background:#22C55E; color:#fff; border-bottom-color:#15803D; animation:gkPop .5s cubic-bezier(.34,1.56,.64,1); }
.sg-target.bad{ background:#EF4444; color:#fff; border-bottom-color:#B91C1C; animation:gkShake .45s; }
.sg-target.dim{ opacity:.35; }
.sg-goal.intro .sg-target{ animation:sgSign .45s cubic-bezier(.34,1.56,.64,1) both; }
.sg-goal.intro .sg-target.t1{ animation-delay:.08s; } .sg-goal.intro .sg-target.t2{ animation-delay:.16s; }

/* kaleci */
.sg-keeper{ position:absolute; left:50%; bottom:-2%; width:21%; height:62%; margin-left:-10.5%; z-index:2; transform-origin:50% 90%;
  transition:transform .42s cubic-bezier(.25,.9,.35,1.15); pointer-events:none; }
.sg-keeper svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.sg-keeper.idle svg{ animation:sgSway 1.6s ease-in-out infinite; }
.sg-keeper.dive-l{ transform:translate(-125%,-18%) rotate(-72deg); }
.sg-keeper.dive-r{ transform:translate(125%,-18%) rotate(72deg); }
.sg-keeper.dive-c{ transform:translateY(-38%) scale(1.05); }
.sg-keeper.cheer svg{ animation:sgJump .4s ease-in-out 3; }

/* top */
.sg-ball{ position:absolute; left:50%; bottom:6%; width:clamp(46px,6.5vh,78px); aspect-ratio:1; margin-left:calc(clamp(46px,6.5vh,78px) / -2); z-index:6; pointer-events:none;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.45)); }
.sg-ball.ready{ animation:sgBounce 1.4s ease-in-out infinite; }
.sg-shadow{ position:absolute; left:50%; bottom:5%; width:clamp(40px,5.5vh,66px); height:12px; margin-left:calc(clamp(40px,5.5vh,66px) / -2); border-radius:50%; background:rgba(0,0,0,.35); z-index:5; }

/* spiker yazısı */
.sg-call{ position:absolute; left:50%; top:52%; z-index:10; transform:translate(-50%,-50%) scale(.2) rotate(-8deg); opacity:0; pointer-events:none; text-align:center;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(46px,11vh,120px); line-height:.95; color:#FFD23F; white-space:nowrap;
  -webkit-text-stroke:3px #7C2D12; text-shadow:0 6px 0 #7C2D12, 0 12px 30px rgba(0,0,0,.5); }
.sg-call small{ display:block; white-space:normal; max-width:80vw; margin-left:auto; margin-right:auto; font-size:.32em; -webkit-text-stroke:0; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.5); margin-top:6px; }
.sg-call.red{ color:#FCA5A5; -webkit-text-stroke-color:#7F1D1D; text-shadow:0 6px 0 #7F1D1D, 0 12px 30px rgba(0,0,0,.5); }
.sg-call.blue{ color:#BFDBFE; -webkit-text-stroke-color:#1E3A8A; text-shadow:0 6px 0 #1E3A8A, 0 12px 30px rgba(0,0,0,.5); }
.sg-call.show{ animation:sgCall 1.7s cubic-bezier(.34,1.56,.64,1) forwards; }
.sg-flash{ position:absolute; inset:0; z-index:9; pointer-events:none; background:radial-gradient(circle at 50% 55%, rgba(255,230,120,.55), transparent 60%); opacity:0; }
.sg-flash.go{ animation:sgFlash .9s ease-out; }

@keyframes sgCheer{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); filter:brightness(1.35); } }
@keyframes sgSigh{ 0%,100%{ filter:none; } 50%{ filter:brightness(.6) saturate(.6); } }
@keyframes sgAds{ to{ background-position:200% 0; } }
@keyframes sgTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes sgScreenIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes sgNet{ 0%{ transform:none; } 25%{ transform:scale(1.04,1.07) translateY(3%); filter:brightness(1.4); } 60%{ transform:scale(.99,.98); } 100%{ transform:none; } }
@keyframes sgBulge{ 0%{ opacity:.9; transform:translate(-50%,-50%) scale(.2); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(2.2); } }
@keyframes sgSign{ from{ transform:translateY(-30px) scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sgSway{ 0%,100%{ transform:translateX(-7%) rotate(-2deg); } 50%{ transform:translateX(7%) rotate(2deg); } }
@keyframes sgJump{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14%); } }
@keyframes sgBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8%); } }
@keyframes sgCall{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-8deg); } 18%{ opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(-3deg); }
  30%{ transform:translate(-50%,-50%) scale(1) rotate(-3deg); } 80%{ opacity:1; transform:translate(-50%,-50%) scale(1.03) rotate(-3deg); } 100%{ opacity:0; transform:translate(-50%,-60%) scale(.9) rotate(-3deg); } }
@keyframes sgFlash{ 0%{ opacity:0; } 20%{ opacity:1; } 100%{ opacity:0; } }

@media (max-width:980px){
  .sg-dots i{ width:16px; height:16px; font-size:10px; }
}
@media (max-width:640px){
  .sg-dots{ display:none; }
  .sg-field{ min-height:560px; border-radius:20px; }
  .sg-screen{ max-width:92%; height:36%; top:2%; }
  .sg-stands{ top:6%; height:40%; }
  .sg-ads{ top:44%; }
  .sg-pitch{ top:48%; }
  .sg-goal{ width:94%; top:44%; height:32%; }
  .sg-target{ font-size:20px; border-radius:12px; border-bottom-width:4px; min-height:34%; }
  .sg-keeper{ width:24%; margin-left:-12%; height:58%; }
  .sg-call{ font-size:48px; -webkit-text-stroke-width:2px; }
  .sg-box{ left:6%; right:6%; }
}