/* Alt yarı HUD: ortada ince yetenek sırası + altında ince can çubuğu, sağ altta eşkenar dörtgen vuruş düğmesi,
   sol altta küçük seviye/TP yazısı. Hepsi yarı saydam ve küçük; 3B görüntü açık kalır. Mantıksal ölçü 640x360.
   hud.css JS ile sonradan yüklendiği için seçiciler bir öğe fazla (html body ...). */

/* yetenek yayı, nihai, çağırma ve iksirler eski yerlerinde (kullanıcı isteği) */

/* — Orta alt: ince can çubuğu (sayılar içinde) ve sağında savaş gücü — */
html body #game.run #runBars { display: block !important; position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 7px !important;
  width: 210px !important; height: auto !important; transform: translateX(-50%) !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; zoom: 1 !important; pointer-events: none; opacity: var(--hud, 1); }
html body #game.run #runPortrait, html body #game.run #runBuffs { display: none !important; }
html body #game.run #runBars > div { display: block !important; }
/* Can çubuğu (hpbar.js katmanları): çukur zemin, <s> hasar izi, <em> iyileşme öncüsü, <u> ana dolgu, <b> yazı + %10 çentik; çerçeve img/ui/hp-frame.svg (::after).
   Dolgular transform: scaleX ile değişir (yerleşim hesabı yok); süreler burada. */
html body #game.run #hpBar { display: block !important; position: relative !important; width: 100% !important; height: 12px !important; margin: 4px 0 0 !important; overflow: visible !important;
  background: linear-gradient(180deg, #050101, #1c0705 55%, #2a0c08) !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9) !important; }
html body #game.run #hpBar::after { content: "" !important; display: block !important; position: absolute !important; inset: -4px -12px !important; z-index: 3 !important; pointer-events: none;
  border: solid transparent !important; border-width: 0 13px !important; border-image: url(img/ui/hp-frame.svg) 0 26 fill / 0 13px round !important; background: none !important; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .8)); transition: filter .3s; }
html body #game.run #hpBar.hb u, html body #game.run #hpBar.hb s, html body #game.run #hpBar.hb em { position: absolute !important; inset: 0 !important; width: auto !important; border-radius: 0 !important; transform-origin: 0 50%; will-change: transform; }
html body #game.run #hpBar u { overflow: hidden; z-index: 1; box-shadow: inset 0 -2px 2px rgba(50, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 200, .55) !important; animation: none !important; filter: none !important;
  background: linear-gradient(180deg, #ff9c84 0%, #e8402c 30%, #b3170f 62%, #6e0906 100%) !important; transition: transform .14s ease-out; }
html body #game.run #hpBar.hbHeal u { transition: transform .7s cubic-bezier(.3, .6, .3, 1) .18s; } /* iyileşme: yeşil öncü önden dolar, kırmızı arkadan yetişir */
html body #game.run #hpBar u::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); } /* cam parıltı */
html body #game.run #hpBar u::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 240, 220, .35), transparent); transform: translateX(-120%); animation: hbSheen 4.5s ease-in-out infinite; }
html body #game.run #hpBar s { background: linear-gradient(180deg, #fff3dc, #ffc08a 50%, #e07a4a) !important; opacity: .92; transition: transform .55s cubic-bezier(.5, 0, .7, 1); } /* hasar izi */
html body #game.run #hpBar em { background: linear-gradient(180deg, #e8ffb8, #7ed957 45%, #2f8a2a) !important; box-shadow: 0 0 6px rgba(150, 255, 120, .6); transition: transform .12s ease-out; }
html body #game.run #hpBar b { position: absolute !important; inset: 0 !important; z-index: 4; text-align: center; font: 800 9px/12px system-ui, sans-serif !important; letter-spacing: .3px !important; color: #fffaf0 !important;
  text-shadow: -1px 0 #1a0402, 1px 0 #1a0402, 0 -1px #1a0402, 0 1px #1a0402, 0 1px 3px #000 !important; font-variant-numeric: tabular-nums;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(20, 2, 0, .5) calc(10% - 1px) 10%) 0 0 / 100% 40% no-repeat, repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(20, 2, 0, .35) calc(10% - 1px) 10%) 0 100% / 100% 25% no-repeat; } /* %10 çentik */
html body #game.run #hpBar.low u { background: linear-gradient(180deg, #e0604c 0%, #b81c10 35%, #7a0804 70%, #3e0302 100%) !important; }
html body #game.run #hpBar.low u::before { animation: hbPulse .9s ease-in-out infinite alternate; }
html body #game.run #hpBar.low::after { filter: drop-shadow(0 0 3px rgba(255, 50, 20, .95)) drop-shadow(0 1px 1px #000); }
@keyframes hbSheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
@keyframes hbPulse { from { opacity: .15; } to { opacity: 1; } }
html body #game.run #hpBar[data-pw]::before { content: attr(data-pw); position: absolute; left: calc(100% + 16px); top: -1px; padding-left: 12px; white-space: nowrap;
  font: 800 9px/14px system-ui, sans-serif; color: #ffe08a; text-shadow: 0 1px 2px #000;
  background: url(img/gi/crossed-swords.png) left center / 10px no-repeat; }
html body #game.run #rageBar { display: block !important; position: relative !important; width: calc(100% - 16px) !important; height: 4px !important; margin: 5px auto 0 !important; overflow: hidden !important; border-radius: 2px !important;
  border: 1px solid #7a5420 !important; background: linear-gradient(180deg, #050302, #241708) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 1px #000 !important; }
html body #game.run #rageBar u { border-radius: 0 !important; background: linear-gradient(180deg, #fff2b0, #e8b443 45%, #9a6214) !important; box-shadow: none !important; transition: width .2s; }
html body #game.run #rageBar::before { display: none !important; }

/* — Sağ alt: büyük eşkenar dörtgen vuruş, yanında küçük yuvarlan/blok/al — */
html body #game.run #runAct #btnAtk, html body #game.run #runAct #btnRoll, html body #game.run #runAct #btnBlk, html body #game.run #runAct #btnPick:not([hidden]) {
  background: var(--i) center / 46% no-repeat !important; border: 0 !important; box-shadow: none !important; filter: none !important; animation: none !important; overflow: visible !important; }
html body #game.run #runAct #btnAtk::before, html body #game.run #runAct #btnRoll::before, html body #game.run #runAct #btnBlk::before, html body #game.run #runAct #btnPick:not([hidden])::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 15% !important; z-index: -1 !important; transform: rotate(45deg) !important;
  background: rgba(10, 14, 22, .42) !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; border-radius: 3px !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) !important; mask: none !important; -webkit-mask: none !important; }
html body #game.run #runAct #btnAtk:active::before, html body #game.run #runAct #btnRoll:active::before, html body #game.run #runAct #btnBlk.on::before { background: rgba(255, 255, 255, .22) !important; }
html body #game.run #runAct .ib { isolation: isolate; }
html body #game.run #runAct #btnAtk { --s: 74px; --x: 14px; --y: 14px; background-size: 40% !important; }
html body #game.run #runAct #btnRoll { --s: 40px; --x: 86px; --y: 6px; }
html body #game.run #runAct #btnBlk { --s: 40px; --x: 6px; --y: 86px; }
html body #game.run #runAct #btnPick:not([hidden]) { --s: 40px; --x: 70px; --y: 70px; }
html body #game.run #runAct #btnPick:not([hidden])::before { border-color: #ffd86a !important; }
html body #game.run #runAct #btnAtk::after, html body #game.run #runAct #btnRoll::after, html body #game.run #runAct #btnBlk::after, html body #game.run #runAct #btnPick::after {
  bottom: 2px !important; background: none !important; font: 700 6px/8px system-ui, sans-serif !important; color: rgba(255, 255, 255, .75) !important; }
html body #game.run #runAct #btnRoll[data-cd]::after { inset: 15% !important; bottom: 15% !important; transform: rotate(45deg); border-radius: 3px; background: rgba(0, 0, 0, .5) !important; font: 800 10px/1 system-ui, sans-serif !important; color: #fff !important; }

/* — Sol alt: küçük seviye ve TP yazısı, sohbet sekmelerinin üstünde; sağındaki bildirim paneline değmeyecek genişlikte — */
html body #game.run #xpPct { left: auto !important; right: calc(50% + 122px) !important; bottom: 9px !important; transform: none !important; max-width: 72px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 6.5px/9px system-ui, sans-serif !important; color: rgba(255, 255, 255, .7) !important; }
html body #game.run #xpPct[data-lv]::before { content: attr(data-lv) "  EXP "; font: 800 9px/9px system-ui, sans-serif; color: #fff; }
/* sanal kol: yarı saydam, ince */
html body #game.run #joy { border: 1px solid rgba(255, 255, 255, .3) !important; background: rgba(10, 14, 22, .18) !important; box-shadow: none !important; }
html body #game.run #joy i { background: rgba(255, 255, 255, .45) !important; box-shadow: none !important; }
/* #heroStatus: yalnız seviye mührü (Seviye Ödülleri'ni açar) sol üstte portrenin yanında; can/TP alttaki ince çubukta */
/* sol üst karakter paneli: portrenin (#hudFace) sağında koyu cam plaka, bronz ince çerçeve; üstte ad (#hudFace b), altta seviye mührü + VIP + Günlük Giriş */
html body #game.run #heroStatus { left: calc(var(--safeL, 0px) + 24px) !important; top: 7px !important; bottom: auto !important; right: auto !important; transform: none !important; zoom: 1 !important; gap: 4px !important; min-width: 76px; padding: 11px 6px 2px 18px !important; border: .7px solid rgba(201, 151, 74, .75) !important; border-left: 0 !important; border-radius: 0 8px 8px 0 !important;
  background: radial-gradient(120% 80% at 50% 0, rgba(201, 151, 74, .16), transparent 70%), linear-gradient(180deg, rgba(30, 22, 14, .62), rgba(10, 8, 6, .7)) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .55), inset 0 .6px 0 rgba(255, 230, 170, .15) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html body #game.run #heroStatus > .hero-vitals { display: none !important; }
html body #game.run #heroStatus > .hero-level { flex-basis: 18px !important; width: 18px !important; height: 18px !important; font-size: 7px !important; border-width: 1.5px !important; }

/* iksirler: can çubuğunun üstüne, biraz küçük (çakışıyordu) */

html body #game.run #potRow { bottom: 28px !important; left: calc(50% - 60px) !important; gap: 4px !important; }

/* sohbet daha dar: bildirim paneli de sola kayar (sohbetin hemen sağına oturur) */
html body #game.run #chatLog { width: 130px !important; }

/* Çağırma Parşömeni: yetenek yayının üstünde, 2. yeteneğin sol üstü (çakışıyordu) */
html body #game.run #runAct #btnCagir { --x: 150px !important; --y: 122px !important; }

/* yeniden bağlanırken: donmuş dünya görünür, eski oyun düğmeleri ve menüler gizli */
body.relinking #game > *:not(canvas):not(#netBanner) { visibility: hidden !important; }
body.relinking .screen:not(#game) { display: none !important; }
/* Hedef çerçevesi (#targetFrame i, hpFill): aynı katmanlar — kırmızı dolgu + cam parıltı, krem hasar izi, yeşil iyileşme öncüsü */
html body #game.run #targetFrame i.hb { position: relative !important; height: 6px !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), 0 0 0 1px rgba(201, 151, 74, .55) !important; }
html body #game.run #targetFrame i.hb > * { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; transform-origin: 0 50%; will-change: transform; }
html body #game.run #targetFrame i.hb u { z-index: 2; background: linear-gradient(180deg, #ff8a70, #d02a1c 45%, #7a0a06) !important; }
html body #game.run #targetFrame i.hb u::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .04)); }
html body #game.run #targetFrame i.hb s { z-index: 1; background: linear-gradient(180deg, #fff3dc, #ffc08a 50%, #e07a4a) !important; opacity: .9; transition: transform .55s cubic-bezier(.5, 0, .7, 1); }
html body #game.run #targetFrame i.hb em { z-index: 1; background: #7ed957 !important; transition: transform .12s ease-out; }
html body #game.run #targetFrame.rare i.hb u { background: linear-gradient(180deg, #e0a8ff, #9a3ad8 45%, #4a1070) !important; }
#bossFrame .bfBar u::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .03)); } /* boss çubuğu: aynı cam parıltı */
/* İksirler can çubuğunun üstünde, küçük. */
html body #game.run #potRow { bottom: 48px !important; }
html body #game.run #potRow .ib { width: 24px !important; height: 24px !important; }
/* Kırmızı iksir de diğerleriyle aynı boyda ve aynı hizada, sıranın solunda. */
html body #game.run #btnPot { width: 24px !important; height: 24px !important; bottom: 48px !important; left: calc(50% - 88px) !important; }