@font-face { font-family: Cinzel; src: url(font/Cinzel.ttf); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Garamond; src: url(font/EBGaramond-Italic.ttf); font-style: italic; font-weight: 400 800; font-display: swap; }

:root {
  --ink: #14181f;
  --panel: #1d2430;
  --line: #4d4230;
  --gold: #d9a93f;
  --parch: #f0e3c4;
  --muted: #b5a88c;
  --red: #a8382c;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; background: var(--ink); color: var(--parch); }
body { font-family: Cinzel, serif; user-select: none; -webkit-user-select: none; }

/* 360x640 mantıksal sahne; app.js ekrana göre ölçekler. */
#stage { position: fixed; left: 50%; top: 50%; width: 360px; height: 640px; overflow: hidden; transform: translate(-50%, -50%); background: var(--ink); }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

button {
  font: 600 13px Cinzel, serif; color: var(--parch); background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; cursor: pointer;
  touch-action: manipulation;
}
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

button.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

.brand { text-align: center; }

.brand p { font: italic 18px Garamond, serif; text-shadow: 0 1px 6px #000; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack button { padding: 13px; font-size: 15px; }

.panel { background: linear-gradient(#1a2029, var(--ink)); padding: 14px; gap: 12px; overflow-y: auto; }
.bar-top { display: flex; align-items: center; gap: 12px; }
.bar-top h2 { font-size: 20px; font-weight: 600; }

.note { font: italic 16px Garamond, serif; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; min-height: 84px; }

.grid small { font: italic 13px Garamond, serif; line-height: 1.05; }
.grid i { font: normal 13px serif; color: var(--gold); letter-spacing: 1px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.row strong { display: block; font-size: 14px; }
.row span { font: italic 14px Garamond, serif; color: var(--muted); }
.row button { flex: none; min-width: 74px; padding: 8px; font-size: 12px; }

#hud {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; font-size: 12px; color: var(--muted); background: rgba(20, 24, 31, .85); border-bottom: 1px solid var(--line);
  pointer-events: none;
}

#actions {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: grid; grid-template-columns: 1.5fr 1.4fr 44px 44px; gap: 6px;
  padding: 7px 8px; background: rgba(20, 24, 31, .92); border-top: 1px solid var(--line);
}

#sheet {
  position: absolute; left: 8px; right: 8px; bottom: 62px; padding: 10px; background: rgba(29, 36, 48, .97);
  border: 1px solid var(--line); border-radius: 6px;
}
#sheet.top { top: 42px; bottom: auto; }
#sheet h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
#sheet p { font: italic 14px Garamond, serif; color: var(--muted); margin-bottom: 8px; }

.towers button { display: flex; justify-content: space-between; padding: 9px 8px; font-size: 11px; text-align: left; }
.towers em { font-style: normal; color: var(--gold); }

#dialog {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 14px 72px;
  background: rgba(10, 12, 16, .62);
}
.card { background: var(--panel); border: 1px solid var(--gold); border-radius: 6px; padding: 14px; }
.card img { display: block; width: 104px; height: 128px; object-fit: cover; object-position: top; float: left; margin: 0 12px 4px 0; border: 1px solid var(--line); border-radius: 4px; }
.card h3 { font-size: 16px; font-weight: 600; color: var(--gold); margin-bottom: 4px; }
.card p { font: italic 18px/1.2 Garamond, serif; min-height: 40px; }
.card .stars { display: block; font: normal 28px serif; color: var(--gold); letter-spacing: 3px; }
.card footer { clear: both; display: flex; gap: 8px; padding-top: 12px; }

/* ---- Menü bloğu: lacivert / turkuaz / altın ---- */
:root { --navy: #0e1c33; --navy2: #152a4a; --teal: #2fb5b0; --teal-d: #1c7f7d; --gold2: #f1cf7a; }

.orn { display: block; height: 10px; margin: 8px auto; width: 70%; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--teal) 50%, var(--gold) 70%, transparent) center / 100% 1px no-repeat; position: relative; }
.orn::after { content: ""; position: absolute; left: 50%; top: 1px; width: 8px; height: 8px; margin-left: -4px; background: var(--teal); border: 1px solid var(--gold); transform: rotate(45deg); }
.stack button, .back, .row button, .grid button { min-height: 44px; transition: transform .12s, border-color .12s, background .12s; }
.stack button { background: linear-gradient(var(--navy2), var(--navy)); border: 1px solid var(--teal-d); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(241,207,122,.25); letter-spacing: 2px; text-transform: uppercase; }

.grid button:active, .row button:active { transform: scale(.97); }
.stack button:hover:not(.primary), .grid button:hover:not(:disabled) { border-color: var(--teal); }

.bar-top { min-height: 44px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.bar-top h2 { color: var(--gold2); letter-spacing: 3px; text-transform: uppercase; }
.back { min-width: 64px; background: var(--navy); border-color: var(--teal-d); }
.panel .orn { margin: 0 auto; flex: none; }
.grid button { background: linear-gradient(var(--navy2), var(--navy)); border-color: var(--teal-d); min-height: 92px; }
.grid button:disabled { filter: grayscale(.8); opacity: .4; }
.grid b { color: var(--gold2); font-size: 22px; }
.grid i { color: var(--teal); }
.note { color: var(--gold2); text-align: center; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: rgba(8,17,31,.6); flex: none; }
.row { background: linear-gradient(90deg, var(--navy2), var(--navy)); border-color: var(--teal-d); border-left: 3px solid var(--gold); min-height: 56px; }
.row strong { color: var(--gold2); }
.row button { min-width: 88px; background: var(--teal-d); border-color: var(--teal); color: #fff; }
.row button:disabled { background: var(--navy); border-color: var(--line); color: var(--muted); }

/* ---- Menü cilası ---- */
.brand .tag { display: block; margin-top: 6px; color: var(--teal); font: 600 11px Cinzel, serif; letter-spacing: 5px; text-transform: uppercase; }
.brand h1 { animation: sur-in .8s ease-out both; }
@keyframes sur-in { from { opacity: 0; transform: translateY(-10px); } }
.stack button.primary { animation: sur-glow 2.6s ease-in-out infinite; }
@keyframes sur-glow { 50% { box-shadow: 0 0 0 1px #000, 0 4px 22px rgba(241,207,122,.6); } }
.stack button:focus-visible, .back:focus-visible, .grid button:focus-visible, .row button:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.grid button:not(:disabled) { box-shadow: inset 0 1px 0 rgba(241,207,122,.2), 0 2px 8px rgba(0,0,0,.45); }
.grid button:disabled::after { content: "\1F512"; font-size: 12px; }
.row { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.row button:not(:disabled):hover { background: var(--teal); }
.note { font-family: Cinzel, serif; font-style: normal; font-size: 14px; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { .brand h1, .stack button.primary { animation: none; } .stack button, .grid button { transition: none; } }

/* --- 3D arayüz --- */
#stage { background: #101a24; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 0; }
.screen { z-index: 1; }
#game { background: none; pointer-events: none; }
#game > * { pointer-events: auto; }
#menu { background: linear-gradient(rgba(6,14,26,.72), rgba(6,14,26,.06) 34%, rgba(6,14,26,.1) 58%, rgba(6,14,26,.86)); padding: calc(env(safe-area-inset-top, 0px) + 56px) 34px calc(env(safe-area-inset-bottom, 0px) + 44px); pointer-events: none; }
#menu > * { pointer-events: auto; }
.crest { display: block; width: 74px; height: 2px; margin: 0 auto 12px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.brand h1 { font-size: 88px; font-weight: 800; letter-spacing: 12px; margin-right: -12px; line-height: 1; background: linear-gradient(#fff2c9, #e6b64f 52%, #94621c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 0 #3b2308) drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.brand p { margin-top: 8px; font-size: 20px; color: #fbeccb; }
.stack { gap: 12px; }
.stack button { min-height: 52px; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--parch); background: linear-gradient(rgba(35,48,64,.92), rgba(16,24,34,.92)); border: 1px solid rgba(217,169,63,.55); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.stack button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
.stack button.primary { min-height: 60px; font-size: 20px; color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border-color: #ffeab8; box-shadow: 0 4px 0 #6f4714; }
.panel { background: linear-gradient(rgba(10,18,28,.9), rgba(10,18,28,.8)); backdrop-filter: blur(5px); padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
.grid button { background: linear-gradient(rgba(38,52,68,.9), rgba(18,26,36,.92)); border: 1px solid rgba(217,169,63,.35); border-radius: 10px; }
.grid button:disabled { opacity: .42; }

#actions { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* --- şehir --- */
#city { pointer-events: none; }
#city > * { pointer-events: auto; }
#cityHud { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 44px; display: flex; align-items: center; justify-content: space-around; font-size: 12px; color: var(--muted); background: rgba(12,18,26,.84); border-bottom: 1px solid rgba(217,169,63,.45); }
#cityLabels { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
#cityLabels span { position: absolute; left: 0; top: 0; padding: 2px 6px; white-space: nowrap; font-size: 9px; font-weight: 700; color: var(--parch); background: rgba(12,18,26,.82); border: 1px solid rgba(217,169,63,.3); border-radius: 9px; }
#cityLabels span.ready { color: #2c1a05; background: #efc266; border-color: #ffeab8; }

#cityNav { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px); background: rgba(12,18,26,.9); border-top: 1px solid rgba(217,169,63,.45); }
#cityNav button { min-height: 50px; font-size: 13px; font-weight: 700; }
#cityNav button.primary { font-size: 16px; color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border-color: #ffeab8; }
#citySheet { position: absolute; left: 10px; right: 10px; bottom: 82px; padding: 12px; background: rgba(22,30,42,.97); border: 1px solid rgba(217,169,63,.6); border-radius: 12px; }
#citySheet h3 { font-size: 16px; color: #f6d27a; margin-bottom: 3px; }
#citySheet p { font: italic 15px Garamond, serif; color: var(--parch); margin-bottom: 7px; line-height: 1.15; }
#citySheet p.cost { font: 600 12px Cinzel, serif; color: var(--muted); }
#citySheet button { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 700; }
#citySheet button.primary { color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border-color: #ffeab8; }
#levels .note { color: #f6d27a; }

/* --- eğitim, dalga önizleme, komutan, baskın --- */
#tip { position: absolute; left: 14px; right: 14px; top: 92px; z-index: 5; padding: 9px 12px; pointer-events: none; font: 600 13px Cinzel, serif; line-height: 1.25; text-align: center; color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border: 1px solid #ffeab8; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#tipMark { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 20px solid #ffd86a; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); animation: tipbob .7s ease-in-out infinite alternate; }
@keyframes tipbob { from { margin-top: -6px; } to { margin-top: 6px; } }
#nextWave { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 50px); transform: translateX(-50%); max-width: 92%; padding: 3px 10px; white-space: nowrap; overflow: hidden; pointer-events: none !important; font-size: 11px; font-weight: 700; color: var(--parch); background: rgba(12,18,26,.78); border: 1px solid rgba(217,169,63,.35); border-radius: 10px; }
#actions { display: grid; grid-template-columns: 1.35fr 1.25fr 1fr .62fr .62fr; gap: 5px; }
#actions button { min-width: 0; padding-left: 3px; padding-right: 3px; font-size: 11px; }
#btnRaid { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); min-height: 46px; padding: 0 20px; font-size: 14px; font-weight: 800; color: #fff4e0; background: linear-gradient(#c8402f, #7c1d14); border: 1px solid #ffb09c; border-radius: 11px; animation: raidpulse 1s ease-in-out infinite alternate; }
@keyframes raidpulse { from { box-shadow: 0 0 4px #e0482f; } to { box-shadow: 0 0 22px #ff6a4a; } }

#bossBar { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 70%; text-align: center; font-size: 11px; color: #ffd9c8; text-shadow: 0 1px 2px #000; pointer-events: none; }
#bossBar b { display: block; font-weight: 600; margin-bottom: 2px; }
#bossBar i { display: block; height: 7px; border: 1px solid #000; background: #2a1512; border-radius: 3px; overflow: hidden; }
#bossBar u { display: block; height: 100%; background: linear-gradient(#e0483a, #a02a20); }
#sheet button > span, #sheet button > em { display: block; }
#sheet button > em { font-style: normal; font-size: 10px; opacity: .8; }

#nextWave { max-width: 92%; white-space: normal; text-align: center; line-height: 1.25; font-size: 10px; }

#regionTabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: none; }
#regionTabs button { padding: 4px 2px; font-size: 9px; line-height: 1.15; min-height: 40px; }
#regionTabs button span, #regionTabs button em { display: block; font-style: normal; }
#regionTabs button em { color: var(--gold); }
#regionTabs button.active { outline: 2px solid var(--gold); }
.grid button.heroic { outline: 1px solid #e0483a; }
.hubHead { margin: 8px 0 0; font-size: 14px; color: var(--gold); }
#btnTax { position: absolute; top: 48px; right: 8px; padding: 6px 10px; font-size: 11px; z-index: 3; }
#cityNav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
#cityNav button { min-width: 0; padding-left: 2px; padding-right: 2px; font-size: 10px; }
#citySheet button { margin-top: 4px; }

:root { --ui: 1; }
#sheet, #citySheet, #dialog .card, #hubBody { zoom: var(--ui); }
#boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0d1420; color: #e9b64f; font-family: Cinzel, serif; }
#boot b { font-size: 44px; letter-spacing: 8px; }
#boot small { font-size: 12px; color: #b9ad94; }
#fade { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 30px; background: #0d1420; opacity: 0; transition: opacity .24s; pointer-events: none; }
#fade.on { opacity: 1; pointer-events: auto; }
#fade p { font: italic 16px Garamond, serif; color: #d8ccb2; text-align: center; }
#cine { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; text-align: center; }
#cine i { display: block; width: 100%; height: 52px; background: #000; }
#cine p { margin-top: auto; font: italic 15px Garamond, serif; color: #f2e7cf; text-shadow: 0 1px 3px #000; }
#cine h2 { margin-bottom: 26px; font-size: 26px; color: #ffd98a; text-shadow: 0 2px 6px #000; }
#floats { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#floats span { position: absolute; transform: translate(-50%, 0); font-weight: 700; text-shadow: 0 1px 2px #000; animation: rise .8s ease-out forwards; }
#floats .crit { color: #ffd23a; font-size: 15px; }
#floats .coin { color: #f0c060; font-size: 11px; }
@keyframes rise { to { margin-top: -36px; opacity: 0; } }
.card .stars i { display: inline-block; font-style: normal; }
.card .stars i.pop { animation: starpop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.card .loot { display: block; margin-top: 6px; color: var(--gold); font-size: 15px; }

.card footer { flex-wrap: wrap; }
.card footer button { flex: 1 1 28%; min-width: 0; }
.card footer button:last-child:nth-child(4) { flex-basis: 100%; }

.ic { display: inline-block; object-fit: contain; }
.tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 226, 160, .65); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(0, 0, 0, .5); }
.tile .ic { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.tile.big { width: 60px; height: 60px; }
.tile.hero { width: 78px; height: 78px; border-radius: 14px; border-width: 2px; }
.rowIc { flex: none; width: 34px; height: 34px; }
.rowIc.big { width: 54px; height: 54px; }
.sheetHead { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.sheetHead h3 { margin: 0; }
.sheetHead p { margin: 2px 0 0; }
.towers { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.towers button { flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 4px 2px; text-align: center; font-size: 9px; line-height: 1.1; min-height: 88px; }
.towers em { display: flex; align-items: center; gap: 2px; font-size: 11px; }
.towers em .ic { width: 12px; height: 12px; }
#nextWave { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
#nextWave .rule { color: #ffd98a; }
#nextWave .chip { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; }

#regionTabs button { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 2px 6px; min-height: 76px; overflow: hidden; background: linear-gradient(color-mix(in srgb, var(--c) 78%, #000), #141c28); border-radius: 9px; }
#regionTabs button .ic { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#regionTabs button i { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; background: rgba(0, 0, 0, .55); border-radius: 2px; }
#regionTabs button u { display: block; height: 100%; background: #ffd04a; }
.grid button { position: relative; background: linear-gradient(color-mix(in srgb, var(--c, #33445a) 58%, #111), #121a24); }
.grid button.bossLevel { border-color: #ffb040; box-shadow: 0 0 10px rgba(255, 150, 40, .55); }
.marks { position: absolute; top: 3px; right: 3px; display: flex; gap: 1px; }

.row .tile { margin-right: 2px; }
.heroCard { background: linear-gradient(100deg, rgba(120, 40, 40, .35), rgba(20, 28, 40, .9)); }
.heroCard.picked { outline: 2px solid var(--gold); }

#cityLabels span { min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; font-size: 11px; color: #fff3cf; background: radial-gradient(circle at 50% 30%, #4f7fb0, #1f3a5a); border: 2px solid #f0cf80; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
#cityLabels span.ready { color: #2c1a05; background: radial-gradient(circle at 50% 30%, #ffe89a, #e0a030); }
#cityLabels span.hurt { background: radial-gradient(circle at 50% 30%, #ff7a66, #a02020); }
#cityLabels span.busy { color: #fff; font-size: 9px; border-radius: 6px; border-color: #bfe6ff; background: linear-gradient(90deg, #3fae5a var(--p, 0%), #1f2c3a var(--p, 0%)); }
.bubble { position: absolute; left: 0; top: 0; z-index: 4; padding: 3px 9px 3px 5px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #2c1a05; background: radial-gradient(circle at 40% 25%, #fffbe6, #f4dc9a); border: 2px solid #fff; border-radius: 16px; box-shadow: 0 3px 8px rgba(0, 0, 0, .55); animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { margin-top: -6px; } }

#btnRaid { bottom: 112px; z-index: 3; }
#nextWave { flex-wrap: nowrap; white-space: nowrap; max-width: 98%; }
#nextWave .chip .ic { width: 22px; height: 22px; }

#fpsBox { position: fixed; top: 0; left: 0; z-index: 99; padding: 2px 6px; font: 11px monospace; color: #7dff8a; background: rgba(0,0,0,.65); pointer-events: none; }

#hubBody .row > div { flex: 1; min-width: 0; text-align: left; }

/* --- yatay mobil arayüz: göstergeler küçük, düğmeler ikon, sahne açık kalır --- */
:root { --safeL: max(8px, env(safe-area-inset-left, 0px)); --safeR: max(8px, env(safe-area-inset-right, 0px)); }
.ib { position: relative; isolation: isolate; display: inline-flex; align-items: flex-end; justify-content: center; flex: none; width: 46px; height: 46px; min-height: 0; padding: 0 0 3px; font: 800 11px/1 Cinzel, serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; border: 2px solid #e6c06a; border-radius: 50%; background: var(--i) center 42% / 62% no-repeat, radial-gradient(circle at 50% 30%, #3a5878, #14243a 72%); box-shadow: 0 3px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .08s; }
.ib::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 360deg), transparent 0); }
.ib:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.ib:disabled { opacity: 1; filter: saturate(.55) brightness(.85); }
.ib.active { border-color: #fff; box-shadow: 0 0 0 2px #ffd04a, 0 0 12px #ffd04a; }
.ib.s { width: 36px; height: 36px; align-items: center; padding: 0; font-size: 12px; }
.dot::after { content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #ff4a3a; border: 2px solid #fff; }
#btnUpgrades, #btnCityUp { --i: url(img/icons/u_yildiz.svg); }
#btnMute { --i: url(img/icons/u_nara.svg); }
#btnMute.off { --i: url(img/icons/u_sessiz.svg); }
#btnSettings { --i: url(img/icons/u_ayar.svg); }
#btnCityMenu { --i: url(img/icons/u_menu.svg); }
#btnShop { --i: url(img/icons/u_magaza.svg); }
#btnQuests { --i: url(img/icons/u_gorev.svg); }
#btnHeroScr { --i: url(img/icons/u_komutan.svg); }
#btnTax { --i: url(img/icons/u_vergi.svg); }
#btnRaid { --i: url(img/icons/u_hucum.svg); }
#btnExit { --i: url(img/icons/u_duraklat.svg); }
#btnAbility { --i: url(img/icons/u_ok.svg); }
#btnHero { --i: url(img/icons/u_hucum.svg); }
#btnTrap { --i: url(img/icons/u_tuzak.svg); }
#btnTroop { --i: url(img/icons/u_takviye.svg); }

.pill { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px 0 30px; color: #fff; font-size: 14px; font-weight: 800; background: rgba(10,16,26,.74); border: 1px solid rgba(240,207,128,.55); border-radius: 14px; }
.pill::before { content: ""; position: absolute; left: 3px; top: 1px; width: 24px; height: 24px; background: center / contain no-repeat; }

.pill b { font-size: 14px; color: #fff; margin: 0; }
.pill i { position: absolute; left: 30px; right: 10px; bottom: 2px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.6); }
.pill u { display: block; height: 100%; width: var(--f, 0); background: #ffd04a; }
.pill.tas u { background: #b8c6d6; }

/* menü */
#menu { justify-content: space-between; align-items: center; padding: 20px var(--safeR) 16px var(--safeL); }
.brand h1 { font-size: 66px; letter-spacing: 10px; margin-right: -10px; }
.brand .orn { margin: 4px auto; }
.brand p { margin: 0; font-size: 17px; }
#menu .stack { align-items: center; gap: 10px; }
#btnPlay { width: 230px; min-height: 54px; font-size: 21px; }
.menuIcons { display: flex; gap: 14px; }
.stack .ib, .stack .ib.primary { min-height: 0; background: var(--i) center 42% / 62% no-repeat, radial-gradient(circle at 50% 30%, #3a5878, #14243a 72%); border: 2px solid #e6c06a; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.6); backdrop-filter: none; }

/* paneller */
.panel { padding: 8px var(--safeR) 8px var(--safeL); gap: 6px; }
.bar-top { min-height: 38px; padding-bottom: 4px; gap: 8px; }
.bar-top h2 { flex: 1; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.back { min-width: 36px; min-height: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1; border-radius: 50%; width: 36px; background: radial-gradient(circle at 50% 30%, #3a5878, #14243a 72%); border: 2px solid #e6c06a; }
.note { flex: none; padding: 3px 10px; font-size: 12px; border-radius: 12px; }
.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hubHead { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; }
.row { min-height: 0; padding: 5px 7px; gap: 6px; border-radius: 8px; }
.row strong { font-size: 12px; }
.row span { font-size: 12px; line-height: 1.1; display: block; }
.row button { min-width: 62px; min-height: 32px; padding: 4px 6px; font-size: 11px; border-radius: 8px; }
.rowIc { width: 26px; height: 26px; }
.tile.hero { width: 54px; height: 54px; }

/* harita */
#btnMode { flex: none; min-height: 28px; padding: 3px 10px; font-size: 11px; border-radius: 12px; }
#regionTabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
#regionTabs::-webkit-scrollbar { display: none; }
#regionTabs button { flex: 0 0 74px; min-height: 66px; padding: 2px 2px 6px; font-size: 8px; }
#regionTabs button .ic { width: 28px; height: 28px; }
#regionClaim { flex: none; min-height: 30px; padding: 4px; font-size: 11px; }
.grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
.grid button { min-height: 76px; padding: 4px 3px; gap: 1px; border-radius: 9px; }
.grid b { font-size: 17px; line-height: 1; }
.grid small { font-size: 11px; line-height: 1; }
.grid i { font-size: 12px; }
.marks .ic { width: 13px; height: 13px; }

/* savaş */
#hud { left: var(--safeL); right: auto; top: 6px; height: 28px; gap: 6px; padding: 0; justify-content: flex-start; background: none; border: 0; }
#hudTools { position: absolute; top: 5px; right: var(--safeR); display: flex; gap: 8px; }
#nextWave { top: 6px; height: 28px; padding: 0 10px; font-size: 10px; }
#bossBar { top: 40px; width: 44%; }
#armHint { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); padding: 5px 14px; font-size: 12px; font-weight: 800; color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border-radius: 14px; pointer-events: none !important; }
#actions { left: var(--safeL); right: var(--safeR); bottom: 8px; height: auto; display: flex; align-items: flex-end; justify-content: space-between; padding: 0; background: none; border: 0; pointer-events: none !important; }
#actions > * { pointer-events: auto; }
#actions button { padding: 0 0 3px; font-size: 11px; line-height: 1; }
.skills { display: flex; gap: 8px; }
#actions #btnWave { width: 96px; height: 46px; padding: 0 6px; font-size: 13px; font-weight: 800; color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border: 2px solid #ffeab8; border-radius: 12px; box-shadow: 0 3px 0 #6f4714; }
#sheet { left: 50%; right: auto; bottom: 62px; width: min(560px, 92%); padding: 6px 8px; transform: translateX(-50%); border-radius: 12px; border-color: rgba(230,192,106,.7); }
#sheet.top { top: 40px; }
#sheet p { font-size: 13px; margin-bottom: 4px; }
.towers { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.towers::-webkit-scrollbar { display: none; }
.towers button { flex: 0 0 66px; min-height: 0; padding: 3px 2px; font-size: 8px; border-radius: 9px; }
.towers .tile { width: 42px; height: 42px; }
.acts { display: flex; flex-wrap: wrap; gap: 5px; }
.acts button { flex: 1 1 30%; min-width: 0; min-height: 34px; margin: 0 !important; padding: 4px 6px; font-size: 11px; font-weight: 700; border-radius: 8px; }
.acts button > em { display: block; font-size: 9px; font-style: normal; opacity: .85; }
.sheetHead { margin-bottom: 4px; }
.sheetHead .tile.big { width: 44px; height: 44px; }
.sheetHead h3 { font-size: 13px; }
.sheetHead p { font-size: 13px; line-height: 1.1; }

/* şehir */
#cityHud { left: var(--safeL); right: auto; top: 5px; height: 36px; display: flex; gap: 6px; justify-content: flex-start; background: none; border: 0; pointer-events: none !important; }
#cityHud > button { pointer-events: auto; }
#cityRail { position: absolute; top: 5px; right: var(--safeR); bottom: 8px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; pointer-events: none !important; }
#cityRail .ib { pointer-events: auto; width: 44px; height: 44px; }
#btnTax { top: auto; right: auto; font-size: 10px; }
#btnSefer { position: absolute; left: var(--safeL); bottom: 8px; width: 112px; min-height: 52px; padding: 0 8px 0 42px; font-size: 16px; font-weight: 800; color: #2c1a05; background: url(img/icons/u_sefer.svg) 8px center / 32px no-repeat, linear-gradient(#f9dd93, #d39a35); border: 2px solid #ffeab8; border-radius: 14px; box-shadow: 0 4px 0 #6f4714; }
#btnSefer:active { transform: translateY(3px); box-shadow: 0 1px 0 #6f4714; }
#btnRaid { position: absolute; left: calc(var(--safeL) + 124px); bottom: 8px; width: 52px; height: 52px; background: var(--i) center / 62% no-repeat, radial-gradient(circle at 50% 30%, #e0523f, #7c1d14 72%); border-color: #ffb09c; }
#citySheet { left: var(--safeL); right: auto; top: 46px; bottom: 8px; width: 286px; padding: 8px 10px; overflow-y: auto; z-index: 6; border-radius: 12px; }
#citySheet .x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0; background: url(img/icons/u_kapat.svg) center / 70% no-repeat, #2a3648; border: 1px solid #e6c06a; border-radius: 50%; }
#citySheet p { font-size: 13px; margin-bottom: 4px; }
#citySheet h3 { font-size: 13px; padding-right: 26px; }
.costs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.costs .chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 3px; color: #fff; background: rgba(0,0,0,.35); border-radius: 10px; }
.costs .ic { width: 15px; height: 15px; }
.bubble { font-size: 11px; }
#tip { top: 42px; left: 22%; right: 22%; padding: 5px 10px; font-size: 11px; }
#cityLabels span { transform-origin: center; }

/* diyalog */
#dialog { justify-content: center; align-items: center; padding: 8px; }
.card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 10px 12px; border-radius: 12px; }
.card img { width: 66px; height: 82px; margin-right: 10px; }
.card h3 { font-size: 15px; margin-bottom: 2px; }
.card p { font-size: 15px; line-height: 1.12; min-height: 0; }
.card .stars { font-size: 22px; line-height: 1; }
.card .loot { font-size: 13px; margin-top: 3px; }
.card footer { padding-top: 8px; gap: 6px; }
.card footer button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 4px 8px; font-size: 12px; font-weight: 700; border-radius: 9px; }
.card footer .ic { width: 18px; height: 18px; }
#cine i { height: 28px; }
#cine h2 { margin-bottom: 14px; font-size: 20px; }

#btnTax { position: relative; }
#btnRaid { transform: none; }
#citySheet { bottom: auto; max-height: calc(100% - 54px); }
#actions #btnWave { padding-left: 34px; background: url(img/icons/u_dalga.svg) 8px center / 24px no-repeat, linear-gradient(#f9dd93, #d39a35); }

#btnCannon { --i: url(img/icons/u_kaletopu.svg); }
#goalBox { position: absolute; left: var(--safeL); top: 38px; max-width: 46%; padding: 2px 9px 2px 22px; font-size: 10px; font-weight: 700; color: #ffe6a8; background: url(img/icons/u_madalya.svg) 3px center / 16px no-repeat, rgba(10,16,26,.72); border-radius: 10px; pointer-events: none !important; }
#floats .breach { z-index: 9; font-size: 12px; font-weight: 800; color: #ff8a5a; text-shadow: 0 2px 4px #000, 0 0 8px #000; animation-duration: 2.2s; white-space: nowrap; }
#floats .breach { position: absolute; left: 50% !important; top: 9% !important; padding: 3px 12px; background: rgba(90,16,10,.86); border: 1px solid #ffb09c; border-radius: 14px; }

@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 8px) scale(1.2); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } }
#floats .breach { animation: banner 3s ease-out forwards; }
#levelCard { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(6,12,20,.66); }
#levelCard .stars { font-size: 16px; color: var(--gold2); letter-spacing: 2px; }
#levelCard p { font-size: 14px; color: var(--muted); }
.army { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.army .chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 2px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,.35); border-radius: 12px; }
.army .ic { width: 26px; height: 26px; }
.card .goal { display: flex; align-items: center; gap: 5px; font: 700 12px Cinzel, serif; color: #ffe6a8; }
.card .goal .ic { width: 18px; height: 18px; }
.card .goal.done { color: #8fe08f; }
#iconHint { position: absolute; left: clamp(84px, var(--x), calc(100% - 84px)); top: var(--y); z-index: 20; width: 156px; padding: 5px 8px; text-align: center; color: #fff; background: rgba(10,16,26,.95); border: 1px solid #e6c06a; border-radius: 9px; transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; }
#iconHint b { display: block; font-size: 11px; color: #ffe6a8; }
#iconHint span { display: block; font: italic 12px/1.1 Garamond, serif; }
.card .ic { float: none; margin: 0; border: 0; border-radius: 0; object-fit: contain; }

#assaultBar { position: absolute; right: var(--safeR); bottom: 8px; display: flex; gap: 8px; }
#assaultBar button { position: relative; width: 62px; height: 62px; min-height: 0; padding: 2px; background: radial-gradient(circle at 50% 30%, #3a5878, #14243a 72%); border: 2px solid #e6c06a; border-radius: 12px; box-shadow: 0 3px 0 rgba(0,0,0,.6); }
#assaultBar .ic { width: 42px; height: 42px; }
#assaultBar em { display: block; font: 800 11px/1 Cinzel, serif; font-style: normal; color: #ffe6a8; }
.heroCard.summoned { animation: summon .9s ease-out; }
@keyframes summon { 0% { box-shadow: 0 0 0 0 #ffd86a; transform: scale(.96); } 45% { box-shadow: 0 0 34px 10px #ffd86a; transform: scale(1.03); } 100% { box-shadow: 0 2px 8px rgba(0,0,0,.4); transform: none; } }
#cityHud { max-width: calc(100% - 66px); }
#citySheet .costs + .acts button { flex-basis: 45%; }
#cityLabels span.locked { opacity: .55; filter: grayscale(1); }

#levels { pointer-events: none; padding: 6px var(--safeR) 8px var(--safeL); }
#levels > *, #levels .bar-top > * { pointer-events: auto; }
#levels .bar-top { background: none; border: 0; pointer-events: none; }
#levels .bar-top h2 { text-shadow: 0 2px 4px #000; }
#mapLabels { position: absolute; inset: 0; overflow: hidden; pointer-events: none !important; }
#mapLabels span { position: absolute; left: 0; top: 0; min-width: 22px; height: 22px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; font: 800 10px Cinzel, serif; color: #fff; background: radial-gradient(circle at 50% 30%, #4f7fb0, #1f3a5a); border: 2px solid #e6c06a; border-radius: 11px; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
#mapLabels .won { color: #2c1a05; background: radial-gradient(circle at 50% 30%, #ffe89a, #e0a030); }
#mapLabels .locked { opacity: .55; filter: grayscale(1); }
#mapLabels .open { animation: mapglow 1.2s ease-in-out infinite alternate; }
#mapLabels .boss { min-width: 28px; height: 28px; font-size: 12px; border-color: #ff8a5a; }
#mapLabels .medal { border-color: #8fe08f; }
@keyframes mapglow { to { box-shadow: 0 0 12px 3px #ffd86a; } }
#regionClaim { position: absolute; left: 50%; bottom: 10px; width: auto; padding: 6px 16px; transform: translateX(-50%); z-index: 3; }

#levelCard { z-index: 6; pointer-events: auto; }
.deck { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.deck button { min-height: 0; padding: 2px; background: none; border: 2px solid transparent; border-radius: 9px; opacity: .45; }
.deck button.on { border-color: #ffd86a; opacity: 1; }
.deck .tile { width: 40px; height: 40px; }
.deckHead { font: 700 12px Cinzel, serif !important; color: #ffe6a8 !important; min-height: 0; }
.card footer button .chip { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: 11px; }
.card footer button .chip .ic { width: 14px; height: 14px; }
#levels .bar-top { position: relative; z-index: 3; }
#levels .bar-top .pill, #levels .bar-top .note, #btnMode { background: rgba(10,16,26,.9); }

#btnTowns { --i: url(img/icons/u_koy.svg); }
#cityHud .pill { padding-right: 8px; font-size: 13px; }
#cityHud .pill b { font-size: 13px; }

/* --- kahraman çağırma --- */
.altar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: radial-gradient(120% 120% at 50% 0, rgba(176,90,216,.45), rgba(14,24,40,.9)); border: 1px solid #e6c06a; border-radius: 12px; }
.altar button { flex: 1 1 40%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 800; border-radius: 10px; }
.altar .ic { width: 20px; height: 20px; }
.altar .odds { flex-basis: 100%; font: italic 12px Garamond, serif; color: #e8dcc0; }
.heroCard[data-tier="SSS"] { border-left-color: #e8483a; box-shadow: 0 0 12px rgba(232,72,58,.35); }
.heroCard[data-tier="SS"] { border-left-color: #e0a030; }
.heroCard[data-tier="S"] { border-left-color: #b05ad8; }
.heroCard[data-tier="SR"] { border-left-color: #4f8fd8; }
.heroCard.missing { opacity: .45; filter: grayscale(.7); }
.heroCard > button + button { margin-left: 4px; }
#summonBox { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: radial-gradient(circle, rgba(60,30,90,.92), rgba(6,10,18,.96)); }
#summonBox h3 { color: #ffe6a8; font-size: 18px; letter-spacing: 2px; }
.pulls { display: grid; grid-template-columns: repeat(5, 88px); gap: 8px; }
.pull { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: rgba(14,24,40,.9); border: 2px solid #4f8fd8; border-radius: 10px; animation: pullin .5s ease-out both; }
.pull .tile { width: 52px; height: 52px; }
.pull b { font-size: 13px; color: #fff; }
.pull span { font-size: 9px; text-align: center; color: #e8dcc0; }
.pull em { font: 700 10px Cinzel, serif; font-style: normal; color: #8fe08f; }
.pull.tS { border-color: #b05ad8; }
.pull.tSS { border-color: #e0a030; box-shadow: 0 0 14px rgba(224,160,48,.6); }
.pull.tSSS { border-color: #ff5a3a; box-shadow: 0 0 22px rgba(255,90,58,.85); animation: pullin .5s ease-out both, sssglow 1s ease-in-out infinite alternate; }
@keyframes pullin { from { opacity: 0; transform: rotateY(90deg) scale(.6); } }
@keyframes sssglow { to { box-shadow: 0 0 34px 6px rgba(255,200,80,.9); } }
#summonBox > button { min-width: 140px; }
/* --- kahraman seferi --- */
#btnRun { min-height: 30px; padding: 4px 12px; font-size: 12px; font-weight: 800; border-radius: 12px; }
#game.run #actions, #game.run #nextWave, #game.run #goalBox, #game.run #hud, #game.run #armHint, #game.run #bossBar, #game.run #btnSpeed { display: none !important; }
#runHud { position: absolute; left: var(--safeL); top: 6px; right: 110px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; pointer-events: none !important; }

#runXp { flex-basis: 100%; display: block; height: 6px; max-width: 320px; background: rgba(0,0,0,.55); border: 1px solid #6fd4ff; border-radius: 4px; overflow: hidden; }
#runXp u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fa8ff, #9fe8ff); }
#runRank { font: 800 12px Cinzel, serif; font-style: normal; color: #9fe8ff; text-shadow: 0 1px 2px #000; }
#joy { position: absolute; left: 0; top: 0; z-index: 4; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.18); pointer-events: none !important; }
#joy i { position: absolute; left: 26px; top: 26px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d8, #e6c06a); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
#runPick { position: absolute; inset: 0; z-index: 7; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 12px; background: rgba(6,12,20,.72); }
#runPick h3 { flex-basis: 100%; text-align: center; color: #ffe6a8; font-size: 18px; letter-spacing: 2px; }
#runPick button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; min-height: 130px; padding: 10px; background: radial-gradient(circle at 50% 20%, #2f4f78, #14243a); border: 2px solid #e6c06a; border-radius: 12px; }
#runPick .ic { width: 44px; height: 44px; }
#runPick b { font-size: 13px; color: #ffe6a8; }
#runPick span { font: italic 13px/1.1 Garamond, serif; color: #e8dcc0; }

/* --- sefer seçimi --- */
.runBox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.runTabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.runTabs button { flex: none; min-height: 32px; padding: 4px 10px; font-size: 11px; border-radius: 10px; }
.runTabs button.on, .runSteps button.on, .runHeroes button.on { border-color: #ffd86a; box-shadow: 0 0 0 2px #ffd86a; }
.runSteps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.runSteps button { min-height: 38px; padding: 0; font-size: 14px; font-weight: 800; border-radius: 9px; }
.runSteps button.done { background: linear-gradient(#f9dd93, #d39a35); color: #2c1a05; }
.runSteps button.boss { border-color: #ff8a5a; }
.runInfo { font: italic 13px Garamond, serif; color: #e8dcc0; }
.runHeroes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; padding: 2px; }
.runHeroes button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 82px; min-height: 0; padding: 4px; border-radius: 10px; opacity: .6; }
.runHeroes button.on { opacity: 1; }
.runHeroes .tile.hero { width: 50px; height: 50px; }
.runHeroes b { font-size: 11px; }
.runHeroes span { font-size: 8px; line-height: 1; text-align: center; }
.runHeroes em { font: 700 9px Cinzel, serif; font-style: normal; color: #9fe8ff; }
.runBox > .primary { align-self: center; min-width: 240px; min-height: 42px; font-size: 14px; font-weight: 800; }

/* --- karakter --- */
.heroBox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.heroHead { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.heroHead b { display: block; font-size: 14px; color: #ffe6a8; }
.heroHead span { font: italic 12px Garamond, serif; color: #e8dcc0; }
.xpBar { grid-column: 1 / -1; display: block; height: 6px; background: rgba(0,0,0,.55); border: 1px solid #6fd4ff; border-radius: 4px; overflow: hidden; }
.xpBar u { display: block; height: 100%; background: linear-gradient(90deg, #3fa8ff, #9fe8ff); }
.heroTabs { display: flex; gap: 6px; }
.heroTabs button { flex: 1; min-height: 30px; padding: 4px; font-size: 12px; border-radius: 10px; }
.heroTabs button.on { border-color: #ffd86a; box-shadow: 0 0 0 2px #ffd86a; }
.slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.inv { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 5px; }
.itemTile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 46px; height: 56px; min-height: 0; padding: 2px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--r, #555) 55%, #10182a), #10182a); border: 2px solid var(--r, #555); border-radius: 9px; }
.itemTile.empty { --r: #3a4658; opacity: .5; }
.itemTile .ic { width: 30px; height: 30px; }
.itemTile em { font: 700 8px Cinzel, serif; font-style: normal; color: #e8dcc0; }
.inv .itemTile { width: 48px; height: 48px; }
.itemCard { padding: 8px 10px; background: rgba(10,16,26,.92); border: 2px solid var(--r); border-radius: 10px; }
.itemCard b { color: var(--r); font-size: 13px; }
.itemCard p { font: italic 13px Garamond, serif; color: #e8dcc0; }
.itemCard .cmp { color: #9fb4c8; }
.skillRow[data-rank="S"] strong { color: #c98aff; }
.skillRow[data-rank="SR"] strong { color: #ff8a5a; text-shadow: 0 0 6px rgba(255,138,90,.6); }
.skillRow > button + button { display: inline-flex; align-items: center; gap: 3px; min-width: 52px; }
.skillRow .ic { width: 16px; height: 16px; }
.capNote { font: 700 10px Cinzel, serif; color: #9fb4c8; font-style: normal; }
#classPick { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: radial-gradient(circle, rgba(30,40,70,.96), rgba(6,10,18,.98)); }
#classPick h2 { color: #ffe6a8; font-size: 22px; letter-spacing: 3px; }
.classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(760px, 100%); }
.classes button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; padding: 10px 8px; background: linear-gradient(rgba(38,52,68,.95), rgba(14,22,34,.95)); border: 2px solid #e6c06a; border-radius: 14px; }

.classes b { font-size: 15px; color: #ffe6a8; }
.classes em { font: 700 10px Cinzel, serif; font-style: normal; color: #9fe8ff; }
.classes span { font: italic 12px/1.1 Garamond, serif; color: #e8dcc0; text-align: center; }
.classes small { font: 9px Cinzel, serif; color: #c8b890; text-align: center; }
#runSkills { position: absolute; right: var(--safeR); bottom: 8px; display: none; gap: 8px; }

#runSkills .ib { width: 54px; height: 54px; }
#runSkills .ib[data-rank]::after { content: attr(data-rank); position: absolute; top: -6px; right: -6px; padding: 1px 4px; font: 800 9px Cinzel, serif; color: #fff; background: #b05ad8; border-radius: 6px; }
#runSkills .ib[data-rank="SR"]::after { background: #e8483a; }
#floats .loot { font-size: 12px; font-weight: 800; animation-duration: 1.6s; }
#floats .r0 { color: #e8e8e8; } #floats .r1 { color: #6fb0ff; } #floats .r2 { color: #d28aff; } #floats .r3 { color: #ffc040; }

/* --- sefer savaşı --- */
#btnRunCity { position: absolute; left: calc(var(--safeL) + 124px); bottom: 8px; width: 126px; min-height: 52px; padding: 0 8px 0 42px; font-size: 15px; font-weight: 800; color: #fff4dc; background: url(img/icons/u_komutan.svg) 8px center / 30px no-repeat, linear-gradient(#5a7fb8, #2a4a7a); border: 2px solid #bfe0ff; border-radius: 14px; box-shadow: 0 4px 0 #1a2e4a; }
#btnRaid { left: calc(var(--safeL) + 262px); }
#game.battle #actions, #game.battle #nextWave, #game.battle #goalBox, #game.battle #hud, #game.battle #armHint, #game.battle #bossBar { display: none !important; }
#battleHud { position: absolute; left: var(--safeL); top: 6px; display: none; gap: 6px; pointer-events: none !important; }
#game.battle #battleHud { display: flex; }
#armyBar { position: absolute; left: var(--safeL); right: var(--safeR); bottom: 8px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#armyBar button { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 64px; min-height: 0; padding: 2px; background: radial-gradient(circle at 50% 30%, #3a5878, #14243a 72%); border: 2px solid #e6c06a; border-radius: 12px; }
#armyBar button:first-child { width: 56px; font-size: 12px; font-weight: 800; }
#armyBar button.on { border-color: #fff; box-shadow: 0 0 0 2px #6fd4ff, 0 0 12px #6fd4ff; }
#armyBar .ic { width: 36px; height: 36px; }
#armyBar em { font: 800 11px Cinzel, serif; font-style: normal; color: #fff; }
#armyBar i { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; }
#armyBar u { display: block; height: 100%; width: 100%; background: #62d06a; }

/* --- sol sıra --- */
#cityQueue { position: absolute; left: var(--safeL); top: 48px; z-index: 3; display: flex; flex-direction: column; gap: 4px; width: 188px; max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none; }
#cityQueue[hidden] { display: none; }
.qItem { position: relative; display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 5px; padding: 3px 4px 6px 4px; background: rgba(10,16,26,.82); border: 1px solid rgba(230,192,106,.55); border-radius: 9px; }
.qItem .ic { grid-row: 1 / 3; width: 20px; height: 20px; }
.qItem b { overflow: hidden; font-size: 10px; color: #ffe6a8; white-space: nowrap; text-overflow: ellipsis; }
.qItem .qTime { grid-column: 2; font: 700 10px Cinzel, serif; color: #9fe8ff; }
.qItem .qGem { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 2px; min-width: 0; min-height: 26px; padding: 2px 6px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(#4f8fd8, #2a4a8a); border: 1px solid #9fd0ff; border-radius: 8px; }
.qItem .qGem .ic { width: 13px; height: 13px; }
.qItem .qBar { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px; background: rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; }
.qItem .qBar u { display: block; height: 100%; width: 0; background: #62d06a; }
.qItem[data-kind="alay"] { border-color: rgba(255,138,90,.6); }
.qItem[data-kind="kervan"] { border-color: rgba(255,208,64,.6); }

/* --- MMORPG envanteri --- */
.mmo { position: relative; display: grid; grid-template-columns: 196px 1fr; gap: 8px; align-items: start; }
.doll { display: grid; grid-template-columns: 44px 1fr 44px; gap: 4px; padding: 6px; background: linear-gradient(#1a2233, #0c111c); border: 1px solid rgba(230,192,106,.5); border-radius: 10px; }
.dollCol { display: flex; flex-direction: column; gap: 4px; }
.dollCol .itemTile { width: 44px; height: 44px; min-width: 0; }
.dollMid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dollMid .tile { width: 72px; height: 72px; }
.lvlBadge { padding: 1px 8px; font: 800 11px Cinzel, serif; font-style: normal; color: #10182a; background: linear-gradient(#ffe08a, #c99a3a); border-radius: 8px; }
.dollStats { display: grid; grid-template-columns: auto auto; gap: 0 6px; width: 100%; font-size: 9px; }
.dollStats span { color: #9fb4c8; }
.dollStats b { color: #ffe6a8; text-align: right; }
.bag { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bagHead { display: flex; align-items: center; gap: 4px; }
.bagHead b { flex: 1; font-size: 12px; color: var(--gold); }
.bagHead button { min-height: 24px; padding: 2px 8px; font-size: 10px; }
.bagGrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; padding: 4px; background: rgba(0,0,0,.45); border: 1px solid #3a4658; border-radius: 8px; }
.bagGrid .cell, .bagGrid .itemTile { aspect-ratio: 1; width: 100%; height: auto; min-width: 0; min-height: 0; border-radius: 6px; }
.bagGrid .cell { display: block; background: rgba(40,50,68,.55); border: 1px solid #2a3446; }
.bagGrid .itemTile .ic { width: 70%; height: 70%; }
.itemTile .req { position: absolute; right: 1px; bottom: 0; font: 800 8px Cinzel, serif; color: #fff; text-shadow: 0 1px 1px #000; }
.itemTile.locked { filter: grayscale(.6) brightness(.75); }
.itemTile.locked .req { color: #ff6a5a; }
.itemTile.better::after { content: '▲'; position: absolute; left: 2px; top: 0; font-size: 9px; color: #62d06a; text-shadow: 0 1px 1px #000; }
.itemTile.sel { outline: 2px solid #fff; outline-offset: 1px; }
.mmo .itemCard { position: absolute; right: 0; top: 30px; z-index: 4; width: 190px; box-shadow: 0 6px 18px rgba(0,0,0,.7); }
.itemCard em { display: block; font-size: 10px; color: #9fb4c8; font-style: normal; }
.itemCard .req { font: 700 11px Cinzel, serif; color: #62d06a; }
.itemCard .req.no { color: #ff6a5a; }
.itemCard .stat { margin: 0; font: 600 12px Garamond, serif; }
.itemCard .up { color: #62d06a; }
.itemCard .down { color: #ff6a5a; }
.itemCard .acts { display: flex; gap: 4px; margin-top: 4px; }
#floats .xpf { color: #9fe8ff; font-size: 10px; }

/* --- bina paneli: bedel, eksik kaynak --- */
#citySheet { background: linear-gradient(#1c2638, #0f1520 70%); border: 1px solid rgba(230,192,106,.7); box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,234,184,.15); }
#citySheet h3 { padding-bottom: 4px; border-bottom: 1px solid rgba(230,192,106,.25); }
.costs { flex-direction: column; align-items: stretch; gap: 5px; }
.costs .costRow { display: flex; flex-wrap: wrap; gap: 4px; }
.costs .chip { border: 1px solid rgba(255,255,255,.08); }
.costs .chip.short { color: #ffb0a4; background: rgba(140,24,16,.55); border-color: #ff6a5a; }
.costs .why { margin: 0 !important; padding: 4px 8px; font: 700 11px Cinzel, serif !important; font-style: normal !important; color: #ffcf8a !important; background: rgba(90,50,10,.5); border-left: 3px solid #e0a030; border-radius: 4px; }
.costs .miss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px; background: rgba(120,20,14,.28); border: 1px solid rgba(255,106,90,.5); border-radius: 8px; }
.costs .miss > b { font-size: 11px; color: #ff8a7a; }
#citySheet .costs .fillGem { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: auto; min-height: 28px; margin: 0 0 0 auto; padding: 2px 10px; font-size: 11px; color: #fff; background: linear-gradient(#4f8fd8, #2a4a8a); border: 1px solid #9fd0ff; border-radius: 8px; }
#citySheet .costs .fillGem .ic { width: 14px; height: 14px; }

/* --- görevler --- */
.qTabs { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; padding-bottom: 4px; background: inherit; }
.qTabs button { position: relative; }
.qDot { position: absolute; top: -5px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; font: 800 10px/16px sans-serif; font-style: normal; color: #fff; background: #e0402a; border: 1px solid #ffd0c8; border-radius: 8px; }
.qTop { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px; }
.qTop b { font-size: 13px; color: var(--gold); }
.qTop span { font-size: 11px; color: #9fb4c8; }
.qCard { grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(90deg, rgba(40,52,72,.95), rgba(20,28,40,.95)); border: 1px solid #3f5068; border-left: 4px solid #6f86a8; border-radius: 10px; }
.qCard.ready { border-left-color: #62d06a; box-shadow: 0 0 0 1px rgba(98,208,106,.45), 0 0 14px rgba(98,208,106,.2); }
.qCard.done { opacity: .6; border-left-color: #8a8a8a; }
.qCard.lock { opacity: .75; border-left-color: #a05a3a; }
.qCard.open { border-left-color: #e0a030; }
.qCard .qIc { width: 36px; height: 36px; }
.qMid { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.qMid > b { font-size: 13px; color: #ffe6a8; }
.qMid > span { font: italic 12px Garamond, serif; color: #d8ccb0; line-height: 1.15; }
.qProg { position: relative; display: block; height: 12px; background: rgba(0,0,0,.55); border: 1px solid #55657a; border-radius: 6px; overflow: hidden; }
.qProg u { display: block; height: 100%; background: linear-gradient(90deg, #3fae5a, #8ee08a); }
.qCard.wip .qProg u, .qCard.lock .qProg u { background: linear-gradient(90deg, #3f7ad0, #7fc0ff); }
.qProg em { position: absolute; inset: 0; font: 800 9px/12px sans-serif; font-style: normal; color: #fff; text-align: center; text-shadow: 0 1px 1px #000; }
.qReward { display: flex; flex-wrap: wrap; gap: 4px; }
.qReward .chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 2px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.4); border-radius: 10px; }
.qReward .ic { width: 15px; height: 15px; }
.qBtn { min-width: 86px; min-height: 34px; padding: 4px 10px; font-size: 12px; font-weight: 800; border-radius: 9px; }
.qBtn.ready { color: #10240f; background: linear-gradient(#a8f0a0, #3fae5a); border-color: #d8ffd0; animation: qPulse 1.4s ease-in-out infinite; }
.qBtn.open { color: #2c1a05; background: linear-gradient(#f9dd93, #d39a35); border-color: #ffeab8; }
@keyframes qPulse { 50% { transform: scale(1.06); } }

/* --- Işınlan haritası --- */
#btnRunCity { background: radial-gradient(circle at 24px 50%, rgba(160,220,255,.9) 0 9px, transparent 10px), url(img/icons/u_sefer.svg) 8px center / 30px no-repeat, linear-gradient(#6a5fd0, #2f2a7a); }
.tpBox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.tpMap { position: relative; border: 2px solid #8a6a3a; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 30px rgba(60,30,0,.5), 0 4px 14px rgba(0,0,0,.5); }
.tpSvg { display: block; width: 100%; height: auto; }
.tpNode { cursor: pointer; }
.tpNode:hover circle { stroke-width: 4; }
.tpNode.lock { opacity: .7; }
.tpNum { font: 800 13px Cinzel, serif; fill: #ffe6a8; pointer-events: none; }
.tpName { font: 800 10px Cinzel, serif; fill: #2a1a0c; paint-order: stroke; stroke: #f1e2bc; stroke-width: 3px; pointer-events: none; }
.tpReq { font: 800 9px sans-serif; fill: #a02a2a; paint-order: stroke; stroke: #f1e2bc; stroke-width: 3px; }
.tpGlow { fill: none; stroke: #9fe8ff; stroke-width: 3; animation: tpRing 1.2s ease-in-out infinite; transform-origin: center; }
@keyframes tpRing { 50% { stroke-width: 7; opacity: .5; } }
.tpFlash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff, rgba(140,210,255,.7) 40%, transparent 70%); animation: tpFlash .45s ease-out forwards; }
@keyframes tpFlash { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1.4); } }
.tpCard { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(90deg, rgba(40,52,72,.95), rgba(20,28,40,.95)); border: 1px solid #e6c06a; border-radius: 10px; }
.tpInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.tpInfo b { font-size: 15px; color: #ffe6a8; }
.tpInfo em { font: 700 11px Cinzel, serif; font-style: normal; color: #9fe8ff; }
.tpInfo span { font: italic 12px Garamond, serif; color: #d8ccb0; }
.tpFoes { display: flex; gap: 3px; }
.tpFoes img, .tpFoes .ic { width: 24px; height: 24px; border-radius: 6px; background: rgba(0,0,0,.4); }
.tpTeam { display: flex; gap: 4px; }
.tpTeam .tile { width: 40px; height: 40px; }
.tpGo { min-width: 110px; min-height: 46px; font-size: 15px; font-weight: 800; color: #fff !important; background: linear-gradient(#8fd0ff, #3a5fd0) !important; border-color: #cfeeff !important; box-shadow: 0 0 12px rgba(120,200,255,.6); }
.tpBox { display: grid; grid-template-columns: 1fr 210px; align-items: start; }
.tpBox > .runInfo { grid-column: 1 / -1; }
.tpCard { grid-template-columns: 1fr; align-self: stretch; align-content: start; }
.tpGo { width: 100%; }

/* --- Işınlan bölgesi: harita, iksir, çıkış --- */
#runSide { position: absolute; top: 6px; right: var(--safeR); display: none; flex-direction: column; align-items: flex-end; gap: 4px; }
#game.run #runSide { display: flex; }
#runMap { width: 120px; height: 108px; border: 2px solid #e6c06a; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.6); }

#btnPot { position: absolute; right: calc(var(--safeR) + 8px); bottom: 74px; display: none; width: 50px; height: 50px; --i: none; background: radial-gradient(circle at 50% 62%, #ff4a3a 0 34%, #8a1010 35% 44%, transparent 45%), radial-gradient(circle at 50% 30%, #e8d8b0 0 12%, transparent 13%), linear-gradient(#3a2a2a, #1a1214); border: 2px solid #ffb0a0; border-radius: 50%; }
#game.run #btnPot { display: block; }
#btnPot b { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 4px; font: 800 11px/18px sans-serif; color: #fff; background: #a01a12; border: 1px solid #ffd0c8; border-radius: 9px; }
#game.run #runHud { right: 140px; }
.tpBeast { padding: 1px 7px; font-size: 10px; font-weight: 700; color: #e8dcc0; background: rgba(0,0,0,.4); border-radius: 8px; }
.tpBeast.boss { color: #ffb0a0; background: rgba(120,20,14,.55); }
.tpFoes { flex-wrap: wrap; }
.tpPots { font: 700 11px Cinzel, serif; font-style: normal; color: #ff9a8a; }
.tpPot { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; font-size: 11px; }
.tpPot .ic { width: 14px; height: 14px; }

/* --- Işınlan: MMORPG HUD --- */
#runBars, #runAct, #potRow, #runTog, #lootFeed, #combo, #runBoss, #questTrack { display: none; }
#game.run #potRow, #game.run #lootFeed { display: flex; }
#game.run #combo:not([hidden]), #game.run #runBoss:not([hidden]), #game.run #questTrack:not([hidden]) { display: flex; }

#runBars { position: absolute; left: var(--safeL); top: 4px; align-items: center; gap: 6px; pointer-events: none; }
#runPortrait { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e6c06a; background: #2a1a0c center/cover; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
#runBars > div { display: flex; flex-direction: column; gap: 3px; }
#hpBar, #rageBar { position: relative; display: block; width: 170px; height: 13px; background: rgba(20,10,8,.8); border: 1px solid #000; border-radius: 7px; overflow: hidden; }
#hpBar u { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff6a5a, #b0201a); transition: width .15s; }
#hpBar b { position: absolute; inset: 0; font: 800 10px/13px sans-serif; color: #fff; text-align: center; text-shadow: 0 1px 1px #000; }
#rageBar { height: 6px; width: 130px; }
#rageBar u { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb040, #ff4a20); }
#rageBar.full u { animation: rageGlow .6s infinite alternate; }
@keyframes rageGlow { to { filter: brightness(1.6); } }
#runBuffs { display: flex; gap: 3px; }
#runBuffs span { padding: 0 5px; font: 700 9px/14px sans-serif; color: #fff; border-radius: 6px; background: rgba(0,0,0,.55); }
#runBoss { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
#runBoss b { font: 800 12px Cinzel, serif; color: #ffd0b0; text-shadow: 0 1px 3px #000; }
#runBoss i { display: block; width: 260px; height: 12px; background: rgba(20,6,6,.85); border: 1px solid #ff9a7a; border-radius: 6px; overflow: hidden; }
#runBoss u { display: block; height: 100%; background: linear-gradient(#ff5a3a, #8a1010); transition: width .2s; }
#runBoss.rage i { box-shadow: 0 0 10px #ff3020; }
#combo { position: absolute; right: calc(var(--safeR) + 140px); top: 60px; flex-direction: column; align-items: center; pointer-events: none; }
#combo b { font: 900 26px/1 Cinzel, serif; color: #ffd23a; text-shadow: 0 2px 4px #000, 0 0 10px #ff8a00; }
#combo span { font: 800 9px sans-serif; color: #ffe0a0; letter-spacing: 2px; }
#lootFeed { position: absolute; left: var(--safeL); bottom: 120px; flex-direction: column-reverse; gap: 2px; pointer-events: none; }
#lootFeed span { padding: 1px 8px; font: 700 11px sans-serif; color: #eee; background: rgba(0,0,0,.5); border-radius: 6px; animation: feed 4s forwards; }
@keyframes feed { 0% { opacity: 0; transform: translateX(-20px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#questTrack { position: absolute; left: var(--safeL); top: 92px; flex-direction: column; padding: 4px 8px; font: 700 11px sans-serif; color: #f0e0b0; background: rgba(30,18,8,.7); border-left: 3px solid #e6c06a; border-radius: 4px; pointer-events: none; }
#questTrack.done { color: #9aff9a; border-color: #6fdc6f; }
#runAct { position: absolute; right: calc(var(--safeR) + 66px); bottom: 74px; gap: 8px; }
#btnRoll { --i: url(img/icons/u_ayak.svg); width: 46px; height: 46px; }
#btnUlt { --i: url(img/icons/u_nara.svg); width: 52px; height: 52px; opacity: .45; }
#btnUlt.ready { opacity: 1; box-shadow: 0 0 14px #ff8a20; animation: rageGlow .6s infinite alternate; }
#btnRoll[data-cd]::after, .potK[data-cd]::after { content: attr(data-cd); position: absolute; inset: 0; display: grid; place-items: center; font: 800 14px sans-serif; color: #fff; background: rgba(0,0,0,.5); border-radius: 50%; }
#potRow { position: absolute; right: calc(var(--safeR) + 8px); bottom: 132px; flex-direction: column; gap: 5px; }
.potK { width: 34px; height: 34px; --i: none; border-radius: 50%; }
.potK[data-k="mavi"] { background: radial-gradient(circle at 50% 60%, #4a8aff 0 38%, #102a8a 39% 50%, #1a1420 51%); }
.potK[data-k="hiz"] { background: radial-gradient(circle at 50% 60%, #5aff8a 0 38%, #108a3a 39% 50%, #1a1420 51%); }
.potK[data-k="guc"] { background: radial-gradient(circle at 50% 60%, #ffaa40 0 38%, #8a4a10 39% 50%, #1a1420 51%); }
.potK b { position: absolute; right: -4px; bottom: -4px; min-width: 14px; font: 800 9px/14px sans-serif; color: #fff; background: #222; border-radius: 7px; }
.potK.none { opacity: .35; }
#runTog { position: absolute; right: calc(var(--safeR) + 128px); top: 6px; gap: 6px; }
#btnCamp { width: 40px; height: 40px; --i: url(img/icons/u_magaza.svg); }
#btnCamp:not([hidden]) { animation: rageGlow .8s infinite alternate; }
/* Hasar sayıları: okunur yazı, dış çizgi, vuruşta büyüyüp oturur, yükselerek söner; kritik iri ve altın */
#floats .dmgf, #floats .hurtf, #floats .healf, #floats .missf { font: 800 15px/1 system-ui, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; color: #fff6dc; white-space: nowrap; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,.6); animation: dmgpop .75s cubic-bezier(.2,.8,.3,1) forwards; }
#floats .dmgf.c { color: #ffbe3a; font-size: 23px; font-weight: 900; text-shadow: -1px -1px 0 #2a1004, 1px -1px 0 #2a1004, -1px 1px 0 #2a1004, 1px 1px 0 #2a1004, 0 0 10px rgba(255, 120, 20, .75); animation: critpop .95s cubic-bezier(.2,.8,.3,1) forwards; }
#floats .dmgf.o { color: #d4d0c8; font-size: 11px; }
#floats .hurtf { color: #ff5a4a; font-size: 14px; }
#floats .healf { color: #6dff7e; }
#floats .missf { color: #c8ccd2; font-size: 11px; font-style: italic; }
@keyframes dmgpop { 0% { transform: translate(-50%, 4px) scale(.5); opacity: 0; } 12% { transform: translate(-50%, -4px) scale(1.2); opacity: 1; } 24% { transform: translate(-50%, -6px) scale(1); } 70% { opacity: 1; } 100% { transform: translate(-50%, -34px) scale(.92); opacity: 0; } }
@keyframes critpop { 0% { transform: translate(-50%, 0) scale(.4) rotate(-8deg); opacity: 0; } 10% { transform: translate(-50%, -8px) scale(1.5) rotate(3deg); opacity: 1; } 22% { transform: translate(-50%, -10px) scale(1) rotate(0); } 72% { opacity: 1; } 100% { transform: translate(-50%, -42px) scale(.95); opacity: 0; } }
.itemTile .plus { position: absolute; left: 2px; top: 1px; font: 800 9px sans-serif; color: #ffe070; text-shadow: 0 1px 1px #000; }
.itemTile .lk { position: absolute; right: 2px; top: 1px; font-size: 9px; }
.itemCard .acts { flex-wrap: wrap; }
.powerTag { font: 800 11px Cinzel, serif; color: #ffd86a; }
.powerTag.low { color: #ff7a6a; }
.beastRow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 4px 8px; font-size: 12px; background: rgba(0,0,0,.25); border-radius: 6px; margin: 2px 0; }
.beastRow em { color: #ffd86a; font-style: normal; font-weight: 800; }
.tpDrops { display: flex; gap: 4px; flex-wrap: wrap; }
.tpDrops span { padding: 0 6px; font: 700 10px/16px sans-serif; border-radius: 6px; background: rgba(0,0,0,.4); }

#game.run #runRank { display: none; }
#potRow { right: calc(var(--safeR) + 66px); bottom: 132px; flex-direction: row; }
#btnUlt { --i: url(img/icons/u_yildiz.svg); }

#runTog .ib[hidden] { display: none; }
.heroTabs button { font-size: 11px; padding: 4px 8px; }

.tpDung { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tpDung button { min-height: 28px; font-size: 10px; }
.heroHead .powerTag { display: block; }
.mmo .itemCard { max-height: calc(100% - 34px); overflow-y: auto; bottom: 4px; }

#nameTags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
#nameTags span { position: absolute; transform: translate(-50%, -100%); padding: 0 5px; font: 800 9px/13px sans-serif; color: #f0e8d0; background: rgba(0,0,0,.45); border-radius: 5px; white-space: nowrap; }
#nameTags .elite { color: #ffe070; } #nameTags .rare { color: #e0a0ff; } #nameTags .gold { color: #ffd040; }
#nameTags .boss { color: #ff9a8a; font-size: 11px; } #nameTags .hot { color: #ff6050; }

#btnBigMap { position: absolute; left: -34px; top: 0; width: 28px; height: 28px; --i: url(img/icons/u_yol.svg); }
#runSide.big #runMap { width: 300px; height: 270px; }
#runSide { position: absolute; }
.dyes { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.dye { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #555; }
.dye.on { border-color: #ffd86a; box-shadow: 0 0 8px #ffd86a; }
#game.run #runSkills .ib, #game.run #runAct .ib, #game.run #btnPot { transform: scale(var(--btn, 1)); transform-origin: bottom right; }

#game.left.run #btnPot { right: auto; left: calc(var(--safeL) + 8px); }
#game.left.run #potRow { right: auto; left: calc(var(--safeL) + 66px); }
#game.left.run #lootFeed { left: auto; right: var(--safeR); align-items: flex-end; }
#game.left.run #joy { left: auto; right: 0; }
#combo { right: auto; left: 50%; top: 44px; transform: translateX(-50%); }
#btnBigMap { left: -34px; top: auto; bottom: 0; }

#btnEmote { width: 40px; height: 40px; --i: url(img/icons/u_madalya.svg); }
.dyes button:not(.dye) { padding: 4px 10px; font-size: 11px; }
.dyes button.on { box-shadow: 0 0 8px #ffd86a; border-color: #ffd86a; }
.dye { font: 800 9px sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#runBoss i { width: 200px; } #runBoss { left: 47%; }
#btnSnare { width: 40px; height: 40px; --i: url(img/icons/u_tuzak.svg); font: 800 10px sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#btnLock { width: 40px; height: 40px; --i: url(img/icons/u_hucum.svg); }
#btnLock.on { box-shadow: 0 0 10px #ff5040; border-color: #ff5040; }
.depotHead { display: block; margin: 8px 0 4px; font-size: 12px; color: #e8d8b0; }

/* Kadim Diyar: ana ekran ve giriş */

#auth { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: radial-gradient(#2a1f16, #0e0a07); }
#auth[hidden] { display: none; }
#auth form { width: min(360px, calc(100% - 32px)); padding: 24px; display: flex; flex-direction: column; gap: 10px; background: rgba(28, 20, 14, 0.95); border: 1px solid #e6c06a; border-radius: 12px; }
#auth h1 { margin: 0 0 6px; text-align: center; color: #e6c06a; }
#auth input { padding: 10px 12px; border-radius: 8px; border: 1px solid #5a4630; background: #120d09; color: #f4ead2; font-size: 16px; }
#auth .row { display: flex; gap: 8px; } #auth .row button { flex: 1; }
#auth .msg { min-height: 1.2em; margin: 0; color: #ff9a7a; text-align: center; }

#nameTags span.player { color: #9fe0ff; }

/* --- Kadim Diyar savaş ekranı düzeni (Metin2 gibi: sol üst can, sağ üst harita, sağ alt yetenek yayı, alt orta iksirler) --- */

#game.run #runTog { position: absolute; top: 134px !important; right: calc(var(--safeR) + 54px) !important; left: auto !important; display: grid !important; grid-template-columns: repeat(3, 36px); gap: 4px; }

#btnEmote { --i: url(img/icons/u_selam.svg) !important; }
#btnLock { --i: url(img/icons/u_hedef.svg) !important; }
/* sağ alt: büyük nihai yetenek, çevresinde dört yetenek yayı, solda yuvarlanma */
#game.run #runAct { position: absolute; right: var(--safeR) !important; bottom: 0 !important; left: auto !important; width: 0; height: 0; display: block !important; }
#game.run #btnUlt { position: absolute; right: 14px; bottom: 14px; width: 74px !important; height: 74px !important; }
#game.run #btnRoll { position: absolute; right: 160px; bottom: 12px; width: 50px !important; height: 50px !important; }
#game.run #runSkills { right: var(--safeR) !important; bottom: 0 !important; left: auto !important; width: 0; height: 0; display: block !important; }

/* alt orta: hızlı iksir yuvaları */

/* en alt: tam genişlikte tecrübe barı */
#game.run #runXp { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; height: 5px; border: 0; border-radius: 0; z-index: 5; }
#game.run #runXp u { background: linear-gradient(90deg, #6fd4ff, #ffd86a); }

/* sol el modu: yetenek yayı ve nihai sol altta (aynalı), joystick sağda */
#game.left.run #runAct, #game.left.run #runSkills { right: auto !important; left: var(--safeL) !important; }

#game.left.run #lootFeed { bottom: 190px; }

/* sohbet, hedef çerçevesi, düşük can, kısayol ipuçları */
#chatLog { position: absolute; left: calc(var(--safeL) + 8px); bottom: 150px; width: min(46vw, 360px); display: none; flex-direction: column; gap: 2px; pointer-events: none; font-size: 12px; }
#game.run #chatLog { display: flex; }
#chatLog .cl { background: rgba(10, 8, 6, .55); padding: 2px 6px; border-radius: 4px; color: #f4ead2; transition: opacity 1s; }
#chatLog .cl.me { color: #ffd86a; } #chatLog .cl.sys { color: #9fe0ff; font-style: italic; } #chatLog .cl.old { opacity: .25; }
#chatIn { position: absolute; left: calc(var(--safeL) + 8px); bottom: 118px; width: min(46vw, 360px); padding: 6px 8px; border-radius: 6px; border: 1px solid #e6c06a; background: rgba(10, 8, 6, .85); color: #fff; font-size: 14px; z-index: 30; }
#targetFrame { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); min-width: 180px; padding: 3px 8px; background: rgba(10, 8, 6, .7); border: 1px solid #a02a2a; border-radius: 6px; text-align: center; pointer-events: none; font-size: 12px; }
#targetFrame i { display: block; height: 5px; margin-top: 3px; background: #2a1010; border-radius: 3px; overflow: hidden; } #targetFrame u { display: block; height: 100%; background: #e04030; }
#targetFrame.boss { border-color: #ff5040; } #targetFrame.rare { border-color: #c070ff; }
#lowHp { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 10px rgba(220, 20, 20, .55); opacity: 0; }
#lowHp.on { animation: nabiz 1s infinite; }
@keyframes nabiz { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
#xpPct { position: fixed; right: 8px; bottom: 7px; font: 700 10px sans-serif; color: #ffd86a; text-shadow: 0 1px 2px #000; pointer-events: none; display: none; }
#game.run #xpPct { display: block; }
#game.run #btnPot::after, #game.run .potK::after { content: attr(data-key); position: absolute; left: 3px; top: 1px; font: 800 10px sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#runSkills .ib.ready { animation: hazir .6s ease-out; } @keyframes hazir { 0% { box-shadow: 0 0 0 0 #ffd86a; } 50% { box-shadow: 0 0 18px 6px #ffd86a; } 100% { box-shadow: 0 0 0 0 transparent; } }
#combo[data-tier="1"] b { color: #ffd86a; } #combo[data-tier="2"] b { color: #ff9a3a; } #combo[data-tier="3"] b { color: #ff4a3a; text-shadow: 0 0 12px #ff4a3a; }
#nameTags span.p2 { color: #8affb0; } #nameTags span.p3 { color: #d8a0ff; } #nameTags span.p4 { color: #ffd060; } #nameTags span.pdead { color: #888; }
#nameTags span.say { color: #fff; background: rgba(10,8,6,.7); padding: 2px 6px; border-radius: 8px; }
#netPill.ok { color: #8aff9a; } #netPill.mid { color: #ffd86a; } #netPill.bad { color: #ff6a5a; }
#game.run #btnBigMap { position: absolute; left: -46px; top: 0; bottom: auto; }

#chatLog .cl, #chatIn, #targetFrame, #netPill { font-family: system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
#netPill { font-size: 12px; font-weight: 700; }

/* ikinci 100: parti, yön okları, uyarılar, kuşan bildirimi */
#partyBox { position: absolute; left: calc(var(--safeL) + 8px); top: 150px; display: none; flex-direction: column; gap: 3px; pointer-events: none; font: 600 11px system-ui, sans-serif; }
#game.run #partyBox { display: flex; }
#partyBox div { width: 130px; padding: 2px 5px; background: rgba(10, 30, 10, .6); border: 1px solid #4a8a4a; border-radius: 4px; color: #b8ffb8; }
#partyBox i { display: block; height: 3px; margin-top: 2px; background: #1a2a1a; } #partyBox u { display: block; height: 100%; background: #6fe06f; }
#arrows b { position: absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 18px solid #ff4030; transform-origin: 50% 50%; pointer-events: none; filter: drop-shadow(0 0 3px #000); }
#arrows b.stone { border-bottom-color: #c040ff; } #arrows b.hunt { border-bottom-color: #6fffd0; }
#surround { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); color: #ff6a5a; font: 800 16px system-ui, sans-serif; text-shadow: 0 0 6px #000; pointer-events: none; }
#equipToast { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); padding: 6px 10px; background: rgba(10, 8, 6, .85); border: 1px solid #ffd86a; border-radius: 8px; display: flex; gap: 8px; align-items: center; font: 600 13px system-ui, sans-serif; z-index: 20; }
#equipToast[hidden] { display: none; }
#chatLog .cl.wh { color: #e0a0ff; } #chatLog .cl.pc { color: #8aff9a; }
#nameTags span.pparty { color: #6fe06f; }

#flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,220,120,.35), transparent 70%); opacity: 0; transition: opacity .4s; }

#game { --hud: 1; } #game.run #runHud, #game.run #runSide, #game.run #runSkills, #game.run #runAct, #game.run #potRow, #game.run #btnPot { opacity: var(--hud); }
#partyBox { top: 132px; }
#chatLog { bottom: 66px; } #chatIn { bottom: 36px; }

/* --- küçük ve düzenli düğmeler (son ayar): ekranı kaplamaz; sağ altta büyük Vur, çevresinde yetenekler --- */
#game.run .pill { font-size: 11px !important; }
#game.run .pill b { font-size: 12px !important; }
#game.run #runBars { transform: scale(0.82); transform-origin: top left; }

#game.run #hudTools { right: calc(var(--safeR) + 6px) !important; top: 6px !important; }
#game.run #hudTools .ib { width: 32px !important; height: 32px !important; }

/* sağ alt: büyük Vur köşede, nihai ve dört yetenek yayda, yuvarlanma solda */
#game.run #btnAtk { position: absolute; right: 12px; bottom: 12px; width: 76px !important; height: 76px !important; --i: url(img/icons/u_kilic.svg); border-width: 3px; }
#game.run #btnAtk.on { transform: scale(0.93); box-shadow: 0 0 14px #ffd86a; }

#game.left.run #btnAtk { right: auto; left: 12px; }
#game.left.run #btnUlt { right: auto !important; left: 104px !important; } #game.left.run #btnRoll { right: auto !important; left: 156px !important; }
#game.left.run #runSkills .ib:nth-child(1) { right: auto !important; left: 96px !important; } #game.left.run #runSkills .ib:nth-child(2) { right: auto !important; left: 74px !important; }
#game.left.run #runSkills .ib:nth-child(3) { right: auto !important; left: 36px !important; } #game.left.run #runSkills .ib:nth-child(4) { right: auto !important; left: 0 !important; }
/* alt orta iksirler küçük */

#game.run #potRow .ib b, #game.run #btnPot b { font-size: 10px; }
#game.run #lootFeed { font-size: 11px; }

/* üçüncü 100 */
#game.run #btnAtk::after, #game.run #btnRoll::after, #game.run #runSkills .ib::after, #game.run #runTog .ib[data-key]::after { content: attr(data-key); position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font: 700 8px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
#game.run #btnAtk[data-combo]::before { content: attr(data-combo); position: absolute; top: -6px; right: -4px; padding: 0 5px; border-radius: 8px; background: #a02a2a; font: 800 11px system-ui, sans-serif; color: #ffd86a; }
#game.run #btnUlt { background-image: var(--i), conic-gradient(#ffd86a calc(var(--rage, 0) * 1%), rgba(0, 0, 0, .35) 0) !important; } /* öfke halkası */
#hpBar.low u { animation: nabiz 0.8s infinite; }
#hurtDir { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s; background: conic-gradient(from var(--a, 0deg), rgba(255, 40, 30, .5) 0 30deg, transparent 30deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); }
#hurtDir.on { opacity: 1; }
#game.run.dead #runSkills, #game.run.dead #runAct { opacity: .35; }
#lootFeed .loot:nth-child(n+5) { display: none; }

#flash.red { background: radial-gradient(circle, transparent 40%, rgba(255, 30, 20, .45)); }
#game.run #runAct, #game.run #runSkills { transform: scale(var(--btn, 1)); transform-origin: bottom right; }
#game.left.run #runAct, #game.left.run #runSkills { transform-origin: bottom left; }

#game.dmgS #floats .dmgf { font-size: 11px; } #game.dmgS #floats .dmgf.c { font-size: 16px; }
#game.dmgL #floats .dmgf { font-size: 19px; } #game.dmgL #floats .dmgf.c { font-size: 29px; }

/* Dördüncü 100: duyuru şeridi, değinme, AFK, arayüzü gizle */
#banner { position: absolute; left: 50%; top: 4%; transform: translate(-50%, -10px); max-width: 56%; padding: 4px 12px; border-radius: 10px; background: rgba(30, 20, 8, .78); border: 1px solid #c8a050; color: #ffe0a0; font: 700 10px/1.3 sans-serif; text-align: center; text-shadow: 0 1px 2px #000; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 30; }
#banner.on { opacity: 1; transform: translate(-50%, 0); }
#chatLog .cl.mention { background: rgba(200, 160, 60, .35); color: #fff2c0; }
#chatLog .cl.rank { color: #ffc870; }
#chatLog .cl[onclick], #chatLog .cl.chat, #chatLog .cl.wh { cursor: pointer; }
#nameTags .player.pafk { opacity: .55; filter: grayscale(1); }
#game.noUi .hud, #game.noUi #runMap, #game.noUi #chatLog, #game.noUi #nameTags, #game.noUi .pill, #game.noUi button { visibility: hidden; }
#combo.off, #partyBox.off, #targetFrame.off { display: none !important; }
#game.chatS #chatLog { font-size: 10px; } #game.chatL #chatLog { font-size: 15px; }

/* === Profesyonel HUD (son söz): tek dil, ince çerçeveler, ekranı kaplamaz === */
#game.run { --hudBg: linear-gradient(180deg, rgba(28, 22, 14, .86), rgba(12, 10, 8, .86)); --hudLine: rgba(230, 192, 106, .55); --hudGold: #e6c06a; }
/* oyuncu çerçevesi: portre + seviye rozeti + can + öfke */

#game.run #runPortrait { position: relative; width: 40px !important; height: 40px !important; border-width: 2px !important; }
#game.run #runPortrait::after { content: attr(data-lvl); position: absolute; right: -5px; bottom: -4px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; background: #2a1a0c; border: 1px solid var(--hudGold); font: 800 10px/14px system-ui, sans-serif; color: #ffd86a; text-align: center; }

#game.run #runBuffs:empty { display: none; }
/* üst bilgi şeridi: tek satır, küçük haplar; can hapı (çubukta zaten var) gizli */
#game.run #runHud { top: 56px !important; left: calc(var(--safeL) + 6px) !important; gap: 3px !important; flex-wrap: nowrap !important; }
#game.run #runHud .pill { height: 20px !important; min-width: 0 !important; padding: 0 7px 0 21px !important; font-size: 10px !important; background: var(--hudBg) !important; border: 1px solid var(--hudLine) !important; border-radius: 10px !important; box-shadow: none !important; }

#game.run #runHud .pill::before { left: 3px; top: 2px; width: 15px; height: 15px; transform: none; }
#game.run #runHud #netPill, #game.run #runHud #clockPill { padding-left: 7px !important; } #game.run #runHud #netPill::before, #game.run #runHud #clockPill::before { display: none; }
#game.run #runHud .pill.can { display: none !important; }
/* görev ve parti: üst şeridin altında, ince */
#game.run #questTrack { top: 80px !important; left: calc(var(--safeL) + 6px) !important; padding: 3px 8px !important; font: 600 10.5px/1.35 system-ui, sans-serif !important; background: var(--hudBg) !important; border-left: 2px solid var(--hudGold) !important; border-radius: 0 6px 6px 0 !important; max-width: 260px; }

#game.run #partyBox div { width: 120px; background: var(--hudBg); border: 1px solid rgba(111, 224, 111, .5); border-radius: 5px; font-size: 10px; }
/* hedef ve boss: üst orta */

#game.run #targetFrame i { display: block; height: 5px; margin-top: 2px; border-radius: 3px; background: #1a0806; overflow: hidden; }
#game.run #targetFrame u { display: block; height: 100%; background: linear-gradient(90deg, #ff6a5a, #c42a1e); }

/* mini harita: çerçeveli, gölgeli */
#game.run #runMap { width: 104px !important; height: 94px !important; border: 2px solid var(--hudGold) !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .6); background: #0e140e; }

/* sağdaki küçük düğmeler: haritanın altında düzgün ızgara, aynı görünüş */

#game.run #runTog .ib { width: 28px !important; height: 28px !important; border-width: 1px !important; font: 800 8.5px system-ui, sans-serif !important; }
#game.run #runTog .ib[hidden] { display: none !important; }
/* sohbet: sol altta, ince, saydam; eski satırlar söner */
#game.run #chatLog { bottom: 48px !important; top: auto !important; width: min(38vw, 320px) !important; gap: 1px !important; font: 500 11px/1.35 system-ui, sans-serif; }
#game.run #chatLog .cl { background: linear-gradient(90deg, rgba(8, 6, 4, .62), rgba(8, 6, 4, 0)) !important; padding: 1px 6px !important; border-radius: 3px !important; text-shadow: 0 1px 1px #000; font-style: normal !important; }
#game.run #chatLog .cl.sys { color: #a8dcf0 !important; } 

/* tecrübe: en altta ince çubuk, yazısı ortada üstünde küçük */
#game.run #runXp { height: 4px !important; background: rgba(0, 0, 0, .65) !important; }

/* düğmeler: tek tip koyu zemin, ince altın kenar, basınca küçülür */
#game.run #runAct .ib, #game.run #runSkills .ib, #game.run #potRow .ib, #game.run #btnPot { border: 2px solid rgba(230, 192, 106, .8) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transition: transform .08s; }
#game.run .ib:active { transform: scale(.92); }
#game.run #btnAtk { border-width: 3px !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .6) !important; }
#game.run #lootFeed { bottom: 150px !important; }
/* dar telefon ekranı */
@media (max-height: 360px) { #game.run #runMap { width: 88px !important; height: 80px !important; } #game.run #runTog { top: 92px !important; } #game.run #chatLog { width: min(34vw, 260px) !important; } }

#chatLog .cl.gc { color: #ffb070 !important; }

/* sekmeli ayarlar */
#hubBody .tabs { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 4px 0 8px; background: inherit; flex-wrap: wrap; }
#hubBody .tabs button { flex: 1; min-width: 70px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(230, 192, 106, .45); background: rgba(20, 16, 10, .6); color: #e8dcc0; font: 700 12px system-ui, sans-serif; }
#hubBody .tabs button.on { background: linear-gradient(#e6c06a, #b08a3a); color: #2a1a05; border-color: #ffe6a8; }
#game.run #targetFrame { left: 54% !important; max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* boss can çubuğunda evre çizgileri (%25 %50 %75) */
#runBoss i { position: relative; }
#runBoss i::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(0, 0, 0, .75) calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) calc(50% - 1px), rgba(0, 0, 0, .75) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(75% - 1px), rgba(0, 0, 0, .75) calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px)); }
/* yuvarlak mini harita sol üst köşede; oyuncu kartı ve bilgiler sağına kayar */
#game.run { --mapW: 104px; } #game.mapS.run { --mapW: 80px; } #game.mapL.run { --mapW: 136px; }
#game.run #runSide { left: calc(var(--safeL) + 6px) !important; right: auto !important; top: 6px !important; align-items: flex-start !important; }
#game.run #runMap, #game.mapS.run #runMap, #game.mapL.run #runMap { width: var(--mapW) !important; height: var(--mapW) !important; border-radius: 50% !important; }

#game.run #partyBox { left: calc(var(--safeL) + 6px) !important; top: calc(var(--mapW) + 46px) !important; }

/* çevrimiçi oyunda duraklatma ve hız yok; harita ve menü düğmeleri küçülüp haritanın köşelerine oturur */
#game.run #hudTools { display: none !important; }
#game.run #btnBigMap { width: 26px !important; height: 26px !important; border-width: 1px !important; z-index: 3; }

/* sağ üstteki küçük düğmeler açılır-kapanır pencerede */
#btnTogs { display: none; }
#game.run #btnTogs { display: grid; place-items: center; position: absolute; top: 6px; right: calc(var(--safeR) + 6px); width: 34px; height: 34px; font: 800 18px/1 system-ui, sans-serif; color: #ffe6a8; border: 2px solid rgba(230, 192, 106, .8); z-index: 4; }
#game.run.togOpen #btnTogs { background: linear-gradient(#e6c06a, #b08a3a); color: #2a1a05; }
#game.run #runTog { top: 46px !important; right: calc(var(--safeR) + 6px) !important; transform-origin: top right; transition: transform .15s, opacity .15s; }

/* sohbet: daha küçük, tam sol alt köşede */
#game.run #chatLog { left: calc(var(--safeL) + 4px) !important; bottom: 8px !important; width: min(30vw, 240px) !important; font-size: 9.5px !important; line-height: 1.25; gap: 0 !important; }

/* haritanın altında kanal ve saat */
#mapInfo { display: none; }
#game.run #mapInfo { display: flex; gap: 3px; margin-top: 4px; width: max-content; max-width: calc(var(--mapW) + 60px); flex-wrap: wrap; }
#game.run #mapInfo .pill { height: 16px !important; padding: 0 5px !important; font: 700 9px/16px system-ui, sans-serif !important; background: rgba(12, 10, 8, .7) !important; border: 1px solid rgba(230, 192, 106, .4) !important; border-radius: 8px !important; box-shadow: none !important; }
#game.run #mapInfo .pill::before { display: none !important; }
#game.run #partyBox { top: calc(var(--mapW) + 34px) !important; }
/* oyuncu kartı daha küçük, sol üste yapışık (haritanın hemen yanında) */
#game.run #runBars { top: 2px !important; left: calc(var(--safeL) + var(--mapW) + 8px) !important; padding: 2px 7px 2px 2px !important; gap: 5px !important; border-radius: 20px 8px 8px 20px !important; }
#game.run #runPortrait { width: 30px !important; height: 30px !important; }
#game.run #runPortrait::after { min-width: 14px; height: 12px; font-size: 8px; line-height: 10px; right: -4px; bottom: -3px; }

#game.run #hpBar b { font-size: 8.5px !important; line-height: 11px !important; }

#game.run #runBuffs { transform: scale(.8); transform-origin: top left; }

#game.run #runHud .pill { height: 17px !important; font-size: 9px !important; }
#game.run #runHud .pill b { font-size: 9px !important; }
#game.run #runHud .pill::before { width: 12px !important; height: 12px !important; }
#game.run #questTrack { top: 61px !important; left: calc(var(--safeL) + var(--mapW) + 8px) !important; font-size: 9.5px !important; padding: 2px 6px !important; }

#nameTags .npc { color: #ffe6a8; background: rgba(40, 28, 10, .8); border: 1px solid rgba(230, 192, 106, .7); }
/* selam, tuzak ve hedef düğmeleri kalktı (tuşlar T, H, V hâlâ çalışır); yerine envanter, yetenek, geliştirme */
#game.run #btnEmote, #game.run #btnSnare, #game.run #btnLock { display: none !important; }
#game.run #btnInv, #game.run #btnSkills, #game.run #btnStats { font-size: 15px !important; }
#game.run #runTog .ib.pts::before { content: attr(data-pts); position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #c0302a; color: #fff; font: 800 9px/14px system-ui, sans-serif; }
/* menü ve büyük harita düğmeleri: çok küçük, haritanın köşelerinde */
#game.run #btnBigMap { width: 18px !important; height: 18px !important; min-width: 0 !important; padding: 0 !important; border-width: 1px !important; background-size: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .6) !important; }

/* sağ alt savaş düğmeleri: Vur köşede, dört yetenek eşit aralıklı yayda, nihai ve yuvarlanma altta sırada */
#game.run #btnAtk { right: 12px !important; bottom: 12px !important; width: 76px !important; height: 76px !important; }

#game.run #runSkills .ib:nth-child(1) { right: 126px !important; bottom: 45px !important; }
#game.run #runSkills .ib:nth-child(2) { right: 105px !important; bottom: 92px !important; }
#game.run #runSkills .ib:nth-child(3) { right: 62px !important; bottom: 122px !important; }
#game.run #runSkills .ib:nth-child(4) { right: 11px !important; bottom: 126px !important; }
#game.run #btnUlt { right: 130px !important; bottom: 2px !important; width: 40px !important; height: 40px !important; }
#game.run #btnRoll { right: 176px !important; bottom: 4px !important; width: 38px !important; height: 38px !important; }
#game.run #runSkills .ib, #game.run #btnUlt, #game.run #btnRoll, #game.run #btnAtk { background-color: #142238 !important; border: 2px solid rgba(230, 192, 106, .85) !important; }

/* yeni arayüz simgeleri (tools/make_ui_icons.mjs) */
#btnInv { --i: url(img/icons/ui_canta.svg); } #btnSkills { --i: url(img/icons/ui_yetenek.svg); } #btnStats { --i: url(img/icons/ui_gelistir.svg); }
#btnChat { --i: url(img/icons/ui_sohbet.svg); } #btnTogs { --i: url(img/icons/ui_kisayol.svg); }
#btnBigMap { --i: url(img/icons/ui_harita.svg); }  #btnCamp { --i: url(img/icons/ui_kamp.svg); }
#game.run #btnTogs, #game.run #runTog .ib { background: var(--i) center / 66% no-repeat, radial-gradient(circle at 50% 35%, #24365a, #0e1828) !important; font-size: 0 !important; }
#game.run #btnBigMap { background: var(--i) center / 70% no-repeat, #0e1828 !important; }
#flash.gold { background: radial-gradient(circle, rgba(255, 220, 120, .25) 30%, rgba(255, 190, 60, .5)); }
/* paneller ve pencereler yumuşak açılır */
@keyframes kdPop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
#dialog:not([hidden]) .card, #hub:not([hidden]) { animation: kdPop .16s ease-out; }
/* tecrübe çubuğunda çeyrek işaretleri */
#game.run #runXp { background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(255, 230, 160, .35) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(255, 230, 160, .35) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(255, 230, 160, .35) calc(75% - 1px) 75%, transparent 75%) !important; }
#grade { position: absolute; inset: 0; pointer-events: none; transition: background 4s, opacity .5s; z-index: 0; }
#game:not(.run) ~ #grade, body:not(:has(#game.run)) #grade { display: none; }
/* çanta: nadirliğe göre parlayan çerçeve, yeni eşya rozeti */
.itemTile { border: 2px solid var(--r) !important; box-shadow: inset 0 0 10px color-mix(in srgb, var(--r) 45%, transparent) !important; position: relative; }
.itemTile[data-r="3"], .itemTile[data-r="4"] { animation: kdGlow 1.8s ease-in-out infinite; }
@keyframes kdGlow { 50% { box-shadow: inset 0 0 14px var(--r), 0 0 8px var(--r) !important; } }
.itemTile.new::after { content: 'Yeni'; position: absolute; top: -4px; left: -4px; padding: 0 4px; border-radius: 6px; background: #c0302a; color: #fff; font: 800 8px/13px system-ui, sans-serif; }
#btnInv.newItem::before { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #ff4030; box-shadow: 0 0 4px #ff4030; }
#btnRec { --i: url(img/icons/ui_sira.svg); }
/* sohbet sekmeleri */
#chatTabs { display: none; }
#game.run #chatTabs { display: flex; position: absolute; left: calc(var(--safeL) + 4px); bottom: 4px; gap: 2px; z-index: 6; }
#game.run #chatTabs button { padding: 0 5px; height: 14px; border-radius: 7px; border: 1px solid rgba(230, 192, 106, .35); background: rgba(12, 10, 8, .6); color: #d8c8a0; font: 700 8px/12px system-ui, sans-serif; }
#game.run #chatTabs button.on { background: rgba(230, 192, 106, .85); color: #2a1a05; }

#chatLog[data-f="pc"] .cl:not(.pc), #chatLog[data-f="gc"] .cl:not(.gc), #chatLog[data-f="wh"] .cl:not(.wh), #chatLog[data-f="sys"] .cl:not(.sys) { display: none; }
#chatLog[data-f]:not([data-f=""]) .cl.old { opacity: .9 !important; }
/* joystick: altın kenarlı, cam görünümlü */
#joy { border: 2px solid rgba(230, 192, 106, .55) !important; background: radial-gradient(circle, rgba(20, 30, 50, .25), rgba(10, 14, 24, .5)) !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, .15), inset 0 0 14px rgba(0, 0, 0, .5) !important; }
#joy i { background: radial-gradient(circle at 40% 35%, #fff6d8, #e6c06a 55%, #9a6a1a) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .6) !important; }
/* parti kutusu: can çubuğu belirgin */
#game.run #partyBox div { padding: 2px 6px !important; }
#game.run #partyBox i { height: 4px !important; border-radius: 2px; overflow: hidden; }
/* büyük harita: bütün bölge, ekranın solunda */
#game.run #runSide.big #runMap { width: min(78vh, 56vw) !important; height: min(78vh, 56vw) !important; border-width: 3px !important; }

#game.run #runSide.big ~ #runBars, #game.run #runSide.big ~ #runHud { opacity: .25; }
/* blok düğmesi: yuvarlanmanın üstünde */
#btnBlk { --i: url(img/icons/u_kalkan.svg); display: none; }
#game.run #btnBlk { display: block; position: absolute; right: 176px !important; bottom: 48px !important; width: 38px !important; height: 38px !important; background-color: #142238 !important; border: 2px solid rgba(230, 192, 106, .85) !important; }

#game.left.run #btnBlk { right: auto !important; left: 176px !important; }
#game.run #btnBlk::after { content: attr(data-key); position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font: 700 8px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* süre, öldürme ve altın sayaçları kaldırıldı */
#game.run #runHud .pill.dalga, #game.run #runHud .pill.guc, #game.run #runHud .pill.altin { display: none !important; }
/* mini harita: biraz küçük, çift altın çerçeve */
#game.run { --mapW: 150px; } #game.mapS.run { --mapW: 120px; } #game.mapL.run { --mapW: 184px; }

/* Sol simge çubuğu: şeffaf cam daireler, altın kenar; üstüne gelince ad */
#leftDock { display: none; }

#game.left.run #leftDock { left: auto; right: calc(var(--safeR, 0px) + 8px); }
#leftDock button { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(230, 192, 106, .8); background: radial-gradient(circle at 50% 35%, rgba(40, 62, 96, .78), rgba(10, 18, 30, .82)) ; box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; padding: 0; backdrop-filter: blur(3px); transition: transform .12s, border-color .12s; }
#leftDock button::before { content: ''; position: absolute; inset: 7px; background: var(--i) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#leftDock button:hover, #leftDock button:focus-visible { transform: scale(1.08); border-color: #ffe08a; outline: none; }
#leftDock button:active { transform: scale(.94); }
#leftDock button span { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 11px system-ui, sans-serif; color: #fff; background: rgba(10, 18, 30, .85); border: 1px solid rgba(230, 192, 106, .6); padding: 3px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; }
#leftDock button:hover span { opacity: 1; }
@media (max-height: 420px) { #game.run #leftDock { top: calc(var(--mapW) + 44px); gap: 4px; } #leftDock button { width: 34px; height: 34px; } }
/* Yerden al düğmesi: ganimet yakındayken ortada, altın parıltılı */
#btnPick { --i: url(img/gi/knapsack.png); }
#game.run #btnPick:not([hidden]) { display: block; position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: 52px !important; height: 52px !important; border-radius: 50%; background-color: rgba(20, 34, 56, .85) !important; border: 2px solid #ffd86a !important; box-shadow: 0 0 14px rgba(255, 216, 106, .7); animation: pickPulse 1.1s ease-in-out infinite; z-index: 7; }
#game.run #btnPick::after { content: attr(data-key); position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font: 800 9px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
@keyframes pickPulse { 50% { box-shadow: 0 0 22px rgba(255, 216, 106, 1); } }
/* ===== Yan panel: şeffaf cam, altın çizgi, simgeli ızgara ===== */
#sidePanel { position: absolute; z-index: 30; left: calc(var(--safeL, 0px) + 56px); top: 8px; bottom: 8px; width: min(400px, calc(100vw - 72px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(16, 26, 44, .80), rgba(8, 14, 26, .86)); border: 1px solid rgba(230, 192, 106, .55); border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: #eef2f8; font: 13px/1.4 system-ui, "Segoe UI", sans-serif; transform: translateX(-16px); opacity: 0; transition: transform .18s ease-out, opacity .18s; scrollbar-width: thin; scrollbar-color: rgba(230, 192, 106, .5) transparent; }
#sidePanel.in { transform: none; opacity: 1; }
#sidePanel[hidden] { display: none; }
#game.left #sidePanel { left: auto; right: calc(var(--safeR, 0px) + 56px); }
#sidePanel header { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(230, 192, 106, .3); }
#sidePanel header b { font: 700 16px "Cinzel", Georgia, serif; color: #ffd86a; letter-spacing: .5px; }
#sidePanel header .cur { margin-left: auto; display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: #f4e6c0; font-size: 12px; }
#sidePanel header .x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
#sidePanel header .x:hover { border-color: #ffd86a; }
#sidePanel .gi { display: inline-block; width: 18px; height: 18px; flex: none; background: var(--c, #fff); -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; vertical-align: middle; }
#sidePanel .gi.big { width: 30px; height: 30px; }
#sidePanel h4 { margin: 6px 0 0; font: 700 12px system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #c9b88a; display: flex; align-items: center; gap: 6px; }
#sidePanel .pts { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ffd86a; color: #1a1408; font-weight: 800; font-size: 11px; }
#sidePanel .tip { margin: 0; color: #a9b6c8; font-size: 12px; }
#sidePanel button { font: inherit; }
#sidePanel .row { display: flex; gap: 6px; flex-wrap: wrap; }
#sidePanel .row button, #sidePanel .bagbar button, #sidePanel .wares button, #sidePanel .skills button, #sidePanel .attrs button { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(230, 192, 106, .45); background: linear-gradient(180deg, rgba(60, 84, 120, .55), rgba(24, 36, 58, .7)); color: #f4f0e6; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: border-color .12s, transform .08s; }
#sidePanel button.pri { background: linear-gradient(180deg, #f2cf72, #b98a2a); color: #1d1406; border-color: #ffe08a; font-weight: 700; }
#sidePanel button:hover:not(:disabled) { border-color: #ffe08a; }
#sidePanel button:active:not(:disabled) { transform: scale(.96); }
#sidePanel button:disabled { opacity: .45; cursor: default; }
#sidePanel .tabs { display: flex; gap: 4px; background: rgba(0, 0, 0, .25); padding: 3px; border-radius: 10px; }
#sidePanel .tabs button { flex: 1; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: #a9b6c8; cursor: pointer; font-weight: 600; }

#sidePanel .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
#sidePanel .cell { position: relative; aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--rc, rgba(255, 255, 255, .12)); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .35)); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: inset 0 0 10px color-mix(in srgb, var(--rc, transparent) 35%, transparent); }
#sidePanel .cell .gi { width: 70%; height: 70%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
#sidePanel .cell.empty, #sidePanel .cell.slot { cursor: default; border-style: dashed; border-color: rgba(255, 255, 255, .12); box-shadow: none; }

#sidePanel .cell.new::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a40; box-shadow: 0 0 6px #ff5a40; }
#sidePanel .cell em { position: absolute; right: 3px; bottom: 1px; font: 800 10px system-ui, sans-serif; font-style: normal; color: #ffe08a; text-shadow: 0 1px 2px #000; }
#sidePanel .cell s { position: absolute; left: 2px; top: 0; font-size: 9px; text-decoration: none; }
#sidePanel .doll { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; }
#sidePanel .doll .col { display: grid; gap: 6px; }
#sidePanel .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
#sidePanel .hero img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(230, 192, 106, .7); box-shadow: 0 0 18px rgba(230, 192, 106, .25); }
#sidePanel .hero small { color: #a9b6c8; font-size: 11px; }
#sidePanel .hero.wide { flex-direction: row; text-align: left; gap: 10px; }
#sidePanel .hero.wide img { width: 64px; height: 64px; }
#sidePanel .hero.wide > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#sidePanel i.xp, #sidePanel .bars i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#sidePanel i.xp u, #sidePanel .bars i u { display: block; height: 100%; background: linear-gradient(90deg, #6fb8ff, #b8e0ff); }
#sidePanel .card { border: 1px solid color-mix(in srgb, var(--rc, #888) 55%, transparent); border-radius: 12px; padding: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #888) 12%, transparent), rgba(0, 0, 0, .25)); display: flex; flex-direction: column; gap: 6px; }
#sidePanel .card.hint { color: #a9b6c8; font-size: 12px; border-style: dashed; border-color: rgba(255, 255, 255, .15); background: none; }
#sidePanel .card .ct { display: flex; gap: 10px; align-items: center; }
#sidePanel .card .ct > div { display: flex; flex-direction: column; }
#sidePanel .card .ct b { font: 700 15px "Cinzel", Georgia, serif; text-shadow: 0 1px 3px #000; }
#sidePanel .card .ct small { color: #a9b6c8; font-size: 11px; }
#sidePanel .stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#sidePanel .stats li { display: flex; gap: 6px; align-items: baseline; }
#sidePanel .stats span { color: #c6d0de; flex: 1; }
#sidePanel .stats b { color: #fff; }
#sidePanel .stats i { font-style: normal; font-size: 11px; font-weight: 700; }
#sidePanel .stats i.up { color: #6fe06f; }
#sidePanel .stats i.down { color: #ff6a5a; }
#sidePanel .req { margin: 0; font-size: 12px; color: #9fe0b4; }
#sidePanel .req.bad, #sidePanel .bad { color: #ff7a66 !important; }
#sidePanel .setinfo { margin: 0; font-size: 11px; color: #d8c89a; }
#sidePanel .bagbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #c6d0de; }
#sidePanel .bagbar span { display: inline-flex; align-items: center; gap: 4px; }
#sidePanel .bagbar span:first-child { margin-right: auto; }
#sidePanel .bars, #sidePanel .attrs, #sidePanel .skills, #sidePanel .wares { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#sidePanel .bars li { display: grid; grid-template-columns: 82px 1fr 58px; gap: 8px; align-items: center; }
#sidePanel .bars span { color: #c6d0de; font-size: 12px; }
#sidePanel .bars b { text-align: right; font-variant-numeric: tabular-nums; }
#sidePanel .attrs li { display: grid; grid-template-columns: 1fr auto 36px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: rgba(255, 255, 255, .04); border-radius: 8px; padding: 6px 8px; }
#sidePanel .attrs small { grid-column: 1 / 3; color: #8fa0b8; font-size: 11px; }
#sidePanel .attrs button { grid-row: 1 / 3; grid-column: 3; justify-content: center; padding: 6px 0; font-weight: 800; }
#sidePanel .skills li, #sidePanel .wares li { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 8px; }
#sidePanel .skills li > div, #sidePanel .wares li > div { flex: 1; display: flex; flex-direction: column; }
#sidePanel .skills small, #sidePanel .wares small { color: #8fa0b8; font-size: 11px; }
#sidePanel .skills em { font-style: normal; color: #ffd86a; font-size: 11px; margin-left: 4px; }
#sidePanel .skills li.lock { opacity: .55; }
#sidePanel .sk { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid rgba(230, 192, 106, .6); background: var(--i) center / 70% no-repeat, radial-gradient(circle, #2a4064, #101a2c); }
#sidePanel .tree { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#sidePanel .tree .root { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; border-radius: 12px; border: 1px solid rgba(230, 192, 106, .6); background: rgba(230, 192, 106, .08); }
#sidePanel .branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; position: relative; }
#sidePanel .branches::before { content: ""; position: absolute; left: 16%; right: 16%; top: -10px; height: 10px; border: 2px solid rgba(230, 192, 106, .4); border-bottom: 0; border-radius: 8px 8px 0 0; }
#sidePanel .branch { display: flex; flex-direction: column; align-items: center; }
#sidePanel .branch h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--bc); }
#sidePanel .branch .link { width: 2px; height: 14px; background: linear-gradient(var(--bc), transparent); opacity: .7; }
#sidePanel .node { width: 100%; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--bc) 50%, transparent); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3)); color: #eef2f8; cursor: pointer; }
#sidePanel .node .gi { width: 28px; height: 28px; }
#sidePanel .node b { font-size: 11px; }
#sidePanel .node em { font-style: normal; font-size: 10px; color: #a9b6c8; }
#sidePanel .node.got { border-color: var(--bc); box-shadow: 0 0 12px color-mix(in srgb, var(--bc) 45%, transparent); }
#sidePanel .node.lock { opacity: .45; }
#sidePanel .forge { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255, 150, 60, .5); background: radial-gradient(circle at 50% 0%, rgba(255, 140, 40, .18), rgba(0, 0, 0, .25)); }
#sidePanel .forge .plus { font: 700 18px "Cinzel", Georgia, serif; color: #ffd86a; }
@media (max-height: 420px) { #sidePanel { top: 4px; bottom: 4px; } #sidePanel .hero img { width: 70px; height: 70px; } }
/* ===== Ortak tasarım: bütün düğmeler, pencereler ve listeler tek dilde (lacivert cam + altın çizgi) ===== */
:root { --ui-glass: linear-gradient(180deg, rgba(18, 30, 50, .86), rgba(8, 14, 26, .9)); --ui-line: rgba(230, 192, 106, .55); --ui-gold: #ffd86a; --ui-text: #eef2f8; --ui-dim: #a9b6c8; }
button { font: 700 13px/1.2 system-ui, "Segoe UI", sans-serif; letter-spacing: .2px; color: var(--ui-text); background: linear-gradient(180deg, rgba(64, 90, 128, .75), rgba(24, 38, 62, .9)); border: 1px solid var(--ui-line); border-radius: 9px; padding: 9px 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .08s, border-color .12s, box-shadow .12s, filter .12s; }
button:hover:not(:disabled) { border-color: #ffe08a; box-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 10px rgba(255, 216, 106, .25), inset 0 1px 0 rgba(255, 255, 255, .18); }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: 0 1px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
button.primary, button.pri { background: linear-gradient(180deg, #f6d57c, #c29433 60%, #a87b22); color: #1f1504; border-color: #ffe9a6; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
button.primary:hover:not(:disabled) { filter: brightness(1.06); }
/* pencereler */
#dialog { background: radial-gradient(ellipse at center, rgba(6, 10, 18, .45), rgba(6, 10, 18, .72)); backdrop-filter: blur(2px); }
#dialog .card { background: var(--ui-glass); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: 0 14px 44px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(10px); color: var(--ui-text); max-width: min(560px, 94vw); margin: 0 auto; width: 100%; }
#dialog .card h3 { font: 700 18px Cinzel, Georgia, serif; color: var(--ui-gold); letter-spacing: .5px; text-shadow: 0 1px 3px #000; }
#dialog .card p { font: 15px/1.45 system-ui, "Segoe UI", sans-serif; color: #dde4ee; white-space: pre-line; }
#dialog .card img { border-radius: 12px; border-color: var(--ui-line); }
#dialog .card footer { flex-wrap: wrap; gap: 8px; }

/* ana sayfa kabuğu */
#hub { background: rgba(6, 10, 18, .55); backdrop-filter: blur(3px); }
#hubBody { color: var(--ui-text); }
#hubBody .row { background: linear-gradient(180deg, rgba(30, 46, 72, .62), rgba(12, 20, 34, .72)); border: 1px solid rgba(230, 192, 106, .28); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
#hubBody .row:hover { border-color: rgba(255, 216, 106, .55); }
#hubBody .row strong, #hubBody .row b { color: #fff; }
#hubBody .row small, #hubBody .row span { color: var(--ui-dim); }

/* HUD yuvarlak düğmeler: cam küre, altın halka, basınca çöker */
.ib { background: var(--i) center 46% / 60% no-repeat, radial-gradient(circle at 50% 28%, #4a6c94, #1a2c48 58%, #0c1626 100%) !important; border: 2px solid #e6c06a !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 2px 3px rgba(255, 255, 255, .25), inset 0 -4px 8px rgba(0, 0, 0, .45) !important; }
.ib:hover:not(:disabled) { filter: brightness(1.12); }
.ib:active:not(:disabled) { transform: scale(.93); }
.ib.on { border-color: #9fe0ff !important; box-shadow: 0 0 12px rgba(120, 200, 255, .7), inset 0 2px 3px rgba(255, 255, 255, .25) !important; }
/* sohbet ve yazı alanları */
input, textarea, select { background: rgba(8, 14, 26, .82); color: var(--ui-text); border: 1px solid rgba(230, 192, 106, .4); border-radius: 8px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ui-gold); box-shadow: 0 0 0 2px rgba(255, 216, 106, .2); }
#chatTabs button, .chatTabs button { border-radius: 12px !important; padding: 3px 10px !important; font: 700 11px system-ui, sans-serif !important; }
/* bildirim satırları ve şerit */
#banner, .banner { font-family: Cinzel, Georgia, serif; letter-spacing: 1px; }
#sidePanel input { padding: 7px 9px; font: inherit; }
/* boyut düzeltmesi: oyun ekranı 2 kat ölçekli; panel ve simge çubuğu küçülür */
#sidePanel { zoom: .6; left: calc((var(--safeL, 0px) + 8px) / .6); top: 14px; bottom: 14px; width: 420px; max-width: calc((100vw - 24px) / .6); }
#game.run #leftDock { flex-direction: row; flex-wrap: wrap; width: calc(var(--mapW) + 40px); top: calc(var(--mapW) + 40px); gap: 4px; z-index: 4; }
#leftDock button { width: 28px; height: 28px; border-width: 1px; }
#leftDock button::before { inset: 5px; }
#leftDock button span { left: 50%; top: auto; bottom: -18px; transform: translateX(-50%); font-size: 9px; padding: 1px 5px; }
#dialog { z-index: 40; }
@media (max-height: 420px) { #leftDock button { width: 26px; height: 26px; } }
/* mini harita küçük: eskisinin yarısından az */
#game.run { --mapW: 68px; } #game.mapS.run { --mapW: 56px; } #game.mapL.run { --mapW: 88px; }

#game.run #runMap { border-width: 1.5px !important; box-shadow: 0 0 0 2px rgba(20, 30, 48, .85), 0 3px 10px rgba(0, 0, 0, .6) !important; }
/* panel düzeltmesi: hücreler genel düğme stilinden etkilenmez, kartlar ezilmez */
#sidePanel > * { flex-shrink: 0; }
#sidePanel .grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
#sidePanel .cell, #sidePanel .node { padding: 0; min-width: 0; width: 100%; box-sizing: border-box; letter-spacing: 0; transform: none; }

#sidePanel .node { padding: 8px 4px; }
#sidePanel .grid .tip { grid-column: 1 / -1; }

#sidePanel .card p { font: 12px/1.4 system-ui, "Segoe UI", sans-serif; font-style: normal; min-height: 0; }
#sidePanel .row { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
/* görev satırı ve yanındaki simge: simge sırasının altında; karakter/can kutusu yarı boy */
#game.run #btnBigMap { left: calc(var(--safeL, 0px) + 8px) !important; top: calc(var(--mapW) + 72px) !important; width: 22px !important; height: 22px !important; }

#game.run #runHud { zoom: .55; left: calc((var(--safeL, 0px) + var(--mapW) + 8px) / .55) !important; top: calc(6px / .55) !important; }
/* karakter, can ve dinlenmiş TP kutusu yarı boy */

#game.run #btnBigMap { top: calc(var(--mapW) + 70px) !important; }
/* NPC yanında şeffaf konuş düğmesi */
#btnTalk { display: none; }
#game.run #btnTalk:not([hidden]) { display: flex; align-items: center; gap: 6px; position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 7; padding: 6px 14px 6px 8px; border-radius: 20px; background: rgba(10, 18, 30, .55); border: 1px solid rgba(255, 216, 106, .8); color: #fff; font: 700 12px system-ui, sans-serif; backdrop-filter: blur(4px); box-shadow: 0 0 12px rgba(255, 216, 106, .35); animation: talkIn .2s ease-out; }

#btnTalk span::after { content: " · Konuş"; color: #ffd86a; }
@keyframes talkIn { from { opacity: 0; transform: translate(-50%, 6px); } }
/* HD eşya resmi */
#sidePanel .ii { display: inline-block; width: 86%; height: 86%; flex: none; background: center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
#sidePanel .ii.big { width: 56px; height: 56px; }
#sidePanel .card .ct .ii.big { width: 64px; height: 64px; }
/* konuş düğmesi: ekranın alt ortası, küçük ve şeffaf */
#game.run #btnTalk:not([hidden]) { font: 700 12px/1 system-ui, sans-serif !important; padding: 6px 14px 6px 8px !important; min-height: 0 !important; width: auto !important; height: auto !important; bottom: 120px !important; left: 50% !important; right: auto !important; top: auto !important; }
/* düşük can: kenarlar kızarır ve nabız atar */
#game::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s; background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 20, 10, .55) 100%); }
#game.run.lowhp::after { opacity: 1; animation: lowPulse 1s ease-in-out infinite; }
@keyframes lowPulse { 50% { opacity: .45; } }
.xpf { font: 800 12px/1 system-ui, sans-serif !important; color: #9fe0ff !important; text-shadow: 0 1px 2px #000, 0 0 6px rgba(120, 200, 255, .6) !important; }
.weakf { color: #7dff8a !important; font: 800 11px system-ui, sans-serif !important; text-shadow: 0 1px 2px #000 !important; } .resf { color: #b8c0c8 !important; font: 700 10px system-ui, sans-serif !important; text-shadow: 0 1px 2px #000 !important; }
/* boss tanıtımı */
#bossIntro { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px) scale(.96); z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; transition: opacity .35s, transform .35s; }
#bossIntro.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#bossIntro img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 60, 30, .6)); }
#bossIntro small { font: 700 10px system-ui, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #ffb0a0; text-shadow: 0 1px 3px #000; }
#bossIntro b { font: 800 26px "Cinzel", Georgia, serif; color: #ffd86a; letter-spacing: 1.5px; text-shadow: 0 2px 6px #000, 0 0 18px rgba(255, 80, 40, .7); }
/* boss çubuğu: üst ortada geniş, süslü, solda HD portre */
#game.run #runBoss { left: 50% !important; transform: translateX(-50%); top: 6px !important; width: min(46vw, 420px) !important; max-width: none !important; padding: 4px 10px 6px 52px !important; border-radius: 12px; background: linear-gradient(180deg, rgba(40, 10, 10, .82), rgba(14, 6, 8, .88)) !important; border: 1px solid rgba(255, 120, 80, .6) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 60, 30, .25); }
#game.run #runBoss::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 2px solid #ff8a5a; background: var(--bp, none) center / 120% no-repeat, radial-gradient(circle, #4a1a12, #1a0806); box-shadow: 0 0 10px rgba(255, 80, 40, .6); }
#game.run #runBoss b { font: 700 12px "Cinzel", Georgia, serif !important; color: #ffd8c0 !important; letter-spacing: .5px; }
#game.run #runBoss i { height: 10px !important; border-radius: 5px; background: rgba(0, 0, 0, .55) !important; overflow: hidden; }
#game.run #runBoss u { background: linear-gradient(90deg, #8a0e0e, #e8321e 60%, #ff7a3a) !important; box-shadow: 0 0 8px rgba(255, 60, 30, .6); }
/* pet kartları */
#sidePanel .beasts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#sidePanel .beasts li { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)); border: 1px solid rgba(255, 255, 255, .08); }
#sidePanel .beasts li.on { border-color: #ffd86a; box-shadow: 0 0 12px rgba(255, 216, 106, .25); }
#sidePanel .beasts li.lock { opacity: .5; }
#sidePanel .beasts img { width: 72px; height: 72px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); border-radius: 10px; }
#sidePanel .beasts li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#sidePanel .beasts small { color: #8fa0b8; font-size: 11px; }
#sidePanel .beasts em { font-style: normal; color: #ffd86a; font-size: 11px; }
#sidePanel .beasts .col { display: flex; flex-direction: column; gap: 4px; }
#sidePanel .beasts button { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(230, 192, 106, .45); background: linear-gradient(180deg, rgba(60, 84, 120, .55), rgba(24, 36, 58, .7)); color: #f4f0e6; cursor: pointer; font-size: 12px; white-space: nowrap; }

#fade { background-size: cover; background-position: center; }
/* ışınlan: manzaralı bölge kartları */
#sidePanel .tlist { display: grid; gap: 8px; }
#sidePanel .tcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 86px; padding: 10px 12px !important; border-radius: 12px; border: 1px solid rgba(230, 192, 106, .5); background: linear-gradient(90deg, rgba(8, 12, 20, .9), rgba(8, 12, 20, .25)), var(--bg) center / cover, #1a2638 !important; color: #fff; text-align: left; cursor: pointer; overflow: hidden; }

#sidePanel .tcard b { font: 700 15px "Cinzel", Georgia, serif; color: #ffd86a; text-shadow: 0 1px 3px #000; }
#sidePanel .tcard small { color: #dfe6ef; font-size: 11px; text-shadow: 0 1px 2px #000; }
#sidePanel .tcard .sets { display: flex; gap: 3px; margin-top: 4px; }
#sidePanel .tcard .sets i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6); }
#sidePanel .tcard em { position: absolute; right: 10px; bottom: 8px; font-style: normal; font-size: 11px; color: #ff9a8a; }
#sidePanel .tcard.lock { filter: grayscale(.8) brightness(.7); }
/* giriş ekranı: köy manzarası, cam form */

#auth form { background: linear-gradient(180deg, rgba(18, 30, 50, .82), rgba(8, 14, 26, .9)) !important; border: 1px solid rgba(230, 192, 106, .6) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important; backdrop-filter: blur(8px); }
/* hedef çerçevesi: solda yuvarlak portre */
#game.run #targetFrame { padding-left: 34px !important; position: absolute; }
#game.run #targetFrame::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #e6c06a; background: var(--tp) center / 80% no-repeat, radial-gradient(circle, #3a2a1a, #120c08); }
#game.run #targetFrame.boss::before { border-color: #ff6a4a; background-size: 130%; }
#game.run canvas { transition: filter .8s; } #game.run.dead canvas { filter: grayscale(.9) brightness(.7) contrast(1.1); }
/* seviye atlama */
#lvlUp { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 8px) scale(.9); z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s; }
#lvlUp.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#lvlUp i { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; transform: translate(-50%, -55%); background: repeating-conic-gradient(rgba(255, 216, 106, .35) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); animation: lvlSpin 6s linear infinite; z-index: -1; }
#lvlUp small { font: 700 11px system-ui, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: #ffe8b0; text-shadow: 0 1px 3px #000; }
#lvlUp b { font: 800 64px/1 "Cinzel", Georgia, serif; color: #ffd86a; text-shadow: 0 3px 8px #000, 0 0 24px rgba(255, 200, 80, .8); }
#lvlUp span { margin-top: 4px; font: 700 11px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 3px #000; }
@keyframes lvlSpin { to { transform: translate(-50%, -55%) rotate(360deg); } }
#combo > i { position: absolute; left: 10%; right: auto; bottom: -5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ffd86a, #ff7a3a); box-shadow: 0 0 6px rgba(255, 150, 60, .7); max-width: 80%; }
#sidePanel .doll .cell.slot[data-drop] { transition: border-color .15s; } #sidePanel .cell[draggable] { cursor: grab; }
/* güçlendirme sonucu: başarıda altın parlama, başarısızlıkta kırmızı sarsıntı */
#sidePanel.forgeOk .forge { animation: forgeOk .7s ease-out; }
#sidePanel.forgeBad .forge { animation: forgeBad .5s ease-out; }
@keyframes forgeOk { 0% { box-shadow: 0 0 0 0 rgba(255, 216, 106, .9); background-color: rgba(255, 216, 106, .35); } 100% { box-shadow: 0 0 30px 6px rgba(255, 216, 106, 0); } }
@keyframes forgeBad { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); background-color: rgba(255, 60, 40, .35); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* Demirci: solda örs bölmesi, sağda envanter; dar ekranda alt alta. */
#sidePanel[data-k="smith"] { width: min(820px, calc(100vw - var(--safeL, 0px) - 72px)); }
#sidePanel .dual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
#sidePanel .pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 12px; border: 1px solid rgba(230, 192, 106, .28); background: rgba(0, 0, 0, .22); }
#sidePanel .forgePane { position: sticky; top: 0; background: radial-gradient(circle at 50% 18%, rgba(255, 130, 40, .16), rgba(0, 0, 0, .3) 70%); border-color: rgba(255, 150, 60, .45); }
#sidePanel .invPane .grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
#sidePanel .invPane .cell.dim { opacity: .35; }
#sidePanel .anvil { position: relative; align-self: center; width: 116px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 16px; border: 2px dashed rgba(255, 216, 106, .4); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .45)); transition: border-color .15s, box-shadow .15s; }
#sidePanel .anvil small { position: absolute; bottom: 8px; left: 6px; right: 6px; font-size: 10px; line-height: 1.2; color: #a9b6c8; }
#sidePanel .anvil > .gi.big { width: 48px; height: 48px; margin-bottom: 18px; }
#sidePanel .anvil.full { cursor: pointer; border-style: solid; border-color: var(--rc); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--rc) 30%, transparent); }
#sidePanel .anvil.full .ii.big, #sidePanel .anvil.full .gi.big { width: 78px; height: 78px; margin: 0; }
#sidePanel .anvil em { position: absolute; right: 8px; bottom: 4px; font: 800 16px "Cinzel", Georgia, serif; font-style: normal; color: #ffe08a; text-shadow: 0 1px 3px #000; }
#sidePanel .anvil.dropOk { border-color: #7fe08a !important; box-shadow: 0 0 24px rgba(127, 224, 138, .5); }
#sidePanel .anvil.busy { animation: anvilBeat .45s ease-in-out infinite alternate; }
#sidePanel .anvil .res { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; font: 800 17px/1.15 "Cinzel", Georgia, serif; text-shadow: 0 2px 6px #000; animation: resPop .5s ease-out; }
#sidePanel .anvil.ok { animation: forgeOk .8s ease-out; }
#sidePanel .anvil.ok .res { color: #ffe08a; background: radial-gradient(circle, rgba(255, 216, 106, .35), rgba(255, 216, 106, 0) 70%); }
#sidePanel .anvil.bad { animation: forgeBad .5s ease-out; }
#sidePanel .anvil.bad .res { color: #ff7a66; background: radial-gradient(circle, rgba(255, 60, 40, .35), rgba(255, 60, 40, 0) 70%); }
@keyframes anvilBeat { to { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 140, 40, .6); } }
@keyframes resPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
#sidePanel .fname { display: flex; flex-direction: column; align-items: center; text-align: center; }
#sidePanel .fname b { font: 700 15px "Cinzel", Georgia, serif; text-shadow: 0 1px 3px #000; }
#sidePanel .fname small { color: #a9b6c8; font-size: 11px; }
#sidePanel .fstep { display: flex; justify-content: center; align-items: baseline; gap: 10px; font: 700 20px "Cinzel", Georgia, serif; color: #c9b88a; }
#sidePanel .fstep i { font-style: normal; color: #8fa0b8; font-size: 16px; }
#sidePanel .fstep b { color: #ffd86a; font-size: 24px; text-shadow: 0 0 10px rgba(255, 216, 106, .5); }
#sidePanel .chance { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: #c6d0de; }
#sidePanel .chance i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#sidePanel .chance u { display: block; height: 100%; background: var(--cc); box-shadow: 0 0 8px var(--cc); }
#sidePanel .chance b { color: #fff; font-variant-numeric: tabular-nums; }
#sidePanel .need { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#sidePanel .need li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
#sidePanel .need .ic { width: 28px; height: 28px; display: grid; place-items: center; }
#sidePanel .need .ic .ii { width: 26px; height: 26px; }
#sidePanel .need b { font-variant-numeric: tabular-nums; color: #9fe0b4; }
#sidePanel .need li.bad { border-color: rgba(255, 106, 90, .45); background: rgba(255, 60, 40, .08); }
#sidePanel .need li.bad b, #sidePanel .need li.bad span { color: #ff7a66; }
#sidePanel .frow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
#sidePanel .gtog { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #c6d0de; cursor: pointer; font-size: 12px; }
#sidePanel .gtog .ii { width: 22px; height: 22px; }
#sidePanel .gtog.on { border-color: #ffd86a; color: #ffd86a; background: rgba(255, 216, 106, .12); box-shadow: 0 0 10px rgba(255, 216, 106, .3); }
#sidePanel .forgeBtn { width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; border: 2px solid #ffe08a; color: #1d1406; background: radial-gradient(circle at 50% 30%, #ffe9a0, #d9a53a 55%, #8a5a14); box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 190, 70, .45), inset 0 2px 0 rgba(255, 255, 255, .5); transition: transform .08s, box-shadow .15s; }
#sidePanel .forgeBtn span { font: 900 40px/1 "Cinzel", Georgia, serif; margin-top: -4px; }
#sidePanel .forgeBtn small { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
#sidePanel .forgeBtn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 28px rgba(255, 200, 90, .8), inset 0 2px 0 rgba(255, 255, 255, .5); }
#sidePanel .forgeBtn:disabled { filter: grayscale(.85) brightness(.7); }
#sidePanel .forgeBtn.salv span { font-size: 30px; margin: 0; }
#sidePanel .miss { margin: 0; text-align: center; font-size: 12px; color: #c9b88a; }
@media (max-width: 640px), (max-height: 420px) and (max-width: 720px) {
  #sidePanel .dual { grid-template-columns: 1fr; }
  #sidePanel .forgePane { position: static; }
  #sidePanel .anvil { width: 92px; }
  #sidePanel .forgeBtn { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { #sidePanel .anvil, #sidePanel .anvil .res { animation: none !important; } }
#sidePanel .cell.top { animation: topGlow 1.6s ease-in-out infinite; } @keyframes topGlow { 50% { box-shadow: inset 0 0 16px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent); } }
#sidePanel .tcard .bossArt { position: absolute; right: 4px; bottom: 0; height: 84px; width: auto; filter: drop-shadow(0 2px 6px #000); pointer-events: none; }
#game.run #runPortrait { background-size: 170% !important; background-position: 50% 8% !important; } #sidePanel .hero img { object-position: 50% 10%; }
 #game.run #runXp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .55) calc(10% - 1px) 10%); }
#sidePanel .wares.stock .cnt { font-style: normal; font: 800 15px system-ui, sans-serif; color: #ffd86a; min-width: 36px; text-align: right; }

#regionIntro { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -6px); z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; transition: opacity .6s, transform .6s; }
#regionIntro.on { opacity: 1; transform: translate(-50%, 0); }
#regionIntro b { font: 800 34px "Cinzel", Georgia, serif; color: #fff2d0; letter-spacing: 3px; text-shadow: 0 3px 10px #000, 0 0 20px rgba(255, 210, 120, .5); }
#regionIntro small { margin-top: 2px; font: 700 12px system-ui, sans-serif; letter-spacing: 2px; color: #ffd86a; text-shadow: 0 1px 4px #000; }
#regionIntro::before, #regionIntro::after { content: ""; width: 220px; height: 1px; background: linear-gradient(90deg, transparent, #ffd86a, transparent); margin: 6px 0; }
/* takas */

/* sınıf seçimi: HD portre büyük, manzara arka planı */

.classes button { background: linear-gradient(180deg, rgba(18, 30, 50, .8), rgba(8, 14, 26, .92)) !important; border: 1px solid rgba(230, 192, 106, .6) !important; backdrop-filter: blur(6px); transition: transform .15s, box-shadow .15s; }
.classes button:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 216, 106, .45) !important; }
.classes button .tile, .classes button img, .classes button i.hero { width: 100% !important; height: 150px !important; background-size: contain !important; background-position: center bottom !important; border: 0 !important; border-radius: 10px !important; }
.classes button .tile { display: block; background: none !important; } .classes button .tile img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center bottom; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
/* panel süsü: köşelerde altın köşebent, başlık altında süslü çizgi */

#sidePanel header { position: relative; }
#sidePanel header::after { content: "◆"; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-size: 10px; color: #e6c06a; background: #0e1828; padding: 0 6px; line-height: 14px; }
#dialog .card { position: relative; }
#dialog .card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(230, 192, 106, .18); border-radius: 12px; pointer-events: none; }

/* Hedef çerçevesi: küçük, şeffaf, yalnız boss ve kristal */
#game.run #targetFrame { top: 8px !important; left: 50% !important; min-width: 0; width: 150px; max-width: 40%; padding: 2px 8px 3px 26px !important; background: rgba(12, 8, 6, .32) !important; border: 1px solid rgba(255, 210, 140, .22) !important; border-radius: 12px !important; backdrop-filter: blur(3px); font: 600 9.5px system-ui, sans-serif !important; color: #f3e6cf; text-shadow: 0 1px 2px #000; }
#game.run #targetFrame::before { left: 2px; width: 20px; height: 20px; border-width: 1px; }
#game.run #targetFrame i { height: 3px; margin-top: 2px; background: rgba(0, 0, 0, .35); }
#game.run #targetFrame.rare u { background: linear-gradient(90deg, #d79bff, #8a3fd0); }

/* Yetenek düğmesi: renkli derece rozeti kaldırıldı, yalnız tuş numarası kalır */
#game.run #runSkills .ib::after, #game.run #runSkills .ib[data-rank]::after { content: attr(data-key) !important; background: none !important; padding: 0 !important; border-radius: 0 !important; top: auto !important; right: auto !important; width: auto !important; height: auto !important; }

/* UI paketi (img/ui, kaynak: img/ui/KAYNAK.txt): süslü harita halkası, yetenek halkası, can/boss çerçevesi, panel çerçevesi, HD iksir/taş simgeleri */
#game.run #runMap { border: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .55) !important; }
#game.run #runSide::after { content: ""; position: absolute; left: calc(var(--mapW) * -.14); top: calc(var(--mapW) * -.14); width: calc(var(--mapW) * 1.28); height: calc(var(--mapW) * 1.28); z-index: 2; pointer-events: none; background: url(img/ui/minimap_frame.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
#game.run #runSide > button { z-index: 3; }
#game.noUi #runSide::after { display: none; }
#game.run #runSkills .ib.hd, #game.run #runSkills .ib.hd:disabled { background: conic-gradient(rgba(0, 0, 0, .62) calc(var(--cd, 0) * 360deg), transparent 0), var(--sk) center / cover, #142238 !important; border-color: transparent !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .6) !important; align-items: center; padding: 0; font-size: 13px; }
#game.run #runSkills .ib.hd::before { display: block !important; content: ""; position: absolute; inset: -16%; z-index: 1; border-radius: 0; background: url(img/ui/skill_ring.webp) center / contain no-repeat; pointer-events: none; }

#game.run #runBars > div { gap: 8px !important; }
#game.run #runBoss i { overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

#game.run #hpBar u, #game.run #runBoss u { border-radius: 2px; }
#game.run #runBoss i::before { content: ""; position: absolute; inset: -7px -9px -6px; z-index: 1; border: solid transparent; border-width: 0 9px; border-image: url(img/ui/bar_frame.webp) 0 24 fill / 0 9px stretch; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

#game.run #rageBar { border-color: rgba(150, 100, 55, .9) !important; }
#game.run #runBoss i { margin-top: 6px; }

#dialog .card { border: 1px solid transparent !important; border-image: url(img/ui/box_frame.webp) 30 / 20px !important; border-radius: 8px; padding: 18px 20px; }

#dialog .card footer button.primary:not(:has(> img))::before { content: ""; display: inline-block; width: 1.3em; height: 1.3em; margin-right: 6px; vertical-align: -.3em; background: url(img/ui/btn_ok.webp) center / contain no-repeat; }
#sidePanel header .x { background: url(img/ui/btn_cancel.webp) center / contain no-repeat !important; border: 0 !important; color: transparent !important; font-size: 0; }
#sidePanel .gi.hd { background: center / contain no-repeat; -webkit-mask: none; mask: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.pill.altin::before { background-image: url(img/ui/icons/altin_kulce.webp); }
#btnPot { --i: url(img/ui/icons/iksir_kirmizi.webp) !important; }
.potK[data-k="mavi"] { --i: url(img/ui/icons/iksir_mavi.webp) !important; } .potK[data-k="hiz"] { --i: url(img/ui/icons/iksir_hiz.webp) !important; } .potK[data-k="guc"] { --i: url(img/ui/icons/iksir_guc.webp) !important; }

/* Profesyonel HUD düzeni: tek görsel dil (koyu yuvarlak düğme, ince altın halka, küçük tuş etiketi), çakışmasız savaş kümesi,
   altta ortada iksir çubuğu + ekran boyu ince TP çubuğu, küçük yarı saydam sohbet, sağ üstte tek kısayol ızgarası.
   Ölçüler mantıksal px (sahne 640x360'a ölçeklenir); büyük ekranda kümeler zoom ile biraz küçülür. */
#game.run #runAct .ib, #game.run #runSkills .ib:not(.hd), #game.run #btnPick:not([hidden]) { background: var(--i) center 46% / 58% no-repeat, radial-gradient(circle at 50% 30%, #2a3e5e, #121d30 60%, #0a111d) !important; border: 1.5px solid rgba(222, 182, 104, .9) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .55), inset 0 1px 2px rgba(255, 255, 255, .18) !important; opacity: 1; animation: none; }
#game.run #runSkills .ib, #game.run #runAct .ib { position: absolute; right: var(--x) !important; bottom: var(--y) !important; left: auto !important; top: auto !important; width: var(--s) !important; height: var(--s) !important; transform: none !important; }
#game.left.run #runSkills .ib, #game.left.run #runAct .ib { left: var(--x) !important; right: auto !important; }
#game.run #btnAtk { --s: 72px; --x: 12px; --y: 12px; border-width: 2px !important; background-size: 52% !important; }
#game.run #runSkills .ib { --s: 42px; }
#game.run #runSkills .ib:nth-child(1) { --x: 123px; --y: 27px; }
#game.run #runSkills .ib:nth-child(2) { --x: 107px; --y: 79px; }
#game.run #runSkills .ib:nth-child(3) { --x: 66px; --y: 115px; }
#game.run #runSkills .ib:nth-child(4) { --x: 12px; --y: 122px; }
#game.left.run #runSkills .ib:nth-child(n) { left: var(--x) !important; right: auto !important; }
#game.run #btnUlt { --s: 48px; --x: 182px; --y: 10px; background: var(--i) center / 54% no-repeat, radial-gradient(circle, #16233a 0 60%, transparent 61%), conic-gradient(#ffb43a calc(var(--rage, 0) * 1%), rgba(0, 0, 0, .5) 0) !important; opacity: .8; }
#game.run #btnUlt.ready { opacity: 1; border-color: #ffc85a !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 150, 40, .8) !important; animation: rageGlow .6s infinite alternate; }
#game.run #btnRoll { --s: 40px; --x: 238px; --y: 12px; }
#game.run #btnBlk { --s: 40px; --x: 222px; --y: 62px; display: block; }
#game.run #btnBlk.on { border-color: #9fe0ff !important; box-shadow: 0 0 10px #9fe0ff !important; }
#game.run #btnPick:not([hidden]) { --s: 44px; --x: 172px; --y: 104px; display: block; z-index: 7; border-color: #ffd86a !important; animation: pickPulse 1.1s ease-in-out infinite; }
#game.run #btnAtk::after, #game.run #btnRoll::after, #game.run #btnBlk::after, #game.run #btnPick::after, #game.run #runSkills .ib::after { bottom: -4px !important; padding: 0 3px; border-radius: 3px; background: rgba(6, 10, 18, .78) !important; font: 700 7px/10px system-ui, sans-serif !important; color: #f4e6c4 !important; z-index: 3; }
#game.run #btnRoll[data-cd]::after { inset: 0; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .5) !important; font: 800 12px/1 system-ui, sans-serif !important; display: grid; place-items: center; }
/* iksir çubuğu: F 7 8 9 tek sıra kare yuvalar, ortada */
#game.run #btnPot, #game.run #potRow .ib { width: 32px !important; height: 32px !important; border-radius: 7px !important; background: var(--i) center / 74% no-repeat, linear-gradient(180deg, #1c2a42, #0c1424) !important; border: 1px solid rgba(222, 182, 104, .75) !important; box-shadow: inset 0 0 6px rgba(0, 0, 0, .7) !important; transform: none !important; padding: 0 !important; }
#game.run #btnPot { left: calc(50% - 72px) !important; right: auto !important; bottom: 14px !important; z-index: 2; }
#game.run #potRow { left: calc(50% - 36px) !important; right: auto !important; bottom: 14px !important; gap: 4px !important; flex-direction: row !important; z-index: 1; }
#game.run #potRow::before { content: ""; position: absolute; inset: -4px -4px -4px -40px; z-index: -1; border-radius: 9px; background: rgba(8, 12, 20, .55); border: 1px solid rgba(222, 182, 104, .3); pointer-events: none; }
#game.run #btnPot::after, #game.run .potK::after { left: 2px !important; top: 1px !important; font: 800 7px/1 system-ui, sans-serif !important; color: #f4e6c4 !important; }
#game.run #btnPot b, #game.run #potRow .ib b { right: 1px !important; bottom: 1px !important; min-width: 0 !important; padding: 0 2px !important; border: 0 !important; border-radius: 3px !important; background: rgba(0, 0, 0, .6) !important; font: 800 7px/10px system-ui, sans-serif !important; color: #fff !important; }
#game.run .potK[data-cd]::after { inset: 0 !important; border-radius: 7px; display: grid; place-items: center; font: 800 11px system-ui, sans-serif !important; }
/* TP: ekran boyu ince çubuk en altta, yazı küçük ve iksir çubuğunun altında */
#game.run #runXp { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; height: calc(3px / .55) !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
#game.run #xpPct { left: 50% !important; right: auto !important; bottom: 3px !important; transform: translateX(-50%) !important; font: 600 6.5px/1 system-ui, sans-serif !important; color: rgba(255, 232, 170, .8) !important; text-shadow: 0 1px 1px #000; }
/* sohbet: sol altta küçük, yarı saydam, eski satırlar solar, sekmeler küçük ve görünür */
#game.run #chatLog { left: calc(var(--safeL) + 4px) !important; bottom: 22px !important; width: 180px !important; max-height: 70px; overflow: hidden; justify-content: flex-end; padding: 3px 4px; border-radius: 6px; background: rgba(6, 10, 18, .28); font: 500 8px/1.3 system-ui, sans-serif !important; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
#game.run #chatLog:empty { display: none; }
#game.run #chatLog .cl { background: none !important; padding: 0 !important; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
#game.run #chatLog .cl.old { opacity: .45 !important; }
#game.chatS.run #chatLog { font-size: 7px !important; } #game.chatL.run #chatLog { font-size: 9.5px !important; }
#game.run #chatIn { left: calc(var(--safeL) + 4px) !important; bottom: 22px !important; width: 180px !important; font-size: 9px !important; padding: 3px 6px !important; }
#game.run #chatTabs { left: calc(var(--safeL) + 4px) !important; bottom: 6px !important; gap: 2px !important; }
#game.run #chatTabs button { height: 13px !important; min-height: 0 !important; padding: 0 5px !important; border-radius: 6px !important; font: 700 7px/11px system-ui, sans-serif !important; box-shadow: none !important; }
#game.left.run #chatLog, #game.left.run #chatIn, #game.left.run #chatTabs { left: auto !important; right: calc(var(--safeR) + 4px) !important; }
/* sağ üst: kısayollar tek ızgara, ayrı aç/kapa düğmesi yok, puan rozeti köşede */

#game.run #runTog, #game.run:not(.togOpen) #runTog { top: 6px !important; right: calc(var(--safeR) + 2px) !important; left: auto !important; opacity: var(--hud) !important; transform: none !important; pointer-events: auto !important; grid-template-columns: repeat(4, 26px) !important; gap: 4px !important; padding: 4px !important; border-radius: 8px !important; background: rgba(8, 12, 20, .45) !important; border: 1px solid rgba(222, 182, 104, .28) !important; }

#game.run #runTog .ib[data-key]::after { bottom: -3px !important; padding: 0 2px; border-radius: 3px; background: rgba(6, 10, 18, .78); font: 700 6px/8px system-ui, sans-serif !important; color: #f4e6c4 !important; }
#game.run #runTog .ib.pts::before { inset: -4px -4px auto auto !important; z-index: 3; width: auto !important; height: 11px !important; min-width: 11px !important; padding: 0 2px !important; border-radius: 6px !important; background: #c0302a !important; border: 1px solid #ffd0c8; font: 800 7px/11px system-ui, sans-serif !important; text-align: center; box-sizing: border-box; }
/* büyük ekran: düğme kümeleri biraz küçülür (mobil dokunma boyutları korunur) */
@media (min-height: 640px) {
  #game.run #runAct, #game.run #runSkills { zoom: .82; }
  #game.run #btnPot, #game.run #potRow, #game.run #chatLog, #game.run #chatIn, #game.run #chatTabs, #game.run #runTog { zoom: .85; }
}

/* Arayüz cilası 2: tek düğme dili (taş = ikincil, deri = birincil; img/ui/btn_*.webp, kaynak KAYNAK.txt), envanter yuvası,
   ince temalı kaydırma çubuğu, ortalanmış büyük harita, katlanır kısayol ızgarası, çakışmayan kanal/saat ve görev satırı, ölüm ekranı. */
* { scrollbar-width: thin; scrollbar-color: rgba(230, 192, 106, .45) transparent; }
#hubBody .row > button, #dialog .card footer button, #hubBody .qBtn, #auth .row button, #sidePanel .bagbar button, #sidePanel .row > button:not(.x):not(.ib) {
  border: 1px solid transparent !important; border-image: url(img/ui/btn_stone.webp) 34 46 fill / 10px 13.5px !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; filter: none; color: #f3e8cc !important; text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .8) !important; padding-inline: 16px !important; font-weight: 700; }
#hubBody .row > button:hover:not(:disabled), #hubBody .qBtn:hover:not(:disabled), #dialog .card footer button:hover:not(:disabled), #auth .row button:hover, #sidePanel .bagbar button:hover:not(:disabled), #sidePanel .row > button:not(.x):not(.ib):hover:not(:disabled) { border-image-source: url(img/ui/btn_stone_h.webp) !important; }
#hubBody .row > button:active:not(:disabled), #dialog .card footer button:active:not(:disabled), #auth .row button:active, #sidePanel .bagbar button:active:not(:disabled) { border-image-source: url(img/ui/btn_stone_p.webp) !important; transform: translateY(1px); }
#hubBody .row > button:disabled, #hubBody .qBtn:disabled, #dialog .card footer button:disabled, #sidePanel .bagbar button:disabled { border-image-source: url(img/ui/btn_stone_d.webp) !important; color: #b9b2a2 !important; opacity: .8; }
#dialog .card footer button.primary, #auth .row button.primary { border-image-source: url(img/ui/btn_leather.webp) !important; color: #ffdf8e !important; }
#dialog .card footer button.primary:hover:not(:disabled), #auth .row button.primary:hover { border-image-source: url(img/ui/btn_leather_h.webp) !important; }
#dialog .card footer button.primary:active, #auth .row button.primary:active { border-image-source: url(img/ui/btn_leather_p.webp) !important; }
/* giriş: düğme satırının fazladan kutusu yok, düğmeler okunur boyda, alt boşluk kısa */
#auth .row { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; margin-top: 4px; gap: 10px; }
#auth .row button { min-height: 44px; font: 700 15px system-ui, sans-serif !important; letter-spacing: .3px; }
#auth form { padding: 24px 26px 14px !important; gap: 12px; }
#auth .msg:empty { min-height: 0; }
#auth input:focus { outline: none; border-color: #e6c06a; box-shadow: 0 0 0 2px rgba(230, 192, 106, .25); }
/* ana ekran: rozetler tek satır, düğmeler ortada makul genişlikte */

 /* dar ekranda haplar alta iner, yatay kaydırma çıkmaz */

/* ayarlar ve görevler: aynı sekme dili (koyu ray, seçili altın), değer düğmeleri taş */
#hubBody .tabs, #hubBody .heroTabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(6, 10, 18, .55); border: 1px solid rgba(230, 192, 106, .25); }
#hubBody .tabs button, #hubBody .heroTabs button { flex: 1; min-height: 30px !important; padding: 4px 8px !important; border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; color: #b8c2d2 !important; font: 700 12px system-ui, sans-serif !important; text-shadow: none !important; }
#hubBody .tabs button.on, #hubBody .heroTabs button.on { background: rgba(230, 192, 106, .2) !important; color: #ffd86a !important; box-shadow: inset 0 0 0 1px rgba(230, 192, 106, .55) !important; }
#hubBody .row > button { min-width: 84px; min-height: 32px; }
/* NPC ve sonuç diyaloğu: dar, okunur, düğmeler eşit */
#dialog .card { max-width: min(470px, 92%) !important; }
#dialog .card footer button { flex: 1 1 auto; min-height: 36px; white-space: nowrap; padding-inline: 14px !important; }
/* panel: kapatma düğmesi kaydırma çubuğuyla kaymaz, kilitli yazılar okunur, pasif fiyatlar soluk ama görünür */
#sidePanel, #sidePanel > * { scrollbar-gutter: stable; }
#sidePanel button:disabled { opacity: .7; filter: saturate(.4); }
#sidePanel small, #sidePanel em { text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .9); }
#sidePanel .cell { border: 0 !important; background: url(img/ui/slot.webp) center / 100% 100% no-repeat !important; outline: 1.5px solid var(--rc, transparent); outline-offset: -5px; box-shadow: none !important; }
#sidePanel .cell.empty, #sidePanel .cell.slot { outline: 0; opacity: .85; }
#sidePanel .cell.sel { outline: 2px solid #ffe08a; outline-offset: -4px; }
@media (max-height: 500px) { #sidePanel { zoom: .68; left: calc((var(--safeL, 0px) + 8px) / .68); max-width: calc((100vw - 24px) / .68); } }
/* kanal ve saat tek satır: saat kısayol sırasının arkasına düşmez */
#game.run #mapInfo { flex-wrap: nowrap !important; max-width: none !important; white-space: nowrap; }
/* görev satırı büyük harita düğmesinin yanından başlar */

/* büyük harita: ekranın ortasında, çerçeveli, arkası karartılmış; kapatma düğmesi sağ üstte */
#game.run #runSide.big { position: absolute; left: 50% !important; top: 50% !important; right: auto !important; transform: translate(-50%, -50%); z-index: 30; }
#game.run #runSide.big #runMap { width: 236px !important; height: 236px !important; max-width: none; border: 0 !important; box-shadow: 0 0 0 100vmax rgba(4, 6, 10, .62), 0 4px 18px rgba(0, 0, 0, .7) !important; }
#game.run #runSide.big::after { display: block !important; left: -14%; top: -14%; width: 128%; height: 128%; }
#game.run #runSide.big > #mapInfo { display: none !important; }
#game.run #runSide.big > #btnBigMap { position: absolute; left: auto !important; right: -4% !important; top: -4% !important; width: 26px !important; height: 26px !important; z-index: 4; border: 0 !important; background: url(img/ui/btn_cancel.webp) center / contain no-repeat !important; box-shadow: none !important; }
/* kısayol ızgarası: sağ üst köşede küçük katla/aç düğmesi; kapalıyken yalnız düğme kalır */
#game.run #btnTogs { display: grid !important; top: 6px !important; right: calc(var(--safeR) + 2px) !important; width: 22px !important; height: 22px !important; border: 1px solid rgba(222, 182, 104, .8) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .5) !important; z-index: 5; background-size: 62% !important; }
#game.run.togOpen #btnTogs { background: var(--i) center / 62% no-repeat, linear-gradient(#3a2c12, #1a1208) !important; border-color: #ffd86a !important; }
#game.run.togOpen #runTog { right: calc(var(--safeR) + 28px) !important; }
#game.run:not(.togOpen) #runTog { opacity: 0 !important; transform: scale(.6) translateX(30%) !important; transform-origin: top right; pointer-events: none !important; transition: opacity .18s, transform .18s; }
@media (min-height: 640px) { #game.run #btnTogs { zoom: .85; } }
/* telefon yatay: kısayol ve menü düğmeleri parmakla rahat basılır */
@media (max-height: 500px) {
  #game.run #runTog { grid-template-columns: repeat(4, 30px) !important; }
  #game.run #runTog .ib { width: 30px !important; height: 30px !important; }
  #game.run.togOpen #runTog { right: calc(var(--safeR) + 32px) !important; }
  #game.run #btnTogs { width: 26px !important; height: 26px !important; }
  #leftDock button { width: 30px !important; height: 30px !important; }
}
/* ölüm: gri ekran, kenarları kızıl, diyalog başlığı kırmızı */
#game.run.dead::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(60, 0, 0, .55)); }
#game.run.dead #dialog .card h3 { color: #ff7a64 !important; }
/* Simge yenileme: çizim/kod SVG simgeler yerine boyalı (AnnoMotion CC0) ve yaldızlı (game-icons.net CC BY, Kenney CC0)
   simgeler — img/ui/ic_*.webp, kaynak img/ui/KAYNAK.txt. Eski u_*/ui_* SVG'ler başka yerde yedek olarak kalır. */
#btnUpgrades, #btnCityUp { --i: url(img/ui/ic_sira.webp) !important; }
#btnSettings { --i: url(img/ui/ic_ayar.webp) !important; }
#btnCityMenu { --i: url(img/ui/ic_menu.webp) !important; }
#btnShop { --i: url(img/ui/ic_elmas.webp) !important; }
#btnQuests { --i: url(img/ui/ic_gorev.webp) !important; }
#btnHeroScr { --i: url(img/ui/ic_karakter.webp) !important; }
#btnHero, #btnRaid { --i: url(img/ui/ic_oto.webp) !important; }
#btnTrap, #btnSnare { --i: url(img/ui/ic_tuzak.webp) !important; }
#btnAbility { --i: url(img/ui/ic_ok.webp) !important; }
#btnInv { --i: url(img/ui/ic_canta.webp) !important; }
#btnSkills { --i: url(img/ui/ic_yetenek.webp) !important; }
#btnStats { --i: url(img/ui/ic_gelistir.webp) !important; }
#btnChat { --i: url(img/ui/ic_sohbet.webp) !important; }
#btnTogs { --i: url(img/ui/ic_kisayol.webp) !important; }
#btnBigMap { --i: url(img/ui/ic_harita.webp) !important; }
#btnCamp { --i: url(img/ui/ic_kamp.webp) !important; }
#btnEmote { --i: url(img/ui/ic_selam.webp) !important; }
#btnLock { --i: url(img/ui/ic_hedef.webp) !important; }
#btnRec { --i: url(img/ui/ic_sira.webp) !important; }
#game.run #btnAtk, #btnAtk { --i: url(img/ui/ic_kilic.webp) !important; }
#btnUlt, #game.run #btnUlt { --i: url(img/ui/ic_nihai.webp) !important; }
#btnRoll { --i: url(img/ui/ic_yuvarlan.webp) !important; }
#btnBlk { --i: url(img/ui/ic_kalkan.webp) !important; }
#btnPick { --i: url(img/ui/ic_al.webp) !important; }
#btnTalk i { -webkit-mask: none !important; mask: none !important; background: url(img/ui/ic_gorev.webp) center / contain no-repeat !important; width: 26px !important; height: 26px !important; }
.pill.elmas::before { background-image: url(img/ui/ic_elmas.webp) !important; }
.pill.guc::before { background-image: url(img/ui/ic_guc.webp) !important; }
.pill.nufus::before { background-image: url(img/ui/ic_kisi.webp) !important; }
.pill.can::before { background-image: url(img/ui/ic_can.webp) !important; }
.pill.tas::before, .pill.demir::before { background-image: url(img/ui/ic_tas.webp) !important; }
.pill.erzak::before { background-image: url(img/ui/ic_erzak.webp) !important; }
.pill.kale::before { background-image: url(img/ui/ic_kale.webp) !important; }
.pill.dalga::before { background-image: url(img/ui/ic_dalga.webp) !important; }

/* ==== Görev, Av Bileti, hikâye, minimap ==================================================================
   Görev satırı kart görünümü (katlanır), sol simge çubuğu katlama düğmesi, ışınlanma yüzüğü, görev günlüğü paneli,
   Av Bileti şeridi, görev bildirimi. Simgeler img/ui (AnnoMotion CC0), yazı Cinzel / EB Garamond (OFL). */
:root { --qGold: #e6c06a; --qGoldL: #ffe29a; --qInk: #f3e6c4; --qDim: #b9ab88; --qCard: rgba(14, 11, 8, .72); --qLine: rgba(230, 192, 106, .38); --qOk: #8fe07a; }

/* sol simge çubuğu: başta küçük katlama düğmesi, katlıyken yalnız o kalır */

#leftDock #btnDock { width: 13.6px !important; height: 13.6px !important; min-width: 0; border: 1px solid rgba(230, 192, 106, .75) !important; background: radial-gradient(circle at 50% 35%, #3a2c14, #150f07) !important; box-shadow: 0 2px 3.1px rgba(0, 0, 0, .6) !important; padding: 0; }
#leftDock #btnDock::before { inset: 0 !important; content: "‹"; display: grid; place-items: center; background: none !important; font: 800 9.3px/1 Georgia, serif; color: var(--qGoldL); filter: none !important; }
#game.dockShut #leftDock #btnDock::before { content: "›"; }
#game.dockShut #leftDock button:not(#btnDock) { display: none !important; }
#game.dockShut #leftDock { width: auto !important; }

/* görev satırı: yarı saydam kart, başlık, hedef satırı, ilerleme çubuğu, ödül ipucu, teslim düğmesi */
#game.run #questTrack { left: calc(var(--safeL, 0px) + 5px) !important; width: 168px; max-width: calc(100vw - 14.9px) !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  flex-direction: column; gap: 2.5px; pointer-events: auto !important; font: 500 7.4px/1.3 "EB Garamond", Georgia, serif !important; color: var(--qInk) !important; z-index: 5; }
#questTrack header { display: flex; align-items: center; gap: 2.5px; }
#questTrack .qtHead { display: flex; align-items: center; gap: 3.7px; padding: 1.9px 6.2px 1.9px 3.7px; border: 1px solid var(--qLine); border-radius: 7.4px; background: linear-gradient(90deg, rgba(24, 16, 6, .85), rgba(24, 16, 6, .55)); color: var(--qGoldL); font: 700 6.8px "Cinzel", Georgia, serif; letter-spacing: .3.7px; cursor: pointer; text-transform: uppercase; }
#questTrack .qtHead i { width: 9.9px; height: 9.9px; background: url(img/ui/ic_gorev.webp) center / contain no-repeat; }
#questTrack .qtHead em { font: 800 5.6px/8.7px system-ui, sans-serif; min-width: 8.7px; height: 8.7px; border-radius: 4.3px; background: #c0302a; color: #fff; text-align: center; padding: 0 1.9px; font-style: normal; animation: qPulse 1.4s infinite; }
#questTrack .qtFold { width: 12.4px; height: 12.4px; border-radius: 50%; border: 1px solid var(--qLine); background: rgba(20, 14, 6, .8); color: var(--qGoldL); font: 700 6.8px/1 system-ui; cursor: pointer; padding: 0; }
#questTrack .qtBody { display: flex; flex-direction: column; gap: 2.5px; }
#questTrack .qt { position: relative; display: flex; gap: 5px; align-items: center; padding: 3.7px 5px 3.7px 3.7px; border-radius: 5px; background: linear-gradient(100deg, rgba(16, 12, 8, .82), rgba(16, 12, 8, .5) 80%, rgba(16, 12, 8, .25)); border-left: 2px solid var(--qGold); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }

#questTrack .qt.talk { border-left-color: #ffd84a; }
#questTrack .qtIc { flex: none; width: 18.6px; height: 18.6px; background: center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); }
#questTrack .qtM { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#questTrack .qtM em { font: 600 5.6px "Cinzel", Georgia, serif; letter-spacing: .5px; color: var(--qDim); text-transform: uppercase; font-style: normal; }
#questTrack .qtM b { font: 700 8.1px "Cinzel", Georgia, serif; color: var(--qGoldL); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#questTrack .qtM p { margin: 0; font-size: 7.8px; color: var(--qInk); text-shadow: 0 1px 2px #000; }
#questTrack .qtM p s { text-decoration: none; font: 700 6.8px system-ui, sans-serif; color: #fff; margin-left: 2px; }
#questTrack .qt.done .qtM p, #questTrack .qt.done .qtM p s { color: var(--qOk); }
#questTrack .qtBar { display: block; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 2px 0 1px; }
#questTrack .qtBar u { display: block; height: 100%; background: linear-gradient(90deg, #b98a2a, var(--qGoldL)); transition: width .4s; }
#questTrack .qt.done .qtBar u { background: linear-gradient(90deg, #4a9a3a, var(--qOk)); }
#questTrack .qtM small { font: 600 6.5px system-ui, sans-serif; color: var(--qDim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#questTrack .qtGo { flex: none; align-self: center; padding: 3.1px 6.2px; border-radius: 3.7px; border: 1px solid #ffe08a; background: linear-gradient(#f2cf72, #b98a2a); color: #1d1406; font: 700 6.8px "Cinzel", Georgia, serif; cursor: pointer; box-shadow: 0 0 0 0 rgba(255, 216, 106, .6); animation: qGlow 1.6s infinite; }
#questTrack .qtGo:active { transform: scale(.94); }
@keyframes qGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 106, .55); } 50% { box-shadow: 0 0 6.2px 1.9px rgba(255, 216, 106, .45); } }
@keyframes qPulse { 50% { transform: scale(1.15); } }

/* büyük harita düğmesi kalktı */
#btnBigMap { display: none !important; }

/* ışınlanma yüzüğü: sol altta, sohbetin üstünde (yeri layoutHud ile hesaplanır) */
#btnRing { display: none; }
#game.run #btnRing { display: block; position: absolute; z-index: 6; width: 32.2px; height: 32.2px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: url(img/ui/skill_ring.webp) center / 100% 100% no-repeat, radial-gradient(circle, rgba(40, 70, 110, .95) 0 46%, rgba(10, 16, 26, .9) 62%, transparent 64%); filter: drop-shadow(0 1.9px 3.1px rgba(0, 0, 0, .7)); transition: transform .12s; }
#game.run #btnRing i { position: absolute; inset: 22%; background: url(img/ui/ic_isinlan.webp) center / contain no-repeat; filter: drop-shadow(0 0 2.5px rgba(120, 200, 255, .8)); animation: qRing 6s linear infinite; }
#game.run #btnRing:hover { transform: scale(1.07); } #game.run #btnRing:active { transform: scale(.93); }
#game.run #btnRing::after { content: "Işınlan"; position: absolute; left: 50%; bottom: -7.4px; transform: translateX(-50%); font: 700 5.6px "Cinzel", Georgia, serif; color: var(--qGoldL); text-shadow: 0 1px 2px #000, 0 0 1.9px #000; white-space: nowrap; }
@keyframes qRing { to { transform: rotate(360deg); } }
#game.run #chatLog { max-height: 60px; overflow: hidden; justify-content: flex-end; }

/* görev bildirimi: üst ortada beliren altın şerit */
.questToast { position: absolute; left: 50%; top: 43.4px; z-index: 40; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 161.2px; padding: 6.2px 16.1px 5.6px;
  background: linear-gradient(90deg, transparent, rgba(20, 14, 6, .92) 18%, rgba(20, 14, 6, .92) 82%, transparent); border-top: 1px solid var(--qLine); border-bottom: 1px solid var(--qLine); pointer-events: none; animation: qIn .35s ease-out; }
.questToast b { font: 700 9.9px "Cinzel", Georgia, serif; color: var(--qGoldL); letter-spacing: 1px; text-shadow: 0 0 7.4px rgba(255, 200, 90, .6), 0 1px 2px #000; }
.questToast span { font: 600 7.4px system-ui, sans-serif; color: var(--qInk); }
.questToast.done b { color: #c8ffb0; text-shadow: 0 0 7.4px rgba(120, 255, 120, .5), 0 1px 2px #000; }
.questToast.pass b { color: #ffd86a; }
.questToast.out { opacity: 0; transform: translate(-50%, -6.2px); transition: opacity .5s, transform .5s; }
@keyframes qIn { from { opacity: 0; transform: translate(-50%, -8.7px) scale(.96); } }

/* görev günlüğü paneli */
#sidePanel[data-k=quests] { width: 470px !important; }
#sidePanel .jTabs button { position: relative; font: 700 12px "Cinzel", Georgia, serif !important; letter-spacing: .3px; }
#sidePanel .jDot { position: absolute; top: -4px; right: 2px; min-width: 15px; height: 15px; border-radius: 8px; background: #c0302a; color: #fff; font: 800 9px/15px system-ui, sans-serif; font-style: normal; padding: 0 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
#sidePanel .journal { display: flex; flex-direction: column; gap: 8px; }
#sidePanel .jIc { display: inline-block; flex: none; width: 18px; height: 18px; background: center / contain no-repeat; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
#sidePanel .jIc.big { width: 44px; height: 44px; }
#sidePanel .jIc.sm { width: 14px; height: 14px; margin-right: 3px; }
#sidePanel .jHead { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: linear-gradient(120deg, rgba(90, 60, 20, .45), rgba(20, 14, 8, .5)); border: 1px solid var(--qLine); }
#sidePanel .jHead > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
#sidePanel .jHead b { font: 700 14px "Cinzel", Georgia, serif; color: var(--qGoldL); }
#sidePanel .jHead small { color: var(--qDim); font-size: 11px; }
#sidePanel .jTop { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 0; }
#sidePanel .jTop b { font: 700 13px "Cinzel", Georgia, serif; color: var(--qGoldL); letter-spacing: .5px; }
#sidePanel .jTop span { display: flex; align-items: center; font-size: 11px; color: var(--qDim); }
#sidePanel .jBar { position: relative; display: block; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(230, 192, 106, .25); overflow: hidden; }
#sidePanel .jBar u { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffe29a, #c8922c 60%, #8a5c14); border-radius: 7px; transition: width .5s; }
#sidePanel .jBar s { position: relative; display: block; text-align: center; text-decoration: none; font: 700 10px/14px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#sidePanel .jq { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: linear-gradient(160deg, rgba(34, 26, 16, .8), rgba(12, 10, 8, .78)); border: 1px solid rgba(230, 192, 106, .22); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .06), 0 2px 8px rgba(0, 0, 0, .35); }
#sidePanel .jq.ready, #sidePanel .jq.talk { border-color: rgba(255, 216, 106, .75); box-shadow: 0 0 12px rgba(255, 200, 90, .22), inset 0 1px 0 rgba(255, 240, 200, .1); }
#sidePanel .jq.done { opacity: .62; filter: saturate(.6); }
#sidePanel .jq.ready .jBar u { background: linear-gradient(180deg, #c8ffb0, #5ab84a 60%, #2a7a2a); }
#sidePanel .jqM { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#sidePanel .jqH { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; }
#sidePanel .jqH b { flex: 1; font: 700 13.5px "Cinzel", Georgia, serif; color: #ffe8b0; }
#sidePanel .jq .st { flex: none; font: 700 9px system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; font-style: normal; background: rgba(255, 255, 255, .08); color: var(--qDim); }
#sidePanel .jq .st.ready { background: rgba(90, 200, 70, .22); color: var(--qOk); }
#sidePanel .jq .st.talk { background: rgba(255, 216, 74, .22); color: #ffe066; }
#sidePanel .jq .st.done { background: rgba(255, 255, 255, .06); color: #8a8a8a; }
#sidePanel .jq .who { display: flex; align-items: center; color: var(--qDim); font-size: 11px; }
#sidePanel .jq p { margin: 0; font: 400 13px/1.35 "EB Garamond", Georgia, serif; color: #e6dcc4; }
#sidePanel .jqF { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#sidePanel .jqF button { margin-left: auto; padding: 6px 12px; border-radius: 7px; font: 700 11.5px "Cinzel", Georgia, serif; cursor: pointer; }
#sidePanel .jqF button.pri { animation: qGlow 1.6s infinite; }
#sidePanel .jRw { display: flex; flex-wrap: wrap; gap: 4px; }
#sidePanel .jRw b { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 3px; border-radius: 10px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .08); font: 700 11px system-ui, sans-serif; color: #ffe8b0; }
#sidePanel .jRw b.cos { color: #e0b0ff; }
#sidePanel .jq.pop { animation: qClaim .7s ease-out; }
@keyframes qClaim { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 216, 106, .9); } 35% { transform: scale(1.03); box-shadow: 0 0 26px 6px rgba(255, 216, 106, .55); } 100% { transform: none; } }
#sidePanel .jChain { list-style: none; margin: 2px 0 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
#sidePanel .jChain li { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 4px 0 4px 20px; border-left: 2px solid rgba(230, 192, 106, .2); margin-left: 6px; }
#sidePanel .jChain li i { position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #2a2218; border: 2px solid #6a5a40; }
#sidePanel .jChain li.ok i { background: #5ab84a; border-color: #c8ffb0; }
#sidePanel .jChain li.ok { border-left-color: rgba(120, 220, 100, .55); }
#sidePanel .jChain li.now i { background: #ffd86a; border-color: #fff4c0; box-shadow: 0 0 8px #ffd86a; }
#sidePanel .jChain li b { font: 600 12px "Cinzel", Georgia, serif; color: #e8dcc0; }
#sidePanel .jChain li.lock b { color: #6e6450; }
#sidePanel .jChain li small { margin-left: auto; font-size: 10px; color: var(--qDim); }
#sidePanel .jChain li.next { flex-wrap: wrap; row-gap: 2px; }
#sidePanel .jChain li.next i { border-color: #b8945a; }
#sidePanel .jChain li.next .jRw { flex-basis: 100%; }

/* Av Bileti */
#sidePanel .jPass { display: flex; flex-direction: column; gap: 8px; }
#sidePanel .pHero { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 216, 106, .5);
  background: radial-gradient(ellipse at 80% 0%, rgba(255, 200, 90, .35), transparent 60%), linear-gradient(135deg, #3a2410, #140c06 70%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .5); }
#sidePanel .pHero > div:first-child { display: flex; flex-direction: column; gap: 2px; }
#sidePanel .pHero em { font: 700 10px "Cinzel", Georgia, serif; letter-spacing: 2px; color: var(--qDim); text-transform: uppercase; font-style: normal; }
#sidePanel .pHero b { font: 700 22px "Cinzel", Georgia, serif; color: var(--qGoldL); text-shadow: 0 0 14px rgba(255, 200, 90, .5); }
#sidePanel .pHero small { display: flex; align-items: center; font-size: 11px; color: var(--qInk); }
#sidePanel .pTier { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--qGold); background: radial-gradient(circle, #3a2a10, #120c06); box-shadow: 0 0 14px rgba(255, 200, 90, .35); }
#sidePanel .pTier b { font-size: 24px; line-height: 1; margin-top: 8px; }
#sidePanel .pTier small { font-size: 10px; margin-top: -10px; color: var(--qDim); }
#sidePanel .pXp { display: flex; flex-direction: column; gap: 3px; }
#sidePanel .pXp small { font-size: 10.5px; color: var(--qDim); text-align: right; }
#sidePanel .pRows { display: flex; justify-content: space-between; font: 700 10px "Cinzel", Georgia, serif; letter-spacing: .5px; text-transform: uppercase; }
#sidePanel .pRows .f { color: #cfd8e0; } #sidePanel .pRows .p { display: flex; align-items: center; color: var(--qGoldL); }
#sidePanel .pTrack { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 8px; scroll-snap-type: x proximity; border-radius: 10px; background: linear-gradient(180deg, rgba(40, 50, 62, .35) 0 44%, rgba(90, 60, 14, .35) 56% 100%); box-shadow: inset 0 0 0 1px rgba(230, 192, 106, .2); }
#sidePanel .pt { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; scroll-snap-align: center; }
#sidePanel .pt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: rgba(255, 255, 255, .12); }
#sidePanel .pt.reach::before { background: linear-gradient(90deg, #c8922c, #ffe29a); box-shadow: 0 0 6px rgba(255, 200, 90, .5); }
#sidePanel .pn { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1e1810; border: 2px solid #5a4a30; font: 700 10px system-ui, sans-serif; color: #c8b890; }
#sidePanel .pt.reach .pn { background: linear-gradient(#ffe29a, #b98a2a); border-color: #fff0c0; color: #2a1a05; }
#sidePanel .pt.big .pn { width: 28px; height: 28px; font-size: 11px; }
#sidePanel .pt.cur .pn { box-shadow: 0 0 0 3px rgba(255, 216, 106, .35), 0 0 14px #ffd86a; animation: qPulse 1.6s infinite; }
#sidePanel .pc { position: relative; width: 56px; height: 56px; padding: 4px 2px 2px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18) !important; background: linear-gradient(180deg, rgba(60, 72, 88, .75), rgba(18, 22, 30, .85)) !important; color: #e8eef4; }
#sidePanel .pc.p { border-color: rgba(230, 192, 106, .55) !important; background: linear-gradient(180deg, rgba(110, 76, 24, .8), rgba(30, 18, 6, .9)) !important; color: #ffe8b0; }
#sidePanel .pc.cos { box-shadow: inset 0 0 12px rgba(200, 120, 255, .35); }
#sidePanel .pc .jIc { width: 28px; height: 28px; }
#sidePanel .pc span { font: 700 9px/1.1 system-ui, sans-serif; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidePanel .pc.open { border-color: #ffe08a !important; box-shadow: 0 0 10px rgba(255, 216, 106, .55); animation: qGlow 1.6s infinite; }
#sidePanel .pc.lock .jIc { filter: grayscale(.8) brightness(.6); }
#sidePanel .pc:disabled { opacity: 1 !important; filter: none !important; cursor: default; }
#sidePanel .pc.got { opacity: .55 !important; }
#sidePanel .pc .ck { position: absolute; right: 2px; top: 1px; text-decoration: none; font: 900 13px/1 system-ui; color: var(--qOk); text-shadow: 0 1px 2px #000; }
#sidePanel .pc .lk { position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; background: #d8c8a0; -webkit-mask: url(img/gi/padlock.png) center / contain no-repeat; mask: url(img/gi/padlock.png) center / contain no-repeat; }
#sidePanel .pc.pop { animation: qClaim .7s ease-out; }
#sidePanel .pAct { display: flex; gap: 6px; }
#sidePanel .pAct button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 8px; font: 700 12px "Cinzel", Georgia, serif; cursor: pointer; }
#sidePanel .pOwn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 216, 106, .6); color: var(--qGoldL); font: 700 12px "Cinzel", Georgia, serif; background: rgba(90, 60, 14, .4); }
#sidePanel .pHow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#sidePanel .pHow li { display: flex; align-items: center; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); font: 600 10.5px system-ui, sans-serif; color: var(--qInk); }
/* görev satırı sıkı düzen: başlık satırında etiket, hedef ve sayaç tek satır */
#questTrack .qtM b em { display: inline; margin-right: 3px; font: 600 5.8px "Cinzel", Georgia, serif; color: var(--qDim); letter-spacing: .4px; }
#questTrack .qtM p { display: flex; gap: 3px; align-items: baseline; }
#questTrack .qtM p span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#questTrack .qtM p s { flex: none; }
 #questTrack .qtM p { font-size: 8px; } 

#questTrack .qtM small em { display: inline; font: 700 6px "Cinzel", Georgia, serif; color: #d8b870; letter-spacing: .4px; text-transform: uppercase; font-style: normal; }

#game.run #lootFeed { left: calc(var(--safeL, 0px) + 184px) !important; }
#questTrack.tight .qtM small, #questTrack.tight .qtBar { display: none; }
#questTrack.one .qt ~ .qt { display: none; }

/* ===== Karakter seçimi ===== */
#charSel { position: fixed; inset: 0; z-index: 70; overflow: hidden; color: #f4ead2; font-family: system-ui, "Segoe UI", sans-serif; background: radial-gradient(ellipse at 50% 70%, rgba(40, 24, 10, .15), rgba(6, 8, 12, .82) 70%), linear-gradient(rgba(6, 8, 14, .45), rgba(6, 8, 14, .8)), url(img/scene/koy.webp) center / cover, #0e0a07; }
#charSel canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#charSel canvas:active { cursor: grabbing; }
#charSel .csTop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; pointer-events: none; }
#charSel .csTop h1 { margin: 0; font: 700 clamp(18px, 2.2vw, 30px) "Cinzel", Georgia, serif; letter-spacing: 6px; color: #e6c06a; text-shadow: 0 2px 8px #000; }
#charSel .csTop button { pointer-events: auto; }
#charSel h2 { margin: 0 0 4px; font: 700 18px "Cinzel", Georgia, serif; color: #ffe6a8; letter-spacing: 1px; }
#charSel h2 small { font: 600 12px system-ui, sans-serif; color: #c9b48a; margin-left: 6px; }
#charSel h3 { margin: 10px 0 6px; font-size: 13px; color: #e6c06a; font-weight: 700; }
#charSel .csSide, #charSel .csPanel { position: absolute; top: 70px; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: rgba(18, 13, 9, .78); border: 1px solid rgba(230, 192, 106, .35); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(3px); max-height: calc(100% - 170px); overflow: auto; }
#charSel .csSide { left: 20px; width: clamp(220px, 21vw, 320px); }
#charSel .csPanel { right: 20px; width: clamp(240px, 24vw, 360px); }
#charSel .csSlot { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; min-height: 62px; background: linear-gradient(180deg, rgba(48, 36, 24, .9), rgba(24, 18, 12, .92)); border: 1px solid #5a4630; border-radius: 10px; color: inherit; }
#charSel .csSlot img { grid-row: span 2; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid #5a4630; }
#charSel .csSlot b { font-size: 15px; color: #ffe6a8; }
#charSel .csSlot small { font-size: 12px; color: #c9b48a; font-weight: 600; }
#charSel .csSlot.on { border-color: #e6c06a; box-shadow: 0 0 0 1px #e6c06a, 0 0 18px rgba(230, 192, 106, .3); }
#charSel .csSlot.empty { grid-template-columns: 1fr; text-align: center; border-style: dashed; background: rgba(24, 18, 12, .55); }
#charSel .csSlot.empty b { color: #e6c06a; }
#charSel .csSub { margin: 0; color: #e6c06a; font-weight: 700; font-size: 13px; }
#charSel .csWhere { margin: 4px 0 0; font-size: 14px; } #charSel .csWhere span { display: block; font-size: 11px; color: #c9b48a; text-transform: uppercase; letter-spacing: 1px; }
#charSel .csDesc { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #e8dcc0; }
#charSel .csSkills { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; } #charSel .csSkills span { padding: 3px 8px; font-size: 11.5px; border-radius: 99px; background: rgba(230, 192, 106, .14); border: 1px solid rgba(230, 192, 106, .35); }
#charSel .csLooks { display: flex; flex-wrap: wrap; gap: 8px; }
#charSel .csSwatch { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #5a4630; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
#charSel .csSwatch.on { border-color: #ffe6a8; box-shadow: 0 0 0 2px #e6c06a, inset 0 0 0 2px rgba(0, 0, 0, .35); }
#charSel label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #c9b48a; font-weight: 700; margin-top: 8px; }
#charSel input { padding: 10px 12px; border-radius: 8px; border: 1px solid #5a4630; background: #120d09; color: #f4ead2; font-size: 16px; }
#charSel input:focus { outline: 2px solid #e6c06a; outline-offset: 0; }
#charSel .csBar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
#charSel .csBar button { min-height: 44px; padding: 10px 18px; font-size: 15px; }
#charSel .csBar .big { min-width: 190px; min-height: 52px; font-size: 18px; letter-spacing: 1px; }
#charSel .csMsg { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); margin: 0; min-height: 1.2em; color: #ff9a7a; font-weight: 700; text-shadow: 0 1px 4px #000; text-align: center; width: min(520px, 90%); }
#charSel button.danger, #charSel [data-del] { background: linear-gradient(180deg, #8a2a22, #5a1812); border-color: #c0503a; color: #ffe0d0; }
#charSel .csModal { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); }
#charSel .csModal form { width: min(380px, calc(100% - 32px)); padding: 20px; display: flex; flex-direction: column; gap: 6px; background: rgba(28, 20, 14, .97); border: 1px solid #c0503a; border-radius: 12px; }
#charSel .csModal p { margin: 0; font-size: 14px; line-height: 1.4; }
#charSel .csModal .csMsg { position: static; transform: none; width: auto; }
#charSel .csModal .row { display: flex; gap: 8px; margin-top: 6px; } #charSel .csModal .row button { flex: 1; min-height: 42px; }
@media (max-height: 520px) {
  #charSel .csTop { padding: 6px 12px; } #charSel .csTop button { padding: 6px 12px; }
  #charSel .csSide, #charSel .csPanel { top: 44px; padding: 8px; gap: 5px; max-height: calc(100% - 108px); }
  #charSel .csSide { left: 10px; width: 200px; } #charSel .csPanel { right: 10px; width: 230px; }
  #charSel h2 { font-size: 14px; } #charSel h3 { margin: 4px 0; }
  #charSel .csSlot { min-height: 44px; padding: 4px 8px; grid-template-columns: 34px 1fr; } #charSel .csSlot img { width: 34px; height: 34px; }
  #charSel .csSlot b { font-size: 13px; } #charSel .csSlot small { font-size: 11px; }
  #charSel .csDesc { font-size: 12px; line-height: 1.3; } #charSel .csSkills span { font-size: 10.5px; padding: 2px 6px; }
  #charSel .csSwatch { width: 24px; height: 24px; } #charSel label { margin-top: 2px; } #charSel input { padding: 6px 10px; font-size: 14px; }
  #charSel .csBar { bottom: 8px; } #charSel .csBar button { min-height: 36px; padding: 6px 12px; font-size: 13px; } #charSel .csBar .big { min-width: 140px; min-height: 40px; font-size: 15px; }
  #charSel .csMsg { bottom: 52px; font-size: 12px; }
}
@media (max-width: 640px) and (min-height: 521px) {
  #charSel .csSide { left: 10px; right: 10px; width: auto; top: auto; bottom: 80px; max-height: 34%; }
  #charSel .csPanel { left: 10px; right: 10px; width: auto; top: 54px; max-height: 30%; }
}

/* --- Tek envanter: teçhizat + malzeme + iksir aynı ızgarada; sürükle-bırak (8, 9, 251–275, 286, 287, 384–387) --- */
#sidePanel .grid.bag .cell { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#sidePanel [data-k] { cursor: grab; }
#sidePanel .cell.dim { opacity: .28; filter: grayscale(.7); }
#sidePanel .cell.dragging { opacity: .35; }
#sidePanel.dragMode .cell[data-i], #sidePanel.dragMode .doll [data-drop] { transition: outline-color .1s, background-color .1s; }
#sidePanel .cell.dropOk { outline: 2px solid #7fe08a !important; outline-offset: -3px; background-color: rgba(127, 224, 138, .18) !important; }
#sidePanel .cell.dropBad { outline: 2px dashed #ff6a5a !important; outline-offset: -3px; }
#sidePanel .cell.dropBad::before { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #ff6a5a; font: 800 18px system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
.cell.ghost { position: fixed; z-index: 9999; pointer-events: none; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: url(img/ui/slot.webp) center / 100% 100% no-repeat; outline: 2px solid #ffe08a; outline-offset: -4px; transform: scale(1.12); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); opacity: .95; }
.cell.ghost .ii { display: inline-block; width: 86%; height: 86%; background: center / contain no-repeat; }
.cell.ghost .gi { display: inline-block; width: 70%; height: 70%; background: var(--c, #fff); -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; }
.cell.ghost .gi.hd { background: center / contain no-repeat; -webkit-mask: none; mask: none; }
.cell.ghost s { position: absolute; left: 3px; top: 1px; font-size: 10px; text-decoration: none; }
.cell.ghost em { position: absolute; right: 4px; bottom: 2px; font: 800 12px system-ui, sans-serif; font-style: normal; color: #ffe08a; text-shadow: 0 1px 2px #000; }
/* yükseltme ve yığın sayısı okunur: koyu rozet; nadirlik köşe şeridi resmin üstünü kapatmaz */
#sidePanel .cell em { right: 4px; bottom: 3px; padding: 0 3px; border-radius: 4px; background: rgba(0, 0, 0, .62); font-size: 11px; line-height: 14px; }
#sidePanel .cell.stk em.n { color: #fff; }
#sidePanel .cell.stk em.n.full { color: #ffd86a; } /* yığın sınırında (260) */
#sidePanel .grid .cell[class*=" r"]:not(.r0):not(.new)::after { content: ""; position: absolute; left: 6px; top: 6px; width: 0; height: 0; border-top: 9px solid var(--rc); border-right: 9px solid transparent; }
#sidePanel .card .cnt { font-style: normal; color: #ffe08a; margin-left: 4px; }
@media (pointer: coarse) { #sidePanel .grid.bag { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } #sidePanel .doll .cell { min-width: 64px; } }

/* Işınlan: sekmeler ve patron kartları */
#sidePanel[data-k="travel"] .tabs { margin-bottom: 8px; }
#sidePanel .tcard.here { cursor: default; border-color: rgba(120, 220, 140, .6); }
#sidePanel .tcard em.ok { color: #8fe8a0; }
#sidePanel .tcard.patron { min-height: 96px; padding-left: 58px !important; border-color: rgba(220, 90, 70, .55); background: linear-gradient(90deg, rgba(24, 6, 6, .92), rgba(24, 8, 8, .3)), var(--bg) center / cover, #2a1414 !important; }
#sidePanel .tcard.patron:hover:not(:disabled) { border-color: #ff8a6a; box-shadow: 0 0 16px rgba(255, 90, 60, .35); }
#sidePanel .tcard.patron .plvl { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e6c06a; background: radial-gradient(#5a1a12, #1a0604); color: #ffd86a; font: 700 14px "Cinzel", Georgia, serif; box-shadow: 0 0 8px rgba(255, 120, 60, .4); }
#sidePanel .tcard.patron .bossArt { height: 94px; }
#sidePanel .tcard.patron.lock .plvl { border-color: #777; color: #bbb; }

/* Mühürcü paneli: sende olan bedel yeşil */
#sidePanel .have { color: #8aff9a; }

/* avcı kampı paneli: kaynak şeridi, görev kartı, takas satırları, altta yol düğmeleri */
#sidePanel[data-k="camp"] { width: min(440px, calc(100vw - var(--safeL, 0px) - 72px)); }
#sidePanel .cres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#sidePanel .cres span { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 6px; border-radius: 8px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(230, 192, 106, .2); font-size: 12px; }
#sidePanel .cres b { color: #f4e6c0; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidePanel .cres .ii, #sidePanel .cres .gi, #sidePanel .cio .ii, #sidePanel .cio .gi { width: 20px; height: 20px; }
#sidePanel .cquest { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid rgba(230, 192, 106, .4); background: linear-gradient(180deg, rgba(230, 192, 106, .12), rgba(0, 0, 0, .28)); }
#sidePanel .cq { display: flex; gap: 8px; align-items: center; }
#sidePanel .cq > .gi { width: 34px; height: 34px; }
#sidePanel .cq > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#sidePanel .cq small, #sidePanel .crafts small { color: #c9b88a; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
#sidePanel .cq b { color: #fff; font-size: 13px; }
#sidePanel .cq p { margin: 0; display: flex; gap: 6px; font-size: 11px; color: #a9b6c8; }
#sidePanel .cq p span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidePanel .cq p s { text-decoration: none; color: #ffd86a; font-variant-numeric: tabular-nums; }
#sidePanel .cq em { font-style: normal; font-size: 11px; color: #9fe0b4; }
#sidePanel .cq.done i.xp u { background: linear-gradient(90deg, #6fe06f, #c8ffb0); }
#sidePanel .cq > button, #sidePanel .crafts button, #sidePanel .cup > button, #sidePanel .cturn, #sidePanel .cnav button { padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(230, 192, 106, .45); background: linear-gradient(180deg, rgba(60, 84, 120, .55), rgba(24, 36, 58, .7)); color: #f4f0e6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
#sidePanel .crafts button.pri, #sidePanel .cup > button.pri, #sidePanel .cq > button.pri, #sidePanel button.cturn, #sidePanel .cnav button.pri { background: linear-gradient(180deg, #f2cf72, #b98a2a); color: #1d1406; border-color: #ffe08a; font-weight: 700; }
#sidePanel .cturn { animation: cglow 1.4s ease-in-out infinite; }
@keyframes cglow { 50% { box-shadow: 0 0 16px 2px rgba(255, 216, 106, .7); } }
#sidePanel .crafts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#sidePanel .crafts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
#sidePanel .crafts button { grid-row: 1 / 3; grid-column: 2; }
#sidePanel .crafts li.off { background: rgba(0, 0, 0, .18); }
#sidePanel .cio { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: #f4f0e6; }
#sidePanel .cio span { display: inline-flex; align-items: center; gap: 3px; }
#sidePanel .cio > i { font-style: normal; color: #8fa0b8; }
#sidePanel .cio .arr { color: #ffd86a; margin: 0 3px; }
#sidePanel .cup .pips { display: flex; gap: 4px; }
#sidePanel .cup .pips i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
#sidePanel .cup .pips i.on { background: linear-gradient(90deg, #f2cf72, #ffe08a); box-shadow: 0 0 6px rgba(255, 216, 106, .5); }
#sidePanel .cnav { position: sticky; bottom: -12px; margin: auto -12px -12px; padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 6px; background: linear-gradient(180deg, rgba(10, 16, 28, .6), rgba(10, 16, 28, .96)); border-top: 1px solid rgba(230, 192, 106, .25); }
#sidePanel .cnav button { flex: 1 1 28%; }
@media (max-width: 480px) { #sidePanel .cres span { padding: 3px 4px; font-size: 11px; } #sidePanel .cres .ii, #sidePanel .cres .gi { width: 16px; height: 16px; } }

/* sıralama paneli: ilk üç altın/gümüş/bronz rozet, kendi satırın vurgulu, altta sabit "Senin sıran" */
#sidePanel .rank, #sidePanel .recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#sidePanel .rank li { display: grid; grid-template-columns: 30px 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
#sidePanel .rank li > div { min-width: 0; display: flex; flex-direction: column; }
#sidePanel .rank b { color: #f4f0e6; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidePanel .rank small { color: #8fa0b8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidePanel .rank em { font-style: normal; font-weight: 700; color: #ffd86a; font-variant-numeric: tabular-nums; font-size: 12px; }
#sidePanel .rank .rk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 12px system-ui, sans-serif; color: #c6d0de; background: rgba(0, 0, 0, .3); }
#sidePanel .rank .m1 .rk { background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a920 60%, #8a5d08); color: #2a1a02; box-shadow: 0 0 8px rgba(255, 210, 80, .6); }
#sidePanel .rank .m2 .rk { background: radial-gradient(circle at 35% 30%, #ffffff, #b8c2d0 60%, #67707e); color: #1c2028; }
#sidePanel .rank .m3 .rk { background: radial-gradient(circle at 35% 30%, #ffd7b0, #c27a3a 60%, #6d3c12); color: #2a1406; }
#sidePanel .rank li.me { border-color: #ffd86a; background: linear-gradient(90deg, rgba(255, 216, 106, .2), rgba(255, 216, 106, .04)); }
#sidePanel .rfoot { position: sticky; bottom: -12px; margin: auto -12px -12px; padding: 6px 12px 12px; background: linear-gradient(180deg, rgba(10, 16, 28, .7), rgba(10, 16, 28, .97)); border-top: 1px solid rgba(230, 192, 106, .3); }
#sidePanel .recs li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 13px; }
#sidePanel .recs span { color: #c6d0de; }
#sidePanel .recs b { color: #ffd86a; font-variant-numeric: tabular-nums; }

/* Kadim bronz savaş düğmeleri: ikonları korur, mavi diski deri/bronza çevirir. */
#game.run .ib:not(.hd):not(#btnPot):not(.potK) {
  background-image: var(--i, none), url(img/ui/action-medallion.svg) !important;
  background-position: center 46%, center !important;
  background-size: 58%, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 3px 7px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,238,188,.14) !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
#game.run .ib:not(.hd):not(#btnPot):not(.potK):active { filter: brightness(1.18) drop-shadow(0 1px 1px #000); }
#game.run .ib:not(.hd):not(#btnPot):not(.potK).on { filter: brightness(1.25) drop-shadow(0 0 5px rgba(255,211,117,.75)); }
/* Kadim bronz sol menü düğmeleri: görev/mağaza/çanta ikonlarının arkasındaki mavi diski değiştirir. */
#game.run #leftDock button {
  background: url(img/ui/action-medallion.svg) center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: 0 3px 7px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,238,188,.12) !important;
  backdrop-filter: none !important;
}
#game.run #leftDock button::before { inset: 8px; }
#game.run #leftDock button:hover, #game.run #leftDock button:focus-visible { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,220,145,.55)); }
#game.run #leftDock button:active { filter: brightness(1.22); }
/* Karakter HP üstte, portre altta; seviye rozeti 4. becerinin üzerinde. */
#game.run #runBars {
  display: grid !important; grid-template-columns: 46px 166px; grid-template-rows: 23px 44px;
  column-gap: 8px !important; row-gap: 3px !important; align-items: center !important;
  top: 4px !important; padding: 10px 18px 10px 12px !important;
  background: url(img/ui/player-status-frame.svg) center / 100% 100% no-repeat !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: 0 5px 15px rgba(0,0,0,.72) !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
#game.run #hpBar {
  grid-column: 1 / 3; grid-row: 1; justify-self: center; width: 214px !important; height: 23px !important;
  box-sizing: border-box; position: relative; border: 0 !important; border-radius: 0 !important;
  background: url(img/ui/bar_frame.webp) center / 100% 100% no-repeat,linear-gradient(#160b08,#080706) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.8) !important; overflow: hidden;
}
#game.run #hpBar u {
  inset: 5px 10px !important; border-radius: 4px !important;
  background: linear-gradient(180deg,#ffb09a 0%,#ed5541 25%,#bf251c 66%,#74130e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,242,218,.62),inset 0 -2px 2px rgba(42,0,0,.5),0 0 7px rgba(236,60,38,.55) !important;
}
#game.run #hpBar b { font: 900 11px/22px Cinzel,Georgia,serif !important; letter-spacing: .6px; color: #fff7e4 !important; text-shadow: 0 1px 2px #170604,0 0 4px #000 !important; }
#game.run #runPortrait {
  grid-column: 1; grid-row: 2; width: 42px !important; height: 42px !important; flex: none !important;
  border-radius: 50% !important; border: 1px solid rgba(255,237,180,.8) !important; outline: 1px solid rgba(39,24,10,.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,.8),inset 0 0 10px rgba(0,0,0,.45) !important;
  background-position: center 22% !important; background-size: cover !important;
}
#game.run #runPortrait::after { content: none !important; display: none !important; }
#game.run #runBars > div { display: contents !important; }
#game.run #rageBar { grid-column: 2; grid-row: 2; align-self: start; }
#game.run #runBuffs { grid-column: 2; grid-row: 2; align-self: end; }
#game.run #rageBar {
  width: 143px !important; height: 8px !important; margin: 0 0 0 21px !important; position: relative;
  border: 1px solid #9e793d !important; border-radius: 5px !important; background: linear-gradient(180deg,#0b0907,#291b0d) !important;
  box-shadow: inset 0 1px 2px #000,0 1px 3px rgba(0,0,0,.7) !important;
}
#game.run #rageBar::before { content: 'ÖFKE'; position: absolute; left: -22px; top: -4px; color: #e7cb8b; font: 800 7px/12px Cinzel,Georgia,serif; letter-spacing: .45px; text-shadow: 0 1px 2px #000; }
#game.run #rageBar u { border-radius: 4px; background: linear-gradient(90deg,#7b3c13,#c57722 48%,#f5c965 82%,#fff0b0) !important; box-shadow: 0 0 6px rgba(238,165,62,.55); }
#game.run #runBuffs { min-height: 15px; align-items: center; }
#game.run #runBuffs span {
  min-height: 16px; padding: 1px 8px !important; border: 1px solid rgba(189,151,80,.8); border-radius: 5px !important;
  color: #e8d8b2 !important; background: linear-gradient(180deg,rgba(52,41,26,.98),rgba(17,14,10,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,184,.2),0 1px 3px rgba(0,0,0,.65);
  font: 700 9px/13px Cinzel,Georgia,serif !important; letter-spacing: .18px;
}
#game.run #runSkills::after {
  content: attr(data-level); position: absolute; z-index: 12; right: 21px; bottom: 166px;
  display: grid; place-items: center; width: 25px; height: 21px; box-sizing: border-box;
  color: #fff2c4; font: 900 10px/1 Cinzel,Georgia,serif; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 32% 20%,#96713a,#463018 56%,#17100a);
  border: 1px solid #f1d58d; border-radius: 7px; box-shadow: 0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,241,190,.4);
  pointer-events: none;
}
#game.left.run #runSkills::after { right: auto; left: 21px; }
#game.run #hpBar.low u { animation: nabiz .8s infinite; filter: saturate(1.2) brightness(1.1); }
@media(max-width:600px) {
  #game.run #runBars { grid-template-columns: 38px minmax(104px,1fr); grid-template-rows: 21px 39px; column-gap: 6px !important; row-gap: 2px !important; padding: 8px 13px 8px 10px !important; }
  #game.run #hpBar { width: calc(100% - 2px) !important; height: 21px !important; }
  #game.run #hpBar u { inset: 5px 8px !important; }
  #game.run #hpBar b { font-size: 9px !important; line-height: 20px !important; }
  #game.run #runPortrait { width: 36px !important; height: 36px !important; }
  #game.run #rageBar { width: calc(100% - 23px) !important; height: 7px !important; margin-left: 21px !important; }
  #game.run #runSkills::after { right: 19px; bottom: 162px; }
  #game.left.run #runSkills::after { left: 19px; }
}

/* Şeffaf sol üst MMORPG HUD: minimapın sağında, seviye mührü ve HP/TP çubukları. */
#heroStatus { display: none; }
#game.run #runBars { display: none !important; }
#game.run #runSkills::after { content: none !important; display: none !important; }
#game.run #heroStatus {
  position: absolute; z-index: 8; top: 10px; left: calc(var(--safeL) + var(--mapW) + 42px);
  transform: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none;
}
#game.run #heroStatus[hidden] { display: none !important; }
#game.run #heroStatus > .hero-level {
  position: relative; flex: 0 0 38px; width: 38px; height: 38px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid transparent;
  background: radial-gradient(circle at 36% 27%,#374047 0,#171c20 46%,#080b0d 75%) padding-box,
    conic-gradient(from 220deg,#534329,#dec88b,#6e5831,#fff0bf,#745a30,#d6bd7b,#534329) border-box;
  box-shadow: 0 2px 7px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.11),inset 0 0 9px rgba(0,0,0,.9);
  color: #fff1ca; font: 900 11px/1 Cinzel,Georgia,serif; text-shadow: 0 1px 2px #000,0 0 4px #000; text-align: center;
}
#game.run #heroStatus > .hero-level::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(231,205,143,.28); border-radius: 50%; pointer-events: none; }
#game.run #heroStatus > .hero-vitals { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 154px; }
#game.run #heroStatus .hero-hp, #game.run #heroStatus .hero-xp {
  position: relative; display: block; width: 154px; height: 11px; box-sizing: border-box; overflow: hidden;
  border: 1px solid rgba(227,207,166,.72); border-radius: 2px;
  background: linear-gradient(180deg,rgba(7,8,9,.83),rgba(10,12,13,.56));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.48);
}
#game.run #heroStatus .hero-hp > u, #game.run #heroStatus .hero-xp > u {
  position: absolute; inset: 1px auto 1px 1px; display: block; width: 100%; border-radius: 1px; transition: width .12s linear;
}
#game.run #heroStatus .hero-hp > u { background: linear-gradient(180deg,#ffae92 0%,#df4934 36%,#ae211a 76%,#6e100d 100%); box-shadow: inset 0 1px 0 rgba(255,239,215,.56),0 0 5px rgba(215,47,31,.42); }
#game.run #heroStatus .hero-xp > u { background: linear-gradient(180deg,#b0edff 0%,#4aa8eb 38%,#2264bb 78%,#143a78 100%); box-shadow: inset 0 1px 0 rgba(232,250,255,.58),0 0 4px rgba(58,156,235,.35); }
#game.run #heroStatus .hero-hp > em {
  position: absolute; inset: -1px 0 0; color: #fff8ed; font: 700 7px/9px Cinzel,Georgia,serif;
  text-align: center; text-shadow: 0 1px 2px #000,0 0 2px #000; font-style: normal; white-space: nowrap;
}
#game.run #heroStatus.dead .hero-hp > u { width: 0 !important; }
@media(max-width:600px) {
  #game.run #heroStatus { top: 7px; left: calc(var(--safeL) + var(--mapW) + 22px); gap: 5px; }
  #game.run #heroStatus > .hero-level { flex-basis: 32px; width: 32px; height: 32px; font-size: 9px; }
  #game.run #heroStatus > .hero-vitals, #game.run #heroStatus .hero-hp, #game.run #heroStatus .hero-xp { width: clamp(94px,28vw,140px); }
  #game.run #heroStatus .hero-hp, #game.run #heroStatus .hero-xp { height: 9px; }
}

/* Kadim Diyar görev günlüğü: resimli sefer başlığı, antik metal sekmeler ve iz sürme kartı. */
#sidePanel .jBanner {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  min-height: 92px; padding: 13px 18px; box-sizing: border-box; border: 1px solid rgba(220,190,121,.62); border-radius: 12px;
  background-image: linear-gradient(90deg,rgba(8,11,11,.94) 0%,rgba(10,13,12,.82) 48%,rgba(10,13,12,.18) 100%),url(img/ui/quest-banner.svg);
  background-size: cover; background-position: center; box-shadow: inset 0 1px 0 rgba(255,245,209,.17),0 5px 16px rgba(0,0,0,.42);
}
#sidePanel .jBanner::after { content:''; position:absolute; inset:4px; border:1px solid rgba(230,202,143,.22); border-radius:8px; pointer-events:none; }
#sidePanel .jBanner > div { position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; max-width:72%; }
#sidePanel .jBanner small { color:#d4b875; font:700 9px Cinzel,Georgia,serif; letter-spacing:2px; text-shadow:0 1px 3px #000; }
#sidePanel .jBanner b { color:#fff0c5; font:700 21px Cinzel,Georgia,serif; text-shadow:0 2px 4px #000,0 0 12px rgba(228,187,95,.25); }
#sidePanel .jBanner span { color:#d3c9ae; font:500 12px 'EB Garamond',Georgia,serif; text-shadow:0 1px 3px #000; }
#sidePanel .jBanner > i { display:none; }
#sidePanel .jBanner.gunluk { background-image:linear-gradient(90deg,rgba(6,13,10,.95) 0%,rgba(7,15,11,.82) 45%,rgba(7,15,11,.08) 100%),url(img/ui/hunt-banner.svg); }
#sidePanel .jBanner.gunluk small { color:#b8d196; }
#sidePanel .jBanner.gunluk b { color:#f1e5bb; }
#sidePanel .jBanner.haftalik { background-image:linear-gradient(90deg,rgba(14,10,16,.94),rgba(15,10,15,.75) 48%,rgba(15,10,15,.12)),url(img/ui/quest-banner.svg); }
#sidePanel .jBanner.bilet { background-image:linear-gradient(90deg,rgba(16,12,7,.95),rgba(16,12,7,.75) 48%,rgba(16,12,7,.1)),url(img/ui/hunt-banner.svg); }
#sidePanel .jTabs { display:flex; gap:5px; padding:4px; border:1px solid rgba(201,168,101,.35); border-radius:9px; background:linear-gradient(180deg,rgba(7,9,10,.78),rgba(7,9,10,.42)); }
#sidePanel .jTabs button { flex:1; min-width:0; position:relative; padding:7px 5px !important; border:1px solid rgba(212,185,125,.18) !important; border-radius:6px !important; background:linear-gradient(180deg,rgba(44,42,34,.7),rgba(16,17,16,.8)) !important; color:#c5b994 !important; font:700 10px Cinzel,Georgia,serif !important; letter-spacing:.35px; }
#sidePanel .jTabs button.on { border-color:#cba95f !important; background:linear-gradient(180deg,#77582a,#302313 72%,#17130d) !important; color:#fff0c1 !important; box-shadow:inset 0 1px 0 rgba(255,240,192,.28),0 0 9px rgba(214,173,88,.2); }
#sidePanel .jTabs button.on::after { content:''; position:absolute; left:25%; right:25%; bottom:1px; height:1px; background:linear-gradient(90deg,transparent,#ffe2a0,transparent); }
#sidePanel .jq.hunt { position:relative; overflow:hidden; border-color:rgba(166,192,126,.5); background-image:linear-gradient(100deg,rgba(10,17,12,.94),rgba(11,18,13,.84) 62%,rgba(11,18,13,.4)),url(img/ui/hunt-banner.svg); background-size:cover; background-position:center; box-shadow:inset 0 1px 0 rgba(220,242,183,.12),0 4px 12px rgba(0,0,0,.42); }
#sidePanel .jq.hunt::after { content:'AV SEFERİ'; position:absolute; right:10px; top:8px; color:rgba(213,226,177,.66); font:700 8px Cinzel,Georgia,serif; letter-spacing:1.4px; text-shadow:0 1px 3px #000; }
#sidePanel .jq.hunt .jIc.big { filter:drop-shadow(0 0 5px rgba(173,211,125,.38)); }
#sidePanel .jq.hunt .jBar { height:16px; border:1px solid rgba(179,199,142,.48); background:rgba(4,9,6,.8); }
#sidePanel .jq.hunt .jBar u { background:linear-gradient(180deg,#d3e99d,#6d9c43 55%,#385d29); box-shadow:0 0 8px rgba(143,197,95,.38); }
#sidePanel .jq.hunt .jqH b { color:#f1e6c4; }
#sidePanel .jq.hunt .jRw b { border-color:rgba(181,198,142,.24); }
#sidePanel .jHead { background-image:linear-gradient(90deg,rgba(12,12,10,.82),rgba(12,12,10,.35)),url(img/ui/quest-banner.svg); background-position:center; background-size:cover; }
#questTrack .qt.story { background-image:linear-gradient(100deg,rgba(16,12,8,.86),rgba(16,12,8,.55) 80%,rgba(16,12,8,.2)),url(img/ui/quest-banner.svg); background-size:cover; background-position:center; }
#questTrack .qt.hunt { border-left-color:#a4c77c; background-image:linear-gradient(100deg,rgba(8,16,11,.91),rgba(8,16,11,.68) 72%,rgba(8,16,11,.28)),url(img/ui/hunt-banner.svg); background-size:cover; background-position:center; }
#questTrack .qt.hunt .qtBar u { background:linear-gradient(90deg,#628e40,#c9e78f); }
@media(max-width:520px) {
  #sidePanel .jBanner { min-height:78px; padding:10px 13px; }
  #sidePanel .jBanner b { font-size:17px; }
  #sidePanel .jBanner small { font-size:8px; }
  #sidePanel .jBanner span { font-size:11px; }
  #sidePanel .jTabs button { font-size:8px !important; padding:6px 3px !important; }
}

/* Görev izleyicide kartlar dokunulabilir; ayrıntı oku tıklanabilir olduğunu anlatır. */
#questTrack .qtBody, #questTrack .qt { pointer-events: auto; }
#questTrack .qt { cursor: pointer; }
#questTrack .qt:focus-visible { outline: 1px solid #ffe08a; outline-offset: 1px; }
#questTrack .qtDetailMark { flex: none; color: #f2d486; font: 700 12px/1 Georgia, serif; text-shadow: 0 1px 3px #000; opacity: .8; }
#questTrack .qtGo { position: relative; z-index: 1; }

/* Ayrıntılı görev penceresi: hikâye defteri ve av kontratı görünümü. */
#dialog .card.questDetail { width:min(640px,96vw); padding:clamp(14px,2.3vw,24px); background:radial-gradient(ellipse at 15% 0%,rgba(91,62,28,.42),transparent 42%),linear-gradient(155deg,rgba(20,29,43,.98),rgba(8,13,23,.98)) !important; }
.questDetail .qdHead { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:2px 0 15px; border-bottom:1px solid rgba(229,190,101,.28); }
.questDetail .qdEmblem { width:46px; height:46px; display:block; background-position:center; background-size:contain; background-repeat:no-repeat; filter:drop-shadow(0 2px 5px #000); }
.questDetail .qdNames { min-width:0; }
.questDetail .qdStep { display:block; margin-bottom:3px; color:#b99b60; font:700 10px/1.2 system-ui,sans-serif; letter-spacing:1.5px; }
.questDetail .qdHead h3 { margin:0 !important; color:#ffe3a0 !important; font:700 clamp(17px,2.4vw,23px)/1.12 Cinzel,Georgia,serif !important; }
.questDetail .qdStatus { padding:6px 9px; border:1px solid rgba(228,190,101,.32); border-radius:20px; color:#e8d8b2; background:rgba(255,255,255,.045); font:800 9px/1 system-ui,sans-serif; letter-spacing:.6px; white-space:nowrap; }
.questDetail .qdStatus.ready { color:#d9f6ab; border-color:rgba(145,197,95,.55); background:rgba(93,133,45,.18); }
.questDetail .qdStatus.new { color:#ffe3a0; }
.questDetail .qdFacts { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0 10px; }
.questDetail .qdFact { min-width:0; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(216,188,130,.16); border-radius:10px; background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); }
.questDetail .qdMark { flex:none; width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(232,194,111,.4); border-radius:8px; color:#f3d17d; background:rgba(4,9,17,.45); font:700 17px Georgia,serif; font-style:normal; }
.questDetail .qdFact div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.questDetail .qdFact small,.questDetail .qdGoalTop small,.questDetail .qdReward div { color:#9aa9bc; font:700 9px/1.2 system-ui,sans-serif; letter-spacing:.8px; text-transform:uppercase; }
.questDetail .qdFact b { overflow-wrap:anywhere; color:#edf1f7; font:600 13px/1.25 system-ui,sans-serif; }
.questDetail .qdFact.map { border-color:rgba(225,187,99,.34); background:linear-gradient(110deg,rgba(137,95,35,.18),rgba(255,255,255,.025)); }
.questDetail .qdGoal { margin-top:9px; padding:13px 14px 12px; border:1px solid rgba(234,196,114,.32); border-radius:11px; background:linear-gradient(125deg,rgba(111,75,28,.2),rgba(12,19,30,.65)); }
.questDetail .qdGoalTop { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.questDetail .qdGoalTop b { color:#ffe4a1; font:800 12px system-ui,sans-serif; }
.questDetail .qdGoal p { margin:8px 0 10px !important; color:#e5e9ef !important; font:500 14px/1.4 system-ui,sans-serif !important; }
.questDetail .qdProgress { display:block; height:7px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(0,0,0,.45); }
.questDetail .qdProgress u { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#98702e,#ffdc79); box-shadow:0 0 9px rgba(255,209,93,.35); transition:width .35s; }
.questDetail.hunt .qdProgress u { background:linear-gradient(90deg,#638641,#c9e98d); }
.questDetail .qdReward { display:grid; grid-template-columns:28px auto 1fr; align-items:center; gap:9px; margin-top:10px; padding:10px 12px; border:1px solid rgba(255,211,104,.28); border-radius:10px; background:linear-gradient(100deg,rgba(119,82,27,.28),rgba(37,29,19,.34)); }
.questDetail .qdRewardIcon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#ffe28a; background:radial-gradient(circle,rgba(255,216,106,.2),transparent 70%); font:22px Georgia,serif; font-style:normal; }
.questDetail .qdReward b { justify-self:end; color:#ffe5a3; font:700 13px/1.35 system-ui,sans-serif; text-align:right; }
.questDetail footer { margin-top:13px; padding-top:12px !important; border-top:1px solid rgba(229,190,101,.2); }
.questDetail footer button { min-height:42px !important; }
@media(max-width:520px) { .questDetail .qdHead { grid-template-columns:38px minmax(0,1fr); gap:9px; } .questDetail .qdEmblem { width:38px;height:38px; } .questDetail .qdStatus { grid-column:2; justify-self:start; margin-top:-3px; } .questDetail .qdFacts { grid-template-columns:1fr; gap:7px; margin-top:10px; } .questDetail .qdFact { padding:8px 10px; } .questDetail .qdReward { grid-template-columns:25px 1fr; } .questDetail .qdReward b { grid-column:2; justify-self:start; text-align:left; } }

/* Lonca panosu: bölgeye göre dönen, kabul edilebilir MMORPG kontratları. */
#sidePanel .contractIntro { margin:4px 0 12px; padding:13px 15px; border:1px solid rgba(223,187,106,.36); border-radius:12px; background:radial-gradient(ellipse at 90% 0%,rgba(125,86,32,.3),transparent 48%),linear-gradient(145deg,rgba(28,36,47,.95),rgba(12,17,25,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 15px rgba(0,0,0,.25); }
#sidePanel .contractIntro b { color:#ffe3a0; font:700 16px Cinzel,Georgia,serif; }
#sidePanel .contractIntro span { float:right; color:#c6b88f; font:700 10px system-ui,sans-serif; }
#sidePanel .contractIntro p { margin:7px 0 0; color:#bac4d1; font:12px/1.4 system-ui,sans-serif; }
#sidePanel .contractSub { margin:14px 2px 7px; padding-bottom:5px; border-bottom:1px solid rgba(230,192,106,.22); color:#e6c77e; font:700 12px Cinzel,Georgia,serif; letter-spacing:.35px; }
#sidePanel .jq.contract { border-color:rgba(217,184,111,.3); background:linear-gradient(145deg,rgba(34,40,48,.88),rgba(12,15,21,.9)); }
#sidePanel .jq.contract.ready { border-color:rgba(168,211,110,.72); }
#sidePanel .jq.contract.open { box-shadow:inset 0 1px 0 rgba(255,240,200,.08),0 3px 10px rgba(0,0,0,.28); }
#sidePanel .jq .st.open { color:#ffdfa0; background:rgba(168,119,39,.22); }
#sidePanel .jTabs { justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; }
+#sidePanel .jTabs button { flex:0 0 auto; white-space:nowrap; }

/* Bölge illüstrasyonlu sefer geçişi ve yükleme ekranı. */
#fade { z-index:80; inset:0; overflow:hidden; display:grid; place-items:center; padding:clamp(18px,5vw,64px); background:#080d15; opacity:0; transition:opacity .32s ease; isolation:isolate; }
#fade.on { opacity:1; }
#fade::before { content:""; position:absolute; inset:-2%; z-index:-2; background-image:inherit; background-size:cover; background-position:center; filter:saturate(.82) brightness(.75); transform:scale(1.025); animation:loadPan 16s ease-in-out infinite alternate; }
#fade::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,8,14,.44),transparent 24%,transparent 76%,rgba(4,8,14,.5)),linear-gradient(0deg,rgba(3,6,12,.65),transparent 24%,transparent 76%,rgba(3,6,12,.48)); }
#fade .loadArt,#fade .loadShade { display:none; }
#fade .loadCard { position:relative; width:min(690px,94vw); padding:clamp(20px,4vw,42px) clamp(20px,5vw,54px) clamp(18px,3vw,32px); border:1px solid rgba(229,189,103,.58); border-radius:17px; background:linear-gradient(145deg,rgba(10,17,29,.89),rgba(6,11,20,.82)); box-shadow:0 22px 80px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,244,216,.12),inset 0 0 34px rgba(218,165,64,.055); backdrop-filter:blur(8px); text-align:center; animation:loadCardIn .55s cubic-bezier(.18,.75,.22,1) both; }
#fade .loadCard::before,#fade .loadCard::after { content:"✦"; position:absolute; top:12px; color:#d9b568; font:14px Georgia,serif; text-shadow:0 0 10px rgba(255,208,102,.45); }
#fade .loadCard::before { left:14px; } #fade .loadCard::after { right:14px; }
#fade .loadBrand { display:grid; justify-items:center; gap:2px; color:#f0d28d; }
#fade .loadBrand i { width:38px; height:38px; display:grid; place-items:center; margin-bottom:5px; border:1px solid rgba(235,198,113,.65); border-radius:50%; background:radial-gradient(circle,rgba(236,190,91,.25),rgba(23,28,36,.72) 72%); box-shadow:0 0 22px rgba(220,171,70,.19),inset 0 0 10px rgba(255,226,157,.12); color:#ffe4a0; font:23px Georgia,serif; font-style:normal; }
#fade .loadBrand span { font:700 17px Cinzel,Georgia,serif; letter-spacing:5px; text-shadow:0 2px 8px #000; }
#fade .loadBrand small { color:#b7a579; font:700 8px system-ui,sans-serif; letter-spacing:2.6px; }
#fade .loadRule { margin-top:clamp(20px,4vh,34px); padding-top:17px; border-top:1px solid rgba(229,189,103,.24); }
#fade #fadeRegion { display:inline-block; padding:5px 13px; border:1px solid rgba(228,191,108,.34); border-radius:30px; background:rgba(127,88,32,.18); color:#e4c780; font:700 10px system-ui,sans-serif; letter-spacing:1.3px; text-transform:uppercase; }
#fade #fadeTitle { margin:13px 0 5px; color:#fff0c6; font:700 clamp(22px,4vw,36px) Cinzel,Georgia,serif; letter-spacing:.5px; text-shadow:0 3px 12px #000; }
#fade .loadOrnament { display:block; margin:6px auto 12px; color:#c59c4a; font:10px Georgia,serif; font-style:normal; text-shadow:0 0 8px rgba(255,215,130,.45); }
#fade #fadeTip { max-width:510px; min-height:44px; margin:0 auto; color:#d5d9df; font:italic 15px/1.45 "EB Garamond",Garamond,serif; text-shadow:0 2px 6px #000; }
#fade .loadProgress { width:min(390px,85%); height:7px; margin:17px auto 8px; overflow:hidden; border:1px solid rgba(229,189,103,.45); border-radius:10px; background:rgba(0,0,0,.56); box-shadow:inset 0 1px 3px #000; }
#fade .loadProgress i { display:block; width:8%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#936a28,#ecd07a,#fff0b4); box-shadow:0 0 12px rgba(255,213,114,.62); transition:width .45s ease; }
#fade.loaded .loadProgress i { width:100% !important; }
#fade #fadeStatus { display:block; color:#9faebe; font:700 9px system-ui,sans-serif; letter-spacing:1.1px; text-transform:uppercase; }
#fade .loadEdge { position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); color:rgba(237,207,139,.6); font:12px Georgia,serif; letter-spacing:5px; text-shadow:0 2px 6px #000; }
@keyframes loadPan { from { transform:scale(1.025) translate3d(-.5%,0,0); } to { transform:scale(1.08) translate3d(.7%,-.4%,0); } }
@keyframes loadCardIn { from { opacity:0; transform:translateY(13px) scale(.985); } to { opacity:1; transform:none; } }
@media(max-width:520px) { #fade { padding:16px; } #fade .loadCard { padding:22px 17px 20px; border-radius:14px; } #fade .loadBrand span { font-size:14px; letter-spacing:4px; } #fade #fadeTip { min-height:54px; font-size:14px; } #fade .loadRule { margin-top:19px; } }
@media(prefers-reduced-motion:reduce) { #fade::before,#fade .loadCard { animation:none; } }

/* Full viewport loading transition matching the provided reference. */
#fade { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; max-width:none !important; z-index:2147483000 !important; padding:0 !important; }
#fade .loadCard { width:min(92vw,1800px) !important; max-width:1800px !important; min-height:min(78vh,900px); min-height:min(78dvh,900px); display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,5vh,72px) clamp(24px,7vw,140px) !important; border-radius:clamp(16px,2.2vw,34px) !important; background:linear-gradient(145deg,rgba(9,15,25,.94),rgba(4,9,17,.91)) !important; box-shadow:0 28px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,244,216,.12),inset 0 0 70px rgba(218,165,64,.06) !important; }
#fade .loadBrand i { width:clamp(48px,6vw,88px); height:clamp(48px,6vw,88px); font-size:clamp(28px,4vw,54px); }
#fade .loadBrand span { font-size:clamp(20px,3vw,42px); letter-spacing:clamp(5px,1vw,12px); }
#fade .loadBrand small { font-size:clamp(9px,1vw,14px); letter-spacing:clamp(2px,.55vw,6px); }
#fade .loadRule { width:100%; margin-top:clamp(32px,7vh,80px); padding-top:clamp(22px,4vh,46px); }
#fade #fadeRegion { padding:clamp(7px,1vw,12px) clamp(18px,2vw,34px); font-size:clamp(12px,1.45vw,20px); letter-spacing:clamp(1px,.25vw,3px); }
#fade #fadeTitle { margin:clamp(22px,4vh,48px) 0 10px; font-size:clamp(32px,5.5vw,82px); line-height:1.08; }
#fade .loadOrnament { margin:clamp(16px,3vh,34px) auto; font-size:clamp(14px,1.4vw,21px); }
#fade #fadeTip { max-width:1000px; min-height:clamp(48px,8vh,92px); font-size:clamp(18px,2vw,28px); line-height:1.45; }
#fade .loadProgress { width:min(68%,900px); height:clamp(8px,.9vw,12px); margin:clamp(24px,5vh,54px) auto 14px; }
#fade #fadeStatus { font-size:clamp(10px,.95vw,14px); letter-spacing:clamp(1px,.22vw,3px); }
#fade .loadEdge { bottom:max(18px,env(safe-area-inset-bottom)); font-size:clamp(12px,1.2vw,18px); }
@media(max-width:520px) {
  #fade { padding:0 !important; }
  #fade .loadCard { width:94vw !important; min-height:78dvh; padding:26px 18px !important; }
  #fade .loadRule { margin-top:28px; padding-top:22px; }
  #fade #fadeTitle { font-size:clamp(30px,9vw,48px); }
  #fade #fadeTip { min-height:66px; font-size:16px; }
  #fade .loadProgress { width:84%; }
}

/* Keep the transition card inside the viewport, including its padding and long labels. */
#fade, #fade * { box-sizing:border-box; }
#fade .loadCard { width:min(92vw,1800px) !important; max-width:calc(100vw - 48px) !important; min-width:0 !important; margin-inline:auto !important; overflow:hidden; align-items:stretch; }
#fade .loadBrand, #fade .loadRule { width:100%; min-width:0; }
#fade .loadRule { max-width:100%; }
#fade #fadeTitle { max-width:100%; overflow-wrap:anywhere; font-size:clamp(30px,4.4vw,68px); }
#fade #fadeTip { width:100%; overflow-wrap:anywhere; }
@media(max-width:520px) { #fade .loadCard { width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; min-height:78dvh; } }

/* Mağaza > Elmas Al: elmas paketleri (panels.js storeView). Telefonda iki sütun. */
.gem-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0; }
.gem-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border: 1px solid #8a6a32; border-radius: 8px; background: linear-gradient(170deg, #3a2a14, #1a120a); color: #f3e3bd; cursor: pointer; }
.gem-pack:hover, .gem-pack:focus-visible { border-color: #e6c06a; box-shadow: 0 0 10px rgba(230, 192, 106, .35); }
.gem-pack b { font-size: 20px; color: #9fe6ff; font-variant-numeric: tabular-nums; }
.gem-pack small { font-size: 11px; color: #c9b48a; }
.gem-pack span { margin-top: 4px; padding: 3px 10px; border-radius: 12px; background: linear-gradient(#e6c06a, #b48a3a); color: #1f1504; font-weight: 700; font-size: 13px; }
.gem-pack em { position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 4px; background: #b8402e; color: #fff; font: 700 10px/1.4 system-ui; font-style: normal; }
.gem-wallet b { color: #9fe6ff; }