:root{--ff:system-ui,-apple-system,"Segoe UI",sans-serif;--bg:#f2efe8;--skin:#f1c27d;--hair:#5a3a1e;--tunic:#3b6fb6;--boots:#4a3320;--shadow:rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14161c;--skin:#f1c27d;--hair:#8a5a2b;--tunic:#5a8fd8;--boots:#6b4a30;--shadow:rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#14161c;--skin:#f1c27d;--hair:#8a5a2b;--tunic:#5a8fd8;--boots:#6b4a30;--shadow:rgba(0,0,0,.5)}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);touch-action:none;-webkit-user-select:none;user-select:none}
canvas{display:block;width:100%;height:100%}
:root{--panel:#fffdf7;--ink:#222;--line:#d8d2c4;--acc:#3b6fb6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--panel:#1e222c;--ink:#eee;--line:#363c4a;--acc:#5a8fd8}}
:root[data-theme="dark"]{--panel:#1e222c;--ink:#eee;--line:#363c4a;--acc:#5a8fd8}
/* Berfik Games açılışı (ui/splash.js). --u: ekrana göre birim, 100u ekrana sığar */
#splash{--u:min(1vw,1.2vh);position:fixed;inset:0;z-index:200;overflow:hidden;background:radial-gradient(circle at 50% 45%,#12224a,#05060f 70%);touch-action:none;transition:opacity .3s}
#splash.out{opacity:0}
#splash.shake{animation:sp-shake .35s linear}
#splash img{position:absolute;left:50%;top:50%;opacity:0;pointer-events:none;user-select:none}
.sp-holo{height:calc(70*var(--u));transform:translate(-50%,-50%);transition:opacity .45s}
.sp-holo.on{opacity:1!important}
.sp-holo.off{opacity:0!important}
.sp-cat{height:calc(60*var(--u));transform:translate(-50%,-50%) scale(.6)}
.sp-cat.on{opacity:1!important;transform:translate(-50%,-50%) scale(1);transition:transform .35s cubic-bezier(.2,1.7,.5,1)}
.sp-cat.left{transform:translate(calc(-50% - 24*var(--u)),-50%) scale(1);transition:transform .22s ease-out}
#splash .sp-cat.off,#splash .sp-meow.off{opacity:0!important;transition:opacity .15s}
.sp-meow{width:calc(54*var(--u));transform:translate(calc(-50% + 21*var(--u)),-50%) scale(.2) rotate(-14deg)}
.sp-meow.on{opacity:1!important;transform:translate(calc(-50% + 21*var(--u)),-50%) scale(1) rotate(0);transition:transform .32s cubic-bezier(.2,1.9,.5,1)}
.sp-logo{width:calc(98*var(--u));transform:translate(-50%,-58%) scale(.75)}
.sp-logo.on{opacity:1!important;transform:translate(-50%,-58%) scale(1);transition:transform .5s cubic-bezier(.2,1.5,.5,1),opacity .2s}
.sp-walk{height:calc(15*var(--u));top:auto!important;left:0!important;bottom:calc(50vh - 42*var(--u));transform:translateX(-120%)}
.sp-walk.on{opacity:1!important;animation:sp-walk 2.6s linear forwards}
.sp-scan{position:absolute;left:0;right:0;height:3px;top:15%;opacity:0;background:#6fe0ff;box-shadow:0 0 18px 5px #6fe0ff}
.sp-scan.on{animation:sp-scan 1.8s ease-in-out forwards}
.sp-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sp-flash.on{animation:sp-flash .45s ease-out}
.sp-sparks{position:absolute;left:50%;top:50%}
.sp-sparks i{position:absolute;width:calc(1.1*var(--u));height:calc(1.1*var(--u));border-radius:50%;opacity:0;animation:sp-spark .9s ease-out forwards}
@keyframes sp-spark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(calc(var(--dx)*var(--u)),calc(var(--dy)*var(--u))) scale(.2)}}
@keyframes sp-flash{0%{opacity:.9}100%{opacity:0}}
@keyframes sp-scan{0%{top:12%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:88%;opacity:0}}
@keyframes sp-walk{to{transform:translateX(100vw)}}
@keyframes sp-shake{0%,100%{transform:none}20%{transform:translate(-6px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(4px,3px)}}
#load,#start{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#14151f;color:#f2cb6e;font-family:var(--ff)}
#loadt{font-size:22px;font-weight:700;margin-bottom:14px}
#loadb{width:min(70vw,360px);height:16px;border:2px solid #f2cb6e;border-radius:10px;overflow:hidden;background:#242738}
#loadf{display:block;width:0;height:100%;background:linear-gradient(#f7dc95,#c9973f)}
#loadp{margin-top:10px;font-size:15px;font-weight:700}
#start{display:none;justify-content:flex-start;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));box-sizing:border-box;background-color:#14151f;background-size:cover;background-position:center;text-shadow:0 2px 4px rgba(0,0,0,.8)}
#startn{font-size:28px;font-weight:800;color:#fff}
#startd{font-size:15px;font-weight:700;margin-top:2px}
#startc{flex:1;min-height:0;width:100%;margin:8px 0}
#play{width:min(80vw,320px);font:inherit;font-weight:800;font-size:22px;padding:14px;border:2px solid #f2cb6e;border-radius:999px;background:linear-gradient(#4fa85a,#2c7a3c);color:#fff;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#menu{position:fixed;inset:0;z-index:90;display:none;align-items:stretch;justify-content:center;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));box-sizing:border-box;background-color:#14151f;background-size:cover;background-position:center;overflow:auto;touch-action:manipulation;font-family:var(--ff)}
.box{width:100%;max-width:440px;min-height:100%;display:flex;flex-direction:column;color:#fff;box-sizing:border-box}
.box h1{margin:0;font-size:26px;font-weight:800;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.8)}
#menuc{flex:1;min-height:130px;width:100%;margin:6px 0}
.box label{display:block;font-size:13px;font-weight:700;color:#f2cb6e;margin:8px 0 4px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#nm{width:100%;box-sizing:border-box;font-size:16px;padding:12px;border-radius:10px;border:2px solid #727586;background:rgba(20,21,31,.85);color:#fff;user-select:text;-webkit-user-select:text}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cls{font:inherit;color:inherit;text-align:left;padding:9px 12px;border-radius:12px;border:2px solid #727586;background:rgba(20,21,31,.85);color:#fff;cursor:pointer}
.cls.on{border-color:#f2cb6e;background:rgba(70,58,30,.92);box-shadow:0 0 10px rgba(242,203,110,.45)}
.cls b{display:block;font-size:16px}.cls span{display:block;font-size:12px;opacity:.7;margin-top:3px}
#go{width:100%;margin-top:12px;font:inherit;font-weight:800;font-size:20px;padding:13px;border:2px solid #f2cb6e;border-radius:999px;background:linear-gradient(#4fa85a,#2c7a3c);color:#fff;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* HUD (sol üst): assetss/hud/Game_UI_asset_preview_sheet_d164642c sol seçenek (img/ui/hud-frame.webp, 1153×456). Konumlar resmin yüzdesi:
   portre dairesi merkez %19,17 / %46,9, isim paneli, XP kanalı (resimde boş, doluluk #xf). Kalkan ayrı parça (hud-shield.webp), portrenin üstünde; içinde seviye */
#hud{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));--hw:min(272px,calc(100vw - var(--cw) - 26px));width:var(--hw);aspect-ratio:1153/456;display:none;pointer-events:none;font-family:var(--ff);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
#hud>*{position:absolute;margin:0}
#hbg,#hbg2{inset:0;width:100%;height:100%}
#hbg2{-webkit-mask-image:radial-gradient(circle calc(var(--hw)*.1388) at 19.17% 46.9%,transparent 97%,#000 100%);mask-image:radial-gradient(circle calc(var(--hw)*.1388) at 19.17% 46.9%,transparent 97%,#000 100%)}
#hav{left:4.42%;top:9.65%;width:29.49%;height:74.56%;border-radius:50%}
#hsh{left:24.72%;top:57.89%;width:13.88%;height:38.38%}
#hpl{left:40.5%;top:19.5%;width:55.3%;height:42.8%;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--hw)*.008);overflow:hidden}
#hn{font-weight:800;font-size:max(9px,calc(var(--hw)*.056));line-height:1.1;color:#f6e7b4;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hp{font-size:max(9px,calc(var(--hw)*.044));font-weight:800;line-height:1.1;color:#ffe9a8;text-shadow:0 1px 2px #000,0 0 3px #000,0 0 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hbar{left:41.81%;top:73.03%;width:45.97%;height:9.65%;border-radius:999px;overflow:hidden}
#xf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(#6af58a 0%,#25c24d 45%,#12903a 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.45),0 0 6px rgba(70,255,120,.55)}
#xt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:max(7px,calc(var(--hw)*.036));color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap}
#hl{left:31.66%;top:76.3%;transform:translate(-50%,-50%);font-weight:900;color:#3a2200;text-shadow:0 1px 0 rgba(255,235,170,.75);line-height:1;white-space:nowrap}
#rs,#rp,#gas{display:block;margin:12px auto 0;font:inherit;font-size:12px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);opacity:.7;cursor:pointer}
#cur{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));display:none;flex-direction:column;gap:3px;pointer-events:none;font-family:var(--ff)}
:root{--sw:min(270px,74vw);--cw:132px}
/* Altın / elmas sayacı: assetss/hud/Fantasy_RPG_UI_asset_preview_b39a2a67 sol seçenek (img/ui/coin.webp 1004×192, gem.webp 1004×216).
   Sayı koyu iç alanda, sağdaki + düğmesi (.cbp) Mağaza'nın Elmas sekmesini açar */
.cb{position:relative;width:var(--cw);filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.cb img{display:block;width:100%;height:auto}
.cb span{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--cw)*.1);color:#f6e7b4;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;overflow:hidden}
#cbc{aspect-ratio:1004/192}#cbg{aspect-ratio:1004/216}
#gold{left:17.93%;top:16.1%;width:64.1%;height:67.2%}
#gem{left:17.93%;top:19%;width:64.1%;height:60.6%}
.cbp{position:absolute;left:83.2%;width:13.2%;top:16%;height:68%;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.cbp:active{transform:scale(.9)}
#dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:none;align-items:flex-end;gap:18px;font-family:var(--ff)}


.sr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;border:1px solid var(--line);margin-bottom:8px;font-size:15px}
.sr b{font-size:16px}
.sc{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.sc.lock{opacity:.45}
.sc .si{font-size:26px;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px;background:color-mix(in srgb,var(--acc) 14%,transparent)}
.sc b{display:block;font-size:15px}
.sc small{display:block;font-size:12px;opacity:.7;margin-top:2px}
.sc .lv{margin-left:auto;font-size:12px;font-weight:700;white-space:nowrap}
.sc>div:nth-child(2){flex:1}
.sc .pab{opacity:1;font-weight:700;margin-top:4px}.sc .pab em{font-style:normal;font-weight:400;opacity:.65;margin-left:4px}
.sc .pph{opacity:.55;font-size:10px;font-weight:700;letter-spacing:.04em;margin-top:6px}
.sc .pps{opacity:.9;margin-top:1px}.sc .pps em{font-style:normal;font-weight:700;color:#7bf07b}
.rbar{display:flex;gap:6px;padding:8px 6px;border:1px solid #e8b730;border-radius:10px;background:color-mix(in srgb,#e8b730 16%,transparent);margin-bottom:8px}
.rbar>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.rbar span{font-size:12px;opacity:.8;white-space:nowrap}.rbar b{font-size:16px}
.gic{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;background:url(../img/ui/icon-gold.webp) center/contain no-repeat}
.up{font:inherit;font-weight:800;font-size:12px;padding:8px 12px;border-radius:999px;border:2px solid #e9c46a;background:linear-gradient(#5ce8a2,#2fb36d 55%,#1d8a50);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.4);cursor:pointer;white-space:nowrap;touch-action:manipulation}/* yeşil: altın, yıldız ve demir ikonlarıyla karışmasın */
.up:disabled{opacity:.3;cursor:default}
.up .stc{display:block;font-size:10px;font-weight:600;opacity:.8;margin-top:2px}
.sc .stars{display:block;font-size:13px;letter-spacing:1px;color:#ffc93c;line-height:1.2;margin-top:2px}.sc .stars i{font-style:normal;color:currentColor;opacity:.2}
/* Aşama çubuğu: assetss/hud/Fantasy_RPG_UI_asset_preview_b39a2a67 sol seçenek (img/ui/stage-bar.webp 1212×436): solda kale, ortada
   ilerleme kanalı (resimde boş, doluluk #stgf), sağda boss amblemi (#bossbtn), altta kanatlı plaka (#stgr önerilen güç) */
#stg{position:fixed;left:50%;transform:translateX(-50%);top:calc(122px + env(safe-area-inset-top,0px));width:var(--sw);aspect-ratio:1212/436;display:none;pointer-events:none;font-family:var(--ff);filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
@media (max-height:620px){#stg{top:calc(80px + env(safe-area-inset-top,0px))}}   /* kısa ekran (ör. 320×568): aşama çubuğu karakterin kafasına binmesin */
#stg>*{position:absolute;margin:0}
#stgi{inset:0;width:100%;height:100%}
#stgs{left:26.07%;top:44.72%;width:49.34%;height:15.83%;border-radius:999px;overflow:hidden}
#stgf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(#6af58a 0%,#25c24d 45%,#12903a 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.45)}
#stg.boss #stgf{width:100%!important;background:linear-gradient(rgba(240,90,70,.6),rgba(150,30,20,.6))}
#stg.boss{filter:drop-shadow(0 0 8px rgba(255,60,40,.75)) drop-shadow(0 4px 6px rgba(0,0,0,.4))}
#stgt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:max(8.5px,calc(var(--sw)*.045));color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap}
#bossbtn{left:77.64%;top:15.6%;width:18.73%;height:62.4%;display:none;border:0;padding:0;background:transparent;border-radius:46%;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#bossbtn.rdy{animation:bpulse 1.1s ease-in-out infinite}
@keyframes bpulse{0%,100%{box-shadow:0 0 6px 2px rgba(255,70,50,.45)}50%{box-shadow:0 0 18px 7px rgba(255,70,50,.95)}}
#bossbtn:disabled{opacity:.5;animation:none}
.slot{position:relative}
.cnt{position:absolute;right:4px;bottom:2px;font-size:11px;line-height:1;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.5);color:var(--ink)}
.pl2{position:absolute;top:2px;right:4px;font-size:11px;line-height:1;color:#e8a317;font-weight:800}
#skbar{position:fixed;left:0;right:0;bottom:calc(120px + env(safe-area-inset-bottom,0px));display:none;align-items:center;justify-content:center;gap:6px;padding:0 8px;pointer-events:none;font-family:var(--ff)}
#skbar>*{pointer-events:auto}
#auto{flex:none;width:54px;height:54px;border-radius:14px;font:inherit;font-weight:800;font-size:13px;border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:0;box-shadow:0 3px 10px rgba(0,0,0,.25)}
#auto small{font-size:9px;font-weight:700;opacity:.75}
#auto.on{background:#2fa84f;color:#fff;border-color:#1e7a37}
#sbs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none;flex:1;min-width:0}
#sbs::-webkit-scrollbar{display:none}
.sb{flex:none;position:relative;width:54px;height:54px;border-radius:14px;border:2px solid var(--line);background:var(--panel);font-size:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.sb i{font-style:normal;line-height:1}
.sb.off i{opacity:.5}
.sb.rdy{border-color:#2fa84f;box-shadow:0 0 0 3px rgba(47,168,79,.4)}
.sb .co{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55)}
.pk i{font-style:normal;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#petbar{position:fixed;left:0;right:0;bottom:calc(196px + env(safe-area-inset-bottom,0px));display:none;flex-direction:row;justify-content:center;gap:16px;pointer-events:none}
/* Pet yuvası: assetss/hud/Fantasy_RPG_pet_UI_asset_977d8f9a en sade seçenek (sol + dairesi): boş yuva + (img/ui/pet-add.webp), dolu yuva aynı halkanın + silinmiş hâli (pet-ring.webp).
   Pet resmi halkanın içinde (%13 içeride); bekleme karartması (.co) iç daireye maskelenir */
.pk{pointer-events:auto;position:relative;width:52px;height:52px;border-radius:50%;border:0;background:url(../img/ui/pet-ring.webp) center/100% 100% no-repeat;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));color:var(--ink)}
.pk i{position:absolute;inset:13%;width:auto;height:auto}
.pk.em{background-image:url(../img/ui/pet-add.webp)}.pk.em i{display:none}
.pk .co{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6);-webkit-mask:radial-gradient(circle 21px at 50% 50%,#000 97%,transparent 100%) bottom center/52px 52px no-repeat;mask:radial-gradient(circle 21px at 50% 50%,#000 97%,transparent 100%) bottom center/52px 52px no-repeat}
.pk .ct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 14px var(--ff);color:#fff;text-shadow:0 1px 3px #000}
.sb .ct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 16px var(--ff);color:#fff;text-shadow:0 1px 3px #000}
.pl{font:inherit;font-weight:700;font-size:20px;line-height:1;width:34px;height:34px;border-radius:50%;border:0;background:var(--acc);color:#fff;cursor:pointer;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pl:disabled{opacity:.25;cursor:default}
#rp:disabled{opacity:.3;cursor:default}
.sbar{height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink) 15%,transparent);overflow:hidden}
.sbar i{display:block;height:100%;background:#5cc85c}
#slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;border-radius:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 6%,transparent);min-width:0}
#slots{gap:6px!important}
.inb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px}
.rl{font-size:12px;opacity:.7;margin-bottom:6px}
#eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"kolye kask kanat" "silah char zirh" "yuzuk char kemer" ". bot .";gap:6px;align-content:start}
#eq .slot .e{opacity:.35;line-height:1}
#eq .slot.full .e{opacity:1}
#eq .slot .l{font-size:9px;opacity:.6;margin-top:2px}
.char{grid-area:char;position:relative;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--acc) 8%,transparent);overflow:hidden}
.char canvas{position:absolute;inset:0;width:100%;height:100%}

.dk{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;padding:0;cursor:pointer;font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dk img{width:74px;height:74px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.dk span{font-weight:800;font-size:11px;color:#f6e7b4;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.2px}
.dk:active{transform:scale(.95)}
.bd{position:absolute;z-index:1;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;background:#e0453a;color:#fff;font:800 11px/16px var(--ff);text-align:center;padding:0 4px;box-sizing:border-box;display:none;border:2px solid #fff}
/* ---- Pencereler (Yükseltme, Mağaza, Envanter): her ekranda tek tasarım, telefon düzeni. Telefonda ekranı kaplar; geniş ekranda ortada
   telefon genişliğinde (en fazla --fwmax) tam boy sütun, yanlarda oyun karartılır.
   Çerçeve: assetss/hud/Game_UI_asset_preview_sheet'ten kesildi (img/ui/frame-*, plate-*, close-*; 800 px genişlikte çizim).
   Çerçeve üst katman (::after, border-image 9 dilim: üst 250, yan 175, alt 200 kaynak px), köşeler bozulmadan pencere boyuna uzar.
   --s: kaynak pikselin ekrandaki boyu (pencere genişliği / 800). Varyant: Yükseltme bronz, Mağaza altın, Envanter gümüş ---- */
#up,#inv,#wld,#dng,#rng{--fwmax:480px;position:fixed;inset:0;display:none;z-index:10;background:rgba(5,7,10,.78);touch-action:manipulation;font-family:var(--ff)}
.fw{--s:calc(min(100vw,var(--fwmax))/800);--fimg:url(../img/ui/frame-bronz.webp);--pimg:url(../img/ui/plate-bronz.webp);--ximg:url(../img/ui/close-bronz.webp);
  position:absolute;inset:0;margin:0 auto;max-width:var(--fwmax);display:flex;flex-direction:column;box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) calc(28*var(--s)) calc(30*var(--s) + env(safe-area-inset-bottom,0px))}
#up.shop .fw{--fimg:url(../img/ui/frame-altin.webp);--pimg:url(../img/ui/plate-altin.webp);--ximg:url(../img/ui/close-altin.webp)}
#inv .fw{--fimg:url(../img/ui/frame-gumus.webp);--pimg:url(../img/ui/plate-gumus.webp);--ximg:url(../img/ui/close-gumus.webp)}
.fw::before{content:'';position:absolute;top:calc(52*var(--s) + env(safe-area-inset-top,0px));left:calc(8*var(--s));right:calc(8*var(--s));bottom:calc(6*var(--s));border-radius:calc(30*var(--s));background:#2d2e42;z-index:0}
.fw::after{content:'';position:absolute;inset:env(safe-area-inset-top,0px) 0 0;pointer-events:none;z-index:3;border-style:solid;border-width:calc(250*var(--s)) calc(175*var(--s)) calc(200*var(--s));border-image:var(--fimg) 250 175 200 stretch}
.fw>*{position:relative;z-index:1}
.fwh{flex:none;height:calc(150*var(--s));margin:0 calc(-28*var(--s));z-index:4}
.fwt{position:absolute;left:50%;top:calc(4*var(--s));width:calc(500*var(--s));height:calc(140*var(--s));transform:translateX(-50%);background:var(--pimg) center/100% 100% no-repeat;z-index:4;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:max(15px,calc(48*var(--s)));color:#2e1a08;text-shadow:0 1px 0 rgba(255,240,200,.55);letter-spacing:.5px;pointer-events:none}
.fwx{position:absolute;right:calc(-12*var(--s));top:calc(21*var(--s));width:calc(117*var(--s));height:calc(117*var(--s));min-width:40px;min-height:40px;border:0;border-radius:50%;padding:0;background:var(--ximg) center/100% 100% no-repeat;color:transparent;font-size:0;cursor:pointer;z-index:5;-webkit-tap-highlight-color:transparent}
.fwx:active{transform:scale(.92)}
/* Yükseltme sekmeleri: yuvarlak ikonlar (eski çerçeveden, upgrade-top.webp, --ix sırası); seçili sekme altın halka ve parıltı */
.uptb{flex:none;display:flex;justify-content:center;gap:16px;padding:10px 8px;background:#1f2130;border-bottom:1px solid #3a3d55}
.upt{position:relative;width:54px;height:54px;flex:none;border-radius:50%;padding:0;border:3px solid #5b5f78;background:#2a2d40;cursor:pointer;-webkit-tap-highlight-color:transparent}
.upt i{position:absolute;inset:0;border-radius:50%;filter:saturate(.35) brightness(.8);--k:.28;background:url(../img/ui/upgrade-top.webp) no-repeat;background-size:calc(2390px*var(--k)) auto;background-position:calc((382px + 477px*var(--ix))*var(--k)*-1 - 2px) calc(277px*var(--k)*-1 - 2px)}
.upt.on i{filter:none}
.upt.on{border-color:#f2cb6e;box-shadow:0 0 14px rgba(242,203,110,.8),inset 0 0 6px rgba(242,203,110,.5)}
/* Mağaza: ikonlu sekmeler yerine 2 yazılı sekme */
.ups{display:none;flex:none;justify-content:center;gap:10px;padding:10px;background:#1f2130;border-bottom:1px solid #3a3d55}
#up.shop .ups{display:flex}#up.shop .uptb{display:none}
.ups button{flex:1;max-width:220px;font:inherit;font-weight:900;font-size:15px;padding:10px 6px;border-radius:999px;border:2px solid #5b5f78;background:#2a2d40;color:#c9cbe0;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.ups button.on{background:linear-gradient(#f6d27a,#c9952f);border-color:#ffe6a0;color:#3b2208;text-shadow:0 1px 0 rgba(255,235,180,.6);box-shadow:0 0 10px rgba(242,203,110,.6)}
/* İçerik: iç panel (koyu lacivert), kaydırılır */
#upc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:10px;padding:10px;border-radius:14px;background:#1d1f2e;border:1px solid #3a3d55;box-sizing:border-box;--ink:#e6e8f5;--line:#727586;--acc:#f2cb6e;color:var(--ink);-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-color:#5b5d72 #0c0d11}
/* Envanter: envanter resminden (inventory.webp) iki bölüm kırpılır: ekipman paneli (yarım çözünürlükte x 69–555, y 91–589) ve
   çanta ızgarası (x 591–1076), her ekranda alt alta. Kutu konumları bölüme göre (game.js IVE/IVB).
   --iw: kırpılmamış resmin genişliği (yazı boyutları buna göre), bölüm genişliğinden container birimiyle hesaplanır */
#inv .ivb{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 10px}
.ivc{display:flex;flex-direction:column;align-items:center;gap:4px}
.ivl{padding:2px 12px;border-radius:999px;border:1px solid #c89a4a;background:rgba(36,20,8,.82);font-weight:800;font-size:12px;color:#f6dca0;letter-spacing:.6px;text-transform:uppercase}
.ivs{position:relative;container-type:inline-size;--iw:calc(100cqw*2.3755);width:min(calc(min(100vw,var(--fwmax))*.94),calc((100dvh - 210px)/2*.976));aspect-ratio:486/498;background:url(../img/ui/inventory.webp) no-repeat;background-size:237.55% auto;background-position:10.32% 59.28%;border-radius:10px;box-shadow:0 0 0 2px #6b4a24,0 4px 12px rgba(0,0,0,.5)}
#slots.ivs{aspect-ratio:485/498;--iw:calc(100cqw*2.3804);background-size:238.04% auto;background-position:88.27% 59.28%}
#eq,#slots{display:block;padding:0;gap:0;pointer-events:none}.iq{pointer-events:auto}
#eq .iq,#slots .iq{position:absolute;display:flex;align-items:center;justify-content:center;font-size:calc(var(--iw)*.04);border:0;background:transparent;aspect-ratio:auto;border-radius:6%}
#eq .iq{width:16.46%;height:16.06%;z-index:1}
#slots .iq{width:16.29%;height:15.86%}
#gbest{position:absolute;left:77.5%;top:80%;width:19%;height:14%;z-index:1;pointer-events:auto;padding:0 2px;font:inherit;font-weight:800;font-size:calc(var(--iw)*.0135);line-height:1.1;border-radius:8px;border:1px solid #ffe6a0;background:linear-gradient(#f6d27a,#c9952f);color:#3b2208;cursor:pointer;touch-action:manipulation}
#gbest:disabled{opacity:.4;cursor:default}#gbest:not(:disabled):active{transform:scale(.95)}
#eq .char{position:absolute;left:21.9%;top:18.35%;width:55.1%;height:52.3%;pointer-events:none;z-index:0;border:0;background:transparent;border-radius:0}
.ivf2{flex:none;display:flex;justify-content:center;gap:10px;padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px))}
#inv .ivf2 #rs,#inv .ivf2 #gas{margin:0;color:#f1e7d0;border-color:#566173}
.iq .e{opacity:1;font-size:inherit;line-height:1}.iq .l{display:none}
.iq .cnt{right:6%;bottom:4%;font-size:calc(var(--iw)*.019);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.iq .pl2{position:absolute;left:86%;top:12%;right:auto;transform:translate(-50%,-50%);font-size:calc(var(--iw)*.0165);line-height:1;color:#fff3c4;-webkit-text-stroke:calc(var(--iw)*.0035) #3a200c;paint-order:stroke fill;font-weight:900;white-space:nowrap;pointer-events:none;z-index:2}
.iq{isolation:isolate}.iq::before{content:'';position:absolute;inset:-4.4%;background-size:100% 100%;z-index:-1;opacity:0;pointer-events:none}.iq.on::before{opacity:1}#slots .iq::before{background-image:url(../img/ui/slot-frame.webp)}#eq .iq::before{background-image:url(../img/ui/equip-frame.webp)}
.sb{width:54px;height:54px;border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}.sbf{position:absolute;inset:0;background:url(../img/ui/skill-frame.webp) center/100% 100% no-repeat;pointer-events:none}.sbk{position:absolute;left:-5.2%;top:-1.6%;width:104.9%;height:103.8%;background:url(../img/ui/skill-lock.webp) center/100% 100% no-repeat;display:none;pointer-events:none;z-index:2}.sb.lk .sbk{display:block}.sb.lk i{display:none}.sb i{position:relative;font-size:24px}.sb .cw{position:absolute;left:9%;right:9%;top:9%;bottom:9%;border-radius:10%;overflow:hidden;pointer-events:none}.sb .ct{z-index:1}.sb.rdy{border:0;box-shadow:none}.sb.rdy .sbf{filter:drop-shadow(0 0 5px #4cff7a) drop-shadow(0 0 2px #4cff7a)}#sbs{padding:7px 6px;gap:6px;flex:0 1 auto;max-width:calc(100vw - 96px)}#auto{width:56px;height:60px;border:0;border-radius:0;box-shadow:none;background:url(../img/ui/auto.webp) center/100% 100% no-repeat;position:relative;flex:none;filter:saturate(.25) brightness(.7)}#auto.on{background:url(../img/ui/auto.webp) center/100% 100% no-repeat;border:0;filter:drop-shadow(0 0 5px #ffd36a) drop-shadow(0 0 2px #ffd36a)}#auto span,#auto small{position:absolute;bottom:7%;font-size:8px;font-weight:900;color:#fff3c4;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.3px;opacity:1}#auto span{left:0;right:0;text-align:center;bottom:19%}#auto small{left:0;right:0;text-align:center;font-size:7.5px;bottom:6%}#auto.on small{color:#9dff9d}
#admb,#admn,#adms{position:fixed;left:6px;top:46%;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(20,20,24,.55);color:#fff;font-size:16px;opacity:.45;z-index:30;padding:0;cursor:pointer}
#admn{top:calc(46% + 40px);font-size:14px}
#adms{top:calc(46% + 80px);font-size:14px}
#adm{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:60;font-family:var(--ff)}
#adm .ap{width:min(94vw,420px);max-height:88vh;overflow:auto;background:#241a10;border:2px solid #b98a4b;border-radius:14px;padding:12px 14px;color:#f3e2bf;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#adm h3{margin:0 0 8px;font-size:16px;display:flex;justify-content:space-between;align-items:center}
#adm .ar{margin:10px 0 4px;font-size:12px;font-weight:800;color:#e8b730;letter-spacing:.5px}
#adm .ag{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#adm button.ab{font:inherit;font-size:13px;font-weight:700;padding:7px 10px;border-radius:8px;border:1px solid #b98a4b;background:#3a2916;color:#f3e2bf;cursor:pointer}
#adm button.ab:active{background:#5a4024}
#adm input{font:inherit;font-size:14px;width:92px;padding:6px 8px;border-radius:8px;border:1px solid #b98a4b;background:#150e07;color:#fff}
#adm textarea{display:block;width:100%;box-sizing:border-box;margin:0 0 6px;font:12px/1.3 monospace;padding:6px 8px;border-radius:8px;border:1px solid #b98a4b;background:#150e07;color:#fff;resize:vertical;user-select:text;-webkit-user-select:text}
#adm .ax{background:transparent;border:0;color:#f3e2bf;font-size:20px;cursor:pointer}
#adm .am{font-size:11px;opacity:.7;margin-top:8px;min-height:14px}
#stgr{left:49.96%;top:86.9%;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;font-weight:800;font-size:max(9px,calc(var(--sw)*.04));white-space:nowrap;color:#ffe9a8;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
#stgr.g{color:#8dff9d;border-color:rgba(120,255,150,.6)}#stgr.y{color:#ffd95e}#stgr.r{color:#ff8a7a;border-color:rgba(255,120,100,.65)}
/* Stat sekmesi: Temel / Gelişmiş */
.stt{display:flex;gap:6px;margin-bottom:8px}
.stt button{flex:1;font:inherit;font-weight:800;font-size:13px;padding:8px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);opacity:.6;cursor:pointer;touch-action:manipulation}
.stt button.on{opacity:1;border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,transparent)}
.sgh{font-size:12px;font-weight:800;opacity:.85;margin:12px 2px 6px;letter-spacing:.4px}
.sr .sd{display:block;font-size:11px;font-weight:400;opacity:.6;margin-top:2px;line-height:1.25}
.sr>span:first-child{min-width:0;padding-right:8px}
.sr.zero b{opacity:.45}
img.sti.sti{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;margin:-.25em .1em -.2em 0;object-fit:contain}/* Admin: denge simülatörü çıktısı */
#adm .simo{font-size:12px;line-height:1.45;margin-top:6px;min-height:0}
#adm .simo small{opacity:.7}
#adm .simt{width:100%;border-collapse:collapse;font-size:11px;margin:4px 0}
#adm .simt th,#adm .simt td{border:1px solid #5a4024;padding:3px 4px;text-align:right}
#adm .simt th{background:#3a2916;font-weight:800}
#adm button.ab:disabled{opacity:.4}/* Ekipman: ızgaradaki/takılı eşya (nadirlik rengi --rc), eşya penceresi */
.iq.gr::after{content:'';position:absolute;inset:9%;border-radius:10%;z-index:-1;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 70%,transparent) 0%,color-mix(in srgb,var(--rc) 25%,transparent) 75%);box-shadow:inset 0 0 0 calc(var(--iw)*.0025) var(--rc),0 0 calc(var(--iw)*.008) var(--rc)}
.iq img{width:82%;height:82%;object-fit:contain;display:block;pointer-events:none}
#eq .iq:not(.gr) .e{opacity:.35}
.iq .gl{position:absolute;left:8%;bottom:4%;font-size:calc(var(--iw)*.014);line-height:1;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;font-weight:800;pointer-events:none}
.iq .gup{position:absolute;right:6%;top:4%;font-size:calc(var(--iw)*.016);line-height:1;color:#5dff7a;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
#gi{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.5);z-index:12;font-family:var(--ff);touch-action:manipulation}
.gib{width:min(100%,340px);max-height:88vh;overflow:auto;box-sizing:border-box;background:#241a10;border:1.5px solid var(--rc);border-radius:12px;padding:10px;color:#f3e2bf;box-shadow:0 0 24px color-mix(in srgb,var(--rc) 45%,transparent),0 10px 40px rgba(0,0,0,.6)}
.gih{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.gii{width:58px;height:58px;flex:none;display:flex;align-items:center;justify-content:center;font-size:32px;border-radius:12px;border:1px solid var(--rc);background:radial-gradient(circle,color-mix(in srgb,var(--rc) 50%,transparent),transparent 75%)}
.gii img{width:88%;height:88%;object-fit:contain}
.gih b{display:block;font-size:17px;color:var(--rc)}.gih small{display:block;font-size:12px;opacity:.7;margin-top:2px}
.gst{font-size:14px;line-height:1.65}.gst .m{font-size:15px;font-weight:800}
.gcmp{margin-top:10px;padding-top:8px;border-top:1px solid #5a4024;font-size:12px;line-height:1.55;opacity:.8}.gcmp small{display:block;opacity:.8;margin-bottom:2px}
.gsm{font-size:11px;opacity:.65;margin-top:6px}
.gpw{margin-top:10px;font-weight:800;font-size:15px}.gpw.u{color:#8dff9d}.gpw.d{color:#ff8a7a}
.gbt{display:flex;gap:8px;margin-top:12px}
.gbt button{flex:1;font:inherit;font-weight:800;font-size:13px;padding:10px 6px;border-radius:10px;border:1px solid #b98a4b;background:#3a2916;color:#f3e2bf;cursor:pointer;touch-action:manipulation}
.gbt button.pri{background:#e8b730;border-color:#e8b730;color:#2a2200}.gbt button:disabled{opacity:.35;cursor:default}
.gib{position:relative}.gx{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:1px solid #5a4024;background:transparent;color:#f3e2bf;font-size:15px;cursor:pointer;padding:0}
.gih{padding-right:30px}.gbt button{white-space:nowrap}
/* Envanter: karakter önizleme tuvali kutunun üstüne uzar (uzun kasklar kesilmesin); takılı slotta çerçeve resmi yok, nadirlik rengi kutunun içinde */
#eq .char canvas{top:-22%;height:122%}
#eq .iq.on::before{opacity:0}
#eq .iq.gr::after{inset:var(--gin)}
#eq .iq{--gin:14% 15% 13% 13%}
#eq .iq .e{position:absolute;inset:var(--gin);display:flex;align-items:center;justify-content:center}
#eq .iq img{width:86%;height:86%}
/* Elmas ikonu (HUD'daki gem.webp'nin soldaki taşı) */
.gic.gem{background-image:url(../img/ui/icon-gem.webp)}
/* Pet çağırma: 1× / 10× düğmeleri, garanti sayaçları, olasılıklar; pet kartında seviye ve kopya ilerlemesi */
.psm{padding:10px 12px;border:1px solid #a56be0;border-radius:12px;margin-bottom:10px;background:color-mix(in srgb,#a56be0 12%,transparent)}
.psb{display:flex;gap:8px}.psb .up{flex:1;font-size:14px;padding:10px 6px}
.psm>small{display:block;font-size:12px;opacity:.75;margin-top:6px;text-align:center}.psm .pod{font-size:11px;opacity:1}
.sc .plv{font-size:12px;font-weight:800;color:#ffc93c;margin-left:4px}
.sc .pcp{opacity:.8}.sc .pcp i{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,currentColor 18%,transparent);margin-top:2px;overflow:hidden}.sc .pcp i b{display:block;height:100%;background:#ffc93c}
/* Çağırma sonucu penceresi: kartlar sırayla belirir, Altın ve Kırmızı parlar */
.oflg{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 6px;font-weight:900;font-size:26px;color:#ffd23f}.oflg .gic{width:32px;height:32px}
.oflt{display:block;text-align:center;font-size:12px;opacity:.75;line-height:1.4}
#psr,#ofl{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);z-index:13;font-family:var(--ff);touch-action:manipulation}
.psrb{width:min(100%,380px);max-height:90vh;overflow:auto;box-sizing:border-box;background:#241a10;border:1.5px solid #a56be0;border-radius:12px;padding:10px;color:#f3e2bf;box-shadow:0 0 30px rgba(165,107,224,.45),0 10px 40px rgba(0,0,0,.6)}
.psrt{display:block;text-align:center;font-size:17px;margin-bottom:10px}
.psrg{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px}.psrg.m{grid-template-columns:repeat(5,1fr)}
.psc{width:100%;max-width:150px;box-sizing:border-box;text-align:center;padding:6px 2px;border-radius:10px;border:2px solid var(--rc);background:color-mix(in srgb,var(--rc) 16%,#241a10);opacity:0;animation:psPop .45s cubic-bezier(.2,1.4,.4,1) forwards}
.psc .psi{width:72%;aspect-ratio:1;margin:0 auto 2px}.psrg:not(.m) .psi{width:110px}
.psc b{display:block;font-size:11px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.psrg:not(.m) .psc b{font-size:16px}
.psc small{display:block;font-size:10px;opacity:.85;margin-top:1px}.psc em{font-style:normal;font-weight:800;color:#ffc93c}.psc em.nw{color:#7bf07b}
.psc.r4{box-shadow:0 0 14px var(--rc)}.psc.r5{box-shadow:0 0 22px var(--rc),0 0 6px #fff inset}
@keyframes psPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}100%{opacity:1;transform:none}}
/* Dar telefonda 4 düğme sığsın */
@media(max-width:374px){#dock{gap:8px}.dk img{width:68px;height:68px}}
/* Dünya penceresi: 6 eşit ızgara (2 sütun, 3 sıra), pencerenin içini doldurur */
#wlg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.wlc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:6px;border-radius:14px;border:2px solid #727586;background:#242738;color:#e6e8f5;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.wlc:active{transform:scale(.97)}
.wlc i{font-style:normal;font-size:48px;line-height:1}
.wlc b{font-weight:900;font-size:17px}
.wlc small{font-size:12px;opacity:.6}
/* Demirci'nin iç sekmeleri (.ups düğmeleri): Soket Yükseltme, Eşya Yapımı */
.ups.dmt{display:flex;margin:-10px -10px 10px;border-radius:14px 14px 0 0}
.dmt button{position:relative;font-size:14px}
/* Demirci: eşya yapımı. Kalite düğmeleri nadirlik renginde, slotlar 4 sütun; seçili olan altın kenar */
.crb{display:flex;gap:6px;margin-bottom:8px}
.crb button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:10px;border:2px solid var(--rc);background:#242738;color:var(--rc);font:inherit;font-weight:800;font-size:13px;cursor:pointer;touch-action:manipulation}
.crb small{font-size:11px;color:#e6e8f5;font-weight:600}
.crs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
.crs button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 2px;border-radius:10px;border:1px solid #727586;background:#242738;color:#e6e8f5;font:inherit;font-size:10px;font-weight:700;cursor:pointer;touch-action:manipulation}
.crs i{font-style:normal;font-size:20px;line-height:1}
.crb button.on,.crs button.on{box-shadow:0 0 0 2px #f2cb6e,0 0 10px rgba(242,203,110,.6);border-color:#f2cb6e}
/* Zindan penceresi: 6 eşit satır, alt alta; ikon solda, yazı yanında */
#dngl,#rngl{flex:1;min-height:0;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
#rngl{grid-template-rows:repeat(4,minmax(0,1fr))}
.upt i.rni{background:none;display:flex;align-items:center;justify-content:center;font-size:28px;font-style:normal}
#dngl .wlc,#rngl .wlc{display:grid;grid-template-columns:64px 1fr auto;align-items:center;justify-items:start;gap:10px;padding:6px 14px;text-align:left}
#dngl .wlc.off,#rngl .wlc.off{cursor:default}
/* Kapaklı zindan satırı: arkada harita ve boss (.dnc, .dnb), yazılar koyu altın çerçeveli plakada. Kapalı ya da hakkı biten zindanın kapağı solar */
#dngl .wlc.cv,#rngl .wlc.cv{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:8px 12px;border-color:#c89a4a}
.wlc.cv>i{display:none}
.dnc{position:absolute;inset:0}
.dnc::before{content:'';position:absolute;inset:0;background:var(--bg) center/cover no-repeat}
/* Boss: hatlarında parlak altın çerçeve, haritadan ayrılsın */
.dnb{position:absolute;right:6px;background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 0 1px #fff4c2) drop-shadow(0 0 1px #fff4c2) drop-shadow(0 0 5px rgba(255,205,90,.95))}
.wlc.off .dnc::before{filter:grayscale(.85) brightness(.5)}
.wlc.off .dnb{filter:grayscale(.7) brightness(1.15) drop-shadow(0 0 1px #e8e8e8) drop-shadow(0 0 1px #e8e8e8) drop-shadow(0 0 4px rgba(255,255,255,.6))}
.wlc.cv>b,.wlc.cv>small{position:relative;padding:3px 10px;border-radius:8px;border:1px solid #c89a4a;background:rgba(20,14,8,.85);color:#fff3d0;text-shadow:0 1px 2px #000;opacity:1;white-space:nowrap}
.wlc.cv>b{font-size:16px}.wlc.cv>small{font-size:12px;color:#f6dca0}
#dngl .wlc i,#rngl .wlc i{font-size:38px;justify-self:center}#dngl .wlc small,#rngl .wlc small{justify-self:end;text-align:right}
/* Pet sekmesinden Mağaza'ya düğme; elmas paketleri; çağırma havuzu (nadirliğe göre petler) */
.pgo{display:block;width:100%;margin-bottom:10px;font-size:14px;padding:10px}
.gpk .si .gic{width:34px;height:34px}.gpk .gbn{font-size:11px;font-weight:800;color:#7bf07b;margin-left:4px}
.shi{font-size:12px;opacity:.65;margin-top:6px;line-height:1.35}
.ppo{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:6px;border-left:3px solid var(--rc);border-radius:6px;background:color-mix(in srgb,var(--rc) 10%,transparent)}
.ppr{width:64px;flex:none;font-size:12px;font-weight:800;color:var(--rc)}.ppr b{display:block;font-size:11px;opacity:.85}
.ppi{position:relative;width:46px;height:46px;flex:none;border:2px solid var(--rc);border-radius:9px;background:rgba(0,0,0,.25);padding:2px;box-sizing:border-box}
.ppi.no{opacity:.45;filter:grayscale(.8)}
.ppi i{position:absolute;right:-4px;bottom:-4px;font-size:9px;font-weight:800;font-style:normal;padding:0 3px;border-radius:4px;background:rgba(0,0,0,.75);color:#ffc93c}
/* Pet kartı: ekstra pasifler (✦, nadirliğe göre) ve savaş gücü katkısı */
.sc .pps.px{color:#c9a8ff}.sc .ppw{opacity:1;font-weight:800;color:#ffb347;margin-top:4px}
/* Pencere içi kartlar ve satırlar (tasarım: lacivert kart, gri kenar; takılı/seçili olan altın kenar ve parıltı) */
#upc .sc,#upc .sr{background:#242738;border:2px solid #727586;border-radius:12px}
#upc .sc.on{border-color:#f2cb6e;box-shadow:0 0 10px rgba(242,203,110,.45)}
#upc .rbar,#upc .psm{border-radius:12px}