/* İlk kadro (demo takım) — onboard-ui.js. Tasarım alanı 1418 × 960; 1 birim = 100cqw/1418. */
.o2-scene{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2vh;min-height:100dvh;padding:2vh 3vw 3vh!important;box-sizing:border-box}
.o2-scene .intro-brand{position:static!important;align-self:flex-start}
.o2-wrap{position:relative;width:min(94vw,calc((100dvh - 14vh) * 1418 / 960));aspect-ratio:1418/960;container-type:inline-size;--k:calc(100cqw/1418);font-family:Arial,sans-serif;color:#fff}
.o2-wrap>*{position:absolute}
.o2-wrap img{display:block;pointer-events:none}
.o2-wrap button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.o2-fill{inset:calc(30*var(--k));border-radius:calc(18*var(--k));background:radial-gradient(ellipse at 50% 18%,#0e4a8f,#08305f 70%)}
.o2-frame{inset:0;width:100%;height:100%;z-index:1}
.o2-frame~*{z-index:2}
.o2-title{display:grid;place-items:center;z-index:3!important}
.o2-title img,.o2-btn img,.o2-bench-bg{position:absolute;inset:0;width:100%;height:100%}
.o2-title span{position:relative;font:italic 900 calc(52*var(--k))/1 'Barlow Condensed',Arial;color:#ff9416;-webkit-text-stroke:calc(2*var(--k)) #7a2e00;paint-order:stroke fill;text-shadow:0 calc(3*var(--k)) 0 #7a2e00}
.o2-team{display:flex;align-items:baseline;gap:calc(16*var(--k))}
.o2-team b{font:italic 900 calc(38*var(--k)) 'Barlow Condensed',Arial;color:#ffd166;text-shadow:0 calc(2*var(--k)) 0 #0b3d7c}
.o2-team span{font:800 calc(17*var(--k)) Arial;color:#cfe6ff}
/* saha: stadyum arka planı, stadyumdaki kart konumları */
.o2-court{border-radius:calc(20*var(--k));overflow:hidden;border:calc(4*var(--k)) solid #fff;box-shadow:0 0 0 calc(3*var(--k)) #0b3d7c,0 calc(10*var(--k)) calc(24*var(--k)) #0008}
.o2-court-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
/* ilk beş kartı (stadyum oyuncu kartı görünümü) */
.o2-card{position:absolute;z-index:3;display:flex;flex-direction:column;border-radius:calc(4*var(--k));background:linear-gradient(160deg,#293545f2,#0b1421f5);border:calc(1.5*var(--k)) solid var(--rarity,#9ba6b5);box-shadow:0 calc(6*var(--k)) calc(12*var(--k)) #000a;animation:o2-in .45s ease-out both}
.o2-card:nth-child(3){animation-delay:.05s}.o2-card:nth-child(4){animation-delay:.1s}.o2-card:nth-child(5){animation-delay:.15s}.o2-card:nth-child(6){animation-delay:.2s}
.o2-card.rarity-x{border-color:#ff9416;box-shadow:0 0 calc(14*var(--k)) #ffb347,0 calc(6*var(--k)) calc(12*var(--k)) #000a}
.o2-photo{position:relative;aspect-ratio:1/.9;overflow:hidden;border-radius:calc(3*var(--k)) calc(3*var(--k)) 0 0;background:linear-gradient(#2a2d33,#111317)}
.o2-photo .portrait{position:absolute;left:0;bottom:0;width:100%;height:112%;object-fit:cover;object-position:top}
.o2-pos{position:absolute;left:calc(3*var(--k));bottom:calc(3*var(--k));background:#0b1421;border:1px solid #fff8;color:#fff;padding:0 calc(3*var(--k));font:900 calc(8*var(--k)) Arial;border-radius:calc(2*var(--k))}
.o2-x{position:absolute;right:calc(3*var(--k));top:calc(3*var(--k));display:grid;place-items:center;width:calc(20*var(--k));height:calc(20*var(--k));border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb066,#f07a14 60%,#b4540c);border:calc(1.5*var(--k)) solid #fff;font:italic 900 calc(11*var(--k)) Arial;color:#fff}
.o2-stamina{height:calc(3*var(--k));background:#3b0b0b}.o2-stamina i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a4d,#c1120b)}
.o2-name{display:flex;align-items:center;justify-content:space-between;gap:calc(3*var(--k));padding:calc(3*var(--k)) calc(4*var(--k))}
.o2-name strong{font:800 calc(9*var(--k)) Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o2-name b{font:900 calc(9*var(--k)) Arial}
.o2-slot-label{position:absolute;left:0;right:0;top:100%;margin-top:calc(5*var(--k));text-align:center;padding:calc(2*var(--k)) 0;border-radius:calc(6*var(--k));background:#3a3f47cc;font:900 calc(9*var(--k)) Arial;color:#fff;white-space:nowrap}
/* yedek kulübesi: stadyumdaki panel, 2 × 3 ızgara */
.o2-bench-count{position:absolute;top:1.4%;right:7%;font:800 calc(18*var(--k)) Arial;color:#dfe9f4}
.o2-bench-grid{position:absolute;left:7%;top:6.5%;width:86%;display:grid;grid-template-columns:1fr 1fr;gap:calc(14*var(--k)) calc(12*var(--k))}
.o2-bench-empty,.o2-bench-player{position:relative;aspect-ratio:910/760}
.o2-bench-empty img{width:100%;height:auto;aspect-ratio:910/622;opacity:.95}
.o2-bench-stars{position:absolute;left:8%;right:8%;bottom:3%;width:84%;height:auto}
/* toplamlar ve butonlar */
.o2-stats{display:grid;gap:calc(10*var(--k))}
.o2-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(14*var(--k));background:#0a2d58;border:calc(2*var(--k)) solid #5aa9f0}
.o2-stats .o2-wide{grid-column:1/-1;gap:calc(6*var(--k))}
.o2-stats small{font:900 calc(14*var(--k)) Arial;letter-spacing:calc(1*var(--k));color:#9fcbf5}
.o2-stats b{font:900 calc(30*var(--k)) Arial;color:#ffd166}
.o2-stats b i{font-size:calc(16*var(--k));font-style:normal;color:#cfe6ff}
.o2-cap{width:82%;height:calc(10*var(--k));border-radius:calc(6*var(--k));background:#051a33;overflow:hidden}
.o2-cap u{display:block;height:100%;background:linear-gradient(90deg,#3ddc75,#ffd166)}
.o2-btn{display:grid;place-items:center}
.o2-btn span{position:relative;font:900 calc(24*var(--k)) Arial;text-shadow:0 calc(2*var(--k)) calc(3*var(--k)) #0009;white-space:nowrap}
.o2-btn:hover img{filter:brightness(1.12)}
.o2-note{padding:calc(14*var(--k));border-radius:calc(14*var(--k));background:#0a2d58aa;border:calc(2*var(--k)) solid #5aa9f0;border-left:calc(6*var(--k)) solid #ffb347;font:700 calc(14*var(--k))/1.45 Arial;color:#dbe9ff}
.o2-note b{color:#ffd166}
@keyframes o2-in{from{opacity:0;transform:translateY(calc(20*var(--k))) scale(.9)}to{opacity:1;transform:none}}
.o2-bench-photo{position:absolute;left:0;top:0;width:100%;aspect-ratio:910/622;overflow:hidden;border:calc(3*var(--k)) solid #6f757d;border-radius:calc(12*var(--k));background:linear-gradient(#2a2d33,#111317);box-sizing:border-box}
.o2-bench-player.rarity-x .o2-bench-photo{border-color:#ff9416}
.o2-bench-photo .portrait{position:absolute;left:0;bottom:0;width:100%;height:112%;object-fit:cover;object-position:top}
.o2-bench-player b{position:absolute;left:4%;top:56%;padding:0 calc(4*var(--k));background:#e58b2e;color:#161c26;border-radius:calc(3*var(--k));font:900 calc(12*var(--k)) Arial}
.o2-bench-energy{position:absolute;left:3%;right:3%;top:74%;height:calc(7*var(--k));border-radius:calc(5*var(--k));background:#3b0b0b;overflow:hidden}
.o2-bench-energy u{display:block;width:100%;height:100%;background:linear-gradient(#ff5a4d,#c1120b)}
.o2-bench-player small{position:absolute;left:0;right:0;top:84%;text-align:center;font:800 calc(11*var(--k)) Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o2-bench-player em{position:absolute;left:0;right:0;top:100%;text-align:center;font:900 calc(11*var(--k)) Arial;font-style:normal;color:#ffd166}
.o2-stats{grid-template-columns:1fr 1fr 1.6fr}
.o2-stats>div:last-child{gap:calc(6*var(--k))}
/* büyük kartlar: yazılar kart genişliğine göre */
.o2-pos{font-size:calc(11*var(--k));padding:calc(1*var(--k)) calc(5*var(--k))}
.o2-name{padding:calc(4*var(--k)) calc(6*var(--k))}
.o2-name strong{font-size:calc(12*var(--k))}
.o2-name b{font-size:calc(12*var(--k))}
.o2-stamina{height:calc(4*var(--k))}
.o2-slot-label{font-size:calc(12*var(--k));padding:calc(3*var(--k)) 0}
.o2-x{width:calc(26*var(--k));height:calc(26*var(--k));font-size:calc(14*var(--k))}
/* v3: saha ve kartlar ana odak; tasarım alanı 1418 × 820 */
.o2-wrap{width:min(96vw,calc((100dvh - 10vh) * 1418 / 820));aspect-ratio:1418/820}
.o2-scene{gap:1vh;padding:1.5vh 2vw 2vh!important}
.o2-title span{font-size:calc(44*var(--k))}
.o2-team{position:absolute;left:1.6%;top:2.2%;z-index:4;padding:calc(4*var(--k)) calc(18*var(--k));border-radius:calc(12*var(--k));background:#0b3d7ccc;border:calc(2*var(--k)) solid #fff}
.o2-team b{font-size:calc(30*var(--k))}
/* kartlar büyüdü */
.o2-pos{font-size:calc(13*var(--k))}
.o2-name{padding:calc(5*var(--k)) calc(7*var(--k))}
.o2-name strong,.o2-name b{font-size:calc(14*var(--k))}
.o2-stamina{height:calc(5*var(--k))}
.o2-slot-label{font-size:calc(14*var(--k))}
.o2-x{width:calc(30*var(--k));height:calc(30*var(--k));font-size:calc(16*var(--k))}
.o2-card{cursor:help;transition:transform .15s}
.o2-card:hover{transform:translateY(calc(-4*var(--k))) scale(1.04);z-index:5}
.o2-bench-player{cursor:help}
.o2-bench-player:hover .o2-bench-photo{border-color:#ffd166;box-shadow:0 0 calc(10*var(--k)) #ffd166}
/* küçültülen değerler */
.o2-stats{grid-template-columns:1fr!important;gap:calc(6*var(--k))}
.o2-stats>div{flex-direction:row!important;justify-content:space-between!important;padding:0 calc(12*var(--k));flex-wrap:wrap;align-content:center}
.o2-stats small{font-size:calc(12*var(--k))}
.o2-stats b{font-size:calc(20*var(--k))}
.o2-stats b i{font-size:calc(12*var(--k))}
.o2-stats>div:last-child{gap:calc(2*var(--k)) 0}
.o2-cap{width:100%;height:calc(6*var(--k))}
.o2-hint{display:flex;align-items:center;padding:0 calc(16*var(--k));border-radius:calc(12*var(--k));background:#0a2d58aa;border:calc(2*var(--k)) solid #5aa9f0;font:700 calc(15*var(--k)) Arial;color:#dbe9ff}
.o2-hint b{color:#ffd166;margin:0 .3em}
.o2-btn span{font-size:calc(24*var(--k))}
.o2-popup{position:fixed;z-index:200;pointer-events:none}
/* sayfa arka planı: bulanık şehir görseli (yalnızca görsel; tıklanamaz, menü yok) */
.o2-scene{position:relative;overflow:hidden;background:#07101c}
.o2-city{position:absolute;inset:-40px;background:url('assets/bgcity-v3.webp') center/cover no-repeat;filter:blur(14px) brightness(.55) saturate(1.15);pointer-events:none;z-index:0}
.o2-scene>*:not(.o2-city){position:relative;z-index:1}
.o2-scene .hero-art,.o2-scene .intro-footer{display:none}
.o2-hint{display:block;line-height:calc(52*var(--k));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(14*var(--k))}
/* X seçme ekranı: aynı bulanık şehir arka planı (yalnızca görsel) */
.xp-onb{overflow:hidden;background:#07101c!important}
.xp-onb>.xp-wrap{position:relative;z-index:1}
.xp-onb>.intro-brand{z-index:2}
.xp-onb>.o2-city{position:absolute}
/* kart içindeki oyuncu fotoğrafı daha küçük: kartın içine sığar, alttan hizalı */
.o2-photo .portrait{left:50%;width:auto;max-width:100%;height:86%;transform:translateX(-50%);object-fit:contain;object-position:center bottom}
/* Giriş / kayıt ekranı: aynı bulanık şehir arka planı (yalnızca görsel) */
.auth-screen{position:relative;overflow:hidden;background:#07101c!important}
.auth-screen>.o2-city{position:absolute}
.auth-screen>*:not(.o2-city){z-index:1}
.auth-screen .intro-content,.auth-screen .intro-brand{position:relative}
/* Takım adı adımı: aynı bulanık şehir arka planı (yalnızca görsel) */
.o2-bg{position:relative;overflow:hidden;background:#07101c!important}
.o2-bg>.o2-city{position:absolute}
.o2-bg>*:not(.o2-city){z-index:1}
.o2-bg .intro-content,.o2-bg .intro-brand{position:relative}