/* =====================================================================
   Balon Game — arayüz tasarım sistemi (v0.9)
   style.css yerleşimi ve temel yapıyı kurar; bu dosya TÜM menü görünümünü belirler.
   Kurallar (tests/browser/layout.js denetler):
   · 3 yüzey: zemin (mavi-mor) → panel (--s1, kalın dış hat) → iç kutu (--s2) → öğe (--s3)
   · 4 düğme türü: ANA (sarı, koyu yazı) · İKİNCİL (mavi, beyaz yazı) · SEÇİLİ (sarı) · KAPALI (gri-mavi, beyaz yazı, saydamlık yok)
   · Tek ilerleme çubuğu, tek rozet stili, tek giriş alanı / seçim kutusu stili
   · Küçük yazıda dış hat yok (bulanıklaşır); dış hat yalnızca ≥ 18 px başlıklarda
   ===================================================================== */
:root {
  --ink: #0a0c2e;
  --bg-a: #2f63ff; --bg-b: #4a2bd6; --bg-c: #160f6b;
  --s1-a: #3456f0; --s1-b: #2537c2;           /* panel */
  --s2: #1b2591;                               /* iç kutu */
  --s3: #2c3cc4;                               /* iç kutudaki öğe */
  --s3-hi: #3a4ddb;
  --text: #ffffff; --text-2: #d3dbff; --text-3: #a9b8ff;
  --yel-a: #ffe05a; --yel-b: #ffb703; --on-yel: #241400;
  --blue-a: #4f8bff; --blue-b: #2f63f0;
  --off: #47519b; --on-off: #e3e8ff;
  --ok: #34d17c; --on-ok: #052a14;
  --info: #4aa8ff; --danger: #ff5470; --violet: #a78bff; --pink: #ff6fa5;
  --prog: linear-gradient(90deg, #ffd23a, #ff9a1a);
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --bw: 3px; --bw-sm: 2px;
  --sh: 0 6px 0 var(--ink); --sh-sm: 0 4px 0 var(--ink);
  --hl: inset 0 3px 0 rgba(255, 255, 255, 0.16);
  --font: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* v0.74 (tasarım incelemesi): menüdeki eski monospace yazılar ("EPİK", sayaçlar, kutu durakları) yeni temadan kopuktu → yuvarlak
     arayüz yazı tipi; sayıların hizası için eşit genişlikli rakam (tabular-nums) */
  --mono: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* eski değişken adları da aynı palete bağlanır (style.css'teki kurallar otomatik uyar) */
  --txt: var(--text); --mut: var(--text-2); --gold: var(--yel-a); --cyan: var(--yel-a); --green: var(--ok); --red: var(--danger);
  --panel: var(--s2); --panel-2: var(--s2); --line: var(--ink); --line-2: var(--ink); --grad: linear-gradient(180deg, var(--yel-a), var(--yel-b));
}

/* ---------- zemin ---------- */
#menu {
  font-family: var(--font); color: var(--text);
  /* sakin varsayılan zemin: derin lacivert → mor geçiş, çok yumuşak iki ışık; çizgili desen yok (göz yormasın) */
  background:
    radial-gradient(1100px 700px at 80% -15%, rgba(108, 77, 255, 0.35) 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(26, 168, 255, 0.22) 0%, transparent 55%),
    linear-gradient(170deg, #263a9a 0%, #2a2785 52%, #171352 100%);
}
/* arka planda yavaşça yükselen, çok soluk balonlar: sahneye hayat verir, içerikle yarışmaz */
.bg-float { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-float i {
  position: absolute; left: var(--x); bottom: -90px; width: var(--s); height: calc(var(--s) * 1.18); border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 28%), var(--c);
  opacity: 0.13; animation: bg-rise var(--d) linear var(--w) infinite; will-change: transform;
}
.bg-float i::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--s) * 0.9); background: rgba(255, 255, 255, 0.5); }
@keyframes bg-rise {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  25% { transform: translate3d(14px, -30vh, 0) rotate(3deg); }
  50% { transform: translate3d(-10px, -60vh, 0) rotate(-3deg); }
  75% { transform: translate3d(12px, -90vh, 0) rotate(4deg); }
  100% { transform: translate3d(0, calc(-100vh - 200px), 0) rotate(-2deg); }
}
body.calm .bg-float i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bg-float i { animation: none; transform: translateY(-45vh); } }
#menu > .app { position: relative; z-index: 1; }
#menu::before { display: none; }

/* ---------- yazı ---------- */
.wordmark { font: 900 24px/1 var(--font); letter-spacing: 2px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.wordmark b { color: var(--yel-a); background: none; -webkit-text-fill-color: var(--yel-a); margin-left: 0; }   /* v0.60: marka BalonGame (bitişik, iki renk) */
.logo { border: var(--bw) solid var(--ink); border-radius: 13px; box-shadow: var(--sh-sm); filter: none; }
.title-stroke, .hero-name, .hi-head b, .mode-card b, .stat b, .btn-play {
  -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(10, 12, 46, 0.85);
}
.pane h3, .q-head h4 { color: #fff; font: 900 15px var(--font); letter-spacing: .3px; text-shadow: 0 2px 0 rgba(10, 12, 46, 0.7); }
.q-head small, .season-how, .q-next, .m-body small, .stier small, .season-bar small, .q-lvl-txt small, .cal-day,
.shop-head span, .shop-head small, .shop-head .earn, .shop-note, .lb-me, #lb-list .l, #lb-list .empty, .keys, .hi-soon, .stat span,
.mode-card small, .mode-card em, .m-timer, .method-row em, .deal-txt small, .deal-txt s, .q-locked, .legal-links, .kbd-list {
  color: var(--text-2);
}
.foot { color: var(--text-2); font-size: 12px; }
a, .foot a, .legal-links a, .check a, .btn-link { color: var(--yel-a); font-weight: 800; text-decoration: none; }
a:hover, .btn-link:hover { text-decoration: underline; }

/* ---------- yüzeyler ---------- */
.card, .side, .stat, .mode-card {
  background: linear-gradient(180deg, var(--s1-a), var(--s1-b)); color: var(--text);
  border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh), var(--hl);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.stage-card { border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink), 0 24px 50px rgba(5, 5, 40, 0.45); }
/* iç kutular */
.q-card, .q-level, .season, .shop-head .bal, .shop-head .daily, .hero-info, .gift, .chest, .deal, .method-row, #lb-list li, .hi-super {
  background: var(--s2); color: var(--text);
  border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.q-card, .q-level { padding: 14px; margin-bottom: 12px; }
.q-head { align-items: center; margin-bottom: 12px; }
.q-head h4 { margin: 0; }
/* iç kutudaki öğeler */
.cal-day, .stier, .mission, .shop-card, .opt, .hero-card.locked {
  background: var(--s3); color: var(--text); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--ink);
}
.mission { border-radius: var(--r-md); padding: 12px; gap: 12px; }
.shop-card { border-radius: var(--r-md); padding: 10px; gap: 8px; }
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.shop-card.r-legendary { box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--yel-a) inset; }
.shop-card.on-deal { box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--danger) inset; }

/* ---------- düğmeler ---------- */
/* ANA: sarı, koyu yazı */
.btn-play, .btn-primary, .btn-daily, .btn-card.buy, .mission.ready .btn-card, .stier.ready, .deal {
  background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel);
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-sm), inset 0 3px 0 rgba(255, 255, 255, 0.55);
  font-weight: 900; cursor: pointer;
}
.btn-primary, .btn-daily, .btn-card.buy { border-radius: var(--r-md); min-height: 44px; padding: 10px 16px; font-size: 15px; animation: none; }
.btn-play {
  border-radius: var(--r-lg); padding: 18px; font: 900 30px var(--font); letter-spacing: 4px; color: var(--on-yel);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); box-shadow: 0 8px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -6px 0 rgba(214, 120, 0, 0.35);
  filter: none; opacity: 1;
}
.btn-play svg { width: 28px; height: 28px; color: var(--on-yel); filter: none; }
.btn-play:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-daily:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.btn-play:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, 0.5); }
.btn-primary:active, .btn-daily:active, .btn-card:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
/* İKİNCİL: mavi, beyaz yazı */
.btn-card, .icon-btn, .chip-btn, .acct-chip, .coin-chip, .modal-x, .btn-method, .lb-mini, .ghost {
  background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); color: #fff;
  border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-sm), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  font-weight: 800;
}
.icon-btn, .chip-btn, .acct-chip, .coin-chip { border-width: var(--bw); height: 44px; }
.icon-btn { width: 44px; }
.coin-chip b { color: var(--yel-a); font-weight: 900; }
.acct-chip .avatar { border: 2px solid var(--ink); }
.btn-card { min-height: 40px; font-size: 14px; }
.modal-x { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; }
.btn-method { min-height: 50px; font-size: 15px; }
.btn-method.google { background: #fff; color: #1f1f1f; }
.btn-method.phantom { background: #ab9ff2; color: #1c1440; }
.btn-method.apple { background: #000; color: #fff; }   /* Apple tasarım kuralı: siyah, beyaz logo */
.btn-method .badge { background: var(--ink); color: #fff; font: 900 11px var(--font); padding: 3px 8px; border-radius: 8px; }
/* BAŞARI / KUŞANILDI */
.btn-card.on, .m-done { background: var(--ok); color: var(--on-ok); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); font-weight: 900; }
.m-done { padding: 8px 12px; text-align: center; }
/* KAPALI: saydamlık yok, okunur */
.btn-card:disabled, .btn-card.buy.poor, .btn-primary:disabled, .btn-daily.done, .btn-daily:disabled, .btn-play:disabled, .stier.locked, .mission:not(.ready) .btn-card:disabled {
  background: var(--off); color: var(--on-off); box-shadow: 0 3px 0 var(--ink); opacity: 1; filter: none; animation: none; cursor: not-allowed; text-shadow: none;
}
.mission.claimed { opacity: 1; }
.mission.claimed .m-body b { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.btn-card.buy.confirm { background: linear-gradient(180deg, #ffb35a, #ff7a1a); color: var(--on-yel); animation: pulse .9s ease-in-out infinite; }

/* ---------- sekmeler / seçim düğmeleri (segment) ---------- */
.seg { background: var(--s2); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); padding: 5px; gap: 4px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25); }
.seg button { color: var(--text-2); font: 800 14px var(--font); border-radius: var(--r-sm); min-height: 38px; background: transparent; -webkit-text-stroke: 0; text-shadow: none; }
.seg button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.seg button.sel, .seg-main button.sel {
  background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel);
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.55); border: var(--bw-sm) solid var(--ink);
}
.seg .dot { box-shadow: 0 0 0 2px var(--ink); }

/* seçenekler (ülke, arena, takım, yay) */
.opt { color: #fff; font-weight: 800; min-height: 40px; }
.opt:hover { background: var(--s3-hi); }
.opt.sel { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #fff inset; border-color: var(--ink); }
.opt.locked { filter: none; }
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* mod kartları */
.mode-card { padding: 12px 14px; gap: 12px; min-height: 92px; align-items: center; color: #fff; font-family: var(--font); }
.mode-card b { font-size: 16px; color: #fff; }
.mode-card.sel { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); }
.mode-card.sel, .mode-card.sel b, .mode-card.sel small, .mode-card.sel em, .mode-card.sel span:not(.m-ic) { color: var(--on-yel); text-shadow: none; }
.mode-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.m-ic { width: 40px; height: 40px; border-radius: 12px; border: var(--bw-sm) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: #fff; font-size: 20px; text-shadow: 0 2px 0 var(--ink); }
.m-story .m-ic { background: linear-gradient(135deg, #6fb1ff, #7b5cff); }

/* istatistikler */
.stat span { font-weight: 800; letter-spacing: .5px; }
.stat b { font: 900 24px var(--font); color: #fff; }
.stat:first-child b { color: var(--yel-a); }
.stage-badge { background: rgba(10, 12, 46, 0.72); border: var(--bw-sm) solid var(--ink); border-radius: 12px; color: #fff; font-weight: 900; cursor: pointer; transition: transform 120ms cubic-bezier(.34, 1.56, .64, 1); }
.stage-badge:active { transform: scale(0.94); }
.stage-badge::after { content: ' ›'; opacity: 0.7; }

/* ---------- ilerleme çubuğu (tek stil) ---------- */
.bar { height: 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.4); border: var(--bw-sm) solid var(--ink); overflow: hidden; }
.bar i { background: var(--prog); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45); border-radius: 99px; }
.q-lvl-num { background: radial-gradient(closest-side, var(--s2) 74%, transparent 76% 100%), conic-gradient(var(--yel-a) calc(var(--p) * 1turn), rgba(0, 0, 0, 0.35) 0); border: var(--bw-sm) solid var(--ink); }
.q-lvl-num b { font: 900 22px var(--font); color: #fff; }
.lvl-badge { background: radial-gradient(closest-side, var(--s2) 70%, transparent 72% 100%), conic-gradient(var(--yel-a) calc(var(--p) * 1turn), rgba(0, 0, 0, 0.3) 0); }
.stier-now { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); border: var(--bw-sm) solid var(--ink); font: 900 15px var(--font); }

/* ---------- rozetler (tek stil) ---------- */
.mission .tier, .shop-card .rar, .hero-rarity, .stier em, .deal .off, .deal-tag {
  font: 900 11px var(--font); letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
  padding: 3px 8px; border-radius: 8px; border: var(--bw-sm) solid var(--ink); -webkit-text-stroke: 0; text-shadow: none;
}
.mission.t-easy .tier { background: var(--ok); } .mission.t-medium .tier { background: var(--info); } .mission.t-hard .tier { background: var(--pink); }
.shop-card .rar { background: var(--rc); }
.stier em { background: var(--yel-a); }
.deal .off, .deal-tag { background: var(--danger); color: #fff; }
.cal-day .tick, .stier .tick { background: var(--ok); color: var(--on-ok); border: 2px solid var(--ink); width: 18px; height: 18px; line-height: 14px; }

/* ---------- görevler: seri takvimi, sezon şeridi ---------- */
.cal { gap: 6px; }
.cal-day { padding: 8px 2px; font-size: 11px; font-weight: 800; }
.cal-day b { color: var(--yel-a); font: 900 12px var(--font); }
.cal-day.done { background: #23408e; }
.cal-day.today { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); }
.cal-day.today b { color: var(--on-yel); }
.cal-day.big { background: linear-gradient(180deg, #7b5cff, #5a3fd6); }
.track { gap: 8px; padding: 8px 4px 12px; }
.stier { width: 84px; height: 100px; font: 800 12px var(--font); }
.stier small { font-weight: 800; }
.stier .tr-moon b { color: var(--yel-a); font: 900 13px var(--font); }
.stier.ready { color: var(--on-yel); animation: none; }
.stier.ready small, .stier.ready .tr-moon b { color: var(--on-yel); }
.stier.claimed { background: #23408e; opacity: 1; }
.stier.final { background: linear-gradient(180deg, #7b5cff, #5a3fd6); }
.stier .lock { font-size: 12px; }
.season-bar { grid-template-columns: auto 1fr auto; gap: 12px; }
.season-bar small { font: 800 12px var(--font); color: #fff; }
.m-body b { font-size: 14px; }
.m-body small { font: 800 12px var(--font); }
.chest { border-style: solid; color: var(--yel-a); font-weight: 800; }
.chest.open { background: #23408e; }

/* ---------- mağaza ---------- */
.shop-head .bal b { font: 900 26px var(--font); color: var(--yel-a); text-shadow: 0 2px 0 var(--ink); }
.shop-card .nm { font: 800 14px var(--font); }
.deal { color: var(--on-yel); }
.deal-txt b, .deal-txt em { color: var(--on-yel); }
.deal-txt span { color: #6b3a00; }

/* ---------- sıralama ---------- */
#lb-list { gap: 6px; }
#lb-list li { padding: 10px 12px; color: #fff; }
#lb-list li.me { background: #23408e; box-shadow: 0 0 0 2px var(--yel-a) inset; }
#lb-list .r { color: var(--text-2); font: 900 14px var(--font); }
#lb-list .n { font-weight: 800; }
#lb-list .s { color: var(--yel-a); font: 900 15px var(--font); }
#lb-list li.top1 .r { color: #ffd23a; } #lb-list li.top2 .r { color: #e3e9ff; } #lb-list li.top3 .r { color: #ffad6b; }
#lb-list .more { width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); }

/* ---------- kahramanlar ---------- */
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; align-items: stretch; }
.hero-card {
  position: relative; display: grid; grid-template-rows: auto auto auto auto; justify-items: center; align-content: start; gap: 2px; padding: 6px;
  cursor: pointer; border: var(--bw) solid var(--ink); border-radius: 18px; color: #fff; font-family: var(--font);
  background: radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--hc) 80%, #fff) 0%, var(--hc) 45%, color-mix(in srgb, var(--hc) 45%, #000) 100%);
  box-shadow: var(--sh-sm), inset 0 3px 0 rgba(255, 255, 255, 0.35); transition: transform .1s;
}
.hero-card:hover { transform: translateY(-2px); }
.hero-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.hero-card.sel { outline: 3px solid #fff; outline-offset: -1px; box-shadow: var(--sh-sm), 0 0 0 6px var(--yel-a); }
.hero-card.locked { background: linear-gradient(180deg, #4a5196, #2c3070); }
.hero-pic { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(10, 12, 46, 0.4)); }
.hero-pic[src=""] { visibility: hidden; }
.hero-card.locked .hero-pic { filter: brightness(0); opacity: 0.5; }
.hero-name { font: 900 13px/1.15 var(--font); text-align: center; min-height: 2.3em; display: grid; place-items: center; }
.hero-rarity { justify-self: start; background: var(--rc, #69db7c); }
.hero-card.r-start { --rc: var(--ok); } .hero-card.r-rare { --rc: var(--info); } .hero-card.r-epic { --rc: var(--violet); } .hero-card.r-legend { --rc: var(--yel-a); } .hero-card.r-mythic { --rc: var(--pink); }
/* mitik kahraman: pembe-altın çift çerçeve (en değerli kahramanlar bir bakışta ayırt edilsin) */
.hero-card.r-mythic:not(.locked) { box-shadow: var(--sh-sm), inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 3px var(--pink), inset 0 0 0 5px var(--yel-a); }
.hero-card.r-mythic.sel { box-shadow: var(--sh-sm), 0 0 0 6px var(--yel-a), inset 0 0 0 3px var(--pink); }
.hero-lock { margin-top: 2px; font: 900 12px var(--font); padding: 3px 8px; border-radius: 10px; background: rgba(10, 12, 46, 0.6); border: var(--bw-sm) solid var(--ink); }
.hero-info { margin-top: 14px; padding: 12px 14px; }
.hi-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hi-head b { font-size: 20px; }
.hi-head span { font-weight: 800; color: var(--text-2); }
.hi-super { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px; background: var(--s3); }
.hi-super i { font-style: normal; font-size: 22px; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); border: var(--bw-sm) solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.hi-super b { display: block; color: var(--yel-a); font-weight: 900; }
.hi-super p { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #fff; }
.hi-soon { margin: 8px 0 0; font-size: 12px; font-weight: 700; }

/* ---------- pencereler, formlar, seçim kutuları ---------- */
.modal-card { background: linear-gradient(180deg, var(--s1-a), var(--s1-b)); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink), 0 30px 80px rgba(0, 0, 0, 0.5); color: #fff; }
.modal h2 { font: 900 22px var(--font); text-shadow: 0 2px 0 var(--ink); }
.modal .lead, .set-row > span, .modal label, .modal small { color: var(--text-2); }
.modal .lead { font-size: 14px; }
.set-row { min-height: 52px; border-top: var(--bw-sm) solid rgba(10, 12, 46, 0.45); }
.set-row > span { color: #fff; font-weight: 800; }
.set-row .seg button, .modal .seg button { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.switch { width: 58px; height: 34px; border-radius: 18px; border: var(--bw) solid var(--ink); background: var(--off); }
.switch::after { width: 22px; height: 22px; top: 3px; left: 3px; background: #dfe5ff; }
.switch.on { background: linear-gradient(180deg, #5ef0a8, var(--ok)); }
.switch.on::after { transform: translateX(24px); background: #fff; }
.set-row input[type=range] { accent-color: var(--yel-b); width: 160px; }
.kbd-list { font-size: 13px; }
.kbd-list kbd { color: #fff; background: var(--s2); border: var(--bw-sm) solid var(--ink); font: 800 12px var(--mono); border-radius: 6px; }
/* giriş alanları ve seçim kutuları (combo box) */
.form input, .form select, .form textarea, .modal input:not([type=checkbox]):not([type=range]), .modal select {
  background: var(--s2); color: #fff; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md);
  min-height: 46px; padding: 10px 14px; font: 700 15px var(--font); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.form input::placeholder, .form textarea::placeholder { color: var(--text-3); }
.form select, .modal select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--yel-a) 50%), linear-gradient(135deg, var(--yel-a) 50%, transparent 50%), linear-gradient(180deg, var(--s3), var(--s3));
  background-position: calc(100% - 22px) 52%, calc(100% - 15px) 52%, 100% 0; background-size: 7px 7px, 7px 7px, 38px 100%; background-repeat: no-repeat;
}
.form select option, .modal select option { background: #141c6e; color: #fff; }
.form select:invalid { color: var(--text-3); }
.form input:focus, .form select:focus, .form textarea:focus, .modal input:focus, .modal select:focus { outline: 3px solid var(--yel-a); outline-offset: 1px; border-color: var(--ink); box-shadow: none; }
.check { color: #fff; font-size: 14px; }
.check input { width: 22px; height: 22px; accent-color: var(--yel-b); }
.form-err { color: #ffd0d8; background: rgba(255, 84, 112, 0.25); border: var(--bw-sm) solid var(--danger); border-radius: var(--r-sm); padding: 8px 10px; font-weight: 800; }
.form-err:empty { display: none; }
.gift { color: var(--yel-a); font-weight: 900; }
.switch-link button, .btn-link { min-height: 40px; padding: 8px 12px; background: none; border: 0; color: var(--yel-a); font-weight: 900; }
.toast { background: var(--s2); border: var(--bw) solid var(--ink); border-radius: var(--r-md); color: var(--yel-a); font: 900 14px var(--font); box-shadow: var(--sh-sm); }
.toast.err { color: #ffd0d8; background: #6b1730; }

/* odak halkası (klavye): her etkileşimli öğede aynı */
#menu :focus-visible, .modal :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- dar ekran / dokunmatik ---------- */
@media (max-width: 900px), (pointer: coarse) {
  .icon-btn, .chip-btn { min-width: 44px; height: 44px; }
  .acct-chip, .coin-chip { height: 44px; min-width: 44px; }
  .seg button { min-height: 44px; }
  .opt { min-height: 44px; }
  .switch { width: 64px; height: 40px; border-radius: 22px; }
  .switch::after { width: 28px; height: 28px; }
  .switch.on::after { transform: translateX(24px); }
  .shop-card button, .btn-card { min-height: 44px; }
  .modal-x { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  .wordmark { font-size: 18px; }
  .heroes { gap: 8px; }
  .hero-name { font-size: 12px; }
}
/* yatay telefon (kısa ekran, ≥ 640 px): iki sütun; OYNA ilk ekranda */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) {
  .dash { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
  .stage { position: sticky; top: 0; gap: 8px; }
  #preview { aspect-ratio: 16 / 6; }
  .stats { display: none; }
  .mode-card { min-height: 60px; padding: 8px 10px; }
  .mode-card .m-ic { width: 34px; height: 34px; font-size: 17px; }
  .mode-card b { font-size: 13px; }
  .btn-play { padding: 10px; font-size: 22px; }
  .side { max-height: calc(100vh - 70px); overflow: auto; }
  .shop-head { grid-template-columns: minmax(0, 1fr); }   /* yan panel dar: bakiye ve fırsat alt alta, fırsat tam genişlik */
  .shop-head .deal { grid-column: 1; }
}
/* dar ve kısa pencere (< 640 px yatay): tek sütun */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 639px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
  #preview { aspect-ratio: 16 / 7; }
}

.scene-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--s2); }
/* v0.9 kontrast düzeltmeleri (layout testi bulguları) */
.m-ic { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.m-story .m-ic { color: #fff; text-shadow: 0 2px 0 var(--ink); }
.hero-name { background: rgba(10, 12, 46, 0.72); border-radius: 10px; padding: 3px 8px; min-height: 0; width: calc(100% - 4px); text-shadow: none; }
.deal-txt small, .deal-txt s, .deal-txt span { color: #4a2a00; }
/* günün fırsatı: önizleme sabit genişlikte (eskiden kartın çoğunu kaplayıp yazıları "Tropi…" diye kırpıyordu), ad iki satıra
   kadar sarar, küçük yazılar okunur boyda — kullanıcı bulgusu (iPhone, 2026-11-01) */
.deal-pv { flex: 0 0 auto; width: 76px; }
.deal-txt { flex: 1 1 auto; }
.deal-txt b { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; font-size: 14px; }
.deal-txt span, .deal-txt small { font-size: 11px; }
.deal-txt em { font-size: 13px; }
.switch.on { background: var(--ok); }
/* ikincil "yumuşak" düğmeler (hesap penceresi) ve tehlikeli eylem */
.btn-soft { min-height: 44px; padding: 10px 14px; background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); color: #fff; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-sm); font: 800 14px var(--font); cursor: pointer; }
.btn-soft.danger, .btn-primary.btn-danger { background: linear-gradient(180deg, #ff6b84, #e23a58); color: #fff; }
/* dar telefon: üst bar sığsın (dil Ayarlar'da, hesap çipi yalnızca avatar + seviye) */
@media (max-width: 520px) {
  .topbar { gap: 6px; }
  .top-actions { gap: 6px; }
  .logo { width: 32px; height: 32px; }
  .wordmark { font-size: 16px; letter-spacing: 1px; }
  .coin-chip { padding: 0 8px; gap: 4px; }
  .acct-chip { padding: 0 6px; gap: 4px; }
  .acct-chip .acct-name { display: none; }
}
.btn-ghost { min-height: 44px; background: var(--s2); color: #fff; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-sm); font: 800 14px var(--font); }
.btn-ghost:hover { color: #ffd0d8; border-color: var(--ink); background: #6b1730; }
@media (max-width: 700px) {
  .acct-chip .acct-name { display: none; }
  #btn-lang { display: none; }               /* dil Ayarlar'da */
  .top-actions { gap: 6px; }
}
.acct-chip.guest .avatar { background: var(--s2); color: #fff; font-weight: 900; }

body.dim3d #game3d { filter: brightness(0.5) saturate(0.8); transition: filter .2s; }

/* gizli öğe her zaman gizli (ör. .row display:flex, `hidden` özniteliğini ezmesin: 3D'de kıyafet satırı) */
[hidden] { display: none !important; }

/* 3D: sahne tam ekran; 2D görünümden kalan kanvas gölgesi oyun alanının üstünde / altında kirli şerit oluşturuyordu */
body.view3d #game { box-shadow: none; }

/* ---------- kupa vitrini (Görevler sekmesi) ---------- */
.tro-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font: 900 18px var(--font); }
.tro-head small { font-size: 13px; color: var(--text-2); font-weight: 800; }
.tro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tro { position: relative; padding: 10px 10px 10px 50px; border-radius: var(--r-md); background: var(--s2); border: var(--bw-sm) solid var(--ink); box-shadow: 0 3px 0 var(--ink); min-height: 74px; }
.tro b { display: block; font-weight: 900; font-size: 14px; color: #fff; }
.tro small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.tro .tro-cup { position: absolute; left: 10px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; font-style: normal; font-size: 18px; border-radius: 50%; background: #2c3070; border: var(--bw-sm) solid var(--ink); filter: grayscale(1); opacity: 0.75; }
.tro .tro-tier { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 8px; font: 900 10px var(--font); color: var(--ink); background: var(--tc, #d3dbff); }
.tro.t-bronze { --tc: #ffb35a; } .tro.t-silver { --tc: #d3dbff; } .tro.t-gold { --tc: #ffe05a; } .tro.t-legend { --tc: #ff6b84; }
.tro.won { background: var(--s3); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--tc); }
.tro.won .tro-cup { filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #fff2a8, var(--tc)); }

/* ---------- düello sekmesi ---------- */
.duel-quick > .btn-primary, .duel-friends > .btn-primary { width: 100%; margin-top: 10px; }
.duel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-weight: 800; }
.duel-acts { display: flex; gap: 6px; }
.duel-spin::before { content: '⏳ '; }
.duel-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.duel-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); background: var(--s3); border: var(--bw-sm) solid var(--ink); }
.duel-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.duel-pick input { width: 20px; height: 20px; accent-color: var(--yel-a); }
.duel-dot { width: 10px; height: 10px; border-radius: 50%; background: #47519b; border: 2px solid var(--ink); }
.duel-dot.on, .duel-dot.s-online { background: var(--ok); }
.duel-dot.s-playing { background: var(--yel-a); box-shadow: 0 0 0 2px rgba(255, 224, 90, 0.35); }
.duel-dot { display: inline-block; vertical-align: -1px; flex: 0 0 auto; }
.duel-state { font: 900 11px var(--font); padding: 2px 8px; border-radius: 8px; color: var(--ink); background: #d3dbff; }
.duel-state.s-joined { background: var(--ok); } .duel-state.s-declined { background: #ff6b84; }
.duel-add { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.duel-add input { flex: 1 1 auto; min-width: 0; width: auto; }
.duel-add .btn-primary { flex: 0 0 auto; width: auto; min-width: 72px; }
.duel-list li .btn-ghost { flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.duel-acts .btn-soft, .duel-acts .btn-primary { width: auto; padding-left: 14px; padding-right: 14px; }
.duel-code { font: 900 15px ui-monospace, Menlo, monospace; color: var(--yel-a); letter-spacing: 1px; }
.duel-invite { border-color: var(--yel-a); }
.duel-vs { font-weight: 800; }
.duel-count { font: 900 64px var(--font); text-align: center; color: var(--yel-a); margin: 6px 0; text-shadow: 0 4px 0 var(--ink); }

.duel-lobby .btn-row, .duel-invite .btn-row { margin-top: 10px; }
/* ---------- arkadaşlar sekmesi: rekabet ---------- */
.duel-friends .q-head .duel-go { width: auto; min-width: 0; height: 32px; padding: 0 10px; font-size: 12px; }
.fr-share { width: 32px; min-width: 32px; height: 32px; padding: 0; margin-left: 4px; vertical-align: middle; }
.fr-seg { margin-top: 6px; }
.fr-seg button { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.fr-rival { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-md); font-weight: 800; background: #2c3070; border: var(--bw-sm) solid var(--ink); }
.fr-rival.r-chase { background: #5a2140; } .fr-rival.r-lead { background: #4a3f12; }
.fr-list li { justify-content: flex-start; padding: 6px 8px; }
.fr-list li.me { box-shadow: inset 0 0 0 2px var(--yel-a); }
.fr-list .duel-rank { flex: 0 0 22px; text-align: center; font: 900 14px var(--font); color: var(--yel-a); }
.fr-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.fr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-st { color: #b9c2ef; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-h2h { color: #ffe05a; }
.fr-val { flex: 0 0 auto; font: 900 14px var(--font); color: #fff; }
.fr-acts { flex: 0 0 auto; display: flex; gap: 4px; }
.fr-list li .fr-inv, .fr-list li .fr-rm { width: 36px; min-width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 17px; }
.fr-list li .fr-rm.confirm { width: auto; padding: 0 8px; font-size: 12px; background: #ff6b84; color: var(--ink); }
/* düello sıralaması */
.duel-seg { margin-top: 8px; }
.duel-top li { justify-content: flex-start; }
.duel-top li b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-top li.me { border-color: var(--yel-a); }
.duel-rank { flex: 0 0 auto; min-width: 28px; font: 900 15px var(--font); color: var(--yel-a); }
.duel-wins { flex: 0 0 auto; font-weight: 900; }
.duel-wins small { color: var(--text-2); font-weight: 700; }
.duel-note { margin-top: 8px; font-size: 12px; }
.duel-prize { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); border: var(--bw-sm) dashed var(--yel-a); font-weight: 800; }
.duel-prize p { margin: 0; } .duel-prize small { color: var(--text-2); font-weight: 700; }
.duel-got { margin-top: 4px !important; color: var(--ok); }
/* son maçlar */
.duel-hist li { display: grid; gap: 4px; justify-content: stretch; }
.duel-hhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.duel-hhead small { color: var(--text-2); font-weight: 700; }
.duel-res { font: 900 12px var(--font); padding: 2px 8px; border-radius: 8px; color: var(--ink); background: #ff6b84; }
.duel-res.r-win { background: var(--ok); } .duel-res.r-draw { background: var(--yel-a); }
.duel-hplayers { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.duel-hplayers .me { color: var(--yel-a); }
.shop-card .fx { display: block; margin: 2px 4px 6px; font-size: 12px; font-weight: 700; color: var(--text-2); line-height: 1.3; text-align: center; }
.shop-card .pv .scene-thumb, .deal-pv .scene-thumb { width: 100%; height: auto; border-radius: 10px; display: block; }
.shop-card .pv { margin-bottom: 8px; }

/* efsanevi stadyumlar (takım listesinde ayrı başlık, altın çerçeve, seviye kilidi) */
#o-team .legend-head { grid-column: 1 / -1; margin-top: 8px; font: 900 13px var(--font); color: var(--yel-a); letter-spacing: .5px; text-transform: uppercase; }
.opt.team.legend { box-shadow: var(--sh-sm), inset 0 0 0 2px var(--yel-a); flex-direction: column; justify-content: center; gap: 4px; text-align: center; padding: 8px 6px; }
.opt.team.legend.locked { background: linear-gradient(180deg, #4a5196, #2c3070); }
.opt.team.legend.locked .sw { filter: grayscale(0.5) brightness(0.7); }
.opt.team .lock { position: static; font-size: 10px; padding: 2px 5px; }

/* çentik / Dynamic Island bölgesi: menü kaydırılınca içerik saatin altından geçmesin (masaüstünde yükseklik 0) */
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); background: rgba(14, 18, 70, 0.94); z-index: 40; pointer-events: none; }

/* seviyeyle açılan sahneler (merak): karartılmış 3D görüntü, kilit, seviye ilerleme çubuğu; büyük önizleme penceresi */
#o-levelup .levelup-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; }
#o-levelup .levelup-head b { font: 900 13px var(--font); color: var(--yel-a); letter-spacing: .4px; text-transform: uppercase; }
#o-levelup .levelup-head span { font: 800 12px var(--font); color: #fff; opacity: .85; }
.opt.thumb.teaser img, .opt.thumb.teaser canvas, .scene-big-wrap.teaser img { filter: grayscale(0.35) brightness(0.55) blur(0.6px); }
.opt.thumb.teaser { position: relative; }
.unlock-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; width: 100%; }
.unlock-bar::after { content: ''; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--yel-a), var(--yel-b)); }
.unlock-bar.big { height: 10px; }
.unlock-progress { display: grid; gap: 4px; margin: 6px 0; }
.unlock-progress small { font: 800 12px var(--font); opacity: .85; }
.scene-big-wrap { border-radius: 14px; overflow: hidden; border: var(--bw-sm) solid var(--ink); margin: 6px 0 4px; }
.scene-big { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.btn-col { display: grid; gap: 8px; margin-top: 10px; }
.btn-col > button { width: 100%; min-height: 48px; }
#o-levelup .levelup-head { flex-direction: column; align-items: flex-start; gap: 2px; }
/* pencere başlığı sağ üstteki kapatma (×) düğmesinin altına uzanmasın (uzun başlıklar alt satıra geçer) */
.modal h2 { padding-right: 52px; }

/* Kupa Yolu: sezon şeridiyle aynı düğümler; açılımlar (kahraman / stadyum) görselli, bulunulan seviye vurgulu */
.road-node { position: relative; flex: 0 0 auto; }
.road-node.unlock { width: 104px; background: linear-gradient(180deg, #3a2a7a, #251a55); }
.road-node.unlock.reached { background: linear-gradient(180deg, #8a3ffc, #5b21b6); opacity: 1; }
.road-node.unlock.locked img, .road-node.unlock.locked canvas { filter: grayscale(0.7) brightness(0.55); }
.road-node.here { outline: 3px solid var(--yel-a); outline-offset: 2px; }
.road-unlock { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.road-unlock b { font: 800 10px var(--font); color: #fff; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.road-unlock .road-pic { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: var(--hc, #333); }
.road-unlock img.scene-thumb, .road-unlock canvas { width: 72px; height: 45px; border-radius: 8px; object-fit: cover; }
.road-node.unlock.pair { width: 184px; }
.road-pair { display: flex; gap: 8px; align-items: flex-end; }
.road-node.final { background: linear-gradient(180deg, #7b5cff, #5a3fd6); opacity: 1; }   /* sezon finaliyle aynı; beyaz yazıyla yeterli kontrast */
.levelup-head .road-link { align-self: flex-start; font-size: 13px; }

/* sağ üst ilerleme: seviye rozeti ("Sv 3", XP halkası) + kupa sayısı + "i" açıklama */
.acct-chip .lvl-badge { width: auto; min-width: 44px; padding: 0 8px; border-radius: 999px; font: 900 12px var(--font); white-space: nowrap; }
.tro-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); border: 2px solid var(--ink); font: 900 12px var(--font); white-space: nowrap; }
.tro-badge[hidden], .info-btn[hidden] { display: none; }
/* dokunma alanı 40 px (parmak), görünen daire 28 px */
.info-btn { position: relative; width: 40px; height: 40px; margin: 0 -4px; align-self: center; border: 0; background: none; color: #fff; font: 900 15px Georgia, serif; font-style: italic; cursor: pointer; z-index: 0; }
.info-btn::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--ink); background: var(--s2); box-shadow: var(--sh-sm); z-index: -1; }
.prog-row { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.prog-row .prog-ic { font-size: 26px; line-height: 1; }
.prog-row p { margin: 4px 0 0; font-size: 13px; opacity: 0.9; }
.prog-row .bar { margin-top: 6px; }
/* dar ekran (telefon dikey): başlık sığsın — logo yazısı ve hesap harfi gizli, seviye + kupa görünür (v0.28'e kadar taşıyordu) */
@media (max-width: 700px) {
  .brand .wordmark { display: none; }
  .acct-chip .acct-name { display: none; }
  .acct-chip:not(.guest) .avatar { display: none; }
  .acct-chip { padding: 0 6px; gap: 4px; }
  .coin-chip { padding: 0 6px; }
}

/* ---------- Ayarlar (v0.29): Brawl tarzı kartlar, yatayda iki sütun ---------- */
.modal-card.wide { max-width: min(820px, 96vw); }
.set-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 600px) { .set-grid { grid-template-columns: 1fr 1fr; } }
.set-card { background: linear-gradient(180deg, var(--s2), #2c3db8); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 12px 14px; }
.set-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 900 15px var(--font); letter-spacing: .3px; color: var(--yel-a); text-transform: uppercase; }
.set-card .set-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(10, 12, 46, 0.45); font-size: 16px; }
.set-card .set-row { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.set-card .set-row:first-of-type { border-top: 0; }
.set-card .set-row > span { display: flex; flex-direction: column; font: 800 14px var(--font); }
.set-card .set-row > span small { font: 600 11px var(--font); opacity: .75; margin-top: 2px; }
.vol { display: flex; align-items: center; gap: 8px; }
.vol input[type=range] { width: 130px; accent-color: var(--yel-a); }
.vol-pct { min-width: 40px; text-align: right; font: 900 13px var(--font); color: var(--yel-a); }
.lang-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-pill { flex: 1 1 120px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); border: var(--bw-sm) solid var(--ink); background: rgba(10, 12, 46, 0.4); color: #fff; font: 900 15px var(--font); cursor: pointer; }
.lang-pill span { font-size: 22px; }
.lang-pill.sel { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); box-shadow: var(--sh-sm); }
.set-card .kbd-list { margin: 4px 0 0; }
.set-ver { display: block; margin-top: 8px; opacity: .7; }

/* yatay telefon / tablet / küçük pencere (oyun yalnızca yatay; Brawl Stars gibi tek ekran): menü ekran yüksekliğini aşmaz,
   sol sütunda mod kartları + OYNA kendi boyunda, sahne önizlemesi KALAN alanı doldurur → her ekran boyunda OYNA kaydırmadan görünür;
   sağ panel kendi içinde kayar. (667×375 iPhone SE'den 1024×768 iPad'e kadar; layout.js "yatay: OYNA ekrandan taşıyor") */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 820px) {
  #menu > .app { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 8px; }
  .dash { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .stage { position: static; height: 100%; min-height: 0; gap: 8px; }
  .stage-card { flex: 1 1 auto; min-height: 72px; }
  #preview { height: 100%; aspect-ratio: auto; }
  .stats, .stage .keys { display: none !important; }   /* kontroller Ayarlar → Kontroller'de */
  .btn-play { min-height: 52px; flex: none; }
  .modes { flex: none; }
  .side { max-height: 100%; min-height: 0; overflow: auto; }
}
/* v0.29 ana sekmeler Brawl Stars gibi: simge üstte, kısa ad altta — dar ekranda da beşi birden görünür, kesilmez */
.seg-main button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1 1 auto; min-width: 44px; padding: 6px 4px; min-height: 52px; }
.seg-main .tab-ic { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.seg-main button > span:not(.tab-ic) { font-size: 12px; line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.seg-main button.sel .tab-ic { transform: scale(1.12); }
@media (max-width: 760px), (max-height: 520px) {
  .seg-main { padding: 4px; gap: 2px; }
  .seg-main button { padding: 5px 2px; min-height: 48px; }
  .seg-main button > span:not(.tab-ic) { font-size: 10.5px; letter-spacing: -0.3px; }
  .seg-main .tab-ic { font-size: 18px; }
}
/* küçük yatay telefon (iPhone SE gibi): sağ sütun sekme adlarına yetecek genişlikte */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 640px) and (max-width: 759px) {
  .dash { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr) !important; }   /* v0.46: altı sekme (Arkadaş) */
  .seg-main button { padding-left: 1px; padding-right: 1px; min-width: 0; }
  .seg-main button > span:not(.tab-ic) { font-size: 10px; letter-spacing: -0.35px; }
}
/* mod kartları kısa yatay ekranda: simge üstte, ad ortada, kelime ortadan bölünmez */
@media (max-height: 520px) and (orientation: landscape) {
  .mode-card { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 6px 4px; min-height: 0; }
  .mode-card .m-ic { width: 30px; height: 30px; font-size: 15px; flex: none; }
  .mode-card .m-txt { min-width: 0; max-width: 100%; }
  .mode-card b { font-size: 12px; line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: none; display: block; }
}
/* alt sekmeler her ekranda parmakla rahat basılır (≥ 44 px) */
.seg-sub button { min-height: 44px; }
/* v0.30 oyun sonu: "Tekrar oyna" (sarı, ana eylem) + "Ana menü" — kanvas kartının altına hizalanır (game.js updateEndBar) */
.end-bar { position: fixed; z-index: 7; display: flex; gap: 8px; }
/* üç düğme (Tekrar oyna / Güçlendir / Ana menü) sığsın: eşit paylaşım, yazı küçülür, kısayol etiketi gizlenir (kullanıcı 2026-11-03: "taşmış") */
.end-bar:has(.end-up:not([hidden])) .end-btn { font-size: clamp(12px, 1.7vw, 16px); gap: 4px; padding: 0 6px; }
.end-bar:has(.end-up:not([hidden])) .end-btn kbd { display: none; }
.end-bar[hidden] { display: none; }
/* tekrar oyna (canlı maç): hazır olunca düğme yeşil ve bekler (✓ / ⏳ işaretleri sonuç listesinde); kapanınca düğmenin yerinde not */
.end-rm { flex: 1 1 0; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px;
  border-radius: var(--r-md); background: rgba(0, 0, 0, 0.35); color: #fff; font: 800 clamp(11px, 1.6vw, 14px) var(--font); line-height: 1.2; }
.end-rm[hidden] { display: none; }
.end-retry.is-ready { background: linear-gradient(180deg, #4ade80, #16a34a); color: #062a14; }
.end-btn {
  flex: 1 1 0; min-width: 0; height: var(--end-h, 48px); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: var(--bw-sm) solid var(--ink); border-radius: var(--r-md); box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  font: 900 clamp(14px, 2.2vw, 20px) var(--font); letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; animation: end-in 0.25s ease-out;
}
.end-btn[hidden] { display: none; }
.end-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.end-retry { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); }
.end-menu { background: linear-gradient(180deg, var(--blue-a), var(--blue-b)); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.end-btn kbd { font: 700 10px ui-monospace, Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.18); opacity: 0.8; }
body.touch .end-btn kbd { display: none; }
@keyframes end-in { from { transform: translateY(8px) scale(0.96); } }
body.calm .end-btn { animation: none; }
body.game-ended #touch { visibility: hidden; }
/* v0.30.1 pencere: kart kaymaz, yalnızca içerik kayar — kapatma (×) uzun pencerede de hep köşede görünür (kısa yatay ekranda
   ayarlar ortadan açılıp × kayboluyordu) */
.modal-card { display: flex; flex-direction: column; overflow: hidden; }
#modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
.modal-x { z-index: 3; }
/* kısa yatay ekran: kahraman kartı ilk bakışta adıyla birlikte görünsün (portre 131 px → 84 px; ad yan panelin dışına taşıyordu) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-pic { width: 100%; height: 84px; aspect-ratio: auto; }
  .hero-card .hero-rarity { position: absolute; top: 5px; left: 5px; z-index: 1; font-size: 10px; padding: 1px 6px; }
}
@media (max-height: 390px) and (orientation: landscape) { .hero-pic { height: 74px; } }
@media (max-height: 370px) and (orientation: landscape) { .hero-pic { height: 64px; } }

/* kullanıcı adı uygunluğu (kayıt / ad değiştirme): yazarken tek satır durum */
.name-st { min-height: 16px; margin: -4px 2px 2px; font: 700 12px var(--font); color: var(--mut, #b8c0ff); }
.name-st.ok { color: #4ade80; }
.name-st.bad { color: #ff8a9e; }
.method-row { gap: 10px; }
/* profil: "Kullanıcı adı" solda; ad ve "Değiştir" sağda, aralarında boşluk (kullanıcı 2026-11-01: "arada ayrım yok") */
.method-row.name-row em { margin-left: auto; color: var(--txt, #fff); font-weight: 800; }
.method-row.name-row .btn-link { margin-left: 4px; }

/* 8.14 kontrolleri düzenleme ekranı: kontroller menünün üstünde, sürüklenebilir; seçili olan parlak çerçeveli */
body.ctrl-edit #touch { z-index: 60; background: rgba(5, 8, 22, 0.88); pointer-events: auto; }
body.ctrl-edit #pauseBtn, body.ctrl-edit #rotateHint, body.ctrl-edit #rotateGate { display: none; }
body.ctrl-edit #touch > #stick, body.ctrl-edit #touch > #fireBtn, body.ctrl-edit #touch > #superBtn, body.ctrl-edit #touch > #gadgetBtn { cursor: grab; outline: 2px dashed rgba(255, 255, 255, 0.35); outline-offset: 4px; }
body.ctrl-edit #touch > .ctrl-sel { outline: 3px solid var(--yel-a, #ffd23a); }
.ctrl-bar { position: fixed; z-index: 61; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px);
  padding: 8px 12px; border-radius: 14px; background: rgba(12, 16, 64, 0.95); border: 2px solid #0a0c2e; color: #fff; font: 700 13px var(--font, system-ui); }
.ctrl-bar .ctrl-hint { color: #b8c0ff; font-size: 12px; }
.ctrl-bar .ctrl-size { display: flex; align-items: center; gap: 6px; }
.ctrl-bar .ctrl-size input { width: 110px; }
.ctrl-bar button { min-height: 40px; }

/* bağlantı göstergesi: çevrimdışı (turuncu) / gönderilmeyi bekleyen oyun (mavi) */
.net-chip { min-height: 40px; padding: 6px 12px; border-radius: 12px; border: var(--bw-sm, 2px) solid var(--ink, #0a0c2e); background: linear-gradient(180deg, #4dabf7, #2f6fe0);
  color: #fff; font: 800 13px var(--font, system-ui); box-shadow: var(--sh-sm, 0 3px 0 #0a0c2e); cursor: pointer; white-space: nowrap; }
.net-chip.off { background: linear-gradient(180deg, #ffb24d, #f0802f); color: #241400; }

/* ---------- Dünya Turu (harita, şehir, giriş hikâyesi) ---------- */
.tour-modal { background: linear-gradient(180deg, #3b5bdb, #2f45c8); }
.tour-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-right: 52px; }   /* sağda kapatma (×) düğmesi */
.tour-head h2 { margin: 0; font-family: var(--font); color: var(--yel-a, #ffd23a); text-shadow: 0 3px 0 var(--ink, #0a0c2e); }
.tour-sub { font-size: 13px; font-weight: 800; color: #d6defc; }
.tour-pill { padding: 5px 10px; border-radius: 12px; background: var(--ink, #0a0c2e); font-weight: 900; font-size: 13px; }
.tour-pill.gold { color: #ffd23a; border: 2px solid #ffd23a; margin-left: auto; }
.tour-pill.green { color: #7cf29c; border: 2px solid #7cf29c; }
.tour-body { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.tour-next { flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(10,12,46,0.82); border: 3px solid var(--ink, #0a0c2e); color: #fff; }
.tour-next .tn-k { font-size: 11px; font-weight: 900; color: #ffd23a; letter-spacing: 1px; }
.tour-next b { font-family: var(--font); font-size: 22px; }
.tour-next small { color: #d6defc; font-size: 12px; }
.tour-next .btn-primary { margin-top: auto; }
.tour-links { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tour-links .btn-link { font-size: 12px; min-height: 32px; color: #ffd23a; }
.tour-map { flex: 1 1 360px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-height: 520px) { .tour-flag { width: 26px; height: 17px; } .tour-node { padding: 4px; } .tour-foot { margin-top: 6px; } }
.tour-node { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 14px;
  border: 3px solid #ffd23a; background: #1b3a8a; color: #fff; font: 800 12px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--ink, #0a0c2e); }
.tour-node b { font-size: 13px; }
.tour-node small { font-size: 11px; color: #ffd23a; }
.tour-node.done { background: linear-gradient(180deg, #2ec27e, #1b8f5c); }
.tour-node.cur { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,210,58,0.5), 0 3px 0 var(--ink, #0a0c2e); }
.tour-node.locked { background: #5c6491; border-color: #8b93c4; color: #d6defc; filter: grayscale(0.7); }
.tour-node.locked small { color: #d6defc; }
.tour-flag { width: 30px; height: 20px; border-radius: 3px; }
.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tour-foot .btn-link { margin-left: auto; }
.tour-head .tour-back { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; margin: 0; }
.tour-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tour-level { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(10,12,46,0.85); border: 3px solid #ffd23a; color: #fff; }
.tour-level.cleared { border-color: #7cf29c; }
.tour-level.boss { border-style: solid; border-color: #ff8a9e; }
.tour-level.locked { border-style: dashed; border-color: #8b93c4; opacity: 0.8; }
.tour-level .tl-k { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #ffd23a; }
.tour-level.boss .tl-k { color: #ff8a9e; }
.tl-stars { font-size: 24px; letter-spacing: 3px; }
.tl-stars i { font-style: normal; color: #5c6491; }
.tl-stars i.on { color: #ffd23a; }
.tour-level small { font-size: 12px; color: #c9cff0; }
.tour-level .tl-best { color: #fff; font-weight: 800; }
.tour-level .btn-primary { margin-top: auto; }
.tour-note { margin: 10px 0 0; }
.tour-intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tour-panel { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 3px solid #fff; background: rgba(10,12,46,0.75); color: #fff; }
.tour-panel.last { border-color: #ffd23a; }
.tour-panel .tp-n { font-family: var(--font); color: #ffd23a; }
.tour-panel .tp-ic { font-size: 44px; text-align: center; }
.tour-panel p { margin: 0; font-weight: 800; font-size: 14px; }
.tour-go { width: 100%; margin-top: 12px; }
@media (max-width: 640px) { .tour-levels, .tour-intro { grid-template-columns: minmax(0, 1fr); } .tour-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-height: 520px) { .tour-head { margin-bottom: 4px; } .tour-head h2 { font-size: 22px; } .tour-node { min-height: 48px; } .tour-next { padding: 10px; gap: 4px; } }

/* turda bölüm geçildi: "Sonraki bölüm" (yeşil, öne çıkan) */
.end-btn.end-next { background: linear-gradient(180deg, #4ade80, #16a34a); color: #062a14; }
.end-btn.end-up { background: linear-gradient(180deg, #ff9f43, #e8590c); color: #fff; text-shadow: 0 2px 0 var(--ink); }

/* ---------- kahraman ustalığı ---------- */
.hero-mst { position: absolute; top: 30px; right: 6px; z-index: 1; padding: 1px 6px; border-radius: 9px; border: 2px solid var(--ink); background: var(--yel-a); color: var(--ink); font: 900 11px/1.3 var(--font); }
.hero-card.m-gold:not(.locked) { box-shadow: var(--sh-sm), inset 0 0 0 3px #ffd23a, inset 0 0 0 6px #b8860b, 0 0 14px rgba(255, 210, 58, 0.55); }
.hi-mst { display: grid; gap: 4px; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 12px; background: rgba(10, 12, 46, 0.55); }
.hi-mst p { margin: 0; font-size: 12px; color: var(--text-2, #d6defc); }
.hi-mst .hm-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 900; }
.hi-mst .hm-row b { color: #ffd23a; }
.hi-mst .hm-bar { height: 10px; border-radius: 6px; background: var(--ink); overflow: hidden; }
.hi-mst .hm-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7cf29c, #ffd23a); }
.hi-mst .hm-next { color: #ffd23a; font-weight: 800; }
.hi-mst.guest b { color: #ffd23a; font-size: 13px; }
/* sağ üst: giriş yapınca kullanıcı adı her ekranda görünür (kullanıcı 2026-11-02: "sağ üst köşede kullanıcı adı görünmüyor") —
   rozetler gelince "ibr…" diye kırpılıyordu, 700 px altında tamamen gizliydi. Ad küçülmez; yer açmak için harf avatarı gizlenir. */
.acct-chip { max-width: none; }
.acct-chip:not(.guest) .acct-name { display: block; flex: 0 0 auto; max-width: 16ch; }
@media (max-width: 900px), (pointer: coarse) {
  .acct-chip:not(.guest) .avatar { display: none; }
  .acct-chip:not(.guest) { padding-left: 10px; }
}
@media (max-width: 700px) {
  .acct-chip:not(.guest) .acct-name { max-width: 12ch; font-size: 12px; }
}
/* sohbet (Arkadaşlar → 💬): pencere yatay telefonda ekranı doldurur; liste kayar, yazma satırı hep altta */
.fr-list li .fr-chat { position: relative; width: 36px; min-width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 17px; }
.fr-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff4d6d;
  border: 2px solid var(--ink); color: #fff; font: 900 10px/14px var(--font); }
.modal-card.chat-modal { width: min(560px, 96vw); height: min(460px, 94dvh); }
.chat-modal #modal-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 40px; }
.chat-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .chat-rep { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 10px; font-size: 12px; }
.chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none;
  display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, 0.22); border-radius: var(--r-md); }
.chat-msg { max-width: 78%; padding: 6px 10px; border-radius: 14px; border: 2px solid var(--ink); font: 700 14px/1.3 var(--font); overflow-wrap: anywhere; }
.chat-msg.theirs { align-self: flex-start; background: var(--s2); color: #fff; border-bottom-left-radius: 4px; }
.chat-msg.mine { align-self: flex-end; background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); border-bottom-right-radius: 4px; }
.chat-msg small { display: block; margin-top: 2px; font-size: 10px; opacity: 0.75; text-align: right; }
.chat-empty { margin: auto; text-align: center; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; }
.chat-form .chat-send { flex: 0 0 56px; width: 56px; min-height: 44px; padding: 0; font-size: 18px; }
.chat-note { margin: 0; font-size: 11px; }
@media (max-height: 420px) { .chat-note { display: none; } .chat-head h2 { font-size: 16px; } }

/* kahraman güçlendirme (Özelleştir → kahraman bilgisi) */
.hi-up .up-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; }
.hi-up .up-ic { font-size: 18px; text-align: center; }
.hi-up .up-txt { display: grid; min-width: 0; }
.hi-up .up-txt b { font-size: 13px; }
.hi-up .up-txt small { font-size: 11px; color: var(--text-2, #d6defc); overflow-wrap: anywhere; }
.hi-up .up-pips { color: var(--yel-a, #ffd23a); letter-spacing: 1px; font-size: 11px; }
.hi-up .up-buy { min-height: 36px; padding: 0 10px; font-size: 13px; white-space: nowrap; }

/* devam önerisi (canlar bitince MANY ile +1 can): geri sayım düğmelerin yanında */
.modal-card.revive { max-width: min(460px, 94vw); text-align: center; }
.revive .rv-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0 6px; }
.revive .rv-buy { min-height: 48px; font-size: 17px; }
.revive .rv-count { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--s2); font: 900 18px var(--font); color: #fff; }

/* ---------- Brawl hissi, Faz 1 (kullanıcı 2026-11-03, docs/BRAWL_HIS_PLANI.md): butonlar, geçişler, rozetler ----------
   Basma: ölçek 0,92 anında; bırakınca 1,05 → 1,0 yaylanma (~120 ms). Kapalı buton gri ve hareketsiz. */
.btn-primary, .btn-soft, .btn-ghost, .btn-card, .btn-daily, .btn-play, .mode-card, .hero-card, .opt, .icon-btn, .chip-btn, .acct-chip, .coin-chip,
.end-btn, .seg button, #main-tabs button, .lang-pill, .modal-x, .fr-inv, .fr-chat, .up-buy, .tour-level, .tour-city {
  transition: transform 120ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 120ms ease, filter 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active, .btn-soft:active, .btn-ghost:active, .btn-card:active:not(:disabled), .btn-daily:active, .btn-play:active, .mode-card:active, .hero-card:active,
.opt:active, .icon-btn:active, .chip-btn:active, .acct-chip:active, .coin-chip:active, .end-btn:active, .seg button:active, #main-tabs button:active, .lang-pill:active,
.modal-x:active, .fr-inv:active, .fr-chat:active, .up-buy:active, .tour-level:active, .tour-city:active {
  transform: scale(0.92); transition-duration: 40ms; filter: brightness(0.96);
}
.btn-primary:disabled, .btn-soft:disabled, .btn-ghost:disabled, .btn-card:disabled, .btn-daily:disabled, .up-buy:disabled, .fr-inv:disabled {
  filter: grayscale(0.7) brightness(0.8); opacity: 0.7; transform: none; cursor: default;
}
/* sekme ve pencere geçişleri: 180 ms yana kayıp hafif taşarak yerleşir; pencere 160 ms ölçek 0,9 → 1 */
.tab.tab-in-r { animation: tab-in-r 180ms cubic-bezier(.34, 1.3, .64, 1) both; }
.tab.tab-in-l { animation: tab-in-l 180ms cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes tab-in-r { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes tab-in-l { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
#modal:not([hidden]) .modal-card { animation: modal-in 160ms cubic-bezier(.34, 1.4, .64, 1) both; }
#modal:not([hidden]) { animation: fade 160ms ease both; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
/* "yapılacak bir şey var" rozetleri: nabız 1,2 s; yalnızca görünürken (hidden'da hiç yok) */
.seg .dot:not([hidden]) { animation: badge-pulse 1.2s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(5, 8, 22, .8), 0 0 8px #ff4d6d; } 50% { transform: scale(1.35); box-shadow: 0 0 0 2px rgba(5, 8, 22, .8), 0 0 16px #ff4d6d; } }
.wiggle { animation: wiggle 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } 75% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } 85% { transform: rotate(0); } }
/* sayaç: artarken sarı parlar */
.count-up { color: var(--yel-a, #ffd23a); transition: color 300ms ease; }
/* ödül penceresi: kart yukarıdan zıplayarak düşer; satırlar sırayla; "devam için dokun" */
.modal-card.reward { max-width: min(440px, 94vw); text-align: center; cursor: pointer; }
.reward .rw-card { animation: reward-drop 220ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes reward-drop { from { opacity: 0; transform: translateY(-40px) scale(0.9); } to { opacity: 1; transform: none; } }
.reward .rw-ic { font-size: 56px; line-height: 1; margin: 6px 0 2px; animation: wiggle 1.6s ease-in-out 1; }
.reward .rw-val { font: 900 34px var(--font); color: var(--yel-a); text-shadow: 0 3px 0 var(--ink); }
.reward .rw-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin: 4px 0; border-radius: 10px; background: rgba(0, 0, 0, 0.22); font: 800 14px var(--font); opacity: 0; animation: tab-in-l 200ms ease both; }
.reward .rw-tap { margin: 10px 0 0; font: 800 12px var(--font); color: var(--text-2, #d6defc); animation: blink 1.4s ease-in-out infinite; }
.reward .rw-chain { font: 800 11px var(--font); color: var(--text-3, #9aa6d6); }
/* hareket azalt: tüm Faz 1 animasyonları kapalı (sadece solma) */
body.calm .tab.tab-in-r, body.calm .tab.tab-in-l, body.calm .modal-card, body.calm .seg .dot, body.calm .wiggle, body.calm .reward .rw-card, body.calm .reward .rw-ic, body.calm .reward .rw-row, body.calm .reward .rw-tap { animation: none !important; opacity: 1; }
body.calm .btn-primary, body.calm .btn-soft, body.calm .btn-ghost, body.calm .btn-card, body.calm .mode-card, body.calm .hero-card, body.calm .end-btn, body.calm .seg button, body.calm #main-tabs button { transition: none; }
@media (prefers-reduced-motion: reduce) { .tab.tab-in-r, .tab.tab-in-l, #modal:not([hidden]) .modal-card, .seg .dot, .wiggle, .reward .rw-card, .reward .rw-ic, .reward .rw-row, .reward .rw-tap { animation: none !important; opacity: 1; } }
.hi-up .up-next { color: var(--yel-a, #ffd23a); font-size: 10.5px; }
/* Duraklar seçimi (v0.54): 2×2 kart, kilitli durak soluk */
.chap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.chap-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 8px 6px; }
.chap-pick i { font-style: normal; font-size: 24px; line-height: 1; }
.chap-pick small { font-size: 11px; opacity: 0.8; }
.chap-pick.locked { opacity: 0.5; }
.m-chapters .m-ic { background: linear-gradient(135deg, #ff9e5e, #ff5c8a); }

/* ---------- v0.60 taşma düzeltmeleri (kullanıcı 2026-11-06: "bazı butonlarda isimlerde taşmalar var") ----------
   Otomatik tarama: 6 ekran boyutu × 2 dil × tüm sekmeler / pencereler (scratchpad overflow-scan) */
/* üst çubuk: hesap çipi daralabilir (ad "…" ile kısalır), sağdaki rozetler / "i" ekrandan çıkmaz */
.brand { flex: none; }
.top-actions { min-width: 0; flex: 0 1 auto; }
.acct-chip { min-width: 0; flex-shrink: 1; }
/* ad her ekranda görünür (kullanıcı 2026-11-02) ama gerekirse "…" ile kısalır */
.acct-chip:not(.guest) .acct-name { flex: 0 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  /* yatay telefon (740×360'ta kupa rozeti ve "i" ekrandan taşıyordu): dil düğmesi Ayarlar'da, ad daha kısa */
  #btn-lang { display: none; }
  .acct-chip:not(.guest) .acct-name { max-width: 10ch; }
}
/* ana ekran üçlü düğme: uzun ad ("Klasik Hikâye", "Classic Story") kesilmesin, iki satıra insin */
.mode-trio .mode-card b { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.05; text-overflow: clip; }
/* mağaza üstü: günlük ücretsiz ve fırsat kartları tam genişlik (ızgaranın dar sütununa sıkışıyordu) */
.shop-head .free-slot, .shop-head .offers { grid-column: 1 / -1; }
.offer { min-width: 0; }
.offer-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }   /* dar panelde alt alta: fiyat (üstü çizili + yeni) sığsın */
.offer b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer em { white-space: nowrap; }
.free-btn { white-space: nowrap; }
/* sezon şeridi: son kademe etiketi ("Season exclusive") kartın dışına taşmasın */
.stier.final { width: 128px; }   /* "SEASON EXCLUSIVE" (9 px büyük harf) sığsın */
.stier em { max-width: calc(100% - 4px); white-space: normal; text-align: center; line-height: 1.05; }   /* gerekirse iki satır, kesilmez */
/* kupa vitrini: uzun kupa adı kartı taşırmasın */
.tro b, .tro small { overflow-wrap: anywhere; }
/* hüner kartı (Faz 6) */
.hi-gadget i { background: linear-gradient(180deg, #9ff3ff, #1c9fd6); color: #06243a; }
.hi-gadget b { color: #7ee8ff; }
.hi-gadget small { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #9fb3d9; }
.hi-gadget.locked { opacity: 0.72; }
.hi-gadget.locked i { background: var(--s3); color: #fff; }
/* oyun sonu düğmeleri sığmazsa (game.js fitEndBar): 1) simge gizlenir, 2) yazı iki satıra iner ve küçülür */
.end-bar.fit-1 .end-btn > span[aria-hidden] { display: none; }
.end-bar.fit-2 .end-btn { white-space: normal; line-height: 1.05; text-align: center; font-size: clamp(11px, 1.5vw, 14px); padding: 0 4px; overflow-wrap: anywhere; }
/* kahraman güçlendirme penceresi (kahraman kartına dokununca) */
.hero-up .hup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hero-up .hup-pic { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; border: var(--bw-sm) solid var(--ink); background: var(--hc, #334); flex: none; }
.hero-up .hup-head h2 { margin: 0; font-size: 22px; color: #fff; }
.hero-up .hup-role { font-size: 13px; font-weight: 800; color: var(--hc, #9fb3d9); }
.hero-up .hup-ok { display: block; width: 100%; margin-top: 12px; min-height: 48px; }
/* v0.63 ana ekran: sol üçlü renkleri zorluğa göre (Dünya Turu yeşil → Şampiyonlar Yolu altın → Klasik Hikâye mavi); ortada Günlük + Duraklar
   üst üste iki yatay buton (.mode-split); sağda Sonsuz */
.mode-split { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; min-height: 0; }
.mode-split .mode-card { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 6px; padding: 4px 8px; min-height: 0; }
.mode-split .mode-card .m-ic { width: 24px; height: 24px; font-size: 12px; flex: none; }
.mode-split .mode-card .m-txt { min-width: 0; gap: 0; }
.mode-split .mode-card b { font-size: 12px; line-height: 1.05; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mode-split .mode-card small, .mode-split .mode-card em { display: none; }
.mode-split .mode-card .m-timer { font-size: 9px; }
.mode-trio .m-tour:not(.sel) { background: linear-gradient(180deg, #2ec27e, #1b8f5c); }
.mode-trio .m-champ:not(.sel) { background: linear-gradient(180deg, #ffb703, #e85d04); }
.mode-trio .m-story:not(.sel) { background: linear-gradient(180deg, #4dabf7, #1c64d6); }
.mode-trio .m-champ.locked { background: linear-gradient(180deg, #4a5196, #2c3070); filter: grayscale(0.3); }   /* paletten (layout testi) */
.mode-trio .m-champ .m-ic { background: linear-gradient(135deg, #fff2a8, #ffb703); }
.m-champ.locked .m-ic { background: #8b93c4; }
/* yol haritası: 30 stadyum; harita kayar, tur haritası 24 şehir */
.tour-map { max-height: min(62vh, 520px); overflow-y: auto; align-content: start; }
.road-map { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.road-node { position: relative; min-height: 70px; }
.road-node b { font-size: 11px; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.road-node .rn-n { position: absolute; top: 3px; left: 6px; font: 800 10px var(--font); color: rgba(255,255,255,0.75); }
.road-node.final { border-color: #fff; background: linear-gradient(180deg, #c9a227, #8a6d10); }
.road-node.final.locked { background: #5c6491; }
.road-emblem { display: block; }
.road-lock { display: grid; justify-items: center; gap: 10px; text-align: center; }
.road-lock .rl-ic { font-size: 46px; }
.road-lock .rl-bar { width: min(320px, 80%); height: 12px; border-radius: 6px; background: rgba(0,0,0,0.35); overflow: hidden; border: 2px solid var(--ink, #0a0c2e); }
.road-lock .rl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2ec27e, #ffd23a); }
.road-levels { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-height: 520px) { .tour-map { max-height: 58vh; } .road-node { min-height: 58px; } .road-node b { font-size: 10px; } }
@media (max-height: 520px) and (orientation: landscape) { .mode-split .mode-card { padding: 2px 6px; gap: 4px; } .mode-split .mode-card b { font-size: 10px; letter-spacing: -0.2px; } .mode-split .mode-card .m-ic { width: 18px; height: 18px; font-size: 10px; } .mode-split .m-timer { display: none; } }
.road-node { min-height: 92px; padding: 8px 4px 6px; justify-content: flex-start; gap: 3px; }
.road-node b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.1em; }
.road-node small { margin-top: auto; white-space: nowrap; }
@media (max-height: 520px) { .road-node { min-height: 84px; } }
/* v0.64 sıralama: kapsam (Herkes / Arkadaşlar) ve teşvik satırı */
#lb-scope { margin-top: 4px; }
.lb-push { margin: 4px 0 0; color: #ffd23a; font-size: 12px; font-weight: 800; text-align: center; }
.lb-push:empty { display: none; }
/* sıralama sekmeleri: 5 mod tek satır (sığmazsa yatay kayar), kapsam seçimi küçük ikili hap */
#lb-modes { display: flex; overflow-x: auto; scrollbar-width: none; }
#lb-modes button { flex: 1 0 auto; white-space: nowrap; font-size: 13px; padding: 0 10px; }
#lb-scope { display: flex; width: fit-content; margin: 6px auto 0; padding: 3px; gap: 3px; }
#lb-scope button { min-height: 36px; padding: 0 16px; font-size: 13px; flex: 0 0 auto; }
@media (max-height: 520px) and (orientation: landscape) { #lb-modes button { font-size: 11.5px; padding: 0 7px; min-height: 40px; } #lb-scope button { min-height: 32px; font-size: 12px; } }
/* v0.65: 8 durak — yatay ekranda 4 sütun, kartlar sıkı (hepsi kaydırmadan görünür) */
.chap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
.chap-grid .chap-pick { min-height: 74px; padding: 6px 4px; }
.chap-grid .chap-pick b { font-size: 14px; line-height: 1.1; }
.chap-grid .chap-pick i { font-size: 20px; font-style: normal; }
@media (max-width: 520px) { .chap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-height: 520px) { .chap-grid .chap-pick { min-height: 62px; } .chap-grid .chap-pick b { font-size: 12.5px; } }
/* v0.66 arkadaş daveti: ana ekran şeridi (sahne kartının sağ üstü) + davet penceresi */
.invite-pill { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 6px 12px; border-radius: 999px; border: var(--bw-sm, 2px) solid var(--ink, #0a0c2e);
  background: linear-gradient(180deg, #ffe066, #ff9f1c); color: #241400; font: 900 13px var(--font); box-shadow: 0 3px 0 var(--ink, #0a0c2e); cursor: pointer;
  white-space: nowrap; animation: inv-pulse 2.4s ease-in-out infinite; }
@keyframes inv-pulse { 50% { transform: scale(1.05); } }
body.calm .invite-pill { animation: none; }
@media (max-height: 520px) { .invite-pill { top: 6px; right: 6px; padding: 4px 9px; font-size: 11px; } }
.invite-modal .inv-head { display: flex; gap: 12px; align-items: center; }
.invite-modal .inv-ic { font-size: 40px; }
.invite-modal .inv-head h2 { margin: 0; font-size: 20px; }
.invite-modal .inv-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 12px 0 8px; }
.invite-modal .inv-code b { font: 900 24px ui-monospace, Menlo, monospace; letter-spacing: 3px; padding: 6px 12px; border-radius: 12px; background: rgba(0,0,0,0.35); color: #ffe066; }
.invite-modal .inv-share { display: block; width: 100%; min-height: 48px; }
.invite-modal .inv-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.invite-modal .inv-quick button { min-height: 44px; font-size: 13px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-modal .inv-stats { text-align: center; margin: 6px 0; color: #ffd23a; }
.invite-modal .inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 140px; overflow-y: auto; }
.invite-modal .inv-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,0.25); }
.invite-modal .inv-list em { font-style: normal; color: #9fe6b8; white-space: nowrap; }
.invite-modal .inv-use { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 10px; }
.invite-modal .inv-use label { grid-column: 1 / -1; font-weight: 800; }
.invite-modal .inv-use .form-err { grid-column: 1 / -1; margin: 0; }
.invite-modal .inv-rules { font-size: 11px; margin-top: 8px; }
@media (max-width: 520px) { .invite-modal .inv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.invite-modal .inv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .invite-modal .inv-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } .invite-modal.modal-card { max-width: 560px; } }
/* v0.66.1 Dünya Turu kartı: bayrak tüm kartta arka plan, üstünde koyu degrade; ad ve yıldız önde, gölgeli (taşma yok) */
.tour-node:not(.road-node) { position: relative; overflow: hidden; isolation: isolate; min-height: 64px; justify-content: center; gap: 2px; padding: 6px 4px; }
.tour-node .tour-flag-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; }
.tour-node:not(.road-node)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,10,40,0.25), rgba(8,10,40,0.7)); }
.tour-node:not(.road-node) b, .tour-node:not(.road-node) small { position: relative; text-shadow: 0 2px 0 #0a0c2e, 0 0 6px rgba(0,0,0,0.6); line-height: 1.1; }
.tour-node:not(.road-node) b { color: #fff; font-size: 14px; }
.tour-node:not(.road-node) small { color: #ffe066; font-weight: 900; }
.tour-node.locked .tour-flag-bg { filter: grayscale(0.85) brightness(0.75); }
.tour-node.locked { filter: none; }
.tour-node.done::before { background: linear-gradient(180deg, rgba(20,120,70,0.25), rgba(10,70,40,0.75)); }
@media (max-height: 520px) { .tour-node:not(.road-node) { min-height: 54px; } .tour-node:not(.road-node) b { font-size: 12.5px; } }
/* sıralama sekmeleri: beşi eşit sütunda, her zaman sığar */
#lb-modes { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
#lb-modes button { min-width: 0; padding: 0 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 520px) { #lb-modes button { font-size: 11.5px; } }
#lb-modes { gap: 3px; }
#lb-modes button { padding: 0 1px; letter-spacing: -0.2px; }
@media (max-height: 520px) { #lb-modes button { font-size: 11px; } }
/* v0.66.1 pencereler (kullanıcı 2026-11-07: "x butonu üstüne biniyor"): kapatma düğmesi kendi üst şeridinde; kayan içerik
   düğmenin altına girmez (kart üst boşluğu düğmeyi barındırır, içerik onun altından başlar ve orada kayar) */
.modal-card { padding-top: 60px !important; }
.modal-card > .modal-x { top: 10px; right: 10px; }
.modal-card.reward { padding-top: 24px !important; }
@media (max-height: 520px) { .modal-card { padding-top: 54px !important; } .modal-card > .modal-x { top: 7px; right: 7px; } }
/* ödül penceresi: dokununca ilerler / kapanır — kapatma düğmesi gereksiz ve simgenin üstüne biniyordu */
.modal-card.reward > .modal-x { display: none; }
/* ayarlar: iki sütun küçülebilir (düğme grupları taşmasın; dar ekranda satır altına iner) */
@media (min-width: 600px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-card { min-width: 0; }
.set-card .set-row { flex-wrap: wrap; row-gap: 6px; }
.set-card .set-row .seg { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.set-card .set-row .seg button { min-width: 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.set-card .set-row > span { flex: 1 1 120px; min-width: 0; }
.set-card .set-row .seg { min-width: max-content; flex: 0 0 auto; margin-left: auto; }   /* sığmazsa alt satıra iner, küçülmez */
.set-card .set-row .seg button { flex: 0 0 auto; }   /* düğmeler yazı kadar geniş; grup sığmazsa satır altına iner */
@media (max-width: 700px) and (max-height: 520px) { #lb-modes button { font-size: 10.5px; } }
/* hikâye / durum paylaşımı (v0.66.1): iki büyük düğme yan yana */
.invite-modal .inv-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.invite-modal .inv-story button { min-height: 50px; font-size: 15px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; padding: 2px 6px; }   /* iOS'ta emoji + yazı geniş: gerekirse iki satır (taşmaz) */
@media (max-height: 520px) { .invite-modal .inv-story button { font-size: 13px; min-height: 44px; } }
.invite-modal .inv-wa { background: linear-gradient(180deg, #4ee07a, #1fa855) !important; color: #052e16 !important; }
.invite-modal .inv-ig { background: linear-gradient(135deg, #feda75, #fa7e1e 35%, #d62976 65%, #962fbf) !important; color: #fff !important; text-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.invite-modal .inv-share { display: block; width: 100%; min-height: 44px; }
/* Faz 7 hafta sonu etkinliği şeridi: sahne kartının sol altında */
.weekend-pill { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 5px 11px; border-radius: 999px; border: 2px solid var(--ink, #0a0c2e);
  background: linear-gradient(180deg, #b197fc, #7048e8); color: #fff; font: 900 12px var(--font); box-shadow: 0 3px 0 var(--ink, #0a0c2e); white-space: nowrap; text-shadow: 0 1px 0 #0a0c2e; }
@media (max-height: 520px) { .weekend-pill { left: 6px; bottom: 6px; padding: 3px 8px; font-size: 10.5px; } }
/* Faz 9 takım kumbarası kartı (Arkadaşlar sekmesi) */
.team-card .team-h { margin: 0 0 6px; font: 900 16px var(--font); color: #ffd23a; }
.team-card .team-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.team-card .team-name b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card .team-coins { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-weight: 800; }
.team-card .team-coins small { color: #b9c4f5; font-size: 11px; }
.team-card .team-bar { position: relative; height: 14px; margin: 6px 0 10px; border-radius: 8px; background: rgba(0,0,0,0.35); border: 2px solid #0a0c2e; overflow: visible; }
.team-card .team-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff9fd1, #ff5aa5); }
.team-card .team-mark { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #6b7194; }
.team-card .team-mark.on { background: #ffd23a; }
.team-card .team-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.team-card .team-tier { display: flex; flex-direction: column; align-items: center; min-height: 48px; padding: 4px; }
.team-card .team-tier small { font-size: 11px; }
.team-card .team-tier.ready { background: linear-gradient(180deg, #ffe066, #ffb703); color: #241400; animation: pulse 1.4s ease-in-out infinite; }
.team-card .team-tier.done { opacity: 0.6; }
.team-card .team-members { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.team-card .team-members li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(0,0,0,0.22); }
.team-card .team-members li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card .team-members em { font-style: normal; color: #ffd23a; white-space: nowrap; }
.team-card .team-invite { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.team-card .team-invite button { min-height: 36px; padding: 0 10px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card .team-create { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 6px; }
.team-card .team-leave { margin-top: 10px; width: 100%; min-height: 40px; }
/* Faz 10 profil kartı + kahraman kupası rozeti */
.hero-card .hero-cup { position: absolute; right: 6px; bottom: 34px; padding: 1px 6px; border-radius: 8px; background: rgba(10,12,46,0.8); color: #ffd23a; font: 900 11px var(--font); }
#lb-list .n.link, .fr-who b.link { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,0.5); text-underline-offset: 3px; }
.profile-modal .prof-head { display: flex; gap: 12px; align-items: center; }
.profile-modal .prof-pic { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; border: 3px solid #0a0c2e; background: #2b4bd8; flex: none; display: grid; place-items: center; font-size: 32px; }
.profile-modal .prof-head h2 { margin: 0; overflow-wrap: anywhere; }
.profile-modal .prof-sub { color: #b9c4f5; font-size: 13px; font-weight: 800; }
.profile-modal .prof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; }
.profile-modal .prof-stat { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,0.25); min-width: 0; }
.profile-modal .prof-stat i { font-style: normal; font-size: 18px; }
.profile-modal .prof-stat b { font-size: 16px; }
.profile-modal .prof-stat small { font-size: 10.5px; color: #b9c4f5; text-align: center; }
.profile-modal .prof-fav { color: #ffd23a; font-weight: 800; text-align: center; }
.profile-modal .prof-heroes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.profile-modal .prof-heroes li { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 10px; background: rgba(0,0,0,0.22); }
.profile-modal .prof-heroes li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.profile-modal .prof-bar { height: 8px; border-radius: 5px; background: rgba(0,0,0,0.4); overflow: hidden; }
.profile-modal .prof-bar i { display: block; height: 100%; background: var(--hc, #ffd23a); }
.profile-modal .prof-heroes em { font-style: normal; color: #ffd23a; font-size: 12px; white-space: nowrap; }
.profile-modal .prof-how { font-size: 11px; margin-top: 8px; }
.prof-mine { display: block; width: 100%; min-height: 44px; margin-bottom: 10px; }
@media (max-width: 520px) { .profile-modal .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Faz 11 yenilik görevleri (v0.70): ana ekran şeridi (davet şeridinin altında) + görev penceresi */
.intro-pill { position: absolute; top: 54px; right: 10px; z-index: 3; padding: 5px 11px; border-radius: 999px; border: var(--bw-sm, 2px) solid var(--ink, #0a0c2e);
  background: linear-gradient(180deg, #b8f2ff, #4cc9f0); color: #04202b; font: 900 12.5px var(--font); box-shadow: 0 3px 0 var(--ink, #0a0c2e); cursor: pointer; white-space: nowrap; }
.intro-pill.ready { background: linear-gradient(180deg, #c6ff9e, #38b000); animation: inv-pulse 2.4s ease-in-out infinite; }
body.calm .intro-pill { animation: none; }
@media (max-height: 520px) { .intro-pill { top: 42px; right: 6px; padding: 3px 9px; font-size: 10.5px; } }
.intro-modal h2 { margin: 0 0 4px; font-size: 20px; }
.intro-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.intro-task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); }
.intro-task.ready { border-color: #38b000; }
.intro-task.done { opacity: .6; }
.intro-ic { font-size: 26px; flex: 0 0 auto; }
.intro-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.intro-txt b, .intro-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intro-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(0,0,0,.35); overflow: hidden; }
.intro-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4cc9f0, #38b000); }
.intro-bar em { position: relative; display: block; text-align: center; font: 800 9.5px/12px var(--font); font-style: normal; }
.intro-task > button, .intro-ok, .intro-m { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; white-space: nowrap; }
.intro-task > button { padding: 6px 12px; font-size: 13px; }
.intro-ok { font-size: 22px; color: #38b000; padding: 0 8px; }
.intro-m { font-weight: 900; color: #ffe066; padding: 0 6px; }
@media (max-height: 520px) { .intro-task { padding: 5px 8px; } .intro-ic { font-size: 20px; } .intro-list { gap: 5px; } }
/* v0.72 App Store bağlantısı: yalnızca web'de (uygulamada gizli) */
body.app-native .store-link { display: none; }
.foot .store-link { white-space: nowrap; }
/* v0.72 dokunma hedefleri ≥ 40 px (telefon / tablet; layout.js): üçlü mod kartları, sahne rozeti, davet şeridi, ana sekmeler eşit, "i" */
.mode-trio { grid-template-rows: repeat(3, minmax(40px, 1fr)); }
.mode-trio .mode-card { min-height: 40px; }
.info-btn { flex: none; min-width: 40px; }
.seg-main button { flex: 1 1 0; }
@media (max-width: 900px) {
  .stage-badge { min-height: 40px; box-sizing: border-box; }
  .invite-pill { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .invite-pill[hidden] { display: none; }
}
/* kısa yatay ekran: sahne kartında yer dar — "Yenilikler" açıkken davet şeridi gizli (davet zaten bir Yenilik görevi) */
@media (max-height: 520px) {
  .stage-card:has(.intro-pill:not([hidden])) .invite-pill { display: none; }
  .intro-pill { top: 6px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .intro-pill[hidden] { display: none; }
}
.store-get { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 6px 0 2px; padding: 0 14px; text-decoration: none; }
@media (max-height: 520px) { .foot .store-link { display: none; } }   /* kısa yatay ekranda alt bilgi tek satır kalsın: bağlantı Ayarlar'da */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 380px) {
  .stage-card { min-height: 56px; }
  .mode-trio { gap: 3px; }
}
/* v0.72 yazı çubuğu (src/typebar.js): yatay telefonda klavye açıkken yazı alanı görünür alanın üstünde, tam genişlik */
.typebar-back { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--tb-top, 8px) + 56px); z-index: 9990; background: transparent; }
.typebar-host { transform: none !important; animation: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; contain: none !important; }
.typebar-on { position: fixed !important; z-index: 9992 !important; top: var(--tb-top, 8px) !important; left: max(10px, env(safe-area-inset-left)) !important;
  right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important;
  width: calc(100vw - max(10px, env(safe-area-inset-left)) - max(10px, env(safe-area-inset-right)) - 110px) !important; max-width: none !important;
  height: 48px !important; min-height: 48px !important; font-size: 18px !important; box-sizing: border-box; box-shadow: 0 0 0 100vmax rgba(5, 6, 30, 0.78) !important; }
textarea.typebar-on { height: 72px !important; }
.typebar-done { position: fixed; z-index: 9992; top: var(--tb-top, 8px); right: max(10px, env(safe-area-inset-right)); width: 96px; height: 48px; min-height: 48px; padding: 0; }
@media (max-height: 520px) { .stage-badge { top: 6px; left: 6px; } }
/* çok kısa ekranda (≤ 380 px) sahne kartı ~60 px: hafta sonu şeridi sahne rozetiyle çakışmasın — ×2 bilgisi sonuç çubuğunda da var */
@media (max-height: 380px) { .weekend-pill { display: none !important; } }
@media (max-height: 400px) and (max-width: 700px) { .invite-pill { display: none !important; } }   /* 640×360: sahne kartı rozetle şeridi yan yana alamıyor; davet Arkadaşlar sekmesinde / Yenilikler'de */
@media (max-height: 520px) { .weekend-pill { bottom: 4px; padding: 1px 8px; font-size: 10px; line-height: 16px; box-sizing: border-box; } }   /* bilgi şeridi (düğme değil): rozetin altına sığsın */
/* v0.73 Ultra kahramanlar (Singil, Kosnu): camgöbeği-kızıl çift çerçeve, açıkken hafif parıltı */
.hero-card.r-ultra { --rc: #4fd1ff; }
.hero-card.r-ultra:not(.locked) { box-shadow: var(--sh-sm), inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 3px #4fd1ff, inset 0 0 0 5px #ff5a2e; }
.hero-card.r-ultra.sel { box-shadow: var(--sh-sm), 0 0 0 6px #4fd1ff, inset 0 0 0 3px #ff5a2e; }
/* v0.74 Ayarlar (kullanıcı 2026-11-08: "çok boşluklar var, daha düzenli ve anlaşılır olsun"): solda kategori sekmeleri, sağda seçili
   bölümün sıkı satırları. Satır: solda ad + kısa açıklama, sağda denetim; ayraç ince. Yatay telefonda tek bakışta bir bölümün tamamı. */
.settings .set-wrap { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; }
.set-nav button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 14px; border: var(--bw-sm) solid var(--ink);
  background: rgba(10, 12, 46, 0.35); color: #fff; font: 900 14px var(--font); text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--ink);
  transition: transform 120ms cubic-bezier(.34, 1.56, .64, 1), background 120ms; }
.set-nav button:active { transform: translateY(2px) scale(0.97); box-shadow: 0 1px 0 var(--ink); }
.set-nav button.sel { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); }
.set-nav .set-nav-ic { width: 26px; height: 26px; display: grid; place-items: center; font-size: 17px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); flex: none; }
.set-nav button.sel .set-nav-ic { background: rgba(255, 255, 255, 0.45); }
.settings .set-panes { min-width: 0; }
.settings .set-panes .set-card { padding: 4px 16px 8px; animation: set-in 160ms ease-out both; }
.settings .set-panes .set-card[hidden] { display: none; }
.settings .set-panes .set-card > h3 { display: none; }   /* başlık soldaki sekmede */
.settings .set-card .set-row { min-height: 54px; padding: 8px 0; gap: 14px; flex-wrap: nowrap; }
.settings .set-card .set-row > span { flex: 1 1 auto; font: 900 15px var(--font); color: #fff; }
.settings .set-card .set-row > span small { font: 700 12px var(--font); color: var(--text-2); opacity: 1; margin-top: 3px; line-height: 1.25; }
.settings .set-card .set-row .seg { margin-left: auto; flex: none; min-width: 0; }
.settings .set-card .lang-pills { padding: 10px 0 4px; }
.settings .set-card .kbd-list { padding: 10px 0 4px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.settings .set-card .legal-links { margin: 12px 0 6px; line-height: 2; }
.settings .set-ver { display: block; margin-top: 10px; opacity: .7; }
@keyframes set-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
body.calm .settings .set-panes .set-card { animation: none; }
/* kısa yatay ekran: daha sıkı; dar ekran (dikey / küçük pencere): sekmeler üstte yatay kayan şerit */
@media (max-height: 520px) {
  .settings .set-wrap { grid-template-columns: minmax(136px, 170px) minmax(0, 1fr); gap: 10px; margin-top: 6px; }
  .set-nav { gap: 5px; } .set-nav button { min-height: 42px; font-size: 13px; padding: 4px 10px; }
  .settings .set-card .set-row { min-height: 48px; padding: 5px 0; }
  .settings .set-card .set-row > span { font-size: 14px; }
}
@media (max-width: 600px) {
  .settings .set-wrap { grid-template-columns: 1fr; }
  .set-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .set-nav button { flex: none; }
}
/* Ayarlar başlığı kapatma (×) düğmesinin hizasında: üstteki boşluk sekmelere kalır */
@media (max-height: 520px) { .set-nav button { min-height: 40px; } }
/* ===== v0.74 Brawl tarzı lobi (src/lobby.js; yalnızca yatay ≥ 640 px → body.lobby) ===== */
.lobby-nav, .sheet-back, .hero-chip, .lobby-stats { display: none; }
/* üst bilgi şeridi: seviye (XP çubuklu) · kupa · en iyi puan — üst çubuğun ortasında; hesap rozetindeki tekrarlar lobide gizli */
body.lobby .lobby-stats { display: flex; align-items: stretch; gap: 6px; margin: 0 auto; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; }
body.lobby .ls-chip { position: relative; display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 3px 12px 3px 6px; border-radius: 14px; border: var(--bw-sm, 2px) solid var(--ink);
  background: rgba(10, 12, 46, 0.55); color: #fff; box-shadow: 0 3px 0 var(--ink); overflow: hidden; transition: transform 120ms cubic-bezier(.34, 1.56, .64, 1); }
body.lobby .lobby-stats:active .ls-chip { transform: translateY(2px); }
body.lobby .ls-chip > i { width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; font-size: 17px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); flex: none; }
body.lobby .ls-chip > span { display: grid; line-height: 1.05; text-align: left; min-width: 0; }
body.lobby .ls-chip b { font: 900 15px var(--font); white-space: nowrap; }
body.lobby .ls-chip small { font: 800 10px var(--font); color: var(--text-2, #c9d0ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lobby .ls-lvl > i { background: linear-gradient(135deg, #b197fc, #7048e8); }
body.lobby .ls-cup > i { background: linear-gradient(135deg, #fff2a8, #ffb703); }
body.lobby .ls-best > i { background: linear-gradient(135deg, #8ce99a, #2b8a3e); }
body.lobby .ls-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.15); }
body.lobby .ls-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b197fc, #ffd43b); }
body.lobby #acct-lvl, body.lobby #acct-tro, body.lobby #btn-progress-info { display: none !important; }
@media (max-width: 900px) { body.lobby .topbar .wordmark { display: none; } }
@media (max-width: 720px) { body.lobby .ls-best { display: none; } body.lobby .ls-chip { padding-right: 9px; } }
body.lobby #menu > .app { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
body.lobby .dash { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 10px; align-items: stretch; }
/* sol gezinme sütunu */
body.lobby .lobby-nav { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
body.lobby .lobby-nav button { position: relative; flex: 1 1 0; min-height: 40px; max-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 3px 2px; border-radius: 14px; border: var(--bw-sm, 2px) solid var(--ink); background: linear-gradient(180deg, #3d52e0, #2a37b0); color: #fff;
  font: 900 10.5px var(--font); box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.25); cursor: pointer;
  transition: transform 120ms cubic-bezier(.34, 1.56, .64, 1); }
body.lobby .lobby-nav button:active { transform: translateY(2px) scale(0.95); box-shadow: 0 1px 0 var(--ink); }
body.lobby .lobby-nav button.sel { background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); }
body.lobby .lobby-nav .tab-ic { font-size: 21px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
body.lobby .lobby-nav button > span:not(.tab-ic) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.2px; }
body.lobby .lobby-nav .dot { position: absolute; top: 4px; right: 6px; }
/* orta: kahraman sahnesi; sağ: mod kutusu + OYNA */
body.lobby .stage { position: static; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(266px, 40%, 380px); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
body.lobby .stage-card { grid-column: 1; grid-row: 1 / span 2; min-height: 0; height: 100%; }
body.lobby #preview { height: 100%; aspect-ratio: auto; }
body.lobby .stats, body.lobby .stage .keys { display: none !important; }
body.lobby #play { grid-column: 2; grid-row: 2; min-height: 64px; margin: 0; font-size: clamp(20px, 3vw, 28px); }
/* sağ sütun: bütün yollar / modlar (kullanıcı 2026-11-08: "sağda yollar komple olsun, bütün kartları koy") — 2 sütun × 3 satır */
body.lobby #modes { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(40px, 1fr)); gap: 6px; min-height: 0; }
body.lobby #modes .mode-trio, body.lobby #modes .mode-split { display: contents; }
body.lobby #modes .mode-card { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 7px; padding: 4px 7px; min-height: 40px; min-width: 0; border-radius: 16px; }
body.lobby #modes .mode-card .m-ic { width: 28px; height: 28px; font-size: 14px; flex: none; }
body.lobby #modes .mode-card .m-txt { min-width: 0; }
body.lobby #modes .mode-card b { font-size: clamp(11.5px, 1.55vw, 15px); line-height: 1.1; white-space: normal; overflow-wrap: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
body.lobby #modes .mode-card small, body.lobby #modes .mode-card em, body.lobby #modes .mode-card .m-timer { display: none !important; }
/* kart yeterince uzunsa (yatay telefon ≥ 400 px yükseklik / tablet) altında tek satır ilerleme: "3 / 24 şehir", "Kalan hak 2" */
@media (min-height: 400px) { body.lobby #modes .mode-card em { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 800 10.5px/1.2 var(--font); font-style: normal; color: #fff; text-shadow: 0 1px 0 rgba(10, 12, 46, 0.7); white-space: normal; overflow: hidden; margin-top: 2px; } }
body.lobby #modes .mode-card.sel { outline: 3px solid #fff; outline-offset: -2px; }
/* sürüm ve yasal bağlantılar Ayarlar → Yasal'da (kullanıcı: "en alttaki versiyon ve çekinceleri ayarların en altına koy") */
body.lobby .foot { display: none; }
/* kahraman adı rozeti (sahnenin altında ortada) */
body.lobby .hero-chip { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; min-height: 40px; max-width: 70%;
  padding: 4px 14px; border-radius: 999px; border: var(--bw-sm, 2px) solid var(--ink); background: rgba(10, 12, 46, 0.72); color: #fff; font: 900 14px var(--font); cursor: pointer;
  box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--hc, #fff); white-space: nowrap; }
body.lobby .hero-chip b { overflow: hidden; text-overflow: ellipsis; }
body.lobby .hero-chip i { font-style: normal; color: var(--hc, #ffd43b); }
body.lobby .hero-chip:active { transform: translateX(-50%) scale(0.95); }
/* mod seçici: ortada büyük kartlar, açıklamaları görünür */
/* sekme sayfası: tam ekran, sağdan kayarak; "‹ Geri" + yatay sekmeler üstte */
body.lobby .side { display: none; }
body.lobby.sheet-open .side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; gap: 8px 10px; position: fixed; z-index: 60; inset: 0; margin: 0;
  max-height: none; overflow: auto; border-radius: 0; border: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #2f3fc8, #1d2696); animation: lob-sheet 200ms cubic-bezier(.2, .9, .3, 1) both; }
body.lobby.sheet-open .side > .tab { grid-column: 1 / -1; min-width: 0; }
body.lobby.sheet-open .sheet-back { display: inline-flex; align-items: center; gap: 4px; align-self: center; min-height: 44px; padding: 4px 16px 4px 12px; border-radius: 14px; border: var(--bw-sm, 2px) solid var(--ink);
  background: linear-gradient(180deg, var(--yel-a), var(--yel-b)); color: var(--on-yel); font: 900 16px var(--font); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
body.lobby.sheet-open .sheet-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
body.lobby.sheet-open #main-tabs { margin: 0; min-width: 0; }
@keyframes lob-sheet { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@media (max-height: 400px) {
  body.lobby .lobby-nav { gap: 4px; } body.lobby .lobby-nav .tab-ic { font-size: 18px; } body.lobby .lobby-nav button { font-size: 10px; }
  body.lobby #play { min-height: 54px; }
}
/* v0.74 sığdırma + kart uyumu (ajan) — kullanıcı 2026-11-08: "kartlara sığmıyor, fontları ve tasarımı sığacak şekilde ayarla, renk uyumuna
   da dikkat et". Kelime harf ortasından bölünmez (overflow-wrap: anywhere kaldırıldı: "Durdurula / maz" oluyordu); kabına sığmayan uzun
   tek kelime src/fit.js ile en çok 10 px'e kadar küçülür, orada da sığmazsa (.fit-x) son çare satır kırılır. Denetim: tests/browser/textfit.js */
.tro b, .tro small, .mode-card b, .road-node b, .tour-node b, .chap-pick b, .deal-txt b, .hi-up .up-txt small, .invite-modal .inv-story button { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.fit-x { overflow-wrap: anywhere !important; }
/* kupa vitrini: kart biraz daha geniş (14 px adın en uzun kelimesi sığar), kupa simgesi sola yakın; ad dengeli iki satır */
.tro-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
.tro { padding: 9px 9px 10px 46px; }
.tro .tro-cup { left: 8px; }
.tro b { line-height: 1.15; text-wrap: balance; }
.tro small { line-height: 1.3; }
/* Dünya Turu / Şampiyonlar Yolu pencereleri (.tour-fit): başlık kapatma (×) hizasında, pencere kaymaz; kayan alan (harita, bölüm
   kartları) kendi içinde → × hiçbir içeriğin üstüne binmez, kısa ekranda harita ilk bakışta görünür */
.modal-card.tour-fit { padding-top: 12px !important; }
.modal-card.tour-fit #modal-body { display: flex; flex-direction: column; overflow: hidden; }
.tour-fit .tour-head { flex: none; flex-wrap: nowrap; min-height: 48px; margin: 0 0 8px; padding-right: 60px; gap: 8px; }
.tour-fit .tour-head h2 { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-fit .tour-sub { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.2; }   /* gerekirse iki satır, kısaltılmaz */
.tour-fit .tour-pill { flex: none; white-space: nowrap; }
.tour-fit .tour-pill.gold { margin-left: auto; }
.tour-fit .tour-head .road-emblem { flex: none; }
.tour-fit .tour-pill:not(.gold):not(.green) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tour-fit .tour-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: clamp(150px, 27%, 220px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; }
.tour-fit .tour-next { min-height: 0; min-width: 0; overflow-y: auto; }
.tour-fit .tour-next b { line-height: 1.1; white-space: nowrap; }
.tour-fit .tour-map { max-height: none; min-height: 0; overflow-y: auto; padding: 5px; }   /* sıradaki şehrin 4 px halkası kesilmesin */
.tour-goals { flex: none; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #e6ebff; }
.tour-level .btn-primary { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.tour-fit .tour-levels { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding: 2px; }
.tour-fit .tour-note { flex: none; margin-top: 8px; }
@media (max-height: 520px) {
  .modal-card.tour-fit { padding-top: 8px !important; }
  .tour-fit .tour-head { min-height: 46px; margin-bottom: 6px; }
  .tour-fit .tour-next b { font-size: 19px; }
  .tour-fit .tour-next small { font-size: 11px; line-height: 1.25; }
  .tour-fit .tour-note { margin-top: 6px; font-size: 12px; }
  .tour-goals { margin-bottom: 6px; font-size: 12px; }
}
@media (max-height: 370px) { .tour-fit .tour-next small { display: none; } .tour-fit .tour-next { gap: 4px; } }   /* çok kısa ekran (568×320, 640×360): şehir bilgisi haritadaki kartta da var */
@media (max-width: 760px) { .tour-fit .tour-sub, .tour-fit .tour-pill:not(.gold):not(.green) { display: none; } }
@media (max-width: 640px) { .tour-fit .tour-body { grid-template-columns: 140px minmax(0, 1fr); gap: 8px; } .tour-fit .tour-links { flex-direction: column; gap: 0; } }
/* yatay ekranda şehir / stadyum bölümleri ve tanıtım panelleri hep yan yana (dar yatay telefonda tek sütuna iniyordu) */
@media (orientation: landscape) { .tour-levels:not(.road-levels), .tour-intro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* şehir kartı: bayrak kartın arka plan resmi (kanvas katmanı değil; kart sınırında kırpılır), ad en çok iki dengeli satır, yıldız satırı
   altta tek satır; kart yazıya göre uzar (ızgara satırı içeriğe göre), öğeler birbirine binmez */
.tour-node:not(.road-node) { display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 2px; min-height: 60px; padding: 6px 5px; contain: paint; }
.tour-node .tour-flag-bg { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.tour-node:not(.road-node) b { max-width: 100%; min-width: 0; font-size: 13px; line-height: 1.12; text-align: center; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: 2px; }
.tour-node:not(.road-node) small { font-size: 11px; line-height: 1.15; white-space: nowrap; }
@media (max-height: 520px) { .tour-node:not(.road-node) { min-height: 56px; padding: 5px 4px; } .tour-node:not(.road-node) b { font-size: 12px; } }
/* şehir / stadyum bölüm kartı: kısa ekranda sıkı (üç kart + OYNA pencereye sığar) */
@media (max-height: 520px) {
  .tour-level { padding: 8px 10px; gap: 4px; }
  .tl-stars { font-size: 20px; line-height: 1; }
  .tour-level small { font-size: 11px; line-height: 1.25; }
}
/* Duraklar: bölüm aralığı saydamlıkla değil, açık renkle (kontrast ≥ 3:1) */
.chap-pick small { opacity: 1; color: #dfe5ff; }
.chap-pick.sel small, .chap-pick:not(.locked):hover small { color: inherit; }
/* kahraman penceresi: rol yazısı kahraman renginde değil (koyu renkli kahramanda okunmuyordu); renk soldaki şeritte */
.hero-up .hup-role { color: #e6ebff; border-left: 4px solid var(--hc, #9fb3d9); padding-left: 6px; }
/* kutu olasılıkları: nadirlik adı koyu hapta (açık gri / mavi yazı mavi pencere zemininde okunmuyordu) */
table.odds .rar-pill { display: inline-block; padding: 1px 8px; border-radius: 8px; background: rgba(10, 12, 46, 0.78); white-space: nowrap; }
/* Yenilikler çubuğundaki sayı en az 10 px */
.intro-bar { height: 14px; }
.intro-bar em { font: 800 10px/14px var(--font); }
/* profil: uzun kullanıcı adı harf ortasından bölünmez; gerekirse küçülür (fit.js), en son "…" */
.profile-modal .prof-head > div { min-width: 0; }
.profile-modal .prof-head h2 { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* kahraman kartı ad şeridi: iç boşluk genişliğe dahil (kartın kenarından taşıyordu) */
.hero-name { box-sizing: border-box; max-width: calc(100% - 4px); }
/* ad şeridi en çok iki satır (uzunsa fit.js küçültür) ve her kartta iki satır yüksekliğinde: kilit rozeti / yıldız bütün kartlarda aynı
   hizada kalır (kullanıcı 2026-11-08: "Singil adı alta kaymış") */
.hero-name { --fit-lines: 2; min-height: calc(2 * 1.15 * 13px + 6px); }
@media (max-width: 520px) { .hero-name { min-height: calc(2 * 1.15 * 12px + 6px); } }
/* Şampiyonlar Yolu: dar yatay ekranda 4 / 3 sütun (5 sütunda stadyum adları sığmıyordu); ad en çok üç dengeli satır, kesilmez */
@media (max-width: 900px) { .road-map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .road-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.road-node b { -webkit-line-clamp: 3; text-wrap: balance; max-width: 100%; }
#menu, .modal { font-variant-numeric: tabular-nums; }
/* v0.74 ortak pencere başlığı (tasarım incelemesi: "her pencere × için 55–60 px boş şerit ayırıyor"): pencere bir başlıkla (h2)
   başlıyorsa başlık × ile aynı satırda, kaydırmada yapışkan; kayan içerik başlığın arkasından geçer, ×'in altına girmez
   (v0.66.1 "× içeriğin üstüne biniyor" sorunu geri gelmez: sağdaki boşluğu başlığın ::after'ı örter). */
.modal-card:has(> #modal-body > h2:first-child) { padding-top: 10px !important; }
#modal-body > h2:first-child { position: sticky; top: 0; z-index: 2; padding-right: 0; margin: 0 56px 8px 0; min-height: 48px; display: flex; align-items: center; gap: 8px;
  background: var(--s1-a, #3049d8); line-height: 1.15; }
#modal-body > h2:first-child::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 56px; background: inherit; }
@media (max-height: 520px) { .modal-card:has(> #modal-body > h2:first-child) { padding-top: 7px !important; } #modal-body > h2:first-child { min-height: 46px; margin-bottom: 6px; font-size: 20px; } }
/* v0.74 kahraman güçlendirme penceresi (tasarım incelemesi: dar kart, 4. satır kesik): yatayda geniş, iki sütun — solda güçlendirme,
   sağda hüner + ustalık; başlık (kahraman) × ile aynı satırda, yapışkan */
.modal-card.hero-up { padding-top: 10px !important; }
.hero-up .hup-head { position: sticky; top: 0; z-index: 2; margin-right: 56px; min-height: 52px; padding-bottom: 6px; background: var(--s1-a, #3456f0); }
.hero-up .hup-head::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 56px; background: inherit; }
@media (orientation: landscape) and (min-width: 640px) {
  .modal-card.hero-up { width: min(820px, calc(100vw - 24px)); max-width: none; }
  .hero-up #modal-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .hero-up #modal-body > .hup-head, .hero-up #modal-body > .hup-ok { grid-column: 1 / -1; }
  .hero-up #modal-body > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; }
  .hero-up #modal-body > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .hero-up #modal-body > :nth-child(4) { grid-column: 2; grid-row: 3; }
  .hero-up .hup-ok { margin-top: 2px; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 520px) { .hero-up .hup-pic { width: 48px; height: 48px; } .hero-up .hup-head h2 { font-size: 19px; } .hero-up .hup-head { min-height: 48px; } }
/* v0.74 hesap penceresi: "yakında" giriş yolları küçük çip (altta), kullanılabilirler büyük; yatayda iki sütun */
.acct-soon, .auth-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; opacity: .85; }
.auth-soon small { font: 800 12px var(--font); color: var(--text-2, #c9d0ff); }
.auth-soon .btn-method.soon { width: auto; min-height: 40px; padding: 4px 12px; gap: 6px; font-size: 13px; opacity: .75; box-shadow: none; }
.auth-soon .btn-method.soon svg { width: 18px; height: 18px; }
@media (orientation: landscape) and (min-width: 640px) {
  .modal-card.acct { width: min(780px, calc(100vw - 24px)); max-width: none; }
  .acct .acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
  .acct .acct-grid.no-methods { grid-template-columns: 1fr; }
  .acct .acct-side .or { margin: 10px 0 0; }
}
/* v0.74 duraklatma kartı (PausePanel, game.js): ortada; büyük Devam, ses / müzik anahtarları, Oyundan çık */
.pause-panel { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.pause-panel[hidden] { display: none; }
.pause-panel .pp-card { pointer-events: auto; width: min(380px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 16px 18px 18px; border-radius: 22px; border: 4px solid var(--ink);
  background: linear-gradient(180deg, var(--s1-a), var(--s1-b)); box-shadow: 0 8px 0 var(--ink), 0 30px 80px rgba(0, 0, 0, 0.5); color: #fff; text-align: center;
  animation: modal-in 160ms cubic-bezier(.34, 1.4, .64, 1) both; }
.pause-panel h2 { margin: 0 0 2px; font: 900 24px var(--font); letter-spacing: 1px; text-shadow: 0 2px 0 var(--ink); }
.pause-panel .pp-resume { min-height: 56px; font-size: 22px; }
.pause-panel .pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pause-panel .pp-tog { min-height: 44px; border-radius: 14px; border: var(--bw-sm, 2px) solid var(--ink); background: rgba(10, 12, 46, 0.45); color: #fff; font: 900 14px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.pause-panel .pp-tog.on { background: linear-gradient(180deg, #5ef0a8, var(--ok, #2fb36d)); color: #062b17; }
.pause-panel .pp-quit { min-height: 44px; background: rgba(10, 12, 46, 0.5); color: #ffc2cd; border-color: var(--ink); }
body.calm .pause-panel .pp-card { animation: none; }
@media (max-height: 400px) { .pause-panel .pp-card { gap: 8px; padding: 12px 14px 14px; } .pause-panel .pp-resume { min-height: 50px; } }
/* v0.74 ödül / kutu pencereleri (tasarım incelemesi: kart içinde kart, kaydırma çizgisi, başlık ortada değil): tek kart, simetrik;
   kutu: nadirlik renginde parıltı, her dokunuşta sallanma, son adımda patlama halkası, kazanılan eşyanın önizlemesi */
.modal-card.reward { padding: 22px 22px 18px !important; }
.modal-card.reward #modal-body { overflow: hidden; padding: 0; }
.reward .rw-card { border: 0; box-shadow: none; background: none; padding: 0; margin: 0; }
.reward .rw-card h2 { margin: 0 0 4px !important; padding: 0 !important; text-align: center; justify-content: center; }
.db-card { position: relative; }
.db-card .db-ic { position: relative; display: inline-block; z-index: 0; }
.db-card .db-ic::before { content: ''; position: absolute; inset: -26px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--rc) 0%, transparent 68%); opacity: .55; }
.db-card.db-pop .db-ic { animation: db-shake 380ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes db-shake { 0% { transform: scale(.85) rotate(0); } 25% { transform: scale(1.12) rotate(-8deg); } 50% { transform: scale(1.08) rotate(7deg); } 75% { transform: scale(1.04) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
.db-card.db-done .db-ic { animation: db-burst 520ms cubic-bezier(.34, 1.56, .64, 1) both; }
.db-card.db-done .db-ic::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid var(--rc); animation: db-ring 600ms ease-out both; }
@keyframes db-burst { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1.1); } }
@keyframes db-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.db-card .db-rar { font-family: var(--font); text-shadow: 0 2px 0 var(--ink); }
.db-card .db-pv { display: grid; place-items: center; margin: 4px 0; }
body.calm .db-card .db-ic, body.calm .db-card .db-ic::after { animation: none !important; }
/* lobi, dar orta sahne (≤ 800 px genişlik, kısa ekran): sahne rozeti ile davet şeridi yan yana sığmıyor → davet Arkadaşlar / Yenilikler'de */
@media (max-width: 800px) and (max-height: 430px) { body.lobby .invite-pill { display: none !important; } }
/* lobi: isim rozeti sahnenin altında ortada → hafta sonu şeridi sol üstte, sahne rozetinin altında (iPhone'da rozetin arkasında kalıyordu) */
body.lobby .weekend-pill { bottom: auto !important; top: 52px; left: 6px; }
/* v0.77 açılım tanıtımı (src/reveal.js): nadirlik renginde dönen hüzmeler, büyük portre, ad + nadirlik + güçler, Hemen seç */
.modal-card.reveal { width: min(560px, calc(100vw - 24px)); max-width: none; overflow: hidden; padding-top: 14px !important; text-align: center; }
.modal-card.reveal > .modal-x { display: none; }
.rv-card { position: relative; display: grid; justify-items: center; gap: 6px; isolation: isolate; overflow: hidden; border-radius: 16px; padding: 4px 2px 2px; }
.rv-rays { position: absolute; left: 50%; top: 110px; width: 900px; height: 900px; margin: -450px 0 0 -450px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 10deg, transparent 10deg 20deg); opacity: .55; animation: rv-spin 14s linear infinite; }
.rv-rays::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 8%, var(--s1-b, #2537c2) 42%); }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-kicker { font: 900 22px var(--font); letter-spacing: 2px; color: #fff; text-shadow: 0 3px 0 var(--ink), 0 0 18px var(--rc); animation: rv-kick 420ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes rv-kick { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-stage { position: relative; width: 170px; height: 150px; display: grid; place-items: center; animation: rv-pop 520ms 120ms cubic-bezier(.34, 1.56, .64, 1) both; }
.rv-stage.rv-scene { width: 240px; }
.rv-stage canvas { border-radius: 14px; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.rv-pic { width: 170px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.rv-pic:not([hidden]) + .rv-fallback { display: none; }
.rv-fallback { font-size: 90px; }
@keyframes rv-pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-name { margin: 0; font: 900 26px var(--font); color: #fff; text-shadow: 0 3px 0 var(--ink); }
.rv-meta { display: flex; gap: 8px; align-items: center; font: 800 13px var(--font); color: #e6ebff; }
.rv-rar { padding: 2px 10px; border-radius: 999px; background: var(--rc); color: #0a0c2e; border: 2px solid var(--ink); font-weight: 900; }
.rv-powers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px; text-align: left; }
.rv-powers > div { padding: 8px 10px; border-radius: 12px; background: rgba(10, 12, 46, 0.45); border: 2px solid var(--ink); }
.rv-powers b { display: block; font: 900 13px var(--font); color: #fff; }
.rv-powers small { display: block; font: 700 11.5px/1.3 var(--font); color: var(--text-2, #c9d0ff); margin-top: 2px; }
.reveal .btn-row { width: 100%; margin-top: 6px; }
body.calm .rv-rays, body.calm .rv-kicker, body.calm .rv-stage { animation: none !important; }
@media (max-height: 430px) { .rv-card { gap: 3px; } .rv-stage, .rv-pic { height: 84px; } .rv-stage { width: 130px; } .rv-pic { width: 130px; } .rv-fallback { font-size: 64px; } .rv-name { font-size: 21px; } .rv-kicker { font-size: 17px; } .rv-powers small { display: none; } .rv-powers > div { padding: 5px 8px; } .reveal .btn-row { margin-top: 2px; } .reveal .btn-row button { min-height: 44px; } }
/* v0.78 kahraman hikâyesi kutusu (bilgi kartı) */
.hi-story .hs-part { margin: 6px 0 0; font: 700 12.5px/1.4 var(--font); color: #e6ebff; }
.hi-story .hs-part i { font-style: normal; font-weight: 900; color: var(--yel-a); margin-right: 2px; }
.hi-story .hs-part.locked { color: var(--text-2, #9fb0dd); opacity: .85; }
/* mağaza kartı: düğme her kartta en altta — açıklaması uzun (3 satır) kartın düğmesi yanındakilerden aşağıda kalıyordu (hiza testi, 2026-11-08) */
.shop-card > .btn-card { margin-top: auto; }
/* kilitli kahraman kartı da aynı kenarlık kalınlığında, sütun içeriğe göre genişlemez: portre ve ad şeridi bütün kartlarda aynı
   boyda / hizada (kilitli kartın portresi 2–4 px büyük çıkıp adı aşağı itiyordu — hiza testi) */
.hero-card { grid-template-columns: minmax(0, 1fr); }
.hero-card.locked { border-width: var(--bw); }
.hero-lock { max-width: 100%; box-sizing: border-box; text-align: center; }
/* lobi mod kartları: başlık en çok 2 satır, alt yazı en çok 2 satır — sığmazsa "…" ile kesilmek yerine yazı küçülür (fit.js, ≥ 10 px)
   (kullanıcı 2026-11-08 iPhone: "Dünya Turu'nu biti…", "+20…" kesik; "Günlük Meydan Okuma" 3 satır olup alt yazıyı itiyordu) */
body.lobby #modes .mode-card b { --fit-lines: 2; }
body.lobby #modes .mode-card em { --fit-lines: 2; }
/* dar kahraman kartı (≈ 100 px, iPhone Pro Max yatay): ad şeridi ve kilit rozeti yan boşluğu az, ikisi de en çok iki satır (fit.js) */
.hero-name { padding: 3px 4px; }
.hero-lock { --fit-lines: 2; padding: 3px 5px; }
.prog-row .prog-ic .moon-ic { width: 26px; height: 26px; vertical-align: 0; }   /* bilgi penceresi: MANY para simgesi emojilerle aynı boyda */
/* alt yazı: önce küçülerek 2 satıra sığdırılır (fit.js); en küçük boyda da sığmazsa (iOS yazı tipi biraz geniş) 3. satıra iner, "…" olmaz.
   Başlık en çok 2 satır olduğundan kart yüksekliği (≥ 80 px) yeter */
@media (min-height: 400px) { body.lobby #modes .mode-card em { -webkit-line-clamp: 3 !important; line-height: 1.15 !important; } }
/* Klasik Hikâye haritası (v1.4): durak kartında bayrak yerine durak simgesi */
.story-node .sn-ic { display: block; font-size: 19px; line-height: 26px; height: 26px; margin-bottom: 1px; filter: drop-shadow(0 2px 0 rgba(10, 12, 46, 0.45)); }
.story-node.locked .sn-ic { font-size: 16px; }
/* girişten sonra "Neredeyse bitti" (v1.4, kullanıcı 2026-11-08: "telefona sığsın, çabucak içeri alalım"): başlık + giriş yöntemi
   tek satır; yatay telefonda iki sütun (solda ad, sağda doğum yılı / ülke / onay), "Oynamaya başla" kaydırmadan görünür */
.signup-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.signup-head h2 { margin: 0; }
.signup-head .method-chip { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: rgba(10, 12, 46, 0.45); font-size: 12px; }
.signup-head .method-chip em { font-style: normal; font-weight: 800; overflow-wrap: anywhere; }
.signup-grid { display: grid; gap: 8px 14px; }
.signup-grid .sg-name, .signup-grid .sg-age, .signup-grid .sg-go { display: grid; gap: 6px; min-width: 0; }
.signup-grid .sg-go .btn-primary { min-height: 46px; font-size: 17px; }
@media (orientation: landscape) and (min-width: 520px) {
  .signup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .signup-grid .sg-go { grid-column: 1 / -1; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .signup-modal .signup-lead, .signup-modal .sg-age .hint { display: none; }   /* kısa ekranda açıklamalar gizli (form tek bakışta sığsın) */
  .signup-grid { gap: 6px 12px; }
  .signup-grid .check { font-size: 12px; line-height: 1.3; }
}
@media (max-height: 340px) and (orientation: landscape) {   /* iPhone SE yatay (568×320) */
  .signup-modal .signup-head { margin-bottom: 2px; }
  .signup-modal .signup-head h2 { font-size: 20px; }
  .signup-grid .sg-name .hint { display: none; }
  .signup-grid .sg-go .btn-primary { min-height: 42px; font-size: 16px; }
  .signup-grid { gap: 4px 10px; }
  .signup-modal .signup-grid input:not([type=checkbox]), .signup-modal .signup-grid select { min-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0; }
  .signup-modal .name-st { min-height: 0; margin: 0; }
}
/* başlık × ile aynı satırda (ortak pencere başlığı gibi; burada başlık + giriş yöntemi bir kutuda) */
.modal-card.signup-modal { padding-top: 8px !important; }
.signup-modal .signup-head { margin-right: 56px; min-height: 48px; }
/* ---------- v1.4.2 kaydırmasız pencereler (kullanıcı 2026-11-08: "her pencerede scroll olayından kurtar") ---------- */
/* sahne / arena önizlemesi: yatayda solda resim, sağda fiyat + düğmeler */
.sp-grid { display: grid; gap: 10px 14px; }
.sp-side { display: grid; gap: 8px; align-content: center; min-width: 0; }
.sp-side .lead, .sp-side .form-err, .sp-side .hint { margin: 0; }
@media (orientation: landscape) and (min-width: 520px) {
  .sp-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .scene-modal .scene-big-wrap { margin: 0; }
  .scene-modal .scene-big { width: 100% !important; height: calc(100vh - 165px) !important; max-height: 300px; aspect-ratio: auto; object-fit: cover; }   /* küçük resim satır içi px boyut taşıyor */
}
@media (max-height: 520px) and (orientation: landscape) { .sp-side .btn-col { gap: 6px; } .sp-side .btn-col button { min-height: 42px; } }
/* yatay kısa ekran (telefon): kaydırmasız düzenler */
@media (orientation: landscape) and (max-height: 520px) {
  /* kahraman güçlendirme: satırlar sık, alt not ve "Tamam" yok (× kapatır) */
  .hero-up .hup-ok, .hero-up .hi-up .hm-next { display: none; }
  .hero-up .hi-up { gap: 4px; padding: 8px 10px; }
  .hero-up .hi-up .up-row { gap: 6px; }
  .hero-up .hi-up .up-txt small { font-size: 10.5px; line-height: 1.2; }
  .hero-up .hi-up .up-buy { min-height: 34px; padding: 0 8px; font-size: 12.5px; }
  .hero-up .hi-mst { padding: 8px 10px; }
  .hero-up .hi-mst p { margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
  /* giriş / hesap aç: açıklama gizli, ad + şifre yan yana, doğum yılı / ülke / onay tam satır, davet kodu + düğme yan yana */
  .acct #modal-body > .lead { display: none; }
  .acct .gift { padding: 6px 10px; margin: 2px 0 6px; }
  .acct .acct-main .form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; }
  .acct .acct-main .form > * { grid-column: 1 / -1; margin: 0; }
  .acct .acct-main .form > input[name=username] { grid-column: 1; grid-row: 1; }
  .acct .acct-main .form > input[name=password] { grid-column: 2; grid-row: 1; }
  .acct .acct-main .form > .name-st { grid-column: 1; grid-row: 2; min-height: 0; }
  .acct .acct-main .form > .hint { display: none; }
  .acct .acct-main .form:has(input[name=ref]) > input[name=ref] { grid-column: 1; }
  .acct .acct-main .form:has(input[name=ref]) > button[type=submit] { grid-column: 2; }
  .acct .switch-link { margin: 4px 0 0; }
  /* ilerleme bilgisi: satırlar iki sütun, düğme tam satır */
  .prog-modal #modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-content: start; }
  .prog-modal #modal-body > h2, .prog-modal #modal-body > .btn-col { grid-column: 1 / -1; }
  .prog-modal .prog-row { margin: 0; gap: 8px; }
  .prog-modal .prog-row p { font-size: 11.5px; line-height: 1.25; margin-top: 2px; }
  .prog-modal .prog-row .prog-ic { font-size: 22px; }
  .prog-modal .btn-col button { min-height: 40px; }
  /* Şampiyonlar Yolu kilidi: küçük simge, sık aralık */
  .road-lock { gap: 6px; } .road-lock .rl-ic { font-size: 32px; } .road-lock h2 { margin: 0; } .road-lock .lead { margin: 0; }
  /* kutu olasılıkları tablosu sık */
  table.odds td { padding: 2px 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* hesap aç: alanlar alçak; geniş ekranda ad | şifre | doğum yılı | ülke tek satır */
  .acct .acct-main .form input:not([type=checkbox]), .acct .acct-main .form select { min-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
  .acct .acct-main .form .form-row { gap: 10px; }
  .acct .gift { padding: 4px 10px; font-size: 13px; }
  .acct .acct-main .form > .check { font-size: 12.5px; line-height: 1.3; }
  .acct .acct-main .form > button[type=submit] { min-height: 42px; }
  /* ilerleme bilgisi: yazılar küçük, "Olasılıklar" küçük düğme */
  .modal-card.prog-modal .prog-row p { font-size: 11.5px; line-height: 1.25; margin-top: 1px; }
  .modal-card.prog-modal .prog-row b { font-size: 14px; }
  .modal-card.prog-modal .prog-row .btn-soft { min-height: 32px; padding: 0 10px; font-size: 12px; margin-top: 4px; }
  .modal-card.prog-modal .prog-row .bar { margin-top: 3px; height: 9px; }
  /* Dünya Turu tanıtımı / olasılıklar: sık */
  table.odds { margin-top: 2px; } table.odds td { font-size: 11.5px; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 800px) {
  .acct .acct-main .form:has(.form-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acct .acct-main .form:has(.form-row) > .form-row { grid-column: 3 / 5; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; }
  .acct .acct-main .form:has(.form-row) > input[name=username] { grid-column: 1; }
  .acct .acct-main .form:has(.form-row) > input[name=password] { grid-column: 2; }
  .acct .acct-main .form:has(.form-row) > .name-st { grid-column: 1 / 3; }
  .acct .acct-main .form:has(input[name=ref]) > input[name=ref] { grid-column: 1 / 3; }
  .acct .acct-main .form:has(input[name=ref]) > button[type=submit] { grid-column: 3 / 5; }
}
/* davet (v1.4.2): iki sütun sarmalayıcı; başlık × ile aynı satırda */
.invite-modal .inv-cols { display: grid; gap: 8px 14px; }
.invite-modal .inv-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.invite-modal .inv-col > * { margin: 0; }
.modal-card.invite-modal { padding-top: 8px !important; }
.invite-modal .inv-head { margin-right: 56px; min-height: 48px; }
/* v1.4.3 yapışkan başlık (kahraman güçlendirme gibi): uzun davet penceresi kayınca içerik ×'in altına değil başlığın altına girer */
.invite-modal .inv-head { position: sticky; top: 0; z-index: 2; background: var(--s1-a, #3456f0); padding-bottom: 4px; }
.invite-modal .inv-head::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 56px; background: inherit; }
@media (orientation: landscape) and (min-width: 520px) {
  .invite-modal .inv-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .invite-modal .inv-code { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .invite-modal .inv-code b { font-size: 22px; padding: 2px 10px; }
  .invite-modal .inv-code .btn-soft { min-height: 40px; padding: 0 10px; font-size: 13px; white-space: nowrap; margin-left: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .invite-modal .inv-head .inv-ic { font-size: 30px; }
  .invite-modal .inv-head h2 { font-size: 18px; }
  .invite-modal .inv-head .lead { font-size: 12px; margin: 2px 0 0; line-height: 1.3; }
  .invite-modal .inv-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .invite-modal .inv-quick button { min-height: 36px; font-size: 12px; }
  .invite-modal .inv-share { min-height: 38px; }
  .invite-modal .inv-rules { font-size: 11px; line-height: 1.3; }
  .invite-modal .inv-use input { min-height: 38px; height: 38px; }
}
/* onay kutusu genel kutu (input) stilini almasın: 46 px yükseklik + iç gölge, kutunun üstünde çizgi gibi görünüyordu */
.check input[type=checkbox] { height: 22px; min-height: 0; padding: 0; box-shadow: none; border: 0; flex: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .acct .auth-soon { display: none; }   /* "Yakında" yöntemleri tıklanamaz; kısa ekranda yer kaplamasın */
  .acct .acct-main .form > .name-st:empty { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* ilerleme bilgisi: "Görevlere git" sağ sütunun boş altında (sol sütun 3, sağ 2 satır) */
  .prog-modal #modal-body > .btn-col { grid-column: 2; grid-row: 4; align-self: end; }
  /* Dünya Turu tanıtımı: panel yazıları sık */
  .tour-intro .tour-panel p { font-size: 12.5px; line-height: 1.3; margin: 4px 0 0; }
  .tour-intro .tour-panel .tp-ic { font-size: 28px; }
  .tour-modal .tour-go { min-height: 42px; margin-top: 6px; }
  /* kutu olasılıkları */
  table.odds td { padding: 1px 6px; line-height: 1.25; }
}
/* iPhone 8 / SE 2-3 yatay (≈ 667×375) ve daha kısa: başlık, kenar boşluğu ve yazılar bir kademe küçük */
@media (orientation: landscape) and (max-height: 380px) {
  .modal-card { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 10px !important; }
  #modal-body > h2:first-child { min-height: 40px; font-size: 18px; margin-bottom: 4px; }
  /* × başlıkla aynı boy (40 px): 44 px'lik × yapışkan başlığın 4 px altına sarkıyor, kaydırılan liste o şeridin altına giriyordu
     (v1.4.3, "yenilik görevleri" 667×375) */
  .modal-card > .modal-x { width: 40px; height: 40px; }
  .hero-up .hup-head, .signup-modal .signup-head, .invite-modal .inv-head { min-height: 40px; }
  .hero-up .hup-pic { width: 40px; height: 40px; }
  .hero-up .hup-head h2 { font-size: 17px; }
  .hero-up .hi-up .up-txt small { font-size: 10px; }
  .hero-up .hi-up .up-buy { min-height: 32px; }
  .hero-up .hi-mst { padding: 6px 8px; }
  .hero-up #modal-body { gap: 6px 10px; }
  .acct .gift { padding: 3px 8px; font-size: 12px; margin: 0 0 4px; }
  .acct .acct-main .form input:not([type=checkbox]), .acct .acct-main .form select { min-height: 38px; height: 38px; }
  .acct .acct-main .form { gap: 5px 8px; }
  .modal-card.prog-modal .prog-row p { font-size: 11px; }
  .modal-card.prog-modal .prog-row b { font-size: 13px; }
  .scene-modal .scene-big { height: calc(100vh - 160px) !important; }
}
/* davet hızlı paylaşım düğmeleri: geniş ekranda 2 sütun; kısa yatay ekranda 4 sütun, küçük yazı, kesilmez */
.invite-modal .inv-cols .inv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (orientation: landscape) and (max-height: 520px) {
  .invite-modal .inv-cols .inv-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .invite-modal .inv-cols .inv-quick button { font-size: 10.5px; letter-spacing: -0.3px; padding: 0 1px; text-overflow: clip; }
}
/* v1.4.3 davet: sütun içi ızgara sütun genişliğini aşmaz (eskiden "Kodun + kod + Bağlantıyı kopyala" satırı sol sütunu genişletiyor,
   667×375'te düğmeler sağ sütunun üstüne biniyordu); dar ekranda "Kodun" etiketi gizli, kopyala düğmesi gerekirse kısalır */
.invite-modal .inv-col { grid-template-columns: minmax(0, 1fr); }
.invite-modal .inv-col > * { min-width: 0; }
.invite-modal .inv-code b { flex: none; }
.invite-modal .inv-code .btn-soft { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* iki sütunlu davet geniş ekranda eski 560 px sınırına takılmasın (sol sütun daralıp düğme yazıları kesiliyordu) */
@media (orientation: landscape) and (min-width: 520px) { .modal-card.invite-modal { max-width: min(820px, 96vw); } }
@media (orientation: landscape) and (max-width: 760px) { .invite-modal .inv-code > span { display: none; } .invite-modal .inv-code .btn-soft { margin-left: 0; flex: 1 1 auto; font-size: 11.5px; letter-spacing: -0.3px; padding: 0 6px; } }
/* v1.4.3 iPhone SE 1 / çok kısa yatay ekran (≤ 340 px, ör. 568×320): pencere katmanı %86 ölçekte. İçerik etkin olarak ≈ 660×372
   alana yerleşir — 667×375'te kaydırmasız geçen düzenin aynısı (kullanıcı 2026-11-08: "her pencerede scroll olayından kurtar") */
@media (orientation: landscape) and (max-height: 340px) {
  /* Ayarlar bilerek kayan uzun liste: ölçeklenmez (dokunma hedefleri tam boy, layout testi ≥ 40 px) */
  .modal:not(:has(.settings)) { zoom: 0.86; }
  .modal:not(:has(.settings)) .modal-card > .modal-x { width: 47px; height: 47px; }   /* ölçekte ≈ 40 px dokunma hedefi */
  .modal:not(:has(.settings)) #modal-body > h2:first-child { min-height: 47px; margin-bottom: 2px; }   /* yapışkan başlık × ile aynı boy */
  .modal:not(:has(.settings)) .modal-card { padding-bottom: 6px !important; }
  .signup-grid .sg-go .btn-primary { min-height: 48px; }   /* "Oynamaya başla": ölçekte ≈ 41 px */
  /* ölçekte de dokunma hedefi ≥ 40 px (layout testi): düğme / kutu en az 47 px */
  .modal:not(:has(.settings)) #modal-body button:not(.tour-node) { min-height: 47px; }   /* harita kartları kendi ızgarasında */
  /* düğmeler büyüyünce sığmayan üç pencere: boşluklar ve açıklama satırları daralır */
  .acct .gift { margin: 0 0 2px; padding: 2px 8px; }
  .acct .acct-main .form { gap: 4px 8px; }
  .acct .switch-link { margin: 0; }
  .hero-up .hi-up { gap: 2px; padding: 6px 8px; }
  .hero-up .hi-up .up-txt small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .prog-modal #modal-body { gap: 2px 14px; }
  .modal-card.prog-modal .prog-row p { line-height: 1.15; margin-top: 0; }
  /* ölçekli katmanda vw de küçülür: geniş pencereler ekranı yine doldursun (yoksa davet sütunları üst üste biner) */
  .modal:not(:has(.settings)) .modal-card.wide { max-width: min(820px, calc(96vw / 0.86)); }
  /* kahraman güçlendirme: ≥ 640 px'teki iki sütunlu düzen (etkin genişlik ≈ 660 px) */
  .modal-card.hero-up { width: min(820px, calc((100vw - 24px) / 0.86)); max-width: none; }
  .hero-up #modal-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px 10px; align-items: start; }
  .hero-up #modal-body > .hup-head, .hero-up #modal-body > .hup-ok { grid-column: 1 / -1; }
  .hero-up #modal-body > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; }
  .hero-up #modal-body > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .hero-up #modal-body > :nth-child(4) { grid-column: 2; grid-row: 3; }
}