:root{
  /* SquadXO — Stadyum Gecesi (yeşil), koyu/lüks */
  --bg:#050806; --panel:#0c120e; --panel-2:#0e1712; --line:#1e2c1b;
  --edge:rgba(255,255,255,.06);          /* kartların üst ışık kenarı */
  --x:#22e06a; --o:#38bdf8; --txt:#eaf3ea; --muted:#7f9a84;
  --accent:#ff7a1a; --streak:#ff7a1a; --danger:#ef4444;
  --radius:16px;
  --shadow:0 12px 30px -16px rgba(0,0,0,.75);   /* yumuşak, derin */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
/* Klavye kullanıcısı için görünür odak (fare/dokunuşta çıkmaz) */
:focus-visible{outline:2px solid var(--x);outline-offset:2px;}
.cell:focus-visible{outline-offset:-2px;border-radius:11px;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);overflow-x:hidden;touch-action:pan-y;}   /* overflow-x + touch-action:pan-y: hiçbir sayfa YATAY kaymasın/kaydırılamasın (yatay swipe kapalı; oyunda yatay gereksinim yok) */
html{background:var(--bg);}   /* iOS/Capacitor: safe-area altındaki webview beyazı görünmesin */
/* Stadyum gecesi arka planı — INLINE SVG (DOM'a enjekte, app.js) → telefonda native çözünürlük, piksel yok.
   (background-image olarak SVG WKWebView'de düşük-res rasterize olup pikselleniyordu.) */
.stadium-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#050806;overflow:hidden;}
.stadium-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
body{
  background:transparent;   /* ÖNEMLİ: body opak arkaplanı, z-index:-1 olan .stadium-bg'yi örtüyordu (stadyum "yok olma" bug'ının sebebi). Şeffaf → stadyum görünür. Taban rengi html'de (var(--bg)). */
  color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  display:flex; flex-direction:column; align-items:center;
  padding: calc(12px + var(--safe-top)) 12px calc(16px + var(--safe-bot)); min-height:100%;
  /* Kullanıcı ekrandaki metinleri seçemesin/kopyalayamasın + iOS uzun-bas menüsü (kopyala/ara) kapalı */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* İstisna: yazı yazılan alanlar (takma ad, cevap, PvP kodu) seçilebilir/düzenlenebilir kalır */
input,textarea{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
/* ===== WEB reklam yerleşimi (sadece .is-web; native'de gizli) ===== */
.ad-rail,.ad-banner{display:none;}   /* varsayılan gizli; media query + .is-web açar */
.ad-placeholder{color:var(--muted);
  font:600 12px/1 'Archivo',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 10px,rgba(255,255,255,.04) 10px 20px);
  border:1px dashed var(--border);border-radius:12px;}
/* Masaüstü: oyunun iki yanında dikey ray (yalnız geniş ekran + yeterli boşluk) */
@media (min-width:1080px){
  body.is-web .ad-rail{display:flex;align-items:center;justify-content:center;
    position:fixed;top:50%;transform:translateY(-50%);width:300px;height:600px;z-index:5;}
  body.is-web .ad-left{left:max(16px,calc(50% - 230px - 316px));}
  body.is-web .ad-right{right:max(16px,calc(50% - 230px - 316px));}
  body.is-web .ad-rail .ad-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
}
/* Mobil/dar web: altta sabit banner (yan ray YOK) */
@media (max-width:1079px){
  body.is-web .ad-banner{display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:6;height:60px;
    padding:4px 10px calc(4px + var(--safe-bot));background:rgba(5,8,6,.92);
    backdrop-filter:blur(8px);border-top:1px solid var(--border);}
  body.is-web .ad-banner .ad-placeholder{height:52px;width:100%;max-width:468px;
    display:flex;align-items:center;justify-content:center;}
  body.is-web{padding-bottom:calc(76px + var(--safe-bot));}   /* banner oyunu/indir butonunu örtmesin */
}

/* ===== WEB-ONLY bilgi/SEO bölümü (oyunun altında; native'de gizli) ===== */
.web-info{display:none;}
body.is-web .web-info{display:block;width:100%;max-width:460px;margin:36px auto 0;padding:22px 16px 28px;
  border-top:1px solid var(--border);color:var(--muted);font-size:14px;line-height:1.55;
  -webkit-user-select:text;user-select:text;}
body.is-web .web-info h1{font-size:18px;color:var(--txt);margin:0 0 10px;}
body.is-web .web-info h2{font-size:15px;color:var(--txt);margin:20px 0 6px;}
body.is-web .web-info h3{font-size:14px;color:var(--txt);margin:14px 0 2px;}
body.is-web .web-info p,body.is-web .web-info li{margin:.35em 0;}
body.is-web .web-info ol,body.is-web .web-info ul{padding-left:1.2em;margin:.3em 0;}
body.is-web .web-info b{color:var(--txt);font-weight:600;}
body.is-web .web-info a{color:var(--x);}
body.is-web .web-info .web-info-links{margin-top:18px;font-size:13px;}
body.is-web .web-info .web-info-copy{font-size:11.5px;opacity:.6;}

/* ===== Ekran yönetimi ===== */
.screen{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;}
.hidden{display:none !important;}
.icon-btn{flex:0 0 auto;width:38px;height:38px;padding:0;font-size:24px;line-height:1;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--txt);}

/* ===== Menü ===== (kural: ekran ASLA kaydırma gerektirmemeli → kompakt ölçek) */
#menu{gap:11px;flex:1 1 auto;justify-content:flex-start;padding:16px 0 8px;}   /* butonlar birbirine yakın (kullanıcı: aralarında çok boşluk vardı) */
#menu > button.menu-card{flex:0 0 auto;}
.logo-wrap{text-align:center;margin:62px 0 2px;display:flex;flex-direction:column;align-items:center;}   /* profil chip üstte (top:2px, ~46px) → altında net boşluk */
.logo-icon{width:64px;height:64px;margin-bottom:8px;filter:drop-shadow(0 0 16px rgba(45,220,110,.55));}
.brand-big{font-size:34px;font-weight:900;letter-spacing:-.5px;line-height:1;}
.brand-big span{color:var(--x);text-shadow:0 0 22px rgba(34,224,106,.3);}
.brand-sub{color:var(--muted);font-size:11px;font-weight:800;margin-top:6px;letter-spacing:2.2px;}
.streak-badge{background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.55);color:var(--streak);
  font-weight:800;font-size:12.5px;letter-spacing:.2px;padding:6px 14px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
/* Seri yokken davetkâr ama sessiz görünüm */
.streak-badge.zero{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--muted);}
.menu-card{width:100%;text-align:left;padding:22px 18px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%),rgba(12,18,14,.72);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge),var(--shadow);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;flex-direction:row;align-items:center;gap:12px;transition:transform .1s ease,border-color .15s;}
.menu-card:active{transform:scale(.985);}
.menu-card.primary-card{border-color:rgba(34,224,106,.6);
  background:linear-gradient(180deg,rgba(34,224,106,.16),rgba(34,224,106,.04) 55%),rgba(12,22,15,.72);
  box-shadow:inset 0 1px 0 rgba(34,224,106,.2),0 14px 34px -16px rgba(34,224,106,.3),var(--shadow);}
.mc-body{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
.mc-chev{width:22px;height:22px;flex:0 0 auto;color:var(--x);opacity:.9;}
.mc-title{font-size:18px;font-weight:800;letter-spacing:-.2px;}
.mc-sub{font-size:12.5px;color:var(--muted);font-weight:600;}
.menu-foot{color:var(--muted);font-size:10.5px;opacity:.5;letter-spacing:.5px;padding-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.7);}
.get-app{align-self:center;margin-top:2px;padding:9px 18px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:600 13px/1 'Archivo',system-ui,sans-serif;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .1s ease,border-color .15s ease;}
.get-app:hover{border-color:var(--accent);transform:translateY(-1px);}
.get-app:active{transform:translateY(0);}
.get-app.hidden{display:none;}

/* ===== Zorluk seçici (segmented) ===== */
.diff-toggle{width:100%;display:flex;gap:5px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:5px;box-shadow:inset 0 1px 0 var(--edge);}
.diff-opt{flex:1;padding:9px 8px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-weight:800;font-size:15px;transition:background .15s,color .15s,border-color .15s;}
.diff-opt.active{background:linear-gradient(180deg,rgba(34,224,106,.16),rgba(34,224,106,.04));
  color:var(--txt);border-color:rgba(34,224,106,.55);box-shadow:inset 0 1px 0 rgba(34,224,106,.14);}
.diff-opt[data-diff="hard"].active{background:linear-gradient(180deg,rgba(255,122,26,.16),rgba(255,122,26,.04));
  border-color:rgba(255,122,26,.55);color:#ffd9bd;box-shadow:inset 0 1px 0 rgba(255,122,26,.14);}
/* Country×Club: menü axis seçici (Klasik / Ülkeler) — Kolay/Zor ile TEK satır (yan yana) */
.settings-row{display:flex;gap:8px;align-items:stretch;width:100%;}   /* TAM GENİŞLİK (kartlarla hizalı, toggle'lar sıkışmaz/taşmaz) */
.settings-row .seg{flex:1;min-width:0;}   /* iki toggle eşit (dengeli) */
.settings-row .diff-opt,.settings-row .axis-opt{padding:8px 4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:clip;}
.axis-opt{flex:1;padding:8px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-weight:800;font-size:14px;transition:background .15s,color .15s,border-color .15s;}
.axis-opt.active{background:linear-gradient(180deg,rgba(34,224,106,.16),rgba(34,224,106,.04));
  color:var(--txt);border-color:rgba(34,224,106,.55);}
.axis-opt[data-axis="country_club"].active{background:linear-gradient(180deg,rgba(56,150,230,.18),rgba(56,150,230,.05));
  border-color:rgba(56,150,230,.6);color:#cfe6ff;}
/* Ülke başlığı (bayrak / kod rozeti) — kulüp arması boyutuyla uyumlu */
.head .country-crest{width:32px;height:37px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent),#0e1a12;border:1px solid var(--line);}
.head .country-crest .flag{font-size:22px;line-height:1;}
.head .country-crest .ccode{font-size:12px;font-weight:900;color:var(--txt);letter-spacing:.5px;}
.rg-head.rg-country{display:flex;align-items:center;justify-content:center;}
.rg-head.rg-country .flag{font-size:18px;line-height:1;}
.rg-head.rg-country .ccode{font-size:10px;font-weight:900;color:var(--txt);}

/* ===== Football IQ kartı (menü) ===== */
/* Profil chip (menü sağ üst köşe): avatar + IQ — büyük IQ kartının yerine, menüyü ferahlatır */
#menu{position:relative;}
.profile-chip{position:absolute;top:2px;left:2px;z-index:6;cursor:pointer;   /* body zaten safe-top pad'liyor → burada TEKRAR ekleme (çift sayım chip'i logoya indiriyordu) */
  display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge),0 2px 8px rgba(0,0,0,.3);
  transition:border-color .15s;}
.profile-chip:hover{border-color:var(--edge);}
.pc-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:block;}
.pc-av .av-img,.pc-av .av-ini{width:34px;height:34px;border-radius:50%;font-size:14px;}
.pc-info{display:flex;flex-direction:column;line-height:1;text-align:left;}
.pc-iq{font-size:17px;font-weight:900;color:var(--x);font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.pc-lbl{font-size:7.5px;font-weight:800;letter-spacing:1.3px;color:var(--muted);margin-top:2px;}
.lg-badge{width:18px;height:18px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:900;color:#fff;letter-spacing:.2px;flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);}

/* ===== Football IQ Profil ekranı ===== */
#profile{gap:9px;flex:1 1 auto;justify-content:center;}
.prof-hero{width:100%;text-align:center;border-radius:var(--radius);padding:14px 16px 12px;
  background:linear-gradient(180deg,rgba(34,224,106,.06),transparent 45%),var(--panel-2);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge),var(--shadow);}
.prof-iq-row{display:flex;align-items:baseline;justify-content:center;gap:6px;}
.prof-iq{font-size:54px;font-weight:900;color:var(--x);line-height:1;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(34,224,106,.32);}
.prof-cap{font-size:20px;font-weight:800;color:var(--muted);}
.prof-tier{font-size:12.5px;font-weight:900;letter-spacing:2.2px;margin-top:5px;}
.prof-top{font-size:12px;color:var(--muted);font-weight:700;margin-top:3px;}
.iq-meter{position:relative;height:10px;border-radius:999px;margin:11px 4px 5px;overflow:hidden;
  background:linear-gradient(90deg,rgba(134,149,174,.35),rgba(125,211,252,.3),rgba(34,224,106,.35),rgba(56,189,248,.3),rgba(245,197,66,.35),rgba(192,132,252,.4));}
.iq-meter-fill{height:100%;width:0;background:var(--x);border-radius:999px;box-shadow:0 0 14px rgba(34,224,106,.55);transition:width .5s ease;}
.iq-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-weight:800;padding:0 4px;}
.prof-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:7px;width:100%;}
.stat-tile{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 55%),var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:9px 4px;text-align:center;box-shadow:inset 0 1px 0 var(--edge);}
.st-ico{font-size:16px;line-height:1;}
.st-val{font-size:17px;font-weight:900;color:var(--txt);margin-top:4px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-lbl{font-size:9.5px;color:var(--muted);font-weight:700;margin-top:2px;line-height:1.15;}
.prof-leagues{width:100%;display:flex;flex-direction:column;gap:6px;}
.lg-row{display:flex;align-items:center;gap:10px;}
.lg-name{font-size:12px;font-weight:700;color:var(--txt);width:96px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-bar{flex:1;height:8px;border-radius:999px;background:#0a110c;border:1px solid var(--line);overflow:hidden;}
.lg-fill{height:100%;background:linear-gradient(90deg,#18a850,#22e06a);border-radius:999px;}
.lg-val{font-size:13px;font-weight:800;color:var(--x);width:32px;text-align:right;font-variant-numeric:tabular-nums;}
.empty{color:var(--muted);font-size:13px;font-weight:600;padding:6px 0;line-height:1.4;}

/* ===== Profil: ayar satırı + anahtar ===== */
.prefs{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
/* Verilerimi Sil (profil altı, danger) */
.prof-danger{width:100%;margin-top:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;}
.danger-link{background:transparent;border:1px solid rgba(255,90,90,.35);color:#ff7a7a;
  font-size:12.5px;font-weight:800;padding:8px 16px;border-radius:10px;cursor:pointer;transition:.15s;}
.danger-link:active{transform:scale(.97);} .danger-link:hover{background:rgba(255,90,90,.08);}
.prof-danger-note{font-size:10.5px;line-height:1.35;color:var(--muted);max-width:320px;}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 55%),var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;box-shadow:inset 0 1px 0 var(--edge);}
.pref-lbl{font-size:12.5px;font-weight:700;color:var(--txt);white-space:nowrap;}
.pref-sw{flex:0 0 auto;width:44px;height:26px;padding:0;border-radius:999px;position:relative;
  background:#0a110c;border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);transition:background .18s,border-color .18s;}
.pref-sw .knob{position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;
  background:#4c5c50;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .18s ease,background .18s;}
.pref-sw.on{background:linear-gradient(180deg,rgba(34,224,106,.3),rgba(34,224,106,.12));border-color:rgba(34,224,106,.6);}
.pref-sw.on .knob{transform:translateX(18px);background:var(--x);box-shadow:0 0 10px rgba(34,224,106,.6);}
/* Dil seçici (profil pref) — kompakt segmented TR/EN */
.pref-row-wide{grid-column:1/-1;}   /* dil satırı: 2 sütunlu prefs gridinde tam genişlik */
.lang-seg{display:flex;gap:4px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:3px;flex:0 0 auto;}
.lang-opt{flex:0 0 auto;padding:5px 8px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:800;font-size:12px;line-height:1;}   /* 4 dil (TR EN PT ES) tek segmente sığsın */
.lang-opt.active{background:linear-gradient(180deg,rgba(34,224,106,.16),rgba(34,224,106,.04));color:var(--txt);border-color:rgba(34,224,106,.55);}

/* ===== Tier rozeti (kare üstünde) ===== */
.cell .tier{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:7.5px;font-weight:900;letter-spacing:.5px;
  border:1px solid;border-radius:5px;padding:1px 4px;opacity:.95;white-space:nowrap;z-index:1;background:rgba(5,8,6,.7);}

/* ===== Sonuç ekranı ===== */
.result-inner{text-align:center;}
.result-title{font-size:21px;font-weight:900;margin-bottom:6px;}
.result-score{margin-bottom:6px;}
.res-line{font-size:15px;font-weight:700;color:var(--txt);}
.res-iq{font-size:13px;font-weight:800;color:var(--muted);margin-top:6px;}
.res-iq b{color:var(--x);font-size:24px;font-variant-numeric:tabular-nums;}
.res-cap{color:var(--muted);font-size:13px;font-weight:700;}
.res-gain{color:var(--accent);margin-left:2px;}
.res-gain.neg{color:var(--o,#ff6b6b);}   /* düelloda IQ düşüşü — negatif kazanç kırmızımsı */
/* Süre yarışı: sonuç ekranında oyuncu süreleri + bildirimde süre */
.vs-time{font-size:12px;font-weight:800;color:var(--accent);margin-top:2px;font-variant-numeric:tabular-nums;}
.notif-time{font-size:11px;font-weight:700;color:var(--muted);}
/* Rövanş (rematch) kutusu — canlı düello sonuç ekranı */
.rematch-box{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.rematch-msg{font-size:13px;font-weight:800;text-align:center;line-height:1.25;}
.rematch-msg.want{color:var(--accent);}
.rematch-msg.no{color:var(--muted);}
.rematch-btn{width:100%;}
.rematch-msg.hidden,.rematch-box.hidden{display:none;}
/* Meydan okuma bildirimleri (üstte sabit overlay — no-scroll'u etkilemez) */
.notif{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:60;width:min(92vw,420px);display:flex;flex-direction:column;gap:6px;}
.notif.hidden{display:none;}
.notif-card{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px;box-shadow:0 6px 22px rgba(0,0,0,.4);animation:notifIn .3s ease;}
.notif-card.win{border-color:var(--accent);}
.notif-card.loss{border-color:var(--o);}
@keyframes notifIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.notif-av{flex:0 0 auto;width:28px;height:28px;}
.notif-txt{flex:1;font-size:13px;font-weight:600;line-height:1.25;}
.notif-play{flex:0 0 auto;background:var(--accent);color:#05210f;border:none;border-radius:8px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;}
.notif-x{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
/* LB satırındaki meydan-oku butonu */
.lb-challenge{flex:0 0 auto;background:none;border:none;font-size:17px;cursor:pointer;padding:2px 4px;opacity:.8;margin-left:2px;}
.lb-challenge:hover{opacity:1;transform:scale(1.12);}
.lb-challenge.online{opacity:1;filter:drop-shadow(0 0 5px var(--accent));}   /* online rakip → parlak ⚔️ */
/* Online noktası (presence) */
.lb-av{position:relative;}
.lb-online{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22e06a;border:2px solid var(--panel);}
/* ZORUNLU güncelleme ekranı — tam-ekran, en üstte, kapatılamaz */
.update-gate{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;}
.update-gate.hidden{display:none;}
.ug-inner{max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.ug-icon{font-size:60px;line-height:1;}
.ug-title{font-size:23px;font-weight:800;}
.ug-msg{font-size:15px;color:var(--muted);line-height:1.45;}
.ug-btn{margin-top:6px;background:var(--accent);color:#05210f;border:none;border-radius:14px;padding:14px 28px;font-size:17px;font-weight:800;cursor:pointer;}
/* Yumuşak güncelleme banner — üstte sabit (no-scroll etkilemez) */
.update-soft{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:50%;transform:translateX(-50%);z-index:61;width:min(92vw,420px);display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:8px 10px;box-shadow:0 6px 22px rgba(0,0,0,.4);}
.update-soft.hidden{display:none;}
.us-txt{flex:1;font-size:13px;font-weight:700;}
.us-btn{flex:0 0 auto;background:var(--accent);color:#05210f;border:none;border-radius:8px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;}
.us-x{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
.res-tier-inline{font-weight:800;letter-spacing:.2px;margin-left:4px;}
.res-rare{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:5px;}
/* Skor kartı önizlemesi: TAM kart (kırpma yok), ekrana sığacak kadar küçük */
.share-img{display:block;height:min(26vh,230px);width:auto;max-width:100%;object-fit:contain;
  margin:10px auto 2px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;}

/* Ekranda dikeyde ORTALANAN modal (sonuç) + köşe kapatma butonu */
.sheet.center-sheet{align-items:center;z-index:40;}   /* onay/sonuç diyaloğu leaderboard (z-22) ÜSTÜNDE açılsın (arkada kalma bug'ı) */
.center-sheet .sheet-inner{margin-top:0;max-height:88dvh;overflow-y:auto;position:relative;}
.sheet-x{position:absolute;top:8px;right:8px;width:32px;height:32px;flex:0 0 auto;padding:0;
  font-size:22px;line-height:1;border-radius:10px;color:var(--muted);background:transparent;border:1px solid transparent;}
.sheet-x:hover{color:var(--txt);border-color:var(--line);}

.top{width:100%;max-width:460px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.brand{font-weight:800;letter-spacing:.5px;font-size:18px;}

/* ===== Game HUD (oyun ekranı üst bilgi paneli) ===== */
.game-top{width:100%;max-width:460px;display:flex;align-items:stretch;gap:10px;margin-bottom:10px;}
.game-top .icon-btn{align-self:center;}
.hud{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 55%),rgba(12,18,14,.74);
  border:1px solid var(--line);border-radius:14px;padding:8px 12px;
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.hud-me{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto;}
.hud-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,#173a24,#0c1a11);border:1px solid rgba(34,224,106,.5);color:var(--x);
  box-shadow:0 0 10px rgba(34,224,106,.25);overflow:hidden;}
.hud-av svg{width:22px;height:22px;}
.hud-id{min-width:0;}
/* HUD isim: uzunsa BAR BÜYÜMEZ — max-width sabit, taşan kısım kayan yazı (marquee) + kenar solması.
   İsmin tamamını okursun ama yer kaplamaz, ekran asla yatay kaymaz. */
.hud-name{font-size:12px;font-weight:900;letter-spacing:.3px;color:var(--txt);line-height:1.1;
  max-width:78px;overflow:hidden;white-space:nowrap;}
.hud-name>span{display:inline-block;white-space:nowrap;}
.hud-name.marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); }
.hud-name.marquee>span{animation:hudMarquee 4.8s ease-in-out infinite alternate;}
@keyframes hudMarquee{ from{transform:translateX(0);} to{transform:translateX(calc(78px - 100%));} }
@media (prefers-reduced-motion: reduce){ .hud-name.marquee>span{animation:none;} }
.bot-tag{font-size:10px;opacity:.75;}
.hud-sub{font-size:10.5px;font-weight:700;color:var(--x);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px;}
.hud-mid{text-align:center;flex:1 1 auto;min-width:0;}
.hud-mode{font-size:12.5px;font-weight:900;letter-spacing:.5px;color:var(--txt);white-space:nowrap;}
.hud-diff{font-size:10.5px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:5px;margin-top:2px;}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--x);box-shadow:0 0 6px var(--x);display:inline-block;}
.hud-right{text-align:right;flex:0 0 auto;}
.hud-big{font-size:18px;font-weight:900;color:var(--x);line-height:1;font-variant-numeric:tabular-nums;}
.hud-small{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px;white-space:nowrap;}
.hud-bot{flex-direction:row;}
.hud-bot .hud-sub{color:var(--o);max-width:none;}
.hud-bot .hud-av{border-color:rgba(56,189,248,.5);color:var(--o);
  background:radial-gradient(circle at 50% 32%,#12283a,#0c1620);box-shadow:0 0 10px rgba(56,189,248,.22);}
/* Skorlar SEN / BOT kartlarında: hud-sub'ın sayısını büyüt (renk hud-sub'tan gelir: SEN yeşil, BOT mavi) */
.hud-sub b{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;}
/* Kompakt tur bloğu: "HAMLE SENDE" etiketi (tek satır) + altında ince süre çubuğu */
.turn-block{width:100%;max-width:460px;display:flex;flex-direction:column;gap:3px;margin:-4px 0 8px;}
.turn-block.hidden{display:none;}
.turn-label{font-size:11px;font-weight:800;letter-spacing:.03em;text-align:center;line-height:1;}
.turn-label.me{color:var(--x);}
.turn-label.op{color:var(--o);}
/* Tur süresi çubuğu (pratik) — sadece sıra sendeyken dolu, süre azaldıkça küçülür */
.turn-timer{width:100%;height:5px;border-radius:999px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);overflow:hidden;}
.turn-timer.off{visibility:hidden;}
/* Sheet içi süre aynası: isim yazarken süre görünsün */
.sheet-timer{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.sheet-timer.off{display:none;}
.sheet-timer .turn-timer{flex:1;height:6px;}
.sheet-time-lbl{font-size:12px;font-weight:900;color:var(--muted);min-width:38px;text-align:right;font-variant-numeric:tabular-nums;}
.sheet-time-lbl.warn{color:var(--accent);} .sheet-time-lbl.danger{color:var(--danger);}
.turn-bar{height:100%;width:100%;border-radius:999px;transform-origin:left center;
  background:linear-gradient(90deg,var(--x),#9df5b8);will-change:transform;}
.turn-bar.warn{background:linear-gradient(90deg,var(--accent),#ffcf8a);}
.turn-bar.danger{background:linear-gradient(90deg,#ff4d4d,#ff9a5b);}
.turn-bar.op{background:linear-gradient(90deg,var(--o),#8fd3ff);}   /* rakip/bot düşünüyor (mavi) */
/* Yeni kart bildirimi (Kart Kütüphanesi) — üstten kayar, oyunu durdurmaz */
.card-toast{position:fixed;top:-80px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,30,22,.98),rgba(12,18,14,.98));border:1px solid var(--edge);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events:none;opacity:0;transition:top .35s cubic-bezier(.2,1.2,.4,1),opacity .35s;max-width:90vw;}
.card-toast.show{top:calc(env(safe-area-inset-top,0px) + 12px);opacity:1;}
.ct-spark{font-size:20px;filter:drop-shadow(0 0 6px rgba(34,224,106,.6));}
.ct-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.ct-txt b{font-size:10px;letter-spacing:.12em;color:var(--x);}
.ct-txt span{font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-tier{font-size:11px;font-weight:900;letter-spacing:.04em;padding:3px 9px;border-radius:999px;
  border:1px solid currentColor;background:rgba(0,0,0,.25);flex:0 0 auto;}
/* ===== Kart Kütüphanesi ===== */
#library{flex:1 1 auto;min-height:0;align-self:stretch;margin:0 auto;overflow-x:hidden;touch-action:pan-y;}
.lib-head{width:100%;flex:0 0 auto;}
.lib-count{text-align:center;font-weight:800;font-size:14px;color:var(--txt);margin:2px 0 8px;font-variant-numeric:tabular-nums;}
.lib-rarity{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
.lr-chip{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid;background:rgba(0,0,0,.25);white-space:nowrap;}
.lr-chip b{font-size:12px;font-variant-numeric:tabular-nums;}
.lib-controls{display:flex;gap:8px;margin-bottom:10px;width:100%;}
.lib-controls.hidden{display:none;}
.lib-sel{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:8px 10px;font-size:13px;font-weight:600;-webkit-appearance:none;appearance:none;}
.lib-grid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;align-content:start;}
.lib-grid.hidden{display:none;}
.lib-card{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--panel);border:1px solid var(--line);border-top:2.5px solid var(--tc);border-radius:12px;padding:8px 6px 7px;text-align:center;box-shadow:var(--shadow);}
.lc-photo{width:100%;aspect-ratio:1/1.12;border-radius:8px;overflow:hidden;background:#0d1a12;margin-bottom:5px;}
.lc-photo img,.lc-photo .av-img,.lc-photo .av-ini{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:8px;font-size:26px;}
.lc-name{font-size:11px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.lc-tier{font-size:9px;font-weight:900;letter-spacing:.05em;margin-top:1px;}
.lc-meta{font-size:8.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lib-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;}
.lib-empty.hidden{display:none;}
.le-ico{font-size:46px;opacity:.9;}
.le-title{font-size:18px;font-weight:900;color:var(--txt);}
.le-sub{font-size:13px;color:var(--muted);max-width:260px;line-height:1.45;}
.btn-primary{flex:0 0 auto;align-self:center;background:linear-gradient(180deg,#ff9142,var(--accent));color:#231207;font-weight:900;font-size:15px;padding:12px 28px;border-radius:14px;border:none;box-shadow:0 6px 18px rgba(255,122,26,.35);margin-top:6px;}
/* Sonuç ekranı: oynanan gridin birebir önizlemesi (armalar + oyuncular, tıkla-incele) */
.result-grid{display:grid;grid-template-columns:32px repeat(3,1fr);gap:5px;width:100%;max-width:360px;margin:8px auto 4px;}
.rg-head{display:flex;align-items:center;justify-content:center;}
.rg-head svg{width:28px;height:31px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.rg-cell{flex:0 0 auto;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--panel-2);border:2px solid var(--line);padding:0;display:flex;align-items:center;justify-content:center;}
.rg-cell img,.rg-cell .av-ini,.rg-cell .av-img{width:100%;height:100%;object-fit:cover;object-position:center top;font-size:20px;border-radius:0;}
.rg-x{border-color:var(--x);box-shadow:inset 0 0 0 1.5px var(--x);}
.rg-o{border-color:var(--o);box-shadow:inset 0 0 0 1.5px var(--o);}
.rg-empty{background:rgba(255,255,255,.02);border-style:dashed;}
.result-grid-hint{text-align:center;font-size:11.5px;color:var(--muted);margin:2px 0 8px;}
/* "Oyunun son hâlini gör" — grid'i açan buton (kesikli çerçeve = açılabilir) */
.result-view-grid{display:block;width:100%;margin:10px auto 2px;padding:13px;border-radius:12px;
  background:rgba(34,224,106,.06);border:1px dashed rgba(34,224,106,.45);color:var(--txt);
  font-weight:800;font-size:14px;box-shadow:none;}
.result-view-grid:active{transform:scale(.99);}
.result-view-grid:hover{background:rgba(34,224,106,.1);border-color:rgba(34,224,106,.65);}
/* Profil içindeki Kartlarım girişi */
.prof-cards-btn{flex:0 0 auto;width:100%;max-width:460px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),var(--panel-2);
  border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin:2px 0 10px;
  color:var(--txt);box-shadow:var(--shadow);}
.pcb-ico{font-size:20px;flex:0 0 auto;}
.pcb-txt{font-size:15px;font-weight:800;flex:1 1 auto;text-align:left;}
.pcb-count{font-size:13px;font-weight:700;color:var(--x);flex:0 0 auto;font-variant-numeric:tabular-nums;}
.prof-cards-btn .mc-chev{width:18px;height:18px;color:var(--muted);flex:0 0 auto;}

.board{width:100%;max-width:460px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 30%),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:inset 0 1px 0 var(--edge),var(--shadow);
  display:grid;grid-template-columns:78px 1fr 1fr 1fr;grid-template-rows:78px 1fr 1fr 1fr;gap:6px;aspect-ratio:1/1;flex:0 0 auto;
  max-height:calc(100dvh - 280px);}
.corner{border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;white-space:pre-line;}
.head{border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 55%),#0b120d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.head .crest{width:32px;height:37px;}
.head .crest svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.head .name{font-size:9px;color:var(--muted);text-align:center;line-height:1.1;margin-top:3px;}
.cell{border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 50%),#0b130d;
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:4px;transition:transform .08s, background .15s, border-color .15s;
  min-height:0;min-width:0;overflow:hidden;}   /* grid track sabit kalsın: uzun isim kareyi UZATMASIN */
.cell:active{transform:scale(.96);}
.cell.claimed-X{background:linear-gradient(180deg,rgba(34,224,106,.2),rgba(34,224,106,.08));border-color:var(--x);
  box-shadow:inset 0 1px 0 rgba(34,224,106,.2);}
.cell.claimed-O{background:linear-gradient(180deg,rgba(56,189,248,.2),rgba(56,189,248,.08));border-color:var(--o);
  box-shadow:inset 0 1px 0 rgba(56,189,248,.2);}
.cell .avatar{width:40px;height:46px;margin-top:2px;border-radius:9px;overflow:hidden;background:#0e1a12;border:1px solid var(--line);flex:0 0 auto;}
.cell .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.cell .avatar svg{width:100%;height:100%;object-fit:cover;display:block;}
/* İsim TEK SATIR + taşarsa kayar (marquee) → yüksekliği bozup fotoyu KIRPMASIN, kafa kesilmesin */
.cell .who{font-size:9px;color:var(--txt);opacity:.9;text-align:center;line-height:1.1;margin-top:2px;
  max-width:100%;white-space:nowrap;overflow:hidden;flex:0 0 auto;}
.cell .who.mq{overflow:hidden;}
.cell .who.mq > span{display:inline-block;white-space:nowrap;animation:cellMarquee 5.5s linear infinite;}
@keyframes cellMarquee{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--mqx,0))}}
.cell .rar{font-size:10px;margin-top:1px;flex:0 0 auto;}
.cell .rar{font-size:11px;font-weight:900;color:var(--accent);margin-top:2px;}
.cell.win{box-shadow:0 0 0 2px var(--accent), 0 0 18px rgba(255,122,26,.5);animation:pop .3s ease;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ===== Game feel / animasyonlar (hızlı, reduced-motion saygılı) ===== */
@media (prefers-reduced-motion: no-preference){
  .screen:not(.hidden){animation:screenIn .28s cubic-bezier(.2,.7,.2,1);}
  @keyframes screenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .cell.pop{animation:cellPop .36s cubic-bezier(.2,.9,.25,1.15);}
  @keyframes cellPop{
    0%{transform:scale(.55);opacity:0;}
    55%{transform:scale(1.09);opacity:1;box-shadow:0 0 24px rgba(34,224,106,.55);}
    100%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(34,224,106,.2);}
  }
  .cell.pop.claimed-O{animation:cellPopO .36s cubic-bezier(.2,.9,.25,1.15);}
  @keyframes cellPopO{0%{transform:scale(.55);opacity:0;}55%{transform:scale(1.09);opacity:1;box-shadow:0 0 24px rgba(56,189,248,.55);}100%{transform:scale(1);}}
  .cell.pop .tier{animation:badgeIn .42s .08s backwards ease-out;}
  @keyframes badgeIn{0%{transform:translateX(-50%) scale(0);opacity:0;}70%{transform:translateX(-50%) scale(1.3);}100%{transform:translateX(-50%) scale(1);opacity:.95;}}
  .cell.pop .avatar{animation:avIn .4s .06s backwards ease-out;}
  @keyframes avIn{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
  .shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97);}
  @keyframes shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-7px);}40%,60%{transform:translateX(7px);}}
  .feedback.ok{animation:okIn .3s ease;}
  @keyframes okIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
}

/* Oyun ekranı tam yükseklik. Üst küme (HUD+grid) sıkı; alt küme (bilgi+hint+buton) sıkı ve dibe yapışık; aradaki TEK boşluk grid ile alt kümeyi ayırır. */
#game{flex:1 1 auto;justify-content:center;gap:12px;}
.game-info{width:100%;max-width:460px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),rgba(12,18,14,.6);
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  box-shadow:inset 0 1px 0 var(--edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.gi-ico{font-size:18px;flex:0 0 auto;line-height:1;}
.gi-text{font-size:12.5px;font-weight:700;color:var(--muted);flex:1 1 auto;line-height:1.3;}
.gi-val{font-size:13px;font-weight:800;color:var(--x);flex:0 0 auto;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;}
.gi-val:empty{display:none;}

.status{max-width:460px;width:100%;text-align:center;color:var(--muted);font-size:13px;min-height:18px;margin:2px 0 0;}
.controls{display:flex;gap:8px;max-width:460px;width:100%;}
/* Kısa ekranlar (iPhone SE/8, 375×667): tur süresi çubuğu ekstra yükseklik ekledi → dikey boşlukları sıkıştır, taşma 0 */
@media (max-height:700px){
  #game{gap:8px;}
  .turn-block{margin:-4px 0 4px;}
  .game-info{padding:9px 15px;}
  .turn-timer{height:4px;}
  /* Menü kısa ekranda 3 kartla taşmasın (Canlı Düello eklendi) */
  #menu{gap:8px;padding:4px 0;}
  .logo-wrap{margin:46px 0 0;}   /* kısa ekranda da profil chip'i temizle */
  .logo-icon{width:52px;height:52px;margin-bottom:3px;}
  .menu-card{padding:16px 16px;}
  /* Profil kısa ekranda (375×667) taşıyordu → "Verilerimi Sil" (Apple zorunlu) ekran dışında kalıyordu.
     Kompaktlaştır ki tüm profil + silme butonu tek ekrana sığsın (no-scroll). */
  #profile{gap:5px;}
  .prof-hero{padding:8px 14px 7px;}
  .prof-iq{font-size:38px;letter-spacing:-1.5px;}
  .prof-cap{font-size:16px;}
  .prof-tier{font-size:11.5px;margin-top:3px;}
  .prof-top{margin-top:2px;}
  .iq-meter{margin:5px 4px 3px;height:8px;}
  .stat-tile{padding:6px 4px;}
  .prof-cards-btn{padding:9px 12px;}
  .prof-tabs{padding:2px;}
  .prof-leagues{gap:4px;}
  .prof-danger{margin-top:5px;gap:3px;}
  .prof-danger-note{font-size:10px;line-height:1.3;}
}
button{flex:1;padding:13px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--panel);
  color:var(--txt);font-weight:800;font-size:14px;cursor:pointer;box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .1s ease,border-color .15s;}
button.primary{color:#1a1200;border-color:transparent;
  background:linear-gradient(180deg,#ff9542,#ff7a1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -12px rgba(255,122,26,.6);}
button:active{transform:scale(.98);}

/* Cevap giriş kutusu (modal) — ÜST kısımda: mobil klavye butonları örtmesin */
.sheet{position:fixed;inset:0;background:rgba(4,8,16,.72);display:none;align-items:flex-start;justify-content:center;z-index:10;padding:0 12px;}
.sheet.open{display:flex;}
.sheet-inner{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%),var(--panel-2);
  border:1px solid var(--line);border-radius:18px;width:100%;max-width:460px;
  margin-top:calc(48px + var(--safe-top));padding:18px 16px;
  /* BUG-FIX: klavye açılınca dvh küçülür → Onayla/Vazgeç ekran dışında kalıp erişilemez oluyordu.
     max-height + iç-scroll: içerik sığmazsa sheet KENDİ içinde kayar, butonlar hep erişilebilir. */
  max-height:calc(100dvh - 56px - var(--safe-top));overflow-y:auto;
  box-shadow:inset 0 1px 0 var(--edge),0 24px 60px -12px rgba(0,0,0,.7);}
.sheet .q{font-size:13px;color:var(--muted);margin-bottom:4px;font-weight:600;}
.sheet .clubs{font-size:20px;font-weight:900;letter-spacing:-.3px;margin-bottom:14px;}
.sheet .clubs .amp{color:var(--muted);margin:0 6px;font-weight:400;}
.sheet input{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#0a110c;
  color:var(--txt);font-size:16px;outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);transition:border-color .15s;}
.sheet input:focus{border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 3px rgba(255,122,26,.12);}
.sheet .row{display:flex;gap:8px;margin-top:12px;}
/* Onay dialogu (oyundan çıkış vb.) */
.confirm-inner{max-width:340px;text-align:center;padding:24px 20px 18px;}
.confirm-icon{font-size:38px;line-height:1;margin-bottom:8px;}
.confirm-title{font-size:18px;font-weight:900;letter-spacing:-.2px;margin-bottom:6px;}
.confirm-msg{font-size:13.5px;color:var(--muted);line-height:1.45;margin-bottom:4px;}
.confirm-row{margin-top:16px;}
.confirm-row button{flex:1;padding:13px 10px;border-radius:13px;font-size:14.5px;font-weight:800;cursor:pointer;border:1px solid var(--line);}
.confirm-cancel{background:#0a110c;color:var(--txt);}
.confirm-cancel:hover{border-color:var(--edge);}
.confirm-ok{background:#0a110c;color:var(--txt);}
.confirm-ok.danger{background:linear-gradient(180deg,#f26565,var(--danger));color:#2a0808;border:none;box-shadow:0 6px 16px rgba(239,68,68,.32);}
/* Canlı öneri listesi */
.suggest{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:230px;overflow-y:auto;}
.suggest-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 13px;border-radius:11px;background:#0a110c;border:1px solid var(--line);cursor:pointer;
  box-shadow:inset 0 1px 0 var(--edge);transition:border-color .12s,background .12s;}
.suggest-item:active,.suggest-item:hover{background:rgba(34,224,106,.08);border-color:rgba(34,224,106,.5);}
.sg-img{width:28px;height:34px;border-radius:6px;object-fit:cover;object-position:center top;background:#0c1610;flex:0 0 auto;}
.sg-name{font-size:15px;font-weight:700;color:var(--txt);flex:1 1 auto;}
.sg-clubs{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto;}
.feedback{min-height:20px;font-size:13px;font-weight:700;margin-top:10px;text-align:center;}
.feedback.ok{color:var(--x);} .feedback.no{color:var(--danger);}

/* Jokerler (pratik): ipucu satırı + buton çubuğu */
.joker-hint{margin-top:8px;text-align:center;font-weight:800;letter-spacing:.14em;font-size:16px;
  color:var(--accent);font-variant-numeric:tabular-nums;}
.joker-hint.hidden{display:none;}
.joker-bar{display:flex;gap:8px;margin-top:10px;}
.joker-bar.hidden{display:none;}
.joker-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 8px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);transition:.15s;}
.joker-btn b{color:var(--accent);font-variant-numeric:tabular-nums;}
.joker-btn:active{transform:scale(.97);}
.joker-btn:disabled{opacity:.4;cursor:not-allowed;}
.joker-btn:disabled b{color:var(--muted);}
/* Joker bitince "📺 izle → +1" (ödüllü reklam) modu: sönük değil, davetkâr */
/* Joker bitti + pratik/günlük + reklam hakkı: buton "📺 izle→kullan" moduna geçer (accent) */
.joker-btn.joker-ad{border-color:var(--accent);background:rgba(255,122,26,.14);color:var(--txt);opacity:1;}
.joker-btn.joker-ad b{font-size:15px;}

/* PvP oyun-içi bilgi notu (disabled; pratik/günlük'te buton kendisi reklam olur, not yok) */
.joker-ad-note{width:100%;margin:8px 0 2px;padding:8px 12px;border-radius:10px;background:rgba(255,122,26,.09);
  border:1px solid rgba(255,122,26,.28);color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.35;text-align:center;
  cursor:default;-webkit-tap-highlight-color:transparent;}
.joker-ad-note.cta{background:var(--accent);border-color:var(--accent);color:#141414;font-weight:800;font-size:13.5px;cursor:pointer;}
.joker-ad-note.cta:active{transform:scale(.98);}
.joker-ad-note.cta:disabled{opacity:.6;cursor:default;}

/* ===== Menü joker pili (ana ekran bakiye) ===== */
.joker-pill{flex:0 0 auto;width:fit-content;display:inline-flex;align-items:center;gap:9px;margin:2px auto 0;padding:6px 8px 6px 13px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;color:var(--txt);
  font-size:13.5px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s;}
.joker-pill:active{transform:scale(.97);}
.joker-pill .jp-label{color:var(--muted);font-size:12.5px;font-weight:700;}
.joker-pill .jp-item{display:inline-flex;align-items:center;gap:5px;}
.joker-pill .jp-item b{color:var(--txt);font-size:14px;font-weight:800;}
.joker-pill .jp-sep{width:1px;height:15px;background:var(--line);}
.joker-pill .jp-cta{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--muted);font-size:16px;font-weight:800;line-height:1;padding-bottom:1px;}
.joker-pill.has-ad{border-color:rgba(255,122,26,.4);}
.joker-pill.has-ad .jp-cta{background:var(--accent);color:#141414;}

/* ===== Joker kartı (modal) ===== */
.jk-inner{text-align:center;max-width:340px;}
.jk-title{font-size:19px;font-weight:800;margin:4px 0 14px;}
.jk-balrow{display:flex;gap:12px;justify-content:center;margin-bottom:14px;}
.jk-bal{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;}
.jk-bal .jk-ico{font-size:22px;}
.jk-bal b{font-size:24px;color:var(--accent);line-height:1;}
.jk-bal .jk-lbl{font-size:11px;color:var(--muted);margin-bottom:8px;}
.jk-card-ad{flex:0 0 auto;width:100%;padding:9px 6px;border-radius:10px;border:1px solid rgba(255,122,26,.5);
  background:var(--accent);color:#141414;font-size:13px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.jk-card-ad:active{transform:scale(.96);}
.jk-card-ad:disabled{opacity:.5;background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line);cursor:default;}
.jk-note{font-size:12.5px;color:var(--muted);text-align:center;margin:-4px 0 12px;}
.jk-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:4px;}

/* ===== Oyun-sonu joker kutusu ===== */
.result-jokers{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 2px;}
.result-jokers .rj-bal{font-size:13px;color:var(--muted);font-weight:600;}
.result-jokers .rj-bal b{color:var(--accent);}
.result-jokers .rj-ads{display:flex;gap:8px;width:100%;}
.result-jokers .rj-ad{flex:1;padding:9px 8px;font-size:13px;font-weight:700;border:1px solid rgba(255,122,26,.45);
  background:rgba(255,122,26,.10);color:var(--txt);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.result-jokers .rj-ad:active{transform:scale(.97);}
.result-jokers .rj-ad:disabled{opacity:.45;cursor:default;}
.result-jokers .rj-note{font-size:12px;color:var(--muted);}


/* ===== Kariyer / "Neden geçerli" modalı ===== */
.career-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.career-avatar{width:64px;height:76px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  background:#0c1610;border:1px solid var(--line);}
.career-avatar img,.career-avatar svg{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.career-id{min-width:0;}
.career-name{font-size:21px;font-weight:900;line-height:1.1;}
.career-rar{font-size:13px;font-weight:700;color:var(--muted);margin-top:5px;}
.career-why{background:rgba(34,224,106,.08);border:1px solid var(--x);border-radius:12px;
  padding:12px 14px;font-size:14px;font-weight:600;line-height:1.35;margin-bottom:16px;}
.career-cap{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px;}
.career-clubs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;max-height:38vh;overflow-y:auto;}
.cchip{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;
  background:#0c1610;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted);}
.cchip .cc-crest{width:20px;height:23px;flex:0 0 auto;}
.cchip .cc-crest svg{width:100%;height:100%;display:block;}
.cchip.hot{background:rgba(34,224,106,.14);border-color:var(--x);color:var(--txt);}

/* ===== Profil sekmeleri + düello geçmişi ===== */
.prof-tabs{width:100%;display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:4px;box-shadow:inset 0 1px 0 var(--edge);}
.prof-tab{flex:1;padding:7px 6px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-weight:800;font-size:11.5px;letter-spacing:.3px;}
.prof-tab.active{background:linear-gradient(180deg,rgba(34,224,106,.14),rgba(34,224,106,.03));
  color:var(--txt);border-color:rgba(34,224,106,.45);}
.prof-duels{width:100%;display:flex;flex-direction:column;gap:6px;}
.duel-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),rgba(10,17,12,.7);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.duel-av{width:24px;height:24px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:block;}
.duel-av .av-img,.duel-av .av-ini{width:24px;height:24px;border-radius:50%;}
.duel-av .av-ini{font-size:9.5px;}
.duel-name{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.duel-score{font-size:13px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.duel-score b{color:var(--muted);font-weight:900;}
.duel-score b.lead{color:var(--x);} .duel-score b.lead.op{color:var(--o);}
.duel-tag{width:20px;height:20px;flex:0 0 auto;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;border:1px solid;}
.duel-tag.win{color:var(--x);border-color:rgba(34,224,106,.55);background:rgba(34,224,106,.12);}
.duel-tag.loss{color:var(--o);border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.1);}
.duel-tag.draw{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03);}
.duel-date{font-size:10.5px;font-weight:700;color:var(--muted);flex:0 0 auto;opacity:.75;}

/* ===== Kimlik: avatar + takma ad ===== */
.av-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:inherit;}
.av-ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:inherit;
  font-weight:900;font-size:15px;letter-spacing:.5px;border:1px solid;}
.ident-row{width:100%;display:flex;align-items:center;gap:10px;}
.ident-av{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#173a24,#0c1a11);border:1px solid rgba(34,224,106,.5);}
.ident-av .av-ini{font-size:16px;}
.ident-name{flex:1 1 auto;min-width:0;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  background:#0a110c;color:var(--txt);font-size:15px;font-weight:700;outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}
.ident-name:focus{border-color:var(--x);}
.ident-clear{flex:0 0 auto;width:38px;height:38px;padding:0;font-size:15px;color:var(--muted);}
/* oyun HUD'ı ve sonuç tablosundaki avatarlar */
.hud-av .av-img,.hud-av .av-ini{border-radius:50%;}
.gi-ico .av-img,.gi-ico .av-ini{width:26px;height:26px;border-radius:50%;display:block;}
.gi-ico .av-ini{font-size:10px;}
.vs-side .av-img,.vs-side .av-ini{width:34px;height:34px;border-radius:50%;margin:0 auto 5px;}
.vs-side .av-ini{font-size:12px;}
.ch-avatar{width:66px;height:66px;border-radius:50%;overflow:hidden;margin:12px auto 0;
  border:2px solid rgba(255,122,26,.55);box-shadow:0 0 18px rgba(255,122,26,.25);}
.ch-avatar .av-ini{font-size:22px;}

/* ===== Meydan okuma karşılama ekranı ===== */
#challenge{gap:14px;flex:1 1 auto;justify-content:center;}
#challenge .menu-card{flex:0 0 auto;}   /* global button{flex:1} bu ekranda butonu şişiriyordu */
.ch-hero{width:100%;text-align:center;border-radius:var(--radius);padding:22px 18px 18px;
  background:linear-gradient(180deg,rgba(255,122,26,.1),transparent 55%),rgba(12,20,14,.7);
  border:1px solid rgba(255,122,26,.4);box-shadow:inset 0 1px 0 var(--edge),var(--shadow);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.ch-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2.5px;color:var(--accent);}
.ch-title{font-size:25px;font-weight:800;letter-spacing:-.4px;margin-top:10px;line-height:1.2;}
.ch-title b{color:var(--x);font-weight:900;}
.ch-iqrow{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:14px;}
.ch-iq{font-size:44px;font-weight:900;color:var(--x);line-height:1;letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(34,224,106,.28);}
.ch-cap{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--muted);}
.ch-sub{font-size:14px;font-weight:600;color:var(--muted);margin-top:12px;line-height:1.4;}
.ch-diff{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:800;
  color:var(--muted);background:rgba(10,16,11,.6);border:1px solid var(--line);border-radius:999px;padding:5px 13px;}

/* ===== Canlı Düello (PvP) — menü rozeti + lobi ===== */
.mc-badge{display:inline-block;vertical-align:middle;margin-left:6px;font-size:9px;font-weight:900;letter-spacing:1.2px;
  color:#231207;background:linear-gradient(180deg,#ff9142,var(--accent));border-radius:999px;padding:2px 7px;
  box-shadow:0 0 12px rgba(255,122,26,.4);}
#pvp{flex:1 1 auto;justify-content:center;gap:0;}
.pvp-panel{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  flex:1 1 auto;justify-content:center;}
.pvp-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2.5px;color:var(--accent);}
.pvp-title{font-size:24px;font-weight:900;letter-spacing:-.4px;line-height:1.2;}
.pvp-sub{font-size:14px;font-weight:600;color:var(--muted);line-height:1.45;max-width:300px;}
.pvp-code{font-size:34px;font-weight:900;letter-spacing:6px;color:var(--x);font-variant-numeric:tabular-nums;
  background:rgba(10,16,11,.6);border:1px solid rgba(34,224,106,.35);border-radius:14px;padding:10px 22px;
  text-shadow:0 0 22px rgba(34,224,106,.3);}
.pvp-msg-ico{font-size:44px;}
/* Giriş: Hızlı Eşleşme (büyük) + Arkadaşınla (iki küçük buton) */
.pvp-big-btn{font-size:17px;padding:15px 30px;margin-top:4px;}
.pvp-line{width:100%;max-width:300px;height:1px;background:var(--line);margin:12px 0 4px;}
.pvp-friend-row{display:flex;gap:10px;width:100%;max-width:300px;}
.pvp-friend-btn{flex:1;padding:13px 10px;font-size:14px;font-weight:800;border-radius:13px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--panel);color:var(--txt);}
.pvp-friend-btn:active{transform:scale(.97);}
/* Kod giriş kutusu — ortalı, taşmaz */
.pvp-code-input{width:100%;max-width:230px;box-sizing:border-box;text-align:center;text-transform:uppercase;
  letter-spacing:8px;font-weight:900;font-size:26px;padding:14px 10px;border-radius:14px;border:1px solid var(--line);
  background:#0a110c;color:var(--x);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}
.pvp-code-input::placeholder{color:var(--muted);letter-spacing:6px;}
.pvp-code-input:focus{border-color:var(--x);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 3px rgba(34,224,106,.14);}
#pvpCodeEntry .btn-primary{margin-top:4px;}
/* Hızlı eşleşme "aranıyor" görünümü: kod/link bölümü gizli */
#pvpHost.searching .pvp-host-invite{display:none;}
/* bekleme spinner'ı: 3 zıplayan nokta */
.pvp-spinner{display:flex;gap:8px;}
.pvp-spinner span{width:12px;height:12px;border-radius:50%;background:var(--x);opacity:.4;
  animation:pvpBounce 1.1s infinite ease-in-out;}
.pvp-spinner span:nth-child(2){animation-delay:.15s;}
.pvp-spinner span:nth-child(3){animation-delay:.3s;}
@keyframes pvpBounce{0%,80%,100%{transform:scale(.7);opacity:.35;}40%{transform:scale(1.15);opacity:1;}}
@media (prefers-reduced-motion: reduce){ .pvp-spinner span{animation:none;} }

/* ===== Kazanma/kaybetme/beraberlik teması (sonuç modalı) ===== */
.result-inner{position:relative;transition:box-shadow .3s;}
.result-inner.mood-win{box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px rgba(34,224,106,.5),0 -2px 40px -8px rgba(34,224,106,.5),0 24px 60px -12px rgba(0,0,0,.7);}
.result-inner.mood-win .result-title{color:var(--x);text-shadow:0 0 22px rgba(34,224,106,.4);}
.result-inner.mood-loss{box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px rgba(56,189,248,.4),0 24px 60px -12px rgba(0,0,0,.7);}
.result-inner.mood-loss .result-title{color:var(--o);}
.result-inner.mood-draw .result-title{color:var(--muted);}
@media (prefers-reduced-motion: no-preference){
  .result-inner.mood-win .result-title{animation:winPop .5s cubic-bezier(.2,.9,.25,1.3);}
  @keyframes winPop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}
  .result-inner.mood-loss .result-title{animation:lossShake .5s ease;}
  @keyframes lossShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(5px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
}
/* bot avatarı (pratik vs tablosu) */
.vs-side .av-ini.bot-av{background:radial-gradient(circle at 50% 32%,#12283a,#0c1620);border:1px solid rgba(56,189,248,.5);color:var(--o);font-size:18px;}

/* ===== Konfeti ===== */
#confetti{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;}
#confetti.hidden{display:none;}
#confetti i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation-name:confFall;animation-timing-function:cubic-bezier(.3,.4,.5,1);animation-fill-mode:forwards;}
@keyframes confFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(105vh) rotate(680deg);opacity:.9;}
}
@media (prefers-reduced-motion: reduce){ #confetti{display:none !important;} }

/* Rövanş zinciri: karşılama ekranı satırı + sonuç şeridi */
.ch-chain{margin-top:10px;font-size:13px;font-weight:700;color:var(--muted);}
.ch-chain b{font-size:15px;font-weight:900;color:var(--txt);}
.ch-chain b.lead{color:var(--x);} .ch-chain b.lead.op{color:var(--o);}
.chain-strip{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:7px;
  font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted);}
.chain-strip b{font-size:16px;font-weight:900;color:var(--muted);letter-spacing:0;}
.chain-strip b.lead{color:var(--x);} .chain-strip b.lead.op{color:var(--o);}
.chain-strip span{font-size:10.5px;font-weight:700;letter-spacing:.2px;opacity:.75;text-transform:none;}

/* Kafa kafaya sonuç tablosu */
.vs-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 14px;}
.vs-side{flex:1;padding:12px 6px;border-radius:14px;background:rgba(10,17,12,.7);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.vs-side.lead{border-color:var(--x);background:linear-gradient(180deg,rgba(34,224,106,.16),rgba(34,224,106,.04));}
.vs-side.op.lead{border-color:var(--o);background:linear-gradient(180deg,rgba(56,189,248,.16),rgba(56,189,248,.04));}
.vs-lbl{font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--muted);}
.vs-num{font-size:34px;font-weight:900;color:var(--txt);line-height:1.1;font-variant-numeric:tabular-nums;}
.vs-num span{font-size:15px;color:var(--muted);font-weight:800;}
.vs-iq{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;}
.vs-side.lead .vs-num{color:var(--x);}
.vs-side.op.lead .vs-num{color:var(--o);}
.vs-mid{font-size:12px;font-weight:900;color:var(--muted);letter-spacing:1px;flex:0 0 auto;}

/* ===== Onboarding ===== */
.link-btn{flex:0 0 auto;width:auto;align-self:center;padding:8px 14px;background:none;border:none;box-shadow:none;
  color:var(--muted);font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.menu-links{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;}

/* ===== LİDER TABLOSU overlay (Faz 5, Adım 2) ===== */
.lb-overlay{position:fixed;inset:0;z-index:22;background:rgba(4,8,6,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:calc(14px + var(--safe-top)) 12px 16px;}
.lb-overlay.hidden{display:none !important;}
.lb-card{position:relative;width:100%;max-width:420px;max-height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%),var(--panel-2);
  border:1px solid var(--line);border-radius:20px;padding:18px 14px 14px;
  box-shadow:inset 0 1px 0 var(--edge),0 26px 64px -14px rgba(0,0,0,.8);
  display:flex;flex-direction:column;gap:10px;}
.lb-x{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;font-size:15px;line-height:1;
  border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;}
.lb-x:hover{color:var(--txt);}
.lb-title{font-size:20px;font-weight:900;letter-spacing:-.3px;text-align:center;}
.lb-sub{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-align:center;text-transform:uppercase;margin-top:-4px;}
.lb-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:min(52vh,420px);padding:2px;}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.lb-row.me{border-color:var(--x);background:linear-gradient(180deg,rgba(34,224,106,.10),transparent),var(--panel);}
.lb-rank{flex:0 0 26px;font-size:15px;font-weight:900;color:var(--muted);text-align:center;}
.lb-row.top .lb-rank{color:var(--x);}
.lb-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;}   /* overflow:hidden YOK — online noktası kenardan taşar, maskelenmesin (iç görselde zaten radius var) */
.lb-av .av-img,.lb-av .av-ini{width:30px;height:30px;border-radius:50%;font-size:12px;}
.lb-row.top .lb-av{box-shadow:0 0 0 1.5px var(--x);}
.lb-name{flex:1;min-width:0;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-iq{flex:0 0 auto;font-size:15px;font-weight:900;color:var(--x);}
.lb-iq small{font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:1px;margin-right:2px;}
.lb-me{margin-top:2px;padding-top:8px;border-top:1px dashed var(--line);}
.lb-me.hidden{display:none !important;}
.lb-empty{text-align:center;color:var(--muted);font-size:13px;font-weight:600;padding:24px 8px;line-height:1.5;}
.ob{position:fixed;inset:0;z-index:20;background:rgba(4,8,6,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:calc(14px + var(--safe-top)) 12px 16px;}
.ob.hidden{display:none !important;}
.ob-card{width:100%;max-width:420px;max-height:100%;overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%),var(--panel-2);
  border:1px solid var(--line);border-radius:20px;padding:18px 16px 16px;
  box-shadow:inset 0 1px 0 var(--edge),0 26px 64px -14px rgba(0,0,0,.8);
  display:flex;flex-direction:column;gap:14px;}
.ob-dots{display:flex;gap:6px;justify-content:center;}
.ob-dot{width:22px;height:4px;border-radius:999px;background:var(--line);transition:background .2s,width .2s;}
.ob-dot.on{background:var(--x);width:30px;box-shadow:0 0 10px rgba(34,224,106,.5);}
.ob-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2.5px;color:var(--muted);text-align:center;}
.ob-title{font-size:23px;font-weight:900;letter-spacing:-.4px;text-align:center;line-height:1.15;margin-top:5px;}
.ob-text{font-size:14px;font-weight:600;color:var(--muted);line-height:1.45;text-align:center;margin-top:8px;}
.ob-text b{color:var(--txt);font-weight:800;}
.ob-actions{display:flex;gap:8px;}
.ob-actions #obSkip{flex:0 0 34%;color:var(--muted);}
.ob-actions button:disabled{opacity:.42;cursor:default;transform:none;}

/* mini demo grid */
.ob-mini{display:grid;grid-template-columns:64px 1fr;grid-template-rows:64px 1fr;gap:6px;
  width:190px;margin:14px auto 0;}
.ob-mini .ob-corner{border-radius:10px;}
.ob-mini .head{padding:3px;}
.ob-mini .head .crest{width:26px;height:30px;}
.ob-mini .head .name{font-size:8.5px;}
.ob-cellbox{border-radius:11px;border:1px dashed rgba(34,224,106,.5);background:rgba(34,224,106,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:96px;padding:5px;position:relative;text-align:center;}
.ob-cellbox.solved{border-style:solid;border-color:var(--x);
  background:linear-gradient(180deg,rgba(34,224,106,.22),rgba(34,224,106,.08));}
.ob-q{font-size:30px;font-weight:900;color:var(--x);opacity:.55;}
.ob-av{width:42px;height:50px;border-radius:9px;overflow:hidden;background:#0e1a12;border:1px solid var(--line);}
.ob-av img,.ob-av svg{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
/* Onboarding son adım: kimlik (isim + foto) */
.ob-ident{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 4px;}
.ob-ident-avwrap{position:relative;width:84px;height:84px;}
.ob-ident-av{width:84px;height:84px;border-radius:50%;overflow:hidden;}
.ob-ident-av img,.ob-ident-av .av-ini{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top;display:flex;align-items:center;justify-content:center;font-size:30px;}
/* Kamera rozeti: fotonun tıklanıp değiştirilebileceğini gösteren görsel ipucu (kırpılmasın diye wrap'in kardeşi) */
.ob-ident-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--x);color:#04110a;
  display:flex;align-items:center;justify-content:center;font-size:14px;border:2.5px solid var(--panel-2);box-shadow:0 2px 7px rgba(0,0,0,.45);pointer-events:none;}
.ob-ident-photobtn{flex:0 0 auto;padding:5px 12px;font-size:12.5px;font-weight:800;color:var(--x);background:transparent;border:1px solid var(--x);border-radius:999px;}
.ob-ident-name{width:100%;max-width:240px;flex:0 0 auto;text-align:center;font-size:16px;}
.ob-cellname{font-size:9.5px;font-weight:700;color:var(--txt);line-height:1.15;margin-top:3px;}
.ob-cellrar{font-size:8px;font-weight:900;letter-spacing:.4px;border:1px solid;border-radius:5px;padding:1px 4px;margin-top:3px;}

/* isim seçenekleri */
.ob-chips{display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.ob-chip{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;
  background:#0a110c;border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  font-size:15px;font-weight:700;color:var(--txt);text-align:left;cursor:pointer;transition:border-color .12s,background .12s;}
.ob-chip:hover{border-color:rgba(34,224,106,.45);}
.ob-chip.right{background:rgba(34,224,106,.12);border-color:var(--x);}
.ob-chip.wrong{background:rgba(239,68,68,.1);border-color:var(--danger);color:#ffbcbc;}
.ob-chip:disabled{opacity:.5;cursor:default;}
.ob-chip.right:disabled{opacity:1;}
.ob-fb{min-height:20px;font-size:12.5px;font-weight:700;text-align:center;margin-top:10px;color:var(--muted);line-height:1.35;}
.ob-fb.ok{color:var(--x);} .ob-fb.no{color:var(--danger);}

/* nadirlik merdiveni */
.ob-tiers{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.ob-tier{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;}
.ob-tier .tg{width:74px;flex:0 0 auto;border:1px solid;border-radius:6px;padding:3px 0;text-align:center;font-size:9px;letter-spacing:.5px;}
.ob-tier .tb{flex:1;height:8px;border-radius:999px;background:#0a110c;border:1px solid var(--line);overflow:hidden;}
.ob-tier .tf{display:block;height:100%;border-radius:999px;}
.ob-tier .tp{width:42px;text-align:right;font-size:11px;font-weight:900;flex:0 0 auto;
  font-variant-numeric:tabular-nums;}

/* kural listesi */
.ob-rules{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.ob-rule{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),rgba(10,17,12,.7);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);}
.ob-rule .ri{font-size:17px;line-height:1.2;flex:0 0 auto;}
.ob-rule .rt{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.35;}
.ob-rule .rt b{color:var(--txt);font-weight:800;}
.ob-iqbig{text-align:center;margin-top:14px;}
.ob-iqbig .n{font-size:52px;font-weight:900;color:var(--x);line-height:1;letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(34,224,106,.3);}
.ob-iqbig .c{font-size:20px;font-weight:800;color:var(--muted);}
@media (prefers-reduced-motion: no-preference){
  .ob-body{animation:screenIn .26s cubic-bezier(.2,.7,.2,1);}
  .ob-cellbox.solved{animation:cellPop .36s cubic-bezier(.2,.9,.25,1.15);}
}