/* KÜLYURT — arayüz dili: gece çivitisi paneller, kilim bordürü, safran ve çini vurguları, tüf kartlar. */
:root {
  --ink: #1f1b2e; --ink2: #2a2238; --ink3: #352b46; --line: rgba(233, 180, 76, .28);
  --text: #f6ead4; --muted: #bfae94; --dim: #8f8270;
  --saffron: #e9b44c; --saffronD: #b8862b; --cini: #2a9d8f; --ciniL: #5fc9bc; --kilim: #9b2335; --kilimL: #c43d4f;
  --tuff: #e3cfae; --ok: #7fd88f; --warn: #f2a33a; --bad: #e06a5a;
  --r: 14px; --head: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --kilim-band: repeating-linear-gradient(135deg, var(--kilim) 0 6px, var(--saffron) 6px 8px, var(--kilim) 8px 14px, #5a1620 14px 16px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--body); font-size: 15px; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.ic { display: inline-flex; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.ic svg { width: 100%; height: 100%; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: .01em; margin: 0; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 12.5px; } .tiny { font-size: 11px; }
.row { display: flex; align-items: center; gap: 8px; } .row.wrap { flex-wrap: wrap; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; } .grow { flex: 1; min-width: 0; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }

/* ---------- Önyükleme ---------- */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a2f4e, var(--ink)); z-index: 50; transition: opacity .4s; }
.boot.out { opacity: 0; pointer-events: none; }
.boot-mark { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--saffron); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Düğmeler ---------- */
.btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: var(--ink3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; white-space: nowrap; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.btn.primary { background: linear-gradient(180deg, #f3c76a, var(--saffronD)); color: #2a1b10; border-color: #f7d892; box-shadow: 0 2px 0 #7a5418; }
.btn.cini { background: linear-gradient(180deg, #3cb7a8, #1d7066); border-color: #5fc9bc; box-shadow: 0 2px 0 #12453f; }
.btn.danger { background: linear-gradient(180deg, var(--kilimL), var(--kilim)); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn.wide { width: 100%; }
.btn.busy { pointer-events: none; opacity: .7; }
.btn.busy::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.06); display: grid; place-items: center; cursor: pointer; color: var(--text); position: relative; }
.icon-btn .ic { width: 22px; height: 22px; }
.badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kilimL); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sp { width: 44px; }

/* ---------- Üst gösterge ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.topbar { position: absolute; top: calc(6px + var(--safe-t)); left: 6px; right: 6px; display: flex; flex-direction: column; gap: 6px; }
.res-row { display: flex; gap: 5px; align-items: stretch; }
.chip { display: flex; align-items: center; gap: 5px; background: rgba(31,27,46,.86); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; min-height: 36px; cursor: pointer; min-width: 0; }
.chip .v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1; }
.chip .s { font-size: 10.5px; color: var(--muted); line-height: 1; font-variant-numeric: tabular-nums; }
.chip .ic { width: 22px; height: 22px; }
.res-chip { flex: 1; flex-direction: row; overflow: hidden; }
.stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.res-chip.full .v { color: var(--warn); }
.res-chip.neg .s { color: var(--bad); }
.stat-row { display: flex; gap: 5px; align-items: center; }
.stat { flex: none; }
.stat.low { border-color: var(--bad); box-shadow: 0 0 0 1px rgba(224,106,90,.4) inset; }
.stat.low .v::after { content: ' ▼'; font-size: 10px; color: var(--bad); }
.stat.good .v::after { content: ' ●'; font-size: 8px; color: var(--ok); vertical-align: middle; }
.storm-chip { background: rgba(110,40,30,.9); border-color: #e06a5a; animation: pulse 1.6s infinite; }
.storm-chip.warn { background: rgba(90,50,30,.9); animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(224,106,90,.25); } }
.top-actions { margin-left: auto; display: flex; gap: 5px; }
.top-actions .icon-btn { background: rgba(31,27,46,.86); border: 1px solid var(--line); width: 38px; height: 38px; }
.top-actions .chip { padding: 4px 6px; }
@media (max-width: 420px) { .res-chip { padding: 4px 5px; gap: 4px; } .res-chip .ic { width: 18px; height: 18px; } .res-chip .s { font-size: 9.5px; } .res-chip .v { font-size: 13px; } .sheet-head h2 { font-size: 17px; white-space: normal; line-height: 1.15; } .stat-row .chip { padding: 4px 6px; gap: 4px; } .stat-row .chip .ic { width: 18px; height: 18px; } .top-actions { gap: 4px; } }
.queue-chip .bar { width: 46px; }
.net { position: absolute; top: calc(92px + var(--safe-t)); left: 50%; transform: translateX(-50%); background: rgba(155,35,53,.95); padding: 6px 12px; border-radius: 10px; font-size: 13px; }

/* ---------- Görev kartı ---------- */
.quest-card { position: absolute; left: 8px; right: 8px; bottom: calc(76px + var(--safe-b)); max-width: 460px; display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(31,27,46,.92); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.quest-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--r) 0 0 var(--r); background: var(--kilim-band); }
.quest-card .por { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; }
.quest-card .por svg { width: 44px; height: 44px; }
.quest-card.ready { border-color: var(--saffron); animation: glow 1.4s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(233,180,76,.25), 0 6px 20px rgba(0,0,0,.35); } }
.quest-card .t { font-weight: 700; font-size: 14px; } .quest-card .d { font-size: 12.5px; color: var(--muted); }

/* ---------- Alt gezinme ---------- */
.nav { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + var(--safe-b)); display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: linear-gradient(180deg, rgba(31,27,46,.6), rgba(31,27,46,.98) 30%); border-top: 3px solid transparent; border-image: var(--kilim-band) 3; }
.nav button { border: 0; background: transparent; border-radius: 12px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; padding: 2px; }
.nav button .ic { width: 26px; height: 26px; }
.nav button.on { color: var(--text); background: rgba(233,180,76,.14); }
.nav button.locked { opacity: .5; }
.nav button.locked .lk { position: absolute; top: 6px; right: calc(50% - 20px); width: 14px; height: 14px; color: var(--muted); }
.nav button .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sayfalar (sheets) ---------- */
#sheets { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.sheet-wrap { position: absolute; inset: 0; pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: rgba(10,8,16,.35); opacity: 0; transition: opacity .18s; }
.sheet-wrap.in .scrim { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--ink2), var(--ink)); border-radius: 18px 18px 0 0; border-top: 4px solid transparent; border-image: var(--kilim-band) 4; box-shadow: 0 -10px 40px rgba(0,0,0,.5); transform: translateY(30px); opacity: 0; transition: transform .2s, opacity .18s; padding-bottom: var(--safe-b); }
.sheet.full { top: 0; max-height: none; border-radius: 0; }
.sheet-wrap.in .sheet { transform: none; opacity: 1; }
.reduce-motion .sheet, .reduce-motion .scrim { transition: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px; }
.sheet-head h2 { flex: 1; text-align: center; font-size: 19px; color: var(--tuff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body > * { flex-shrink: 0; }
.sheet-body { overflow-y: auto; padding: 4px 14px 18px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
@media (min-width: 820px) {
  .sheet { left: auto; right: 12px; bottom: 12px; top: 12px; width: 440px; max-height: none; border-radius: 18px; }
  .sheet.full { left: 12px; right: 12px; width: auto; top: 12px; bottom: 12px; border-radius: 18px; }
  .quest-card { bottom: calc(84px + var(--safe-b)); }
  .res-row { max-width: 720px; }
  .nav { left: 50%; transform: translateX(-50%); width: min(640px, 100%); border-radius: 18px 18px 0 0; }
}

/* ---------- Kartlar ---------- */
.card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 12px; }
.card.tuff { background: linear-gradient(180deg, rgba(227,207,174,.12), rgba(227,207,174,.05)); border-color: rgba(227,207,174,.25); }
.card h3 { font-size: 16px; color: var(--tuff); margin-bottom: 6px; }
.sec-title { font-family: var(--head); color: var(--saffron); font-size: 15px; display: flex; align-items: center; gap: 6px; margin: 4px 0 -2px; }
.lead { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; }
.kv .k { color: var(--muted); } .kv .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cost { display: flex; flex-wrap: wrap; gap: 6px; }
.cost .c { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(0,0,0,.25); border-radius: 9px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cost .c.miss { color: var(--bad); outline: 1px solid rgba(224,106,90,.5); }
.cost .c .ic { width: 16px; height: 16px; }
.req { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.req .ic { width: 16px; height: 16px; }
.bar { height: 8px; background: rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--saffronD), var(--saffron)); border-radius: 6px; transition: width .3s; }
.bar.cini i { background: linear-gradient(90deg, #1d7066, var(--ciniL)); }
.bar.red i { background: linear-gradient(90deg, #7a2030, var(--bad)); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.08); }
.pill.cini { background: rgba(42,157,143,.25); color: var(--ciniL); } .pill.kilim { background: rgba(155,35,53,.3); color: #ffb4b4; } .pill.saffron { background: rgba(233,180,76,.2); color: var(--saffron); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .val { min-width: 48px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
input[type=text], input[type=password], input[type=number], input[type=search] { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.28); color: var(--text); padding: 0 12px; font: inherit; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
input[type=range] { width: 100%; accent-color: var(--saffron); }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.seg { display: flex; background: rgba(0,0,0,.28); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--ink3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tabs button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; padding: 0 10px; }
.tabs button.on { color: var(--text); border-color: var(--saffron); background: rgba(233,180,76,.12); }

/* ---------- Bina paneli ---------- */
.b-head { display: flex; gap: 12px; align-items: center; }
.b-art { width: 96px; height: 96px; flex: none; border-radius: 14px; background: radial-gradient(circle at 50% 70%, rgba(227,207,174,.25), rgba(0,0,0,.15)); display: grid; place-items: center; overflow: hidden; }
.b-art canvas { width: 96px; height: 96px; }
.lvl-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--kilim); font-weight: 700; font-size: 13px; }

/* ---------- Kahramanlar ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-tile { position: relative; border-radius: 14px; padding: 8px 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; }
.hero-tile.sel { border-color: var(--saffron); background: rgba(233,180,76,.1); }
.hero-tile .row { flex-wrap: wrap; justify-content: center; }
.hero-tile .ti .ic { width: 14px; height: 14px; }
.hero-tile .pill { white-space: nowrap; }
.hero-tile .nm { font-weight: 700; font-size: 13.5px; } .hero-tile .ti { font-size: 11px; color: var(--muted); line-height: 1.2; }
.hero-tile svg { width: 64px; height: 64px; }
.stars { display: inline-flex; gap: 1px; } .stars .ic { width: 13px; height: 13px; }
.formation { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formation .rowlbl { grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.slot { min-height: 82px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.18); display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; background: rgba(0,0,0,.18); }
.slot.filled { border-style: solid; border-color: rgba(233,180,76,.45); }
.slot svg { width: 56px; height: 56px; flex: none; }
.slot .note { font-size: 11px; }
.battle-stage { position: relative; width: 100%; height: min(62vh, 520px); border-radius: 14px; overflow: hidden; background: #2b2233; }
.battle-stage canvas { width: 100%; height: 100%; display: block; }
.battle-ctrl { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.enemy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.enemy-row .e { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; gap: 2px; width: 70px; text-align: center; }
.enemy-row svg { width: 52px; height: 52px; }

/* ---------- Diyalog / hikâye ---------- */
.say { display: flex; gap: 10px; align-items: flex-start; }
.say .por { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ink3); display: grid; place-items: center; }
.say .por svg { width: 52px; height: 52px; }
.say .bubble { position: relative; background: var(--tuff); color: #2b2233; border-radius: 14px; padding: 9px 12px; font-size: 14px; line-height: 1.45; }
.say .bubble b { display: block; font-family: var(--head); color: var(--kilim); font-size: 13px; margin-bottom: 2px; }
.choice { text-align: left; justify-content: flex-start; white-space: normal; padding: 10px 12px; min-height: 52px; flex-direction: column; align-items: flex-start; gap: 4px; }
.choice .fx { display: flex; flex-wrap: wrap; gap: 4px; }
.intro { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(120% 80% at 50% 10%, #6b3a2a 0%, #2a1d28 45%, #120e18 100%); }
.intro .sky { position: absolute; inset: 0; overflow: hidden; }
.intro .mtn { position: absolute; left: 50%; bottom: 34%; width: 140vmin; height: 46vmin; transform: translateX(-50%); }
.intro .panel { position: relative; margin: 0 auto; width: min(560px, 100%); padding: 18px 18px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.intro .logo { text-align: center; font-family: var(--head); font-size: 44px; letter-spacing: .06em; color: var(--tuff); text-shadow: 0 2px 0 #5a1620, 0 0 24px rgba(233,180,76,.35); }
.intro .tagline { text-align: center; color: var(--saffron); font-family: var(--head); font-size: 16px; margin-top: -8px; }
.intro .card { background: rgba(31,27,46,.94); }
.intro .story { font-family: var(--head); font-size: 19px; line-height: 1.55; min-height: 6.5em; color: #f8eedc; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dots { display: flex; gap: 6px; justify-content: center; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); } .dots i.on { background: var(--saffron); }
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lang-pick .btn { min-height: 56px; font-size: 17px; }

/* ---------- Bildirim ---------- */
.toasts { position: fixed; top: calc(100px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.toast { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(31,27,46,.96); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.4); font-size: 14px; animation: tin .2s; transition: opacity .4s, transform .4s; }
.toast.err { border-color: var(--bad); } .toast.err .ic { color: var(--bad); }
.toast.ok { border-color: var(--cini); } .toast.ok .ic { color: var(--ciniL); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
.confirm-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(10,8,16,.6); display: grid; place-items: center; padding: 16px; }
.confirm { width: min(380px, 100%); background: var(--ink2); }

/* ---------- Dünya ---------- */
.world-tools { position: absolute; right: 8px; bottom: calc(150px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; }
.world-tools .icon-btn { background: rgba(31,27,46,.9); border: 1px solid var(--line); }
.march-list { position: absolute; left: 8px; top: calc(134px + var(--safe-t)); display: flex; flex-direction: column; gap: 5px; max-width: 62vw; }
.march-chip { display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 10px; background: rgba(31,27,46,.9); border: 1px solid rgba(127,216,208,.4); font-size: 12px; cursor: pointer; }
.army-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-bars { display: flex; flex-direction: column; gap: 5px; }
.war-bars .wb { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 6px; align-items: center; font-size: 12px; }
.war-bars .wb .bar { height: 10px; }
.round-strip { display: flex; gap: 4px; }
.round-strip span { flex: 1; height: 26px; border-radius: 6px; background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 11px; }

/* ---------- Liste ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.item.unread { border-color: rgba(233,180,76,.45); }
.item .ic { width: 26px; height: 26px; }
.log-line { font-size: 13px; display: flex; gap: 8px; } .log-line time { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.chapter-end { text-align: center; }
.chapter-end h2 { color: var(--saffron); font-size: 24px; margin-bottom: 8px; }

@media (max-width: 420px) { .sheet-head h2 { font-size: 17px; white-space: normal; line-height: 1.15; } }

.gem-chip .v { color: #8fd6ff; } .pill.gem { background: rgba(92,200,240,.18); color: #bfeaff; }
a.btn { text-decoration: none; }
.queue-row { display: flex; gap: 5px; } .queue-row .chip { min-height: 30px; }
a.btn.cini { color: var(--text); }
/* 3D şehir kaplaması */
.city-ov { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.city-ov > * { position: absolute; left: 0; top: 0; will-change: transform; }
.city-ov .fl { font: 700 14px system-ui, sans-serif; color: #fff8e8; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 2px #000; display: flex; align-items: center; gap: 4px; margin: -10px 0 0 -14px; }
.city-ov .fl i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px rgba(0,0,0,.4); }
.city-ov .pbar { width: 64px; height: 9px; margin: -4px 0 0 -32px; background: rgba(25,18,22,.8); border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.city-ov .pbar b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b8862b, #f3c76a); }
.city-ov .pmark { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; font: 700 20px system-ui; color: #2a1b10; background: rgba(243,199,106,.92); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.city-ov .pmark.lock { background: rgba(40,32,40,.75); font-size: 13px; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.city-ov .pmark.focus { animation: pm 1s infinite; background: #7ff0e6; }
@keyframes pm { 50% { transform-origin: center; box-shadow: 0 0 0 8px rgba(127,240,230,.25); } }
/* 3D savaş kaplaması */
.battle-stage { position: relative; }
.b3-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.b3-bar { position: absolute; left: 0; top: 0; width: 60px; height: 9px; margin-left: -30px; background: linear-gradient(#1a1014, #2a1c22); border: 1.5px solid rgba(0,0,0,.75); box-shadow: 0 0 0 1px rgba(255,235,200,.25), 0 2px 4px rgba(0,0,0,.5); border-radius: 5px; overflow: hidden; transition: opacity .4s; }
.b3-bar s { position: absolute; left: 0; top: 0; bottom: 0; background: #fff3d8; transition: width .6s ease-in .25s; }
.b3-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#a8f0b0, #3fae5a); transition: width .12s; } .b3-bar.en b { background: linear-gradient(#ff9a8a, #c03a32); }
.b3-bar i { position: absolute; left: 0; top: 0; height: 3px; background: #9ad2ff; box-shadow: 0 0 4px #9ad2ff; }
.b3-num { position: absolute; transform: translate(-50%, 0); font: 900 19px/1 system-ui; color: #fff0e0; -webkit-text-stroke: 1px rgba(60,20,10,.9); text-shadow: 0 3px 4px rgba(0,0,0,.7); animation: b3up 1.15s cubic-bezier(.2,.8,.3,1) forwards; white-space: nowrap; }
.b3-num.big { font-size: 30px; color: #ffd24a; animation-name: b3pop; } .b3-num.crit { font-size: 24px; color: #ffb070; animation-name: b3pop; }
.b3-num.heal { color: #9cf0b4; -webkit-text-stroke-color: #0d3a1c; } .b3-num.shield { color: #a8d8ff; font-size: 15px; -webkit-text-stroke-color: #0d2440; } .b3-num.adv { color: #ffe08a; font-size: 13px; margin-top: -24px; letter-spacing: .04em; }
@keyframes b3up { 0% { transform: translate(-50%, 6px) scale(.7); opacity: 0; } 15% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -12px) scale(1); } 100% { transform: translate(-50%, -54px); opacity: 0; } }
@keyframes b3pop { 0% { transform: translate(-50%, 0) scale(2.2); opacity: 0; } 12% { transform: translate(-50%, -8px) scale(.9); opacity: 1; } 22% { transform: translate(-50%, -10px) scale(1.1); } 35% { transform: translate(-50%, -12px) scale(1); } 100% { transform: translate(-50%, -60px); opacity: 0; } }
.b3-banner { position: absolute; left: 0; right: 0; top: 13%; text-align: center; font: 800 28px "Palatino Linotype", Georgia, serif; letter-spacing: .06em; color: #ffe2a0; -webkit-text-stroke: 1px #5a3410; text-shadow: 0 3px 10px rgba(0,0,0,.8), 0 0 18px rgba(233,180,76,.55); opacity: 0; }
.b3-banner.win { font-size: 38px; color: #ffd24a; } .b3-banner.lose { font-size: 34px; color: #e8b0a8; -webkit-text-stroke-color: #3a0e0e; }
.b3-banner.on { animation: b3b 1.8s ease-out forwards; } .b3-banner.win.on, .b3-banner.lose.on { animation: b3w 1s ease-out forwards; }
@keyframes b3b { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b3w { 0% { opacity: 0; transform: scale(2); } 40% { opacity: 1; transform: scale(.95); } 60%, 100% { opacity: 1; transform: scale(1); } }
.b3-round { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgba(20,12,18,.55); font: 700 12px system-ui; color: #fff3dc; letter-spacing: .05em; }
.b3-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(10,4,12,.55) 100%); }
.b3-cut { position: absolute; left: 0; right: 0; top: 34%; height: 74px; display: flex; align-items: center; gap: 12px; padding: 0 18px; opacity: 0; background: linear-gradient(90deg, rgba(20,10,30,.92), rgba(60,30,70,.75) 60%, transparent); border-top: 2px solid rgba(255,214,120,.8); border-bottom: 2px solid rgba(255,214,120,.8); }
.b3-cut.en { flex-direction: row-reverse; background: linear-gradient(270deg, rgba(40,6,10,.92), rgba(90,20,24,.75) 60%, transparent); border-color: rgba(255,120,100,.8); }
.b3-cut img { width: 84px; height: 84px; margin-top: -14px; border-radius: 50%; border: 3px solid #ffd678; box-shadow: 0 0 16px rgba(255,214,120,.7); }
.b3-cut.en img { border-color: #ff8a7a; box-shadow: 0 0 16px rgba(255,100,80,.7); }
.b3-cut span { font: 800 22px "Palatino Linotype", Georgia, serif; color: #fff1d0; -webkit-text-stroke: .6px #3a1c08; text-shadow: 0 2px 8px #000; }
.b3-cut.on { animation: b3cut 1.25s cubic-bezier(.2,.9,.3,1) forwards; } .b3-cut.en.on { animation-name: b3cutR; }
@keyframes b3cut { 0% { opacity: 0; transform: translateX(-60%) skewX(-12deg); } 18% { opacity: 1; transform: translateX(0) skewX(-6deg); } 75% { opacity: 1; transform: translateX(4%) skewX(-6deg); } 100% { opacity: 0; transform: translateX(30%) skewX(-6deg); } }
@keyframes b3cutR { 0% { opacity: 0; transform: translateX(60%) skewX(12deg); } 18% { opacity: 1; transform: translateX(0) skewX(6deg); } 75% { opacity: 1; transform: translateX(-4%) skewX(6deg); } 100% { opacity: 0; transform: translateX(-30%) skewX(6deg); } }
canvas.b3-lost { filter: saturate(.35) brightness(.8); transition: filter 1.2s; }
.reduce-motion .b3-cut.on, .reduce-motion .b3-num { animation-duration: .01s; }
.event-chip { border-color: var(--saffron); animation: glow 1.4s infinite; }
.mail-chip { position: relative; order: 9; margin-left: auto; } .mail-chip .badge { top: -6px; right: -6px; }
@media (max-width: 380px) { .stat.pop .s { display: none; } }
.hero-tile { min-height: 168px; justify-content: flex-start; } .hero-tile .stars { flex: none; }

/* kahraman kartları ve 3D vitrin */
.hero-tile.card3d { padding: 0; min-height: 0; overflow: hidden; border-width: 2px; aspect-ratio: 3 / 4; justify-content: flex-end; gap: 2px; background: #1a1220; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.hero-tile.card3d .por { position: absolute; inset: 0; } .hero-tile.card3d .por img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tile.card3d > :not(.por) { position: relative; }
.hero-tile.card3d .nm { font-size: 14px; color: #fff3dc; text-shadow: 0 1px 3px #000; letter-spacing: .02em; }
.hero-tile.card3d .pill { background: rgba(10,6,14,.7); }
.hero-tile.card3d .stars { margin-bottom: 6px; } .hero-tile.card3d .ti { color: #e8dccb; margin-bottom: 6px; text-shadow: 0 1px 2px #000; }
.hero-tile.card3d.c-shield { border-color: #6f9ccc; } .hero-tile.card3d.c-rider { border-color: #d08a52; } .hero-tile.card3d.c-archer { border-color: #4fb39a; }
.hero-tile.card3d.sel { box-shadow: 0 0 0 2px var(--saffron), 0 0 18px rgba(233,180,76,.5); }
.hero-tile.card3d.locked .por img { filter: grayscale(1) brightness(.45); }
.hero-tile.card3d:active { transform: scale(.97); }
.hero-stage { position: relative; width: 100%; height: min(46vh, 360px); border-radius: 16px; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); touch-action: pan-y; }
.hero-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.hero-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(8,4,10,.5)); }

/* ---------- ÜST GÖSTERGE (WoS düzeni) ---------- */
.topbar { left: 0; right: 0; top: 0; padding: calc(6px + var(--safe-t)) 8px 0; gap: 0; background: linear-gradient(180deg, rgba(14,10,22,.92) 0%, rgba(20,15,30,.78) 70%, rgba(20,15,30,0) 100%); }
.tb-main { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.avatar { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; padding: 0; border: 2px solid #e9b44c; background: radial-gradient(circle at 50% 35%, #5d4a7a, #22182e); box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.5); cursor: pointer; }
.avatar .av-img { position: absolute; inset: 2px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.avatar .av-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15) translateY(4%); }
.avatar .lvl { position: absolute; left: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: linear-gradient(#f3c866, #b8862b); color: #2a1a08; font: 800 12px/22px var(--body); text-align: center; border: 1.5px solid #2a1a08; }
.who { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.who .nm { font: 700 15px var(--head); color: #fff1d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.who .pow { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 1px 8px 1px 4px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1px solid rgba(233,180,76,.35); font: 800 12.5px var(--body); color: #ffe2a0; font-variant-numeric: tabular-nums; }
.who .pow .ic { width: 15px; height: 15px; }
.gem-pill { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 4px 0 8px; border-radius: 16px; background: linear-gradient(#2b4560, #182a3c); border: 1.5px solid #6fc8f0; color: #dff4ff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.gem-pill .ic { width: 20px; height: 20px; } .gem-pill .v { font: 800 14px var(--body); font-variant-numeric: tabular-nums; }
.gem-pill .plus { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#7fe08f, #3a9a4a); color: #fff; font: 900 17px/21px var(--body); text-align: center; border: 1px solid #1d4a24; }
.res-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; background: rgba(8,5,12,.62); border: 1px solid rgba(233,180,76,.22); border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.res-strip .res-chip { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 3px 4px; background: none; border: 0; border-right: 1px solid rgba(255,255,255,.07); border-radius: 0; cursor: pointer; min-width: 0; }
.res-strip .res-chip:last-child { border-right: 0; }
.res-strip .res-chip .ic { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.res-strip .stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.res-strip .v { font: 800 13.5px/1.05 var(--body); color: #fff6e2; font-variant-numeric: tabular-nums; }
.res-strip .s { font: 600 9.5px/1.1 var(--body); color: #9fd8a0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-strip .res-chip.neg .s { color: var(--bad); } .res-strip .res-chip.full .v { color: var(--warn); }
.res-strip .res-chip:active { background: rgba(255,255,255,.06); }
.side-left { position: absolute; left: 6px; top: calc(112px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; }
.side-chip { display: flex; align-items: center; gap: 6px; min-width: 92px; height: 38px; padding: 0 10px 0 6px; border-radius: 19px; background: rgba(14,10,22,.72); border: 1px solid rgba(233,180,76,.25); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.side-chip .ic { width: 22px; height: 22px; } .side-chip .stack { display: flex; flex-direction: column; align-items: flex-start; }
.side-chip .k { font: 600 9.5px/1.1 var(--body); color: var(--muted); white-space: nowrap; } .side-chip .v { font: 800 14px/1.1 var(--body); color: #fff1d6; font-variant-numeric: tabular-nums; }
.side-chip.low { border-color: var(--bad); box-shadow: 0 0 0 1px rgba(224,106,90,.5) inset, 0 0 10px rgba(224,106,90,.35); }
.side-chip.low .v { color: #ffb0a0; } .side-chip.good .v { color: #a8f0b4; }
.side-right { position: absolute; right: 6px; top: calc(112px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; width: 60px; }
.rbtn .ring { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #4a3a60, #1c1428); border: 2px solid rgba(233,180,76,.75); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.rbtn .ring .ic { width: 24px; height: 24px; }
.rbtn .lb { max-width: 60px; font: 700 10px/1.15 var(--body); color: #fff1d6; text-shadow: 0 1px 2px #000, 0 0 3px #000; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbtn .badge { position: absolute; top: -4px; right: -4px; }
.rbtn.busy .ring { border-color: #7fd88f; } .rbtn.storm-chip .ring { border-color: var(--bad); animation: glow 1.4s infinite; } .rbtn.event-chip .ring { border-color: var(--saffron); animation: glow 1.4s infinite; }
.rbtn:active .ring { transform: scale(.93); }
.stat-row, .queue-row, .top-actions { display: none !important; }
@media (max-width: 380px) { .side-chip { min-width: 0; padding-right: 8px; } .side-chip .k { display: none; } .res-strip .s { display: none; } .who .nm { font-size: 14px; } }
.rbtn.event-chip, .rbtn.storm-chip, .rbtn.mail-chip, .rbtn.queue-chip { border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; min-height: 0; margin: 0; order: 0; }
.rbtn.storm-chip .ring, .rbtn.event-chip .ring { animation: glow 1.4s infinite; }

/* kahraman detay */
.hs-wrap { position: relative; flex-shrink: 0; }
.hs-wrap .hero-stage { height: min(52vh, 420px); }
.hs-over { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; }
.hs-top { display: flex; gap: 6px; }
.hs-cls, .hs-row { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 12px; background: rgba(10,6,14,.6); border: 1px solid rgba(255,255,255,.18); font: 700 12px var(--body); color: #fff1d6; }
.hs-row { padding-left: 9px; } .hs-cls .ic { width: 16px; height: 16px; }
.hs-cls.c-shield { border-color: #8ac8ff; } .hs-cls.c-rider { border-color: #ffb070; } .hs-cls.c-archer { border-color: #7fe0c0; }
.hs-bottom { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: linear-gradient(0deg, rgba(10,6,14,.85), rgba(10,6,14,0)); margin: 0 -10px -10px; padding: 34px 12px 12px; }
.hs-name b { display: block; font: 800 26px/1.05 var(--head); color: #fff3dc; text-shadow: 0 2px 6px #000; letter-spacing: .02em; }
.hs-name span { font: 600 13px var(--body); color: #e9c98a; text-shadow: 0 1px 3px #000; }
.hs-pow { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: 10px; background: linear-gradient(90deg, rgba(233,180,76,.35), rgba(233,180,76,.08)); border: 1px solid rgba(233,180,76,.55); }
.hs-pow .k { font: 600 11px var(--body); color: #e9c98a; } .hs-pow b { font: 800 17px var(--body); color: #ffe2a0; font-variant-numeric: tabular-nums; }
.hs-lv { display: flex; align-items: center; gap: 8px; width: 100%; font: 700 12px var(--body); color: #fff1d6; }
.hs-lv .sb, .stat-line .sb { flex: 1; height: 7px; border-radius: 4px; background: rgba(0,0,0,.55); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.hs-lv .sb i { display: block; height: 100%; background: linear-gradient(90deg, #e9b44c, #ffe08a); }
.hs-hint { position: absolute; right: 10px; top: 42px; font: 600 10.5px var(--body); color: rgba(255,241,214,.7); text-shadow: 0 1px 2px #000; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--line); flex-shrink: 0; }
.seg button { flex: 1; min-height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-weight: 700; cursor: pointer; }
.seg button.on { background: linear-gradient(#f3c866, #b8862b); color: #2a1a08; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.stat-line { display: grid; grid-template-columns: 22px 64px 1fr auto; align-items: center; gap: 8px; }
.stat-line .k { font-weight: 600; color: var(--muted); font-size: 13px; } .stat-line .v { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.stat-line .sb i { display: block; height: 100%; }
.stat-line.atk .sb i { background: linear-gradient(90deg, #c0392b, #ff8a6a); } .stat-line.def .sb i { background: linear-gradient(90deg, #2a6fb0, #8ac8ff); } .stat-line.hp .sb i { background: linear-gradient(90deg, #2a8a4a, #9cf0b4); }
.eff { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; } .eff .ic { width: 24px; height: 24px; margin-top: 2px; }
.syn-line { padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); } .syn-line:first-of-type { border-top: 0; }
.skill-card .sk-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #6a4a9a, #22182e); border: 2px solid #e9b44c; flex: none; }
.skill-card .sk-ic .ic { width: 32px; height: 32px; } .skill-card .sk-name { font: 800 18px var(--head); color: #ffe2a0; }
.pips { display: inline-flex; gap: 3px; } .pips i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); } .pips i.on { background: #e9b44c; }

.kor-cost { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,106,42,.22), rgba(255,106,42,.05)); border: 1px solid rgba(255,138,58,.55); }
.kor-cost b { margin-left: auto; font-variant-numeric: tabular-nums; } .kor-cost.bad b { color: var(--bad); } .kor-cost.ok b { color: var(--ok); }
.lvl-badge.kor, .avatar .lvl.kor { background: linear-gradient(#ff9a4a, #c0391b); color: #fff3dc; border-color: #4a1206; }
/* 3D dünya haritası etiketleri */
.wlabel { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; white-space: nowrap; }
.wlabel.city { margin: -10px 0 0 0; padding: 2px 8px; border-radius: 8px; background: rgba(40,25,35,.82); border: 1px solid rgba(255,255,255,.18); color: #fff3dc; font: 700 11px var(--body); translate: -50% -100%; }
.wlabel.city.me { background: rgba(18,70,66,.9); border-color: #7fd8d0; }
.wlabel.lvl { width: 18px; height: 18px; border-radius: 50%; background: rgba(25,18,22,.88); border: 1px solid rgba(233,180,76,.6); color: #fff3dc; font: 800 10px/16px var(--body); text-align: center; translate: -50% -50%; }
.wregion { position: absolute; left: 0; top: 0; pointer-events: none; translate: -50% -50%; font: 700 15px var(--head); color: #fff3dc; letter-spacing: .08em; text-shadow: 0 2px 6px #000, 0 0 12px rgba(0,0,0,.6); white-space: nowrap; opacity: .9; }
.wregion.locked { color: #e7b2a6; }

/* hızlandırma ve elmasla tamamlama */
.fill-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(92,200,240,.14), rgba(92,200,240,.04)); border: 1px solid rgba(111,200,240,.45); }
.fill-row .small { color: #cfe9f6; }
.btn.gem-btn { background: linear-gradient(#2b4560, #182a3c); border-color: #6fc8f0; color: #dff4ff; }
.speed-row { align-items: center; gap: 10px; } .speed-row .sp-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #4a3a60, #1c1428); border: 1.5px solid rgba(233,180,76,.6); flex: none; } .speed-row .sp-ic .ic { width: 28px; height: 28px; }
.big-cd { font-size: 20px; font-variant-numeric: tabular-nums; }
.speed-row { display: grid !important; grid-template-columns: 44px 1fr; } .speed-row .sp-btns { grid-column: 1 / -1; display: flex; gap: 8px; } .speed-row .sp-btns .btn { flex: 1; }
.city-ov .lvbadge { min-width: 20px; height: 20px; padding: 0 5px; margin: -10px 0 0 -10px; border-radius: 6px; background: linear-gradient(#3a2c48, #1c1428); border: 1.5px solid #e9b44c; color: #ffe2a0; font: 800 11px/17px var(--body); text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.city-ov .lvbadge.kor { border-color: #ff8a3a; color: #ffd0a0; background: linear-gradient(#5a1e10, #2a0a06); }

/* savaş özeti */
.sum { gap: 10px; } .sum-legend { display: flex; gap: 12px; flex-wrap: wrap; } .sum-legend span { display: inline-flex; align-items: center; gap: 4px; } .sum-legend .ic { width: 14px; height: 14px; }
.sum-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.sum-row.mvp { border-color: rgba(233,180,76,.7); background: linear-gradient(90deg, rgba(233,180,76,.16), rgba(233,180,76,.03)); }
.sum-por { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; }
.sum-por img, .sum-por svg { width: 44px; height: 44px; }
.sum-bar { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; font-size: 12px; } .sum-bar .ic { width: 14px; height: 14px; }
.sum-bar .sb { height: 7px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; } .sum-bar .sb i { display: block; height: 100%; }
.sum-bar.dmg i { background: linear-gradient(90deg, #c0392b, #ff8a6a); } .sum-bar.sup i { background: linear-gradient(90deg, #2a8a4a, #9cf0b4); } .sum-bar.tak i { background: linear-gradient(90deg, #4a5a70, #9ab0c8); }
.sum-bar b { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tips { gap: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); } .tip { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; } .tip .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.b3-bar[data-nm]::before { content: attr(data-nm); position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); font: 800 10px var(--body); color: #e8f6ff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.b3-bar { overflow: visible !important; } .b3-bar s, .b3-bar b { border-radius: 4px; }

/* görev işaretçisi */
.city-ov .guide { margin: -82px 0 0 -22px; width: 44px; height: 60px; pointer-events: none; }
.city-ov .guide i { position: absolute; left: 0; top: 0; width: 44px; height: 44px; background: radial-gradient(circle, rgba(255,214,120,.55), rgba(255,214,120,0) 70%); border-radius: 50%; animation: gpulse 1.2s infinite; }
.city-ov .guide span { position: absolute; left: 8px; top: 2px; width: 28px; height: 38px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M10 30c-3 0-6-3-7-6l-2-6c-.4-1.3.6-2.4 1.8-2.2.8.1 1.4.7 1.7 1.4L6 20V5.5a2 2 0 0 1 4 0V14h1V3a2 2 0 0 1 4 0v11h1V5a2 2 0 0 1 4 0v10h.3V9a2 2 0 0 1 4 0v12c0 5-4 9-9 9z' fill='%23fff3dc' stroke='%232a1a08' stroke-width='1.4'/></svg>"); transform: rotate(180deg); animation: gbounce .9s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
@keyframes gbounce { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-10px); } }
@keyframes gpulse { 0% { transform: translateY(26px) scale(.6); opacity: 1; } 100% { transform: translateY(26px) scale(1.6); opacity: 0; } }
.btn.guide-pulse { animation: bpulse 1.3s infinite; } @keyframes bpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,120,.7); } 60% { box-shadow: 0 0 0 10px rgba(255,214,120,0); } }
/* ödül kutlaması */
.cel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,4,12,.72); animation: celin .3s ease-out; }
.cel.out { animation: celout .3s ease-in forwards; }
@keyframes celin { from { opacity: 0; } } @keyframes celout { to { opacity: 0; } }
.cel-box { position: relative; width: min(380px, 100%); padding: 26px 18px 16px; border-radius: 20px; background: linear-gradient(#2e2340, #1a1426); border: 2px solid #e9b44c; box-shadow: 0 0 40px rgba(233,180,76,.35), 0 20px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; align-items: stretch; overflow: hidden; animation: celpop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes celpop { from { transform: scale(.6); opacity: 0; } }
.cel-rays { position: absolute; left: 50%; top: 40px; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: repeating-conic-gradient(rgba(255,214,120,.14) 0 10deg, rgba(255,214,120,0) 10deg 20deg); border-radius: 50%; animation: spin 14s linear infinite; pointer-events: none; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.cel-title { position: relative; text-align: center; font: 800 26px var(--head); color: #ffe2a0; text-shadow: 0 2px 8px #000, 0 0 16px rgba(233,180,76,.6); }
.cel-sub { position: relative; text-align: center; color: var(--muted); font-weight: 600; margin-top: -6px; }
.cel-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cel-items > * { transform: scale(1.15); }
.cel-pop { opacity: 0; animation: itempop .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes itempop { from { opacity: 0; transform: scale(.3) translateY(10px); } to { opacity: 1; transform: scale(1.15); } }
.cel-next { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
/* asker kademeleri */
.troop-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.troop-sum > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.troop-sum b { font-size: 18px; } .troop-sum span { font-size: 11px; color: var(--muted); text-align: center; }
.tier-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; }
.tier-chip { flex: 0 0 auto; scroll-snap-align: start; min-width: 54px; min-height: 54px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(#3a2f4a, #241c30); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: transform .12s; }
.tier-chip b { font-size: 15px; } .tier-chip span { font-size: 11px; color: var(--muted); }
.tier-chip.on { background: linear-gradient(#f3c866, #b8862b); color: #2a1a08; border-color: #ffe29a; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(233,180,76,.35); }
.tier-chip.on span { color: #4a3210; }
.tier-chip.kor:not(.on) { background: linear-gradient(#5a2a1a, #2a140c); border-color: #a8502a; }
.tier-chip.locked { opacity: .45; cursor: not-allowed; }
.tier-badge { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 6px; border-radius: 8px; font-weight: 800; background: linear-gradient(#f3c866, #b8862b); color: #2a1a08; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.tier-badge.kor { background: linear-gradient(#ff8a3a, #b8401a); color: #fff3dc; }
.tier-badge.sm { min-width: 34px; height: 24px; font-size: 13px; }
.troop-card { position: relative; overflow: hidden; }
.troop-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12; background: radial-gradient(circle at 85% 10%, #fff, transparent 55%); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-grid > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: rgba(0,0,0,.25); }
.stat-grid span { font-size: 11px; color: var(--muted); } .stat-grid b { font-size: 15px; }
.promo-row { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.squad-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #ffe29a; }
.squad-tag .ic, .squad-tag svg { width: 14px; height: 14px; }
.squad-tag.none { color: var(--muted); font-weight: 500; }
.b3-bar em { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); font: 800 9px var(--body); font-style: normal; color: #ffe29a; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
/* dokunuş hissi */
button, .tier-chip, .quest-card, .res-chip, .slot, .hero-tile { transition: transform .16s cubic-bezier(.3,1.6,.5,1), filter .16s; }
.j-down { transform: scale(.93) !important; filter: brightness(1.12); transition-duration: .06s !important; }
.j-up { animation: jup .38s cubic-bezier(.3,1.8,.5,1); }
@keyframes jup { 0% { transform: scale(.93); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
.j-ripw { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.j-rip { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.38), rgba(255,255,255,0) 60%); transform: scale(0); animation: jrip .55s ease-out forwards; z-index: 0; }
@keyframes jrip { to { transform: scale(1); opacity: 0; } }
.j-fly { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 90; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,214,120,.6)); }
.j-fly svg, .j-fly .ic { width: 26px; height: 26px; }
.j-bump { animation: jbump .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes jbump { 0% { transform: scale(1); } 40% { transform: scale(1.18); filter: brightness(1.5); } 100% { transform: scale(1); } }
.j-plus { position: fixed; z-index: 91; pointer-events: none; transform: translateX(-50%); font: 900 15px var(--body); color: #ffe29a; text-shadow: 0 2px 3px #000, 0 0 6px rgba(255,180,60,.8); opacity: 0; animation: jplus 1.4s ease-out forwards; }
@keyframes jplus { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 18px); } }
@media (prefers-reduced-motion: reduce) { .j-up, .j-bump { animation: none; } }
.camp-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(122,38,34,.35), rgba(0,0,0,.25)); }
.camp-head.rider { background: linear-gradient(135deg, rgba(42,74,106,.45), rgba(0,0,0,.25)); }
.camp-head.archer { background: linear-gradient(135deg, rgba(58,90,42,.45), rgba(0,0,0,.25)); }
.camp-head .camp-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(0,0,0,.35); flex-shrink: 0; }
.camp-head .camp-ic svg, .camp-head .camp-ic .ic { width: 32px; height: 32px; }
.camp-head > .col { flex: 1; min-width: 0; }
.heal-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.2); }
.req.has-go { align-items: center; }
.req .req-go { min-height: 30px; padding: 0 10px; margin-left: auto; }
.guard-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guard-slot { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px dashed var(--line); background: rgba(0,0,0,.25); min-height: 58px; color: var(--muted); }
.guard-slot.on { border-style: solid; border-color: #e9b44c; color: var(--text); }
.guard-slot img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.city-ov .lvbadge span { display: none; }
.city-ov .lvbadge.named { display: flex; align-items: center; gap: 5px; padding: 0 7px 0 0; height: 22px; margin: -11px 0 0 -11px; white-space: nowrap; }
.city-ov .lvbadge.named b { display: inline-grid; place-items: center; min-width: 20px; height: 100%; padding: 0 4px; border-radius: 4px 0 0 4px; background: #e9b44c; color: #2a1a08; }
.city-ov .lvbadge.kor.named b { background: #ff8a3a; }
.city-ov .lvbadge.named span { display: inline; font: 700 11px var(--body); color: #f4ead6; text-shadow: 0 1px 2px #000; }
.toast.has-act { pointer-events: auto; } .req.has-go { cursor: pointer; }
/* ---- WoS tarzı düğmeler: kalın kenar, iki tonlu yüzey, alt dudak gölgesi, kontur yazı ---- */
.btn { min-height: 48px; padding: 0 18px; border-radius: 14px; border: 2px solid rgba(0,0,0,.55); font-weight: 800; font-size: 15px; letter-spacing: .2px;
  background: linear-gradient(180deg, #5a5070 0%, #3e3552 52%, #352c47 53%, #2c243c 100%); color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.25), 0 4px 0 rgba(0,0,0,.45), 0 6px 12px rgba(0,0,0,.3);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45); }
.btn:active, .btn.j-down { transform: translateY(3px) scale(.98) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.45) !important; }
.btn.primary { background: linear-gradient(180deg, #ffe08a 0%, #f5b941 50%, #e89a1e 51%, #d07f12 100%); color: #3a2208; border-color: #8a4f0a; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.btn.cini { background: linear-gradient(180deg, #6fe0d0 0%, #2fb3a2 50%, #1f998a 51%, #177a6e 100%); border-color: #0c4a43; }
.btn.danger { background: linear-gradient(180deg, #ff9a8a 0%, #e05a48 50%, #c8402f 51%, #a63022 100%); border-color: #5a1810; }
.btn.gem-btn { background: linear-gradient(180deg, #8fdcff 0%, #3aa6e0 50%, #2b8ccb 51%, #1f6fa6 100%); border-color: #0f3f60; color: #fff; }
.btn.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); box-shadow: none; text-shadow: none; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.btn.wide { min-height: 54px; font-size: 17px; }
.btn:disabled { filter: grayscale(.85) brightness(.8); opacity: .7; }
.btn .ic, .btn svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
/* mağaza */
.shop-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #1f4a6a, #142a40); border: 2px solid #3a8fc9; }
.shop-head .gem-big svg, .shop-head .gem-big .ic { width: 36px; height: 36px; filter: drop-shadow(0 0 8px #6fd0ff); }
.shop-head .gem-n { font-size: 24px; color: #dff4ff; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 8px; border-radius: 14px; border: 2px solid rgba(0,0,0,.5); background: linear-gradient(180deg, #4a3f5e, #2c243c); color: var(--text); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.4); min-height: 136px; }
.shop-card .sc-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(circle, rgba(255,214,120,.25), rgba(0,0,0,.2)); }
.shop-card .sc-ic svg, .shop-card .sc-ic .ic { width: 36px; height: 36px; }
.sc-ic.big { width: 72px; height: 72px; } .sc-ic.big svg { width: 52px; height: 52px; }
.shop-card .sc-name { font-size: 12.5px; text-align: center; line-height: 1.2; min-height: 30px; display: flex; align-items: center; }
.shop-card .sc-price { display: inline-flex; align-items: center; gap: 3px; margin-top: auto; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #3aa6e0, #1f6fa6); font-weight: 800; font-size: 13px; color: #fff; }
.shop-card .sc-price svg { width: 14px; height: 14px; }
.gem-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gem-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; border: 2px solid #2b6c96; background: linear-gradient(180deg, #24496a, #152c42); }
.gem-pack.best { border-color: #f5b941; box-shadow: 0 0 0 2px rgba(245,185,65,.25); }
.gem-pack .gp-ic svg { width: 40px; height: 40px; filter: drop-shadow(0 0 6px #6fd0ff); } .gem-pack .gp-n { font-size: 20px; }
.btc-addr { display: block; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.35); word-break: break-all; font-size: 13px; user-select: all; }
.buy-head { display: flex; gap: 12px; align-items: center; }
.qty-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qty { min-height: 44px; border-radius: 12px; border: 2px solid rgba(0,0,0,.5); background: #352c47; color: var(--text); font-weight: 800; cursor: pointer; }
.qty.on { background: linear-gradient(180deg, #ffe08a, #e89a1e); color: #3a2208; border-color: #8a4f0a; }
.qty-in { width: 64px; min-height: 40px; text-align: center; font: 800 16px var(--body); color: var(--text); background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; }
.buy-total { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 800; } .buy-total.bad { color: #ff8a7a; }
@media (max-width: 380px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
.mail-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.mail-item { display: flex; align-items: stretch; gap: 6px; padding: 0 !important; }
.mail-item .mail-open { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mail-item .mail-del { width: 44px; border: 0; border-left: 1px solid var(--line); background: rgba(224,90,72,.12); color: #ff9a8a; cursor: pointer; border-radius: 0 12px 12px 0; }
.gem-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gem-pack { min-width: 0; }
.gem-pack .btn { width: 100%; padding: 0 8px; font-size: 13px; white-space: nowrap; }
.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Tam ekran keşif savaşı (WoS tarzı) ---------- */
.sheet.bfull { inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; border: 0; padding: 0; background: #1a1420; }
.sheet.bfull .sheet-head { display: none; }
.sheet.bfull .sheet-body { padding: 0; height: 100%; overflow: hidden; gap: 0; }
.bt-full { position: relative; width: 100%; height: 100%; flex: 1; overflow: hidden; }
.bt-full canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bt-full .b3-ov { z-index: 1; }
.bt-full .b3-round { left: 50%; top: calc(56px + var(--safe-t, 0px)); transform: translateX(-50%); }
.bt-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t, 0px)) 10px 8px; background: linear-gradient(rgba(14,8,16,.78), rgba(14,8,16,0)); }
.bt-title { flex: 1; text-align: center; font: 800 17px var(--head, Georgia, serif); color: #ffe2a0; text-shadow: 0 2px 6px #000; letter-spacing: .04em; }
.bt-tools { display: flex; gap: 6px; }
.bt-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid rgba(255,226,160,.55); background: linear-gradient(#4a3424, #2a1c14); color: #ffeccc; font: 800 13px var(--body); box-shadow: 0 2px 0 #120a06, inset 0 1px 0 rgba(255,255,255,.18); cursor: pointer; }
.bt-chip svg { width: 15px; height: 15px; }
.bt-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 #120a06; }
.bt-chip.quit { background: linear-gradient(#5a2620, #33140f); }
.bt-chip.auto .bt-auto-dot { width: 10px; height: 10px; border-radius: 50%; background: #6a5a50; box-shadow: inset 0 1px 2px #000; }
.bt-chip.auto.on { background: linear-gradient(#3f8a3c, #1f4d1c); border-color: #b8f0a0; }
.bt-chip.auto.on .bt-auto-dot { background: #b8ff9a; box-shadow: 0 0 8px #b8ff9a; animation: btpulse 1s infinite; }
@media (max-width: 420px) { .bt-chip.quit > span:not(.ic) { display: none; } .bt-chip { padding: 0 9px; } .bt-title { font-size: 15px; } }
.bt-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; gap: 10px; padding: 10px 10px calc(12px + var(--safe-b, 0px)); background: linear-gradient(rgba(14,8,16,0), rgba(14,8,16,.85) 45%); transition: transform .4s, opacity .4s; }
.bt-dock.gone { transform: translateY(110%); opacity: 0; pointer-events: none; }
.bt-card { --e: 0; --rc: #4aa3ff; position: relative; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-card.r-epic { --rc: #b45cf0; } .bt-card.r-mythic { --rc: #f2b630; }
.bt-ring { width: 70px; height: 70px; border-radius: 50%; padding: 5px; background: conic-gradient(#ffd34a calc(var(--e) * 1%), rgba(40,30,30,.85) 0); box-shadow: 0 0 0 2px var(--rc), 0 4px 10px rgba(0,0,0,.6); transition: box-shadow .2s; }
.bt-por { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 55%, #fff), color-mix(in srgb, var(--rc) 45%, #120a10)); }
.bt-por img, .bt-por svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-nm { max-width: 92px; font: 800 10.5px/1.15 var(--body); text-align: center; color: #ffeccc; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-tap { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) scale(.6); padding: 2px 7px; border-radius: 99px; background: linear-gradient(#ffe68a, #e9a420); color: #3a1c04; font: 900 10px var(--body); opacity: 0; transition: .2s; pointer-events: none; }
.bt-hp { width: 64px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.6); overflow: hidden; } .bt-hp i { display: block; height: 100%; background: linear-gradient(#a8f0b0, #3fae5a); transition: width .2s; }
.bt-card.ready .bt-ring { box-shadow: 0 0 0 3px #ffe68a, 0 0 18px 4px rgba(255,200,80,.85), 0 4px 10px rgba(0,0,0,.6); animation: btglow 1s ease-in-out infinite; }
.bt-card.ready .bt-tap { opacity: 1; transform: translateX(-50%) scale(1); }
.bt-card.fired .bt-ring { animation: btfire .5s ease-out; }
.bt-card.dead { filter: grayscale(1) brightness(.55); pointer-events: none; }
.bt-dock.replay .bt-card { pointer-events: none; }
@keyframes btglow { 50% { transform: scale(1.06); } }
@keyframes btfire { 0% { transform: scale(1.25); filter: brightness(2); } 100% { transform: scale(1); } }
@keyframes btpulse { 50% { opacity: .45; } }
.bt-result { position: absolute; inset: 0; z-index: 4; display: none; align-items: flex-end; justify-content: center; padding: 70px 10px calc(10px + var(--safe-b, 0px)); background: rgba(10,6,12,.55); overflow-y: auto; }
.bt-result.on { display: flex; animation: btin .35s ease-out; }
.bt-res-card { width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, var(--ink2), var(--ink)); box-shadow: 0 10px 40px rgba(0,0,0,.6); border-top: 4px solid transparent; border-image: var(--kilim-band) 4; }
.bt-res-card h3 { text-align: center; font-size: 24px; }
@keyframes btin { from { opacity: 0; } }
.b3-bar u { position: absolute; left: 0; bottom: -5px; height: 3px; width: 0; background: linear-gradient(90deg, #e9a420, #ffe68a); border-radius: 2px; box-shadow: 0 0 3px rgba(255,200,80,.6); transition: width .15s; }
.b3-bar u.full { background: #fff2a8; box-shadow: 0 0 8px #ffd34a; animation: btpulse .6s infinite; }
.reduce-motion .bt-card.ready .bt-ring, .reduce-motion .b3-bar u.full { animation: none; }

/* ---------- Kahraman nadirliği (WoS renk dili: mavi Nadir, mor Destansı, altın Efsanevi) ---------- */
.hero-tile { --rc: #4aa3ff; overflow: hidden; }
.hero-tile.r-epic { --rc: #b45cf0; } .hero-tile.r-mythic { --rc: #f2b630; }
.hero-tile { border: 2px solid color-mix(in srgb, var(--rc) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, transparent), rgba(255,255,255,.03) 60%); box-shadow: inset 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent); }
.hero-tile.r-mythic { box-shadow: inset 0 0 18px rgba(242,182,48,.35), 0 0 10px rgba(242,182,48,.25); }
.hero-tile.sel { border-color: #fff2c0; }
.rar-tag { position: absolute; left: 0; top: 0; padding: 2px 7px 2px 6px; border-radius: 0 0 10px 0; background: var(--rc); color: #1a0f08; font: 900 9.5px var(--body); letter-spacing: .04em; text-transform: uppercase; z-index: 2; }
.gen-tag { position: absolute; right: 5px; top: 4px; min-width: 22px; padding: 1px 5px; border-radius: 6px; background: rgba(10,6,12,.7); border: 1px solid color-mix(in srgb, var(--rc) 70%, transparent); color: #ffeccc; font: 800 9.5px var(--body); z-index: 2; }
.hs-rar { padding: 3px 9px; border-radius: 99px; font: 800 11px var(--body); color: #1a0f08; background: #4aa3ff; }
.hs-rar.r-epic { background: #c27af5; } .hs-rar.r-mythic { background: linear-gradient(#ffe08a, #e9a420); }
.trait-card { border-left: 4px solid #4aa3ff; } .trait-card.r-epic { border-left-color: #b45cf0; } .trait-card.r-mythic { border-left-color: #f2b630; }
/* game-icons siluetleri: hafif gölge ile kabartma hissi */
.ic svg.gi { filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); overflow: visible; }
.troop-art { position: relative; height: 170px; margin: -4px -4px 4px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.12), rgba(0,0,0,.35)) center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: .4; transition: opacity .4s; }
.troop-art.on { opacity: 1; background-size: contain; background-color: rgba(0,0,0,.2); }
.tier-big { position: absolute; left: 10px; top: 8px; padding: 4px 12px; border-radius: 10px; font: 900 22px var(--head, Georgia, serif); color: #2a1606; background: linear-gradient(#fff1c0, #e9b44c); box-shadow: 0 2px 0 #6a4410, 0 4px 10px rgba(0,0,0,.5); }
.tier-big.kor { color: #fff1e0; background: linear-gradient(#ff9a4a, #b0301a); box-shadow: 0 2px 0 #4a1006, 0 0 14px rgba(255,120,40,.6); }

/* Her panel kendi katmanını tutar: alttaki kahraman kartı rozetleri detay vitrininin üzerine çıkamaz. */
.sheet-wrap { isolation: isolate; }
.hero-tile { isolation: isolate; }
.hero-tile.card3d > .rar-tag, .hero-tile.card3d > .gen-tag { position: absolute; }

/* Ülke seçici: mobil yerel seçim arayüzü ve masaüstü klavye desteği. */
.flag-picker{flex:1;min-width:0;width:100%;padding:12px 10px;border:1px solid #a587544f;border-radius:9px;background:#332d40;color:#f4ead6;font:inherit;cursor:pointer;}.flag-picker:focus-visible{outline:2px solid #e9b44c;outline-offset:2px}.flag-picker option{background:#332d40;color:#f4ead6;}

/* Keşif düşman kartları: portre ve sınıf simgesi ayrı ölçülendirilir. */
.enemy-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start;}
.enemy-row .e{width:auto;min-width:0;gap:5px;line-height:1.35;overflow-wrap:anywhere;}
.enemy-row .enemy-portrait{display:block;flex:none;width:52px;height:52px;}
.enemy-row .enemy-portrait>svg{display:block;width:52px;height:52px;}
.enemy-row .e>.enemy-class{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;line-height:1.25;}
.enemy-row .e .ic{width:15px;height:15px;min-width:15px;max-width:15px;flex:none;}
.enemy-row .e>span:not(.enemy-portrait){max-width:100%;}
.enemy-row+.cmp{margin-top:8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:start;}
.enemy-row+.cmp>div{min-width:0;display:flex;flex-direction:column;gap:4px;}
.sheet-body{scrollbar-width:thin;scrollbar-color:#a68651 #272132;scrollbar-gutter:stable;color-scheme:dark;}
.sheet-body::-webkit-scrollbar{width:7px;height:7px;}
.sheet-body::-webkit-scrollbar-track{background:#272132;border-radius:8px;}
.sheet-body::-webkit-scrollbar-thumb{background:#8f744b;border:2px solid #272132;border-radius:8px;}
.sheet-body::-webkit-scrollbar-thumb:hover{background:#c19e64;}
.sheet-body::-webkit-scrollbar-button{display:none;width:0;height:0;}
@media(max-width:340px){.enemy-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;}}

.enemy-row .enemy-class .ic>svg{display:block;width:15px;height:15px;max-width:15px;max-height:15px;}
.enemy-row .e>span:nth-child(2){min-height:2.7em;display:flex;align-items:center;justify-content:center;}
/* dünya: kaynak yenileme sayacı */
.wrefresh { position: absolute; left: 50%; top: calc(104px + var(--safe-t, 0px)); transform: translateX(-50%); max-width: 230px; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; font-size: 11px !important; border-radius: 99px; background: rgba(20,14,22,.72); border: 1px solid rgba(233,180,76,.45); color: #ffe6b0; font: 800 12px var(--body); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; }

/* GM: dünya etiketi ve panel rozeti */
.wlabel.city.gm { color: #ffe08a; border-color: #ffcf4a !important; box-shadow: 0 0 10px rgba(255,207,74,.65); text-shadow: 0 0 6px rgba(255,200,80,.9); }
.pill.gm { background: linear-gradient(180deg,#f3c76a,#b8862b); color: #2a1b10; font-weight: 800; }

/* ===== UI88 (Claude): WoS düzeni — özgün çizim; şehir ekranı en çok ~%25 arayüz ===== */
:root{--u88-steel1:#2b3550;--u88-steel2:#161c2e;--u88-gold:#e2b45a;--u88-gold2:#8a6326;--u88-green1:#7fd65a;--u88-green2:#2f8f2a;--u88-out:0 1px 0 #000,1px 0 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 2px 3px rgba(0,0,0,.6)}
#hud .topbar{background:linear-gradient(180deg,rgba(14,18,32,.92),rgba(14,18,32,.55) 70%,rgba(14,18,32,0));padding-bottom:6px}
#hud .topbar .avatar{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 2px var(--u88-gold),0 0 0 4px #1b1f2e,0 3px 8px rgba(0,0,0,.6)}
#hud .topbar .avatar .lvl{background:linear-gradient(#ffd77a,#c48a2c);color:#2a1a05;border:2px solid #1b1f2e;font-weight:900;min-width:20px;height:20px;line-height:16px;border-radius:10px;font-size:11px}
#hud .topbar .who .nm{color:#fff;text-shadow:var(--u88-out);font-size:15px}
#hud .topbar .who .pow{background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25));border:1px solid rgba(226,180,90,.55);border-radius:4px 12px 12px 4px;padding:1px 10px 1px 6px;color:#ffe9b0;text-shadow:var(--u88-out)}
#hud .topbar [class*=res]{gap:4px}
#hud .topbar .res,#hud .topbar .rescell,#hud .topbar .res-cell{border-radius:14px}
#hud .side-right .rbtn .ring{width:46px;height:46px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#3e4a6e,#1a2036 75%);box-shadow:inset 0 0 0 2px var(--u88-gold),inset 0 0 0 3px #0b0e18,0 3px 6px rgba(0,0,0,.55)}
#hud .side-right .rbtn{font-size:10.5px;font-weight:800;color:#fff;text-shadow:var(--u88-out)}
#hud .side-left .side-chip{background:linear-gradient(90deg,rgba(10,14,26,.78),rgba(10,14,26,.35));border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--u88-gold);border-radius:4px 16px 16px 4px;padding:3px 10px 3px 6px;min-height:0;transform:scale(.92);transform-origin:left center}
#hud .quest-card{max-width:78%;margin-right:auto;border-radius:6px 22px 22px 6px;background:linear-gradient(90deg,rgba(20,26,44,.95),rgba(20,26,44,.8));border:1px solid rgba(226,180,90,.5);border-left:4px solid var(--u88-gold);padding:4px 8px 4px 4px;box-shadow:0 4px 10px rgba(0,0,0,.5)}
#hud .quest-card .por svg{width:36px;height:36px}
#hud .quest-card .t{font-size:13px;color:#fff;text-shadow:var(--u88-out)}
#hud .quest-card .pill.cini{background:linear-gradient(#9be86f,#3fa335)!important;color:#0d2a08!important;border:0;border-radius:14px;font-weight:900;padding:5px 14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.4);text-shadow:none}
#hud .nav{background:linear-gradient(180deg,var(--u88-steel1),var(--u88-steel2));border-top:2px solid var(--u88-gold2);box-shadow:0 -1px 0 rgba(255,220,150,.35),0 -6px 14px rgba(0,0,0,.45);height:auto;min-height:64px;padding:4px 4px calc(4px + env(safe-area-inset-bottom));align-items:flex-end;overflow:visible}
#hud .nav button{color:#fff;font-weight:800;font-size:10.5px;letter-spacing:-.2px;text-shadow:var(--u88-out);background:none!important;border:0;flex:1;padding:2px 0;white-space:nowrap;overflow:visible}
#hud .nav button .ic svg{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
#hud .nav button.on{color:#ffe08a}
#hud .nav button.on .ic svg{filter:drop-shadow(0 0 6px rgba(255,210,110,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
#hud .nav button[aria-label="Dünya"],#hud .nav button[aria-label="World"]{order:99;flex:0 0 70px;position:relative;margin:-28px 4px 0 0}
#hud .nav button[aria-label="Dünya"] .ic,#hud .nav button[aria-label="World"] .ic{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 2px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#5fa8e8,#1d4f8f 70%);box-shadow:0 0 0 3px var(--u88-gold),0 0 0 5px #10172a,0 6px 12px rgba(0,0,0,.6)}
#hud .nav button[aria-label="Dünya"] .ic svg,#hud .nav button[aria-label="World"] .ic svg{width:42px;height:42px}
#hud .nav button .lbl{overflow:visible;text-overflow:clip;max-width:none}
#hud .side-left .side-chip *{color:#fff}
#hud .side-left .side-chip small,#hud .side-left .side-chip .sub{color:#c9cfe0}
/* UI88 pencereler: çelik-mavi gövde, altın kenarlı başlık şeridi, WoS tarzı renkli düğmeler */
#sheets .sheet{background:linear-gradient(180deg,#26304a,#1a2135 40%,#151b2b);border:2px solid #3b4870;border-top:0;border-radius:14px 14px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.55)}
#sheets .sheet-head{background:linear-gradient(180deg,#3c4a74,#28324f);border-bottom:2px solid var(--u88-gold2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 rgba(226,180,90,.35);border-radius:12px 12px 0 0;position:relative}
#sheets .sheet-head h2{color:#fff3d0;font-weight:900;letter-spacing:.5px;text-shadow:var(--u88-out)}
#sheets .sheet-head .icon-btn{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#e0645a,#9b2a24);border:2px solid #f0c8a0;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.5)}
#sheets .btn{border-radius:10px;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.45)}
#sheets .btn.cini{background:linear-gradient(#ffd56a,#e89a1c);color:#3a2205;border:1px solid #8a5a10}
#sheets .btn.primary,#sheets .btn.go{background:linear-gradient(#9be86f,#3fa335);color:#0d2a08;border:1px solid #2a6a22}
#sheets .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(140,160,210,.25);border-radius:10px}
#sheets .seg button.on{background:linear-gradient(#ffd56a,#e89a1c);color:#3a2205}

/* ===== UI89 (Claude): parlak simgeler, ışıltı animasyonları, sol çipler, sekmeler ===== */
#hud .nav .gi path,#hud .side-right .gi path,#hud .topbar .pow .gi path{fill:url(#u89gold);stroke:#3a2306;stroke-width:16px;paint-order:stroke;stroke-linejoin:round}
#hud .nav button.on .gi path{fill:url(#u89act)}
#hud .nav button[aria-label="Dünya"] .gi path,#hud .nav button[aria-label="World"] .gi path{fill:url(#u89ice);stroke:#0d2a4a}
#hud .side-left .gi path{fill:url(#u89ice);stroke:#0d2440;stroke-width:16px;paint-order:stroke}
@keyframes u89sheen{0%,72%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(240%) skewX(-20deg)}}
@keyframes u89pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,70,60,.7)}50%{transform:scale(1.12);box-shadow:0 0 0 5px rgba(255,70,60,0)}}
@keyframes u89glow{0%,100%{box-shadow:0 0 0 3px var(--u88-gold),0 0 0 5px #10172a,0 6px 12px rgba(0,0,0,.6),0 0 0 rgba(120,200,255,0)}50%{box-shadow:0 0 0 3px #ffe9a8,0 0 0 5px #10172a,0 6px 12px rgba(0,0,0,.6),0 0 18px rgba(120,200,255,.85)}}
#hud .side-right .rbtn .ring,#hud .nav button[aria-label="Dünya"] .ic,#hud .nav button[aria-label="World"] .ic,#sheets .btn.cini,#sheets .btn.primary,#hud .quest-card .pill.cini{position:relative;overflow:hidden}
#hud .side-right .rbtn .ring::after,#hud .nav button[aria-label="Dünya"] .ic::after,#hud .nav button[aria-label="World"] .ic::after,#sheets .btn.cini::after,#sheets .btn.primary::after,#hud .quest-card .pill.cini::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:u89sheen 3.6s ease-in-out infinite;pointer-events:none}
#hud .side-right .rbtn:nth-child(2) .ring::after{animation-delay:.5s}#hud .side-right .rbtn:nth-child(3) .ring::after{animation-delay:1s}#hud .side-right .rbtn:nth-child(4) .ring::after{animation-delay:1.5s}#hud .side-right .rbtn:nth-child(5) .ring::after{animation-delay:2s}
#hud .nav button[aria-label="Dünya"] .ic,#hud .nav button[aria-label="World"] .ic{animation:u89glow 2.8s ease-in-out infinite}
#hud :is(.badge,.dot,.count,.rb-badge,.n){animation:u89pulse 1.6s ease-in-out infinite}
.reduce-motion #hud *,.reduce-motion #sheets *{animation:none!important}
/* sol durum çipleri: kapsül + yuvarlak simge rozeti */
#hud .side-left{gap:6px}
#hud .side-left .side-chip{transform:none;display:flex;align-items:center;gap:6px;padding:2px 12px 2px 2px;border:0;border-radius:20px;background:linear-gradient(180deg,rgba(40,52,84,.92),rgba(18,24,42,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(226,180,90,.55),0 3px 6px rgba(0,0,0,.45)}
#hud .side-left .side-chip>.ic{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a5d8f,#142540 75%);box-shadow:inset 0 0 0 2px #7fb8e8,0 1px 3px rgba(0,0,0,.6)}
#hud .side-left .side-chip>.ic svg{width:20px;height:20px}
#hud .side-left .side-chip.good b,#hud .side-left .side-chip .good{color:#8ff07a}
/* pencere sekmeleri: kaydırma yok, hepsi sığar (WoS sekme şeridi) */
#sheets .sheet-body>.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;overflow:visible!important;padding:3px;border-radius:10px;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
#sheets .sheet-body>.seg>button{min-width:0!important;width:auto!important;padding:7px 2px!important;font-size:11.5px!important;line-height:1.15;white-space:normal!important;word-break:normal;overflow-wrap:normal;hyphens:manual;letter-spacing:-.2px;text-align:center;border-radius:7px!important;min-height:40px}
#sheets .sheet-body>.seg>button.ghost{background:linear-gradient(180deg,#34405f,#232c45)!important;color:#c8d2ec!important;border:1px solid rgba(255,255,255,.08)!important}
#sheets .sheet-body>.seg>button.primary{background:linear-gradient(#ffe48a,#e89a1c)!important;color:#3a2205!important;border:1px solid #8a5a10!important}
#sheets .sheet-body>.seg>button.primary::after{display:none}
/* ödül çipleri */
#sheets .card .c{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:8px}
#sheets .sheet-body>.seg>button.on{background:linear-gradient(#ffe48a,#e89a1c)!important;color:#3a2205!important;border:1px solid #8a5a10!important}
#sheets .sheet-body>.seg>button:not(.on):not(.primary){background:linear-gradient(180deg,#34405f,#232c45);color:#c8d2ec;border:1px solid rgba(255,255,255,.08)}
@media (max-width:420px){#sheets .sheet-body>.seg>button{font-size:10.5px!important}}
/* mağaza: WoS tarzı paket kartları */
#sheets .shop-head{background:linear-gradient(90deg,#1c3a63,#24507f 60%,#1c3a63);border:1px solid #6fb2ea;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.5);border-radius:12px}
#sheets .gem-packs{gap:10px}
#sheets .gem-pack{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;border-radius:12px;background:radial-gradient(120% 80% at 50% 0%,#3d76b8 0%,#1e3d6a 45%,#14243f 100%);border:2px solid #5d9ad6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.5)}
#sheets .gem-pack::before{content:"";position:absolute;inset:-40% -40% auto;height:120%;background:radial-gradient(circle,rgba(160,220,255,.35),transparent 60%);pointer-events:none}
#sheets .gem-pack .gp-ic{display:grid;place-items:center;width:64px;height:64px;filter:drop-shadow(0 0 10px rgba(140,210,255,.8))}
#sheets .gem-pack .gp-ic svg{width:56px;height:56px}
#sheets .gem-pack .gp-ic .gi path{fill:url(#u89ice);stroke:#0d2a4a;stroke-width:14px;paint-order:stroke}
#sheets .gem-pack .gp-n{position:relative;font-size:22px;font-weight:900;color:#fff;text-shadow:var(--u88-out);margin-top:2px}
#sheets .gem-pack .small{color:#cfe3ff}
#sheets .gem-pack .btn{width:100%;justify-content:center;background:linear-gradient(#9be86f,#3fa335)!important;color:#0d2a08!important;border:1px solid #2a6a22!important}
#sheets .gem-pack:nth-child(n+3)::after{content:"+%10";position:absolute;top:8px;right:-24px;transform:rotate(35deg);background:linear-gradient(#ff6b5a,#c62c1e);color:#fff;font-size:10px;font-weight:900;padding:2px 26px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
#sheets .gem-pack:nth-child(n+3)::after{content:none}
#sheets .shop-card{border-radius:12px;background:radial-gradient(120% 80% at 50% 0%,#38507e,#1b2440);border:2px solid #4f6aa6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.45)}
#sheets .shop-card .sc-price{background:linear-gradient(#9be86f,#3fa335);color:#0d2a08;border-radius:10px;padding:3px 10px;font-weight:900}

/* ===== UI90 (Claude): oyuna uygun Osmanlı/Anadolu paleti (ceviz, bakır, altın, İznik turkuazı), WoS üst şerit, eş zamanlı ışıltı ===== */
:root{--k-wal1:#4a3326;--k-wal2:#2a1c16;--k-wal3:#1a110d;--k-cop:#c9853e;--k-gold:#e8bf62;--k-gold2:#9a6a22;--k-turq:#35b3a5;--k-turq2:#17675f;--k-burg:#7d2e2a;--u88-gold:#e8bf62;--u88-gold2:#9a6a22;--u88-steel1:#4a3326;--u88-steel2:#22170f}
/* eş zamanlı ışıltı: gecikmeler kalkar */
#hud .side-right .rbtn .ring::after{animation-delay:0s!important}
/* Dünya/Şehir düğmesi (data-k) */
#hud .nav button[data-k="world"]{order:99;flex:0 0 70px;position:relative;margin:-28px 4px 0 0}
#hud .nav button[data-k="world"] .ic{position:relative;overflow:hidden;display:grid;place-items:center;width:60px;height:60px;margin:0 auto 2px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#5fd6c6,var(--k-turq2) 72%);animation:u89glow 2.8s ease-in-out infinite}
#hud .nav button[data-k="world"] .ic::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:u89sheen 3.6s ease-in-out infinite;pointer-events:none}
#hud .nav button[data-k="world"] .ic svg{width:40px;height:40px}
#hud .nav button[data-k="world"] .gi path{fill:url(#u89ice);stroke:#0b3a35}
#hud .nav button[data-k="world"] .lbl{color:#fff}
@keyframes u89glow{0%,100%{box-shadow:0 0 0 3px var(--k-gold),0 0 0 5px var(--k-wal3),0 6px 12px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 3px #fff0bf,0 0 0 5px var(--k-wal3),0 6px 12px rgba(0,0,0,.6),0 0 18px rgba(80,220,200,.8)}}
/* alt çubuk: ceviz + kilim şeridi */
#hud .nav{background:linear-gradient(180deg,var(--k-wal1),var(--k-wal2));border-top:2px solid var(--k-gold2);box-shadow:0 -3px 0 -1px rgba(232,191,98,.35),0 -6px 14px rgba(0,0,0,.45)}
#hud .nav::before{content:none}
/* üst şerit: WoS gibi ayrı kaynak kapsülleri (+ ile) */
#hud .topbar{background:linear-gradient(180deg,rgba(30,20,15,.9),rgba(30,20,15,.5) 70%,rgba(30,20,15,0))}
#hud .topbar .res-strip{background:none!important;border:0!important;box-shadow:none!important;display:grid!important;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 6px}
#hud .topbar .res-chip{position:relative;display:flex;align-items:center;gap:4px;padding:3px 18px 3px 3px!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(60,40,30,.95),rgba(26,17,13,.92))!important;border:1px solid var(--k-gold2)!important;box-shadow:inset 0 1px 0 rgba(255,230,180,.18),0 2px 4px rgba(0,0,0,.5)!important;min-width:0}
#hud .topbar .res-chip>.ic{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#6b4a36,#2a1c16);box-shadow:inset 0 0 0 1px var(--k-gold2)}
#hud .topbar .res-chip>.ic svg{width:17px;height:17px}
#hud .topbar .res-chip .stack{min-width:0;line-height:1.05}
#hud .topbar .res-chip .v{color:#fff;font-weight:900;font-size:12.5px;text-shadow:var(--u88-out)}
#hud .topbar .res-chip .s{font-size:9px}
#hud .topbar .res-chip::after{content:"+";position:absolute;right:3px;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:linear-gradient(#9be86f,#3fa335);color:#0d2a08;font:900 11px/13px sans-serif;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.6)}
#hud .topbar .gem-pill{background:linear-gradient(180deg,#1f6a62,#0f3a35)!important;border:1px solid var(--k-turq)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.5)!important}
#hud .topbar .who .pow{border-color:var(--k-gold2);background:linear-gradient(90deg,rgba(40,25,18,.9),rgba(40,25,18,.3))}
/* sağ sütun ve sol çipler: ceviz/bakır */
#hud .side-right .rbtn .ring{background:radial-gradient(circle at 50% 35%,#6b4a36,#2a1c16 75%);box-shadow:inset 0 0 0 2px var(--k-gold),inset 0 0 0 3px var(--k-wal3),0 3px 6px rgba(0,0,0,.55)}
#hud .side-left .side-chip{background:linear-gradient(180deg,rgba(74,51,38,.94),rgba(30,20,15,.9));box-shadow:inset 0 1px 0 rgba(255,230,180,.16),0 0 0 1px rgba(232,191,98,.55),0 3px 6px rgba(0,0,0,.45)}
#hud .side-left .side-chip>.ic{background:radial-gradient(circle at 50% 35%,#2f9c90,#0f3a35 75%);box-shadow:inset 0 0 0 2px #7fe0d2,0 1px 3px rgba(0,0,0,.6)}
#hud .side-left .gi path{fill:url(#u89ice);stroke:#0b3a35}
#hud .quest-card{background:linear-gradient(90deg,rgba(42,28,22,.96),rgba(42,28,22,.82));border-color:rgba(232,191,98,.55);border-left-color:var(--k-gold)}
/* pencereler */
#sheets .sheet{background:linear-gradient(180deg,#3a281e,#26190f 40%,#1c130d);border-color:#6b4a2e}
#sheets .sheet-head{background:linear-gradient(180deg,#8a3a2f,var(--k-burg) 55%,#5a201c);border-bottom:2px solid var(--k-gold)}
#sheets .sheet-head h2{color:#fff1cf}
#sheets .card{background:linear-gradient(180deg,rgba(255,230,190,.06),rgba(255,230,190,.02));border-color:rgba(232,191,98,.25)}
#sheets .sheet-body>.seg>button:not(.on):not(.primary),#sheets .sheet-body>.seg>button.ghost{background:linear-gradient(180deg,#5a3f2e,#3a281e)!important;color:#f0dcc0!important;border:1px solid rgba(232,191,98,.2)!important}
#sheets .shop-head{background:linear-gradient(90deg,#14504a,#1f6a62 60%,#14504a);border-color:var(--k-turq)}
#sheets .gem-pack{background:radial-gradient(120% 80% at 50% 0%,#2f9c90 0%,#17675f 45%,#0d3530 100%);border-color:#5fd6c6}
#sheets .shop-card{background:radial-gradient(120% 80% at 50% 0%,#6b4a36,#2a1c16);border-color:#9a6a22}
#hud .nav{display:flex!important;grid-template-columns:none!important}
#hud .nav>button:not([data-k="world"]){flex:1 1 0;min-width:0}
/* UI92: alt çubuğun üstündeki eski kilim bandı (border-image) kaldırıldı; tek ince sade kenar */
#hud .nav{border-image:none!important;border-top:1px solid rgba(232,191,98,.35)!important;box-shadow:0 -6px 14px rgba(0,0,0,.45)!important}
/* UI93: pencere kapat (X) düğmesi tam ortalı */
#sheets .sheet-head .icon-btn{display:grid!important;place-items:center!important;padding:0!important;line-height:0!important}
#sheets .sheet-head .icon-btn>*{margin:0!important}
#sheets .sheet-head .icon-btn svg{display:block;width:18px;height:18px;margin:auto!important}
#sheets .sheet-head .icon-btn .ic{display:grid;place-items:center;width:100%;height:100%}


/* UI97: one compact overlay system; inherited legacy badge shell removed. */
.city-ov .lvbadge,.city-ov .lvbadge.named,.city-ov .lvbadge.kor{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;width:max-content;height:auto;padding:0;margin:0 0 0 -18px;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none;line-height:1.1;}
.city-ov .lvbadge>b{display:block;order:2;min-width:22px;padding:2px 5px;border:1px solid #b79b62;border-radius:4px;background:#302b24e8;color:#e8d9b9;font:700 10px/1.2 var(--body);box-shadow:0 1px 3px #0005;}
.city-ov .lvbadge.kor>b{border-color:#c09354;background:#4a2822ec;color:#ffe5ad;}
.city-ov .lvbadge>span,.city-ov .lvbadge.named>span{display:none;font:600 10px/1.2 var(--body);padding:2px 5px;background:#272722df;color:#f2e9d8;border-radius:4px;white-space:nowrap;order:3;}
.city-ov .lvbadge.named>span{display:block;}
.city-ov .city-action{order:0;display:flex;align-items:center;justify-content:center;gap:4px;min-width:36px;min-height:36px;padding:2px 5px;margin:0;border:1px solid #b99b62;border-radius:9px;background:linear-gradient(#f0e2bf,#c5ae7c);color:#30291d;box-shadow:0 2px 4px #0005;pointer-events:auto;cursor:pointer;animation:none;}
.city-ov .city-action>i{display:grid;place-items:center;width:25px;height:25px;background:none;border:0;box-shadow:none;}
.city-ov .city-action svg{display:block;width:22px;height:22px;}
.city-ov .city-action>em{font:700 10px/1.2 var(--body);font-style:normal;white-space:nowrap;}
.city-ov .ca-train>em{display:none;}
.city-ov .ca-done{background:linear-gradient(#d9e9bd,#92b477);border-color:#527446;color:#233d24;}
.city-ov .ca-heal{background:linear-gradient(#f7ded1,#c98773);border-color:#9e594b;color:#722e28;}
.city-ov .ca-wait{background:linear-gradient(#465b57,#273d39);color:#e5dfc6;border-color:#9b996e;}
.city-ov .pmark{display:grid;place-items:center;width:28px;height:28px;padding:0;color:#e9d7aa;background:#31433ee8;border:1px solid #b69b63;border-radius:7px;box-shadow:0 2px 4px #0004;animation:none;}
.city-ov .pmark svg{width:17px;height:17px;}.city-ov .pmark.lock{opacity:.65;}
#hud .nav{min-height:52px;gap:2px;padding:3px 5px calc(3px + env(safe-area-inset-bottom));background:linear-gradient(#343d33f5,#202a24fa);border-radius:14px 14px 0 0;}
#hud .nav button{min-height:44px;font-size:10px;font-weight:700;}
#hud .nav button .ic svg{width:24px;height:24px;}
#hud .nav button[data-k="world"]{flex:0 0 54px;margin:-9px 0 0;}
#hud .nav button[data-k="world"] .ic{width:42px;height:42px;margin:0 auto 2px;background:linear-gradient(#427e72,#234c43);animation:none;box-shadow:0 0 0 1px #d5b66b,0 2px 5px #0006;}
#hud .nav button[data-k="world"] .ic svg{width:29px;height:29px;}
#hud .side-right{gap:5px;right:5px;}
#hud .side-right .rbtn{width:46px;min-height:44px;font-size:9px;gap:1px;}
#hud .side-right .rbtn .ring{width:34px;height:34px;border-radius:9px;border:1px solid #b89b65;background:linear-gradient(#43554a,#26382e);box-shadow:inset 0 1px #ffffff22,0 2px 4px #0004;animation:none;}
#hud .side-right .rbtn .ring .ic{width:21px;height:21px;}
#hud .side-right .rbtn .ring svg{width:21px;height:21px;}
#hud .side-right .rbtn .lb{font-size:9px;max-width:46px;}
#hud .side-right .rbtn .ring::after,#hud .nav button .ic::after{display:none;}
#hud .side-left{gap:5px;}
#hud .side-left .side-chip{height:30px;min-height:30px;min-width:82px;padding:2px 8px 2px 2px;border-radius:7px;background:linear-gradient(#34483fe8,#23372ee8);box-shadow:0 1px 3px #0004;border:1px solid #9c8c5c88;gap:4px;}
#hud .side-left .side-chip>.ic{width:23px;height:23px;flex-basis:23px;background:none;box-shadow:none;}
#hud .side-left .side-chip>.ic svg{width:18px;height:18px;}
#hud .side-left .side-chip .v{font-size:12px;}#hud .side-left .side-chip .k{font-size:9px;}
#hud .topbar .avatar{width:44px;height:44px;box-shadow:0 0 0 1px #c9af73,0 0 0 3px #253b30,0 2px 5px #0006;}
#hud .topbar .who .nm{font-size:13px;}#hud .topbar .res-chip{border-radius:7px!important;}
#hud .topbar{background:linear-gradient(#24372de8,#24372d77 65%,transparent);}
#hud .quest-card{max-width:70%;border-radius:7px;background:#293d31ef;border-color:#a9966277;}
#hud .quest-card .t{font-size:11px;}
#hud :is(.badge,.dot,.count,.rb-badge,.n){animation:none;}
.profile-choice97{display:flex;align-items:end;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px;}.profile-choice97 label{display:flex;flex-direction:column;gap:5px;font-size:11px;text-align:left;}.profile-hero97{padding:8px 10px;border:1px solid #a58e5f;border-radius:7px;color:#f1e5c9;background:#263d33;font:inherit;min-width:130px;}
@media(min-width:700px){#hud .nav{width:min(510px,100%);}}
@media(max-height:650px){#hud .side-right{gap:2px;}#hud .side-right .rbtn{min-height:40px;}}

/* UI97b: shared sheet surfaces in the same Anatolian palette. */
#sheets .sheet{background:linear-gradient(#293e33,#1b2c24 55%,#17251f);border-color:#8c8156;}
#sheets .sheet-head{background:linear-gradient(#465641,#2e4134);border-bottom:1px solid #bba36c;}
#sheets .sheet-head .icon-btn{background:#263a2f;color:#eadcba;border:1px solid #ad9867;border-radius:9px;box-shadow:none;}
#sheets .btn:not(.primary):not(.cini):not(.danger){background:linear-gradient(#53614b,#344433);color:#f1e7cc;border-color:#9e9268;box-shadow:inset 0 1px #ffffff16,0 2px 3px #0003;text-shadow:none;}
#sheets .card{border-color:#a897623d;}
#sheets .sheet-body>.seg>button:not(.on):not(.primary),#sheets .sheet-body>.seg>button.ghost{background:linear-gradient(#435341,#2b3b2f)!important;border-color:#a9956555!important;}
#sheets .quick87{gap:6px;}#sheets .quick87 .btn{font-size:11px;padding:7px 9px;min-height:36px;}

/* Close-camera labels use the same single badge shell. */
.city-ov .lvbadge.named>b{height:auto;min-width:22px;padding:2px 5px;border-radius:4px;background:#302b24e8;color:#e8d9b9;font:700 10px/1.2 var(--body);}
.city-ov .lvbadge.kor.named>b{background:#4a2822ec;color:#ffe5ad;}
#hud .world-tools .icon-btn{width:36px;height:36px;border-radius:8px;background:linear-gradient(#43554a,#26382e);border:1px solid #a58e5f;color:#e9d6a6;box-shadow:0 2px 4px #0004;}
#hud .world-tools .icon-btn .ic{width:20px;height:20px;}


/* City145 final palette override — panel tabs must not fall back to the old green skin. */
#sheets .sheet-body>.seg,
#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs){background:#10283e!important;border-color:#b79a6166!important;box-shadow:inset 0 1px #f5dfad22,0 3px 8px #06152366!important}
#sheets .sheet-body>.seg>button,
#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs)>button,
#sheets button.ghost,#sheets .seg>button:not(.primary):not(.on){background:linear-gradient(180deg,#2b4c64,#183149)!important;color:#eadfca!important;border:1px solid #b79a6166!important;box-shadow:inset 0 1px #f6e5bd1c,0 2px 4px #06152355!important;transition:filter .18s ease,transform .12s ease,background .18s ease!important}
#sheets .sheet-body>.seg>button.on,#sheets .sheet-body>.seg>button.primary,#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs)>button:is(.on,.active,[aria-selected="true"]),#sheets .seg>button.primary{background:linear-gradient(180deg,#f4dc9b,#c18c3c)!important;color:#30230f!important;border-color:#ffe9ad!important;box-shadow:inset 0 1px #fff7dc,0 3px 7px #06152388!important}
#sheets .sheet-body>.seg>button:not(:disabled):hover,#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs)>button:not(:disabled):hover{filter:brightness(1.12)}
#sheets .sheet-body>.seg>button:not(:disabled):active,#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs)>button:not(:disabled):active{transform:translateY(1px) scale(.98)}
@media(prefers-reduced-motion:reduce){#sheets .sheet-body>.seg>button,#sheets .sheet-wrap .sheet :is(.tabs,.seg,.p-tabs,.hero-tabs)>button{transition:none!important}}


/* City145 specificity fix: override the legacy green selector with its exact specificity. */
#sheets .sheet-body>.seg>button:not(.on):not(.primary),
#sheets .sheet-body>.seg>button.ghost{
  background:linear-gradient(180deg,#2b4c64,#183149)!important;
  color:#eadfca!important;border-color:#b79a6166!important;
  box-shadow:inset 0 1px #f6e5bd1c,0 2px 4px #06152355!important;
}