/* Üst yarı arayüz (mobil MMO düzeni): saydam, küçük, boyalı simgeler (her düğmede tek simge).
   Sol üst: yuvarlak portre + karakter paneli (ad, seviye, VIP, günlük giriş); yanında Menü yüzüğü.
   Sağ üst: yuvarlak harita; altında bölge hapı, konum ve ağ/saat satırı (sağa yaslı); onun altında görev listesi.
   Mantıksal ölçü (sahne ~640x360). Konumlar CSS'te; layoutHud artık leftDock/questTrack üstünü yazmaz. */

/* — Sağ üst, haritanın altı: bölge adı (haritanın içinden çıkar, sahneye göre konumlanır: #stage dönüşümlü) — */
html body #game.run #runSide:not(.big) #mapTag { position: fixed; right: calc(var(--safeR, 0px) + 3px); top: calc(env(safe-area-inset-top, 0px) + var(--mapW) + 7px); left: auto; bottom: auto; width: auto; max-width: 130px; height: 13px; padding: 0 7px 0 14px; flex-direction: row; align-items: center; text-align: left;
  background: linear-gradient(270deg, rgba(10, 8, 6, .7), rgba(10, 8, 6, .4)); border: .7px solid rgba(201, 151, 74, .6); border-radius: 7px; }
html body #game.run #mapTag::before { content: ''; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 4px; border: solid #fff; border-width: 0 1.2px 1.2px 0; transform: rotate(45deg); opacity: .9; }
html body #game.run #mapTag b { font: 600 8px/13px system-ui, sans-serif; letter-spacing: .2px; color: #f6f3ea; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
html body #game.run #mapTag small { position: absolute; right: 2px; top: calc(100% + 2px); font: 600 6.5px/9px system-ui, sans-serif; color: rgba(240, 236, 224, .85); text-shadow: 0 1px 1px #000; white-space: nowrap; }
/* ince bilgi satırı: konum · ağ · saat */
html body #game.run #mapInfo { position: fixed !important; left: auto !important; right: calc(var(--safeR, 0px) + 5px) !important; top: calc(env(safe-area-inset-top, 0px) + var(--mapW) + 31px) !important; margin: 0 !important; gap: 4px !important; z-index: 7; }
html body #game.run #mapInfo .pill { height: 9px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font: 600 6.5px/9px system-ui, sans-serif !important; color: rgba(240, 236, 224, .85) !important; text-shadow: 0 1px 1px #000; }

/* — Sol üst: portre sırası (yuvarlak, ince çerçeve) — */
html body #game.run #hudFace { z-index: 9; left: calc(var(--safeL, 0px) + 5px); top: 5px; width: 34px; height: 34px; }
html body #game.run #hudFace i { width: 34px; height: 34px; box-sizing: border-box; border: 1.2px solid var(--kd-bronze, #c9974a); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); pointer-events: auto; cursor: pointer; }
/* ad: #heroStatus plakasının üst satırında (plaka sol 24+18 iç boşluk) */
html body #game.run #hudFace b { left: 38px; top: 3.5px; max-width: 78px; font: 700 7px/9px Cinzel, Georgia, serif; color: var(--kd-gold-hi, #f0d48e); }

/* — Menü ve Çanta yüzükleri: Işınlan ve Topluluk yüzüğüyle aynı (style.css #btnRing, topluluk.js #tpIcon) — bronz halka, koyu disk, içte tek boyalı simge,
   altında Cinzel etiket, sağ üstte kırmızı nokta. Eski sol üst ızgara (#leftDock) ve sağ üst sıra (#runTog) gizli; öğeleri menü penceresinde (menu.js). */
html body #game.run :is(#leftDock, #runTog, #btnTogs) { display: none !important; }
#btnMenu, #btnInv { display: none; }
html body #game.run #btnMenu { display: block; } /* sol sütunda Çantanın üstü (yeri app.js layoutHud) */
html body #game.run :is(#btnMenu, #btnInv) { position: absolute; z-index: 6; width: 32.2px !important; height: 32.2px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; cursor: pointer; font-size: 0 !important;
  background: var(--i) center / 56% no-repeat, url(img/ui/skill_ring.webp) center / 100% 100% no-repeat, radial-gradient(circle, rgba(90, 60, 30, .95) 0 46%, rgba(20, 14, 8, .9) 62%, transparent 64%) !important;
  box-shadow: none !important; filter: drop-shadow(0 1.9px 3.1px rgba(0, 0, 0, .7)) !important; transition: transform .12s; }
html body #game.run #btnInv { display: block !important; }
#btnMenu { --i: url(img/ui/ic_menu.webp); }
html body #game.run :is(#btnMenu, #btnInv):hover { transform: scale(1.07); } html body #game.run :is(#btnMenu, #btnInv):active { transform: scale(.93); }
html body #game.run :is(#btnMenu, #btnInv)::after { content: "Menü" !important; display: block !important; position: absolute !important; inset: auto auto -7.4px 50% !important; transform: translateX(-50%) !important; width: auto !important; height: auto !important; padding: 0 !important; background: none !important;
  font: 700 5.6px "Cinzel", Georgia, serif !important; color: var(--qGoldL, #f3d58a) !important; text-shadow: 0 1px 2px #000, 0 0 1.9px #000 !important; white-space: nowrap; }
html body #game.run #btnInv::after { content: "Çanta" !important; }
html body #game.run :is(#btnMenu.mnDot, #btnInv.newItem)::before { content: '' !important; position: absolute; inset: -3px -3px auto auto !important; width: 9px !important; height: 9px !important; border-radius: 50%; background: #c0281a !important; box-shadow: 0 0 0 1px #000 !important; z-index: 3; }
/* Etkinlik simgesi: beyaz çizgi takvim (evtui.js) yerine yaldızlı zaman simgesi (menü penceresi buradan okur) */
#btnEvt { --i: url(img/ui/ic_zaman.webp) !important; }

/* — Menü penceresi (document.body'de, gerçek px): buzlu koyu cam, bronz çerçeve, simge ızgarası — */
#kdMenu { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, .22); --r: clamp(38px, 8.5vh, 60px); }
#kdMenu[hidden] { display: none; }
#kdMenu .mnBox { position: relative; box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100vh - 16px); overflow: auto; padding: 8px 18px 16px; border: 1px solid var(--kd-bronze); border-radius: 14px;
  background: radial-gradient(120% 60% at 50% 0, rgba(201, 151, 74, .18), transparent 70%), linear-gradient(180deg, rgba(30, 22, 14, .58), rgba(10, 8, 6, .66));
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: var(--kd-win-shadow); color: var(--kd-ink); scrollbar-width: thin; scrollbar-color: var(--kd-bronze) transparent; }
#kdMenu .mnBox::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(230, 194, 122, .28); border-radius: 10px; pointer-events: none; }
#kdMenu header { position: relative; display: flex; justify-content: center; align-items: center; min-height: 30px; }
#kdMenu header b { font: 700 15px/1 var(--kd-head); letter-spacing: .18em; text-transform: uppercase; color: var(--kd-gold); text-shadow: 0 1px 0 #000, 0 0 10px rgba(230, 180, 90, .35); }
#kdMenu header b::before, #kdMenu header b::after { content: '◆'; margin: 0 10px; font-size: 8px; vertical-align: middle; color: var(--kd-bronze); }
#kdMenu .mnX { position: absolute; right: -8px; top: 0; width: 28px; height: 28px; padding: 0 0 2px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--kd-bronze);
  background: linear-gradient(#3a2a18, #1a120a); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .15), 0 1px 3px rgba(0, 0, 0, .6); color: var(--kd-ink); font: 400 14px/1 var(--kd-body); cursor: pointer; }
#kdMenu .mnX:hover { color: #fff; border-color: var(--kd-gold-hi); }
#kdMenu .mnGrid { display: grid; grid-template-columns: repeat(6, calc(var(--r) + 30px)); justify-content: center; gap: 12px 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--kd-line); }
#kdMenu .mnGrid button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer;
  font: 700 clamp(9px, 1.8vh, 12px)/1.1 var(--kd-head); color: var(--kd-gold-hi); text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
#kdMenu .mnGrid button[hidden] { display: none; }
#kdMenu .mnGrid i { position: relative; width: var(--r); height: var(--r); border-radius: 50%; transition: transform .12s;
  background: var(--i) center / 56% no-repeat, url(img/ui/skill_ring.webp) center / 100% 100% no-repeat, radial-gradient(circle, rgba(90, 60, 30, .95) 0 46%, rgba(20, 14, 8, .9) 62%, transparent 64%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7)); }
#kdMenu .mnGrid button:hover i { transform: scale(1.07); filter: drop-shadow(0 0 6px rgba(255, 210, 120, .55)); } #kdMenu .mnGrid button:active i { transform: scale(.93); }
#kdMenu .mnGrid b { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #c0281a; color: #fff; font: 800 10px/16px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 1px #000; }
#kdMenu .mnGrid b:empty { min-width: 0; width: 12px; height: 12px; padding: 0; }
#kdMenu .mnGrid b[hidden] { display: none; }
/* Günlük Giriş takvimi (hud.js, VIP rozetinin yanı): aynı yüzük, içte takvim, sağ üstte rozet */
html body #game.run #heroStatus > #dayBadge { width: 18px !important; height: 18px !important; border: 0 !important; border-radius: 50% !important; background: url(img/ui/skill_ring.webp) center / 100% 100% no-repeat, radial-gradient(circle, rgba(90, 60, 30, .95) 0 46%, rgba(20, 14, 8, .9) 62%, transparent 64%) !important; box-shadow: none !important; filter: drop-shadow(0 1.9px 3.1px rgba(0, 0, 0, .7)); color: #f3d58a !important; }
html body #game.run #heroStatus > #dayBadge svg { width: 52% !important; height: 52% !important; filter: drop-shadow(0 0 2px rgba(255, 200, 120, .7)); }
html body #game.run #heroStatus > #dayBadge.rwDot::after { top: -3px !important; right: -3px !important; width: 9px !important; height: 9px !important; }

/* — Küçük yuvarlak harita: simge sırasının altında, ince çerçeve — */
html body #game.run { --mapW: 54px; } html body #game.mapS.run { --mapW: 44px; } html body #game.mapL.run { --mapW: 70px; }
html body #game.run #runSide:not(.big) { top: calc(env(safe-area-inset-top, 0px) + 3px) !important; right: calc(env(safe-area-inset-right, 0px) + 3px) !important; left: auto !important; }
html body #game.run #runSide:not(.big)::after { display: none; }
html body #game.run #runSide:not(.big) #runMap { border: 1px solid rgba(255, 255, 255, .45) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .5) !important; opacity: .92; }

/* — Sağ orta: görev listesi (yalnız konum/boyut/saydamlık; kart görünüşü quest.css'te) — */
html body #game.run #questTrack { left: auto !important; right: env(safe-area-inset-right, 0px) !important; top: calc(env(safe-area-inset-top, 0px) + var(--mapW) + 44px) !important; width: 142px !important; opacity: .94; align-items: flex-end; }
/* Katlama düğmesi listenin solunda: katlıyken sağ kenara çekilir, sola doğru açılır */
html body #game.run #questTrack.fold { width: auto !important; }
html body #game.run #questTrack > header { flex-direction: row-reverse; }
html body #game.run #questTrack > .qtBody { align-self: stretch; }
html body #game.run #questTrack .qtFold { font-size: 0; }
html body #game.run #questTrack .qtFold::before { content: '\25B8'; font-size: 6.8px; }
html body #game.run #questTrack.fold .qtFold::before { content: '\25C2'; }

/* Konuş istemi görev listesinin solunda (hud-top: liste sağda, genişlik 142, üstü haritanın altı) — üst üste binmez */
html body #game.run #btnTalk:not([hidden]) { right: calc(var(--safeR, 0px) + 156px) !important; top: calc(env(safe-area-inset-top, 0px) + var(--mapW, 54px) + 44px) !important; }

/* Ölünce sol üstte VIP rozetinin altında iki küçük düğme (ekrana pencere açılmaz) */
html body #game.run #deathBar { position: absolute; z-index: 9; left: calc(var(--safeL, 0px) + 6px); top: 64px; display: flex; flex-direction: column; gap: 4px; }
html body #game.run #deathBar[hidden] { display: none; }
html body #game.run #deathBar button { min-width: 92px; padding: 4px 10px; border-radius: 6px; border: 1px solid #e6c06a; background: linear-gradient(180deg, rgba(90,60,24,.92), rgba(40,26,10,.92)); color: #ffe6a8; font: 700 9px/1.2 Cinzel, Georgia, serif; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,.6); cursor: pointer; }
html body #game.run #deathBar button:first-child { border-color: #ffd86a; color: #fff2c8; }
/* Sağ üstteki ikinci ayarlar (menü) düğmesi kaldırıldı; soldaki Ayarlar kalır. */