/* ==========================================================================
   Tema: örnek görseldeki koyu panel + ince altın çerçeve tasarımı
   style.css'in üstüne yüklenir ve onu geçersiz kılar.
   ========================================================================== */
:root {
  --bg0: #07090e; --bg1: #0c0f16; --bg2: #121620; --bg3: #181d29;
  --ln: #262d3b; --ln2: #343c4d;
  --gold: #d9a43a; --gold2: #f3c867; --gold3: #8a5e18;
  --txt: #f1f1f3; --mut: #98a1b3;
  --hp: #d6303a; --mp: #2f7de1;
  --head: 'Oswald', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --serif: 'Cinzel', Georgia, serif;
}
body { font-family: Inter, system-ui, sans-serif; }

/* ---------- İkonlar ---------- */
.ico { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; }
.ico svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- Butonlar ---------- */
.btn { font: 600 14px var(--head); letter-spacing: .5px; color: var(--txt); background: linear-gradient(180deg, #1b2130, #11151e);
  border: 1px solid var(--ln2); border-radius: 4px; padding: 9px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 10px rgba(217, 164, 58, .25); }
.btn.gold { background: linear-gradient(180deg, #e8b452 0%, #c28a2c 50%, #9b6718 100%); border: 1px solid #f5d27f; color: #fff;
  text-shadow: 0 1px 2px rgba(60, 30, 0, .8); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .45), 0 2px 6px rgba(0, 0, 0, .5); }
.btn.gold:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.btn.red { background: linear-gradient(180deg, #c2343c, #8d1c22 55%, #64101a); border-color: #e0646b; color: #fff; }
.btn.big { font-size: 18px; padding: 12px; }
.btn.wide { min-width: 200px; }
.icon-btn { width: 42px; height: 42px; border-radius: 4px; border: 1px solid #8a6722; color: var(--gold2);
  background: linear-gradient(180deg, #1c2130, #0e1118); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .5); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn:hover { border-color: var(--gold2); color: #fff3cf; box-shadow: 0 0 12px rgba(217, 164, 58, .45); }
.back-btn { width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--ln2); background: linear-gradient(180deg, #1b2130, #11151e);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.back-btn .ico { width: 18px; height: 18px; }
.back-btn:hover { border-color: var(--gold); color: var(--gold2); }

/* ---------- Paneller ve başlık ---------- */
.panel { background: linear-gradient(180deg, rgba(14, 17, 25, .97), rgba(8, 10, 15, .98)); border: 1px solid var(--ln); border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04); }
.panel.full { inset: 18px; padding: 12px 18px 16px; }
.hdr { gap: 14px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--ln); }
.hdr-title { font: 600 24px var(--head); color: #fff; letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 2px 4px #000; }
.hdr-extra { gap: 10px; }
.gold-pill { background: linear-gradient(180deg, #161b26, #0c0f15); border: 1px solid var(--ln2); border-radius: 4px; padding: 7px 14px; font: 600 16px var(--head); color: #fff; }
.coin { width: 17px; height: 17px; }
.lbl { color: var(--gold2); font: 600 12px var(--head); letter-spacing: 1.2px; }
.muted { color: var(--mut); }
.sp { font: 500 15px var(--head); color: #dfe3ea; } .sp b { color: #fff; font-size: 17px; }

/* ---------- Kasaba ---------- */
.hud-tl { left: 14px; top: 12px; gap: 8px; }
.lvl-badge { font: 600 17px var(--head); color: #fff; letter-spacing: .5px; border: 1px solid var(--ln2); border-radius: 4px; padding: 8px 16px;
  background: linear-gradient(180deg, #1a1f2c, #0d1017); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.lvl-badge span { color: #fff; }
.hud-tl .gold-pill { font-size: 17px; padding: 8px 16px; }
.hud-tr { right: 14px; top: 12px; gap: 6px; }
.title-plate { top: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.title-plate::before, .title-plate::after { display: none; }
.title-plate > span, .title-plate > .wt { display: block; padding: 8px 38px 9px; font: 700 25px var(--serif); white-space: nowrap; color: #fff; letter-spacing: 2px;
  text-shadow: 0 2px 6px #000; background: linear-gradient(180deg, #171b25, #0a0c11);
  border: 2px solid #8a6722; outline: 1px solid #2a2014; outline-offset: 3px; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(243, 200, 103, .25); position: relative; }
.title-plate::after { content: ''; }
.name-tag { font: 600 16px var(--head); color: #fff; letter-spacing: .4px; padding: 5px 16px; border-radius: 3px; border: 1px solid var(--ln2);
  background: linear-gradient(180deg, rgba(24, 28, 39, .95), rgba(10, 12, 18, .95)); box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.name-tag.me { border-color: #8a6722; color: #fff; }
.name-tag:hover { border-color: var(--gold2); }
.mode-bar { bottom: 14px; gap: 10px; padding: 0; background: none; border: 0; }
.mode-btn { min-width: 112px; padding: 11px 16px; font: 600 16px var(--head); letter-spacing: .4px; color: #fff; border-radius: 4px;
  background: linear-gradient(180deg, #1a1f2c, #0c0f15); border: 1px solid #5e4718; box-shadow: 0 3px 10px rgba(0, 0, 0, .7); }
.mode-btn.first { border: 2px solid var(--gold2); box-shadow: 0 0 14px rgba(243, 200, 103, .35), 0 3px 10px rgba(0, 0, 0, .7); }
.mode-btn:hover { border-color: var(--gold2); color: #fff; transform: translateY(-2px); }

/* ---------- Karakter seçimi ---------- */
.cs-body { gap: 16px; }
.cs-grid { gap: 8px; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 150px; align-content: start; }
.cs-card { border-radius: 4px; border: 1px solid #2c3343; overflow: hidden; justify-content: flex-end; padding: 0;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c) 75%, #000) 0%, color-mix(in srgb, var(--c) 30%, #05060a) 70%); }
.cs-card canvas { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.cs-card .nm { width: 100%; text-align: center; font: 600 14px var(--head); color: #fff; padding: 4px 0 5px; margin: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .75)); text-shadow: 0 1px 2px #000; }
.cs-card:hover { border-color: var(--gold); transform: none; }
.cs-card.sel { border: 2px solid var(--gold2); box-shadow: 0 0 14px rgba(243, 200, 103, .55), inset 0 0 18px rgba(243, 200, 103, .25); }
.cs-card .check { color: var(--gold2); text-shadow: 0 0 4px #000; }
.cs-side { width: 360px; background: linear-gradient(180deg, #10131b, #0a0c12); border: 1px solid var(--ln); border-radius: 4px; padding: 10px 16px 14px; }
.cs-portrait { border-radius: 4px; background: radial-gradient(ellipse at 50% 70%, #2a2015, #0b0c10 70%); border: 1px solid #1d2230; display: flex; justify-content: center; }
.cs-name { font: 700 28px var(--serif); color: #fff !important; margin-top: 6px; text-shadow: 0 2px 4px #000; }
.cs-desc { color: #d2d6df; font-size: 13px; }
.sk-row .sk-ic.sm { border-radius: 4px; border: 1px solid color-mix(in srgb, var(--c) 60%, #000); }
.cs-stats { margin: 4px 0 2px; }
.stat-row span { color: #dfe3ea; font: 500 14px var(--head); }
.stat-row b { color: #fff; font: 600 14px var(--head); }
.sbar { height: 8px; background: #1a1f2b; border-radius: 2px; }
.sbar i { background: linear-gradient(180deg, #4aa3ff, #1f63c9) !important; border-radius: 2px; }

/* ---------- Dükkan ---------- */
.cat-list { width: 200px; gap: 4px; }
.cat-btn { font: 500 16px var(--head); color: #dfe3ea; background: linear-gradient(180deg, #151a25, #0e1118); border: 1px solid #1f2532; border-radius: 4px; padding: 11px 14px; gap: 12px; }
.cat-btn .ico { width: 22px; height: 22px; color: #c3c9d4; }
.cat-btn.on { background: linear-gradient(180deg, #b8842e, #7a5418); border-color: #e6b452; color: #fff; }
.cat-btn.on .ico { color: #fff; }
.item-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 178px; gap: 10px; }
.item-card { background: linear-gradient(180deg, #121622, #0b0e15); border: 1px solid #232a38; border-radius: 4px; padding: 8px 8px 10px; }
.item-card .item-icon { height: 104px; border-radius: 3px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 22%, #1a1f2b), #0a0c12 80%); border: 1px solid #1f2532; }
.item-card .nm { font: 500 15px var(--head); color: #fff; }
.item-card .price { font: 600 15px var(--head); color: #fff; }
.item-card:hover { border-color: var(--gold); transform: none; }
.item-card.sel { border: 1px solid var(--gold2); box-shadow: 0 0 12px rgba(243, 200, 103, .35); }
.owned-badge { background: #1d3a1e; border-color: #3f9b46; font-family: var(--head); }
.item-detail { background: linear-gradient(180deg, #10131b, #0a0c12); border: 1px solid var(--ln); border-radius: 4px; }
.det-name { font: 700 20px var(--serif); }

/* ---------- Ekipman ---------- */
.eq-body { gap: 16px; }
.eq-center { justify-content: space-between; gap: 12px; }
.eq-layout { gap: 18px; align-items: stretch; flex: 1; }
.eq-stage { flex: 1; min-width: 380px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 55%, #3a2512 0%, #160f0a 45%, #08090d 80%); border: 1px solid #1d2230; }
.slot-col { justify-content: center; gap: 12px; }
.slot { width: 74px; height: 74px; border-radius: 4px; border: 1px solid #343c4d; background: linear-gradient(180deg, #161b26, #0b0e15); font-size: 38px; }
.slot.filled { border-color: var(--gold); box-shadow: inset 0 0 14px rgba(217, 164, 58, .25); }
.slot .ico.empty { width: 34px; height: 34px; color: #3a4252; }
.slot:hover { border-color: var(--gold2); transform: none; }
.eq-right { width: 250px; background: linear-gradient(180deg, #10131b, #0a0c12); border: 1px solid var(--ln); border-radius: 4px; padding: 14px 18px; }
.eq-who { font: 600 20px var(--head); color: #fff; }
.eq-cls { font: 500 14px var(--head); margin-bottom: 8px; }
.eq-stat { font: 500 16px var(--head); padding: 10px 2px; border-bottom: 1px solid #1a1f2b; }
.eq-stat span { color: #dfe3ea; } .eq-stat b { color: #fff; }
.eq-statsview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: none; border: 0; padding: 0; }
.tab { font: 500 16px var(--head); color: #dfe3ea; background: linear-gradient(180deg, #151a25, #0e1118); border: 1px solid #232a38; border-radius: 4px; padding: 10px 14px; }
.tab.on { background: linear-gradient(180deg, #b8842e, #7a5418); border-color: #e6b452; color: #fff; box-shadow: none; }

/* ---------- Envanter ---------- */
.inv-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.inv-tabs .tab { padding: 7px 16px; font-size: 14px; }
.inv-grid { grid-template-columns: repeat(8, 76px); grid-auto-rows: 76px; gap: 8px; }
.inv-cell { border-radius: 4px; border: 1px solid color-mix(in srgb, var(--rc, #2a3242) 70%, #2a3242); background: radial-gradient(circle, color-mix(in srgb, var(--rc, #2a3242) 30%, #1a1f2b), #0a0c12 80%); }
.inv-cell:empty { background: #0b0e15; border-color: #1c2230; }
.inv-cell.sel { border: 1px solid var(--gold2); box-shadow: 0 0 12px rgba(243, 200, 103, .4); }

/* ---------- Yetenekler ---------- */
.sk-body { gap: 16px; }
.sk-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sk-class { font: 600 18px var(--head); }
.sk-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 10px; flex: none; }
.skill-card { background: linear-gradient(180deg, #121622, #0b0e15); border: 1px solid #232a38; border-radius: 4px; gap: 4px; }
.skill-card .nm { font: 500 15px var(--head); color: #fff; }
.skill-card .lvtxt { font: 500 13px var(--head); color: #c7ccd6; }
.skill-card.sel { border: 1px solid var(--gold2); box-shadow: 0 0 12px rgba(243, 200, 103, .35); }
.skill-card:hover { transform: none; border-color: var(--gold); }
.sk-ic { width: 64px; height: 64px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--c) 70%, #000);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 85%, #fff 10%), color-mix(in srgb, var(--c) 35%, #120a04) 75%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .6), 0 0 8px color-mix(in srgb, var(--c) 35%, transparent); }
.sk-detail { width: 320px; background: linear-gradient(180deg, #10131b, #0a0c12); border: 1px solid var(--ln); border-radius: 4px; }
.sk-desc { background: #10141d; border-color: #1f2532; }

/* ---------- Profil ---------- */
.pf-left { border: 1px solid var(--gold); border-radius: 4px; background: radial-gradient(ellipse at 50% 65%, #2a2015, #0b0c10 70%); box-shadow: none; }
.pf-lv { font: 600 28px var(--head); color: #fff; margin: 0 0 8px; } .pf-lv span { color: var(--mut); font-size: 20px; }
.xpbar { height: 22px; border-radius: 3px; background: #121722; border: 1px solid #262d3b; }
.xpbar i { background: linear-gradient(180deg, #4aa3ff, #1f63c9); box-shadow: none; }
.xpbar span { font: 600 13px var(--head); }
.tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.tiles.main .tile b { font-size: 30px; }
.tile { background: linear-gradient(180deg, #121622, #0b0e15); border: 1px solid #232a38; border-radius: 4px; text-align: center; }
.tile small { font: 500 14px var(--head); color: #c7ccd6; }
.tile b { font: 600 22px var(--head); color: #fff; }
.name-in { font: 600 16px var(--head); border-radius: 4px; }

/* ---------- Diğer modlar ---------- */
.mode-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.mode-card { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 92%, #fff 8%), color-mix(in srgb, var(--mc) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px rgba(0, 0, 0, .5); }
.mode-card:hover { transform: translateY(-2px); border-color: #fff; box-shadow: 0 0 16px color-mix(in srgb, var(--mc) 60%, transparent); }
.mode-card canvas { width: 150px; height: 76px; flex-shrink: 0; }
.mc-txt { text-align: left; }
.mc-title { font: 700 28px var(--head); color: #fff; margin: 0; text-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.mc-sub { font: 500 14px var(--head); color: #fff; }
.mc-rew { font: 500 12px var(--head); color: #ffe7a8; }
.m-1v1 { --mc: #1d6a74; } .m-2v2 { --mc: #2552b0; } .m-3v3 { --mc: #5a2fa6; } .m-1v3 { --mc: #b4521f; }
.m-1v4 { --mc: #a82230; } .m-2v5 { --mc: #a82556; } .m-jug { --mc: #b07d1c; } .m-online { --mc: #23803d; }

/* ---------- Eşleşme ---------- */
.mf-screen { display: flex; flex-direction: column; align-items: center; }
.mf-title { margin-top: 26px; font: 600 28px var(--head); color: #fff; letter-spacing: 1.5px; text-shadow: 0 2px 6px #000; }
.mf-panel { position: static; transform: none; background: none; border: 0; box-shadow: none; width: auto; margin-top: 40px; gap: 14px; animation: none; padding: 0; }
.mf-icon { width: 170px; height: 170px; border: 2px solid #8a6722; color: var(--gold2); padding: 30px;
  background: radial-gradient(circle, #2c2416, #0b0c10 72%); box-shadow: 0 0 40px rgba(217, 164, 58, .35), inset 0 0 24px rgba(0, 0, 0, .7); }
.mf-icon svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 6px rgba(243, 200, 103, .6)); }
.mf-status { font: 600 26px var(--head); color: #fff; text-shadow: 0 2px 6px #000; }
.mf-time { font: 500 16px var(--head); color: #e6e9ef; text-shadow: 0 1px 3px #000; }
.spinner { border-color: rgba(74, 163, 255, .25); border-top-color: #4aa3ff; width: 30px; height: 30px; }
.mf-mute { position: absolute; top: 18px; right: 18px; }

/* ---------- Savaş ---------- */
.b-title { top: 8px; font: 700 24px var(--serif); color: #fff; letter-spacing: 1.5px; text-shadow: 0 2px 6px #000; }
.b-turn { top: 44px; min-width: 96px; padding: 4px 16px 6px; border: 1px solid #8a6722; border-radius: 4px; background: linear-gradient(180deg, rgba(24, 28, 39, .95), rgba(8, 10, 15, .95)); }
.b-turn small { font: 500 15px var(--head); color: #fff; }
.b-turn b { font: 700 34px var(--head); color: #fff; }
.b-turn b.warn { color: #ff5a5a; }
.b-turn.pop { animation: pop2 .4s; }
.b-panel { top: 10px; width: 380px; padding: 6px 8px; gap: 10px; background: linear-gradient(180deg, rgba(18, 21, 30, .92), rgba(8, 10, 15, .92)); border: 1px solid #262d3b; border-radius: 4px; }
.bp-av { width: 62px; height: 62px; border-radius: 4px; border: 2px solid var(--c, #d6303a); background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, #000), #050608 75%); overflow: hidden; }
.bp-av.me { border-color: var(--gold); background: radial-gradient(circle, #3a2a14, #050608 75%); }
.bp-av canvas { width: 62px; height: 62px; border: 0; border-radius: 0; background: none; }
.b-panel canvas { border: 0; }
.bp-nm { font: 600 16px var(--head); color: #fff; margin-bottom: 3px; }
.b-panel.right .bp-nm { text-align: right; }
.bbar { height: 15px; border-radius: 2px; border: 1px solid #000; background: #1c1214; }
.bbar.hp i { background: linear-gradient(180deg, #ef4a52, #b0222b); }
.bbar.mp { background: #0f1626; }
.bbar.mp i { background: linear-gradient(180deg, #4aa3ff, #1f63c9); }
.bbar span { font: 600 11px var(--head); }
.b-ctl { top: 96px; }
.b-msg { top: 112px; font: 600 22px var(--head); color: var(--gold2); }
.skill-bar { bottom: 10px; gap: 6px; padding: 7px; background: rgba(6, 8, 12, .85); border: 1px solid #262d3b; border-radius: 4px; }
.sk-btn { width: 60px; height: 60px; border-radius: 3px; border: 2px solid #b48a35;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 70%, #2a1606), #120a04 78%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .7); }
.sk-btn:hover:not(.dis):not(.empty) { transform: translateY(-3px); box-shadow: 0 0 14px rgba(243, 200, 103, .5); }
.sk-btn.empty { background: linear-gradient(180deg, #11141c, #0a0c11); border: 2px solid #2c3343; cursor: default; box-shadow: none; }
.sk-btn.pot { width: 50px; height: 50px; border-color: #3d7b44; }
.skill-bar .sep { height: 48px; background: #343c4d; }
.res-box { border-radius: 6px; background: linear-gradient(180deg, #10131b, #08090e); }
.res-title { font-family: var(--serif); }

/* ---------- Ayarlar / modallar ---------- */
.modal { border-radius: 6px; padding: 14px 20px 18px; }
.modal .hdr { margin-bottom: 4px; }
.set-row { font: 500 16px var(--head); color: #e6e9ef; border-bottom: 1px solid #1a1f2b; }
.set-row input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #c28a2c, #f3c867); }
.set-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8e0, #e0a93b 60%, #8a5e18); border: 1px solid #5a3d10; cursor: pointer; }
.set-row select { background: linear-gradient(180deg, #161b26, #0c0f15); border: 1px solid var(--ln2); border-radius: 4px; font: 500 14px var(--head); color: #fff; }
.slot-item { border-radius: 4px; background: linear-gradient(180deg, #121622, #0b0e15); }
#tip { border-color: #8a6722; background: #0b0e15f5; border-radius: 4px; }
#toast { border-color: #8a6722; color: #fff; font-family: var(--head); font-weight: 500; letter-spacing: .4px; border-radius: 4px; }

/* Eski stil kurallarının eskitilmiş yazı (.wt) span'larını daraltmasını engelle */
.cat-btn span.wt, .cat-btn .wt { width: auto; text-align: left; }
.stat-row span .wt { width: auto; }
/* Dükkan: 3 sıra eşya + ayrıntı şeridi panele sığsın */
.item-grid { grid-auto-rows: 152px; }
.item-card .item-icon { height: 84px; font-size: 44px; }
.item-detail { min-height: 92px; padding: 10px 14px; }
/* Diğer modlar: görseldeki gibi basık kartlar */
.mode-grid { grid-auto-rows: 120px; align-content: center; }
.icon-btn.txt { font: 600 15px var(--head); letter-spacing: .5px; color: var(--gold2); }

/* ---------- Kasabada yürüme ---------- */
.talk-hint { position: absolute; transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
  font: 600 14px var(--head); color: #fff; padding: 4px 12px; border-radius: 3px; border: 1px solid var(--gold2);
  background: linear-gradient(180deg, rgba(40, 30, 12, .95), rgba(14, 10, 4, .95)); box-shadow: 0 0 12px rgba(243, 200, 103, .35); white-space: nowrap; cursor: pointer; }
.talk-hint.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.talk-hint b { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 4px; border-radius: 3px; background: var(--gold2); color: #1a1205; text-align: center; }
.move-hint { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); font: 500 13px var(--head); color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 3px #000; letter-spacing: .3px; white-space: nowrap; pointer-events: none; }

/* Dokunmatik: tuval üzerinde sayfa kaydırma/yakınlaştırma olmasın, parmakla yürünebilsin */
#scene { touch-action: none; -webkit-tap-highlight-color: transparent; }

/* Görseldeki gibi temiz yüzeyler: butonlardaki kir dokusu kapalı */
.btn::after, .mode-btn::after, .cat-btn::after, .icon-btn::after, .nav-btn::after, .name-tag::after, .lvl-badge::after { display: none; }
.wt { -webkit-mask-image: none; mask-image: none; }
.title-plate { background: none; }

/* 8 yetenek: karakter seçimindeki küçük ikonlar sığsın, savaş çubuğu 8 yuva */
.sk-row { gap: 4px; flex-wrap: nowrap; }
.sk-row .sk-ic.sm { width: 36px; height: 36px; font-size: 18px; }
.sk-btn { width: 56px; height: 56px; font-size: 26px; }
.sk-btn.pot { width: 46px; height: 46px; font-size: 22px; }

/* ---------- Sosyal: üst ikon rozetleri ---------- */
[data-soc] { position: relative; display: inline-flex; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d6303a; color: #fff;
  font: 700 11px/18px var(--head); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #0b0e15; pointer-events: none; }

/* ---------- Başarımlar / Sıralama / Arkadaşlar / Posta pencereleri ---------- */
.soc-modal { width: 620px; }
.soc-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow: auto; padding-right: 4px; }
.soc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; border: 1px solid #232a38; background: linear-gradient(180deg, #121622, #0b0e15); }
.soc-row.got { opacity: .6; }
.soc-ic { width: 44px; height: 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px solid #8a6722; background: radial-gradient(circle, #2c2416, #0b0c10 75%); flex-shrink: 0; }
.soc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.soc-mid b { font: 600 16px var(--head); color: #fff; }
.soc-mid small { font: 400 13px Inter, sans-serif; color: var(--mut); }
.soc-bar { position: relative; height: 14px; border-radius: 2px; background: #121722; border: 1px solid #262d3b; overflow: hidden; margin-top: 2px; }
.soc-bar i { display: block; height: 100%; background: linear-gradient(180deg, #e8b452, #9b6718); }
.soc-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 10px var(--head); color: #fff; text-shadow: 0 0 3px #000; }
.soc-act { flex-shrink: 0; }
.soc-dot { width: 12px; height: 12px; border-radius: 50%; background: #4a5263; flex-shrink: 0; margin: 0 6px; }
.soc-dot.on { background: #3fd068; box-shadow: 0 0 8px #3fd068; }
.soc-table { max-height: 480px; overflow: auto; border: 1px solid #232a38; border-radius: 4px; }
.soc-tr { display: grid; grid-template-columns: 50px 1fr 120px 50px 70px; gap: 6px; padding: 8px 12px; font: 500 15px var(--head); color: #e6e9ef; border-bottom: 1px solid #1a1f2b; }
.soc-tr.head { position: sticky; top: 0; background: #151a25; color: var(--gold2); font-size: 13px; letter-spacing: .5px; }
.soc-tr.me { background: linear-gradient(90deg, rgba(184, 132, 46, .35), rgba(122, 84, 24, .1)); color: #fff; }

/* ---------- Sohbet paneli (kasaba) ---------- */
.chat { position: absolute; left: 14px; bottom: 70px; z-index: 5; }
.chat-toggle { position: relative; font: 600 14px var(--head); color: #fff; padding: 8px 14px; border-radius: 4px; border: 1px solid #5e4718; cursor: pointer;
  background: linear-gradient(180deg, #1a1f2c, #0c0f15); box-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.chat-toggle:hover { border-color: var(--gold2); }
.chat-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d6303a; color: #fff; font: 700 11px/18px var(--head); font-style: normal; display: none; }
.chat .chat-box { display: none; }
.chat.open .chat-toggle { display: none; }
.chat.open .chat-box { display: flex; flex-direction: column; width: 380px; height: 230px; border-radius: 4px; border: 1px solid #262d3b;
  background: linear-gradient(180deg, rgba(14, 17, 25, .96), rgba(8, 10, 15, .96)); box-shadow: 0 8px 24px rgba(0, 0, 0, .7); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #1f2532; }
.chat-head > b { font: 600 15px var(--head); color: #fff; }
.chat-tabs { display: flex; gap: 4px; flex: 1; justify-content: flex-end; }
.chat-tab { font: 500 12px var(--head); color: #c7ccd6; padding: 3px 10px; border-radius: 3px; border: 1px solid #232a38; background: #121622; cursor: pointer; }
.chat-tab.on { background: linear-gradient(180deg, #b8842e, #7a5418); border-color: #e6b452; color: #fff; }
.chat-x { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 14px; }
.chat-body { flex: 1; overflow-y: auto; padding: 6px 10px; font: 400 13px Inter, sans-serif; color: #dfe3ea; }
.chat-msg { margin: 2px 0; line-height: 1.35; word-wrap: break-word; }
.chat-msg b { color: #8fc1ff; font-weight: 600; }
.chat-msg.me b { color: var(--gold2); }
.chat-msg.sys { color: #9fe39f; }
.chat-empty { padding-top: 6px; }
.chat-in { display: flex; gap: 6px; padding: 6px; border-top: 1px solid #1f2532; }
.chat-in input { flex: 1; background: #0c0f15; border: 1px solid #262d3b; border-radius: 3px; color: #fff; padding: 6px 8px; font: 400 13px Inter, sans-serif; outline: none; }
.chat-in input:focus { border-color: var(--gold); }

/* Resim ikonlar: kutuya sığar, emoji ile aynı yeri kaplar */
.it-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.item-card .item-icon { display: flex; align-items: center; justify-content: center; }
.item-card .item-icon .it-img { width: 100%; height: 100%; }
.det-icon { display: flex; align-items: center; justify-content: center; }
.det-icon .it-img { width: 86%; height: 86%; }
.slot > span { display: flex; align-items: center; justify-content: center; width: 78%; height: 78%; }
.inv-cell { position: relative; display: flex; align-items: center; justify-content: center; }
.inv-cell > .it-img { width: 80%; height: 80%; }
.si-ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.sk-btn .ic .it-img { width: 34px; height: 34px; }
.sk-btn .ic:has(.it-img) { display: flex; align-items: center; justify-content: center; }

/* ---- Telefon / tam ekran ---- */
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { height: 100dvh; }
.fs-note { font-size: 12px; max-width: 200px; text-align: right; }
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 9999; background: #04060b; color: #f3c867;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px; font: 600 20px Oswald, sans-serif; letter-spacing: .5px; text-align: center; padding: 24px; }
#rotate-hint .rot-ic { font-size: 64px; animation: rotPhone 1.8s ease-in-out infinite; }
@keyframes rotPhone { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate-hint { display: flex; } }

#backdrop { position: fixed; inset: 0; width: 100%; height: 100%; display: none; filter: blur(14px) brightness(.42) saturate(1.15); transform: scale(1.12); pointer-events: none; }
#game { box-shadow: 0 0 40px rgba(0,0,0,.85); }

/* Geniş ekranda tam sayfa menüler 1280 genişlikte ortada kalır (arkada sahne görünür) */
.panel.full { left: max(18px, calc(50% - 622px)); right: max(18px, calc(50% - 622px)); }

/* ---- Okunabilirlik (WCAG AA: normal yazı ≥ 4.5:1, büyük yazı ≥ 3:1) — bütün oyun için geçerli ---- */
/* Altın butonlarda beyaz yazı açık altın üzerinde ~1.9:1 kalıyordu: koyu kahve yazı (~9:1) */
.btn.gold, .btn.gold:hover:not(:disabled) { color: #1f1405; text-shadow: 0 1px 0 rgba(255, 236, 190, .45); }
.btn.gold { background: linear-gradient(180deg, #eebc5a 0%, #cf9636 55%, #b6802a 100%); }
.btn.gold .ico { color: #1f1405; }
/* Seçili sekme/kategori: beyaz yazı kalır, altın zemin koyulaştırıldı (en açık noktada ≥ 4.5:1) */
.cat-btn.on, .tab.on { background: linear-gradient(180deg, #96681e, #6a4712); }
/* Açılır listelerin seçenekleri koyu zeminde açık yazı */
option { background: #121620; color: #f1f1f3; }

/* öfke topları (Arena 1): ilk 5 turuncu dolunca öfke, sonraki 5 kırmızı büyüme */
.bp-fury{display:flex;align-items:center;gap:3px;margin-top:3px}
.bp-fury i{width:7px;height:7px;border-radius:50%;background:#0008;box-shadow:inset 0 0 0 1px #ffffff22}
.bp-fury i.on{background:#ff7a2a;box-shadow:0 0 4px #ff7a2a}
.bp-fury i.hot{background:#ff2a2a;box-shadow:0 0 5px #ff2a2a}
.bp-fury b{margin-left:5px;font-size:11px;color:#ff6a3a;letter-spacing:.04em;text-transform:uppercase;animation:bpFury .8s ease-in-out infinite alternate}
@keyframes bpFury{to{text-shadow:0 0 8px #ff4a1a}}

/* Demirci (dövme) */
.hammer-pill { cursor: pointer; }
.res-rew .hm { color: #fdba74; font-weight: 700; }
.forge-body { display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 4px 18px 18px; min-height: 0; flex: 1; }
.forge-side { display: flex; flex-direction: column; gap: 8px; }
.forge-side .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.forge-side .seg .btn.on { background: linear-gradient(180deg, #96681e, #6a4712); color: #fff; border-color: #c9962f; }
.fs-note { font-size: 12.5px; line-height: 1.4; margin: 0; text-align: left; }
.fo-list { display: grid; gap: 3px; }
.fo-row { display: flex; justify-content: space-between; padding: 4px 10px; border-left: 3px solid var(--rc); background: rgba(255,255,255,.03); font: 600 13px var(--head); }
.fo-row b { color: #e8e2d0; }
.forge-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.forge-btns { display: flex; gap: 10px; }
.forge-buy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.forge-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; overflow: auto; }
.fr-card { border: 2px solid var(--rc); border-radius: 4px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 28%, transparent), #0b0e15 75%); padding: 6px; text-align: center; animation: frIn .35s ease-out both; }
.fr-card .item-icon { height: 74px; display: grid; place-items: center; }
.fr-card .item-icon img { max-height: 70px; }
.fr-card .nm { font: 600 12px var(--head); }
.fr-card small { display: block; font-size: 11px; }
.fr-card.r-l7, .fr-card.r-l8 { box-shadow: 0 0 16px var(--rc); }
@keyframes frIn { from { transform: scale(.6) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Bulunulan yerin adı: yere girerken belirir, birkaç saniye sonra kaybolur (harita sistemiyle her bölgede) */
.title-plate.loc-title { animation: locTitle 3.2s ease-in-out forwards; pointer-events: none; }
.title-plate.loc-title.gone { display: none; }
@keyframes locTitle { 0% { opacity: 0; transform: translate(-50%, -10px); } 15%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); visibility: hidden; } }
/* çok eşya olunca envanter ızgarası kendi içinde kayar */
.inv-grid { max-height: 560px; overflow-y: auto; align-content: start; padding-right: 4px; }

/* dövülen eşyaların ekstra özellikleri */
.ex-list { margin-top: 6px; display: grid; gap: 2px; }
.ex { color: #a5d8ff; font-size: 13px; }
.ex.top { color: #fcd34d; text-shadow: 0 0 6px rgba(252, 211, 77, .5); }
.fr-card small.ex { display: block; font-size: 10.5px; line-height: 1.25; }

/* Yetenekler (9, alt alta zincir) + temel statlar */
.sk2-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 4px 18px 18px; min-height: 0; flex: 1; }
.sk2-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 560px; padding-right: 4px; }
.skr { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid #232a38; border-radius: 4px; background: linear-gradient(180deg, #121622, #0b0e15); }
.skr.on { border-color: #6a4712; }
.skr.locked { opacity: .55; }
.skr-n { font: 700 13px var(--head); color: var(--gold2); text-align: center; }
.skr .sk-ic { width: 44px; height: 44px; font-size: 24px; }
.skr-mid b { font: 600 15px var(--head); color: #fff; }
.skr-d { font-size: 12.5px; color: #cbd2e3; line-height: 1.35; }
.skr-m { font-size: 11.5px; }
.sk2-stats { display: flex; flex-direction: column; gap: 6px; }
.spr { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid #232a38; border-radius: 4px; background: #0e121b; }
.spr span { font: 600 14px var(--head); color: #fff; }
.spr b { grid-column: 1; font: 700 13px var(--head); color: var(--gold2); }
.spr small { grid-column: 1; font-size: 11px; }
.spr .btn { grid-column: 2; grid-row: 1 / span 3; }
/* başka sınıfın eşyası: soluk + köşede sınıf etiketi */
.inv-cell.other > :is(img, .it-img) { opacity: .5; filter: grayscale(.6); }
.inv-cell.other { border-style: dashed; }
.inv-cell .cls-tag { position: absolute; left: 3px; right: 3px; bottom: 3px; font: 700 10px var(--head); font-style: normal; text-align: center; color: #fff;
  background: color-mix(in srgb, var(--cc) 75%, #000); border-radius: 2px; padding: 1px 0; letter-spacing: .3px; text-shadow: 0 1px 2px #000; }
.inv-grid { overflow-x: hidden; }

/* Envanter: solda kahraman + takılı yuvalar, ortada eşyalar, sağda ayrıntı */
.inv-body { gap: 14px; min-height: 0; }
.inv-hero { width: 290px; flex-shrink: 0; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; border: 1px solid #232a38; border-radius: 4px;
  background: radial-gradient(circle at 50% 40%, rgba(243, 200, 103, .12), #0b0e15 70%); }
.inv-hero canvas { width: 280px; height: 300px; }
.ih-slots { display: grid; grid-template-columns: repeat(4, 58px); gap: 6px; justify-content: center; }
.ih-slot { width: 58px; height: 58px; border-radius: 4px; border: 1px solid #2a3242; background: #0b0e15; display: grid; place-items: center; cursor: pointer; padding: 4px; overflow: hidden; }
.ih-slot.filled { border-color: color-mix(in srgb, var(--rc) 70%, #2a3242); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, #1a1f2b), #0a0c12 80%); }
.ih-slot.sel { border: 1px solid var(--gold2); box-shadow: 0 0 10px rgba(243, 200, 103, .4); }
.ih-slot img, .ih-slot .it-img { width: 48px; height: 48px; object-fit: contain; }
.ih-slot svg { width: 26px; height: 26px; opacity: .35; }
.ih-hint { font-size: 11.5px; text-align: center; }
.inv-body .inv-grid { grid-template-columns: repeat(6, 76px); flex-shrink: 0; }
.inv-body .inv-detail.col { min-width: 0; align-self: flex-start; }

.gold-pill.full { color: #f87171; border-color: #b91c1c; }

/* Tüccarda toplu satış */
.cat-btn.sell-cat { margin-top: 10px; border-top: 1px solid #2a3242; }
.sell-right { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sell-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sell-grid { grid-template-columns: repeat(auto-fill, 70px) !important; grid-auto-rows: 70px !important; max-height: 470px; }
.inv-cell.picked { box-shadow: 0 0 0 2px #ef4444 inset, 0 0 12px rgba(239, 68, 68, .5); border-color: #ef4444 !important; }
.inv-cell em.chk { left: auto; right: 4px; color: #fca5a5; }
.inv-cell.nosell { opacity: .4; cursor: not-allowed; }
.sell-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* toplu satış: her eşyanın köşesinde seçim kutusu */
.inv-cell .selbox { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid #8a93ab; background: rgba(0,0,0,.55);
  font: 800 11px/14px Inter; font-style: normal; color: #fff; text-align: center; }
.inv-cell .selbox.on { background: #dc2626; border-color: #fca5a5; }

/* satış: satır satır, sağda satır seçme düğmesi */
.sell-grid { display: flex !important; flex-direction: column; gap: 6px; }
.sell-row { display: grid; grid-template-columns: repeat(12, 64px) 44px; grid-auto-rows: 64px; gap: 6px; align-items: center; }
.sell-row .inv-cell { width: 64px; height: 64px; }
.sell-row .row-btn { height: 64px; padding: 0; font-size: 18px; }
.sell-row .row-btn.on { background: #dc2626; border-color: #fca5a5; color: #fff; }

.confirm-sell p { margin: 0; font-size: 15px; }
.confirm-sell .cs-parts { font: 600 13px var(--head); }
.confirm-sell .cs-warn { color: #fb923c; font-weight: 700; }
.confirm-sell .cs-total { font: 700 22px var(--head); color: var(--gold2); }
.confirm-sell .row-btns { display: flex; justify-content: flex-end; gap: 10px; }