/* ============================================================
   Tactico11 — style.css  ·  "Dark Glassmorphism" tasarım sistemi
   ------------------------------------------------------------
   Bölümler:
     0. Tasarım değişkenleri (token'lar) + açık tema
     1. Sıfırlama / tipografi / yardımcı sınıflar
     2. Uygulama kabuğu: header.top · nav.bottom · main
     3. Yüzeyler: .card .stat .glass · listeler .item · tablolar
     4. Kontroller: .btn .inp .seg .tabs .pill .pos .ovr .bar
     5. Modal / toast / çerez / tur / maç sonu (.mend)
     6. Giriş ekranı (.hero)
     7. Taktik sahası (.pitch .slot .bench) · taktik kartları (.tcard)
     8. CANLI MAÇ: .scoreboard (üst tabela) · .lpitch (saha) · .tok (oyuncu)
        · top/pas çizgileri · .hud (alt HUD: oyuncu / minimap / aksiyon+feed)
     9. Diğer ekran bileşenleri (görev, başarım, düello, quiz, hava, sezon kartı…)
   Not: Bütün sınıf adları app.js şablonlarıyla birebir eşleşir; sınıf
   eklemek/çıkarmak serbesttir, var olan adları yeniden adlandırma.
   ============================================================ */

/* ---------- 0. TOKEN'LAR ---------- */
:root{
  /* zemin ve cam yüzeyler */
  --bg:#050912;                         /* en arka zemin */
  --bg2:#0b1220;                        /* modal / toast zemini */
  --glass:rgba(15,23,42,.75);           /* cam kart (referans: rgba(15,23,42,.75)) */
  --glass2:rgba(30,41,59,.55);          /* ikinci kademe cam (hover, seçili) */
  --card:var(--glass);                  /* app.js'te kullanılan ad */
  --card2:var(--glass2);
  --line:rgba(255,255,255,.08);         /* ince cam kenarı */
  --line2:rgba(255,255,255,.16);
  --blur:8px;
  /* metin */
  --txt:#FFFFFF;--txt2:#CBD5E1;--muted:#94A3B8;
  /* neon vurgular */
  --acc:#22C55E;--acc2:#10B981;         /* fosforlu yeşil: enerji / seçili / birincil */
  --info:#3B82F6;--info2:#60A5FA;       /* elektrik mavisi */
  --warn:#FBBF24;--bad:#F43F5E;
  --glow-acc:0 0 18px rgba(34,197,94,.45);
  --glow-info:0 0 18px rgba(59,130,246,.45);
  /* ölçüler */
  --r:14px;--r-sm:10px;--r-pill:999px;--nav:64px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"]{
  --bg:#EEF2F7;--bg2:#FFFFFF;--glass:rgba(255,255,255,.78);--glass2:rgba(15,23,42,.06);
  --line:rgba(15,23,42,.10);--line2:rgba(15,23,42,.18);
  --txt:#0F172A;--txt2:#334155;--muted:#5B6778;
  --acc:#15803D;--acc2:#16A34A;--info:#1D4ED8;--info2:#2563EB;--warn:#B45309;--bad:#DC2626;
  --glow-acc:0 0 14px rgba(22,163,74,.3);--glow-info:0 0 14px rgba(37,99,235,.3);
}

/* ---------- 1. SIFIRLAMA / TİPOGRAFİ / YARDIMCILAR ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px;line-height:1.45;min-height:100%}
body{background:
  radial-gradient(1100px 620px at 50% -12%,rgba(59,130,246,.22) 0%,transparent 60%),
  radial-gradient(900px 560px at 100% 100%,rgba(34,197,94,.16) 0%,transparent 60%),
  radial-gradient(700px 500px at 0% 60%,rgba(16,185,129,.10) 0%,transparent 60%),
  var(--bg);overscroll-behavior-y:contain}
:root[data-theme="light"] body{background:radial-gradient(1100px 620px at 50% -12%,#cfe3ff 0%,transparent 60%),radial-gradient(900px 560px at 100% 100%,#d5f5e0 0%,transparent 60%),var(--bg)}
a{color:var(--acc);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em;color:var(--txt)}
h1{font-size:26px}h2{font-size:19px}h3{font-size:16px}
.muted{color:var(--muted)}.small{font-size:12.5px}.tiny{font-size:11px}
.acc{color:var(--acc)}.bad{color:var(--bad)}.warn{color:var(--warn)}.info{color:var(--info2)}
.b{font-weight:700}.mono{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:6px}.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}.center{justify-content:center;text-align:center}.sb{justify-content:space-between}
.hide{display:none!important}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand{color:var(--txt)}.flag{font-size:14px}
::selection{background:rgba(34,197,94,.35)}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}

/* cam yüzey — tek yerde tanımlı, diğer bileşenler bunu miras alır */
.glass,.card,.stat,.toast,.sheet,.cbanner,.scoreboard-top,.hud>div,.tcard,.seqbar{
  background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--line)}
/* iç öğeler: blur'suz yarı saydam (mobilde performans için) */
.item,.seg,.tabs button,.qrow,.ach,.qopt,.wx,.ev,.msg{background:rgba(15,23,42,.55);border:1px solid var(--line)}
:root[data-theme="light"] .item,:root[data-theme="light"] .seg,:root[data-theme="light"] .tabs button,:root[data-theme="light"] .qrow,:root[data-theme="light"] .ach,:root[data-theme="light"] .qopt,:root[data-theme="light"] .wx,:root[data-theme="light"] .ev,:root[data-theme="light"] .msg{background:rgba(255,255,255,.7)}

/* ---------- 2. UYGULAMA KABUĞU ---------- */
#app{max-width:1100px;margin:0 auto;padding:0 0 calc(var(--nav) + var(--sab) + 20px)}
header.top{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(5,9,18,.72);border-bottom:1px solid var(--line);padding:calc(10px + var(--sat)) 14px 10px;display:flex;align-items:center;gap:12px}
:root[data-theme="light"] header.top{background:rgba(238,242,247,.82)}
header.top .logo{display:flex;align-items:center;color:var(--txt)}
header.top .logo .ball{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 20deg,#22C55E,#10B981,#3B82F6,#22C55E);box-shadow:var(--glow-acc)}
header.top .budget{margin-left:auto;font-weight:800;background:var(--glass2);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-pill);font-size:13px;color:var(--acc);transition:.2s var(--ease)}
header.top .budget:hover{box-shadow:var(--glow-acc);transform:translateY(-1px)}
main{padding:14px}
nav.bottom{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav) + var(--sab));z-index:30;display:flex;justify-content:space-around;align-items:stretch;background:rgba(5,9,18,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:var(--sab)}
:root[data-theme="light"] nav.bottom{background:rgba(255,255,255,.9)}
nav.bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10.5px;font-weight:700;position:relative;padding:0 2px;transition:.2s var(--ease)}
nav.bottom a .ic{font-size:21px;line-height:1;transition:transform .2s var(--ease)}
nav.bottom a:hover .ic{transform:translateY(-2px) scale(1.08)}
nav.bottom a.on{color:var(--acc);text-shadow:0 0 12px rgba(34,197,94,.6)}
nav.bottom a.on::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--info));box-shadow:var(--glow-acc)}
nav.bottom .nav2{display:none}
nav.bottom a .dot{position:absolute;top:8px;right:22%;width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px var(--bad)}
nav.bottom a .badge{position:absolute;top:6px;right:18%;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--bad);color:#fff;font-size:10px;line-height:16px;text-align:center}
@media(min-width:900px){
  #app{display:grid;grid-template-columns:220px 1fr;gap:0;padding-bottom:20px}
  header.top{grid-column:1/-1}
  nav.bottom{position:sticky;top:57px;height:auto;flex-direction:column;justify-content:flex-start;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:14px;gap:4px;align-self:start}
  nav.bottom a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 14px;border-radius:var(--r-sm);font-size:14px}
  nav.bottom a.on{background:var(--glass);border:1px solid var(--line)}
  nav.bottom a.on::before{display:none}
  nav.bottom a .dot{right:10px;top:50%;transform:translateY(-50%)}
  nav.bottom .nav2{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  nav.bottom .nav2 a{font-size:13px;padding:9px 14px;color:var(--muted)}
  nav.bottom .nav2 a .ic{font-size:17px}
  nav.bottom .nav2 a.on{color:var(--acc)}
}

/* ---------- 3. YÜZEYLER ---------- */
.card{border-radius:var(--r);padding:14px;margin-bottom:12px;box-shadow:0 8px 30px -18px rgba(0,0,0,.8)}
.card.glow{border-color:rgba(34,197,94,.4);box-shadow:0 0 0 1px rgba(34,197,94,.15),0 12px 40px -18px rgba(34,197,94,.7)}
.card h2,.card h3{margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:700px){.grid2m{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
.stat{border-radius:var(--r-sm);padding:10px 12px}
.stat .v{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--txt)}.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stat.click{cursor:pointer;transition:.2s var(--ease)}.stat.click:hover{background:var(--glass2);transform:translateY(-1px)}
.stat .v.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);transition:.18s var(--ease)}
.item:active{transform:scale(.99)}
.item.click{cursor:pointer}.item.click:hover{background:var(--glass2);border-color:var(--line2);transform:translateX(2px)}
.item .nm{font-weight:700;color:var(--txt)}
.item .sub{font-size:12px;color:var(--txt2)}
.item.me{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
button.item{width:100%;text-align:left;color:inherit}
.av{border-radius:50%;background:radial-gradient(circle at 30% 25%,#1e293b,#0b1220);flex:none;overflow:hidden;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.kit{flex:none;display:block}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:6px 6px;font-weight:700}
td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle;color:var(--txt2)}
td.n,th.n{text-align:center}
tr.me td{background:rgba(34,197,94,.08);color:var(--txt)}
tr.click{cursor:pointer}tr.click:hover td{background:var(--glass2)}
.empty{text-align:center;color:var(--muted);padding:26px 10px}

/* ---------- 4. KONTROLLER ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:var(--r-sm);font-weight:700;color:var(--txt);background:var(--glass2);border:1px solid var(--line2);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,border-color .18s;white-space:nowrap}
.btn:hover{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.5);box-shadow:var(--glow-info);transform:translateY(-1px) scale(1.02)}
.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(135deg,#22C55E,#10B981);color:#03140a;border:0;box-shadow:0 8px 24px -10px rgba(34,197,94,.9)}
.btn.p:hover{box-shadow:0 0 22px rgba(34,197,94,.55),0 8px 24px -10px rgba(34,197,94,.9);filter:brightness(1.06)}
.btn.d{background:rgba(244,63,94,.14);color:#fda4af;border-color:rgba(244,63,94,.35)}
.btn.d:hover{box-shadow:0 0 16px rgba(244,63,94,.4);border-color:var(--bad)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.xs{padding:4px 9px;font-size:12px;border-radius:8px}
.btn.w{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent}
.inp{width:100%;padding:11px 13px;border-radius:var(--r-sm);background:rgba(2,6,23,.55);border:1px solid var(--line2);outline:0;color:var(--txt);transition:.18s}
.inp::placeholder{color:var(--muted)}
.inp:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
:root[data-theme="light"] .inp{background:#fff}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
label.lbl{display:block;font-size:11.5px;color:var(--muted);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);overflow-x:auto}
.seg button{flex:1;padding:8px 10px;border-radius:8px;font-weight:700;color:var(--muted);white-space:nowrap;transition:.18s var(--ease)}
.seg button:hover{color:var(--txt)}
.seg button.on{background:linear-gradient(135deg,rgba(34,197,94,.9),rgba(16,185,129,.9));color:#03140a;box-shadow:var(--glow-acc)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tabs button{padding:8px 14px;border-radius:var(--r-pill);font-weight:700;color:var(--txt2);white-space:nowrap;transition:.18s var(--ease)}
.tabs button:hover{border-color:var(--line2);transform:translateY(-1px)}
.tabs button.on{background:linear-gradient(135deg,#22C55E,#10B981);color:#03140a;border-color:transparent;box-shadow:var(--glow-acc)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;background:var(--glass2);border:1px solid var(--line);color:var(--txt2)}
.pill.acc{color:var(--acc);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
.pill.warn{color:var(--warn)}.pill.bad{color:#fda4af;border-color:rgba(244,63,94,.35)}
.pos{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;border-radius:7px;font-size:11px;font-weight:900;color:#03140a}
.pos.KL{background:#FBBF24}.pos.SV{background:#60A5FA}.pos.OS{background:#22C55E}.pos.FV{background:#F472B6}
.ovr{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;border-radius:10px;font-weight:900;font-size:15px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid var(--line2)}
.ovr.g1{color:#94A3B8}.ovr.g2{color:#E2E8F0}.ovr.g3{color:#22C55E}.ovr.g4{color:#FBBF24;border-color:rgba(251,191,36,.45)}.ovr.g5{color:#F472B6;border-color:rgba(244,114,182,.55);box-shadow:0 0 14px -4px #F472B6}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3B82F6,#22C55E)}
.bar.warm i{background:linear-gradient(90deg,#F59E0B,#F43F5E)}
.progress{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#3B82F6,#22C55E);box-shadow:var(--glow-acc)}
.skillrow{display:grid;grid-template-columns:92px 1fr 32px;align-items:center;gap:8px;font-size:13px;margin:5px 0}
.lvl{display:flex;gap:3px}.lvl i{width:14px;height:8px;border-radius:2px;background:var(--line2)}.lvl i.on{background:var(--acc);box-shadow:0 0 6px rgba(34,197,94,.6)}
.form-dots{display:flex;gap:3px}
.form-dots i{width:10px;height:10px;border-radius:3px;background:var(--muted)}
.form-dots i.W{background:var(--acc);box-shadow:0 0 6px rgba(34,197,94,.6)}.form-dots i.D{background:var(--warn)}.form-dots i.L{background:var(--bad)}
.cd{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.spin{width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:rot .8s linear infinite;margin:40px auto}
@keyframes rot{to{transform:rotate(360deg)}}
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--txt);-webkit-box-shadow:0 0 0 1000px #0b1220 inset;transition:background-color 9999s}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.15s}
.sw:hover{transform:scale(1.12)}.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--acc),var(--glow-acc)}
.avpick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.avopt{width:44px;height:44px;border-radius:12px;border:2px solid transparent;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.avopt:hover{transform:scale(1.08)}.avopt.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(34,197,94,.3),var(--glow-acc)}
.chip{padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--glass2);color:var(--txt);font-size:13px;cursor:pointer;transition:.15s}
.chip.on{border-color:var(--acc);background:rgba(34,197,94,.15);color:var(--acc)}
.mgrchip{display:inline-flex;width:20px;height:20px;border-radius:6px;align-items:center;justify-content:center;font-size:12px;vertical-align:middle}
.vf{color:#03140a;background:var(--acc);border-radius:var(--r-pill);font-size:11px;padding:0 5px;font-weight:900;vertical-align:middle}
.capbadge{display:inline-block;background:#FBBF24;color:#000;font-weight:900;font-size:10px;border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center;margin-left:4px}
.loanpill{background:rgba(59,130,246,.18);color:#93C5FD}
.derby{color:#FB7185;font-weight:900;letter-spacing:.06em}
.hl{animation:hlpulse 2.2s ease-out}@keyframes hlpulse{0%{box-shadow:0 0 0 3px var(--acc)}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- 5. MODAL / TOAST / ÇEREZ / TUR / MAÇ SONU ---------- */
.overlay{position:fixed;inset:0;background:rgba(2,6,23,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:rgba(11,18,32,.9);border-radius:22px 22px 0 0;padding:16px 16px calc(26px + var(--sab));animation:up .25s var(--ease);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
:root[data-theme="light"] .sheet{background:rgba(255,255,255,.95)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:700px){.overlay{align-items:center}.sheet{border-radius:22px}}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.x{width:34px;height:34px;border-radius:50%;background:var(--glass2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.15s}
.x:hover{background:rgba(244,63,94,.2);border-color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav) + var(--sab) + 16px);transform:translateX(-50%);background:rgba(11,18,32,.92);padding:10px 16px;border-radius:var(--r-sm);z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:up .25s;max-width:92vw;font-weight:700}
.toast.bad{border-color:var(--bad);box-shadow:0 0 16px rgba(244,63,94,.35)}.toast.ok{border-color:var(--acc);box-shadow:var(--glow-acc)}.toast.warn{border-color:var(--warn)}
.cbanner{position:fixed;left:12px;right:12px;bottom:calc(var(--nav) + var(--sab) + 12px);z-index:70;border-radius:var(--r);padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:560px;margin:0 auto;animation:up .25s;background:rgba(11,18,32,.92)}
@media(min-width:900px){.cbanner{bottom:16px}}
.tour{position:fixed;inset:0;z-index:65;background:rgba(2,6,23,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.tour .tourbox{width:min(480px,100%);margin-bottom:calc(var(--nav) + var(--sab))}
.mend{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadein .3s}
.mend .box{width:min(420px,92vw);border-radius:22px;padding:22px 18px;text-align:center;background:rgba(11,18,32,.85);border:1px solid var(--line2);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(59,130,246,.15);animation:popin .5s cubic-bezier(.2,1.4,.4,1);position:relative;overflow:hidden}
.mend .res{font-size:34px;font-weight:900;letter-spacing:-.02em}
.mend .res.acc{text-shadow:0 0 22px rgba(34,197,94,.7)}
.mend .sc{font-size:44px;font-weight:900;font-variant-numeric:tabular-nums;margin:6px 0}
.mend .conf i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:conf 2.2s linear forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes popin{from{transform:scale(.7);opacity:0}}
@keyframes fadein{from{opacity:0}}

/* ---------- 6. GİRİŞ EKRANI ---------- */
.hero{min-height:calc(100vh - 20px);display:flex;flex-direction:column;justify-content:center;padding:calc(22px + var(--sat)) 18px 22px;max-width:480px;margin:0 auto}
.hero .big{font-size:38px;font-weight:900;line-height:1.05;letter-spacing:-.03em;background:linear-gradient(120deg,#fff 20%,#22C55E 60%,#3B82F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.feature{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13.5px;color:var(--txt2)}
.feature .ic{font-size:20px;filter:drop-shadow(0 0 8px rgba(59,130,246,.5))}

/* ---------- 7. TAKTİK SAHASI / KARTLAR ---------- */
.pitch{position:relative;width:100%;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:repeating-linear-gradient(0deg,#15633a 0 12.5%,#186d40 12.5% 25%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 70px rgba(0,0,0,.5),0 10px 40px -20px rgba(0,0,0,.9)}
.pitch svg.lines{position:absolute;inset:0;width:100%;height:100%}
.slot{position:absolute;transform:translate(-50%,-50%);width:66px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:.15s}
.slot .kitwrap{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(2,6,23,.45);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.slot.empty .kitwrap{border-style:dashed;color:#fff;font-size:22px}
.slot.sel .kitwrap{border-color:var(--acc);box-shadow:0 0 0 4px rgba(34,197,94,.35),var(--glow-acc)}
.slot .nm{font-size:10.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.slot .ov{position:absolute;bottom:-4px;right:-4px;background:#0b1220;color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:1px 5px;border:1px solid var(--line2)}
.slot .pp{position:absolute;top:-5px;left:-6px;font-size:9px;font-weight:900;border-radius:6px;padding:1px 4px;color:#03140a;border:1px solid rgba(0,0,0,.4);line-height:1.2}
.slot .pp.KL{background:#FBBF24}.slot .pp.SV{background:#60A5FA}.slot .pp.OS{background:#22C55E}.slot .pp.FV{background:#F472B6}
.slot .pp.bad{box-shadow:0 0 0 2px var(--warn)}
.slot .oop{position:absolute;top:-4px;right:-6px;background:var(--warn);color:#000;font-size:9px;font-weight:800;border-radius:6px;padding:1px 4px}
.bench{display:flex;gap:8px;overflow-x:auto;padding:8px 2px}
.bench .slot{position:static;transform:none;flex:none}
.pitch .slot,.bench .slot{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.slot.dragging{opacity:.35}
.slot.dropover .kitwrap{outline:3px solid var(--acc);outline-offset:2px;border-radius:50%;transform:scale(1.12);box-shadow:var(--glow-acc)}
.slot.ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-55%) scale(1.15);filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));opacity:.95}
.slot.ghost .nm{color:#fff}
.hand{display:flex;gap:8px;overflow-x:auto;padding:4px 2px}
.tcard{flex:none;width:118px;padding:10px;border-radius:var(--r);cursor:pointer;transition:.2s var(--ease);position:relative;background:linear-gradient(160deg,rgba(30,41,59,.8),rgba(15,23,42,.8))}
.tcard:hover{transform:translateY(-2px);border-color:var(--line2)}
.tcard .ic{font-size:26px}.tcard .n{font-weight:800;font-size:12.5px;margin-top:4px}.tcard .d{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.tcard.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(34,197,94,.4),0 10px 28px -10px var(--acc);transform:translateY(-3px)}
.tcard .chk{position:absolute;top:6px;right:8px;color:var(--acc);font-weight:900}

/* ---------- 8. CANLI MAÇ ---------- */
/* 8a. Üst tabela: ekranın üstünde, ortalanmış, yarı saydam cam kapsayıcı */
.scoreboard-top{position:sticky;top:calc(56px + var(--sat));z-index:15;margin:0 auto 10px;max-width:720px;border-radius:var(--r);padding:8px 10px 6px;box-shadow:0 12px 40px -16px rgba(0,0,0,.9),0 0 0 1px rgba(59,130,246,.12)}
.scoreboard-top .meta{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 4px}
.scoreboard .tm{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-weight:800;font-size:13px;color:var(--txt);transition:.15s}
.scoreboard .tm:hover{transform:translateY(-1px)}
.scoreboard .sc{white-space:nowrap;font-size:36px;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#fff;background:linear-gradient(180deg,rgba(2,6,23,.75),rgba(2,6,23,.45));padding:4px 18px;border-radius:var(--r-sm);border:1px solid var(--line2);text-shadow:0 0 14px rgba(59,130,246,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.minute{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.minute .live{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
/* kim atakta çubuğu */
.atk{margin-top:2px;padding:6px 8px 4px;border-top:1px solid var(--line)}
.atkline{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;justify-content:center}
.atkline .pdot{width:9px;height:9px;border-radius:50%;animation:blink 1s infinite;flex:none}
.atkline .arw{font-size:11px;letter-spacing:1px;color:var(--acc);display:inline-block}
.atkline .arw.r{animation:slideR 1.1s infinite}.atkline .arw.l{animation:slideL 1.1s infinite}
@keyframes slideR{0%{opacity:.3;transform:translateX(-4px)}50%{opacity:1}100%{opacity:.3;transform:translateX(5px)}}
@keyframes slideL{0%{opacity:.3;transform:translateX(5px)}50%{opacity:1}100%{opacity:.3;transform:translateX(-4px)}}
.mom{display:flex;height:7px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin:5px 0 3px}
.mom i{display:block;height:100%;transition:width .6s ease}

/* 8b. Saha */
.lpitch{position:relative;width:100%;aspect-ratio:100/62;border-radius:var(--r);overflow:hidden;background:repeating-linear-gradient(90deg,#14632f 0 10%,#176e36 10% 20%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 90px rgba(0,0,0,.45),0 14px 44px -22px rgba(0,0,0,.9)}
.lpitch.big{aspect-ratio:100/72}
.lpitch svg{position:absolute;inset:0;width:100%;height:100%}
:root[data-theme="light"] .lpitch{filter:saturate(.95)}
.atkg{position:absolute;top:0;bottom:0;width:55%;left:0;pointer-events:none;opacity:0;transition:opacity .5s,left .6s ease;z-index:1}
.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .3s}
.flash.on{opacity:1}
/* 8c. Oyuncu jetonları */
.tok{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;z-index:2;width:52px}
.tok .tk{position:relative;width:24px;height:24px;border-radius:50%;border:2px solid #fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.6);transition:transform .15s}
.tok .tk .bd{position:absolute;top:-8px;right:-10px;font-size:10px;line-height:1;letter-spacing:-2px}
.tok .tk .rt{position:absolute;bottom:-7px;right:-12px;background:#0b1220;color:#fff;font-size:8.5px;padding:0 3px;border-radius:6px;border:1px solid var(--line2)}
.tok .tk .rt.g{color:var(--acc)}.tok .tk .rt.b{color:var(--bad)}
.tok .tk .ov{font-size:10px;font-weight:900;line-height:1;letter-spacing:-.5px}
.tok .tk .rl{position:absolute;top:-7px;left:-9px;font-size:8px;font-weight:900;line-height:11px;height:11px;padding:0 3px;border-radius:5px;color:#03140a;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.tok .tk .rl.KL{background:#FBBF24}.tok .tk .rl.SV{background:#60A5FA}.tok .tk .rl.OS{background:#22C55E}.tok .tk .rl.FV{background:#F472B6}
.tok .tk.q5{box-shadow:0 0 0 2px rgba(244,114,182,.85),0 2px 6px rgba(0,0,0,.6)}
.tok .tk.q4{box-shadow:0 0 0 2px rgba(251,191,36,.8),0 2px 6px rgba(0,0,0,.6)}
.tok .tk.q3{box-shadow:0 0 0 2px rgba(34,197,94,.6),0 2px 6px rgba(0,0,0,.6)}
.tok .nm{font-size:8.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;max-width:54px;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
:root[data-theme="light"] .tok .nm{color:#fff}
.tok .fb{width:26px;height:3px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden}.tok .fb i{display:block;height:100%}
.tok:hover .tk{transform:scale(1.15)}
.tok.sel .tk{outline:2px solid var(--info2);outline-offset:2px;box-shadow:var(--glow-info)}
.tok.has .tk{box-shadow:0 0 0 3px var(--hc,#fff),0 0 16px 2px var(--hc,#fff),0 2px 6px rgba(0,0,0,.6);animation:holderPulse .9s ease-in-out infinite}
@keyframes holderPulse{50%{transform:scale(1.18)}}
@media(min-width:700px){.tok{width:70px}.tok .tk{width:28px;height:28px;font-size:10px}.tok .nm{font-size:10px;max-width:70px}.tok .tk .ov{font-size:12px}.tok .tk .rl{font-size:9px;line-height:13px;height:13px}}
/* 8d. Top, iz, pas çizgileri */
.ball{position:absolute;width:17px;height:17px;border-radius:50%;z-index:4;background:radial-gradient(circle at 34% 28%,#fff,#dcdcdc 55%,#8a8a8a);box-shadow:0 0 0 2px rgba(255,255,255,.35),0 3px 9px rgba(0,0,0,.7),0 0 14px rgba(255,255,255,.35);transform:translate(-50%,-50%);transition:left 1.2s cubic-bezier(.3,.8,.3,1),top 1.2s cubic-bezier(.3,.8,.3,1)}
.ball.shot{animation:ballshot .5s ease}
@keyframes ballshot{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.75)}100%{transform:translate(-50%,-50%) scale(1)}}
.btrail{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;opacity:.75;animation:btfade .75s ease forwards}
@keyframes btfade{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}}
.blines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.blines .pl{opacity:.85;animation:plfade .9s ease forwards}
@keyframes plfade{0%{opacity:.9}100%{opacity:0}}
.seqbar{margin-top:6px;padding:7px 10px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px;line-height:1.3}
.seqbar .sdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.seqbar i{font-style:normal;color:var(--muted);opacity:.7}
.seqbar.pop{animation:seqpop .3s ease}
@keyframes seqpop{from{opacity:.35;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* 8e. GOL afişi */
.goalbanner{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;animation:gbfade 3.2s ease forwards;background:radial-gradient(circle,rgba(0,0,0,.35),transparent 70%)}
.goalbanner .gtxt{position:relative;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:.95;text-align:center;color:#fff;text-shadow:0 0 18px var(--gc,#22C55E),0 4px 0 rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.6);max-width:100%;overflow:hidden;padding:0 6px}
.goalbanner .gtxt span{display:block;font-size:clamp(22px,6.5vw,48px);animation:gbpop .6s cubic-bezier(.2,1.6,.4,1) both}
.goalbanner .gtxt span:nth-child(2){font-size:clamp(28px,8vw,60px);animation-delay:.35s;color:var(--gc2,#fff)}
.goalbanner .gtxt span:nth-child(3){font-size:clamp(32px,9.5vw,72px);animation-delay:.7s;color:#22C55E}
.goalbanner .gsub{margin-top:6px;font-weight:800;font-size:clamp(12px,3vw,18px);color:#fff;background:rgba(0,0,0,.55);padding:4px 12px;border-radius:var(--r-pill);animation:gbpop .5s 1s cubic-bezier(.2,1.6,.4,1) both}
.goalbanner.theirs .gtxt span:nth-child(3){color:#F43F5E}
@keyframes gbpop{from{transform:scale(.2) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes gbfade{0%,80%{opacity:1}100%{opacity:0}}
/* 8f. ALT HUD: sol oyuncu · orta minimap · sağ aksiyon + spiker akışı */
.hud{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
@media(min-width:700px){.hud{grid-template-columns:1.1fr .9fr 1.4fr;align-items:stretch}}
.hud>div{border-radius:var(--r);padding:10px}
.hud-player{display:flex;flex-direction:column;gap:8px;min-height:120px}
.hud-player .who{display:flex;align-items:center;gap:10px}
.hud-player .who .tk{width:40px;height:40px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.hud-player .who .nm{font-weight:800;font-size:15px;color:var(--txt)}
.hud-player .who .sub{font-size:11.5px;color:var(--txt2)}
.hud-player .stbar{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.hud-player .stbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F43F5E 0%,#FBBF24 45%,#22C55E 100%);background-size:var(--w,100%) 100%;box-shadow:0 0 10px rgba(34,197,94,.45)}
.hud-player .stbar.low i{box-shadow:0 0 10px rgba(244,63,94,.5)}
.hud-player .kv{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt2)}
.hud-player .empty{padding:14px 6px;font-size:12.5px}
.hud-mini{display:flex;flex-direction:column;gap:6px}
.hud-mini .mini{position:relative;width:100%;aspect-ratio:100/62;border-radius:8px;background:rgba(20,99,47,.55);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.hud-mini .mini::before{content:'';position:absolute;inset:6% 4%;border:1px solid rgba(255,255,255,.22);border-radius:2px}
.hud-mini .mini::after{content:'';position:absolute;left:50%;top:6%;bottom:6%;width:1px;background:rgba(255,255,255,.22)}
.hud-mini .md{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.7);transition:left .6s ease,top .6s ease}
.hud-mini .md.has{box-shadow:0 0 0 2px #fff,0 0 8px #fff;z-index:2}
.hud-mini .mb{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 6px #fff;z-index:3;transition:left 1.2s cubic-bezier(.3,.8,.3,1),top 1.2s cubic-bezier(.3,.8,.3,1)}
.hud-mini .lg{display:flex;justify-content:space-between;font-size:10.5px;color:var(--txt2)}
.hud-actions{display:flex;flex-direction:column;gap:8px;min-width:0}
.hud-actions .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hud-actions .acts .btn{padding:8px 6px;font-size:12px;border-radius:var(--r-sm);flex-direction:column;gap:2px;white-space:normal;line-height:1.15}
.hud-actions .acts .btn .ic{font-size:18px}
.hud-actions .feedhd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:800;color:var(--txt)}
.feed{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.feed.compact{max-height:34vh}
.hud-actions .feed{max-height:220px}
.ev{display:flex;gap:10px;padding:8px 10px;border-radius:var(--r-sm);animation:pop .35s ease;color:var(--txt2)}
.ev .m{font-weight:800;color:var(--muted);min-width:30px;font-variant-numeric:tabular-nums}
.ev.goal{background:linear-gradient(90deg,rgba(34,197,94,.25),rgba(15,23,42,.7));border-color:rgba(34,197,94,.55);font-weight:700;color:#fff;box-shadow:var(--glow-acc)}
.ev.red{border-color:rgba(244,63,94,.6)}.ev.yellow{border-color:rgba(251,191,36,.5)}.ev.save{border-color:rgba(59,130,246,.5)}
.ev.h{border-left:4px solid var(--hc,#fff)}.ev.a{border-left:4px solid var(--ac,#fff)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.statbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.statbar .tr{display:flex;height:8px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.statbar .tr i{display:block;height:100%}

/* ---------- 9. DİĞER EKRAN BİLEŞENLERİ ---------- */
.chatbox{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto;padding:4px 0}
.msg{padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--txt2)}
.msg .who{font-weight:700;color:var(--info2);font-size:12px}.msg.me .who{color:var(--acc)}.msg.sys{background:rgba(34,197,94,.08)}
.qrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm)}
.qrow.done{opacity:.55}.qrow .ic{font-size:22px;width:30px;text-align:center}
.qrow .bar{height:6px}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ach{border-radius:var(--r);padding:10px 6px;text-align:center;position:relative;transition:.18s var(--ease)}
.ach:hover{transform:translateY(-2px)}
.ach .ic{font-size:28px;line-height:1.1}.ach .n{font-size:11px;font-weight:700;margin-top:4px;line-height:1.2}
.ach.lock{filter:grayscale(1);opacity:.45}.ach.new{border-color:var(--acc);box-shadow:var(--glow-acc)}
.recap canvas{width:100%;height:auto;border-radius:16px;border:1px solid var(--line2)}
.daily{border-color:rgba(251,191,36,.35)}.daily.ready{border-color:var(--warn);box-shadow:0 0 22px rgba(251,191,36,.25);background:linear-gradient(135deg,rgba(251,191,36,.14),transparent 60%),var(--glass)}
.daily .gift{font-size:40px;line-height:1}.daily.ready .gift{animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.08)}}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 6px;border:1px solid var(--line2);border-radius:16px;background:var(--glass2);transition:transform .15s}
.box:active{transform:scale(.95)}.box .lid{font-size:44px;line-height:1}
.box.shake{animation:shake .5s ease-in-out infinite;border-color:var(--warn)}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) translateY(-3px)}75%{transform:rotate(8deg) translateY(-3px)}}
.reveal{text-align:center;padding:14px 8px;animation:popin .5s cubic-bezier(.2,1.4,.4,1)}
.reveal .ric{font-size:64px;line-height:1.1}.reveal .rt{font-size:24px;font-weight:900;margin-top:6px}
.pkgoal{position:relative;aspect-ratio:1.55;border:4px solid #e5e7eb;border-bottom:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:4px;overflow:visible}
.pkgoal .net{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:12px 12px;pointer-events:none;border-radius:6px 6px 0 0}
.pkgoal .zone{position:relative;z-index:1;border:1px dashed rgba(255,255,255,.25);border-radius:8px;background:rgba(0,0,0,.15);color:var(--muted);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;min-height:38px;transition:.12s}
.pkgoal .zone:active{transform:scale(.95)}.pkgoal .zone.on{background:rgba(34,197,94,.3);border-color:var(--acc);color:#fff;box-shadow:inset 0 0 12px rgba(34,197,94,.4)}
.pkgoal .zone:disabled{opacity:.7}
.pkgoal .gk,.pkgoal .bl{position:absolute;z-index:2;transform:translate(-50%,-50%);font-size:26px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.pkgoal .gk{font-size:30px}
.spinbig{animation:spinb 1.4s linear infinite;display:inline-block}@keyframes spinb{to{transform:rotate(360deg)}}
:root[data-theme="light"] .pkgoal{border-color:#334155}:root[data-theme="light"] .pkgoal .zone{background:rgba(255,255,255,.6)}
.qopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-sm);color:inherit;font-size:14px;transition:.15s}
.qopt:hover{border-color:var(--line2)}
.qopt .ql{width:26px;height:26px;border-radius:50%;background:var(--glass2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.qopt.on{border-color:var(--acc);background:rgba(34,197,94,.12)}.qopt.on .ql{background:var(--acc);color:#03140a}
.qopt.qok{border-color:var(--acc);background:rgba(34,197,94,.18)}.qopt.qbad{border-color:var(--bad);background:rgba(244,63,94,.15)}
.wx{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-sm);margin:8px 0 10px;font-size:12.5px}
.wx .wxi{font-size:22px}
.wx.storm,.wxcard.storm{border-color:rgba(244,63,94,.5)}.wx.snow,.wxcard.snow{border-color:rgba(147,197,253,.6)}.wx.rain,.wxcard.rain{border-color:rgba(59,130,246,.5)}.wx.hot,.wxcard.hot{border-color:rgba(251,146,60,.6)}.wx.wind,.wxcard.wind{border-color:rgba(34,197,94,.4)}.wx.fog,.wxcard.fog{border-color:rgba(148,163,184,.5)}
.wxfx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.wxfx.rain,.wxfx.storm{background-image:repeating-linear-gradient(115deg,transparent 0 14px,rgba(200,230,255,.35) 14px 15px);background-size:40px 60px;animation:rainfall .5s linear infinite;opacity:.55}
.wxfx.storm{opacity:.75;animation-duration:.32s}
.wxfx.storm::after{content:'';position:absolute;inset:0;background:#fff;opacity:0;animation:lightning 6s infinite}
.wxfx.snow{background-image:radial-gradient(circle,rgba(255,255,255,.9) 1.5px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1.5px);background-size:38px 38px,23px 23px;background-position:0 0,11px 7px;animation:snowfall 5s linear infinite;opacity:.8}
.wxfx.fog{background:linear-gradient(90deg,rgba(226,232,240,.35),rgba(226,232,240,.15),rgba(226,232,240,.4));animation:fogdrift 8s ease-in-out infinite alternate}
.wxfx.hot{background:radial-gradient(circle at 80% 15%,rgba(251,191,36,.35),transparent 45%)}
.wxfx.wind{background-image:repeating-linear-gradient(170deg,transparent 0 30px,rgba(255,255,255,.18) 30px 31px);background-size:120px 60px;animation:windblow .9s linear infinite;opacity:.5}
@keyframes rainfall{to{background-position:-20px 60px}}
@keyframes snowfall{to{background-position:8px 38px,-6px 23px}}
@keyframes fogdrift{to{transform:translateX(6%)}}
@keyframes windblow{to{background-position:120px 0}}
@keyframes lightning{0%,88%,100%{opacity:0}89%{opacity:.7}90%{opacity:0}92%{opacity:.4}93%{opacity:0}}

/* iOS ana ekran (standalone) modu */
@media (display-mode: standalone){
  html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  input,textarea{-webkit-user-select:text;user-select:text}
  body{position:relative;min-height:100dvh}
  .overlay{align-items:flex-end}
  .mend{padding-top:var(--sat)}
}
/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}