/* Star'ın Yolu (star-path-ui.js): ob-* çerçevesi, tasarım alanı 1400 × 830, 1 birim = --k. */
.ob-starpath .sp-hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:calc(20*var(--k));overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2f86ea,#0b3d7c 70%);border:calc(3*var(--k)) solid #6fc3ff88}
.ob-starpath .sp-hero img{position:absolute;left:-10%;bottom:12%;width:120%;object-fit:contain;filter:drop-shadow(0 calc(8*var(--k)) calc(14*var(--k)) #000a)}
.ob-starpath .sp-hero-name{position:relative;width:100%;padding:calc(14*var(--k));background:linear-gradient(transparent,#06224bf2 35%);text-align:center}
.ob-starpath .sp-hero-name b{display:block;font:italic 900 calc(40*var(--k))/1 'Barlow Condensed',Arial;color:#ffd166;text-shadow:0 calc(3*var(--k)) 0 #7a2e00}
.ob-starpath .sp-hero-name small{font:800 calc(20*var(--k)) Arial;color:#cfe8ff}
.ob-starpath .sp-panel{display:flex;flex-direction:column;border-radius:calc(18*var(--k));border:calc(3*var(--k)) solid #6fc3ff;background:#051a3add;overflow:hidden}
.ob-starpath .sp-head{flex:none;padding:calc(10*var(--k));text-align:center;background:linear-gradient(#2f86ea,#1a5fc0);border-bottom:calc(2*var(--k)) solid #9fd3ff}
.ob-starpath .sp-head b{font:italic 900 calc(30*var(--k)) 'Barlow Condensed',Arial;color:#ffe066;text-shadow:0 calc(2*var(--k)) 0 #0b3d7c}
.ob-starpath .sp-info{flex:none;display:flex;justify-content:space-between;padding:calc(10*var(--k)) calc(18*var(--k));font:700 calc(17*var(--k)) Arial;color:#cfe8ff}
.ob-starpath .sp-info b{color:#ffd166}.ob-starpath .sp-left b{color:#7dff7d}
.ob-starpath .sp-rows{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(8*var(--k));padding:calc(4*var(--k)) calc(14*var(--k)) calc(14*var(--k));scrollbar-color:#ffb347 #06224b}
.ob-starpath .sp-row{position:relative!important;flex:none;display:grid!important;grid-template-columns:calc(210*var(--k)) 1fr calc(160*var(--k));align-items:center;gap:calc(10*var(--k));min-height:calc(96*var(--k));padding:0 calc(14*var(--k));border-radius:calc(14*var(--k));border:calc(2*var(--k)) solid #6fc3ff55;background:linear-gradient(#123d75,#0a2a57);cursor:pointer}
.ob-starpath .sp-row.on{border-color:#ffd166;box-shadow:0 0 calc(14*var(--k)) #ffd16677}
.ob-starpath .sp-row.done .sp-name::after{content:' ✓';color:#7dff7d}
.ob-starpath .sp-name{font:900 calc(22*var(--k)) Arial;color:#fff;text-shadow:0 1px 2px #000}
.ob-starpath .sp-medals{display:flex;justify-content:space-around;align-items:center}
.ob-starpath .sp-medal{position:relative;display:grid;place-items:center;border-radius:50%;border:calc(4*var(--k)) solid #fff8;box-shadow:0 calc(4*var(--k)) calc(8*var(--k)) #0009,inset 0 calc(-6*var(--k)) calc(10*var(--k)) #0005;cursor:help}
.ob-starpath .sp-medal i{font:900 calc(30*var(--k))/1 Arial;font-style:normal;color:#fff;text-shadow:0 calc(2*var(--k)) calc(3*var(--k)) #0009}
.ob-starpath .sp-t0{width:calc(56*var(--k));height:calc(56*var(--k));background:radial-gradient(circle at 35% 30%,#f2b37a,#b8682f 55%,#6d3410)}
.ob-starpath .sp-t1{width:calc(62*var(--k));height:calc(62*var(--k));background:radial-gradient(circle at 35% 30%,#ffffff,#a9bccf 55%,#5c6f84)}
.ob-starpath .sp-t2{width:calc(68*var(--k));height:calc(68*var(--k));background:radial-gradient(circle at 35% 30%,#fff3a8,#f5b51b 55%,#9a5d00);border-color:#ffe9a0}
.ob-starpath .sp-t3{width:calc(76*var(--k));height:calc(76*var(--k));background:radial-gradient(circle at 35% 30%,#ff9ce2,#c026d3 50%,#5b0f74);border-color:#ffd1f3;box-shadow:0 0 calc(14*var(--k)) #e879f9,inset 0 calc(-6*var(--k)) calc(10*var(--k)) #0005}
.ob-starpath .sp-t2 i,.ob-starpath .sp-t3 i{font-size:calc(36*var(--k))}
.ob-starpath .sp-medal.got{filter:saturate(.75)}
.ob-starpath .sp-medal em{position:absolute;left:50%;top:-12%;transform:translateX(-50%) rotate(-14deg);padding:0 calc(6*var(--k));border-radius:calc(4*var(--k));background:#2fb84a;border:calc(2*var(--k)) solid #fff;font:900 calc(14*var(--k)) Arial;font-style:normal;color:#fff;white-space:nowrap}
.ob-starpath .sp-tip{display:none;position:absolute;left:50%;bottom:calc(100% + 10*var(--k));transform:translateX(-50%);z-index:20;width:calc(280*var(--k));padding:calc(10*var(--k)) calc(12*var(--k));border-radius:calc(10*var(--k));background:#0b1626f2;border:calc(2*var(--k)) solid #9fd3ff;font:700 calc(15*var(--k))/1.35 Arial;color:#fff;text-align:left;box-shadow:0 calc(6*var(--k)) calc(14*var(--k)) #000b;pointer-events:none}
.ob-starpath .sp-tip b{display:block;margin-bottom:calc(4*var(--k));color:#6fc3ff}
.ob-starpath .sp-tip small{display:block;color:#9fb8d4;margin-top:calc(4*var(--k))}
.ob-starpath .sp-tip u{text-decoration:none;color:#ff6b6b}
.ob-starpath .sp-medal:hover .sp-tip,.ob-starpath .sp-medal:focus .sp-tip{display:block}
.ob-starpath .sp-rows .sp-row:first-child .sp-tip{bottom:auto;top:calc(100% + 10*var(--k))}
.ob-starpath .sp-go{position:relative!important;height:calc(52*var(--k));border-radius:calc(26*var(--k))!important;border:calc(2*var(--k)) solid #ffe0a0!important;background:linear-gradient(#ffb84e,#e07a12)!important;color:#fff!important;font:900 calc(21*var(--k)) Arial!important;text-shadow:0 calc(2*var(--k)) calc(2*var(--k)) #7a3d06}
.ob-starpath .sp-go:hover:not(:disabled){filter:brightness(1.1)}
.ob-starpath .sp-go:disabled{filter:grayscale(.8) brightness(.8)}
.ob-starpath .sp-rules{margin:0;display:grid;place-items:center;text-align:center;font:700 calc(14*var(--k))/1.3 Arial;color:#cfe8ff}
/* Oyuncu kartları ekranı */
.ob-starpath .sp-top{display:flex;align-items:stretch;overflow:hidden;border-radius:calc(26*var(--k));border:calc(4*var(--k)) solid #9fd3ff;background:linear-gradient(170deg,#4fb2ff,#1572d6 55%,#0d56b0);box-shadow:inset 0 calc(4*var(--k)) 0 #ffffff55,0 calc(6*var(--k)) calc(14*var(--k)) #0007}
.ob-starpath .sp-top>img{flex:none;width:calc(380*var(--k));object-fit:contain;object-position:bottom;filter:drop-shadow(0 calc(6*var(--k)) calc(10*var(--k)) #0009)}
.ob-starpath .sp-top-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(10*var(--k));padding:calc(20*var(--k)) calc(30*var(--k)) calc(20*var(--k)) calc(10*var(--k))}
.ob-starpath .sp-top-text small{font:900 calc(18*var(--k)) Arial;letter-spacing:calc(2*var(--k));color:#ffe066;text-shadow:0 1px 2px #0008}
.ob-starpath .sp-top-text b{font:italic 900 calc(56*var(--k))/1 'Barlow Condensed',Arial;color:#fff;text-shadow:0 calc(3*var(--k)) 0 #0b3d7c}
.ob-starpath .sp-top-text p{margin:0;font:700 calc(19*var(--k))/1.4 Arial;color:#eaf5ff;text-shadow:0 1px 2px #0008}
.ob-starpath .sp-top-text u{text-decoration:none;color:#f2b37a;font-weight:900}
.ob-starpath .sp-bar{position:relative;height:calc(30*var(--k));border-radius:calc(15*var(--k));background:#06224bcc;border:calc(2*var(--k)) solid #cfe8ff;overflow:hidden}
.ob-starpath .sp-bar i{display:block;height:100%;background:linear-gradient(90deg,#f2b37a,#b8682f)}
.ob-starpath .sp-bar span{position:absolute;inset:0;display:grid;place-items:center;font:900 calc(17*var(--k)) Arial;color:#fff;text-shadow:0 1px 2px #000}
.ob-starpath .sp-side{display:flex;flex-direction:column;gap:calc(16*var(--k));justify-content:center}
.ob-starpath .sp-side .sp-left{font:900 calc(24*var(--k)) Arial;color:#7dff7d;text-shadow:0 1px 2px #000}
.ob-starpath .sp-side .sp-left b{color:#ff6b6b}
.ob-starpath .sp-side p{margin:0;font:700 calc(17*var(--k))/1.45 Arial;color:#cfe8ff}
.ob-starpath .sp-card{position:absolute!important;overflow:hidden;border-radius:calc(14*var(--k))!important;border:calc(4*var(--k)) solid #6fa8dc!important;background:radial-gradient(ellipse at 50% 30%,#3b5d86,#121e2e 75%)!important;box-shadow:0 calc(6*var(--k)) calc(12*var(--k)) #0009,inset 0 0 0 calc(2*var(--k)) #0008;transition:transform .15s,box-shadow .15s}
.ob-starpath .sp-card img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ob-starpath .sp-card b{position:absolute;left:0;right:0;bottom:0;padding:calc(4*var(--k));background:linear-gradient(transparent,#000d);font:900 calc(19*var(--k)) Arial;color:#fff;text-align:center}
.ob-starpath .sp-card .sp-prog{position:absolute;right:calc(6*var(--k));top:calc(6*var(--k));padding:calc(2*var(--k)) calc(8*var(--k));border-radius:calc(10*var(--k));background:linear-gradient(#f2b37a,#b8682f);border:calc(2*var(--k)) solid #fff;font:900 calc(15*var(--k)) Arial;font-style:normal;color:#fff}
.ob-starpath .sp-card:not(.locked):hover{transform:translateY(calc(-5*var(--k)));box-shadow:0 0 calc(18*var(--k)) #9fd3ff}
.ob-starpath .sp-card.cur{border-color:#ffd166!important;box-shadow:0 0 calc(18*var(--k)) #ffd166aa}
.ob-starpath .sp-card.done{border-color:#7dff7d!important}.ob-starpath .sp-card.done .sp-prog{background:linear-gradient(#5be06b,#1f9a36)}
.ob-starpath .sp-card.locked{cursor:not-allowed;background:radial-gradient(ellipse at 50% 70%,#3a0b0b,#0c0c0c 70%)!important;border-color:#4b5563!important}
.ob-starpath .sp-card.locked::before{content:'';position:absolute;left:18%;right:18%;top:22%;bottom:-8%;border-radius:45% 45% 10% 10%/38% 38% 10% 10%;background:#000;box-shadow:0 0 0 calc(3*var(--k)) #c81e1e}
.ob-starpath .sp-q{position:absolute;inset:0;display:grid;place-items:center;padding-top:calc(30*var(--k));font:900 calc(70*var(--k)) Arial;color:#e33;text-shadow:0 0 calc(10*var(--k)) #000}
.ob-starpath .sp-card.locked em{position:absolute;left:calc(-34*var(--k));top:calc(22*var(--k));width:calc(150*var(--k));transform:rotate(-40deg);background:linear-gradient(#7dff7d,#2fb84a);border:calc(2*var(--k)) solid #d4ffd4;text-align:center;font:900 calc(18*var(--k)) Arial;font-style:normal;color:#fff;text-shadow:0 1px 2px #0a4a12}
.ob-starpath .sp-back{position:absolute!important;border-radius:calc(30*var(--k))!important;border:calc(2*var(--k)) solid #9fd3ff!important;background:linear-gradient(#2f86ea,#1a5fc0)!important;font:900 calc(22*var(--k)) Arial!important;color:#fff!important}
.ob-starpath .sp-back:hover{filter:brightness(1.12)}