/* CastleGame arayüzü: sıcak koyu ortaçağ teması, mobil öncelikli. Telefonda alt panel, geniş ekranda sağ panel. */
:root {
	--bg: #f3e9d6; --bg2: #fbf4e6; --card: #fbf4e6; --card2: #efe2c8; --line: #e0d0ae; --line2: #c9b184;
	--txt: #4a3524; --mut: #8a7458; --gold: #a8652a; --gold2: #c58a4a; --ok: #3d8a52; --bad: #b8392f; --danger: #c0453a;
	--glass: rgba(251, 244, 230, .94); --r: 14px; --serif: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --nav: 62px;
	--brown: #7a5233; --brown2: #5f3d24; --cream: #f6e9cc; --shadow: rgba(92, 60, 30, .28);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body.game { background: var(--bg); color: var(--txt); font: 15px/1.4 var(--sans); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: .2px; }
a { color: var(--gold); }
button { color: inherit; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.ico { display: inline-flex; align-items: center; }
.ico .ic { width: 20px; height: 20px; }

/* ---- üst çubuk ve alt gezinme ---- */
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(6px + env(safe-area-inset-top)) 14px 6px; background: linear-gradient(#8a5d3a, #6d4829); border-bottom: 1px solid #5f3d24; color: var(--cream); min-height: 42px; }
.topinfo { flex: 1; justify-content: space-between; text-align: right; font-size: 13px; color: #ecd9b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.stage { flex: 1; position: relative; min-height: 0; overflow: auto; }
.botnav { display: flex; background: linear-gradient(#fbf4e6, #efe2c8); border-top: 1px solid var(--line2); padding-bottom: env(safe-area-inset-bottom); }
.botnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; color: var(--mut); text-decoration: none; font-size: 11.5px; font-weight: 600; position: relative; }
.botnav a .ic { width: 24px; height: 24px; }
.botnav a em { font-style: normal; }
.botnav a.on { color: var(--brown); }
.botnav a.on::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 4px 4px; background: var(--brown); }

/* ---- sahne ---- */
.scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #cfe0a2 0%, #a9c47a 90%); touch-action: none; user-select: none; -webkit-user-select: none; }
.scene canvas { width: 100%; height: 100%; display: block; }
.hud { position: absolute; top: 8px; left: 8px; right: 8px; pointer-events: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud > * { pointer-events: auto; }
.resbar { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 520px; background: var(--glass); border: 1px solid var(--line2); border-radius: 16px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px var(--shadow); overflow: hidden; }
.res { display: flex; align-items: center; gap: 6px; padding: 7px 8px; min-width: 0; border-right: 1px solid rgba(120, 84, 40, .14); }
.res:last-child { border-right: 0; }
.res .ic { width: 26px; height: 26px; }
.res .rv { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.res b { font-size: 15px; font-variant-numeric: tabular-nums; }
.res small { font-size: 11px; color: var(--ok); white-space: nowrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--txt); text-decoration: none; backdrop-filter: blur(6px); }
.chip .ic { width: 16px; height: 16px; }
.chip.warn { border-color: var(--danger); color: #a02e24; }
.chip.hint { border-color: var(--gold2); color: #8a4e1a; }
.chip.ok { border-color: #4a9a68; color: #2b7a46; }
.chip.alert, .qrow.alert, .dbtn.alert { border-color: var(--danger); color: #a02e24; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(217, 83, 79, .32); } }

.fabs, .rcol { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 3; }
.fab { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--glass); color: var(--txt); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 3px 10px var(--shadow); padding: 0; }
.fab:active { transform: scale(.94); }
.fab .ic { width: 22px; height: 22px; }

.dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; gap: 8px; padding: 6px; background: var(--glass); border: 1px solid var(--line2); border-radius: 20px; backdrop-filter: blur(8px); box-shadow: 0 6px 18px var(--shadow); }
.dbtn { position: relative; width: 74px; padding: 7px 4px 6px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--txt); font: 600 12px var(--sans); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.dbtn .ic { width: 26px; height: 26px; }
.dbtn.on { background: linear-gradient(#f6e3b6, #ecd39a); border-color: var(--gold2); color: var(--brown2); }
.dbtn .bdg { position: absolute; top: 2px; right: 10px; font-style: normal; background: var(--danger); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }

/* inşa şeridi */
.tray { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; gap: 8px; padding: 8px 10px 10px; overflow-x: auto; scroll-snap-type: x proximity; background: linear-gradient(transparent, rgba(243, 233, 214, .92) 38%); -webkit-overflow-scrolling: touch; }
.tray[hidden], .coach[hidden], .panel[hidden] { display: none; }
.bcard { flex: 0 0 auto; width: 124px; scroll-snap-align: start; background: linear-gradient(#fdf8ec, #f3e7cd); border: 1px solid var(--line2); border-radius: 16px; padding: 6px 8px 8px; color: var(--txt); text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.bcard.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(197, 138, 74, .35); }
.bcard.off { opacity: .6; }
.bcard b { font: 700 13px var(--serif); margin-top: 2px; }
.bcard .lim { font-size: 11px; color: var(--mut); }
.bpic { position: relative; height: 72px; border-radius: 12px; background: radial-gradient(ellipse at 50% 70%, #cfe0a2, #a9c47a 75%); overflow: hidden; display: grid; place-items: center; }
.bpic .thumb { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.lockov { position: absolute; inset: 0; background: rgba(70, 48, 28, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: #fff3da; }
.lockov .ic { width: 22px; height: 22px; }
.costs { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc { display: inline-flex; align-items: center; gap: 2px; }
.cc .ic { width: 15px; height: 15px; }
.cc.short { color: var(--bad); }

.coach { flex-wrap: wrap; position: absolute; left: 10px; right: 10px; bottom: 86px; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--glass); border: 1px solid var(--gold2); border-radius: 18px; padding: 10px 12px; backdrop-filter: blur(8px); box-shadow: 0 6px 18px var(--shadow); }
.ctext { flex: 1 1 180px; display: flex; flex-direction: column; min-width: 0; }
.ctext b { font: 700 14px var(--serif); color: var(--gold); }
.ctext span { font-size: 12.5px; color: var(--mut); }
.crow { display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
.cbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font: 700 13px var(--sans); cursor: pointer; }
.cbtn.pri { background: linear-gradient(#e9b957, #c98f2f); color: #3a2308; border-color: #f0cf84; }
.cbtn:disabled { opacity: .5; }

/* ---- panel: telefonda alttan açılan çekmece, geniş ekranda sağ panel ---- */
.panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 64%; display: flex; flex-direction: column; background: linear-gradient(#fdf8ec, #f3e7cd); border: 1px solid var(--line2); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px var(--shadow); transform: translateY(105%); transition: transform .22s ease-out; z-index: 5; }
.panel.open { transform: translateY(0); }
.panel::before { content: ""; width: 42px; height: 4px; border-radius: 2px; background: var(--line2); margin: 8px auto 0; flex: none; }
.has-panel .dock, .has-panel .tray, .has-panel .coach { display: none; }
.has-panel .rcol { display: none; }
.phead { display: flex; align-items: center; gap: 12px; padding: 8px 52px 6px 14px; position: relative; }
.pthumb { height: 64px; width: auto; max-width: 96px; object-fit: contain; flex: none; background: radial-gradient(ellipse at 50% 75%, #cfe0a2, #a9c47a 80%); border-radius: 14px; padding: 2px; }
.ptxt h3 { margin: 0; font-size: 18px; color: var(--gold); }
.ptxt p { margin: 2px 0 0; font-size: 12.5px; color: var(--mut); }
.pclose { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); display: grid; place-items: center; cursor: pointer; padding: 0; }
.panel .scroll { overflow: auto; padding: 4px 12px 12px; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.pfoot { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(120, 84, 40, .07); }
.sect { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin: 8px 0; }
.sect h4 { margin: 0 0 6px; font-size: 14px; color: var(--gold); }
.sect p { margin: 3px 0; }

/* kartlar */
.ucard { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 9px; margin: 8px 0; }
.ucard.off { opacity: .55; }
.uimg { width: 58px; height: 66px; flex: none; object-fit: contain; border-radius: 12px; background: radial-gradient(ellipse at 50% 85%, #cfe0a2, #a9c47a 80%); }
.uimg.wimg { display: grid; place-items: center; color: var(--brown); }
.uimg.wimg .ic { width: 34px; height: 34px; }
.ubody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.uhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uhead b { font: 700 15px var(--serif); }
.utime { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mut); }
.utime .ic { width: 14px; height: 14px; }
.stats { display: flex; flex-wrap: wrap; gap: 4px; }
.stat { display: inline-flex; gap: 4px; align-items: baseline; background: rgba(120, 84, 40, .08); border-radius: 8px; padding: 1px 7px; font-size: 11.5px; }
.stat i { font-style: normal; color: var(--mut); }
.ufoot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ufoot .costs { flex: 1; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid transparent; border-radius: 10px; background: rgba(120, 84, 40, .07); margin: 3px 0; }
.qrow .qn { flex: 1; min-width: 0; }
.qimg { width: 24px; height: 28px; object-fit: contain; }
.armygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 6px 0; }
.acard { display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 4px; text-align: center; }
.aimg { width: 52px; height: 58px; object-fit: contain; }
.acard b { font-size: 17px; }
.agehead { display: flex; align-items: center; gap: 8px; }
.agehead .ic, .agebusy .ic { width: 24px; height: 24px; }
.agebusy { display: flex; align-items: center; gap: 8px; }
.agecost { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.reqs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.req { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; border-radius: 8px; padding: 2px 8px; background: rgba(120, 84, 40, .08); }
.req.ok { color: var(--ok); } .req.bad { color: var(--bad); }
.req .ic { width: 14px; height: 14px; }
.prodrow { display: flex; align-items: center; gap: 8px; }
.prodrow .ic { width: 26px; height: 26px; }
.prodrow b { font-size: 18px; }
.slots { display: flex; gap: 8px; margin: 10px 0; }
.slot { flex: 1; height: 44px; border-radius: 12px; border: 1px dashed var(--line2); display: grid; place-items: center; background: rgba(120, 84, 40, .04); }
.slot.on { border: 1px solid var(--gold2); background: rgba(232, 184, 74, .25); }
.slot .ic { width: 26px; height: 26px; }
.stepper { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.upgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.upcell { display: flex; flex-direction: column; gap: 4px; font-size: 13px; background: rgba(120, 84, 40, .07); border-radius: 10px; padding: 7px 8px; }
.uptop { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line2); }
.pips i.on { background: var(--gold); border-color: var(--gold); }

/* ---- düğmeler ve ortak ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; background: var(--card2); color: var(--txt); border: 1px solid var(--line2); border-radius: 12px; padding: 8px 16px; font: 600 14px var(--sans); cursor: pointer; text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pri { background: linear-gradient(#e9b957, #c98f2f); border-color: #f0cf84; color: #3a2308; font-weight: 700; }
.btn.danger { background: linear-gradient(#c9473b, #9b2f26); border-color: #d9635a; color: #fff; }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; }
.btn.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: 10px; }
.btn.sq { width: 42px; padding: 0; }
.btn.sq.sm { width: 32px; }
.btn .ic { width: 18px; height: 18px; }
.muted { color: var(--mut); }
.sm { font-size: 12.5px; }
.big { font-size: 20px; font-weight: 700; min-width: 56px; text-align: center; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.gold { color: var(--gold); }
.cd { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.plain { padding: 18px 16px 28px; max-width: 560px; margin: 0 auto; }
.plain.wide { max-width: 980px; }
.stage:has(.plain) { overflow: auto; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + 100px); transform: translate(-50%, 20px); background: rgba(92, 60, 30, .96); border: 1px solid var(--line2); color: #fff; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- giriş ---- */
.auth-page { overflow: auto; background: radial-gradient(ellipse at 50% 0, #fbf4e6 0, #e6d3aa 75%); }
.auth { margin: auto; width: 100%; max-width: 380px; padding: 28px 20px; }
.auth-top { text-align: center; margin-bottom: 22px; }
.logo { width: 68px; height: 68px; margin: 0 auto 10px; border-radius: 18px; background: linear-gradient(135deg, #e9b957, #a8652a); color: #fff3da; font: 800 36px var(--serif); display: grid; place-items: center; box-shadow: 0 6px 18px var(--shadow); }
.auth-name { font: 800 28px var(--serif); color: var(--gold); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.field label { display: block; font-size: 13px; color: var(--mut); margin-bottom: 4px; }
.tin { width: 100%; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; color: var(--txt); font: inherit; }
.tin:focus { outline: 2px solid var(--gold2); }
.tin.num { width: 74px; padding: 4px 8px; }
select.tin { margin: 6px 0; }
.note { font-size: 12px; color: var(--mut); }

/* ---- raporlar ve savaş tekrarı ---- */
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rhead h2 { margin: 0; color: var(--gold); }
.rlist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rrow { display: flex; flex-direction: column; gap: 2px; text-align: left; background: linear-gradient(#fdf8ec, #f3e7cd); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; color: var(--txt); font: inherit; cursor: pointer; }
.rrow.unread { border-left: 4px solid var(--gold); }
.rrow.k1 b, .rrow.k3 b, .rrow.k8 b, .rrow.k5 b { color: var(--ok); }
.rrow.k2 b, .rrow.k4 b, .rrow.k9 b, .rrow.k10 b, .rrow.k6 b { color: var(--bad); }
.rtbl { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 14px; }
.rtbl th, .rtbl td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.rtbl th:first-child, .rtbl td:first-child { text-align: left; }
.replay { display: flex; flex-direction: column; gap: 8px; }
.rcv { border: 1px solid var(--line2); border-radius: 12px; background: #e6dcc4; }
.rchart { background: var(--bg2); }
.rbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rrange { flex: 1; min-width: 120px; accent-color: var(--gold); }

/* ---- dünya haritası ---- */
.legend { display: flex; gap: 10px; flex-wrap: wrap; }
.vcard h3 { margin: 0; }

/* ---- geniş ekran: sağ panel ---- */
@media (min-width: 900px) {
	.topbar { padding-left: 22px; padding-right: 22px; }
	.botnav { justify-content: center; }
	.botnav a { max-width: 150px; flex-direction: row; justify-content: center; gap: 8px; padding: 12px 8px; font-size: 14px; }
	.botnav a.on::before { top: auto; bottom: 0; border-radius: 4px 4px 0 0; }
	.resbar { max-width: 600px; }
	.res b { font-size: 16px; }
	.panel { left: auto; top: 128px; right: 14px; bottom: 90px; width: 410px; max-height: none; border: 1px solid var(--line2); border-radius: 20px; transform: translateX(115%); box-shadow: 0 12px 36px var(--shadow); }
	.panel.open { transform: translateX(0); }
	.panel::before { display: none; }
	.has-panel .dock { display: flex; }
	.has-panel .tray:not([hidden]) { display: flex; right: 440px; }
	.has-panel .rcol { display: flex; right: 438px; }
	.has-panel .coach:not([hidden]) { display: flex; right: 440px; }
	.tray { padding-left: 14px; }
	.dock { bottom: 14px; }
}
@media (max-height: 520px) and (orientation: landscape) {
	.panel { max-height: 90%; left: auto; width: 46%; right: 0; }
	.rcol { gap: 5px; }
}

/* ---- dünya haritası paneli ---- */
.facts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.fact { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 14px; }
.fact .ic { width: 20px; height: 20px; color: var(--gold); }
.fact.ok { color: var(--ok); } .fact.ok .ic { color: var(--ok); }
.actions .btn { flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ucard.pick .stepper { gap: 6px; margin: 4px 0 0; flex-wrap: wrap; }
.ucard.pick .tin.num { width: 64px; text-align: center; }

/* ---- düz sayfalar (hesap, raporlar) ---- */
.plain h2 { margin: 4px 0 10px; color: var(--gold); font-size: 22px; }
.plain h4 { color: var(--gold); margin: 16px 0 4px; }
.plain p { margin: 6px 0; }
.rdetail { margin-top: 12px; background: linear-gradient(#fdf8ec, #f6ecd5); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.rdetail h2 { margin-top: 0; }
.rlegend { display: flex; align-items: center; flex-wrap: wrap; }
#account .btn, #novillage .btn { margin-top: 10px; }

/* ---- üst çubuk: dünya, hız, saat ---- */
.worldchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 244, 220, .16); border: 1px solid rgba(255, 244, 220, .35); color: var(--cream); border-radius: 999px; padding: 3px 10px; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.worldchip i { font-style: normal; background: #e9b957; color: #3a2308; border-radius: 8px; padding: 0 6px; font-weight: 800; font-size: 11.5px; }
.worldchip.adm { background: rgba(233, 185, 87, .28); }
.gclock { font-variant-numeric: tabular-nums; font-weight: 600; color: #f6e9cc; }

/* ---- bölge göstergesi, ilerleme çubuğu, geniş kart ---- */
.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 5px; background: var(--glass); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px 2px 5px; font-size: 11.5px; font-weight: 600; }
.lg i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(92, 60, 30, .45); display: inline-block; }
.pbar { height: 10px; border-radius: 6px; background: rgba(120, 84, 40, .15); overflow: hidden; margin: 8px 0; }
.pbar i { display: block; height: 100%; width: 0; background: linear-gradient(#e9b957, #c98f2f); transition: width .9s linear; }
.bcard.wide { width: 100%; flex-direction: row; align-items: center; gap: 10px; margin: 6px 0; text-align: left; flex-wrap: wrap; }
.bcard.wide .bpic { width: 74px; height: 64px; flex: none; }
.bcard.wide b { flex: 1 1 120px; margin: 0; }
.bcard.wide .lim { flex: 1 1 100%; }
.trayhint { flex: 0 0 auto; align-self: center; max-width: 150px; font-size: 12px; color: var(--mut); }

/* ---- radar ve koordinat (dünya haritası, sol alt) ---- */
.radar { position: absolute; left: 10px; bottom: 10px; z-index: 4; width: 184px; background: var(--glass); border: 1px solid var(--line2); border-radius: 16px; padding: 8px; box-shadow: 0 6px 18px var(--shadow); backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 6px; }
.radar .rcv { width: 168px; height: 168px; display: block; cursor: crosshair; touch-action: none; }
.coords { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coords b { font: 700 15px var(--serif); color: var(--brown2); font-variant-numeric: tabular-nums; }
.has-panel .radar { display: none; }
@media (max-width: 899px) { .radar { width: 140px; padding: 6px; } .radar .rcv { width: 126px; height: 126px; } }

/* ---- rapor ayrıntısı ---- */
.rbanner { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid var(--line2); }
.rbanner h2 { margin: 0; color: inherit; }
.rbanner p { margin: 2px 0 0; font-size: 13px; }
.rbanner .ic { width: 38px; height: 38px; }
.rbanner.win { background: #e1f0d4; border-color: #8fbf7a; color: #2b6a3a; }
.rbanner.lose { background: #f6dcd4; border-color: #d99a8e; color: #9a2f24; }
.rbanner.info { background: #efe2c8; color: var(--brown2); }
.rtbl tr.tot td { font-weight: 800; border-top: 2px solid var(--line2); }
.rtbl th { font-size: 12px; color: var(--mut); font-weight: 600; }

/* ---- dünyalar ve yönetim ---- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.wcard { background: linear-gradient(#fdf8ec, #f3e7cd); border: 1px solid var(--line2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 3px 10px var(--shadow); }
.wcard.cur { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(168, 101, 42, .25); }
.whead { display: flex; align-items: center; justify-content: space-between; }
.whead b { font: 700 18px var(--serif); color: var(--brown2); }
.wspeed { background: #e9b957; color: #3a2308; border-radius: 10px; padding: 1px 9px; font-weight: 800; }
.wfacts { display: flex; flex-direction: column; font-size: 13px; color: var(--mut); gap: 2px; }
.afrm { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.fld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--mut); flex: 1 1 140px; }
.tin.sm { width: 84px; padding: 5px 8px; display: inline-block; margin-right: 6px; }
.atbl td { vertical-align: middle; }
.afrm select.tin { margin: 0; }
.atbl .aspd { white-space: nowrap; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.swatches .sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(60,40,20,.25); cursor: pointer; padding: 0; }
.swatches .sw.on { box-shadow: 0 0 0 3px var(--gold2, #8b5a2b); transform: scale(1.08); }
.rowcard.colrow { flex-wrap: wrap; }
.rowcard.colrow .swatches { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 700px) {
	.atbl th:nth-child(2), .atbl td:nth-child(2) { display: none; }
	.atbl td:first-child { white-space: nowrap; }
	.atbl .tin.sm { width: 56px; }
}
@media (max-width: 640px) {
	.hud .legend { display: none; }
	.chip { padding: 3px 9px 3px 7px; font-size: 12px; }
	.chips { gap: 4px; }
	.worldchip.adm { display: none; }
}
@media (max-width: 640px) { .chips .chip.ok { display: none; } }
@media (max-width: 640px) { .rtbl { font-size: 12.5px; } .rtbl th, .rtbl td { padding: 4px 3px; } .rdetail { padding: 10px; } }
.selbox { position: absolute; border: 2px dashed #a8652a; background: rgba(233, 185, 87, .22); pointer-events: none; z-index: 6; border-radius: 4px; }
.selbox[hidden] { display: none; }

/* Üst çubuk: kaynaklar ve oyun saati */
.topinfo { gap: 6px; }
.hres { display: flex; flex: 1; min-width: 0; gap: 4px; justify-content: flex-start; }
.hres .res { border: 0; padding: 2px 6px 2px 2px; gap: 5px; flex: 0 1 auto; }
.hres .res .ic { width: 22px; height: 22px; }
.hres .res b { font-size: 14px; color: #fff4d8; }
.hres .res small { font-size: 10.5px; color: #b9e2a0; }
.rcol .totchip { display: none !important; }
@media (min-width: 701px) { #hres .rwork { display: none !important; } body.game .topbar #hres, body .topbar #hres.rstrip { justify-content: center; }
	/* kaynaklar ekranın tam ortasında: sağdaki koruma rozeti olsa da olmasa da kaymaz */
	body .topbar { position: relative; }
	body .topbar #hres.rstrip { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; margin: 0; width: auto; } }
#hres .rwork { position: relative; cursor: pointer; font: inherit; gap: 4px; padding-right: 8px; }
#hres .rwork .ic, #hres .rwork svg { width: 20px; height: 20px; }
#hres .rwork .rdot { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #d9822b; border: 2px solid #fffaf0; color: #fff; font: 700 10px/14px system-ui, sans-serif; text-align: center; padding: 0 3px; box-sizing: border-box; }
.crewcard { display: flex; flex-direction: column; gap: 2px; background: rgba(255, 250, 240, .94); border: 1px solid rgba(120, 80, 40, .22); border-radius: 14px; box-shadow: 0 6px 18px rgba(60, 40, 20, .18); padding: 6px; min-width: 64px; }
.crewcard .ccr { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; border: 0; background: none; font: 700 13px system-ui, sans-serif; color: #4a3220; cursor: default; }
.crewcard .ccr b { margin-left: auto; }
.crewcard .ccr .ic, .crewcard .ccr svg { width: 18px; height: 18px; }
.crewcard .ccr.zero { opacity: .45; }
.crewcard .ccr.idle { background: rgba(230, 140, 40, .22); color: #8a4a10; cursor: pointer; }
.army-open .crewcard { display: none; }
.crewcard .ccr.pop { border-bottom: 1px solid rgba(120, 80, 40, .18); border-radius: 8px 8px 0 0; padding-bottom: 6px; margin-bottom: 2px; gap: 8px; }
/* mobilde işçi sayıları haritada gösterilmez (üst barda var) */
/* telefonda: işçi kartı ve "Boşta" sağ altta, saldırı düğmesinin üstünde; üstteki işçi rozeti gösterilmez */
@media (max-width: 700px) {
	#hres .rwork { display: none !important; }
	.rcol .chip.idlebtn { position: fixed; right: 14px; bottom: calc(var(--nav, 78px) + 82px + env(safe-area-inset-bottom)); z-index: 6; }
	.rcol .crewcard { position: fixed; right: 14px; bottom: calc(var(--nav, 78px) + 82px + env(safe-area-inset-bottom)); z-index: 6; }
	.rcol.hasidle .crewcard { bottom: calc(var(--nav, 78px) + 134px + env(safe-area-inset-bottom)); }
	.has-panel .rcol .crewcard, .has-tray .rcol .crewcard, .has-panel .rcol .chip.idlebtn, .has-tray .rcol .chip.idlebtn { display: none; }
}
#hres .res .rbadge { position: absolute; left: 14px; top: -5px; min-width: 18px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #5a3d22; border: 1.5px solid #fffaf0; color: #ffe9a8; font: 700 10px/13px system-ui, sans-serif; text-align: center; pointer-events: auto; }
#hres .res .rbadge.zero { background: #b8a888; color: #fff; }
.crewpop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px; background: #fffaf0; border: 1px solid rgba(120, 80, 40, .25); border-radius: 12px; box-shadow: 0 10px 28px rgba(60, 40, 20, .22); padding: 8px; text-align: left; cursor: default; }
.crewpop .cph { font: 700 12px system-ui, sans-serif; color: #8a6a44; padding: 2px 6px 6px; }
.crewpop .cpr { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font: 600 13px system-ui, sans-serif; color: #4a3220; }
.crewpop .cpr b { margin-left: auto; font-size: 14px; }
.crewpop .cpr.zero { opacity: .5; }
.crewpop .cpr.idle { background: rgba(230, 140, 40, .15); cursor: pointer; }
.crewpop .cpi .ic, .crewpop .cpi svg { width: 18px; height: 18px; }
.gclock { font-size: 12px; opacity: .92; flex: none; }
@media (max-width: 420px) { .hres .res small { display: none; } .hres .res b { font-size: 13.5px; } .topbar { padding-left: 8px; padding-right: 8px; } }
@media (min-width: 900px) { .hres { gap: 14px; } .hres .res b { font-size: 16px; } .gclock { font-size: 14px; } }

/* Sağ sütun: yakınlaştırma düğmeleri, ev ve işçi göstergeleri, koruma */
.rcol .gap { height: 4px; }
.rcol .chip { box-shadow: 0 2px 8px var(--shadow); }
.rcol .chip.idlebtn { cursor: pointer; border-color: var(--gold2); color: #8a4e1a; font-weight: 700; animation: pulse 1.6s infinite; }
.rcol .chip.idlebtn:active { transform: scale(.95); }
.rcol .chip.flat { padding: 4px 10px 4px 7px; }
.rcol .chip.ok { display: inline-flex; }

/* İşçi hedef şeridi (işçi seçilince alt kısımda) */
.tcard { flex: 0 0 auto; width: 118px; scroll-snap-align: start; background: linear-gradient(#fdf8ec, #f3e7cd); border: 1px solid var(--line2); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; color: var(--txt); font: inherit; }
.tcard:active { transform: scale(.97); }
.tcard .bpic { height: 52px; width: 100%; }
.tcard b { font: 700 12.5px var(--serif); }
.tcard small { font-size: 11px; color: var(--mut); }
.tcard.site { border-color: var(--gold2); }
.tcard.off { opacity: .55; }
.tcard.info { cursor: default; width: 150px; background: transparent; border: 0; align-items: flex-start; text-align: left; justify-content: center; }
.tcard.info b { color: var(--gold); font-size: 14px; }
.tcard.info small { font-size: 11.5px; line-height: 1.25; }
.tcard.act { width: 84px; justify-content: center; }
.tcard.act .ic { width: 24px; height: 24px; }

/* Haritadan sürükle bırak */
.bcard { touch-action: pan-x; cursor: grab; }
.tray.dragging { opacity: .28; }
.tray.dragging .bcard { cursor: grabbing; }
.dragchip { position: fixed; z-index: 50; pointer-events: none; width: 64px; height: 56px; transform: translate(-50%, -120%); filter: drop-shadow(0 4px 6px rgba(60, 36, 12, .45)); }
.dragchip img { width: 100%; height: 100%; object-fit: contain; }

/* Basılı tutarak seçim ve imleçler */
.holdring { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid #e0a02c; pointer-events: none; z-index: 6; animation: holdgrow .38s ease-out forwards; }
@keyframes holdgrow { from { transform: scale(1.7); opacity: .1; } to { transform: scale(1); opacity: 1; } }
.holdring[hidden] { display: none; }
.scene canvas { cursor: grab; }
.scene.cur-pointer canvas { cursor: pointer; }
.scene.cur-cross canvas { cursor: crosshair; }
.scene.cur-move canvas { cursor: move; }
.scene.cur-grabbing canvas { cursor: grabbing; }
.scene.cur-no canvas { cursor: not-allowed; }
.scene.cur-select canvas { cursor: cell; }
/* iş imleçleri: odun balta, tarla orak, maden kazma, inşaat çekiç */
.scene.cur-axe canvas { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M6.5 25.5 L21 11' fill='none' stroke='%23fff' stroke-width='6.5'/><path d='M18.5 14.5 L23.5 9.5 L19.5 5.5 Q12 3 10 12 Q15 10.5 18.5 14.5 Z' fill='%23fff' stroke='%23fff' stroke-width='4.5'/><path d='M6.5 25.5 L21 11' fill='none' stroke='%232b1d12' stroke-width='4'/><path d='M6.5 25.5 L21 11' fill='none' stroke='%23a8743f' stroke-width='2.2'/><path d='M18.5 14.5 L23.5 9.5 L19.5 5.5 Q12 3 10 12 Q15 10.5 18.5 14.5 Z' fill='%23c9d1d8' stroke='%232b1d12' stroke-width='1.6'/></svg>") 16 16, pointer; }
.scene.cur-hammer canvas { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M6.5 25.5 L19 13' fill='none' stroke='%23fff' stroke-width='6.5'/><path d='M14 9 L20 3 L28 11 L22 17 Z' fill='%23fff' stroke='%23fff' stroke-width='4.5'/><path d='M6.5 25.5 L19 13' fill='none' stroke='%232b1d12' stroke-width='4'/><path d='M6.5 25.5 L19 13' fill='none' stroke='%23a8743f' stroke-width='2.2'/><path d='M14 9 L20 3 L28 11 L22 17 Z' fill='%238d97a1' stroke='%232b1d12' stroke-width='1.6'/></svg>") 16 16, pointer; }
.scene.cur-pick canvas { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M7 26 L19.5 13.5' fill='none' stroke='%23fff' stroke-width='6.5'/><path d='M9 8 Q25 -1 26 20 Q22 11 16 9.5 Q12 8.5 9 8 Z' fill='%23fff' stroke='%23fff' stroke-width='4.5'/><path d='M7 26 L19.5 13.5' fill='none' stroke='%232b1d12' stroke-width='4'/><path d='M7 26 L19.5 13.5' fill='none' stroke='%23a8743f' stroke-width='2.2'/><path d='M9 8 Q25 -1 26 20 Q22 11 16 9.5 Q12 8.5 9 8 Z' fill='%23b9c2ca' stroke='%232b1d12' stroke-width='1.4'/></svg>") 16 16, pointer; }
.scene.cur-sickle canvas { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M6 26 L11 21' fill='none' stroke='%23fff' stroke-width='6.5'/><path d='M11 21 Q8 8 18 5 Q26 3.5 28 10 Q24 6.5 19 8.5 Q12.5 11.5 13.5 19.5 Z' fill='%23fff' stroke='%23fff' stroke-width='4.5'/><path d='M6 26 L11 21' fill='none' stroke='%232b1d12' stroke-width='4'/><path d='M6 26 L11 21' fill='none' stroke='%23a8743f' stroke-width='2.2'/><path d='M11 21 Q8 8 18 5 Q26 3.5 28 10 Q24 6.5 19 8.5 Q12.5 11.5 13.5 19.5 Z' fill='%23d9b54a' stroke='%232b1d12' stroke-width='1.4'/></svg>") 16 16, pointer; }
.coach .cbtn:disabled { filter: grayscale(.5); }

/* Hesap sayfası */
.plain .wcard { margin: 12px 0; }
.plain .wcard h3, .plain .wcard p { margin: 0; }
.plain .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.tray.above { bottom: 168px; }
.dbtn .ico { font-size: 20px; line-height: 26px; }
.crow .cbtn.pri span { white-space: nowrap; }

.botnav a { position: relative; cursor: pointer; }
.botnav a .bdg { position: absolute; top: 3px; left: 56%; font-style: normal; background: var(--danger); color: #fff; font-size: 11px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.botnav a .bdg[hidden] { display: none; }
.botnav a.alert { color: #a02e24; }
.dock { display: none !important; }
.tray, .coach { bottom: 12px; }
.tray.above { bottom: 118px; }

/* İşçi seçim penceresi (küçük) */
.panel.compact { max-height: 46%; }
.wrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; margin: 4px 0; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(#fdf8ec, #f3e7cd); color: var(--txt); font: inherit; text-align: left; cursor: pointer; }
.wrow:active { transform: scale(.98); }
.wrow.site { border-color: var(--gold2); }
.wrow .wthumb { width: 42px; height: 34px; object-fit: contain; flex: none; }
.wrow .wtxt { display: flex; flex-direction: column; min-width: 0; }
.wrow .wtxt b { font: 700 13px var(--serif); }
.wrow .wtxt small { font-size: 11.5px; color: var(--mut); }
.wact { display: flex; gap: 8px; margin: 8px 0 2px; }
.wact .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (min-width: 900px) { .panel.compact { max-height: none; bottom: auto; } }