/* Kül Geçidi arayüzü. Sürekli animasyon ve backdrop-filter yok (performans). */
:root {
  --ink: #f2eee4;
  --muted: #a5b0b5;
  --gold: #f3c66e;
  --brass: #c5a363;
  --panel: #101c24e6;
  --line: #b4c4c530;
  --hp: #79a88e;
  /* Alt güvenli alan (iPhone ev çubuğu 34 px): 08.10 kullanıcı "altta gereksiz boşluk" → düğmeler çubuğun hemen üstünde
     (34 − 16 = 18 px); çubuk ince olduğu için dokunma çakışmaz. */
  --safe-b: max(0px, calc(env(safe-area-inset-bottom, 0px) - 16px));
  --safe-t: env(safe-area-inset-top, 0px);
}
/* Kaydırma çubukları temaya uygun: koyu iz, pirinç tutamaç (Chrome/Edge/Firefox: scrollbar-color; Safari: -webkit-) */
* { scrollbar-width: thin; scrollbar-color: #9a7a45 #0b141b; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b141b; }
::-webkit-scrollbar-thumb { background: linear-gradient(#c5a363, #7d5f30); border-radius: 6px; border: 2px solid #0b141b; }
::-webkit-scrollbar-thumb:hover { background: #e0b96a; }
::-webkit-scrollbar-corner { background: #0b141b; }
/* hidden özniteliği medya sorgusundaki display:flex kuralına yenilmesin (mola satırı başlangıç menüsünde görünüyordu) */
.card .row[hidden], .card .rows .row[hidden] { display: none !important; }
* { box-sizing: border-box; }
/* Yakınlaşma engeli (07.10): kaydırılabilir kutularda touch-action sıfırlanır; her öğede çift dokunuş yakınlaşması kapalı
   (manipulation), oyun tuvalinde her şey kapalı. iOS'ta yatayda yazı büyütme (üst üste binme) ve uzun basış menüsü kapalı. */
*, *::before, *::after { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
canvas { touch-action: none; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0c151a; color: var(--ink);
  font-family: "Segoe UI", system-ui, Arial, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none;
}
#game { display: block; width: 100%; height: 100%; outline: 0; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 52%, transparent 40%, #03080c88 100%); }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, #b0201899 100%); }
/* Zincir şimşek yeteneğinde kısa ekran parlaması */
#zap { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, var(--zap-c, #f2ecff66), #b9a2ff2e 55%, transparent 85%); }

header {
  position: fixed; top: 0; left: 0; width: 100%; padding: calc(22px + var(--safe-t)) 30px 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#070e16e8, transparent); pointer-events: none; text-shadow: 0 2px 6px #000;
}
.brand { display: flex; gap: 12px; font-size: 15px; letter-spacing: 3px; font-weight: 700; }
.brand small { display: block; font-size: 8px; letter-spacing: 4px; color: #aaafa9; margin-top: 5px; }
.sigil { font-size: 35px; color: #c4a76b; line-height: 1; }
.wave { text-align: center; position: absolute; left: 50%; transform: translateX(-50%); }
.wave small { display: block; font-size: 8px; letter-spacing: 3px; color: #b0babd; margin-bottom: 6px; }
.wave strong { font-size: 20px; letter-spacing: 3px; }
.track { height: 3px; background: #ffffff22; margin-top: 9px; overflow: hidden; }
.wave .track { width: 140px; }
.track i { display: block; height: 100%; width: 0; background: var(--brass); transition: width .15s; }
.wallet { display: grid; grid-template-columns: 25px auto; column-gap: 8px; align-items: center; }
.wallet span { grid-row: span 2; color: var(--gold); font-size: 30px; }
.hud-icon { width: 1.4em; height: 1.4em; vertical-align: middle; margin-right: 4px; }
.wallet img { grid-row: span 2; width: 34px; height: 34px; }
.wallet strong { font-family: Georgia, serif; font-size: 27px; transition: color .2s; }
.wallet strong.pulse { color: #fff3c8; }
.wallet small { font-size: 8px; letter-spacing: 2px; color: #b7a77c; }

#objective { position: fixed; left: 30px; top: 130px; border-left: 1px solid #c7a96e66; padding-left: 14px; text-shadow: 0 2px 5px #000; pointer-events: none; }
#objective > span { font-size: 9px; letter-spacing: 3px; color: #d2b575; }
#objective p { font-size: 13px; margin: 9px 0 5px; }
#objective small { font-size: 11px; color: var(--muted); }
#progress { margin-top: 18px; max-width: 180px; }
#progress small { display: block; font-size: 9px; color: #a7b6bc; }
#progress b { float: right; color: #f1d39e; }
#progress .track { margin: 7px 0; }
#saveinfo { font-size: 8px !important; }

footer {
  position: fixed; bottom: 0; width: 100%; display: flex; justify-content: space-between; align-items: end;
  padding: 30px 30px calc(20px + var(--safe-b)); background: linear-gradient(transparent, #070e16ed); pointer-events: none;
}
.health { width: 190px; position: relative; }
#portrait { position: absolute; left: 0; bottom: 0; width: 48px; height: 60px; object-fit: cover; border: 1px solid #c5a36377; border-radius: 4px; }
.health.has-portrait { padding-left: 58px; width: 248px; }
.health small { font-size: 9px; letter-spacing: 2px; color: #abbab9; }
.health b { float: right; color: #e5ede5; font-size: 10px; letter-spacing: 0; }
.health .track { height: 5px; }
.health i { width: 100%; background: var(--hp); }
.controls { display: flex; align-items: center; gap: 4px; }
.controls kbd { border: 1px solid #c4c5bf44; border-radius: 3px; padding: 5px; font-size: 10px; color: #c0c6c8; }
.controls span { font-size: 10px; color: var(--muted); margin-left: 9px; }
.actions { display: flex; gap: 8px; pointer-events: auto; }
button { cursor: pointer; color: inherit; font: inherit; touch-action: manipulation; }
.actions button.icon {
  min-width: 44px; min-height: 44px; background: #101c2499; border: 1px solid var(--line); border-radius: 6px;
  font-size: 18px; line-height: 1; color: #dfe6e3;
}
.actions button.icon:hover { background: #30414b; }
.actions button.off { color: #6d7b80; text-decoration: line-through; }

#labels, #numbers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pad-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; min-height: 28px; border-radius: 15px;
  background: #0b151cc4; border: 1px solid #ad854966; color: #ffe1a3; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.pad-label img { display: block; width: 24px; height: 24px; }
.pad-label i { font-style: normal; font-size: 15px; color: #e8dcc0; min-width: 12px; text-align: center; }
.pad-label i:empty { display: none; }
.pad-label b { font-family: Georgia, serif; font-size: 16px; font-weight: 400; }
.pad-label b:empty { display: none; }
.pad-label[data-state="empty"] { padding: 2px 8px; }
.pad-label[data-state="locked"] { border-color: #7d8a8f66; color: #c9d2d4; }
.pad-label[data-state="queued"] { border-color: #8fd0ff99; }
.pad-label.active { border-color: #ffd27a; background: #2a2414d8; }
.pad-label img[hidden] { display: none; }
.dmg { position: absolute; left: 0; top: 0; font: 700 15px Georgia, serif; color: #fff4dc; text-shadow: 0 1px 3px #000, 0 0 6px #000; will-change: transform; }
.dmg.crit { color: #ffb13d; font-size: 20px; }
.dmg.gold { color: var(--gold); }
/* Yetenek hasarı (08.10): en büyük rakam, sıcak altın-turuncu, kor parıltılı kenar */
.dmg.skill { color: #ffe08a; font-size: 26px; font-weight: 900; letter-spacing: 0.5px; text-shadow: 0 2px 0 #7a2a00, 0 0 8px #ff7a1acc, 0 0 2px #000; }

#toast {
  position: fixed; top: 23%; left: 50%; transform: translate(-50%, -10px); opacity: 0; transition: opacity .25s, transform .25s;
  text-align: center; pointer-events: none; font: 22px Georgia, serif; letter-spacing: 2px; color: #ffe7b7; text-shadow: 0 2px 8px #000;
  background: #0b151ccc; padding: 15px 25px; border-top: 1px solid #c9a96b55; border-bottom: 1px solid #c9a96b55; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Öğretici kartı (M12): üst ortada, oyun durmaz; Atla ≥ 44 px. */
#coach { position: fixed; top: calc(96px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(460px, 92vw); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 8px 8px 8px 14px; background: #0b151ce6; border: 1px solid #c9a96b66; border-radius: 6px; color: #f2eee4; text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 6; }
#coach[hidden] { display: none; }
#coach small { grid-column: 1; font-size: 9px; letter-spacing: 3px; color: #c9a96b; }
#coach p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.35; }
#coach-dots { grid-column: 1; display: flex; gap: 5px; }
#coach-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff33; }
#coach-dots i.past { background: #79a88e; }
#coach-dots i.now { background: #f3c66e; }
#coach-skip { grid-column: 2; grid-row: 1 / span 3; min-width: 64px; min-height: 44px; pointer-events: auto; border: 1px solid #6a7e83; border-radius: 4px; background: #14222bcc; color: #b9c6c8; font-size: 11px; letter-spacing: 1px; }
#coach.done p::before { content: '✓ '; color: #8fe0a6; }
body:has(#coach:not([hidden])) #objective { visibility: hidden; }
/* Patron çubuğu açıkken öğretici kartı onun altına iner (çakışmasın). */
body:has(#bossbar:not([hidden])) #coach { top: calc(150px + var(--safe-t)); }
#toast.boss { color: #ff8a5c; }

#bossbar { position: fixed; top: calc(92px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; width: min(420px, 80vw); pointer-events: none; text-shadow: 0 2px 4px #000; }
#bossbar[hidden], #intro[hidden] { display: none; }
#bossbar img { width: 44px; height: 44px; object-fit: contain; }
#bossbar .bb { flex: 1; }
#bossbar small { font-size: 10px; letter-spacing: 2px; color: #ffb39c; }
#bossbar .track { height: 7px; margin-top: 4px; position: relative; }
#bossbar .track i { background: #d0503a; }
#bossbar .track b { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #ffe39acc; }
#boss-status { display: flex; gap: 3px; margin-top: 3px; min-height: 18px; }
#boss-status img { width: 18px; height: 18px; }
#intro { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; padding: 14px 26px; background: #0b151ce6; border-top: 1px solid #d0674f88; border-bottom: 1px solid #d0674f88; pointer-events: none; }
#intro img { width: 96px; height: 96px; object-fit: contain; }
#intro small { font-size: 10px; letter-spacing: 4px; color: #ff8a5c; }
#intro strong { display: block; font: 22px Georgia, serif; letter-spacing: 3px; color: #ffe7b7; margin: 6px 0; }
#intro p { margin: 0; font-size: 13px; color: #c7d0d2; max-width: 260px; }
@media (max-width: 700px) { #bossbar { top: calc(84px + var(--safe-t)); } #intro img { width: 90px; height: 90px; } #intro strong { font-size: 20px; } }
@media (max-height: 520px) { #bossbar { top: 70px; width: min(360px, 50vw); } #bossbar img { display: none; } #intro { top: 45%; } #intro img { width: 80px; height: 80px; } }
#upgrades { position: fixed; bottom: calc(88px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: none; gap: 8px; z-index: 2; }
#upgrades.show { display: flex; }
#upgrades button {
  min-height: 44px; font: 600 11px "Segoe UI", sans-serif; letter-spacing: .4px; background: #17252dea; border: 1px solid #bd9e60;
  border-radius: 6px; padding: 10px 14px; color: #f3d59e; white-space: nowrap;
}
#upgrades button:disabled { border-color: #6a7e8355; color: #8b9b9f; background: #111d26bb; cursor: default; }
body.tm-open #upgrades { display: none; }

/* M5: kapı çubuğu, yaralı bildirimi, yetenek düğmeleri, kahraman seçimi */
#gatebox { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; }
#gatebox small { font-size: 8px; letter-spacing: 2px; color: #d9c08a; }
#gatebox img, #gate-icon { width: 18px; height: 18px; font-size: 13px; line-height: 18px; color: #d9c08a; }
#gatebox .track { width: 120px; height: 5px; background: #ffffff26; }
#gatebox .track i { display: block; height: 100%; width: 100%; background: #d9a24a; }
#gatebox.low .track i { background: #d0674f; }
#gatebox b { font-size: 12px; min-width: 26px; text-align: left; }
#downed { position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); padding: 10px 22px; background: #2a0f0bcc; border: 1px solid #d0674f;
  color: #ffb39c; font: 700 18px Georgia, serif; letter-spacing: 3px; border-radius: 4px; pointer-events: none; z-index: 2; }
#downed[hidden] { display: none; }
#abilities { position: fixed; right: 16px; bottom: calc(150px + var(--safe-b)); display: none; gap: 10px; z-index: 2; }
#abilities.show { display: flex; }
#abilities button { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #cfb076; background: #14222bee; padding: 0; overflow: hidden; color: #fff; }
#abilities button img { width: 100%; height: 100%; display: block; }
#abilities button i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #000000aa; }
#abilities button span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 18px "Segoe UI", sans-serif; text-shadow: 0 1px 3px #000; }
#abilities button kbd { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: #f3d59e; }
#abilities button.ready { border-color: #f3c66e; box-shadow: 0 0 12px #f3c66e66; }
#abilities button:disabled { cursor: default; }
#ov-heroes { margin: 14px 0 4px; }
#ov-heroes[hidden] { display: none; }
#ov-heroes > small { display: block; font-size: 9px; letter-spacing: 3px; color: #ccb782; margin-bottom: 8px; }
#hero-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.card #hero-list button { margin: 0; padding: 4px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; letter-spacing: 1px; font-size: 9px; }
#hero-list img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.card #hero-list button.on { border-color: var(--gold); background: #3a2f1aee; color: #ffe1a3; }
#hero-role { font-size: 11px; color: #a9c0bf; margin-top: 6px; min-height: 14px; }

/* Kule menüsü: kahraman yuvanın üstündeyken. Tüm dokunma hedefleri ≥44px. */
#towermenu {
  position: fixed; bottom: calc(84px + var(--safe-b)); left: 50%; transform: translateX(-50%); width: min(540px, 94vw); z-index: 3;
  background: var(--panel); border: 1px solid #bd9e6088; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
#towermenu[hidden], #towermenu [hidden] { display: none; }
.tm-head { display: flex; gap: 10px; align-items: center; }
.tm-head img { width: 40px; height: 40px; flex: none; }
.tm-text { flex: 1; min-width: 0; }
.tm-text strong { display: block; font-family: Georgia, serif; letter-spacing: 2px; font-size: 15px; color: #f2e8d0; }
.tm-text small { display: block; font-size: 11px; color: #b4d6c0; margin: 3px 0 5px; }
.tm-text .track { height: 4px; background: #ffffff1f; }
.tm-text .track i { display: block; height: 100%; width: 0; background: var(--gold); }
#tm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#tm-grid button {
  min-height: 56px; padding: 4px 2px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 600 9px "Segoe UI", sans-serif;
}
#tm-grid button img, #tm-grid button i { width: 28px; height: 28px; font-style: normal; font-size: 18px; line-height: 28px; }
#tm-grid button span { letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#tm-grid button b { color: var(--gold); font-size: 11px; }
#tm-grid button.on { border-color: var(--gold); background: #3a2f1aee; }
#tm-grid button.poor b { color: #c27d6b; }
#tm-branch { display: flex; gap: 8px; }
#tm-branch button { flex: 1; min-height: 52px; border: 1px solid #6fd3ff88; border-radius: 6px; background: #142a36ee; color: #e8f6ff; padding: 6px; }
#tm-branch button strong { display: block; font-size: 11px; letter-spacing: 1px; }
#tm-branch button small { display: block; font-size: 10px; color: #a9c7d6; margin-top: 2px; }
#tm-actions { display: flex; gap: 8px; justify-content: flex-end; }
#tm-actions button { min-height: 44px; min-width: 110px; border: 1px solid #bd9e60; border-radius: 6px; background: #17252dea; color: #f3d59e; font: 600 11px "Segoe UI", sans-serif; padding: 6px 12px; }
#tm-actions button.warn { border-color: #d0674f; color: #ffb39c; }
#tm-actions #tm-heal { margin-right: auto; border-color: #79a88e; color: #c9ecd4; }
#tm-actions button:disabled { opacity: .5; cursor: default; }
/* Geniş ekran: yükseltmeler ve kule menüsü sağ sütunda (koridorun alt kısmı ve yuva etiketleri açık kalsın). */
@media (min-width: 701px) and (min-height: 521px) {
  #upgrades { left: auto; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; }
  #upgrades button { min-width: 170px; }
  #towermenu { left: auto; right: 16px; transform: none; top: 96px; bottom: auto; width: min(380px, 34vw); max-height: calc(100vh - 260px); overflow: auto; }
  /* Masaüstü: menü açıkken yükseltme sütunu menünün soluna geçer, ikisi yan yana. */
  body.tm-open #upgrades.show { display: flex; right: calc(min(380px, 34vw) + 28px); top: 96px; transform: none; }
  #tm-heal { display: none; }
}

#overlay, #settings, #records, #slots {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5;
  background: linear-gradient(90deg, #061019dd, #06101966, #061019dd);
}
#overlay[hidden], #settings[hidden], #records[hidden], #slots[hidden] { display: none; }
#overlay { background-size: cover; background-position: center; }
#settings, #slots { background: #061019f8; z-index: 6; }
/* Kayıtlar paneli */
#slots-list { text-align: left; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
#slots-list .slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #0e1a22cc; }
#slots-list .slot.current { border-color: var(--brass); background: #2a2416cc; }
/* Bilgi üstte tam satır, düğmeler altında yan yana (genel .card/.primary düğme genişliği burada geçersiz) */
#slots-list .slot div { flex: 1 1 100%; min-width: 0; }
#slots-list .slot strong { display: block; color: var(--gold); font-size: 15px; letter-spacing: 1px; }
#slots-list .slot span { display: block; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#slots-list .slot button { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 6px 10px; font-size: 12px; position: static; white-space: nowrap; }
#slots-list .slot button.danger { border-color: #c0573f; color: #ffb39f; }
#slots-list p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.card { text-align: center; width: min(450px, 92vw); padding: 32px; max-height: 100%; overflow: auto; }
.eyebrow { color: #ccb782; font-size: 9px; letter-spacing: 4px; }
.card h1 { font-family: Georgia, serif; font-size: 76px; line-height: .98; letter-spacing: 7px; margin: 26px 0; color: #f2e8d0; text-shadow: 0 4px 26px #000; white-space: pre-line; }
.card h2 { font-family: Georgia, serif; letter-spacing: 5px; color: #f2e8d0; font-weight: 400; }
.rule { width: 48px; height: 1px; background: #bba36f; margin: 24px auto; }
.card p { font-size: 14px; color: #bac5c6; line-height: 1.8; white-space: pre-line; margin: 0; }
#ov-logo { display: block; width: min(380px, 80vw); height: auto; margin: 14px auto 0; }
#ov-logo[hidden] { display: none; }
#ov-note { color: #e2b66e; font-size: 12px; min-height: 0; }
.card button {
  margin: 8px 0; width: 100%; min-height: 48px; border: 1px solid #cfb07688; background: #14222bcc; color: #e8dcc0;
  padding: 14px 20px; font-size: 11px; font-weight: 700; letter-spacing: 2px; border-radius: 3px;
}
.card button.primary { margin-top: 22px; border-color: #cfb076; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524; font-weight: 800; box-shadow: 0 8px 40px #0008; }
.card button.danger { border-color: #d0674f; color: #ffb39c; }
.card .row { display: flex; gap: 8px; }
.card .row button[hidden] { display: none; }
.help { font-size: 10px; color: #85989d; line-height: 1.8; margin-top: 12px; white-space: pre-line; }

#settings-list { text-align: left; margin: 18px 0; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #ffffff12; font-size: 14px; }
.setting button { width: auto; min-width: 110px; margin: 0; }
.setting input[type=range] { width: 150px; height: 44px; accent-color: var(--brass); }

/* Bölüm arası ekranı (M6). Arka plan: arka/bolum_arasi. */
/* Bölüm arası ekranı: tam pencere, tek kaydırma alanı (kart), alta sabit eylem çubuğu (düğme hep görünür). */
#chapter { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background-color: #061019; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
#chapter[hidden], #chapter [hidden] { display: none; }
.ch-card { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; padding: 22px max(16px, calc((100% - 940px) / 2)) 16px; text-align: center; box-sizing: border-box; }
.ch-card h2 { font-family: Georgia, serif; letter-spacing: 4px; color: #f2e8d0; font-weight: 400; margin: 8px 0 6px; font-size: 30px; }
.ch-card > p { margin: 6px 0; font-size: 16px; color: #c9d2d3; white-space: pre-line; }
.ch-card small { display: block; font-size: 14px; letter-spacing: 3px; color: #ccb782; margin: 4px 0 10px; }
/* Açık bölümler: ödül kartı, kalıcı geliştirmeler, kahraman ve ağaç ayrı panellerde */
#ch-cards-wrap, #ch-shop-wrap, #ch-heroes-wrap, #ch-tree-wrap { background: #0b151cc4; border: 1px solid #ffffff1a; border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.ch-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px calc(12px + var(--safe-b)); background: linear-gradient(#06101900, #061019 30%); }
.ch-actions p { margin: 0; text-align: center; }
#ch-note { color: #e2b66e; font-size: 14px; }
#ch-unlocks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#ch-unlocks small { width: 100%; }
#ch-unlocks .unlock { border: 1px solid #6fd3ff66; background: #142a36cc; border-radius: 4px; padding: 6px 10px; font-size: 12px; color: #d9f2ff; }
#ch-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card-pick { min-height: 150px; border: 1px solid #cfb07688; border-radius: 8px; background: #14222bee; color: #e8dcc0; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-pick.relic { border-color: #6fd3ffaa; background: #12263aee; }
.card-pick img, .card-pick i { width: 56px; height: 56px; font-style: normal; font-size: 30px; line-height: 56px; }
.card-pick small { margin: 0; font-size: 11px; }
.card-pick strong { font-family: Georgia, serif; font-size: 18px; letter-spacing: 1px; color: #f2e8d0; }
.card-pick span { font-size: 15px; color: #c3d2d1; line-height: 1.4; }
.card-pick.on { border-color: var(--gold); background: #3a2f1aee; box-shadow: 0 0 18px #f3c66e55; }
.card-pick:disabled:not(.on) { opacity: .45; }
#ch-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
#ch-ash-icon { width: 14px; height: 14px; vertical-align: middle; display: inline; }
#ch-ash { color: #f3d59e; }
.perk { min-height: 52px; display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; padding: 6px 8px; }
.perk img { grid-row: span 2; width: 32px; height: 32px; }
.perk div { grid-row: span 2; min-width: 0; }
.perk strong { display: block; font-size: 16px; }
.perk span { display: block; font-size: 14px; color: #c3d2d1; }
.perk b { color: var(--gold); font-size: 16px; }
.perk small { margin: 0; font-size: 12px; letter-spacing: 1px; color: #b4d6c0; text-align: right; }
.perk:disabled { opacity: .55; }
#ch-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Taslak: satın alma + geri alma (−) yan yana; geri alma düğmesi ≥ 44 px */
.buy-row { display: flex; gap: 4px; min-width: 0; }
.buy-row > button:first-child { flex: 1 1 auto; min-width: 0; }
#ch-shop .refund, #ch-tree .refund { flex: 0 0 44px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid #c58a6a99; border-radius: 6px; background: #2a1a14e6; color: #ffcfb0; font-size: 22px; font-weight: 700; line-height: 1; }
#ch-shop .refund[hidden], #ch-tree .refund[hidden] { display: none; }
#ch-reset { min-height: 44px; margin-top: 8px; padding: 6px 16px; border: 1px solid #c58a6a99; border-radius: 4px; background: #2a1a14cc; color: #ffcfb0; font-size: 11px; letter-spacing: 2px; }
#ch-reset[hidden] { display: none; }
#ch-draft { font-size: 13px; color: #9fb0b4; }
#ch-tree button { min-height: 44px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; padding: 8px; text-align: left; display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; align-items: center; }
#ch-tree button img { width: 28px; height: 28px; grid-row: span 2; }
#ch-tree button strong { font-size: 15px; letter-spacing: 1px; }
#ch-tree button em { grid-column: 3; grid-row: 2; font-style: normal; font-size: 12px; color: #9fb0b4; text-align: right; }
#ch-tree button span { grid-column: 2 / 4; font-size: 14px; color: #c4cfd0; }
#ch-tree button b { grid-column: 3; grid-row: 1; color: #f3d59e; font-size: 14px; }
#ch-tree button:disabled { opacity: .55; }
#ch-tree-hint { font-size: 13px !important; color: #8fa0a4 !important; }
#ch-map { display: flex; gap: 12px; align-items: stretch; margin: 12px auto 4px; text-align: left; border: 1px solid #ccb78255; background: #0d1a22e6; border-radius: 6px; overflow: hidden; }
#ch-map[hidden] { display: none; }
#ch-map-img { flex: 0 0 42%; min-height: 110px; background: #1a2a33 center / cover; }
.ch-map-text { padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 4px; }
.ch-map-text small { margin: 0; }
.ch-map-text strong { font-family: Georgia, serif; font-weight: 400; letter-spacing: 3px; color: #f2e8d0; font-size: 18px; }
.ch-map-text span { font-size: 12px; color: #c4cfd0; }
.ch-map-text em { font-style: normal; font-size: 11px; color: #e2b66e; }
#ch-heroes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
#ch-heroes button { min-height: 44px; min-width: 88px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; padding: 4px 8px; display: flex; align-items: center; gap: 6px; }
#ch-heroes img { width: 32px; height: 40px; object-fit: cover; border-radius: 2px; }
#ch-heroes button.on { border-color: var(--gold); background: #3a2f1aee; }
#ch-restore { min-height: 44px; margin-top: 10px; border: 1px solid #6a7e83; border-radius: 4px; background: #14222bcc; color: #b9c6c8; padding: 8px 14px; font-size: 14px; letter-spacing: 1px; }
#ch-restore.on { border-color: #79a88e; color: #c9ecd4; }
#ch-next { box-shadow: 0 6px 24px #000a; width: min(360px, 100%); min-height: 48px; border: 1px solid #cfb076; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524; font-weight: 800; letter-spacing: 2px; border-radius: 3px; margin-top: 6px; }
#ch-next.wait { filter: grayscale(.7); opacity: .7; }
#hero-list button.locked { opacity: .5; }
#hero-list button.locked img { filter: grayscale(1); }
#tm-grid button.locked { opacity: .45; }
#tm-grid button.locked b { color: #9fb0b4; font-size: 8px; }
@media (max-width: 700px) {
  .ch-card { padding: 14px 12px 12px; }
  #ch-map { flex-direction: column; gap: 0; }
  #ch-tree { grid-template-columns: 1fr; }
  #ch-map-img { min-height: 90px; }
  .ch-map-text { padding: 8px 10px; }
  .ch-card h2 { font-size: 24px; letter-spacing: 2px; }
  #ch-cards { grid-template-columns: 1fr; gap: 8px; }
  .card-pick { min-height: 72px; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; }
  .card-pick img, .card-pick i { grid-row: 1 / 4; width: 48px; height: 48px; line-height: 48px; font-size: 26px; }
  .card-pick strong { font-size: 16px; }
  .card-pick span { font-size: 14px; }
  #ch-shop { grid-template-columns: 1fr; }
  #ch-restore { font-size: 13px; }
}
@media (max-height: 520px) {
  .ch-card { padding: 10px 16px; }
  .ch-card h2 { font-size: 22px; margin: 2px 0; }
  .ch-card small { margin: 8px 0 4px; }
  .card-pick { min-height: 96px; }
  .card-pick img, .card-pick i { width: 40px; height: 40px; line-height: 40px; }
  #ch-shop { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ch-actions { padding-top: 6px; }
}

#joystick { display: none; position: fixed; left: 0; top: 0; width: 110px; height: 110px; border: 1px solid #e5dccb55; background: #ffffff09; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
#joystick i { position: absolute; width: 38px; height: 38px; top: 35px; left: 35px; border-radius: 50%; background: #e7d9b766; border: 1px solid #f2e4caaa; }

/* Telefon (dikey) ve dar ekran */
@media (max-width: 700px) {
  header { padding: calc(14px + var(--safe-t)) 14px 14px; }
  .brand { font-size: 10px; letter-spacing: 1px; gap: 8px; }
  .brand small { font-size: 6px; letter-spacing: 2px; }
  .sigil { font-size: 23px; }
  .wave strong { font-size: 16px; }
  .wave small { font-size: 6px; }
  .wave .track { width: 85px; }
  .wallet strong { font-size: 22px; }
  #objective { top: 84px; left: 14px; padding-left: 8px; }
  #objective p { font-size: 10px; }
  #objective small { display: none; }
  #objective #progress small { display: block; }
  #progress { max-width: 130px; margin-top: 10px; }
  footer { padding: 22px 14px calc(14px + var(--safe-b)); }
  .controls { display: none; }
  .health { width: 140px; }
  .health.has-portrait { width: 190px; }
  .card h1 { font-size: 56px; margin: 18px 0; }
  .card { padding: 22px; }
  #upgrades { bottom: calc(76px + var(--safe-b)); gap: 4px; width: 96%; justify-content: center; }
  #upgrades button { font-size: 9px; padding: 8px 6px; flex: 1; white-space: normal; }
  #toast { font-size: 16px; padding: 10px 16px; }
  #towermenu { bottom: calc(70px + var(--safe-b)); width: 96vw; padding: 8px; gap: 6px; }
  #abilities { right: 10px; bottom: calc(132px + var(--safe-b)); flex-direction: column; }
  #towermenu[data-mode="plan"] #tm-grid button { min-height: 44px; flex-direction: row; gap: 4px; }
  #towermenu[data-mode="plan"] #tm-grid button span { display: none; }
  .wave { top: calc(4px + var(--safe-t)); }
  body.tm-open #abilities { bottom: auto; top: 22%; gap: 8px; }
  body.tm-open #abilities button { width: 52px; height: 52px; }
  #gatebox .track { width: 70px; }
  #gatebox { margin-top: 3px; }
  .wave small { margin-bottom: 2px; }
  .wave .track { margin-top: 5px; }
  #gatebox small { display: none; }
  .tm-text strong { font-size: 13px; }
  .tm-text small { font-size: 10px; }
}
/* Telefon (yatay): yükseklik az. Yükseltmeler sağ kenarda dikey sütun, alt bant ince. */
@media (max-height: 520px) {
  header { padding: 6px 14px; background: linear-gradient(#070e16cc, transparent); }
  .sigil { font-size: 20px; }
  .wave small { display: none; }
  .wave strong { font-size: 15px; }
  .wave .track { margin-top: 4px; }
  #objective { display: none; }
  footer { padding: 6px 14px calc(6px + var(--safe-b)); background: none; }
  .health { width: 150px; }
  .health.has-portrait { width: 200px; }
  #upgrades { left: auto; right: 10px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; width: auto; }
  #upgrades button { flex: none; min-width: 120px; font-size: 9px; padding: 6px 8px; white-space: nowrap; }
  #toast { top: 62px; font-size: 14px; padding: 6px 14px; }
  #coach { top: 54px; width: min(420px, 62vw); padding: 4px 6px 4px 10px; }
  #coach p { font-size: 12px; }
  .card { padding: 12px 22px; }
  /* İkincil düğme satırları (yeni oyun/ayarlar, başarılar/günlük) yan yana: kısa ekrana sığsın */
  .card .rows { display: flex; flex-wrap: wrap; gap: 8px; }
  .card .rows .row { flex: 1 1 160px; min-width: 0; }
  .card .row button { font-size: 10px; letter-spacing: 1px; padding-left: 4px; padding-right: 4px; }
  #ov-logo { width: auto; height: min(26vh, 110px); margin-top: 6px; }
  .card h1 { font-size: 34px; margin: 6px 0; }
  .eyebrow { display: none; }
  .rule { margin: 6px auto; }
  .card p { font-size: 12px; line-height: 1.5; }
  .card button { min-height: 44px; padding: 10px 16px; margin: 4px 0; }
  .card button.primary { margin-top: 10px; }
  .help { display: none; }
  /* Yetenekler sol altta, can çubuğunun üstünde: ortadaki yuva etiketleriyle çakışmaz. */
  #abilities { right: auto; left: 14px; bottom: calc(54px + var(--safe-b)); }
  #abilities button { width: 52px; height: 52px; }
  #gatebox { margin-top: 2px; }
  #gatebox small { display: none; }
  #hero-list img { display: none; }
  #ov-heroes { margin: 4px 0; }
  #towermenu { left: auto; right: 8px; transform: none; top: 58px; bottom: auto; width: min(330px, 46vw); max-height: calc(100vh - 66px); overflow: auto; padding: 6px; gap: 5px; }
  .tm-head img { width: 30px; height: 30px; }
  .tm-text strong { font-size: 12px; }
  .tm-text small { font-size: 9px; margin: 2px 0 3px; }
  #tm-grid { gap: 4px; }
  #tm-grid button { min-height: 48px; }
  #tm-grid button img, #tm-grid button i { width: 22px; height: 22px; line-height: 22px; }
  #tm-grid button span { font-size: 8px; }
  #tm-branch button { min-height: 44px; }
  #tm-actions button { min-width: 0; flex: 1; }
}
@media (hover: none) { .controls { display: none; } }

/* Bölüm geçişleri (M8 geri bildirimi): kararma, giriş kartı, sayılarak gelen sonuç satırları. Sürekli animasyon yok, yalnız geçişler. */
#fade { position: fixed; inset: 0; z-index: 7; background: #02070b; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
#fade.red { background: #2a0505; }
#fade.on { opacity: 1; }
#chintro { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s ease; padding: 14px 34px; background: linear-gradient(90deg, #06101900, #061019d9 20%, #061019d9 80%, #06101900); }
#chintro.show { opacity: 1; }
#chintro[hidden] { display: none; }
#chintro small { display: block; font-size: 10px; letter-spacing: 4px; color: #ccb782; }
#chintro h2 { font-family: Georgia, serif; font-weight: 400; letter-spacing: 6px; color: #f2e8d0; font-size: 34px; margin: 6px 0 4px; text-shadow: 0 4px 20px #000; }
#chintro span { font-size: 12px; color: #bac5c6; letter-spacing: 2px; }
#chapter { opacity: 0; transition: opacity .45s ease; }
#chapter.in { opacity: 1; }
#ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 4px; }
#ov-stats[hidden] { display: none; }
#ov-stats div { border: 1px solid #ccb78244; background: #0d1a22cc; border-radius: 4px; padding: 8px 4px; opacity: .25; transition: opacity .25s; }
#ov-stats div.on { opacity: 1; }
#ov-stats small { display: block; font-size: 9px; letter-spacing: 2px; color: #ccb782; }
#ov-stats b { display: block; font-size: 22px; color: #f2e8d0; font-family: Georgia, serif; font-weight: 400; margin-top: 2px; }
@media (max-width: 700px) {
  #chintro h2 { font-size: 24px; letter-spacing: 4px; }
  #ov-stats { grid-template-columns: repeat(2, 1fr); }
}
body.cine #labels { opacity: 0; }
#labels { transition: opacity .4s; }

/* Kayıtlar paneli (M9): başarılar, istatistik, günlük meydan okuma */
#records { background: #061019; z-index: 6; }
.card.wide { width: min(760px, 96vw); padding: 22px; }
#records .tabs { display: flex; gap: 6px; margin: 10px 0; }
#records .tabs button { flex: 1 1 0; min-width: 0; margin: 0; min-height: 44px; font-size: 11px; padding: 6px 4px; overflow-wrap: anywhere; }
#records .tabs button.on { border-color: var(--gold); color: #ffe1a3; background: #3a2f1aee; }
#rec-body { text-align: left; max-height: 58vh; overflow: auto; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ach { display: grid; grid-template-columns: 36px 1fr; gap: 2px 8px; align-items: center; border: 1px solid #6a7e8355; border-radius: 6px; padding: 6px 8px; background: #14222bcc; opacity: .5; }
.ach.done { opacity: 1; border-color: #ccb78288; background: #2a2414cc; }
.ach img, .ach i { width: 36px; height: 36px; grid-row: span 2; object-fit: cover; border-radius: 4px; font-style: normal; text-align: center; line-height: 36px; color: #ccb782; }
.ach.done img { filter: none; }
.ach:not(.done) img { filter: grayscale(1); }
.ach strong { font-size: 12px; color: #f2e8d0; }
.ach span { font-size: 11px; color: #9fb0b4; }
.stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #ffffff12; font-size: 13px; color: #c4cfd0; }
.stat-row b { color: #f3d59e; font-family: Georgia, serif; font-weight: 400; }
.daily-box { text-align: center; }
.daily-box p { white-space: pre-line; }
.daily-box .best { color: #f3d59e; font-size: 15px; margin: 10px 0; }
@media (max-width: 700px) {
  .ach-grid { grid-template-columns: 1fr; }
  .card.wide { padding: 14px 10px; }
  #records .tabs button { font-size: 9px; letter-spacing: 1px; }
}
/* Alçak masaüstü/tablet ekranı: ikincil menü düğmeleri yan yana (kart ekrana sığsın) */
@media (max-height: 820px) and (min-width: 701px) {
  .card .rows { display: flex; flex-wrap: wrap; gap: 8px; }
  .card .rows .row { flex: 1 1 200px; min-width: 0; }
  .card .row button { font-size: 10px; letter-spacing: 1px; padding-left: 4px; padding-right: 4px; }
}

/* Kahraman paneli: dönen 3D önizleme + bilgi + görünüm (kostüm) seçimi */
.hero-panel { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; align-items: center; margin-top: 10px; text-align: left; }
.hp-stage { position: relative; grid-row: 1 / 3; width: 150px; height: 170px; border-radius: 8px; background: radial-gradient(#2a3a44, #0b151c 70%); overflow: hidden; }
.hero-preview-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.hp-stage.locked canvas { filter: brightness(.22) grayscale(1); }
.hp-lock { position: absolute; inset: auto 0 10px; text-align: center; color: #e8dcc0; font-size: 14px; letter-spacing: 2px; }
.hp-info { display: flex; flex-direction: column; gap: 3px; }
.hp-info strong { font-family: Georgia, serif; font-size: 20px; color: #f2e8d0; letter-spacing: 1px; }
.hp-info span { font-size: 14px; color: #c3d2d1; }
.hp-info em { font-style: normal; font-size: 14px; color: #ccb782; }
.hp-looks { display: flex; flex-wrap: wrap; gap: 6px; align-self: start; }
.hp-looks button, .card .hp-looks button { width: auto; margin: 0; letter-spacing: 0; font-weight: 400; min-height: 44px; min-width: 64px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; font-size: 13px; }
.hp-looks button i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0006; flex: none; }
.hp-looks button.on, .card .hp-looks button.on { border-color: var(--gold); background: #3a2f1aee; }
.hp-looks button:disabled { opacity: .45; }
#ov-heroes #hero-role { display: none; }
#ov-hero-panel { grid-template-columns: 120px 1fr; }
#ov-hero-panel .hp-stage { width: 120px; height: 136px; }
@media (max-width: 420px), (max-height: 520px) {
  .hero-panel { grid-template-columns: 110px 1fr; }
  .hp-stage { width: 110px; height: 130px; }
}
/* Alçak yatay ekranda menü tek ekrana sığsın: önizleme paneli menüde gizli (bölüm arası ekranında kayan alanda kalır). */
@media (max-height: 520px) {
  #ov-hero-panel { display: none; }
  #ov-heroes #hero-role { display: block; }
}
/* Alçak yatay telefon: kartın yanında yer varsa yalnız dönen model (görünüm seçimi bölüm arası ekranında). */
@media (max-height: 520px) and (min-width: 640px) {
  #ov-hero-panel { display: block; position: fixed; right: 8px; top: 50%; transform: translateY(-50%); width: min(150px, calc((100vw - 450px) / 2 - 16px)); margin: 0; }
  #ov-hero-panel .hp-stage { width: 100%; height: min(170px, 60vh); }
  #ov-hero-panel .hp-info, #ov-hero-panel .hp-looks { display: none; }
}
/* Geniş ekranda menü önizlemesi kartın sağında (kart yüksekliğini artırmasın; menü 720 px'e sığsın). */
@media (min-width: 1000px) and (min-height: 521px) {
  #ov-hero-panel { position: fixed; left: calc(50% + 245px); top: 50%; transform: translateY(-50%); width: 250px; margin: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #ov-hero-panel .hp-stage { grid-row: auto; width: 200px; height: 230px; }
  #ov-hero-panel .hp-info { align-items: center; }
  #ov-hero-panel .hp-looks { justify-content: center; }
}
#ov-saved { color: #b9c6c8; font-size: 13px; margin: 4px 0 0; min-height: 0; }
#ov-ios { color: #b9c6c8; font-size: 13px; margin: 4px 0 0; }
#install-help { color: #e8dcc0; font-size: 14px; line-height: 1.5; margin: 10px 0 0; padding: 10px 12px; text-align: left; background: #0b141bcc; border: 1px solid #9a7a4566; border-radius: 8px; }
#install-help[hidden] { display: none; }
.fs-btn[hidden] { display: none !important; }

/* ===== Görsel cila (06.10): okunabilir tipografi, tutarlı başlık yazısı, daha az harf aralığı =====
   Başlıklar ortaçağ havalı sistem yazısı (Palatino; yoksa Georgia) — dış yazı tipi indirilmez, çevrimdışı çalışır. */
:root { --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; }
h1, h2, .wallet strong, .pad-label b, .tm-text strong, #intro strong, #chintro strong, .ch-card h2 { font-family: var(--font-display); }
.card h2 { letter-spacing: 3px; }
.card p, #ov-desc { line-height: 1.55; }

/* Masaüstü/tablet: en küçük yazı 11 px, açıklamalar 13–15 px */
@media (min-width: 701px) and (min-height: 521px) {
  .brand small, .wave small, .wallet small, #gatebox small { font-size: 10px; letter-spacing: 2.5px; }
  #objective > span, .eyebrow, #ov-heroes > small, #coach small, #ov-stats small { font-size: 11px; letter-spacing: 3px; }
  #objective p { font-size: 15px; }
  #objective small { font-size: 13px; }
  #progress small { font-size: 11px; }
  #saveinfo { font-size: 10px !important; }
  .health small { font-size: 11px; }
  .health b { font-size: 13px; }
  .controls kbd { font-size: 11px; }
  .controls span { font-size: 12px; }
  #bossbar small, #intro small, #chintro small { font-size: 12px; }
  #upgrades button { font-size: 13px; letter-spacing: .3px; }
  #abilities button kbd { font-size: 10px; }
  #hero-role, .tm-text small, .card-pick small, .ch-map-text em, .ach span { font-size: 13px; }
  #tm-grid button { font-size: 11px; }
  #tm-grid button b { font-size: 12px; }
  #tm-branch button strong { font-size: 13px; }
  #tm-branch button small { font-size: 12px; }
  #tm-grid button.locked b { font-size: 10px; }
  .card button { font-size: 13px; letter-spacing: 1.5px; }
  .card .row button { font-size: 12px; letter-spacing: 1px; }
  .help { font-size: 12px; color: #9aabb0; }
  #records .tabs button { font-size: 12px; }
}
/* Telefon/kısa ekran: yerleşim sığsın diye yalnız en küçükler biraz büyür (≥ 9–10 px) */
@media (max-width: 700px), (max-height: 520px) {
  .brand small, .wave small, .wallet small, #gatebox small, #saveinfo { font-size: 9px !important; }
  #tm-grid button span { font-size: 9px; }
  #tm-grid button.locked b { font-size: 9px; }
  .tm-text small, #objective p { font-size: 11px; }
  #upgrades button, #records .tabs button { font-size: 10px; }
  .card .row button { font-size: 11px; }
}

/* ===== Can çubukları (06.10): çerçeveli, 10 bölmeli, parlak üst, gecikmeli hasar izi (açık renkli gölge çubuk) ===== */
.health .track, #gatebox .track, #bossbar .track {
  position: relative; overflow: hidden; height: 12px; margin-top: 4px;
  background: linear-gradient(#060403, #1c1411); border: 1px solid #c5a363aa; border-radius: 3px;
  box-shadow: 0 0 0 1px #000c, inset 0 1px 3px #000;
}
.health .track i, #gatebox .track i, #bossbar .track i { position: relative; z-index: 1; height: 100%; transition: width .15s; }
.health .track::after, #gatebox .track::after, #bossbar .track::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(#ffffff40, #ffffff00 50%, #00000040), repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #000b calc(10% - 1px) 10%);
}
.track .lag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 0; background: #f4e2b8; transition: width .6s ease-out .35s; text-decoration: none; }
.health .track i { background: linear-gradient(#a6ea8f, #4caf5c 55%, #2c7a3b); }
.health.low .track i, #gatebox.low .track i { background: linear-gradient(#ff9a7a, #d8452f 55%, #8e2214); }
#gatebox .track i { background: linear-gradient(#ffd98a, #d99a3a 55%, #8e5a18); }
#bossbar .track { height: 15px; border-color: #e07a5fcc; }
#bossbar .track i { background: linear-gradient(#ff8a6a, #c8321f 55%, #6e130c); }
#bossbar .track b { z-index: 2; height: 40%; background: linear-gradient(#e8f7ff, #8fd8ff); }
.health small { display: flex; align-items: center; gap: 4px; }
.health small b { margin-left: auto; font-family: var(--font-display); font-size: 12px; color: #f2e8d0; }
#gatebox b { font-family: var(--font-display); font-size: 13px; color: #f2e8d0; }
/* Dalga ilerlemesi (can değil): ince, çerçeveli altın çubuk */
.wave .track { height: 6px; background: #0a0706; border: 1px solid #c5a36366; border-radius: 3px; box-shadow: 0 0 0 1px #0009; }
.wave .track i { background: linear-gradient(#ffe39a, #c5a363); }

/* ===== Yükseltme düğmeleri: kılıç / kalkan / kalp simgesi + yazı ===== */
#upgrades .up { display: flex; align-items: center; gap: 8px; }
#upgrades .up-ico { width: 18px; height: 18px; flex: none; color: #f3d59e; }
#up-heal .up-ico { color: #e8836b; }
#upgrades .up:disabled .up-ico { color: #7d8b8f; }
#upgrades .up-lv, #upgrades .up-cost { display: none; }

/* ===== Telefon oyun yerleşimi (06.10): başparmak alanı boş kalır =====
   Üstte tek ince şerit (duraklat · dalga/kapı · altın), altta yalnız can çubuğu (dokunuşu geçirir),
   sağ altta yetenek ve onun yanında/üstünde pirinç çerçeveli yükseltme düğmeleri. Ekranın geri kalanı hareket kolu için serbest. */
@media (max-width: 700px), (max-height: 520px) {
  header { padding: calc(6px + var(--safe-t)) max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)); background: linear-gradient(#070e16d9, #070e1600); }
  .brand, #objective { display: none; }
  .wave { top: calc(5px + var(--safe-t)); }
  #chapter-label { display: none; }
  #gatebox .track { width: 104px; }
  .wallet { margin-left: auto; }
  .wallet img { width: 28px; height: 28px; }
  .wallet strong { font-size: 21px; }
  footer { padding: 0 max(12px, env(safe-area-inset-left)) calc(10px + var(--safe-b)); background: none; }
  #portrait { display: none; }
  .health, .health.has-portrait { width: 168px; padding-left: 0; }
  .actions { position: fixed; top: calc(6px + var(--safe-t)); left: max(8px, env(safe-area-inset-left)); }
  #btn-settings, #btn-sound, #btn-fs { display: none !important; }
  #abilities, body.tm-open #abilities { left: auto; top: auto; right: max(14px, env(safe-area-inset-right)); bottom: calc(18px + var(--safe-b)); flex-direction: column-reverse; gap: 12px; }
  #abilities button, body.tm-open #abilities button { width: 68px; height: 68px; }
  #upgrades { left: auto; top: auto; right: max(14px, env(safe-area-inset-right)); bottom: calc(100px + var(--safe-b)); transform: none; width: auto; flex-direction: column; gap: 8px; }
  body:has(#abilities button:nth-child(2)) #upgrades { bottom: calc(180px + var(--safe-b)); }
  #upgrades .up { flex: none; flex-direction: column; justify-content: center; gap: 1px; width: 68px; min-width: 0; height: 66px; min-height: 0; padding: 4px 2px;
    border-radius: 10px; border: 1px solid #bd9e60; background: linear-gradient(#1d2d37f2, #0e181ff2); box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 6px #0009; white-space: nowrap; }
  #upgrades .up-ico { width: 26px; height: 26px; }
  #upgrades .up-full { display: none; }
  #upgrades .up-lv { display: block; font: 700 12px var(--font-display); color: #f2e8d0; letter-spacing: .5px; }
  #upgrades .up-cost { display: flex; align-items: center; gap: 2px; font: 700 11px "Segoe UI", sans-serif; color: var(--gold); }
  #upgrades .up-cost::before { content: '◈'; font-size: 9px; }
  #upgrades .up-cost:empty { display: none; }
  #upgrades .up:disabled { border-color: #6a7e8366; background: #101b22d9; box-shadow: none; }
  #upgrades .up:disabled .up-lv { color: #8b9b9f; }
  #upgrades .up:disabled .up-cost { color: #8b7d5c; }
}
/* Dikey telefon: kule menüsü üstte (alt kısım başparmağa kalır), öğretici kartı menü açıkken alta iner. */
@media (max-width: 700px) {
  #coach { top: calc(58px + var(--safe-t)); }
  #bossbar { top: calc(62px + var(--safe-t)); }
  #towermenu { top: calc(58px + var(--safe-t)); bottom: auto; max-height: calc(100vh - 250px - var(--safe-t)); overflow: auto; }
  body.tm-open #coach { top: auto; bottom: calc(52px + var(--safe-b)); left: max(8px, env(safe-area-inset-left)); transform: none; width: calc(100vw - 110px); }
}
/* Yatay telefon: yükseltmeler yeteneğin solunda tek sıra; kule menüsü sağda, yetenek düğmelerinin üstünde biter (düğmeler yer değiştirmez). */
@media (max-height: 520px) {
  #towermenu { top: calc(52px + var(--safe-t)); max-height: calc(100vh - 150px - var(--safe-t) - var(--safe-b)); right: max(8px, env(safe-area-inset-right)); }
  body:has(#abilities button:nth-child(2)) #towermenu { right: calc(max(14px, env(safe-area-inset-right)) + 76px); max-height: calc(100vh - 60px - var(--safe-t)); }
  #abilities button, body.tm-open #abilities button { width: 60px; height: 60px; }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { flex-direction: row; bottom: calc(18px + var(--safe-b)); right: calc(max(14px, env(safe-area-inset-right)) + 72px); }
  #upgrades .up { width: 60px; height: 60px; }
  #upgrades .up-ico { width: 22px; height: 22px; }
}

/* ===== Bölüm arası ekranı: tek bakışta (06.10 kullanıcı isteği) =====
   Sıkı kartlar; geniş ekranda iki sütun (solda kart · Kül geliştirmeleri · ağaç, sağda kahraman ve sıradaki harita). */
.ch-card { padding-top: 12px; }
.ch-card h2 { font-size: 26px; margin: 2px 0 2px; }
.ch-card > p { margin: 2px 0; font-size: 14px; }
.ch-card small { margin: 2px 0 6px; font-size: 12px; }
#ch-unlocks { margin: 2px 0; }
#ch-cards-wrap, #ch-shop-wrap, #ch-heroes-wrap, #ch-tree-wrap { margin-top: 8px; padding: 8px 10px; }
.card-pick { min-height: 0; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; gap: 0 10px; }
.card-pick img, .card-pick i { grid-row: 1 / 4; width: 40px; height: 40px; line-height: 40px; font-size: 24px; }
.card-pick small { margin: 0; font-size: 10px; }
.card-pick strong { font-size: 15px; }
.card-pick span { font-size: 13px; line-height: 1.3; }
#ch-shop { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.perk { min-height: 44px; padding: 4px 8px; grid-template-columns: 26px 1fr auto; }
.perk img { width: 26px; height: 26px; }
.perk strong { font-size: 14px; }
.perk span { font-size: 12px; }
.perk b { font-size: 14px; }
.perk small { font-size: 10px; margin: 0; }
#ch-tree button { min-height: 0; padding: 6px 8px; }
#ch-tree button strong { font-size: 13px; }
#ch-tree button span { font-size: 12px; }
#ch-tree-hint { margin: 4px 0 0 !important; font-size: 11px !important; }
#ch-heroes button { min-height: 44px; }
#ch-hero-panel { margin-top: 6px; }
#ch-hero-panel .hp-stage { width: 110px; height: 124px; }
#ch-hero-panel { grid-template-columns: 110px 1fr; }
#ch-hero-panel .hp-info strong { font-size: 17px; }
#ch-hero-panel .hp-info span, #ch-hero-panel .hp-info em { font-size: 13px; }
#ch-hero-panel .hp-looks button { min-height: 40px; font-size: 12px; padding: 2px 8px; }
#ch-ahead { font-size: 13px !important; color: #b9c6c8; }
#ch-map { margin: 8px 0 0; }
#ch-map-img { min-height: 80px; }
.ch-actions { padding-top: 6px; }
#ch-next { min-height: 46px; margin-top: 2px; }
@media (min-width: 1000px) and (min-height: 600px) {
  .ch-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-auto-flow: row dense; column-gap: 12px; align-content: start;
    padding-left: max(16px, calc((100% - 1180px) / 2)); padding-right: max(16px, calc((100% - 1180px) / 2)); }
  #ch-eyebrow, #ch-title, #ch-summary, #ch-unlocks, #ch-ahead, #ch-restore { grid-column: 1 / -1; }
  #ch-restore { justify-self: center; }
  #ch-cards-wrap, #ch-shop-wrap, #ch-tree-wrap { grid-column: 1; }
  #ch-heroes-wrap { grid-column: 2; grid-row: span 3; align-self: stretch; }
  #ch-map { grid-column: 2; flex-direction: column; gap: 0; }
  #ch-hero-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #ch-hero-panel .hp-stage { grid-row: auto; width: 150px; height: 160px; }
  #ch-hero-panel .hp-info { align-items: center; }
  #ch-hero-panel .hp-looks { justify-content: center; }
  .ch-map-text { padding: 8px 10px; }
}
/* Telefon (dikey): kartlar 3 sütun dikey, Kül geliştirmeleri 2 sütun, ağaç 3 sütun; önizleme küçük. */
@media (max-width: 700px) {
  .ch-card { padding: 8px 8px 8px; }
  .ch-card h2 { font-size: 21px; }
  .ch-card > p { font-size: 13px; }
  #ch-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .card-pick { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; text-align: center; padding: 6px 4px; gap: 1px; }
  .card-pick img, .card-pick i { grid-row: auto; width: 34px; height: 34px; line-height: 34px; font-size: 20px; }
  .card-pick strong { font-size: 13px; line-height: 1.15; }
  .card-pick span { font-size: 11px; line-height: 1.25; }
  #ch-shop { grid-template-columns: 1fr 1fr; gap: 5px; }
  .perk { grid-template-columns: 22px 1fr auto; column-gap: 5px; padding: 4px 6px; min-height: 44px; }
  .perk img { width: 22px; height: 22px; }
  .perk strong { font-size: 12px; line-height: 1.15; }
  .perk span { font-size: 10.5px; line-height: 1.2; }
  .perk b { font-size: 12px; }
  .perk small { font-size: 9px; letter-spacing: 0; }
  #ch-tree { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  #ch-tree button { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding: 5px 4px; }
  #ch-tree button img { grid-row: auto; width: 22px; height: 22px; }
  #ch-tree button strong { font-size: 11px; letter-spacing: 0; }
  #ch-tree button b, #ch-tree button em, #ch-tree button span { grid-column: auto; grid-row: auto; text-align: center; }
  #ch-tree button b { font-size: 11px; }
  #ch-tree button em { font-size: 9px; }
  #ch-tree button span { font-size: 10px; line-height: 1.2; }
  #ch-hero-panel { grid-template-columns: 84px 1fr; gap: 4px 10px; }
  #ch-hero-panel .hp-stage { width: 84px; height: 96px; }
  #ch-hero-panel .hp-info strong { font-size: 15px; }
  #ch-hero-panel .hp-info span, #ch-hero-panel .hp-info em { font-size: 12px; }
  #ch-hero-panel .hp-looks button { min-height: 36px; min-width: 0; }
  #ch-heroes button { min-width: 0; }
}
/* Yatay telefon: iki sütun (solda kartlar ve geliştirmeler, sağda kahraman ve ağaç). */
@media (max-height: 520px) and (min-width: 600px) {
  .ch-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 8px; align-content: start; padding: 6px 10px; }
  #ch-eyebrow, #ch-title, #ch-summary, #ch-unlocks, #ch-ahead, #ch-restore { grid-column: 1 / -1; }
  #ch-eyebrow { display: none; }
  .ch-card h2 { font-size: 19px; }
  #ch-cards-wrap, #ch-shop-wrap { grid-column: 1; }
  #ch-heroes-wrap, #ch-tree-wrap, #ch-map { grid-column: 2; }
  #ch-cards { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .card-pick { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; text-align: center; padding: 5px 4px; gap: 1px; }
  .card-pick img, .card-pick i { grid-row: auto; width: 30px; height: 30px; line-height: 30px; }
  .card-pick strong { font-size: 12px; }
  .card-pick span { font-size: 10.5px; }
  #ch-shop { grid-template-columns: 1fr 1fr; gap: 5px; }
  .perk strong { font-size: 12px; } .perk span { font-size: 10.5px; }
  #ch-tree { grid-template-columns: 1fr; gap: 4px; }
  #ch-hero-panel { grid-template-columns: 80px 1fr; }
  #ch-hero-panel .hp-stage { width: 80px; height: 90px; }
  #ch-map { flex-direction: row; }
  #ch-map-img { flex-basis: 35%; min-height: 60px; }
  .ch-actions { flex-direction: row; justify-content: center; gap: 12px; padding: 4px 10px calc(6px + var(--safe-b)); }
  #ch-next { width: min(300px, 50%); min-height: 44px; }
}
@media (max-width: 700px) {
  #ch-hero-panel .hp-looks { gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
  #ch-hero-panel .hp-looks button { flex: none; padding: 2px 6px; font-size: 11px; gap: 4px; }
  #ch-heroes button { min-height: 40px; padding: 2px 8px; }
  #ch-heroes img { width: 24px; height: 30px; }
  #ch-unlocks .unlock { padding: 3px 8px; }
}

/* ===== Menü / mola / ayarlar: yön ve ekrana göre (06.10) ===== */
.ov-left, .ov-right { display: contents; }
@media (hover: none) { .help { display: none; } }
/* Dikey telefon: logo ve boşluklar küçülür, oyna + düğmeler kaydırmadan görünür. */
@media (max-width: 700px) and (min-height: 521px) {
  #overlay .card { padding: 14px 16px; }
  #ov-logo { width: min(290px, 72vw); margin-top: 4px; }
  .card .rule { margin: 10px auto; }
  #ov-heroes { margin: 8px 0 2px; }
  .card button.primary { margin-top: 12px; }
  .card button { min-height: 46px; padding: 10px 12px; margin: 5px 0; }
}
/* Yatay telefon: iki sütun — solda logo/başlık, açıklama, kahraman; sağda oyna ve diğer düğmeler. */
@media (max-height: 520px) and (min-width: 600px) {
  #overlay .card { width: min(920px, 96vw); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 8px 14px; }
  .ov-left, .ov-right { display: block; min-width: 0; }
  #overlay .card button.primary { margin-top: 0; }
  #ov-logo { height: min(24vh, 96px); }
  .card h1 { font-size: 40px; margin: 4px 0; }
  #ov-hero-panel, #ov-hero-panel.hero-panel { display: grid; position: static; transform: none; width: auto; margin: 6px 0 0; grid-template-columns: 76px 1fr; gap: 2px 10px; }
  #ov-hero-panel .hp-stage { width: 76px; height: 86px; }
  #ov-hero-panel .hp-info { display: flex; }
  #ov-hero-panel .hp-info strong { font-size: 15px; }
  #ov-hero-panel .hp-info span, #ov-hero-panel .hp-info em { font-size: 12px; }
  #ov-hero-panel .hp-looks { display: none; }
  #ov-heroes #hero-role { display: none; }
  .card .rows { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .card .rows .row { flex: 1 1 100%; }
  /* Ayarlar: iki sütun liste */
  #settings .card { width: min(880px, 96vw); padding: 8px 16px; }
  #settings h2 { margin: 2px 0; font-size: 20px; }
  #settings-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 6px 0; }
  .setting { font-size: 13px; padding: 2px 0; }
  .setting button { min-height: 40px; min-width: 96px; padding: 6px 10px; }
  #settings-close { min-height: 42px; margin: 4px 0; }
}
@media (max-width: 700px) and (min-height: 521px) {
  #ov-hero-panel .hp-looks { flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  #ov-hero-panel .hp-looks button { flex: none; min-width: 0; min-height: 38px; padding: 2px 7px; font-size: 11px; gap: 4px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .setting button { min-height: 36px; }
  #settings-list .setting { min-height: 0; }
}

/* Okunur bölüm arası metinler; kısa ekranlarda tek kart kaydırılır, eylemler görünür kalır. */
#chapter .card-pick span, #chapter .perk span, #chapter #ch-tree button span { font-size: 14px; line-height: 1.35; }
#chapter .card-pick strong, #chapter .perk strong, #chapter #ch-tree button strong { font-size: 14px; line-height: 1.2; }
#chapter #ch-tree button, #chapter #ch-heroes button, #chapter .hp-looks button { min-height: 44px; }
#ch-home { width: auto; min-width: 112px; min-height: 44px; flex: 0 0 auto; margin-top: 2px; padding: 8px 16px;
  border: 1px solid #cfb07688; border-radius: 3px; background: #14222bcc; color: #e8dcc0; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
#ch-home:hover { background: #22323cdd; border-color: #cfb076; }
.ch-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 10px; }
.ch-actions p { flex-basis: 100%; }
body:has(#bossbar:not([hidden])) #coach { top: var(--bossbar-bottom, calc(180px + var(--safe-t))); bottom: auto; }
@media (max-width: 700px) {
  #chapter .ch-actions { flex-direction: row; flex-wrap: wrap; gap: 6px 10px; }
  #chapter .ch-actions p { flex-basis: 100%; }
  #ch-next { flex: 1; width: auto; }
  #chapter .perk { grid-template-columns: 28px minmax(0, 1fr) auto; }
}

/* Erişilebilirlik: büyük yazı (ayar). Yalnız arayüz kapları büyür; ekrana izdüşümlü etiketler (yuva/hasar) etkilenmez. */
html.big-text header, html.big-text footer, html.big-text #upgrades, html.big-text #abilities, html.big-text #towermenu,
html.big-text #coach, html.big-text #toast, html.big-text #bossbar, html.big-text .card, html.big-text .ch-card,
html.big-text .ch-actions { zoom: 1.15; }
@media (max-width: 700px), (max-height: 520px) { html.big-text #upgrades, html.big-text #abilities { zoom: 1.08; } }

/* ===== Süslü çerçeve (kahraman, kapı, patron çubukları; canavarlar sade) =====
   Çift halka (koyu · pirinç · koyu) ve iki uçta pirinç baklava başlık; başlıklar çerçevenin dışına taşar, çubuk kırpılmaz. */
.bar-frame { position: relative; display: block; padding: 0 10px; }
.bar-frame .track { display: block; margin-top: 0; border: 0; border-radius: 2px;
  box-shadow: 0 0 0 1px #120c06, 0 0 0 2px #d9b56a, 0 0 0 3px #3a2a12, 0 2px 6px 3px #000a, inset 0 1px 3px #000; }
.bar-frame::before, .bar-frame::after { content: ''; position: absolute; top: 50%; z-index: 4; width: 9px; height: 9px;
  background: linear-gradient(135deg, #fff0c4, #d9b56a 45%, #7a5a26); border: 1px solid #1a1208; transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 3px #000c; }
.bar-frame::before { left: 1px; }
.bar-frame::after { right: 1px; }
.health .bar-frame { margin-top: 6px; }
#gatebox .bar-frame { padding: 0 9px; }
#bossbar .bar-frame { margin-top: 5px; }
#bossbar .bar-frame::before, #bossbar .bar-frame::after { width: 11px; height: 11px; background: linear-gradient(135deg, #ffd2b8, #d0674f 45%, #6e1a10); }
/* Patron çubuğu: ince şerit — küçük portre, adı çubuğun üstünde, durum simgeleri yalnız varsa. */
#boss-status:empty { display: none; }
@media (max-width: 700px), (max-height: 520px) {
  #bossbar { top: calc(54px + var(--safe-t)); width: min(320px, 74vw); gap: 6px; }
  #bossbar img { width: 26px; height: 26px; }
  #bossbar small { font-size: 9px !important; letter-spacing: 1.5px; }
  #bossbar .track { height: 10px; }
  #boss-status { min-height: 0; margin-top: 2px; }
  #boss-status img { width: 14px; height: 14px; }
}
@media (max-height: 520px) { #bossbar { top: calc(50px + var(--safe-t)); } #bossbar img { display: block; } }

/* ===== Ana sayfa ve ganimet ekonomisi (06.10) — klasik mobil düzen, temaya uygun pirinç çerçeveler ===== */
#home-top[hidden], #home-chests[hidden], #home-nav[hidden], #gear[hidden], #shop[hidden], #chest-open[hidden], #home-pop[hidden] { display: none !important; }
#home-top { position: fixed; top: calc(8px + var(--safe-t)); right: max(10px, env(safe-area-inset-right)); z-index: 6; display: flex; gap: 8px; pointer-events: none; }
.res { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; min-height: 32px; border-radius: 16px; background: #0b151ce6;
  border: 1px solid #c5a36399; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0008; color: #f2e8d0; font: 700 15px var(--font-display); }
.res-ico { width: 26px; height: 26px; object-fit: contain; }
.res .fb { width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; border-radius: 50%; background: #2a1a12; color: #ff8a4c; font-size: 14px; }
.res.dust .fb { color: #b9cdd6; background: #18242c; }
.res-row { display: flex; gap: 6px; margin-left: auto; }
body.home #overlay { padding-top: calc(52px + var(--safe-t)); padding-bottom: calc(176px + var(--safe-b)); }
body.home #overlay .card { max-height: 100%; }
/* Sandık yuvaları */
#home-chests { position: fixed; left: 50%; bottom: calc(70px + var(--safe-b)); transform: translateX(-50%); z-index: 6; display: grid; grid-template-columns: repeat(4, 78px); gap: 8px; }
.chest-slot { position: relative; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 4px 2px 6px;
  border-radius: 10px; border: 1px solid #6a7e8366; background: linear-gradient(#17252df0, #0c151cf0); color: #e8dcc0; font: 600 11px "Segoe UI", sans-serif; }
.chest-slot.empty { justify-content: center; border-style: dashed; color: #7d8b8f; background: #0b141bb0; text-align: center; padding: 6px; }
.chest-slot .chest-ico { width: 62px; height: 62px; object-fit: contain; margin-bottom: auto; filter: drop-shadow(0 3px 4px #000a); }
.chest-slot .fb { font-style: normal; font-size: 34px; margin-bottom: auto; }
.chest-slot.r-good { border-color: #6fd16a99; } .chest-slot.r-rare { border-color: #5fa8ffaa; }
.chest-slot.r-epic { border-color: #b47cffaa; } .chest-slot.r-legendary { border-color: #ffb13dcc; }
.chest-slot.opening small { color: #9fd0ff; }
.chest-slot.ready { border-color: #f3c66e; box-shadow: 0 0 14px #f3c66e66, inset 0 0 12px #f3c66e33; }
.chest-slot.ready small { color: #1e2524; background: linear-gradient(100deg, #b39355, #dec793); border-radius: 4px; padding: 1px 10px; font-weight: 800; letter-spacing: 1px; }
/* Alt menü */
#home-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; gap: 4px;
  padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + var(--safe-b)); background: linear-gradient(#0a1218f2, #05090cfa); border-top: 1px solid #c5a36377; }
#home-nav button { position: relative; flex: 0 1 120px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: #9fb0b4; font: 700 11px "Segoe UI", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
#home-nav svg { width: 24px; height: 24px; }
#home-nav button.on { color: #ffe1a3; border-color: #c5a36399; background: linear-gradient(#2a2416cc, #14100acc); }
#home-nav button:disabled { opacity: .5; }
#home-nav em { position: absolute; top: 2px; right: 6px; font: 700 8px "Segoe UI", sans-serif; font-style: normal; color: #1e2524; background: #c5a363; border-radius: 3px; padding: 0 3px; letter-spacing: 0; }
/* Paneller (ekipman, dükkân) */
#gear, #shop { position: fixed; inset: 0; z-index: 7; background: #061019f7; display: flex; justify-content: center; }
.panel-card { width: min(920px, 100%); height: 100%; overflow-y: auto; padding: calc(10px + var(--safe-t)) 14px calc(80px + var(--safe-b)); }
.panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-family: var(--font-display); letter-spacing: 3px; color: #f2e8d0; font-weight: 400; font-size: 24px; }
.panel-head > button, .bag-head button { min-height: 40px; padding: 6px 14px; border: 1px solid #cfb07688; border-radius: 4px; background: #14222bcc; color: #e8dcc0; font: 700 12px "Segoe UI", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.muted { color: #8fa0a4; font-size: 13px; }
#gear-heroes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#gear-heroes button { min-height: 40px; padding: 4px 14px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; font-size: 13px; }
#gear-heroes button.on { border-color: var(--gold); background: #3a2f1aee; color: #ffe1a3; }
.gear-main { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
#gear-slots { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; }
.gslot, .bag-item { position: relative; width: 76px; height: 76px; border-radius: 10px; border: 2px solid var(--rc, #6a7e8366); padding: 6px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, #33424a) 30%, transparent), #0c151c 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gslot.empty { border-style: dashed; background: #0b141bb0; }
.gslot small { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 9px; color: #9fb0b4; letter-spacing: 1px; text-transform: uppercase; }
.gslot:not(.empty) small { display: none; }
.gi { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 3px #000b); }
.gslot .fb, .bag-item .fb { font-style: normal; font-size: 28px; color: var(--rc, #ccc); }
.gslot em, .bag-item em { position: absolute; top: 2px; right: 4px; font: 800 12px var(--font-display); font-style: normal; color: #ffe1a3; text-shadow: 0 1px 2px #000; }
.bag-item .eqd { position: absolute; bottom: 2px; left: 4px; font-style: normal; font-size: 12px; color: #8fe0a6; }
.bag-item.sel { outline: 3px solid #ffe1a3; outline-offset: 1px; }
#gear-bonus { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #ffffff1a; border-radius: 8px; background: #0b151cc4; font-size: 14px; color: #c9e8d2; }
#gear-bonus small { font-size: 11px; letter-spacing: 3px; color: #ccb782; text-transform: uppercase; margin-bottom: 2px; }
.bag-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.bag-head > span { font: 400 18px var(--font-display); letter-spacing: 2px; color: #f2e8d0; }
.bag-head small { color: #8fa0a4; margin-right: auto; }
#gear-merge.on { border-color: #ffe1a3; color: #ffe1a3; background: #3a2f1aee; }
#gear-hint { margin: 0 0 8px; font-size: 12px; color: #8fa0a4; }
#gear-bag { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 8px; }
/* Kalite parıltısı: destansı mor hale, efsanevi altın hale + ışık süpürmesi (yalnız menüde/panellerde, oyun sırasında yok) */
.r-epic.gslot, .r-epic.bag-item, .co-card.r-epic { box-shadow: 0 0 10px #b47cff77, inset 0 0 10px #b47cff33; }
.r-legendary.gslot, .r-legendary.bag-item, .co-card.r-legendary { box-shadow: 0 0 16px #ffb13d99, inset 0 0 14px #ffb13d44; overflow: hidden; }
.r-legendary.gslot::after, .r-legendary.bag-item::after, .co-card.r-legendary::after { content: ''; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, #fff3c855 50%, transparent 60%); animation: kg-sheen 2.6s ease-in-out infinite; }
@keyframes kg-sheen { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
/* Dükkân */
#shop-list { display: grid; gap: 10px; margin-top: 10px; }
.shop-offer { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rc); border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 18%, #0c151c), #0c151cf0); }
.so-ico { width: 72px; height: 72px; object-fit: contain; }
.shop-offer .fb { font-style: normal; font-size: 40px; color: var(--rc); }
.so-info { flex: 1; display: flex; flex-direction: column; }
.so-info strong { font: 400 18px var(--font-display); color: #f2e8d0; letter-spacing: 1px; }
.so-info small { color: #8fa0a4; }
.shop-offer .buy { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 14px; border: 1px solid #cfb076; border-radius: 6px;
  background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524; font: 800 15px var(--font-display); }
.shop-offer .buy:disabled { filter: grayscale(.8); opacity: .55; }
/* Açılır kart */
#home-pop { position: fixed; inset: 0; z-index: 9; background: #000a; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pop-card { width: min(400px, 94vw); padding: 16px; border: 1px solid var(--rc, #c5a363aa); border-radius: 10px; background: linear-gradient(#17252dfa, #0b141bfa); color: #e8dcc0; box-shadow: 0 10px 40px #000c; }
.pop-card > strong { display: block; font: 400 20px var(--font-display); letter-spacing: 1px; color: var(--rc, #f2e8d0); }
.pop-card p { font-size: 14px; color: #c4cfd0; line-height: 1.45; }
.pop-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pop-actions button { min-height: 46px; padding: 8px 12px; border: 1px solid #cfb07699; border-radius: 6px; background: #14222bcc; color: #f3d59e; font: 700 13px "Segoe UI", sans-serif; letter-spacing: 1px; }
.pop-actions button:disabled { opacity: .45; }
.pop-actions button.danger { border-color: #d0674f99; color: #ffb39c; }
.pop-actions button.ghost { border-color: #6a7e8366; color: #9fb0b4; background: none; }
.pop-actions button.enh { border-color: #79a88e; color: #c9ecd4; }
.ip-head { display: flex; gap: 12px; align-items: center; }
.ip-ico { width: 84px; height: 84px; object-fit: contain; border: 2px solid var(--rc); border-radius: 10px; padding: 6px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), #0c151c 75%); }
.ip-head strong { display: block; font: 400 20px var(--font-display); color: var(--rc); }
.ip-head small { color: #9fb0b4; font-size: 12px; }
.ip-stats { margin: 10px 0 0; padding-left: 18px; font-size: 15px; color: #d6eadf; line-height: 1.5; }
.item-pop .better { color: #8fe0a6; } .item-pop .worse { color: #ff9a7a; }
/* Sandık açılışı: sallanma → patlama → kartlar tek tek döner */
#chest-open { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--glow) 28%, #061019) 0%, #030709f5 62%); overflow-y: auto; }
#chest-open h3 { margin: 0; font: 400 24px var(--font-display); letter-spacing: 3px; color: #f2e8d0; }
.co-stage { position: relative; width: 220px; height: 200px; display: grid; place-items: center; }
.co-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 65%); opacity: .35; }
.co-chest { width: 190px; height: 190px; object-fit: contain; position: relative; filter: drop-shadow(0 8px 12px #000c); }
.co-stage .fb { font-style: normal; font-size: 120px; color: var(--glow); position: relative; }
.stage-shake .co-chest, .stage-shake .co-stage .fb { animation: kg-shake .45s ease-in-out infinite; }
.stage-shake .co-glow { animation: kg-glow 1.3s ease-in forwards; }
@keyframes kg-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.03); } 75% { transform: rotate(6deg) scale(1.03); } }
@keyframes kg-glow { from { opacity: .2; transform: scale(.7); } to { opacity: 1; transform: scale(1.35); } }
.stage-reveal .co-stage { animation: kg-pop .5s ease-out forwards; }
@keyframes kg-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); filter: brightness(2.2); } 100% { transform: scale(.55); opacity: .25; height: 0; } }
.co-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.co-card { position: relative; width: 150px; min-height: 190px; padding: 10px 8px; border-radius: 10px; border: 2px solid var(--rc, #c5a363); text-align: center;
  background: linear-gradient(color-mix(in srgb, var(--rc, #c5a363) 22%, #0c151c), #0b141b); color: #e8dcc0; display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; }
.stage-reveal .co-card { animation: kg-flip .55s ease-out var(--d, 0s) forwards; }
.stage-reveal.fast .co-card { animation-delay: 0s; animation-duration: .2s; }
@keyframes kg-flip { 0% { opacity: 0; transform: perspective(600px) rotateY(90deg) translateY(20px); } 100% { opacity: 1; transform: none; } }
.co-card .ci { width: 76px; height: 76px; object-fit: contain; }
.co-card .fb { font-style: normal; font-size: 40px; color: var(--rc, #f3c66e); }
.co-card .rar { font-size: 10px; letter-spacing: 2px; color: var(--rc); text-transform: uppercase; }
.co-card b { font: 400 15px var(--font-display); color: #f2e8d0; }
.co-card ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: #c9e8d2; line-height: 1.35; }
.co-card.cur b { font-size: 22px; color: #ffe1a3; }
.co-done { min-height: 48px; min-width: 200px; border: 1px solid #cfb076; border-radius: 4px; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524; font: 800 13px "Segoe UI", sans-serif; letter-spacing: 2px; opacity: 0; }
.stage-reveal .co-done { animation: kg-fade .4s ease-out 1s forwards; }
.stage-reveal.fast .co-done { animation-delay: .2s; }
@keyframes kg-fade { to { opacity: 1; } }
.co-skip { color: #8fa0a4; font-size: 12px; }
.stage-reveal .co-skip { display: none; }
#home-toast { position: fixed; top: 22%; left: 50%; transform: translate(-50%, -8px); z-index: 11; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  padding: 10px 20px; background: #0b151cee; border-top: 1px solid #c9a96b77; border-bottom: 1px solid #c9a96b77; color: #ffe7b7; font: 16px var(--font-display); letter-spacing: 1px; text-align: center; max-width: 90vw; }
#home-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Telefon dikey: sandıklar biraz küçük */
@media (max-width: 700px) {
  #home-chests { grid-template-columns: repeat(4, minmax(0, 78px)); width: calc(100vw - 24px); justify-content: center; gap: 6px; }
  #home-nav button { flex: 1 1 0; }
  .gear-main { grid-template-columns: 1fr; }
  #gear-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gslot { width: auto; aspect-ratio: 1; height: auto; }
  #gear-bag { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .bag-item { width: auto; height: auto; aspect-ratio: 1; }
  .gi { width: 80%; height: 80%; }
  .co-card { width: calc(50vw - 24px); min-height: 0; }
  .co-stage { width: 180px; height: 160px; }
  .co-chest { width: 150px; height: 150px; }
}
/* Yatay telefon: sandıklar solda dikey sütun, alt menü ince */
@media (max-height: 520px) {
  body.home #overlay { padding: calc(44px + var(--safe-t)) 0 calc(54px + var(--safe-b)) 96px; }
  #home-top { top: calc(4px + var(--safe-t)); }
  #home-chests { left: max(8px, env(safe-area-inset-left)); top: calc(46px + var(--safe-t)); bottom: auto; transform: none; grid-template-columns: 78px; gap: 6px; }
  .chest-slot { height: 66px; }
  .chest-slot .chest-ico { width: 42px; height: 42px; }
  #home-nav { padding-top: 3px; padding-bottom: calc(3px + var(--safe-b)); }
  #home-nav button { min-height: 44px; flex-direction: row; gap: 6px; }
  .co-card { width: 140px; min-height: 0; }
  .co-stage { width: 150px; height: 120px; }
  .co-chest { width: 120px; height: 120px; }
}
#chest-open { justify-content: safe center; }
@media (max-width: 700px) {
  .co-card { width: calc(33.3vw - 14px); padding: 8px 4px; gap: 2px; }
  .co-card .ci { width: 52px; height: 52px; }
  .co-card b { font-size: 13px; }
  .co-card ul { font-size: 10.5px; }
  .co-cards { gap: 6px; }
}
/* Yerden toplanan eşya bildirimi: kalite renginde */
#toast.loot-common { color: #e6eaec; } #toast.loot-good { color: #8fe08a; } #toast.loot-rare { color: #8cc4ff; }
#toast.loot-epic { color: #cfa6ff; } #toast.loot-legendary { color: #ffc66e; text-shadow: 0 0 12px #ffb13d, 0 2px 8px #000; }
/* Geniş ekran: sandıklar sol kenarda dikey sütun, menü kartı yer kaybetmez */
@media (min-width: 701px) {
  body.home #overlay { padding: calc(52px + var(--safe-t)) 0 calc(66px + var(--safe-b)) 110px; }
  #home-chests { left: max(12px, env(safe-area-inset-left)); top: 50%; bottom: auto; transform: translateY(-50%); grid-template-columns: 84px; gap: 8px; }
  #home-nav { padding-top: 4px; padding-bottom: calc(4px + var(--safe-b)); }
  #home-nav button { min-height: 50px; }
}
@media (min-width: 701px) and (max-height: 520px) {
  #home-chests { top: calc(46px + var(--safe-t)); transform: none; grid-template-columns: 78px; }
}
/* Ana sayfa açıkken masaüstü kartı sıkı (üst şerit + alt menü yer aldı; klavye yardımı mola ekranında kalır) */
@media (min-width: 701px) and (min-height: 521px) {
  body.home #overlay .card { padding: 14px 24px; }
  body.home #overlay .help, body.home #overlay .eyebrow { display: none; }
  body.home #ov-logo { width: auto; height: min(18vh, 120px); margin-top: 0; }
  body.home #overlay .rule { margin: 8px auto; }
  body.home #overlay .card button.primary { margin-top: 10px; }
  body.home #overlay .card .row button { margin: 4px 0; min-height: 44px; padding: 10px 12px; }
}
#home-pop { overflow-y: auto; align-items: safe center; }
@media (max-height: 520px) {
  .pop-card { padding: 10px 14px; }
  .ip-ico { width: 60px; height: 60px; }
  .ip-stats { margin-top: 6px; font-size: 13px; }
  .pop-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .pop-actions button { flex: 1 1 45%; min-height: 42px; }
}

/* ===== Oyun içi evrensel mobil düzen (06.10, kullanıcı örnekleri: aksiyon RPG'ler) =====
   Sol üst: yuvarlak portre + can + seviye/deneyim · sol sütun: yuvarlak yükseltme simgeleri · üst orta: dalga/kapı ·
   sağ üst: çanta/mola, altın, mini harita · sol alt: hareket kolu tabanı · sağ alt: büyük yetenek + yay · kule menüsü sağda dikey. */
.brand, #objective { display: none !important; }
footer .health, footer .health.has-portrait { position: fixed; top: calc(8px + var(--safe-t)); left: max(10px, env(safe-area-inset-left)); z-index: 3;
  width: 230px; min-height: 66px; padding: 7px 12px 7px 70px; border-radius: 36px 10px 10px 36px;
  background: linear-gradient(90deg, #0b151cf0, #0b151cc0); border: 1px solid #c5a36388; box-shadow: 0 3px 12px #000a; }
footer .health:not(.has-portrait) { padding-left: 12px; border-radius: 10px; }
footer .health #portrait { display: block; position: absolute; left: 3px; top: 50%; bottom: auto; transform: translateY(-50%); width: 60px; height: 60px;
  border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid #d9b56a; box-shadow: 0 0 0 2px #120c06, 0 0 10px #000c; }
footer .health #portrait[hidden] { display: none; }
footer .health small { font-size: 11px !important; letter-spacing: 1.5px; }
footer .health .bar-frame { margin-top: 4px; }
.xp-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#hud-level { min-width: 24px; height: 18px; padding: 0 6px; border-radius: 9px; background: linear-gradient(#f3d59e, #a8803f); color: #1e1407;
  font: 800 11px/18px var(--font-display); text-align: center; box-shadow: 0 0 0 1px #120c06; }
.xp-track { flex: 1; height: 6px; border-radius: 3px; background: #0a0706; border: 1px solid #6f5a33; overflow: hidden; }
.xp-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f8fd8, #a9d4ff); transition: width .3s; }
/* Sağ üst: çanta + mola (masaüstünde ayar/ses/tam ekran da), altında altın, en altta mini harita */
footer .actions { position: fixed; top: calc(8px + var(--safe-t)); right: max(10px, env(safe-area-inset-right)); left: auto; z-index: 3; }
footer .actions button.icon { min-width: 46px; min-height: 46px; border-radius: 50%; border: 1px solid #c5a36399; background: radial-gradient(#22323c, #0b151c); display: grid; place-items: center; }
#btn-bag svg { width: 24px; height: 24px; color: #f3d59e; }
#btn-bag { position: relative; }
#btn-bag.new::after { content: ''; position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #e0563f; box-shadow: 0 0 0 2px #0b151c, 0 0 8px #e0563f; }
header .wallet { position: fixed; top: calc(62px + var(--safe-t)); right: max(10px, env(safe-area-inset-right)); margin: 0; z-index: 3;
  padding: 2px 12px 2px 6px; border-radius: 18px; background: #0b151cdd; border: 1px solid #c5a36377; }
header .wallet small { display: none; }
#minimap { position: fixed; top: calc(108px + var(--safe-t)); right: max(10px, env(safe-area-inset-right)); width: 128px; height: 128px; z-index: 2; pointer-events: none;
  border-radius: 50%; border: 2px solid #c5a363; box-shadow: 0 0 0 2px #120c06, 0 4px 12px #000a; background: #0b151ccc; }
#minimap[hidden] { display: none; }
body.tm-open #minimap { visibility: hidden; }
/* Sol sütun: yuvarlak yükseltme simgeleri (seviye üstte, fiyat altta) */
#upgrades, body:has(#abilities button:nth-child(2)) #upgrades { position: fixed; left: max(12px, env(safe-area-inset-left)); right: auto; top: calc(86px + var(--safe-t)); bottom: auto;
  transform: none; width: auto; flex-direction: column; gap: 16px; }
#upgrades .up, #upgrades button.up { position: relative; flex: none; width: 54px; height: 54px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid #c5a363; background: radial-gradient(circle at 50% 35%, #2a3a44, #0b151c 75%); box-shadow: 0 0 0 2px #120c06, 0 3px 8px #000a; }
#upgrades .up-full { display: none; }
#upgrades .up-ico { width: 26px; height: 26px; }
#upgrades .up-lv { display: block; position: absolute; top: -6px; right: -10px; padding: 0 5px; border-radius: 8px; background: #0b151c; border: 1px solid #c5a36399;
  font: 700 10px/15px "Segoe UI", sans-serif; color: #f2e8d0; letter-spacing: 0; white-space: nowrap; }
#upgrades .up-cost { display: flex; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: #0b151c;
  border: 1px solid #c5a36399; font: 700 10px/15px "Segoe UI", sans-serif; color: var(--gold); white-space: nowrap; }
#upgrades .up-cost:empty { display: none; }
#upgrades .up:disabled { border-color: #6a7e8377; filter: saturate(.4); }
#upgrades .up:not(:disabled) { box-shadow: 0 0 0 2px #120c06, 0 0 12px #f3c66e55; }
/* Sağ alt: büyük yetenek, ikinci yetenek sol üstünde (yay) */
#abilities, body.tm-open #abilities { left: auto; top: auto; right: max(18px, env(safe-area-inset-right)); bottom: calc(18px + var(--safe-b)); flex-direction: row-reverse; align-items: flex-end; gap: 10px; }
body #abilities button:first-child, body.tm-open #abilities button:first-child { width: 86px; height: 86px; border-width: 3px; }
body #abilities button:nth-child(2), body.tm-open #abilities button:nth-child(2) { width: 62px; height: 62px; margin-bottom: 60px; }
/* Sol alt: hareket kolu tabanı (dokunmatikte boşken görünür) */
#joystick { width: 120px; height: 120px; border: 2px solid #e5dccb55; background: radial-gradient(circle, #ffffff12, #0b151c55 70%); box-shadow: 0 0 0 1px #0008; }
#joystick i { width: 46px; height: 46px; top: 35px; left: 35px; background: radial-gradient(circle at 40% 35%, #f3e6c8, #a8915f); border: 2px solid #f2e4caaa; }
#joystick.idle { left: calc(max(16px, env(safe-area-inset-left)) + 74px); top: calc(100% - 96px - var(--safe-b)); opacity: .55; }
/* Kule menüsü: sağda dikey panel (yuvada durunca açılır) */
#towermenu, body:has(#abilities button:nth-child(2)) #towermenu { left: auto; right: max(10px, env(safe-area-inset-right)); top: calc(62px + var(--safe-t)); bottom: auto; transform: none;
  width: 232px; max-height: calc(100vh - 62px - 190px - var(--safe-t) - var(--safe-b)); overflow-y: auto; padding: 8px; gap: 6px; }
#towermenu #tm-grid { grid-template-columns: repeat(2, 1fr); }
#towermenu #tm-actions { flex-wrap: wrap; }
#towermenu #tm-actions button { flex: 1 1 100%; min-width: 0; }
@media (min-width: 701px) and (min-height: 521px) { #tm-heal { display: block; } }
/* Dikey telefon: dalga/kapı ikinci satırda (sol üst panel ve sağ üst düğmelerle çakışmasın); mini harita yok */
@media (max-width: 700px) {
  footer .health, footer .health.has-portrait { width: 196px; }
  .wave { top: calc(80px + var(--safe-t)) !important; }
  header .wallet { top: calc(60px + var(--safe-t)); }
  #minimap { display: none !important; }
  #bossbar { top: calc(134px + var(--safe-t)); }
  #coach { top: calc(134px + var(--safe-t)); }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { top: calc(88px + var(--safe-t)); }
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { top: calc(122px + var(--safe-t)); width: 178px; max-height: calc(100vh - 122px - 190px - var(--safe-t) - var(--safe-b)); }
}
/* Yatay telefon: kule menüsü yetenek kümesinin solunda tam boy dikey panel */
@media (max-height: 520px) {
  footer .health, footer .health.has-portrait { min-height: 58px; padding-top: 4px; padding-bottom: 4px; }
  footer .health #portrait { width: 52px; height: 52px; }
  #minimap { width: 104px; height: 104px; top: calc(100px + var(--safe-t)); }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { top: calc(78px + var(--safe-t)); gap: 14px; }
  #upgrades .up, #upgrades button.up { width: 48px; height: 48px; }
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { top: calc(8px + var(--safe-t)); right: calc(max(18px, env(safe-area-inset-right)) + 168px); width: 220px; max-height: calc(100vh - 16px - var(--safe-t) - var(--safe-b)); }
  body #abilities button:first-child, body.tm-open #abilities button:first-child { width: 76px; height: 76px; }
  body #abilities button:nth-child(2), body.tm-open #abilities button:nth-child(2) { width: 56px; height: 56px; margin-bottom: 52px; }
  #joystick.idle { top: calc(100% - 80px - var(--safe-b)); }
}
footer .health small { display: flex; white-space: nowrap; }
footer .health small b { font-size: 11px !important; }
@media (max-width: 700px) { footer .health, footer .health.has-portrait { width: 206px; } footer .health small span { overflow: hidden; text-overflow: ellipsis; } }

/* ===== Lobi (06.10, kullanıcı örnekleri: mobil RPG ana ekranı) =====
   Ortada büyük dönen 3D kahraman, solda kahraman portreleri, üstte logo ve paralar, altta süslü simge düğmeleri,
   sağ altta büyük SAVAŞ düğmesi, sandık yuvaları. Yalnız başlangıç/devam ekranında (body.home); mola/sonuç kartı değişmez. */
body.home #overlay { padding: 0; align-items: stretch; justify-content: stretch; }
body.home #overlay .card { width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; overflow: visible; background: none; position: relative; }
body.home #overlay .ov-left, body.home #overlay .ov-right { display: contents; }
body.home #overlay .eyebrow, body.home #ov-title, body.home #overlay .rule, body.home #ov-desc, body.home #ov-stats, body.home #ov-ios,
body.home #overlay .help, body.home #ov-heroes > small, body.home #hero-role, body.home #ov-slots, body.home #ov-records, body.home #ov-daily { display: none !important; }
body.home #ov-logo { position: fixed; top: calc(6px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: auto; height: min(13vh, 92px); margin: 0; z-index: 1; filter: drop-shadow(0 4px 10px #000c); }
/* Kahraman portreleri: solda dikey yuvarlak çerçeveler */
body.home #ov-heroes { margin: 0; }
body.home #hero-list { position: fixed; left: max(14px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2; }
body.home .card #hero-list button { width: 70px; height: 70px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; overflow: hidden; border: 2px solid #6a7e83aa;
  background: #0b151c; box-shadow: 0 0 0 2px #120c06, 0 4px 10px #000a; position: relative; font-size: 0; }
body.home .card #hero-list button img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 15%; border-radius: 0; }
body.home .card #hero-list button.on { border-color: #ffd27a; box-shadow: 0 0 0 2px #120c06, 0 0 16px #f3c66e99; }
body.home .card #hero-list button.locked img { filter: grayscale(1) brightness(.45); }
body.home .card #hero-list button.locked::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; filter: grayscale(1); }
/* Ortada büyük kahraman */
body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 62vw); margin: 0;
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; z-index: 1; }
body.home #ov-hero-panel .hp-stage { grid-row: auto; width: min(420px, 60vw); height: min(54vh, 460px); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, #f3c66e2e, #2a3a4400 60%); overflow: visible; }
body.home #ov-hero-panel .hp-info { display: flex; align-items: center; }
body.home #ov-hero-panel .hp-info strong { font-size: 26px; letter-spacing: 3px; text-shadow: 0 2px 8px #000; }
body.home #ov-hero-panel .hp-info span, body.home #ov-hero-panel .hp-info em { font-size: 14px; text-shadow: 0 1px 4px #000; }
body.home #ov-hero-panel .hp-looks { display: flex; justify-content: center; flex-wrap: wrap; }
/* Büyük SAVAŞ düğmesi (sağ alt) */
body.home #overlay .card button#ov-play { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(96px + var(--safe-b)); width: min(260px, 40vw); min-height: 84px; margin: 0; z-index: 3;
  border: 2px solid #ffe1a3; border-radius: 16px; font: 800 20px var(--font-display); letter-spacing: 3px;
  background: linear-gradient(160deg, #e9cf8e, #b38c47 55%, #7d5a26); color: #1e1407; box-shadow: 0 0 0 3px #120c06, 0 0 24px #f3c66e66, inset 0 2px 0 #fff4d0; text-shadow: 0 1px 0 #f7e2b0; }
body.home #ov-play:disabled { filter: grayscale(.6); }
body.home #ov-note, body.home #ov-saved { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(186px + var(--safe-b)); width: min(260px, 40vw); text-align: center;
  font-size: 12px; color: #d6c9a8; text-shadow: 0 1px 3px #000; margin: 0; z-index: 3; }
body.home #ov-saved { bottom: calc(204px + var(--safe-b)); }
/* Kalan menü düğmeleri (yeni oyun, ayarlar, tam ekran, telefona yükle): sağ üstte küçük */
body.home #overlay .rows { position: fixed; top: calc(52px + var(--safe-t)); right: max(10px, env(safe-area-inset-right)); width: 170px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
body.home #overlay .rows .row { display: flex; flex-direction: column; gap: 6px; }
body.home #overlay .card .rows button { margin: 0; min-height: 38px; padding: 6px 10px; font-size: 11px; letter-spacing: 1px; border-radius: 6px; background: #0b151cd9; }
body.home #install-help { position: fixed; top: calc(52px + var(--safe-t)); right: 190px; width: min(320px, 50vw); z-index: 3; }
/* Sandıklar: sol altta sıra */
body.home #home-chests { left: max(14px, env(safe-area-inset-left)); right: auto; top: auto; bottom: calc(96px + var(--safe-b)); transform: none; grid-template-columns: repeat(4, 74px); gap: 8px; }
body.home .chest-slot { height: 84px; }
/* Alt menü: süslü kare simgeler */
body.home #home-nav { justify-content: center; gap: 10px; padding: 6px 12px calc(8px + var(--safe-b)); background: linear-gradient(#05090c00, #05090cf2 35%); border-top: 0; }
body.home #home-nav button { flex: 0 0 74px; width: 74px; min-height: 74px; border-radius: 12px; border: 2px solid #c5a36399;
  background: radial-gradient(circle at 50% 30%, #2b3b45, #0b151c 80%); box-shadow: 0 0 0 2px #120c06, 0 4px 10px #000a; color: #f3d59e; font-size: 10px; letter-spacing: .5px; }
body.home #home-nav button svg { width: 30px; height: 30px; }
body.home #home-nav button.on { border-color: #ffe1a3; box-shadow: 0 0 0 2px #120c06, 0 0 14px #f3c66e77; }
body.home #home-nav button:disabled { opacity: .45; }
/* Dikey telefon: logo üstte, portreler yatay sıra, kahraman ortada, SAVAŞ tam genişlik, sandıklar ve menü altta */
@media (max-width: 700px) {
  body.home #ov-logo { height: 64px; }
  body.home #hero-list { top: calc(78px + var(--safe-t)); left: 50%; transform: translateX(-50%); flex-direction: row; gap: 10px; }
  body.home .card #hero-list button { width: 52px; height: 52px; }
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(140px + var(--safe-t)); transform: translateX(-50%); width: 92vw; }
  body.home #ov-hero-panel .hp-stage { width: 70vw; height: min(36vh, 320px); }
  body.home #ov-hero-panel .hp-info strong { font-size: 20px; }
  body.home #overlay .card button#ov-play { left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 32px); min-height: 64px; bottom: calc(190px + var(--safe-b)); font-size: 18px; }
  body.home #ov-note, body.home #ov-saved { left: 16px; right: 16px; width: auto; bottom: calc(260px + var(--safe-b)); }
  body.home #ov-saved { bottom: calc(276px + var(--safe-b)); }
  body.home #overlay .rows { top: calc(8px + var(--safe-t)); left: max(8px, env(safe-area-inset-left)); right: auto; width: 116px; gap: 4px; }
  body.home #overlay .card .rows button { min-height: 32px; font-size: 9.5px; padding: 4px 6px; }
  body.home #overlay .rows .row { gap: 4px; }
  body.home #home-chests { left: 50%; transform: translateX(-50%); bottom: calc(90px + var(--safe-b)); grid-template-columns: repeat(4, minmax(0, 76px)); width: calc(100vw - 24px); justify-content: center; }
  body.home #home-nav { gap: 6px; padding-left: 6px; padding-right: 6px; }
  body.home #home-nav button { flex: 1 1 0; width: auto; min-height: 66px; min-width: 0; font-size: 9px; }
  body.home #home-nav button svg { width: 24px; height: 24px; }
  body.home #install-help { top: auto; bottom: calc(270px + var(--safe-b)); left: 16px; right: 16px; width: auto; }
}
/* Yatay telefon: portreler sol üstte yatay, sandıklar solda dikey, SAVAŞ sağ altta */
@media (max-height: 520px) {
  body.home #ov-logo { height: 54px; top: calc(4px + var(--safe-t)); }
  body.home #hero-list { top: calc(8px + var(--safe-t)); left: max(10px, env(safe-area-inset-left)); transform: none; flex-direction: row; gap: 8px; }
  body.home .card #hero-list button { width: 46px; height: 46px; }
  body.home #home-chests { left: max(10px, env(safe-area-inset-left)); top: calc(64px + var(--safe-t)); bottom: auto; grid-template-columns: repeat(2, 66px); gap: 6px; }
  body.home .chest-slot { height: 70px; }
  body.home .chest-slot .chest-ico { width: 44px; height: 44px; }
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: 48%; width: 46vw; }
  body.home #ov-hero-panel .hp-stage { width: 40vw; height: 52vh; }
  body.home #ov-hero-panel .hp-looks { display: none; }
  body.home #ov-hero-panel .hp-info strong { font-size: 18px; }
  body.home #overlay .card button#ov-play { bottom: calc(66px + var(--safe-b)); min-height: 62px; width: 210px; font-size: 16px; }
  body.home #ov-note, body.home #ov-saved { bottom: calc(132px + var(--safe-b)); width: 210px; }
  body.home #ov-saved { bottom: calc(146px + var(--safe-b)); }
  body.home #overlay .rows { top: calc(50px + var(--safe-t)); width: 150px; }
  body.home #overlay .card .rows button { min-height: 32px; font-size: 10px; }
  body.home #home-nav { padding-top: 2px; padding-bottom: calc(4px + var(--safe-b)); }
  body.home #home-nav button { flex: 0 0 64px; width: 64px; min-height: 52px; flex-direction: column; gap: 1px; }
  body.home #home-nav button svg { width: 22px; height: 22px; }
}
body.home #overlay .card .rows .row { flex: none; min-width: 0; }
@media (max-width: 700px) {
  body.home #hero-list { top: calc(126px + var(--safe-t)); }
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(186px + var(--safe-t)); }
  body.home #ov-hero-panel .hp-stage { height: min(32vh, 290px); }
}
/* Lobi: geniş ekranda portre sütunu logonun altından başlar (sandık yuvalarına inmez); kısa ekranda küçülür */
@media (min-width: 701px) and (min-height: 521px) {
  body.home #hero-list { top: calc(110px + var(--safe-t)); transform: none; }
}
@media (min-width: 701px) and (min-height: 521px) and (max-height: 700px) {
  body.home .card #hero-list button { width: 54px; height: 54px; }
  body.home #hero-list { gap: 8px; top: calc(96px + var(--safe-t)); }
}
/* ===== Canlı telefon düzeltmeleri (06.10 gece) ===== */
/* Lobi SAVAŞ/DEVAM düğmesi: uzun yazı ("Kaldığın yerden devam et") tek satır */
body.home #overlay .card button#ov-play { font-size: 17px; letter-spacing: 2px; line-height: 1.15; padding: 8px 14px; width: min(300px, 42vw); }
/* Dikey lobi: kahraman alanı ekran boyuna göre küçülür; adı, yeteneği ve kostümler devam düğmesinin üstünde biter */
@media (max-width: 700px) {
  body.home #ov-hero-panel .hp-stage { height: max(130px, calc(100vh - var(--safe-t) - var(--safe-b) - 186px - 410px)); }
  body.home #ov-hero-panel .hp-info strong { font-size: 18px; }
  body.home #ov-hero-panel .hp-info span, body.home #ov-hero-panel .hp-info em { font-size: 12px; }
  body.home #ov-hero-panel .hp-looks button, body.home .card #ov-hero-panel .hp-looks button { min-height: 32px; font-size: 10.5px; padding: 1px 6px; }
  body.home #overlay .card button#ov-play { width: calc(100vw - 32px); font-size: 15px; min-height: 58px; }
  body.home #ov-note, body.home #ov-saved { bottom: calc(254px + var(--safe-b)); }
  body.home #ov-saved { bottom: calc(268px + var(--safe-b)); }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { top: calc(98px + var(--safe-t)); }
}
/* Yatay lobi: kahraman logonun altından başlar, adı ve yeteneği alt menünün üstünde kalır */
@media (max-height: 520px) {
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(56px + var(--safe-t)); transform: translateX(-50%); }
  body.home #ov-hero-panel .hp-stage { height: max(120px, calc(100vh - var(--safe-t) - var(--safe-b) - 56px - 70px - 84px)); }
  body.home #ov-hero-panel .hp-info { gap: 0; }
  body.home #ov-hero-panel .hp-info strong { font-size: 17px; }
  body.home #ov-hero-panel .hp-info span, body.home #ov-hero-panel .hp-info em { font-size: 11.5px; }
  body.home #overlay .card button#ov-play { width: 290px; min-height: 54px; font-size: 14px; }
  body.home #ov-note, body.home #ov-saved { width: 290px; bottom: calc(126px + var(--safe-b)); }
  body.home #ov-saved { bottom: calc(140px + var(--safe-b)); }
}
/* Dikey lobi: küçük menü düğmeleri logonun altında tek sıra (devam ekranında da portrelere inmez) */
@media (max-width: 700px) {
  body.home #overlay .rows { top: calc(74px + var(--safe-t)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; flex-direction: row; gap: 4px; }
  body.home #overlay .rows .row { display: contents; }
  body.home #overlay .card .rows button { flex: 1 1 0; min-width: 0; min-height: 30px; font-size: 9px; letter-spacing: .5px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.home #hero-list { top: calc(114px + var(--safe-t)); }
  body.home .card #hero-list button { width: 48px; height: 48px; }
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(170px + var(--safe-t)); }
  body.home #ov-hero-panel .hp-stage { height: max(130px, calc(100vh - var(--safe-t) - var(--safe-b) - 170px - 410px)); }
}
/* Yatay lobi: kahraman alanı ortanın biraz solunda, devam düğmesi ekrana göre dar (küçük yatay telefonda çakışmasın) */
@media (max-height: 520px) {
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { left: 43%; width: 40vw; }
  body.home #overlay .card button#ov-play { width: min(290px, 33vw); font-size: 13px; letter-spacing: 1px; }
  body.home #ov-note, body.home #ov-saved { width: min(290px, 33vw); }
  body.home #overlay .rows { width: min(150px, 22vw); }
}
/* Alt boşluk yok: kanvas ekranın tamamını kaplar (boyutu screen.js verir); oyun sırasında üstteki koyu geçiş kalktı */
#game { position: fixed; left: 0; top: 0; }
body:not(.home) header { background: none; }
/* Küçük yatay telefon (≤700 geniş ve ≤520 yüksek, ör. 667×375): dikey kuralları geri alınır, yatay düzen geçerli */
@media (max-width: 700px) and (max-height: 520px) {
  body.home #overlay .card button#ov-play { left: auto; right: max(14px, env(safe-area-inset-right)); transform: none; bottom: calc(66px + var(--safe-b)); width: min(250px, 36vw); min-height: 52px; font-size: 12px; }
  body.home #ov-note, body.home #ov-saved { left: auto; right: max(14px, env(safe-area-inset-right)); width: min(250px, 36vw); bottom: calc(122px + var(--safe-b)); }
  body.home #ov-saved { bottom: calc(136px + var(--safe-b)); }
  body.home #overlay .rows { top: calc(50px + var(--safe-t)); left: auto; right: max(10px, env(safe-area-inset-right)); width: min(140px, 22vw); flex-direction: column; }
  body.home #overlay .rows .row { display: flex; flex-direction: column; gap: 4px; }
  body.home #overlay .card .rows button { flex: none; min-height: 30px; font-size: 9.5px; }
  body.home #hero-list { top: calc(8px + var(--safe-t)); left: max(10px, env(safe-area-inset-left)); transform: none; }
  body.home .card #hero-list button { width: 42px; height: 42px; }
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(54px + var(--safe-t)); left: 42%; transform: translateX(-50%); width: 36vw; }
  body.home #ov-hero-panel .hp-stage { width: 34vw; height: max(110px, calc(100vh - var(--safe-t) - var(--safe-b) - 54px - 66px - 70px)); }
  body.home #ov-hero-panel .hp-info strong { font-size: 15px; }
  body.home #ov-hero-panel .hp-info em { display: none; }
  body.home #home-chests { left: max(10px, env(safe-area-inset-left)); top: calc(58px + var(--safe-t)); bottom: auto; transform: none; width: auto; grid-template-columns: repeat(2, 60px); }
  body.home .chest-slot { height: 62px; }
  body.home #home-nav button { flex: 0 0 60px; width: 60px; min-height: 50px; }
  /* oyun içi */
  .wave { top: calc(5px + var(--safe-t)) !important; }
  #minimap { display: block !important; }
  #minimap[hidden] { display: none !important; }
  #bossbar, #coach { top: calc(54px + var(--safe-t)); }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { top: calc(76px + var(--safe-t)); }
  footer .health, footer .health.has-portrait { width: 200px; }
}

/* ===== Arayüz süsleri (06.10, Codex Paket 5): süslü çerçeveler, dövme düğmeler, taş paneller, boyalı simgeler ===== */
:root {
  --u: url('../../assets/ui/');
}
/* Kahraman portresi: süslü halka */
footer .health.has-portrait::before { content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 84px; height: 84px; z-index: 1; pointer-events: none;
  background: url('../../assets/ui/cerceve_portre.webp') center / contain no-repeat; }
footer .health #portrait { border: 0; box-shadow: none; }
/* Yetenek düğmeleri: içerik yuvarlak kesme katmanında, rün oymalı halka dışa taşar */
#abilities button, body #abilities button:first-child, body.tm-open #abilities button:first-child { overflow: visible; border: 0; background: none; box-shadow: none; }
#abilities .ab-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #14222b; }
#abilities .ab-clip img { width: 100%; height: 100%; display: block; }
#abilities .ab-clip i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #000000aa; }
#abilities .ab-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 20px "Segoe UI", sans-serif; color: #fff; text-shadow: 0 1px 3px #000; }
#abilities button::after { content: ''; position: absolute; inset: -18%; pointer-events: none; background: url('../../assets/ui/cerceve_yetenek.webp') center / contain no-repeat; }
#abilities button.ready::after { filter: drop-shadow(0 0 8px #f3c66e); }
#abilities button kbd { z-index: 2; }
/* Yükseltme simgeleri: küçük pirinç halka */
#upgrades .up, #upgrades button.up { border: 0; box-shadow: none; }
#upgrades .up::before { content: ''; position: absolute; inset: -14%; pointer-events: none; background: url('../../assets/ui/cerceve_kucuk.webp') center / contain no-repeat; }
#upgrades .up:not(:disabled)::before { filter: drop-shadow(0 0 6px #f3c66e99); }
#upgrades .up-lv, #upgrades .up-cost { z-index: 1; }
/* Mini harita: pusulalı halka */
#minimap { border: 0; box-shadow: none; }
#minimap-frame { position: fixed; z-index: 2; pointer-events: none; display: none; background: url('../../assets/ui/cerceve_harita.webp') center / contain no-repeat; }
#minimap:not([hidden]) + #minimap-frame { display: block; top: calc(108px + var(--safe-t) - 16px); right: calc(max(10px, env(safe-area-inset-right)) - 16px); width: 160px; height: 160px; }
body.tm-open #minimap-frame { visibility: hidden; }
@media (max-height: 520px) { #minimap:not([hidden]) + #minimap-frame { top: calc(100px + var(--safe-t) - 13px); right: calc(max(10px, env(safe-area-inset-right)) - 13px); width: 130px; height: 130px; } }
@media (max-width: 700px) and (min-height: 521px) { #minimap-frame { display: none !important; } }
/* Sağ üst: boyalı simgeli yuvarlak düğmeler */
footer .actions button.icon { font-size: 0; background: radial-gradient(#22323c, #0b151c) center / cover; position: relative; }
footer .actions button.icon::before { content: ''; position: absolute; inset: 4px; background: center / contain no-repeat; }
#btn-bag svg { display: none; }
#btn-bag::before { background-image: url('../../assets/ui/ikon_canta.webp') !important; }
#btn-pause::before { background-image: url('../../assets/ui/ikon_mola.webp') !important; inset: 0 !important; }
#btn-settings::before { background-image: url('../../assets/ui/ikon_ayarlar.webp') !important; }
#btn-sound, #btn-fs { font-size: 18px !important; }
#btn-sound::before, #btn-fs::before { display: none; }
/* Dalga başlığı: sancak şerit */
.wave strong { display: inline-flex; align-items: center; padding: 6px 38px 8px; background: url('../../assets/ui/serit_baslik.webp') center / 100% 100% no-repeat; }
/* Lobi alt menü: süslü kare çerçeve + boyalı simge */
body.home #home-nav button { position: relative; border: 0; box-shadow: none; background: radial-gradient(circle at 50% 30%, #2b3b45, #0b151c 80%); }
body.home #home-nav button::after { content: ''; position: absolute; inset: -6px; pointer-events: none; background: url('../../assets/ui/cerceve_kare.webp') center / 100% 100% no-repeat; }
body.home #home-nav button svg { display: none; }
body.home #home-nav button::before { content: ''; width: 42px; height: 42px; background: center / contain no-repeat; margin-bottom: 1px; }
body.home #home-nav button[data-nav="gear"]::before { background-image: url('../../assets/ui/ikon_ekipman.webp'); }
body.home #home-nav button[data-nav="shop"]::before { background-image: url('../../assets/ui/ikon_dukkan.webp'); }
body.home #home-nav button[data-nav="slots"]::before { background-image: url('../../assets/ui/ikon_kayitlar.webp'); }
body.home #home-nav button[data-nav="records"]::before { background-image: url('../../assets/ui/ikon_basarilar.webp'); }
body.home #home-nav button[data-nav="daily"]::before { background-image: url('../../assets/ui/ikon_gunluk.webp'); }
body.home #home-nav button[data-nav="castle"]::before { background-image: url('../../assets/ui/ikon_kale.webp'); }
body.home #home-nav em { z-index: 1; }
@media (max-height: 520px) { body.home #home-nav button::before { width: 30px; height: 30px; } }
@media (max-width: 700px) and (min-height: 521px) { body.home #home-nav button::before { width: 32px; height: 32px; } }
/* Lobi SAVAŞ düğmesi: dövme altın zemin + kılıç-kalkan simgesi */
body.home #overlay .card button#ov-play { border: 16px solid transparent; border-image: url('../../assets/ui/buton_altin.webp') 30% fill / 16px stretch; background: none; box-shadow: none;
  padding: 4px 10px 4px 56px; position: fixed; filter: drop-shadow(0 0 14px #f3c66e55) drop-shadow(0 4px 8px #000b); }
body.home #overlay .card button#ov-play::before { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: url('../../assets/ui/ikon_savas.webp') center / contain no-repeat; }
/* Lobi küçük düğmeleri ve diğer ikincil düğmeler: kararmış demir zemin */
body.home #overlay .card .rows button, .pop-actions button, .panel-head > button, .bag-head button, #ch-home {
  border: 10px solid transparent; border-image: url('../../assets/ui/buton_koyu.webp') 30% fill / 10px stretch; background: none; }
/* Paneller: taş çerçeve */
.pop-card, #towermenu { border: 18px solid transparent; border-image: url('../../assets/ui/panel_tas.webp') 30% fill / 18px stretch; background: none; box-shadow: 0 10px 30px #000a; }
#towermenu { padding: 2px; }
/* Lobi kahraman portreleri: küçük süslü halka */
body.home .card #hero-list button { overflow: visible; border: 0; box-shadow: none; background: none; }
body.home .card #hero-list button img { border-radius: 50%; }
body.home .card #hero-list button::before { content: ''; position: absolute; inset: -16%; pointer-events: none; z-index: 1; background: url('../../assets/ui/cerceve_kucuk.webp') center / contain no-repeat; }
body.home .card #hero-list button.on::before { filter: drop-shadow(0 0 8px #f3c66e); }
body.home .card #hero-list button.locked::after { border-radius: 50%; z-index: 2; }
.wave strong { gap: .35em; }

/* ===== Telefon: kaydırmasız ekranlar (06.10, kullanıcı: "hiçbir yerde yukarı-aşağı kaydırma istemiyorum") ===== */
/* Ayarlar: sekmeler (Genel · Ses · Görüntü), satırlar sıkı, eylemler Genel sekmesinde */
#settings .card { max-height: calc(100vh - var(--safe-t) - var(--safe-b)); overflow: hidden; padding: 14px 18px; }
#settings h2 { margin: 2px 0 8px; }
.settings-tabs { grid-column: 1 / -1; display: flex; gap: 6px; margin-bottom: 8px; }
.settings-tabs button, .card .settings-tabs button { flex: 1 1 0; margin: 0; min-height: 44px; padding: 6px 4px; font-size: 12px; letter-spacing: 1px;
  border: 10px solid transparent; border-image: url('../../assets/ui/buton_koyu.webp') 30% fill / 10px stretch; background: none; color: #c9d2d4; }
.settings-tabs button.on { color: #ffe1a3; filter: brightness(1.3) drop-shadow(0 0 6px #f3c66e66); }
#settings-list .setting[hidden], .setting-actions[hidden] { display: none !important; }
#settings-list .setting { padding: 3px 0; min-height: 50px; }
.setting-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.setting-actions button, .card .setting-actions button { margin: 0; min-height: 46px; font-size: 12px; letter-spacing: 1px;
  border: 10px solid transparent; border-image: url('../../assets/ui/buton_koyu.webp') 30% fill / 10px stretch; background: none; color: #f3d59e; }
#settings-close { margin-top: 10px; }
@media (max-height: 520px) {
  #settings .card { padding: 6px 14px; }
  #settings h2 { font-size: 18px; margin: 0 0 4px; }
  #settings-list .setting { min-height: 46px; }
  #settings-close { margin-top: 4px; min-height: 44px; }
}
/* Kayıtlar/Başarılar: kart ekran boyunda sütun, liste kalan alanda, sayfalı */
#records .card.wide { display: flex; flex-direction: column; height: calc(100vh - var(--safe-t) - var(--safe-b) - 16px); max-height: 760px; overflow: hidden; }
#records .card h2 { margin: 2px 0 6px; }
#rec-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; display: flex; flex-direction: column; }
#rec-body .ach-grid, #rec-body .stat-list { flex: 0 1 auto; min-height: 0; overflow: hidden; }
#records-close { flex: none; margin-top: 8px; }
.pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: auto; padding-top: 6px; }
.pager-btn, .card .pager-btn { width: 48px; min-width: 48px; height: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 26px; line-height: 1; color: #ffe1a3;
  border: 10px solid transparent; border-image: url('../../assets/ui/buton_koyu.webp') 30% fill / 10px stretch; background: none; }
.pager-btn:disabled { opacity: .35; }
.pager-n { font: 600 14px var(--font-display); color: #d6c9a8; min-width: 48px; text-align: center; }
@media (max-height: 520px) {
  #records .card.wide { height: calc(100vh - var(--safe-t) - var(--safe-b) - 8px); padding: 6px 12px; }
  #records .card h2 { font-size: 18px; margin: 0 0 2px; }
  #records .tabs { margin: 4px 0; }
  #records .tabs button { min-height: 40px; }
  #records-close { min-height: 44px; margin-top: 4px; }
  #rec-body .ach-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Bölüm arası: geniş ekranda iki sütun (sekme çubuğu yok); telefonda sekmeler, kaydırma yok */
#ch-tabs { display: none; }
@media (max-width: 999px), (max-height: 600px) {
  .ch-card, .ch-card[data-tab] { display: flex; flex-direction: column; overflow: hidden; padding: calc(8px + var(--safe-t)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); gap: 6px; }
  #ch-eyebrow { display: none; }
  .ch-card h2 { font-size: 20px; margin: 0; letter-spacing: 2px; }
  .ch-card > #ch-summary { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ch-unlocks { margin: 0; flex-wrap: nowrap; overflow: hidden; }
  #ch-unlocks small { display: none; }
  #ch-tabs { display: flex; gap: 5px; flex: none; }
  #ch-tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 2px; font: 700 12px "Segoe UI", sans-serif; letter-spacing: .5px; color: #c9d2d4; text-transform: uppercase;
    border: 10px solid transparent; border-image: url('../../assets/ui/buton_koyu.webp') 30% fill / 10px stretch; background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ch-tabs button.on { color: #ffe1a3; filter: brightness(1.35) drop-shadow(0 0 6px #f3c66e77); }
  #ch-tabs button.alert::after { content: ' •'; color: #ff8a5c; }
  .ch-card [data-pane] { display: none !important; }
  .ch-card[data-tab="cards"] [data-pane="cards"]:not([hidden]), .ch-card[data-tab="shop"] [data-pane="shop"]:not([hidden]),
  .ch-card[data-tab="hero"] [data-pane="hero"]:not([hidden]), .ch-card[data-tab="tree"] [data-pane="tree"]:not([hidden]),
  .ch-card[data-tab="next"] #ch-ahead { display: block !important; }
  .ch-card[data-tab="next"] #ch-map:not([hidden]) { display: flex !important; }
  .ch-card[data-tab="next"] #ch-restore:not([hidden]) { display: inline-block !important; align-self: center; }
  #ch-cards-wrap, #ch-shop-wrap, #ch-heroes-wrap, #ch-tree-wrap { margin: 0; padding: 8px 10px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  #ch-cards-wrap > small, #ch-shop-wrap > small, #ch-heroes-wrap > small, #ch-tree-wrap > small { margin: 0 0 6px; }
  #ch-map { margin: 0; }
  .ch-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 4px 10px calc(8px + var(--safe-b)); }
  .ch-actions p { flex-basis: 100%; margin: 0; font-size: 12px; }
  #ch-next { flex: 1 1 auto; width: auto; max-width: 360px; min-height: 48px; margin: 0; }
  /* İçerik ızgaraları sekme alanına göre */
  #ch-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #ch-shop { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  #ch-tree { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-height: 600px) and (min-width: 600px) {
  #ch-shop { grid-template-columns: repeat(3, 1fr); }
  #ch-tree { grid-template-columns: repeat(3, 1fr); }
  .ch-card h2 { font-size: 17px; }
  #ch-hero-panel { grid-template-columns: 90px 1fr; }
  #ch-hero-panel .hp-stage { width: 90px; height: 96px; }
}
/* Ekipman: kahraman kartı (paperdoll) — solda silah/zırh/miğfer, ortada ekipman gücü, sağda eldiven/çizme/tılsım; çanta sayfalı */
.panel-card { padding-bottom: calc(8px + var(--safe-b)); }
.gear-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 6px; }
.gear-card .panel-head { flex: none; margin: 0; }
.gear-left { flex: none; }
#gear-heroes { margin-bottom: 6px; }
.gear-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: repeat(3, auto); gap: 8px 10px; align-items: center; }
#gear-slots { display: contents; }
#gear-slots .gslot { width: 64px; height: 64px; }
#gear-slots .gslot:nth-child(-n+3) { grid-column: 1; }
#gear-slots .gslot:nth-child(n+4) { grid-column: 3; }
#gear-slots .gslot:nth-child(1), #gear-slots .gslot:nth-child(4) { grid-row: 1; }
#gear-slots .gslot:nth-child(2), #gear-slots .gslot:nth-child(5) { grid-row: 2; }
#gear-slots .gslot:nth-child(3), #gear-slots .gslot:nth-child(6) { grid-row: 3; }
#gear-bonus { grid-column: 2; grid-row: 1 / 4; align-self: stretch; justify-content: center; text-align: center; font-size: 13px; overflow: hidden; }
.gear-right { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gear-right .bag-head { flex: none; margin: 4px 0 2px; }
.gear-right #gear-hint { flex: none; margin: 0 0 4px; }
#gear-bagbox { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#gear-bag { flex: 0 1 auto; min-height: 0; overflow: hidden; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
#gear-bag .bag-item { width: auto; height: auto; aspect-ratio: 1; }
@media (max-width: 700px) and (min-height: 521px) { #gear-slots .gslot { width: 60px; height: 60px; } .bag-head button { min-height: 40px; font-size: 10px; padding: 4px 8px; } }
/* Yatay: iki sütun — solda kahraman ve yuvalar, sağda çanta */
@media (max-height: 600px) and (min-width: 600px) {
  .gear-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; }
  .gear-card .panel-head { grid-column: 1 / -1; }
  .gear-card .panel-head h2 { font-size: 19px; }
  .gear-left { grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; }
  .gear-right { grid-column: 2; grid-row: 2; }
  #gear-slots .gslot { width: 54px; height: 54px; }
  #gear-heroes button { min-height: 36px; padding: 2px 10px; }
  .bag-head button { min-height: 38px; font-size: 10px; padding: 4px 8px; }
  #gear-bag { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  /* Dükkân: sandıklar yan yana */
  #shop-list { grid-template-columns: repeat(3, 1fr); }
  .shop-offer { flex-direction: column; text-align: center; padding: 8px; }
  .so-info { align-items: center; }
  .so-ico { width: 64px; height: 64px; }
  #shop .panel-card > p { margin: 2px 0; }
}
/* Sade menüler: lobide tek çark simgesi (yeni oyun/tam ekran Ayarlar → Genel'de); molada temel düğmeler; sonuçta tek ana düğme */
body.home #ov-new, body.home #ov-fs { display: none !important; }
body.home #overlay .card .rows button#ov-settings { position: fixed; width: 50px; height: 50px; min-height: 0; padding: 0; font-size: 0; border: 0; border-image: none; border-radius: 50%;
  background: url('../../assets/ui/ikon_ayarlar.webp') center / 84% no-repeat, radial-gradient(#22323c, #0b151c); box-shadow: 0 0 0 2px #c5a36399, 0 3px 8px #000a; z-index: 3; }
body.home #overlay .card .rows button#ov-settings { top: calc(8px + var(--safe-t)); left: max(10px, env(safe-area-inset-left)); right: auto; }
@media (min-width: 701px) and (min-height: 521px) { body.home #overlay .card .rows button#ov-settings { left: auto; right: max(10px, env(safe-area-inset-right)); top: calc(56px + var(--safe-t)); } }
@media (max-height: 520px) { body.home #overlay .card .rows button#ov-settings { left: auto; right: max(10px, env(safe-area-inset-right)); top: calc(50px + var(--safe-t)); } }
body.home #overlay .rows { pointer-events: none; }
body.home #overlay .rows button { pointer-events: auto; }
body.home #ov-install-row { position: fixed; }
body.home #overlay .card .rows #ov-install { position: fixed; width: auto; min-width: 0; padding: 0 14px; min-height: 40px; font-size: 10.5px; }
body.home #overlay .card .rows #ov-install { top: calc(64px + var(--safe-t)); left: max(10px, env(safe-area-inset-left)); }
@media (min-width: 701px) and (min-height: 521px) { body.home #overlay .card .rows #ov-install { left: auto; right: max(10px, env(safe-area-inset-right)); top: calc(114px + var(--safe-t)); } }
@media (max-height: 520px) { body.home #overlay .card .rows #ov-install { left: auto; right: 70px; top: calc(54px + var(--safe-t)); } }
@media (max-width: 700px) and (min-height: 521px) { body.home #hero-list { top: calc(112px + var(--safe-t)); } }
#overlay[data-state="paused"] #ov-new, #overlay[data-state="paused"] #ov-records, #overlay[data-state="paused"] #ov-daily,
#overlay[data-state="paused"] #ov-install-row, #overlay[data-state="paused"] .help, #overlay[data-state="paused"] #install-help { display: none !important; }
#overlay[data-state="won"] .rows, #overlay[data-state="dead"] .rows, #overlay[data-state="dailyEnd"] .rows, #overlay[data-state="expEnd"] .rows,
#overlay[data-state="won"] .help, #overlay[data-state="dead"] .help, #overlay[data-state="dailyEnd"] .help, #overlay[data-state="expEnd"] .help { display: none !important; }
/* Not ve son kayıt, dövme çerçeveli SAVAŞ düğmesinin üstünde (düğme çerçeveyle büyüdü) */
body.home #ov-note { bottom: calc(200px + var(--safe-b)); }
body.home #ov-saved { bottom: calc(218px + var(--safe-b)); }
@media (max-width: 700px) and (min-height: 521px) { body.home #ov-note { bottom: calc(272px + var(--safe-b)); } body.home #ov-saved { bottom: calc(290px + var(--safe-b)); } }
@media (max-height: 520px) { body.home #ov-note { bottom: calc(140px + var(--safe-b)); } body.home #ov-saved { bottom: calc(156px + var(--safe-b)); } }
/* Yatay telefon bölüm arası: Güç 4 sütun, Kahraman sekmesi yan yana (düğmeler solda dikey), başlık sıkı */
@media (max-height: 600px) and (min-width: 600px) {
  #ch-unlocks { display: none !important; }
  .ch-card h2 { font-size: 16px; }
  .ch-card > #ch-summary { font-size: 12px; }
  #ch-tabs button { min-height: 44px; }
  #ch-shop { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  #ch-shop .perk { min-height: 44px; padding: 3px 6px; }
  #chapter .perk strong { font-size: 13px; }
  #ch-shop-wrap > small, #ch-heroes-wrap > small, #ch-tree-wrap > small, #ch-cards-wrap > small { margin-bottom: 3px; font-size: 11px; }
  #ch-heroes-wrap:not([hidden]) { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .ch-card[data-tab="hero"] #ch-heroes-wrap:not([hidden]) { display: grid !important; }
  #ch-heroes-wrap > small { grid-column: 1 / -1; }
  #ch-heroes { flex-direction: column; justify-content: flex-start; }
  #ch-hero-panel { margin: 0; grid-template-columns: 96px 1fr; }
  #ch-hero-panel .hp-stage { width: 96px; height: 108px; }
}
/* Dikey bölüm arası: sekme adları tam sığsın, ödül kartları tek sütun geniş */
@media (max-width: 700px) and (min-height: 601px) {
  #ch-tabs { gap: 3px; }
  #ch-tabs button { border-width: 6px; font-size: 10px; letter-spacing: 0; padding: 2px 0; }
  #ch-cards { grid-template-columns: 1fr; gap: 8px; }
  #chapter .card-pick { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 12px; padding: 10px 12px; min-height: 84px; }
  #chapter .card-pick img, #chapter .card-pick i { grid-row: 1 / 4; width: 52px; height: 52px; }
  #chapter .card-pick strong { font-size: 16px; }
}
/* Kule menüsü telefonda kaydırmasız: sıkı başlık, eylemler tek sıra; dikeyde 3, yatayda 4 sütun */
#towermenu, body:has(#abilities button:nth-child(2)) #towermenu { overflow: hidden; }
#towermenu .tm-head img { width: 30px; height: 30px; }
#towermenu .tm-text strong { font-size: 13px; letter-spacing: 1px; }
#towermenu .tm-text small { font-size: 11px; margin: 1px 0 3px; line-height: 1.25; }
#towermenu #tm-grid { gap: 4px; }
#towermenu #tm-grid button { min-height: 48px; padding: 2px 1px; gap: 0; }
#towermenu #tm-grid button img, #towermenu #tm-grid button i { width: 24px; height: 24px; line-height: 24px; }
#towermenu #tm-grid button span { font-size: 9px; }
#towermenu #tm-actions { flex-wrap: nowrap; gap: 4px; }
#towermenu #tm-actions button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 2px 4px; font-size: 10px; white-space: normal; line-height: 1.1; }
#towermenu #tm-branch button { min-height: 44px; }
@media (max-width: 700px) and (min-height: 521px) {
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { width: min(236px, 62vw); max-height: none; }
  #towermenu #tm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 520px) {
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { width: min(320px, 46vw); max-height: none; top: calc(6px + var(--safe-t)); }
  #towermenu #tm-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== 07.10 düzen düzeltmeleri (çakışma denetimi: tools/yerel_test/cakisma_denetimi.py, 15 boyut × 33 ekran) =====
   Kullanıcı: "ekran boyutlarında yazılar üst üste geliyor, arayüzde gereksiz üst üste binen yerler var". */
/* Rakamlar: Palatino'nun eski stil rakamları (0 → o) yerine düz rakam */
body { font-variant-numeric: lining-nums; }
/* Üst orta dalga/kapı: masaüstü/tablette kısa üst şeritte dikey ortalanıp ekranın üstünden taşıyordu */
header .wave { top: calc(6px + var(--safe-t)); }
/* Katmanlar: 3B yuva etiketleri ve hasar sayıları arayüz kartlarının altında */
#labels, #numbers { z-index: 1; }
#intro, #toast, #coach, #bossbar, #towermenu { z-index: 4; }
/* Kahraman paneli: ad uzunsa kısalır, can sayısı hep tam (yatayda üst üste biniyordu) */
footer .health small { justify-content: space-between; gap: 6px; }
footer .health small span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: .6px; }
footer .health small b { flex: none; }
/* Bildirim (toast) ile patron giriş kartı aynı anda gelir: dikeyde bildirim üst şeridin altında, kart ekranın ortasının
   altında; öğretici kartı açıksa bildirim onun altına iner. Yatayda bildirim alt ortada (kol ile yetenekler arasındaki boşluk). */
#toast { white-space: normal; max-width: min(92vw, 520px); }
#intro { max-width: min(94vw, 560px); }
#intro p { max-width: none; }
@media (max-width: 700px) and (min-height: 521px) {
  #toast { top: calc(222px + var(--safe-t)); font-size: 15px; padding: 8px 16px; }
  body:has(#coach:not([hidden])) #toast { top: calc(252px + var(--safe-t)); }
  #intro { top: 58%; width: 92vw; padding: 12px 16px; gap: 12px; }
  #intro img { width: 72px; height: 72px; }
  #intro strong { font-size: 19px; letter-spacing: 2px; line-height: 1.15; }
  #intro p { font-size: 12px; }
}
@media (max-height: 520px) {
  #toast { top: auto; bottom: calc(12px + var(--safe-b)); font-size: 14px; padding: 6px 14px; max-width: 46vw; }
  #toast.show { transform: translate(-50%, 0); }
}
/* Dikey telefon: dalga şeridi altın kutusunun altına iniyordu → şerit bir sıra aşağıda; patron çubuğu, öğretici ve kule menüsü ona göre */
@media (max-width: 700px) and (min-height: 521px) {
  .wave { top: calc(108px + var(--safe-t)) !important; }
  #bossbar { top: calc(178px + var(--safe-t)) !important; }
  #coach { top: calc(178px + var(--safe-t)) !important; }
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { top: calc(178px + var(--safe-t)) !important; max-height: calc(100vh - 178px - 196px - var(--safe-t) - var(--safe-b)); overflow: hidden; }
  #upgrades, body:has(#abilities button:nth-child(2)) #upgrades { top: calc(92px + var(--safe-t)); }
}
/* Yatay telefon: patron çubuğu dalga/kapı şeridinin altında, kule menüsü onun altında; mini harita altın kutusunun altında */
@media (max-height: 520px) {
  #bossbar { top: calc(92px + var(--safe-t)) !important; }
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { top: calc(132px + var(--safe-t)) !important; max-height: calc(100vh - 140px - var(--safe-t) - var(--safe-b)); }
  #minimap { top: calc(126px + var(--safe-t)); }
  #minimap:not([hidden]) + #minimap-frame { top: calc(126px + var(--safe-t) - 13px); }
  #chintro { top: 56%; }
  #intro { top: 62%; }
}
/* Tablet/masaüstü: patron çubuğu ve öğretici dalga/kapı şeridinin altında; kule menüsü altın kutusunun altında (mini harita menü açıkken gizli) */
@media (min-width: 701px) and (min-height: 521px) {
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { top: calc(116px + var(--safe-t)) !important; max-height: calc(100vh - 116px - 150px - var(--safe-t) - var(--safe-b)); }
  #bossbar { top: calc(118px + var(--safe-t)) !important; }
  #coach { top: calc(166px + var(--safe-t)) !important; }
}
/* Küçük yazılar (9 px) okunur boyuta — yalnız yer olan yerlerde (dar kutulardaki etiketler 9 px kalır) */
#ov-stats small, #home-chests .chest-slot small, .eyebrow { font-size: 10px !important; }
#bossbar small#boss-name { font-size: 11px !important; letter-spacing: 1.5px; }
#abilities button kbd { font-size: 10px; }
nav#home-nav button span { letter-spacing: 0; }
/* Lobi küçük telefon (≤ 760 px boy): görünüm çipleri ve son kayıt satırı kahraman bilgisiyle/SAVAŞ düğmesiyle çakışıyordu */
@media (max-width: 700px) and (min-height: 521px) and (max-height: 760px) {
  body.home #ov-hero-panel, body.home #ov-hero-panel.hero-panel { top: calc(128px + var(--safe-t)); }
  body.home #ov-hero-panel .hp-stage { height: 24vh; }
  body.home #ov-hero-panel .hp-looks, body.home #ov-saved { display: none !important; }
  body.home #ov-hero-panel .hp-info strong { font-size: 18px; }
}
/* Sandık açılışı: ödül kartları sığmazsa sıkı (statlar çantada), TOPLA her zaman görünür */
#chest-open .co-done { position: sticky; bottom: 0; flex: none; }
#chest-open.compact .co-card { min-height: 0; padding: 6px 4px; }
#chest-open.compact .co-card ul { display: none; }
#chest-open.compact .co-card .ci { width: 46px; height: 46px; }
#chest-open.compact .co-card b { font-size: 12.5px; line-height: 1.15; }
#chest-open.compact .co-cards { gap: 6px; }
@media (max-width: 700px) and (min-height: 521px) { #chest-open.compact .co-card { width: calc(25vw - 10px); } }
.co-card ul li { line-height: 1.3; margin: 1px 0; }
.co-card ul li .v { white-space: nowrap; }
/* Yenilgi/zafer: küçük ekranda kahraman önizlemesi gizli (kahraman seçimi bölüm arası "Kahraman" sekmesinde) — DEVAM ekran dışına düşüyordu */
@media (max-height: 760px) {
  #overlay[data-state="dead"] #ov-hero-panel, #overlay[data-state="won"] #ov-hero-panel { display: none !important; }
}
#overlay[data-state="dead"] #ov-hero-panel .hp-looks, #overlay[data-state="won"] #ov-hero-panel .hp-looks { display: none !important; }
/* Ayarlar küçük ekranda sıkı satırlar (Görüntü sekmesi 7 satır: KAPAT'ın üstüne biniyordu) */
@media (max-height: 700px) { #settings-list .setting { min-height: 50px; padding-top: 3px; padding-bottom: 3px; } #settings .card h2 { margin: 4px 0; } }
@media (max-height: 520px) {
  #overlay[data-state="dead"] #ov-heroes, #overlay[data-state="won"] #ov-heroes { display: none !important; }
}
/* Ayarlar: sekme değişince pencere zıplamasın (sabit boy, KAPAT altta) */
#settings .card { display: flex; flex-direction: column; height: min(640px, calc(100% - 24px)); }
#settings #settings-list { flex: 1 1 auto; min-height: 0; }
#settings #settings-close { margin-top: auto; flex: none; }
/* Kayıtlar yatay telefonda: KAPAT ekran dışına düşüyordu */
@media (max-height: 520px) {
  #slots .card { padding-top: 10px; padding-bottom: 10px; }
  #slots .card h2 { margin: 0 0 4px; font-size: 20px; }
  #slots-list { margin: 6px 0; flex-direction: row; flex-wrap: wrap; }
  #slots-list .slot { flex: 1 1 260px; padding: 6px 10px; }
  #slots-list p { margin: 4px 0; font-size: 12px; }
  #slots-list .slot button { min-height: 40px; }
}
/* Tablet/masaüstü: mini harita altın kutusunun altında (çerçevesi altına biniyordu) */
@media (min-width: 701px) and (min-height: 521px) {
  #minimap { top: calc(122px + var(--safe-t)); }
  #minimap:not([hidden]) + #minimap-frame { top: calc(122px + var(--safe-t) - 16px); }
}
/* Dikey telefon: bölüm giriş kartı dalga şeridinin altında */
@media (max-width: 700px) and (min-height: 521px) { #chintro { top: 44%; } }
/* Yatay telefon: ayarlar sıkı (Genel sekmesinde eylem düğmeleri KAPAT'ın üstüne biniyordu) */
@media (max-height: 520px) {
  #settings .card { height: calc(100% - 10px); padding-top: 4px; padding-bottom: 4px; }
  #settings .card h2 { margin: 0 0 2px; }
  #settings-list { margin: 4px 0; }
  #settings-list .setting { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
  #settings-list .setting button { min-height: 36px; }
  #settings-list .setting-actions button { min-height: 38px; }
  #settings #settings-close { min-height: 40px; }
  .card .settings-tabs button { min-height: 38px; }
  /* Bölüm arası Kahraman sekmesi: 4 kahraman 2×2 (dikey sütun karta sığmıyordu) */
  #ch-heroes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
  #ch-heroes button { min-height: 40px; padding: 4px 8px; }
}
@media (max-height: 660px) { #settings-list .setting { min-height: 46px; } }

/* ===== 07.10 meta pencereler: Seferler, Görevler, Kale, Yetenekler, hikâye (src/ui/metaui.js) ===== */
#expedition, #quests, #castle { position: fixed; inset: 0; z-index: 7; background: #061019f7; display: flex; justify-content: center; }
#expedition[hidden], #quests[hidden], #castle[hidden], #story[hidden] { display: none !important; }
/* Lobide alt menü pencerelerin üstünde kalır (mobil oyun düzeni: sekmeler arası tek dokunuş); pencere içeriği menünün üstünde biter */
body.home #home-nav { z-index: 8; }
body.home #gear .panel-card, body.home #shop .panel-card, body.home #expedition .panel-card, body.home #quests .panel-card, body.home #castle .panel-card {
  padding-bottom: calc(88px + var(--safe-b)); }
@media (max-height: 520px) {
  body.home #gear .panel-card, body.home #shop .panel-card, body.home #expedition .panel-card, body.home #quests .panel-card, body.home #castle .panel-card {
    padding-bottom: calc(62px + var(--safe-b)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
body.home #home-nav button[data-nav="expedition"]::before { background-image: url('../../assets/ui/ikon_sefer.webp'); }
body.home #home-nav button[data-nav="quests"]::before { background-image: url('../../assets/ui/ikon_gorev.webp'); }
#home-nav button.badge > span::after { content: ""; position: absolute; top: 4px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: #e0563f;
  box-shadow: 0 0 0 2px #0b151c, 0 0 8px #e0563f; z-index: 2; }
#toast.quest { color: #9fe8b0; }
.st-row { display: inline-flex; gap: 1px; align-items: center; }
.st-row img.st, .st-row i.st { width: 16px; height: 16px; font-style: normal; font-size: 13px; color: #6a5a3a; line-height: 16px; }
.st-row i.st.on { color: #ffcc55; }

/* --- Seferler --- */
.exp-card, .quest-card, .castle-card { display: flex; flex-direction: column; overflow: hidden; }
#exp-body, #quests-body, #castle-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.exp-top { display: flex; align-items: center; gap: 8px; }
.exp-act { flex: 1; text-align: center; min-width: 0; }
.exp-act small { display: block; font-size: 10px; letter-spacing: 3px; color: #ccb782; }
.exp-act strong { display: block; font: 400 19px var(--font-display); letter-spacing: 2px; color: #f2e8d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-total { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; background: #0b151cdd; border: 1px solid #c5a36377; font-size: 13px; color: #ffe1a3; white-space: nowrap; }
.exp-total .st-row img { width: 18px; height: 18px; }
.exp-map { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 12px; overflow: hidden; border: 2px solid #c5a36377; box-shadow: inset 0 0 40px #000c;
  background: linear-gradient(#061019aa, #061019d9), var(--art, none) center / cover no-repeat, #0b151c; }
.exp-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.exp-path polyline { fill: none; stroke: #e8d3a0aa; stroke-width: 2.4; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.exp-node { position: absolute; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; padding: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 3px solid #c5a363; background: radial-gradient(circle at 50% 35%, #34444e, #0b151c 75%); color: #f2e8d0;
  box-shadow: 0 0 0 2px #120c06, 0 4px 12px #000c; }
.exp-node b { font: 400 22px/1 var(--font-display); }
.exp-node .st-row { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); padding: 1px 4px; border-radius: 8px; background: #061019cc; }
.exp-node .st-row img, .exp-node .st-row i { width: 15px; height: 15px; }
.exp-node small { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; letter-spacing: 1px; color: #ffe1a3;
  padding: 1px 6px; border-radius: 8px; background: #061019cc; }
.exp-node .exp-marks { position: absolute; top: -8px; right: -10px; display: flex; gap: 1px; }
.exp-node .exp-marks img, .exp-node .exp-marks i { width: 20px; height: 20px; font-size: 11px; font-style: normal; }
.exp-node.done { border-color: #ffd27a; }
.exp-node.current { border-color: #ffe1a3; box-shadow: 0 0 0 2px #120c06, 0 0 18px #f3c66eaa; background: radial-gradient(circle at 50% 35%, #5a4a2a, #1b140b 75%); }
.exp-node.locked { filter: grayscale(1) brightness(.6); border-color: #6a7e83; }
.exp-node.boss { border-color: #e0563f; }
.exp-node.boss.done, .exp-node.boss.current { border-color: #ff8a5c; }
.exp-hint { margin: 0; font-size: 12px; color: #8fa0a4; text-align: center; line-height: 1.4; }
.exp-brief { width: min(520px, 94vw); }
.exp-brief p { margin: 4px 0; }
.exp-diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
.exp-diff { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; padding: 6px 4px; border-radius: 8px; border: 2px solid #6a7e8377;
  background: #0e1a22; color: #e8dcc0; font-size: 13px; }
.exp-diff img { width: 40px; height: 40px; object-fit: contain; }
.exp-diff.on { border-color: #ffe1a3; background: #2a2416; box-shadow: 0 0 12px #f3c66e55; }
.exp-diff.d-hard.on { border-color: #ff8a5c; }
.exp-diff.d-nightmare.on { border-color: #c58cff; }
.exp-diff:disabled { opacity: .45; filter: grayscale(.8); }
.exp-rule { font-size: 12px; color: #ccb782; }
.exp-reward { font-size: 12.5px; color: #c9e8d2; line-height: 1.4; }
.exp-need { font-size: 12px; color: #ff9a7a; }
@media (max-height: 520px) {
  .exp-map { min-height: 150px; }
  .exp-node { width: 54px; height: 54px; }
  .exp-node b { font-size: 18px; }
  .exp-hint { display: none; }
  .exp-diff { min-height: 64px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
  .exp-diff img { width: 28px; height: 28px; }
}

/* --- Görevler --- */
#quests-body { gap: 7px; }
.q-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #c5a36355; background: linear-gradient(90deg, #13212acc, #0b151ccc); }
.q-card .q-ico { width: 52px; height: 52px; object-fit: contain; }
.q-card .fb.q-ico { font-style: normal; font-size: 28px; display: grid; place-items: center; color: #f3c66e; }
.q-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.q-mid strong { font-size: 14px; color: #f2e8d0; line-height: 1.25; }
.q-mid small { font-size: 12px; color: #a9b8bb; }
.q-bar { position: relative; height: 16px; border-radius: 8px; background: #050a0e; border: 1px solid #6f5a33; overflow: hidden; }
.q-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #a8803f, #ffd27a); }
.q-bar span { position: relative; display: block; text-align: center; font: 700 10.5px/14px "Segoe UI", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.q-rw { display: flex; gap: 6px; flex-wrap: wrap; }
.q-rw .res { transform: scale(.86); transform-origin: left center; }
.q-claim { min-width: 72px; min-height: 44px; padding: 4px 10px; border-radius: 6px; border: 1px solid #cfb076; background: linear-gradient(100deg, #b39355, #dec793);
  color: #1e2524; font: 800 12px "Segoe UI", sans-serif; letter-spacing: 1px; }
.q-claim:disabled { background: #14222b; color: #6f7f83; border-color: #3a4a52; }
.q-card.ready { border-color: #ffd27a; box-shadow: 0 0 14px #f3c66e44; }
.q-card.claimed { opacity: .6; }
.q-bonus { border-style: dashed; }
.q-daily { background: linear-gradient(90deg, #1d1a2bcc, #0b151ccc); }
.q-clock { margin: 2px 0 0; text-align: center; font-size: 12px; }
@media (max-height: 520px) {
  .q-card { padding: 4px 8px; gap: 8px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .q-card .q-ico { width: 40px; height: 40px; }
  .q-mid strong { font-size: 13px; }
  .q-rw { display: none; }
  #quests-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
  .q-clock { grid-column: 1 / -1; }
}

/* --- Kale --- */
#castle { background: linear-gradient(#061019e6, #061019f5), var(--art, none) center / cover no-repeat, #061019; }
.castle-card > p.muted { margin: 0 0 4px; font-size: 12px; line-height: 1.4; }
.castle-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.castle-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; align-content: start; }
.bld-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #c5a36366; background: linear-gradient(90deg, #13212aee, #0b151cee); }
.bld-card .bld-ico { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 6px #000a); }
.bld-card.empty .bld-ico { filter: grayscale(.7) brightness(.75); }
.bld-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bld-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bld-head strong { font: 400 16px var(--font-display); color: #f2e8d0; letter-spacing: 1px; }
.bld-head em { font-style: normal; font-size: 11px; color: #ffe1a3; white-space: nowrap; }
.bld-now { font-size: 12px; color: #c9e8d2; line-height: 1.3; }
.bld-next { font-size: 11.5px; color: #8fa0a4; line-height: 1.3; }
.bld-up { margin-top: 4px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 2px 8px; border-radius: 6px;
  border: 1px solid #cfb076; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524; font: 800 12px "Segoe UI", sans-serif; letter-spacing: 1px; }
.bld-up:disabled { background: #14222b; color: #8f9a9d; border-color: #3a4a52; }
.bld-cost { display: inline-flex; gap: 4px; }
.bld-cost .res { padding: 0 6px 0 2px; min-height: 0; transform: scale(.88); }
.bld-card.max .bld-up { background: #2a2416; color: #ffe1a3; border-color: #c5a36399; }
@media (max-height: 520px) {
  .castle-card > p.muted { display: none; }
  .castle-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .bld-card { grid-template-columns: 54px minmax(0, 1fr); padding: 4px 8px; }
  .bld-card .bld-ico { width: 54px; height: 54px; }
  .bld-next { display: none; }
}

/* --- Yetenekler (ekipman sekmesi) --- */
.gear-tabs { display: flex; gap: 6px; flex: none; grid-column: 1 / -1; }
.gear-tabs button { flex: 1 1 0; min-height: 40px; border-radius: 6px; border: 1px solid #6a7e8377; background: #14222bcc; color: #c9d2d4; font: 700 12px "Segoe UI", sans-serif; letter-spacing: 1.5px; }
.gear-tabs button.on { border-color: #ffd27a; color: #ffe1a3; background: #2a2416; }
.gear-card.skills-mode { display: flex !important; flex-direction: column; }
.gear-card.skills-mode .gear-left, .gear-card.skills-mode .gear-right { display: none !important; }
#gear-skills { grid-column: 1 / -1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#gear-skills[hidden] { display: none !important; }
.sk-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; flex: none; }
.sk-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid #c5a36377; background: #13212acc; min-height: 56px; }
.sk-slot.extra { border-color: #6fb8ff; }
.sk-slot.empty { justify-content: center; text-align: center; font-size: 12px; color: #8fa0a4; border-style: dashed; }
.sk-slot .sk-ico { width: 42px; height: 42px; border-radius: 50%; }
.sk-slot strong { display: block; font-size: 13px; color: #f2e8d0; }
.sk-slot small { display: block; font-size: 11px; color: #a9b8bb; }
.sk-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sk-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; align-content: start; }
.sk-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid #ffffff1a; background: #0e1a22e6; }
.sk-card .sk-ico { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px #c5a36388; }
.sk-card.unlearned .sk-ico { filter: grayscale(1) brightness(.6); }
.sk-card.equipped { border-color: #6fb8ff; box-shadow: 0 0 10px #6fb8ff44; }
.sk-card.own { border-color: #c5a36366; }
.sk-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-mid strong { font-size: 13.5px; color: #f2e8d0; }
.sk-rank { font-size: 11px; color: #ffe1a3; }
.sk-scrolls { font-size: 11px; color: #9cc8ff; }
.sk-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.sk-acts button { min-height: 36px; padding: 2px 8px; border-radius: 6px; border: 1px solid #cfb076; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524;
  font: 800 11px "Segoe UI", sans-serif; letter-spacing: .5px; }
.sk-acts button.sk-eq { background: #13293a; color: #cfe6ff; border-color: #6fb8ff; }
.sk-acts button:disabled { background: #14222b; color: #6f7f83; border-color: #3a4a52; }
.sk-max { font-size: 11px; color: #ffe1a3; letter-spacing: 1px; }
.sk-hint { margin: 0; font-size: 11.5px; line-height: 1.35; flex: none; }
@media (max-height: 520px) { .sk-hint { display: none; } .sk-slots { grid-template-columns: repeat(3, 1fr); } .sk-slot { min-height: 44px; padding: 3px 6px; } }

/* Sandık açılışında parşömen kartı: parşömen üstünde yeteneğin simgesi */
.co-card.scroll .sc-pic { position: relative; width: 76px; height: 76px; display: block; }
.co-card.scroll .sc-pic .ci { width: 100%; height: 100%; }
.co-card.scroll .sc-pic .sc-ab { position: absolute; width: 44%; height: 44%; left: 28%; top: 26%; border-radius: 50%; box-shadow: 0 0 0 2px #0b151c, 0 0 10px #6fb8ff; }
#chest-open.compact .co-card.scroll .sc-pic { width: 46px; height: 46px; }

/* --- Hikâye kartı --- */
#story { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #0b151cf2, #030709fa); opacity: 0; transition: opacity .35s; }
#story.show { opacity: 1; }
.story-card { width: min(560px, 94vw); max-height: calc(100% - 8px); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  border-radius: 12px; border: 2px solid #c5a363aa; background: #0b151c; box-shadow: 0 0 0 2px #120c06, 0 10px 40px #000; padding-bottom: 16px; }
.story-art { align-self: stretch; height: min(30vh, 240px); flex: none; background: center / cover no-repeat #13212a; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.story-card .eyebrow { margin-top: 8px; font-size: 11px; letter-spacing: 4px; color: #ccb782; }
.story-card h2 { margin: 4px 16px 6px; font: 400 24px var(--font-display); letter-spacing: 3px; color: #ffe1a3; }
.story-card p { margin: 0 20px 14px; font-size: 15px; line-height: 1.55; color: #e8dcc0; }
.story-card button.primary { min-width: 200px; min-height: 48px; }
@media (max-height: 520px) {
  #story { padding: 8px; }
  .story-card { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; width: min(760px, 96vw); padding: 0 0 10px; text-align: left; align-items: start; }
  .story-art { grid-row: 1 / -1; height: 100%; min-height: 220px; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
  .story-card .eyebrow { margin: 12px 12px 0; }
  .story-card h2 { font-size: 20px; margin: 2px 12px 4px; }
  .story-card p { font-size: 13.5px; margin: 0 12px 8px; }
  .story-card button.primary { justify-self: start; margin-left: 12px; }
}
/* 07.10 ince ayar: birincil düğmeler (hikâye, sefer brifi) altın; sefer haritası görseli görünür; yıldız toplamı haritanın köşesinde */
.story-card button.primary, .pop-actions button.primary { border: 1px solid #cfb076; border-image: none; background: linear-gradient(100deg, #b39355, #dec793); color: #1e2524;
  font: 800 13px "Segoe UI", sans-serif; letter-spacing: 2px; }
.exp-map { background: linear-gradient(#06101955, #061019b3), var(--art, none) center / cover no-repeat, #0b151c; }
.exp-map .exp-total { position: absolute; top: 8px; right: 8px; z-index: 1; }
#overlay[data-state="expEnd"] #ov-title { font-size: clamp(30px, 10vw, 60px); line-height: 1.05; }
.sk-heroes { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.sk-heroes button { min-height: 38px; padding: 4px 12px; border: 1px solid #6a7e8377; border-radius: 6px; background: #17252dea; color: #e8dcc0; font-size: 12.5px; }
.sk-heroes button.on { border-color: var(--gold); background: #3a2f1aee; color: #ffe1a3; }
/* Dikey telefon lobisi: logo para kutularının altına girmesin (ikinci sıraya iner); Telefona Yükle sağda küçük */
@media (max-width: 700px) and (min-height: 521px) {
  body.home #ov-logo { top: calc(54px + var(--safe-t)); height: 50px; }
  body.home #overlay .card .rows #ov-install { top: calc(58px + var(--safe-t)); left: auto; right: max(10px, env(safe-area-inset-right)); min-height: 34px; padding: 0 10px; font-size: 9.5px; }
}

/* ===== 07.10 düzen düzeltmeleri 2: kalıcı alt menü + küçük ekranlar ===== */
/* Menü pencereleri (ayarlar, başarılar, kayıtlar) lobinin alt menüsünün de üstünde (KAPAT düğmeleri menünün altında kalıyordu) */
#settings, #records, #slots { z-index: 9; }
/* Dar ekranda pencere başlığı tek satır: KAPAT yerine ✕ (başlık iki satıra bölünüp içeriği aşağı itiyordu) */
@media (max-width: 420px) {
  .panel-head { flex-wrap: nowrap; }
  .panel-head h2 { font-size: 20px; letter-spacing: 1.5px; white-space: nowrap; }
  .panel-head .res-row { gap: 4px; }
  .panel-head > button { flex: none; width: 46px; min-width: 46px; padding: 0; font-size: 0 !important; letter-spacing: 0; }
  .panel-head > button::after { content: "✕"; font-size: 17px; color: #e8dcc0; }
}
/* Ekipman ve görevler kısa telefonda sıkı (çanta ve son görev kartı alt menünün altına giriyordu) */
@media (max-width: 700px) and (min-height: 521px) and (max-height: 760px) {
  #gear-heroes { flex-wrap: nowrap; gap: 4px; }
  #gear-heroes button { min-height: 34px; padding: 2px 6px; font-size: 11px; flex: 1 1 0; min-width: 0; }
  .gear-tabs button { min-height: 34px; }
  #gear-slots .gslot { width: 50px; height: 50px; }
  #gear-hint { display: none; }
  .bag-head button { min-height: 34px; padding: 2px 8px; font-size: 10px; }
  .q-card { padding: 5px 8px; gap: 8px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .q-card .q-ico { width: 40px; height: 40px; }
  .q-mid { gap: 2px; }
  .q-mid strong { font-size: 13px; }
  .q-claim { min-height: 40px; min-width: 60px; }
  .bld-card { grid-template-columns: 58px minmax(0, 1fr); padding: 6px 8px; }
  .bld-card .bld-ico { width: 58px; height: 58px; }
  .exp-map { min-height: 200px; }
  .sk-slot { min-height: 46px; padding: 4px 6px; }
  .sk-card { padding: 4px 6px; }
}
/* Öğretici kartı dikeyde sol yükseltme sütununun sağında (sütunun üstüne biniyordu) */
@media (max-width: 700px) and (min-height: 521px) {
  #coach { left: calc(max(10px, env(safe-area-inset-left)) + 66px) !important; right: max(8px, env(safe-area-inset-right)) !important; width: auto !important; transform: none !important; }
}
/* Yatay telefon: öğretici kartı kapı çubuğunun altında */
@media (max-height: 520px) {
  #coach { top: calc(96px + var(--safe-t)) !important; }
  body:has(#bossbar:not([hidden])) #coach { top: calc(132px + var(--safe-t)) !important; }
}
/* Yatay ekipman: sekmeler başlığın altında ayrı sıra (yuvaların üstüne biniyordu) */
@media (max-height: 600px) and (min-width: 600px) {
  .gear-card { grid-template-rows: auto auto minmax(0, 1fr); }
  .gear-card .gear-tabs { grid-row: 2; }
  .gear-card .gear-tabs button { min-height: 34px; }
  .gear-left, .gear-right, #gear-skills { grid-row: 3; }
  .sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-card { grid-template-columns: 38px minmax(0, 1fr); padding: 3px 6px; gap: 6px; }
  .sk-card .sk-ico { width: 38px; height: 38px; }
  .sk-acts button { min-height: 32px; font-size: 10px; padding: 2px 6px; }
  .sk-heroes button { min-height: 32px; }
}

/* ===== 07.10 düzen düzeltmeleri 3: kısa ekranda ekipman, ayarlar, seferler, yetenekler ===== */
/* Kısa telefon ve yatay: ekipman yuvaları tek sıra (6), güç özeti gizli → çantaya yer kalır */
@media (max-width: 700px) and (min-height: 521px) and (max-height: 760px), (max-height: 600px) and (min-width: 600px) {
  .gear-main { display: block !important; }
  #gear-slots { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  #gear-slots .gslot, #gear-slots .gslot:nth-child(n) { width: auto !important; height: auto !important; aspect-ratio: 1; grid-column: auto !important; grid-row: auto !important; }
  #gear-bonus { display: none !important; }
}
/* Ayarlar Genel sekmesi: eylem düğmeleri iki sütun, sıkı */
#settings-list .setting-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#settings-list .setting-actions button { margin: 0; }
@media (max-height: 700px) { #settings-list .setting-actions button { min-height: 40px; padding: 4px 6px; } }
@media (max-height: 660px) { #settings-list .setting { min-height: 44px; } }
/* Seferler başlığı dar ekranda küçük */
@media (max-width: 420px) { .exp-act strong { font-size: 15px; letter-spacing: 1px; } .exp-top .pager-btn { flex: none; } }
/* Yatay yetenekler: yuva satırı gizli (takılı yetenek kartında mavi çerçeveyle görünür) */
@media (max-height: 600px) and (min-width: 600px) { .sk-slots { display: none !important; } }
/* Ayarlar ve yatay çanta: son birkaç piksel taşmalar */
@media (max-height: 700px) { #settings .card { padding-top: 6px; } #settings .card h2 { font-size: 22px; } .card .settings-tabs button { min-height: 38px; } }
@media (max-height: 520px) { #settings-list .setting-actions { grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; } #settings-list .setting-actions button { min-height: 36px; font-size: 10px; } }
@media (max-height: 600px) and (min-width: 600px) { #gear-bag { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; } .bag-head { flex-wrap: nowrap; gap: 4px; } .bag-head button { padding: 2px 6px; font-size: 9.5px; min-height: 32px; } }
/* Lobi pencereleri tam opak (alttaki lobi yazıları sızmasın) */
#gear, #shop, #expedition, #quests { background: #061019; }
/* Dalga ilerleme çizgisi şeridin altında ortalı (sola yaslı kalıyordu); dikeyde kahraman adı sığsın */
.wave > .track { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) and (min-height: 521px) { footer .health, footer .health.has-portrait { width: 216px; } footer .health small span { letter-spacing: .2px; font-size: 10.5px; } }
/* Bölüm arası harita kartı: sekmeli düzende (telefon) hep, geniş ekranda (sekmesiz) yalnız yeni haritada — düzen değişmesin */
@media (min-width: 701px) and (min-height: 601px) { #ch-map:not(.new) { display: none !important; } }
/* Yatay Kale: iki sıra kart sığsın (bir sıra eksik ölçülüyordu, sayfa başına 2 kart kalıyordu) */
@media (max-height: 520px) { .bld-card { padding: 3px 8px; grid-template-columns: 48px minmax(0, 1fr); } .bld-card .bld-ico { width: 48px; height: 48px; } .bld-up { min-height: 34px; margin-top: 2px; } .bld-head strong { font-size: 14px; } .castle-grid { gap: 6px; } }

/* ===== 07.10 son denetim (15 boyut) düzeltmeleri ===== */
/* Yatay telefon kule menüsü: alttaki can düğmesi kesiliyordu → can sol sütunda zaten var, menüde gizli; boşluklar sıkı */
@media (max-height: 520px) {
  #towermenu #tm-heal { display: none !important; }
  #towermenu, body:has(#abilities button:nth-child(2)) #towermenu { padding: 6px; gap: 4px; }
  #towermenu .tm-head img { width: 26px; height: 26px; }
  #towermenu #tm-grid button { min-height: 44px; }
  /* Bölüm arası "Sonraki" sekmesinde harita kartı: tarif iki satır, çevre unsurları gizli (kesiliyordu) */
  #ch-map-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #ch-map-hz { display: none; }
}
/* 1024×768 gibi orta genişlik + kısa boy lobi: görünüm çipleri sandık sırasına ve SAVAŞ düğmesine değiyordu (çipler bölüm arası Kahraman sekmesinde) */
@media (min-width: 701px) and (max-width: 1199px) and (min-height: 521px) and (max-height: 820px) {
  body.home #ov-hero-panel .hp-looks { display: none !important; }
}
/* Geniş ve kısa ekranda (1280×720) bölüm arası: "önceki kurulumu geri kur" düğmesi alt düğmelerin altına kayıyordu */
@media (min-width: 701px) and (min-height: 601px) and (max-height: 780px) {
  #ch-restore { min-height: 34px; padding: 4px 12px; margin-top: 4px; margin-bottom: 0; }
  #ch-draft { margin: 2px 0; }
  #ch-ahead { margin: 4px 0 2px; }
}
@media (min-width: 701px) and (min-height: 601px) and (max-height: 780px) {
  #ch-tree-hint { display: none !important; }
  #chapter .ch-card { padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  #chapter .ch-card h2 { margin: 2px 0; }
  #ch-summary { margin: 2px 0 4px; }
  #chapter .card-pick { padding-top: 6px; padding-bottom: 6px; }
  #ch-shop .perk { min-height: 0; padding-top: 3px; padding-bottom: 3px; }
  #ch-tree .perk, #ch-tree button { padding-top: 4px; padding-bottom: 4px; }
}
/* Geniş ve kısa ekran (1024×768, 1280×720): "önceki kurulumu geri kur" sağ sütunda ağacın yanında (alt düğmelerin altına kayıyordu); "sıradaki" satırı gizli */
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 820px) {
  #ch-ahead { display: none !important; }
  #ch-heroes-wrap { grid-row: span 2; }
  #ch-restore { grid-column: 2; grid-row: 3; align-self: end; justify-self: stretch; margin: 0 0 4px; font-size: 12px; letter-spacing: .5px; }
}
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 820px) {
  #ch-tree .buy-row > button > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  #ch-tree .buy-row > button { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  #ch-tree .buy-row > button em { display: none; }
  #ch-hero-panel .hp-looks { display: none !important; }
  #ch-hero-panel .hp-stage { height: 120px; }
}
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 820px) { #ch-tree .buy-row > button { overflow: hidden; } #ch-tree .buy-row > button > span { max-width: 100%; min-width: 0; } }

/* ===== 08.10: iPhone ana ekran uygulamasında alttaki boş şerit ===== Görünüm durum çubuğu kadar kısa kalıyordu; sayfa
   ekranın dibine uzatılır (--fill-b, src/render/screen.js) ve gövdeye transform verilerek tüm sabit öğeler (alt menü, kol,
   yetenekler, pencereler, kanvas) gövdenin altına — ekranın dibine — bağlanır. Yalnız fark ölçülünce (html.fill-b). */
html.fill-b { height: calc(100% + var(--fill-b, 0px)); }
html.fill-b body { transform: translateZ(0); }

/* 08.10 silah sınıf kısıtı: kuşanılamayan silah soluk, köşede sahibinin baş harfi; açılır kartta sahip notu */
.bag-item.other { opacity: 0.45; filter: saturate(0.5); }
.bag-item .cls { position: absolute; left: 3px; bottom: 2px; font: 800 10px/1 system-ui, sans-serif; color: #e9dfc5; background: #0009; border-radius: 4px; padding: 2px 3px; }
.item-pop .cls-note { margin: 4px 0 0; font-size: 12px; color: #b9d7a8; }
.item-pop .cls-note.bad { color: #ff9a7a; }